{
  "name": "budget-guard",
  "type": "registry:ui",
  "title": "Budget Guard",
  "description": "Spend and token caps against what a run has consumed. A soft limit warns and a hard limit stops — collapsing them into one bar is how a team ends up believing they have a spend cap when what they have is a notification.",
  "category": "Agents",
  "dependencies": [
    "lucide-react@^1.39.0"
  ],
  "registryDependencies": [
    "badge",
    "lib-motion",
    "lib-styles",
    "lib-utils"
  ],
  "files": [
    {
      "path": "components/ui/budget-guard.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps, ReactNode } from 'react'\nimport { Ban, TriangleAlert } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { enterFade, growIn } from '@/lib/motion'\nimport { radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * Spend and token caps, against what a run has actually consumed.\n *\n * The distinction the component is built around: a **soft** limit warns, a\n * **hard** limit stops. Collapsing them into one bar is how a team ends up\n * believing they have a spend cap when what they have is a notification.\n *\n * So a hard limit is drawn as a wall on the track — a solid marker with a stop\n * glyph — and a soft one as a dashed threshold. Once a hard limit is passed the\n * whole row is destructive and says `stopped`, because at that point the run is\n * not running and every other reading on the screen is historical.\n *\n * Bars are scaled to the hard limit when there is one, so \"how much room is\n * left before it stops\" is the length being read. Scaling to the soft limit\n * makes a run look finished when it has half its budget left.\n */\nexport type Budget = {\n  id: string\n  label: ReactNode\n  /** Consumed so far, in whatever unit `format` renders. */\n  used: number\n  /** Warns when passed. */\n  soft?: number\n  /** Stops the run when passed. */\n  hard?: number\n  format?: (value: number) => string\n  note?: ReactNode\n}\n\ntype BudgetGuardProps = Omit<ComponentProps<'div'>, 'children'> & {\n  budgets: Budget[]\n  stoppedLabel?: string\n  warningLabel?: string\n  hardLabel?: string\n  softLabel?: string\n  emptyLabel?: string\n  label?: string\n}\n\nfunction BudgetGuard({\n  budgets,\n  stoppedLabel = 'stopped',\n  warningLabel = 'over the warning threshold',\n  hardLabel = 'hard limit',\n  softLabel = 'warn at',\n  emptyLabel = 'No budgets configured — this run is uncapped.',\n  label = 'Budgets',\n  className,\n  ...props\n}: BudgetGuardProps) {\n  return (\n    <div\n      data-slot=\"budget-guard\"\n      className={cn(enterFade, surface, radius.surface, 'overflow-hidden', className)}\n      {...props}\n    >\n      <p className=\"border-border bg-muted/40 text-muted-foreground/70 border-b px-4 py-2 text-[11px] font-medium tracking-[0.14em] uppercase\">\n        {label}\n      </p>\n\n      {budgets.length === 0 ? (\n        <p className=\"flex items-start gap-2 px-4 py-3 text-xs text-[var(--amber-soft-foreground)]\">\n          <TriangleAlert className=\"mt-px size-3.5 shrink-0\" aria-hidden=\"true\" />\n          {emptyLabel}\n        </p>\n      ) : (\n        <ul className=\"divide-border list-none divide-y\">\n          {budgets.map((budget) => {\n            const format = budget.format ?? ((value: number) => value.toLocaleString())\n            // Scaled to the wall, so the length being read is room-until-stop.\n            const ceiling = budget.hard ?? budget.soft ?? budget.used ?? 1\n            const stopped = budget.hard !== undefined && budget.used >= budget.hard\n            const warning =\n              !stopped && budget.soft !== undefined && budget.used >= budget.soft\n\n            return (\n              <li key={budget.id} className=\"flex flex-col gap-2 px-4 py-3\">\n                <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n                  <span className=\"flex items-center gap-2 text-sm font-medium\">\n                    {budget.label}\n                    {stopped && (\n                      <Badge size=\"sm\" color=\"destructive\">\n                        <Ban className=\"size-3\" aria-hidden=\"true\" />\n                        {stoppedLabel}\n                      </Badge>\n                    )}\n                    {warning && (\n                      <Badge size=\"sm\" color=\"amber\">\n                        {warningLabel}\n                      </Badge>\n                    )}\n                  </span>\n                  <span\n                    className={cn(\n                      'font-mono text-xs tabular-nums',\n                      stopped\n                        ? 'text-[var(--destructive-soft-foreground)]'\n                        : 'text-muted-foreground',\n                    )}\n                  >\n                    {format(budget.used)}\n                    {budget.hard !== undefined && <> / {format(budget.hard)}</>}\n                  </span>\n                </div>\n\n                <div className=\"bg-muted relative h-2 w-full overflow-hidden rounded-full\">\n                  <div\n                    className={cn(\n                      'h-full rounded-full',\n                      stopped\n                        ? 'bg-[var(--destructive-soft-foreground)]'\n                        : warning\n                          ? 'bg-[var(--amber-soft-foreground)]'\n                          : 'bg-muted-foreground/50',\n                      growIn,\n                    )}\n                    style={{ width: `${Math.min(100, (budget.used / ceiling) * 100)}%` }}\n                  />\n\n                  {/* A dashed threshold; the hard wall is drawn below it. */}\n                  {budget.soft !== undefined && budget.hard !== undefined && (\n                    <span\n                      aria-hidden=\"true\"\n                      title={`${softLabel} ${format(budget.soft)}`}\n                      className=\"absolute inset-y-0 w-px bg-[var(--amber-soft-foreground)]/60\"\n                      style={{ insetInlineStart: `${(budget.soft / ceiling) * 100}%` }}\n                    />\n                  )}\n                </div>\n\n                <div className=\"text-muted-foreground/60 flex flex-wrap gap-x-3 text-[11px]\">\n                  {budget.soft !== undefined && (\n                    <span>\n                      {softLabel} {format(budget.soft)}\n                    </span>\n                  )}\n                  {budget.hard !== undefined && (\n                    <span>\n                      {hardLabel} {format(budget.hard)}\n                    </span>\n                  )}\n                  {budget.note && <span>{budget.note}</span>}\n                </div>\n              </li>\n            )\n          })}\n        </ul>\n      )}\n    </div>\n  )\n}\n\nexport { BudgetGuard }\nexport type { BudgetGuardProps }\n"
    }
  ]
}