## Context Meter (S—042)

A token-budget meter for AI apps: one bar of coloured segments, a big total and chips that isolate each source.

- URL: https://sundaeui.dev/components/context-meter
- Category: UI components · Art direction: Futuristic
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/context-meter.json`
- Tags: meter, tokens, agent, data, progress, ai

Shows how much of a model’s context window is used and by what. Each source (chat, files, tools, system prompt, memory) is a segment of one bar, with free space hatched at the end.
Hover or press a chip and the other segments dim while the total switches to that source. A Compact toggle thins the bar and hides per-source numbers.

### Usage

```tsx
import { ContextMeter } from '@/components/sundae/context-meter'

<ContextMeter
  limit={200000}
  segments={[
    { label: 'Chat', value: 41200, color: '#22d3ee' },
    { label: 'Files', value: 33800, color: '#6366f1' },
    { label: 'Tools', value: 18600, color: '#f472b6' },
  ]}
/>
```

### Props

- `segments` (`ContextSegment[]`, required): Label, token count and colour per source.
- `limit` (`number`, required): Context window size in tokens.
- `title` (`string`, default `'Context'`): Heading.
- `variant` (`'detailed' | 'compact'`, default `'detailed'`): Initial density; users can toggle it.
- `stroke` (`boolean`, default `true`): Hairline border.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Chat and agent UIs that need to show how close a conversation is to its context limit.
- Billing or usage pages that break one quota into a few sources.

### When not to use

- More than six sources: segments get too thin to read. Use a table.
- Values that are not parts of one whole.

### Accessibility

- The bar is role="meter" with aria-valuenow, aria-valuemax and a readable aria-valuetext ("128K of 200K tokens, 64%").
- Chips are toggle buttons (aria-pressed) so keyboard users can isolate a source.
- Reduced motion removes the segment width animation.

### Keyboard

- Tab: Move between the mode toggle and source chips
- Enter / Space: Isolate or release a source