ContextWindowMeter
stablev1.0.0Visualizes token usage across a conversation context window. Renders a segmented bar (system/user/assistant/tools), overflow warning state, and legend. Semantic colors from Tokens v2. Warning at 80%, critical at 95%.
import { ContextWindowMeter } from "@nodus/design-system"Props
| Prop | Type | Default | Description |
|---|---|---|---|
segmentsreq | TokenSegment[] | — | Individual segments of the context window (label + tokens). |
limitreq | number | — | Total context window capacity in tokens. |
model | string | — | Model name displayed in the header. |
warnAt | number | 0.8 | Warning threshold (0–1). |
criticalAt | number | 0.95 | Critical/overflow threshold (0–1). |
showLegend | boolean | true | Show per-segment legend below the bar. |
compact | boolean | false | Compact mode: bar + total only. |
segmentsrequiredTokenSegment[]Default —Individual segments of the context window (label + tokens).
limitrequirednumberDefault —Total context window capacity in tokens.
modelstringDefault —Model name displayed in the header.
warnAtnumberDefault 0.8Warning threshold (0–1).
criticalAtnumberDefault 0.95Critical/overflow threshold (0–1).
showLegendbooleanDefault trueShow per-segment legend below the bar.
compactbooleanDefault falseCompact mode: bar + total only.
This component was designed to express:
Explore Related
Live token usage counter with budget threshold
Horizontal bar gauge with low/high threshold markers
Visualizes token usage across a conversation context window. Renders a segmented bar (system/user/assistant/tools), overflow warning state, and legend. Semantic colors from Tokens v2. Warning at 80%, critical at 95%.