Depute Logo

Budget Meter

Visual gauge showing session budget vs. burn rate.

Install

npx ax-depute@latest add budget-meter
pnpm dlx ax-depute@latest add budget-meter
yarn dlx ax-depute@latest add budget-meter
bunx ax-depute@latest add budget-meter

Overview

Delegation requires guardrails. Instead of blocking every action, Budget Meter allows users to grant agents an explicit budget (API tokens, currency, or API call limits) and tracks the real-time burn rate. It automatically calculates severity thresholds to warn users before the budget is exhausted.

Session TokensNear limit
45.0kof50.0k(90%)
Session Tokens: 45.0k of 50.0k used (90%). Near limit.
Interactive StorybookView all states, toggle props, and test edge cases.

Basic Usage

<BudgetMeter
  label="Session Tokens"
  used={45000}
  total={50000}
  unit="tokens"
  burnRate={1200}
/>

Solution Patterns

Integrate BudgetMeter directly into a DelegationGate prior to spawning a new agent to enforce explicit limits, or embed it persistently within RunControls alongside pause/stop actions to maintain situational awareness of a running swarm.

Props

PropTypeDefaultDescription
labelstringHuman-readable label
spentnumberCurrent amount consumed
limitnumberMaximum budget allowance
unit'currency' | 'tokens' | 'api-calls' | 'compute' | 'custom''tokens'Unit type
burnRatenumberCurrent burn rate per minute
estimatedTimeRemainingstringHuman-readable time remaining
elevatedThresholdnumber60Percentage to trigger elevated state
criticalThresholdnumber85Percentage to trigger critical state
compactbooleanfalseRender inline variant

Design rationale

Why proportional thresholds? Raw numbers (e.g., "45,000 tokens") are meaningless without context. Auto-calculating elevated (>60%) and critical (>85%) severity colors translates abstract numbers into actionable visual urgency.

On this page