agent pane: the Context card and the context ring show Claude Code's /context breakdown

Merged
TE
14d ago
+1028-40

The Inspector's Context card and the composer context ring's details now show what fills a Claude Code chat's context window, not just used and free. Leo asked:

"i feel like having a teensy bit more of the card type thing with fuller info in the session sidebar would be nice? like just make our context circle have a bit more stuff"

and earlier, for the Inspector: "every item must do something on click".

Leo-ask: ask-af4ecbf18f

What changes

When acpmux reports Claude Code's /context (summary.contextBreakdown, added by #24223), both surfaces draw the same card (ContextBreakdownView in inspector/ContextSection.tsx):

  • the total line stays as it was: "43% used" and "171.4k / 400k";
  • the bar is split into one segment per used category plus the autocompact buffer. Free space is the track;
  • one row per category shows a square swatch, the name as Claude Code gives it (not translated), tokens and share of the window. Used categories come largest first, then the buffer, then the deferred categories dimmed with "ā€”" for share (they take no room until they load), then Free space;
  • MCP tools N, Memory files N and Skills N are folds. A click lists their items: an MCP tool by its short name with its server, a memory file by its file name with its full path, a skill by name, each with its tokens. Only the folds take a click, and only the folds hover. The swatches and item rows aren't buttons and don't look like buttons.

Colors come from the theme. Each used category is a step of var(--agent-accent) mixed toward transparent, largest first. The buffer and deferred categories are tints of the text color. Nothing is orange or opaque, and the ring popover keeps its glass.

Without a breakdown (Codex, other harnesses, or a Claude Code too old to answer), the Inspector keeps its used/free rows and the ring keeps its old popover content (bar, tokens, setup/conversation parts). The ring stays where it was; only its popover's content changes.

contextBreakdown() validates defensively. It returns nothing for a non-object, for no maxTokens or for no categories array. It drops categories that lack a name or a known kind, clamps negative or non-numeric counts to 0 and caps shares at 1. It also drops malformed MCP tool, memory file and skill rows.

This PR carries #24223's webview plumbing at its reviewed head 2ac884029aa (AcpmuxContextBreakdown in model.ts; direct.ts reading contextBreakdown through contextBreakdownOf, keeping the rest of a combined info update; and its session-start test), byte-identical except reconnectMcp, so it doesn't wait on #24223's Rust side. Whichever lands second merges cleanly.

Gallery

Three Inspector variants. Only the first ships; the other two are gallery fixtures, not settings:

  • agent-pane.chat-inspector / context-breakdown (shipped): accent steps, largest first. It reads as one color family on the glass, like the rest of the panel, and the bar still shows the parts apart.
  • context-breakdown-hues: each category a hue rotated from the accent, the closest to Claude Code desktop's palette. It reads faster, but it brings colors the theme doesn't have.
  • context-breakdown-mono: every category in the full accent. It's the quietest, but the bar no longer says which part is which.

Ring popover: agent-pane.context-ring / breakdown and breakdown-memory-open.

Not in this PR

Account usage limits (session and weekly percentages with reset times) need acpmux to send usageLimits, which a sibling lane is adding. They'll come in a follow-up PR on top of this card.

Size: the diff is about 1,060 lines. 396 of those are the three new strings' 21-locale catalog entries, and about 70 are #24223's plumbing and test.

Observed / Not run

  • Observed: scripts/web-lint.sh (Oxlint, Oxfmt, type check, layer checks, catalog keys) passed, and scripts/cmux-next/prepush-gate.py reported no new violations.
  • Not run locally (no builds on this Mac): bun test. The new webviews/test/chat-inspector-context-breakdown.test.tsx covers the ordering, shares, dropping of malformed input, MCP name shortening, the folds opening and closing on click, the Inspector fallback without a breakdown, and the ring popover with and without one. It runs in this PR's CI. Gallery captures come from the gallery advisory run.

Changelog

  • Added: the agent chat's Context card and the composer's context ring details show what fills a Claude Code chat's context window by category, with its MCP tools, memory files and skills.

šŸ¤– Generated with Claude Code

Agent session: cosmic-gray