AgentTraceViewer
Timeline of tool calls, reasoning steps and token cost for debugging agent runs.
- Observability
- Timeline
- Tool use
AI-03Illustrative preview of the intended interface.
Overview
What it solves
The problem
Agent runs fail somewhere inside a chain of tool calls, and plain logs hide what the model actually did and why.
The approach
AgentTraceViewer turns a run into a navigable timeline of LLM calls and tool invocations, with inputs, outputs, latency and token cost for every step.
Features
Key features
- 01
Span timeline
A Gantt-style view shows what ran, in what order and for how long.
- 02
Nested call tree
Collapse or expand sub-agents and tool calls to focus on the failing branch.
- 03
Payload inspector
Select any span to read its exact input and output as formatted JSON.
- 04
Cost roll-ups
Token usage and spend summed per span and per run.
Under the hood
How it works
- 1
Capture
Emit spans from your agent runtime as it executes.
- 2
Normalise
Map them to one span schema regardless of framework.
- 3
Visualise
Render the timeline and call tree.
- 4
Inspect
Select a span to see its payloads, errors and cost.
See it
Demo
Walkthrough video coming soon
A short screen recording will appear here.
Developer experience
Usage
Planned API — this shows the intended developer experience and may change as the component is built.
<AgentTraceViewer
trace={trace}
onSelectSpan={(span) => console.log(span.name)}
/>AI Interfaces
Span schema
The small, framework-neutral shape every trace is converted to.
| Field | Purpose |
|---|---|
| name | Human-readable label, e.g. tool.search_docs. |
| kind | llm, tool or agent — drives colour and grouping. |
| startMs / endMs | Position and length on the timeline. |
| input / output | Payloads shown in the inspector. |
| tokens / costUsd | Usage roll-ups per span and per run. |
Roadmap
Status & stack
Build progress
- Design & API — in progress
- Build — not started
- Accessibility & performance testing — not started
- Demo & write-up — not started
Tech stack
- React 19
- TypeScript
- SVG & CSS timeline
- OpenTelemetry-style spans
Related research
- AI Interfaces4 min read
Building a streaming chat UI that doesn't jank
Token-by-token rendering, scroll behaviour and abort handling — the patterns that keep an LLM chat feeling instant.
- Streaming
- React 19
- UX
Read the note
More in AI Interfaces
AI-01In progressStreamingChat
Token-by-token chat UI with markdown rendering, abort, retry and optimistic message state.
- SSE
- Markdown
- React 19
AI-02PlannedPromptPlayground
Side-by-side prompt and model comparison with parameter controls and shareable runs.
- Multi-model
- Diff view
- TypeScript