KQ-818 · CONTEXT/STACK

Context Stack

The model's context as strata: messages on top, memory beneath, the system prompt at the base, each slab's thickness its share of the total on glide from a 36px floor. Hovering or focusing a slab lifts it a step on glide with a shadow while its readout cross-fades from the layer's note to its size and share; pressing pins the lift and Escape releases it. Beneath, a meter fills to the total's share of the budget on glide, striped by layer from the base up, and the lifted layer's stripe stays bright while the others dim.

KQ-818 · CONTEXT/STACK

Context · Fernworks Model 33,580 / 8,192

44% of budget

3,580 of 8,192 tokens · hover a layer

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/context-stack

Props

layers: ContextLayer[]; default —; Top of the stack first — id, label, tokens and an optional resting note such as "12 turns"; the last layer is the base.
budget: number; default —; Tokens the model can take; the meter's maximum.
format: (tokens: number) => string; default Intl.NumberFormat("en-US"); Formats every count that is printed or spoken.
onLift: (id: string | null) => void; default —; Fires when a slab lifts or settles, with the lifted layer's id or null.
label: string; default —; Names the stack and its meter for assistive technology and prints as the heading.

Prop	Type	Default	Description
layers	ContextLayer[]	—	Top of the stack first — id, label, tokens and an optional resting note such as "12 turns"; the last layer is the base.
budget	number	—	Tokens the model can take; the meter's maximum.
format	(tokens: number) => string	Intl.NumberFormat("en-US")	Formats every count that is printed or spoken.
onLift	(id: string \| null) => void	—	Fires when a slab lifts or settles, with the lifted layer's id or null.
label	string	—	Names the stack and its meter for assistive technology and prints as the heading.