{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "context-budget",
  "title": "Context Budget",
  "description": "A segmented bar showing where the context window goes, with a compact action.",
  "registryDependencies": [
    "https://spotcheckui.com/r/spotcheck-base.json",
    "https://spotcheckui.com/r/button.json"
  ],
  "files": [
    {
      "path": "registry/spotcheck/components/spotcheck/context-budget.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/spotcheck/components/spotcheck/button\"\n\nconst FILLS = [\"var(--ink)\", \"var(--accent-ink)\", \"var(--mute)\", \"var(--wash)\"]\n\nexport type BudgetSegment = { label: string; tokens: number }\n\ntype ContextBudgetProps = {\n  /** The size of the context window, in tokens. */\n  limit: number\n  /** Where the tokens went, in display order. */\n  segments: BudgetSegment[]\n  /** Shows a Compact button. Pass it from a client component. */\n  onCompact?: () => void\n  compactLabel?: string\n  className?: string\n}\n\nconst compact = (tokens: number) => `${(tokens / 1000).toFixed(1)}k`\n\nexport function ContextBudget({ limit, segments, onCompact, compactLabel = \"Compact history\", className }: ContextBudgetProps) {\n  const used = segments.reduce((sum, segment) => sum + segment.tokens, 0)\n  const summary = segments.map((segment) => `${segment.label} ${compact(segment.tokens)}`).join(\", \")\n\n  return (\n    <div className={cn(\"flex flex-col gap-3.5 font-(family-name:--f-body)\", className)}>\n      <div className=\"flex flex-wrap items-end justify-between gap-4\">\n        <div>\n          <div className=\"spotcheck-label\">Context window</div>\n          <div className=\"spotcheck-display text-[44px] leading-none tabular-nums\">\n            {used.toLocaleString(\"en-US\")}{\" \"}\n            <span className=\"text-mute text-[22px] font-medium\">/ {limit.toLocaleString(\"en-US\")}</span>\n          </div>\n        </div>\n        {onCompact && <Button onClick={onCompact}>{compactLabel}</Button>}\n      </div>\n      <div\n        role=\"img\"\n        aria-label={`${Math.round((used / limit) * 100)} percent of the context window used: ${summary}`}\n        className=\"border-ink flex h-[34px] border-(length:--rule)\"\n      >\n        {segments.map((segment, index) => (\n          <div\n            key={segment.label}\n            className=\"border-ink h-full border-r-(length:--rule) transition-[width] duration-500 motion-reduce:transition-none\"\n            style={{ width: `${(segment.tokens / limit) * 100}%`, background: FILLS[index % FILLS.length] }}\n          />\n        ))}\n      </div>\n      <div className=\"grid grid-cols-[repeat(auto-fit,minmax(120px,1fr))] gap-x-3.5 gap-y-2\">\n        {segments.map((segment, index) => (\n          <div key={segment.label} className=\"text-mute flex flex-col gap-0.5 font-(family-name:--f-mono) text-[11px]\">\n            <span>\n              <i\n                className=\"border-ink mr-1.5 inline-block size-2.5 border-[1.5px] align-[-1px]\"\n                style={{ background: FILLS[index % FILLS.length] }}\n              />\n              {segment.label}\n            </span>\n            <b className=\"spotcheck-heading text-ink text-[22px] leading-none tabular-nums\">{compact(segment.tokens)}</b>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ai"
  ],
  "type": "registry:component"
}