Tool-Call Trace Row

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

export const meta: CompendiumMeta = {
  id: 622,
  slug: 'tool-call-trace-row',
  name: 'Tool-Call Trace Row',
  category: 'ai-collaboration',
  subcategory: 'reasoning-and-trace',
  pillar: 'co',
  description: 'A single tool invocation in a trace — tool name, arguments preview, exit status.',
  spec: `## Intent
Reasoning rows describe thought; tool-call rows describe action. Auditors need to see what the agent did to the outside world: which tool, what arguments, what came back.

## Acceptance Criteria
- [ ] Tool name on the leading edge, monospace
- [ ] Argument preview in a code-block strip, truncated
- [ ] Exit status chip — OK / ERR / TIMEOUT
- [ ] Returned-byte count in the trailing slot

## Constraints
- Pure markup
- Theme-aware via tokens
- overflow-hidden, no horizontal scroll`,
  tags: ['list', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 89, a11y: 'aa', themed: true, animated: false },
};

const call = {
  tool: 'fs.read',
  args: "{ path: 'src/auth/oauth.ts', range: [1, 42] }",
  status: 'OK' as const,
  bytes: 1280,
};
const statusToken = call.status === 'OK' ? 'success' : call.status === 'TIMEOUT' ? 'attention' : 'danger';
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black overflow-hidden">
  <header class="px-3 py-1.5 border-b-2 border-black flex items-baseline justify-between">
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-60">// tool call</span>
    <span class="font-mono text-[10px] tabular-nums opacity-60">t+0.84s</span>
  </header>
  <div class="px-3 py-2 flex items-center gap-2 overflow-hidden">
    <span class="font-mono text-[11px] font-black shrink-0">{call.tool}</span>
    <span class={`font-black text-[9px] uppercase tracking-widest px-1.5 py-0.5 border-2 border-black bg-${statusToken} ${call.status === 'OK' ? 'text-black' : 'text-white'} shrink-0`}>{call.status}</span>
    <span class="ms-auto font-mono text-[10px] tabular-nums opacity-60 shrink-0">{call.bytes}B</span>
  </div>
  <div class="mx-3 mb-3 px-2 py-1.5 border-2 border-black bg-ink text-paper font-mono text-[10px] truncate overflow-hidden">
    <span class="opacity-60">args:</span> {call.args}
  </div>
</div>