Timeline | Glaze design system

Run

Run run_8f2a91
Step	Started at	Took	Status
Plan	0ms	0.8s	Passed
Search orders	820ms	3.3s	Passed
Read policy	4.1s	1.2s	Passed
Draft reply	5.3s	5.9s	Passed
Check tone	11.2s	1.4s	Passed

Run run_8f2a92
Step	Started at	Took	Status
Plan	0ms	0.8s	Passed
Search orders	820ms	9.0s	Warning
Issue refund	9.8s	0.6s	Failed

Run run_8f2a93
Step	Started at	Took	Status
Plan	0ms	0.8s	Passed
Search orders	820ms	3.3s	Passed
Draft reply	4.1s	3.5s	Running

Run run_8f2a94
Step	Started at	Took	Status
Plan	0ms	0.8s	Passed
Search orders	820ms	3.3s	Passed
Approve refund	4.1s	5.3s	Waiting on you

Run run_8f2a91
Step	Started at	Took	Status
Plan	0ms	0.8s	Passed
Search orders	820ms	3.3s	Passed
Read policy	4.1s	1.2s	Passed

Run run_8f2a91
Step	Started at	Took	Status
Plan	0ms	0.8s	Passed
Search orders	820ms	3.3s	Passed
Read policy	4.1s	1.2s	Passed

When to use it

Use: One run's steps on one clock: an agent's plan, its tool calls and its reply, nested by depth.
Use: Finding where the time went and which step broke.
Use: A live run, with now ticking once a second and the running span growing.
Not for: Many runs compared by duration. Use Table.
Not for: A number over time. Use Chart.
Not for: The steps of a plan that has not run. Use Item.

7 rules

Must: Give start and end in milliseconds from the run's start; leave end out while the span runs or waits. Because the track, the ticks and every duration share one unit picked from the total, and a timestamp or seconds would set a scale a thousand times off.
Must: Pass now, ticking once a second, while any span runs or waits. Because an open span runs to now, so without it a running step has no width and the total stops.
Must: Mark a failed step status: 'fail' and a slow one 'warn'; never colour a span any other way. Because only trouble takes colour, so the coral bar and its word are what the eye finds in a long trace.
Must: Mark a step held for a person status: 'waiting', with waitingLabel when it is not you. Because a waiting step is a hollow capsule to now with its word, so it never reads as a slow step that is working.
Should: Nest tool calls under the step that made them with depth, one level per call. Because the indent and its guide line make the names a tree, so a slow call is read with the step it slowed.
Should: Put the tool name or an ID in meta and costs or tokens in figure, never in the label. Because meta sets mono at 0.8 and figure tabular figures at the column's end, and both drop on a narrow card so the name keeps its room.
Never: Wrap a Timeline in a Card; it is the card, or takes frame="none" inside one. Because a card around a card is two edges where one closes the group.

5 states, highest first

5 checks

: The timeline is a named section; the rows are a list, or a listbox of options with onSpanClick.
: Each row is named "Search orders, started at 0.8s, took 3.3s, warning"; the drawing is aria-hidden.
: A screen-reader table carries step, start, duration and status for every span.
: Trouble is never colour alone: the status column names it, and the row's name says it.
: Bars are ink at 45%, 3.3:1 on paper; durations are text-2, 5.5:1, or the status word colours.

3 keys

6 edge cases

A step with no width: Its bar keeps a 4px capsule, and its duration still shows.
A bar ending at the total: Its duration sits before the bar, inside the track.
Narrow card: The name takes two fifths, meta and figure drop, the status column goes and the bar and its duration carry the outcome.
Long run: The ticks pick one unit from the total (ms, s, min, h) and fall on whole steps of it.
Reduced motion: A running bar jumps once a second instead of gliding.
Dark theme: The bars, washes and status colours take their dark values; the open bar turns near-white.

8 props

18 tokens