Context Indicator

A compact ring showing how much context a conversation uses.

VerifiedSince 0.3.9

Usage

Basic

Above 80% the level becomes warning, above 95% danger; data-level exposes it for style overrides.

Loading demo...

Best Practices

Pass the model's real window size as maxTokens, not a hardcoded constant.
Localize numbers with formatter rather than wrapping the component in your own text, or the title disagrees.
Prompt the user only from warning upward; below that it is background information.
Inside a clickable region, give the region its own accessible name: role="meter" conveys nothing actionable.

API Reference

Props

Name	Type	Default	Description
`usedTokens`	`number`	—	Tokens used so far. Required.
`maxTokens`	`number`	—	Context window size. Required; 0 or less yields a ratio of 0.
`label`	`string`	`'Context usage'`	Accessible name, written to `aria-label`.
`formatter`	`(used: number, max: number) => string`	—	Text beside the ring; defaults to compact counts (`12.3K`, `1.2M`).

Slots

Name	Scope	Description
`detail`	`{ ratio: number, used: number, max: number }`	Appended after the text, for a percentage, a remaining count, or a "clear context" action.

Overview

The ratio is usedTokens / maxTokens, clamped to 0–1, so an over-count never draws past a full ring.
title is always "text (percentage)", so the percentage shows on hover even with a custom formatter.
The root is role="meter" with aria-valuemin / aria-valuemax / aria-valuenow kept in sync; the SVG is aria-hidden.