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.
aiagenttimelinestepsprogressreasoning
Installation
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
$npx shadcn@latest add @geturui-pro/agent-activity
Also installs: Text Animation
Usage
usage.tsx
1import { AgentActivity } from "@/components/ai/agent-activity";
2
3<AgentActivity
4 title="Fix the failing build"
5 steps={[
6 { id: "1", kind: "thinking", title: "Planning", status: "done", startedAt: t0, endedAt: t1 },
7 { id: "2", kind: "reading", title: "Reading 4 files", status: "active", startedAt: t1, detail: "next.config.ts · package.json" },
8 { id: "3", kind: "editing", title: "Editing next.config.ts", status: "pending" },
9 ]}
10/>
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.