## Agent Steps (S—052)

A live tool-call timeline for agent runs: shimmer on the active step, ticks on finished ones, expandable details.

- URL: https://sundaeui.dev/components/agent-steps
- Category: UI components · Art direction: Understated
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/agent-steps.json`
- Tags: tool-calls, steps, timeline, agent, progress, ai

Shows what an agent is doing while it works. The running step shimmers with a spinner; finished steps draw a tick and show their time.
Each step can carry a detail line (a query, files read, test results) that expands in place.

### Usage

```tsx
import { AgentSteps } from '@/components/sundae/agent-steps'

<AgentSteps
  current={2}
  steps={[
    { title: 'Searched the docs', detail: '6 results', seconds: 2 },
    { title: 'Read 3 files', seconds: 4 },
    { title: 'Drafted the patch', seconds: 6 },
  ]}
/>
```

### Props

- `steps` (`AgentStep[]`, required): Title, optional detail and seconds.
- `current` (`number`, required): Index of the running step; steps.length when done.
- `title` (`string`, default `'Working'`): Heading while running.
- `density` (`'comfy' | 'compact'`, default `'comfy'`): Row spacing.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Agent and copilot UIs that run multi-step tool calls.
- Long background jobs with a few named phases.

### When not to use

- Single quick actions: a spinner is enough.

### Accessibility

- An ordered list; each step’s state is in visually hidden text ("running", "done").
- Details toggle with aria-expanded/aria-controls.
- The step count is a polite live region. Reduced motion removes spinners and shimmer.

### Keyboard

- Tab: Move between steps
- Enter / Space: Show or hide details