Agent timelinePro

• Type: Component (special)
• Access: Xzero Pro
• Page: https://ui.xzero.co.uk/components/agent-timeline
• Markdown: https://ui.xzero.co.uk/components/agent-timeline/markdown
• Source file: registry/components/agent-timeline/agent-timeline.tsx
• Dependencies: motion, lucide-react
• Keywords: special, motion, ai, new, agent timeline, multi-agent, orchestrator, subagents, agent trace, gantt, handoff, tool calls, run replay, playhead, scrubber, tokens, cost, parallel agents, llm

When to use

• Showing how an orchestrator split work across subagents and how long each part took, in a run history, a trace viewer or a debugging panel.
• Replaying a finished agent run in a product demo or changelog, with real numbers for time, tokens and cost.
• Following a multi-agent run live as events stream in from your backend.

When not to use

• Use agent-orchestrator for a full screen of agent lanes with streaming text and messages; this timeline is the compact, reusable view of timing.
• Use observability-trace for distributed request tracing across services rather than agents.
• Use agent-run or research-run when people need the agent's steps, sources and answer, not the timing.
• Use tool-call for the detail of a single tool invocation, and agent-status for one agent's current state.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/agent-timeline

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { AgentTimeline } from "@/components/xzero/agent-timeline/agent-timeline";

// The sample run, replaying.
<AgentTimeline />

// A finished run from your traces renders complete, ready to replay.
<AgentTimeline
  run={{
    title: "Weekly churn report",
    agents: [
      { id: "lead", name: "Orchestrator", model: "Claude Opus 5.5", price: 8 },
      { id: "sql", name: "Analyst", model: "Claude Haiku 5.5", price: 0.2 },
    ],
    spans: [
      { agentId: "lead", kind: "thinking", start: 0, end: 1.4, label: "Planned the report", tokens: 1200 },
      { agentId: "lead", kind: "waiting", start: 1.4, end: 6.2, label: "Waiting on the analyst" },
      { agentId: "sql", kind: "tool", tool: "PostgreSQL", start: 1.7, end: 4.1, label: "Pulled churn by plan", tokens: 2400 },
      { agentId: "sql", kind: "thinking", start: 4.1, end: 5.9, label: "Summarized the numbers", tokens: 900 },
    ],
    handoffs: [
      { from: "lead", to: "sql", at: 1.4, label: "Churn by plan, last 8 weeks" },
      { from: "sql", to: "lead", at: 6.2, label: "Churn is up on the Team plan" },
    ],
  }}
  onSpanSelect={span => console.log(span?.label)}
/>

// Live: keep appending events to the run, leave end off open spans.
<AgentTimeline run={liveRun} live={status === "running"} />

API reference

AgentTimeline

A compact timeline of one orchestrated agent run. Each row is an agent with a color dot, its name and its model with the provider mark, the orchestrator on top. Spans on a shared time axis show thinking (a tint of the agent color), tool calls (solid) and waiting (hatched), and thin elbow connectors show work handed to a subagent and results coming back, with a dot where they meet the orchestrator. The run replays live: a playhead sweeps, the active span grows with a square leading edge and a short shine, connectors draw in as handoffs happen, and the header counts elapsed time, tokens and cost until it settles into a summary such as "5 agents · 26.4s · 1.5x faster than sequential · $0.16". Hover or focus a span for a card with what it did, its tool, duration, tokens and handoffs; click to pin it and dim everything off its handoff path. A failed tool call turns into a cross with a Failed label when it ends, and its retry shows a retry icon. Play, pause, restart, a speed control and scrubbing along the axis drive the replay; passing a finished run renders it complete, and live mode follows a run in progress.

Prop	Type	Default	Description
run	AgentTimelineRun	sampleRun	The run: { title?, agents, spans, handoffs?, duration?, startedAt? }. Rows follow agents in order and the first agent is the orchestrator. Defaults to a sample incident investigation with five agents, a failed query and a retry.
agents	AgentTimelineAgent[]	–	Overrides run.agents. Each agent is { id, name, model?, role?, color?, mark?, price? }. color defaults to neutral for the first agent and --series-1 to --series-4 after it; mark is inferred from the model name for Claude, GPT and Gemini; price is a blended USD rate per million tokens used for cost.
spans	AgentTimelineSpan[]	–	Overrides run.spans. Each span is { id?, agentId, kind: "thinking" | "tool" | "waiting", start, end?, label, detail?, tool?, tokens?, cost?, status?: "ok" | "failed", retry? } with times in seconds from the start of the run. tool is a name (GitHub, Web search, PostgreSQL and Notion have built-in marks) or { name, mark }. Leave end out while a span is open in a live run.
handoffs	AgentTimelineHandoff[]	–	Overrides run.handoffs. Each handoff is { from, to, at, label? }. The connector shape is inferred: a dispatch drops from the source at at and enters the target's next span, a result leaves the end of the source's last span and rises into the target.
title	string	–	Heading. Defaults to run.title, then "Agent run".
autoPlay	boolean	true for the sample, false with data	Replay from zero when the timeline scrolls into view. Without it a run renders finished, ready to replay. Reduced motion always starts finished until the person presses play.
speed	number	1	Starting playback speed. 1 is real time.
speeds	number[]	[1, 2]	Options in the speed control. The control hides when only one speed remains.
live	boolean	false	Follow a run in progress: the clock runs from run.startedAt (epoch ms) or from mount, open spans grow to now, the axis extends in calm steps and the playback controls hide. Append spans and handoffs as events arrive and set live to false when the run ends; the timeline settles on the summary.
onSpanSelect	(span: AgentTimelineSpan | null) => void	–	Called when a span is pinned, with the span, or unpinned, with null.
onComplete	() => void	–	Called once each time a replay reaches the end or a live run ends.
className	string	–	Class on the root element.
style	CSSProperties	–	Inline style on the root, for example to override --series-1 to --series-4.

Keyboard interactions

Keys	Action
Tab	Moves to the timeline's spans (one tab stop), the time scrubber, then play or pause, restart and the speed control.
Arrow left / Arrow 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 up / Arrow down	On a span, moves to the nearest span in the row above or below.
Home / End	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 up / Page 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.

Accessibility

• 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 Xzero's shared focus ring on spans, the scrubber thumb and the controls.

Motion

• 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.

Responsive behavior

• 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.

Performance

• 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.

Notes for AI

• 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.

Related

• Agent orchestrator: A lead agent splits a goal into a plan, fans the subtasks out to parallel worker lanes and merges what comes back, with each lane's model, progress and result in view.
• Agent run: A single card that follows one AI coding agent through a task: steps stream in with the live one shimmering, tool calls open in place, and the agent stops on a two-file diff for you to approve or send back before it writes. When the run ends, the steps fold into one line and a result shows the files changed, the checks that passed and a pull request button.
• Research run: Deep research that plans searches, reads sources with their marks, and streams a cited answer where every chip lights up the sentence it supports.
• Tool call: A tool call row for agent transcripts: the tool's mark and the call in plain words, a live state while it runs, and the input and output a click away, with approval and retry when needed.
• Agent status: A compact live status pill for a running AI agent: the agent's mark in a live ring, the current activity and an elapsed timer, opening into the steps so far.
• Agent plan: The plan an agent writes before it acts: edit, reorder or add steps while it is a draft, then watch it work through them as a live checklist.
• Context window: An AI context window as a grid of 200 cells: the system prompt, tools, files, summary and messages fill it in order, a threshold row marks where compaction starts, and sending a message, attaching a file or compacting shows exactly how much still fits.

Also in ai

• Reasoning block: The collapsible thinking block of an AI reply. While the model thinks, a shimmering label counts the seconds and the latest reasoning streams underneath. When it finishes, it folds to "Thought for 7s" and opens to show the full reasoning as calm steps with headings.
• Source cards: A row of cited sources under an AI answer where cards stream in with real site marks while the model searches, the overflow collapses into a stack of favicons, hovering lifts a preview with the passage, and an inline [n] citation highlights its card.
• Model card: A model details card where switching models rolls every price, limit and score in place, a token slider estimates monthly cost live, and benchmark bars show each model's rank on hover. Compare crossfades to a side-by-side table against any rival with the better values marked, and the card never changes size.
• AI workflow: A Linear-style AI workflow card where a Gmail trigger, a Claude step, a branch and Slack and Linear actions sit on one hairline rail, and a test run glides down it, opening each step's output inline. Steps are added from a compact command menu with real app marks.
• Code suggestion: An AI code edit suggestion where the model's proposed changes stream into a small editor panel as inline diff hunks, and you accept or reject each one, or all at once with Cmd+Enter. Accepted hunks fold into the file with a smooth height change.
• Ghost text: An inline AI autocomplete where muted ghost text continues your sentence exactly at the caret and Tab turns it solid in place. Cmd+Right takes it one word at a time, Escape fades it away, and a calm chip shows the model behind it.
• Image generation: An image generation card where four images resolve as a pixel mosaic, from coarse colour blocks to full detail under a soft shimmer, each with its own progress ring. Pick one to upscale with a sweeping pixel band, vary or download it, with real provider marks and a built-in simulation.
• Dictation button: A chat composer with voice input, where the mic springs into a recording pill with a smooth live waveform, a timer, and cancel and insert buttons. Words stream into the field as you speak, muted until the recognizer settles them.
• Speech player: A read-aloud player for AI replies. The Read aloud button in the message's action row turns into a compact player with play, a scrubbable progress bar, speed and a voice picker, and a highlight follows the spoken word through the reply, karaoke style.
• Meeting summary: An AI meeting notes card: the header shows the Google Meet or Zoom mark, the attendees and the duration. Summary, Decisions and Action items stream in after a short summarizing pass. Hover any line to see the transcript quote it came from, then check off action items or send them to Linear or Notion.
• Reply draft: An AI email reply drafter where Claude streams a reply under a received Gmail message. Quick replies steer a fresh draft, tone and length rewrite it with a single crossfade, and you can edit the finished draft before you insert it.
• Agent handoff: A support conversation where an AI assistant hands off to a person. When it transfers, a card shows the summary it passes to the team and the typical wait. The person then joins and takes over, and a thin timeline on the left marks each step.
• PII redaction: A guardrail card where personal data is redacted before the prompt reaches the model. Scan marks each name, email, phone number and card with its type and swaps it for a placeholder like [EMAIL_1]. The safe prompt travels to Claude, and the reply comes back with the original values put back for the person.
• Response feedback: A feedback control for AI replies where thumbs down opens an inline panel with reason chips and an optional note, thumbs up fills and asks what was good, and a submit shows a short thank-you before folding back into the row.
• LLM cost calculator: A pricing calculator for LLM workloads. Set tokens per request, requests per day and prompt caching, and eight current models re-rank by monthly cost. Bars glide and prices roll as you drag.
• Provider keys: A settings card for bring-your-own-key AI products. Each provider row shows its real mark, the masked key, a status and when the key was last used. You can reveal a key for five seconds, copy, rotate or remove it with undo. Adding or rotating a key opens an inline form that checks the format as you type, then tests the connection before saving.
• Generation stats: A live stats strip for a streaming LLM response where time to first token, speed with a sparkline, output tokens and cost count up in tabular numerals beside the model's real mark, then settle and open into a latency and token cost breakdown.
• AI translate: A message card where picking a language streams the AI translation in place, sentence by sentence over the dimmed original, with a detected-language chip, a Show original toggle and a status line credited to the model's mark.
• TL;DR toggle: An article card with a Full, Summary and Key points switch and a length slider. Switching streams an AI summary in place of the article as the card's height springs to fit, and each key point links back to the paragraph it came from, which gets scrolled to and highlighted.
• Connector setup: A "Connect your tools" card for an AI assistant. Each app connects inline: it redirects, authorizes and runs a first sync with a progress hairline, then lists the scopes it was granted and offers Disconnect with an inline confirm.
• Smart form fill: A paste-to-fill form card where AI reads an email signature or messy notes and fills a contact field by field. Each value flashes in with a confidence dot, its source lights up in the pasted text, low-confidence guesses ask for review, and Undo puts the old values back.
• Enrich column: An AI enrichment column for a data table, where one prompt runs down every row and each cell shimmers while it works, then settles into a value with its source or a failure you can retry.
• Ticket router: A support ticket router where messages from Gmail, Intercom, Slack and Zendesk come in one at a time. An AI classifier labels each one with intent, sentiment and confidence, and the ticket moves into a team lane with an assignee. Low confidence tickets wait in a review lane, and one click there routes them to the suggested team.
• Ask your data: A natural language to chart card: you ask a question, PostgreSQL streams into a collapsible, syntax highlighted panel, the query runs with a rolling row count, and the answer builds as stacked bars, lines or a table, with a one line insight streamed in underneath.
• Agent cursor: A live document where Claude edits like a collaborator. Its labeled cursor comes out of its avatar, selects a paragraph and streams in a rewrite, adds a heading and fixes a typo, while a teammate's cursor reads along. Changes stay tinted until someone accepts or undoes them from a floating review bar.
• Provider status: A status card for the AI providers your product depends on. Each row shows the provider's real mark, its health as an icon and label, p50 latency and a 30-day uptime bar with a tooltip for each day. An incident row expands into its timeline of updates, and the card checks again on a visible countdown.
• Training run: A fine-tuning job card where a live train and validation loss curve draws across a fixed step axis that doubles as the epoch progress bar. It shows the learning rate, elapsed time, ETA and the latest evals and checkpoints, has Pause and Cancel while it runs, and ends in results with a Deploy button.
• AI command: A Cmd+K command palette with an AI mode. Search pages and actions, or press Tab to ask a question: the answer streams inside the palette with numbered sources, and the next steps it suggests, like filing a Linear issue or opening a Notion doc, run straight from the list.
• Starter prompts: A greeting and a grid of starter cards for the empty state of an AI app. The cards are grouped into Write, Code, Analyze and Plan tabs, and a shuffle swaps them with a short staggered crossfade. Picking a card fills the composer, and cards that use a connected app show its mark (Gmail, GitHub, Notion, Linear, Google Calendar).
• AI mascot: A small assistant character, a soft pebble with pill eyes and a companion dot, that shows what the AI is doing. It breathes and glances when idle, leans in to listen, looks up while the dot orbits its head, reads along the line it writes, squints with a sparkle when done and shakes once with worried brows on an error.
• Image reveal: An image generation canvas where a soft, blurred preview made from the image's own colors sharpens top to bottom behind a soft-edged band. It works the way ChatGPT, Midjourney and Gemini show images forming, with fine film grain, a translucent progress pill and calm queued and error states.
• AI spark: A brand-quality animated spark mark. Four tapered rays and four lighter diagonals breathe at rest, ripple while thinking, pulse like a heartbeat while writing, then gather and settle when done. Every status change blends from the pose the mark is already in.
• Pixel mascot: A pixel-art robot that shows what an AI assistant is doing. It idles, thinks, types, celebrates and errors in frame-stepped sprite animations, and stays crisp at every integer size from 24px to 192px.
• Ghost mascot: A floating ghost mascot whose soft sheet ripples at the hem while it hovers. It blinks when idle, turns toward you to listen, fades a little translucent while thinking, draws a tiny pen line while writing, smiles with a sparkle when done and wobbles once on an error.
• Cube mascot: An isometric cube mascot where three shaded faces and a painted-on face show what the assistant is doing. It turns a quarter turn in eased steps while thinking, prints lines onto the floor while writing, settles with a sparkle when done, and shakes once on error.
• Tone tuner: A brand voice card where two sliders (formality and detail) and Friendly, Confident and Empathetic chips rewrite a customer reply. Each changed sentence crossfades in place, new words can be highlighted against the original, and Copy takes the current version.
• Upgrade prompt: An upgrade nudge for the moment someone hits a limit. It shows a usage meter at 50 of 50 AI credits, a rolling price with a monthly and yearly toggle, three concrete unlocks with real model marks, and Upgrade or Maybe later. Upgrading leads into a success state with the new limits, and the card never changes size between states.
• Referral card: A give-and-get referral card where people copy or share their invite link, invite friends by email as chips, and watch invites move from invited to signed up to earned, with the credit total counting up and a milestone reward unlocking.
• Trial banner: A trial status banner where a ring counts down the days left, the copy names what the workspace loses, and the upgrade path is one click away. It comes as a slim banner, a sidebar card or a header pill. It shifts to a warning tone in the last days, has expired and upgraded states, and folds into the pill when dismissed or snoozed.
• Team switcher: A workspace switcher like Linear, Vercel or Slack. The trigger shows the current workspace's logo and plan. The menu has search, your role in each workspace and a Cmd+1 to 9 shortcut for each, and lets you create or join a workspace inline. A highlight glides between rows, and switching crossfades the trigger through a short loading state.
• Live visitors: A realtime visitors card where the live count rolls digit by digit, new arrivals ping in on a dotted world map, the top pages reorder with bars, and signups and upgrades tick in with country flags.
• Social proof toast: A stack of social proof notifications for landing and pricing pages, where recent trials, upgrades and verified purchases from people and companies arrive every few seconds. The stack pauses and fans out on hover, and visitors can dismiss any toast.
• Install snippet: A "get started in 30 seconds" card where framework tabs, three numbered steps and highlighted snippets take a developer from install to first event. Generate key wipes a fresh API key into the placeholder in place.

Guidance for AI tools

Agent timeline: A compact timeline of one orchestrated agent run: the orchestrator and its subagents share a time axis, handoffs draw in between rows, and a playhead replays thinking, tool calls and waiting while the header counts time, tokens and cost. Hover a span for what it did, or click it to trace its handoff path. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt