Reasoning Step Row

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

export const meta: CompendiumMeta = {
  id: 621,
  slug: 'reasoning-step-row',
  name: 'Reasoning Step Row',
  category: 'ai-collaboration',
  subcategory: 'reasoning-and-trace',
  pillar: 'co',
  description: 'A single horizontal row of a reasoning trace — step index, verb, target, duration.',
  spec: `## Intent
A trace is a list of rows. This atom is one row: index, verb, target, duration. Designed to stack densely so a 30-step trace fits on one screen without overflow.

## Acceptance Criteria
- [ ] Step index (tabular-nums) on the leading edge
- [ ] Coloured verb chip from a closed verb set
- [ ] Target text truncates with ellipsis, never wraps
- [ ] Duration on the trailing edge in monospace

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

const row = { idx: 14, verb: 'READ', target: 'SPEC-019 · auth/session.ttl · v1.3.0', ms: 42 };
---

<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">// reasoning row</span>
    <span class="font-mono text-[10px] uppercase tracking-widest">step / 30</span>
  </header>
  <div class="flex items-center gap-2 px-3 py-2 overflow-hidden">
    <span class="font-mono text-[11px] tabular-nums font-black w-6 shrink-0">{row.idx.toString().padStart(2, '0')}</span>
    <span class="font-black text-[10px] uppercase tracking-widest px-2 py-0.5 border-2 border-black bg-co text-black shrink-0">{row.verb}</span>
    <span class="font-mono text-[11px] flex-1 min-w-0 truncate opacity-90">{row.target}</span>
    <span class="font-mono text-[10px] tabular-nums opacity-60 shrink-0">{row.ms}ms</span>
  </div>
  <footer class="px-3 py-1.5 border-t-2 border-black font-mono text-[9px] uppercase tracking-widest opacity-60">closed · audit-ready</footer>
</div>