React Token / Context-Window Meter
A 200K context window still fails when the system prompt, the retrieved sources, the history, the current input, and the space reserved for the reply together cross the line — and a single “N tokens used” never shows which part to cut. This breaks the window into its segments so the fix is obvious.
Context window
143K / 200K- System prompt1,800
- Retrieved sources (RAG)42,000
- Conversation history88,500
- Current message2,400
- Reserved for response8,000
Context window
106K / 100K- System prompt1,800
- Retrieved sources (RAG)61,000
- Conversation history30,500
- Current message4,200
- Reserved for response8,000
Installation
Props
| Prop | Type | Description |
|---|---|---|
| contextTokens | number | The model's context window |
| segments | ContextSegment[] | { label, tokens, tone? } |
| reserveForResponse | number | Tokens held back for the reply |
| warnAt | number | Warn fraction (default 0.85) |
What to trim, not just how full
The reason to segment the bar is agency. "You are at 96% of the window" tells a user they have a problem; "88.5K of that is conversation history and 42K is retrieved sources" tells them what to do about it — summarise the history, or retrieve fewer chunks. Each segment gets a CVD-safe chart colour and a token count in the legend, and the reserved-for-response block is drawn faded, because that space isn't used yet but it is spoken for — forgetting to account for it is the classic way a request that "fit" returns a truncated answer.
The warning has two levels that read without colour: approaching the limit (amber, with the percentage) and over it (red, with the exact overage to trim). It shares its logic with the Quota Meter — a budget with named line items — applied to the one resource an LLM call silently runs out of.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.