CmuxNext: composer location strip lines up with the prompt; middle-cut folder, icon-only computer when narrow

Merged
TE
22d ago
+15585-2242

The composer's location strip (folder, computer, branch on the card's top edge) sat 12 px right of the prompt's first letter, a "·" floated between the folder's chevron and the computer, and in a narrow pane it cut to "atla…" and "This…". The compact-composer design panel flagged all three. Since #20869 the strip shows only on a new chat before its first send, so this styling is the new-chat strip's.

Now:

  • The folder icon sits over the prompt's first letter and the branch chevron over the prompt's last column. The strip stands 9 px in from the card's sides, inside the card's 18 px corner; a 2.5 px foot in the strip's own fill and side hairlines covers the corner's drop, so no page shows between the strip and the card.
  • The "·" is gone. Folder and computer are two ghost buttons 2 px apart, told apart by their icons.
  • The strip steps at pane widths (compact-composer verdict 4), at or under:
    • 460 px: "This Mac" becomes the laptop icon alone. Its name stays in the tooltip and in the accessible label ("Computer: This Mac", on the menu button and the read-only face).
    • 340 px: the folder takes a short cap and cuts in the middle, keeping both ends ("atla…checkout"). The split works on code points, so it never splits a surrogate pair.
    • The branch keeps its name at every step; it shrinks only past half the strip.
      The widths are literals that match COMPOSER_FIT_STEPS (machineIconOnly, folderMiddleTruncate) in composerRowFit.ts; footer PR #20802, which adds that table, has not merged, so a comment in composerLocation.css names it.
  • Above 340 px a folder cuts only when the strip runs out of room, and then in the middle too: the controls' fixed 190 px cap (145 px under a 480 px pane) no longer cuts a name beside empty strip.

Only the chat composer's strip (.acpmux-composer) moves to the prompt's edges; the New Tab composer keeps its own insets. The footer row is unchanged, and no hotkeys changed.

The steps (gallery agent-pane.composer-strip, new chat)

Computer at 461 / 460 px (project):

461460
Latte
Mocha

Folder at 341 / 340 px (mid-folder, "atlas-checkout"):

341340
Latte
Mocha

A long folder ("atlas-web-checkout-service", long-folder) whole at 760 px and cut in the middle at 290 px:

760290
Latte
Mocha

(The footer row's "O." / "M." in the narrow stills is the footer's own fit, which #20802 reworks; it is not part of this PR.)

Tests

  • test/composer-location-strip.test.ts (Chromium, gallery stage):
    • Boundaries: at 461 px the computer's name shows whole with no sub-pixel ellipsis; at 460 px it is the icon alone, with "Computer: This Mac" as its accessible label and tooltip. At 341 px "atlas-checkout" shows whole; at 340 px its head is cut and "checkout" stays whole inside the strip. The branch is never clipped.
    • At 420 and 760 px the folder icon's ink and the branch chevron's ink are within 2 px of the prompt's edges, and there is no "·".
    • The long folder shows whole at 760 px and keeps "service" at 290 px.
    • A pixel column through the card's corner shows no page tone between the strip and the card.
  • src/agent-session/acpmux/ComposerContext.test.ts: splitForMiddleTruncation at the edges, including astral characters.
  • test/new-tab-composer-layout.test.tsx follows the computer's new accessible label.
  • bun run check in webviews/ is clean.

Localization audit: no new strings. The accessible label and tooltip reuse composer.computer and the existing machine label.

🤖 Generated with Claude Code