{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "token-meter",
  "title": "Token Meter",
  "description": "How much of the context window is gone, split by what spent it.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/default/token-meter/token-meter.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type TokenSegment = {\n  label: string\n  value: number\n  /** Any CSS colour. Defaults to a shade drawn from the theme. */\n  color?: string\n}\n\nexport type TokenMeterProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"children\"\n> & {\n  /** Total consumed. Ignored when segments are given, which sum to it. */\n  used?: number\n  limit: number\n  segments?: readonly TokenSegment[]\n  label?: string\n  /** Fraction of the limit at which the meter reads as tight. Defaults to 0.8. */\n  warnAt?: number\n  /** Formats both numbers in the readout. */\n  format?: (value: number) => string\n  showLegend?: boolean\n}\n\nconst defaultColors = [\n  \"var(--primary)\",\n  \"color-mix(in oklab, var(--primary) 45%, var(--muted))\",\n  \"color-mix(in oklab, var(--primary) 20%, var(--muted))\",\n]\n\nfunction compact(value: number) {\n  if (value < 1000) return String(value)\n  if (value < 1_000_000)\n    return `${(value / 1000).toFixed(value < 10_000 ? 1 : 0)}k`\n\n  return `${(value / 1_000_000).toFixed(1)}M`\n}\n\nexport function TokenMeter({\n  used,\n  limit,\n  segments,\n  label = \"Context used\",\n  warnAt = 0.8,\n  format = compact,\n  showLegend = true,\n  className,\n  ...rootProps\n}: TokenMeterProps) {\n  const total = segments\n    ? segments.reduce((sum, segment) => sum + segment.value, 0)\n    : (used ?? 0)\n\n  const safeLimit = limit > 0 ? limit : 1\n  const fraction = Math.min(1, Math.max(0, total / safeLimit))\n  const tight = fraction >= warnAt\n  const full = total >= safeLimit\n\n  return (\n    <div\n      data-slot=\"token-meter\"\n      data-tight={tight || undefined}\n      className={cn(\"min-w-0\", className)}\n      {...rootProps}\n    >\n      <div className=\"mb-1.5 flex items-baseline justify-between gap-3\">\n        <span className=\"text-muted-foreground text-xs\">{label}</span>\n        <span\n          className={cn(\n            \"font-[family-name:var(--font-mono),monospace] text-xs tabular-nums\",\n            full\n              ? \"text-destructive\"\n              : tight\n                ? \"text-[color-mix(in_oklab,var(--destructive)_60%,var(--foreground))]\"\n                : \"text-muted-foreground\"\n          )}\n        >\n          {format(total)} / {format(limit)}\n        </span>\n      </div>\n\n      <div\n        role=\"meter\"\n        aria-label={label}\n        aria-valuenow={total}\n        aria-valuemin={0}\n        aria-valuemax={limit}\n        aria-valuetext={`${format(total)} of ${format(limit)}, ${Math.round(fraction * 100)} percent`}\n        className=\"bg-muted flex h-2 w-full overflow-hidden rounded-full\"\n      >\n        {segments ? (\n          segments.map((segment, index) => (\n            <span\n              key={segment.label}\n              className=\"h-full transition-[width] duration-300 motion-reduce:transition-none\"\n              style={{\n                width: `${Math.min(100, (segment.value / safeLimit) * 100)}%`,\n                background:\n                  segment.color ?? defaultColors[index % defaultColors.length],\n              }}\n            />\n          ))\n        ) : (\n          <span\n            className=\"h-full transition-[width] duration-300 motion-reduce:transition-none\"\n            style={{\n              width: `${fraction * 100}%`,\n              background:\n                full || tight ? \"var(--destructive)\" : \"var(--primary)\",\n            }}\n          />\n        )}\n      </div>\n\n      {segments && showLegend ? (\n        <ul className=\"text-muted-foreground mt-2 flex flex-wrap gap-x-4 gap-y-1 text-[0.6875rem]\">\n          {segments.map((segment, index) => (\n            <li key={segment.label} className=\"flex items-center gap-1.5\">\n              <span\n                aria-hidden=\"true\"\n                className=\"size-2 shrink-0 rounded-full\"\n                style={{\n                  background:\n                    segment.color ??\n                    defaultColors[index % defaultColors.length],\n                }}\n              />\n              {segment.label}\n              <span className=\"tabular-nums\">{format(segment.value)}</span>\n            </li>\n          ))}\n        </ul>\n      ) : null}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "ai",
    "agent",
    "usage",
    "meter"
  ],
  "type": "registry:ui"
}