fix(app): preserve workspace-root link tooltips

Workspace file resolution deliberately rejects the root as an openable file, so tooltip formatting preserves its display-only dot form separately.

.github/workflows/ci.yml

@@ -239,8 +239,13 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shard: [1, 2, 3, 4]
-    name: playwright (shard ${{ matrix.shard }}/4)
+        include:
+          - { label: "shard 1/4", shard: 1, desktop: false }
+          - { label: "shard 2/4", shard: 2, desktop: false }
+          - { label: "shard 3/4", shard: 3, desktop: false }
+          - { label: "shard 4/4", shard: 4, desktop: false }
+          - { label: "desktop overlay", shard: "desktop", desktop: true }
+    name: playwright (${{ matrix.label }})
     runs-on: ubuntu-latest
     env:
       ELECTRON_SKIP_BINARY_DOWNLOAD: "1"
@@ -276,13 +281,19 @@ jobs:
         run: npm run build:server
 
       - name: Install agent CLIs for provider tests
+        if: ${{ !matrix.desktop }}
         run: npm install -g @anthropic-ai/claude-code @openai/codex@0.105.0 opencode-ai
 
       - name: Run Playwright E2E tests
+        if: ${{ !matrix.desktop }}
         run: npm run test:e2e --workspace=@getpaseo/app -- --shard=${{ matrix.shard }}/4
         env:
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
 
+      - name: Run desktop-overlay Playwright tests
+        if: ${{ matrix.desktop }}
+        run: npm run test:e2e:desktop --workspace=@getpaseo/app
+
       - name: Upload test artifacts
         uses: actions/upload-artifact@v4
         if: failure()

.oxlintrc.json

@@ -84,6 +84,198 @@
     "max-nested-callbacks": ["error", { "max": 3 }]
   },
   "overrides": [
+    {
+      "files": ["packages/app/src/**/*.{ts,tsx}"],
+      "rules": {
+        "no-restricted-imports": [
+          "error",
+          {
+            "paths": [
+              {
+                "name": "@tanstack/react-query",
+                "importNames": ["useQuery", "useInfiniteQuery", "useQueries"],
+                "message": "App reads must go through useReplicaQuery/useFetchQuery from @/data/query. Grandfathered files may only leave the override burn-down list."
+              },
+              {
+                "name": "react-native-unistyles",
+                "importNames": ["useUnistyles"],
+                "message": "useUnistyles is banned by docs/unistyles.md. Grandfathered files may only leave the override burn-down list."
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "packages/app/src/data/**/*.{ts,tsx}",
+        "packages/app/src/**/*.test.{ts,tsx}",
+        "packages/app/src/**/*.spec.{ts,tsx}"
+      ],
+      "rules": {
+        "no-restricted-imports": [
+          "error",
+          {
+            "paths": [
+              {
+                "name": "react-native-unistyles",
+                "importNames": ["useUnistyles"],
+                "message": "useUnistyles is banned by docs/unistyles.md. Grandfathered files may only leave the override burn-down list."
+              }
+            ]
+          }
+        ]
+      }
+    },
+    // Raw query burn-down: 35 files total; the 29 files below still enforce the useUnistyles ban.
+    {
+      "files": [
+        "packages/app/src/assistant-file-links/use-file-link.ts",
+        "packages/app/src/components/message.tsx",
+        "packages/app/src/components/worktree-setup-callout-source.tsx",
+        "packages/app/src/desktop/hooks/use-daemon-status.ts",
+        "packages/app/src/desktop/hooks/use-install-status.ts",
+        "packages/app/src/desktop/settings/desktop-settings.ts",
+        "packages/app/src/git/pull-request-panel/use-data.ts",
+        "packages/app/src/git/use-github-search-query.ts",
+        "packages/app/src/git/use-pr-status-query.ts",
+        "packages/app/src/git/use-status-query.ts",
+        "packages/app/src/hooks/use-archive-agent.ts",
+        "packages/app/src/hooks/use-agent-autocomplete.ts",
+        "packages/app/src/hooks/use-agent-commands-query.ts",
+        "packages/app/src/hooks/use-agent-history.ts",
+        "packages/app/src/hooks/use-branch-switcher.ts",
+        "packages/app/src/hooks/use-changes-preferences/index.ts",
+        "packages/app/src/hooks/use-draft-agent-features.ts",
+        "packages/app/src/hooks/use-form-preferences.ts",
+        "packages/app/src/hooks/use-is-local-daemon.ts",
+        "packages/app/src/hooks/use-keyboard-shortcut-overrides.ts",
+        "packages/app/src/hooks/use-preferred-editor.ts",
+        "packages/app/src/hooks/use-project-icon-query.ts",
+        "packages/app/src/hooks/use-settings/index.ts",
+        "packages/app/src/panels/terminal-panel.tsx",
+        "packages/app/src/projects/project-icons.ts",
+        "packages/app/src/provider-usage/use-provider-usage.ts",
+        "packages/app/src/screens/project-settings-screen.tsx",
+        "packages/app/src/screens/workspace/use-workspace-checkout-status.ts",
+        "packages/app/src/workspace/desktop-open-targets.ts"
+      ],
+      "rules": {
+        "no-restricted-imports": [
+          "error",
+          {
+            "paths": [
+              {
+                "name": "react-native-unistyles",
+                "importNames": ["useUnistyles"],
+                "message": "useUnistyles is banned by docs/unistyles.md. Grandfathered files may only leave the override burn-down list."
+              }
+            ]
+          }
+        ]
+      }
+    },
+    // useUnistyles burn-down: 74 files total; the 68 files below still enforce the raw-query ban.
+    {
+      "files": [
+        "packages/app/src/app/_layout.tsx",
+        "packages/app/src/app/pair-scan.tsx",
+        "packages/app/src/components/adaptive-modal-sheet.tsx",
+        "packages/app/src/components/add-host-method-modal.tsx",
+        "packages/app/src/components/add-host-modal.tsx",
+        "packages/app/src/components/agent-list.tsx",
+        "packages/app/src/components/agent-status-dot.tsx",
+        "packages/app/src/components/attachment-lightbox.tsx",
+        "packages/app/src/components/browser-pane.electron.tsx",
+        "packages/app/src/components/browser-pane.tsx",
+        "packages/app/src/components/browser-pane.web.tsx",
+        "packages/app/src/components/command-center.tsx",
+        "packages/app/src/components/context-window-meter.tsx",
+        "packages/app/src/components/dictation-controls.tsx",
+        "packages/app/src/components/download-toast.tsx",
+        "packages/app/src/components/draggable-list.native.tsx",
+        "packages/app/src/components/explorer-sidebar.tsx",
+        "packages/app/src/components/headers/back-header.tsx",
+        "packages/app/src/components/headers/menu-header.tsx",
+        "packages/app/src/components/headers/screen-header.tsx",
+        "packages/app/src/components/host-status-dot.tsx",
+        "packages/app/src/components/hosts/host-picker.tsx",
+        "packages/app/src/components/icons/paseo-logo.tsx",
+        "packages/app/src/components/left-sidebar.tsx",
+        "packages/app/src/components/pair-link-modal.tsx",
+        "packages/app/src/components/plan-card.tsx",
+        "packages/app/src/components/provider-diagnostic-sheet.tsx",
+        "packages/app/src/components/question-form-card.tsx",
+        "packages/app/src/components/quitting-overlay.tsx",
+        "packages/app/src/components/realtime-voice-overlay.tsx",
+        "packages/app/src/components/resize-handle.tsx",
+        "packages/app/src/components/rewind/rewind-menu.tsx",
+        "packages/app/src/components/settings-textarea.tsx",
+        "packages/app/src/components/sidebar-callout.tsx",
+        "packages/app/src/components/split-container.tsx",
+        "packages/app/src/components/split-drop-zone.tsx",
+        "packages/app/src/components/terminal-pane.tsx",
+        "packages/app/src/components/toast-host.tsx",
+        "packages/app/src/components/tool-call-sheet.tsx",
+        "packages/app/src/components/ui/alert.tsx",
+        "packages/app/src/components/ui/autocomplete.tsx",
+        "packages/app/src/components/ui/combobox.tsx",
+        "packages/app/src/components/ui/context-menu.tsx",
+        "packages/app/src/components/ui/dropdown-menu.tsx",
+        "packages/app/src/components/ui/external-link.tsx",
+        "packages/app/src/components/volume-meter.tsx",
+        "packages/app/src/components/web-desktop-scrollbar.tsx",
+        "packages/app/src/components/welcome-screen.tsx",
+        "packages/app/src/composer/agent-controls/index.tsx",
+        "packages/app/src/composer/agent-controls/mode-control.tsx",
+        "packages/app/src/constants/layout.ts",
+        "packages/app/src/desktop/components/desktop-permission-row.tsx",
+        "packages/app/src/desktop/components/desktop-permissions-section.tsx",
+        "packages/app/src/desktop/components/desktop-updates-section.tsx",
+        "packages/app/src/desktop/components/integrations-section.tsx",
+        "packages/app/src/desktop/updates/update-callout-source.tsx",
+        "packages/app/src/git/actions-split-button.tsx",
+        "packages/app/src/hooks/use-web-scrollbar-style.web.ts",
+        "packages/app/src/hosts/host-chooser.tsx",
+        "packages/app/src/screens/open-project-screen.tsx",
+        "packages/app/src/screens/projects-screen.tsx",
+        "packages/app/src/screens/sessions-screen.tsx",
+        "packages/app/src/screens/settings-screen.tsx",
+        "packages/app/src/screens/settings/host-page.tsx",
+        "packages/app/src/screens/settings/providers-section.tsx",
+        "packages/app/src/screens/settings/settings-group.tsx",
+        "packages/app/src/screens/startup-splash-screen.tsx",
+        "packages/app/src/screens/workspace/workspace-route-state-views.tsx"
+      ],
+      "rules": {
+        "no-restricted-imports": [
+          "error",
+          {
+            "paths": [
+              {
+                "name": "@tanstack/react-query",
+                "importNames": ["useQuery", "useInfiniteQuery", "useQueries"],
+                "message": "App reads must go through useReplicaQuery/useFetchQuery from @/data/query. Grandfathered files may only leave the override burn-down list."
+              }
+            ]
+          }
+        ]
+      }
+    },
+    // Both burn-downs: 6 overlapping files. They may only shrink out of this exemption.
+    {
+      "files": [
+        "packages/app/src/components/file-explorer-pane.tsx",
+        "packages/app/src/components/file-pane.tsx",
+        "packages/app/src/components/import-session-sheet.tsx",
+        "packages/app/src/components/project-picker-modal.tsx",
+        "packages/app/src/desktop/components/pair-device-section.tsx",
+        "packages/app/src/screens/new-workspace-screen.tsx"
+      ],
+      "rules": {
+        "no-restricted-imports": "off"
+      }
+    },
     {
       "files": ["**/e2e/fixtures.ts"],
       "rules": {

CHANGELOG.md

@@ -1,6 +1,31 @@
 # Changelog
 
-## 0.1.104-beta.4 - 2026-07-06
+## 0.1.105 - 2026-07-10
+
+### Added
+
+- Browse changed files as a collapsible folder tree or flat list ([#1918](https://github.com/getpaseo/paseo/pull/1918), [#1945](https://github.com/getpaseo/paseo/pull/1945) by [@cleiter](https://github.com/cleiter))
+- Always expand agent reasoning with a new appearance setting ([#1943](https://github.com/getpaseo/paseo/pull/1943) by [@mcowger](https://github.com/mcowger))
+
+### Improved
+
+- Project picker finds folders with fuzzy search and native desktop browsing ([#1968](https://github.com/getpaseo/paseo/pull/1968))
+- Large workspace sidebars stay responsive ([#1966](https://github.com/getpaseo/paseo/pull/1966))
+- Generated workspace names and Git text can use MiniMax M3 ([#1955](https://github.com/getpaseo/paseo/pull/1955) by [@octo-patch](https://github.com/octo-patch))
+- Cursor now exposes thinking and fast mode ([#1952](https://github.com/getpaseo/paseo/pull/1952))
+
+### Fixed
+
+- Codex stays active and streams correctly while subagents run ([#1967](https://github.com/getpaseo/paseo/pull/1967))
+- Android audio interruptions no longer crash voice mode or leave dictation stuck ([#1941](https://github.com/getpaseo/paseo/pull/1941))
+- Mobile sidebars stay in sync and retain swipe-to-open gestures ([#1953](https://github.com/getpaseo/paseo/pull/1953), [#1976](https://github.com/getpaseo/paseo/pull/1976))
+- Pi text-only models accept image prompts without breaking the session ([#1960](https://github.com/getpaseo/paseo/pull/1960))
+- App render failures show a retryable recovery screen instead of a blank screen ([#1924](https://github.com/getpaseo/paseo/pull/1924))
+- Pi context usage remains visible with older Oh My Pi versions ([#1886](https://github.com/getpaseo/paseo/pull/1886) by [@theslava](https://github.com/theslava))
+- Provider usage popovers no longer error when opened and closed quickly ([#1885](https://github.com/getpaseo/paseo/pull/1885) by [@theslava](https://github.com/theslava))
+- Mobile workspace menus hide desktop-only shortcut badges ([#1964](https://github.com/getpaseo/paseo/pull/1964))
+
+## 0.1.104 - 2026-07-08
 
 ### Added
 
@@ -10,17 +35,27 @@
 - Open a project from anywhere with Cmd+O ([#1849](https://github.com/getpaseo/paseo/pull/1849))
 - Agents can rename workspaces after they understand the task ([#1876](https://github.com/getpaseo/paseo/pull/1876))
 - Claude Ultra Code is available for supported Claude models ([#1872](https://github.com/getpaseo/paseo/pull/1872))
-- ByteDance TRAE CLI available as an agent provider ([#1831](https://github.com/getpaseo/paseo/pull/1831) by [@park0er](https://github.com/park0er))
+- ByteDance TRAE CLI available as an agent provider ([#1831](https://github.com/getpaseo/paseo/pull/1831), [#1896](https://github.com/getpaseo/paseo/pull/1896) by [@park0er](https://github.com/park0er))
 
 ### Improved
 
+- Manage the built-in daemon from one place in desktop settings ([#1938](https://github.com/getpaseo/paseo/pull/1938))
+- Scheduled and loop runs each get their own workspace in the sidebar ([#1909](https://github.com/getpaseo/paseo/pull/1909), [#1934](https://github.com/getpaseo/paseo/pull/1934))
 - Large provider and model refreshes load faster in the app ([#1895](https://github.com/getpaseo/paseo/pull/1895))
 - Workspaces created by agents now get readable generated names ([#1887](https://github.com/getpaseo/paseo/pull/1887))
 - Browser tabs opened by agents stay in the background until you switch to them ([#1875](https://github.com/getpaseo/paseo/pull/1875))
 - Clearer cards when an agent asks a question ([#1643](https://github.com/getpaseo/paseo/pull/1643) by [@cleiter](https://github.com/cleiter))
+- Diagnostic reports include desktop app logs ([#1914](https://github.com/getpaseo/paseo/pull/1914))
+- Paseo's built-in tools take less context ([#1939](https://github.com/getpaseo/paseo/pull/1939))
 
 ### Fixed
 
+- Renamed hosts keep their name after reconnecting ([#1940](https://github.com/getpaseo/paseo/pull/1940))
+- Desktop finds your installed CLIs even when your shell is slow to start ([#1916](https://github.com/getpaseo/paseo/pull/1916))
+- Restarting the daemon from desktop settings works reliably ([#1915](https://github.com/getpaseo/paseo/pull/1915))
+- Restarting the daemon from the bundled CLI keeps it managed by the desktop app ([#1919](https://github.com/getpaseo/paseo/pull/1919))
+- Web UI loads when the daemon is started from the bundled CLI ([#1899](https://github.com/getpaseo/paseo/pull/1899) by [@yzim](https://github.com/yzim))
+- Worktree setup scripts keep your PATH ([#1908](https://github.com/getpaseo/paseo/pull/1908))
 - Docker images keep running during provider cleanup and diagnostics ([#1877](https://github.com/getpaseo/paseo/pull/1877))
 - New Workspace drafts survive archiving a workspace ([#1838](https://github.com/getpaseo/paseo/pull/1838))
 - Composer autocomplete stays open after switching screens ([#1851](https://github.com/getpaseo/paseo/pull/1851))

CLAUDE.md

@@ -30,6 +30,7 @@ At the start of non-trivial work, list `docs/` and skim anything relevant to the
 | [docs/glossary.md](docs/glossary.md)                               | Authoritative terminology — UI label wins, no synonyms                                                                         |
 | [docs/coding-standards.md](docs/coding-standards.md)               | Type hygiene, error handling, state design, React patterns, file organization                                                  |
 | [docs/design.md](docs/design.md)                                   | Theme tokens — colors, fonts, spacing, radii, icons                                                                            |
+| [docs/forms.md](docs/forms.md)                                     | Form architecture — non-React form model, form kit, load-state gating; the schedule form is the golden example                 |
 | [docs/hover.md](docs/hover.md)                                     | Hover — the canonical pattern (plain View + onPointerEnter/Leave, separate inner Pressable) and the three ways agents break it |
 | [docs/unistyles.md](docs/unistyles.md)                             | Unistyles gotchas — `useUnistyles()` is forbidden, alternatives in order                                                       |
 | [docs/floating-panels.md](docs/floating-panels.md)                 | Anchored popovers — Portal/Modal escape for Android, lifecycle gates, keyboard-shared-value, status-bar offset, the flash      |
@@ -44,6 +45,7 @@ At the start of non-trivial work, list `docs/` and skim anything relevant to the
 | [docs/terminal-performance.md](docs/terminal-performance.md)       | Terminal latency pipeline, coalescing/backpressure invariants, benchmark + perf spec usage                                     |
 | [docs/testing.md](docs/testing.md)                                 | TDD workflow, determinism, real dependencies over mocks, test organization                                                     |
 | [docs/mobile-testing.md](docs/mobile-testing.md)                   | Maestro and mobile test workflows                                                                                              |
+| [docs/mobile-panels.md](docs/mobile-panels.md)                     | Compact left/center/right panel ownership, worklet motion, gesture revisions, and Fabric constraints                           |
 | [docs/ad-hoc-daemon-testing.md](docs/ad-hoc-daemon-testing.md)     | Isolated in-process daemon test harness                                                                                        |
 | [docs/browser-capture-harness.md](docs/browser-capture-harness.md) | Real-Electron browser screenshot harness and compositor-surface gotcha                                                         |
 | [docs/android.md](docs/android.md)                                 | App variants, local/cloud builds, EAS workflows                                                                                |

docs/architecture.md

@@ -185,6 +185,15 @@ New session RPCs use dotted names with `.request` and `.response` suffixes, such
 - Voice/dictation streaming events (`dictation_stream_*`, `assistant_chunk`, `audio_output`, `transcription_result`)
 - Request/response pairs for fetch, list, create, etc., correlated by `requestId`; failures use `rpc_error`
 
+`directory_suggestions_request` is one daemon-owned filesystem search capability. The daemon
+configures the same `searchDirectoryEntries` engine with a root, output format, path-query policy,
+entry-kind filters, match mode, blank-query behavior, and hidden-directory traversal policy. A
+request without `cwd` searches the host home for absolute project paths; a request with `cwd`
+searches that workspace and returns relative entries. Clients may prepend their small host-scoped
+recent-project list for bare queries, but must not parse filesystem query syntax or re-filter a
+correlated daemon response. The legacy `directories` response field remains a projection of the
+typed `entries` list.
+
 **Binary frames (terminal stream protocol):**
 
 Terminal I/O is sent as binary WebSocket frames decoded by `decodeTerminalStreamFrame` in `shared/binary-frames/terminal.ts`. The layout is:

docs/custom-providers.md

@@ -171,7 +171,7 @@ For pay-as-you-go, use `ANTHROPIC_API_KEY` with a standard Model Studio key (`sk
 | `qwen3-coder-next` | Optimized for coding        |
 | `kimi-k2.5`        | Vision capable              |
 | `glm-5`            | Zhipu GLM                   |
-| `MiniMax-M2.5`     | MiniMax                     |
+| `MiniMax-M3`       | MiniMax                     |
 
 **Additional models (pay-as-you-go):**
 `qwen3-max`, `qwen3.5-flash`, `qwen3-coder-plus`, `qwen3-coder-flash`, `qwen3-vl-plus`, `qwen3-vl-flash`

docs/data-model.md

@@ -4,6 +4,10 @@ Paseo uses **file-based JSON persistence** instead of a traditional database. Al
 
 All server-side stores live under `$PASEO_HOME` (defaults to `~/.paseo`).
 
+## Store Surface Rules
+
+Store APIs own persistence atomicity and should not make services coordinate raw reads and writes. A good store method maps cleanly to one SQL statement or one SQL transaction, even when the current implementation is JSON files. If a caller needs a queue, lock, read-merge-write loop, or uniqueness race workaround, that behavior belongs behind the store surface.
+
 ---
 
 ## Directory layout
@@ -37,30 +41,6 @@ The `agents/{sanitized-cwd}/` directory name is derived from the agent's `cwd` b
 
 ---
 
-## Runtime PID Lock
-
-**Path:** `$PASEO_HOME/paseo.pid`
-
-The daemon writes this file when it starts and removes it when it exits cleanly.
-It is a runtime lock, not a durable settings file.
-
-| Field            | Type                  | Description                                                                                                  |
-| ---------------- | --------------------- | ------------------------------------------------------------------------------------------------------------ |
-| `pid`            | `number`              | Owner process PID for stop/status operations                                                                 |
-| `startedAt`      | `string` (ISO 8601)   | Lock creation timestamp                                                                                      |
-| `hostname`       | `string`              | Host that created the lock                                                                                   |
-| `uid`            | `number`              | User id that created the lock, or `0` where unavailable                                                      |
-| `listen`         | `string \| null`      | Daemon listen target at lock creation; updated when the server binds                                         |
-| `executablePath` | `string?`             | `process.execPath` for the daemon runtime. Desktop uses this to derive whether the daemon is desktop-managed |
-| `desktopManaged` | `boolean?` _(legacy)_ | Legacy spawn-origin flag accepted for old locks only; new locks derive desktop management from executable    |
-
-Desktop-managed is a read-time classification by the desktop app: the daemon
-executable must be the desktop app executable or live inside the same desktop
-install. The CLI reports the raw `executablePath` but does not try to classify
-it because an npm-installed CLI has no authoritative desktop install root.
-
----
-
 ## 1. Agent Record
 
 **Path:** `$PASEO_HOME/agents/{project-dir}/{agentId}.json`

docs/development.md

@@ -173,6 +173,19 @@ The supervisor rotates `daemon.log`. Persisted `log.file.rotate` settings in
 `PASEO_LOG_ROTATE_SIZE` and `PASEO_LOG_ROTATE_COUNT` env vars override the
 defaults. The default rotation is `10m` x `3` files everywhere.
 
+### Agent Tool Catalog Measurement
+
+Measure the MCP `tools/list` payload that Paseo injects into agents with:
+
+```bash
+npm run measure:agent-tools --workspace=@getpaseo/server
+```
+
+The command reports compact JSON bytes, estimated tokens, field totals, largest
+tools, and the browser-tools delta. It defaults to the agent-scoped catalog; use
+`-- --scope=top-level` for the unaffiliated `/mcp/agents` shape and `-- --json`
+for machine-readable output.
+
 ## paseo.json service scripts
 
 `worktree.setup` and `worktree.teardown` accept either a multiline shell script or an array
@@ -290,6 +303,8 @@ npm run build:app-deps     # highlight -> protocol -> client -> expo-two-way-aud
 
 Use `npm run build:server` whenever you have changed any daemon/server-facing package and need clean cross-package types or runtime behavior.
 
+The app Metro config disables Watchman and uses Metro's node crawler for exports. Keep that invariant unless you have verified production app exports on machines with and without Watchman installed; distro Watchman builds can differ in capabilities and change Metro's crawl behavior.
+
 For tighter loops, you can rebuild a single workspace:
 
 - Changed `packages/protocol/src/*` or `packages/client/src/*`: `npm run build:client`.

docs/floating-panels.md

@@ -20,6 +20,29 @@ input focused while its scrollable list lives in a Portal. There is no shared
 "floating panel" primitive yet — when a fifth use case shows up we can revisit;
 until then prefer copying the closest file and trimming.
 
+## Popover width contract
+
+Combobox desktop popovers are never narrower than their trigger, and they grow
+with content up to a ceiling that is never below the trigger:
+
+```ts
+const floor = Math.max(desktopMinWidth ?? 0, referenceWidth ?? 200);
+const frameStyle = { minWidth: floor, maxWidth: Math.max(400, floor) };
+```
+
+`desktopMinWidth` is an explicit floor-raiser. It does not cap width, and the
+trigger still wins when it is wider. Changing this default requires re-verifying
+every consumer listed here.
+
+Consumers: `composer/agent-controls/mode-control.tsx`,
+`composer/agent-controls/index.tsx`, `composer/index.tsx`,
+`components/combined-model-selector.tsx`, `components/hosts/host-picker.tsx`
+(including `components/hosts/host-filter.tsx`), `components/branch-switcher.tsx`,
+`components/left-sidebar.tsx`, `components/ui/select-field.tsx` (schedule form),
+`screens/new-workspace-screen.tsx` plus `screens/new-workspace/project-picker.ts`,
+`components/import-session-sheet.tsx`, `screens/workspace/workspace-screen.tsx`,
+`screens/settings-screen.tsx`, and `screens/project-settings-screen.tsx`.
+
 ## Gotcha 1 — Android touch hit-test by parent bounds
 
 On Android, a child View whose bounds fall outside its parent's bounds renders

docs/forms.md

@@ -0,0 +1,98 @@
+# Forms
+
+The paved road for building forms in the app. The schedule form is the golden
+example; when building or fixing any form, copy its shape, not the shape of
+whatever screen you happen to be near.
+
+Golden example files:
+
+- `packages/app/src/schedules/schedule-form-model.ts` (+ `.test.ts`) — the model
+- `packages/app/src/schedules/use-schedule-form-model.ts` — model lifetime adapter
+- `packages/app/src/schedules/use-schedule-form-provider-snapshot.ts` — async input adapter
+- `packages/app/src/components/schedules/schedule-form-sheet.tsx` — render + intent dispatch
+- `packages/app/src/schedules/aggregated-schedules.ts` / `hooks/use-schedules.ts` — load-state gating
+- `packages/app/e2e/schedules-*.spec.ts` — the behavioral contract
+
+## The form model
+
+Every non-trivial form gets a **plain TypeScript model** — zero React imports:
+
+- `openXxxForm(snapshot)` **constructs** a fresh instance from declared inputs
+  (mode, the record being edited, hosts, defaults). Edit mode seeds every value
+  AND display from the snapshot — never from a previous instance.
+- **Commands** mutate (`setHost`, `setProject(value, display)`, `setModel`, …).
+  Derived state (disclosure, canSubmit, displays) is recomputed inside the
+  model on every publish.
+- `close()` destroys the instance. `subscribe`/`getState` feed one
+  `useSyncExternalStore` in the component.
+
+The component renders state and dispatches intent. That is all it does.
+
+### Lifecycle rules (each one killed a real shipped bug)
+
+1. **Fresh mount per open.** The sheet returns `null` when not visible and
+   mounts the open form with a `key` derived from mode + record identity.
+   A long-lived component instance shared across create/edit is how edit
+   contaminated create.
+2. **Construct the model ONCE per mount** — `useState(() => openXxxForm(snapshot))`.
+   NEVER `useMemo(() => open(...), [snapshot])`: the snapshot's identity depends
+   on live data (projects, hosts, preferences), and any background churn — e.g.
+   a scheduled run creating a workspace — would reconstruct the model and wipe
+   the user's in-progress input.
+3. **Late data is an explicit model input, not a reconstruction.**
+   `applyProviderSnapshot(serverId, …)`, `applyProjectTargets(…)`,
+   `applyHosts(…)`. Adapters pipe identity changes into these with mechanical
+   effects. Input plumbing is fine; orchestration effects are not — the sheet
+   itself has zero `useEffect`/`useRef`, and that is the target for every form.
+4. **Resolution is explicit model state, per host** (`idle | pending |
+complete`), keyed off the opened snapshot's serverId. Waiting for data is a
+   state you can render, not an effect race.
+5. **Displays are owned state.** The selected option's label is captured at
+   selection/seed time (`setProject(value, display)`), never re-derived from a
+   live options list — list churn must not flicker or blank a selection.
+6. **Disclosure is derived in the model** from user intent
+   (host → project → model → thinking/mode), so fields cannot pop in from
+   cache timing.
+
+## Form kit
+
+- Compose `Field` / `SelectField` / `FormTextInput` / `SegmentedControl` /
+  `Switch` from `components/ui/`. Geometry (heights, padding, radii, focus/hover
+  states) is owned by `components/ui/control-geometry.ts` — controls never
+  declare their own, and screens never nudge global component styles to align
+  a row.
+- The form declares one size for all fields: `sm` on desktop, `md` compact
+  (`useIsCompactFormFactor`).
+- Availability hierarchy: a field whose capability doesn't apply is **hidden**
+  (isolation on a non-git project — same gating as New Workspace), not rendered
+  disabled with an explanation. Disabled-with-a-reason `hint` is only for
+  transient states the user can resolve.
+- Copy is opt-in and rare. No hint/subtext unless the maintainer approved the
+  exact string; validation errors are the exception. State a fact (like the
+  timezone) once — never in a preview line AND a helper line.
+- `useUnistyles` is banned (see docs/unistyles.md); lint enforces.
+
+## Data gating
+
+Aggregate hooks return a discriminated load state:
+
+```ts
+type AggregateLoadState<T> =
+  | { status: "connecting" } // an answer may still be pending
+  | { status: "loading" }
+  | { status: "loaded"; data: T[] };
+```
+
+Empty states are only typeable inside `loaded` — a fetch that "succeeded"
+before hosts connected is `connecting`, not empty. Query keys carry real fetch
+inputs (host set, connection statuses), never synthetic version counters.
+
+## Anti-patterns (reject in review on sight)
+
+- `useEffect` choreography impersonating construct/hydrate/resolve/destroy.
+- One mounted form instance serving create and edit.
+- `useMemo`-keyed model construction on live-data identity.
+- Selected labels derived from live query lists.
+- `isLoading`/`isEmpty` boolean bags where a load-state union belongs.
+- Conditional mounting of hint/error rows that shifts layout (subtext renders
+  only when present, but the pattern for that lives in `Field`, not ad hoc).

docs/mobile-panels.md

@@ -0,0 +1,88 @@
+# Mobile panels
+
+Compact layouts have three mutually exclusive destinations:
+
+- `agent-list` on the left
+- `agent` in the center
+- `file-explorer` on the right
+
+They are one interaction, not two independent drawers. The implementation lives in
+`packages/app/src/mobile-panels/`.
+
+## Ownership
+
+React/Zustand owns the durable intent:
+
+```ts
+interface MobilePanelSelection {
+  target: "agent-list" | "agent" | "file-explorer";
+  revision: number;
+}
+```
+
+Every semantic target change increments `revision`. Repeating the current target is idempotent.
+Compact panel selection is not persisted; a cold start begins at `agent`.
+
+The UI worklet owns transient motion:
+
+- one normalized position (`-1` left, `0` center, `1` right)
+- the current motion target
+- the active gesture's starting revision
+- the last settled target
+
+React also owns presentation lifecycle: whether an overlay is mounted/displayed and whether it may
+receive pointer events. Worklets never own `display` or `pointerEvents`.
+
+## Why one position
+
+Both transforms and both backdrop opacities are derived from the same normalized position. Window
+width is only a projection input. Rotation changes the projection, not the panel state.
+
+This makes these invalid states unrepresentable:
+
+- a panel and its backdrop disagreeing
+- left and right drawers both claiming to be open
+- a width-sync effect resetting an active drag
+- one animation context settling a transition owned by the other
+
+Do not add another panel translate shared value, backdrop shared value, or width synchronization
+effect.
+
+## Ordering and interruption
+
+A gesture captures the current revision when it becomes active. Per-frame updates are accepted only
+while that revision still owns the gesture.
+
+When a React command arrives during a drag, its newer revision clears gesture ownership and starts
+motion toward the new target. The older gesture's remaining updates and finish callback are ignored.
+Canceled gestures return to the latest canonical target. Animation completion is accepted only when
+its target and revision still match the canonical command.
+
+Manual gesture arbitration has two phases:
+
+1. Before activation, determine whether horizontal intent may begin.
+2. After activation, stop running begin checks and let the active revision own updates.
+
+Re-running the begin gate after activation self-cancels the gesture because an active gesture is, by
+definition, no longer eligible to begin.
+
+## Integration rules
+
+- Callers request semantic targets through `panel-store`; they never write shared values.
+- Gesture behavior comes from the four explicit hooks in `mobile-panels/gestures.ts`.
+- Keep `SidebarModelProvider` outside `MobileGestureWrapper`. The provider shares sidebar derivation
+  across consumers, while Gesture Handler requires the wrapper's direct child to be a native `View`
+  so its injected `collapsable={false}` reaches Android/Fabric.
+- Mobile sidebars render through `MobilePanelOverlay`; do not duplicate overlay lifecycle or motion
+  styles in sidebar components.
+- Animated panel nodes use React Native static styles plus inline theme values. Do not attach
+  Unistyles-generated styles to those nodes; Unistyles and Reanimated patching the same Fabric node
+  has caused native crashes.
+- The plain React wrapper owns `display: none` after settlement. This prevents a stale Fabric animated
+  prop commit from resurrecting a closed overlay.
+
+## Tests
+
+`packages/app/src/mobile-panels/model.test.ts` exercises command, drag, cancellation, interruption,
+rapid-command, stale-completion, and width-projection sequences through the transition model. Add a
+sequence there whenever ownership or ordering changes.

docs/mobile-testing.md

@@ -198,6 +198,19 @@ for i in $(seq 1 "$ITERATIONS"); do
 done
 ```
 
+### Android audio focus interruptions
+
+Voice mode uses the custom `expo-two-way-audio` Android module, so incoming calls and other system audio owners must be tested with emulator/system commands, not a JS-only test. To verify that voice resume handles denied audio focus without crashing:
+
+```bash
+adb shell am start -n sh.paseo/.MainActivity
+# Start voice mode in an existing composer, then background Paseo with Home.
+adb emu gsm call 5551234
+# Foreground Paseo while the call is still ringing.
+```
+
+Expected result: Paseo does not throw `RuntimeException: Audio focus request failed`; native audio reports an interruption and voice mode stops or pauses coherently.
+
 ## Unistyles + Reanimated
 
 ### The crash

docs/providers.md

@@ -26,6 +26,8 @@ Pi is a process-backed provider. Paseo requires the user to have the `pi` binary
 
 Paseo's per-agent and daemon-wide system prompts are passed to Pi with `--append-system-prompt`, so Pi keeps its default coding prompt while receiving Paseo's additional instructions.
 
+Pi model records expose input capabilities through `model.input`. Only send raw RPC `images` when the current model explicitly includes `"image"` in that list. Text-only Pi/OMP models reject image content and persist the rejected image in JSONL history, so image prompts for those models must be materialized to a local file and passed as a text path hint instead.
+
 Pi MCP support depends on the open-source `pi-mcp-adapter` extension being loaded for the agent cwd. Probe with Pi RPC `get_commands`; the adapter registers an extension command named `mcp` (often with `sourceInfo.source` containing `pi-mcp-adapter`). When Paseo injects MCP servers into Pi, write a per-agent MCP config and pass it with `--mcp-config` instead of modifying user or project MCP files. For local HTTP servers such as Paseo's own `/mcp/agents` endpoint, explicitly disable adapter OAuth (`auth: false`, `oauth: false`) in the generated config.
 
 Pi import discovery reads Pi's persisted JSONL session files because Pi RPC does not expose a recent-session listing command. Resume and full history hydration still go through `pi --mode rpc` using the session file as `nativeHandle`.

docs/testing.md

@@ -115,6 +115,8 @@ App-level Playwright browser E2E lives in `packages/app/e2e/*.spec.ts` and runs
 
 Live provider smoke tests belong in `*.real.e2e.test.ts`, not `*.test.ts`, even when guarded by environment variables. Default unit suites must use deterministic provider adapters/fakes so missing credits, auth outages, and upstream model drift do not block normal CI.
 
+Codex MultiAgentV2 real tests use local Codex authentication rather than the OpenRouter-compatible test provider. OpenRouter does not accept Codex collaboration-history items on the parent follow-up request, so it cannot verify a complete native sub-agent turn.
+
 ### Test setup
 
 - Server: `packages/server/src/test-utils/vitest-setup.ts` loads `.env.test`, sets `PASEO_SUPERVISED=0`, and disables Git/SSH prompts. Add new global env shims here, not in individual tests.

nix/npm-deps.hash

@@ -1 +1 @@
-sha256-s4AXc/WKI2p5CdIJJMBmXiLoO4cNcT71GKfn8z9iknI=
+sha256-cU6qRXY9fnr80pllmqJts5w8+OiE6F99SRo2d9G0HDA=

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "paseo",
-  "version": "0.1.104-beta.4",
+  "version": "0.1.105",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "paseo",
-      "version": "0.1.104-beta.4",
+      "version": "0.1.105",
       "hasInstallScript": true,
       "license": "AGPL-3.0-or-later",
       "workspaces": [
@@ -35152,7 +35152,7 @@
     },
     "packages/app": {
       "name": "@getpaseo/app",
-      "version": "0.1.104-beta.4",
+      "version": "0.1.105",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
@@ -36170,12 +36170,12 @@
     },
     "packages/cli": {
       "name": "@getpaseo/cli",
-      "version": "0.1.104-beta.4",
+      "version": "0.1.105",
       "dependencies": {
         "@clack/prompts": "^1.0.0",
-        "@getpaseo/client": "0.1.104-beta.4",
-        "@getpaseo/protocol": "0.1.104-beta.4",
-        "@getpaseo/server": "0.1.104-beta.4",
+        "@getpaseo/client": "0.1.105",
+        "@getpaseo/protocol": "0.1.105",
+        "@getpaseo/server": "0.1.105",
         "chalk": "^5.3.0",
         "commander": "^12.0.0",
         "mime-types": "^2.1.35",
@@ -36421,10 +36421,10 @@
     },
     "packages/client": {
       "name": "@getpaseo/client",
-      "version": "0.1.104-beta.4",
+      "version": "0.1.105",
       "dependencies": {
-        "@getpaseo/protocol": "0.1.104-beta.4",
-        "@getpaseo/relay": "0.1.104-beta.4",
+        "@getpaseo/protocol": "0.1.105",
+        "@getpaseo/relay": "0.1.105",
         "zod": "^4.4.3"
       },
       "devDependencies": {
@@ -36435,7 +36435,7 @@
     },
     "packages/desktop": {
       "name": "@getpaseo/desktop",
-      "version": "0.1.104-beta.4",
+      "version": "0.1.105",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@getpaseo/cli": "*",
@@ -36678,7 +36678,7 @@
     },
     "packages/expo-two-way-audio": {
       "name": "@getpaseo/expo-two-way-audio",
-      "version": "0.1.104-beta.4",
+      "version": "0.1.105",
       "license": "MIT",
       "devDependencies": {
         "@types/jest": "^29.5.14",
@@ -37574,7 +37574,7 @@
     },
     "packages/highlight": {
       "name": "@getpaseo/highlight",
-      "version": "0.1.104-beta.4",
+      "version": "0.1.105",
       "dependencies": {
         "@codemirror/language": "^6.12.3",
         "@codemirror/legacy-modes": "^6.5.3",
@@ -37806,7 +37806,7 @@
     },
     "packages/protocol": {
       "name": "@getpaseo/protocol",
-      "version": "0.1.104-beta.4",
+      "version": "0.1.105",
       "dependencies": {
         "zod": "^4.4.3"
       },
@@ -37819,7 +37819,7 @@
     },
     "packages/relay": {
       "name": "@getpaseo/relay",
-      "version": "0.1.104-beta.4",
+      "version": "0.1.105",
       "dependencies": {
         "base64-js": "^1.5.1",
         "tweetnacl": "^1.0.3",
@@ -38037,15 +38037,15 @@
     },
     "packages/server": {
       "name": "@getpaseo/server",
-      "version": "0.1.104-beta.4",
+      "version": "0.1.105",
       "dependencies": {
         "@agentclientprotocol/sdk": "^0.17.1",
         "@anthropic-ai/claude-agent-sdk": "^0.3.195",
         "@anthropic-ai/sdk": "^0.104.2",
-        "@getpaseo/client": "0.1.104-beta.4",
-        "@getpaseo/highlight": "0.1.104-beta.4",
-        "@getpaseo/protocol": "0.1.104-beta.4",
-        "@getpaseo/relay": "0.1.104-beta.4",
+        "@getpaseo/client": "0.1.105",
+        "@getpaseo/highlight": "0.1.105",
+        "@getpaseo/protocol": "0.1.105",
+        "@getpaseo/relay": "0.1.105",
         "@isaacs/ttlcache": "^2.1.4",
         "@modelcontextprotocol/sdk": "^1.20.1",
         "@opencode-ai/sdk": "1.14.46",
@@ -38582,7 +38582,7 @@
     },
     "packages/website": {
       "name": "@getpaseo/website",
-      "version": "0.1.104-beta.4",
+      "version": "0.1.105",
       "dependencies": {
         "@cloudflare/vite-plugin": "^1.29.1",
         "@cloudflare/workers-types": "^4.20260317.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paseo",
-  "version": "0.1.104-beta.4",
+  "version": "0.1.105",
   "private": true,
   "description": "Paseo: voice-controlled development environment for local AI coding agents",
   "keywords": [

packages/app/e2e/diff-row-alignment.spec.ts

@@ -218,6 +218,38 @@ test("changes diff keeps code rows aligned with the gutter", async ({ page }) =>
   });
 });
 
+test("changes diff switches between flat and tree file lists", async ({ page }) => {
+  const workspace = await createWorkspaceWithMountedTabDiff();
+  await useUnwrappedDiffLines(page);
+  await openWorkspaceChanges(page, workspace);
+
+  await expectFlatFileList(page);
+  await expect(page.getByTestId("changes-toggle-layout")).toBeVisible();
+  await expect(page.getByTestId("changes-layout-unified")).toHaveCount(0);
+  await expect(page.getByTestId("changes-layout-split")).toHaveCount(0);
+
+  await page.getByTestId("changes-options-menu").click();
+  await expect(page.getByTestId("changes-options-menu-content")).toBeVisible();
+  await expect(page.getByTestId("changes-toggle-whitespace")).toContainText("Hide whitespace");
+  await expect(page.getByTestId("changes-toggle-wrap-lines")).toContainText("Wrap long lines");
+  await expect(page.getByTestId("changes-refresh")).toContainText("Refresh");
+  await page.getByTestId("changes-toggle-whitespace").click();
+  await page.getByTestId("changes-options-menu").click();
+  await expect(page.getByTestId("changes-toggle-whitespace")).toContainText("Show whitespace");
+  await page.keyboard.press("Escape");
+
+  await scrollToLowerUnwrappedDiffRows(page);
+  await page.getByTestId("changes-toggle-view-mode").click();
+  await expect(page.getByTestId("diff-folder-src")).toBeVisible();
+  await expect(page.getByTestId("diff-file-0")).toBeVisible();
+
+  await page.getByTestId("diff-folder-src-toggle").click();
+  await expect(page.getByTestId("diff-file-0")).toHaveCount(0);
+
+  await page.getByTestId("changes-toggle-view-mode").click();
+  await expectFlatFileList(page);
+});
+
 test("changes diff keeps unwrapped gutter and code rows aligned after code size changes", async ({
   page,
 }) => {
@@ -266,13 +298,24 @@ async function useUnwrappedDiffLines(page: Page): Promise<void> {
     ({ preferencesKey }) => {
       localStorage.setItem(
         preferencesKey,
-        JSON.stringify({ layout: "unified", wrapLines: false, hideWhitespace: false }),
+        JSON.stringify({
+          layout: "unified",
+          viewMode: "flat",
+          wrapLines: false,
+          hideWhitespace: false,
+        }),
       );
     },
     { preferencesKey: CHANGES_PREFERENCES_KEY },
   );
 }
 
+async function expectFlatFileList(page: Page): Promise<void> {
+  await expect(page.locator('[data-testid^="diff-folder-"]')).toHaveCount(0);
+  await expect(page.getByTestId("diff-file-0")).toContainText("use-mounted-tab-set.ts");
+  await expect(page.getByTestId("diff-file-0")).toContainText("src");
+}
+
 async function expectDiffCodeFontSize(page: Page, fontSize: number): Promise<void> {
   await expect
     .poll(async () => {

packages/app/e2e/empty-project-persists.spec.ts

@@ -1,6 +1,7 @@
 import path from "node:path";
 import { test, expect, type Page } from "./fixtures";
 import { gotoAppShell } from "./helpers/app";
+import { expectOpenedProject } from "./helpers/project-picker-ui";
 import { connectSeedClient, seedWorkspace } from "./helpers/seed-client";
 import { getServerId } from "./helpers/server-id";
 import { createTempGitRepo } from "./helpers/workspace";
@@ -50,7 +51,7 @@ async function removeProjectFromSidebar(page: Page, projectId: string): Promise<
 async function addProjectFromPicker(page: Page, projectPath: string): Promise<string> {
   await page.getByTestId("sidebar-add-project").click();
 
-  const input = page.getByPlaceholder("Type a directory path...");
+  const input = page.getByTestId("project-picker-input");
   await expect(input).toBeVisible({ timeout: 30_000 });
   await input.fill(projectPath);
   await page.keyboard.press("Enter");
@@ -74,6 +75,26 @@ async function waitForSidebarProjectListReady(page: Page): Promise<void> {
 }
 
 test.describe("Project picker search", () => {
+  test("opens a project from a fuzzy directory-name search", async ({
+    page,
+    projectPickerFixture,
+  }) => {
+    await gotoAppShell(page);
+    await waitForSidebarProjectListReady(page);
+    await page.getByTestId("sidebar-add-project").click();
+
+    const input = page.getByTestId("project-picker-input");
+    await expect(input).toBeVisible({ timeout: 30_000 });
+    await input.fill(projectPickerFixture.fuzzyQuery);
+
+    const suggestion = page.getByText(projectPickerFixture.projectName, { exact: false }).first();
+    await expect(suggestion).toBeVisible({ timeout: 30_000 });
+    await suggestion.click();
+
+    const projectId = await expectOpenedProject(page, projectPickerFixture.projectName);
+    projectPickerFixture.rememberProjectId(projectId);
+  });
+
   test("shows a loading state after typing while directory suggestions are pending", async ({
     page,
   }) => {
@@ -81,7 +102,7 @@ test.describe("Project picker search", () => {
     await waitForSidebarProjectListReady(page);
     await page.getByTestId("sidebar-add-project").click();
 
-    const input = page.getByPlaceholder("Type a directory path...");
+    const input = page.getByTestId("project-picker-input");
     await expect(input).toBeVisible({ timeout: 30_000 });
     await input.fill("paseo-loading-state-no-match");
 

packages/app/e2e/fixtures.ts

@@ -1,14 +1,30 @@
 import { test as base, expect, type Page } from "@playwright/test";
 import { getE2EDaemonPort } from "./helpers/daemon-port";
 import { buildCreateAgentPreferences, buildSeededHost } from "./helpers/daemon-registry";
+import {
+  createProjectPickerFixture,
+  removeProjectPickerFixture,
+  type ProjectPickerFixture,
+} from "./helpers/project-picker-fixture";
+import { connectSeedClient } from "./helpers/seed-client";
 import { createWithWorkspace, type WithWorkspace } from "./helpers/with-workspace";
 
+const EXTRA_HOSTS_KEY = "@paseo:e2e-extra-hosts";
+
+interface TrackedProjectPickerFixture extends ProjectPickerFixture {
+  rememberProjectId: (projectId: string) => void;
+}
+
 // Test setup is wired through an `auto: true` fixture rather than `test.beforeEach`.
 // `test.beforeEach` declared at the top level of a non-test fixture file is unreliable
 // across spec-file boundaries — Playwright sometimes skips it for the first test of a
 // subsequent spec when multiple specs run in the same worker. Auto fixtures run
 // reliably for every test that uses this `test` object.
-const test = base.extend<{ paseoE2ESetup: void; withWorkspace: WithWorkspace }>({
+const test = base.extend<{
+  paseoE2ESetup: void;
+  projectPickerFixture: TrackedProjectPickerFixture;
+  withWorkspace: WithWorkspace;
+}>({
   baseURL: async ({}, provide) => {
     const metroPort = process.env.E2E_METRO_PORT;
     if (!metroPort) {
@@ -57,7 +73,7 @@ const test = base.extend<{ paseoE2ESetup: void; withWorkspace: WithWorkspace }>(
       const createAgentPreferences = buildCreateAgentPreferences(testDaemon.serverId);
 
       await page.addInitScript(
-        ({ daemon, preferences, seedNonce: nonce }) => {
+        ({ daemon, preferences, seedNonce: nonce, extraHostsKey }) => {
           // `addInitScript` runs on every navigation (including reloads). Some tests intentionally
           // override storage and reload; they can opt out of seeding for the *next* navigation by
           // setting this flag before the reload.
@@ -73,12 +89,20 @@ const test = base.extend<{ paseoE2ESetup: void; withWorkspace: WithWorkspace }>(
           localStorage.setItem("@paseo:e2e", "1");
           localStorage.setItem("@paseo:e2e-seed-nonce", nonce);
 
+          const rawExtraHosts = localStorage.getItem(extraHostsKey);
+          const extraHosts = rawExtraHosts ? JSON.parse(rawExtraHosts) : [];
+
           // Hard-reset anything that could point to a developer's real daemon.
-          localStorage.setItem("@paseo:daemon-registry", JSON.stringify([daemon]));
+          localStorage.setItem("@paseo:daemon-registry", JSON.stringify([daemon, ...extraHosts]));
           localStorage.removeItem("@paseo:settings");
           localStorage.setItem("@paseo:create-agent-preferences", JSON.stringify(preferences));
         },
-        { daemon: testDaemon, preferences: createAgentPreferences, seedNonce },
+        {
+          daemon: testDaemon,
+          preferences: createAgentPreferences,
+          seedNonce,
+          extraHostsKey: EXTRA_HOSTS_KEY,
+        },
       );
 
       await provide();
@@ -92,6 +116,30 @@ const test = base.extend<{ paseoE2ESetup: void; withWorkspace: WithWorkspace }>(
     },
     { auto: true },
   ],
+  projectPickerFixture: async ({}, provide) => {
+    const resource = await createProjectPickerFixture();
+    const { fixture } = resource;
+    let projectId: string | null = null;
+    try {
+      await provide({
+        ...fixture,
+        rememberProjectId: (openedProjectId) => {
+          projectId = openedProjectId;
+        },
+      });
+    } finally {
+      try {
+        const client = await connectSeedClient();
+        try {
+          await removeProjectPickerFixture(client, fixture, projectId);
+        } finally {
+          await client.close();
+        }
+      } finally {
+        await resource.removeDirectory();
+      }
+    }
+  },
   withWorkspace: async ({ page }, provide) => {
     const handle = createWithWorkspace(page);
     await provide(handle.withWorkspace);

packages/app/e2e/helpers/desktop-updates.ts

@@ -71,6 +71,7 @@ export interface DesktopBridgeConfig {
    * false so tests that only assert copy don't inadvertently trigger state changes.
    */
   confirmShouldAccept?: boolean;
+  dialogOpenResult?: string | string[] | null;
   editorTargets?: DesktopEditorTargetConfig[];
   editorRecordPath?: string;
 }
@@ -96,6 +97,7 @@ export interface ConfirmDialogCall {
 declare global {
   interface Window {
     __capturedDialogCall: ConfirmDialogCall | undefined;
+    __capturedDialogOpenCalls: Array<Record<string, unknown> | undefined>;
     __recordDesktopEditorOpen?: (input: DesktopEditorOpenRecord) => Promise<void>;
   }
 }
@@ -157,6 +159,7 @@ export async function injectDesktopBridge(page: Page, config: DesktopBridgeConfi
       invoke: (command: string, args?: Record<string, unknown>) => Promise<unknown>;
       dialog: {
         ask: (message: string, options?: Record<string, unknown>) => Promise<boolean>;
+        open: (options?: Record<string, unknown>) => Promise<string | string[] | null>;
       };
       getPendingOpenProject: () => Promise<string | null>;
       events: { on: () => Promise<() => void> };
@@ -249,6 +252,10 @@ export async function injectDesktopBridge(page: Page, config: DesktopBridgeConfi
           };
           return cfg.confirmShouldAccept ?? false;
         },
+        open: async (options?: Record<string, unknown>) => {
+          window.__capturedDialogOpenCalls.push(options);
+          return cfg.dialogOpenResult ?? null;
+        },
       },
       getPendingOpenProject: async () => null,
       events: { on: async () => () => undefined },
@@ -263,10 +270,18 @@ export async function injectDesktopBridge(page: Page, config: DesktopBridgeConfi
       };
     }
 
+    window.__capturedDialogOpenCalls = [];
     (window as unknown as { paseoDesktop: unknown }).paseoDesktop = desktopBridge;
   }, config);
 }
 
+export async function waitForDirectoryDialog(
+  page: Page,
+): Promise<Record<string, unknown> | undefined> {
+  await expect.poll(() => page.evaluate(() => window.__capturedDialogOpenCalls.length)).toBe(1);
+  return page.evaluate(() => window.__capturedDialogOpenCalls[0]);
+}
+
 export async function openDesktopSettings(page: Page, serverId: string): Promise<void> {
   await openSettings(page);
   await openSettingsHost(page, serverId);

packages/app/e2e/helpers/no-truncation.ts

@@ -0,0 +1,61 @@
+import { expect, type Locator } from "@playwright/test";
+
+interface TruncatedLabel {
+  text: string;
+  scrollWidth: number;
+  clientWidth: number;
+}
+
+export async function expectNoTruncation(locator: Locator): Promise<void> {
+  await expect(locator.first()).toBeVisible({ timeout: 30_000 });
+
+  const truncated = await locator.evaluateAll((elements): TruncatedLabel[] => {
+    function isVisible(element: HTMLElement): boolean {
+      const style = window.getComputedStyle(element);
+      const rect = element.getBoundingClientRect();
+      return (
+        style.display !== "none" &&
+        style.visibility !== "hidden" &&
+        rect.width > 0 &&
+        rect.height > 0
+      );
+    }
+
+    function directText(element: HTMLElement): string {
+      return Array.from(element.childNodes)
+        .filter((node) => node.nodeType === Node.TEXT_NODE)
+        .map((node) => node.textContent ?? "")
+        .join("")
+        .trim();
+    }
+
+    const checked = new Set<HTMLElement>();
+    const failures: TruncatedLabel[] = [];
+
+    for (const root of elements) {
+      if (!(root instanceof HTMLElement) || !isVisible(root)) continue;
+      const candidates = [root, ...Array.from(root.querySelectorAll<HTMLElement>("*"))];
+
+      for (const candidate of candidates) {
+        if (checked.has(candidate) || !isVisible(candidate) || candidate.clientWidth <= 0) {
+          continue;
+        }
+        checked.add(candidate);
+
+        const text = directText(candidate);
+        if (!text) continue;
+        if (candidate.scrollWidth <= candidate.clientWidth) continue;
+
+        failures.push({
+          text,
+          scrollWidth: candidate.scrollWidth,
+          clientWidth: candidate.clientWidth,
+        });
+      }
+    }
+
+    return failures;
+  });
+
+  expect(truncated, "option labels should not be horizontally truncated").toEqual([]);
+}

packages/app/e2e/helpers/project-picker-fixture.ts

@@ -0,0 +1,48 @@
+import { randomUUID } from "node:crypto";
+import { mkdir, mkdtemp, rm } from "node:fs/promises";
+import { homedir } from "node:os";
+import path from "node:path";
+import type { SeedDaemonClient } from "./seed-client";
+
+export interface ProjectPickerFixture {
+  projectPath: string;
+  projectName: string;
+  fuzzyQuery: string;
+}
+
+interface ProjectPickerFixtureResource {
+  fixture: ProjectPickerFixture;
+  removeDirectory: () => Promise<void>;
+}
+
+export async function createProjectPickerFixture(): Promise<ProjectPickerFixtureResource> {
+  const root = await mkdtemp(path.join(homedir(), "paseo-e2e-project-picker-"));
+  const nonce = randomUUID().replaceAll("-", "").slice(0, 8);
+  const projectPath = path.join(root, "client", "team", `paseo-desktop-fuzzy-target-${nonce}`);
+  await mkdir(projectPath, { recursive: true });
+
+  return {
+    fixture: {
+      projectPath,
+      projectName: path.basename(projectPath),
+      fuzzyQuery: `psodfzt${nonce}`,
+    },
+    removeDirectory: () => rm(root, { recursive: true, force: true }),
+  };
+}
+
+export async function removeProjectPickerFixture(
+  client: SeedDaemonClient,
+  fixture: ProjectPickerFixture,
+  knownProjectId: string | null = null,
+): Promise<void> {
+  let projectId = knownProjectId;
+  if (!projectId) {
+    const lookup = await client.addProject(fixture.projectPath);
+    projectId = lookup.project?.projectId ?? null;
+    if (!projectId) {
+      throw new Error(lookup.error ?? "Could not resolve project picker fixture for cleanup");
+    }
+  }
+  await client.removeProject(projectId);
+}

packages/app/e2e/helpers/project-picker-ui.ts

@@ -0,0 +1,13 @@
+import { expect, type Page } from "@playwright/test";
+
+export async function expectOpenedProject(page: Page, projectName: string): Promise<string> {
+  const projectRow = page
+    .locator('[data-testid^="sidebar-project-row-"]')
+    .filter({ hasText: projectName })
+    .first();
+  await expect(projectRow).toBeVisible({ timeout: 30_000 });
+
+  const testId = await projectRow.getAttribute("data-testid");
+  expect(testId).not.toBeNull();
+  return testId!.replace("sidebar-project-row-", "");
+}

packages/app/e2e/helpers/schedule-fake-host.ts

@@ -5,10 +5,10 @@ import { type SeededWorkspace } from "./seed-client";
 
 const REGISTRY_KEY = "@paseo:daemon-registry";
 const SEED_NONCE_KEY = "@paseo:e2e-seed-nonce";
-const DISABLE_DEFAULT_SEED_ONCE_KEY = "@paseo:e2e-disable-default-seed-once";
-const FAKE_HOST_MODEL_ID = "fake-host-model";
-const FAKE_HOST_MODEL_LABEL = "Fake host model";
-const FAKE_HOST_PROJECT_DISPLAY_NAME = "Fake host project";
+const EXTRA_HOSTS_KEY = "@paseo:e2e-extra-hosts";
+export const FAKE_HOST_MODEL_ID = "fake-host-model";
+export const FAKE_HOST_MODEL_LABEL = "Fake host model";
+export const FAKE_HOST_PROJECT_DISPLAY_NAME = "Fake host project";
 
 type WebSocketMessage = string | Buffer;
 type SessionRequest = Record<string, unknown> & { type?: string; requestId?: string };
@@ -20,6 +20,31 @@ export interface FakeScheduleHostWorkspace {
   workspace: Record<string, unknown>;
 }
 
+interface FakeScheduleSummary {
+  id: string;
+  name: string | null;
+  prompt: string;
+  cadence: { type: "cron"; expression: string };
+  target: {
+    type: "new-agent";
+    config: {
+      provider: "mock";
+      cwd: string;
+      model: string;
+      modeId: string;
+      title?: string;
+    };
+  };
+  status: "active";
+  createdAt: string;
+  updatedAt: string;
+  nextRunAt: string | null;
+  lastRunAt: string | null;
+  pausedAt: string | null;
+  expiresAt: string | null;
+  maxRuns: number | null;
+}
+
 function parseJson(message: WebSocketMessage): unknown {
   const raw = typeof message === "string" ? message : message.toString("utf8");
   try {
@@ -114,6 +139,7 @@ export async function installFakeScheduleHost(input: {
   port: string;
   serverId: string;
   workspace: Record<string, unknown>;
+  schedules?: FakeScheduleSummary[];
 }): Promise<void> {
   await input.page.routeWebSocket(wsRoutePatternForPort(input.port), (ws) => {
     ws.onMessage((message) => {
@@ -201,7 +227,7 @@ export async function installFakeScheduleHost(input: {
           ws.send(
             buildSessionMessage("schedule/list/response", {
               requestId,
-              schedules: [],
+              schedules: input.schedules ?? [],
               error: null,
             }),
           );
@@ -232,15 +258,24 @@ export async function addFakeScheduleHostAndReload(input: {
       }
       const raw = localStorage.getItem(keys.registry);
       const registry: Array<{ serverId: string }> = raw ? JSON.parse(raw) : [];
-      localStorage.setItem(keys.registry, JSON.stringify([...registry, seededHost]));
-      localStorage.setItem(keys.disableSeedOnce, nonce);
+      const nextRegistry = registry.filter((entry) => entry.serverId !== seededHost.serverId);
+      nextRegistry.push(seededHost);
+      localStorage.setItem(keys.registry, JSON.stringify(nextRegistry));
+
+      const rawExtraHosts = localStorage.getItem(keys.extraHosts);
+      const extraHosts: Array<{ serverId: string }> = rawExtraHosts
+        ? JSON.parse(rawExtraHosts)
+        : [];
+      const nextExtraHosts = extraHosts.filter((entry) => entry.serverId !== seededHost.serverId);
+      nextExtraHosts.push(seededHost);
+      localStorage.setItem(keys.extraHosts, JSON.stringify(nextExtraHosts));
     },
     {
       seededHost: host,
       keys: {
         registry: REGISTRY_KEY,
         nonce: SEED_NONCE_KEY,
-        disableSeedOnce: DISABLE_DEFAULT_SEED_ONCE_KEY,
+        extraHosts: EXTRA_HOSTS_KEY,
       },
     },
   );

packages/app/e2e/helpers/settings.ts

@@ -371,6 +371,7 @@ export async function expectRetiredSidebarSectionsAbsent(page: Page): Promise<vo
   await expect(sidebar.getByRole("button", { name: "General", exact: true })).toBeVisible();
   await expect(sidebar.getByRole("button", { name: "Diagnostics", exact: true })).toBeVisible();
   await expect(sidebar.getByRole("button", { name: "About", exact: true })).toBeVisible();
+  await expect(sidebar.getByRole("button", { name: "Daemon", exact: true })).toHaveCount(0);
 
   // Host group rows are now flat top-level sections (no drill-in).
   await expect(sidebar.getByTestId("settings-host-section-connections")).toBeVisible();

packages/app/e2e/helpers/settled.ts

@@ -0,0 +1,86 @@
+import { expect, type Locator } from "@playwright/test";
+
+interface SettledOptions {
+  timeout?: number;
+  durationMs?: number;
+  intervalMs?: number;
+  heightTolerance?: number;
+}
+
+interface Sample {
+  text: string;
+  height: number;
+}
+
+const DEFAULT_DURATION_MS = 1_500;
+const DEFAULT_INTERVAL_MS = 100;
+const DEFAULT_HEIGHT_TOLERANCE = 1;
+
+async function sample(locator: Locator): Promise<Sample> {
+  const [text, box] = await Promise.all([locator.textContent(), locator.boundingBox()]);
+  if (!box) {
+    throw new Error("Expected locator to keep a bounding box while sampling settledness.");
+  }
+  return { text: text ?? "", height: box.height };
+}
+
+async function collectSamples(locator: Locator, options?: SettledOptions): Promise<Sample[]> {
+  await expect(locator).toBeVisible({ timeout: options?.timeout ?? 30_000 });
+
+  const durationMs = options?.durationMs ?? DEFAULT_DURATION_MS;
+  const intervalMs = options?.intervalMs ?? DEFAULT_INTERVAL_MS;
+  const samples: Sample[] = [];
+  const deadline = Date.now() + durationMs;
+
+  while (Date.now() <= deadline || samples.length < 2) {
+    samples.push(await sample(locator));
+    await locator.page().waitForTimeout(intervalMs);
+  }
+
+  return samples;
+}
+
+function assertStableHeight(samples: Sample[], tolerance: number): void {
+  const heights = samples.map((entry) => entry.height);
+  const minHeight = Math.min(...heights);
+  const maxHeight = Math.max(...heights);
+  expect(maxHeight - minHeight, `height changed by more than ${tolerance}px`).toBeLessThanOrEqual(
+    tolerance,
+  );
+}
+
+function assertSettledText(samples: Sample[]): void {
+  let stableText: string | null = null;
+  let previousText: string | null = null;
+
+  for (const entry of samples) {
+    if (stableText !== null && entry.text !== stableText) {
+      throw new Error(
+        `Text changed after settling. Expected ${JSON.stringify(stableText)}, received ${JSON.stringify(entry.text)}.`,
+      );
+    }
+
+    if (previousText === entry.text) {
+      stableText = entry.text;
+    }
+    previousText = entry.text;
+  }
+
+  if (stableText === null) {
+    throw new Error("Text did not reach a stable value during the settledness window.");
+  }
+}
+
+export async function expectSettled(locator: Locator, options?: SettledOptions): Promise<void> {
+  const samples = await collectSamples(locator, options);
+  assertSettledText(samples);
+  assertStableHeight(samples, options?.heightTolerance ?? DEFAULT_HEIGHT_TOLERANCE);
+}
+
+export async function expectStableHeight(
+  locator: Locator,
+  options?: SettledOptions,
+): Promise<void> {
+  const samples = await collectSamples(locator, options);
+  assertStableHeight(samples, options?.heightTolerance ?? DEFAULT_HEIGHT_TOLERANCE);
+}

packages/app/e2e/new-workspace-codex-mode-preferences.spec.ts

@@ -7,6 +7,7 @@ import {
   selectNewWorkspaceProject,
   submitNewWorkspacePrompt,
 } from "./helpers/new-workspace";
+import { expectNoTruncation } from "./helpers/no-truncation";
 import { escapeRegex } from "./helpers/regex";
 import { seedWorkspace } from "./helpers/seed-client";
 import { getServerId } from "./helpers/server-id";
@@ -91,6 +92,10 @@ async function selectMode(page: Page, label: string): Promise<void> {
   await expect(modeControl).toBeVisible({ timeout: 30_000 });
   await modeControl.click();
 
+  const popup = page.getByTestId("combobox-desktop-container").last();
+  await expect(popup).toBeVisible({ timeout: 10_000 });
+  await expectNoTruncation(popup);
+
   const searchInput = page.getByRole("textbox", { name: /search mode/i });
   await expect(searchInput).toBeVisible({ timeout: 10_000 });
   await searchInput.fill(label);
@@ -105,6 +110,19 @@ async function selectMode(page: Page, label: string): Promise<void> {
   await expect(searchInput).not.toBeVisible({ timeout: 5_000 });
 }
 
+async function expectThinkingOptionsFit(page: Page): Promise<void> {
+  const thinkingControl = page.getByTestId("agent-thinking-selector").first();
+  await expect(thinkingControl).toBeVisible({ timeout: 30_000 });
+  await thinkingControl.click();
+
+  const popup = page.getByTestId("combobox-desktop-container").last();
+  await expect(popup).toBeVisible({ timeout: 10_000 });
+  await expectNoTruncation(popup);
+
+  await page.keyboard.press("Escape");
+  await expect(page.getByTestId("combobox-desktop-container")).toHaveCount(0, { timeout: 5_000 });
+}
+
 async function recordAndBlockCreateAgentRequests(page: Page): Promise<{
   waitForCreateAgentRequest(): Promise<CreateAgentRequestMessage>;
 }> {
@@ -158,6 +176,7 @@ test.describe("New workspace Codex mode preferences", () => {
       await expect(page.getByTestId("mode-control").first()).toContainText("Default permissions", {
         timeout: 30_000,
       });
+      await expectThinkingOptionsFit(page);
       await selectMode(page, "Full access");
       await expect(page.getByTestId("mode-control").first()).toContainText("Full access");
 

packages/app/e2e/new-workspace-isolation-memory.spec.ts

@@ -10,8 +10,8 @@ import {
   openProjectViaDaemon,
   openStartingRefPicker,
   selectBranchInPicker,
-  selectWorkspaceIsolation,
 } from "./helpers/new-workspace";
+import { expectNoTruncation } from "./helpers/no-truncation";
 import { createTempGitRepo } from "./helpers/workspace";
 import { getServerId } from "./helpers/server-id";
 import { waitForSidebarHydration } from "./helpers/workspace-ui";
@@ -63,7 +63,11 @@ test.describe("New workspace isolation memory", () => {
         projectDisplayName: openedProject.projectDisplayName,
       });
       await expectWorkspaceIsolationSelected(page, "local");
-      await selectWorkspaceIsolation(page, "worktree");
+      await page.getByTestId("workspace-create-isolation-trigger").click();
+      const isolationPopup = page.getByTestId("combobox-desktop-container").last();
+      await expect(isolationPopup).toBeVisible({ timeout: 30_000 });
+      await expectNoTruncation(isolationPopup);
+      await page.getByTestId("workspace-create-isolation-worktree").click();
       await expectWorkspaceIsolationSelected(page, "worktree");
 
       await openStartingRefPicker(page);

packages/app/e2e/project-picker-desktop.spec.ts

@@ -0,0 +1,60 @@
+import { test, expect } from "./fixtures";
+import { gotoAppShell } from "./helpers/app";
+import { injectDesktopBridge, waitForDirectoryDialog } from "./helpers/desktop-updates";
+import { expectOpenedProject } from "./helpers/project-picker-ui";
+import { getServerId } from "./helpers/server-id";
+
+test.skip(process.env.E2E_DESKTOP_RUNTIME !== "1", "requires Metro's Electron platform overlay");
+
+test("Browse opens the folder selected by the desktop dialog", async ({
+  page,
+  projectPickerFixture,
+}) => {
+  await injectDesktopBridge(page, {
+    serverId: getServerId(),
+    manageBuiltInDaemon: false,
+    dialogOpenResult: projectPickerFixture.projectPath,
+  });
+  await gotoAppShell(page);
+
+  await page.getByTestId("sidebar-add-project").click();
+  const browse = page.getByRole("button", { name: "Browse…" });
+  await expect(browse).toBeVisible({ timeout: 30_000 });
+  await browse.click();
+
+  const projectId = await expectOpenedProject(page, projectPickerFixture.projectName);
+  projectPickerFixture.rememberProjectId(projectId);
+});
+
+test("Browse owns Enter without opening the active typed path", async ({
+  page,
+  projectPickerFixture,
+}) => {
+  await injectDesktopBridge(page, {
+    serverId: getServerId(),
+    manageBuiltInDaemon: false,
+    dialogOpenResult: null,
+  });
+  await gotoAppShell(page);
+
+  await page.getByTestId("sidebar-add-project").click();
+  const input = page.getByTestId("project-picker-input");
+  await expect(input).toBeVisible({ timeout: 30_000 });
+  await input.fill(projectPickerFixture.projectPath);
+
+  const browse = page.getByRole("button", { name: "Browse…" });
+  await expect(browse).toBeVisible({ timeout: 30_000 });
+  await browse.press("Enter");
+
+  const dialogOptions = await waitForDirectoryDialog(page);
+  expect(dialogOptions).toEqual({
+    directory: true,
+    multiple: false,
+  });
+  await expect(input).toBeVisible();
+  await expect(
+    page
+      .locator('[data-testid^="sidebar-project-row-"]')
+      .filter({ hasText: projectPickerFixture.projectName }),
+  ).toHaveCount(0);
+});

packages/app/e2e/projects-settings.spec.ts

@@ -136,7 +136,7 @@ async function readProjectConfigFile(project: ProjectsSettingsProject): Promise<
 async function addProjectFromSidebar(page: Page, projectPath: string): Promise<string> {
   await page.getByTestId("sidebar-add-project").click();
 
-  const input = page.getByPlaceholder("Type a directory path...");
+  const input = page.getByTestId("project-picker-input");
   await expect(input).toBeVisible({ timeout: 30_000 });
   await input.fill(projectPath);
   await page.keyboard.press("Enter");

packages/app/e2e/schedules-edit-model-hydration.spec.ts

@@ -1,5 +1,15 @@
 import { expect, test } from "./fixtures";
+import { gotoAppShell } from "./helpers/app";
+import {
+  addFakeScheduleHostAndReload,
+  buildFakeScheduleHostWorkspace,
+  FAKE_HOST_MODEL_ID,
+  FAKE_HOST_MODEL_LABEL,
+  installFakeScheduleHost,
+} from "./helpers/schedule-fake-host";
 import { seedWorkspace, type SeededWorkspace } from "./helpers/seed-client";
+import { expectSettled, expectStableHeight } from "./helpers/settled";
+import { waitForSidebarHydration } from "./helpers/workspace-ui";
 import { buildSchedulesRoute } from "../src/utils/host-routes";
 
 interface ScheduleSeedClient {
@@ -56,6 +66,42 @@ async function deleteSeededSchedule(workspace: SeededWorkspace, id: string): Pro
     .catch(ignoreScheduleDeleteError);
 }
 
+type FakeScheduleHostSchedule = NonNullable<
+  Parameters<typeof installFakeScheduleHost>[0]["schedules"]
+>[number];
+
+function buildFakeHostSchedule(input: {
+  id: string;
+  name: string;
+  cwd: string;
+}): FakeScheduleHostSchedule {
+  const now = "2026-07-01T00:00:00.000Z";
+  return {
+    id: input.id,
+    name: input.name,
+    prompt: "Run on the secondary host.",
+    cadence: { type: "cron", expression: "0 9 * * *" },
+    target: {
+      type: "new-agent",
+      config: {
+        provider: "mock",
+        cwd: input.cwd,
+        model: FAKE_HOST_MODEL_ID,
+        modeId: "load-test",
+        title: input.name,
+      },
+    },
+    status: "active",
+    createdAt: now,
+    updatedAt: now,
+    nextRunAt: now,
+    lastRunAt: null,
+    pausedAt: null,
+    expiresAt: null,
+    maxRuns: null,
+  };
+}
+
 test.describe("Schedules", () => {
   const cleanupTasks: Array<() => Promise<void>> = [];
 
@@ -79,14 +125,114 @@ test.describe("Schedules", () => {
     await expect(row).toContainText(workspace.projectDisplayName, { timeout: 30_000 });
 
     await row.click();
-    await expect(page.getByTestId("schedule-form-sheet")).toBeVisible({ timeout: 10_000 });
-    await expect(page.getByTestId("schedule-cwd-trigger")).toHaveCount(0);
-    await expect(page.getByTestId("schedule-project-trigger")).toContainText(
-      workspace.projectDisplayName,
-      { timeout: 30_000 },
-    );
-    await expect(page.getByTestId("schedule-model-trigger")).toContainText("Ten second stream", {
-      timeout: 30_000,
+    const formSheet = page.getByTestId("schedule-form-sheet");
+    await expect(formSheet).toBeVisible({ timeout: 10_000 });
+    await expectStableHeight(formSheet);
+    const hostTrigger = page.getByTestId("schedule-host-trigger");
+    const projectTrigger = page.getByTestId("schedule-project-trigger");
+    const modelTrigger = page.getByTestId("schedule-model-trigger");
+    const thinkingTrigger = page.getByTestId("schedule-thinking-trigger");
+    const modeTrigger = page.getByTestId("schedule-mode-trigger");
+    await expect(hostTrigger).toBeVisible({ timeout: 30_000 });
+    await expect(hostTrigger).toBeDisabled();
+    await expectSettled(hostTrigger);
+    await expect(projectTrigger).toContainText(workspace.projectDisplayName, { timeout: 30_000 });
+    await expectSettled(projectTrigger);
+    await expect(modelTrigger).toContainText("Ten second stream", { timeout: 30_000 });
+    await expectSettled(modelTrigger);
+    await expect(thinkingTrigger).toHaveCount(0);
+    await expect(modeTrigger).toBeVisible({ timeout: 30_000 });
+    await expectSettled(modeTrigger);
+    await expect(page.getByTestId("cadence-mode")).toHaveCount(0);
+    await expect(page.getByTestId("cadence-interval-value")).toHaveCount(0);
+    await expect(page.getByTestId("schedule-cadence-preset-trigger")).toContainText("Daily 9:00");
+    await expect(page.getByText(/Times are in/)).toHaveCount(0);
+    await expect(formSheet.getByText("Cron", { exact: true })).toHaveCount(0);
+  });
+
+  test("edit form hydrates a non-default host schedule after reload", async ({ page }) => {
+    const workspace = await seedWorkspace({ repoPrefix: "schedule-host-b-hydration-" });
+    cleanupTasks.push(() => workspace.cleanup());
+    const fakeHost = await buildFakeScheduleHostWorkspace(workspace);
+    const fakePort = String(59_000 + Math.floor(Math.random() * 900));
+    const scheduleId = "fake-host-schedule";
+    const scheduleName = "Secondary host schedule";
+
+    await installFakeScheduleHost({
+      page,
+      port: fakePort,
+      serverId: fakeHost.serverId,
+      workspace: fakeHost.workspace,
+      schedules: [
+        buildFakeHostSchedule({
+          id: scheduleId,
+          name: scheduleName,
+          cwd: String(fakeHost.workspace.workspaceDirectory),
+        }),
+      ],
     });
+
+    await gotoAppShell(page);
+    await waitForSidebarHydration(page);
+    await page.goto(buildSchedulesRoute());
+    await addFakeScheduleHostAndReload({
+      page,
+      serverId: fakeHost.serverId,
+      label: "Fake host",
+      port: fakePort,
+    });
+    await page.reload();
+
+    const row = page.getByTestId(`schedule-row-${scheduleId}`);
+    await expect(row).toBeVisible({ timeout: 30_000 });
+    await row.click();
+
+    const formSheet = page.getByTestId("schedule-form-sheet");
+    await expect(formSheet).toBeVisible({ timeout: 10_000 });
+    await expectStableHeight(formSheet);
+    const hostTrigger = page.getByTestId("schedule-host-trigger");
+    const projectTrigger = page.getByTestId("schedule-project-trigger");
+    const modelTrigger = page.getByTestId("schedule-model-trigger");
+    const modeTrigger = page.getByTestId("schedule-mode-trigger");
+
+    await expect(hostTrigger).toContainText("Fake host", { timeout: 30_000 });
+    await expect(hostTrigger).toBeDisabled();
+    await expectSettled(hostTrigger);
+    await expect(projectTrigger).toContainText(fakeHost.projectDisplayName, { timeout: 30_000 });
+    await expectSettled(projectTrigger);
+    await expect(modelTrigger).toContainText(FAKE_HOST_MODEL_LABEL, { timeout: 30_000 });
+    await expectSettled(modelTrigger);
+    await expect(modeTrigger).toContainText("Load test", { timeout: 30_000 });
+    await expectSettled(modeTrigger);
+    await expect(page.getByTestId("cadence-mode")).toHaveCount(0);
+    await expect(page.getByTestId("schedule-cadence-preset-trigger")).toContainText("Daily 9:00");
+  });
+
+  test("create opens pristine after closing an edit form", async ({ page }) => {
+    const workspace = await seedWorkspace({ repoPrefix: "schedule-pristine-create-" });
+    cleanupTasks.push(() => workspace.cleanup());
+    const scheduleName = `Pristine create ${Date.now()}`;
+    const scheduleId = await seedMockSchedule(workspace, scheduleName);
+    cleanupTasks.push(() => deleteSeededSchedule(workspace, scheduleId));
+
+    await page.goto(buildSchedulesRoute());
+    const row = page.getByTestId(`schedule-row-${scheduleId}`);
+    await expect(row).toBeVisible({ timeout: 30_000 });
+    await row.click();
+    const formSheet = page.getByTestId("schedule-form-sheet");
+    await expect(formSheet).toBeVisible({ timeout: 10_000 });
+    await expectStableHeight(formSheet);
+    await page.getByRole("button", { name: "Cancel" }).click();
+    await expect(formSheet).toHaveCount(0, { timeout: 30_000 });
+
+    await page.getByTestId("schedules-new").click();
+    await expect(formSheet).toBeVisible({ timeout: 10_000 });
+    const projectTrigger = page.getByTestId("schedule-project-trigger");
+    await expect(projectTrigger).toContainText(/select project/i);
+    await expectSettled(projectTrigger);
+    await expect(page.getByTestId("schedule-model-trigger")).toHaveCount(0);
+    await expect(page.getByTestId("schedule-thinking-trigger")).toHaveCount(0);
+    await expect(page.getByTestId("schedule-mode-trigger")).toHaveCount(0);
+    await expect(page.getByTestId("cadence-interval-value")).toHaveCount(0);
   });
 });

packages/app/e2e/schedules-project-target.spec.ts

@@ -6,13 +6,27 @@ import {
   installFakeScheduleHost,
 } from "./helpers/schedule-fake-host";
 import { seedWorkspace, type SeededWorkspace } from "./helpers/seed-client";
+import { getServerId } from "./helpers/server-id";
+import { escapeRegex } from "./helpers/regex";
+import { expectNoTruncation } from "./helpers/no-truncation";
+import { expectSettled, expectStableHeight } from "./helpers/settled";
 import { waitForSidebarHydration } from "./helpers/workspace-ui";
 import { buildSchedulesRoute } from "../src/utils/host-routes";
 
+const MOBILE_SHEET_VIEWPORT = { width: 390, height: 844 };
+
 interface ScheduleListItem {
   id: string;
   name: string | null;
-  target: { type: string; config?: { cwd?: string } };
+  cadence?: { type: "cron"; expression: string };
+  target: {
+    type: string;
+    config?: {
+      cwd?: string;
+      archiveOnFinish?: boolean;
+      isolation?: "local" | "worktree";
+    };
+  };
 }
 
 interface ScheduleSeedClient {
@@ -24,7 +38,12 @@ async function selectModelByLabel(page: Page, label: string): Promise<void> {
   await page.getByRole("button", { name: /select model/i }).click();
   const popup = page.getByTestId("combobox-desktop-container");
   await expect(popup).toBeVisible({ timeout: 30_000 });
-  await popup.getByText(label, { exact: true }).click();
+  const searchInput = page.getByTestId("model-search-input").first();
+  await expect(searchInput).toBeVisible({ timeout: 30_000 });
+  await searchInput.fill(label);
+  const option = popup.getByText(new RegExp(`^${escapeRegex(label)}$`, "i")).first();
+  await expect(option).toBeVisible({ timeout: 30_000 });
+  await option.click();
   await expect(popup).toHaveCount(0, { timeout: 30_000 });
 }
 
@@ -40,6 +59,33 @@ async function deleteScheduleByName(workspace: SeededWorkspace, name: string): P
 async function expectScheduleCreatedForProject(input: {
   workspace: SeededWorkspace;
   name: string;
+  cadenceExpression: string;
+}): Promise<void> {
+  const client = input.workspace.client as unknown as ScheduleSeedClient;
+  const list = await client.scheduleList();
+  const schedule = list.schedules.find((candidate) => candidate.name === input.name);
+  expect(schedule).toEqual(
+    expect.objectContaining({
+      name: input.name,
+      cadence: expect.objectContaining({
+        type: "cron",
+        expression: input.cadenceExpression,
+      }),
+      target: expect.objectContaining({
+        type: "new-agent",
+        config: expect.objectContaining({
+          cwd: input.workspace.repoPath,
+        }),
+      }),
+    }),
+  );
+}
+
+async function expectScheduleKnobs(input: {
+  workspace: SeededWorkspace;
+  name: string;
+  archiveOnFinish: boolean;
+  isolation: "local" | "worktree";
 }): Promise<void> {
   const client = input.workspace.client as unknown as ScheduleSeedClient;
   const list = await client.scheduleList();
@@ -50,13 +96,54 @@ async function expectScheduleCreatedForProject(input: {
       target: expect.objectContaining({
         type: "new-agent",
         config: expect.objectContaining({
-          cwd: input.workspace.repoPath,
+          archiveOnFinish: input.archiveOnFinish,
+          isolation: input.isolation,
         }),
       }),
     }),
   );
 }
 
+async function openNewScheduleSheet(page: Page): Promise<void> {
+  await page.getByTestId("schedules-empty-new").click();
+  const formSheet = page.getByTestId("schedule-form-sheet");
+  await expect(formSheet).toBeVisible({ timeout: 10_000 });
+  await expectStableHeight(formSheet);
+}
+
+function bottomSheetBackdrop(page: Page) {
+  return page.getByRole("button", { name: "Bottom sheet backdrop" }).first();
+}
+
+async function dismissScheduleSheetWithBackdrop(page: Page): Promise<void> {
+  const backdrop = bottomSheetBackdrop(page);
+  await expect(backdrop).toBeVisible({ timeout: 10_000 });
+  await expect(async () => {
+    const box = await backdrop.boundingBox();
+    if (box) {
+      await page.mouse.click(box.x + box.width / 2, box.y + 24);
+    }
+    await expect(backdrop).not.toBeVisible({ timeout: 1_000 });
+  }).toPass({ timeout: 15_000 });
+}
+
+async function expectScheduleSheetClosedAndStable(page: Page): Promise<void> {
+  const formSheet = page.getByTestId("schedule-form-sheet");
+  await expect(formSheet).toHaveCount(0, { timeout: 30_000 });
+  await page.waitForTimeout(500);
+  await expect(formSheet).toHaveCount(0, { timeout: 1_000 });
+}
+
+async function findScheduleIdByName(workspace: SeededWorkspace, name: string): Promise<string> {
+  const client = workspace.client as unknown as ScheduleSeedClient;
+  const list = await client.scheduleList();
+  const schedule = list.schedules.find((candidate) => candidate.name === name);
+  if (!schedule) {
+    throw new Error(`Expected schedule named ${name} to exist`);
+  }
+  return schedule.id;
+}
+
 test.describe("Schedules project target", () => {
   const cleanupTasks: Array<() => Promise<void>> = [];
 
@@ -67,10 +154,30 @@ test.describe("Schedules project target", () => {
     cleanupTasks.length = 0;
   });
 
+  test("dismisses the new schedule sheet without reopening", async ({ page }) => {
+    const workspace = await seedWorkspace({ repoPrefix: "schedule-sheet-dismiss-", git: false });
+    cleanupTasks.push(() => workspace.cleanup());
+
+    await gotoAppShell(page);
+    await waitForSidebarHydration(page);
+    await page.goto(buildSchedulesRoute());
+    await page.setViewportSize(MOBILE_SHEET_VIEWPORT);
+    await expect(page.getByTestId("schedules-empty-new")).toBeVisible({ timeout: 30_000 });
+
+    await openNewScheduleSheet(page);
+    await dismissScheduleSheetWithBackdrop(page);
+    await expectScheduleSheetClosedAndStable(page);
+    await expect(page.getByTestId("schedules-empty-new")).toBeVisible({ timeout: 30_000 });
+
+    await openNewScheduleSheet(page);
+    await page.getByRole("button", { name: "Cancel" }).click();
+    await expectScheduleSheetClosedAndStable(page);
+  });
+
   test("creates a schedule from a project picker instead of a raw CWD selector", async ({
     page,
   }) => {
-    const workspace = await seedWorkspace({ repoPrefix: "schedule-project-target-" });
+    const workspace = await seedWorkspace({ repoPrefix: "schedule-project-target-", git: false });
     cleanupTasks.push(() => workspace.cleanup());
     const scheduleName = `Project schedule ${Date.now()}`;
     cleanupTasks.push(() => deleteScheduleByName(workspace, scheduleName));
@@ -84,29 +191,84 @@ test.describe("Schedules project target", () => {
     await expect(page.getByTestId("schedules-empty")).toBeVisible();
 
     await page.getByTestId("schedules-empty-new").click();
-    await expect(page.getByTestId("schedule-form-sheet")).toBeVisible({ timeout: 10_000 });
-    await expect(page.getByTestId("schedule-cwd-trigger")).toHaveCount(0);
+    const formSheet = page.getByTestId("schedule-form-sheet");
+    await expect(formSheet).toBeVisible({ timeout: 10_000 });
+    await expectStableHeight(formSheet);
+    await expect(page.getByTestId("schedule-host-trigger")).toHaveCount(0);
+    await expect(page.getByTestId("schedule-project-trigger")).toBeVisible();
+    await expect(page.getByTestId("schedule-model-trigger")).toHaveCount(0);
+    await expect(page.getByTestId("schedule-thinking-trigger")).toHaveCount(0);
+    await expect(page.getByTestId("schedule-mode-trigger")).toHaveCount(0);
+    await expect(page.getByTestId("cadence-mode")).toHaveCount(0);
+    await expect(page.getByTestId("cadence-interval-value")).toHaveCount(0);
+    await expect(page.getByText(/Times are in/)).toHaveCount(0);
+    await expect(formSheet.getByText("Cron", { exact: true })).toHaveCount(0);
 
     await page.getByRole("button", { name: /select project/i }).click();
     await page.getByTestId(`schedule-project-option-${workspace.projectId}`).click();
-    await expect(page.getByRole("button", { name: /select project/i })).toContainText(
-      workspace.projectDisplayName,
+    const projectTrigger = page.getByTestId("schedule-project-trigger");
+    await expect(projectTrigger).toContainText(workspace.projectDisplayName);
+    await expectSettled(projectTrigger);
+
+    await selectModelByLabel(page, "Ten second stream");
+    const modelTrigger = page.getByTestId("schedule-model-trigger");
+    await expect(modelTrigger).toContainText("Ten second stream");
+    await expectSettled(modelTrigger);
+    await expect(page.getByTestId("schedule-thinking-trigger")).toHaveCount(0);
+    await expect(page.getByTestId("schedule-mode-trigger")).toBeVisible();
+    await expectSettled(page.getByTestId("schedule-mode-trigger"));
+    await expect(page.getByTestId("schedule-isolation-trigger")).toHaveCount(0);
+    await expect(page.getByText("Worktree isolation is available for git projects.")).toHaveCount(
+      0,
     );
 
+    await page.getByTestId("schedule-cadence-preset-trigger").click();
+    await page.getByTestId("schedule-cadence-preset-daily-9").click();
+    await expect(page.getByTestId("schedule-cadence-preset-trigger")).toContainText("Daily 9:00");
+    await expect(page.getByTestId("cadence-cron-expression")).toHaveValue("0 9 * * *");
+
     await page.getByLabel("Schedule name").fill(scheduleName);
     await page.getByLabel("Prompt").fill("Summarize the project status.");
-    await page.getByRole("button", { name: "Cron" }).click();
     await page.getByRole("button", { name: "Create schedule" }).click();
 
     await expect(page.getByTestId("schedule-form-sheet")).toHaveCount(0, { timeout: 30_000 });
-    await expectScheduleCreatedForProject({ workspace, name: scheduleName });
+    await expectScheduleCreatedForProject({
+      workspace,
+      name: scheduleName,
+      cadenceExpression: "0 9 * * *",
+    });
+
+    const fakeHost = await buildFakeScheduleHostWorkspace(workspace);
+    const fakePort = String(59_000 + Math.floor(Math.random() * 900));
+    await installFakeScheduleHost({
+      page,
+      port: fakePort,
+      serverId: fakeHost.serverId,
+      workspace: fakeHost.workspace,
+    });
+    await addFakeScheduleHostAndReload({
+      page,
+      serverId: fakeHost.serverId,
+      label: "Fake host",
+      port: fakePort,
+    });
+
+    const hostFilterTrigger = page.getByTestId("schedules-host-filter-trigger");
+    await expect(hostFilterTrigger).toBeVisible({ timeout: 30_000 });
+    await hostFilterTrigger.click();
+    const hostFilterPopup = page.getByTestId("combobox-desktop-container").last();
+    await expect(hostFilterPopup).toBeVisible({ timeout: 30_000 });
+    await expectNoTruncation(hostFilterPopup);
+    await page.keyboard.press("Escape");
+    await expect(page.getByTestId("combobox-desktop-container")).toHaveCount(0, {
+      timeout: 5_000,
+    });
   });
 
-  test("clears the selected model when the chosen project moves to another host", async ({
-    page,
-  }) => {
+  test("clears the selected project and model when the host changes", async ({ page }) => {
     const workspace = await seedWorkspace({ repoPrefix: "schedule-project-host-model-" });
     cleanupTasks.push(() => workspace.cleanup());
+    const serverId = getServerId();
     const fakeHost = await buildFakeScheduleHostWorkspace(workspace);
     const fakePort = String(59_000 + Math.floor(Math.random() * 900));
 
@@ -128,26 +290,126 @@ test.describe("Schedules project target", () => {
     });
     await expect(page.getByTestId("schedules-empty")).toBeVisible({ timeout: 30_000 });
     await page.getByTestId("schedules-empty-new").click();
-    await expect(page.getByTestId("schedule-form-sheet")).toBeVisible({ timeout: 10_000 });
+    const formSheet = page.getByTestId("schedule-form-sheet");
+    await expect(formSheet).toBeVisible({ timeout: 10_000 });
+    await expectStableHeight(formSheet);
 
-    await page.getByRole("button", { name: /select project/i }).click();
+    const hostTrigger = page.getByTestId("schedule-host-trigger");
+    const projectTrigger = page.getByTestId("schedule-project-trigger");
+    const modelTrigger = page.getByTestId("schedule-model-trigger");
+    const thinkingTrigger = page.getByTestId("schedule-thinking-trigger");
+    const modeTrigger = page.getByTestId("schedule-mode-trigger");
+    await expect(hostTrigger).toBeVisible({ timeout: 30_000 });
+    await expect(projectTrigger).toHaveCount(0);
+    await expect(modelTrigger).toHaveCount(0);
+    await expect(thinkingTrigger).toHaveCount(0);
+    await expect(modeTrigger).toHaveCount(0);
+    await hostTrigger.click();
+    await page.getByTestId(`schedule-host-option-${serverId}`).click();
+    await expect(projectTrigger).toBeVisible();
+    await expect(modelTrigger).toHaveCount(0);
+    await expect(thinkingTrigger).toHaveCount(0);
+    await expect(modeTrigger).toHaveCount(0);
+    await expectSettled(hostTrigger);
+
+    await projectTrigger.click();
     await page.getByTestId(`schedule-project-option-${workspace.projectId}`).click();
-    await expect(page.getByRole("button", { name: /select project/i })).toContainText(
-      workspace.projectDisplayName,
-    );
+    await expect(projectTrigger).toContainText(workspace.projectDisplayName);
+    await expectSettled(projectTrigger);
 
     await selectModelByLabel(page, "Ten second stream");
-    await expect(page.getByRole("button", { name: /ten second stream/i })).toBeVisible();
+    await expect(modelTrigger).toContainText("Ten second stream");
+    await expectSettled(modelTrigger);
+    await expect(thinkingTrigger).toHaveCount(0);
+    await expect(modeTrigger).toBeVisible();
+    await expectSettled(modeTrigger);
 
-    await page.getByRole("button", { name: /select project/i }).click();
+    await hostTrigger.click();
+    await page.getByTestId(`schedule-host-option-${fakeHost.serverId}`).click();
+    await expect(hostTrigger).toContainText("Fake host");
+    await expect(projectTrigger).toContainText(/select project/i);
+    await expect(modelTrigger).toHaveCount(0);
+    await expect(thinkingTrigger).toHaveCount(0);
+    await expect(modeTrigger).toHaveCount(0);
+    await expectSettled(hostTrigger);
+    await expectSettled(projectTrigger);
+
+    await projectTrigger.click();
+    await expect(page.getByTestId(`schedule-project-option-${workspace.projectId}`)).toHaveCount(0);
     await page.getByTestId(`schedule-project-option-${fakeHost.projectId}`).click();
-    await expect(page.getByRole("button", { name: /select project/i })).toContainText(
-      fakeHost.projectDisplayName,
-    );
-    await expect(page.getByRole("button", { name: /select model/i })).toBeVisible();
+    await expect(projectTrigger).toContainText(fakeHost.projectDisplayName);
+    await expectSettled(projectTrigger);
+    await expect(modelTrigger).toContainText(/select model/i);
+    await expectSettled(modelTrigger);
+    await expect(thinkingTrigger).toHaveCount(0);
+    await expect(modeTrigger).toHaveCount(0);
 
     await page.getByLabel("Schedule name").fill(`Cross host model ${Date.now()}`);
     await page.getByLabel("Prompt").fill("Run on the fake host project.");
     await expect(page.getByRole("button", { name: "Create schedule" })).toBeDisabled();
   });
+
+  test("creates and edits schedule isolation and archive cleanup knobs", async ({ page }) => {
+    const workspace = await seedWorkspace({ repoPrefix: "schedule-knobs-" });
+    cleanupTasks.push(() => workspace.cleanup());
+    const scheduleName = `Knob schedule ${Date.now()}`;
+    cleanupTasks.push(() => deleteScheduleByName(workspace, scheduleName));
+
+    await gotoAppShell(page);
+    await waitForSidebarHydration(page);
+    await page.goto(buildSchedulesRoute());
+    await expect(page.getByTestId("schedules-empty-new")).toBeVisible({ timeout: 30_000 });
+    await page.getByTestId("schedules-empty-new").click();
+
+    await page.getByRole("button", { name: /select project/i }).click();
+    await page.getByTestId(`schedule-project-option-${workspace.projectId}`).click();
+    await selectModelByLabel(page, "Ten second stream");
+    await expect(
+      page.getByText("Off keeps each run's workspace in the sidebar for inspection."),
+    ).toHaveCount(0);
+    await page.getByTestId("schedule-isolation-trigger").click();
+    await page.getByTestId("schedule-isolation-worktree").click();
+    await expect(page.getByTestId("schedule-isolation-trigger")).toContainText("Worktree");
+    await page.getByTestId("schedule-archive-on-finish-switch").click();
+    await page.getByLabel("Schedule name").fill(scheduleName);
+    await page.getByLabel("Prompt").fill("Run with custom workspace cleanup.");
+    await page.getByTestId("schedule-cadence-preset-trigger").click();
+    await page.getByTestId("schedule-cadence-preset-every-hour").click();
+    await page.getByRole("button", { name: "Create schedule" }).click();
+
+    await expect(page.getByTestId("schedule-form-sheet")).toHaveCount(0, { timeout: 30_000 });
+    await expectScheduleKnobs({
+      workspace,
+      name: scheduleName,
+      archiveOnFinish: false,
+      isolation: "worktree",
+    });
+
+    const scheduleId = await findScheduleIdByName(workspace, scheduleName);
+    await page.getByTestId(`schedule-row-${scheduleId}`).click();
+    const formSheet = page.getByTestId("schedule-form-sheet");
+    await expect(formSheet).toBeVisible({ timeout: 10_000 });
+    await expectStableHeight(formSheet);
+    await expect(page.getByTestId("schedule-isolation-trigger")).toContainText("Worktree");
+    await expect(page.getByTestId("schedule-archive-on-finish-switch")).toHaveAttribute(
+      "aria-checked",
+      "false",
+    );
+    await expect(
+      page.getByText("Off keeps each run's workspace in the sidebar for inspection."),
+    ).toHaveCount(0);
+
+    await page.getByTestId("schedule-isolation-trigger").click();
+    await page.getByTestId("schedule-isolation-local").click();
+    await page.getByTestId("schedule-archive-on-finish-switch").click();
+    await page.getByRole("button", { name: "Save changes" }).click();
+
+    await expect(page.getByTestId("schedule-form-sheet")).toHaveCount(0, { timeout: 30_000 });
+    await expectScheduleKnobs({
+      workspace,
+      name: scheduleName,
+      archiveOnFinish: true,
+      isolation: "local",
+    });
+  });
 });

packages/app/e2e/settings-host-page.spec.ts

@@ -64,7 +64,7 @@ test.describe("Settings host page", () => {
     await openSettingsHost(page, serverId);
 
     await openHostSection(page, serverId, "host");
-    await expectSettingsHeader(page, "Host");
+    await expectSettingsHeader(page, "Overview");
     await expectHostLabelDisplayed(page);
     await expectHostActionCards(page, serverId);
   });

packages/app/metro.config.cjs

@@ -14,6 +14,12 @@ const customWebPlatform = (process.env.PASEO_WEB_PLATFORM ?? "")
 
 const config = getDefaultConfig(projectRoot);
 const defaultResolveRequest = config.resolver.resolveRequest ?? resolve;
+
+// Keep app exports deterministic across dev machines and CI. Metro's Watchman
+// crawler behavior depends on the host Watchman build/capabilities, while the
+// node crawler is the path used when Watchman is absent.
+config.resolver.useWatchman = false;
+
 const escapedAppSrcRoot = appSrcRoot
   .split(path.sep)
   .map((segment) => segment.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&"))

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpaseo/app",
-  "version": "0.1.104-beta.4",
+  "version": "0.1.105",
   "private": true,
   "main": "index.ts",
   "scripts": {
@@ -22,6 +22,7 @@
     "test": "vitest run",
     "test:browser": "vitest run --project browser",
     "test:e2e": "playwright test --project='Desktop Chrome'",
+    "test:e2e:desktop": "cross-env E2E_DESKTOP_RUNTIME=1 playwright test --project='Desktop Chrome' e2e/project-picker-desktop.spec.ts",
     "test:e2e:real": "cross-env E2E_FORK_PASEO_HOME_FROM=../../.dev/paseo-home playwright test --project=real-provider",
     "test:e2e:ui": "playwright test --ui",
     "build": "npm run build:web",

packages/app/src/agent-stream/view.tsx

@@ -52,6 +52,7 @@ import type { AgentScreenAgent } from "@/hooks/use-agent-screen-state-machine";
 import { useSessionStore } from "@/stores/session-store";
 import { useFileExplorerActions } from "@/hooks/use-file-explorer-actions";
 import { useLoadOlderAgentHistory } from "@/hooks/use-load-older-agent-history";
+import { useSettings } from "@/hooks/use-settings";
 import type { ToastApi } from "@/components/toast-host";
 import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
 import { ToolCallDetailsContent } from "@/components/tool-call-details";
@@ -318,6 +319,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
   ) {
     const { t } = useTranslation();
     const router = useRouter();
+    const autoExpandReasoning = useSettings((settings) => settings.autoExpandReasoning);
     const viewportRef = useRef<StreamViewportHandle | null>(null);
     const isMobile = useIsCompactFormFactor();
     const streamRenderStrategy = useMemo(
@@ -633,10 +635,12 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
             args={item.text}
             status={item.status === "ready" ? "completed" : "executing"}
             isLastInSequence={layoutItem.isLastInToolSequence}
+            defaultExpanded={autoExpandReasoning}
+            forceInline={autoExpandReasoning}
           />
         );
       },
-      [setInlineDetailsExpanded],
+      [autoExpandReasoning, setInlineDetailsExpanded],
     );
 
     const renderToolCallItem = useCallback(

packages/app/src/app/_layout.tsx

@@ -4,13 +4,7 @@ import { PortalProvider } from "@gorhom/portal";
 import { QueryClientProvider } from "@tanstack/react-query";
 import * as Linking from "expo-linking";
 import * as Notifications from "expo-notifications";
-import {
-  Stack,
-  useGlobalSearchParams,
-  useNavigationContainerRef,
-  usePathname,
-  useRouter,
-} from "expo-router";
+import { Stack, useNavigationContainerRef, usePathname, useRouter } from "expo-router";
 import {
   createContext,
   type ReactNode,
@@ -23,9 +17,8 @@ import {
   useSyncExternalStore,
 } from "react";
 import { View } from "react-native";
-import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
+import { GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
 import { KeyboardProvider } from "react-native-keyboard-controller";
-import { Extrapolation, interpolate, runOnJS, useSharedValue } from "react-native-reanimated";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { CommandCenter } from "@/components/command-center";
@@ -34,25 +27,19 @@ import { DownloadToast } from "@/components/download-toast";
 import { QuittingOverlay } from "@/components/quitting-overlay";
 import { KeyboardShortcutsDialog } from "@/components/keyboard-shortcuts-dialog";
 import { LeftSidebar } from "@/components/left-sidebar";
+import { SidebarModelProvider } from "@/components/sidebar/sidebar-model";
 import { CompactExplorerSidebarHost } from "@/components/compact-explorer-sidebar-host";
 import { ProjectPickerModal } from "@/components/project-picker-modal";
 import { ProviderSettingsHost } from "@/components/provider-settings-host";
+import { RootErrorBoundary } from "@/components/root-error-boundary";
 import { WorkspaceSetupDialog } from "@/components/workspace-setup-dialog";
 import { WorkspaceShortcutTargetsSubscriber } from "@/components/workspace-shortcut-targets-subscriber";
 import { FloatingPanelPortalHost } from "@/components/ui/floating-panel-portal";
 import { HostChooserModal, useHostChooser } from "@/hosts/host-chooser";
 import { getIsElectronRuntime, useIsCompactFormFactor } from "@/constants/layout";
 import { isNative, isWeb } from "@/constants/platform";
-import {
-  HorizontalScrollProvider,
-  useHorizontalScrollOptional,
-} from "@/contexts/horizontal-scroll-context";
+import { HorizontalScrollProvider } from "@/contexts/horizontal-scroll-context";
 import { SessionProvider } from "@/contexts/session-context";
-import { ExplorerSidebarAnimationProvider } from "@/contexts/explorer-sidebar-animation-context";
-import {
-  SidebarAnimationProvider,
-  useSidebarAnimation,
-} from "@/contexts/sidebar-animation-context";
 import { SidebarCalloutProvider } from "@/contexts/sidebar-callout-context";
 import { ToastProvider } from "@/contexts/toast-context";
 import { VoiceProvider } from "@/contexts/voice-context";
@@ -81,10 +68,12 @@ import { useCompactWebViewportZoomLock } from "@/hooks/use-compact-web-viewport-
 import { useOpenProject } from "@/hooks/use-open-project";
 import { useAppSettings } from "@/hooks/use-settings";
 import { useStableEvent } from "@/hooks/use-stable-event";
+import { useOpenAgentListGesture } from "@/mobile-panels/gestures";
+import { MobilePanelsProvider } from "@/mobile-panels/provider";
 import { I18nProvider } from "@/i18n/provider";
 import { keyboardActionDispatcher } from "@/keyboard/keyboard-action-dispatcher";
 import { polyfillCrypto } from "@/polyfills/crypto";
-import { queryClient } from "@/query/query-client";
+import { queryClient } from "@/data/query-client";
 import {
   getHostRuntimeStore,
   hasConfiguredLocalDaemonOverride,
@@ -99,13 +88,7 @@ import { usePanelStore } from "@/stores/panel-store";
 import { THEME_TO_UNISTYLES, type ThemeName } from "@/styles/theme";
 import type { HostProfile } from "@/types/host-connection";
 import { toggleDesktopSidebarsWithCheckoutIntent } from "@/utils/desktop-sidebar-toggle";
-import { canOpenLeftSidebarGesture } from "@/utils/sidebar-animation-state";
-import {
-  buildOpenProjectRoute,
-  parseHostAgentRouteFromPathname,
-  parseServerIdFromPathname,
-  parseWorkspaceOpenIntent,
-} from "@/utils/host-routes";
+import { buildOpenProjectRoute, parseServerIdFromPathname } from "@/utils/host-routes";
 import { buildNotificationRoute, resolveNotificationTarget } from "@/utils/notification-routing";
 import { navigateToAgent } from "@/utils/navigate-to-agent";
 import {
@@ -404,22 +387,16 @@ function QueryProvider({ children }: { children: ReactNode }) {
 
 const rowStyle = { flex: 1, flexDirection: "row" } as const;
 const flexStyle = { flex: 1 } as const;
-const MOBILE_WEB_EDGE_SWIPE_WIDTH = 32;
 const MOBILE_WEB_GESTURE_TOUCH_ACTION = isWeb ? "auto" : "pan-y";
 
 interface AppContainerProps {
   children: ReactNode;
-  selectedAgentId?: string;
   chromeEnabled?: boolean;
 }
 
 const THEME_CYCLE_ORDER: ThemeName[] = ["dark", "zinc", "midnight", "claude", "ghostty", "light"];
 
-function AppContainer({
-  children,
-  selectedAgentId,
-  chromeEnabled: chromeEnabledOverride,
-}: AppContainerProps) {
+function AppContainer({ children, chromeEnabled: chromeEnabledOverride }: AppContainerProps) {
   const daemons = useHosts();
   const { settings, updateSettings } = useAppSettings();
   const toggleMobileAgentList = usePanelStore((state) => state.toggleMobileAgentList);
@@ -476,26 +453,22 @@ function AppContainer({
 
   const workspaceChrome = (
     <View style={rowStyle}>
-      {!isCompactLayout && chromeEnabled && !isFocusModeEnabled && (
-        <LeftSidebar selectedAgentId={selectedAgentId} />
-      )}
+      {!isCompactLayout && chromeEnabled && !isFocusModeEnabled && <LeftSidebar />}
       {isCompactLayout && chromeEnabled ? (
-        <ExplorerSidebarAnimationProvider>
-          <CompactExplorerSidebarHost enabled={chromeEnabled}>
-            <View style={flexStyle}>{children}</View>
-          </CompactExplorerSidebarHost>
-        </ExplorerSidebarAnimationProvider>
+        <CompactExplorerSidebarHost enabled={chromeEnabled}>
+          <View style={flexStyle}>{children}</View>
+        </CompactExplorerSidebarHost>
       ) : (
         <View style={flexStyle}>{children}</View>
       )}
     </View>
   );
 
-  const content = (
+  const surface = (
     <View style={layoutStyles.surfaceFill}>
       {workspaceChrome}
       <FloatingPanelPortalHost />
-      {isCompactLayout && chromeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
+      {isCompactLayout && chromeEnabled && <LeftSidebar />}
       <DownloadToast />
       <RosettaCalloutSource />
       <UpdateCalloutSource />
@@ -511,11 +484,13 @@ function AppContainer({
     </View>
   );
 
-  if (!isCompactLayout) {
-    return content;
-  }
+  const content = isCompactLayout ? (
+    <MobileGestureWrapper chromeEnabled={chromeEnabled}>{surface}</MobileGestureWrapper>
+  ) : (
+    surface
+  );
 
-  return <MobileGestureWrapper chromeEnabled={chromeEnabled}>{content}</MobileGestureWrapper>;
+  return <SidebarModelProvider>{content}</SidebarModelProvider>;
 }
 
 function MobileGestureWrapper({
@@ -525,127 +500,7 @@ function MobileGestureWrapper({
   children: ReactNode;
   chromeEnabled: boolean;
 }) {
-  const showMobileAgentList = usePanelStore((state) => state.showMobileAgentList);
-  const horizontalScroll = useHorizontalScrollOptional();
-  const {
-    translateX,
-    backdropOpacity,
-    windowWidth,
-    animateToOpen,
-    animateToClose,
-    setOverlayPeek,
-    isGesturing,
-    mobilePanelState,
-    gestureAnimatingRef,
-    openGestureRef,
-  } = useSidebarAnimation();
-  const touchStartX = useSharedValue(0);
-  const touchStartY = useSharedValue(0);
-  const openGestureEnabled = chromeEnabled;
-
-  const handleGestureOpen = useCallback(() => {
-    gestureAnimatingRef.current = true;
-    showMobileAgentList();
-  }, [showMobileAgentList, gestureAnimatingRef]);
-
-  const openGesture = useMemo(
-    () =>
-      Gesture.Pan()
-        .withRef(openGestureRef)
-        .enabled(openGestureEnabled)
-        .manualActivation(true)
-        .failOffsetY([-10, 10])
-        .onTouchesDown((event) => {
-          const touch = event.changedTouches[0];
-          if (touch) {
-            touchStartX.value = touch.absoluteX;
-            touchStartY.value = touch.absoluteY;
-          }
-        })
-        .onTouchesMove((event, stateManager) => {
-          const touch = event.changedTouches[0];
-          if (!touch || event.numberOfTouches !== 1) return;
-
-          const deltaX = touch.absoluteX - touchStartX.value;
-          const deltaY = touch.absoluteY - touchStartY.value;
-          const absDeltaX = Math.abs(deltaX);
-          const absDeltaY = Math.abs(deltaY);
-
-          if (!canOpenLeftSidebarGesture(mobilePanelState.value, translateX.value, windowWidth)) {
-            stateManager.fail();
-            return;
-          }
-
-          if (horizontalScroll?.isAnyScrolledRight.value) {
-            stateManager.fail();
-            return;
-          }
-
-          if (isWeb && touchStartX.value > MOBILE_WEB_EDGE_SWIPE_WIDTH) {
-            stateManager.fail();
-            return;
-          }
-
-          if (deltaX <= -10) {
-            stateManager.fail();
-            return;
-          }
-
-          if (absDeltaY > 10 && absDeltaY > absDeltaX) {
-            stateManager.fail();
-            return;
-          }
-
-          if (deltaX > 15 && absDeltaX > absDeltaY) {
-            stateManager.activate();
-          }
-        })
-        .onStart(() => {
-          isGesturing.value = true;
-          // The overlay is display:none while closed; reveal it for the drag.
-          runOnJS(setOverlayPeek)(true);
-        })
-        .onUpdate((event) => {
-          const newTranslateX = Math.min(0, -windowWidth + event.translationX);
-          translateX.value = newTranslateX;
-          backdropOpacity.value = interpolate(
-            newTranslateX,
-            [-windowWidth, 0],
-            [0, 1],
-            Extrapolation.CLAMP,
-          );
-        })
-        .onEnd((event) => {
-          isGesturing.value = false;
-          const shouldOpen = event.translationX > windowWidth / 3 || event.velocityX > 500;
-          if (shouldOpen) {
-            animateToOpen();
-            runOnJS(handleGestureOpen)();
-          } else {
-            animateToClose();
-          }
-        })
-        .onFinalize(() => {
-          isGesturing.value = false;
-          runOnJS(setOverlayPeek)(false);
-        }),
-    [
-      openGestureEnabled,
-      windowWidth,
-      translateX,
-      backdropOpacity,
-      mobilePanelState,
-      animateToOpen,
-      animateToClose,
-      setOverlayPeek,
-      handleGestureOpen,
-      isGesturing,
-      openGestureRef,
-      horizontalScroll?.isAnyScrolledRight,
-      touchStartX,
-      touchStartY,
-    ],
-  );
+  const openGesture = useOpenAgentListGesture(chromeEnabled);
 
   return (
     <GestureDetector gesture={openGesture} touchAction={MOBILE_WEB_GESTURE_TOUCH_ACTION}>
@@ -881,7 +736,6 @@ function OpenProjectListener() {
 
 function AppWithSidebar({ children }: { children: ReactNode }) {
   const pathname = usePathname();
-  const params = useGlobalSearchParams<{ open?: string | string[] }>();
   const hosts = useHosts();
   const storeReady = useStoreReady();
   const routeServerId = useMemo(() => parseServerIdFromPathname(pathname), [pathname]);
@@ -895,30 +749,7 @@ function AppWithSidebar({ children }: { children: ReactNode }) {
       pathname === "/schedules" ||
       routeHasKnownHost);
 
-  // Parse selectedAgentKey directly from pathname
-  // useLocalSearchParams doesn't update when navigating between same-pattern routes
-  const selectedAgentKey = useMemo(() => {
-    const workspaceMatch = pathname.match(/^\/h\/([^/]+)\/workspace\/[^/]+(?:\/|$)/);
-    const workspaceServerId = workspaceMatch?.[1]?.trim() ?? "";
-    const openValue = Array.isArray(params.open) ? params.open[0] : params.open;
-    const openIntent = parseWorkspaceOpenIntent(openValue);
-    if (workspaceServerId && openIntent?.kind === "agent") {
-      const agentId = openIntent.agentId.trim();
-      return agentId ? `${workspaceServerId}:${agentId}` : undefined;
-    }
-
-    const match = parseHostAgentRouteFromPathname(pathname);
-    return match ? `${match.serverId}:${match.agentId}` : undefined;
-  }, [params.open, pathname]);
-
-  return (
-    <AppContainer
-      selectedAgentId={shouldShowAppChrome ? selectedAgentKey : undefined}
-      chromeEnabled={shouldShowAppChrome}
-    >
-      {children}
-    </AppContainer>
-  );
+  return <AppContainer chromeEnabled={shouldShowAppChrome}>{children}</AppContainer>;
 }
 
 function FaviconStatusSync() {
@@ -973,7 +804,7 @@ function WorkspaceRouteNavigationBridge() {
 
 function AppShell() {
   return (
-    <SidebarAnimationProvider>
+    <MobilePanelsProvider>
       <HorizontalScrollProvider>
         <OpenProjectListener />
         <AppWithSidebar>
@@ -981,7 +812,7 @@ function AppShell() {
           <RootStack />
         </AppWithSidebar>
       </HorizontalScrollProvider>
-    </SidebarAnimationProvider>
+    </MobilePanelsProvider>
   );
 }
 
@@ -998,31 +829,27 @@ function RuntimeProviders({ children }: { children: ReactNode }) {
   );
 }
 
-// PortalProvider must stay inside normal app-wide context providers here.
+// PortalProvider must stay inside normal app-wide context providers.
 // `@gorhom/portal` renders portaled children at the host's location in the
 // tree, so any context a portaled sheet might consume (QueryClient, theme,
-// auth, settings, …) must wrap PortalProvider — not be wrapped by it.
+// auth, settings, ...) must wrap PortalProvider, not be wrapped by it.
 // BottomSheetModalProvider is the exception: Gorhom modals consume portal
 // context and need one shared provider for sibling sheets to stack.
 function RootProviders({ children }: { children: ReactNode }) {
   return (
-    <QueryProvider>
-      <I18nProvider>
-        <SafeAreaProvider>
-          <KeyboardProvider>
-            <KeyboardShiftProvider>
-              <PortalProvider>
-                <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
-              </PortalProvider>
-            </KeyboardShiftProvider>
-          </KeyboardProvider>
-        </SafeAreaProvider>
-      </I18nProvider>
-    </QueryProvider>
+    <SafeAreaProvider>
+      <KeyboardProvider>
+        <KeyboardShiftProvider>
+          <PortalProvider>
+            <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
+          </PortalProvider>
+        </KeyboardShiftProvider>
+      </KeyboardProvider>
+    </SafeAreaProvider>
   );
 }
 
-export default function RootLayout() {
+function RootAppTree() {
   return (
     <GestureHandlerRootView style={flexStyle}>
       <View style={layoutStyles.surfaceFill}>
@@ -1036,6 +863,18 @@ export default function RootLayout() {
   );
 }
 
+export default function RootLayout() {
+  return (
+    <QueryProvider>
+      <I18nProvider>
+        <RootErrorBoundary>
+          <RootAppTree />
+        </RootErrorBoundary>
+      </I18nProvider>
+    </QueryProvider>
+  );
+}
+
 const layoutStyles = StyleSheet.create((theme) => ({
   surfaceFill: {
     flex: 1,

packages/app/src/app/settings/[section].tsx

@@ -1,7 +1,38 @@
-import { useLocalSearchParams } from "expo-router";
+import { Redirect, useLocalSearchParams } from "expo-router";
 import { useMemo } from "react";
+import { useHostRuntimeBootstrapState } from "@/app/_layout";
+import { HostRouteBootstrapBoundary } from "@/components/host-route-bootstrap-boundary";
+import { useLocalDaemonServerIdState } from "@/hooks/use-is-local-daemon";
+import { useHosts } from "@/runtime/host-runtime";
 import SettingsScreen from "@/screens/settings-screen";
-import { isSettingsSectionSlug, type SettingsSectionSlug } from "@/utils/host-routes";
+import { StartupSplashScreen } from "@/screens/startup-splash-screen";
+import {
+  buildSettingsHostSectionRoute,
+  buildSettingsRoute,
+  isSettingsSectionSlug,
+  type SettingsSectionSlug,
+} from "@/utils/host-routes";
+
+// COMPAT(settingsDaemonRedirect): added 2026-07-08, remove after 2027-01-08.
+function SettingsDaemonRedirect() {
+  const hosts = useHosts();
+  const localDaemon = useLocalDaemonServerIdState();
+  const bootstrapState = useHostRuntimeBootstrapState();
+
+  if (localDaemon.status === "loading") {
+    return <StartupSplashScreen bootstrapState={bootstrapState} />;
+  }
+
+  if (
+    localDaemon.status === "resolved" &&
+    localDaemon.serverId !== null &&
+    hosts.some((host) => host.serverId === localDaemon.serverId)
+  ) {
+    return <Redirect href={buildSettingsHostSectionRoute(localDaemon.serverId, "host")} />;
+  }
+
+  return <Redirect href={buildSettingsRoute()} />;
+}
 
 export default function SettingsSectionRoute() {
   const params = useLocalSearchParams<{ section?: string; addHost?: string }>();
@@ -10,5 +41,14 @@ export default function SettingsSectionRoute() {
   const openAddHostIntent = typeof params.addHost === "string" ? params.addHost : null;
   const view = useMemo(() => ({ kind: "section" as const, section }), [section]);
 
+  // COMPAT(settingsDaemonRedirect): added 2026-07-08, remove after 2027-01-08.
+  if (rawSection === "daemon") {
+    return (
+      <HostRouteBootstrapBoundary>
+        <SettingsDaemonRedirect />
+      </HostRouteBootstrapBoundary>
+    );
+  }
+
   return <SettingsScreen view={view} openAddHostIntent={openAddHostIntent} />;
 }

packages/app/src/assistant-file-links/link.tsx

@@ -18,6 +18,7 @@ import { useStableEvent } from "@/hooks/use-stable-event";
 import { CODE_SURFACE_DATASET } from "@/styles/code-surface";
 import { useAssistantFileLinkResolverContext } from "./provider";
 import type { AssistantFileLinkSource } from "./resolver";
+import { formatFileLinkTooltipPath } from "./tooltip-path";
 import { useFileLink } from "./use-file-link";
 
 interface AssistantMarkdownLinkProps {
@@ -38,7 +39,7 @@ export function AssistantMarkdownLink({
   const { configRef } = useAssistantFileLinkResolverContext();
   const workspaceRoot = configRef.current.workspaceRoot;
   const tooltipPath = useMemo(
-    () => (target ? formatInlinePathTargetForTooltip(target, workspaceRoot) : null),
+    () => (target ? formatFileLinkTooltipPath({ target, workspaceRoot }) : null),
     [target, workspaceRoot],
   );
   const handleAnchorClickCapture = useStableEvent((event: MouseEvent<HTMLAnchorElement>) => {
@@ -147,38 +148,6 @@ export function AssistantMarkdownCodeLink({
   );
 }
 
-function formatInlinePathTargetForTooltip(
-  target: { path: string; lineStart?: number; lineEnd?: number },
-  workspaceRoot: string | undefined,
-): string {
-  let result = relativizePathToWorkspace(target.path, workspaceRoot);
-  if (target.lineStart) {
-    result += `:${target.lineStart}`;
-    if (target.lineEnd && target.lineEnd !== target.lineStart) {
-      result += `-${target.lineEnd}`;
-    }
-  }
-  return result;
-}
-
-function relativizePathToWorkspace(filePath: string, workspaceRoot: string | undefined): string {
-  if (!workspaceRoot) {
-    return filePath;
-  }
-  const root = workspaceRoot.replace(/\/+$/, "");
-  if (!root) {
-    return filePath;
-  }
-  if (filePath === root) {
-    return ".";
-  }
-  const prefix = `${root}/`;
-  if (filePath.startsWith(prefix)) {
-    return filePath.slice(prefix.length);
-  }
-  return filePath;
-}
-
 interface AssistantInlineCodePathLinkProps {
   content: string;
   inheritedStyles: TextStyle;

packages/app/src/assistant-file-links/tooltip-path.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+import { formatFileLinkTooltipPath } from "./tooltip-path";
+
+describe("formatFileLinkTooltipPath", () => {
+  it("shows a Windows file path relative to its workspace regardless of separators", () => {
+    expect(
+      formatFileLinkTooltipPath({
+        target: {
+          path: "C:/Users/me/repo/src/app.ts",
+          lineStart: 12,
+          lineEnd: 20,
+        },
+        workspaceRoot: "C:\\Users\\me\\repo",
+      }),
+    ).toBe("src/app.ts:12-20");
+  });
+
+  it("shows the workspace root as a dot", () => {
+    expect(
+      formatFileLinkTooltipPath({
+        target: { path: "/Users/me/repo" },
+        workspaceRoot: "/Users/me/repo",
+      }),
+    ).toBe(".");
+  });
+
+  it("keeps an absolute path outside the workspace", () => {
+    expect(
+      formatFileLinkTooltipPath({
+        target: { path: "/Users/me/notes.md" },
+        workspaceRoot: "/Users/me/repo",
+      }),
+    ).toBe("/Users/me/notes.md");
+  });
+
+  it("keeps the target path when the workspace root is unavailable", () => {
+    expect(formatFileLinkTooltipPath({ target: { path: "src/app.ts", lineStart: 12 } })).toBe(
+      "src/app.ts:12",
+    );
+  });
+});

packages/app/src/assistant-file-links/tooltip-path.ts

@@ -0,0 +1,35 @@
+import { resolveWorkspaceFilePaths, type WorkspaceFileLocation } from "@/workspace/file-open";
+import { normalizeWorkspacePath } from "@/utils/workspace-identity";
+
+interface FormatFileLinkTooltipPathInput {
+  target: WorkspaceFileLocation;
+  workspaceRoot?: string;
+}
+
+export function formatFileLinkTooltipPath({
+  target,
+  workspaceRoot,
+}: FormatFileLinkTooltipPathInput): string {
+  const normalizedTargetPath = normalizeWorkspacePath(target.path);
+  const normalizedWorkspaceRoot = normalizeWorkspacePath(workspaceRoot);
+  let isWorkspaceRoot = false;
+  if (normalizedTargetPath && normalizedWorkspaceRoot) {
+    isWorkspaceRoot = normalizedTargetPath === normalizedWorkspaceRoot;
+    if (/^[A-Za-z]:\//.test(normalizedTargetPath)) {
+      isWorkspaceRoot =
+        normalizedTargetPath.toLowerCase() === normalizedWorkspaceRoot.toLowerCase();
+    }
+  }
+
+  const resolvedPaths = workspaceRoot
+    ? resolveWorkspaceFilePaths({ path: target.path, workspaceRoot })
+    : null;
+  let result = isWorkspaceRoot ? "." : (resolvedPaths?.relativePath ?? target.path);
+  if (target.lineStart) {
+    result += `:${target.lineStart}`;
+    if (target.lineEnd && target.lineEnd !== target.lineStart) {
+      result += `-${target.lineEnd}`;
+    }
+  }
+  return result;
+}

packages/app/src/components/adaptive-modal-sheet.tsx

@@ -1,8 +1,8 @@
-import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { ReactNode, Ref } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
-import { Modal, Pressable, ScrollView, Text, TextInput, View } from "react-native";
+import { Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from "react-native";
 import type { TextInputProps } from "react-native";
 import { StyleSheet, useUnistyles, withUnistyles } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
@@ -20,6 +20,7 @@ import {
   useIsolatedBottomSheetVisibility,
 } from "@/components/ui/isolated-bottom-sheet-modal";
 import { getCompactSheetSafeAreaPadding } from "@/components/adaptive-modal-sheet-layout";
+import { createControlGeometry } from "@/components/ui/control-geometry";
 import { isNative, isWeb } from "@/constants/platform";
 import { useWebScrollViewScrollbar } from "@/components/use-web-scrollbar";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -220,7 +221,7 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
   },
   adaptiveInputOutline: {
-    outlineColor: theme.colors.accent,
+    ...createControlGeometry(theme).controlFocusRingColor,
   },
   adaptiveInputText: {
     color: theme.colors.foreground,
@@ -231,6 +232,7 @@ const styles = StyleSheet.create((theme) => ({
 }));
 
 const SEARCH_INPUT_STYLE = [styles.searchInput, isWeb && { outlineStyle: "none" }];
+const WEB_EXIT_DURATION_MS = 160;
 
 function SheetBackground({ style }: BottomSheetBackgroundProps) {
   const { theme } = useUnistyles();
@@ -448,6 +450,7 @@ export interface AdaptiveModalSheetProps {
   header: SheetHeader;
   visible: boolean;
   onClose: () => void;
+  onDismiss?: () => void;
   children: ReactNode;
   /** Sticky footer rendered below the scrollable content. */
   footer?: ReactNode;
@@ -468,6 +471,7 @@ export function AdaptiveModalSheet({
   header,
   visible,
   onClose,
+  onDismiss,
   children,
   footer,
   snapPoints,
@@ -533,6 +537,20 @@ export function AdaptiveModalSheet({
     isEnabled: isMobile,
     onClose,
   });
+  const [shouldRenderWeb, setShouldRenderWeb] = useState(visible);
+  const [isWebClosing, setIsWebClosing] = useState(false);
+  const nativeModalDismissNotifiedRef = useRef(!visible);
+  const handleDismiss = useCallback(() => {
+    handleSheetDismiss();
+    onDismiss?.();
+  }, [handleSheetDismiss, onDismiss]);
+  const notifyNativeModalDismiss = useCallback(() => {
+    if (nativeModalDismissNotifiedRef.current) {
+      return;
+    }
+    nativeModalDismissNotifiedRef.current = true;
+    onDismiss?.();
+  }, [onDismiss]);
 
   const renderBackdrop = useCallback(
     (props: React.ComponentProps<typeof BottomSheetBackdrop>) => (
@@ -545,12 +563,53 @@ export function AdaptiveModalSheet({
     () => [styles.desktopCard, desktopMaxWidth != null && { maxWidth: desktopMaxWidth }],
     [desktopMaxWidth],
   );
+  const desktopOverlayStyle = useMemo(
+    () => [
+      styles.desktopOverlay,
+      isWeb && {
+        opacity: isWebClosing ? 0 : 1,
+        transitionDuration: `${WEB_EXIT_DURATION_MS}ms`,
+        transitionProperty: "opacity",
+        transitionTimingFunction: "ease",
+      },
+    ],
+    [isWebClosing],
+  );
 
   useEffect(() => {
     if (!isWeb || isMobile || !visible) return;
     return pushEscHandler(onClose);
   }, [visible, isMobile, onClose]);
 
+  useEffect(() => {
+    if (visible) {
+      nativeModalDismissNotifiedRef.current = false;
+    }
+  }, [visible]);
+
+  useEffect(() => {
+    if (!isWeb || isMobile) return;
+    if (visible) {
+      setShouldRenderWeb(true);
+      setIsWebClosing(false);
+      return;
+    }
+    if (!shouldRenderWeb) return;
+    setIsWebClosing(true);
+    const timeout = window.setTimeout(() => {
+      setShouldRenderWeb(false);
+      setIsWebClosing(false);
+      onDismiss?.();
+    }, WEB_EXIT_DURATION_MS);
+    return () => window.clearTimeout(timeout);
+  }, [visible, isMobile, onDismiss, shouldRenderWeb]);
+
+  useEffect(() => {
+    if (isWeb || isMobile || visible || Platform.OS !== "android") return;
+    const timeout = setTimeout(notifyNativeModalDismiss, 0);
+    return () => clearTimeout(timeout);
+  }, [visible, isMobile, notifyNativeModalDismiss]);
+
   if (isMobile) {
     return (
       <IsolatedBottomSheetModal
@@ -559,7 +618,7 @@ export function AdaptiveModalSheet({
         index={0}
         enableDynamicSizing={false}
         onChange={handleSheetChange}
-        onDismiss={handleSheetDismiss}
+        onDismiss={handleDismiss}
         backdropComponent={renderBackdrop}
         enablePanDownToClose
         backgroundComponent={SheetBackground}
@@ -614,7 +673,7 @@ export function AdaptiveModalSheet({
   );
 
   const desktopContent = (
-    <View style={styles.desktopOverlay} testID={testID}>
+    <View style={desktopOverlayStyle} testID={testID}>
       <Pressable
         accessibilityLabel={t("common.actions.dismiss")}
         style={ABSOLUTE_FILL_STYLE}
@@ -626,7 +685,7 @@ export function AdaptiveModalSheet({
 
   // On web, use portal to overlay root for consistent stacking with toasts
   if (isWeb && typeof document !== "undefined") {
-    if (!visible) return null;
+    if (!shouldRenderWeb) return null;
     return createPortal(desktopContent, getOverlayRoot());
   }
 
@@ -636,6 +695,7 @@ export function AdaptiveModalSheet({
       animationType="fade"
       visible={visible}
       onRequestClose={onClose}
+      onDismiss={notifyNativeModalDismiss}
       hardwareAccelerated
     >
       {desktopContent}

packages/app/src/components/app-diagnostic-sheet.tsx

@@ -9,7 +9,6 @@ import { AdaptiveModalSheet, type SheetHeader } from "@/components/adaptive-moda
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { ScrollableCodeSurface, SurfaceCard } from "@/components/ui/scrollable-code-surface";
 import { useToast } from "@/contexts/toast-context";
-import { getDesktopDaemonLogs, getDesktopDaemonStatus } from "@/desktop/daemon/desktop-daemon";
 import {
   formatAppDiagnosticHeader,
   formatDiagnosticSection,
@@ -17,6 +16,7 @@ import {
   formatServerInfoSection,
   redactAppDiagnosticReport,
 } from "@/diagnostics/app-diagnostic-report";
+import { collectDesktopDiagnosticSections } from "@/diagnostics/desktop-diagnostic-report";
 import { getHostRuntimeStore, useHosts, type HostRuntimeSnapshot } from "@/runtime/host-runtime";
 import { ICON_SIZE, type Theme } from "@/styles/theme";
 import type { HostProfile } from "@/types/host-connection";
@@ -261,35 +261,6 @@ export function AppDiagnosticSheet({
   );
 }
 
-async function collectDesktopDiagnosticSections(): Promise<DiagnosticCollectionResult> {
-  try {
-    const [status, logs] = await Promise.all([getDesktopDaemonStatus(), getDesktopDaemonLogs()]);
-    return {
-      status: "done",
-      sections: [
-        formatDiagnosticSection("Desktop", [
-          { label: "Daemon status", value: status.status },
-          { label: "Desktop managed", value: String(status.desktopManaged) },
-          { label: "Daemon PID", value: status.pid === null ? "none" : String(status.pid) },
-          { label: "Daemon version", value: status.version ?? "unknown" },
-          { label: "Daemon home", value: status.home || "unknown" },
-          { label: "Log path", value: logs.logPath || "unknown" },
-          { label: "Error", value: status.error ?? "none" },
-        ]),
-        [
-          "Desktop daemon log tail",
-          logs.contents ? indentBlock(logs.contents) : "  No log lines found",
-        ].join("\n"),
-      ],
-    };
-  } catch (error) {
-    return {
-      status: "failed",
-      sections: [formatDiagnosticSection("Desktop", [{ label: "Error", value: toMessage(error) }])],
-    };
-  }
-}
-
 async function collectHostDiagnosticSections(
   host: HostProfile,
   snapshot: HostRuntimeSnapshot | null,
@@ -338,14 +309,6 @@ async function collectHostDiagnosticSections(
   }
 }
 
-function indentBlock(value: string): string {
-  return value
-    .split("\n")
-    .filter(Boolean)
-    .map((line) => `  ${line}`)
-    .join("\n");
-}
-
 function toMessage(error: unknown): string {
   return error instanceof Error ? error.message : String(error);
 }

packages/app/src/components/combined-model-selector.tsx

@@ -4,24 +4,39 @@ import {
   View,
   Text,
   Pressable,
-  ActivityIndicator,
   type GestureResponderEvent,
   type PressableStateCallbackType,
 } from "react-native";
 import { BottomSheetFlatList } from "@gorhom/bottom-sheet";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { isNative, isWeb as platformIsWeb } from "@/constants/platform";
 import { AlertTriangle, ChevronRight, Search, Settings, Star } from "lucide-react-native";
 import { ComboboxTrigger } from "@/components/ui/combobox-trigger";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import type { AgentProvider } from "@getpaseo/protocol/agent-types";
 import type { SheetHeader } from "@/components/adaptive-modal-sheet";
 import { useProviderSettingsStore } from "@/stores/provider-settings-store";
 import { Button } from "@/components/ui/button";
+import { ICON_SIZE, type Theme } from "@/styles/theme";
+import {
+  Combobox,
+  ComboboxItem,
+  type ComboboxOption,
+  type ComboboxProps,
+} from "@/components/ui/combobox";
+import { getProviderIcon } from "@/components/provider-icons";
+import {
+  buildSelectedTriggerLabel,
+  filterAndRankModelRows,
+  getAllProviderModelRows,
+  getProviderModelRows,
+  resolveSelectedModelLabel,
+  type ProviderSelectionModelRow,
+  type ProviderSelectorProvider,
+} from "@/provider-selection/provider-selection";
+
 const IS_WEB = platformIsWeb;
-
-import { Combobox, ComboboxItem, type ComboboxOption } from "@/components/ui/combobox";
-
 const EMPTY_COMBOBOX_OPTIONS: ComboboxOption[] = [];
 
 function noop() {}
@@ -47,22 +62,67 @@ function drillDownRowStyle({
     pressed && styles.drillDownRowPressed,
   ];
 }
-import { getProviderIcon } from "@/components/provider-icons";
-import {
-  buildSelectedTriggerLabel,
-  filterAndRankModelRows,
-  getAllProviderModelRows,
-  getProviderModelRows,
-  resolveSelectedModelLabel,
-  type ProviderSelectionModelRow,
-  type ProviderSelectorProvider,
-} from "@/provider-selection/provider-selection";
 
 const DESKTOP_PROVIDER_VIEW_MIN_HEIGHT = 220;
 const DESKTOP_PROVIDER_VIEW_MAX_HEIGHT = 400;
 const DESKTOP_PROVIDER_VIEW_BASE_HEIGHT = 80;
 const DESKTOP_MODEL_ROW_HEIGHT = 40;
 
+const ThemedAlertTriangle = withUnistyles(AlertTriangle);
+const ThemedChevronRight = withUnistyles(ChevronRight);
+const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
+const ThemedSearch = withUnistyles(Search);
+const ThemedSettings = withUnistyles(Settings);
+const ThemedStar = withUnistyles(Star);
+
+const foregroundMutedMapping = (theme: Theme) => ({
+  color: theme.colors.foregroundMuted,
+});
+
+const headerSettingsMapping = (disabled: boolean) => (theme: Theme) => ({
+  color: disabled ? theme.colors.border : theme.colors.foregroundMuted,
+});
+
+const favoriteStarMapping =
+  (isFavorite: boolean, hovered: boolean) =>
+  (theme: Theme): { color: string; fill: string } => {
+    const favoriteColor = theme.colors.palette.amber[500];
+    if (isFavorite) {
+      return { color: favoriteColor, fill: favoriteColor };
+    }
+    return {
+      color: hovered ? theme.colors.foregroundMuted : theme.colors.border,
+      fill: "transparent",
+    };
+  };
+
+type ProviderGlyphTone = "muted" | "foreground";
+
+function ProviderGlyph({
+  provider,
+  size,
+  tone = "muted",
+}: {
+  provider: string;
+  size: number;
+  tone?: ProviderGlyphTone;
+}) {
+  const Icon = getProviderIcon(provider);
+  const color =
+    tone === "foreground" ? styles.providerIconForeground.color : styles.providerIconMuted.color;
+  return <Icon size={size} color={color} />;
+}
+
+function HeaderSettingsIcon({ disabled }: { disabled: boolean }) {
+  const uniProps = useMemo(() => headerSettingsMapping(disabled), [disabled]);
+  return <ThemedSettings size={ICON_SIZE.sm} uniProps={uniProps} />;
+}
+
+function FavoriteStar({ isFavorite, hovered }: { isFavorite: boolean; hovered: boolean }) {
+  const uniProps = useMemo(() => favoriteStarMapping(isFavorite, hovered), [hovered, isFavorite]);
+  return <ThemedStar size={ICON_SIZE.md} uniProps={uniProps} />;
+}
+
 type SelectorView =
   | { kind: "all" }
   | { kind: "provider"; providerId: string; providerLabel: string };
@@ -89,6 +149,8 @@ interface CombinedModelSelectorProps {
   isRetryingProvider?: boolean;
   disabled?: boolean;
   serverId?: string | null;
+  desktopPlacement?: ComboboxProps["desktopPlacement"];
+  desktopMinWidth?: number;
   /**
    * Render the custom trigger as a full-width form field: the outer Pressable
    * becomes a transparent passthrough that stretches its child edge-to-edge and
@@ -149,9 +211,7 @@ function ModelRow({
   onPress: () => void;
   onToggleFavorite?: (provider: string, modelId: string) => void;
 }) {
-  const { theme } = useUnistyles();
   const { t } = useTranslation();
-  const ProviderIcon = getProviderIcon(row.provider);
 
   const handleToggleFavorite = useCallback(
     (event: GestureResponderEvent) => {
@@ -162,8 +222,8 @@ function ModelRow({
   );
 
   const leadingSlot = useMemo(
-    () => <ProviderIcon size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />,
-    [ProviderIcon, theme.iconSize.sm, theme.colors.foregroundMuted],
+    () => <ProviderGlyph provider={row.provider} size={ICON_SIZE.sm} />,
+    [row.provider],
   );
   const trailingSlot = useMemo(
     () =>
@@ -178,32 +238,10 @@ function ModelRow({
           }
           testID={`favorite-model-${row.provider}-${row.modelId}`}
         >
-          {({ hovered }) => {
-            let starColor: string;
-            if (isFavorite) starColor = theme.colors.palette.amber[500];
-            else if (hovered) starColor = theme.colors.foregroundMuted;
-            else starColor = theme.colors.border;
-            return (
-              <Star
-                size={16}
-                color={starColor}
-                fill={isFavorite ? theme.colors.palette.amber[500] : "transparent"}
-              />
-            );
-          }}
+          {({ hovered }) => <FavoriteStar isFavorite={isFavorite} hovered={Boolean(hovered)} />}
         </Pressable>
       ) : null,
-    [
-      onToggleFavorite,
-      handleToggleFavorite,
-      isFavorite,
-      row.provider,
-      row.modelId,
-      theme.colors.palette.amber,
-      theme.colors.foregroundMuted,
-      theme.colors.border,
-      t,
-    ],
+    [onToggleFavorite, handleToggleFavorite, isFavorite, row.provider, row.modelId, t],
   );
 
   return (
@@ -305,9 +343,7 @@ function iconButtonStyle({ hovered, pressed }: PressableStateCallbackType & { ho
 }
 
 function GroupProviderButton({ provider, onDrillDown }: GroupProviderButtonProps) {
-  const { theme } = useUnistyles();
   const { t } = useTranslation();
-  const ProvIcon = getProviderIcon(provider.id);
   const selection = provider.modelSelection;
 
   const handlePress = useCallback(() => {
@@ -327,18 +363,16 @@ function GroupProviderButton({ provider, onDrillDown }: GroupProviderButtonProps
   } else if (selection.kind === "loading") {
     stateNode = (
       <View style={styles.rowStateInline}>
-        <ActivityIndicator
-          size="small"
-          color={theme.colors.foregroundMuted}
-          style={styles.rowSpinner}
-        />
+        <View style={styles.rowSpinner}>
+          <ThemedLoadingSpinner size={ICON_SIZE.sm} uniProps={foregroundMutedMapping} />
+        </View>
         <Text style={styles.drillDownCount}>{t("modelSelector.loadingShort")}</Text>
       </View>
     );
   } else {
     stateNode = (
       <View style={styles.rowStateInline}>
-        <AlertTriangle size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+        <ThemedAlertTriangle size={ICON_SIZE.sm} uniProps={foregroundMutedMapping} />
         <Text style={styles.drillDownCount}>{t("modelSelector.error")}</Text>
       </View>
     );
@@ -346,11 +380,11 @@ function GroupProviderButton({ provider, onDrillDown }: GroupProviderButtonProps
 
   return (
     <Pressable onPress={handlePress} style={drillDownRowStyle}>
-      <ProvIcon size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+      <ProviderGlyph provider={provider.id} size={ICON_SIZE.sm} />
       <Text style={styles.drillDownText}>{provider.label}</Text>
       <View style={styles.drillDownTrailing}>
         {stateNode}
-        <ChevronRight size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+        <ThemedChevronRight size={ICON_SIZE.sm} uniProps={foregroundMutedMapping} />
       </View>
     </Pressable>
   );
@@ -446,14 +480,13 @@ function ProviderErrorEmptyState({
   onRetryProvider?: (provider: AgentProvider) => void;
   isRetryingProvider: boolean;
 }) {
-  const { theme } = useUnistyles();
   const { t } = useTranslation();
   const handleRetry = useCallback(() => {
     onRetryProvider?.(providerId);
   }, [onRetryProvider, providerId]);
   return (
     <View style={styles.emptyState}>
-      <AlertTriangle size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
+      <ThemedAlertTriangle size={ICON_SIZE.md} uniProps={foregroundMutedMapping} />
       <Text style={styles.emptyStateText}>{message}</Text>
       {onRetryProvider ? (
         <Button variant="default" size="sm" onPress={handleRetry} disabled={isRetryingProvider}>
@@ -477,7 +510,6 @@ function SelectorContent({
   onRetryProvider,
   isRetryingProvider,
 }: SelectorContentProps) {
-  const { theme } = useUnistyles();
   const { t } = useTranslation();
   const normalizedQuery = useMemo(() => normalizeSearchQuery(searchQuery), [searchQuery]);
   const selectedViewProvider = useMemo(
@@ -501,7 +533,7 @@ function SelectorContent({
   const hasResults = favoriteRows.length > 0 || providers.length > 0;
   const emptyState = (
     <View style={styles.emptyState}>
-      <Search size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
+      <ThemedSearch size={ICON_SIZE.md} uniProps={foregroundMutedMapping} />
       <Text style={styles.emptyStateText}>{t("modelSelector.noMatches")}</Text>
     </View>
   );
@@ -514,11 +546,9 @@ function SelectorContent({
     if (drillSelection.kind === "loading") {
       return (
         <View style={styles.emptyState}>
-          <ActivityIndicator
-            size="small"
-            color={theme.colors.foregroundMuted}
-            style={styles.rowSpinner}
-          />
+          <View style={styles.rowSpinner}>
+            <ThemedLoadingSpinner size={ICON_SIZE.sm} uniProps={foregroundMutedMapping} />
+          </View>
           <Text style={styles.emptyStateText}>{t("modelSelector.loadingShort")}</Text>
         </View>
       );
@@ -585,9 +615,10 @@ export function CombinedModelSelector({
   isRetryingProvider = false,
   disabled = false,
   serverId = null,
+  desktopPlacement,
+  desktopMinWidth,
   triggerFill = false,
 }: CombinedModelSelectorProps) {
-  const { theme } = useUnistyles();
   const { t } = useTranslation();
   const anchorRef = useRef<View>(null);
   const [isOpen, setIsOpen] = useState(false);
@@ -643,7 +674,6 @@ export function CombinedModelSelector({
   );
 
   const hasSelectedProvider = selectedProvider.trim().length > 0;
-  const ProviderIcon = hasSelectedProvider ? getProviderIcon(selectedProvider) : null;
 
   const selectedModelLabel = useMemo(() => {
     return resolveSelectedModelLabel({
@@ -750,7 +780,6 @@ export function CombinedModelSelector({
     if (view.kind === "all") {
       return { title: t("modelSelector.title") };
     }
-    const ProviderIconForView = getProviderIcon(view.providerId);
     const headerActions = (
       <Pressable
         onPress={openProviderSettings}
@@ -763,17 +792,12 @@ export function CombinedModelSelector({
         })}
         testID={`selector-header-settings-${view.providerId}`}
       >
-        <Settings
-          size={theme.iconSize.sm}
-          color={!serverId ? theme.colors.border : theme.colors.foregroundMuted}
-        />
+        <HeaderSettingsIcon disabled={!serverId} />
       </Pressable>
     );
     return {
       title: view.providerLabel,
-      leading: ProviderIconForView ? (
-        <ProviderIconForView size={theme.iconSize.md} color={theme.colors.foreground} />
-      ) : undefined,
+      leading: <ProviderGlyph provider={view.providerId} size={ICON_SIZE.md} tone="foreground" />,
       back: singleProviderView ? undefined : { onPress: handleBackToAll },
       actions: headerActions,
       search: {
@@ -789,15 +813,10 @@ export function CombinedModelSelector({
     singleProviderView,
     serverId,
     openProviderSettings,
-    theme.colors.border,
-    theme.colors.foregroundMuted,
     handleBackToAll,
     handleSearchQueryChange,
     searchResetKey,
     t,
-    theme.iconSize.md,
-    theme.iconSize.sm,
-    theme.colors.foreground,
   ]);
 
   return (
@@ -835,8 +854,8 @@ export function CombinedModelSelector({
           accessibilityLabel={t("modelSelector.selectedModel", { model: selectedModelLabel })}
           testID="combined-model-selector"
         >
-          {ProviderIcon ? (
-            <ProviderIcon size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
+          {hasSelectedProvider ? (
+            <ProviderGlyph provider={selectedProvider} size={ICON_SIZE.md} />
           ) : null}
           <Text style={styles.triggerText} numberOfLines={1} ellipsizeMode="tail">
             {triggerLabel}
@@ -850,8 +869,8 @@ export function CombinedModelSelector({
         open={isOpen}
         onOpenChange={handleOpenChange}
         anchorRef={anchorRef}
-        desktopPlacement="top-start"
-        desktopMinWidth={360}
+        desktopPlacement={desktopPlacement}
+        desktopMinWidth={desktopMinWidth}
         desktopFixedHeight={desktopFixedHeight}
         header={sheetHeader}
         mobileChildrenScrollEnabled={view.kind !== "provider" || !isNative}
@@ -872,7 +891,7 @@ export function CombinedModelSelector({
           />
         ) : (
           <View style={styles.sheetLoadingState}>
-            <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
+            <ThemedLoadingSpinner size={ICON_SIZE.sm} uniProps={foregroundMutedMapping} />
             <Text style={styles.sheetLoadingText}>{t("modelSelector.loadingSelector")}</Text>
           </View>
         )}
@@ -1044,4 +1063,10 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.sm,
   },
+  providerIconMuted: {
+    color: theme.colors.foregroundMuted,
+  },
+  providerIconForeground: {
+    color: theme.colors.foreground,
+  },
 }));

packages/app/src/components/compact-explorer-sidebar-host.tsx

@@ -4,7 +4,7 @@ import { GestureDetector } from "react-native-gesture-handler";
 import { useActiveWorkspaceSelection } from "@/stores/navigation-active-workspace-store";
 import { useWorkspace } from "@/stores/session-store-hooks";
 import { CompactExplorerSidebar } from "@/components/explorer-sidebar";
-import { useExplorerOpenGesture } from "@/hooks/use-explorer-open-gesture";
+import { useOpenFileExplorerGesture } from "@/mobile-panels/gestures";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
 import { selectIsFileExplorerOpen, usePanelStore } from "@/stores/panel-store";
 import { useWorkspaceLayoutStore } from "@/stores/workspace-layout-store";
@@ -29,7 +29,7 @@ function CompactExplorerOpenGestureSurface({
   enabled,
   onOpenExplorer,
 }: CompactExplorerOpenGestureSurfaceProps) {
-  const explorerOpenGesture = useExplorerOpenGesture({
+  const explorerOpenGesture = useOpenFileExplorerGesture({
     enabled,
     onOpen: onOpenExplorer,
   });

packages/app/src/components/context-window-meter.tsx

@@ -117,7 +117,7 @@ export function ContextWindowMeter({
     (nextOpen: boolean) => {
       setIsTooltipOpen(nextOpen);
       if (nextOpen) {
-        void refreshProviderUsage();
+        void refreshProviderUsage().catch(() => {});
       }
     },
     [refreshProviderUsage],

packages/app/src/components/diff-scroll.tsx

@@ -8,7 +8,7 @@ import {
 } from "react-native";
 import { ScrollView, type ScrollView as ScrollViewType } from "react-native-gesture-handler";
 import { useHorizontalScrollOptional } from "@/contexts/horizontal-scroll-context";
-import { useExplorerSidebarAnimationOptional } from "@/contexts/explorer-sidebar-animation-context";
+import { useFileExplorerCloseGestureRef } from "@/mobile-panels/gestures";
 
 interface DiffScrollProps {
   children: React.ReactNode;
@@ -30,9 +30,7 @@ export function DiffScroll({
   const scrollId = useId();
   const scrollViewRef = useRef<ScrollViewType>(null);
 
-  // Get the close gesture ref from animation context (may not be available outside sidebar)
-  const animation = useExplorerSidebarAnimationOptional();
-  const closeGestureRef = animation?.closeGestureRef;
+  const closeGestureRef = useFileExplorerCloseGestureRef();
 
   // Register/unregister scroll offset tracking
   useEffect(() => {

packages/app/src/components/explorer-sidebar.tsx

@@ -29,10 +29,9 @@ import {
   MAX_EXPLORER_SIDEBAR_WIDTH,
   type ExplorerTab,
 } from "@/stores/panel-store";
-import { useExplorerSidebarAnimation } from "@/contexts/explorer-sidebar-animation-context";
-import { useSidebarAnimation } from "@/contexts/sidebar-animation-context";
 import { useToast } from "@/contexts/toast-context";
-import { canCloseRightSidebarGesture } from "@/utils/sidebar-animation-state";
+import { useCloseFileExplorerGesture } from "@/mobile-panels/gestures";
+import { MobilePanelOverlay } from "@/mobile-panels/presentation";
 import { HEADER_INNER_HEIGHT } from "@/constants/layout";
 import { GitDiffPane } from "@/git/diff-pane";
 import { FileExplorerPane } from "./file-explorer-pane";
@@ -91,25 +90,11 @@ export function CompactExplorerSidebar({
     workspaceRoot,
     isGit,
   });
-  const closeTouchStartX = useSharedValue(0);
-  const closeTouchStartY = useSharedValue(0);
-  const { mobilePanelState, gestureAnimatingRef: mobilePanelGestureAnimatingRef } =
-    useSidebarAnimation();
   const { style: mobileKeyboardInsetStyle } = useKeyboardShiftStyle({
     mode: "padding",
     enabled: true,
   });
-  const {
-    translateX,
-    backdropOpacity,
-    windowWidth,
-    animateToOpen,
-    animateToClose,
-    overlayVisible,
-    isGesturing,
-    gestureAnimatingRef,
-    closeGestureRef,
-  } = useExplorerSidebarAnimation();
+  const { gesture: closeGesture } = useCloseFileExplorerGesture();
 
   const handleClose = useCallback(
     (reason: string) => {
@@ -122,184 +107,38 @@ export function CompactExplorerSidebar({
     [isOpen, showMobileAgent],
   );
 
-  const handleCloseFromGesture = useCallback(() => {
-    gestureAnimatingRef.current = true;
-    mobilePanelGestureAnimatingRef.current = true;
-    showMobileAgent();
-  }, [gestureAnimatingRef, mobilePanelGestureAnimatingRef, showMobileAgent]);
-
   const handleHeaderClose = useCallback(() => handleClose("header-close-button"), [handleClose]);
 
-  // Swipe gesture to close (swipe right on mobile)
-  const closeGesture = useMemo(
-    () =>
-      Gesture.Pan()
-        .withRef(closeGestureRef)
-        .enabled(true)
-        // Use manual activation so child views keep touch streams
-        // unless we detect an intentional right-swipe close.
-        .manualActivation(true)
-        .onTouchesDown((event) => {
-          const touch = event.changedTouches[0];
-          if (!touch) {
-            return;
-          }
-          closeTouchStartX.value = touch.absoluteX;
-          closeTouchStartY.value = touch.absoluteY;
-        })
-        .onTouchesMove((event, stateManager) => {
-          const touch = event.changedTouches[0];
-          if (!touch || event.numberOfTouches !== 1) {
-            stateManager.fail();
-            return;
-          }
-
-          const deltaX = touch.absoluteX - closeTouchStartX.value;
-          const deltaY = touch.absoluteY - closeTouchStartY.value;
-          const absDeltaX = Math.abs(deltaX);
-          const absDeltaY = Math.abs(deltaY);
-
-          if (!canCloseRightSidebarGesture(mobilePanelState.value)) {
-            stateManager.fail();
-            return;
-          }
-
-          // Fail quickly on clear leftward or vertical intent so child views keep control.
-          if (deltaX <= -10) {
-            stateManager.fail();
-            return;
-          }
-          if (absDeltaY > 10 && absDeltaY > absDeltaX) {
-            stateManager.fail();
-            return;
-          }
-
-          // Activate only on intentional rightward movement.
-          if (deltaX >= 15 && absDeltaX > absDeltaY) {
-            stateManager.activate();
-          }
-        })
-        .onStart(() => {
-          isGesturing.value = true;
-        })
-        .onUpdate((event) => {
-          // Right sidebar: swipe right to close (positive translationX)
-          const newTranslateX = Math.max(0, Math.min(windowWidth, event.translationX));
-          translateX.value = newTranslateX;
-          const progress = 1 - newTranslateX / windowWidth;
-          backdropOpacity.value = Math.max(0, Math.min(1, progress));
-        })
-        .onEnd((event) => {
-          isGesturing.value = false;
-          const shouldClose = event.translationX > windowWidth / 3 || event.velocityX > 500;
-          runOnJS(logExplorerSidebar)("closeGestureEnd", {
-            translationX: event.translationX,
-            velocityX: event.velocityX,
-            shouldClose,
-            windowWidth,
-          });
-          if (shouldClose) {
-            animateToClose();
-            runOnJS(handleCloseFromGesture)();
-          } else {
-            animateToOpen();
-          }
-        })
-        .onFinalize(() => {
-          isGesturing.value = false;
-        }),
-    [
-      windowWidth,
-      translateX,
-      backdropOpacity,
-      mobilePanelState,
-      animateToOpen,
-      animateToClose,
-      handleCloseFromGesture,
-      isGesturing,
-      closeGestureRef,
-      closeTouchStartX,
-      closeTouchStartY,
-    ],
-  );
-
-  const sidebarAnimatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: translateX.value }],
-  }));
-
-  const backdropAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: backdropOpacity.value,
-  }));
-
-  const backdropCombinedStyle = useMemo(
-    () => [
-      explorerStaticStyles.backdrop,
-      backdropAnimatedStyle,
-      // pointerEvents is React-owned, not worklet-owned: Reanimated never
-      // touches it, so a stale animated-prop revert can't wedge an invisible
-      // tap-eating backdrop.
-      { pointerEvents: isOpen ? ("auto" as const) : ("none" as const) },
-    ],
-    [backdropAnimatedStyle, isOpen],
-  );
   const mobileSidebarStyle = useMemo(
     () => [
-      explorerStaticStyles.mobileSidebar,
       {
-        width: windowWidth,
         paddingTop: insets.top,
         backgroundColor: theme.colors.surfaceSidebar,
       },
-      sidebarAnimatedStyle,
-      mobileKeyboardInsetStyle,
-    ],
-    [
-      windowWidth,
-      insets.top,
-      theme.colors.surfaceSidebar,
-      sidebarAnimatedStyle,
       mobileKeyboardInsetStyle,
     ],
+    [insets.top, theme.colors.surfaceSidebar, mobileKeyboardInsetStyle],
   );
-  // display is React-owned on the plain wrapper View (no animated styles), so
-  // a hidden overlay stays hidden no matter what Reanimated's Fabric overlay
-  // reverts the panel transform to after a heavy commit (reanimated#9635).
-  const overlayStyle = useMemo(
-    () => [
-      StyleSheet.absoluteFillObject,
-      { display: overlayVisible ? ("flex" as const) : ("none" as const) },
-    ],
-    [overlayVisible],
-  );
-
-  // Mobile: full-screen overlay with gesture.
-  // On web, keep it interactive only while open so closed sidebars don't eat taps.
-  let overlayPointerEvents: "auto" | "none" | "box-none";
-  if (!isWeb) overlayPointerEvents = "box-none";
-  else if (isOpen) overlayPointerEvents = "auto";
-  else overlayPointerEvents = "none";
 
   return (
-    <View style={overlayStyle} pointerEvents={overlayPointerEvents}>
-      <Animated.View style={backdropCombinedStyle} />
-
-      <GestureDetector gesture={closeGesture} touchAction="pan-y">
-        <Animated.View style={mobileSidebarStyle} pointerEvents="auto">
-          <ExplorerSidebarContent
-            activeTab={explorerTab}
-            onTabPress={handleTabPress}
-            onClose={handleHeaderClose}
-            serverId={serverId}
-            workspaceId={workspaceId}
-            workspaceRoot={workspaceRoot}
-            isGit={isGit}
-            isMobile
-            isOpen={isOpen}
-            onOpenFile={onOpenFile}
-          />
-        </Animated.View>
-      </GestureDetector>
-    </View>
+    <MobilePanelOverlay
+      panel="file-explorer"
+      closeGesture={closeGesture}
+      panelStyle={mobileSidebarStyle}
+    >
+      <ExplorerSidebarContent
+        activeTab={explorerTab}
+        onTabPress={handleTabPress}
+        onClose={handleHeaderClose}
+        serverId={serverId}
+        workspaceId={workspaceId}
+        workspaceRoot={workspaceRoot}
+        isGit={isGit}
+        isMobile
+        isOpen={isOpen}
+        onOpenFile={onOpenFile}
+      />
+    </MobilePanelOverlay>
   );
 }
 
@@ -604,17 +443,6 @@ function PrTabContent({
 // avoid the "Unable to find node on an unmounted component" crash when Unistyles
 // tries to patch the native node that Reanimated also manages.
 const explorerStaticStyles = RNStyleSheet.create({
-  backdrop: {
-    ...RNStyleSheet.absoluteFillObject,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-  },
-  mobileSidebar: {
-    position: "absolute" as const,
-    top: 0,
-    right: 0,
-    bottom: 0,
-    overflow: "hidden" as const,
-  },
   desktopSidebar: {
     position: "relative" as const,
   },

packages/app/src/components/file-explorer-pane.tsx

@@ -19,7 +19,6 @@ import * as Clipboard from "expo-clipboard";
 import { SvgXml } from "react-native-svg";
 import {
   ChevronDown,
-  ChevronRight,
   Copy,
   Download,
   Eye,
@@ -28,6 +27,7 @@ import {
   RotateCw,
 } from "lucide-react-native";
 import { getFileIconSvg } from "@/components/material-file-icons";
+import { TreeChevron, TreeIndentGuides, TREE_INDENT_PER_LEVEL } from "@/components/tree-primitives";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import type { AgentFileExplorerState, ExplorerEntry } from "@/stores/session-store";
 import { useHosts } from "@/runtime/host-runtime";
@@ -55,8 +55,6 @@ const SORT_OPTIONS: { value: SortOption }[] = [
   { value: "size" },
 ];
 
-const INDENT_PER_LEVEL = 16;
-
 function formatFileSize({ size }: { size: number }): string {
   if (size < 1024) {
     return `${size} B`;
@@ -129,7 +127,7 @@ function TreeRowItem({
   const pressableStyle = useCallback(
     ({ hovered, pressed }: PressableStateCallbackType & { hovered?: boolean }) => [
       styles.entryRow,
-      { paddingLeft: theme.spacing[2] + depth * INDENT_PER_LEVEL },
+      { paddingLeft: theme.spacing[2] + depth * TREE_INDENT_PER_LEVEL },
       (Boolean(hovered) || pressed || isSelected) && styles.entryRowActive,
     ],
     [depth, isSelected, theme.spacing],
@@ -143,11 +141,6 @@ function TreeRowItem({
     onDownloadEntry(entry);
   }, [onDownloadEntry, entry]);
 
-  const chevronStyle = useMemo(
-    () => [styles.chevron, isExpanded && styles.chevronExpanded],
-    [isExpanded],
-  );
-
   const copyLeading = useMemo(
     () => <Copy size={14} color={theme.colors.foregroundMuted} />,
     [theme.colors.foregroundMuted],
@@ -159,7 +152,7 @@ function TreeRowItem({
 
   return (
     <Pressable onPress={handlePress} style={pressableStyle}>
-      {depth > 0 && Array.from({ length: depth }, (_, i) => <IndentGuide key={i} index={i} />)}
+      <TreeIndentGuides depth={depth} />
       <View style={styles.entryInfo}>
         <View style={styles.entryIcon}>
           {(() => {
@@ -167,11 +160,7 @@ function TreeRowItem({
               return <SvgXml xml={getFileIconSvg(entry.name)} width={16} height={16} />;
             }
             if (loading) return <ActivityIndicator size="small" />;
-            return (
-              <View style={chevronStyle}>
-                <ChevronRight size={16} color={theme.colors.foregroundMuted} />
-              </View>
-            );
+            return <TreeChevron expanded={isExpanded} />;
           })()}
         </View>
         <Text style={styles.entryName} numberOfLines={1}>
@@ -1149,13 +1138,6 @@ const styles = StyleSheet.create((theme) => ({
   entryRowActive: {
     backgroundColor: theme.colors.surfaceSidebarHover,
   },
-  indentGuide: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    width: 1,
-    backgroundColor: theme.colors.surface2,
-  },
   entryInfo: {
     flex: 1,
     flexDirection: "row",
@@ -1163,16 +1145,6 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
     minWidth: 0,
   },
-  chevron: {
-    width: 16,
-    height: 16,
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-  },
-  chevronExpanded: {
-    transform: [{ rotate: "90deg" }],
-  },
   entryIcon: {
     flexShrink: 0,
   },
@@ -1302,16 +1274,3 @@ const styles = StyleSheet.create((theme) => ({
 }));
 
 const TREE_PANE_CONTAINER_STYLE = [styles.treePane, styles.treePaneFill];
-
-interface IndentGuideProps {
-  index: number;
-}
-
-function IndentGuide({ index }: IndentGuideProps) {
-  const { theme } = useUnistyles();
-  const guideStyle = useMemo(
-    () => [styles.indentGuide, { left: theme.spacing[3] + index * INDENT_PER_LEVEL + 4 }],
-    [index, theme.spacing],
-  );
-  return <View style={guideStyle} />;
-}

packages/app/src/components/hosts/host-picker-constants.ts

@@ -1,5 +1,6 @@
 export const ADD_HOST_OPTION_ID = "__add_host__";
 export const ALL_HOSTS_OPTION_ID = "__all_hosts__";
+export const ENABLE_BUILT_IN_DAEMON_OPTION_ID = "__enable_built_in_daemon__";
 
 export function getHostPickerLabel(
   hosts: Array<{ label: string; serverId: string }>,

packages/app/src/components/hosts/host-picker.tsx

@@ -11,10 +11,16 @@ import { orderHostsLocalFirst } from "@/types/host-connection";
 import {
   ADD_HOST_OPTION_ID,
   ALL_HOSTS_OPTION_ID,
+  ENABLE_BUILT_IN_DAEMON_OPTION_ID,
   getHostPickerLabel,
 } from "./host-picker-constants";
 
-export { ADD_HOST_OPTION_ID, ALL_HOSTS_OPTION_ID, getHostPickerLabel };
+export {
+  ADD_HOST_OPTION_ID,
+  ALL_HOSTS_OPTION_ID,
+  ENABLE_BUILT_IN_DAEMON_OPTION_ID,
+  getHostPickerLabel,
+};
 
 const SEARCHABLE_THRESHOLD = 10;
 type RenderHostOption = NonNullable<ComboboxProps["renderOption"]>;
@@ -115,6 +121,12 @@ export function HostPickerOption({
   );
 }
 
+const SYSTEM_HOST_PICKER_OPTION_LABELS: Record<"add" | "all" | "enableBuiltInDaemon", string> = {
+  add: "Add host",
+  all: "All hosts",
+  enableBuiltInDaemon: "Enable built-in daemon",
+};
+
 function SystemHostPickerOption({
   active,
   selected,
@@ -125,12 +137,12 @@ function SystemHostPickerOption({
   active: boolean;
   selected?: boolean;
   onPress: () => void;
-  kind: "add" | "all";
+  kind: "add" | "all" | "enableBuiltInDaemon";
   testID?: string;
 }): ReactElement {
   const { theme } = useUnistyles();
   const Icon = kind === "add" ? Plus : Server;
-  const label = kind === "add" ? "Add host" : "All hosts";
+  const label = SYSTEM_HOST_PICKER_OPTION_LABELS[kind];
   const leadingSlot = useMemo(
     () => <Icon size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />,
     [Icon, theme.colors.foregroundMuted, theme.iconSize.sm],
@@ -158,11 +170,13 @@ export interface HostPickerProps {
   includeAllHost?: boolean;
   includeAddHost?: boolean;
   onAddHost?: () => void;
+  includeEnableBuiltInDaemon?: boolean;
+  onEnableBuiltInDaemon?: () => void;
   showActiveConnection?: boolean;
   onOpenHostSettings?: (serverId: string) => void;
   searchable?: boolean;
   title?: string;
-  desktopPlacement?: "top-start" | "bottom-start";
+  desktopPlacement?: ComboboxProps["desktopPlacement"];
   desktopMinWidth?: number;
   addHostTestID?: string;
   hostOptionTestID?: (serverId: string) => string;
@@ -179,11 +193,13 @@ export function HostPicker({
   includeAllHost,
   includeAddHost,
   onAddHost,
+  includeEnableBuiltInDaemon,
+  onEnableBuiltInDaemon,
   showActiveConnection,
   onOpenHostSettings,
   searchable,
   title,
-  desktopPlacement = "top-start",
+  desktopPlacement = "bottom-start",
   desktopMinWidth,
   addHostTestID,
   hostOptionTestID,
@@ -199,8 +215,13 @@ export function HostPicker({
     const hostOptions = orderedHosts.map((host) => ({ id: host.serverId, label: host.label }));
     if (includeAllHost) hostOptions.unshift({ id: ALL_HOSTS_OPTION_ID, label: "All hosts" });
     if (includeAddHost) hostOptions.push({ id: ADD_HOST_OPTION_ID, label: "Add host" });
+    if (includeEnableBuiltInDaemon)
+      hostOptions.push({
+        id: ENABLE_BUILT_IN_DAEMON_OPTION_ID,
+        label: "Enable built-in daemon",
+      });
     return hostOptions;
-  }, [orderedHosts, includeAllHost, includeAddHost]);
+  }, [orderedHosts, includeAllHost, includeAddHost, includeEnableBuiltInDaemon]);
 
   const isSearchable = searchable === true && orderedHosts.length > SEARCHABLE_THRESHOLD;
 
@@ -208,12 +229,14 @@ export function HostPicker({
     (id: string) => {
       if (id === ADD_HOST_OPTION_ID) {
         onAddHost?.();
+      } else if (id === ENABLE_BUILT_IN_DAEMON_OPTION_ID) {
+        onEnableBuiltInDaemon?.();
       } else {
         onSelect(id);
       }
       onOpenChange(false);
     },
-    [onAddHost, onOpenChange, onSelect],
+    [onAddHost, onEnableBuiltInDaemon, onOpenChange, onSelect],
   );
 
   const handleOpenHostSettings = useCallback(
@@ -246,6 +269,11 @@ export function HostPicker({
           />
         );
       }
+      if (option.id === ENABLE_BUILT_IN_DAEMON_OPTION_ID) {
+        return (
+          <SystemHostPickerOption kind="enableBuiltInDaemon" active={active} onPress={onPress} />
+        );
+      }
       return (
         <HostPickerOption
           serverId={option.id}

packages/app/src/components/left-sidebar.tsx

@@ -21,13 +21,7 @@ import {
   type PressableStateCallbackType,
 } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, {
-  Extrapolation,
-  interpolate,
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-} from "react-native-reanimated";
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
@@ -38,19 +32,14 @@ import { Shortcut } from "@/components/ui/shortcut";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { isWeb } from "@/constants/platform";
-import { useSidebarAnimation } from "@/contexts/sidebar-animation-context";
 import { useOpenProjectPicker } from "@/hooks/use-open-project-picker";
 import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
-import { useSidebarShortcutModel } from "@/hooks/use-sidebar-shortcut-model";
 import { canCreateWorktreeForProjectKind } from "@/projects/host-projects";
 import { useHostFeature } from "@/runtime/host-features";
-import {
-  type SidebarProjectEntry,
-  type SidebarStatusWorkspacePlacement,
-  useSidebarWorkspacesList,
-} from "@/hooks/use-sidebar-workspaces-list";
-import { useStatusModeWorkspacePlacements } from "@/hooks/use-status-mode-workspaces";
-import { useSidebarViewStore, type SidebarGroupMode } from "@/stores/sidebar-view-store";
+import { type SidebarProjectEntry } from "@/hooks/use-sidebar-workspaces-list";
+import { useSidebarModel } from "@/components/sidebar/sidebar-model";
+import type { StatusGroup } from "@/hooks/sidebar-status-view-model";
+import { type SidebarGroupMode } from "@/stores/sidebar-view-store";
 import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
 import { useHosts } from "@/runtime/host-runtime";
 import { useActiveWorkspaceSelection } from "@/stores/navigation-active-workspace-store";
@@ -62,7 +51,8 @@ import {
   usePanelStore,
 } from "@/stores/panel-store";
 import { useWindowControlsPadding } from "@/utils/desktop-window";
-import { canCloseLeftSidebarGesture } from "@/utils/sidebar-animation-state";
+import { useCloseAgentListGesture } from "@/mobile-panels/gestures";
+import { MobilePanelOverlay } from "@/mobile-panels/presentation";
 import {
   buildOpenProjectRoute,
   buildNewWorkspaceRoute,
@@ -79,25 +69,20 @@ import { SidebarWorkspaceList } from "./sidebar-workspace-list";
 
 const MIN_CHAT_WIDTH = 400;
 
-type SidebarShortcutModel = ReturnType<typeof useSidebarShortcutModel>;
 type SidebarTheme = ReturnType<typeof useUnistyles>["theme"];
 
-interface LeftSidebarProps {
-  selectedAgentId?: string;
-}
-
 interface SidebarSharedProps {
   theme: SidebarTheme;
-  statusWorkspacePlacements: SidebarStatusWorkspacePlacement[];
+  statusGroups: StatusGroup[];
   projects: SidebarProjectEntry[];
   projectNamesByKey: Map<string, string>;
   isInitialLoad: boolean;
   isRevalidating: boolean;
   isManualRefresh: boolean;
   groupMode: SidebarGroupMode;
-  collapsedProjectKeys: SidebarShortcutModel["collapsedProjectKeys"];
-  shortcutIndexByWorkspaceKey: SidebarShortcutModel["shortcutIndexByWorkspaceKey"];
-  toggleProjectCollapsed: SidebarShortcutModel["toggleProjectCollapsed"];
+  collapsedProjectKeys: ReadonlySet<string>;
+  shortcutIndexByWorkspaceKey: Map<string, number>;
+  toggleProjectCollapsed: (projectKey: string) => void;
   handleRefresh: () => void;
   handleOpenProject: () => void;
   handleHome: () => void;
@@ -123,7 +108,6 @@ interface SidebarLabels {
 interface MobileSidebarProps extends SidebarSharedProps {
   insetsTop: number;
   insetsBottom: number;
-  isOpen: boolean;
   closeSidebar: () => void;
   handleViewMoreNavigate: () => void;
   handleViewSchedulesNavigate: () => void;
@@ -136,11 +120,7 @@ interface DesktopSidebarProps extends SidebarSharedProps {
   handleViewSchedules: () => void;
 }
 
-export const LeftSidebar = memo(function LeftSidebar({
-  selectedAgentId: _selectedAgentId,
-}: LeftSidebarProps) {
-  void _selectedAgentId;
-
+export const LeftSidebar = memo(function LeftSidebar() {
   const { theme } = useUnistyles();
   const { t } = useTranslation();
   const insets = useSafeAreaInsets();
@@ -151,22 +131,18 @@ export const LeftSidebar = memo(function LeftSidebar({
   const showMobileAgent = usePanelStore((state) => state.showMobileAgent);
 
   const {
-    workspacePlacements,
     projects,
     projectNamesByKey,
     isInitialLoad,
     isRevalidating,
     refreshAll,
-  } = useSidebarWorkspacesList({
-    enabled: isCompactLayout || isOpen,
-  });
-  const statusWorkspacePlacements = useStatusModeWorkspacePlacements({
-    placements: workspacePlacements,
-  });
-  const { collapsedProjectKeys, shortcutIndexByWorkspaceKey, toggleProjectCollapsed } =
-    useSidebarShortcutModel({ projects });
-
-  const groupMode = useSidebarViewStore((state) => state.groupMode);
+    statusGroups,
+    collapsedProjectKeys,
+    toggleProjectCollapsed,
+    groupMode,
+    shortcutModel,
+  } = useSidebarModel();
+  const { shortcutIndexByWorkspaceKey } = shortcutModel;
 
   const [isManualRefresh, setIsManualRefresh] = useState(false);
 
@@ -257,7 +233,7 @@ export const LeftSidebar = memo(function LeftSidebar({
 
   const sharedProps = {
     theme,
-    statusWorkspacePlacements,
+    statusGroups,
     projects,
     projectNamesByKey,
     isInitialLoad,
@@ -278,7 +254,6 @@ export const LeftSidebar = memo(function LeftSidebar({
         {...sharedProps}
         insetsTop={insets.top}
         insetsBottom={insets.bottom}
-        isOpen={isOpen}
         closeSidebar={showMobileAgent}
         handleOpenProject={handleOpenProjectMobile}
         handleHome={handleHomeMobile}
@@ -385,6 +360,7 @@ function SidebarHostPicker({
       showActiveConnection
       onOpenHostSettings={onOpenHostSettings}
       searchable
+      desktopPlacement="top-start"
       desktopMinWidth={240}
       addHostTestID="sidebar-host-add"
       hostOptionTestID={sidebarHostOptionTestID}
@@ -555,7 +531,7 @@ function SidebarFooter({
 
 function MobileSidebar({
   theme,
-  statusWorkspacePlacements,
+  statusGroups,
   projects,
   projectNamesByKey,
   isInitialLoad,
@@ -575,7 +551,6 @@ function MobileSidebar({
   handleOpenHostSettings,
   insetsTop,
   insetsBottom,
-  isOpen,
   closeSidebar,
   handleViewMoreNavigate,
   handleViewSchedulesNavigate,
@@ -583,268 +558,118 @@ function MobileSidebar({
   const pathname = usePathname();
   const isSessionsActive = pathname.includes("/sessions");
   const isSchedulesActive = pathname.includes("/schedules");
-  const {
-    translateX,
-    backdropOpacity,
-    windowWidth,
-    animateToOpen,
-    animateToClose,
-    overlayVisible,
-    isGesturing,
-    mobilePanelState,
-    gestureAnimatingRef,
-    closeGestureRef,
-  } = useSidebarAnimation();
-  const closeTouchStartX = useSharedValue(0);
-  const closeTouchStartY = useSharedValue(0);
-
-  const handleCloseFromGesture = useCallback(() => {
-    gestureAnimatingRef.current = true;
-    closeSidebar();
-  }, [closeSidebar, gestureAnimatingRef]);
+  const { gesture: closeGesture, gestureRef: closeGestureRef } = useCloseAgentListGesture();
 
   const handleViewMore = useCallback(() => {
-    translateX.value = -windowWidth;
-    backdropOpacity.value = 0;
     closeSidebar();
     handleViewMoreNavigate();
-  }, [backdropOpacity, closeSidebar, handleViewMoreNavigate, translateX, windowWidth]);
+  }, [closeSidebar, handleViewMoreNavigate]);
 
   const handleViewSchedules = useCallback(() => {
-    translateX.value = -windowWidth;
-    backdropOpacity.value = 0;
     closeSidebar();
     handleViewSchedulesNavigate();
-  }, [backdropOpacity, closeSidebar, handleViewSchedulesNavigate, translateX, windowWidth]);
+  }, [closeSidebar, handleViewSchedulesNavigate]);
 
   const handleWorkspacePress = useCallback(() => {
     closeSidebar();
   }, [closeSidebar]);
 
-  const closeGesture = useMemo(
-    () =>
-      Gesture.Pan()
-        .withRef(closeGestureRef)
-        .enabled(true)
-        .manualActivation(true)
-        .onTouchesDown((event) => {
-          const touch = event.changedTouches[0];
-          if (!touch) {
-            return;
-          }
-          closeTouchStartX.value = touch.absoluteX;
-          closeTouchStartY.value = touch.absoluteY;
-        })
-        .onTouchesMove((event, stateManager) => {
-          const touch = event.changedTouches[0];
-          if (!touch || event.numberOfTouches !== 1) {
-            stateManager.fail();
-            return;
-          }
-
-          const deltaX = touch.absoluteX - closeTouchStartX.value;
-          const deltaY = touch.absoluteY - closeTouchStartY.value;
-          const absDeltaX = Math.abs(deltaX);
-          const absDeltaY = Math.abs(deltaY);
-
-          if (!canCloseLeftSidebarGesture(mobilePanelState.value)) {
-            stateManager.fail();
-            return;
-          }
-
-          if (deltaX >= 10) {
-            stateManager.fail();
-            return;
-          }
-          if (absDeltaY > 10 && absDeltaY > absDeltaX) {
-            stateManager.fail();
-            return;
-          }
-          if (deltaX <= -15 && absDeltaX > absDeltaY) {
-            stateManager.activate();
-          }
-        })
-        .onStart(() => {
-          isGesturing.value = true;
-        })
-        .onUpdate((event) => {
-          const newTranslateX = Math.min(0, Math.max(-windowWidth, event.translationX));
-          translateX.value = newTranslateX;
-          backdropOpacity.value = interpolate(
-            newTranslateX,
-            [-windowWidth, 0],
-            [0, 1],
-            Extrapolation.CLAMP,
-          );
-        })
-        .onEnd((event) => {
-          isGesturing.value = false;
-          const shouldClose = event.translationX < -windowWidth / 3 || event.velocityX < -500;
-          if (shouldClose) {
-            animateToClose();
-            runOnJS(handleCloseFromGesture)();
-          } else {
-            animateToOpen();
-          }
-        })
-        .onFinalize(() => {
-          isGesturing.value = false;
-        }),
-    [
-      closeGestureRef,
-      closeTouchStartX,
-      closeTouchStartY,
-      isGesturing,
-      mobilePanelState,
-      windowWidth,
-      translateX,
-      backdropOpacity,
-      animateToClose,
-      animateToOpen,
-      handleCloseFromGesture,
-    ],
-  );
-
   const mobileSidebarInsetStyle = useMemo(
-    () => ({ width: windowWidth, paddingTop: insetsTop, paddingBottom: insetsBottom }),
-    [windowWidth, insetsTop, insetsBottom],
-  );
-
-  const sidebarAnimatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: translateX.value }],
-  }));
-
-  const backdropAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: backdropOpacity.value,
-  }));
-
-  let overlayPointerEvents: "auto" | "none" | "box-none";
-  if (!isWeb) overlayPointerEvents = "box-none";
-  else if (isOpen) overlayPointerEvents = "auto";
-  else overlayPointerEvents = "none";
-
-  const backdropStyle = useMemo(
-    () => [
-      staticStyles.backdrop,
-      backdropAnimatedStyle,
-      // pointerEvents is React-owned, not worklet-owned: Reanimated never
-      // touches it, so a stale animated-prop revert can't wedge an invisible
-      // tap-eating backdrop.
-      { pointerEvents: isOpen ? ("auto" as const) : ("none" as const) },
-    ],
-    [backdropAnimatedStyle, isOpen],
-  );
-  const mobileSidebarStyle = useMemo(
-    () => [
-      staticStyles.mobileSidebar,
-      mobileSidebarInsetStyle,
-      sidebarAnimatedStyle,
-      { backgroundColor: theme.colors.surfaceSidebar },
-    ],
-    [mobileSidebarInsetStyle, sidebarAnimatedStyle, theme.colors.surfaceSidebar],
-  );
-  // display is React-owned on the plain wrapper View (no animated styles), so
-  // a hidden overlay stays hidden no matter what Reanimated's Fabric overlay
-  // reverts the panel transform to after a heavy commit (reanimated#9635).
-  const overlayStyle = useMemo(
-    () => [
-      StyleSheet.absoluteFillObject,
-      { display: overlayVisible ? ("flex" as const) : ("none" as const) },
-    ],
-    [overlayVisible],
+    () => ({
+      paddingTop: insetsTop,
+      paddingBottom: insetsBottom,
+      backgroundColor: theme.colors.surfaceSidebar,
+    }),
+    [insetsTop, insetsBottom, theme.colors.surfaceSidebar],
   );
 
   return (
-    <View style={overlayStyle} pointerEvents={overlayPointerEvents}>
-      <Animated.View style={backdropStyle} />
-
-      <GestureDetector gesture={closeGesture} touchAction="pan-y">
-        <Animated.View style={mobileSidebarStyle} pointerEvents="auto">
-          <View style={styles.sidebarContent} pointerEvents="auto">
-            <View style={styles.sidebarHeaderGroup}>
-              <SidebarNewWorkspaceHeaderRow
-                label={labels.newWorkspace}
-                testID="sidebar-global-new-workspace"
-                variant="compact"
-                shortcutKeys={newWorkspaceKeys}
-                onBeforeNavigate={closeSidebar}
-              />
-              <SidebarHeaderRow
-                icon={History}
-                label={labels.sessions}
-                onPress={handleViewMore}
-                isActive={isSessionsActive}
-                testID="sidebar-sessions"
-                variant="compact"
-              />
-              <SidebarHeaderRow
-                icon={CalendarClock}
-                label={labels.schedules}
-                onPress={handleViewSchedules}
-                isActive={isSchedulesActive}
-                testID="sidebar-schedules"
-                variant="compact"
-              />
-            </View>
-            <WorkspacesSectionHeader />
-            <Pressable
-              style={styles.mobileCloseButton}
-              onPress={closeSidebar}
-              testID="sidebar-close"
-              nativeID="sidebar-close"
-              accessible
-              accessibilityRole="button"
-              accessibilityLabel={labels.closeSidebar}
-              hitSlop={8}
-            >
-              {({ hovered, pressed }) => (
-                <X
-                  size={theme.iconSize.md}
-                  color={
-                    hovered || pressed ? theme.colors.foreground : theme.colors.foregroundMuted
-                  }
-                />
-              )}
-            </Pressable>
-
-            {isInitialLoad ? (
-              <SidebarAgentListSkeleton />
-            ) : (
-              <SidebarWorkspaceList
-                collapsedProjectKeys={collapsedProjectKeys}
-                onToggleProjectCollapsed={toggleProjectCollapsed}
-                shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
-                groupMode={groupMode}
-                statusWorkspacePlacements={statusWorkspacePlacements}
-                projects={projects}
-                projectNamesByKey={projectNamesByKey}
-                isRefreshing={isManualRefresh && isRevalidating}
-                onRefresh={handleRefresh}
-                onWorkspacePress={handleWorkspacePress}
-                onAddProject={handleOpenProject}
-                parentGestureRef={closeGestureRef}
-              />
-            )}
-
-            <SidebarFooter
-              theme={theme}
-              handleOpenProject={handleOpenProject}
-              handleHome={handleHome}
-              handleSettings={handleSettings}
-              labels={labels}
-              handleAddHost={handleAddHost}
-              handleOpenHostSettings={handleOpenHostSettings}
+    <MobilePanelOverlay
+      panel="agent-list"
+      closeGesture={closeGesture}
+      panelStyle={mobileSidebarInsetStyle}
+    >
+      <View style={styles.sidebarContent} pointerEvents="auto">
+        <View style={styles.sidebarHeaderGroup}>
+          <SidebarNewWorkspaceHeaderRow
+            label={labels.newWorkspace}
+            testID="sidebar-global-new-workspace"
+            variant="compact"
+            shortcutKeys={newWorkspaceKeys}
+            onBeforeNavigate={closeSidebar}
+          />
+          <SidebarHeaderRow
+            icon={History}
+            label={labels.sessions}
+            onPress={handleViewMore}
+            isActive={isSessionsActive}
+            testID="sidebar-sessions"
+            variant="compact"
+          />
+          <SidebarHeaderRow
+            icon={CalendarClock}
+            label={labels.schedules}
+            onPress={handleViewSchedules}
+            isActive={isSchedulesActive}
+            testID="sidebar-schedules"
+            variant="compact"
+          />
+        </View>
+        <WorkspacesSectionHeader />
+        <Pressable
+          style={styles.mobileCloseButton}
+          onPress={closeSidebar}
+          testID="sidebar-close"
+          nativeID="sidebar-close"
+          accessible
+          accessibilityRole="button"
+          accessibilityLabel={labels.closeSidebar}
+          hitSlop={8}
+        >
+          {({ hovered, pressed }) => (
+            <X
+              size={theme.iconSize.md}
+              color={hovered || pressed ? theme.colors.foreground : theme.colors.foregroundMuted}
             />
-          </View>
-        </Animated.View>
-      </GestureDetector>
-    </View>
+          )}
+        </Pressable>
+
+        {isInitialLoad ? (
+          <SidebarAgentListSkeleton />
+        ) : (
+          <SidebarWorkspaceList
+            collapsedProjectKeys={collapsedProjectKeys}
+            onToggleProjectCollapsed={toggleProjectCollapsed}
+            shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
+            groupMode={groupMode}
+            statusGroups={statusGroups}
+            projects={projects}
+            projectNamesByKey={projectNamesByKey}
+            isRefreshing={isManualRefresh && isRevalidating}
+            onRefresh={handleRefresh}
+            onWorkspacePress={handleWorkspacePress}
+            onAddProject={handleOpenProject}
+            parentGestureRef={closeGestureRef}
+          />
+        )}
+
+        <SidebarFooter
+          theme={theme}
+          handleOpenProject={handleOpenProject}
+          handleHome={handleHome}
+          handleSettings={handleSettings}
+          labels={labels}
+          handleAddHost={handleAddHost}
+          handleOpenHostSettings={handleOpenHostSettings}
+        />
+      </View>
+    </MobilePanelOverlay>
   );
 }
 
 function DesktopSidebar({
   theme,
-  statusWorkspacePlacements,
+  statusGroups,
   projects,
   projectNamesByKey,
   isInitialLoad,
@@ -969,7 +794,7 @@ function DesktopSidebar({
             onToggleProjectCollapsed={toggleProjectCollapsed}
             shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
             groupMode={groupMode}
-            statusWorkspacePlacements={statusWorkspacePlacements}
+            statusGroups={statusGroups}
             projects={projects}
             projectNamesByKey={projectNamesByKey}
             isRefreshing={isManualRefresh && isRevalidating}
@@ -1058,17 +883,6 @@ function WorkspacesSectionHeader() {
 // avoid the "Unable to find node on an unmounted component" crash when Unistyles
 // tries to patch the native node that Reanimated also manages.
 const staticStyles = RNStyleSheet.create({
-  backdrop: {
-    ...RNStyleSheet.absoluteFillObject,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-  },
-  mobileSidebar: {
-    position: "absolute" as const,
-    top: 0,
-    left: 0,
-    bottom: 0,
-    overflow: "hidden" as const,
-  },
   desktopSidebar: {
     position: "relative" as const,
   },

packages/app/src/components/message.tsx

@@ -3038,6 +3038,8 @@ interface ToolCallProps {
   onInlineDetailsHoverChange?: (hovered: boolean) => void;
   onInlineDetailsExpandedChange?: (expanded: boolean) => void;
   onOpenFilePath?: (filePath: string) => void;
+  defaultExpanded?: boolean;
+  forceInline?: boolean;
 }
 
 export const ToolCall = memo(function ToolCall({
@@ -3054,11 +3056,14 @@ export const ToolCall = memo(function ToolCall({
   onInlineDetailsHoverChange,
   onInlineDetailsExpandedChange,
   onOpenFilePath,
+  defaultExpanded,
+  forceInline = false,
 }: ToolCallProps) {
   const { openToolCall } = useToolCallSheet();
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded ?? false);
 
   const isMobile = useIsCompactFormFactor();
+  const shouldRenderInline = !isMobile || forceInline;
 
   const effectiveDetail = useMemo<ToolCallDetail | undefined>(() => {
     if (detail) {
@@ -3096,7 +3101,7 @@ export const ToolCall = memo(function ToolCall({
   }, [presentation.openFilePath, onOpenFilePath]);
 
   const handleToggle = useCallback(() => {
-    if (isMobile) {
+    if (!shouldRenderInline) {
       openToolCall({
         displayName: presentation.displayName,
         summary: presentation.summary,
@@ -3109,7 +3114,7 @@ export const ToolCall = memo(function ToolCall({
       setIsExpanded((prev) => !prev);
     }
   }, [
-    isMobile,
+    shouldRenderInline,
     openToolCall,
     presentation.displayName,
     presentation.summary,
@@ -3120,22 +3125,22 @@ export const ToolCall = memo(function ToolCall({
   ]);
 
   useEffect(() => {
-    if (!onInlineDetailsHoverChange || isMobile || isExpanded) {
+    if (!onInlineDetailsHoverChange || !shouldRenderInline || isExpanded) {
       return;
     }
     onInlineDetailsHoverChange(false);
-  }, [isExpanded, isMobile, onInlineDetailsHoverChange]);
+  }, [isExpanded, shouldRenderInline, onInlineDetailsHoverChange]);
 
   useEffect(() => {
     if (!onInlineDetailsExpandedChange) {
       return;
     }
-    if (isMobile) {
+    if (!shouldRenderInline) {
       onInlineDetailsExpandedChange(false);
       return;
     }
     onInlineDetailsExpandedChange(isExpanded);
-  }, [isExpanded, isMobile, onInlineDetailsExpandedChange]);
+  }, [isExpanded, shouldRenderInline, onInlineDetailsExpandedChange]);
 
   useEffect(() => {
     if (!onInlineDetailsExpandedChange) {
@@ -3148,7 +3153,7 @@ export const ToolCall = memo(function ToolCall({
 
   // Render inline details for desktop
   const renderDetails = useCallback(() => {
-    if (isMobile) return null;
+    if (!shouldRenderInline) return null;
     return (
       <ToolCallDetailsContent
         detail={effectiveDetail}
@@ -3157,7 +3162,7 @@ export const ToolCall = memo(function ToolCall({
         showLoadingSkeleton={presentation.isLoadingDetails}
       />
     );
-  }, [isMobile, effectiveDetail, presentation.errorText, presentation.isLoadingDetails]);
+  }, [shouldRenderInline, effectiveDetail, presentation.errorText, presentation.isLoadingDetails]);
 
   if (presentation.isPlan && effectiveDetail?.type === "plan") {
     return (
@@ -3175,10 +3180,10 @@ export const ToolCall = memo(function ToolCall({
       label={presentation.displayName}
       secondaryLabel={presentation.summary}
       icon={presentation.icon}
-      isExpanded={!isMobile && isExpanded}
+      isExpanded={shouldRenderInline && isExpanded}
       onToggle={presentation.canOpenDetails ? handleToggle : undefined}
       onOpenFile={handleOpenFile}
-      renderDetails={presentation.canOpenDetails && !isMobile ? renderDetails : undefined}
+      renderDetails={presentation.canOpenDetails && shouldRenderInline ? renderDetails : undefined}
       isLoading={status === "running" || status === "executing"}
       isError={status === "failed"}
       isLastInSequence={isLastInSequence}
@@ -3200,5 +3205,7 @@ function areToolCallPropsEqual(previous: ToolCallProps, next: ToolCallProps) {
   if (previous.isLastInSequence !== next.isLastInSequence) return false;
   if (previous.disableOuterSpacing !== next.disableOuterSpacing) return false;
   if (previous.onOpenFilePath !== next.onOpenFilePath) return false;
+  if (previous.defaultExpanded !== next.defaultExpanded) return false;
+  if (previous.forceInline !== next.forceInline) return false;
   return true;
 }

packages/app/src/components/project-picker-browse-button.electron.tsx

@@ -0,0 +1,45 @@
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { FolderOpen } from "lucide-react-native";
+import { Button } from "@/components/ui/button";
+import { pickDirectory } from "@/desktop/pick-directory";
+import { useIsLocalDaemon } from "@/hooks/use-is-local-daemon";
+import type { ProjectPickerBrowseButtonProps } from "./project-picker-browse-button.types";
+
+export function ProjectPickerBrowseButton({
+  serverId,
+  disabled,
+  onSelect,
+  onError,
+}: ProjectPickerBrowseButtonProps) {
+  const { t } = useTranslation();
+  const isLocalDaemon = useIsLocalDaemon(serverId);
+  const handlePress = useCallback(() => {
+    void (async () => {
+      try {
+        const path = await pickDirectory();
+        if (path) {
+          onSelect(path);
+        }
+      } catch {
+        onError();
+      }
+    })();
+  }, [onError, onSelect]);
+
+  if (!isLocalDaemon) {
+    return null;
+  }
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      leftIcon={FolderOpen}
+      disabled={disabled}
+      onPress={handlePress}
+    >
+      {t("projectPicker.browse")}
+    </Button>
+  );
+}

packages/app/src/components/project-picker-browse-button.tsx

@@ -0,0 +1,5 @@
+import type { ProjectPickerBrowseButtonProps } from "./project-picker-browse-button.types";
+
+export function ProjectPickerBrowseButton(_props: ProjectPickerBrowseButtonProps) {
+  return null;
+}

packages/app/src/components/project-picker-browse-button.types.ts

@@ -0,0 +1,6 @@
+export interface ProjectPickerBrowseButtonProps {
+  serverId: string;
+  disabled: boolean;
+  onSelect: (path: string) => void;
+  onError: () => void;
+}

packages/app/src/components/project-picker-modal.tsx

@@ -21,6 +21,7 @@ import { useProjectPickerStore } from "@/stores/project-picker-store";
 import { useRecommendedProjectPaths } from "@/stores/session-store-hooks";
 import { shortenPath } from "@/utils/shorten-path";
 import { isNative } from "@/constants/platform";
+import { ProjectPickerBrowseButton } from "./project-picker-browse-button";
 import { buildProjectPickerOptions, type ProjectPickerOption } from "./project-picker-options";
 
 interface PathRowProps {
@@ -155,31 +156,36 @@ export function ProjectPickerModal() {
   const directorySuggestionsQuery = useQuery({
     queryKey: ["project-picker-directory-suggestions", serverId, debouncedQuery],
     queryFn: async () => {
-      if (!client) return [];
+      if (!client) {
+        return { query: debouncedQuery, paths: [] };
+      }
       const result = await client.getDirectorySuggestions({
         query: debouncedQuery,
         includeDirectories: true,
         includeFiles: false,
         limit: 30,
       });
-      return (
-        result.entries?.flatMap((entry) => (entry.kind === "directory" ? [entry.path] : [])) ?? []
-      );
+      return {
+        query: debouncedQuery,
+        paths:
+          result.entries?.flatMap((entry) => (entry.kind === "directory" ? [entry.path] : [])) ??
+          [],
+      };
     },
     enabled: Boolean(client) && isConnected && open,
     staleTime: 15_000,
     retry: false,
   });
 
-  const options = useMemo(
-    () =>
-      buildProjectPickerOptions({
-        recommendedPaths,
-        serverPaths: directorySuggestionsQuery.data ?? [],
-        query,
-      }),
-    [directorySuggestionsQuery.data, query, recommendedPaths],
-  );
+  const options = useMemo(() => {
+    const currentSuggestions =
+      directorySuggestionsQuery.data?.query === query ? directorySuggestionsQuery.data : null;
+    return buildProjectPickerOptions({
+      recommendedPaths,
+      serverPaths: currentSuggestions?.paths ?? [],
+      query,
+    });
+  }, [directorySuggestionsQuery.data, query, recommendedPaths]);
   const hasQuery = query.trim().length > 0;
   const isSearching =
     hasQuery &&
@@ -213,6 +219,8 @@ export function ProjectPickerModal() {
         }
 
         setOpenErrorReason(getOpenProjectFailureReason(result));
+      } catch {
+        setOpenErrorReason("open_failed");
       } finally {
         setIsSubmitting(false);
       }
@@ -232,6 +240,10 @@ export function ProjectPickerModal() {
     setOpenErrorReason(null);
   }, []);
 
+  const handleBrowseError = useCallback(() => {
+    setOpenErrorReason("open_failed");
+  }, []);
+
   useEffect(() => {
     if (open) {
       setQuery("");
@@ -262,7 +274,7 @@ export function ProjectPickerModal() {
 
     function handler(event: KeyboardEvent) {
       const key = event.key;
-      if (key !== "ArrowDown" && key !== "ArrowUp" && key !== "Enter" && key !== "Escape") return;
+      if (key !== "ArrowDown" && key !== "ArrowUp" && key !== "Escape") return;
 
       if (key === "Escape") {
         event.preventDefault();
@@ -270,12 +282,6 @@ export function ProjectPickerModal() {
         return;
       }
 
-      if (key === "Enter") {
-        event.preventDefault();
-        submitActiveOption();
-        return;
-      }
-
       if (key === "ArrowDown" || key === "ArrowUp") {
         if (options.length === 0) return;
         event.preventDefault();
@@ -291,7 +297,7 @@ export function ProjectPickerModal() {
 
     window.addEventListener("keydown", handler, true);
     return () => window.removeEventListener("keydown", handler, true);
-  }, [close, open, options.length, submitActiveOption]);
+  }, [close, open, options.length]);
 
   const panelStyle = useMemo(
     () => [
@@ -330,6 +336,7 @@ export function ProjectPickerModal() {
         <View style={panelStyle}>
           <View style={headerStyle}>
             <TextInput
+              testID="project-picker-input"
               ref={inputRef}
               value={query}
               onChangeText={handleChangeQuery}
@@ -343,6 +350,12 @@ export function ProjectPickerModal() {
               returnKeyType="go"
               onSubmitEditing={submitActiveOption}
             />
+            <ProjectPickerBrowseButton
+              serverId={serverId}
+              disabled={isSubmitting}
+              onSelect={handleSelectPath}
+              onError={handleBrowseError}
+            />
           </View>
 
           <ProjectPickerResults
@@ -383,11 +396,15 @@ const styles = StyleSheet.create((theme) => ({
     ...theme.shadow.lg,
   },
   header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[3],
     paddingHorizontal: theme.spacing[4],
     paddingVertical: theme.spacing[3],
     borderBottomWidth: 1,
   },
   input: {
+    flex: 1,
     fontSize: theme.fontSize.lg,
     paddingVertical: theme.spacing[1],
     outlineStyle: "none",

packages/app/src/components/project-picker-options.test.ts

@@ -35,7 +35,7 @@ describe("buildProjectPickerOptions", () => {
   it("puts an absolute path row first", () => {
     const options = buildProjectPickerOptions({
       recommendedPaths: ["/repo/api"],
-      serverPaths: [],
+      serverPaths: ["/repo/api"],
       query: "/repo",
     });
 
@@ -48,7 +48,7 @@ describe("buildProjectPickerOptions", () => {
   it("puts a home-relative path row first", () => {
     const options = buildProjectPickerOptions({
       recommendedPaths: ["/Users/mo/src/api"],
-      serverPaths: [],
+      serverPaths: ["/Users/mo/src/api"],
       query: "~/src",
     });
 

packages/app/src/components/root-error-boundary.tsx

@@ -0,0 +1,157 @@
+import React, { Component, Fragment, type ErrorInfo, type ReactNode } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import type { PressableStateCallbackType, StyleProp, ViewStyle } from "react-native";
+import { useTranslation } from "react-i18next";
+import { StyleSheet } from "react-native-unistyles";
+import { formatCaughtValue } from "./root-error-details";
+
+interface RootErrorBoundaryProps {
+  children: ReactNode;
+}
+
+interface RootErrorBoundaryState {
+  error: string | null;
+  resetKey: number;
+}
+
+export class RootErrorBoundary extends Component<RootErrorBoundaryProps, RootErrorBoundaryState> {
+  state: RootErrorBoundaryState = {
+    error: null,
+    resetKey: 0,
+  };
+
+  static getDerivedStateFromError(error: unknown): Partial<RootErrorBoundaryState> {
+    return { error: formatCaughtValue(error) };
+  }
+
+  componentDidCatch(error: unknown, errorInfo: ErrorInfo) {
+    console.error("[RootErrorBoundary] Unhandled render error", {
+      error: formatCaughtValue(error),
+      componentStack: errorInfo.componentStack,
+    });
+  }
+
+  retry = () => {
+    this.setState(({ resetKey }) => ({
+      error: null,
+      resetKey: resetKey + 1,
+    }));
+  };
+
+  render() {
+    const { error, resetKey } = this.state;
+    if (error !== null) {
+      return <RootErrorFallback error={error} onRetry={this.retry} />;
+    }
+
+    return <Fragment key={resetKey}>{this.props.children}</Fragment>;
+  }
+}
+
+interface RootErrorFallbackProps {
+  error: string;
+  onRetry: () => void;
+}
+
+function RootErrorFallback({ error, onRetry }: RootErrorFallbackProps) {
+  const { t } = useTranslation();
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+      testID="root-error-boundary"
+    >
+      <View style={styles.content}>
+        <Text style={styles.kicker}>{t("rootError.kicker")}</Text>
+        <Text style={styles.title}>{t("rootError.title")}</Text>
+        <Text style={styles.body}>{t("rootError.body")}</Text>
+        <View style={styles.messageBox}>
+          <Text style={styles.messageLabel}>{t("rootError.details")}</Text>
+          <Text style={styles.message}>{error}</Text>
+        </View>
+        <Pressable
+          accessibilityRole="button"
+          onPress={onRetry}
+          style={retryButtonStyle}
+          testID="root-error-boundary-retry"
+        >
+          <Text style={styles.retryButtonText}>{t("common.actions.retry")}</Text>
+        </Pressable>
+      </View>
+    </ScrollView>
+  );
+}
+
+function retryButtonStyle({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> {
+  return [styles.retryButton, pressed ? styles.retryButtonPressed : null];
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.surface0,
+  },
+  contentContainer: {
+    flexGrow: 1,
+    justifyContent: "center",
+    paddingHorizontal: theme.spacing[6],
+    paddingVertical: theme.spacing[8],
+  },
+  content: {
+    alignSelf: "center",
+    width: "100%",
+    maxWidth: 520,
+    gap: theme.spacing[4],
+  },
+  kicker: {
+    color: theme.colors.destructive,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.semibold,
+  },
+  title: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.xl,
+    fontWeight: theme.fontWeight.semibold,
+  },
+  body: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.base,
+    lineHeight: 22,
+  },
+  messageBox: {
+    gap: theme.spacing[2],
+    borderWidth: 1,
+    borderColor: theme.colors.borderAccent,
+    borderRadius: theme.borderRadius.lg,
+    backgroundColor: theme.colors.surface1,
+    padding: theme.spacing[4],
+  },
+  messageLabel: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.semibold,
+  },
+  message: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.sm,
+    lineHeight: 20,
+  },
+  retryButton: {
+    alignSelf: "flex-start",
+    minHeight: 40,
+    justifyContent: "center",
+    borderRadius: theme.borderRadius.md,
+    backgroundColor: theme.colors.accent,
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[2],
+  },
+  retryButtonPressed: {
+    opacity: 0.85,
+  },
+  retryButtonText: {
+    color: theme.colors.accentForeground,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.semibold,
+  },
+}));

packages/app/src/components/root-error-details.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from "vitest";
+import { formatCaughtValue } from "./root-error-details";
+
+describe("formatCaughtValue", () => {
+  it("preserves details for Error values", () => {
+    class RouteRenderError extends Error {
+      code = "E_ROUTE_RENDER";
+      cause = "workspace route";
+
+      constructor() {
+        super("route render exploded");
+        this.name = "RouteRenderError";
+        this.stack = "RouteRenderError: route render exploded\n    at WorkspaceRoute";
+      }
+    }
+
+    const details = formatCaughtValue(new RouteRenderError());
+
+    expect(details).toContain("Name: RouteRenderError");
+    expect(details).toContain("Message: route render exploded");
+    expect(details).toContain("Stack:");
+    expect(details).toContain("RouteRenderError: route render exploded");
+    expect(details).toContain("Cause:");
+    expect(details).toContain("workspace route");
+    expect(details).toContain("E_ROUTE_RENDER");
+  });
+
+  it("does not duplicate aggregate errors as custom fields", () => {
+    const error = new AggregateError([new Error("first failure")], "multiple failures");
+    const details = formatCaughtValue(error);
+
+    expect(details).toContain("Errors:");
+    expect(details).toContain("first failure");
+    expect(details).not.toContain("Fields:");
+  });
+
+  it("preserves null aggregate error values", () => {
+    class ErrorWithNullableErrors extends Error {
+      errors = null;
+    }
+
+    const details = formatCaughtValue(new ErrorWithNullableErrors("nullable errors"));
+
+    expect(details).toContain("Errors:\nnull");
+    expect(details).not.toContain("Fields:");
+  });
+
+  it("does not throw for malformed Error text fields", () => {
+    const error = new Error("fallback");
+    Object.defineProperties(error, {
+      name: { configurable: true, value: null },
+      message: { configurable: true, value: 42 },
+      stack: { configurable: true, value: { frame: "bad stack" } },
+    });
+
+    const details = formatCaughtValue(error);
+
+    expect(details).toContain("Name: null");
+    expect(details).toContain("Message: 42");
+    expect(details).toContain('"frame": "bad stack"');
+  });
+
+  it("marks recursive Error causes", () => {
+    const error = new Error("self cause");
+    Object.defineProperty(error, "cause", { configurable: true, value: error });
+
+    const details = formatCaughtValue(error);
+
+    expect(details).toContain("Cause:\n[Circular Error]");
+  });
+
+  it("returns fallback details when Error properties throw", () => {
+    const error = new Error("fallback");
+    Object.defineProperty(error, "message", {
+      configurable: true,
+      get() {
+        throw new Error("bad message getter");
+      },
+    });
+
+    const details = formatCaughtValue(error);
+
+    expect(details).toContain("[Unserializable value]");
+    expect(details).toContain("Details unavailable:");
+    expect(details).toContain("Error: bad message getter");
+  });
+
+  it("renders string thrown values as the string", () => {
+    expect(formatCaughtValue("plain failure")).toBe("plain failure");
+  });
+
+  it("preserves empty string thrown values", () => {
+    expect(formatCaughtValue("")).toBe("");
+  });
+
+  it("renders numeric thrown values without extra category text", () => {
+    const details = formatCaughtValue(42);
+
+    expect(details).toBe("42");
+    expect(details).not.toContain("non-Error");
+  });
+
+  it("renders circular objects as JSON with circular markers", () => {
+    const value: { label: string; self?: unknown } = { label: "loop" };
+    value.self = value;
+
+    expect(formatCaughtValue(value)).toBe('{\n  "label": "loop",\n  "self": "[Circular]"\n}');
+  });
+});

packages/app/src/components/root-error-details.ts

@@ -0,0 +1,155 @@
+export function formatCaughtValue(value: unknown): string {
+  try {
+    return formatCaughtValueWithSeenErrors(value, new WeakSet<Error>());
+  } catch (formattingError) {
+    return formatFormattingFailure(value, formattingError);
+  }
+}
+
+function formatCaughtValueWithSeenErrors(value: unknown, seenErrors: WeakSet<Error>): string {
+  if (value instanceof Error) {
+    return formatError(value, seenErrors);
+  }
+
+  if (typeof value === "string") {
+    return value;
+  }
+
+  if (value === null || value === undefined) {
+    return safeString(value);
+  }
+
+  if (typeof value !== "object" && typeof value !== "function") {
+    return safeString(value);
+  }
+
+  return stringifyJson(value, seenErrors) ?? safeString(value);
+}
+
+function formatError(error: Error, seenErrors: WeakSet<Error>): string {
+  if (seenErrors.has(error)) {
+    return "[Circular Error]";
+  }
+
+  seenErrors.add(error);
+  const sections: string[] = [];
+  const name = formatErrorTextProperty(Reflect.get(error, "name"), seenErrors);
+  const message = formatErrorTextProperty(Reflect.get(error, "message"), seenErrors);
+  const stack = formatErrorTextProperty(Reflect.get(error, "stack"), seenErrors);
+
+  if (name) {
+    sections.push(`Name: ${name}`);
+  }
+  if (message) {
+    sections.push(`Message: ${message}`);
+  }
+  if (stack) {
+    sections.push(`Stack:\n${stack}`);
+  }
+
+  const errorCause = getErrorCause(error);
+  if (errorCause.hasCause) {
+    sections.push(`Cause:\n${formatCaughtValueWithSeenErrors(errorCause.value, seenErrors)}`);
+  }
+
+  const aggregateErrors = getAggregateErrors(error);
+  if (aggregateErrors.hasErrors) {
+    sections.push(`Errors:\n${formatCaughtValueWithSeenErrors(aggregateErrors.value, seenErrors)}`);
+  }
+
+  const fields = getErrorFields(error);
+  if (fields !== null) {
+    sections.push(`Fields:\n${stringifyJson(fields, seenErrors) ?? safeString(fields)}`);
+  }
+
+  seenErrors.delete(error);
+  return sections.join("\n\n") || safeString(error);
+}
+
+function formatErrorTextProperty(value: unknown, seenErrors: WeakSet<Error>): string | null {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    return trimmed || null;
+  }
+  if (value === undefined) {
+    return null;
+  }
+  return stringifyJson(value, seenErrors) ?? safeString(value);
+}
+
+function getErrorCause(error: Error): { hasCause: boolean; value: unknown } {
+  if (!Reflect.has(error, "cause")) {
+    return { hasCause: false, value: null };
+  }
+  return { hasCause: true, value: Reflect.get(error, "cause") };
+}
+
+function getAggregateErrors(error: Error): { hasErrors: boolean; value: unknown } {
+  if (!Reflect.has(error, "errors")) {
+    return { hasErrors: false, value: null };
+  }
+  return { hasErrors: true, value: Reflect.get(error, "errors") };
+}
+
+function getErrorFields(error: Error): Record<string, unknown> | null {
+  const fields: Record<string, unknown> = {};
+  for (const key of Object.keys(error)) {
+    if (
+      key === "name" ||
+      key === "message" ||
+      key === "stack" ||
+      key === "cause" ||
+      key === "errors"
+    ) {
+      continue;
+    }
+    fields[key] = Reflect.get(error, key);
+  }
+
+  return Object.keys(fields).length > 0 ? fields : null;
+}
+
+function stringifyJson(value: unknown, seenErrors: WeakSet<Error>): string | null {
+  const seen = new WeakSet<object>();
+  try {
+    const serialized = JSON.stringify(
+      value,
+      (_key, nestedValue: unknown) => {
+        if (nestedValue instanceof Error) {
+          return formatError(nestedValue, seenErrors);
+        }
+        if (typeof nestedValue === "bigint") {
+          return String(nestedValue);
+        }
+        if (nestedValue !== null && typeof nestedValue === "object") {
+          if (seen.has(nestedValue)) {
+            return "[Circular]";
+          }
+          seen.add(nestedValue);
+        }
+        return nestedValue;
+      },
+      2,
+    );
+    return typeof serialized === "string" ? serialized : null;
+  } catch {
+    return null;
+  }
+}
+
+function safeString(value: unknown): string {
+  try {
+    return String(value);
+  } catch {
+    return "[Unserializable value]";
+  }
+}
+
+function formatFormattingFailure(value: unknown, formattingError: unknown): string {
+  const valueText = safeString(value);
+  const formattingErrorText = safeString(formattingError);
+  if (formattingErrorText === "[Unserializable value]") {
+    return valueText;
+  }
+  return `${valueText}\n\nDetails unavailable:\n${formattingErrorText}`;
+}

packages/app/src/components/schedules/cadence-editor.tsx

@@ -1,366 +1,140 @@
-import { type ReactNode, useCallback, useMemo, useReducer, useRef, useState } from "react";
-import { Pressable, Text, View } from "react-native";
-import type { PressableStateCallbackType } from "react-native";
+import { useCallback, useMemo, useReducer, useState, type ReactNode } from "react";
+import { Text, View } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
-import { AdaptiveTextInput } from "@/components/adaptive-modal-sheet";
-import { SegmentedControl } from "@/components/ui/segmented-control";
-import {
-  describeCron,
-  everyMsToParts,
-  type IntervalUnit,
-  partsToEveryMs,
-  validateCron,
-} from "@/utils/schedule-format";
 import type { ScheduleCadence } from "@getpaseo/protocol/schedule/types";
+import type { FieldControlSize } from "@/components/ui/control-geometry";
+import { Field, FormTextInput } from "@/components/ui/form-field";
+import { SelectField, type SelectFieldOption } from "@/components/ui/select-field";
+import {
+  CADENCE_PRESET_OPTIONS,
+  normalizeScheduleFormCadence,
+  resolveCronPresetDisplay,
+  resolveCronPresetId,
+} from "@/schedules/schedule-cadence-options";
+import { getDeviceTimeZone } from "@/utils/device-timezone";
+import { describeCron, validateCron } from "@/utils/schedule-format";
 
-type CadenceMode = ScheduleCadence["type"];
-
-interface CronPreset {
-  label: string;
-  expression: string;
-}
-
-// 5-field expressions evaluated in UTC by the daemon. Each one round-trips
-// through describeCron() so the chip and the live preview agree.
-const CRON_PRESETS: CronPreset[] = [
-  { label: "Every hour", expression: "0 * * * *" },
-  { label: "Daily 9:00", expression: "0 9 * * *" },
-  { label: "Weekdays 9:00", expression: "0 9 * * 1-5" },
-  { label: "Mondays 9:00", expression: "0 9 * * 1" },
-];
-
-const MODE_OPTIONS = [
-  { value: "every" as const, label: "Interval" },
-  { value: "cron" as const, label: "Cron" },
-];
-
-const UNIT_OPTIONS = [
-  { value: "minutes" as const, label: "Minutes" },
-  { value: "hours" as const, label: "Hours" },
-  { value: "days" as const, label: "Days" },
-];
-
-const DEFAULT_INTERVAL_MS = partsToEveryMs(1, "hours");
-const DEFAULT_CRON_EXPRESSION = "0 9 * * *";
-
-const UNIT_NOUN: Record<IntervalUnit, string> = {
-  minutes: "minute",
-  hours: "hour",
-  days: "day",
-};
-
-function describeInterval(value: number, unit: IntervalUnit): string {
-  const noun = UNIT_NOUN[unit];
-  if (value === 1) {
-    return `Runs every ${noun}`;
-  }
-  return `Runs every ${value} ${noun}s`;
-}
+type CronCadence = Extract<ScheduleCadence, { type: "cron" }>;
 
 export interface CadenceEditorProps {
   value: ScheduleCadence;
   onChange: (next: ScheduleCadence) => void;
   error?: string;
+  size?: FieldControlSize;
 }
 
-export function CadenceEditor({ value, onChange, error }: CadenceEditorProps) {
-  const mode = value.type;
+const PRESET_OPTIONS: SelectFieldOption<string>[] = CADENCE_PRESET_OPTIONS.map((option) => ({
+  id: option.id,
+  value: option.id,
+  label: option.label,
+  testID: `schedule-cadence-preset-${option.id}`,
+}));
 
-  // The numeric/text fields are native-owned (AdaptiveTextInput). We seed them
-  // once from the incoming cadence via lazy state initializers and bump
-  // resetKey only when we change the content ourselves (mode switch, preset
-  // chip) — never on every keystroke.
-  const [intervalValueText, setIntervalValueText] = useState(() =>
-    String(everyMsToParts(value.type === "every" ? value.everyMs : DEFAULT_INTERVAL_MS).value),
-  );
-  const [intervalUnit, setIntervalUnit] = useState<IntervalUnit>(
-    () => everyMsToParts(value.type === "every" ? value.everyMs : DEFAULT_INTERVAL_MS).unit,
-  );
-  const [cronText, setCronText] = useState(() =>
-    value.type === "cron" ? value.expression : DEFAULT_CRON_EXPRESSION,
-  );
+function getCronPreview(expression: string, timezone: string, error: string | null): string | null {
+  if (error || !expression) {
+    return null;
+  }
+  return describeCron({ type: "cron", expression, timezone }) ?? expression;
+}
+
+function buildCronCadence(expression: string, timezone: string): CronCadence {
+  return { type: "cron", expression, timezone };
+}
+
+export function CadenceEditor({ value, onChange, error, size = "md" }: CadenceEditorProps) {
+  const deviceTimeZone = useMemo(getDeviceTimeZone, []);
+  const normalizedValue = normalizeScheduleFormCadence(value, deviceTimeZone);
+  const [cronText, setCronText] = useState(() => normalizedValue.expression);
   const [fieldResetKey, bumpFieldResetKey] = useReducer((key: number) => key + 1, 0);
-
-  // Remember the cron expression the user had so toggling Interval -> Cron and
-  // back does not discard a blanked-out field. Interval mode rebuilds straight
-  // from the live numeric value + unit, so it needs no equivalent ref.
-  const lastCronExpression = useRef(
-    value.type === "cron" ? value.expression : DEFAULT_CRON_EXPRESSION,
+  const cronTimeZone = normalizedValue.timezone ?? deviceTimeZone;
+  const trimmedCron = cronText.trim();
+  const localCronError = trimmedCron ? validateCron(trimmedCron) : null;
+  const effectiveError = error ?? localCronError;
+  const preview = getCronPreview(trimmedCron, cronTimeZone, effectiveError ?? null);
+  const currentCadence = useMemo<CronCadence>(
+    () => buildCronCadence(trimmedCron, cronTimeZone),
+    [cronTimeZone, trimmedCron],
   );
+  const selectedPresetId = resolveCronPresetId(currentCadence);
+  const selectedPresetDisplay = resolveCronPresetDisplay(currentCadence);
 
-  const parsedIntervalValue = useMemo(() => {
-    const parsed = Number.parseInt(intervalValueText, 10);
-    return Number.isFinite(parsed) && parsed > 0 ? parsed : 1;
-  }, [intervalValueText]);
-
-  const emitInterval = useCallback(
-    (rawValue: number, unit: IntervalUnit) => {
-      onChange({ type: "every", everyMs: partsToEveryMs(rawValue, unit) });
-    },
-    [onChange],
-  );
-
-  const emitCron = useCallback(
-    (expression: string) => {
-      lastCronExpression.current = expression;
-      onChange({ type: "cron", expression });
-    },
-    [onChange],
-  );
-
-  const handleModeChange = useCallback(
-    (nextMode: CadenceMode) => {
-      if (nextMode === mode) {
+  const handlePresetChange = useCallback(
+    (presetId: string) => {
+      const preset = CADENCE_PRESET_OPTIONS.find((option) => option.id === presetId);
+      if (!preset) {
         return;
       }
-      if (nextMode === "every") {
-        emitInterval(parsedIntervalValue, intervalUnit);
-      } else {
-        emitCron(cronText.trim() || lastCronExpression.current);
-      }
+      setCronText(preset.expression);
+      bumpFieldResetKey();
+      onChange(buildCronCadence(preset.expression, cronTimeZone));
     },
-    [mode, parsedIntervalValue, intervalUnit, cronText, emitInterval, emitCron],
-  );
-
-  const handleIntervalValueChange = useCallback(
-    (text: string) => {
-      // Keep only digits so the cadence stays a positive integer count.
-      const digits = text.replace(/[^0-9]/g, "");
-      setIntervalValueText(digits);
-      const parsed = Number.parseInt(digits, 10);
-      emitInterval(Number.isFinite(parsed) && parsed > 0 ? parsed : 1, intervalUnit);
-    },
-    [emitInterval, intervalUnit],
-  );
-
-  const handleUnitChange = useCallback(
-    (unit: IntervalUnit) => {
-      setIntervalUnit(unit);
-      emitInterval(parsedIntervalValue, unit);
-    },
-    [emitInterval, parsedIntervalValue],
+    [cronTimeZone, onChange],
   );
 
   const handleCronChange = useCallback(
     (text: string) => {
       setCronText(text);
-      emitCron(text.trim());
+      onChange(buildCronCadence(text.trim(), cronTimeZone));
     },
-    [emitCron],
+    [cronTimeZone, onChange],
   );
 
-  const handlePresetPress = useCallback(
-    (expression: string) => {
-      setCronText(expression);
-      bumpFieldResetKey();
-      emitCron(expression);
-    },
-    [emitCron],
-  );
-
-  const intervalPreview = describeInterval(parsedIntervalValue, intervalUnit);
-  const trimmedCron = cronText.trim();
-  const cronError = trimmedCron ? validateCron(trimmedCron) : null;
-  const cronPreview = cronError ? null : (describeCron(trimmedCron) ?? trimmedCron);
-
-  let cronFeedback: ReactNode = null;
-  if (cronError) {
-    cronFeedback = <Text style={styles.error}>{cronError}</Text>;
-  } else if (cronPreview) {
-    cronFeedback = <Text style={styles.preview}>{cronPreview}</Text>;
+  let feedback: ReactNode = null;
+  if (effectiveError) {
+    feedback = <Text style={styles.error}>{effectiveError}</Text>;
+  } else if (preview) {
+    feedback = <Text style={styles.preview}>{preview}</Text>;
   }
 
   return (
-    <View style={styles.container}>
-      <SegmentedControl
-        size="sm"
-        value={mode}
-        onValueChange={handleModeChange}
-        options={MODE_OPTIONS}
-        style={styles.modeControl}
-        testID="cadence-mode"
-      />
+    <Field label="Cadence">
+      <View style={styles.stack}>
+        <SelectField
+          label="Cadence"
+          value={selectedPresetId === "custom" ? null : selectedPresetId}
+          selectedDisplay={selectedPresetDisplay}
+          options={PRESET_OPTIONS}
+          onChange={handlePresetChange}
+          placeholder="Select cadence"
+          emptyText="No cadences found"
+          searchable={false}
+          title="Cadence"
+          size={size}
+          triggerTestID="schedule-cadence-preset-trigger"
+          field={false}
+        />
 
-      {mode === "every" ? (
-        <View style={styles.section}>
-          <View style={styles.intervalRow}>
-            <AdaptiveTextInput
-              testID="cadence-interval-value"
-              accessibilityLabel="Interval value"
-              initialValue={intervalValueText}
-              resetKey={`cadence-interval-${fieldResetKey}`}
-              value={intervalValueText}
-              onChangeText={handleIntervalValueChange}
-              keyboardType="number-pad"
-              style={styles.intervalInput}
-            />
-            <SegmentedControl
-              size="sm"
-              value={intervalUnit}
-              onValueChange={handleUnitChange}
-              options={UNIT_OPTIONS}
-              testID="cadence-interval-unit"
-            />
-          </View>
-          <Text style={styles.preview}>{intervalPreview}</Text>
-        </View>
-      ) : (
-        <View style={styles.section}>
-          <View style={styles.presetRow}>
-            {CRON_PRESETS.map((preset) => (
-              <CronPresetChip
-                key={preset.expression}
-                label={preset.label}
-                expression={preset.expression}
-                isSelected={trimmedCron === preset.expression}
-                onSelect={handlePresetPress}
-              />
-            ))}
-          </View>
-          <AdaptiveTextInput
-            testID="cadence-cron-expression"
-            accessibilityLabel="Cron expression"
-            initialValue={cronText}
-            resetKey={`cadence-cron-${fieldResetKey}`}
-            value={cronText}
-            onChangeText={handleCronChange}
-            placeholder="0 9 * * *"
-            autoCapitalize="none"
-            autoCorrect={false}
-            spellCheck={false}
-            style={styles.cronInput}
-          />
-          {cronFeedback}
-          <Text style={styles.hint}>Times are in UTC</Text>
-        </View>
-      )}
-
-      {error ? <Text style={styles.error}>{error}</Text> : null}
-    </View>
-  );
-}
-
-function CronPresetChip({
-  label,
-  expression,
-  isSelected,
-  onSelect,
-}: {
-  label: string;
-  expression: string;
-  isSelected: boolean;
-  onSelect: (expression: string) => void;
-}) {
-  const handlePress = useCallback(() => {
-    onSelect(expression);
-  }, [onSelect, expression]);
-  const chipStyle = useCallback(
-    ({ hovered, pressed }: PressableStateCallbackType & { hovered?: boolean }) => [
-      styles.chip,
-      isSelected && styles.chipSelected,
-      !isSelected && (Boolean(hovered) || pressed) && styles.chipHover,
-    ],
-    [isSelected],
-  );
-  const labelStyle = useMemo(
-    () => [styles.chipLabel, isSelected && styles.chipLabelSelected],
-    [isSelected],
-  );
-  const accessibilityState = useMemo(() => ({ selected: isSelected }), [isSelected]);
-  return (
-    <Pressable
-      accessibilityRole="button"
-      accessibilityState={accessibilityState}
-      onPress={handlePress}
-      style={chipStyle}
-    >
-      <Text style={labelStyle} numberOfLines={1}>
-        {label}
-      </Text>
-    </Pressable>
+        <FormTextInput
+          size={size}
+          testID="cadence-cron-expression"
+          accessibilityLabel="Cron expression"
+          initialValue={cronText}
+          resetKey={`cadence-cron-${fieldResetKey}`}
+          value={cronText}
+          onChangeText={handleCronChange}
+          placeholder="0 9 * * *"
+          autoCapitalize="none"
+          autoCorrect={false}
+          spellCheck={false}
+          style={styles.cronInput}
+        />
+        {feedback}
+      </View>
+    </Field>
   );
 }
 
 const styles = StyleSheet.create((theme) => ({
-  container: {
+  stack: {
     gap: theme.spacing[3],
   },
-  section: {
-    gap: theme.spacing[3],
-  },
-  intervalRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[3],
-  },
-  intervalInput: {
-    width: 88,
-    minHeight: 44,
-    backgroundColor: theme.colors.surface2,
-    borderRadius: theme.borderRadius.lg,
-    paddingHorizontal: theme.spacing[4],
-    paddingVertical: theme.spacing[3],
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    fontSize: theme.fontSize.base,
-  },
-  // The mode toggle hugs its options at the left rather than stretching to a
-  // full-width track; the interval row then reads as input + toggle.
-  modeControl: {
-    alignSelf: "flex-start",
-  },
-  presetRow: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: theme.spacing[2],
-  },
-  chip: {
-    minHeight: 32,
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: theme.spacing[3],
-    paddingVertical: theme.spacing[2],
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    backgroundColor: theme.colors.surface2,
-  },
-  chipHover: {
-    backgroundColor: theme.colors.surface3,
-  },
-  // Selected preset reads as a chosen surface, not a second accent fill
-  // competing with the sheet's primary CTA.
-  chipSelected: {
-    backgroundColor: theme.colors.surface3,
-    borderColor: theme.colors.borderAccent,
-  },
-  chipLabel: {
-    fontSize: theme.fontSize.xs,
-    fontWeight: theme.fontWeight.medium,
-    color: theme.colors.foregroundMuted,
-  },
-  chipLabelSelected: {
-    color: theme.colors.foreground,
-  },
   cronInput: {
-    minHeight: 44,
-    backgroundColor: theme.colors.surface2,
-    borderRadius: theme.borderRadius.lg,
-    paddingHorizontal: theme.spacing[4],
-    paddingVertical: theme.spacing[3],
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    fontSize: theme.fontSize.sm,
     fontFamily: theme.fontFamily.mono,
   },
   preview: {
     fontSize: theme.fontSize.xs,
     color: theme.colors.foregroundMuted,
   },
-  hint: {
-    fontSize: theme.fontSize.xs,
-    color: theme.colors.foregroundMuted,
-  },
   error: {
     fontSize: theme.fontSize.xs,
     color: theme.colors.palette.red[300],

packages/app/src/components/sidebar-workspace-list.tsx

@@ -38,17 +38,13 @@ import { type GestureType } from "react-native-gesture-handler";
 import * as Clipboard from "expo-clipboard";
 import { DiffStat } from "@/components/diff-stat";
 import {
-  Archive,
   CircleAlert,
-  CircleCheck,
   ChevronDown,
   ChevronRight,
-  Copy,
   ExternalLink,
   GitPullRequest,
   Settings,
   MoreVertical,
-  Pencil,
   Plus,
   Trash2,
 } from "lucide-react-native";
@@ -68,7 +64,6 @@ import {
   shouldShowSidebarHostLabels,
   useSidebarWorkspaceEntry,
   type SidebarProjectEntry,
-  type SidebarStatusWorkspacePlacement,
   type SidebarWorkspaceEntry,
   type SidebarWorkspacePlacement,
 } from "@/hooks/use-sidebar-workspaces-list";
@@ -93,6 +88,8 @@ import { shouldRenderSyncedStatusLoader } from "@/utils/status-loader";
 import { isEmphasizedStatusDotBucket } from "@/utils/status-dot-color";
 import type { SidebarStateBucket } from "@/utils/sidebar-agent-state";
 import { SidebarStatusWorkspaceList } from "@/components/sidebar/sidebar-status-list";
+import type { StatusGroup } from "@/hooks/sidebar-status-view-model";
+import { SidebarWorkspaceMenu } from "@/components/sidebar/sidebar-workspace-menu";
 import {
   SidebarWorkspaceRowFrame,
   SidebarWorkspaceRowContent,
@@ -142,15 +139,11 @@ const ThemedExternalLink = withUnistyles(ExternalLink);
 const ThemedGitPullRequest = withUnistyles(GitPullRequest);
 const ThemedActivityIndicator = withUnistyles(ActivityIndicator);
 const ThemedCircleAlert = withUnistyles(CircleAlert);
-const ThemedCircleCheck = withUnistyles(CircleCheck);
 const ThemedSyncedLoader = withUnistyles(SyncedLoader);
 const ThemedPlus = withUnistyles(Plus);
 const ThemedMoreVertical = withUnistyles(MoreVertical);
 const ThemedTrash2 = withUnistyles(Trash2);
 const ThemedSettings = withUnistyles(Settings);
-const ThemedCopy = withUnistyles(Copy);
-const ThemedArchive = withUnistyles(Archive);
-const ThemedPencil = withUnistyles(Pencil);
 
 const foregroundColorMapping = (theme: Theme) => ({
   color: theme.colors.foreground,
@@ -228,7 +221,7 @@ function selectionForSelectedWorkspace(
 }
 
 interface SidebarWorkspaceListProps {
-  statusWorkspacePlacements: SidebarStatusWorkspacePlacement[];
+  statusGroups: StatusGroup[];
   projects: SidebarProjectEntry[];
   projectNamesByKey: Map<string, string>;
   collapsedProjectKeys: ReadonlySet<string>;
@@ -358,12 +351,6 @@ function projectKebabStyle({
   return [styles.projectKebabButton, hovered && styles.projectKebabButtonHovered];
 }
 
-function workspaceKebabStyle({
-  hovered = false,
-}: PressableStateCallbackType & { hovered?: boolean }) {
-  return [styles.kebabButton, hovered && styles.kebabButtonHovered];
-}
-
 function getProjectWorkspaceRowStyle({
   isDragging,
   selected,
@@ -540,12 +527,6 @@ function ProjectRowTrailingActions({
 
 const trash2LeadingIcon = <ThemedTrash2 size={14} uniProps={foregroundMutedColorMapping} />;
 const settingsLeadingIcon = <ThemedSettings size={14} uniProps={foregroundMutedColorMapping} />;
-const copyLeadingIcon = <ThemedCopy size={14} uniProps={foregroundMutedColorMapping} />;
-const markAsReadLeadingIcon = (
-  <ThemedCircleCheck size={14} uniProps={foregroundMutedColorMapping} />
-);
-const archiveLeadingIcon = <ThemedArchive size={14} uniProps={foregroundMutedColorMapping} />;
-const renameLeadingIcon = <ThemedPencil size={14} uniProps={foregroundMutedColorMapping} />;
 const openInNewWindowLeadingIcon = (
   <ThemedExternalLink size={14} uniProps={foregroundMutedColorMapping} />
 );
@@ -693,7 +674,7 @@ function WorkspaceRowRightGroup({
           </SidebarWorkspaceTrailingActionBase>
           <SidebarWorkspaceTrailingActionOverlay visible={showKebabInSlot}>
             {onArchive ? (
-              <WorkspaceKebabMenu
+              <SidebarWorkspaceMenu
                 workspaceKey={workspace.workspaceKey}
                 onCopyPath={onCopyPath}
                 onCopyBranchName={onCopyBranchName}
@@ -713,97 +694,6 @@ function WorkspaceRowRightGroup({
   );
 }
 
-function WorkspaceKebabMenu({
-  workspaceKey,
-  onCopyPath,
-  onCopyBranchName,
-  onRename,
-  onMarkAsRead,
-  onArchive,
-  archiveLabel,
-  archiveStatus,
-  archivePendingLabel,
-  archiveShortcutKeys,
-}: {
-  workspaceKey: string;
-  onCopyPath?: () => void;
-  onCopyBranchName?: () => void;
-  onRename?: () => void;
-  onMarkAsRead?: () => void;
-  onArchive: () => void;
-  archiveLabel?: string;
-  archiveStatus?: "idle" | "pending" | "success";
-  archivePendingLabel?: string;
-  archiveShortcutKeys?: ShortcutKey[][] | null;
-}) {
-  const { t } = useTranslation();
-  const archiveTrailing = useMemo(
-    () => (archiveShortcutKeys ? <Shortcut chord={archiveShortcutKeys} /> : null),
-    [archiveShortcutKeys],
-  );
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger
-        hitSlop={8}
-        style={workspaceKebabStyle}
-        accessibilityRole={platformIsWeb ? undefined : "button"}
-        accessibilityLabel={t("sidebar.workspace.actions.menu")}
-        testID={`sidebar-workspace-kebab-${workspaceKey}`}
-      >
-        {renderKebabTriggerIcon}
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" width={260}>
-        {onCopyPath ? (
-          <DropdownMenuItem
-            testID={`sidebar-workspace-menu-copy-path-${workspaceKey}`}
-            leading={copyLeadingIcon}
-            onSelect={onCopyPath}
-          >
-            {t("sidebar.workspace.actions.copyPath")}
-          </DropdownMenuItem>
-        ) : null}
-        {onCopyBranchName ? (
-          <DropdownMenuItem
-            testID={`sidebar-workspace-menu-copy-branch-name-${workspaceKey}`}
-            leading={copyLeadingIcon}
-            onSelect={onCopyBranchName}
-          >
-            {t("sidebar.workspace.actions.copyBranchName")}
-          </DropdownMenuItem>
-        ) : null}
-        {onRename ? (
-          <DropdownMenuItem
-            testID={`sidebar-workspace-menu-rename-${workspaceKey}`}
-            leading={renameLeadingIcon}
-            onSelect={onRename}
-          >
-            {t("sidebar.workspace.actions.rename")}
-          </DropdownMenuItem>
-        ) : null}
-        {onMarkAsRead ? (
-          <DropdownMenuItem
-            testID={`sidebar-workspace-menu-mark-as-read-${workspaceKey}`}
-            leading={markAsReadLeadingIcon}
-            onSelect={onMarkAsRead}
-          >
-            Mark as read
-          </DropdownMenuItem>
-        ) : null}
-        <DropdownMenuItem
-          testID={`sidebar-workspace-menu-archive-${workspaceKey}`}
-          leading={archiveLeadingIcon}
-          trailing={archiveTrailing}
-          status={archiveStatus}
-          pendingLabel={archivePendingLabel}
-          onSelect={onArchive}
-        >
-          {archiveLabel ?? t("sidebar.workspace.actions.archive")}
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
 function ProjectIcon({
   iconDataUri,
   placeholderInitial,
@@ -2166,7 +2056,7 @@ function areProjectBlockSelectionsEqual(
 const MemoProjectBlock = memo(ProjectBlock, areProjectBlockPropsEqual);
 
 export function SidebarWorkspaceList({
-  statusWorkspacePlacements,
+  statusGroups,
   projects,
   projectNamesByKey,
   collapsedProjectKeys,
@@ -2196,7 +2086,7 @@ export function SidebarWorkspaceList({
   const content =
     groupMode === "status" ? (
       <SidebarStatusModeWrapper
-        statusWorkspacePlacements={statusWorkspacePlacements}
+        statusGroups={statusGroups}
         projectNamesByKey={projectNamesByKey}
         shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
         onWorkspacePress={onWorkspacePress}
@@ -2224,14 +2114,14 @@ export function SidebarWorkspaceList({
 }
 
 function SidebarStatusModeWrapper({
-  statusWorkspacePlacements,
+  statusGroups,
   projectNamesByKey,
   shortcutIndexByWorkspaceKey: _projectShortcutIndex,
   onWorkspacePress,
   hostLabelByServerId,
   showHostLabels,
 }: {
-  statusWorkspacePlacements: SidebarStatusWorkspacePlacement[];
+  statusGroups: StatusGroup[];
   projectNamesByKey: Map<string, string>;
   shortcutIndexByWorkspaceKey: Map<string, number>;
   onWorkspacePress?: () => void;
@@ -2242,7 +2132,7 @@ function SidebarStatusModeWrapper({
 
   return (
     <SidebarStatusWorkspaceList
-      workspaces={statusWorkspacePlacements}
+      groups={statusGroups}
       projectNamesByKey={projectNamesByKey}
       shortcutIndexByWorkspaceKey={_projectShortcutIndex}
       showShortcutBadges={showShortcutBadges}
@@ -2268,7 +2158,7 @@ function ProjectModeList({
   supportsMultiplicityByServerId,
 }: Omit<
   SidebarWorkspaceListProps,
-  "statusWorkspacePlacements" | "projectNamesByKey" | "groupMode" | "isRefreshing" | "onRefresh"
+  "statusGroups" | "projectNamesByKey" | "groupMode" | "isRefreshing" | "onRefresh"
 > & {
   pathname: string;
   hostLabelByServerId: ReadonlyMap<string, string>;
@@ -2872,14 +2762,6 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.xs,
     flexShrink: 0,
   },
-  kebabButton: {
-    padding: 2,
-    borderRadius: 4,
-    marginLeft: 2,
-  },
-  kebabButtonHovered: {
-    backgroundColor: theme.colors.surface2,
-  },
   statusDotNeedsInput: {
     backgroundColor: theme.colors.palette.amber[500],
     borderColor: theme.colors.surface0,

packages/app/src/components/sidebar/sidebar-model.tsx

@@ -0,0 +1,76 @@
+import React, { createContext, useContext, useMemo, type ReactNode } from "react";
+import {
+  useSidebarWorkspacesList,
+  type SidebarWorkspacesListResult,
+} from "@/hooks/use-sidebar-workspaces-list";
+import { useStatusModeWorkspacePlacements } from "@/hooks/use-status-mode-workspaces";
+import { buildStatusGroups, type StatusGroup } from "@/hooks/sidebar-status-view-model";
+import { useSidebarCollapsedSectionsStore } from "@/stores/sidebar-collapsed-sections-store";
+import { useSidebarViewStore, type SidebarGroupMode } from "@/stores/sidebar-view-store";
+import {
+  buildSidebarShortcutModel,
+  buildStatusSidebarShortcutModel,
+  type SidebarShortcutModel,
+} from "@/utils/sidebar-shortcuts";
+
+interface SidebarModel extends SidebarWorkspacesListResult {
+  groupMode: SidebarGroupMode;
+  statusGroups: StatusGroup[];
+  collapsedProjectKeys: ReadonlySet<string>;
+  toggleProjectCollapsed: (projectKey: string) => void;
+  shortcutModel: SidebarShortcutModel;
+}
+
+const SidebarModelContext = createContext<SidebarModel | null>(null);
+
+export function SidebarModelProvider({ children }: { children: ReactNode }) {
+  const list = useSidebarWorkspacesList();
+  const groupMode = useSidebarViewStore((state) => state.groupMode);
+  const collapsedProjectKeys = useSidebarCollapsedSectionsStore(
+    (state) => state.collapsedProjectKeys,
+  );
+  const collapsedStatusGroupKeys = useSidebarCollapsedSectionsStore(
+    (state) => state.collapsedStatusGroupKeys,
+  );
+  const toggleProjectCollapsed = useSidebarCollapsedSectionsStore(
+    (state) => state.toggleProjectCollapsed,
+  );
+  const isStatusMode = groupMode === "status";
+  const statusWorkspacePlacements = useStatusModeWorkspacePlacements({
+    placements: list.workspacePlacements,
+    enabled: isStatusMode,
+  });
+  const statusGroups = useMemo(
+    () =>
+      isStatusMode ? buildStatusGroups(statusWorkspacePlacements, list.projectNamesByKey) : [],
+    [isStatusMode, list.projectNamesByKey, statusWorkspacePlacements],
+  );
+  const shortcutModel = useMemo(() => {
+    if (isStatusMode) {
+      return buildStatusSidebarShortcutModel({
+        groups: statusGroups,
+        collapsedStatusGroupKeys,
+      });
+    }
+    return buildSidebarShortcutModel({ projects: list.projects, collapsedProjectKeys });
+  }, [collapsedProjectKeys, collapsedStatusGroupKeys, isStatusMode, list.projects, statusGroups]);
+  const value = useMemo(
+    () => ({
+      ...list,
+      groupMode,
+      statusGroups,
+      collapsedProjectKeys,
+      toggleProjectCollapsed,
+      shortcutModel,
+    }),
+    [collapsedProjectKeys, groupMode, list, shortcutModel, statusGroups, toggleProjectCollapsed],
+  );
+
+  return <SidebarModelContext.Provider value={value}>{children}</SidebarModelContext.Provider>;
+}
+
+export function useSidebarModel(): SidebarModel {
+  const model = useContext(SidebarModelContext);
+  if (!model) throw new Error("SidebarModelProvider is required");
+  return model;
+}

packages/app/src/components/sidebar/sidebar-status-list.tsx

@@ -9,11 +9,7 @@ import {
   type SidebarStatusWorkspacePlacement,
   type SidebarWorkspaceEntry,
 } from "@/hooks/use-sidebar-workspaces-list";
-import {
-  buildStatusGroups,
-  buildStatusShortcutIndex,
-  type StatusGroup,
-} from "@/hooks/sidebar-status-view-model";
+import type { StatusGroup } from "@/hooks/sidebar-status-view-model";
 import { isWeb as platformIsWeb, isNative as platformIsNative } from "@/constants/platform";
 import { StyleSheet } from "react-native-unistyles";
 import type { Theme } from "@/styles/theme";
@@ -25,18 +21,8 @@ import {
   CircleCheck,
   CircleDot,
   CircleX,
-  MoreVertical,
-  Copy,
-  Archive,
-  Pencil,
 } from "lucide-react-native";
 import { DiffStat } from "@/components/diff-stat";
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
 import { useToast } from "@/contexts/toast-context";
 import { useMutation } from "@tanstack/react-query";
 import { getHostRuntimeStore } from "@/runtime/host-runtime";
@@ -47,7 +33,6 @@ import { useWorkspaceArchive } from "@/workspace/use-workspace-archive";
 import { useCheckoutGitActionsStore } from "@/git/actions-store";
 import { toWorktreeArchiveRisk } from "@/git/worktree-archive-warning";
 import * as Clipboard from "expo-clipboard";
-import { Shortcut } from "@/components/ui/shortcut";
 import type { ShortcutKey } from "@/utils/format-shortcut";
 import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
 import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
@@ -60,9 +45,9 @@ import {
   SidebarWorkspaceTrailingActionSlot,
 } from "@/components/sidebar/sidebar-workspace-row-content";
 import { useSidebarCollapsedSectionsStore } from "@/stores/sidebar-collapsed-sections-store";
+import { SidebarWorkspaceMenu } from "@/components/sidebar/sidebar-workspace-menu";
 
 // Themed icon wrappers
-const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
 const foregroundMutedColorMapping = (theme: Theme) => ({
   color: theme.colors.foregroundMuted,
 });
@@ -77,20 +62,8 @@ const ThemedCircleAlert = withUnistyles(CircleAlert);
 const ThemedCircleCheck = withUnistyles(CircleCheck);
 const ThemedCircleDot = withUnistyles(CircleDot);
 const ThemedCircleX = withUnistyles(CircleX);
-const ThemedMoreVertical = withUnistyles(MoreVertical);
-const ThemedCopy = withUnistyles(Copy);
-const ThemedArchive = withUnistyles(Archive);
-const ThemedPencil = withUnistyles(Pencil);
-
-const copyLeadingIcon = <ThemedCopy size={14} uniProps={foregroundMutedColorMapping} />;
-const markAsReadLeadingIcon = (
-  <ThemedCircleCheck size={14} uniProps={foregroundMutedColorMapping} />
-);
-const archiveLeadingIcon = <ThemedArchive size={14} uniProps={foregroundMutedColorMapping} />;
-const renameLeadingIcon = <ThemedPencil size={14} uniProps={foregroundMutedColorMapping} />;
-
 interface StatusWorkspaceListProps {
-  workspaces: SidebarStatusWorkspacePlacement[];
+  groups: StatusGroup[];
   projectNamesByKey: Map<string, string>;
   shortcutIndexByWorkspaceKey: Map<string, number>;
   showShortcutBadges: boolean;
@@ -100,31 +73,19 @@ interface StatusWorkspaceListProps {
 }
 
 export function SidebarStatusWorkspaceList({
-  workspaces,
+  groups,
   projectNamesByKey,
-  shortcutIndexByWorkspaceKey: _projectShortcutIndex,
+  shortcutIndexByWorkspaceKey,
   showShortcutBadges,
   onWorkspacePress,
   hostLabelByServerId,
   showHostLabels,
 }: StatusWorkspaceListProps) {
-  const groups = useMemo(
-    () => buildStatusGroups(workspaces, projectNamesByKey),
-    [workspaces, projectNamesByKey],
-  );
   const collapsedStatusGroupKeys = useSidebarCollapsedSectionsStore(
     (state) => state.collapsedStatusGroupKeys,
   );
 
-  const statusShortcutIndex = useMemo(
-    () =>
-      showShortcutBadges
-        ? buildStatusShortcutIndex(
-            groups.filter((group) => !collapsedStatusGroupKeys.has(group.bucket)),
-          )
-        : new Map<string, number>(),
-    [collapsedStatusGroupKeys, groups, showShortcutBadges],
-  );
+  const statusShortcutIndex = showShortcutBadges ? shortcutIndexByWorkspaceKey : new Map();
 
   return (
     <View style={styles.container}>
@@ -657,7 +618,7 @@ function StatusWorkspaceActionSlot({
       </SidebarWorkspaceTrailingActionBase>
       <SidebarWorkspaceTrailingActionOverlay visible={showOverlay}>
         {onArchive ? (
-          <StatusKebabMenu
+          <SidebarWorkspaceMenu
             workspaceKey={workspace.workspaceKey}
             onCopyPath={onCopyPath}
             onCopyBranchName={onCopyBranchName}
@@ -675,105 +636,6 @@ function StatusWorkspaceActionSlot({
   );
 }
 
-function StatusKebabMenu({
-  workspaceKey,
-  onCopyPath,
-  onCopyBranchName,
-  onRename,
-  onMarkAsRead,
-  onArchive,
-  archiveLabel,
-  archiveStatus,
-  archivePendingLabel,
-  archiveShortcutKeys,
-}: {
-  workspaceKey: string;
-  onCopyPath?: () => void;
-  onCopyBranchName?: () => void;
-  onRename?: () => void;
-  onMarkAsRead?: () => void;
-  onArchive: () => void;
-  archiveLabel?: string;
-  archiveStatus?: "idle" | "pending" | "success";
-  archivePendingLabel?: string;
-  archiveShortcutKeys?: ShortcutKey[][] | null;
-}) {
-  const archiveTrailing = useMemo(
-    () => (archiveShortcutKeys ? <Shortcut chord={archiveShortcutKeys} /> : null),
-    [archiveShortcutKeys],
-  );
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger
-        hitSlop={8}
-        style={kebabStyle}
-        accessibilityRole={platformIsWeb ? undefined : "button"}
-        accessibilityLabel="Workspace actions"
-        testID={`sidebar-workspace-kebab-${workspaceKey}`}
-      >
-        {({ hovered }: { hovered?: boolean }) => (
-          <ThemedMoreVertical
-            size={14}
-            uniProps={hovered ? foregroundColorMapping : foregroundMutedColorMapping}
-          />
-        )}
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" width={260}>
-        {onCopyPath ? (
-          <DropdownMenuItem
-            testID={`sidebar-workspace-menu-copy-path-${workspaceKey}`}
-            leading={copyLeadingIcon}
-            onSelect={onCopyPath}
-          >
-            Copy path
-          </DropdownMenuItem>
-        ) : null}
-        {onCopyBranchName ? (
-          <DropdownMenuItem
-            testID={`sidebar-workspace-menu-copy-branch-name-${workspaceKey}`}
-            leading={copyLeadingIcon}
-            onSelect={onCopyBranchName}
-          >
-            Copy branch name
-          </DropdownMenuItem>
-        ) : null}
-        {onRename ? (
-          <DropdownMenuItem
-            testID={`sidebar-workspace-menu-rename-${workspaceKey}`}
-            leading={renameLeadingIcon}
-            onSelect={onRename}
-          >
-            Rename workspace
-          </DropdownMenuItem>
-        ) : null}
-        {onMarkAsRead ? (
-          <DropdownMenuItem
-            testID={`sidebar-workspace-menu-mark-as-read-${workspaceKey}`}
-            leading={markAsReadLeadingIcon}
-            onSelect={onMarkAsRead}
-          >
-            Mark as read
-          </DropdownMenuItem>
-        ) : null}
-        <DropdownMenuItem
-          testID={`sidebar-workspace-menu-archive-${workspaceKey}`}
-          leading={archiveLeadingIcon}
-          trailing={archiveTrailing}
-          status={archiveStatus}
-          pendingLabel={archivePendingLabel}
-          onSelect={onArchive}
-        >
-          {archiveLabel ?? "Archive"}
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-function kebabStyle({ hovered = false }: PressableStateCallbackType & { hovered?: boolean }) {
-  return [styles.kebabButton, hovered && styles.kebabButtonHovered];
-}
-
 function getStatusWorkspaceRowStyle({
   selected,
   isHovered,
@@ -876,12 +738,4 @@ const styles = StyleSheet.create((theme) => ({
   sidebarRowSelected: {
     backgroundColor: theme.colors.surfaceSidebarHover,
   },
-  kebabButton: {
-    padding: 2,
-    borderRadius: 4,
-    marginLeft: 2,
-  },
-  kebabButtonHovered: {
-    backgroundColor: theme.colors.surface2,
-  },
 }));

packages/app/src/components/sidebar/sidebar-workspace-menu.tsx

@@ -0,0 +1,151 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { type PressableStateCallbackType } from "react-native";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import { Archive, CircleCheck, Copy, MoreVertical, Pencil } from "lucide-react-native";
+import { isNative, isWeb } from "@/constants/platform";
+import type { Theme } from "@/styles/theme";
+import type { ShortcutKey } from "@/utils/format-shortcut";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Shortcut } from "@/components/ui/shortcut";
+
+const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
+const foregroundMutedColorMapping = (theme: Theme) => ({
+  color: theme.colors.foregroundMuted,
+});
+
+const ThemedMoreVertical = withUnistyles(MoreVertical);
+const ThemedCopy = withUnistyles(Copy);
+const ThemedArchive = withUnistyles(Archive);
+const ThemedPencil = withUnistyles(Pencil);
+const ThemedCircleCheck = withUnistyles(CircleCheck);
+
+const copyLeadingIcon = <ThemedCopy size={14} uniProps={foregroundMutedColorMapping} />;
+const renameLeadingIcon = <ThemedPencil size={14} uniProps={foregroundMutedColorMapping} />;
+const markAsReadLeadingIcon = (
+  <ThemedCircleCheck size={14} uniProps={foregroundMutedColorMapping} />
+);
+const archiveLeadingIcon = <ThemedArchive size={14} uniProps={foregroundMutedColorMapping} />;
+
+function renderTriggerIcon({ hovered }: { hovered?: boolean }) {
+  return (
+    <ThemedMoreVertical
+      size={14}
+      uniProps={hovered ? foregroundColorMapping : foregroundMutedColorMapping}
+    />
+  );
+}
+
+interface SidebarWorkspaceMenuProps {
+  workspaceKey: string;
+  onCopyPath?: () => void;
+  onCopyBranchName?: () => void;
+  onRename?: () => void;
+  onMarkAsRead?: () => void;
+  onArchive: () => void;
+  archiveLabel?: string;
+  archiveStatus?: "idle" | "pending" | "success";
+  archivePendingLabel?: string;
+  archiveShortcutKeys?: ShortcutKey[][] | null;
+}
+
+export function SidebarWorkspaceMenu({
+  workspaceKey,
+  onCopyPath,
+  onCopyBranchName,
+  onRename,
+  onMarkAsRead,
+  onArchive,
+  archiveLabel,
+  archiveStatus,
+  archivePendingLabel,
+  archiveShortcutKeys,
+}: SidebarWorkspaceMenuProps) {
+  const { t } = useTranslation();
+  const archiveTrailing = useMemo(
+    () => (archiveShortcutKeys && !isNative ? <Shortcut chord={archiveShortcutKeys} /> : null),
+    [archiveShortcutKeys],
+  );
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        hitSlop={8}
+        style={triggerStyle}
+        accessibilityRole={isWeb ? undefined : "button"}
+        accessibilityLabel={t("sidebar.workspace.actions.menu")}
+        testID={`sidebar-workspace-kebab-${workspaceKey}`}
+      >
+        {renderTriggerIcon}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" width={260}>
+        {onCopyPath ? (
+          <DropdownMenuItem
+            testID={`sidebar-workspace-menu-copy-path-${workspaceKey}`}
+            leading={copyLeadingIcon}
+            onSelect={onCopyPath}
+          >
+            {t("sidebar.workspace.actions.copyPath")}
+          </DropdownMenuItem>
+        ) : null}
+        {onCopyBranchName ? (
+          <DropdownMenuItem
+            testID={`sidebar-workspace-menu-copy-branch-name-${workspaceKey}`}
+            leading={copyLeadingIcon}
+            onSelect={onCopyBranchName}
+          >
+            {t("sidebar.workspace.actions.copyBranchName")}
+          </DropdownMenuItem>
+        ) : null}
+        {onRename ? (
+          <DropdownMenuItem
+            testID={`sidebar-workspace-menu-rename-${workspaceKey}`}
+            leading={renameLeadingIcon}
+            onSelect={onRename}
+          >
+            {t("sidebar.workspace.actions.rename")}
+          </DropdownMenuItem>
+        ) : null}
+        {onMarkAsRead ? (
+          <DropdownMenuItem
+            testID={`sidebar-workspace-menu-mark-as-read-${workspaceKey}`}
+            leading={markAsReadLeadingIcon}
+            onSelect={onMarkAsRead}
+          >
+            Mark as read
+          </DropdownMenuItem>
+        ) : null}
+        <DropdownMenuItem
+          testID={`sidebar-workspace-menu-archive-${workspaceKey}`}
+          leading={archiveLeadingIcon}
+          trailing={archiveTrailing}
+          status={archiveStatus}
+          pendingLabel={archivePendingLabel}
+          onSelect={onArchive}
+        >
+          {archiveLabel ?? t("sidebar.workspace.actions.archive")}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function triggerStyle({ hovered = false }: PressableStateCallbackType & { hovered?: boolean }) {
+  return [styles.trigger, hovered && styles.triggerHovered];
+}
+
+const styles = StyleSheet.create((theme) => ({
+  trigger: {
+    padding: 2,
+    borderRadius: 4,
+    marginLeft: 2,
+  },
+  triggerHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+}));

packages/app/src/components/sidebar/sidebar-workspace-row.tsx

@@ -1,22 +1,13 @@
 import { memo, useCallback, useMemo, useState, type Ref } from "react";
 import { useTranslation } from "react-i18next";
-import { View, Text, Pressable, type PressableStateCallbackType } from "react-native";
-import { StyleSheet, withUnistyles } from "react-native-unistyles";
-import { Archive, CircleCheck, Copy, MoreVertical, Pencil } from "lucide-react-native";
+import { View, Text, Pressable } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
 import { useMutation } from "@tanstack/react-query";
 import * as Clipboard from "expo-clipboard";
-import type { Theme } from "@/styles/theme";
 import type { SidebarWorkspaceEntry } from "@/hooks/use-sidebar-workspaces-list";
 import type { DraggableListDragHandleProps } from "@/components/draggable-list.types";
 import type { ShortcutKey } from "@/utils/format-shortcut";
 import { DiffStat } from "@/components/diff-stat";
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Shortcut } from "@/components/ui/shortcut";
 import { AdaptiveRenameModal } from "@/components/rename-modal";
 import { useToast } from "@/contexts/toast-context";
 import { getHostRuntimeStore } from "@/runtime/host-runtime";
@@ -28,8 +19,9 @@ import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
 import { useClearWorkspaceAttention } from "@/hooks/use-clear-workspace-attention";
 import { redirectIfArchivingActiveWorkspace } from "@/utils/sidebar-workspace-archive-redirect";
 import { requireWorkspaceDirectory, resolveWorkspaceDirectory } from "@/utils/workspace-directory";
-import { isWeb as platformIsWeb, isNative as platformIsNative } from "@/constants/platform";
+import { isNative as platformIsNative } from "@/constants/platform";
 import { useLongPressDragInteraction } from "@/components/sidebar/use-long-press-drag-interaction";
+import { SidebarWorkspaceMenu } from "@/components/sidebar/sidebar-workspace-menu";
 import {
   SidebarWorkspaceRowFrame,
   SidebarWorkspaceRowContent,
@@ -38,31 +30,6 @@ import {
   SidebarWorkspaceTrailingActionSlot,
 } from "@/components/sidebar/sidebar-workspace-row-content";
 
-const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
-const foregroundMutedColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
-
-const ThemedMoreVertical = withUnistyles(MoreVertical);
-const ThemedCopy = withUnistyles(Copy);
-const ThemedArchive = withUnistyles(Archive);
-const ThemedPencil = withUnistyles(Pencil);
-const ThemedCircleCheck = withUnistyles(CircleCheck);
-
-const copyLeadingIcon = <ThemedCopy size={14} uniProps={foregroundMutedColorMapping} />;
-const renameLeadingIcon = <ThemedPencil size={14} uniProps={foregroundMutedColorMapping} />;
-const markAsReadLeadingIcon = (
-  <ThemedCircleCheck size={14} uniProps={foregroundMutedColorMapping} />
-);
-const archiveLeadingIcon = <ThemedArchive size={14} uniProps={foregroundMutedColorMapping} />;
-
-function renderKebabTriggerIcon({ hovered }: { hovered?: boolean }) {
-  return (
-    <ThemedMoreVertical
-      size={14}
-      uniProps={hovered ? foregroundColorMapping : foregroundMutedColorMapping}
-    />
-  );
-}
-
 function noop() {}
 
 interface SidebarWorkspaceRowProps {
@@ -458,7 +425,7 @@ function WorkspaceRowTrailingActions({
           </SidebarWorkspaceTrailingActionBase>
           <SidebarWorkspaceTrailingActionOverlay visible={showKebabInSlot}>
             {onArchive ? (
-              <WorkspaceKebabMenu
+              <SidebarWorkspaceMenu
                 workspaceKey={workspace.workspaceKey}
                 onCopyPath={onCopyPath}
                 onCopyBranchName={onCopyBranchName}
@@ -478,103 +445,6 @@ function WorkspaceRowTrailingActions({
   );
 }
 
-function WorkspaceKebabMenu({
-  workspaceKey,
-  onCopyPath,
-  onCopyBranchName,
-  onRename,
-  onMarkAsRead,
-  onArchive,
-  archiveLabel,
-  archiveStatus,
-  archivePendingLabel,
-  archiveShortcutKeys,
-}: {
-  workspaceKey: string;
-  onCopyPath?: () => void;
-  onCopyBranchName?: () => void;
-  onRename?: () => void;
-  onMarkAsRead?: () => void;
-  onArchive: () => void;
-  archiveLabel?: string;
-  archiveStatus?: "idle" | "pending" | "success";
-  archivePendingLabel?: string;
-  archiveShortcutKeys?: ShortcutKey[][] | null;
-}) {
-  const { t } = useTranslation();
-  const archiveTrailing = useMemo(
-    () => (archiveShortcutKeys ? <Shortcut chord={archiveShortcutKeys} /> : null),
-    [archiveShortcutKeys],
-  );
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger
-        hitSlop={8}
-        style={workspaceKebabStyle}
-        accessibilityRole={platformIsWeb ? undefined : "button"}
-        accessibilityLabel={t("sidebar.workspace.actions.menu")}
-        testID={`sidebar-workspace-kebab-${workspaceKey}`}
-      >
-        {renderKebabTriggerIcon}
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" width={260}>
-        {onCopyPath ? (
-          <DropdownMenuItem
-            testID={`sidebar-workspace-menu-copy-path-${workspaceKey}`}
-            leading={copyLeadingIcon}
-            onSelect={onCopyPath}
-          >
-            {t("sidebar.workspace.actions.copyPath")}
-          </DropdownMenuItem>
-        ) : null}
-        {onCopyBranchName ? (
-          <DropdownMenuItem
-            testID={`sidebar-workspace-menu-copy-branch-name-${workspaceKey}`}
-            leading={copyLeadingIcon}
-            onSelect={onCopyBranchName}
-          >
-            {t("sidebar.workspace.actions.copyBranchName")}
-          </DropdownMenuItem>
-        ) : null}
-        {onRename ? (
-          <DropdownMenuItem
-            testID={`sidebar-workspace-menu-rename-${workspaceKey}`}
-            leading={renameLeadingIcon}
-            onSelect={onRename}
-          >
-            {t("sidebar.workspace.actions.rename")}
-          </DropdownMenuItem>
-        ) : null}
-        {onMarkAsRead ? (
-          <DropdownMenuItem
-            testID={`sidebar-workspace-menu-mark-as-read-${workspaceKey}`}
-            leading={markAsReadLeadingIcon}
-            onSelect={onMarkAsRead}
-          >
-            Mark as read
-          </DropdownMenuItem>
-        ) : null}
-        <DropdownMenuItem
-          testID={`sidebar-workspace-menu-archive-${workspaceKey}`}
-          leading={archiveLeadingIcon}
-          trailing={archiveTrailing}
-          status={archiveStatus}
-          pendingLabel={archivePendingLabel}
-          onSelect={onArchive}
-        >
-          {archiveLabel ?? t("sidebar.workspace.actions.archive")}
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-function workspaceKebabStyle({
-  hovered = false,
-}: PressableStateCallbackType & { hovered?: boolean }) {
-  return [styles.kebabButton, hovered && styles.kebabButtonHovered];
-}
-
 function getWorkspaceRowStyle({
   isDragging,
   selected,
@@ -630,12 +500,4 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.xs,
     flexShrink: 0,
   },
-  kebabButton: {
-    padding: 2,
-    borderRadius: 4,
-    marginLeft: 2,
-  },
-  kebabButtonHovered: {
-    backgroundColor: theme.colors.surface2,
-  },
 }));

packages/app/src/components/terminal-pane.tsx

@@ -180,7 +180,7 @@ export function TerminalPane({
     return trimmed.length > 0 ? trimmed : undefined;
   }, [settings.monoFontFamily]);
   const isMobile = useIsCompactFormFactor();
-  const mobileView = usePanelStore((state) => state.mobileView);
+  const mobileView = usePanelStore((state) => state.mobilePanel.target);
   const showMobileAgentList = usePanelStore((state) => state.showMobileAgentList);
   const swipeGesturesEnabled = isMobile && mobileView === "agent";
   const { shift: keyboardShift, style: keyboardPaddingStyle } = useKeyboardShiftStyle({

packages/app/src/components/tree-primitives.tsx

@@ -0,0 +1,82 @@
+import { useMemo } from "react";
+import { View } from "react-native";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import { ChevronRight } from "lucide-react-native";
+import { SPACING, type Theme } from "@/styles/theme";
+import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
+
+// Shared presentation primitives for the app's directory trees. Both the Files
+// explorer (server-loaded listings) and the Changes view (client-built from diff
+// paths) render different data, but their ROWS should look identical — same
+// indentation, guide lines, and chevron. Keep those here so the two trees can't
+// drift apart.
+export const TREE_INDENT_PER_LEVEL = 16;
+
+/** Left padding for a tree row at `depth`. Shared by folder rows and file headers
+ * in the Changes tree so their indentation can't drift apart. */
+export function treeRowPaddingLeft(depth: number): number {
+  return SPACING[3] + depth * TREE_INDENT_PER_LEVEL;
+}
+
+const foregroundMutedIconColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
+
+const ThemedChevronRight = withUnistyles(ChevronRight);
+
+/**
+ * Vertical guide lines connecting nested rows to their ancestors — one line per
+ * ancestor depth level, positioned absolutely within the (relative) row. Renders
+ * nothing at depth 0.
+ */
+export function TreeIndentGuides({ depth }: { depth: number }) {
+  const guides = useMemo(
+    () =>
+      Array.from({ length: depth }, (_, index) => ({
+        key: index,
+        style: [
+          styles.indentGuide,
+          inlineUnistylesStyle({ left: SPACING[3] + index * TREE_INDENT_PER_LEVEL + 4 }),
+        ],
+      })),
+    [depth],
+  );
+  return (
+    <>
+      {guides.map((guide) => (
+        <View key={guide.key} style={guide.style} pointerEvents="none" />
+      ))}
+    </>
+  );
+}
+
+/** Rotating disclosure chevron for a directory row (points right; rotates down when expanded). */
+export function TreeChevron({ expanded }: { expanded: boolean }) {
+  return (
+    <View style={expanded ? CHEVRON_EXPANDED_STYLE : styles.chevron}>
+      <ThemedChevronRight size={16} uniProps={foregroundMutedIconColorMapping} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme: Theme) => ({
+  indentGuide: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    width: 1,
+    backgroundColor: theme.colors.surface2,
+  },
+  chevron: {
+    width: 16,
+    height: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  chevronExpanded: {
+    transform: [{ rotate: "90deg" }],
+  },
+}));
+
+// Stable module-level style ref so TreeChevron passes a constant array, not one created
+// per render — satisfies react-perf (no inline-array prop) without a per-render useMemo.
+const CHEVRON_EXPANDED_STYLE = [styles.chevron, styles.chevronExpanded];

packages/app/src/components/ui/button.tsx

@@ -16,10 +16,16 @@ import type {
   TextStyle,
   ViewStyle,
 } from "react-native";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import {
+  buttonIconSize,
+  createControlGeometry,
+  type ButtonControlSize,
+} from "@/components/ui/control-geometry";
+import type { Theme } from "@/styles/theme";
 
 type ButtonVariant = "default" | "secondary" | "outline" | "ghost" | "destructive";
-type ButtonSize = "xs" | "sm" | "md" | "lg";
+type ButtonSize = ButtonControlSize;
 
 type LeftIcon =
   | ReactElement
@@ -27,85 +33,130 @@ type LeftIcon =
   | ((color: string) => ReactElement)
   | null;
 
-const ICON_SIZE: Record<ButtonSize, number> = { xs: 12, sm: 14, md: 16, lg: 20 };
+interface ButtonIconProps {
+  loading: boolean;
+  leftIcon?: LeftIcon;
+  iconSize: number;
+  iconColor: string;
+}
 
-const styles = StyleSheet.create((theme) => ({
-  base: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: theme.spacing[2],
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: 1,
-    borderColor: "transparent",
-  },
-  md: {
-    paddingVertical: theme.spacing[3],
-    paddingHorizontal: theme.spacing[4],
-  },
-  xs: {
-    minHeight: 28,
-    paddingVertical: theme.spacing[1],
-    paddingHorizontal: theme.spacing[3],
-    borderRadius: theme.borderRadius.md,
-  },
-  sm: {
-    paddingVertical: theme.spacing[1.5],
-    paddingHorizontal: theme.spacing[3],
-    borderRadius: theme.borderRadius.md,
-  },
-  lg: {
-    paddingVertical: theme.spacing[4],
-    paddingHorizontal: theme.spacing[6],
-    borderRadius: theme.borderRadius.xl,
-  },
-  default: {
-    backgroundColor: theme.colors.accent,
-    borderColor: theme.colors.accent,
-  },
-  secondary: {
-    backgroundColor: theme.colors.surface3,
-    borderColor: theme.colors.surface3,
-  },
-  outline: {
-    backgroundColor: "transparent",
-    borderColor: theme.colors.borderAccent,
-  },
-  ghost: {
-    backgroundColor: "transparent",
-    borderColor: "transparent",
-  },
-  destructive: {
-    backgroundColor: theme.colors.destructive,
-    borderColor: theme.colors.destructive,
-  },
-  pressed: {
-    opacity: 0.85,
-  },
-  disabled: {
-    opacity: theme.opacity[50],
-  },
-  text: {
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize.sm,
-    fontWeight: theme.fontWeight.normal,
-  },
-  textXs: {
-    fontSize: theme.fontSize.xs,
-  },
-  textDefault: {
-    color: theme.colors.accentForeground,
-  },
-  textDestructive: {
-    color: theme.colors.destructiveForeground,
-  },
-  textGhost: {
-    color: theme.colors.foregroundMuted,
-  },
-  textGhostHovered: {
-    color: theme.colors.foreground,
-  },
-}));
+function ButtonIcon({ loading, leftIcon, iconSize, iconColor }: ButtonIconProps) {
+  if (loading) {
+    return (
+      <View>
+        <ActivityIndicator size="small" color={iconColor} />
+      </View>
+    );
+  }
+
+  if (!leftIcon) return null;
+
+  if (typeof leftIcon === "object" && "type" in leftIcon) {
+    return <View>{leftIcon}</View>;
+  }
+
+  if (
+    typeof leftIcon === "function" &&
+    !leftIcon.prototype?.isReactComponent &&
+    leftIcon.length > 0
+  ) {
+    return <View>{(leftIcon as (color: string) => ReactElement)(iconColor)}</View>;
+  }
+
+  const Icon = leftIcon as ComponentType<{ color: string; size: number }>;
+  return (
+    <View>
+      <Icon color={iconColor} size={iconSize} />
+    </View>
+  );
+}
+
+const ThemedButtonIcon = withUnistyles(ButtonIcon);
+
+const foregroundIconMapping = (theme: Theme) => ({ iconColor: theme.colors.foreground });
+const foregroundMutedIconMapping = (theme: Theme) => ({
+  iconColor: theme.colors.foregroundMuted,
+});
+const accentForegroundIconMapping = (theme: Theme) => ({
+  iconColor: theme.colors.accentForeground,
+});
+const destructiveForegroundIconMapping = (theme: Theme) => ({
+  iconColor: theme.colors.destructiveForeground,
+});
+
+const styles = StyleSheet.create((theme) => {
+  const geometry = createControlGeometry(theme);
+
+  return {
+    base: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: theme.spacing[2],
+      borderRadius: theme.borderRadius.lg,
+      borderWidth: 1,
+      borderColor: "transparent",
+    },
+    md: {
+      ...geometry.buttonMd,
+    },
+    xs: {
+      ...geometry.buttonXs,
+    },
+    sm: {
+      ...geometry.buttonSm,
+    },
+    lg: {
+      ...geometry.buttonLg,
+    },
+    default: {
+      backgroundColor: theme.colors.accent,
+      borderColor: theme.colors.accent,
+    },
+    secondary: {
+      backgroundColor: theme.colors.surface3,
+      borderColor: theme.colors.surface3,
+    },
+    outline: {
+      backgroundColor: "transparent",
+      borderColor: theme.colors.borderAccent,
+    },
+    ghost: {
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+    },
+    destructive: {
+      backgroundColor: theme.colors.destructive,
+      borderColor: theme.colors.destructive,
+    },
+    pressed: {
+      opacity: 0.85,
+    },
+    disabled: {
+      opacity: theme.opacity[50],
+    },
+    text: {
+      color: theme.colors.foreground,
+      ...geometry.buttonText,
+      fontWeight: theme.fontWeight.normal,
+    },
+    textXs: {
+      ...geometry.buttonTextXs,
+    },
+    textDefault: {
+      color: theme.colors.accentForeground,
+    },
+    textDestructive: {
+      color: theme.colors.destructiveForeground,
+    },
+    textGhost: {
+      color: theme.colors.foregroundMuted,
+    },
+    textGhostHovered: {
+      color: theme.colors.foreground,
+    },
+  };
+});
 
 export function Button({
   children,
@@ -118,6 +169,7 @@ export function Button({
   disabled,
   loading = false,
   accessibilityRole,
+  accessibilityState: accessibilityStateProp,
   ...props
 }: PropsWithChildren<
   Omit<PressableProps, "style"> & {
@@ -131,7 +183,6 @@ export function Button({
   }
 >) {
   const [hovered, setHovered] = useState(false);
-  const { theme } = useUnistyles();
   const isDisabled = disabled || loading;
 
   let variantStyle: ViewStyle;
@@ -188,55 +239,21 @@ export function Button({
   );
 
   const accessibilityState = useMemo(
-    () => ({ disabled: isDisabled, busy: loading }),
-    [isDisabled, loading],
+    () => ({ ...accessibilityStateProp, disabled: isDisabled, busy: loading }),
+    [accessibilityStateProp, isDisabled, loading],
   );
 
-  function resolveIconColor(): string {
+  function resolveIconMapping() {
     if (variant === "default") {
-      return theme.colors.accentForeground;
+      return accentForegroundIconMapping;
+    }
+    if (variant === "destructive") {
+      return destructiveForegroundIconMapping;
     }
     if (variant === "ghost") {
-      return isGhostHovered ? theme.colors.foreground : theme.colors.foregroundMuted;
+      return isGhostHovered ? foregroundIconMapping : foregroundMutedIconMapping;
     }
-    return theme.colors.foreground;
-  }
-
-  function renderIcon() {
-    if (loading) {
-      return (
-        <View>
-          <ActivityIndicator size="small" color={resolveIconColor()} />
-        </View>
-      );
-    }
-
-    if (!leftIcon) return null;
-
-    // Pre-rendered element — pass through
-    if (typeof leftIcon === "object" && "type" in leftIcon) {
-      return <View>{leftIcon}</View>;
-    }
-
-    const color = resolveIconColor();
-    const iconSize = ICON_SIZE[size];
-
-    // Render function
-    if (
-      typeof leftIcon === "function" &&
-      !leftIcon.prototype?.isReactComponent &&
-      leftIcon.length > 0
-    ) {
-      return <View>{(leftIcon as (color: string) => ReactElement)(color)}</View>;
-    }
-
-    // Component type
-    const Icon = leftIcon as ComponentType<{ color: string; size: number }>;
-    return (
-      <View>
-        <Icon color={color} size={iconSize} />
-      </View>
-    );
+    return foregroundIconMapping;
   }
 
   return (
@@ -249,7 +266,12 @@ export function Button({
       onHoverOut={handleHoverOut}
       style={pressableStyle}
     >
-      {renderIcon()}
+      <ThemedButtonIcon
+        loading={loading}
+        leftIcon={leftIcon}
+        iconSize={buttonIconSize[size]}
+        uniProps={resolveIconMapping()}
+      />
       {children != null ? <Text style={resolvedTextStyle}>{children}</Text> : null}
       {trailing}
     </Pressable>

packages/app/src/components/ui/combobox-frame-style.test.ts

@@ -0,0 +1,58 @@
+import type { ViewStyle } from "react-native";
+import { describe, expect, it } from "vitest";
+
+import { buildDesktopFrameStyle } from "./combobox-frame-style";
+
+function buildWidthStyle(input: {
+  desktopMinWidth?: number;
+  referenceWidth: number | null;
+}): Pick<ViewStyle, "width" | "minWidth" | "maxWidth"> {
+  const [frameStyle] = buildDesktopFrameStyle({
+    desktopMinWidth: input.desktopMinWidth,
+    referenceWidth: input.referenceWidth,
+    desktopFixedHeight: undefined,
+    desktopPositionStyle: { left: 0, top: 0 },
+    shouldHideDesktopContent: false,
+    availableHeight: undefined,
+  }) as ViewStyle[];
+
+  return {
+    width: frameStyle.width,
+    minWidth: frameStyle.minWidth,
+    maxWidth: frameStyle.maxWidth,
+  };
+}
+
+describe("buildDesktopFrameStyle", () => {
+  it("lets a narrow trigger grow to the default desktop ceiling", () => {
+    expect(buildWidthStyle({ referenceWidth: 120 })).toEqual({
+      width: undefined,
+      minWidth: 120,
+      maxWidth: 400,
+    });
+  });
+
+  it("keeps a wide trigger from being capped below its own width", () => {
+    expect(buildWidthStyle({ referenceWidth: 470 })).toEqual({
+      width: undefined,
+      minWidth: 470,
+      maxWidth: 470,
+    });
+  });
+
+  it("uses desktopMinWidth as an explicit floor raiser", () => {
+    expect(buildWidthStyle({ desktopMinWidth: 360, referenceWidth: 120 })).toEqual({
+      width: undefined,
+      minWidth: 360,
+      maxWidth: 400,
+    });
+  });
+
+  it("keeps the trigger as the floor when it is wider than desktopMinWidth", () => {
+    expect(buildWidthStyle({ desktopMinWidth: 240, referenceWidth: 300 })).toEqual({
+      width: undefined,
+      minWidth: 300,
+      maxWidth: 400,
+    });
+  });
+});

packages/app/src/components/ui/combobox-frame-style.ts

@@ -0,0 +1,42 @@
+import type { StyleProp, ViewStyle } from "react-native";
+
+export interface DesktopFrameStyleInput {
+  desktopMinWidth: number | undefined;
+  referenceWidth: number | null;
+  desktopFixedHeight: number | undefined;
+  desktopPositionStyle: StyleProp<ViewStyle>;
+  shouldHideDesktopContent: boolean;
+  availableHeight: number | undefined;
+}
+
+export function buildDesktopFrameStyle(input: DesktopFrameStyleInput): StyleProp<ViewStyle> {
+  const {
+    desktopMinWidth,
+    referenceWidth,
+    desktopFixedHeight,
+    desktopPositionStyle,
+    shouldHideDesktopContent,
+    availableHeight,
+  } = input;
+  const fixedHeightStyle =
+    desktopFixedHeight != null
+      ? { minHeight: desktopFixedHeight, maxHeight: desktopFixedHeight }
+      : null;
+  const hiddenStyle = shouldHideDesktopContent ? { opacity: 0 } : null;
+  const availableHeightStyle =
+    typeof availableHeight === "number"
+      ? { maxHeight: Math.min(availableHeight, desktopFixedHeight ?? 400) }
+      : null;
+  const floor = Math.max(desktopMinWidth ?? 0, referenceWidth ?? 200);
+  return [
+    {
+      position: "absolute" as const,
+      minWidth: floor,
+      maxWidth: Math.max(400, floor),
+    },
+    fixedHeightStyle,
+    desktopPositionStyle,
+    hiddenStyle,
+    availableHeightStyle,
+  ];
+}

packages/app/src/components/ui/combobox-trigger.tsx

@@ -1,9 +1,18 @@
-import { forwardRef, useCallback, useMemo, type ReactElement, type ReactNode } from "react";
+import {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from "react";
 import {
   Pressable,
   View,
+  type NativeSyntheticEvent,
   type PressableProps,
   type PressableStateCallbackType,
+  type TargetedEvent,
   type ViewStyle,
   type StyleProp,
 } from "react-native";
@@ -20,6 +29,7 @@ const chevronColorMapping = (theme: Theme) => ({
 interface TriggerState {
   pressed: boolean;
   hovered: boolean;
+  focused: boolean;
 }
 
 type TriggerStyleProp = StyleProp<ViewStyle> | ((state: TriggerState) => StyleProp<ViewStyle>);
@@ -36,23 +46,45 @@ interface ComboboxTriggerProps extends Omit<PressableProps, "style" | "children"
 }
 
 export const ComboboxTrigger = forwardRef<View, ComboboxTriggerProps>(function ComboboxTrigger(
-  { children, chevron, style, block = false, ...props },
+  { children, chevron, style, block = false, onFocus, onBlur, ...props },
   ref,
 ): ReactElement {
+  const [focused, setFocused] = useState(false);
   const pressableStyle = useCallback(
     ({ pressed, hovered = false }: PressableStateCallbackType & { hovered?: boolean }) => {
       if (typeof style === "function") {
-        return style({ pressed, hovered });
+        return style({ pressed, hovered, focused });
       }
       return style;
     },
-    [style],
+    [focused, style],
+  );
+  const handleFocus = useCallback(
+    (event: NativeSyntheticEvent<TargetedEvent>) => {
+      setFocused(true);
+      onFocus?.(event);
+    },
+    [onFocus],
+  );
+  const handleBlur = useCallback(
+    (event: NativeSyntheticEvent<TargetedEvent>) => {
+      setFocused(false);
+      onBlur?.(event);
+    },
+    [onBlur],
   );
 
   const rowStyle = useMemo(() => [styles.row, block && styles.rowBlock], [block]);
 
   return (
-    <Pressable ref={ref} collapsable={false} style={pressableStyle} {...props}>
+    <Pressable
+      ref={ref}
+      collapsable={false}
+      style={pressableStyle}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      {...props}
+    >
       <View style={rowStyle}>
         {children}
         {chevron !== null &&

packages/app/src/components/ui/combobox.tsx

@@ -61,10 +61,14 @@ import {
 } from "@/components/adaptive-modal-sheet";
 import { FloatingSurface } from "@/components/ui/floating";
 import { useDismissKeyboardOnOpen } from "@/components/ui/keyboard-dismiss";
+import { buildDesktopFrameStyle } from "./combobox-frame-style";
+
+export { buildDesktopFrameStyle } from "./combobox-frame-style";
 
 const IS_WEB = isWeb;
 
 export type ComboboxOption = ComboboxOptionModel;
+export type ComboboxDesktopPlacement = "top-start" | "bottom-start";
 
 export interface ComboboxProps {
   options: ComboboxOption[];
@@ -99,7 +103,7 @@ export interface ComboboxProps {
   presentation?: "push" | "replace";
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
-  desktopPlacement?: "top-start" | "bottom-start";
+  desktopPlacement?: ComboboxDesktopPlacement;
   /**
    * Prevents an initial frame at 0,0 by hiding desktop content until floating
    * coordinates resolve. This intentionally disables fade enter/exit animation
@@ -381,7 +385,7 @@ function OptionsList({
 interface DesktopPositionInput {
   isDesktopAboveSearch: boolean;
   isMobile: boolean;
-  desktopPlacement: "top-start" | "bottom-start";
+  desktopPlacement: ComboboxDesktopPlacement;
   referenceTop: number | null;
   referenceLeft: number | null;
   referenceAtOrigin: boolean;
@@ -656,7 +660,7 @@ interface DesktopResetSetters {
 function useDesktopPositionReset(
   isOpen: boolean,
   isMobile: boolean,
-  desktopPlacement: "top-start" | "bottom-start",
+  desktopPlacement: ComboboxDesktopPlacement,
   update: () => unknown,
   setters: DesktopResetSetters,
 ) {
@@ -850,46 +854,6 @@ function buildFloatingMiddleware(input: FloatingMiddlewareInput) {
   ];
 }
 
-interface DesktopContainerStyleInput {
-  desktopMinWidth: number | undefined;
-  referenceWidth: number | null;
-  desktopFixedHeight: number | undefined;
-  desktopPositionStyle: DesktopPositionResult["desktopPositionStyle"];
-  shouldHideDesktopContent: boolean;
-  availableHeight: number | undefined;
-}
-
-function buildDesktopFrameStyle(input: DesktopContainerStyleInput): StyleProp<ViewStyle> {
-  const {
-    desktopMinWidth,
-    referenceWidth,
-    desktopFixedHeight,
-    desktopPositionStyle,
-    shouldHideDesktopContent,
-    availableHeight,
-  } = input;
-  const fixedHeightStyle =
-    desktopFixedHeight != null
-      ? { minHeight: desktopFixedHeight, maxHeight: desktopFixedHeight }
-      : null;
-  const hiddenStyle = shouldHideDesktopContent ? { opacity: 0 } : null;
-  const availableHeightStyle =
-    typeof availableHeight === "number"
-      ? { maxHeight: Math.min(availableHeight, desktopFixedHeight ?? 400) }
-      : null;
-  return [
-    {
-      position: "absolute" as const,
-      minWidth: desktopMinWidth ?? referenceWidth ?? 200,
-      maxWidth: Math.max(400, desktopMinWidth ?? 0),
-    },
-    fixedHeightStyle,
-    desktopPositionStyle,
-    hiddenStyle,
-    availableHeightStyle,
-  ];
-}
-
 function isDesktopKey(key: string): key is DesktopKey {
   return key === "ArrowDown" || key === "ArrowUp" || key === "Enter" || key === "Escape";
 }
@@ -1255,7 +1219,7 @@ export function Combobox({
   presentation,
   open,
   onOpenChange,
-  desktopPlacement = "top-start",
+  desktopPlacement = "bottom-start",
   desktopPreventInitialFlash = true,
   desktopMinWidth,
   desktopFixedHeight,

packages/app/src/components/ui/control-geometry.test.ts

@@ -0,0 +1,113 @@
+import { describe, expect, it } from "vitest";
+import {
+  createControlGeometry,
+  getControlInteractionPhase,
+} from "@/components/ui/control-geometry";
+import type { Theme } from "@/styles/theme";
+
+const theme = {
+  borderRadius: {
+    md: 6,
+    lg: 8,
+    xl: 12,
+  },
+  borderWidth: {
+    1: 1,
+  },
+  colors: {
+    accent: "#20744A",
+    borderAccent: "#2F3534",
+  },
+  fontSize: {
+    xs: 12,
+    sm: 14,
+    base: 16,
+  },
+  opacity: {
+    50: 0.5,
+  },
+  spacing: {
+    0: 0,
+    3: 12,
+    4: 16,
+    6: 24,
+  },
+} as unknown as Theme;
+
+describe("control geometry", () => {
+  it("keeps resting control borders transparent while preserving border geometry", () => {
+    const geometry = createControlGeometry(theme);
+
+    expect(geometry.controlRest).toMatchObject({
+      borderWidth: 1,
+      borderColor: "transparent",
+      outlineColor: "transparent",
+      outlineWidth: 0,
+    });
+  });
+
+  it("uses the shared hover border and active focus ring values", () => {
+    const geometry = createControlGeometry(theme);
+
+    expect(geometry.controlHover).toEqual({
+      borderColor: "#2F3534",
+    });
+    expect(geometry.controlActive).toEqual({
+      borderColor: "#2F3534",
+      outlineColor: "#20744A",
+      outlineOffset: 1,
+      outlineStyle: "solid",
+      outlineWidth: 2,
+    });
+  });
+
+  it("resolves disabled, focus, open, pressed, and hover into one interaction phase", () => {
+    expect(getControlInteractionPhase({ disabled: true, focused: true })).toBe("rest");
+    expect(getControlInteractionPhase({ focused: true })).toBe("active");
+    expect(getControlInteractionPhase({ open: true })).toBe("active");
+    expect(getControlInteractionPhase({ pressed: true })).toBe("active");
+    expect(getControlInteractionPhase({ hovered: true })).toBe("hover");
+    expect(getControlInteractionPhase({})).toBe("rest");
+  });
+
+  it("keeps field text sizing tied to control size", () => {
+    const geometry = createControlGeometry(theme);
+
+    expect(geometry.fieldTextSm.fontSize).toBe(14);
+    expect(geometry.fieldTextSm.lineHeight).toBe(20);
+    expect(geometry.fieldTextMd.fontSize).toBe(16);
+    expect(geometry.fieldTextMd.lineHeight).toBe(22);
+    expect(geometry.formTextInputSm.fontSize).toBe(14);
+    expect(geometry.formTextInputSm.lineHeight).toBe(20);
+    expect(geometry.formTextInputMd.fontSize).toBe(16);
+    expect(geometry.formTextInputMd.lineHeight).toBe(22);
+  });
+
+  it("derives field padding from line height without changing the control height", () => {
+    const geometry = createControlGeometry(theme);
+
+    expect(geometry.fieldControlSm.minHeight).toBe(32);
+    expect(geometry.fieldControlSm.paddingVertical).toBe(6);
+    expect(geometry.fieldTextSm.lineHeight + geometry.fieldControlSm.paddingVertical * 2).toBe(
+      geometry.fieldControlSm.minHeight,
+    );
+
+    expect(geometry.fieldControlMd.minHeight).toBe(44);
+    expect(geometry.fieldControlMd.paddingVertical).toBe(11);
+    expect(geometry.fieldTextMd.lineHeight + geometry.fieldControlMd.paddingVertical * 2).toBe(
+      geometry.fieldControlMd.minHeight,
+    );
+
+    expect(geometry.formTextInputSm.paddingVertical).toBe(6);
+    expect(geometry.formTextInputMd.paddingVertical).toBe(11);
+  });
+
+  it("subtracts segmented control inset from the nested segment radius", () => {
+    const geometry = createControlGeometry(theme);
+
+    expect(geometry.segmentedContainerSm.borderRadius).toBe(6);
+    expect(geometry.segmentedSegmentSm.borderRadius).toBe(4);
+    expect(geometry.segmentedContainerMd.borderRadius).toBe(8);
+    expect(geometry.segmentedSegmentMd.borderRadius).toBe(5);
+  });
+});

packages/app/src/components/ui/control-geometry.ts

@@ -0,0 +1,224 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import { ICON_SIZE, type Theme } from "@/styles/theme";
+
+export type ButtonControlSize = "xs" | "sm" | "md" | "lg";
+export type FieldControlSize = "sm" | "md";
+export type SegmentedControlSize = "sm" | "md";
+export type ControlInteractionPhase = "rest" | "hover" | "active";
+
+export interface ControlInteractionState {
+  hovered?: boolean;
+  focused?: boolean;
+  pressed?: boolean;
+  open?: boolean;
+  active?: boolean;
+  disabled?: boolean;
+}
+
+export interface ControlInteractionStyleMap {
+  controlRest: StyleProp<ViewStyle>;
+  controlHover: StyleProp<ViewStyle>;
+  controlActive: StyleProp<ViewStyle>;
+  controlDisabled?: StyleProp<ViewStyle>;
+}
+
+const COMPACT_CONTROL_HEIGHT = 32;
+const FIELD_CONTROL_HEIGHT = 44;
+const SEGMENTED_COMPACT_INSET = 2;
+const SEGMENTED_FIELD_INSET = 3;
+const SWITCH_TRACK_WIDTH = 34;
+const SWITCH_TRACK_HEIGHT = 20;
+const SWITCH_THUMB_SIZE = 16;
+const CONTROL_FOCUS_RING_WIDTH = 2;
+const CONTROL_FOCUS_RING_OFFSET = 1;
+const CONTROL_CENTER_JUSTIFY_CONTENT = "center";
+const FIELD_TEXT_LINE_HEIGHT_RATIO = 1.4;
+
+const controlHeights = {
+  compact: COMPACT_CONTROL_HEIGHT,
+  field: FIELD_CONTROL_HEIGHT,
+};
+
+export const buttonIconSize: Record<ButtonControlSize, number> = {
+  xs: ICON_SIZE.xs,
+  sm: ICON_SIZE.sm,
+  md: ICON_SIZE.md,
+  lg: ICON_SIZE.lg,
+};
+
+export const segmentedIconSize: Record<SegmentedControlSize, number> = {
+  sm: ICON_SIZE.sm,
+  md: ICON_SIZE.md,
+};
+
+export const switchGeometry = {
+  trackWidth: SWITCH_TRACK_WIDTH,
+  trackHeight: SWITCH_TRACK_HEIGHT,
+  thumbSize: SWITCH_THUMB_SIZE,
+  thumbTravel: SWITCH_TRACK_WIDTH - SWITCH_THUMB_SIZE - (SWITCH_TRACK_HEIGHT - SWITCH_THUMB_SIZE),
+};
+
+function nestedRadius(containerRadius: number, inset: number): number {
+  return Math.max(0, containerRadius - inset);
+}
+
+function fieldLineHeight(fontSize: number): number {
+  return Math.round(fontSize * FIELD_TEXT_LINE_HEIGHT_RATIO);
+}
+
+function fieldVerticalPadding(controlHeight: number, lineHeight: number): number {
+  return (controlHeight - lineHeight) / 2;
+}
+
+export function getControlInteractionPhase(
+  state: ControlInteractionState,
+): ControlInteractionPhase {
+  if (state.disabled) {
+    return "rest";
+  }
+  if (state.active || state.focused || state.open || state.pressed) {
+    return "active";
+  }
+  if (state.hovered) {
+    return "hover";
+  }
+  return "rest";
+}
+
+export function resolveControlInteractionStyles(
+  styles: ControlInteractionStyleMap,
+  state: ControlInteractionState,
+): StyleProp<ViewStyle> {
+  const phase = getControlInteractionPhase(state);
+  return [
+    styles.controlRest,
+    phase === "hover" ? styles.controlHover : null,
+    phase === "active" ? styles.controlActive : null,
+    state.disabled ? styles.controlDisabled : null,
+  ];
+}
+
+export function createControlGeometry(theme: Theme) {
+  const fieldTextSmLineHeight = fieldLineHeight(theme.fontSize.sm);
+  const fieldTextMdLineHeight = fieldLineHeight(theme.fontSize.base);
+  const fieldControlSm = {
+    minHeight: controlHeights.compact,
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: fieldVerticalPadding(controlHeights.compact, fieldTextSmLineHeight),
+    borderRadius: theme.borderRadius.md,
+  };
+  const fieldControlMd = {
+    minHeight: controlHeights.field,
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: fieldVerticalPadding(controlHeights.field, fieldTextMdLineHeight),
+    borderRadius: theme.borderRadius.lg,
+  };
+  const fieldTextSm = {
+    fontSize: theme.fontSize.sm,
+    lineHeight: fieldTextSmLineHeight,
+  };
+  const fieldTextMd = {
+    fontSize: theme.fontSize.base,
+    lineHeight: fieldTextMdLineHeight,
+  };
+  const segmentedContainerSmRadius = theme.borderRadius.md;
+  const segmentedContainerMdRadius = theme.borderRadius.lg;
+  const switchControl = {
+    minHeight: controlHeights.compact,
+    justifyContent: CONTROL_CENTER_JUSTIFY_CONTENT,
+  } satisfies { minHeight: number; justifyContent: "center" };
+
+  return {
+    buttonXs: {
+      minHeight: controlHeights.compact,
+      paddingHorizontal: theme.spacing[3],
+      borderRadius: theme.borderRadius.md,
+    },
+    buttonSm: {
+      minHeight: controlHeights.compact,
+      paddingHorizontal: theme.spacing[3],
+      borderRadius: theme.borderRadius.md,
+    },
+    buttonMd: {
+      minHeight: controlHeights.field,
+      paddingHorizontal: theme.spacing[4],
+      borderRadius: theme.borderRadius.lg,
+    },
+    buttonLg: {
+      minHeight: controlHeights.field,
+      paddingHorizontal: theme.spacing[6],
+      borderRadius: theme.borderRadius.xl,
+    },
+    buttonText: {
+      fontSize: theme.fontSize.sm,
+    },
+    buttonTextXs: {
+      fontSize: theme.fontSize.xs,
+    },
+    formTextInputSm: {
+      ...fieldControlSm,
+      ...fieldTextSm,
+    },
+    formTextInputMd: {
+      ...fieldControlMd,
+      ...fieldTextMd,
+    },
+    formTextInput: {
+      ...fieldControlMd,
+      ...fieldTextMd,
+    },
+    fieldControlSm,
+    fieldControlMd,
+    fieldTextSm,
+    fieldTextMd,
+    controlRest: {
+      borderWidth: theme.borderWidth[1],
+      borderColor: "transparent",
+      outlineWidth: 0,
+      outlineColor: "transparent",
+    },
+    controlHover: {
+      borderColor: theme.colors.borderAccent,
+    },
+    controlActive: {
+      borderColor: theme.colors.borderAccent,
+      outlineColor: theme.colors.accent,
+      outlineOffset: CONTROL_FOCUS_RING_OFFSET,
+      outlineStyle: "solid" as const,
+      outlineWidth: CONTROL_FOCUS_RING_WIDTH,
+    },
+    controlFocusRingColor: {
+      outlineColor: theme.colors.accent,
+    },
+    controlDisabled: {
+      opacity: theme.opacity[50],
+    },
+    switchControl,
+    segmentedContainerSm: {
+      minHeight: controlHeights.compact,
+      padding: SEGMENTED_COMPACT_INSET,
+      borderRadius: segmentedContainerSmRadius,
+    },
+    segmentedContainerMd: {
+      minHeight: controlHeights.field,
+      padding: SEGMENTED_FIELD_INSET,
+      borderRadius: segmentedContainerMdRadius,
+    },
+    segmentedSegmentSm: {
+      minHeight: controlHeights.compact - SEGMENTED_COMPACT_INSET * 2,
+      paddingHorizontal: theme.spacing[4],
+      borderRadius: nestedRadius(segmentedContainerSmRadius, SEGMENTED_COMPACT_INSET),
+    },
+    segmentedSegmentMd: {
+      minHeight: controlHeights.field - SEGMENTED_FIELD_INSET * 2,
+      paddingHorizontal: theme.spacing[6],
+      borderRadius: nestedRadius(segmentedContainerMdRadius, SEGMENTED_FIELD_INSET),
+    },
+    segmentedLabelSm: {
+      fontSize: theme.fontSize.sm,
+    },
+    segmentedLabelMd: {
+      fontSize: theme.fontSize.base,
+    },
+  };
+}

packages/app/src/components/ui/form-field.tsx

@@ -1,9 +1,30 @@
-import { forwardRef, useMemo, type ReactNode } from "react";
-import { Text, View, type TextInput } from "react-native";
+import {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useState,
+  type ForwardedRef,
+  type ReactNode,
+} from "react";
+import {
+  Pressable,
+  StyleSheet as RNStyleSheet,
+  Text,
+  View,
+  type PressableStateCallbackType,
+  type TextInput,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import { AdaptiveTextInput, type AdaptiveTextInputProps } from "@/components/adaptive-modal-sheet";
+import {
+  createControlGeometry,
+  resolveControlInteractionStyles,
+  type FieldControlSize,
+} from "@/components/ui/control-geometry";
 
-interface FormFieldProps {
+interface FieldProps {
   label: string;
   children: ReactNode;
   hint?: string;
@@ -11,20 +32,20 @@ interface FormFieldProps {
   testID?: string;
 }
 
-export function FormField({ label, children, hint, error, testID }: FormFieldProps) {
+export function Field({ label, children, hint, error, testID }: FieldProps) {
   const hintTestID = useMemo(() => (testID ? `${testID}-hint` : undefined), [testID]);
   const errorTestID = useMemo(() => (testID ? `${testID}-error` : undefined), [testID]);
-  const hintOrError = useMemo(() => {
+  const subtext = useMemo(() => {
     if (error) {
       return (
-        <Text style={styles.errorText} testID={errorTestID}>
+        <Text numberOfLines={1} style={styles.errorText} testID={errorTestID}>
           {error}
         </Text>
       );
     }
     if (hint) {
       return (
-        <Text style={styles.hintText} testID={hintTestID}>
+        <Text numberOfLines={1} style={styles.hintText} testID={hintTestID}>
           {hint}
         </Text>
       );
@@ -36,17 +57,167 @@ export function FormField({ label, children, hint, error, testID }: FormFieldPro
     <View style={styles.container} testID={testID}>
       <Text style={styles.label}>{label}</Text>
       {children}
-      {hintOrError}
+      {subtext}
     </View>
   );
 }
 
-export const FormTextInput = forwardRef<TextInput, AdaptiveTextInputProps>(function FormTextInput(
-  { style, ...props },
+type FormTextInputProps = AdaptiveTextInputProps & {
+  size?: FieldControlSize;
+};
+
+type FlatFormTextInputStyle = ViewStyle & TextStyle;
+
+interface SplitFormTextInputStyle {
+  chromeStyle?: ViewStyle;
+  inputStyle?: TextStyle;
+}
+
+function splitFormTextInputStyle(style: AdaptiveTextInputProps["style"]): SplitFormTextInputStyle {
+  const flattened = RNStyleSheet.flatten(style) as FlatFormTextInputStyle | undefined;
+  if (!flattened) {
+    return {};
+  }
+
+  const {
+    color,
+    fontFamily,
+    fontSize,
+    fontStyle,
+    fontVariant,
+    fontWeight,
+    includeFontPadding,
+    letterSpacing,
+    lineHeight,
+    textAlign,
+    textAlignVertical,
+    textDecorationColor,
+    textDecorationLine,
+    textDecorationStyle,
+    textShadowColor,
+    textShadowOffset,
+    textShadowRadius,
+    textTransform,
+    writingDirection,
+    ...chromeStyle
+  } = flattened;
+
+  const inputStyle: TextStyle = {
+    color,
+    fontFamily,
+    fontSize,
+    fontStyle,
+    fontVariant,
+    fontWeight,
+    includeFontPadding,
+    letterSpacing,
+    lineHeight,
+    textAlign,
+    textAlignVertical,
+    textDecorationColor,
+    textDecorationLine,
+    textDecorationStyle,
+    textShadowColor,
+    textShadowOffset,
+    textShadowRadius,
+    textTransform,
+    writingDirection,
+  };
+
+  return {
+    chromeStyle: stripUnistylesMetadata(chromeStyle),
+    inputStyle: stripUnistylesMetadata(inputStyle),
+  };
+}
+
+function stripUnistylesMetadata<TStyle extends object>(style: TStyle): TStyle {
+  const cleanStyle: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(style as Record<string, unknown>)) {
+    if (key.startsWith("unistyles_") || value === undefined) {
+      continue;
+    }
+    cleanStyle[key] = value;
+  }
+  return cleanStyle as TStyle;
+}
+
+function assignTextInputRef(forwardedRef: ForwardedRef<TextInput>, node: TextInput | null): void {
+  if (typeof forwardedRef === "function") {
+    forwardedRef(node);
+    return;
+  }
+  if (forwardedRef) {
+    forwardedRef.current = node;
+  }
+}
+
+export const FormTextInput = forwardRef<TextInput, FormTextInputProps>(function FormTextInput(
+  { size = "md", style, onFocus, onBlur, editable, ...props },
   ref,
 ) {
-  const inputStyle = useMemo(() => [formInputStyles.input, style], [style]);
-  return <AdaptiveTextInput ref={ref} {...props} style={inputStyle} />;
+  const [focused, setFocused] = useState(false);
+  const isDisabled = editable === false;
+  const chromeSizeStyle = size === "sm" ? formInputStyles.chromeSm : formInputStyles.chromeMd;
+  const inputSizeStyle = size === "sm" ? formInputStyles.inputSm : formInputStyles.inputMd;
+  const splitStyle = useMemo(() => splitFormTextInputStyle(style), [style]);
+  const setInputRef = useCallback(
+    (node: TextInput | null) => {
+      assignTextInputRef(ref, node);
+    },
+    [ref],
+  );
+  const handleFocus = useCallback<NonNullable<AdaptiveTextInputProps["onFocus"]>>(
+    (event) => {
+      setFocused(true);
+      onFocus?.(event);
+    },
+    [onFocus],
+  );
+  const handleBlur = useCallback<NonNullable<AdaptiveTextInputProps["onBlur"]>>(
+    (event) => {
+      setFocused(false);
+      onBlur?.(event);
+    },
+    [onBlur],
+  );
+  const inputStyle = useMemo(
+    () => [formInputStyles.input, inputSizeStyle, splitStyle.inputStyle],
+    [inputSizeStyle, splitStyle.inputStyle],
+  ) as AdaptiveTextInputProps["style"];
+  const chromeStyle = useCallback(
+    ({ hovered = false }: PressableStateCallbackType & { hovered?: boolean }) => [
+      formInputStyles.chrome,
+      chromeSizeStyle,
+      resolveControlInteractionStyles(
+        {
+          controlRest: formInputStyles.controlRest,
+          controlHover: formInputStyles.controlHover,
+          controlActive: formInputStyles.controlActive,
+          controlDisabled: formInputStyles.controlDisabled,
+        },
+        {
+          hovered,
+          focused,
+          disabled: isDisabled,
+        },
+      ),
+      splitStyle.chromeStyle,
+    ],
+    [chromeSizeStyle, focused, isDisabled, splitStyle.chromeStyle],
+  );
+
+  return (
+    <Pressable disabled={isDisabled} style={chromeStyle}>
+      <AdaptiveTextInput
+        ref={setInputRef}
+        editable={editable}
+        {...props}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        style={inputStyle}
+      />
+    </Pressable>
+  );
 });
 
 const styles = StyleSheet.create((theme) => ({
@@ -56,27 +227,59 @@ const styles = StyleSheet.create((theme) => ({
   label: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.sm,
-    fontWeight: theme.fontWeight.medium,
+    fontWeight: theme.fontWeight.normal,
   },
   hintText: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.xs,
+    lineHeight: Math.round(theme.fontSize.xs * 1.4),
   },
   errorText: {
     color: theme.colors.palette.red[300],
     fontSize: theme.fontSize.xs,
+    lineHeight: Math.round(theme.fontSize.xs * 1.4),
   },
 }));
 
-const formInputStyles = StyleSheet.create((theme) => ({
-  input: {
-    backgroundColor: theme.colors.surface2,
-    borderRadius: theme.borderRadius.lg,
-    paddingHorizontal: theme.spacing[4],
-    paddingVertical: theme.spacing[3],
-    color: theme.colors.foreground,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    fontSize: theme.fontSize.base,
-  },
-}));
+const formInputStyles = StyleSheet.create((theme) => {
+  const geometry = createControlGeometry(theme);
+
+  return {
+    chrome: {
+      backgroundColor: theme.colors.surface2,
+    },
+    chromeSm: {
+      ...geometry.fieldControlSm,
+    },
+    chromeMd: {
+      ...geometry.fieldControlMd,
+    },
+    controlRest: {
+      ...geometry.controlRest,
+    },
+    controlHover: {
+      ...geometry.controlHover,
+    },
+    controlActive: {
+      ...geometry.controlActive,
+    },
+    controlDisabled: {
+      ...geometry.controlDisabled,
+    },
+    input: {
+      flex: 1,
+      minWidth: 0,
+      color: theme.colors.foreground,
+      paddingHorizontal: 0,
+      paddingVertical: 0,
+      outlineColor: "transparent",
+      outlineWidth: 0,
+    },
+    inputSm: {
+      ...geometry.fieldTextSm,
+    },
+    inputMd: {
+      ...geometry.fieldTextMd,
+    },
+  };
+});

packages/app/src/components/ui/segmented-control.tsx

@@ -1,9 +1,13 @@
 import { useCallback, useMemo, type ReactNode } from "react";
 import { Pressable, Text, View, type PressableStateCallbackType } from "react-native";
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
-
-type SegmentedControlSize = "sm" | "md";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import {
+  createControlGeometry,
+  segmentedIconSize,
+  type SegmentedControlSize,
+} from "@/components/ui/control-geometry";
+import type { Theme } from "@/styles/theme";
 
 type SegmentedControlIconRenderer = (props: { color: string; size: number }) => ReactNode;
 
@@ -25,6 +29,21 @@ interface SegmentedControlProps<T extends string> {
   testID?: string;
 }
 
+interface SegmentIconProps {
+  icon: SegmentedControlIconRenderer;
+  iconSize: number;
+  iconColor: string;
+}
+
+function SegmentIcon({ icon, iconSize, iconColor }: SegmentIconProps) {
+  return <View style={styles.iconContainer}>{icon({ color: iconColor, size: iconSize })}</View>;
+}
+
+const ThemedSegmentIcon = withUnistyles(SegmentIcon);
+
+const selectedIconMapping = (theme: Theme) => ({ iconColor: theme.colors.foreground });
+const mutedIconMapping = (theme: Theme) => ({ iconColor: theme.colors.foregroundMuted });
+
 export function SegmentedControl<T extends string>({
   options,
   value,
@@ -34,11 +53,10 @@ export function SegmentedControl<T extends string>({
   style,
   testID,
 }: SegmentedControlProps<T>) {
-  const { theme } = useUnistyles();
   const containerSizeStyle = size === "sm" ? styles.containerSm : styles.containerMd;
   const segmentSizeStyle = size === "sm" ? styles.segmentSm : styles.segmentMd;
   const labelSizeStyle = size === "sm" ? styles.labelSm : styles.labelMd;
-  const iconSize = size === "sm" ? theme.iconSize.sm : theme.iconSize.md;
+  const iconSize = segmentedIconSize[size];
 
   const containerStyle = useMemo(
     () => [styles.container, containerSizeStyle, style],
@@ -49,14 +67,12 @@ export function SegmentedControl<T extends string>({
     <View style={containerStyle} testID={testID}>
       {options.map((option) => {
         const isSelected = option.value === value;
-        const iconColor = isSelected ? theme.colors.foreground : theme.colors.foregroundMuted;
 
         return (
           <SegmentItem
             key={option.value}
             option={option}
             isSelected={isSelected}
-            iconColor={iconColor}
             iconSize={iconSize}
             hideLabels={hideLabels}
             segmentSizeStyle={segmentSizeStyle}
@@ -73,7 +89,6 @@ export function SegmentedControl<T extends string>({
 function SegmentItem<T extends string>({
   option,
   isSelected,
-  iconColor,
   iconSize,
   hideLabels,
   segmentSizeStyle,
@@ -83,7 +98,6 @@ function SegmentItem<T extends string>({
 }: {
   option: SegmentedControlOption<T>;
   isSelected: boolean;
-  iconColor: string;
   iconSize: number;
   hideLabels: boolean;
   segmentSizeStyle: StyleProp<ViewStyle>;
@@ -119,15 +133,18 @@ function SegmentItem<T extends string>({
     <Pressable
       accessibilityRole="button"
       accessibilityState={accessibilityState}
+      aria-selected={isSelected}
       disabled={option.disabled}
       testID={option.testID}
       onPress={handlePress}
       style={pressableStyle}
     >
       {option.icon ? (
-        <View style={styles.iconContainer}>
-          {option.icon({ color: iconColor, size: iconSize })}
-        </View>
+        <ThemedSegmentIcon
+          icon={option.icon}
+          iconSize={iconSize}
+          uniProps={isSelected ? selectedIconMapping : mutedIconMapping}
+        />
       ) : null}
       {hideLabels ? null : (
         <Text style={labelStyle} numberOfLines={1}>
@@ -138,68 +155,68 @@ function SegmentItem<T extends string>({
   );
 }
 
-const styles = StyleSheet.create((theme) => ({
-  container: {
-    flexDirection: "row",
-    alignItems: "stretch",
-    backgroundColor: theme.colors.surface2,
-    borderRadius: theme.borderRadius.lg,
-    gap: 2,
-  },
-  containerSm: {
-    padding: 2,
-  },
-  containerMd: {
-    padding: 3,
-  },
-  segment: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-    borderRadius: theme.borderRadius.lg,
-    gap: theme.spacing[1],
-  },
-  segmentSm: {
-    paddingVertical: theme.spacing[1.5],
-    paddingHorizontal: theme.spacing[4],
-  },
-  segmentMd: {
-    paddingVertical: theme.spacing[3],
-    paddingHorizontal: theme.spacing[6],
-  },
-  segmentSelected: {
-    backgroundColor: theme.colors.surface0,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.08,
-    shadowRadius: 2,
-    elevation: 1,
-  },
-  segmentHover: {
-    backgroundColor: theme.colors.surface1,
-  },
-  segmentPressed: {
-    backgroundColor: theme.colors.surface1,
-  },
-  segmentDisabled: {
-    opacity: theme.opacity[50],
-  },
-  iconContainer: {
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  label: {
-    color: theme.colors.foregroundMuted,
-    fontWeight: theme.fontWeight.normal,
-  },
-  labelSm: {
-    fontSize: theme.fontSize.sm,
-  },
-  labelMd: {
-    fontSize: theme.fontSize.base,
-  },
-  labelSelected: {
-    color: theme.colors.foreground,
-  },
-}));
+const styles = StyleSheet.create((theme) => {
+  const geometry = createControlGeometry(theme);
+
+  return {
+    container: {
+      flexDirection: "row",
+      alignItems: "stretch",
+      backgroundColor: theme.colors.surface2,
+      gap: 2,
+    },
+    containerSm: {
+      ...geometry.segmentedContainerSm,
+    },
+    containerMd: {
+      ...geometry.segmentedContainerMd,
+    },
+    segment: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      gap: theme.spacing[1],
+    },
+    segmentSm: {
+      ...geometry.segmentedSegmentSm,
+    },
+    segmentMd: {
+      ...geometry.segmentedSegmentMd,
+    },
+    segmentSelected: {
+      backgroundColor: theme.colors.surface0,
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.08,
+      shadowRadius: 2,
+      elevation: 1,
+    },
+    segmentHover: {
+      backgroundColor: theme.colors.surface1,
+    },
+    segmentPressed: {
+      backgroundColor: theme.colors.surface1,
+    },
+    segmentDisabled: {
+      opacity: theme.opacity[50],
+    },
+    iconContainer: {
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    label: {
+      color: theme.colors.foregroundMuted,
+      fontWeight: theme.fontWeight.normal,
+    },
+    labelSm: {
+      ...geometry.segmentedLabelSm,
+    },
+    labelMd: {
+      ...geometry.segmentedLabelMd,
+    },
+    labelSelected: {
+      color: theme.colors.foreground,
+    },
+  };
+});

packages/app/src/components/ui/select-field.tsx

@@ -0,0 +1,394 @@
+import { useCallback, useMemo, useRef, useState, type ReactElement, type ReactNode } from "react";
+import {
+  Pressable,
+  Text,
+  View,
+  type NativeSyntheticEvent,
+  type PressableStateCallbackType,
+  type TargetedEvent,
+} from "react-native";
+import { ChevronDown } from "lucide-react-native";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import { Combobox, ComboboxItem, type ComboboxOption } from "@/components/ui/combobox";
+import {
+  createControlGeometry,
+  resolveControlInteractionStyles,
+  type FieldControlSize,
+} from "@/components/ui/control-geometry";
+import { Field } from "@/components/ui/form-field";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ICON_SIZE, type Theme } from "@/styles/theme";
+
+export interface SelectFieldDisplay {
+  label: string;
+  description?: string;
+}
+
+export interface SelectFieldOption<TValue> {
+  id: string;
+  value: TValue;
+  label: string;
+  description?: string;
+  kind?: ComboboxOption["kind"];
+  testID?: string;
+}
+
+export interface SelectFieldRenderOptionInput<TValue> {
+  option: SelectFieldOption<TValue>;
+  selected: boolean;
+  active: boolean;
+  onPress: () => void;
+}
+
+export interface SelectFieldProps<TValue> {
+  label: string;
+  value: TValue | null;
+  selectedDisplay: SelectFieldDisplay | null;
+  options: SelectFieldOption<TValue>[];
+  onChange: (value: TValue, display: SelectFieldDisplay) => void;
+  placeholder: string;
+  emptyText: string;
+  loading?: boolean;
+  disabled?: boolean;
+  hint?: string;
+  error?: string | null;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  title?: string;
+  size?: FieldControlSize;
+  getValueKey?: (value: TValue) => string;
+  renderOption?: (input: SelectFieldRenderOptionInput<TValue>) => ReactElement;
+  triggerLeading?: ReactNode;
+  field?: boolean;
+  testID?: string;
+  triggerTestID?: string;
+}
+
+export interface SelectFieldTriggerProps {
+  display?: SelectFieldDisplay | null;
+  label?: string;
+  isPlaceholder?: boolean;
+  placeholder: string;
+  hovered?: boolean;
+  focused?: boolean;
+  active?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  leading?: ReactNode;
+  size?: FieldControlSize;
+  testID?: string;
+}
+
+const ThemedChevronDown = withUnistyles(ChevronDown);
+const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
+
+const foregroundMutedMapping = (theme: Theme) => ({
+  color: theme.colors.foregroundMuted,
+});
+
+function getSelectedOptionId<TValue>(
+  options: readonly SelectFieldOption<TValue>[],
+  value: TValue | null,
+  getValueKey: ((value: TValue) => string) | undefined,
+): string {
+  if (value === null) {
+    return "";
+  }
+  if (getValueKey) {
+    const selectedKey = getValueKey(value);
+    return options.find((option) => getValueKey(option.value) === selectedKey)?.id ?? "";
+  }
+  return options.find((option) => Object.is(option.value, value))?.id ?? "";
+}
+
+function useVisibleSelectOptions<TValue>(
+  options: SelectFieldOption<TValue>[],
+  loading: boolean,
+): SelectFieldOption<TValue>[] {
+  const previousOptionsRef = useRef<SelectFieldOption<TValue>[]>(options);
+  if (options.length > 0 || !loading) {
+    previousOptionsRef.current = options;
+  }
+  if (loading && options.length === 0) {
+    return previousOptionsRef.current;
+  }
+  return options;
+}
+
+export function SelectFieldTrigger({
+  display,
+  label: explicitLabel,
+  isPlaceholder: explicitIsPlaceholder,
+  placeholder,
+  hovered = false,
+  focused = false,
+  active = false,
+  disabled = false,
+  loading = false,
+  leading,
+  size = "md",
+  testID,
+}: SelectFieldTriggerProps): ReactElement {
+  const sizeStyle = size === "sm" ? styles.triggerSm : styles.triggerMd;
+  const textSizeStyle = size === "sm" ? styles.triggerTextSm : styles.triggerTextMd;
+  const triggerStyle = useMemo(
+    () => [
+      styles.trigger,
+      sizeStyle,
+      resolveControlInteractionStyles(
+        {
+          controlRest: styles.controlRest,
+          controlHover: styles.controlHover,
+          controlActive: styles.controlActive,
+          controlDisabled: styles.controlDisabled,
+        },
+        { hovered, focused, active, disabled },
+      ),
+    ],
+    [active, disabled, focused, hovered, sizeStyle],
+  );
+  const label = explicitLabel ?? display?.label ?? placeholder;
+  const isPlaceholder = explicitIsPlaceholder ?? display == null;
+  const textStyle = useMemo(
+    () => [isPlaceholder ? styles.placeholderText : styles.triggerText, textSizeStyle],
+    [isPlaceholder, textSizeStyle],
+  );
+
+  return (
+    <View pointerEvents="none" style={triggerStyle} testID={testID}>
+      {leading}
+      <Text style={textStyle} numberOfLines={1}>
+        {label}
+      </Text>
+      {loading ? (
+        <View style={styles.spinnerSlot}>
+          <ThemedLoadingSpinner size={ICON_SIZE.sm} uniProps={foregroundMutedMapping} />
+        </View>
+      ) : null}
+      <ThemedChevronDown size={ICON_SIZE.md} uniProps={foregroundMutedMapping} />
+    </View>
+  );
+}
+
+export function SelectField<TValue>({
+  label,
+  value,
+  selectedDisplay,
+  options,
+  onChange,
+  placeholder,
+  emptyText,
+  loading = false,
+  disabled = false,
+  hint,
+  error,
+  searchable = false,
+  searchPlaceholder,
+  title,
+  size = "md",
+  getValueKey,
+  renderOption,
+  triggerLeading,
+  field = true,
+  testID,
+  triggerTestID,
+}: SelectFieldProps<TValue>): ReactElement {
+  const anchorRef = useRef<View>(null);
+  const [open, setOpen] = useState(false);
+  const [triggerFocused, setTriggerFocused] = useState(false);
+  const visibleOptions = useVisibleSelectOptions(options, loading);
+  const selectedOptionId = useMemo(
+    () => getSelectedOptionId(visibleOptions, value, getValueKey),
+    [getValueKey, value, visibleOptions],
+  );
+  const comboboxOptions = useMemo<ComboboxOption[]>(
+    () =>
+      visibleOptions.map((option) => ({
+        id: option.id,
+        label: option.label,
+        description: option.description,
+        kind: option.kind,
+      })),
+    [visibleOptions],
+  );
+  const optionById = useMemo(
+    () => new Map(visibleOptions.map((option) => [option.id, option])),
+    [visibleOptions],
+  );
+
+  const handleSelect = useCallback(
+    (id: string) => {
+      const option = optionById.get(id);
+      if (!option) {
+        return;
+      }
+      onChange(option.value, { label: option.label, description: option.description });
+      setOpen(false);
+    },
+    [onChange, optionById],
+  );
+
+  const handlePress = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    setOpen((current) => !current);
+  }, [disabled]);
+  const handleTriggerFocus = useCallback((_event: NativeSyntheticEvent<TargetedEvent>) => {
+    setTriggerFocused(true);
+  }, []);
+  const handleTriggerBlur = useCallback((_event: NativeSyntheticEvent<TargetedEvent>) => {
+    setTriggerFocused(false);
+  }, []);
+
+  const renderComboboxOption = useCallback(
+    ({
+      option,
+      selected,
+      active,
+      onPress,
+    }: {
+      option: ComboboxOption;
+      selected: boolean;
+      active: boolean;
+      onPress: () => void;
+    }) => {
+      const selectOption = optionById.get(option.id);
+      if (!selectOption) {
+        return (
+          <ComboboxItem
+            label={option.label}
+            description={option.description}
+            kind={option.kind}
+            selected={selected}
+            active={active}
+            onPress={onPress}
+          />
+        );
+      }
+      if (renderOption) {
+        return renderOption({ option: selectOption, selected, active, onPress });
+      }
+      return (
+        <ComboboxItem
+          testID={selectOption.testID}
+          label={selectOption.label}
+          description={selectOption.description}
+          kind={selectOption.kind}
+          selected={selected}
+          active={active}
+          onPress={onPress}
+        />
+      );
+    },
+    [optionById, renderOption],
+  );
+
+  const displayLabel = selectedDisplay?.label ?? placeholder;
+  const fieldHint = selectedDisplay?.description ?? hint;
+
+  const control = (
+    <>
+      <View ref={anchorRef} collapsable={false}>
+        <Pressable
+          onPress={handlePress}
+          onFocus={handleTriggerFocus}
+          onBlur={handleTriggerBlur}
+          disabled={disabled}
+          accessibilityRole="button"
+          accessibilityLabel={`${label} (${displayLabel})`}
+          testID={triggerTestID}
+        >
+          {({ hovered, pressed }: PressableStateCallbackType & { hovered?: boolean }) => (
+            <SelectFieldTrigger
+              display={selectedDisplay}
+              placeholder={placeholder}
+              hovered={Boolean(hovered)}
+              focused={triggerFocused}
+              active={pressed || open}
+              disabled={disabled}
+              loading={loading}
+              leading={triggerLeading}
+              size={size}
+            />
+          )}
+        </Pressable>
+      </View>
+      <Combobox
+        options={comboboxOptions}
+        value={selectedOptionId}
+        onSelect={handleSelect}
+        searchable={searchable}
+        searchPlaceholder={searchPlaceholder}
+        emptyText={loading && visibleOptions.length === 0 ? "Loading..." : emptyText}
+        title={title ?? label}
+        open={open}
+        onOpenChange={setOpen}
+        anchorRef={anchorRef}
+        renderOption={renderComboboxOption}
+      />
+    </>
+  );
+
+  if (!field) {
+    return <View testID={testID}>{control}</View>;
+  }
+
+  return (
+    <Field label={label} hint={fieldHint} error={error} testID={testID}>
+      {control}
+    </Field>
+  );
+}
+
+const styles = StyleSheet.create((theme) => {
+  const geometry = createControlGeometry(theme);
+
+  return {
+    trigger: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: theme.spacing[2],
+      backgroundColor: theme.colors.surface2,
+    },
+    triggerSm: {
+      ...geometry.fieldControlSm,
+    },
+    triggerMd: {
+      ...geometry.fieldControlMd,
+    },
+    controlRest: {
+      ...geometry.controlRest,
+    },
+    controlHover: {
+      ...geometry.controlHover,
+    },
+    controlActive: {
+      ...geometry.controlActive,
+    },
+    controlDisabled: {
+      ...geometry.controlDisabled,
+    },
+    triggerText: {
+      flex: 1,
+      minWidth: 0,
+      color: theme.colors.foreground,
+    },
+    placeholderText: {
+      flex: 1,
+      minWidth: 0,
+      color: theme.colors.foregroundMuted,
+    },
+    triggerTextSm: {
+      ...geometry.fieldTextSm,
+    },
+    triggerTextMd: {
+      ...geometry.fieldTextMd,
+    },
+    spinnerSlot: {
+      flexShrink: 0,
+      width: ICON_SIZE.md,
+      alignItems: "center",
+    },
+  };
+});

packages/app/src/components/ui/switch.test.tsx

@@ -7,10 +7,15 @@ import { Switch } from "./switch";
 const { theme } = vi.hoisted(() => ({
   theme: {
     opacity: { 50: 0.5 },
+    spacing: { 0: 0, 3: 12, 4: 16, 6: 24 },
+    fontSize: { xs: 12, sm: 14, base: 16 },
+    borderRadius: { md: 6, lg: 8, xl: 12 },
+    borderWidth: { 1: 1 },
     colors: {
       surface3: "#333",
       accent: "#0a84ff",
       accentForeground: "#fff",
+      borderAccent: "#555",
       palette: { white: "#fff" },
     },
   },
@@ -32,6 +37,9 @@ vi.mock("react-native-reanimated", () => ({
 }));
 
 vi.mock("react-native", () => ({
+  Platform: {
+    select: (values: Record<string, unknown>) => values.web ?? values.default,
+  },
   Pressable: ({
     "aria-checked": ariaChecked,
     accessibilityLabel,
@@ -71,7 +79,13 @@ vi.mock("react-native-unistyles", () => ({
   StyleSheet: {
     create: (factory: unknown) => (typeof factory === "function" ? factory(theme) : factory),
   },
-  useUnistyles: () => ({ theme }),
+  withUnistyles:
+    (
+      Component: React.ComponentType<Record<string, unknown>>,
+      mapping?: (theme: unknown) => object,
+    ) =>
+    (props: Record<string, unknown>) =>
+      React.createElement(Component, { ...props, ...mapping?.(theme) }),
 }));
 
 describe("Switch", () => {

packages/app/src/components/ui/switch.tsx

@@ -12,7 +12,9 @@ import Animated, {
   useDerivedValue,
   withTiming,
 } from "react-native-reanimated";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import { createControlGeometry, switchGeometry } from "@/components/ui/control-geometry";
+import type { Theme } from "@/styles/theme";
 
 interface SwitchProps {
   value: boolean;
@@ -23,11 +25,54 @@ interface SwitchProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const TRACK = { width: 34, height: 20 };
-const THUMB = 16;
-
 const TIMING = { duration: 180, easing: Easing.inOut(Easing.ease) };
 
+interface SwitchTrackProps {
+  value: boolean;
+  trackOffColor: string;
+  trackOnColor: string;
+  thumbOffColor: string;
+  thumbOnColor: string;
+}
+
+function SwitchTrack({
+  value,
+  trackOffColor,
+  trackOnColor,
+  thumbOffColor,
+  thumbOnColor,
+}: SwitchTrackProps) {
+  const progress = useDerivedValue(() => withTiming(value ? 1 : 0, TIMING));
+
+  const trackAnimatedStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(progress.value, [0, 1], [trackOffColor, trackOnColor]),
+  }));
+
+  const thumbAnimatedStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(progress.value, [0, 1], [thumbOffColor, thumbOnColor]),
+    transform: [{ translateX: progress.value * switchGeometry.thumbTravel }],
+  }));
+
+  const trackStyle = useMemo(() => [styles.switchTrack, trackAnimatedStyle], [trackAnimatedStyle]);
+  const thumbStyle = useMemo(
+    () => [styles.switchThumb, styles.thumb, thumbAnimatedStyle],
+    [thumbAnimatedStyle],
+  );
+
+  return (
+    <Animated.View style={trackStyle}>
+      <Animated.View style={thumbStyle} />
+    </Animated.View>
+  );
+}
+
+const ThemedSwitchTrack = withUnistyles(SwitchTrack, (theme: Theme) => ({
+  trackOffColor: theme.colors.surface3,
+  trackOnColor: theme.colors.accent,
+  thumbOffColor: theme.colors.palette.white,
+  thumbOnColor: theme.colors.accentForeground,
+}));
+
 export function Switch({
   value,
   onValueChange,
@@ -36,31 +81,6 @@ export function Switch({
   testID,
   style,
 }: SwitchProps) {
-  const { theme } = useUnistyles();
-  const track = TRACK;
-  const thumb = THUMB;
-  const padding = (track.height - thumb) / 2;
-  const thumbTravel = track.width - thumb - padding * 2;
-
-  const progress = useDerivedValue(() => withTiming(value ? 1 : 0, TIMING));
-
-  const trackAnimatedStyle = useAnimatedStyle(() => ({
-    backgroundColor: interpolateColor(
-      progress.value,
-      [0, 1],
-      [theme.colors.surface3, theme.colors.accent],
-    ),
-  }));
-
-  const thumbAnimatedStyle = useAnimatedStyle(() => ({
-    backgroundColor: interpolateColor(
-      progress.value,
-      [0, 1],
-      [theme.colors.palette.white, theme.colors.accentForeground],
-    ),
-    transform: [{ translateX: progress.value * thumbTravel }],
-  }));
-
   const handlePress = useCallback(
     (event: GestureResponderEvent) => {
       event.stopPropagation();
@@ -72,30 +92,9 @@ export function Switch({
 
   const accessibilityState = useMemo(() => ({ checked: value, disabled }), [value, disabled]);
   const pressableStyle = useMemo(
-    () => [disabled ? styles.disabled : null, style],
+    () => [styles.switchControl, disabled ? styles.disabled : null, style],
     [disabled, style],
   );
-  const trackStyle = useMemo(
-    () => [
-      styles.track,
-      {
-        width: track.width,
-        height: track.height,
-        borderRadius: track.height / 2,
-        padding,
-      },
-      trackAnimatedStyle,
-    ],
-    [track.width, track.height, padding, trackAnimatedStyle],
-  );
-  const thumbStyle = useMemo(
-    () => [
-      styles.thumb,
-      { width: thumb, height: thumb, borderRadius: thumb / 2 },
-      thumbAnimatedStyle,
-    ],
-    [thumb, thumbAnimatedStyle],
-  );
 
   return (
     <Pressable
@@ -109,25 +108,39 @@ export function Switch({
       testID={testID}
       style={pressableStyle}
     >
-      <Animated.View style={trackStyle}>
-        <Animated.View style={thumbStyle} />
-      </Animated.View>
+      <ThemedSwitchTrack value={value} />
     </Pressable>
   );
 }
 
-const styles = StyleSheet.create((theme) => ({
-  track: {
-    justifyContent: "center",
-  },
-  thumb: {
-    shadowColor: "rgba(0, 0, 0, 0.25)",
-    shadowOffset: { width: 0, height: 1 },
-    shadowRadius: 2,
-    shadowOpacity: 1,
-    elevation: 2,
-  },
-  disabled: {
-    opacity: theme.opacity[50],
-  },
-}));
+const styles = StyleSheet.create((theme) => {
+  const geometry = createControlGeometry(theme);
+
+  return {
+    switchControl: {
+      ...geometry.switchControl,
+    },
+    switchTrack: {
+      width: switchGeometry.trackWidth,
+      height: switchGeometry.trackHeight,
+      borderRadius: switchGeometry.trackHeight / 2,
+      padding: (switchGeometry.trackHeight - switchGeometry.thumbSize) / 2,
+      justifyContent: "center",
+    },
+    switchThumb: {
+      width: switchGeometry.thumbSize,
+      height: switchGeometry.thumbSize,
+      borderRadius: switchGeometry.thumbSize / 2,
+    },
+    thumb: {
+      shadowColor: "rgba(0, 0, 0, 0.25)",
+      shadowOffset: { width: 0, height: 1 },
+      shadowRadius: 2,
+      shadowOpacity: 1,
+      elevation: 2,
+    },
+    disabled: {
+      opacity: theme.opacity[50],
+    },
+  };
+});

packages/app/src/components/workspace-shortcut-targets-subscriber.test.tsx

@@ -14,6 +14,7 @@ import { useSidebarOrderStore } from "@/stores/sidebar-order-store";
 import { useSidebarViewStore } from "@/stores/sidebar-view-store";
 import type { HostProfile } from "@/types/host-connection";
 import { WorkspaceShortcutTargetsSubscriber } from "./workspace-shortcut-targets-subscriber";
+import { SidebarModelProvider } from "./sidebar/sidebar-model";
 
 vi.hoisted(() => {
   (globalThis as unknown as { __DEV__: boolean }).__DEV__ = false;
@@ -122,7 +123,11 @@ describe("WorkspaceShortcutTargetsSubscriber", () => {
 
   it("publishes workspace shortcut targets without rendering the sidebar", async () => {
     await act(async () => {
-      root?.render(<WorkspaceShortcutTargetsSubscriber enabled={true} />);
+      root?.render(
+        <SidebarModelProvider>
+          <WorkspaceShortcutTargetsSubscriber enabled={true} />
+        </SidebarModelProvider>,
+      );
     });
 
     expect(useKeyboardShortcutsStore.getState().sidebarShortcutWorkspaceTargets).toEqual([
@@ -186,7 +191,11 @@ describe("WorkspaceShortcutTargetsSubscriber", () => {
     });
 
     await act(async () => {
-      root?.render(<WorkspaceShortcutTargetsSubscriber enabled={true} />);
+      root?.render(
+        <SidebarModelProvider>
+          <WorkspaceShortcutTargetsSubscriber enabled={true} />
+        </SidebarModelProvider>,
+      );
     });
 
     expect(useKeyboardShortcutsStore.getState().sidebarShortcutWorkspaceTargets).toEqual([
@@ -220,7 +229,11 @@ describe("WorkspaceShortcutTargetsSubscriber", () => {
     });
 
     await act(async () => {
-      root?.render(<WorkspaceShortcutTargetsSubscriber enabled={true} />);
+      root?.render(
+        <SidebarModelProvider>
+          <WorkspaceShortcutTargetsSubscriber enabled={true} />
+        </SidebarModelProvider>,
+      );
     });
 
     expect(useKeyboardShortcutsStore.getState().sidebarShortcutWorkspaceTargets).toEqual([
@@ -238,11 +251,19 @@ describe("WorkspaceShortcutTargetsSubscriber", () => {
 
   it("clears targets when disabled", async () => {
     await act(async () => {
-      root?.render(<WorkspaceShortcutTargetsSubscriber enabled={true} />);
+      root?.render(
+        <SidebarModelProvider>
+          <WorkspaceShortcutTargetsSubscriber enabled={true} />
+        </SidebarModelProvider>,
+      );
     });
 
     await act(async () => {
-      root?.render(<WorkspaceShortcutTargetsSubscriber enabled={false} />);
+      root?.render(
+        <SidebarModelProvider>
+          <WorkspaceShortcutTargetsSubscriber enabled={false} />
+        </SidebarModelProvider>,
+      );
     });
 
     expect(useKeyboardShortcutsStore.getState().sidebarShortcutWorkspaceTargets).toEqual([]);

packages/app/src/components/workspace-shortcut-targets-subscriber.tsx

@@ -1,56 +1,13 @@
-import { useEffect, useMemo } from "react";
-import { useSidebarWorkspacesList } from "@/hooks/use-sidebar-workspaces-list";
-import { useStatusModeWorkspacePlacements } from "@/hooks/use-status-mode-workspaces";
+import { useEffect } from "react";
+import { useSidebarModel } from "@/components/sidebar/sidebar-model";
 import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
-import { useSidebarCollapsedSectionsStore } from "@/stores/sidebar-collapsed-sections-store";
-import { useSidebarViewStore } from "@/stores/sidebar-view-store";
-import {
-  buildSidebarShortcutModel,
-  buildStatusSidebarShortcutModel,
-} from "@/utils/sidebar-shortcuts";
 
 export function WorkspaceShortcutTargetsSubscriber({ enabled }: { enabled: boolean }) {
-  const { workspacePlacements, projects, projectNamesByKey } = useSidebarWorkspacesList({
-    enabled,
-  });
-  const groupMode = useSidebarViewStore((state) => state.groupMode);
-  const isStatusMode = enabled && groupMode === "status";
-  const statusWorkspacePlacements = useStatusModeWorkspacePlacements({
-    placements: workspacePlacements,
-    enabled: isStatusMode,
-  });
-  const collapsedProjectKeys = useSidebarCollapsedSectionsStore(
-    (state) => state.collapsedProjectKeys,
-  );
-  const collapsedStatusGroupKeys = useSidebarCollapsedSectionsStore(
-    (state) => state.collapsedStatusGroupKeys,
-  );
+  const { shortcutModel } = useSidebarModel();
   const setSidebarShortcutWorkspaceTargets = useKeyboardShortcutsStore(
     (state) => state.setSidebarShortcutWorkspaceTargets,
   );
 
-  const shortcutModel = useMemo(() => {
-    if (groupMode === "status") {
-      return buildStatusSidebarShortcutModel({
-        workspaces: statusWorkspacePlacements,
-        projectNamesByKey,
-        collapsedStatusGroupKeys,
-      });
-    }
-
-    return buildSidebarShortcutModel({
-      projects,
-      collapsedProjectKeys,
-    });
-  }, [
-    collapsedProjectKeys,
-    collapsedStatusGroupKeys,
-    groupMode,
-    projectNamesByKey,
-    projects,
-    statusWorkspacePlacements,
-  ]);
-
   useEffect(() => {
     if (!enabled) {
       setSidebarShortcutWorkspaceTargets([]);

packages/app/src/composer/agent-controls/index.tsx

@@ -805,6 +805,8 @@ function DesktopAgentControlsContent(props: DesktopAgentControlsContentProps) {
                 onRetryProvider={onRetryModelProvider}
                 isRetryingProvider={isRetryingModelProvider}
                 serverId={modelSelectorServerId}
+                desktopPlacement="top-start"
+                desktopMinWidth={360}
               />
             </View>
           </TooltipTrigger>
@@ -1012,6 +1014,8 @@ function SheetAgentControlsContent(props: SheetAgentControlsContentProps) {
           isRetryingProvider={isRetryingModelProvider}
           renderTrigger={renderModelTrigger}
           serverId={modelSelectorServerId}
+          desktopPlacement="top-start"
+          desktopMinWidth={360}
         />
       ) : null}
 
@@ -1684,6 +1688,8 @@ export function DraftAgentControls({
           onRetryProvider={onRetryModelProvider}
           isRetryingProvider={isRetryingModelProvider}
           serverId={modelSelectorServerId}
+          desktopPlacement="top-start"
+          desktopMinWidth={360}
         />
         {selectedProvider ? (
           <ControlledAgentControls

packages/app/src/contexts/explorer-sidebar-animation-context.tsx

@@ -1,266 +0,0 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
-import { useWindowDimensions } from "react-native";
-import { useSharedValue, withTiming, Easing, type SharedValue } from "react-native-reanimated";
-import { type GestureType } from "react-native-gesture-handler";
-import { useIsCompactFormFactor } from "@/constants/layout";
-import { useSidebarAnimation } from "@/contexts/sidebar-animation-context";
-import { selectIsFileExplorerOpen, usePanelStore } from "@/stores/panel-store";
-import {
-  getRightSidebarAnimationTargets,
-  shouldSyncSidebarAnimation,
-} from "@/utils/sidebar-animation-state";
-
-const ANIMATION_DURATION = 220;
-const ANIMATION_EASING = Easing.bezier(0.25, 0.1, 0.25, 1);
-// Keeps the overlay displayed long enough for the close animation to finish
-// before React hides it.
-const OVERLAY_CLOSE_GRACE_MS = 300;
-interface ExplorerSidebarAnimationContextValue {
-  translateX: SharedValue<number>;
-  backdropOpacity: SharedValue<number>;
-  windowWidth: number;
-  animateToOpen: () => void;
-  animateToClose: () => void;
-  overlayVisible: boolean;
-  setOverlayPeek: (peek: boolean) => void;
-  isGesturing: SharedValue<boolean>;
-  gestureAnimatingRef: React.MutableRefObject<boolean>;
-  openGestureRef: React.MutableRefObject<GestureType | undefined>;
-  closeGestureRef: React.MutableRefObject<GestureType | undefined>;
-}
-
-const ExplorerSidebarAnimationContext = createContext<ExplorerSidebarAnimationContextValue | null>(
-  null,
-);
-
-export function ExplorerSidebarAnimationProvider({ children }: { children: ReactNode }) {
-  const { startMobilePanelTransition, settleMobilePanel } = useSidebarAnimation();
-  const { width: windowWidth } = useWindowDimensions();
-  const isCompactLayout = useIsCompactFormFactor();
-  const mobileView = usePanelStore((state) => state.mobileView);
-  const isOpen = usePanelStore((state) =>
-    selectIsFileExplorerOpen(state, { isCompact: isCompactLayout }),
-  );
-
-  // Right sidebar: closed = +windowWidth (off-screen right), open = 0
-  const initialTargets = getRightSidebarAnimationTargets({ isOpen, windowWidth });
-  const translateX = useSharedValue(initialTargets.translateX);
-  const backdropOpacity = useSharedValue(initialTargets.backdropOpacity);
-  const isGesturing = useSharedValue(false);
-  const gestureAnimatingRef = useRef(false);
-  const openGestureRef = useRef<GestureType | undefined>(undefined);
-  const closeGestureRef = useRef<GestureType | undefined>(undefined);
-
-  // React owns whether the overlay is displayed at all; the worklet owns its
-  // motion. See the matching block in sidebar-animation-context.tsx for why
-  // (Fabric re-applies stale animated props over committed props,
-  // reanimated#9635).
-  const [overlayPeek, setOverlayPeek] = useState(false);
-  const overlayTarget = isOpen || overlayPeek;
-  const [overlayVisible, setOverlayVisible] = useState(overlayTarget);
-  useEffect(() => {
-    if (overlayTarget) {
-      setOverlayVisible(true);
-      return;
-    }
-    const timer = setTimeout(() => setOverlayVisible(false), OVERLAY_CLOSE_GRACE_MS);
-    return () => clearTimeout(timer);
-  }, [overlayTarget]);
-
-  // Track previous isOpen to detect changes
-  const prevIsOpen = useRef(isOpen);
-  const prevMobileView = useRef(mobileView);
-  const prevWindowWidth = useRef(windowWidth);
-
-  // Sync animation with store state changes (e.g., backdrop tap, programmatic open/close)
-  useEffect(() => {
-    const didStateChange = shouldSyncSidebarAnimation({
-      previousIsOpen: prevIsOpen.current,
-      nextIsOpen: isOpen,
-      previousWindowWidth: prevWindowWidth.current,
-      nextWindowWidth: windowWidth,
-    });
-    const didMobileViewChange = prevMobileView.current !== mobileView;
-    const previousIsOpen = prevIsOpen.current;
-    const previousMobileView = prevMobileView.current;
-    const ownsMobileViewChange =
-      previousMobileView === "file-explorer" || mobileView === "file-explorer";
-    prevIsOpen.current = isOpen;
-    prevMobileView.current = mobileView;
-    prevWindowWidth.current = windowWidth;
-
-    if (!didStateChange && !didMobileViewChange) {
-      return;
-    }
-
-    if (gestureAnimatingRef.current) {
-      gestureAnimatingRef.current = false;
-      return;
-    }
-
-    // Don't animate if we're in the middle of a gesture - the gesture handler will handle it
-    if (isGesturing.value) {
-      return;
-    }
-
-    const targets = getRightSidebarAnimationTargets({ isOpen, windowWidth });
-
-    if (previousIsOpen !== isOpen) {
-      if (isOpen) {
-        if (isCompactLayout) {
-          startMobilePanelTransition("file-explorer");
-        }
-        translateX.value = withTiming(
-          targets.translateX,
-          {
-            duration: ANIMATION_DURATION,
-            easing: ANIMATION_EASING,
-          },
-          (finished) => {
-            if (!finished) return;
-            if (isCompactLayout) {
-              settleMobilePanel("file-explorer");
-            }
-          },
-        );
-        backdropOpacity.value = withTiming(targets.backdropOpacity, {
-          duration: ANIMATION_DURATION,
-          easing: ANIMATION_EASING,
-        });
-        return;
-      }
-
-      if (isCompactLayout && mobileView === "agent") {
-        startMobilePanelTransition("agent");
-      }
-      translateX.value = withTiming(
-        targets.translateX,
-        {
-          duration: ANIMATION_DURATION,
-          easing: ANIMATION_EASING,
-        },
-        (finished) => {
-          if (!finished) return;
-          if (isCompactLayout && mobileView === "agent") {
-            settleMobilePanel("agent");
-          }
-        },
-      );
-      backdropOpacity.value = withTiming(targets.backdropOpacity, {
-        duration: ANIMATION_DURATION,
-        easing: ANIMATION_EASING,
-      });
-      return;
-    }
-
-    translateX.value = targets.translateX;
-    backdropOpacity.value = targets.backdropOpacity;
-    if (isCompactLayout && ownsMobileViewChange) {
-      settleMobilePanel(mobileView);
-    }
-  }, [
-    isOpen,
-    mobileView,
-    translateX,
-    backdropOpacity,
-    windowWidth,
-    isGesturing,
-    isCompactLayout,
-    startMobilePanelTransition,
-    settleMobilePanel,
-  ]);
-
-  const animateToOpen = useCallback(() => {
-    "worklet";
-    startMobilePanelTransition("file-explorer");
-    translateX.value = withTiming(
-      0,
-      {
-        duration: ANIMATION_DURATION,
-        easing: ANIMATION_EASING,
-      },
-      (finished) => {
-        if (!finished) return;
-        settleMobilePanel("file-explorer");
-      },
-    );
-    backdropOpacity.value = withTiming(1, {
-      duration: ANIMATION_DURATION,
-      easing: ANIMATION_EASING,
-    });
-  }, [translateX, backdropOpacity, startMobilePanelTransition, settleMobilePanel]);
-
-  const animateToClose = useCallback(() => {
-    "worklet";
-    startMobilePanelTransition("agent");
-    translateX.value = withTiming(
-      windowWidth,
-      {
-        duration: ANIMATION_DURATION,
-        easing: ANIMATION_EASING,
-      },
-      (finished) => {
-        if (!finished) return;
-        settleMobilePanel("agent");
-      },
-    );
-    backdropOpacity.value = withTiming(0, {
-      duration: ANIMATION_DURATION,
-      easing: ANIMATION_EASING,
-    });
-  }, [translateX, backdropOpacity, windowWidth, startMobilePanelTransition, settleMobilePanel]);
-
-  const value = useMemo<ExplorerSidebarAnimationContextValue>(
-    () => ({
-      translateX,
-      backdropOpacity,
-      windowWidth,
-      animateToOpen,
-      animateToClose,
-      overlayVisible,
-      setOverlayPeek,
-      isGesturing,
-      gestureAnimatingRef,
-      openGestureRef,
-      closeGestureRef,
-    }),
-    [
-      translateX,
-      backdropOpacity,
-      windowWidth,
-      animateToOpen,
-      animateToClose,
-      overlayVisible,
-      isGesturing,
-    ],
-  );
-
-  return (
-    <ExplorerSidebarAnimationContext.Provider value={value}>
-      {children}
-    </ExplorerSidebarAnimationContext.Provider>
-  );
-}
-
-export function useExplorerSidebarAnimation() {
-  const context = useContext(ExplorerSidebarAnimationContext);
-  if (!context) {
-    throw new Error(
-      "useExplorerSidebarAnimation must be used within ExplorerSidebarAnimationProvider",
-    );
-  }
-  return context;
-}
-
-export function useExplorerSidebarAnimationOptional() {
-  return useContext(ExplorerSidebarAnimationContext);
-}

packages/app/src/contexts/sidebar-animation-context.tsx

@@ -1,388 +0,0 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
-import { Keyboard, useWindowDimensions } from "react-native";
-import { useSharedValue, withTiming, Easing, type SharedValue } from "react-native-reanimated";
-import { type GestureType } from "react-native-gesture-handler";
-import { useIsCompactFormFactor } from "@/constants/layout";
-import { isNative } from "@/constants/platform";
-import { selectIsAgentListOpen, usePanelStore } from "@/stores/panel-store";
-import {
-  getLeftSidebarAnimationTargets,
-  MOBILE_PANEL_STATE_AGENT,
-  MOBILE_PANEL_STATE_AGENT_LIST_CLOSING,
-  MOBILE_PANEL_STATE_AGENT_LIST_OPEN,
-  MOBILE_PANEL_STATE_AGENT_LIST_OPENING,
-  MOBILE_PANEL_STATE_FILE_EXPLORER_CLOSING,
-  MOBILE_PANEL_STATE_FILE_EXPLORER_OPEN,
-  MOBILE_PANEL_STATE_FILE_EXPLORER_OPENING,
-  MOBILE_PANEL_TARGET_AGENT,
-  MOBILE_PANEL_TARGET_AGENT_LIST,
-  MOBILE_PANEL_TARGET_FILE_EXPLORER,
-  shouldSettleMobilePanelTransition,
-  shouldSyncSidebarAnimation,
-} from "@/utils/sidebar-animation-state";
-
-const ANIMATION_DURATION = 220;
-const ANIMATION_EASING = Easing.bezier(0.25, 0.1, 0.25, 1);
-// Keeps the overlay displayed long enough for the close animation to finish
-// before React hides it.
-const OVERLAY_CLOSE_GRACE_MS = 300;
-export const MOBILE_VISUAL_PANEL_AGENT = 0;
-export const MOBILE_VISUAL_PANEL_AGENT_LIST = 1;
-export const MOBILE_VISUAL_PANEL_FILE_EXPLORER = 2;
-
-interface SidebarAnimationContextValue {
-  translateX: SharedValue<number>;
-  backdropOpacity: SharedValue<number>;
-  windowWidth: number;
-  animateToOpen: () => void;
-  animateToClose: () => void;
-  startMobilePanelTransition: (mobileView: "agent" | "agent-list" | "file-explorer") => void;
-  settleMobilePanel: (mobileView: "agent" | "agent-list" | "file-explorer") => void;
-  overlayVisible: boolean;
-  setOverlayPeek: (peek: boolean) => void;
-  isGesturing: SharedValue<boolean>;
-  mobileVisualPanel: SharedValue<number>;
-  mobilePanelState: SharedValue<number>;
-  gestureAnimatingRef: React.MutableRefObject<boolean>;
-  openGestureRef: React.MutableRefObject<GestureType | undefined>;
-  closeGestureRef: React.MutableRefObject<GestureType | undefined>;
-}
-
-const SidebarAnimationContext = createContext<SidebarAnimationContextValue | null>(null);
-
-function getMobileVisualPanel(mobileView: "agent" | "agent-list" | "file-explorer"): number {
-  if (mobileView === "agent-list") {
-    return MOBILE_VISUAL_PANEL_AGENT_LIST;
-  }
-  if (mobileView === "file-explorer") {
-    return MOBILE_VISUAL_PANEL_FILE_EXPLORER;
-  }
-  return MOBILE_VISUAL_PANEL_AGENT;
-}
-
-function getSettledMobilePanelState(mobileView: "agent" | "agent-list" | "file-explorer"): number {
-  if (mobileView === "agent-list") {
-    return MOBILE_PANEL_STATE_AGENT_LIST_OPEN;
-  }
-  if (mobileView === "file-explorer") {
-    return MOBILE_PANEL_STATE_FILE_EXPLORER_OPEN;
-  }
-  return MOBILE_PANEL_STATE_AGENT;
-}
-
-export function SidebarAnimationProvider({ children }: { children: ReactNode }) {
-  const { width: windowWidth } = useWindowDimensions();
-  const isCompactLayout = useIsCompactFormFactor();
-  const mobileView = usePanelStore((state) => state.mobileView);
-  const isOpen = usePanelStore((state) =>
-    selectIsAgentListOpen(state, { isCompact: isCompactLayout }),
-  );
-
-  // Initialize based on current state
-  const initialTargets = getLeftSidebarAnimationTargets({ isOpen, windowWidth });
-  const translateX = useSharedValue(initialTargets.translateX);
-  const backdropOpacity = useSharedValue(initialTargets.backdropOpacity);
-  const isGesturing = useSharedValue(false);
-  const mobileVisualPanel = useSharedValue(getMobileVisualPanel(mobileView));
-  const mobilePanelState = useSharedValue(getSettledMobilePanelState(mobileView));
-  const mobilePanelTarget = useSharedValue(getMobileVisualPanel(mobileView));
-  const gestureAnimatingRef = useRef(false);
-  const openGestureRef = useRef<GestureType | undefined>(undefined);
-  const closeGestureRef = useRef<GestureType | undefined>(undefined);
-
-  // React owns whether the overlay is displayed at all; the worklet owns its
-  // motion. On Fabric, Reanimated re-applies its own (possibly stale) animated
-  // props over React's committed props on every commit, so a settled-closed
-  // overlay can ghost back on screen after a heavy commit (reanimated#9635) —
-  // no committed transform/opacity value can prevent that. display lives on
-  // the plain wrapper View that Reanimated never touches, so React's value is
-  // authoritative: a hidden overlay stays hidden no matter what the animated
-  // props revert to. overlayPeek shows the overlay during an open gesture
-  // before the store flips; the close grace keeps it displayed while the
-  // close animation plays.
-  const [overlayPeek, setOverlayPeek] = useState(false);
-  const overlayTarget = isOpen || overlayPeek;
-  const [overlayVisible, setOverlayVisible] = useState(overlayTarget);
-  useEffect(() => {
-    if (overlayTarget) {
-      setOverlayVisible(true);
-      return;
-    }
-    const timer = setTimeout(() => setOverlayVisible(false), OVERLAY_CLOSE_GRACE_MS);
-    return () => clearTimeout(timer);
-  }, [overlayTarget]);
-
-  // Track previous isOpen to detect changes
-  const prevIsOpen = useRef(isOpen);
-  const prevMobileView = useRef(mobileView);
-  const prevWindowWidth = useRef(windowWidth);
-
-  const startMobilePanelTransition = useCallback(
-    (nextMobileView: "agent" | "agent-list" | "file-explorer") => {
-      "worklet";
-      if (nextMobileView === "agent-list") {
-        mobilePanelTarget.value = MOBILE_PANEL_TARGET_AGENT_LIST;
-        mobilePanelState.value = MOBILE_PANEL_STATE_AGENT_LIST_OPENING;
-        return;
-      }
-      if (nextMobileView === "file-explorer") {
-        mobilePanelTarget.value = MOBILE_PANEL_TARGET_FILE_EXPLORER;
-        mobilePanelState.value = MOBILE_PANEL_STATE_FILE_EXPLORER_OPENING;
-        return;
-      }
-      mobilePanelTarget.value = MOBILE_PANEL_TARGET_AGENT;
-      if (mobilePanelState.value === MOBILE_PANEL_STATE_FILE_EXPLORER_OPEN) {
-        mobilePanelState.value = MOBILE_PANEL_STATE_FILE_EXPLORER_CLOSING;
-        return;
-      }
-      if (mobilePanelState.value === MOBILE_PANEL_STATE_AGENT_LIST_OPEN) {
-        mobilePanelState.value = MOBILE_PANEL_STATE_AGENT_LIST_CLOSING;
-        return;
-      }
-      mobilePanelState.value = MOBILE_PANEL_STATE_AGENT;
-    },
-    [mobilePanelState, mobilePanelTarget],
-  );
-
-  const settleMobilePanel = useCallback(
-    (nextMobileView: "agent" | "agent-list" | "file-explorer") => {
-      "worklet";
-      if (nextMobileView === "agent-list") {
-        if (
-          !shouldSettleMobilePanelTransition(
-            mobilePanelTarget.value,
-            MOBILE_PANEL_TARGET_AGENT_LIST,
-          )
-        ) {
-          return;
-        }
-        mobileVisualPanel.value = MOBILE_VISUAL_PANEL_AGENT_LIST;
-        mobilePanelState.value = MOBILE_PANEL_STATE_AGENT_LIST_OPEN;
-        return;
-      }
-      if (nextMobileView === "file-explorer") {
-        if (
-          !shouldSettleMobilePanelTransition(
-            mobilePanelTarget.value,
-            MOBILE_PANEL_TARGET_FILE_EXPLORER,
-          )
-        ) {
-          return;
-        }
-        mobileVisualPanel.value = MOBILE_VISUAL_PANEL_FILE_EXPLORER;
-        mobilePanelState.value = MOBILE_PANEL_STATE_FILE_EXPLORER_OPEN;
-        return;
-      }
-      if (!shouldSettleMobilePanelTransition(mobilePanelTarget.value, MOBILE_PANEL_TARGET_AGENT)) {
-        return;
-      }
-      mobileVisualPanel.value = MOBILE_VISUAL_PANEL_AGENT;
-      mobilePanelState.value = MOBILE_PANEL_STATE_AGENT;
-    },
-    [mobileVisualPanel, mobilePanelState, mobilePanelTarget],
-  );
-
-  // Sync animation with store state changes (e.g., backdrop tap, programmatic open/close)
-  useEffect(() => {
-    const didStateChange = shouldSyncSidebarAnimation({
-      previousIsOpen: prevIsOpen.current,
-      nextIsOpen: isOpen,
-      previousWindowWidth: prevWindowWidth.current,
-      nextWindowWidth: windowWidth,
-    });
-    const didMobileViewChange = prevMobileView.current !== mobileView;
-    const previousIsOpen = prevIsOpen.current;
-    const previousMobileView = prevMobileView.current;
-    const ownsMobileViewChange = previousMobileView === "agent-list" || mobileView === "agent-list";
-    prevIsOpen.current = isOpen;
-    prevMobileView.current = mobileView;
-    prevWindowWidth.current = windowWidth;
-    const didOpen = !previousIsOpen && isOpen;
-
-    if (!didStateChange && !didMobileViewChange) {
-      return;
-    }
-
-    if (didOpen && isCompactLayout && isNative) {
-      Keyboard.dismiss();
-    }
-
-    // Gesture onEnd already started the animation on the UI thread — skip to avoid
-    // a second competing withTiming that can desync translateX and backdropOpacity
-    // after a provider remount (e.g. theme change).
-    if (gestureAnimatingRef.current) {
-      gestureAnimatingRef.current = false;
-      return;
-    }
-
-    // Don't animate if we're in the middle of a gesture - the gesture handler will handle it
-    if (isGesturing.value) {
-      return;
-    }
-
-    const targets = getLeftSidebarAnimationTargets({ isOpen, windowWidth });
-
-    if (previousIsOpen !== isOpen) {
-      if (isOpen) {
-        if (isCompactLayout) {
-          startMobilePanelTransition("agent-list");
-        }
-        translateX.value = withTiming(
-          targets.translateX,
-          {
-            duration: ANIMATION_DURATION,
-            easing: ANIMATION_EASING,
-          },
-          (finished) => {
-            if (!finished) return;
-            if (isCompactLayout) {
-              settleMobilePanel("agent-list");
-            }
-          },
-        );
-        backdropOpacity.value = withTiming(targets.backdropOpacity, {
-          duration: ANIMATION_DURATION,
-          easing: ANIMATION_EASING,
-        });
-        return;
-      }
-
-      if (isCompactLayout && mobileView === "agent") {
-        startMobilePanelTransition("agent");
-      }
-      translateX.value = withTiming(
-        targets.translateX,
-        {
-          duration: ANIMATION_DURATION,
-          easing: ANIMATION_EASING,
-        },
-        (finished) => {
-          if (!finished) return;
-          if (isCompactLayout && mobileView === "agent") {
-            settleMobilePanel("agent");
-          }
-        },
-      );
-      backdropOpacity.value = withTiming(targets.backdropOpacity, {
-        duration: ANIMATION_DURATION,
-        easing: ANIMATION_EASING,
-      });
-      return;
-    }
-
-    translateX.value = targets.translateX;
-    backdropOpacity.value = targets.backdropOpacity;
-    if (isCompactLayout && ownsMobileViewChange) {
-      settleMobilePanel(mobileView);
-    }
-  }, [
-    isOpen,
-    mobileView,
-    translateX,
-    backdropOpacity,
-    windowWidth,
-    isGesturing,
-    isCompactLayout,
-    mobileVisualPanel,
-    mobilePanelState,
-    startMobilePanelTransition,
-    settleMobilePanel,
-  ]);
-
-  const animateToOpen = useCallback(() => {
-    "worklet";
-    startMobilePanelTransition("agent-list");
-    translateX.value = withTiming(
-      0,
-      {
-        duration: ANIMATION_DURATION,
-        easing: ANIMATION_EASING,
-      },
-      (finished) => {
-        if (!finished) return;
-        settleMobilePanel("agent-list");
-      },
-    );
-    backdropOpacity.value = withTiming(1, {
-      duration: ANIMATION_DURATION,
-      easing: ANIMATION_EASING,
-    });
-  }, [translateX, backdropOpacity, startMobilePanelTransition, settleMobilePanel]);
-
-  const animateToClose = useCallback(() => {
-    "worklet";
-    startMobilePanelTransition("agent");
-    translateX.value = withTiming(
-      -windowWidth,
-      {
-        duration: ANIMATION_DURATION,
-        easing: ANIMATION_EASING,
-      },
-      (finished) => {
-        if (!finished) return;
-        settleMobilePanel("agent");
-      },
-    );
-    backdropOpacity.value = withTiming(0, {
-      duration: ANIMATION_DURATION,
-      easing: ANIMATION_EASING,
-    });
-  }, [translateX, backdropOpacity, windowWidth, startMobilePanelTransition, settleMobilePanel]);
-
-  const value = useMemo<SidebarAnimationContextValue>(
-    () => ({
-      translateX,
-      backdropOpacity,
-      windowWidth,
-      animateToOpen,
-      animateToClose,
-      startMobilePanelTransition,
-      settleMobilePanel,
-      overlayVisible,
-      setOverlayPeek,
-      isGesturing,
-      mobileVisualPanel,
-      mobilePanelState,
-      gestureAnimatingRef,
-      openGestureRef,
-      closeGestureRef,
-    }),
-    [
-      translateX,
-      backdropOpacity,
-      windowWidth,
-      animateToOpen,
-      animateToClose,
-      startMobilePanelTransition,
-      settleMobilePanel,
-      overlayVisible,
-      isGesturing,
-      mobileVisualPanel,
-      mobilePanelState,
-      gestureAnimatingRef,
-      openGestureRef,
-      closeGestureRef,
-    ],
-  );
-
-  return (
-    <SidebarAnimationContext.Provider value={value}>{children}</SidebarAnimationContext.Provider>
-  );
-}
-
-export function useSidebarAnimation() {
-  const context = useContext(SidebarAnimationContext);
-  if (!context) {
-    throw new Error("useSidebarAnimation must be used within SidebarAnimationProvider");
-  }
-  return context;
-}

packages/app/src/contexts/voice-context.tsx

@@ -125,6 +125,11 @@ export function VoiceProvider({ children }: VoiceProviderProps) {
       onVolumeLevel: (level) => {
         runtime?.handleCaptureVolume(level);
       },
+      onInterruption: () => {
+        void runtime?.stopVoice().catch((error) => {
+          console.error("[VoiceEngine] Failed to stop after audio interruption:", error);
+        });
+      },
       onError: (error) => {
         console.error("[VoiceEngine] Capture error:", error);
       },

packages/app/src/data/acp-provider-catalog.ts

@@ -59,19 +59,19 @@ const CATALOG_DATA = [
     title: "Cline",
     description:
       "Autonomous coding agent CLI - capable of creating/editing files, running commands, using the browser, and more",
-    version: "3.0.37",
+    version: "3.0.39",
     iconId: "cline",
     installLink: "https://cline.bot/cli",
-    command: ["npx", "-y", "cline@3.0.37", "--acp"],
+    command: ["npx", "-y", "cline@3.0.39", "--acp"],
   },
   {
     id: "codebuddy-code",
     title: "Codebuddy Code",
     description: "Tencent Cloud's official intelligent coding tool",
-    version: "2.116.0",
+    version: "2.118.2",
     iconId: "codebuddy-code",
     installLink: "https://www.codebuddy.cn/cli/",
-    command: ["npx", "-y", "@tencent-ai/codebuddy-code@2.116.0", "--acp"],
+    command: ["npx", "-y", "@tencent-ai/codebuddy-code@2.118.2", "--acp"],
   },
   {
     id: "codewhale",
@@ -122,10 +122,10 @@ const CATALOG_DATA = [
     id: "deepagents",
     title: "DeepAgents",
     description: "Batteries-included AI coding and general purpose agent powered by LangChain.",
-    version: "0.1.15",
+    version: "0.1.17",
     iconId: "deepagents",
     installLink: "https://docs.langchain.com/oss/javascript/deepagents/overview",
-    command: ["npx", "-y", "deepagents-acp@0.1.15"],
+    command: ["npx", "-y", "deepagents-acp@0.1.17"],
   },
   {
     id: "devin",
@@ -140,29 +140,29 @@ const CATALOG_DATA = [
     id: "dimcode",
     title: "DimCode",
     description: "A coding agent that puts leading models at your command.",
-    version: "0.2.19",
+    version: "0.2.26",
     iconId: "dimcode",
     installLink: "https://dimcode.dev/docs/acp.html",
-    command: ["npx", "-y", "dimcode@0.2.19", "acp"],
+    command: ["npx", "-y", "dimcode@0.2.26", "acp"],
   },
   {
     id: "dirac",
     title: "Dirac",
     description:
       "Reduces API costs by more than 50%, produces better and faster work. Uses Hash anchored parallel edits, AST manipulation and a whole lot of neat optimizations. Fully Open Source.",
-    version: "0.4.13",
+    version: "0.4.15",
     iconId: "dirac",
     installLink: "https://dirac.run",
-    command: ["npx", "-y", "dirac-cli@0.4.13", "--acp"],
+    command: ["npx", "-y", "dirac-cli@0.4.15", "--acp"],
   },
   {
     id: "factory-droid",
     title: "Factory Droid",
     description: "Factory Droid - AI coding agent powered by Factory AI",
-    version: "0.164.0",
+    version: "0.169.0",
     iconId: "factory-droid",
     installLink: "https://factory.ai/product/cli",
-    command: ["npx", "-y", "droid@0.164.0", "exec", "--output-format", "acp-daemon"],
+    command: ["npx", "-y", "droid@0.169.0", "exec", "--output-format", "acp-daemon"],
     env: {
       DROID_DISABLE_AUTO_UPDATE: "true",
       FACTORY_DROID_AUTO_UPDATE_ENABLED: "false",
@@ -173,19 +173,19 @@ const CATALOG_DATA = [
     id: "fast-agent",
     title: "fast-agent",
     description: "Code and build agents with comprehensive multi-provider support",
-    version: "0.8.3",
+    version: "0.9.5",
     iconId: "fast-agent",
     installLink: "https://fast-agent.ai/acp/",
-    command: ["uvx", "--from", "fast-agent-acp==0.8.3", "fast-agent-acp", "-x"],
+    command: ["uvx", "--from", "fast-agent-acp==0.9.5", "fast-agent-acp", "-x"],
   },
   {
     id: "gemini",
     title: "Gemini CLI",
     description: "Google's official CLI for Gemini",
-    version: "0.49.0",
+    version: "0.50.0",
     iconId: "gemini",
     installLink: "https://geminicli.com",
-    command: ["npx", "-y", "@google/gemini-cli@0.49.0", "--acp"],
+    command: ["npx", "-y", "@google/gemini-cli@0.50.0", "--acp"],
   },
   {
     id: "glm-acp-agent",
@@ -284,10 +284,10 @@ const CATALOG_DATA = [
     id: "nova",
     title: "Nova",
     description: "Nova by Compass AI - a fully-fledged software engineer at your command",
-    version: "1.1.24",
+    version: "1.1.25",
     iconId: "nova",
     installLink: "https://www.compassap.ai/portfolio/nova.html",
-    command: ["npx", "-y", "@compass-ai/nova@1.1.24", "acp"],
+    command: ["npx", "-y", "@compass-ai/nova@1.1.25", "acp"],
   },
   {
     id: "poolside",
@@ -302,19 +302,19 @@ const CATALOG_DATA = [
     id: "qoder",
     title: "Qoder CLI",
     description: "AI coding assistant with agentic capabilities",
-    version: "1.0.37",
+    version: "1.0.41",
     iconId: "qoder",
     installLink: "https://qoder.com",
-    command: ["npx", "-y", "@qoder-ai/qodercli@1.0.37", "--acp"],
+    command: ["npx", "-y", "@qoder-ai/qodercli@1.0.41", "--acp"],
   },
   {
     id: "qwen-code",
     title: "Qwen Code",
     description: "Alibaba's Qwen coding assistant",
-    version: "0.19.6",
+    version: "0.19.8",
     iconId: "qwen-code",
     installLink: "https://qwenlm.github.io/qwen-code-docs/en/users/overview",
-    command: ["npx", "-y", "@qwen-code/qwen-code@0.19.6", "--acp", "--experimental-skills"],
+    command: ["npx", "-y", "@qwen-code/qwen-code@0.19.8", "--acp", "--experimental-skills"],
   },
   {
     id: "sigit",

packages/app/src/data/daemon-config.ts

@@ -0,0 +1,3 @@
+export function daemonConfigQueryKey(serverId: string | null) {
+  return ["daemon-config", serverId] as const;
+}

packages/app/src/data/providers-snapshot.test.ts

@@ -5,7 +5,7 @@ import {
   providersSnapshotQueryKey,
   providersSnapshotQueryRoot,
   providersSnapshotRequestOptions,
-} from "./providers-snapshot-query";
+} from "@/data/providers-snapshot";
 
 describe("providers snapshot query scope", () => {
   it("normalizes blank cwd values to the home scope", () => {

packages/app/src/data/push-router.test.ts

@@ -0,0 +1,518 @@
+import { QueryClient, QueryObserver, skipToken } from "@tanstack/react-query";
+import { describe, expect, it } from "vitest";
+import type { MutableDaemonConfig, SessionOutboundMessage } from "@getpaseo/protocol/messages";
+import { checkoutDiffQueryKey } from "@/git/query-keys";
+import { buildTerminalsQueryKey } from "@/screens/workspace/terminals/state";
+import { daemonConfigQueryKey } from "@/data/daemon-config";
+import { providersSnapshotQueryKey } from "@/data/providers-snapshot";
+import {
+  checkoutDiffPushRoute,
+  invalidateServerDataQueriesAfterReconnect,
+  mountServerDataPushRouter,
+  workspaceTerminalsPushRoute,
+} from "@/data/push-router";
+
+type ProvidersSnapshotUpdateMessage = Extract<
+  SessionOutboundMessage,
+  { type: "providers_snapshot_update" }
+>;
+type CheckoutDiffUpdateMessage = Extract<SessionOutboundMessage, { type: "checkout_diff_update" }>;
+type SubscribeCheckoutDiffResponseMessage = Extract<
+  SessionOutboundMessage,
+  { type: "subscribe_checkout_diff_response" }
+>;
+type StatusMessage = Extract<SessionOutboundMessage, { type: "status" }>;
+type TerminalsChangedMessage = Extract<SessionOutboundMessage, { type: "terminals_changed" }>;
+type RouterMessage =
+  | ProvidersSnapshotUpdateMessage
+  | CheckoutDiffUpdateMessage
+  | SubscribeCheckoutDiffResponseMessage
+  | StatusMessage
+  | TerminalsChangedMessage;
+type RouterMessageType = RouterMessage["type"];
+type RouterHandler = (message: RouterMessage) => void;
+type RouterClient = Parameters<typeof mountServerDataPushRouter>[0]["client"];
+
+const daemonConfig: MutableDaemonConfig = {
+  mcp: { injectIntoAgents: true },
+  browserTools: { enabled: false },
+  providers: {},
+  metadataGeneration: { providers: [] },
+  autoArchiveAfterMerge: false,
+  enableTerminalAgentHooks: false,
+  appendSystemPrompt: "",
+};
+
+function createFakeClient(config: { rejectCheckoutDiffSubscribe?: boolean } = {}): {
+  client: RouterClient;
+  emit: <K extends RouterMessageType>(message: Extract<RouterMessage, { type: K }>) => void;
+  subscribeCheckoutDiffCalls: Array<{
+    cwd: string;
+    compare: { mode: "uncommitted" | "base"; baseRef?: string; ignoreWhitespace?: boolean };
+    subscriptionId: string;
+  }>;
+  unsubscribeCheckoutDiffCalls: string[];
+  subscribeTerminalCalls: Array<{ cwd: string; workspaceId?: string }>;
+  unsubscribeTerminalCalls: Array<{ cwd: string; workspaceId?: string }>;
+} {
+  const handlers: Record<RouterMessageType, RouterHandler[]> = {
+    providers_snapshot_update: [],
+    checkout_diff_update: [],
+    subscribe_checkout_diff_response: [],
+    status: [],
+    terminals_changed: [],
+  };
+  const subscribeCheckoutDiffCalls: Array<{
+    cwd: string;
+    compare: { mode: "uncommitted" | "base"; baseRef?: string; ignoreWhitespace?: boolean };
+    subscriptionId: string;
+  }> = [];
+  const unsubscribeCheckoutDiffCalls: string[] = [];
+  const subscribeTerminalCalls: Array<{ cwd: string; workspaceId?: string }> = [];
+  const unsubscribeTerminalCalls: Array<{ cwd: string; workspaceId?: string }> = [];
+
+  function on<K extends RouterMessageType>(
+    type: K,
+    handler: (message: Extract<RouterMessage, { type: K }>) => void,
+  ): () => void {
+    const routerHandler: RouterHandler = (message) => {
+      if (message.type === type) {
+        handler(message as Extract<RouterMessage, { type: K }>);
+      }
+    };
+    handlers[type].push(routerHandler);
+    return () => {
+      handlers[type] = handlers[type].filter((candidate) => candidate !== routerHandler);
+    };
+  }
+
+  function emit<K extends RouterMessageType>(message: Extract<RouterMessage, { type: K }>): void {
+    for (const handler of handlers[message.type]) {
+      handler(message);
+    }
+  }
+
+  return {
+    client: {
+      on,
+      async subscribeCheckoutDiff(cwd, compare, requestOptions) {
+        subscribeCheckoutDiffCalls.push({
+          cwd,
+          compare,
+          subscriptionId: requestOptions.subscriptionId,
+        });
+        if (config.rejectCheckoutDiffSubscribe) {
+          throw new Error("subscribe failed");
+        }
+        return {
+          subscriptionId: requestOptions.subscriptionId,
+          cwd,
+          files: [],
+          error: null,
+          requestId: requestOptions.requestId ?? "subscribe-checkout-diff",
+        };
+      },
+      unsubscribeCheckoutDiff(subscriptionId) {
+        unsubscribeCheckoutDiffCalls.push(subscriptionId);
+      },
+      subscribeTerminals(subscription) {
+        subscribeTerminalCalls.push(subscription);
+      },
+      unsubscribeTerminals(subscription) {
+        unsubscribeTerminalCalls.push(subscription);
+      },
+    },
+    emit,
+    subscribeCheckoutDiffCalls,
+    unsubscribeCheckoutDiffCalls,
+    subscribeTerminalCalls,
+    unsubscribeTerminalCalls,
+  };
+}
+
+function providerUpdate(generatedAt: string): ProvidersSnapshotUpdateMessage {
+  return {
+    type: "providers_snapshot_update",
+    payload: {
+      entries: [{ provider: "codex", status: "ready", enabled: true, models: [] }],
+      generatedAt,
+    },
+  };
+}
+
+describe("server data push router", () => {
+  it("routes provider snapshot and daemon config payloads until detached", () => {
+    const queryClient = new QueryClient();
+    const fake = createFakeClient();
+    const serverId = "server-1";
+    const unmount = mountServerDataPushRouter({ client: fake.client, queryClient, serverId });
+
+    fake.emit(providerUpdate("2026-01-01T00:00:00.000Z"));
+    fake.emit({
+      type: "status",
+      payload: { status: "daemon_config_changed", config: daemonConfig },
+    });
+
+    expect(queryClient.getQueryData(providersSnapshotQueryKey(serverId))).toEqual({
+      entries: [{ provider: "codex", status: "ready", enabled: true, models: [] }],
+      generatedAt: "2026-01-01T00:00:00.000Z",
+      requestId: "providers_snapshot_update",
+    });
+    expect(queryClient.getQueryData(daemonConfigQueryKey(serverId))).toEqual(daemonConfig);
+
+    unmount();
+    fake.emit(providerUpdate("2026-01-01T00:00:01.000Z"));
+
+    expect(queryClient.getQueryData(providersSnapshotQueryKey(serverId))).toEqual({
+      entries: [{ provider: "codex", status: "ready", enabled: true, models: [] }],
+      generatedAt: "2026-01-01T00:00:00.000Z",
+      requestId: "providers_snapshot_update",
+    });
+  });
+
+  it("subscribes active checkout diff queries and writes matching diff events", () => {
+    const queryClient = new QueryClient();
+    const fake = createFakeClient();
+    const serverId = "server-1";
+    const cwd = "/repo";
+    const queryKey = checkoutDiffQueryKey(serverId, cwd, "base", "main", true);
+    const subscriptionId = `checkoutDiff:${JSON.stringify(queryKey)}`;
+    const observer = new QueryObserver(queryClient, {
+      queryKey,
+      queryFn: skipToken,
+      enabled: true,
+      gcTime: Infinity,
+      staleTime: Infinity,
+      meta: checkoutDiffPushRoute({
+        enabled: true,
+        serverId,
+        subscriptionId,
+        cwd,
+        compare: { mode: "base", baseRef: "main", ignoreWhitespace: true },
+      }),
+    });
+    const unsubscribeObserver = observer.subscribe(() => undefined);
+    const unmount = mountServerDataPushRouter({ client: fake.client, queryClient, serverId });
+
+    expect(fake.subscribeCheckoutDiffCalls).toEqual([
+      {
+        cwd,
+        compare: { mode: "base", baseRef: "main", ignoreWhitespace: true },
+        subscriptionId,
+      },
+    ]);
+
+    fake.emit({
+      type: "subscribe_checkout_diff_response",
+      payload: { subscriptionId, cwd, files: [], error: null, requestId: "diff-1" },
+    });
+
+    expect(queryClient.getQueryData(queryKey)).toEqual({
+      cwd,
+      files: [],
+      error: null,
+      requestId: "diff-1",
+    });
+
+    fake.emit({
+      type: "checkout_diff_update",
+      payload: { subscriptionId, cwd, files: [], error: null },
+    });
+
+    expect(queryClient.getQueryData(queryKey)).toEqual({
+      cwd,
+      files: [],
+      error: null,
+      requestId: `subscription:${subscriptionId}`,
+    });
+
+    unsubscribeObserver();
+
+    expect(fake.unsubscribeCheckoutDiffCalls).toEqual([subscriptionId]);
+
+    unmount();
+  });
+
+  it("does not retry failed subscriptions on unrelated cache events", async () => {
+    const queryClient = new QueryClient();
+    const fake = createFakeClient({ rejectCheckoutDiffSubscribe: true });
+    const serverId = "server-1";
+    const cwd = "/repo";
+    const queryKey = checkoutDiffQueryKey(serverId, cwd, "base", "main", true);
+    const subscriptionId = `checkoutDiff:${JSON.stringify(queryKey)}`;
+    const observer = new QueryObserver(queryClient, {
+      queryKey,
+      queryFn: skipToken,
+      enabled: true,
+      gcTime: Infinity,
+      staleTime: Infinity,
+      meta: checkoutDiffPushRoute({
+        enabled: true,
+        serverId,
+        subscriptionId,
+        cwd,
+        compare: { mode: "base", baseRef: "main", ignoreWhitespace: true },
+      }),
+    });
+    const unsubscribeObserver = observer.subscribe(() => undefined);
+    const unmount = mountServerDataPushRouter({ client: fake.client, queryClient, serverId });
+
+    expect(fake.subscribeCheckoutDiffCalls).toHaveLength(1);
+
+    await Promise.resolve();
+    await Promise.resolve();
+
+    queryClient.setQueryData(["unrelated"], "value");
+
+    expect(fake.subscribeCheckoutDiffCalls).toHaveLength(1);
+
+    unsubscribeObserver();
+    unmount();
+  });
+
+  it("subscribes active terminal queries and filters terminal pushes by workspace", () => {
+    const queryClient = new QueryClient();
+    const fake = createFakeClient();
+    const serverId = "server-1";
+    const cwd = "/repo";
+    const workspaceId = "workspace-a";
+    const queryKey = buildTerminalsQueryKey(serverId, cwd, workspaceId);
+    const observer = new QueryObserver(queryClient, {
+      queryKey,
+      queryFn: skipToken,
+      enabled: true,
+      gcTime: Infinity,
+      staleTime: Infinity,
+      meta: workspaceTerminalsPushRoute({
+        enabled: true,
+        serverId,
+        cwd,
+        workspaceId,
+      }),
+    });
+    const unsubscribeObserver = observer.subscribe(() => undefined);
+    const unmount = mountServerDataPushRouter({ client: fake.client, queryClient, serverId });
+
+    expect(fake.subscribeTerminalCalls).toEqual([{ cwd, workspaceId }]);
+
+    fake.emit({
+      type: "terminals_changed",
+      payload: {
+        cwd,
+        terminals: [
+          { id: "terminal-a", name: "Main", workspaceId },
+          { id: "terminal-b", name: "Sibling", workspaceId: "workspace-b" },
+        ],
+      },
+    });
+
+    expect(queryClient.getQueryData(queryKey)).toEqual({
+      cwd,
+      terminals: [{ id: "terminal-a", name: "Main", workspaceId }],
+      requestId: expect.stringMatching(/^terminals-changed-/),
+    });
+
+    unsubscribeObserver();
+
+    expect(fake.unsubscribeTerminalCalls).toEqual([{ cwd, workspaceId }]);
+
+    unmount();
+  });
+
+  it("re-sends active push subscriptions after reconnect", () => {
+    const queryClient = new QueryClient();
+    const fake = createFakeClient();
+    const serverId = "server-1";
+    const cwd = "/repo";
+    const workspaceId = "workspace-a";
+    const checkoutDiffKey = checkoutDiffQueryKey(serverId, cwd, "base", "main", true);
+    const checkoutDiffSubscriptionId = `checkoutDiff:${JSON.stringify(checkoutDiffKey)}`;
+    const terminalKey = buildTerminalsQueryKey(serverId, cwd, workspaceId);
+    const checkoutDiffObserver = new QueryObserver(queryClient, {
+      queryKey: checkoutDiffKey,
+      queryFn: skipToken,
+      enabled: true,
+      gcTime: Infinity,
+      staleTime: Infinity,
+      meta: checkoutDiffPushRoute({
+        enabled: true,
+        serverId,
+        subscriptionId: checkoutDiffSubscriptionId,
+        cwd,
+        compare: { mode: "base", baseRef: "main", ignoreWhitespace: true },
+      }),
+    });
+    const terminalObserver = new QueryObserver(queryClient, {
+      queryKey: terminalKey,
+      queryFn: skipToken,
+      enabled: true,
+      gcTime: Infinity,
+      staleTime: Infinity,
+      meta: workspaceTerminalsPushRoute({
+        enabled: true,
+        serverId,
+        cwd,
+        workspaceId,
+      }),
+    });
+    const unsubscribeCheckoutDiffObserver = checkoutDiffObserver.subscribe(() => undefined);
+    const unsubscribeTerminalObserver = terminalObserver.subscribe(() => undefined);
+    const unmount = mountServerDataPushRouter({ client: fake.client, queryClient, serverId });
+    const plainCheckoutDiffObserver = new QueryObserver(queryClient, {
+      queryKey: checkoutDiffKey,
+      queryFn: skipToken,
+      enabled: true,
+      gcTime: Infinity,
+      staleTime: Infinity,
+    });
+    const plainTerminalObserver = new QueryObserver(queryClient, {
+      queryKey: terminalKey,
+      queryFn: skipToken,
+      enabled: true,
+      gcTime: Infinity,
+      staleTime: Infinity,
+    });
+    const unsubscribePlainCheckoutDiffObserver = plainCheckoutDiffObserver.subscribe(
+      () => undefined,
+    );
+    const unsubscribePlainTerminalObserver = plainTerminalObserver.subscribe(() => undefined);
+
+    invalidateServerDataQueriesAfterReconnect({ queryClient, serverId });
+
+    expect(fake.subscribeCheckoutDiffCalls).toEqual([
+      {
+        cwd,
+        compare: { mode: "base", baseRef: "main", ignoreWhitespace: true },
+        subscriptionId: checkoutDiffSubscriptionId,
+      },
+      {
+        cwd,
+        compare: { mode: "base", baseRef: "main", ignoreWhitespace: true },
+        subscriptionId: checkoutDiffSubscriptionId,
+      },
+    ]);
+    expect(fake.subscribeTerminalCalls).toEqual([
+      { cwd, workspaceId },
+      { cwd, workspaceId },
+    ]);
+
+    fake.emit({
+      type: "terminals_changed",
+      payload: {
+        cwd,
+        terminals: [
+          { id: "terminal-a", name: "Main", workspaceId },
+          { id: "terminal-b", name: "Sibling", workspaceId: "workspace-b" },
+        ],
+      },
+    });
+
+    expect(queryClient.getQueryData(terminalKey)).toEqual({
+      cwd,
+      terminals: [{ id: "terminal-a", name: "Main", workspaceId }],
+      requestId: expect.stringMatching(/^terminals-changed-/),
+    });
+
+    unsubscribePlainCheckoutDiffObserver();
+    unsubscribePlainTerminalObserver();
+    unsubscribeCheckoutDiffObserver();
+    unsubscribeTerminalObserver();
+    unmount();
+  });
+
+  it("routes terminal pushes after another observer attaches without push metadata", () => {
+    const queryClient = new QueryClient();
+    const fake = createFakeClient();
+    const serverId = "server-1";
+    const cwd = "/repo";
+    const workspaceId = "workspace-a";
+    const queryKey = buildTerminalsQueryKey(serverId, cwd, workspaceId);
+    const pushObserver = new QueryObserver(queryClient, {
+      queryKey,
+      queryFn: skipToken,
+      enabled: true,
+      gcTime: Infinity,
+      staleTime: Infinity,
+      meta: workspaceTerminalsPushRoute({
+        enabled: true,
+        serverId,
+        cwd,
+        workspaceId,
+      }),
+    });
+    const unsubscribePushObserver = pushObserver.subscribe(() => undefined);
+    const unmount = mountServerDataPushRouter({ client: fake.client, queryClient, serverId });
+    expect(fake.subscribeTerminalCalls).toEqual([{ cwd, workspaceId }]);
+
+    const plainObserver = new QueryObserver(queryClient, {
+      queryKey,
+      queryFn: skipToken,
+      enabled: true,
+      gcTime: Infinity,
+      staleTime: Infinity,
+    });
+    const unsubscribePlainObserver = plainObserver.subscribe(() => undefined);
+
+    fake.emit({
+      type: "terminals_changed",
+      payload: {
+        cwd,
+        terminals: [
+          {
+            id: "terminal-a",
+            name: "Main",
+            workspaceId,
+            activity: { state: "idle", attentionReason: "needs_input", changedAt: 1 },
+          },
+        ],
+      },
+    });
+
+    expect(queryClient.getQueryData(queryKey)).toEqual({
+      cwd,
+      terminals: [
+        {
+          id: "terminal-a",
+          name: "Main",
+          workspaceId,
+          activity: { state: "idle", attentionReason: "needs_input", changedAt: 1 },
+        },
+      ],
+      requestId: expect.stringMatching(/^terminals-changed-/),
+    });
+    expect(fake.unsubscribeTerminalCalls).toEqual([]);
+
+    unsubscribePlainObserver();
+    unsubscribePushObserver();
+    unmount();
+  });
+
+  it("invalidates only the reconnect-repair scopes for one server", () => {
+    const queryClient = new QueryClient();
+    const serverId = "server-1";
+    const otherServerId = "server-2";
+    const providerKey = providersSnapshotQueryKey(serverId);
+    const daemonConfigKey = daemonConfigQueryKey(serverId);
+    const diffKey = checkoutDiffQueryKey(serverId, "/repo", "uncommitted", undefined, false);
+    const terminalKey = buildTerminalsQueryKey(serverId, "/repo", "workspace-a");
+    const otherProviderKey = providersSnapshotQueryKey(otherServerId);
+
+    queryClient.setQueryData(providerKey, { entries: [], generatedAt: "now", requestId: "p" });
+    queryClient.setQueryData(daemonConfigKey, daemonConfig);
+    queryClient.setQueryData(diffKey, { cwd: "/repo", files: [], error: null, requestId: "d" });
+    queryClient.setQueryData(terminalKey, { cwd: "/repo", terminals: [], requestId: "t" });
+    queryClient.setQueryData(otherProviderKey, {
+      entries: [],
+      generatedAt: "now",
+      requestId: "other",
+    });
+
+    invalidateServerDataQueriesAfterReconnect({ queryClient, serverId });
+
+    expect(queryClient.getQueryState(providerKey)?.isInvalidated).toBe(true);
+    expect(queryClient.getQueryState(daemonConfigKey)?.isInvalidated).toBe(true);
+    expect(queryClient.getQueryState(diffKey)?.isInvalidated).toBe(true);
+    expect(queryClient.getQueryState(terminalKey)?.isInvalidated).toBe(true);
+    expect(queryClient.getQueryState(otherProviderKey)?.isInvalidated).toBe(false);
+  });
+});

packages/app/src/data/push-router.ts

@@ -0,0 +1,754 @@
+import type { Query, QueryCacheNotifyEvent, QueryClient, QueryKey } from "@tanstack/react-query";
+import type {
+  ListTerminalsResponse,
+  MutableDaemonConfig,
+  SessionOutboundMessage,
+} from "@getpaseo/protocol/messages";
+import { agentCommandsQueryRoot } from "@/hooks/agent-commands-query";
+import { orderCheckoutDiffFiles } from "@/git/diff-order";
+import { daemonConfigQueryKey } from "@/data/daemon-config";
+import { providersSnapshotQueryKey, providersSnapshotQueryRoot } from "@/data/providers-snapshot";
+
+type ProvidersSnapshotUpdateMessage = Extract<
+  SessionOutboundMessage,
+  { type: "providers_snapshot_update" }
+>;
+type CheckoutDiffUpdateMessage = Extract<SessionOutboundMessage, { type: "checkout_diff_update" }>;
+type SubscribeCheckoutDiffResponseMessage = Extract<
+  SessionOutboundMessage,
+  { type: "subscribe_checkout_diff_response" }
+>;
+type StatusMessage = Extract<SessionOutboundMessage, { type: "status" }>;
+type TerminalsChangedMessage = Extract<SessionOutboundMessage, { type: "terminals_changed" }>;
+type ServerDataEventType =
+  | "providers_snapshot_update"
+  | "checkout_diff_update"
+  | "subscribe_checkout_diff_response"
+  | "status"
+  | "terminals_changed";
+type CheckoutDiffResponsePayload = SubscribeCheckoutDiffResponseMessage["payload"];
+type CheckoutDiffCachePayload = Omit<CheckoutDiffResponsePayload, "subscriptionId">;
+type ListTerminalsPayload = ListTerminalsResponse["payload"];
+
+interface CheckoutDiffCompare {
+  mode: "uncommitted" | "base";
+  baseRef?: string;
+  ignoreWhitespace?: boolean;
+}
+
+interface CheckoutDiffRoute {
+  domain: "checkoutDiff";
+  enabled: boolean;
+  serverId: string;
+  subscriptionId: string;
+  cwd: string;
+  compare: CheckoutDiffCompare;
+}
+
+interface WorkspaceTerminalsRoute {
+  domain: "workspaceTerminals";
+  enabled: boolean;
+  serverId: string;
+  cwd: string;
+  workspaceId?: string;
+}
+
+type ServerDataRoute = CheckoutDiffRoute | WorkspaceTerminalsRoute;
+
+export interface ServerDataQueryMeta extends Record<string, unknown> {
+  serverData: ServerDataRoute;
+}
+
+export type ProvidersSnapshotUpdate = ProvidersSnapshotUpdateMessage;
+
+interface ServerDataPushClient {
+  on<TType extends ServerDataEventType>(
+    type: TType,
+    handler: (message: Extract<SessionOutboundMessage, { type: TType }>) => void,
+  ): () => void;
+  subscribeCheckoutDiff(
+    cwd: string,
+    compare: CheckoutDiffCompare,
+    options: { subscriptionId: string; requestId?: string },
+  ): Promise<CheckoutDiffResponsePayload>;
+  unsubscribeCheckoutDiff(subscriptionId: string): void;
+  subscribeTerminals(input: { cwd: string; workspaceId?: string }): void;
+  unsubscribeTerminals(input: { cwd: string; workspaceId?: string }): void;
+}
+
+interface PushRouterInput {
+  client: ServerDataPushClient;
+  queryClient: QueryClient;
+  serverId: string;
+}
+
+interface ActiveServerDataSubscriptions {
+  checkoutDiff: Map<string, CheckoutDiffRoute>;
+  workspaceTerminals: Map<string, WorkspaceTerminalsRoute>;
+}
+
+interface ReconnectRepairPolicy {
+  domain: string;
+  invalidate(input: { queryClient: QueryClient; serverId: string }): void;
+}
+
+const RECONNECT_REPAIR_POLICIES: ReconnectRepairPolicy[] = [
+  {
+    domain: "providersSnapshot",
+    invalidate: ({ queryClient, serverId }) => {
+      void queryClient.invalidateQueries({ queryKey: providersSnapshotQueryRoot(serverId) });
+    },
+  },
+  {
+    domain: "daemonConfig",
+    invalidate: ({ queryClient, serverId }) => {
+      void queryClient.invalidateQueries({ queryKey: daemonConfigQueryKey(serverId) });
+    },
+  },
+  {
+    domain: "checkoutDiff",
+    invalidate: ({ queryClient, serverId }) => {
+      void queryClient.invalidateQueries({
+        predicate: (query) => isQueryForServer(query.queryKey, "checkoutDiff", serverId),
+      });
+    },
+  },
+  {
+    domain: "workspaceTerminals",
+    invalidate: ({ queryClient, serverId }) => {
+      void queryClient.invalidateQueries({
+        predicate: (query) => isQueryForServer(query.queryKey, "terminals", serverId),
+      });
+    },
+  },
+];
+const reconnectSubscriptionRepairsByServerId = new Map<string, Set<() => void>>();
+
+export function checkoutDiffPushRoute(input: {
+  enabled: boolean;
+  serverId: string;
+  subscriptionId: string;
+  cwd: string;
+  compare: CheckoutDiffCompare;
+}): ServerDataQueryMeta {
+  return {
+    serverData: {
+      domain: "checkoutDiff",
+      enabled: input.enabled,
+      serverId: input.serverId,
+      subscriptionId: input.subscriptionId,
+      cwd: input.cwd,
+      compare: input.compare,
+    },
+  };
+}
+
+export function workspaceTerminalsPushRoute(input: {
+  enabled: boolean;
+  serverId: string;
+  cwd: string;
+  workspaceId?: string;
+}): ServerDataQueryMeta {
+  return {
+    serverData: {
+      domain: "workspaceTerminals",
+      enabled: input.enabled,
+      serverId: input.serverId,
+      cwd: input.cwd,
+      ...(input.workspaceId ? { workspaceId: input.workspaceId } : {}),
+    },
+  };
+}
+
+export function invalidateServerDataQueriesAfterReconnect(input: {
+  queryClient: QueryClient;
+  serverId: string;
+}): void {
+  for (const policy of RECONNECT_REPAIR_POLICIES) {
+    policy.invalidate(input);
+  }
+  for (const repairSubscriptions of reconnectSubscriptionRepairsByServerId.get(input.serverId) ??
+    []) {
+    repairSubscriptions();
+  }
+}
+
+export function applyProvidersSnapshotUpdate(input: {
+  serverId: string;
+  queryClient: QueryClient;
+  message: ProvidersSnapshotUpdate;
+}): void {
+  if (input.message.type !== "providers_snapshot_update") {
+    return;
+  }
+  const queryKey = providersSnapshotQueryKey(input.serverId, input.message.payload.cwd);
+  input.queryClient.setQueryData(queryKey, {
+    entries: input.message.payload.entries,
+    generatedAt: input.message.payload.generatedAt,
+    requestId: "providers_snapshot_update",
+  });
+  void input.queryClient.invalidateQueries({
+    queryKey: agentCommandsQueryRoot(input.serverId),
+    exact: false,
+  });
+}
+
+export function mountServerDataPushRouter(input: PushRouterInput): () => void {
+  const activeCheckoutDiffSubscriptions = new Map<string, CheckoutDiffRoute>();
+  const activeTerminalSubscriptions = new Map<string, WorkspaceTerminalsRoute>();
+  let disposed = false;
+
+  function reconcileSubscriptions(
+    fallbackActive: ActiveServerDataSubscriptions = {
+      checkoutDiff: activeCheckoutDiffSubscriptions,
+      workspaceTerminals: activeTerminalSubscriptions,
+    },
+  ): void {
+    if (disposed) {
+      return;
+    }
+
+    const desiredCheckoutDiffSubscriptions = new Map<string, CheckoutDiffRoute>();
+    const desiredTerminalSubscriptions = new Map<string, WorkspaceTerminalsRoute>();
+    for (const query of input.queryClient.getQueryCache().getAll()) {
+      const route = getActiveServerDataRoute(query, input.serverId, {
+        checkoutDiff: fallbackActive.checkoutDiff,
+        workspaceTerminals: fallbackActive.workspaceTerminals,
+      });
+      if (!route) {
+        continue;
+      }
+      if (route.domain === "checkoutDiff") {
+        desiredCheckoutDiffSubscriptions.set(route.subscriptionId, route);
+        continue;
+      }
+      desiredTerminalSubscriptions.set(workspaceTerminalSubscriptionKey(route), route);
+    }
+
+    reconcileCheckoutDiffSubscriptions({
+      active: activeCheckoutDiffSubscriptions,
+      client: input.client,
+      desired: desiredCheckoutDiffSubscriptions,
+      serverId: input.serverId,
+    });
+    reconcileTerminalSubscriptions({
+      active: activeTerminalSubscriptions,
+      client: input.client,
+      desired: desiredTerminalSubscriptions,
+    });
+  }
+
+  function resetSubscriptionsAfterReconnect(): void {
+    const fallbackActive = {
+      checkoutDiff: new Map(activeCheckoutDiffSubscriptions),
+      workspaceTerminals: new Map(activeTerminalSubscriptions),
+    };
+    activeCheckoutDiffSubscriptions.clear();
+    activeTerminalSubscriptions.clear();
+    reconcileSubscriptions(fallbackActive);
+  }
+
+  const unsubscribeQueryCache = input.queryClient.getQueryCache().subscribe((event) => {
+    if (
+      !shouldReconcileSubscriptionsForCacheEvent(event, input.serverId, {
+        checkoutDiff: activeCheckoutDiffSubscriptions,
+        workspaceTerminals: activeTerminalSubscriptions,
+      })
+    ) {
+      return;
+    }
+    reconcileSubscriptions();
+  });
+  const unsubscribeProviders = input.client.on("providers_snapshot_update", (message) => {
+    applyProvidersSnapshotUpdate({
+      queryClient: input.queryClient,
+      serverId: input.serverId,
+      message,
+    });
+  });
+  const unsubscribeDaemonConfig = input.client.on("status", (message) => {
+    applyDaemonConfigStatus({ queryClient: input.queryClient, serverId: input.serverId, message });
+  });
+  const unsubscribeCheckoutDiffUpdate = input.client.on("checkout_diff_update", (message) => {
+    applyCheckoutDiffUpdate({
+      activeCheckoutDiffSubscriptions,
+      queryClient: input.queryClient,
+      serverId: input.serverId,
+      message,
+    });
+  });
+  const unsubscribeCheckoutDiffResponse = input.client.on(
+    "subscribe_checkout_diff_response",
+    (message) => {
+      applyCheckoutDiffSubscribeResponse({
+        activeCheckoutDiffSubscriptions,
+        queryClient: input.queryClient,
+        serverId: input.serverId,
+        message,
+      });
+    },
+  );
+  const unsubscribeTerminalsChanged = input.client.on("terminals_changed", (message) => {
+    applyTerminalsChanged({
+      activeCheckoutDiffSubscriptions,
+      activeTerminalSubscriptions,
+      queryClient: input.queryClient,
+      serverId: input.serverId,
+      message,
+    });
+  });
+  let reconnectSubscriptionRepairs = reconnectSubscriptionRepairsByServerId.get(input.serverId);
+  if (!reconnectSubscriptionRepairs) {
+    reconnectSubscriptionRepairs = new Set();
+    reconnectSubscriptionRepairsByServerId.set(input.serverId, reconnectSubscriptionRepairs);
+  }
+  reconnectSubscriptionRepairs.add(resetSubscriptionsAfterReconnect);
+
+  reconcileSubscriptions();
+
+  return () => {
+    disposed = true;
+    reconnectSubscriptionRepairs.delete(resetSubscriptionsAfterReconnect);
+    if (reconnectSubscriptionRepairs.size === 0) {
+      reconnectSubscriptionRepairsByServerId.delete(input.serverId);
+    }
+    unsubscribeQueryCache();
+    unsubscribeProviders();
+    unsubscribeDaemonConfig();
+    unsubscribeCheckoutDiffUpdate();
+    unsubscribeCheckoutDiffResponse();
+    unsubscribeTerminalsChanged();
+    for (const subscriptionId of activeCheckoutDiffSubscriptions.keys()) {
+      unsubscribeCheckoutDiff(input.client, subscriptionId);
+    }
+    activeCheckoutDiffSubscriptions.clear();
+    for (const route of activeTerminalSubscriptions.values()) {
+      input.client.unsubscribeTerminals(workspaceTerminalSubscriptionInput(route));
+    }
+    activeTerminalSubscriptions.clear();
+  };
+}
+
+function reconcileCheckoutDiffSubscriptions(input: {
+  active: Map<string, CheckoutDiffRoute>;
+  client: ServerDataPushClient;
+  desired: Map<string, CheckoutDiffRoute>;
+  serverId: string;
+}): void {
+  for (const [subscriptionId, current] of input.active) {
+    const desired = input.desired.get(subscriptionId);
+    if (desired && areCheckoutDiffRoutesEqual(current, desired)) {
+      continue;
+    }
+    unsubscribeCheckoutDiff(input.client, subscriptionId);
+    input.active.delete(subscriptionId);
+  }
+
+  for (const [subscriptionId, desired] of input.desired) {
+    if (input.active.has(subscriptionId)) {
+      continue;
+    }
+    input.active.set(subscriptionId, desired);
+    void input.client
+      .subscribeCheckoutDiff(desired.cwd, desired.compare, {
+        subscriptionId,
+        requestId: `push-router:${input.serverId}:${subscriptionId}`,
+      })
+      .catch((error) => {
+        if (areCheckoutDiffRoutesEqual(input.active.get(subscriptionId), desired)) {
+          input.active.delete(subscriptionId);
+        }
+        console.error("[server-data] subscribeCheckoutDiff failed", {
+          serverId: input.serverId,
+          cwd: desired.cwd,
+          error,
+        });
+      });
+  }
+}
+
+function reconcileTerminalSubscriptions(input: {
+  active: Map<string, WorkspaceTerminalsRoute>;
+  client: ServerDataPushClient;
+  desired: Map<string, WorkspaceTerminalsRoute>;
+}): void {
+  for (const [key, current] of input.active) {
+    const desired = input.desired.get(key);
+    if (desired && areWorkspaceTerminalsRoutesEqual(current, desired)) {
+      continue;
+    }
+    input.client.unsubscribeTerminals(workspaceTerminalSubscriptionInput(current));
+    input.active.delete(key);
+  }
+
+  for (const [key, desired] of input.desired) {
+    if (input.active.has(key)) {
+      continue;
+    }
+    input.active.set(key, desired);
+    input.client.subscribeTerminals(workspaceTerminalSubscriptionInput(desired));
+  }
+}
+
+function applyDaemonConfigStatus(input: {
+  queryClient: QueryClient;
+  serverId: string;
+  message: StatusMessage;
+}): void {
+  const payload = input.message.payload;
+  if (!isDaemonConfigChangedPayload(payload)) {
+    return;
+  }
+  input.queryClient.setQueryData<MutableDaemonConfig>(
+    daemonConfigQueryKey(input.serverId),
+    payload.config,
+  );
+}
+
+function applyCheckoutDiffUpdate(input: {
+  activeCheckoutDiffSubscriptions: Map<string, CheckoutDiffRoute>;
+  queryClient: QueryClient;
+  serverId: string;
+  message: CheckoutDiffUpdateMessage;
+}): void {
+  setCheckoutDiffPayload({
+    activeCheckoutDiffSubscriptions: input.activeCheckoutDiffSubscriptions,
+    queryClient: input.queryClient,
+    serverId: input.serverId,
+    subscriptionId: input.message.payload.subscriptionId,
+    payload: {
+      cwd: input.message.payload.cwd,
+      files: orderCheckoutDiffFiles(input.message.payload.files),
+      error: input.message.payload.error,
+      requestId: `subscription:${input.message.payload.subscriptionId}`,
+    },
+  });
+}
+
+function applyCheckoutDiffSubscribeResponse(input: {
+  activeCheckoutDiffSubscriptions: Map<string, CheckoutDiffRoute>;
+  queryClient: QueryClient;
+  serverId: string;
+  message: SubscribeCheckoutDiffResponseMessage;
+}): void {
+  setCheckoutDiffPayload({
+    activeCheckoutDiffSubscriptions: input.activeCheckoutDiffSubscriptions,
+    queryClient: input.queryClient,
+    serverId: input.serverId,
+    subscriptionId: input.message.payload.subscriptionId,
+    payload: {
+      cwd: input.message.payload.cwd,
+      files: orderCheckoutDiffFiles(input.message.payload.files),
+      error: input.message.payload.error,
+      requestId: input.message.payload.requestId,
+    },
+  });
+}
+
+function setCheckoutDiffPayload(input: {
+  activeCheckoutDiffSubscriptions: Map<string, CheckoutDiffRoute>;
+  queryClient: QueryClient;
+  serverId: string;
+  subscriptionId: string;
+  payload: CheckoutDiffCachePayload;
+}): void {
+  for (const query of input.queryClient.getQueryCache().getAll()) {
+    const route =
+      getServerDataRoute(query) ??
+      getActiveCheckoutDiffRouteForQueryKey({
+        active: input.activeCheckoutDiffSubscriptions,
+        queryKey: query.queryKey,
+        serverId: input.serverId,
+      });
+    if (
+      !route ||
+      route.domain !== "checkoutDiff" ||
+      route.serverId !== input.serverId ||
+      route.subscriptionId !== input.subscriptionId
+    ) {
+      continue;
+    }
+    input.queryClient.setQueryData<CheckoutDiffCachePayload>(query.queryKey, input.payload);
+  }
+}
+
+function applyTerminalsChanged(input: {
+  activeCheckoutDiffSubscriptions: Map<string, CheckoutDiffRoute>;
+  activeTerminalSubscriptions: Map<string, WorkspaceTerminalsRoute>;
+  queryClient: QueryClient;
+  serverId: string;
+  message: TerminalsChangedMessage;
+}): void {
+  for (const query of input.queryClient.getQueryCache().getAll()) {
+    const route = getActiveServerDataRoute(query, input.serverId, {
+      checkoutDiff: input.activeCheckoutDiffSubscriptions,
+      workspaceTerminals: input.activeTerminalSubscriptions,
+    });
+    if (
+      !route ||
+      route.domain !== "workspaceTerminals" ||
+      route.cwd !== input.message.payload.cwd
+    ) {
+      continue;
+    }
+
+    const matchingTerminals = input.message.payload.terminals.filter(
+      (terminal) => terminal.workspaceId === route.workspaceId,
+    );
+
+    input.queryClient.setQueryData<ListTerminalsPayload>(query.queryKey, (current) => ({
+      cwd: input.message.payload.cwd,
+      terminals: matchingTerminals,
+      requestId: current?.requestId ?? `terminals-changed-${Date.now()}`,
+    }));
+  }
+}
+
+function getActiveServerDataRoute(
+  query: Query,
+  serverId: string,
+  active: ActiveServerDataSubscriptions,
+): ServerDataRoute | null {
+  if (query.getObserversCount() === 0) {
+    return null;
+  }
+  const route = getServerDataRoute(query);
+  if (route) {
+    return route.enabled && route.serverId === serverId ? route : null;
+  }
+  return getActiveRouteForQueryKey({
+    active,
+    queryKey: query.queryKey,
+    serverId,
+  });
+}
+
+function getActiveRouteForQueryKey(input: {
+  active: ActiveServerDataSubscriptions;
+  queryKey: QueryKey;
+  serverId: string;
+}): ServerDataRoute | null {
+  return (
+    getActiveTerminalRouteForQueryKey({
+      active: input.active.workspaceTerminals,
+      queryKey: input.queryKey,
+      serverId: input.serverId,
+    }) ??
+    getActiveCheckoutDiffRouteForQueryKey({
+      active: input.active.checkoutDiff,
+      queryKey: input.queryKey,
+      serverId: input.serverId,
+    })
+  );
+}
+
+function getActiveTerminalRouteForQueryKey(input: {
+  active: Map<string, WorkspaceTerminalsRoute>;
+  queryKey: QueryKey;
+  serverId: string;
+}): WorkspaceTerminalsRoute | null {
+  if (!isQueryForServer(input.queryKey, "terminals", input.serverId)) {
+    return null;
+  }
+  const cwd = input.queryKey[2];
+  const workspaceId = input.queryKey[3];
+  if (
+    typeof cwd !== "string" ||
+    (workspaceId !== undefined && workspaceId !== null && typeof workspaceId !== "string")
+  ) {
+    return null;
+  }
+  return input.active.get(`${cwd}\u0000${workspaceId ?? ""}`) ?? null;
+}
+
+function getActiveCheckoutDiffRouteForQueryKey(input: {
+  active: Map<string, CheckoutDiffRoute>;
+  queryKey: QueryKey;
+  serverId: string;
+}): CheckoutDiffRoute | null {
+  if (!isQueryForServer(input.queryKey, "checkoutDiff", input.serverId)) {
+    return null;
+  }
+  for (const route of input.active.values()) {
+    if (isCheckoutDiffQueryKeyForRoute(input.queryKey, route)) {
+      return route;
+    }
+  }
+  return null;
+}
+
+function shouldReconcileSubscriptionsForCacheEvent(
+  event: QueryCacheNotifyEvent,
+  serverId: string,
+  active: ActiveServerDataSubscriptions,
+): boolean {
+  if (!canEventChangeDesiredSubscriptions(event.type)) {
+    return false;
+  }
+  const route = getServerDataRoute(event.query);
+  if (route?.serverId === serverId) {
+    return true;
+  }
+  return (
+    getActiveRouteForQueryKey({
+      active,
+      queryKey: event.query.queryKey,
+      serverId,
+    }) !== null
+  );
+}
+
+function canEventChangeDesiredSubscriptions(type: QueryCacheNotifyEvent["type"]): boolean {
+  return (
+    type === "added" ||
+    type === "removed" ||
+    type === "observerAdded" ||
+    type === "observerRemoved" ||
+    type === "observerOptionsUpdated"
+  );
+}
+
+function getServerDataRoute(query: Query): ServerDataRoute | null {
+  const meta = query.meta;
+  if (!isRecord(meta) || !isRecord(meta.serverData)) {
+    return null;
+  }
+  return readServerDataRoute(meta.serverData);
+}
+
+function readServerDataRoute(value: Record<string, unknown>): ServerDataRoute | null {
+  const domain = value.domain;
+  const enabled = value.enabled;
+  const serverId = value.serverId;
+  const cwd = value.cwd;
+  if (typeof enabled !== "boolean" || typeof serverId !== "string" || typeof cwd !== "string") {
+    return null;
+  }
+
+  if (domain === "checkoutDiff") {
+    const subscriptionId = value.subscriptionId;
+    const compare = readCheckoutDiffCompare(value.compare);
+    if (typeof subscriptionId !== "string" || !compare) {
+      return null;
+    }
+    return {
+      domain,
+      enabled,
+      serverId,
+      subscriptionId,
+      cwd,
+      compare,
+    };
+  }
+
+  if (domain === "workspaceTerminals") {
+    const workspaceId = value.workspaceId;
+    if (workspaceId !== undefined && typeof workspaceId !== "string") {
+      return null;
+    }
+    return {
+      domain,
+      enabled,
+      serverId,
+      cwd,
+      ...(workspaceId ? { workspaceId } : {}),
+    };
+  }
+
+  return null;
+}
+
+function readCheckoutDiffCompare(value: unknown): CheckoutDiffCompare | null {
+  if (!isRecord(value)) {
+    return null;
+  }
+  const mode = value.mode;
+  const baseRef = value.baseRef;
+  const ignoreWhitespace = value.ignoreWhitespace;
+  if (mode !== "uncommitted" && mode !== "base") {
+    return null;
+  }
+  if (baseRef !== undefined && typeof baseRef !== "string") {
+    return null;
+  }
+  if (ignoreWhitespace !== undefined && typeof ignoreWhitespace !== "boolean") {
+    return null;
+  }
+  return {
+    mode,
+    ...(baseRef ? { baseRef } : {}),
+    ...(ignoreWhitespace !== undefined ? { ignoreWhitespace } : {}),
+  };
+}
+
+function areCheckoutDiffRoutesEqual(
+  left: CheckoutDiffRoute | undefined,
+  right: CheckoutDiffRoute,
+): boolean {
+  return (
+    left?.serverId === right.serverId &&
+    left.subscriptionId === right.subscriptionId &&
+    left.cwd === right.cwd &&
+    left.compare.mode === right.compare.mode &&
+    left.compare.baseRef === right.compare.baseRef &&
+    left.compare.ignoreWhitespace === right.compare.ignoreWhitespace
+  );
+}
+
+function isCheckoutDiffQueryKeyForRoute(queryKey: QueryKey, route: CheckoutDiffRoute): boolean {
+  return (
+    queryKey[0] === "checkoutDiff" &&
+    queryKey[1] === route.serverId &&
+    queryKey[2] === route.cwd &&
+    queryKey[3] === route.compare.mode &&
+    queryKey[4] === (route.compare.baseRef ?? "") &&
+    queryKey[5] === (route.compare.ignoreWhitespace === true)
+  );
+}
+
+function areWorkspaceTerminalsRoutesEqual(
+  left: WorkspaceTerminalsRoute,
+  right: WorkspaceTerminalsRoute,
+): boolean {
+  return (
+    left.serverId === right.serverId &&
+    left.cwd === right.cwd &&
+    left.workspaceId === right.workspaceId
+  );
+}
+
+function workspaceTerminalSubscriptionKey(route: WorkspaceTerminalsRoute): string {
+  return `${route.cwd}\u0000${route.workspaceId ?? ""}`;
+}
+
+function workspaceTerminalSubscriptionInput(route: WorkspaceTerminalsRoute): {
+  cwd: string;
+  workspaceId?: string;
+} {
+  return {
+    cwd: route.cwd,
+    ...(route.workspaceId ? { workspaceId: route.workspaceId } : {}),
+  };
+}
+
+function unsubscribeCheckoutDiff(client: ServerDataPushClient, subscriptionId: string): void {
+  try {
+    client.unsubscribeCheckoutDiff(subscriptionId);
+  } catch {
+    // Disconnect cleanup can race with explicit subscription teardown.
+  }
+}
+
+function isQueryForServer(queryKey: QueryKey, kind: string, serverId: string): boolean {
+  return queryKey.length >= 2 && queryKey[0] === kind && queryKey[1] === serverId;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function isDaemonConfigChangedPayload(
+  payload: StatusMessage["payload"],
+): payload is { status: "daemon_config_changed"; config: MutableDaemonConfig } {
+  return payload.status === "daemon_config_changed" && isRecord(payload.config);
+}

packages/app/src/data/query.ts

@@ -0,0 +1,106 @@
+import {
+  keepPreviousData,
+  skipToken,
+  useQuery,
+  type QueryKey,
+  type UseQueryOptions,
+  type UseQueryResult,
+} from "@tanstack/react-query";
+
+type QueryFnOption<TQueryFnData, TError, TData, TQueryKey extends QueryKey> = NonNullable<
+  UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>["queryFn"]
+>;
+
+type ReplicaQueryInput<TQueryFnData, TError, TData, TQueryKey extends QueryKey> = Omit<
+  UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  | "gcTime"
+  | "initialData"
+  | "refetchOnMount"
+  | "refetchOnReconnect"
+  | "refetchOnWindowFocus"
+  | "staleTime"
+> & {
+  pushEvent: string;
+};
+
+type FetchQueryInput<TQueryFnData, TError, TData, TQueryKey extends QueryKey> = Omit<
+  UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  "initialData" | "placeholderData" | "queryFn" | "refetchOnMount" | "staleTime"
+> & {
+  dataShape: "list" | "value";
+  queryFn: QueryFnOption<TQueryFnData, TError, TData, TQueryKey>;
+  staleTimeMs: number;
+};
+
+export function useReplicaQuery<
+  TQueryFnData,
+  TError = Error,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(input: ReplicaQueryInput<TQueryFnData, TError, TData, TQueryKey>): UseQueryResult<TData, TError> {
+  return useQuery(replicaQueryOptions(input));
+}
+
+export function useFetchQuery<
+  TQueryFnData,
+  TError = Error,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(input: FetchQueryInput<TQueryFnData, TError, TData, TQueryKey>): UseQueryResult<TData, TError> {
+  return useQuery(fetchQueryOptions(input));
+}
+
+function replicaQueryOptions<
+  TQueryFnData,
+  TError = Error,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  input: ReplicaQueryInput<TQueryFnData, TError, TData, TQueryKey>,
+): UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> {
+  const { pushEvent, meta, ...options } = input;
+  return {
+    ...options,
+    gcTime: Infinity,
+    meta: {
+      ...meta,
+      serverDataPolicy: {
+        class: "replica",
+        pushEvent,
+      },
+    },
+    queryFn: options.queryFn ?? skipToken,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    staleTime: Infinity,
+  };
+}
+
+function fetchQueryOptions<
+  TQueryFnData,
+  TError = Error,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  input: FetchQueryInput<TQueryFnData, TError, TData, TQueryKey>,
+): UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> {
+  if (!Number.isFinite(input.staleTimeMs)) {
+    throw new Error("Fetch queries must declare a finite staleTimeMs.");
+  }
+
+  const { dataShape, meta, staleTimeMs, ...options } = input;
+  return {
+    ...options,
+    ...(dataShape === "list" ? { placeholderData: keepPreviousData } : {}),
+    meta: {
+      ...meta,
+      serverDataPolicy: {
+        class: "fetch",
+        dataShape,
+      },
+    },
+    refetchOnMount: "always",
+    staleTime: staleTimeMs,
+  };
+}

packages/app/src/desktop/daemon/desktop-daemon.ts

@@ -28,6 +28,11 @@ export interface DesktopDaemonLogs {
   contents: string;
 }
 
+export interface DesktopAppLogs {
+  logPath: string;
+  contents: string;
+}
+
 export interface DesktopPairingOffer {
   relayEnabled: boolean;
   url: string | null;
@@ -144,6 +149,17 @@ export async function getDesktopDaemonLogs(): Promise<DesktopDaemonLogs> {
   return parseDesktopDaemonLogs(await invokeDesktopCommand("desktop_daemon_logs"));
 }
 
+export async function getDesktopAppLogs(): Promise<DesktopAppLogs> {
+  const raw = await invokeDesktopCommand("desktop_app_logs");
+  if (!isRecord(raw)) {
+    throw new Error("Unexpected desktop app logs response.");
+  }
+  return {
+    logPath: toStringOrNull(raw.logPath) ?? "",
+    contents: typeof raw.contents === "string" ? raw.contents : "",
+  };
+}
+
 export async function getDesktopDaemonPairing(): Promise<DesktopPairingOffer> {
   return parseDesktopPairingOffer(await invokeDesktopCommand("desktop_daemon_pairing"));
 }

packages/app/src/desktop/hooks/use-built-in-daemon-management.ts

@@ -34,6 +34,7 @@ interface UseBuiltInDaemonManagementInput {
 interface UseBuiltInDaemonManagementResult {
   isUpdating: boolean;
   toggle: () => void;
+  enable: () => Promise<DaemonManagementToggleResult | null>;
 }
 
 export function useBuiltInDaemonManagement(
@@ -42,12 +43,16 @@ export function useBuiltInDaemonManagement(
   const { t } = useTranslation();
   const { daemonStatus, settings, updateSettings, setStatus, refreshStatus } = input;
   const reportError = useDesktopIpcErrorReporter();
-  const { mutate: toggleDaemonManagement, isPending: isUpdating } = useMutation<
-    DaemonManagementToggleResult,
-    Error
-  >({
-    mutationFn: async () => {
-      const wasManagingDaemon = settings.manageBuiltInDaemon;
+  const {
+    mutate: toggleDaemonManagement,
+    mutateAsync: toggleDaemonManagementAsync,
+    isPending: isUpdating,
+  } = useMutation<DaemonManagementToggleResult, Error, { forceEnable: boolean }>({
+    mutationFn: async ({ forceEnable }) => {
+      // forceEnable takes the enable branch regardless of the persisted
+      // setting — the recovery affordance must never reach the stop/confirm
+      // path even if manageBuiltInDaemon was left true.
+      const wasManagingDaemon = forceEnable ? false : settings.manageBuiltInDaemon;
       try {
         const result = await executeDaemonManagementToggle(wasManagingDaemon, daemonStatus, {
           confirm: () =>
@@ -109,8 +114,21 @@ export function useBuiltInDaemonManagement(
       return;
     }
 
-    toggleDaemonManagement();
+    toggleDaemonManagement({ forceEnable: false });
   }, [isUpdating, toggleDaemonManagement]);
 
-  return { isUpdating, toggle };
+  const enable = useCallback(async () => {
+    if (isUpdating) {
+      return null;
+    }
+
+    try {
+      return await toggleDaemonManagementAsync({ forceEnable: true });
+    } catch {
+      // onError has already surfaced the failure; callers only act on success.
+      return null;
+    }
+  }, [isUpdating, toggleDaemonManagementAsync]);
+
+  return { isUpdating, toggle, enable };
 }

packages/app/src/desktop/hooks/use-enable-built-in-daemon-option.ts

@@ -0,0 +1,46 @@
+import { useCallback } from "react";
+import { router } from "expo-router";
+import { getIsElectron } from "@/constants/platform";
+import { useLocalDaemonServerIdState } from "@/hooks/use-is-local-daemon";
+import { useHosts } from "@/runtime/host-runtime";
+import { useDesktopSettings } from "@/desktop/settings/desktop-settings";
+import { useDaemonStatus } from "@/desktop/hooks/use-daemon-status";
+import { useBuiltInDaemonManagement } from "@/desktop/hooks/use-built-in-daemon-management";
+import { buildSettingsHostSectionRoute } from "@/utils/host-routes";
+
+export interface EnableBuiltInDaemonOption {
+  visible: boolean;
+  onPress: () => void;
+}
+
+export function useEnableBuiltInDaemonOption(): EnableBuiltInDaemonOption {
+  const isElectron = getIsElectron();
+  const localDaemon = useLocalDaemonServerIdState();
+  const hosts = useHosts();
+  const { settings, updateSettings } = useDesktopSettings();
+  const { data, setStatus, refetch } = useDaemonStatus();
+  const { enable } = useBuiltInDaemonManagement({
+    daemonStatus: data?.status ?? null,
+    settings: settings.daemon,
+    updateSettings: (updates) => updateSettings({ daemon: updates }),
+    setStatus,
+    refreshStatus: refetch,
+  });
+
+  const isLocalhostConfigured =
+    localDaemon.status === "resolved" &&
+    localDaemon.serverId !== null &&
+    hosts.some((host) => host.serverId === localDaemon.serverId);
+  const visible = isElectron && localDaemon.status === "resolved" && !isLocalhostConfigured;
+
+  const onPress = useCallback(() => {
+    void (async () => {
+      const result = await enable();
+      if (result?.kind === "enabled") {
+        router.push(buildSettingsHostSectionRoute(result.newStatus.serverId, "host"));
+      }
+    })();
+  }, [enable]);
+
+  return { visible, onPress };
+}