[FEATURE]: First-class mobile shell for the web app #59069

• I have verified this feature I'm about to request hasn't been suggested before.

What I want to change

Make the web app's mobile experience a first-class surface, not the desktop tab
shell at a narrow width. The same packages/app build, at mobile widths and in
an installed PWA, should open a full-screen shell with a proper top bar, a
session switcher, and Recents as the home. Desktop and Electron stay on the
current shell.

Why

The mobile web UI is now a real way people use OpenCode: serve plus pair,
PWA install, Tailscale or OpenTunnel. The narrow layout still exposes desktop
tab semantics and leaves core actions hard to reach. The tracker shows the
pattern: #51770 (question controls off-screen), #48748 and #57740 (keyboard and
composer), #55549 (Enter), #50459 (cannot add a project), #48810 (plan/build
selector missing), #51113 and #58489 (subagents not surfaced on mobile), #49961
and #58428 (notifications), plus the open mobile fixes #51771, #54362, #56664,
#50099, #53286 and #58399. These are symptoms of the same missing mobile
information architecture.

What already exists

Most mobile feature surfaces are already implemented: MobileDrawer and
MobilePanelDrawer, the tab drawer and TitlebarTabStrip, mobile model,
variant and agent pickers, MobileViewTabs for changes, files, terminal,
details and more, mobile settings navigation, and safe-area and keyboard
handling. The missing piece is the shell and navigation, not a rewrite of every
screen.

Shell is rendered at exactly one place, packages/app/src/shell/routes/routes.tsx:104.
That is the seam. A MobileShell can replace it for web mobile and leave
desktop and Electron untouched.

Shape

• A capability-gated MobileShell for web mobile. Desktop, Electron and narrow
  desktop windows keep the current shell.
• Top app bar with back or home, current session, status, session switcher and
  overflow.
• The session switcher reuses the existing tab store and TitlebarTabStrip.
  No parallel tab model.
• Recents as the home. Sessions, projects and worktrees, needs you, running,
  recent, search, add project and notifications.
• Session stays the canvas. The existing timeline, composer, request docks and
  mobile view tabs are reused.
• Settings, connect and pairing, extensions and notifications stay reachable.
• Safe areas, keyboard behavior, touch targets, RTL and i18n are part of the
  shell, not follow-ups.

Rollout

Keep the current mobile layout behind a flag until parity. Land in small PRs:

1. Shell foundation: top bar, session switcher, Home and back, safe areas,
   flag. Existing tab and session stores reused.
2. Session chrome: consolidate the mobile session header, surface running
   subagents, fix plan/build visibility, composer and keyboard behavior.
3. Expose the existing mobile changes, files, terminal and review views from the
   new shell.
4. Recents polish, add project, notification center and settings entry points.
5. PWA and push only where the server or API needs it, separately.

The existing mobile e2e keeper suites are the regression net. On the current
dev branch, packages/app typecheck passes, unit tests pass 775/775, and
mobile-session.spec.ts passes 8/8.

Ask

Is this the right direction, and is the first slice (shell foundation behind a
flag) acceptable as a design-approved PR? I can share before and after captures
and the feature coverage matrix.