Context Budget

CSS

A segmented bar showing where the context window goes, with a compact action.

Context window

116,600 / 200,000

System3.2k

Tools9.8k

History41.2k

Files62.4k

Install

$ npx shadcn@latest add https://spotcheckui.com/r/context-budget.json

No motion engine needed.

Usage

import { ContextBudget } from "@/components/spotcheck/context-budget"

<ContextBudget
  limit={200000}
  segments={[
    { label: "System", tokens: 3200 },
    { label: "Tools", tokens: 9800 },
    { label: "History", tokens: 41200 },
    { label: "Files", tokens: 62400 },
  ]}
  onCompact={compact}
/>

Props

limit * RequirednumberDefault —The size of the context window, in tokens.
segments * RequiredBudgetSegment[]Default —Where the tokens went, in display order.
onCompact() => voidDefault —Shows a Compact button. Pass it from a client component.
compactLabelstringDefault Compact history
classNamestringDefault —

Keyboard

Enter	Press Compact

Reduced motion

Segments change size at once.