Context meter
How full the context is and what fills it, with a Compact action to free room.
A context meter is a pill with a ring that shows how full the context window is. It opens a panel with one bar split by kind, a legend whose rows list what is in each part, and a Compact button that summarises older turns to free room. The ring turns orange past a warning share, and a message line fades in with a warning or a result.
Usage
<!-- include core.css + context-meter.css -->
<div class="ctm" data-open="1">
<button class="ctm-tg" aria-expanded="true"><span class="ctm-ring"><svg viewBox="0 0 20 20"><circle class="tr" cx="10" cy="10" r="7.5"/><circle class="fl" cx="10" cy="10" r="7.5" pathLength="100"/></svg></span><span><span class="ctm-pc num">0%</span> of context used</span></button>
<div class="ctm-pop panel">
<div class="ctm-ph"><span>In context</span><span class="num"><b class="ctm-tot">0k</b> of 200k tokens</span></div>
<div class="ctm-bar"></div>
<div class="ctm-leg"></div>
<div class="ctm-f"><span class="ctm-hint">Summarises older turns</span><button class="pill ghost sm ctm-go">Compact</button></div>
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
parts | ContextPart[] | What fills the context. Each has a key, a label, its tokens, an optional color, and optional items shown on hover. |
limit | number | The size of the context window, in tokens, like 200000. |
warnAt | number | From this share of the limit (0 to 1) the ring turns orange. Defaults to 0.85. |
message | string | A line under the legend. Crossfades when it changes. |
messageTone | warn | ok | warn shows it in orange with a warning sign, ok in green with a check. |
compacted | boolean | Set once compacted: the button turns into Undo. |
hint | string | The quiet line beside the button. Defaults to "Summarises older turns". |
open | boolean | Whether the panel is open. Leave it out to let the pill toggle it. |
onCompact / compact | callback | Called by Compact. Return a promise and the button spins until it settles. |
onUndo / undo | callback | Called by Undo once compacted. |
onOpenChange / openChange | callback | Fires when the panel opens or shuts. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). In
Blueprint the pill, the bar and the panel are squared off; in Soft they are rounded. The ring takes
the accent mark and the warning mark past the warning share, and the bar segments take the part
palette (blue, teal, violet, grey) from the tokens unless a part sets its own color.