ContextMeter

Unified context-window meter. Renders as a compact progress bar or a circular gauge; hovering or focusing it opens a popover with the model, the runtime and copyable identities, context-window breakdown, per-bucket token usage and the cost + budget detail. Domain-agnostic — callers feed plain values.

Source

Import

import { ContextMeter } from "@flanksource/clicky-ui/chat";

Demos

Bar · Open in Storybook

Gauge · Open in Storybook

Narrow Bar · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
budget	ContextMeterBudget	—	—
captainSessionId	string	—	Terminal chat identities, kept distinct from the generic session id.
className	string	—	—
cost	ContextMeterCost	—	Per-bucket costs (USD) for the popover breakdown.
effort	string	—	Reasoning effort shown with its semantic glyph and color in the hover card.
executionMode	string	—	Runtime mechanism used to execute the session, such as api or cmux.
messageCount	number	—	Message count shown in the popover (chat).
mode	enum	bar	Trigger shape: a compact `bar` (session header) or a circular `gauge` (chat toolbar). Both open the same hover popover.
model	string	—	Model id/label and its brand glyph.
modelIcon	StaticIconComponent	—	—
modelIconClassName	string	—	—
provider	string	—	Provider family that produced the terminal chat turn: anthropic, openai, …
providerSessionId	string	—	—
sessionId	string	—	Session identifier exposed as a click-to-copy value in the popover.
threadId	string	—	—
tokens	ContextMeterTokens	—	Per-bucket token counts for the popover breakdown.
turnId	string	—	—
usedPercent	number	—	Share of the context window used, 0–100 — drives the fill and tone.
usedTokens	number	—	Context-window tokens shown in the popover.
windowTokens	number	—	—