## Agent Thinking (S—485)

The “agent is working” row above a chat composer: four animated indicators, a shimmering label and a live timer.

- URL: https://sundaeui.dev/components/agent-thinking
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/agent-thinking.json`
- Tags: chat, thinking, spinner, agent, loader, llm, status, animation, loading, ai

A small indicator, a label and an elapsed timer for the moment between sending a message and the first token. Four genuinely different animations: Wave, a diagonal crest rolling across a 4 × 4 dot grid; Spin, a bright head with a fading tail orbiting a 3 × 3 grid; Stars, three sparkles twinkling in turn; and Infinity, a comet with a two-part tail running a figure eight.
The label shimmers in the indicator’s tone while the agent runs. When you set running={false} the animation rests and the label becomes “Thought for 4.2s” (or your own doneLabel).
Every variant is CSS and SVG animation, so there’s no JavaScript frame loop; the only timer is one interval for the clock, cleared when it stops. Reduced motion shows a still indicator and a once-a-second clock.

### Usage

```tsx
import { AgentThinking } from '@/components/sundae/agent-thinking'

{status === 'thinking' && <AgentThinking variant="infinity" label="Reasoning" tone="blueberry" startedAt={sentAt} />}

// Keep it after the answer arrives, as a quiet record:
<AgentThinking variant="wave" running={false} startedAt={sentAt} />
```

### Props

- `variant` (`'wave' | 'spin' | 'stars' | 'infinity'`, default `'wave'`): Which animation.
- `label` (`string`, default `'Thinking'`): Text beside the indicator.
- `tone` (`'neutral' | 'cherry' | 'mint' | 'blueberry' | 'butterscotch'`, default `'neutral'`): Indicator colour; also tints the shimmer.
- `color` (`string`): Any CSS colour, overriding tone.
- `shimmer` (`boolean`, default `true`): Light sweeping across the label while running.
- `showTimer` (`boolean`, default `true`): Show the elapsed time.
- `startedAt` (`number`): Date.now() when work began. Defaults to mount time.
- `running` (`boolean`, default `true`): False stops the animation and shows doneLabel.
- `doneLabel` (`(seconds: number) => string`, default `"Thought for Ns"`): Label once finished.
- `size` (`'sm' | 'md' | 'lg'`, default `'md'`): 14, 18 or 24 px indicator.
- `className / style` (`string / CSSProperties`): Custom styling. Theme with .is-light / .is-dark or a .dark ancestor.

### When to use

- Between sending a message to an AI and the first streamed token.
- Background agent tasks shown inline in a thread.

### When not to use

- Showing what the agent is actually doing: use Reasoning Trace or Web Search.
- Page or data loading: use a skeleton.

### Accessibility

- The row is a polite status region, so “Thinking” and the finished “Thought for 4.2s” are announced; the ticking timer is hidden from screen readers.
- Indicators are decorative (aria-hidden).
- With reduced motion, all animation and the shimmer stop; the clock updates once a second.