Audit Trail

---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 40,
  slug: 'audit-trail-timeline',
  name: 'Audit Trail',
  category: 'governance-risk',
  subcategory: 'audits-and-logs',
  pillar: 'go',
  description: 'Vertical timeline of governance events — every sign-off, kill-switch fire, and exception, immutable.',
  spec: `## Intent
Render the chronological record that lets an auditor reconstruct exactly who allowed what, when. Without this artefact, GO is theatre.

## Acceptance Criteria
- [ ] Vertical spine with event markers
- [ ] Each event: timestamp, actor, action, severity dot
- [ ] Critical events visually escalated (red dot)
- [ ] Mono typography for forensic legibility

## Constraints
- Append-only mental model — newest at top
- 4 events visible at compendium card size`,
  tags: ['timeline', 'list', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 84, a11y: 'aa', themed: true, animated: false },
};

const events = [
  { time: '14:02', actor: 'AGENT-7',    action: 'Auto-reverted: drift > 35%', tone: 'bg-danger',    pill: 'KILL'  },
  { time: '13:51', actor: 'h.wirjawan', action: 'Same-Person rule waived',    tone: 'bg-attention', pill: 'WAIVE' },
  { time: '13:30', actor: 'governor',   action: 'Signed off SPEC-204 v1.2',   tone: 'bg-success',   pill: 'SIGN'  },
  { time: '13:12', actor: 'AGENT-7',    action: 'Composed PR #1184',          tone: 'bg-ink',       pill: 'AUTO'  },
];
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <div class="flex items-baseline justify-between mb-3">
    <p class="font-mono text-[10px] uppercase tracking-widest opacity-60">Audit trail · today</p>
    <p class="font-mono text-[10px] uppercase tracking-widest opacity-60">UTC</p>
  </div>

  <ol class="relative">
    <div class="absolute start-[7px] top-1 bottom-1 w-1 bg-ink" aria-hidden="true"></div>
    {events.map((e) => (
      <li class="relative ps-6 pb-3 last:pb-0">
        <span class:list={['absolute start-0 top-1 w-4 h-4 border-2 border-black', e.tone]} aria-hidden="true"></span>
        <div class="flex items-baseline gap-2 flex-wrap">
          <span class="font-mono text-[10px] tracking-widest opacity-70 tabular-nums">{e.time}</span>
          <span class:list={['px-1.5 py-px border-2 border-black text-white font-black text-[8px] uppercase tracking-widest', e.tone]}>{e.pill}</span>
          <span class="font-mono text-[10px] truncate">{e.actor}</span>
        </div>
        <p class="text-[11px] font-black leading-tight mt-0.5">{e.action}</p>
      </li>
    ))}
  </ol>
</div>