Screens / Watching the work

Run detail

Show one run: what it was asked, what it did, how it ended and what it cost.

For: The person who started the run, and whoever has to explain it.

Markdown

3 ways to lay it out

1. Page with tabs

Pick it when: The default: a run has enough in it to deserve its own page.

A header with the run's state, then tabs for summary, log, trace and receipt over one wide panel.

Page headerFreeWhere you are, what the run is and what you can do.
Run heartbeatProA run's state that never claims it's alive when nothing has been heard.
Run receiptProWhat it cost, per model, from the service's own figures.
Log streamProThe run's log, with gaps that say how many lines are missing and why.
Trace viewerProThe run as nested spans on a shared clock.

Install page with tabs

Pro and Premium items need a licence key; free ones install as they are.

2. Panel from the run list

Pick it when: People scan many runs and want detail without leaving the list.

A list of runs on the left and a side panel with the selected run's summary and log on the right.

Run logProEvery run, one line each, filterable to failures.
Side panelProThe run's detail beside the list.
Run treeProThe orchestrator and the specialists it handed work to.

Install panel from the run list

Pro and Premium items need a licence key; free ones install as they are.

3. A finished result, then the receipt

Pick it when: The reader wants the answer first and the proof second, such as a manager reading a report an agent produced.

A single column: the answer in a few lines, a file list, then a receipt strip.

Result cardProThe answer first, in a few lines, then the receipt.
File listProThe files the work produced and whether each was checked.
Code listingProA file the run wrote, with line numbers and Copy, and its changes line by line against the version before.
Test resultsProLeads with what failed.

Install a finished result, then the receipt

Pro and Premium items need a licence key; free ones install as they are.

Rules that matter most here

Unknown stays unknown
A run nobody has heard from says "no update since 10:42", not "running"; a missing log line shows a gap with its count.
Motion never says something false
A step is shown as done or failed only when it is, and its motion stops with the outcome.
The agent is always named, by the app
Each step names the agent that took it, from your records.

Already covered elsewhere

Pattern: Agent trace viewer for React
Builds the whole screen with an agent route and a store: Agent ops console (Premium), with a -claude twin for the Claude Agent SDK.

Brief for a coding agent

Paste this into the agent that builds the screen. The docs MCP server returns the same text from get_screen.

Build a run detail page with Candor UI for one agent run.
Header: PageHeader with the run's name and RunHeartbeat; if nothing has been heard for a while it says "No update since <time>" and never claims the run is alive.
Tabs: summary (RunTree and the result), log (LogStream), trace (TraceViewer) and receipt (RunReceipt). A gap in the log shows how many lines are missing and why.
Pass spans, steps and usage as plain data from whatever records your runs; Candor does not collect traces.
The receipt uses the service's own figures; if a number isn't known, show it as unknown.
A failed run opens on its first failure, with RunRecovery saying what the person can do next.
Start from the agent-ops-console template if you also need the overview and the run list.
See the agent-trace-viewer pattern.

Start from the "Page with tabs" layout: A header with the run's state, then tabs for summary, log, trace and receipt over one wide panel.
Candor items: page-header (https://candor.themethodic.com/docs/page-header.md), run-heartbeat (https://candor.themethodic.com/docs/run-heartbeat.md), run-receipt (https://candor.themethodic.com/docs/run-receipt.md), log-stream (https://candor.themethodic.com/docs/log-stream.md), trace-viewer (https://candor.themethodic.com/docs/trace-viewer.md).
Install: npx candor-ui add page-header run-heartbeat run-receipt log-stream trace-viewer
Read each item's docs before using it and take its props from there; don't guess them. Pro and Premium items need the person's licence key, which they add with `npx candor-ui key <key>`; don't ask for it.