affectUI › Components › Agents

Context Map

What fills an agent's context window, as a living treemap – system prompt, tools, memory, every file, the chat and tool results as tiles that glide as it grows, the free space dashed, and compaction squeezing old turns into a summary.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/context-map.json · Import from @/components/ui/context-map

When to use

  • Showing what fills an agent's context window – and why it's running out
  • Debugging long sessions: which files, turns or tool results take the room
  • Making compaction visible – old turns squeezing into a summary

When not to use

  • Just a fill level – use Context Window or Usage Meter
  • Where the time and money of a run go – use Trace Waterfall
  • What the agent remembers across sessions – use Memory Panel

Usage

import { ContextMap, type ContextBlock } from "@/components/ui/context-map";

const blocks: ContextBlock[] = [
  { id: "system", label: "System prompt", kind: "system", tokens: 6200 },
  { id: "tools", label: "Tool definitions", kind: "tools", tokens: 14800 },
  { id: "spec", label: "checkout.spec.ts", kind: "file", tokens: 8200, detail: "Read at 0:09" },
  { id: "chat", label: "Chat", kind: "chat", tokens: 41000 },
  { id: "run", label: "Test run · 20×", kind: "result", tokens: 22400 },
];

export function Context() {
  return <ContextMap blocks={blocks} limit={200000} model="Opus 5.5" modelIcon={<ClaudeLogo />} />;
}

Props

NameTypeDefaultDescription
blocksContextBlock[]{ id, label, kind, tokens, detail?, icon?, items? } – every part of the context, in the order the tiles should sit; items (label + icon) are listed on hover
kind"system" | "tools" | "memory" | "file" | "chat" | "result" | "summary"Per block – picks its tint
limitnumberThe context window's size in tokens – what's left shows as dashed free space
model / modelIconstring / ReactNodeThe model and its maker's logo, next to the title – the window's size follows as a small tag
agents / agent / onAgentChangeContextAgent[] / string / (id) => voidAgents to switch between – the tray shows the current one as a menu, its limit replaces limit
compactionContextCompaction | null{ before, summarized?, dropped?, summary? } – the blocks just before the last compaction and which of them were summarized or dropped (the rest were kept); adds Before | After to the bar and a line under the map. null shows that line as "not compacted yet", so the height stays put
view / onViewChange"before" | "after" / (view) => voidControlled: which side of the compaction shows – leave it out and the switch keeps its own
statusstringA short status on the tray – e.g. "Compacting"
onSelect(block | null) => voidA tile was clicked – null for the free space
titlestring"Context"Heading on the tray
classNamestringExtra class on the root

Accessibility

  • The map is a list labelled with its title; every tile is an item with its name, kind and tokens
  • The fill level is text on the tray – its color is extra, not the only signal

Responsive

  • The area keeps its height; tiles too small for a label show only their color – point at them for the details
  • Under 480px the area is shorter and the numbers move to a line of their own
  • Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

  • React 19

Related

  • Context Window – What fills the model's context, as a field of cells – hover a part to light it up, remove files, and compact the conversation while its cells shimmer and clear
  • Memory Panel – What the assistant remembers about you, grouped and editable – a master switch, category filters, and on every memory edit in place, pause or forget with Undo on the tray
  • Usage Meter – Plan usage and AI credits – a stacked credits meter by category, daily sparkline, limits and a button that speaks up near the limit
  • Trace Waterfall – Where the time and money of an agent run go – every LLM call, tool call and sub-agent as a bar on a live timeline, with tokens and cost per step, the slowest call marked and branches that fold into their parent

Guides