Context Window

What is in the context right now and how much room is left. Segments are drawn to scale against the window, not against what is used — a bar normalised to the used total always looks full, which is exactly backwards.

src/components/ui/context-window.tsx

About

From the component's own source, where it was written.

What is actually in the context right now, and how much room is left.

TokenUsage answers "what did this cost". This answers "what is in there and what is about to be evicted", which is a different question and the one you ask while building.

**Segments are drawn to scale against the window, not against the total used.** A bar normalised to what is used always looks full, which is exactly backwards — the free space is the information. At 12% utilisation this renders as mostly empty, because it is.

Segments below a pixel still get a sliver, for the same reason a trace span does: "the system prompt is small" and "there is no system prompt" must not look identical.

reserved is drawn as its own hatched region rather than as free space. The room set aside for the reply is not available, and a bar that shows it as headroom is lying about how much you can add.

Install

npx astralyx-ui add context-window

Usage

import { ContextWindow } from '@/components/ui/context-window'

<ContextWindow limit={200_000} reserved={8_000} segments={segments} />

Composer

Change the props and the source below follows.

Context window

44k / 200k · 26%

System prompt1.8k
Tool definitions6.4k
Conversation24k
Retrieved docs12k
Reserved for the reply8.0k
Free148k

Props

history tokens

reserved

tsx

<ContextWindow
  limit={200_000}
  reserved={8000}
  segments={segments}
/>

Examples

A comfortable run

tsx

<ContextWindow limit={200_000} segments={segments} />

Nearly full

tsx

<ContextWindow limit={200_000} warnAt={0.9} segments={segments} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`ContextWindow`

What is actually in the context right now, and how much room is left.

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
segments	ContextSegment[]	required	{ id, label, tokens, color? } against the model’s full window. Free space is the information, so the bar is scaled to the window.
limit	number	required	{ id, label, tokens, color? } against the model’s full window. Free space is the information, so the bar is scaled to the window.
reserved	number	0	Held back for the reply, drawn hatched as unavailable. Showing it as headroom lies about how much you can add.
warnAt	number	0.9	Fraction of the limit past which the readout turns destructive.
formatTokens	(tokens: number) => string	defaultTokens	—
freeLabel	string	'Free'	—
reservedLabel	string	'Reserved for the reply'	—
summary	(used: number, limit: number, free: number) => ReactNode	—	Caption. Receives used, limit and the free remainder.
label	string	'Context window'	—

Types

`ContextSegment`

Field	Type	Description
id	string	—
label	ReactNode	—
tokens	number	—
color?	string	Any CSS colour. Defaults walk the data palette.

Behaviour

Topic	Detail	Description
minimum segment	2px	“The system prompt is small” and “there is no system prompt” must not look identical.