Skip to content
Kura UI

Agent Timeline

beta

Vertical plan tracker for multi-step agents: queued/active/done/failed/skipped steps, nested sub-steps, live durations and a connector that fills.

@kura-ui/react/agent-timelineCopy page for agents.mdregistry.json

Three steps

minimal
  1. Read the failing test (done)1.2s
  2. Patch the date parser (in progress)
  3. Re-run the test suite (queued)
Step 2 of 3

Live agent run

A plan that progresses on its own: live timers, nested sub-steps, a description, filling connectors.

full
  1. Explore the repository (in progress)
  2. Plan the migration (queued)
    1. List call sites of fetchUser() (queued)
    2. Check the auth middleware (queued)
  3. Edit 4 files (queued)
  4. Run the test suite (queued)
  5. Open a pull request (queued)
Step 1 of 5
0/5 steps

Every state, small

Done, skipped, failed and queued at size sm.

state
  1. Install dependencies (done)8.3s
  2. Generate types (skipped)

    Already up to date

  3. Build the docs (failed)21s

    next build exited with code 1

  4. Deploy preview (queued)
A step failed

Steps with tool calls

Inline ToolCalls attached to steps through `content`, inside a task card.

composition

Fix flaky date test

2/3
  1. Read the failing test (done)900ms
    read_file Completed
    Arguments
    { "path": "src/date.test.ts"}
  2. Reproduce with a fixed timezone (in progress)
    run_command Running
    Arguments
    { "command": "TZ=Pacific/Auckland pnpm test date"}
  3. Patch and verify (queued)
Step 2 of 3

Installation

npx shadcn@latest add https://kuro.abstergo.fyi/r/agent-timeline.json

Copies the source into components/kura/agent-timeline with its dependencies (kura-theme, shimmer-text, utils). Tokens come from the kura-theme item.

When to use it

Use it for

  • Show an agent's plan and its progress (coding agents, research agents, deploy pipelines driven by a model).
  • Show a todo list the model maintains (Claude Code / Cursor style task lists) with the current step highlighted.
  • Nest sub-steps under a step, or attach a ToolCall / CodeBlock to a step via `content`.

Reach for something else when

  • A single tool invocation — use tool-call.
  • Free-form model thinking — use reasoning.
  • Generic (non-agent) wizards or checkout steppers — use a regular stepper; the active state here uses the AI signal colour.

Props

PropTypeDefaultDescription
steps*readonly AgentTimelineStep[]—The plan, in display order. AgentTimelineStep = { id, title, status: "queued" | "active" | "done" | "failed" | "skipped", description?, duration? (ms), startedAt?, steps? (nested), content? }.
labelstring"Agent progress"Accessible name of the list (e.g. the task name).
size"sm" | "md""md"md for plan panels, sm for dense sidebars. Nested sub-steps always render at sm.

All native attributes of the root element, className and ref pass through.

Anatomy

  1. AgentTimelineRoot. `data-size`, `data-progress="done/total"`; contains a polite status region.data-slot="agent-timeline"
  2. ListThe <ol> (nested lists for sub-steps).data-slot="agent-timeline-list"
  3. Step<li> with `data-status`; the active step has `aria-current="step"`.data-slot="agent-timeline-step"
  4. NodeStatus node: hollow ring (queued), jade pulse (active), check (done), cross (failed), dash (skipped).data-slot="agent-timeline-node"
  5. ConnectorHairline track to the next step; its fill scales in from the top (`data-filled`) once the step is done or skipped.data-slot="agent-timeline-connector"
  6. TitleShimmers while active; struck through when skipped.data-slot="agent-timeline-title"
  7. DurationMono tabular duration; ticks live for the active step.data-slot="agent-timeline-duration"
  8. DescriptionMuted secondary line (danger-tinted on failure).data-slot="agent-timeline-description"
  9. ContentThe step's `content` slot.data-slot="agent-timeline-content"

Accessibility

  • Role: list
  • Rendered as an ordered list; each step's status is spoken after its title (“Edit files (in progress)”) and the active step has aria-current="step".
  • A polite status region announces “Step 3 of 5”, “A step failed” or “All steps complete” — the live timers are never announced.
  • Nodes and connectors are decorative (aria-hidden); status is never conveyed by colour alone.
  • Reduced motion: The active pulse and title shimmer stop; connectors fade in instead of growing; check/cross icons appear without scale.

Notes for agents

  • Keep `id`s stable across updates so timers and connector transitions animate instead of remounting.
  • Only one step should be `active` at a time per level; it carries the jade signal.
  • Pass `duration` (ms) for finished steps; omit it for the active step to get a live timer (or pass `startedAt` from your server).
  • Map a model-maintained todo list: pending → queued, in_progress → active, completed → done.