fix(web): Keep chip shows its own icon when the composer is narrow#30045

Problem

When the composer is narrower than 480px (for example with a file open in a wide right panel), the Compact chip hides its Compact/Keep label and leaves only the icon and token count. The icon was Minimize2 in both states, so clicking the chip to switch to Keep left it looking the same. The only remaining cue was the faint pressed background, and the hover background covers it while the pointer is still on the chip.

Reproduced on main at e2bb9e63e1 in the web dev server (1512×945 window, a stale Claude thread at 549k tokens). With the right panel closed, the composer was 736px and the chip read "Compact 549k". With Files open and a file shown, and the panel dragged to 896px, the composer was 264px and the chip showed only "549k". Clicking the chip changed aria-pressed from true to false and the send button label from "Compact and send" to "Submit message", but the chip's icon and text stayed the same. Closing the panel showed "Keep 549k".

Change

The chip's icon is now a MorphIcon that shows Minimize2 for Compact and Maximize2 for Keep. That is the same pair, and the same component, the right panel's maximize toggle uses. The label, colours, layout and toggle behaviour are unchanged. The icon is still decorative (aria-hidden), and the button keeps its aria-label and aria-pressed.

Scope and approval

Fixes pingdotgg/t3code#29974

Triaged via the automated issue flow; GitCafe issue #29974.

Verification

• vp run check:changed passes on the final head: format, lint, knip, typecheck of 2 packages, react compiler, and the tests beside the change.
• No new test. This is a purely visual bug, so the proof is the before/after captures below.

Evidence. Before is e2bb9e6 and After is a87b809, the fix commit. The later merge of main touches nothing the chip renders. Each side ran as the real web app from its own checkout, on a fresh database seeded by the same driver: one real Claude Haiku turn, then the server stopped and that turn's usage raised to 549k tokens with an expired cache. Every capture used a fresh browser context.

Rendering environment for every capture: Linux, Playwright 1.60, headless Chromium 148, no device emulation, DPR 1, 100% zoom and font scaling, clock frozen at 2026-11-03T07:00Z. Composer widths: 736px with the label shown, 386px narrow, 366px at phone width.

Diff0 marks any nonzero channel delta, amplified ×255. DiffT marks a channel delta above 16/255. Both compare native PNGs at full viewport size. Changed pixels per pair (Diff0 / DiffT), with 0 outside the 14×14 icon area in every pair:

Phone width, light: F7 50 / 25, F8 86 / 76.

Recordings (Before on the left, After on the right, step captions burned in):

• P1-light-labelled-narrow.gif, 1512×945 light:
  • 0.2s: Compact with label. 1.3s: hover tooltip. 2.4s: click to Keep, pointer stays on the chip. 3.6s: pointer away. 4.6s: keyboard focus. 5.4s: Space toggles back to Compact.
  • 6.3s: Files and math.ts opened and the panel widened below 480px (a captioned cut removes the editor loading frames). 6.5s: narrow Compact. 8.7s: click to Keep with the pointer on the chip; Before is unchanged, After shows outward arrows. 11.8s: toggle back. 12.8s: rapid double toggle.
  • 13.9s to 17.4s: Keep survives closing and reopening the panel.
• P2-dark-labelled-narrow.gif, 1512×945 dark: the same forward and reverse sequence, wide and narrow, with the same captioned cut.
• P3-light-reduced-motion-narrow.gif, 1512×945 light, prefers-reduced-motion: reduce, narrow: Compact to Keep and back. After switches straight to the end icon, with no animation and no blank frame.
• P4-light-phone-web-expanded.gif, 390×844 light, web composer expanded at phone width: Compact to Keep and back. The editor keeps focus and the composer stays expanded.

What else changed, every visible difference:

• Keep shows outward arrows in the wide layout too, where the label is visible, not only in the narrow one.
• On After, toggling morphs between the two icons. Reduced motion switches straight to the end icon.
• Compact still points inward, but the new renderer draws its strokes slightly differently: 50 changed pixels in light and 52 in dark, all inside the icon.
• Nothing outside the 14×14 icon area changes in any still pair.

Not verified separately: the Electron desktop app. It renders this same web component. The mobile app has no Compact chip. Optional matrix rows (other token counts, neighbouring controls, the chip being absent, the cache-expiry boundary) were not captured; the diff does not change those.

Model and harness: Claude Opus 5.5 (lead, implementation, review B) and GPT-6.1-sol (review A, proof audits, capture) via Claude Code and Codex in T3 Code.

🤖 Generated with Claude Code