Agent Timeline
One orchestrated agent run on a shared time axis — the orchestrator and its subagents in rows, handoffs drawn between them, and a playhead that replays thinking, tool calls and waiting while the header counts time, tokens and cost.
The card is a composition, so it follows your theme preset. Copy the source from the Code tab and replace the sample run with your own traces; the replay here is simulated.
What it's made of
| Part | Component |
|---|---|
| Card shell | Card, filled on a grouped page |
| Each span | A button with a Hover Card for what it did |
| Time axis and scrubbing | Slider, from 0 to the run's length |
| Play, pause and restart | Icon Button |
| Playback speed | Segmented Control |
| Agent colours | The chart series tokens, --chart-1 to --chart-6; the orchestrator is neutral |
Reading the timeline
Each row is one agent: a colour dot, its name and the model it runs on, the orchestrator on top. Spans sit on one shared time axis and say what kind of work they are by their fill:
- Thinking is a light tint of the agent's colour.
- A tool call is the agent's colour, solid.
- Waiting is hatched: the agent is blocked on others, so idle time and parallel work read at a glance.
Thin elbow connectors show work handed to a subagent and results coming back, with a dot where they meet the orchestrator. A failed tool call turns into a cross when it ends, and the call that retried it shows a retry mark.
The header counts elapsed time, tokens and cost while the run plays, and settles into a summary when it ends: how many agents, how long, how much faster than running the same work one agent at a time, and what it cost. The counters keep the width of their final value, so the line never shifts while it counts.
Exploring a run
- Hover or focus a span for a card with what it did, its tool, duration and tokens, why it failed, and what was handed over.
- Press a span to pin it and trace its handoff path: everything off the path steps back. Press it again, or press Escape, to let go.
- Drag along the axis to scrub to any moment; the replay pauses there.
- Play, pause, restart and switch between 1x and 2x below the chart. Play on a finished run replays it from the start.
States
| State | What you see |
|---|---|
| Ready | The run at 0s, nothing drawn yet. |
| Running | The playhead sweeps; the active span grows with a square leading edge; connectors draw in as handoffs happen. |
| Paused | Everything holds where it was; the status says Paused. |
| Finished | The playhead fades, every span is drawn, and the status becomes the summary with a check. |
| Failed call | A red cross in the span and a Failed line in its card, with the reason. |
| Retried call | A retry mark in the span and a note in its card. |
| Pinned | One span pressed; spans and connectors off its handoff path step back. |
Motion
Every movement explains a change in the run, and none plays when the card first appears.
- Bars and the playhead read one CSS variable for the current time, written every frame, so spans grow smoothly without a render per frame. The numbers update about twenty times a second.
- A connector draws in from the side the handoff leaves, and its dot appears when the work lands.
- The status word swaps by a short crossfade, and the playhead fades out when the run ends.
- The replay only runs while the card is in view.
With reduced motion the card starts on the finished run, connectors appear without drawing, and the status swaps in place. Play still replays the run when asked.
Keyboard and screen readers
- The spans are one tab stop. Left and Right move along a row, Up and Down to the nearest span in the row above or below, Home and End to the ends of a row. Enter or Space pins a span; Escape lets it go.
- Each row is a group named by its agent and model. Each span is a button whose name reads the agent, the kind of work, the tool, whether it failed, what it did, its time range and its tokens; a pinned span is pressed.
- The axis is a slider named Run time, read as "12.4s of 26.4s". Arrow keys step a tenth of a second, Page Up and Page Down five seconds.
- The span card repeats what the button's name already says, so it is not announced on hover or focus.
- Replay, pause and the finished summary are announced once in a polite status region; the counting status line is not live.
- Status is never colour alone: a failed call has a cross and the word Failed, a retry has its own mark, and the finished state has a check.
In a narrow card
Below 32.5rem of card width the label column narrows to the dot and the name; the model stays in each span's card. When the plot would be narrower than 18.75rem it scrolls inside its own frame with the agent names pinned, and the replay keeps the playhead in view unless you have just scrolled. On touch a tap opens a span's card and pins it.