Reasoning Step

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

export const meta: CompendiumMeta = {
  id: 51,
  slug: 'reasoning-step',
  name: 'Reasoning Step',
  category: 'ai-collaboration',
  subcategory: 'reasoning-and-trace',
  pillar: 'co',
  description: 'A single reasoning frame — input observed, consideration weighed, output produced.',
  spec: `## Intent
A reasoning trace is composed of frames. Each frame is a closed loop: input observed → consideration weighed → output emitted. Rendering one frame makes the agent's decision atomic, reviewable, and re-runnable.

## Acceptance Criteria
- [ ] Three labelled phases (input · consideration · output)
- [ ] Visual flow between phases
- [ ] Marks which spec criterion the step served
- [ ] Stamped with a step number

## Constraints
- Compact vertical layout that fits a card`,
  tags: ['card', 'list', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 84, a11y: 'aa', themed: true, animated: false },
};
---

<article data-this-component class="w-full bg-paper text-black border-4 border-black shadow-nb-sm overflow-hidden">
  <header class="flex items-baseline justify-between px-3 py-2 border-b-2 border-black bg-co">
    <span class="font-mono text-[10px] uppercase tracking-widest">step · 03 / 07</span>
    <span class="font-mono text-[10px] uppercase tracking-widest">serves AC #2</span>
  </header>

  <ol class="divide-y-2 divide-black">
    <li class="px-3 py-2">
      <p class="font-mono text-[9px] uppercase tracking-widest opacity-60 mb-0.5">input</p>
      <p class="text-[11px] leading-snug">SPEC-019 line 14: "session expires after 24h"</p>
    </li>
    <li class="px-3 py-2 bg-do/15 relative">
      <span class="absolute -top-1.5 start-3 font-black text-[11px] select-none" aria-hidden="true">↓</span>
      <p class="font-mono text-[9px] uppercase tracking-widest opacity-60 mb-0.5">consideration</p>
      <p class="text-[11px] leading-snug">JWT exp claim must match; refresh token policy is unspecified — defer.</p>
    </li>
    <li class="px-3 py-2 relative">
      <span class="absolute -top-1.5 start-3 font-black text-[11px] select-none" aria-hidden="true">↓</span>
      <p class="font-mono text-[9px] uppercase tracking-widest opacity-60 mb-0.5">output</p>
      <p class="text-[11px] leading-snug">Set <code class="font-mono">exp = now + 24h</code>. Flagged refresh for human review.</p>
    </li>
  </ol>

  <footer class="px-3 py-1.5 border-t-2 border-black bg-ink text-paper font-mono text-[9px] uppercase tracking-widest flex items-center justify-between">
    <span>frame · closed</span>
    <span class="opacity-70">0.42s · 1,204 tok</span>
  </footer>
</article>