AgentMonitorCard

Live agent status card: identity, current task, elapsed time, and token cost ticker.

Preview

Variants

Atoms — AgentIdentityChip & StatusLegend

AgentIdentityChip

claude-3-5-sonnetorchestratorclaude-3-haikusearchclaude-3-5-sonnetwriterclaude-3-5-sonnetorchestratorclaude-3-haikusearch

StatusLegend — inline

Running3Paused1Success7Failed1Pending2

StatusLegend — pills (interactive filter)

Pending

claude-3-5-sonnetsearch

Pending

Queued — waiting for orchestrator to assign work

0sjust now

Paused

claude-3-5-sonnetwriter

Paused

Waiting for human approval to run bash("rm -rf dist/")

6/9

7m 48sfeat/cleanup31k$0.07

Success

claude-3-haikusearch

Success

Found 14 relevant papers. Summary written to context/results.md.

2m 03sfeat/agent-loop2m ago8.7k$0.01

Error

claude-3-5-sonnetorchestrator

Failed

Tool call timed out after 30s: read_file("src/index.ts")

1m 37sfeat/agent-loop1m ago14k$0.03

Props

Prop	Type	Description
agent*	AgentMonitorItem	The agent run to display. Contains identity, status, progress, timing, and cost fields.
agent.id*	string	Stable unique identifier for this run.
agent.name*	string	Display name — typically the model slug, e.g. "claude-3-5-sonnet".
agent.role	string	Short role label shown in monospace below the name, e.g. "orchestrator", "search".
agent.status*	StatusType	Run lifecycle state: pending · running · paused · success · error · skipped.
agent.activity	string	What the agent is doing now, or the outcome if finished. Up to two lines.
agent.step	{ current: number; total: number }	Step progress through the current plan. Rendered as "4/9" beside the progress bar.
agent.progress	number	Fraction complete, 0–1. Drives the progress bar when status is running or paused.
agent.elapsed	string	Elapsed run time, e.g. "4m 12s".
agent.branch	string	Branch or workspace label shown with a GitBranch icon.
agent.lastEventAt	string	Short relative time of the last event, e.g. "8s ago".
agent.tokens	number	Total tokens consumed. Rendered inside a CostChip.
agent.cost	number	Total cost in USD. Rendered inside a CostChip alongside tokens.
selected	boolean	Highlights the card with an accent ring — used for selection state in a grid.
onClick	() => void	Called when the card is clicked. Makes the card interactive.
className	string	Additional Tailwind classes applied to the root element.

* required.

Usage

import { AgentMonitorCard } from "@/components/monitor/agent-monitor-card";

<AgentMonitorCard
  agent={{
    id: "agent-001",
    name: "claude-3-5-sonnet",
    role: "orchestrator",
    status: "running",
    activity: "Calling web_search to find relevant papers",
    step: { current: 4, total: 9 },
    progress: 0.44,
    elapsed: "4m 12s",
    branch: "feat/agent-loop",
    lastEventAt: "8s ago",
    tokens: 18400,
    cost: 0.042,
  }}
  onClick={() => setSelected(true)}
/>