Agent Trace Log

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

export const meta: CompendiumMeta = {
  id: 49,
  slug: 'agent-trace-log',
  name: 'Agent Trace Log',
  category: 'ai-collaboration',
  subcategory: 'reasoning-and-trace',
  pillar: 'go',
  description: 'A four-line reasoning trace — what the agent read, drafted, self-checked, and shipped.',
  spec: `## Intent
Surface the agent's reasoning trail as an audit artefact. Every action should be traceable to a prior input. Without this, the agent's output is opinion; with this, it is reproducible.

## Acceptance Criteria
- [ ] Four sequential trace entries with timestamps
- [ ] Each entry names a verb (read / drafted / checked / opened)
- [ ] Visually log-like (monospace, fixed-width lines)
- [ ] Includes a terminal-style cursor on the active line

## Constraints
- Theme-aware via tokens`,
  tags: ['list', 'animated', 'reduced-motion', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 84, a11y: 'aa', themed: true, animated: true },
};

const entries = [
  { t: '14:02:01', verb: 'read',    obj: 'SPEC-019 · v1.3.0 · sha 8f3a' },
  { t: '14:02:04', verb: 'drafted', obj: '42 lines · src/auth/oauth.ts' },
  { t: '14:02:09', verb: 'checked', obj: 'AC #2 → pass · AC #4 → defer' },
  { t: '14:02:11', verb: 'opened',  obj: 'PR #214 · sign-off pending'   },
];
---

<div data-this-component class="w-full bg-ink text-paper border-4 border-black shadow-nb-sm font-mono overflow-hidden">
  <header class="flex items-center justify-between px-3 py-1.5 border-b-2 border-paper/30">
    <span class="text-[10px] uppercase tracking-widest opacity-70">trace · agent 04A</span>
    <span class="text-[10px] tabular-nums opacity-50">4 / 4 steps</span>
  </header>

  <ol class="px-3 py-2 text-[10px] leading-snug">
    {entries.map((e, i) => (
      <li class="flex items-baseline gap-2 py-0.5">
        <span class="tabular-nums opacity-50 shrink-0">{e.t}</span>
        <span class:list={[
          'uppercase font-black tracking-wider shrink-0 w-14',
          e.verb === 'opened' ? 'text-success' : 'text-do',
        ]}>{e.verb}</span>
        <span class="opacity-90 truncate">{e.obj}</span>
        {i === entries.length - 1 && (
          <span class="ms-auto inline-block w-2 h-3 bg-paper trace-cursor" aria-hidden="true"></span>
        )}
      </li>
    ))}
  </ol>
</div>

<style>
  @keyframes trace-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
  [data-this-component] .trace-cursor { animation: trace-blink 1s steps(1) infinite; }
  @media (prefers-reduced-motion: reduce) {
    [data-this-component] .trace-cursor { animation: none; opacity: 1; }
  }
</style>