Components · Trust

Context Budget

Every delegation contract has limits; almost no interface shows them. The budget renders consumption against caps in honest bands, and when a cap is hit, the run pauses into a rendered state with a human decision attached. Budgets nobody can see are budgets nobody trusts, and surprise bills are how agent products lose customers.

When to use

Any run where the user set or implied a limit: spend, tokens, time, API calls. Show it during the run, not in a postmortem. Skip it for instant, effectively-free actions.

Behavior

Three bands, each labeled in words: fine, near cap, at cap. Hitting a cap pauses the run and states that nothing was spent past it; raising the cap is an explicit human action that belongs in the receipt trail. Bars carry ARIA progressbar semantics.

Usage

tsx

import { ContextBudget } from "@/components/context-budget";

<ContextBudget
  lines={[
    { label: "Spend", used: 4.1, cap: 5, format: (n) => `$${n.toFixed(2)}` },
    { label: "Time", used: 21, cap: 45, format: (n) => `${n}m` },
  ]}
  onRaise={(which) => askUserToRaise(which)}
/>

Install

shell

npx shadcn@latest add https://agent-pitstop.vercel.app/r/context-budget.json

Or copy the source from registry/context-budget. MIT licensed.

Research run budget

Spend$5.00 / $5.00At cap
Paused at the spend cap. Nothing spent past it.
Tokens412k / 1000kFine
Time21m / 45mFine

The run hit its $5 spend cap and paused. Raising the cap is a human decision.