Context {/* used / total, monospaced */}
{/* progress bar, min-width 1px once usage is nonzero */}
Input {/* only when > 0 */}
Cached input {/* only when > 0 */}
Output {/* only when > 0 */}
Reasoning {/* only when > 0 */}
```
`Root` renders nothing until usage exists, so a thread that has not reported any yet shows no display rather than a zero placeholder. In Runtime mode an explicit `usage={undefined}` is not a way to hide the display: the `.aui` presets read it as "no usage was supplied" and fall back to `useThreadTokenUsage()`. Pass a usage object to control the display yourself, or omit the prop to let the thread drive it. The breakdown only lists segments with a nonzero token count, so a usage object that carries only `totalTokens` shows the summary line with no rows underneath it. Percent is clamped to 100 even when usage exceeds the context window. The running total is sticky rather than reactive to every update: it only moves when the incoming total is itself nonzero, or when `resetKey` changes. A momentary usage of `undefined` (or zero) between turns does not flash the number back down, but a changed `resetKey` snaps it immediately to whatever the new usage reports.
## Examples
### Three presets
Each preset wraps `Root`, `Trigger`, and `Content` with one specific visual. `Ring` draws an SVG donut with a percent label, `Bar` draws a fill bar with a token count beside it, and `Text` prints a plain fraction with no severity color at all. `Ring` and `Bar` both shift color at the same two thresholds: the default tone below 65% usage, amber from 65% to 85%, and red above 85%.
**With a runtime:**
```