# Context window

> An 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.

- Type: Component (special)
- Access: Arc Pro
- Page: https://uiarc.dev/components/context-window
- Markdown: https://uiarc.dev/components/context-window/markdown
- Source file: `registry/components/context-window/context-window.tsx`
- Dependencies: motion, lucide-react, @radix-ui/react-dropdown-menu
- Keywords: special, ai, tokens, chart, motion, new, context window, token usage, llm context, compaction, summarize conversation, prompt tokens, mcp tools tokens, output reserve, ai session, token budget

## When to use

- 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.

## When not to use

- 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

Context window is part of Arc Pro. The live preview is public; the source and install command need Pro.

### CLI with a Pro token

1. Create a token in your account and set it in the environment (or `.env.local`). Never commit it.

```bash
export ARC_PRO_TOKEN=arc_pro_...
```

2. Add the Pro registry to `components.json`:

```json
{
  "registries": {
    "@uiarc": "https://uiarc.dev/r/{name}.json",
    "@uiarc-pro": {
      "url": "https://uiarc.dev/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${ARC_PRO_TOKEN}"
      }
    }
  }
}
```

3. Install:

```bash
npx shadcn@latest add @uiarc-pro/context-window
```

### Manual

Signed-in Pro members can copy the source from the Manual tab on the docs page.

- Plans: https://uiarc.dev/pricing
- Create a Pro token: https://uiarc.dev/account#pro-access
- Setup guide: https://uiarc.dev/docs/ai#pro-access

## Usage

```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}`)}
    />
  );
}
```

## API reference

### 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%.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `models` | `ContextModel[]` | `sampleModels` | Models 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. |
| `defaultModelId` | `string` | – | The model shown first. Defaults to the first model. |
| `onModelChange` | `(model: ContextModel) => void` | – | Called when someone switches models. |
| `items` | `ContextItem[]` | `sampleItems` | What 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. |
| `threshold` | `number` | `0.8` | Fraction of the window at which compaction runs on its own. |
| `turns` | `ContextTurn[]` | `sampleTurns` | Turns that Send message adds, in order, each { label, tokens }: a message plus the tool results and reply it produced. |
| `files` | `ContextTurn[]` | `sampleFiles` | Files 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. |
| `className` | `string` | – | Class on the root section. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Moves through the model menu, Send message, Attach file and Compact now. |
| Enter, Space | Opens the model menu or runs an action. |
| Arrow up / Arrow down, Enter | In the model menu, moves between models and chooses one. |
| Escape | Closes the model menu and returns focus to its trigger. |

## Accessibility

- 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.

## Motion

- 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.

## Responsive behavior

- 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.

## Performance

- 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

- 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.

## Related

- [Model picker](https://uiarc.dev/components/blocks/model-picker/markdown): A model picker in one quiet pill: open it to choose from featured models with a one line note each, set the reasoning effort, or browse every other model by provider, and the pill swaps to your choice in place.
- [AI composer](https://uiarc.dev/components/blocks/ai-composer/markdown): The prompt box at the bottom of an AI app: files upload in place, / opens commands, @ inserts mentions, a model and effort menu sits in the toolbar, and the send button turns into a stop control ringed by the reply's progress.
- [Agent run](https://uiarc.dev/components/blocks/agent-run/markdown): A single card that follows one AI coding agent through a task: steps stream in with the live one shimmering, tool calls open in place, and the agent stops on a two-file diff for you to approve or send back before it writes. When the run ends, the steps fold into one line and a result shows the files changed, the checks that passed and a pull request button.
- [Usage meter](https://uiarc.dev/components/usage-meter/markdown): Show what fills an allowance and how close it is to the limit.
- [AI chat](https://uiarc.dev/components/blocks/ai-chat/markdown): A full-screen AI chat where answers stream in as markdown with folding reasoning, tool chips and cited sources. People can switch chats and models, edit or retry a message into versions, rate replies and stop a reply mid-stream.

## Also in ai

- [Agent status](https://uiarc.dev/components/agent-status/markdown): A compact live status pill for a running AI agent: the agent's mark in a live ring, the current activity and an elapsed timer, opening into the steps so far.
- [Tool call](https://uiarc.dev/components/tool-call/markdown): A tool call row for agent transcripts: the tool's mark and the call in plain words, a live state while it runs, and the input and output a click away, with approval and retry when needed.
- [Agent plan](https://uiarc.dev/components/agent-plan/markdown): The plan an agent writes before it acts: edit, reorder or add steps while it is a draft, then watch it work through them as a live checklist.
- [Agent timeline](https://uiarc.dev/components/agent-timeline/markdown): A compact timeline of one orchestrated agent run: the orchestrator and its subagents share a time axis, handoffs draw in between rows, and a playhead replays thinking, tool calls and waiting while the header counts time, tokens and cost. Hover a span for what it did, or click it to trace its handoff path.

## Guidance for AI tools

Context window: An 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. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt