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

Web page: https://candor.themethodic.com/screens/run-detail

## Layouts

### Page with tabs

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

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

Items:

- **Page header** (`page-header`, free; https://candor.themethodic.com/docs/page-header.md): Where you are, what the run is and what you can do.
- **Run heartbeat** (`run-heartbeat`, Pro; https://candor.themethodic.com/docs/run-heartbeat.md): A run's state that never claims it's alive when nothing has been heard.
- **Run receipt** (`run-receipt`, Pro; https://candor.themethodic.com/docs/run-receipt.md): What it cost, per model, from the service's own figures.
- **Log stream** (`log-stream`, Pro; https://candor.themethodic.com/docs/log-stream.md): The run's log, with gaps that say how many lines are missing and why.
- **Trace viewer** (`trace-viewer`, Pro; https://candor.themethodic.com/docs/trace-viewer.md): The run as nested spans on a shared clock.

```bash
npx candor-ui add page-header run-heartbeat run-receipt log-stream trace-viewer
```

### Panel from the run list

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

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

Items:

- **Run log** (`run-log`, Pro; https://candor.themethodic.com/docs/run-log.md): Every run, one line each, filterable to failures.
- **Side panel** (`side-panel`, Pro; https://candor.themethodic.com/docs/side-panel.md): The run's detail beside the list.
- **Run tree** (`run-tree`, Pro; https://candor.themethodic.com/docs/run-tree.md): The orchestrator and the specialists it handed work to.

```bash
npx candor-ui add run-log side-panel run-tree
```

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

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

Items:

- **Result card** (`result-card`, Pro; https://candor.themethodic.com/docs/result-card.md): The answer first, in a few lines, then the receipt.
- **File list** (`file-list`, Pro; https://candor.themethodic.com/docs/file-list.md): The files the work produced and whether each was checked.
- **Code listing** (`code-listing`, Pro; https://candor.themethodic.com/docs/code-listing.md): A file the run wrote, with line numbers and Copy, and its changes line by line against the version before.
- **Test results** (`test-results`, Pro; https://candor.themethodic.com/docs/test-results.md): Leads with what failed.

```bash
npx candor-ui add result-card file-list code-listing test-results
```

## Rules that matter most here

- **Unknown stays unknown** (https://candor.themethodic.com/principles#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** (https://candor.themethodic.com/principles#motion-follows-the-outcome): 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** (https://candor.themethodic.com/principles#agents-are-named): Each step names the agent that took it, from your records.

## Patterns that cover part of it

- Agent trace viewer for React: https://candor.themethodic.com/patterns/agent-trace-viewer.md

A full-stack block builds this with an agent route and a store: `agent-ops-console` (https://candor.themethodic.com/docs/agent-ops-console.md). Each block has a `-claude` twin for the Claude Agent SDK.

## Brief for a coding agent

Paste this to the agent that builds the screen.

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