Context window
ProAn AI context window as a grid of 200 cells: the system prompt, tools, files, summary and messages fill it in order, a threshold row marks where compaction starts, and sending a message, attaching a file or compacting shows exactly how much still fits.
Live · keyboard ready
427Kof 1M tokens
43% used509K free
Each cell is 5K tokensCompacts at 80%
- System prompt4.1K0.4%
- Tools32K3.2%
- Files and memory100K10%
- SummaryNone yet
- Messages291K29%
- Free509K51%
- Reserved for output64K6.4%
- Showing developers or power users what fills a model's context and when it will compact.
- Agent and coding tools that compact long sessions and want the effect to be understandable.
- Docs and onboarding that explain context windows, compaction and output reserves.
- A simple quota or plan usage bar; use usage-meter.
- Choosing a model; use model-picker.
- Billing or spend over time; use usage-billing.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { ContextWindow } from "@/components/arc/context-window/context-window"; export function SessionContext({ items }) { return ( <ContextWindow items={items} threshold={0.8} onCompact={({ folded, summary }) => console.log(`Folded ${folded} tokens into ${summary}`)} /> );}ContextWindow
A model's context window shown as a fixed budget of 200 cells that fills in reading order: system prompt, tools, files and memory, a summary, then the conversation, followed by free space, with the output reserve held as outlined cells at the end. A dashed line marks the compaction threshold. Send message and Attach file add tokens; crossing the threshold, switching to a smaller model or pressing Compact now folds the older messages into a short summary and the space comes back. A legend lists every part with tokens and percent, adding up to 100%.
PropTypeDefaultDescription
modelsContextModel[]sampleModelsModels to switch between, each { id, name, window, reserve, mark, color? } with window and reserve in tokens. The sample uses Claude Opus 5.5's real 1M window; reserves and the other two models are sample settings.defaultModelIdstring–The model shown first. Defaults to the first model.onModelChange(model: ContextModel) => void–Called when someone switches models.itemsContextItem[]sampleItemsWhat is in the window: { id, category, label, tokens } with category "system", "tools", "files", "summary" or "messages". Items are grouped by category for the grid, so their order only matters within a category.thresholdnumber0.8Fraction of the window at which compaction runs on its own.turnsContextTurn[]sampleTurnsTurns that Send message adds, in order, each { label, tokens }: a message plus the tool results and reply it produced.filesContextTurn[]sampleFilesFiles that Attach file adds, in order.summarize(folded: ContextItem[]) => number–Returns the summary size in tokens for the folded messages. Defaults to about 6% of them, between 4K and 24K.onCompact(compaction: ContextCompaction) => void–Called after each compaction with { folded, summary, before, after, automatic }.onItemsChange(items: ContextItem[]) => void–Called with the new items after a send, an attachment or a compaction.classNamestring–Class on the root section.- Tab
- Moves through the model menu, Send message, Attach file and Compact now.
- Enter, Space
- Opens the model menu or runs an action.
- Arrow uporArrow down, Enter
- In the model menu, moves between models and chooses one.
- Escape
- Closes the model menu and returns focus to its trigger.
- The grid is one image with a full text description: model, tokens used, every category with its tokens, and the threshold.
- The legend is a list with tokens and percent for each part, so nothing depends on color.
- Every send, attachment, model switch and compaction is announced through a polite status line with an icon and text.
- The model menu is a Radix dropdown with radio items; the trigger names the model and its window.
- Pointer focus draws no ring; keyboard focus shows Arc's shared ring.
- New tokens fill cells in a short wave from where the change happened, about 4 to 9ms per cell and never more than 360ms in total.
- Compaction dims the messages in one sweep from oldest to newest, then the summary lands right after the files and the freed cells turn back to free space in the same wave.
- Switching models re-scales every cell in one quick pass from the first cell.
- Token counts and percentages roll to their new values; status lines crossfade in place.
- Pointing at a legend row lights its cells and quiets the rest.
- Reduced motion changes cells and numbers at once and keeps every status line.
- On wide containers the legend sits beside the grid; below 640px it moves under the grid and the cells tighten.
- Below 420px the header stacks, with the model menu under the token readout.
- Cells are square and fluid, so the grid always fills its column without horizontal scroll.
- 200 cells are plain spans whose color changes through CSS transitions with a per-cell delay; nothing re-renders per frame except the rolling numbers.
- The layout is recomputed only when the items or the model change.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Feed it the real token usage of a session: system prompt, tool definitions (for example MCP servers), attached files and memory, any summary and the messages.
- Keep reserve equal to the max output you request, so the grid shows the space the reply needs.
- Use onCompact to run your own summarization when the threshold is crossed; pass summarize to report the real summary size.
- The 200 cell grid is fixed, so each cell is window / 200 tokens; the note under the grid says how many.
The full library index for assistants is at /llms.txt.