Patterns / Trace viewer

Agent trace viewer for React

When a run goes wrong, people need to see what happened in order: which step called which tool, how long each took, and where it broke.

TraceViewer draws one run as a timeline. Each span (an agent step, a model call, a tool, an external call, a wait for a person) is a bar on a shared clock, nested under its parent. It opens on the first failure. The span that broke is solid red; the ones that failed because of it are pale red. A span still running stretches to now.

Around it: RunTree shows which agents handed work to which, RunLog lists every run, RunReceipt says what one run cost, and LogStream shows its log lines.

The components

Trace viewerProOne run as nested spans on a shared clock.
Run treeProThe orchestrator and the specialists it handed work to.
Run logProEvery run, one line each, filterable to failures.
Run receiptProWhat a run cost, per model, from the service's own figures.
Log streamProA run's live log, with gaps that say how many lines are missing and why.
Run recoveryProA run that stopped, and what the person can do next.

See it working

Live in the examples: Run forensics

Install

With the shadcn CLI

Each component brings in what it depends on. The free ones install as they are; Pro and Premium ones need a licence key.

Good to know

Candor doesn't collect traces. You pass spans as plain data (id, parent, kind, start, duration, status) from whatever records them.
The run-console block wires these to an agent on the Vercel AI SDK or the Claude Agent SDK.