A vertical trace of an agent run. Each span shows a status icon, a nested name and a bar sized to its start and duration, and spans with a payload expand in place.
npx shadcn@latest add https://hyperblur.dev/r/agent-trace-timeline.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/agent-trace-timeline.tsx.
import { AgentTraceTimeline } from "@/components/hyperblur/agent-trace-timeline"
<AgentTraceTimeline title="Run 4821" spans={[{ id: "run", name: "agent.run", start: 0, duration: 3200 }, { id: "tool", name: "search_docs", start: 300, duration: 900, depth: 1, payload: '{ "results": 6 }' }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| spans | { id: string; name: string; kind?: string; start: number; duration: number; depth?: number; status?: "ok" | "error" | "running"; payload?: string }[] | a sample run | Spans in display order. start and duration are in milliseconds, depth sets the nesting level and payload makes the row expandable. |
| title | string | "Run 4821" | Heading shown above the timeline. |
| total | number | Length of the time axis in milliseconds. Defaults to the end of the last span. | |
| accent | string | "#2f7bff" | Color of the running span and the focus ring. |
| expandedId | string | null | Controlled id of the expanded span. Pair with onExpandedChange. | |
| defaultExpandedId | string | null | null | Initially expanded span when uncontrolled. |
| onExpandedChange | (id: string | null) => void | Called when a span is expanded or collapsed. |