TraceViewer
Every step of a run on one timeline, with its time, tokens and cost.
SourcePackage @weft-js/warp
Preview
tsx
import { TraceViewer } from '@weft-js/warp'import type { TraceSpan } from '@weft-js/warp'export function Run() { return ( <TraceViewer spans={TRACE} label="Last answer" /> )}const TRACE: TraceSpan[] = [{ id: 'turn', name: 'turn', start: 0, ms: 6200, tokens: 14100, cost: 0.042, children: [ { id: 'think', name: 'reasoning', start: 0, ms: 900, tokens: 1200, cost: 0.004 }, { id: 'logs', name: 'read_logs', start: 1000, ms: 640, tokens: 3100, cost: 0.009 }, { id: 'diff', name: 'compare_deploys', start: 1700, ms: 1900, children: [{ id: 'fetch', name: 'fetch d-4801', start: 1750, ms: 700 }, { id: 'patch', name: 'diff', start: 2500, ms: 1050 }] }, { id: 'text', name: 'write answer', start: 3700, ms: 2500, tokens: 2931, cost: 0.02 },] }]Installation
npm install @weft-js/warpUsage
tsx
import { TraceViewer } from '@weft-js/warp'<TraceViewer spans={TRACE} label="Last answer" />When to use
Use it for
- Debugging why an answer was slow or expensive
Accessibility
- UpandDown
- Move between rows
- RightandLeft
- Open, close, and step in and out
- Enter
- Opens or closes a row
- HomeandEnd
- First and last row
- It is a treegrid with one tab stop.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
spans | TraceSpan[] | — | The spans, nested through children. |
label | string | 'Spans' | The heading and accessible name. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="trace"] [data-part="eyebrow"]
eyebrow
RelatedTool callAgent plan