KQ-786 · TOKEN/BUDGET

Token Budget

A max-tokens control whose bar tells the truth about how much of the cap will be spent. The bar is the slider's track: a pale fill reaches the cap and a solid fill reaches the host's estimate of the reply, both settling on glide, while the thumb travels on snap for a key step or a track press. When the estimate passes the cap the overflow is hatched warn and a cut chip lands on flick; the cap and the estimate roll their digits on snap, and arrows, Page keys, Home and End drive the thumb.

KQ-786 · TOKEN/BUDGET

Fernworks Model 3 · reply lengthtokens

Cap 1,024 · Est 900 · 88% likely used

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/token-budget

Props

value / defaultValue: number; default 1024; Controlled or initial cap in tokens; snapped to step and clamped to min and max.
onValueChange: (value: number) => void; default —; Fires from a drag, a track press or an arrow key.
onSettle: (value: number) => void; default —; Fires once the cap has been still for half a second.
estimate: number; default 0; Tokens the host expects the reply to need; shaded inside the cap, hatched past it.
min / max / step: number; default 64 / 4096 / 64; The cap's range and the arrow-key step; the track's full length is max.
label: string; default —; Names the slider.
format: (tokens: number) => string; default en-US grouping; Readout and aria-valuetext.

Prop	Type	Default	Description
value / defaultValue	number	1024	Controlled or initial cap in tokens; snapped to step and clamped to min and max.
onValueChange	(value: number) => void	—	Fires from a drag, a track press or an arrow key.
onSettle	(value: number) => void	—	Fires once the cap has been still for half a second.
estimate	number	0	Tokens the host expects the reply to need; shaded inside the cap, hatched past it.
min / max / step	number	64 / 4096 / 64	The cap's range and the arrow-key step; the track's full length is max.
label	string	—	Names the slider.
format	(tokens: number) => string	en-US grouping	Readout and aria-valuetext.