Trace view
One agent run as an observability waterfall — every span on a shared time axis, nested under the span that started it, with its tokens and latency.
A trace view lays one agent run out as a waterfall. Every span — an LLM call, a tool call, a retrieval, a sub-agent — sits on a shared time axis, nested under the span that started it with a tree's guides. Each kind has its own colour, counted in the key. While the run streams, a playhead marks now and running bars glow at their leading edge; a tool call that runs over its budget turns amber and hatched and is tagged slow. Open any span to see where it sat in the run, its input, its output, its latency and its tokens.
Usage
<!-- include core.css + trace-view.css, then the component script -->
<div class="card wide" data-c="trace-view">
<div class="stage-in">
<div class="trv panel">
<div class="trv-h">
<div class="trv-ht"><b>Pricing research</b><span class="muted trv-st" aria-live="polite"></span></div>
<span class="trv-tot num">0.00s</span>
</div>
<div class="trv-lg" role="list" aria-label="Spans by kind"></div>
<div class="trv-ax" aria-hidden="true"><span>Span</span><span class="trv-sc"></span><span class="trv-tk">Tokens</span><span class="trv-ms">Time</span></div>
<div class="trv-rows" role="group" aria-label="Spans"></div>
<div class="fold shut trv-dt" inert><div><div class="trv-dc" role="region" aria-label="Span details"></div></div></div>
</div>
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
title | string | The run's name, shown over the status line. |
spans | TraceSpan[] | The run's top spans, usually one root with everything nested under it. |
time | number | Seconds into the run while it streams in. Spans that start later stay hidden, running ones reach this far. Leave it out once the run is over. |
axis | number | Seconds the time axis covers. Defaults to the run's length, rounded up to a whole second. |
slowAfter | number | A tool call longer than this many seconds turns amber and is tagged slow. Defaults to 2. |
status | string | Overrides the status line. Defaults to "Running · 4 spans", then "Done · 7 spans, 1 slow". |
selected | string | The id of the open span, whose details show under the waterfall. null closes them. |
onSelectedChange / selectedChange | callback | Fires with the id of the span opened, or null when the details close. |
A TraceSpan has an id, a name, a kind (agent, llm, tool, or retrieval), a start and
duration in seconds, optional tokens, optional input and output strings, and optional
children. An agent span without its own token count adds up every span under it.
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). In
Blueprint the bars square off and running bars switch from a sweeping sheen to a steady stripe. Each
kind keeps its colour from the chart palette; a slow bar is amber and hatched in every theme.
Web search
The agent's web searches as a trail — each query and what came back, each page read, skimmed or skipped and why, and an answer whose citations light their pages.
Run queue
A queue of agent jobs in three parts — the one running with its steps and progress, the ones up next, and the ones done — with a compact toggle.