Run theatre

A React component in Beamline's AI & agents category.

One agent run as a theatre: the Run trace's waterfall under a transport (play, scrub, speed) that replays the run as it happened. Pick a step and re-run it with one change (another model, a prompt version, a tool off) and the ghost run plays under the real one on the same time axis: reused steps marked same, each pair with its time and cost difference, the critical path redrawn for both, and a verdict at the end with total time and cost, the checks on both and the answer's word differences.

Use it for

Reviewing one agent or workflow run that was slow, expensive or wrong, and testing a change to one step against it.
The host keeps the run's steps and runs the ghost (reusing recorded results up to the change); the part replays, aligns and compares.

Not for

A live run or a plain trace with no what-if → run-trace.
Comparing many runs or an eval matrix → a table or chart.

Anatomy

transport: play/pause, the scrub bar over the run's time, speed (1×, 2×, 4×)
verdict (when a ghost exists): the step and option, then while it plays "The ghost plays under the real run", at its end the total time and cost difference (costs estimated), each check on both, the answer with the ghost's new words marked, Use for this step / Try another / Discard; a ghost that failed says why
trace: the Run trace waterfall with the playhead; with a ghost each step from the change on has a dashed ghost bar under its bar and its difference under its time; reused steps say same, steps the ghost didn't run say not run, steps only the ghost ran say ghost only; the critical path is a hairline under its bars
step detail: the Run trace's detail with "Re-run from here with…" and the host's options; an option that can't run says why

States

finished (whole run shown)
playing
paused
step selected
ghost running
ghost playing
verdict
ghost failed
option unavailable (side effects)
recorded or dry-run steps
no difference

Keyboard

Play is a button; the scrub bar is a slider (←/→ half a second, Home/End, Space plays and pauses); speed is a segmented control
The trace is the Run trace's tree grid: ↑/↓ steps, Enter shows a step's detail, where Tab reaches the re-run options
Each row reads its real and ghost time together ("Draft the answer… 14.2 s, ghost 8.1 s"); the verdict is polite live

Motion

Playback ticks ten times a second while playing and the bars and the scrub bar glide between ticks on the fast linear duration; nothing renders per frame and the clock stops at the end. Reduced motion shows the run whole: Play jumps to the end.

Props

Prop	Type	Default	Description
`spans` (required)	`TraceSpan[]`	—	The real run, finished: every step with its start and end (ms from the run's start).
`title`	`ReactNode`	—
`output`	`string`	—	The real run's final answer, for the ghost's word differences.
`rerunOptions`	`((span: TraceSpan) => RerunOption[])`	—	What a step may be re-run with; none for steps that can't.
`onRerun`	`((stepId: string, optionId: string) => void)`	—	Re-run from this step with this option: the host runs the ghost and passes it back as `ghost`.
`ghost`	`RunGhost \| null`	—	The ghost re-run, controlled by the host (null or omitted: none).
`onUse`	`((ghost: RunGhost) => void)`	—	Keep the ghost's change for this step (open the config change as a draft).
`onDiscard`	`(() => void)`	—	Throw the ghost away (Try another and Discard both call this).
`currency`	`string`	—
`autoPlay`	`boolean`	—	Play the run once when it first appears.
`defaultSelected`	`string \| null`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`classNames`	`Partial<Record<"root" \| "verdict" \| "trace" \| "picker" \| "transport", string>>`	—	Classes for the named visual parts; no overrides by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { RunTheatre } from "@beamline/run-theatre";

Get it

Run theatre is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Run theatreComplete system · $49

One agent run as a theatre.

What if the draft used a smaller model?

A support agent's run, finished: play it back, then in Draft the answer's detail re-run it with the medium model. The ghost plays under the real run from that step, skips the retry and finishes first; the verdict says how much sooner and cheaper, whether the checks still pass and how the answer changed.

0 × 0full

A step that can't run again

Sending the reply has side effects, so its re-run says why instead of guessing; skipping retrieval runs, and its ghost fails the citation check twice.