TraceViewer
Every step of a run on one timeline, with its time, tokens and cost.
SourcePackage @kerf-js/veneer
Preview
tsx
import { TraceViewer } from '@kerf-js/veneer'import type { TraceSpan } from '@kerf-js/veneer'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 @kerf-js/veneerUsage
tsx
import { TraceViewer } from '@kerf-js/veneer'<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