# 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.

Web page: https://candor.themethodic.com/patterns/agent-trace-viewer

## Components

- **Trace viewer** (`trace-viewer`, Pro; https://candor.themethodic.com/docs/trace-viewer.md): One run as nested spans on a shared clock.
- **Run tree** (`run-tree`, Pro; https://candor.themethodic.com/docs/run-tree.md): The orchestrator and the specialists it handed work to.
- **Run log** (`run-log`, Pro; https://candor.themethodic.com/docs/run-log.md): Every run, one line each, filterable to failures.
- **Run receipt** (`run-receipt`, Pro; https://candor.themethodic.com/docs/run-receipt.md): What a run cost, per model, from the service's own figures.
- **Log stream** (`log-stream`, Pro; https://candor.themethodic.com/docs/log-stream.md): A run's live log, with gaps that say how many lines are missing and why.
- **Run recovery** (`run-recovery`, Pro; https://candor.themethodic.com/docs/run-recovery.md): A run that stopped, and what the person can do next.

## Install

```bash
npx candor-ui add trace-viewer run-tree run-receipt
```

## Notes

- 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.