AI primitive
ReasoningTrace
Collapsible chain-of-thought viewer with step nesting, run timing and a per-step expand/collapse. The pattern Anthropic and OpenAI publish for transparent reasoning UIs.
Usage
Pick your edition with the tabs. Selection syncs across all docs.
tsx
import { ReasoningTrace } from '@/components/organisms'
<ReasoningTrace
steps={[
{ id: '1', label: 'Identify intent', detail: 'summarize the deck' },
{ id: '2', label: 'Read the attached file' },
{ id: '3', label: 'Compress to 3 bullets' },
{ id: '4', label: 'Format with markdown' },
]}
totalMs={2100}
defaultOpen={false}
/>Props
Same surface in both editions; HTML version exposes equivalents through Alpine x-data.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | ReasoningStep[] | [] | Ordered list of reasoning steps. |
| totalMs | number | — | Total reasoning time in milliseconds (shown in header). |
| defaultOpen | boolean | false | If true, the trace renders expanded by default. |
| nested | boolean | false | Allow steps to nest sub-steps via step.children. |
Accessibility
role
Wrapper is a <details>; the toggle is a <summary> with aria-expanded.
keyboard
Enter/Space toggle the panel.
motion
Expand animation respects prefers-reduced-motion.