CostMeter

Agent harness · src/components/CostMeter/CostMeter.tsx

What a run has spent against what it was allowed.

The tone escalates at 75% and 90% on its own, so a budget approaching its limit changes appearance without anybody remembering to set a flag. That is the whole value: a meter that only goes red when told will be green on the run that overspends.

breakdown matters because a total nobody can decompose is a number nobody can act on - the question after "we spent this much" is always "on what".

Import

import { CostMeter } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
used	number
budget	number
label	React.ReactNode
unit	string
showBudget	boolean	false hides the budget, for a spend with no ceiling.
tone	'default' | 'warning' | 'danger'	Overrides the derived tone. Otherwise 75% is warning and 90% is danger.
breakdown	CostBreakdown[]	Where it went.
format	(v: number) => string
className	string

Exported types

CostBreakdown