Context meter

How full the context window is, as a ring or a bar, with a breakdown on click and a warning before compaction.

Markdown

On this page

Comfortable, near the compaction line, nearly full, and just compacted. Click one for the breakdown.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/context-meter.json

Usage

tsx

import { ContextMeter } from "@/components/ui/chatcn/context-meter"

<ContextMeter
  limit={200_000}
  breakdown={{ system: 3_100, tools: 12_400, messages: 61_000, files: 21_800 }}
  onCompact={compact}
/>

Counts read 98.4k on the trigger and 61 000 in the breakdown: tabular figures with thin-space grouping. Under the warning line the arc is muted gray; past it, it turns amber; past 95 percent it turns red and the label gets a red tag. The breakdown gives each source its own chart hue next to its name.

ContextCompactionDivider marks the spot in a transcript where older messages were summarized.

Examples

Bar

The bar variant for a status line, with custom segment labels.

Props

Prop	Type	Notes
`limit`	`number`	Window size in tokens
`used`	`number`	Defaults to the sum of the breakdown
`breakdown`	`{ system, tools, messages, files }` or `ContextSegment[]`	Up to four shades plus free space
`variant`	`"ring" \| "bar"`	Ring for corners, bar for status lines
`warnAt`	`number`	Default 0.8
`compacted`	`boolean \| { freedTokens?, note? }`	Shows Context compacted
`onCompact`	`() => void`	Adds Compact now to the warning
`model`	`ReactNode`	Set in mono in the popover
`showLabel`	`boolean`	The percentage next to the ring

Keyboard

Key	Action
`Enter`, `Space`	Open the breakdown
`Esc`	Close it and return focus to the meter

Accessibility

The trigger's name starts with what it shows, then says what it measures: 49%, context window used: 98.4k of 200k tokens.
The breakdown is a definition list; segments are never told apart by shade alone.

Motion

The arc and bar fill over 280 ms when usage changes, so a jump reads as growth.
The popover grows from the trigger in 180 ms and never animates when opened by keyboard.
Reduced motion snaps the fill and keeps the popover fade.