Agent timeline

Tab

Moves to the timeline's spans (one tab stop), the time scrubber, then play or pause, restart and the speed control.

Arrow leftorArrow right

On a span, moves to the previous or next span in the same row. On the scrubber, steps time by half a second; with Shift, by five seconds.

Arrow uporArrow down

On a span, moves to the nearest span in the row above or below.

HomeorEnd

On a span, jumps to the first or last span in its row. On the scrubber, jumps to the start or the end of the run.

Page uporPage down

On the scrubber, steps time by five seconds.

Enter, Space

On a span, pins it and highlights its handoff path; again to unpin.

Escape

Unpins the pinned span.

• The root is a labelled section. Each row of spans is a group named by its agent label, and every span is a button whose name reads the agent, the kind, the tool, failure, what it did, its time range and tokens; aria-pressed marks the pinned span.
• Spans use a roving tab index, so the chart is one tab stop and arrow keys move between spans by row and by time.
• The scrubber is a slider with a value text such as "12.4s of 26.4s" and full keyboard support; dragging anywhere on the axis moves it.
• Status is never color alone: a failed call shows a cross icon and the word Failed in its card and the legend, a retry shows a retry icon and its note, and the finished state shows a check with the summary.
• A polite live region announces replay, pause and the finished summary. The counting status line is not live, so it never floods a screen reader.
• The span card repeats what the span's accessible name already says, so it is hidden from assistive technology.
• Pointer focus draws no ring; keyboard focus shows Arc's shared focus ring on spans, the scrubber thumb and the controls.

• Bars and the playhead read one CSS variable for the current time, updated every animation frame, so spans grow smoothly without React rendering per frame; React updates counters and states about twenty times a second.
• An active span has a square, solid leading edge and a short shine that stops when it ends; its corner rounds off as it completes. A failed call changes to its failed look with a quick color fade when it returns.
• Connectors draw in with a clip reveal from the side the handoff leaves, about 360ms, and the port dot pops in at the start of a dispatch or after a result lands.
• The span card glides between spans on the morph spring, crossfades its content and springs to its new height; the status line and play button swap with one minimal crossfade.
• When the run ends the playhead fades out and the status settles into the summary.
• Reduced motion starts on the finished run and drops the shine, the connector draw, the card glide and the status crossfades. Playback still works when the person asks for it.

• Fills its container up to the canvas width. Below a 520px container the label column narrows to dot and name, and the model moves into the span card.
• When the plot would be narrower than 300px it scrolls horizontally inside its own frame with the agent labels pinned, and the replay keeps the playhead in view unless the person has just scrolled.
• The status line wraps after a separator, never before, and the counters reserve the width of their final value, so the header never shifts while it counts.
• Hover cards are anchored inside the component and flip below the row when there is no room above.

• The run is normalized once per data change: spans sorted, connector shapes and totals memoized.
• Per frame the clock writes one CSS variable; widths, the playhead and connectors are pure CSS from it. React re-renders at most about twenty times a second while playing, and memoized span buttons only update when their state changes.
• The replay clock only runs while the timeline is in view, and stops when the run ends.
• Handles a few hundred spans comfortably; for long traces, pass a window of the run or aggregate tiny spans.

• Choose it to show one orchestrated multi-agent run as a timeline: which agent did what, when, in parallel, with handoffs. It fits a card 360 to 760px wide.
• Put the orchestrator first. Order subagents so connectors pass through idle rows: the agent that returns first sits right under the orchestrator, and dispatches go to the deepest row first.
• Give each handoff a time that matches the spans around it: a dispatch just before the target's first span, a result just after the source's last span. The shape is inferred from those gaps.
• Use kind "waiting" for an agent that is blocked on others, so parallelism and idle time read at a glance and the summary's speedup counts only real work.
• Mark a failed tool call with status "failed" and a detail message, and the call that retried it with retry: true.
• Real model and tool marks are built in by name; pass mark for anything else. Brand marks are sample content, never implied endorsements.

The full library index for assistants is at /llms.txt.