# Agent Timeline

> Live timeline of an agent's steps — thinking, searching, reading, editing — with morphing status icons, ticking timers, expandable details and a shimmer on the active step.

- Collection: AI Agents
- Tier: pro
- Docs: https://geturui.com/docs/agent-activity
- Install: `npx shadcn@latest add @geturui-pro/agent-activity`
- Dependencies: motion, lucide-react

## Usage

```tsx
import { AgentActivity } from "@/components/ai/agent-activity";

<AgentActivity
  title="Fix the failing build"
  steps={[
    { id: "1", kind: "thinking", title: "Planning", status: "done", startedAt: t0, endedAt: t1 },
    { id: "2", kind: "reading", title: "Reading 4 files", status: "active", startedAt: t1, detail: "next.config.ts · package.json" },
    { id: "3", kind: "editing", title: "Editing next.config.ts", status: "pending" },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| steps | `AgentStep[]` | — | { id, kind, title, status, detail?, startedAt?, endedAt? }. Update status to drive the animation. |
| title | `string` | "Agent activity" | Heading above the timeline. |
| defaultExpanded | `string[]` | — | Step ids expanded on first render. |

## Accessibility

- Each step is a button with aria-expanded when it has details; status is announced as a word.
- Overall progress is a progressbar; the summary line is a polite live region.
- With reduced motion, icons swap without rotation and the spinner ring is hidden.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.