Skip to content

Screens

Agent Console

A team view of agents in production — background runs, a trace, eval results, usage and rate limits.

2 variantsMIT

Preview

Full screen

Agents

prod

Runs today

1,284
+12.0%, better

of 1,500 daily quota86%

Success rate

98.2%
+0.4%, better

SLO 99%99%

p95 latency

6.2s
-8.0%, better

Target 8s100%

Spend today

$184.20
+5.0%, better

of $300 daily cap61%

  • invoice-agent

    Running

    Backfill March invoice PDFs

    Rendering batch 7 of 12
    7:47 · 62%

  • triage-agent

    Running

    Label new support tickets

    Classifying ticket #48213
    30:20 · 72%

  • docs-agent

    Needs review

    Translate API reference to Japanese

    Needs a glossary decision
    16:00 · 40%

  • triage-agent

    Queued

    Merge duplicate tickets

    Waits for a free worker
    0:00 · 0%

0ms1.0s2.0s

Click a block to zoom in, Esc to step back out

RecordingRecording 2.0s4 spans

invoice-agent v42

v42 vs v41 · 28 of 32 running

100.0%

Up11.0 pts vs baseline
  • AccuracyBetter · 4%
    Baseline
    89%
    Candidate
    93%
  • Latency p50Better · 0.5s
    Baseline
    4.1s
    Candidate
    3.6s
  • Cost per runBetter · $0.007
    Baseline
    $0.031
    Candidate
    $0.024

Regressed cases · 0

Nothing regressed.

Usage

Last 7 days · 99.5M tokens

$915.40

Up33% vs previous
  • opus-5.535.8M$557.20
  • sonnet-5.563.7M$358.20

November

$915.40 / $1,200.00

Rate limits

opus-5.5 · Tier 3

Healthy
  • Requests / min3,120 of 4,000 left

    Resets in 14s

  • Input tokens / min1.3M of 2.0M left

    Resets in 14s

  • Output tokens / min228k of 400k left

    Resets in 14s

Contextopus-5.5

115kof 200k · 57% full

Tinted cells mark the last 20%

  • Run history61.0k
  • Invoices batch38.0k
  • Tools9 tools12.4k
  • Instructions3.1k

    Installation

    Copies the screen into components/ and installs every component it uses, with their dependencies and theme tokens.

    pnpm dlx shadcn@latest add https://tuffui.com/r/agent-console.json

    Usage

    Pass your own data and wire the callbacks to your agent runtime.

    import { AgentConsole } from "@/components/agent-console";

export function ConsoleScreen({ fleet }: { fleet: Fleet }) {
  return (
    <AgentConsole
      data={{
        title: "Agents",
        environment: fleet.env,
        team: fleet.agents.map((a) => ({ id: a.id, name: a.name, status: a.presence })),
        stats: fleet.kpis, // StatGrid items
        agents: fleet.runs, // BackgroundAgents items
        run: { name: fleet.selected.name, spans: fleet.selected.spans, elapsedMs: fleet.selected.ms },
        evals: fleet.latestEval, // EvalResults data
        usage: fleet.usage, // UsageSummary data
        limits: fleet.rateLimits, // RateLimits data
        context: fleet.context, // ContextWindowMeter data
        incident: fleet.incident && {
          title: fleet.incident.title,
          description: fleet.incident.summary,
          approvals: fleet.incident.pendingActions, // ToolApprovalQueue items
        },
      }}
      onSelectAgent={(agent) => openRun(agent.id)}
      onDecide={(requests, decision, scope) => resolve(requests, decision, scope)}
      onAcknowledge={() => acknowledge(fleet.incident.id)}
    />
  );
}

// Mount nothing else for toasts: the screen renders its own Toaster, so
// toast("…") calls from anywhere show up inside the console.

    Props

    PropTypeDefaultDescription
    data*AgentConsoleData—Everything the console shows: nav team, KPIs, background runs, the selected run's spans, eval results, usage, rate limits, context and an optional incident.
    section"agents" | "runs" | "evals" | "usage" | "settings"—Active nav item. Uncontrolled by default.
    onSectionChange(section: ConsoleSection) => void—Called when a nav item is picked.
    onSelectAgent(agent: BackgroundAgent) => void—Open a background run, e.g. to load its trace.
    onDecide(requests, decision, scope) => void—Forwarded to the incident's ToolApprovalQueue.
    onRetryLimits() => void—Forwarded to RateLimits' Retry now.
    onAcknowledge() => void—The incident banner's Acknowledge button.
    classNamestring—Extra classes for the root. The screen fills its parent.
    type AgentConsoleData = {
  title: string;
  environment?: string;
  team: { id: string; name: string; status?: "online" | "away" | "busy" | "working" }[];
  stats: Stat[];                 // from stat-grid
  agents: BackgroundAgent[];     // from background-agents
  run: { name: string; spans: TraceSpan[]; elapsedMs: number; failed?: boolean };
  evals: EvalResultsProps["data"];
  usage: UsageSummaryProps["data"];
  limits: RateLimitsProps["data"];
  context: { limit: number; segments: ContextSegment[]; model?: string };
  incident?: { title: string; description: string; approvals: ToolApprovalRequest[] };
};