ProgressMeter

Horizontal meter tracking a run's cost or token usage against its budget.

Preview

Token budget60k / 100k

60,000 / 100,000 tokens used across this session.

Cost$0.042 / $0.500

Variants

25% — healthy

Token budget25k / 100k

18,400 tokens used across 4 tool calls.

60% — approaching warning

Token budget60k / 100k

Approaching the warning threshold — consider compressing context.

90% — danger zone

Token budget90k / 100k

Above the danger threshold. Further tool calls may be truncated.

Hard-pinned tone — success

Steps completed9 / 9

All steps finished. Run took 4m 12s.

Cost meter — small size

Cost$0.042 / $0.500

$0.042 of $0.50 budget used.

Props

Prop	Type	Description
label*	string	Accessible label shown above the bar in small caps. Used as aria-label on the progressbar.
value*	number	Current value — must be between 0 and max.
max*	number	Maximum value that defines 100% of the bar.
unit	string	Optional unit suffix appended to the formatted values, e.g. "tokens".
format	(n: number) => string	Custom formatter for the value and max labels. Defaults to compact number (e.g. "18.4k").
thresholds	{ warning?: number; danger?: number }	Fractions of max (0–1) at which the bar escalates to warning (amber) or danger (red) tone. Tick marks are drawn at each threshold.
tone	MeterTone	Hard-override the bar colour regardless of thresholds: neutral · accent · warning · danger · success.
fallbackTone	MeterTone	Base tone used below the warning threshold. Threshold crossings still escalate on top of it. Ignored when tone is set.
size	"sm" \| "md"	Bar height. sm = 4px (h-1), md = 6px (h-1.5). Defaults to md.
hint	React.ReactNode	Optional caption rendered below the bar in tertiary text.
className	string	Additional Tailwind classes on the wrapper div.

* required.

Usage

import { ProgressMeter } from "@/components/agent/progress-meter";

// Token budget with automatic threshold escalation
<ProgressMeter
  label="Token budget"
  value={60000}
  max={100000}
  thresholds={{ warning: 0.7, danger: 0.9 }}
  hint="60,000 / 100,000 tokens used."
/>

// Cost meter with custom formatter
<ProgressMeter
  label="Cost"
  value={0.042}
  max={0.5}
  format={(n) => `$${n.toFixed(3)}`}
  thresholds={{ warning: 0.6, danger: 0.85 }}
/>

// Hard-pinned success tone (e.g. all steps done)
<ProgressMeter
  label="Steps completed"
  value={9}
  max={9}
  tone="success"
/>