PR #28587 - manaflow-ai/cmux

HOLD: this head still carries the per-row Stop button in SubagentTray.tsx; it lands after that fix is merged in.

Leo, 2026-10-30, on the agent pane's bottom stack:

"the stupid right indent misalignemnt"

This follows #28533 and is stacked on its head e61c418e (#28533 hasn't landed yet), so its diff shows #28533's commits until that lands. It implements ui-think-tank's audit of Leo's bottom-stack complaints:

One column, one gap, nothing removed: every part over the composer (question, notice, PR control, recap, running tray and its header, agents pill, queue) shares the composer box's left and right edges at every width (including the narrow outset and --cv-inset-end) and the box's radius token. The stack owns spacing: one gap token between parts; no part has its own outer margin or bottom padding; the last part sits directly on the box. Leading mark centred 22px in; trailing mark 22px from the right; an empty trailing slot never pushes the last mark inward.

#28533's "N PRs" design is unchanged: an inline control in the quiet row that opens the chips (Leo: "DON'T … TAKE THE ENTIRE ROW").

What changed

The tray's trailing grid is #28113's, taken whole. Base's #28113 (Leo, 2026-10-29: "There's this right indent for no reason.") already put the header's, every line's and View all's chevrons on one x, with a line's Stop after the chevron. This PR merged base and kept that grid as the settled design: its SubagentTray.tsx, the tray's trailing-track CSS and its tray tests are base's, unchanged. The 22/42 tray grid an earlier head of this PR had is dropped (design/running-tray.md records it under Replaced). agent-pane-stack-edges still checks 22/42 for the other parts and only records the tray's trailing marks; subagent-tray-columns checks its one chevron x.
The narrow outset. At composer columns under 298px, the box and its quiet row reach 8px past the column on each side (composerLocation.css). Every stack part now does the same.
- --acpmux-stack-start and --acpmux-stack-end on the dock write out the same step, because the composer's container query can't reach its siblings.
- Before, the tray stood 8px inside the box on both sides at 280px; now it's 0.
Radius. The tray (10px), the opened PR chips and the recap's card (12px) now take the box's radius token, --acpmux-composer-radius, which is now also defined on the dock. That gives 11px in the Claude look and 18px otherwise.
Own margins and padding. These parts take the stack's edges and drop their own bottom padding; one dock rule now gives --acpmux-stack-gap between parts:
- the recap (summary.css);
- the legacy PR bars (gallery only);
- the host's line (styles.css, 8px bottom padding);
- the agents pill (bottomStack.css, 8px bottom padding).
The PR fallback row and the in-transcript tray (Labs) now take --cv-inset-end on the right, and the in-transcript tray uses the stack token instead of its 8px margin. The recap's card joins the glass the same way the tray does.

Measurements (`test/agent-pane-stack-edges.test.ts`, gallery, Chromium)

	Before (#28533 head)	After
Tray chevrons (header, lines), from the right	47px (1100) / 43px (280), one x	47 / 43px, one x (#28113's grid, unchanged)
Tray left / right off the box at 280px	+8 / −8px	0 / 0
Opened PRs left / right off the box at 280px	+8 / −8px	0 / 0
Recap left / right off the box at 280px	+8 / −8px	0 / 0
Tray radius vs the box's (Claude look)	10 vs 11	11 = 11
Recap card radius vs the box's	12 vs 11	11 = 11
Gap between parts, and under the last part	0	0 (token 0)

Each "before" figure was measured on #28533's head e2d5716 (run 41146240957; also run 41144611936). The "after" figures come from the head 3360d269 (run 41172778670, stack-edges.json).

Stills (2x, light and dark, synthetic data)

Each image is one 2x2 grid: top row before (#28533's head), bottom row after (3360d269; its tray lines show #28113's subagent icon from base); left light, right dark. Ten images in all.

Viewed after image: https://raw.githubusercontent.com/manaflow-ai/cmux/pr-media/28587/ux-bs4-recap-1100.png (and every grid below: the recap card, the tray, the opened PRs and the chevron close-ups all stand on the box's edges and radius in the bottom row; at 280 the before row shows the 8px inset).

Recap, 1100 (its card's radius and edges)

Recap, 280 (the card on the box's narrow outset)

Right-edge chevrons close-up, 1100

Right-edge chevrons close-up, 280

Tray expanded, 1100

Tray expanded, 280

Tray collapsed, 1100

Tray collapsed, 280

PR control opened, 1100 (first row hovered)

PR control opened, 280 (first row hovered)

Tests

New: test/agent-pane-stack-edges.test.ts, committed before the fix. It runs on the agent-pane-column-edges harness at 1100, 420 and 280px.
- It measures every .acpmux-dock > :not(.acpmux-composer) part plus .acpmux-composer-queue. Each one's left and right edges and radius must equal .acpmux-composer-box's within 0.5px, and the gap under each must be the stack token, or 0 under the last part, which sits on the box.
- In each of its rows, the last trailing glyph must centre 22px from the right, with a mark before it on 42px; the running tray's rows are recorded only (#28113's grid).
- Frames: agent-pane.subagent-tray (between-turns, which is the "Running in background" between-turns state; several-running; duration-columns; panel-two; and the 300px narrow short-dock), agent-pane.bottom-stack (pr-queue, trusted-permission-queue, compact-trust-queue, short-400-long-draft), agent-pane.pr-dock (inline-pills, full-bars), agent-pane.recap-card, and agent-pane.bottom-stack-styles (collapsed, expanded, prs-open).
- Fail-level for the parts fixed here: the tray, the opened PRs, the count's host, the recap, the agents pill and the host's line. Warning-level for the rest (grid.md §7).
- Red at e2d5716 with 37 failures (run 41144611936 above); 0 failures at 7eadc7cb and at the head 3360d269.
Updated tests:
- subagent-tray-columns and subagent-tray are base's (#28113's), unchanged.
- subagent-tray-layout checks that the tray's margin is the stack's insets.
Green: 133 of 134 at 7eadc7cb (run 41148834269) across this test, agent-pane-bottom-stack-edges, agent-pane-pr-stack-gate, subagent-tray-columns, subagent-tray, subagent-tray-layout, agent-pane-column-edges, agent-pane-dock-gutters, agent-pane-bottom-stack, composer-bottom-space, composer-edges and pr-dock-inline-layout. The one red was subagent-tray-layout still asserting the old margin literal. It was fixed at 1b674d05 (49 of 49, run 41161006984). At c86b0e6b (rebased onto #28533's e61c418e) agent-pane-stack-edges, agent-pane-bottom-stack-edges, agent-pane-pr-stack-gate, subagent-tray-layout, subagent-tray-columns and subagent-tray pass 56 of 56 (run 41170446218); at the head 3360d269, with base merged and #28113's tray tests, the same six files pass 56 of 56 (run 41172778670).
scripts/web-lint.sh and prepush-gate.py pass. The design-token baseline went down by one entry: the recap's 6px bottom padding is gone.

Still at warning level (not fixed here)

The permission and question card (.acpmux-permission): radius 8 in trusted-permission-queue, and at 280px it stands +8/−8px inside the box's narrow outset.
The legacy PR bars (gallery comparison only): content-width bars.
The leading mark: the tray's icon centres 15px in, not 22px. Moving it means moving the tray's text column, which the running-tray spec and #28133's grid own; it's left for a follow-up.

Observed / Not run

Observed: the runs above. The geometry numbers come from stack-edges.json in those runs' artifacts.
Not run: a native build or a Mac capture. This is web only, and the stills come from the gallery.
Not run: an independent review at this head.

Spec: design/composer.md rule 9 now carries this rule, and design/running-tray.md records #28113's one trailing track as settled (the 22/42 tray grid under Replaced), both in leo-workspace#1751 (lane/ux-bottom-stack-spec). This PR doesn't duplicate them.

Risk: normal. The change is CSS only (edges, radius, gap and outset); the tray's markup and trailing grid are base's.

Changelog

Fixed: the running tray's chevrons line up with the composer's right edge, and every part over the composer shares its edges and corner radius at every width.

Agent session: agent session

🤖 Generated with Claude Code