Agent monitor

A React block (a whole screen) in Beamline's AI workspace app.

Agents in production and on test. Monitor shows every agent or one over 24 hours, 7 or 14 days: runs, tokens, estimated cost and average run time counted from the same runs the histogram draws, so the runs tile always equals the histogram's total; succeeded runs are the quiet ink and failed ones the danger tone, in the histogram and the recent activity alike (with what failed); tool calls are ranked, and each agent's tools are listed with how often it calls them. Evaluations lists datasets with their cases (input, expected, reviewer) and runs of a dataset on agent versions with their average score and passes; two runs are compared case by case with the change, and choosing a third is refused, saying why.

Use it for

Watching a fleet of AI agents: volume, failures, cost and tool use over a window.
Comparing agent versions on a test dataset before shipping one.

Not for

One run's trace (agent-runs, run-trace).
Configuring an agent (agent-builder).

Anatomy

header: Agents, Monitor and Evaluations
monitor: Agent (all or one), Window; tiles (runs, tokens, estimated cost, average run time); runs over time with the counts in words, a legend; tool calls ranked and each agent's tools; recent activity (status dot, agent, when, what failed, cost)
evaluations: datasets with case counts and the chosen dataset's cases; runs (compare checkbox, version on dataset, when, passes, average score bar, or Scoring); what to choose next or why a third is refused; the comparison table (case, both scores, the change)

States

all agents, one agent
no runs in the window
failure spike
a run in progress
evaluation running (can't be compared)
one run chosen, two compared, a third refused, runs on different datasets
narrow room: tiles in two columns, panels stacked

Keyboard

Tab through the filters, the panels and the evaluation runs
each run's compare checkbox is named with its version and dataset

Motion

Nothing animates; changing the window or agent redraws at once.

Props

Prop	Type	Default	Description
`agents` (required)	`MonitoredAgent[]`	—
`runs` (required)	`MonitorRun[]`	—
`datasets`	`EvalDataset[]`	—
`evalRuns`	`EvalRun[]`	—
`view`	`"evals" \| "monitor"`	—
`defaultView`	`"evals" \| "monitor"`	—
`onViewChange`	`((view: "evals" \| "monitor") => void)`	—
`defaultAgent`	`string \| null`	—
`defaultWindow`	`Window`	—
`defaultCompare`	`string[]`	—	Evaluation runs chosen to compare first (two at most).
`currency`	`string`	—	ISO 4217 code costs are in. Default "USD".
`now`	`Date`	—	Now, for the window. Default: now.
`locale`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override 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

metric-card
bar-list
select
segmented-control
checkbox
badge

Dependencies

lucide-react

Import

import { AgentMonitor } from "@beamline/agent-monitor";

Get it

Agent monitor 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

Agent monitorComplete system · $49

Agents in production and on test.

Agents in production

The runs tile counts the same runs the histogram draws; failed runs carry the danger tone in both and in the activity (Tuesday afternoon's spike: the carrier's server timed out). Evaluations compare two runs of one dataset case by case; a third is refused.

0 × 0full

About Agent monitor

← Agent runs monitor Conversation history →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.