A replay of a multi-agent run with one swim lane per agent, task bars that fill as a playhead sweeps the time axis and curved handoff links that draw in when work passes between agents. Drag the track or use the arrow keys to scrub, and a status line narrates the latest event.
Run 2291 · Ship the pricing page
00:00 / 01:30
npx shadcn@latest add https://hyperblur.dev/r/agent-run-lanes.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/agent-run-lanes.tsx.
import { AgentRunLanes } from "@/components/hyperblur/agent-run-lanes"
<AgentRunLanes autoPlay loop speed={1} />| Prop | Type | Default | Description |
|---|---|---|---|
| agents | { id: string; name: string; role?: string; color: string }[] | four sample agents | Lanes from top to bottom. |
| tasks | { id: string; agent: string; label: string; start: number; end: number; status?: "ok" | "error" }[] | a sample run | Task bars. start and end are in seconds; error tasks finish in red and are counted as retries. |
| handoffs | { from: string; to: string; label: string }[] | six sample handoffs | Links from the end of one task to the start of another. |
| duration | number | Length of the time axis in seconds. Defaults to two seconds after the last task. | |
| title | string | "Run 2291 · Ship the pricing page" | Heading next to the play button. |
| time | number | Controlled playhead position in seconds. Pair with onTimeChange. | |
| defaultTime | number | 0 | Initial playhead position when uncontrolled. |
| onTimeChange | (time: number) => void | Called as the playhead moves. | |
| autoPlay | boolean | true | Start the replay on mount. With reduced motion the run is shown finished. |
| loop | boolean | true | Restart after a short pause at the end. |
| speed | number | 1 | Replay speed multiplier. At 1 a second of run time takes about a sixth of a second. |
| accent | string | "#2f7bff" | Color of drawn handoff links and focus rings. |