cmux NEXT composer: placeholder, + and Send on one grid (draft: baseline measurement)
Gallery: agent-pane.composer-row/claude-auto, agent-pane.composer-row/grid-running, agent-pane.composer-row/grid-draft-lines, agent-pane.composer-look/codex-chat
Leo, 2026-10-29: "Plus, like this fing placeholder text is just fing misaligned. You always have these misalignments. I just literally said, like we need to have better grids, we need to have better fing grids. We need to have the fing stuff aligned on fing grids and lines and whatever the f. Make it f***ing satisfying."
Also Leo's asks on the quiet row: "lawrence thinks we should have better alignment of stuff in general / see claude code, then see ours / we can do a lot better i think" and "the composer icons dont look as aligned as they could".
Spec: leo-workspace design/grid.md 5.1 (composer lines).
What this changes (on top of base)
- The quiet row sits on the grid tokens: one foot gap under the box (
--grid-gap-foot, 4 px; was 8), 28 px tall (--grid-composer-quiet-row-height), first chip's line at 14 (--grid-composer-quiet-row-text), row inset--grid-composer-inset. - The composer box's radius is
--grid-composer-radius(12 px; was 11), and the trust bar over it shares it. - Tests: composer-alignment-centers.test.ts now also measures the running turn's "↵ steer · ⌘↵ queue" placeholder (
grid-running; only the idle one was measured, so its misalignment escaped), plus the box's 44 px height, 12 px radius, the text's optical center against the + glyph and its ink on the 44 px line. composer-alignment-measure.test.ts writes both variants. gridScenes.ts adds quiet-row scenes for idle and running (first chip's ink, lead, trail, row middle), a two-line draft scene (grid-draft-lines: text column, insets, controls on the last line), and flips thecomposer.*surfaces from warn to fail in grid-lines.test.ts.
How it relates to #28827 and #28905
#28905 (merged) carried #28827's test commit and landed the + to text fix: the text starts one 8 px lead gap (--acpmux-composer-lead-gap) after +, so it sits on the 44 px text line, with the prompt's padding derived and the 1 px optical drop. This PR's base merge takes that geometry whole (no second copy of it here, and no copy of composer-plus-geometry.test.ts); its own checks assert the same 8 px gap and 44 px line. #28827 is now a test-only duplicate of what #28905 landed. The tokens come from #27539 (merged).
Evidence at d34dfed45c1a
- Tests (Linux fleet, Chromium,
CMUX_BROWSER_TESTS=1 bun test test/browser/grid-lines.test.ts test/composer-alignment-centers.test.ts): 152 pass, 4 fail. The 4 aretranscript.actions/after-steer, red on base (no gallery files define entry "agent-pane.reply-actions"). Every composer scene, now fail-level, is green. - Red on base: the same tests with base's composerLocation.css fail 40 cases: radius 11 instead of 12, and the quiet row 8 px under the box instead of 4.
| line | before | after |
|---|---|---|
| composer box radius | 11 px | 12 px |
| quiet row gap under the box | 8 px | 4 px |
| text start, + glyph center, mic glyph center, optical text center | on the lines (#28905) | unchanged |
- Before/after captures (Linux gallery, Chromium, 2x, light and dark): gallery advisory run https://github.com/manaflow-ai/cmux/actions/runs/41266662850 (artifact
gallery-advisory-27559-d34dfed45c1a8d01f73f883e2a1cc78206d9633e): composer-row claude-auto, grid-running (the "↵ steer · ⌘↵ queue" placeholder), grid-draft-lines and Codex's look. - Viewed after image: yes. The quiet row sits 4 px closer under the box and the box's corners are 1 px rounder; the + glyph, the placeholder and the mic stay on one center line in the idle and running states.
- Review: SHIP at d34dfed45c1a (Codex gpt-6-astra, high): https://github.com/manaflow-ai/cmux/pull/27559#issuecomment-6552770424
Agent session: agent session
🤖 Generated with Claude Code