Data Display
Context Meter
A compact radial gauge for how full an assistant conversation's context window is, shifting colour as it nears the summarize and lock points.
When to use
A small ring showing how full an assistant conversation's context is, from used/budget or a ready pct.
When not to
It is a gauge, not a task progress bar; use Progress for that.
Import
import { ContextMeter } from "@countryclub/ui-react";States
Accessibility
role="meter" with a "Context N% used" label. The colour steps ok → warn → summarizing → full, so never rely on colour alone — set showLabel.
API reference
The props the kit declares itself, read from its types on every build. Every part also takes className, render (where it renders an element) and the native attributes of that element.
ContextMeter
| Prop | Type | Default | Description |
|---|---|---|---|
| used | number | Tokens currently in context. Used with budget when pct is not given. | |
| budget | number | The model's context budget in tokens. | |
| pct | number | Fill fraction 0..1. Takes precedence over used/budget when provided. | |
| state | "ok" | "warn" | "summarizing" | "full" | Visual state; derived from the thresholds below when omitted. | |
| warnAt | number | 0.75 | Threshold fractions — mirror the backend config.context values. |
| summarizeAt | number | 0.85 | |
| lockAt | number | 0.98 | |
| size | number | 24 | Diameter in px. |
| strokeWidth | number | 2.5 | Ring thickness in px. |
| showLabel | boolean | false | Render the rounded percentage in the ring's center. |