## Reasoning Trace (S—475)

An animated AI chain of thought: streaming thoughts, searches with sources, reads and tool calls.

- URL: https://sundaeui.dev/components/reasoning-trace
- Category: UI components · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/reasoning-trace.json`
- Tags: timeline, thinking, chain-of-thought, agent, llm, reasoning, streaming, ai

Shows how an AI got to its answer. Steps arrive one at a time on a rail that draws itself: thoughts stream in word by word, searches show their query and the sources that came back, reads list the files, and tool calls show what was called and what it returned.
While it works, the header shimmers with a live timer; when it finishes it reads "Thought for 6s" and can collapse to that one line, the way people want to see reasoning after the fact. Replay runs it again.
Feed it your model’s real steps as they stream, or a finished trace to show afterwards (autoplay={false}).

### Usage

```tsx
import { ReasoningTrace } from '@/components/sundae/reasoning-trace'

<ReasoningTrace
  collapseOnDone
  steps={[
    { kind: 'think', title: 'Understanding the request', text: 'They want…' },
    { kind: 'search', title: 'Searching', query: 'pricing section', sources: [{ name: 'Docs' }] },
    { kind: 'tool', title: 'Installing', call: 'get_component_source(…)', result: '2 files' },
    { kind: 'answer', title: 'Done', text: 'Added the pricing section.' },
  ]}
/>
```

### Props

- `steps` (`TraceStep[]`, required): think, search, read, tool or answer steps, each with a title.
- `autoplay` (`boolean`, default `true`): Play on mount; false shows the finished trace.
- `wordMs` (`number`, default `38`): Milliseconds per word while streaming.
- `stepMs` (`number`, default `520`): Pause between steps.
- `collapseOnDone` (`boolean`, default `false`): Collapse to "Thought for Ns" when finished.
- `onDone` (`(seconds: number) => void`): Called when the trace finishes.

### When to use

- Showing an AI or agent’s reasoning while it works or after it answers.
- Making long-running agent tasks feel transparent.

### When not to use

- Simple progress with no reasoning to show: use Agent Steps.
- A single loading state: use a spinner or skeleton.

### Accessibility

- The header is a button with aria-expanded controlling the step list.
- A polite live region announces each step title and the finish, not every streamed word.
- Reduced motion shows the finished trace at once with no streaming, shimmer or pulse.