ns-ui
A context-window budget meter: one hairline stacked bar segmenting the window into system prompt / tools / history / current turn, told apart by fill pattern instead of color, that visibly resettles rather than jumps when the window compacts.
Use when a read-only budget readout for an already-composed context window, splitting it into system prompt, tools, history and current turn by fill pattern rather than color so the shares survive a monochrome or colorblind read, and resettling rather than jumping when a compaction lands; pick context-prompt-shims instead when the user decides what goes in and in what order, or context-compaction-river when the interesting thing is which turns were compacted away and whether they can come back.
Install
npx shadcn add https://design.helpmarq.comns-ui / meter-context-window
103,600 / 200,000 tokens · 52%
event · session resumed · 51.8% of window in use
the bar is a picture of what the model can see right now — compact when history dominates and watch it resettle, not jump
| Prop | Type | Default | Description |
|---|---|---|---|
| capacity | number | — | total size of the context window, in tokens |
| system | number | — | tokens spent on the system prompt |
| tools | number | — | tokens spent on tool/function definitions and results |
| history | number | — | tokens spent on prior conversation turns |
| turn | number | — | tokens spent on the turn currently being read or generated |
| lowFreeThreshold? | number | — | fraction of capacity (0-1) below which the free segment is flagged as low headroom. default 0.08 (8%) |
| ariaLabel? | string | — | accessible name for the meter. default "Context window budget" |
| className? | string | — | — |