Agent runs monitor

A React block (a whole screen) in Beamline's Blocks category.

Every run of your agents in one place: success rate, run time, tokens and spend; the last runs as a strip of status blocks; a live table where running rows count up their time and cost; and a run's detail with its trace (thinking, each tool call with input and output, the answer or the error) and Retry or Cancel.

Use it for

Operating AI agents in production: which runs failed and why, what they cost, and retrying them.
Any background job system whose runs have steps, durations and costs.

Not for

Talking to one agent (agent-workspace).
A few background tasks inside a product (task-rows).
Service uptime (tracker on its own).

Anatomy

header: title, the period (1h · 24h · 7d), feed state
figures: runs, success rate, p95 run time and spend for the period, each with its trend
recent runs: a strip of the last runs as status blocks (succeeded, failed, running), each naming its run on hover
filters: status chips with counts and the agent filter in the table
runs: status in word and glyph, agent, trigger, started, run time (counting while running), steps, tokens, cost (rising while running)
run sheet: status, agent, model, trigger, timings and cost; the trace in order (thinking, tool calls that open to their exact input and output, the answer); an error with its step and message; Retry, or Cancel while running

Variants

0: room: figures two by two under 48rem; the sheet takes the full width on a phone

States

loading (figures, strip and table in their shapes)
no runs in the period (what shows here once an agent runs)
running (time and cost count up; new steps join the trace)
succeeded, failed (step and message), cancelled, queued
retrying (a new run is queued from the old one)
cost or tokens unknown (—)

Keyboard

Tab: period, status chips, the table
Table: arrows between cells, Enter opens the run
Sheet: tool calls are disclosure buttons; Retry and Cancel are buttons; Esc closes and focus returns to the row

Motion

Running rows count their time once a second and their cost rolls; a run that ends swaps its spinner for a check or a cross; new trace steps rise into place; figures roll when the period changes. A screen with nothing running is still.

Props

Prop	Type	Default	Description
`runs` (required)	`AgentRunRecord[]`	—	{ id, agent, trigger, status, startedAt, endedAt?, model?, steps: AgentRunStep[], tokens?, cost?, error? }, newest first.
`period / defaultPeriod / onPeriodChange`	`"1h" \| "24h" \| "7d"`	—
`previous`	`{ runs, successRate, p95, spend }`	—	The period before, for the figures' change.
`loading`	`boolean`	—
`onRetry`	`(runId: string) => void \| Promise<unknown>`	—
`onCancel`	`(runId: string) => void \| Promise<unknown>`	—
`currency`	`string`	`"USD"`
`className / classNames / style / ref`	`string / AgentRunsClassNames / CSSProperties / Ref<HTMLElement>`	—

Built from

metric-card
tracker
segmented-control
chip-group
data-grid
sheet
badge
tool-call
reasoning
response
code-block
button
empty-state
slot-text
spinner

Dependencies

lucide-react, @tanstack/react-virtual

Import

import { AgentRuns } from "@/blocks/agent-runs/agent-runs";

Get it

Agent runs monitor is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent