AgentTimeline

Vertical trace of a multi-step agent run. Pending steps dim and their rail dashes, so the eye lands on where the run actually is. Steps carrying calls render a ToolCallCard inline.

Examples

Run in progress

Read the failing test 0.4s

read_file src/Button.test.tsx 61ms
Locate the regression 2.1s

The ghost variant lost its hover token in the token rename.

grep uin-btn-ghost 120ms
read_file button.css 48ms
Apply the fix Running

edit_file button.css
Re-run the suite Pending
Summarize the change Pending

<AgentTimeline steps={[
  {label: 'Read the failing test', status: 'done', duration: '0.4s',
   calls: [{name: 'read_file', status: 'complete', target: 'src/Button.test.tsx'}]},
  {label: 'Apply the fix', status: 'running',
   calls: [{name: 'edit_file', status: 'running', target: 'button.css'}]},
  {label: 'Re-run the suite', status: 'pending'},
]} />

Failed run

Fetch the schema 0.8s
Migrate the table Failed

Permission denied on ALTER TABLE — the run stopped here.

run_sql permission denied for table users

<AgentTimeline steps={[
  {label: 'Fetch the schema', status: 'done', duration: '0.8s'},
  {label: 'Migrate the table', status: 'error',
   detail: 'Permission denied on ALTER TABLE — the run stopped here.',
   calls: [{name: 'run_sql', status: 'error', error: 'permission denied for table users'}]},
]} />

Props

Prop	Type	Default	Description
`steps`	`{label, status?, detail?, duration?, calls?}[]`	`—`	status is 'pending' \| 'running' \| 'done' \| 'error' (default 'done').

Install

CLI

npx @a3tai/mittsu add agent-timeline