Switch Hosts from a left drawer on the phone

[DoodleBears]

Requested by Vain · project thread

Why the change

Switching between paired computers on the phone pushed a full-screen modal that was out of thumb reach and did not say which computer was online or needed the Human; it is now a left drawer opened by the Host chip or an edge swipe.

Closes #1852 (part of #1848, user stories 14–23).

Special things to note

• Merge risk: low and JS-only (no new native module, no dev-build rebuild needed; Reanimated and Gesture Handler were already dependencies). Revert by reverting this PR. Blast radius is the mobile tab shell: the root layout now wraps everything in GestureHandlerRootView, and app/hosts.tsx (the old modal) is removed; the Me screen's Computers row now opens the drawer. Review focus: src/ui/shell/host-drawer.tsx (shared Reanimated progress driven by the edge pan, the drawer pan and the backdrop) and src/host/host-glance.ts (other Hosts are checked with one humanAttention call each, only while the drawer is open).
• Verification:
  • Automated: pnpm vitest run apps/mobile (new test/host-drawer.test.ts: open/close/reveal states, focus return to the chip, Host selection, pairing, drag settling, rows with live and glanced status, glance offline/online and stale answers ignored after close), pnpm --filter @botharness/mobile typecheck, pnpm lint, pnpm format:check, pnpm changelog:check.
  • Web export (390 × 844, Playwright with three mocked Hosts, one unreachable): chip tap opens the drawer, the backdrop closes it, a mouse drag from the left edge opens it, and tapping MacBook Air switches the header to MacBook Air.
  • Not yet run: native gestures, VoiceOver/TalkBack focus and Reduce Motion on a development build. Queued on the shared Simulator; results will be added here under Human QA. Android 10+ gesture navigation also claims the left edge for Back on a tab root, so on Android the chip is the dependable opener.
• CI test plan: affected (mobile app and tests only; no new kind of file).

Change outline

• src/ui/shell/host-drawer.tsx — HostDrawer (header / scrolling list / footer) (mounted once in the tabs layout over NativeTabs), HostDrawerEdge (wraps Home and Activity root screens; a Pan with a 24pt left hitSlop, so a chat's Back swipe is untouched), openHostDrawer().
• src/ui/shell/host-drawer-model.ts — drawer state store, rows and drag settling (pure, tested).
• src/host/host-glance.ts — status, needs-you and unread counts: the current Host's status and needs-you count come from its live connection and inbox; unread (and the other Hosts' counts) from one-shot humanAttention reads (action, unread) while the drawer is open.
• Row ⋯ menu: native action sheet on iOS, alert on Android; Unpair confirms first and uses hostSession.unpair(hostId), which now accepts any paired Host.
• .maestro/sim switch flows and the verify-deepseekbot phone feature map point at the drawer.
• Accessibility: the panel is accessibilityViewIsModal, focus moves to its "Computers" heading and returns to the chip on close; Android Back closes it; the slide uses ReduceMotion.System, and drag-tracking is skipped when Reduce Motion is on.
• Tokens: motion.drawer and scrim added to tokens.ts; the panel is on the sheet layer, one count chip per row, Needs-you before Unread. DESIGN.md describes the drawer.

Host switcher — 390 × 844, three Hosts (one offline), light

Before — a modal list of names only.

After — a Slack-style drawer: fixed header, scrolling Hosts with status, one rounded-rectangle count badge (tabular figures, capped at 99+), yellow for Needs-you first, blue for Unread otherwise, a ring on the current Host's Computer avatar and a ⋯ menu (show, unpair), and a fixed footer with Pair a new computer and Notifications.

Host switcher — dark

After tapping MacBook Air — light and dark

🤖 Generated with Claude Code

https://claude.ai/code/session_01NphaUjuKfUXQu5xKA45ptk

---

Generated by Claude Code

Summary by CodeRabbit

• New Features
  • Added a Host drawer for switching computers, accessible from the Home header, by swiping from the left edge of Home or Activity, or from Me → Computers.
  • View connection status and badges for pending items or unread conversations. The drawer also provides options to pair a computer, open Notifications, and unpair a computer.

[coderabbitai]

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 66f9d4c4-e73b-42d1-a483-373e19bc8b4a

📥 Commits

Reviewing files that changed from the base of the PR and between 84e24b5 and 2954fa2.

⛔ Files ignored due to path filters: 7

• .github/pr-screenshots/1852-host-drawer/before-dark.png is excluded by !**/*.png
• .github/pr-screenshots/1852-host-drawer/before-light.png is excluded by !**/*.png
• .github/pr-screenshots/1852-host-drawer/drawer-dark.png is excluded by !**/*.png
• .github/pr-screenshots/1852-host-drawer/drawer-light.png is excluded by !**/*.png
• .github/pr-screenshots/1852-host-drawer/edge-light.png is excluded by !**/*.png
• .github/pr-screenshots/1852-host-drawer/switched-dark.png is excluded by !**/*.png
• .github/pr-screenshots/1852-host-drawer/switched-light.png is excluded by !**/*.png

📒 Files selected for processing: 22

• .agents/skills/verify-deepseekbot/features/phone-notifications.md
• apps/mobile/.maestro/sim/switch-computer-from-me.yaml
• apps/mobile/.maestro/sim/switch-computer.yaml
• apps/mobile/DESIGN.md
• apps/mobile/app/(tabs)/(activity)/activity.tsx
• apps/mobile/app/(tabs)/(home)/index.tsx
• apps/mobile/app/(tabs)/(me)/me.tsx
• apps/mobile/app/(tabs)/_layout.tsx
• apps/mobile/app/(tabs)/_layout.web.tsx
• apps/mobile/app/_layout.tsx
• apps/mobile/app/hosts.tsx
• apps/mobile/src/host/host-glance.ts
• apps/mobile/src/host/host-session.ts
• apps/mobile/src/ui/design/tokens.ts
• apps/mobile/src/ui/shell/home-header.tsx
• apps/mobile/src/ui/shell/host-drawer-model.ts
• apps/mobile/src/ui/shell/host-drawer.tsx
• apps/mobile/src/ui/shell/icons.tsx
• apps/mobile/src/ui/strings.ts
• apps/mobile/test/home-search.test.tsx
• apps/mobile/test/host-drawer.test.ts
• changes/1852-mobile-host-drawer.md

+--------------------------------------------------------------------------------+
| A bunny is never late, nor is he early, he reviews precisely when he means to. |
+--------------------------------------------------------------------------------+
  \
   \     /)/)
        ( '')
        /  |
      o(___)

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[DoodleBears]

Batch QA

Human QA passed (Vain, 08:26Z): Host drawer opens from the chip and from an edge swipe and switches Host. Also verified on the iOS Simulator in the #1878 pass (chip and edge swipe open the drawer). Android untested.