Trace Waterfall
Agent trace viewer with a KPI header (duration, tokens, cost, steps), a keyboard-navigable step tree, and waterfall timing bars told apart by kind glyph and tint, with a precise timing readout on hover or focus.
Preview
Answer ticket #40418
tr_8f2c41Failed- Duration
- 6.84s
- Tokens
- 3,634
- Cost
- $0.042
- Steps
- 9model calls:2tool calls:4retrievals:2
9 of 9 steps finished, 1 error
Support agent
Classify intent
Search help center
Embed query
Vector lookup
Fetch order
Fetch order
Draft reply
Check tone
Weekly digest
tr_1b07e9Running- Duration
- 4.18sso far
- Tokens
- 2,210
- Cost
- $0.019
- Steps
- 5model calls:1tool calls:2retrievals:1
3 of 5 steps finished, 0 errors
Digest writer
Load saved posts
Summarize posts
Render email
Nightly backfill
tr_queuedWaiting- Duration
- –
- Tokens
- –
- Cost
- –
- Steps
- 0
0 of 0 steps finished, 0 errors
No steps recorded yetSteps appear here as the trace starts running.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | TraceStep[] | — | Steps in any order: { id, parentId?, label, detail?, kind?, start, end?, status?, tokens?, cost? }, times in ms from trace start. |
| title | string | "Trace" | Heading above the KPI strip. |
| traceId | string | — | Trace id shown in mono next to the title. |
| now | number | — | Current time in ms; running bars end here. Omit for a finished trace. |
| label | string | "Trace steps" | Accessible name of the step tree. |
| showHeader | boolean | true | Show the KPI header. |
| defaultCollapsed | string[] | — | Ids of steps whose children start hidden. |
| onStepSelect | (id: string) => void | — | Called when a step is chosen with Enter, Space or a click. |
| formatDuration | (ms: number) => string | formatTraceDuration | Formats ticks, durations and accessible names. |
| formatCost | (cost: number) => string | — | Formats the cost KPI. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.