{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"usage-limits","type":"registry:component","title":"Usage limits","description":"What an agent has left: the context window split by what fills it, and each plan limit with its share and a live reset countdown.","author":"Hairline UI","dependencies":["lucide-react"],"registryDependencies":["https://hairlineui.com/r/number-roll.json"],"files":[{"path":"registry/usage-limits.tsx","type":"registry:component","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronDown, ChevronRight } from \"lucide-react\";\nimport { NumberRoll } from \"./number-roll\";\n\n/* ─────────────────────────────────────────────────────────\n * USAGE LIMITS: what an agent has left, at a glance\n *\n * context one bar for the context window, split by what's\n * in it (system, tools, files, conversation); the\n * chevron folds the breakdown open underneath, and\n * pointing at a part steps the others back\n * limits each plan limit as a bar with its share and when\n * it resets; under a day away it counts down, the\n * minutes rolling down like a clock\n * status a bar turns amber past 80% and red at its limit,\n * where \"Limit reached\" folds open beside the share\n * arrive the bars grow from the left the first time they're\n * seen and every figure rolls up from zero\n *\n * All of it is real text; the bars are decoration.\n * ───────────────────────────────────────────────────────── */\n\nexport interface ContextPart {\n id: string;\n label: string;\n tokens: number;\n}\n\nexport interface PlanLimit {\n id: string;\n label: string;\n used: number;\n limit: number;\n /** When it resets (ms or Date). */\n resetsAt?: number | Date;\n}\n\nexport interface UsageLimitsProps extends React.HTMLAttributes {\n /** The context window, split into what fills it. */\n context?: { limit: number; parts: ContextPart[] };\n /** The plan's name, e.g. \"Max\". */\n plan?: string;\n limits: PlanLimit[];\n /** Makes the plan heading a link, e.g. to billing. */\n onPlanClick?: () => void;\n defaultOpen?: boolean;\n locales?: string | string[];\n}\n\nconst EASE = \"cubic-bezier(0.16,1,0.3,1)\";\nconst FOCUS = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40\";\nconst COLORS = [\"var(--chart-1, var(--primary))\", \"var(--chart-4, #8b6fe8)\", \"var(--chart-3, #1baf7a)\", \"var(--chart-2, #e8743b)\", \"var(--chart-5, #e0a21b)\"];\nconst compact = (n: number, locales?: string | string[]) => new Intl.NumberFormat(locales, { notation: \"compact\", maximumFractionDigits: 1 }).format(n);\n\nconst reducedQuery = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduced = (onChange: () => void) => {\n const query = window.matchMedia(reducedQuery);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n};\nconst useReducedMotion = () =>\n React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false);\n\nconst tone = (share: number) => (share >= 1 ? \"bg-red-500\" : share >= 0.8 ? \"bg-amber-500\" : \"\");\n\n/** \"Resets in 2 h 46 min\" under a day away, the minutes rolling down; \"Resets Tue 3:00 pm\" further out. */\nfunction Resets({ at, now, locales }: { at: number; now: number | null; locales?: string | string[] }) {\n if (now === null) return Resets;\n const left = Math.max(0, at - now);\n if (left > 86_400_000) {\n const d = new Date(at);\n return Resets {d.toLocaleString(locales ?? \"en-GB\", { weekday: \"short\", hour: \"numeric\", minute: \"2-digit\" })};\n }\n const hours = Math.floor(left / 3_600_000);\n const minutes = Math.ceil((left % 3_600_000) / 60_000);\n return (\n \n Resets in\n {hours > 0 && (\n <>\n h\n \n )}\n \n min\n \n );\n}\n\nexport function UsageLimits({ context, plan, limits, onPlanClick, defaultOpen = false, locales, className = \"\", ...props }: UsageLimitsProps) {\n const reduced = useReducedMotion();\n const id = React.useId();\n const [open, setOpen] = React.useState(defaultOpen);\n const [visible, setVisible] = React.useState(false);\n const [focus, setFocus] = React.useState(null);\n const [now, setNow] = React.useState(null);\n const rootRef = React.useRef(null);\n\n React.useEffect(() => {\n const el = rootRef.current;\n if (!el) return;\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (entry.isIntersecting) {\n setVisible(true);\n observer.disconnect();\n }\n },\n { rootMargin: \"0px 0px -10% 0px\" },\n );\n observer.observe(el);\n return () => observer.disconnect();\n }, []);\n\n // A clock that ticks on each whole minute, only once mounted (so a server render never reads as \"reset\").\n React.useEffect(() => {\n let timer = 0;\n const tick = () => {\n setNow(Date.now());\n timer = window.setTimeout(tick, 60_000 - (Date.now() % 60_000) + 50);\n };\n tick();\n return () => window.clearTimeout(timer);\n }, []);\n\n const used = context ? context.parts.reduce((s, p) => s + p.tokens, 0) : 0;\n const contextShare = context?.limit ? used / context.limit : 0;\n\n return (\n
\n
\n {context && (\n
\n setOpen((o) => !o)}\n className={`-mx-1.5 flex w-[calc(100%+12px)] items-baseline justify-between gap-3 rounded-lg px-1.5 py-0.5 text-left ${FOCUS}`}\n >\n \n Context window\n \n \n \n /{\" \"}\n {compact(context.limit, locales)}\n \n = 1 ? \"text-red-600\" : contextShare >= 0.8 ? \"text-amber-600\" : \"text-foreground\"}`}>\n \n \n \n \n \n\n {/* What fills the window: one segment per part, a 2px gap between them. */}\n
setFocus(null)}>\n {context.parts.map((p, i) => (\n setFocus(p.id)}\n className=\"h-full first:rounded-l-full\"\n style={{\n width: `${visible ? (p.tokens / context.limit) * 100 : 0}%`,\n background: COLORS[i % COLORS.length],\n opacity: focus && focus !== p.id ? 0.3 : 1,\n transition: reduced ? \"none\" : `width 900ms ${EASE} ${i * 70}ms, opacity 240ms ${EASE}`,\n }}\n />\n ))}\n
\n\n \n
    setFocus(null)}>\n {context.parts.map((p, i) => (\n setFocus(p.id)}\n className=\"flex items-center gap-2 pt-2 text-[12px] transition-opacity duration-200 @md:text-[12.5px]\"\n style={{ opacity: focus && focus !== p.id ? 0.45 : 1 }}\n >\n \n {p.label}\n {compact(p.tokens, locales)}\n {Math.round((p.tokens / context.limit) * 100)}%\n \n ))}\n
\n
\n \n )}\n\n
\n

\n {onPlanClick ? (\n \n ) : (\n Plan limits{plan ? ` · ${plan}` : \"\"}\n )}\n

\n
    \n {limits.map((l, i) => {\n const share = l.limit ? l.used / l.limit : 0;\n const reached = share >= 1;\n return (\n
  • \n
    \n {l.label}\n \n {l.resetsAt !== undefined && }\n {/* \"Limit reached\" folds open beside the share rather than replacing it. */}\n \n \n Limit reached\n \n = 0.8 ? \"text-amber-600\" : \"text-foreground\"}`}>\n \n \n \n \n
    \n
    \n 0 ? 1.5 : 0, Math.min(share, 1) * 100) : 0}%`,\n background: tone(share) ? undefined : \"var(--chart-1, var(--primary))\",\n transition: reduced ? \"none\" : `width 900ms ${EASE} ${i * 90}ms, background-color 300ms ${EASE}`,\n }}\n />\n
    \n
    • \n );\n })}\n
\n
\n
\n \n );\n}\n"}],"css":{},"docs":"Docs and live preview: https://hairlineui.com/ui/usage-limits"}