cmux NEXT New Tab: Claude Code desktop's layout (composer at the foot, environment and suggestions cards)

Merged
TE
17d ago
+1376-133

Summary

Leo compared the New Tab page side by side with Claude Code desktop's new-session screen and rejected the layout from #21851/#21693. This PR adds that page's layout.

Claude Code desktop's page (the reference): the composer is at the bottom of the page, full width. Above it, centered in the empty space, one floating card picks the environment: the current project with a check, other locations, a divider, then "Choose environment". Under it, a second card holds suggested actions as icon and text rows.

Which template gets the page. #22285 merged into feat-cmux-next while this PR was open. It made Cards (dot 1) the default and gave Cards Claude Code's composer split: the strip heads the card; the prompt, mic and Send are in the box; mode, model, effort and the context ring are in a quiet row under it. That composer split is the other half of Leo's ask, so Cards keeps it unchanged. The page layout here goes on the Default template (dot 2), the one #22285 left with the existing composer. Putting it on Cards would stack two answers to the same ask on one page, and Leo kept Cards as the default. So:

  • Cards (dot 1, the default): #22285's split composer, unchanged. No create row; the mic never hides.
  • Default (dot 2): the stage page below, with the existing composer at its foot, unchanged (strip over the box; chips, mic and Send in it).
  • The other templates (composer, threads, console, classic) keep their layout.

The stage page (Default template):

  • The composer is at the foot of the page. Above it, a stage scrolls on its own and centers two floating cards:
    • Environment: the chat's project with a check, this Mac's other recent projects, a divider, then "Choose environment" (the full project chooser with search, Browse and No project).
    • Suggested: up to three chats that need you (needs input, error, lost agent), picked from every chat, so an older failed chat isn't hidden behind newer idle ones. Then New terminal, New browser tab and New chat as rows. These rows show a hover wash only, never a resting pill.
  • Now Playing, recent chats, open tabs and Recently Closed live in the stage under the cards. Nothing there can move the composer.
  • The suggestion popover opens above the composer, since the composer is at the foot.
  • Hover card: hovering a needs-you row shows a solid floating card (ui-card surface, offset from the row, clamped by the positioner, the tooltip's short fade). The stage-hover gallery entry fails if the card overlaps the row's text.
  • The New Tab widget cards (newTab.widgets) stay off by default behind their Debug Settings toggle.

An earlier version of this PR gave the stage its own footer composer (.nt-footer). The merge with #22285 drops it, along with its selectors in composerLocation.css, composerStates.css and the no-capsules allowlist. The Default template's composer is base's own.

Testing

test/new-tab-stage-layout.test.tsx was committed red first (947582311), then the layout. After the #22285 merge it checks that on Default the strip is above the box (.nt-above .nt-location), Send is in the box, and there is no quiet row (.nt-foot). composer-caret-focus measures Default's box row in the stage. new-tab-menu-over-suggestions runs the menus on Default's stage (all three menus reach over the suggestions and must take the presses), Threads (model reaches over them; effort and access open clear), and Cards' split.

Observed / Not run

  • Observed, Blacksmith Linux lane (scripts/run-linux-tests.sh), head f74d82e04448eb450a623da1298fc58f4bb9743a, run 39401292592: 209 pass, 1 fail. The one failure is agent-pane-no-capsules, which lists base's Cards pill selectors (.nt-screen[data-template="cards"][data-pill] .nt-box and four more). Base run 39401680550 at ead1584da06 fails the same way.. Files: agent-pane-no-capsules, composer-caret-focus, composer-claude-split, composer-location-strip, composer-quiet-chips, composer-top-strip-variants, narrow-layouts, new-tab-add-harness-chip, new-tab-cards-template, new-tab-composer-layout, new-tab-menu-over-suggestions, new-tab-stage-layout, popup-escape.

  • Observed, the same lane at the merge head ee19afa1782 (run 39399240752): everything passed except 4 Threads effort/access entries in new-tab-menu-over-suggestions, where those menus measure 0 rows over the suggestions. f74d82e0444 requires the overlap only where the menus reach (Default's stage, 2 to 3 rows each; Threads' model menu, 5 rows). Probe run 39400696026 measured it.

  • Observed, vp check on the changed files: clean.

  • Base reds seen in PR CI that this PR does not touch: all of these fail the same way on base ead1584da06 in Blacksmith run 39401680550:

    • new-tab-warm-first-frame (8 tests)
    • status-glyphs (codex and sheet glyphs)
    • markdown-table-keys (Cmd-A)
    • markdown-selection-drag (Cmd-A)
    • agent-pane-no-capsules (base's Cards pills)
    • composer-type-scale (model-menu-starred)
    • settings categories.test.ts (screenshots.* rows)
    • settings mobileCard.test.tsx

    Also in PR CI 39401280685:

    • The Check webviews gate fails at check:text-focus on three Swift files in Packages/macOS.
    • markdown-table-obsidian fails on column resize.

    This PR changes no Swift or markdown files. narrow-layouts timed out at the 120 s file limit in one shard after every case it reached had passed (about 12 s each). It passed in CI at ee19afa1782 and in both Blacksmith runs above, so it is a timing flake.

  • Not run: a tagged macOS build. The page is webview UI, so the gallery's Linux Chromium capture is the visual check.

Changelog

Added: The Default New Tab template draws Claude Code desktop's page: an environment card and a suggestions card above the composer at the foot of the page.

Proof

Gallery advisory run 39399080981 at ee19afa1782 (agent-pane.new-tab / stage-layout, Linux Chromium, 420 px), the Default template (dot 2): environment card, suggestions card (needs-you chats first), the existing composer at the foot with its mic and Send. Compared against cmux-design-references apps/claude/web/october-new-session.png:

  • The environment card matches: project rows with a check on the current one, a divider, then "Choose environment".
  • The composer sits at the foot in both.
  • One difference: the reference's quiet row under the box (folder, mode, model, effort, ring) is #22285's Cards split, so it isn't drawn here. Default keeps its strip over the box and the model in it.
  • The reference frame has no suggestions card. The one here comes from Leo's ask in the description of Claude Code's page.

stage layout, dark
stage layout, light

Hovering a needs-you row (stage-hover):

stage hover card

🤖 Generated with Claude Code