New Tab: project and machine head the composer, menus open away from the chat, and Cloud picks wait for the machine
Leo, 2026-10-29: "as well as the ui usability of the cloud stuff... plus having less stupid spacing on this. imo, project and cloudness at the top. make them open away from teh chat, which is obviously up if it's up, down if it's down. and stop making them take up so much space."
Leo, narrowing it: "we'll be wanting to put the project/machine (cloud) picker thing above the composer again (the is obv relevant for the new tab page and not really the in-agent-chat page)"
Takes back #24519: Leo asked for project and machine above the composer on New Tab (quoted above), so the Claude look's footer placement and its .nt-foot location CSS from #24519 go; the mode and model stay in that quiet row.
What changed
Placement (New Tab only). Folder and computer now sit in the strip above the composer box in every New Tab look. The Claude look with plain footer used to move them into the quiet row (locationInFooter, from #24519); that branch and its dead .nt-foot location CSS are gone. The agent-chat composer keeps its current row (its strip was already above the card before the first send).
Menus open away from the chat. sideAwayFromChat reads the composer's position when the menu opens: a composer in the lower half of the pane opens its folder, computer and branch menus down, one in the upper half opens them up. The side is kept, and Base UI shifts the popup into view (collisionAvoidance: {side: "shift", align: "shift", fallbackAxisSide: "none"}) instead of flipping toward the chat. Outside a composer the shared useOpenSide rule still applies.
Compact. Strip 26 -> 24px, 4px between the pills (was 6px), 6px from strip to box. The pills sit next to each other instead of spreading across the row. Measured on the gallery: New Tab folder icon x=34.5 vs access icon x=33 (one icon column), pill centres within 0.5px, strip-to-box 6px.
Cloud machine friction fixed:
- Picking a cloud machine that is still starting no longer leaves the chat on the old computer with no sign anything happened. The row reads "build box · Starting…" with the cloud icon, and the chat moves to the machine the moment it is listed ready. Another pick, a chat change, or the machine leaving the account's list ends the wait for good; a machine that fails to start reads "build box · Couldn't start" and the chat stays put.
- Resuming a paused machine reads Starting… at once, instead of keeping the paused label until the app's list returns.
- A machine that fails to start, or whose resume the app refuses, reads "Couldn't start" (existing
switch.failedShort, all locales) instead of no stage. - The plain menu's New Cloud Machine row now has its one-line description, matching the environment picker.
Design rule recorded in design/composer-menus.md (the file #26945 also starts; whichever lands second merges the two).
Screenshots (Linux gallery, Chromium, dark)
Agent chat (composer at the bottom), menu opens down:
| Before | After |
|---|---|
 |  |
 |  |
New Tab (composer near the top), menu opens up:
| Before | After |
|---|---|
 |  |
 |  |
New Tab, Claude look (pickers were in the footer row, now above the box):
| Before | After |
|---|---|
 |  |
Computer menu with cloud machines:
| Before | After |
|---|---|
 |  |
Strip surface versions in the gallery (agent-pane.composer-context-away): plain text (picked: least chrome, reads as part of the box), bump, tray, plus edge.
| plain text (picked) | bump | tray | plus edge |
|---|---|---|---|
 |  |  |  |
UI review checklist (design/ui-review-checklist.md, aiforui notes) applied
- Alignment: folder icon shares the access/+ icon column (within 2px); pill centres on one line (within 0.5px); text baselines shared. Asserted in composer-one-row-layout.test.ts.
- Menus open on the click with no fade-in; side chosen once at open, no flip mid-gesture.
- Subtraction: removed the footer location branch and its CSS rather than adding overrides.
- Tokens only: spacing through the existing
--acpmux-strip-height/--acpmux-location-gapvars; design-tokens baseline shrunk. - Several versions in the gallery, picked one, others stay as variants.
- Hover highlight stays on the pill only; the control stays lit while its menu is open (unchanged).
Prior art
- #26945 (down-first placement and containment): overlaps on
design/composer-menus.md; its owner was told the plan. This PR's away rule only applies inside a composer. - #27265 (Prototype look): untouched.
- #27146 (merged, prefer below): kept as the fallback outside composers.
Tests
- New
webviews/test/composer-location-away.test.ts: Chromium runs the four gallery plays (chat menus open down and stay in view; New Tab menus open up and stay in view). - Rewritten
composer-one-row-layout.test.ts(above-box placement, gap, alignment, compact width, foot holds no location picker). - Updated
new-tab-headline-selection-cls,newtab-project-chip-fit,new-chat-composer. environment-picker-cloud-machines.test.tsx: 9 new tests for the cloud fixes, including a failed start ending the wait, a chat change or a machine leaving the list dropping it for good, and a refused resume reading Couldn't start (each fails without its fix; 20 pass).vp fmt,vp lint,tsc, check:design-tokens, check:browser-lanes, check:catalog-keys pass.
Risk: low to medium. Webview-only; changes where New Tab's pickers sit in the Claude-footer look, and which side composer menus open on.
Agent session: agent session
🤖 Generated with Claude Code