Agent Timeline
A vertical timeline of agent steps with live status, a spring-filled connector, and collapsible reasoning or tool-output bodies that morph open.
Agent run
- Indexed 128 files across 6 packages.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/agent-timeline.json"Each AgentStep reflects a status (pending, running, success,
error). Running steps pulse and the connector below fills as the step
completes. Steps with children become collapsible — click to morph the body
open.
Usage
tsx
import { AgentTimeline, AgentStep } from "@/components/godui/agent-timeline";tsx
<AgentTimeline>
<AgentStep status="success" title="Step one" meta="0.4s">
Optional collapsible body.
</AgentStep>
<AgentStep status="running" title="Step two" last />
</AgentTimeline>Props
AgentStep
| Prop | Type | Default | Description |
|---|---|---|---|
status | "pending" | "running" | "success" | "error" | "pending" | Drives the node icon and connector fill. |
title | ReactNode | — | Step label. |
meta | ReactNode | — | Secondary label (duration, tool name). |
children | ReactNode | — | Collapsible body. Omit for a leaf step. |
defaultOpen | boolean | false | Start expanded. |
last | boolean | false | Hides the connector below the step. |