TokenBudgetMeter

Metered display of an agent's token budget: used, remaining, and an alert threshold.

Preview

Token budget

· run · campaign-agentwill hit cap in ~6m

Tokens158k / 200k

Cost$3.42 / $5.00USD

Breakdown158k segmented

Planning22k
Tool calls91k
Memory45k

Variants

Low usage

Token budget

· run · dataops-v2

Tokens18k / 200k

Cost$0.11 / $5.00USD

Breakdown18k segmented

Planning4.2k
Tool calls9.8k
Memory4.4k

High usage — cap imminent

Token budget

· run · reporting-agentcap imminent

Tokens194k / 200k

Cost$4.91 / $5.00USD

Breakdown194k segmented

Planning18k
Tool calls140k
Memory36k

Props

Prop	Type	Description
used*	number	Tokens consumed so far.
max*	number	Hard token cap for this run, mission, or window.
cost	number	Optional dollar cost spent so far. Requires costMax to render the cost bar.
costMax	number	Optional dollar cost cap. Requires cost to render the cost bar.
segments	TokenBudgetSegment[]	Named spend segments stacked in the breakdown bar.
scope	string	What the budget covers — e.g. "run", "mission", "agent".
forecast	string	ETA hint shown in warning colour — e.g. "will hit cap in 6m".
className	string	Additional CSS classes for the section root.

* required.

Usage

import { TokenBudgetMeter } from "@/components/control-plane/token-budget-meter";

<TokenBudgetMeter
  used={158_000}
  max={200_000}
  cost={3.42}
  costMax={5.0}
  scope="run · campaign-agent"
  forecast="will hit cap in ~6m"
  segments={[
    { id: "plan", label: "Planning", tokens: 22_000, tone: "accent" },
    { id: "tools", label: "Tool calls", tokens: 91_000, tone: "warning" },
    { id: "memory", label: "Memory", tokens: 45_000, tone: "neutral" },
  ]}
/>