{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-context-breakdown",
  "type": "registry:component",
  "title": "Context breakdown",
  "description": "Where the window actually went: prompt, tools, files, conversation, and what's left.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json",
    "https://r.assistant-ui.com/elements-range.json"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/context-breakdown.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { mono, paper } from \"./surfaces\";\nimport { pct } from \"../utils/range\";\n\nconst fmt = (n: number) => n.toLocaleString(\"en-US\");\n\nexport interface ContextSegment {\n  label: string;\n  tokens: number;\n  tint: string;\n}\n\nexport function ContextBreakdown({\n  segments,\n  limit,\n  className,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"children\" | \"segments\" | \"limit\"> & {\n  segments: readonly ContextSegment[];\n  limit: number;\n}) {\n  const used = segments.reduce((sum, segment) => sum + segment.tokens, 0);\n  const pressure = limit === 0 ? 0 : used / limit;\n  const share = (tokens: number) => pct(tokens, limit);\n\n  return (\n    <div\n      data-slot=\"context-breakdown\"\n      className={cn(\n        paper,\n        \"flex w-full max-w-sm flex-col gap-3 rounded-2xl p-4\",\n        className,\n      )}\n\n      {...props}\n    >\n      <div className=\"flex items-baseline justify-between\">\n        <span className=\"text-[13.5px] font-medium\">Context</span>\n        <span\n          className={cn(\n            mono,\n            \"tabular-nums\",\n            pressure > 0.85\n              ? \"text-amber-600 dark:text-amber-400\"\n              : \"text-foreground/35\",\n          )}\n        >\n          {fmt(used)} / {fmt(limit)}\n        </span>\n      </div>\n\n      <div className=\"bg-foreground/[0.06] flex h-2 w-full overflow-hidden rounded-full\">\n        {segments.map((segment) => (\n          <span\n            key={segment.label}\n            className={cn(\n              \"h-full transition-[width] duration-500 ease-out motion-reduce:transition-none\",\n              segment.tint,\n            )}\n            style={{ width: `${share(segment.tokens)}%` }}\n          />\n        ))}\n      </div>\n\n      <div className=\"flex flex-col gap-1.5\">\n        {segments.map((segment) => (\n          <div key={segment.label} className=\"flex items-center gap-2\">\n            <span\n              aria-hidden\n              className={cn(\"size-2 shrink-0 rounded-full\", segment.tint)}\n            />\n            <span className=\"text-foreground/70 min-w-0 flex-1 truncate text-[13px]\">\n              {segment.label}\n            </span>\n            <span\n              className={cn(mono, \"text-foreground/35 shrink-0 tabular-nums\")}\n            >\n              {fmt(segment.tokens)}\n            </span>\n          </div>\n        ))}\n        <div className=\"flex items-center gap-2\">\n          <span\n            aria-hidden\n            className=\"bg-foreground/[0.08] size-2 shrink-0 rounded-full\"\n          />\n          <span className=\"text-foreground/35 min-w-0 flex-1 truncate text-[13px]\">\n            Headroom\n          </span>\n          <span\n            className={cn(mono, \"text-foreground/25 shrink-0 tabular-nums\")}\n          >\n            {fmt(Math.max(0, limit - used))}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}