MA
All workCase study 04 of 11

See what an AI agent actually did: every model call, tool call and retry on one timeline, with tokens, cost and the error that broke it.

Client
Personal project
Role
Product design + frontend
Year
2026
Stack
Next.js, React, TypeScript, CSS Modules

A support agent's run: classification, order lookup, policy search, refund, reply.

Overview

Tracer is an inspector for AI agent runs. Load a trace and the run becomes a waterfall: which steps ran in parallel, where the time went, what each model call was asked and answered, which tool failed and how the agent recovered.

01

The problem

Agent logs are long, nested JSON. When a run is slow or wrong the question is always the same: which step, and why. The answer has to be two clicks away, not a scroll through ten thousand lines.

02

The approach

Spans are laid out as a nested waterfall on one time axis, and their self time is summed per kind (model, tool, retrieval, guardrail) into a single where-the-time-went bar. Failed spans are striped red, and opening a failed run jumps straight to its first error. The inspector shows chat messages as messages and JSON with syntax colour. Everything works from the keyboard, and you can drop in your own trace file: it is validated and never leaves the browser.

0Sample runs
0Spans
0Keyboard shortcuts
NoneData sent anywhere
What I did
  • Trace data model, nesting from parent ids, self-time per span kind
  • Waterfall on a shared time axis with labels that never collide
  • Span inspector for messages, JSON payloads, attributes and errors
  • Keyboard navigation: move, fold, jump to the next error, search
  • Drag-and-drop import with readable validation errors
What shipped
  • Five realistic runs: support, research, analytics, release notes, scheduling
  • Run list with status, duration and cost; filter to runs with errors
  • Collapsible span tree with timing on every bar
  • Tokens and cost per span and per run
  • Jump to the next error with one key
  • Load your own trace, or download the sample format
Outcome

From "the agent was slow" to "the second web.fetch timed out after six seconds and the retry worked" in one click.

Next.jsReactTypeScriptCSS Modules
Next case studyAurPayments, transfers, cards and lending in one of Iceland's most used money apps.