feat(next): unify composer project and environment menus

Closed
TE
8d ago
+834-168

Composer project and environment menus

Leo asked:

For these left two dropdowns, we want to make it not cover the, you know, not open upwards, right? Like if you see the other dropdowns, you'll note that they open downwards, aka away from the chat. They don't hide the chat. Also, I think the design of this dropdown, these two dropdowns, are not very attractive, not very appealing. When it comes to these things, I don't know why the icons are still kind of just busted. Like why are there so many default icons? I mean, where did even this come from? I was complaining to you earlier about all this stuff, right? So anyway, like, I mean, all this, I feel like it's just not cohesive. It's not designed very well. There's no sort of sense of structure, of beauty, of whatever. And it also doesn't function that well either.

Changed

  • Both project and environment menus use the shared location placement rule: open downward when the full menu fits and flip upward only when below has less room. The side stays fixed while filtering.
  • Project rows use real repository/avatar marks where available, otherwise a quiet monogram without a repeated folder tile. Worktrees group under their repository; structural scratch paths stay out of the initial list but remain searchable and selected scratch folders remain visible.
  • Environment rows show laptop, SSH terminal/server, or cloud glyphs, with current first, shared section headers, search insets, secondary status and right-side selection columns.
  • Search and item rows share the same row height and inset, while #26536's pinned actions, keyboard collection, and scrollbar behavior remain intact. This branch carries the open #26536 dependency; #26589 is landed in the base at dfdfc552. Model-picker behavior is unchanged.
  • Added gallery states for three, eight, and fifteen projects, plus three design variants: aligned columns (selected), airy rows, and quiet icons. The aligned-column variant is selected because it keeps primary names, secondary paths, status and checks readable without extra height; all variants remain available in the gallery. The selected shared-column layout is documented in design/composer-menus.md.

Changelog

Changed: composer project and environment dropdowns now open away from the chat and use aligned, readable rows with meaningful icons and searchable grouped projects.

Validation

  • bun run check (webviews): passed through design-token, layer, type-scale, motion, browser-lane, and protocol checks.
  • python3 scripts/cmux-next/prepush-gate.py: passed at f2152b21a3bec2d577a80e0bcf166356910512a8 after rebasing onto dfdfc552.
  • Focused placement and project geometry tests pass in cmux-ci: run 40631137657, 4 tests / 10 assertions. The environment-picker run executes 36 tests with 33 passing; three existing host-fixture failures remain (New Worktree error copy and the my machines search expectation), while the preview-off machine grouping and placement tests pass. Local Bun tests could not load the checkout's missing @base-ui/utils/useIsoLayoutEffect dependency.
  • Base: dfdfc55265f (#26589 landed)
  • Head: f2152b21a3bec2d577a80e0bcf166356910512a8
  • Final focused cmux-ci: run 40640335630, 40 tests / 114 assertions, typecheck clean across 2,903 files.
  • Exact-head lint: run 40640676343, 0 warnings and 0 errors across 2,903 files.

Gallery: agent-pane.composer-context/folder-menu, agent-pane.composer-context/environment-picker, agent-pane.project-chooser/variant-aligned-columns, agent-pane.project-chooser/variant-airy-rows, agent-pane.project-chooser/variant-quiet-icons, agent-pane.project-chooser/downward-3, agent-pane.project-chooser/downward-15

Before / after captures

Synthetic light/dark gallery capture is queued through the gallery advisory workflow for the listed project/environment states. No private Leo screenshots are included here.

Agent session: agent session