feat(mobile): rework the sidebar picker, the view switch and the home for phones

[tlgimenes]

Reported from a phone: the org/project menu would not scroll. Pulling on that turned up three more things the mobile shell got wrong, all fixed here.

1. The picker could not be scrolled by touch

On mobile the sidebar is a Radix Sheet — a modal dialog — whose scroll lock (react-remove-scroll) calls preventDefault() on every wheel and touchmove landing outside the dialog's own DOM subtree. The picker's popover is portalled to document.body, so it was outside: the list clipped at its max height and would not move under a finger. The repo already knew this failure mode for wheel and patched it by hand in page-template-select.tsx.

Also, the height cap above it was dead code — Command declared max-h-[min(560px,70dvh)], but CommandList's shared max-h-[300px] default is smaller, so the picker was always ~373px tall whatever that number said. The list now takes the Command's budget and clamps to --radix-popover-content-available-height, so a picker opened low on a short screen ends where the screen does.

2. Two selectors over one entity

The sheet header carried an agent switcher beside the org/project picker. Agents and projects are both virtual MCPs, so those were the same things listed twice under two names — which is what made the header read as two competing scopes.

The agent switcher goes; the picker is the single selector there. Nothing else in the app opened the agent browser, so this orphaned agents-section.tsx, the agent crumb in shell-breadcrumb.tsx, and read-cached-task-branch.ts — ~1000 lines knip confirms nothing imports. They go here, with the i18n keys only they read. Desktop is unaffected: it never had an agent crumb.

3. A popover hung off a control under your thumb

The picker now opens as a bottom drawer on mobile and stays a popover on the desktop it was drawn for — the drawer presentation borrowed from the agent picker it replaces. That also settles (1) on mobile without a modal popover: a drawer is its own modal layer, so the list scrolls. Picking now closes the sheet too; before, whatever you chose stayed hidden behind it.

4. Chat was a dead end

On a route with no tabs of its own (the org home — the first one people meet) the view select listed ["Chat"] alone. "Main view" was a label it fell back to, never an option, so tapping Chat left no way back but the browser's back button. Confirmed live before the fix: the open dropdown read ["Chat", "Chat"] (hidden sentinel + the one option).

buildMobileViewOptions is now a pure, unit-tested function that synthesizes a main-surface row exactly when no tab already leads back — where the route declares tabs, opening one already opens the main panel, so a second entry would only duplicate the first.

And two surfaces render a toggle button, not a dropdown: one tap and a label beats a menu that opens to offer a single alternative. Three or more keep the select, because past two there is no single "the other one". The button names where it takes you (Chat / Main view, aria-label="Switch to …").

5. The connect pill is desktop-only now

It offers to install a CLI on the machine you are sitting at, which is not the phone you are holding — and it took the first screenful of the mobile home to propose it. hidden md:inline-flex, so the column's gap closes with it and the greeting is what you land on.

Testing

Driven on the running app with device emulation.

Touch-scroll, probed with a real dispatched touch sequence over the list:

	touchmove prevented?
popover, before	true → cannot scroll
popover + modal	false → scrolls
drawer (what shipped)	false → scrolls
drawer, list at its end	true → no scroll chaining to the page behind

At 390×844 with touch: the toggle round trips main → chat → main one tap each, label and aria-label flipping with it; the drawer opens from the bottom (data-vaul-drawer-direction="bottom") with search and both groups; sheet header controls are now exactly ["Organization and project: …", "Close sidebar", …nav]; the connect pill computes display: none.

At 1280×800: popover (no drawer), Command computed max-height: 560px, body { pointer-events: auto } confirming it is non-modal — no scrollbar-gap shift, and the org shell is h-dvh overflow-hidden so the body never scrolls anyway.

bun run fmt, bun run lint (0 errors), bun run check across every workspace, knip (clean), and 317 unit tests in the touched trees pass.

Note for whoever runs the suite: bun test apps/web/src as one process reports 111 failures — identical on main at this commit, none introduced here. They are DOM-global collisions between suites batched into one bun process (SSR / window.opener / localStorage), worth a separate look.

Follow-ups (not here)

• The account popover (account-popover.tsx) and the inbox popover (sidebar/footer/inbox.tsx) sit in the same mobile sheet and carry the same latent scroll-lock bug — the inbox one has a real scrolling list.
• The agent browser's extras died with it: server-side agent search, "Import from GitHub", and the "See all agents" footer. The picker has its own search and "New project" but not those; if they matter they belong on the picker rather than resurrected.
• With the on-screen keyboard open no CSS unit shrinks (dvh tracks the layout viewport, not the visual one), so a tall surface can still extend under the keyboard. A real fix is a separate visualViewport job.

🤖 Generated with Claude Code

https://claude.ai/code/session_01AVd1o11cJLXR7HPSTyuyBC