Progress / usage meter
Quantifies a budget, quota, or resource. Threshold ticks shift the bar tone when usage crosses them — the meter speaks before the agent asks for more headroom.
Included in the single kansho full pack. Components are not offered as separate installs.
Budget tracking
Auto-tints at warning/danger thresholdsSafely under budget.
Crossing the warning threshold — review before next run.
One slot remaining.
Compaction recommended at 95%.
Tones — manual override
Throttling within 30s if usage continues.
Stacked in a budget panel
Component documentation
Progress Meter
components/agent/progress-meter.tsxPurpose
Displays bounded progress with optional formatting, thresholds, tone escalation, and explanatory hint.
Appropriate use
Use for budgets or capacity where current and maximum values are known.
Example
components/agent/progress-meter.tsx has a representative live example in the "Budget tracking" section on /components/progress-meter.
States
Tones are neutral, accent, warning, danger, or success; size is sm or md; explicit tone overrides threshold escalation.
API and props
ProgressMeter accepts label, value, max, unit, format, thresholds, tone, fallbackTone, size, hint, and className.
Dependencies
Direct imports are React, compact-number formatting, and cn.
Accessibility
Renders a named progressbar with numeric min, max, and rounded current value; visible text repeats the value.
Limitations
Values are visually clamped but callers must provide meaningful max and units; thresholds do not trigger callbacks.
Source
Source: components/agent/progress-meter.tsx.
Full pack
components/agent/progress-meter.tsx is documented at /components/progress-meter and installs only through the single Kansho full pack; no individual component install is offered.