# ContextWindowMeter

How full the model’s context window is and what fills it, drawn to scale from the numbers your server supplies.

- **Use it for**: How full the context window is and what fills it.
- **Not for**: A single cost or token number. Try [UsageMeter](https://unseenui.com/components/usage-meter/), [ContextInspector](https://unseenui.com/components/context-inspector/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { ContextWindowMeter } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<ContextWindowMeter variant="bar" variant="detail" value={measured({ segments, limit: 32000 })} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `label` | `string` |  |
| `locale` | `string` |  |
| `value` (required) | `Measurement<ContextWindow>` |  |
| `variant` | `"detail" \| "bar" \| "inline"` |  |
| `warnAt` | `number` | Fraction of the limit from which the meter reads as a warning. |

## Keyboard

Tab reaches controls; Enter or Space activates buttons. Accordions use arrow keys, Home and End. Select menus support arrows and typeahead; Escape closes menus and dialogs and restores focus.

## Works with

[RunBoard](https://unseenui.com/components/run-board/), [AgentLanes](https://unseenui.com/components/agent-lanes/), [SubagentTree](https://unseenui.com/components/subagent-tree/), [ExecutionTimeline](https://unseenui.com/components/execution-timeline/), [WorkflowGraph](https://unseenui.com/components/workflow-graph/), [AttentionQueue](https://unseenui.com/components/attention-queue/), [RunCompare](https://unseenui.com/components/run-compare/), [ContextBar](https://unseenui.com/components/context-bar/), [Plan](https://unseenui.com/components/plan/), [AgentSteering](https://unseenui.com/components/agent-steering/), [CostLedger](https://unseenui.com/components/cost-ledger/), [MemoryPanel](https://unseenui.com/components/memory-panel/)

Page: https://unseenui.com/components/context-window-meter/