chore(release): cut 0.1.16

Replace inline data-URL image handling with a persistent attachment storage service, add draft lifecycle states (active/abandoned/sent) with generation tracking, and update fetchAgent to return project placement alongside agent snapshots.

.github/workflows/android-apk-release.yml

@@ -0,0 +1,119 @@
+name: Android APK Release
+
+on:
+  push:
+    tags:
+      - "v*"
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "Existing tag to build (e.g. v0.1.0)"
+        required: true
+        type: string
+
+concurrency:
+  group: android-apk-release-${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref }}
+  cancel-in-progress: false
+
+env:
+  RELEASE_TAG: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref_name }}
+
+jobs:
+  publish-android-apk:
+    permissions:
+      contents: write
+      packages: read
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref }}
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "npm"
+          registry-url: "https://npm.pkg.github.com"
+          scope: "@boudra"
+
+      - name: Install JS dependencies
+        run: npm ci
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Setup Expo and EAS
+        uses: expo/expo-github-action@v8
+        with:
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+
+      - name: Build Android APK on EAS
+        id: eas_build
+        shell: bash
+        run: |
+          set -euo pipefail
+          cd packages/app
+
+          build_json="$(npx eas build --platform android --profile production-apk --non-interactive --wait --json)"
+          echo "$build_json" > "$RUNNER_TEMP/eas-build.json"
+
+          build_id="$(jq -r 'if type == "array" then .[0].id // empty else .id // empty end' "$RUNNER_TEMP/eas-build.json")"
+          if [ -z "$build_id" ]; then
+            echo "Failed to determine EAS build ID."
+            cat "$RUNNER_TEMP/eas-build.json"
+            exit 1
+          fi
+
+          echo "build_id=$build_id" >> "$GITHUB_OUTPUT"
+
+      - name: Resolve APK artifact URL
+        id: artifact
+        shell: bash
+        run: |
+          set -euo pipefail
+          cd packages/app
+
+          build_view_json="$(npx eas build:view '${{ steps.eas_build.outputs.build_id }}' --json)"
+          echo "$build_view_json" > "$RUNNER_TEMP/eas-build-view.json"
+
+          artifact_url="$(jq -r '.artifacts.buildUrl // .artifacts.applicationArchiveUrl // empty' "$RUNNER_TEMP/eas-build-view.json")"
+          if [ -z "$artifact_url" ]; then
+            echo "Failed to determine APK artifact URL."
+            cat "$RUNNER_TEMP/eas-build-view.json"
+            exit 1
+          fi
+
+          asset_name="paseo-${RELEASE_TAG}-android.apk"
+          asset_path="$RUNNER_TEMP/$asset_name"
+
+          curl --fail --location --output "$asset_path" "$artifact_url"
+
+          echo "asset_name=$asset_name" >> "$GITHUB_OUTPUT"
+          echo "asset_path=$asset_path" >> "$GITHUB_OUTPUT"
+
+      - name: Wait for GitHub release tag
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          for attempt in $(seq 1 90); do
+            if gh release view "$RELEASE_TAG" --repo "${{ github.repository }}" >/dev/null 2>&1; then
+              echo "Found release for tag $RELEASE_TAG"
+              exit 0
+            fi
+            echo "Release for $RELEASE_TAG is not available yet (attempt $attempt/90)."
+            sleep 20
+          done
+
+          echo "Timed out waiting for GitHub release tag $RELEASE_TAG."
+          exit 1
+
+      - name: Upload APK to GitHub Release
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh release upload "$RELEASE_TAG" "${{ steps.artifact.outputs.asset_path }}" --clobber --repo "${{ github.repository }}"

.github/workflows/deploy-app.yml

@@ -2,11 +2,8 @@ name: Deploy App
 
 on:
   push:
-    branches: [main]
-    paths:
-      - 'packages/app/**'
-      - 'packages/server/src/**'
-      - '.github/workflows/deploy-app.yml'
+    tags:
+      - 'v*'
   workflow_dispatch:
 
 jobs:

.github/workflows/desktop-release.yml

@@ -20,6 +20,7 @@ jobs:
   publish-tauri:
     permissions:
       contents: write
+      packages: read
     runs-on: macos-latest
     env:
       RELEASE_TAG: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref_name }}
@@ -44,7 +45,7 @@ jobs:
           targets: aarch64-apple-darwin
 
       - name: Install JS dependencies
-        run: npm install --workspace=@getpaseo/app --workspace=@getpaseo/desktop --include-workspace-root
+        run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
@@ -66,38 +67,46 @@ jobs:
 
           const tauriConfPath = path.join('packages', 'desktop', 'src-tauri', 'tauri.conf.json');
           const tauriConfText = fs.readFileSync(tauriConfPath, 'utf8');
-          const tauriRe = /(\"version\"\\s*:\\s*\")([^\"]+)(\")/;
+          const tauriRe = /("version"\s*:\s*")([^"]+)(")/;
           if (!tauriRe.test(tauriConfText)) {
             throw new Error(`Failed to find version field in ${tauriConfPath}`);
           }
           fs.writeFileSync(tauriConfPath, tauriConfText.replace(tauriRe, `$1${version}$3`));
 
           const cargoTomlPath = path.join('packages', 'desktop', 'src-tauri', 'Cargo.toml');
-          const cargoLines = fs.readFileSync(cargoTomlPath, 'utf8').split(/\\r?\\n/);
+          const cargoLines = fs.readFileSync(cargoTomlPath, 'utf8').split(/\r?\n/);
           let inPackage = false;
           let updated = false;
           const nextLines = cargoLines.map((line) => {
-            if (/^\\[package\\]\\s*$/.test(line)) inPackage = true;
-            else if (inPackage && /^\\[/.test(line)) inPackage = false;
+            if (/^\[package\]\s*$/.test(line)) inPackage = true;
+            else if (inPackage && /^\[/.test(line)) inPackage = false;
 
-            if (inPackage && /^version\\s*=\\s*\".*\"\\s*$/.test(line)) {
+            if (inPackage && /^version\s*=\s*".*"\s*$/.test(line)) {
               updated = true;
-              return `version = \"${version}\"`;
+              return `version = "${version}"`;
             }
             return line;
           });
           if (!updated) throw new Error(`Failed to update Cargo package version in ${cargoTomlPath}`);
-          fs.writeFileSync(cargoTomlPath, `${nextLines.join('\\n')}\\n`);
+          fs.writeFileSync(cargoTomlPath, `${nextLines.join('\n')}\n`);
           NODE
 
       - name: Build and publish Tauri release
         uses: tauri-apps/tauri-action@v0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
         with:
           projectPath: packages/desktop
           tagName: ${{ env.RELEASE_TAG }}
-          releaseName: Paseo Desktop ${{ env.RELEASE_TAG }}
+          releaseName: Paseo ${{ env.RELEASE_TAG }}
           releaseBody: See the assets to download and install this version.
           releaseDraft: false
           prerelease: false

.github/workflows/release-notes-sync.yml

@@ -0,0 +1,67 @@
+name: Release Notes Sync
+
+on:
+  push:
+    tags:
+      - "v*"
+    branches:
+      - main
+    paths:
+      - "CHANGELOG.md"
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "Release tag to sync (e.g. v0.1.14). Leave empty to use top changelog entry."
+        required: false
+        type: string
+      create_if_missing:
+        description: "Create release if missing (normally only needed for tag events)."
+        required: false
+        default: false
+        type: boolean
+
+concurrency:
+  group: release-notes-sync-${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref }}
+  cancel-in-progress: false
+
+jobs:
+  sync-release-notes:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Sync release body from changelog
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          REPO: ${{ github.repository }}
+          EVENT_NAME: ${{ github.event_name }}
+          REF: ${{ github.ref }}
+          INPUT_TAG: ${{ github.event_name == 'push' && startsWith(github.ref, 'refs/tags/') && github.ref_name || github.event.inputs.tag }}
+          INPUT_CREATE_IF_MISSING: ${{ github.event.inputs.create_if_missing }}
+        shell: bash
+        run: |
+          set -euo pipefail
+
+          args=(--repo "$REPO")
+
+          if [ -n "${INPUT_TAG:-}" ]; then
+            args+=(--tag "$INPUT_TAG")
+          fi
+
+          create_if_missing="false"
+          if [ "$EVENT_NAME" = "push" ] && [[ "$REF" == refs/tags/v* ]]; then
+            create_if_missing="true"
+          elif [ "$EVENT_NAME" = "workflow_dispatch" ] && [ "${INPUT_CREATE_IF_MISSING:-false}" = "true" ]; then
+            create_if_missing="true"
+          fi
+
+          if [ "$create_if_missing" = "true" ]; then
+            args+=(--create-if-missing)
+          fi
+
+          node scripts/sync-release-notes-from-changelog.mjs "${args[@]}"

.tool-versions

@@ -1 +1,2 @@
 rust 1.85.1
+nodejs 22.20.0

CHANGELOG.md

@@ -0,0 +1,162 @@
+# Changelog
+
+## 0.1.16 - 2026-02-22
+### Added
+- Added desktop Settings controls to update both the Paseo app and the local daemon.
+- Added support for provider thinking options and autonomous run handling.
+
+### Improved
+- Improved streaming performance and scroll stability to reduce UI churn during long runs.
+- Improved archive behavior by interrupting active agents before archive operations.
+- Improved agent title consistency across refreshes.
+- Improved desktop update/settings copy and labeling for clarity.
+
+### Fixed
+- Fixed duplicate user-message echoes by deduplicating with canonical message IDs.
+- Fixed app archive flow instability caused by hook-order issues.
+- Fixed startup crashes caused by the OpenCode SDK update.
+- Fixed noisy attention notifications from non-UI agent activity.
+
+## 0.1.15 - 2026-02-19
+### Added
+- Added a public changelog page on the website so users can browse release notes.
+
+### Improved
+- Redesigned the website get-started experience into a clearer two-step flow.
+- Simplified website GitHub navigation and changelog headings.
+- Improved app draft/new-agent UX with clearer working directory placeholder and empty-state messaging.
+- Enabled drag interactions in previously unhandled areas on the desktop (Tauri) draft screen.
+- Hid empty filter groups in the left sidebar.
+
+### Fixed
+- Fixed archived-agent navigation by redirecting archived agent routes to draft.
+- Fixed duplicate `/rewind` user-message behavior.
+
+## 0.1.14 - 2026-02-19
+### Added
+- Added Claude `/rewind` command support.
+- Added slash command access in the draft agent composer.
+- Added `@` workspace file autocomplete in chat prompts.
+- Added support for pasting images directly into prompt attachments.
+- Added optimistic image previews for pending user message attachments.
+- Added shared desktop/web overlay scroll handles, including file preview panes.
+
+### Improved
+- Improved worktree flow after shipping, including better merged PR detection.
+- Improved draft workflow by enabling the explorer sidebar immediately after CWD selection.
+- Improved new worktree-agent defaults by prefilling CWD to the main repository.
+- Improved desktop command autocomplete behavior to match combobox interactions.
+- Improved git sync UX by simplifying sync labels and only showing Sync when a branch diverges from origin.
+- Improved desktop settings and permissions UX in Tauri.
+- Improved scrollbar visibility, drag interactions, tracking, and animation timing on web/desktop.
+
+### Fixed
+- Fixed worktree archive/setup lifecycle issues, including terminal cleanup and archive timing.
+- Fixed worktree path collisions by hashing CWD for collision-safe worktree roots.
+- Fixed terminal sizing when switching back to an agent session.
+- Fixed accidental terminal closure risk by adding confirmation for running shell commands.
+- Fixed archive loading-state consistency across the sidebar and agent screen.
+- Fixed autocomplete popover stability and workspace suggestion ranking.
+- Fixed dictation timeouts caused by dangling non-final segments.
+- Fixed server lock ownership when spawned as a child process by using parent PID ownership.
+- Fixed hidden directory leakage in server CWD suggestions.
+- Fixed agent attention notification payload consistency across providers.
+- Fixed daemon version badge visibility in settings when daemon version data is unavailable.
+
+## 0.1.9 - 2026-02-17
+### Improved
+- Unified structured-output generation through a single shared schema-validation and retry pipeline.
+- Reused provider availability checks for structured generation fallback selection.
+- Added structured generation waterfall ordering for internal metadata and git text generation: Claude Haiku, then Codex, then OpenCode.
+
+### Fixed
+- Fixed CLI `run --output-schema` to use the shared structured-output path instead of ad-hoc JSON parsing.
+- Fixed `run --output-schema` failures where providers returned empty `lastMessage` by recovering from timeline assistant output.
+- Fixed internal commit message, pull request text, and agent metadata generation to follow one consistent structured pipeline.
+
+## 0.1.8 - 2026-02-17
+### Added
+- Added a cross-platform confirm dialog flow for daemon restarts.
+
+### Improved
+- Simplified local speech bootstrap and daemon startup locking behavior.
+- Updated website hero copy to emphasize local execution.
+
+### Fixed
+- Fixed stuck "send while running" recovery across app and server session handling.
+- Fixed Claude session identity preservation when reloading existing agents.
+- Fixed combobox option behavior and related interactions.
+- Fixed Tauri file-drop listener cleanup to avoid uncaught unlisten errors.
+- Fixed web tool-detail wheel event routing at scroll edges.
+
+## 0.1.7 - 2026-02-16
+### Added
+- Improved agent workspace flows with better directory suggestions.
+- Added iOS TestFlight and Android app access request forms on the website.
+
+### Improved
+- Unified daemon startup behavior between dev and CLI paths for more predictable local runs.
+- Improved website app download and update guidance.
+
+### Fixed
+- Prevented an initial desktop combobox `0,0` position flash.
+- Fixed CLI version output issues.
+- Hardened server runtime loading for local speech dependencies.
+
+## 0.1.6 - 2026-02-16
+### Notes
+- No major visible product changes in this patch release.
+
+## 0.1.5 - 2026-02-16
+### Added
+- Added terminal reattach support and better worktree terminal handling.
+- Added global keyboard shortcut help in the app.
+- Added sidebar host filtering and improved agent workflow controls.
+
+### Improved
+- Improved worktree setup visibility by streaming setup progress.
+- Improved terminal streaming reliability and lifecycle handling.
+- Preserved explorer tab state so context survives navigation better.
+
+## 0.1.4 - 2026-02-14
+### Added
+- Added voice capability status reporting in the client.
+- Added background local speech model downloads with runtime gating.
+- Added adaptive dictation finish timing based on server-provided budgets.
+- Added relay reconnect behavior with grace periods and branch suggestions.
+
+### Improved
+- Improved connection selection and agent hydration reliability.
+- Improved timeline loading with cursor-based fetch behavior.
+- Improved first-run experience by bootstrapping a default localhost connection.
+- Improved inline code rendering by auto-linkifying URLs.
+
+### Fixed
+- Fixed Linux checkout diff watch behavior to avoid recursive watches.
+- Fixed stale relay client timer behavior.
+- Fixed unnecessary git diff header auto-scroll on collapse.
+
+## 0.1.3 - 2026-02-12
+### Added
+- Added CLI onboarding command.
+- Added CLI `--output-schema` support for structured agent output.
+- Added CLI agent metadata update support for names and labels.
+- Added provider availability detection with normalization of legacy default model IDs.
+
+### Improved
+- Improved file explorer refresh feedback and unresolved checkout fallback handling.
+- Added better voice interrupt handling with a speech-start grace period.
+- Improved CLI defaults to list all non-archived agents by default.
+- Improved website UX with clearer install CTA and privacy policy access.
+
+### Fixed
+- Fixed dev runner entry issues and sherpa TTS initialization behavior.
+
+## 0.1.2 - 2026-02-11
+### Notes
+- No major visible product changes in this patch release.
+
+## 0.1.1 - 2026-02-11
+
+### Added
+- Initial `0.1.x` release line.

CLAUDE.md

@@ -56,6 +56,26 @@ Use `npm run cli` to run the local CLI (instead of the globally linked `paseo` w
 
 Use `--host <host:port>` to point the CLI at a different daemon (e.g., `--host localhost:7777`).
 
+### Relay build sync (important)
+
+When changing `packages/relay/src/*`, rebuild relay before running/debugging the daemon:
+
+```bash
+npm run build --workspace=@getpaseo/relay
+```
+
+Reason: Node daemon imports `@getpaseo/relay` from `packages/relay/dist/*` (`node` export path), not directly from `src/*`.
+
+### Server build sync for CLI (important)
+
+When changing `packages/server/src/client/*` (especially `daemon-client.ts`) or shared WS protocol types, rebuild server before running/debugging CLI commands:
+
+```bash
+npm run build --workspace=@getpaseo/server
+```
+
+Reason: local CLI imports `@getpaseo/server` via package exports that resolve to `packages/server/dist/*` first. If `dist` is stale, CLI can speak an old protocol (for example, sending `session` before `hello`) and fail with handshake warnings/timeouts.
+
 ### Quick reference CLI commands
 
 ```bash
@@ -109,7 +129,7 @@ Use `APP_VARIANT` in `packages/app/app.config.js` to control app name + package
 - `production` -> app name `Paseo`, package `sh.paseo`
 - `development` -> app name `Paseo Debug`, package `sh.paseo.debug`
 
-EAS profiles live in `packages/app/eas.json` as `development` and `production`.
+EAS profiles live in `packages/app/eas.json` as `development`, `production`, and `production-apk`.
 
 `development` uses Android `debug`.
 
@@ -136,6 +156,29 @@ npm run android:production
 
 `npm run android:prod` and `npm run android:release` are aliases for `npm run android:production`.
 
+### Cloud build + submit (EAS Workflows)
+
+Tag pushes like `v0.1.0` trigger `packages/app/.eas/workflows/release-mobile.yml` on Expo servers.
+Tag pushes like `v0.1.0` also trigger `.github/workflows/android-apk-release.yml` on GitHub Actions to publish an APK asset on the matching GitHub Release.
+
+That workflow does:
+- Build iOS with the `production` profile
+- Build Android with the `production` profile
+- Submit each build with the `production` submit profile
+
+Useful commands:
+
+```bash
+# List recent mobile workflow runs
+cd packages/app && npx eas workflow:runs --workflow release-mobile.yml --limit 10
+
+# Inspect one run (jobs, status, outputs)
+cd packages/app && npx eas workflow:view <run-id>
+
+# Stream logs for all steps in one failed job
+cd packages/app && npx eas workflow:logs <job-id> --non-interactive --all-steps
+```
+
 ## Testing with Playwright MCP
 
 **CRITICAL:** When asked to test the app, you MUST use the Playwright MCP connecting to Metro at `http://localhost:8081`.
@@ -148,6 +191,39 @@ Use the Playwright MCP to test the app in Metro web. Navigate to `http://localho
 
 Run `npx expo-doctor` to diagnose version mismatches and native module issues.
 
+## Release playbook
+
+Use the scripted release flow from repo root. Avoid manual version bumps, manual tags, or ad hoc publish commands unless debugging.
+
+```bash
+# Recommended: full patch release (bump, check, publish, push branch+tag)
+npm run release:patch
+
+# Manual, step-by-step fallback:
+npm run version:all:patch  # npm version across all workspaces (creates commit + local tag)
+npm run release:check
+npm run release:publish
+npm run release:push       # pushes HEAD and current version tag (triggers desktop + Android APK + EAS mobile workflows)
+```
+
+Notes:
+- `version:all:*` bumps the root package version and runs the root `version` lifecycle script to sync workspace versions and internal `@getpaseo/*` dependency versions before the release commit/tag is created.
+- `release:prepare` refreshes workspace `node_modules` links to prevent stale local package types during release checks.
+- If `release:publish` fails after a successful publish of one workspace, re-run `npm run release:publish`; npm will skip already-published versions and continue where possible.
+- If a user asks to "release paseo" (without specifying major/minor), treat it as a patch release and run `npm run release:patch`.
+- All workspaces share one version by design. Keep versions synchronized and release together.
+- The website Mac download CTA URL is derived from `packages/website/package.json` version at build time, so no manual update is required after release.
+
+Release completion checklist:
+- Manually update CHANGELOG.md with release notes, between current release vs previous one, use Git commands to figure out what changed. The notes are user-facing:
+    - Ask yourself, what do Paseo users want to know about?
+    - Include: New features, bug fixes
+    - Don't include: Refactors or code changes that are not noticeable by users
+- `npm run release:patch` completes successfully.
+- GitHub `Desktop Release` workflow for the new `v*` tag is green.
+- GitHub `Android APK Release` workflow for the same tag is green.
+- EAS `release-mobile.yml` workflow for the same tag is green (Expo queues can take longer on the free plan).
+
 ## Orchestrator Mode
 
 - **When agent control tool calls fail**, make sure you list agents before trying to launch another one. It could just be a wait timeout.

README.md

@@ -17,73 +17,44 @@
 
 Paseo is a self-hosted daemon for Claude Code, Codex, and OpenCode. Agents run on your machine with your full dev environment. Connect from phone, desktop, or web.
 
-## Features
-
-- **Self-hosted:** The daemon runs on your laptop, home server, or VPS
-- **Multi-provider:** Works with Claude Code, Codex, and OpenCode from one interface
-- **Multi-host:** Connect to multiple daemons and see all your agents in one place
-- **Voice input:** Dictate prompts when you're away from your keyboard
-- **Optional relay:** Use the hosted end-to-end encrypted relay, or connect directly
-- **Cross-device:** iOS, Android, desktop, web, and CLI
-- **Git integration:** Manage agents in isolated worktrees, review diffs, ship from the app
-- **Open source:** Free and open source under MIT license
-
-## Quick Start
+## Getting Started
 
 ```bash
-npm install -g @getpaseo/cli && paseo
+npm install -g @getpaseo/cli
+paseo
 ```
 
 Then open the app and connect to your daemon.
 
-## Local speech (STT/TTS)
+For full setup and configuration, see:
+- [Docs](https://paseo.sh/docs)
+- [Configuration reference](https://paseo.sh/docs/configuration)
 
-Paseo can run dictation + voice mode STT/TTS fully locally via `sherpa-onnx`.
+## Development
 
-When the daemon starts with a local speech provider selected, it will download any missing model files automatically (unless `PASEO_SHERPA_ONNX_AUTO_DOWNLOAD=0`).
+Quick monorepo package map:
+- `packages/server`: Paseo daemon (agent process orchestration, WebSocket API, MCP server)
+- `packages/app`: Expo client (iOS, Android, web)
+- `packages/cli`: `paseo` CLI for daemon and agent workflows
+- `packages/desktop`: Tauri desktop app
+- `packages/relay`: Relay package for remote connectivity
+- `packages/website`: Marketing site and documentation (`paseo.sh`)
+
+Common commands:
 
 ```bash
-npm run speech:download --workspace=@getpaseo/server
+# run all local dev services
+npm run dev
+
+# run individual surfaces
+npm run dev:server
+npm run dev:app
+npm run dev:website
+
+# repo-wide checks
+npm run typecheck
 ```
 
-Optional configuration:
-
-- `PASEO_SHERPA_ONNX_MODELS_DIR` (defaults to `~/.paseo/models/sherpa-onnx`)
-- `PASEO_SHERPA_ONNX_AUTO_DOWNLOAD` (`1` by default; set `0` to disable automatic downloads on daemon start)
-- `PASEO_SHERPA_STT_PRESET` (`zipformer`, `paraformer`, or `parakeet` for NVIDIA Parakeet TDT v3)
-- `PASEO_SHERPA_TTS_PRESET` (`pocket-tts` (Kyutai Pocket TTS), `kitten`, or `kokoro`)
-- `PASEO_DICTATION_STT_PROVIDER`, `PASEO_VOICE_STT_PROVIDER`, `PASEO_VOICE_TTS_PROVIDER` (`sherpa` or `openai`)
-
-To see all supported local model IDs:
-
-```bash
-npm run speech:models --workspace=@getpaseo/server
-```
-
-Optional: run an end-to-end test that downloads real models and exercises streaming STT + streaming TTS:
-
-```bash
-PASEO_SPEECH_E2E_DOWNLOAD=1 PASEO_SPEECH_E2E_MODEL_SET=parakeet-pocket \
-  npx vitest run --workspace=@getpaseo/server src/server/speech/sherpa/speech-download.e2e.test.ts
-```
-
-## Documentation
-
-See [paseo.sh/docs](https://paseo.sh/docs) for full documentation.
-
-## Desktop releases
-
-Desktop app binaries are built and attached to a GitHub Release when you push a version tag (for example `v0.1.0` or `desktop-v0.1.0`).
-
-```bash
-git tag v0.1.0
-git push origin v0.1.0
-```
-
-If you prefer, `npm version` can be used to create and push a version tag.
-
-This triggers the `Desktop Release` workflow (`.github/workflows/desktop-release.yml`).
-
 ## License
 
 MIT

app.json

@@ -0,0 +1,5 @@
+{
+  "android": {
+    "package": "com.moboudra.paseo"
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paseo",
-  "version": "0.1.2",
+  "version": "0.1.16",
   "private": true,
   "workspaces": [
     "packages/server",
@@ -12,7 +12,7 @@
   ],
   "scripts": {
     "dev": "./scripts/dev.sh",
-    "dev:server": "NODE_ENV=development tsx packages/server/scripts/dev-runner.ts",
+    "dev:server": "NODE_ENV=development tsx packages/server/scripts/daemon-runner.ts --dev",
     "dev:app": "npm run start --workspace=@getpaseo/app",
     "dev:website": "npm run dev --workspace=@getpaseo/website",
     "postinstall": "node scripts/postinstall-patches.mjs",
@@ -30,15 +30,21 @@
     "ios": "npm run ios --workspace=@getpaseo/app",
     "web": "npm run web --workspace=@getpaseo/app",
     "dev:desktop": "npm run dev --workspace=@getpaseo/desktop",
-    "build:desktop": "npm run build --workspace=@getpaseo/desktop",
+    "build:desktop": "npm run version:sync-internal && npm run build:web --workspace=@getpaseo/app && npm run build --workspace=@getpaseo/desktop",
     "cli": "npx tsx packages/cli/src/index.js",
+    "version": "npm run version:sync-internal && npm run release:prepare && git add -A",
     "version:sync-internal": "node scripts/sync-workspace-versions.mjs",
-    "version:all:patch": "npm version patch --workspaces --include-workspace-root --no-git-tag-version && npm run version:sync-internal && npm install --package-lock-only",
-    "version:all:minor": "npm version minor --workspaces --include-workspace-root --no-git-tag-version && npm run version:sync-internal && npm install --package-lock-only",
-    "version:all:major": "npm version major --workspaces --include-workspace-root --no-git-tag-version && npm run version:sync-internal && npm install --package-lock-only",
-    "release:check": "npm run typecheck --workspace=@getpaseo/relay && npm run typecheck --workspace=@getpaseo/server && npm run typecheck --workspace=@getpaseo/cli && npm run build --workspace=@getpaseo/relay && npm run build --workspace=@getpaseo/server && npm run build --workspace=@getpaseo/cli && npm pack --dry-run --workspace=@getpaseo/relay && npm pack --dry-run --workspace=@getpaseo/server && npm pack --dry-run --workspace=@getpaseo/cli",
+    "release:prepare": "npm install --workspaces --include-workspace-root",
+    "version:all:patch": "npm version patch --include-workspace-root --message \"chore(release): cut %s\"",
+    "version:all:minor": "npm version minor --include-workspace-root --message \"chore(release): cut %s\"",
+    "version:all:major": "npm version major --include-workspace-root --message \"chore(release): cut %s\"",
+    "release:check": "npm run release:prepare && npm run typecheck --workspace=@getpaseo/relay && npm run typecheck --workspace=@getpaseo/server && npm run typecheck --workspace=@getpaseo/cli && npm run build --workspace=@getpaseo/relay && npm run build --workspace=@getpaseo/server && npm run build --workspace=@getpaseo/cli && npm pack --dry-run --workspace=@getpaseo/relay && npm pack --dry-run --workspace=@getpaseo/server && npm pack --dry-run --workspace=@getpaseo/cli",
     "release:publish:dry-run": "npm publish --dry-run --workspace=@getpaseo/relay --access public && npm publish --dry-run --workspace=@getpaseo/server --access public && npm publish --dry-run --workspace=@getpaseo/cli --access public",
-    "release:publish": "npm publish --workspace=@getpaseo/relay --access public && npm publish --workspace=@getpaseo/server --access public && npm publish --workspace=@getpaseo/cli --access public"
+    "release:publish": "npm publish --workspace=@getpaseo/relay --access public && npm publish --workspace=@getpaseo/server --access public && npm publish --workspace=@getpaseo/cli --access public",
+    "release:push": "node scripts/push-current-release-tag.mjs",
+    "release:patch": "npm run version:all:patch && npm run release:check && npm run release:publish && npm run release:push",
+    "release:minor": "npm run version:all:minor && npm run release:check && npm run release:publish && npm run release:push",
+    "release:major": "npm run version:all:major && npm run release:check && npm run release:publish && npm run release:push"
   },
   "devDependencies": {
     "concurrently": "^9.2.1",

packages/app/.eas/workflows/release-mobile.yml

@@ -0,0 +1,38 @@
+name: Release Mobile
+
+on:
+  push:
+    tags:
+      - "v*"
+  workflow_dispatch: {}
+
+jobs:
+  build_ios:
+    name: Build iOS
+    type: build
+    params:
+      platform: ios
+      profile: production
+
+  build_android:
+    name: Build Android
+    type: build
+    params:
+      platform: android
+      profile: production
+
+  submit_ios:
+    name: Submit iOS
+    needs: [build_ios]
+    type: submit
+    params:
+      build_id: ${{ needs.build_ios.outputs.build_id }}
+      profile: production
+
+  submit_android:
+    name: Submit Android
+    needs: [build_android]
+    type: submit
+    params:
+      build_id: ${{ needs.build_android.outputs.build_id }}
+      profile: production

packages/app/app.config.js

@@ -1,14 +1,46 @@
+const fs = require("node:fs");
+const path = require("node:path");
 const pkg = require("./package.json");
 const appVariant = process.env.APP_VARIANT ?? "production";
 
+function resolveSecretFile(params) {
+  const fromEnv = process.env[params.envKey];
+  if (typeof fromEnv === "string" && fromEnv.trim().length > 0) {
+    return fromEnv.trim();
+  }
+
+  const fallbackAbsolutePath = path.resolve(__dirname, params.fallbackRelativePath);
+  if (fs.existsSync(fallbackAbsolutePath)) {
+    return params.fallbackRelativePath;
+  }
+
+  return undefined;
+}
+
 const variants = {
   production: {
     name: "Paseo",
     packageId: "sh.paseo",
+    googleServicesFile: resolveSecretFile({
+      envKey: "GOOGLE_SERVICES_FILE_PROD",
+      fallbackRelativePath: "./.secrets/google-services.prod.json",
+    }),
+    googleServiceInfoPlist: resolveSecretFile({
+      envKey: "GOOGLE_SERVICE_INFO_PLIST_PROD",
+      fallbackRelativePath: "./.secrets/GoogleService-Info.prod.plist",
+    }),
   },
   development: {
     name: "Paseo Debug",
     packageId: "sh.paseo.debug",
+    googleServicesFile: resolveSecretFile({
+      envKey: "GOOGLE_SERVICES_FILE_DEBUG",
+      fallbackRelativePath: "./.secrets/google-services.debug.json",
+    }),
+    googleServiceInfoPlist: resolveSecretFile({
+      envKey: "GOOGLE_SERVICE_INFO_PLIST_DEBUG",
+      fallbackRelativePath: "./.secrets/GoogleService-Info.debug.plist",
+    }),
   },
 };
 
@@ -38,6 +70,9 @@ export default {
         ITSAppUsesNonExemptEncryption: false,
       },
       bundleIdentifier: variant.packageId,
+      ...(variant.googleServiceInfoPlist
+        ? { googleServicesFile: variant.googleServiceInfoPlist }
+        : {}),
     },
     android: {
       adaptiveIcon: {
@@ -57,6 +92,9 @@ export default {
         "android.permission.CAMERA",
       ],
       package: variant.packageId,
+      ...(variant.googleServicesFile
+        ? { googleServicesFile: variant.googleServicesFile }
+        : {}),
     },
     web: {
       output: "single",
@@ -112,6 +150,6 @@ export default {
         projectId: "0e7f65ce-0367-46c8-a238-2b65963d235a",
       },
     },
-    owner: "moboudra",
+    owner: "getpaseo",
   },
 };

packages/app/e2e/agent-timeline-hydration.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect } from './fixtures';
+import { createAgent, ensureHostSelected, gotoHome, setWorkingDirectory } from './helpers/app';
+import { createTempGitRepo } from './helpers/workspace';
+
+test('agent timeline hydrates after reload via fetch_agent_timeline_request', async ({ page }) => {
+  const repo = await createTempGitRepo();
+  const marker = 'TIMELINE_HYDRATION_OK';
+  const prompt = `Respond with exactly: ${marker}`;
+
+  try {
+    await gotoHome(page);
+    await setWorkingDirectory(page, repo.path);
+    await ensureHostSelected(page);
+    await createAgent(page, prompt);
+
+    const assistantMessage = page
+      .getByTestId('assistant-message')
+      .filter({ hasText: marker })
+      .first();
+    await expect(assistantMessage).toBeVisible({ timeout: 120000 });
+
+    await page.reload({ waitUntil: 'commit' });
+    await expect(page).toHaveURL(/\/agent\//);
+    await expect(page.getByTestId('agent-loading')).toHaveCount(0, { timeout: 30000 });
+    await expect(page.getByText(prompt, { exact: true }).first()).toBeVisible({
+      timeout: 30000,
+    });
+    await expect(
+      page.getByTestId('assistant-message').filter({ hasText: marker }).first()
+    ).toBeVisible({ timeout: 30000 });
+  } finally {
+    await repo.cleanup();
+  }
+});

packages/app/e2e/checkout-ship.spec.ts

@@ -394,7 +394,7 @@ test('checkout-first Changes panel ship loop', async ({ page }) => {
     await expect(page.getByTestId('changes-menu-archive-worktree')).toBeVisible();
     await page.getByTestId('changes-menu-archive-worktree').click();
     // Archiving a worktree deletes agents and redirects to home
-    await expect(page).toHaveURL(/\/agent\/?$/, { timeout: 30000 });
+    await expect(page).toHaveURL(/\/agent\/?(?:\?.*)?$/, { timeout: 30000 });
     await setWorkingDirectory(page, repo.path);
     await ensureHostSelected(page);
     // Repo inspection is async; wait until git options are interactive again.

packages/app/e2e/draft-explorer-sidebar.spec.ts

@@ -0,0 +1,42 @@
+import { test, expect } from "./fixtures";
+import { ensureHostSelected, gotoHome, setWorkingDirectory } from "./helpers/app";
+import { createTempGitRepo } from "./helpers/workspace";
+
+test("draft enables explorer after selecting a working directory", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-draft-explorer-");
+
+  try {
+    await gotoHome(page);
+    await ensureHostSelected(page);
+
+    const newAgentButton = page.getByTestId("sidebar-new-agent").first();
+    await expect(newAgentButton).toBeVisible({ timeout: 30000 });
+    await newAgentButton.click();
+    await expect(page).toHaveURL(/\/agent\/?$/, { timeout: 30000 });
+
+    await setWorkingDirectory(page, repo.path);
+
+    const toggle = page
+      .getByRole("button", {
+        name: /open explorer|close explorer|toggle explorer/i,
+      })
+      .first();
+    await expect(toggle).toBeVisible({ timeout: 30000 });
+
+    await toggle.click();
+    await expect(
+      page.locator('[data-testid="explorer-header"]:visible').first()
+    ).toBeVisible({ timeout: 30000 });
+
+    const terminalsTab = page
+      .locator('[data-testid="explorer-tab-terminals"]:visible')
+      .first();
+    await expect(terminalsTab).toBeVisible({ timeout: 30000 });
+    await terminalsTab.click();
+    await expect(
+      page.locator('[data-testid="terminal-surface"]:visible').first()
+    ).toBeVisible({ timeout: 30000 });
+  } finally {
+    await repo.cleanup();
+  }
+});

packages/app/e2e/global-setup.ts

@@ -153,6 +153,9 @@ export default async function globalSetup() {
       PASEO_LISTEN: `0.0.0.0:${port}`,
       PASEO_RELAY_ENDPOINT: `127.0.0.1:${relayPort}`,
       PASEO_CORS_ORIGINS: `http://localhost:${metroPort}`,
+      // Keep e2e bootstrap fast and deterministic; terminal/sidebar tests do not need speech.
+      PASEO_DICTATION_ENABLED: "0",
+      PASEO_VOICE_MODE_ENABLED: "0",
       NODE_ENV: 'development',
     },
     stdio: ['ignore', 'pipe', 'pipe'],

packages/app/e2e/helpers/app.ts

@@ -162,17 +162,26 @@ export const gotoHome = async (page: Page) => {
 };
 
 export const openSettings = async (page: Page) => {
-  // Navigate directly to settings page
-  await page.goto('/settings');
-  await expect(page).toHaveURL(/\/settings$/);
+  const serverId = process.env.E2E_SERVER_ID;
+  if (!serverId) {
+    throw new Error('E2E_SERVER_ID is not set (expected from Playwright globalSetup).');
+  }
+
+  // Navigate through the real app control so route changes stay aligned with UI behavior.
+  const settingsButton = page.locator('[data-testid="sidebar-settings"]:visible').first();
+  await expect(settingsButton).toBeVisible();
+  await settingsButton.click();
+  await expect(page).toHaveURL(new RegExp(`/h/${escapeRegex(serverId)}/settings$`));
 };
 
 export const setWorkingDirectory = async (page: Page, directory: string) => {
-  const workingDirectoryLabel = page.getByText('WORKING DIRECTORY', { exact: true }).first();
-  await expect(workingDirectoryLabel).toBeVisible();
-  const workingDirectorySelect = page.getByTestId('working-directory-select').first();
+  const workingDirectorySelect = page
+    .locator('[data-testid="working-directory-select"]:visible')
+    .first();
+  await expect(workingDirectorySelect).toBeVisible({ timeout: 30000 });
 
-  const input = page.getByRole('textbox', { name: '/path/to/project' });
+  const legacyInput = page.getByRole('textbox', { name: '/path/to/project' }).first();
+  const directorySearchInput = page.getByRole('textbox', { name: /search directories/i }).first();
   const worktreePicker = page.getByTestId('worktree-attach-picker');
   const worktreeSheetTitle = page.getByText('Select worktree', { exact: true });
   const closeBottomSheet = async () => {
@@ -217,29 +226,54 @@ export const setWorkingDirectory = async (page: Page, directory: string) => {
 
   await closeWorktreeSheetIfOpen();
 
-  if (!(await input.isVisible())) {
+  const pickerInputVisible = async () =>
+    (await directorySearchInput.isVisible().catch(() => false)) ||
+    (await legacyInput.isVisible().catch(() => false));
+
+  if (!(await pickerInputVisible())) {
     await closeBottomSheet();
     await workingDirectorySelect.click({ force: true });
-    if (!(await input.isVisible())) {
+    if (!(await pickerInputVisible())) {
       await closeBottomSheet();
       await workingDirectorySelect.click({ force: true });
     }
-    await expect(input).toBeVisible();
+    await expect
+      .poll(async () => pickerInputVisible(), { timeout: 10000 })
+      .toBe(true);
   }
 
   const trimmedDirectory = directory.replace(/\/+$/, '');
-  await input.fill(trimmedDirectory);
-  await input.press('Enter');
+  const activeInput =
+    (await directorySearchInput.isVisible().catch(() => false))
+      ? directorySearchInput
+      : legacyInput;
 
-  // Desktop web supports selecting via Enter; mobile may require clicking the explicit option.
-  const useOption = page.getByTestId('working-directory-custom-option').first();
-  if (await useOption.isVisible().catch(() => false)) {
-    await expect(useOption).toContainText(`Use "${trimmedDirectory}"`);
-    await useOption.click({ force: true });
+  await activeInput.fill(trimmedDirectory);
+
+  if (activeInput === directorySearchInput) {
+    // Combobox custom rows can be either plain path labels or prefixed labels.
+    const plainOption = page
+      .getByText(new RegExp(`^${escapeRegex(trimmedDirectory)}$`, 'i'))
+      .first();
+    const prefixedUseOption = page
+      .getByText(new RegExp(`^Use "${escapeRegex(trimmedDirectory)}"$`, 'i'))
+      .first();
+
+    if (await plainOption.isVisible().catch(() => false)) {
+      await plainOption.click({ force: true });
+    } else if (await prefixedUseOption.isVisible().catch(() => false)) {
+      await prefixedUseOption.click({ force: true });
+    } else {
+      // Fallback: accept highlighted option (directory suggestion).
+      await activeInput.press('Enter');
+    }
+  } else {
+    // Legacy path picker fallback.
+    await activeInput.press('Enter');
   }
 
-  // Wait for the sheet to close after clicking "Use"
-  await expect(input).not.toBeVisible({ timeout: 10000 });
+  // Wait for picker to close.
+  await expect(activeInput).not.toBeVisible({ timeout: 10000 });
 
   const directoryCandidates = new Set<string>([trimmedDirectory]);
   if (trimmedDirectory.startsWith('/var/')) {
@@ -333,11 +367,9 @@ export const createAgent = async (page: Page, message: string) => {
 
   // Expo Router navigations can be "same-document" updates, so avoid waiting for a full `load`.
   await page.waitForURL(/\/agent\//, { waitUntil: 'commit' });
-  const userBubble = page
-    .getByRole('button', { name: 'Copy message' })
-    .filter({ hasText: message })
-    .first();
-  await expect(userBubble).toBeVisible();
+  await expect(page.getByText(message, { exact: true }).first()).toBeVisible({
+    timeout: 30000,
+  });
 };
 
 export interface AgentConfig {

packages/app/e2e/keyboard-shortcuts-dialog.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from "./fixtures";
+import { gotoHome } from "./helpers/app";
+
+test("question mark opens keyboard shortcuts dialog", async ({ page }) => {
+  await gotoHome(page);
+  await page.getByTestId("menu-button").first().focus();
+
+  await page.keyboard.press("Shift+/");
+
+  const dialog = page.getByTestId("keyboard-shortcuts-dialog");
+  const content = page.getByTestId("keyboard-shortcuts-dialog-content");
+
+  await expect(dialog).toBeVisible({ timeout: 10000 });
+  await expect(content).toBeVisible({ timeout: 10000 });
+  await expect(content).toContainText("Show keyboard shortcuts");
+  await expect(content).toContainText("Toggle left sidebar");
+});

packages/app/e2e/paste-image-attachment.spec.ts

@@ -0,0 +1,53 @@
+import { test, expect } from "./fixtures";
+import { ensureHostSelected, gotoHome, setWorkingDirectory } from "./helpers/app";
+import { createTempGitRepo } from "./helpers/workspace";
+
+test("pastes clipboard image into prompt attachments", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-paste-image-");
+
+  try {
+    await gotoHome(page);
+    await setWorkingDirectory(page, repo.path);
+    await ensureHostSelected(page);
+
+    const input = page.getByRole("textbox", { name: "Message agent..." });
+    await expect(input).toBeEditable();
+    await input.focus();
+
+    const result = await page.evaluate(() => {
+      const active = document.activeElement;
+      if (!(active instanceof HTMLTextAreaElement)) {
+        return {
+          pasted: false,
+          elementTag: active ? active.tagName : null,
+          defaultPrevented: false,
+        };
+      }
+
+      const file = new File([new Uint8Array([0, 1, 2, 3])], "paste.png", {
+        type: "image/png",
+      });
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(file);
+
+      const event = new ClipboardEvent("paste", {
+        clipboardData: dataTransfer,
+        bubbles: true,
+        cancelable: true,
+      });
+      active.dispatchEvent(event);
+
+      return {
+        pasted: true,
+        elementTag: active.tagName,
+        defaultPrevented: event.defaultPrevented,
+      };
+    });
+
+    expect(result.pasted).toBe(true);
+    expect(result.defaultPrevented).toBe(true);
+    await expect(page.getByTestId("message-input-image-pill")).toHaveCount(1);
+  } finally {
+    await repo.cleanup();
+  }
+});

packages/app/e2e/sidebar-project-filter-flash.spec.ts

@@ -0,0 +1,130 @@
+import { test, expect } from "./fixtures";
+import { gotoHome } from "./helpers/app";
+
+test("project filter dropdown never appears visibly at 0,0 on open", async ({ page }) => {
+  await gotoHome(page);
+
+  const trigger = page.getByText("Project", { exact: true }).first();
+  await expect(trigger).toBeVisible();
+
+  await page.evaluate(() => {
+    (window as any).__projectFilterFlashProbe = new Promise<{
+      targetFound: boolean;
+      visibleAtOrigin: boolean;
+      records: Array<{ left: number; top: number; opacity: number }>;
+    }>((resolve) => {
+      let target: HTMLElement | null = null;
+      const records: Array<{ left: number; top: number; opacity: number }> = [];
+
+      const capture = () => {
+        if (!target) return;
+        const style = getComputedStyle(target);
+        records.push({
+          left: Number.parseFloat(style.left || "0"),
+          top: Number.parseFloat(style.top || "0"),
+          opacity: Number.parseFloat(style.opacity || "1"),
+        });
+      };
+
+      const getContainer = (node: HTMLElement): HTMLElement | null => {
+        let current: HTMLElement | null = node;
+        while (current && current !== document.body) {
+          const style = getComputedStyle(current);
+          if (style.position === "absolute" && style.backgroundColor !== "rgba(0, 0, 0, 0)") {
+            return current;
+          }
+          current = current.parentElement;
+        }
+        return null;
+      };
+
+      const tryResolveTarget = (root: HTMLElement) => {
+        const stack = [root, ...Array.from(root.querySelectorAll<HTMLElement>("*"))];
+        for (const element of stack) {
+          if (!element.textContent?.includes("No projects")) continue;
+          const container = getContainer(element);
+          if (!container) continue;
+          target = container;
+          return true;
+        }
+        return false;
+      };
+
+      const finish = () => {
+        observer.disconnect();
+        if (!target) {
+          resolve({
+            targetFound: false,
+            visibleAtOrigin: false,
+            records: [],
+          });
+          return;
+        }
+
+        const visibleAtOrigin = records.some(
+          (entry) => entry.left <= 1 && entry.top <= 1 && entry.opacity > 0.01
+        );
+
+        resolve({
+          targetFound: true,
+          visibleAtOrigin,
+          records,
+        });
+      };
+
+      const sampleFrames = () => {
+        capture();
+        requestAnimationFrame(() => {
+          capture();
+          requestAnimationFrame(() => {
+            capture();
+            requestAnimationFrame(() => {
+              capture();
+              requestAnimationFrame(() => {
+                capture();
+                finish();
+              });
+            });
+          });
+        });
+      };
+
+      const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          for (const added of Array.from(mutation.addedNodes)) {
+            if (!(added instanceof HTMLElement)) continue;
+            if (tryResolveTarget(added)) {
+              sampleFrames();
+              return;
+            }
+          }
+
+          if (
+            mutation.type === "attributes" &&
+            mutation.target instanceof HTMLElement &&
+            !target &&
+            tryResolveTarget(mutation.target)
+          ) {
+            sampleFrames();
+            return;
+          }
+        }
+      });
+
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["style"],
+      });
+
+      setTimeout(() => finish(), 2500);
+    });
+  });
+
+  await trigger.click();
+  const probe = await page.evaluate(() => (window as any).__projectFilterFlashProbe);
+
+  expect(probe.targetFound).toBe(true);
+  expect(probe.visibleAtOrigin).toBe(false);
+});

packages/app/e2e/sidebar-toggle-tooltip.spec.ts

@@ -14,7 +14,7 @@ test('sidebar toggle shows tooltip on the right', async ({ page }) => {
   const tooltip = page.getByTestId('menu-button-tooltip');
   await expect(tooltip).toBeVisible();
   await expect(tooltip).toContainText('Toggle sidebar');
-  await expect(tooltip).toContainText(/⌘B|Ctrl\+B/);
+  await expect(tooltip).toContainText(/⌘B|Ctrl\+\./);
   await page.waitForTimeout(250);
   await expect(tooltip).toBeVisible();
 

packages/app/e2e/terminal-pane.spec.ts

@@ -0,0 +1,701 @@
+import { test, expect, type Page } from "./fixtures";
+import {
+  createAgent,
+  ensureHostSelected,
+  gotoHome,
+  setWorkingDirectory,
+} from "./helpers/app";
+import { createTempGitRepo } from "./helpers/workspace";
+
+function parseAgentFromUrl(url: string): { serverId: string; agentId: string } {
+  const pathname = (() => {
+    try {
+      return new URL(url).pathname;
+    } catch {
+      return url;
+    }
+  })();
+
+  const modernMatch = pathname.match(/\/h\/([^/]+)\/agent\/([^/?#]+)/);
+  if (modernMatch) {
+    return {
+      serverId: decodeURIComponent(modernMatch[1]),
+      agentId: decodeURIComponent(modernMatch[2]),
+    };
+  }
+
+  const legacyMatch = pathname.match(/\/agent\/([^/]+)\/([^/?#]+)/);
+  if (legacyMatch) {
+    return {
+      serverId: decodeURIComponent(legacyMatch[1]),
+      agentId: decodeURIComponent(legacyMatch[2]),
+    };
+  }
+
+  throw new Error(`Expected /h/:serverId/agent/:agentId URL, got ${url}`);
+}
+
+async function openAgentFromSidebar(page: Page, serverId: string, agentId: string): Promise<void> {
+  await gotoHome(page);
+  const row = page.getByTestId(`agent-row-${serverId}-${agentId}`).first();
+  await expect(row).toBeVisible({ timeout: 30000 });
+  await row.click();
+  await expect
+    .poll(
+      () => {
+        try {
+          const parsed = parseAgentFromUrl(page.url());
+          return `${parsed.serverId}:${parsed.agentId}`;
+        } catch {
+          return "";
+        }
+      },
+      { timeout: 30000 }
+    )
+    .toBe(`${serverId}:${agentId}`);
+}
+
+async function openNewAgentDraft(page: Page): Promise<void> {
+  await gotoHome(page);
+  const newAgentButton = page.getByTestId("sidebar-new-agent").first();
+  await expect(newAgentButton).toBeVisible({ timeout: 30000 });
+  await newAgentButton.click();
+  await expect(page).toHaveURL(/\/agent\/?$/, { timeout: 30000 });
+  await expect(
+    page.locator('[data-testid="working-directory-select"]:visible').first()
+  ).toBeVisible({
+    timeout: 30000,
+  });
+}
+
+async function openTerminalsPanel(page: Page): Promise<void> {
+  let header = page.locator('[data-testid="explorer-header"]:visible').first();
+  if (!(await header.isVisible().catch(() => false))) {
+    const toggle = page.getByRole("button", {
+      name: /open explorer|close explorer|toggle explorer/i,
+    });
+    if (await toggle.first().isVisible().catch(() => false)) {
+      await toggle.first().click();
+    }
+  }
+
+  header = page.locator('[data-testid="explorer-header"]:visible').first();
+  await expect(header).toBeVisible({ timeout: 30000 });
+
+  const terminalsTab = page.getByTestId("explorer-tab-terminals").first();
+  await expect(terminalsTab).toBeVisible({ timeout: 30000 });
+  await terminalsTab.click();
+
+  await expect(page.getByTestId("terminals-header").first()).toBeVisible({
+    timeout: 30000,
+  });
+
+  await expect(page.getByTestId("terminal-surface").first()).toBeVisible({
+    timeout: 30000,
+  });
+}
+
+async function openFilesPanel(page: Page): Promise<void> {
+  const filesTab = page.getByTestId("explorer-tab-files").first();
+  await expect(filesTab).toBeVisible({ timeout: 30000 });
+  await filesTab.click();
+  await expect(page.getByTestId("files-pane-header").first()).toBeVisible({
+    timeout: 30000,
+  });
+}
+
+async function getDesktopAgentSidebarOpen(page: Page): Promise<boolean | null> {
+  return await page.evaluate(() => {
+    const raw = localStorage.getItem("panel-state");
+    if (!raw) {
+      return null;
+    }
+    try {
+      const parsed = JSON.parse(raw) as {
+        state?: { desktop?: { agentListOpen?: boolean } };
+      };
+      const value = parsed?.state?.desktop?.agentListOpen;
+      return typeof value === "boolean" ? value : null;
+    } catch {
+      return null;
+    }
+  });
+}
+
+
+async function selectNewestTerminalTab(page: Page): Promise<void> {
+  const tabs = page.locator('[data-testid^="terminal-tab-"]');
+  await expect(tabs.first()).toBeVisible({ timeout: 30000 });
+  await expect
+    .poll(async () => await tabs.count(), { timeout: 30000 })
+    .toBeGreaterThanOrEqual(2);
+  await tabs.last().click();
+}
+
+async function getFirstTerminalTabTestId(page: Page): Promise<string> {
+  const firstTab = page.locator('[data-testid^="terminal-tab-"]').first();
+  await expect(firstTab).toBeVisible({ timeout: 30000 });
+  const value = await firstTab.getAttribute("data-testid");
+  if (!value) {
+    throw new Error("Expected terminal tab test id");
+  }
+  return value;
+}
+
+async function runTerminalCommand(page: Page, command: string, expectedText: string): Promise<void> {
+  const surface = page.getByTestId("terminal-surface").first();
+  await expect(surface).toBeVisible({ timeout: 30000 });
+  await surface.click({ force: true });
+  await page.keyboard.type(command, { delay: 1 });
+  await page.keyboard.press("Enter");
+  await expect(surface).toContainText(expectedText, {
+    timeout: 30000,
+  });
+}
+
+async function runTerminalCommandWithPreEnterEcho(
+  page: Page,
+  command: string,
+  expectedText: string
+): Promise<void> {
+  const surface = page.getByTestId("terminal-surface").first();
+  await expect(surface).toBeVisible({ timeout: 30000 });
+  await surface.click({ force: true });
+  await page.keyboard.type(command, { delay: 1 });
+  await expect(surface).toContainText(command, {
+    timeout: 30000,
+  });
+  await page.keyboard.press("Enter");
+  await expect(surface).toContainText(expectedText, {
+    timeout: 30000,
+  });
+}
+
+async function expectAnsiColorApplied(page: Page, marker: string): Promise<void> {
+  await expect
+    .poll(
+      async () =>
+        await page.evaluate((target) => {
+          const terminal = (window as any).__paseoTerminal;
+          if (!terminal?.buffer?.active?.getLine || !terminal?.buffer?.active?.getNullCell) {
+            return false;
+          }
+
+          const buffer = terminal.buffer.active;
+          const nullCell = buffer.getNullCell();
+          const lineCount = buffer.length ?? 0;
+          const cols = terminal.cols ?? 0;
+
+          for (let y = 0; y < lineCount; y += 1) {
+            const line = buffer.getLine(y);
+            if (!line) continue;
+            const lineText = line.translateToString(true);
+            const index = lineText.indexOf(target);
+            if (index === -1) continue;
+
+            for (let x = index; x < index + target.length && x < cols; x += 1) {
+              const cell = line.getCell(x, nullCell);
+              if (!cell) continue;
+              if (!cell.isFgDefault()) {
+                return true;
+              }
+            }
+          }
+          return false;
+        }, marker),
+      { timeout: 30000 }
+    )
+    .toBe(true);
+}
+
+test("Terminals tab creates multiple terminals and streams command output", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-terminals-");
+
+  try {
+    await openNewAgentDraft(page);
+    await setWorkingDirectory(page, repo.path);
+    await ensureHostSelected(page);
+    await createAgent(page, "Reply with exactly: terminal smoke");
+
+    await openTerminalsPanel(page);
+    await expect(page.locator('[data-testid^="terminal-tab-"]').first()).toBeVisible({
+      timeout: 30000,
+    });
+
+    const preEnterEchoMarker = `typed-echo-${Date.now()}`;
+    await runTerminalCommandWithPreEnterEcho(
+      page,
+      `echo ${preEnterEchoMarker}`,
+      preEnterEchoMarker
+    );
+
+    const ansiMarker = `ansi-red-${Date.now()}`;
+    await runTerminalCommand(
+      page,
+      `printf '\\033[31m${ansiMarker}\\033[0m\\n'`,
+      ansiMarker
+    );
+    await expectAnsiColorApplied(page, ansiMarker);
+
+    const markerOne = `terminal-smoke-one-${Date.now()}`;
+    await runTerminalCommand(page, `echo ${markerOne}`, markerOne);
+
+    await page.getByTestId("terminals-create-button").first().click();
+    await selectNewestTerminalTab(page);
+
+    const markerTwo = `terminal-smoke-two-${Date.now()}`;
+    await runTerminalCommand(page, `echo ${markerTwo}`, markerTwo);
+  } finally {
+    await repo.cleanup();
+  }
+});
+
+test("terminal reattaches cleanly after heavy output and tab switches", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-terminal-reattach-");
+
+  try {
+    await openNewAgentDraft(page);
+    await setWorkingDirectory(page, repo.path);
+    await ensureHostSelected(page);
+    await createAgent(page, "hello");
+
+    await openTerminalsPanel(page);
+    await runTerminalCommand(
+      page,
+      "for i in $(seq 1 12000); do echo reattach-$i; done",
+      "reattach-12000"
+    );
+
+    for (let attempt = 0; attempt < 4; attempt += 1) {
+      await openFilesPanel(page);
+      await openTerminalsPanel(page);
+      await expect(page.getByText("Terminal stream ended. Reconnecting…")).toHaveCount(0, {
+        timeout: 30000,
+      });
+      await expect(page.getByTestId("terminal-attach-loading")).toHaveCount(0, {
+        timeout: 30000,
+      });
+    }
+
+    const marker = `reattach-health-${Date.now()}`;
+    await runTerminalCommand(page, `echo ${marker}`, marker);
+  } finally {
+    await repo.cleanup();
+  }
+});
+
+test("terminal keeps prompt echo visible after enter and backspace churn", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-terminal-echo-churn-");
+
+  try {
+    await openNewAgentDraft(page);
+    await setWorkingDirectory(page, repo.path);
+    await ensureHostSelected(page);
+    await createAgent(page, "hello");
+
+    await openTerminalsPanel(page);
+
+    const surface = page.getByTestId("terminal-surface").first();
+    await expect(surface).toBeVisible({ timeout: 30000 });
+    await surface.click({ force: true });
+
+    for (let iteration = 0; iteration < 40; iteration += 1) {
+      await page.keyboard.press("Enter");
+    }
+
+    const markerAfterEnters = `echo-visible-${Date.now()}`;
+    await page.keyboard.type(`echo ${markerAfterEnters}`, { delay: 0 });
+    await expect(surface).toContainText(`echo ${markerAfterEnters}`, {
+      timeout: 30000,
+    });
+    await page.keyboard.press("Enter");
+    await expect(surface).toContainText(markerAfterEnters, {
+      timeout: 30000,
+    });
+
+    const longSuffix = "x".repeat(120);
+    await page.keyboard.type(`echo ${longSuffix}`, { delay: 0 });
+    for (let iteration = 0; iteration < longSuffix.length; iteration += 1) {
+      await page.keyboard.press("Backspace");
+    }
+
+    const markerAfterBackspace = `echo-backspace-${Date.now()}`;
+    await page.keyboard.type(markerAfterBackspace, { delay: 0 });
+    await page.keyboard.press("Enter");
+    await expect(surface).toContainText(markerAfterBackspace, {
+      timeout: 30000,
+    });
+  } finally {
+    await repo.cleanup();
+  }
+});
+
+test("terminal remains interactive after alternate-screen enter/exit", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-terminal-alt-screen-");
+
+  try {
+    await openNewAgentDraft(page);
+    await setWorkingDirectory(page, repo.path);
+    await ensureHostSelected(page);
+    await createAgent(page, "hello");
+
+    await openTerminalsPanel(page);
+
+    const surface = page.getByTestId("terminal-surface").first();
+    await expect(surface).toBeVisible({ timeout: 30000 });
+    await surface.click({ force: true });
+
+    await page.keyboard.type(
+      "printf '\\033[?1049h\\033[2J\\033[HALT\\033[?1049l\\n'",
+      { delay: 0 }
+    );
+    await page.keyboard.press("Enter");
+
+    const marker = `post-alt-screen-${Date.now()}`;
+    await page.keyboard.type(`echo ${marker}`, { delay: 0 });
+    await page.keyboard.press("Enter");
+    await expect(surface).toContainText(marker, {
+      timeout: 30000,
+    });
+  } finally {
+    await repo.cleanup();
+  }
+});
+
+test("terminal tab is removed when shell exits", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-terminal-exit-");
+
+  try {
+    await openNewAgentDraft(page);
+    await setWorkingDirectory(page, repo.path);
+    await ensureHostSelected(page);
+    await createAgent(page, "Terminal exit flow");
+
+    await openTerminalsPanel(page);
+
+    const exitedTabTestId = await getFirstTerminalTabTestId(page);
+
+    const surface = page.getByTestId("terminal-surface").first();
+    await expect(surface).toBeVisible({ timeout: 30000 });
+    await surface.click({ force: true });
+    await page.keyboard.type("exit", { delay: 1 });
+    await page.keyboard.press("Enter");
+
+    await expect(page.getByTestId(exitedTabTestId)).toHaveCount(0, {
+      timeout: 30000,
+    });
+
+    await expect(page.locator('[data-testid^="terminal-tab-"]').first()).toBeVisible({
+      timeout: 30000,
+    });
+    const nextTabTestId = await getFirstTerminalTabTestId(page);
+    expect(nextTabTestId).not.toBe(exitedTabTestId);
+  } finally {
+    await repo.cleanup();
+  }
+});
+
+test("closing terminal with running command asks for confirmation", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-terminal-close-confirm-");
+
+  try {
+    await openNewAgentDraft(page);
+    await setWorkingDirectory(page, repo.path);
+    await ensureHostSelected(page);
+    await createAgent(page, "Terminal close confirmation");
+
+    await openTerminalsPanel(page);
+
+    const tabTestId = await getFirstTerminalTabTestId(page);
+    const terminalId = tabTestId.replace("terminal-tab-", "");
+    const tab = page.getByTestId(tabTestId).first();
+    await expect(tab).toBeVisible({ timeout: 30000 });
+
+    const runningMarker = `terminal-close-running-${Date.now()}`;
+    await runTerminalCommand(
+      page,
+      `echo ${runningMarker} && sleep 30`,
+      runningMarker
+    );
+
+    await tab.hover();
+    const dialogPromise = page.waitForEvent("dialog", { timeout: 30000 }).then(
+      async (dialog) => {
+        expect(dialog.type()).toBe("confirm");
+        await dialog.dismiss();
+      }
+    );
+    await page.getByTestId(`terminal-close-${terminalId}`).first().click();
+    await dialogPromise;
+
+    await expect(tab).toBeVisible({ timeout: 30000 });
+  } finally {
+    await repo.cleanup();
+  }
+});
+
+test("confirming terminal close with running command removes the tab", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-terminal-close-confirm-accept-");
+
+  try {
+    await openNewAgentDraft(page);
+    await setWorkingDirectory(page, repo.path);
+    await ensureHostSelected(page);
+    await createAgent(page, "Terminal close confirmation accept");
+
+    await openTerminalsPanel(page);
+
+    const tabTestId = await getFirstTerminalTabTestId(page);
+    const terminalId = tabTestId.replace("terminal-tab-", "");
+    const tab = page.getByTestId(tabTestId).first();
+    await expect(tab).toBeVisible({ timeout: 30000 });
+
+    const runningMarker = `terminal-close-running-accept-${Date.now()}`;
+    await runTerminalCommand(
+      page,
+      `echo ${runningMarker} && sleep 30`,
+      runningMarker
+    );
+
+    await tab.hover();
+    const dialogPromise = page.waitForEvent("dialog", { timeout: 30000 }).then(
+      async (dialog) => {
+        expect(dialog.type()).toBe("confirm");
+        await dialog.accept();
+      }
+    );
+    await page.getByTestId(`terminal-close-${terminalId}`).first().click();
+    await dialogPromise;
+
+    await expect(page.getByTestId(tabTestId)).toHaveCount(0, {
+      timeout: 30000,
+    });
+  } finally {
+    await repo.cleanup();
+  }
+});
+
+
+test("terminals are shared by agents on the same cwd", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-terminal-share-");
+
+  try {
+    await openNewAgentDraft(page);
+    await setWorkingDirectory(page, repo.path);
+    await ensureHostSelected(page);
+    await createAgent(page, "Agent one");
+    const first = parseAgentFromUrl(page.url());
+
+    await openNewAgentDraft(page);
+    await setWorkingDirectory(page, repo.path);
+    await ensureHostSelected(page);
+    await createAgent(page, "Agent two");
+    const second = parseAgentFromUrl(page.url());
+
+    expect(first.serverId).toBe(second.serverId);
+    expect(first.agentId).not.toBe(second.agentId);
+
+    await openAgentFromSidebar(page, first.serverId, first.agentId);
+    await openTerminalsPanel(page);
+    await page.getByTestId("terminals-create-button").first().click();
+    await selectNewestTerminalTab(page);
+
+    await openAgentFromSidebar(page, second.serverId, second.agentId);
+    await openTerminalsPanel(page);
+    await selectNewestTerminalTab(page);
+
+    const sharedMarker = `shared-terminal-${Date.now()}`;
+    await runTerminalCommand(page, `echo ${sharedMarker}`, sharedMarker);
+
+    await openAgentFromSidebar(page, first.serverId, first.agentId);
+    await openTerminalsPanel(page);
+    await selectNewestTerminalTab(page);
+    await expect(page.getByTestId("terminal-surface").first()).toContainText(sharedMarker, {
+      timeout: 30000,
+    });
+  } finally {
+    await repo.cleanup();
+  }
+});
+
+test("terminal captures escape and ctrl+c key input", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-terminal-keys-");
+
+  try {
+    await openNewAgentDraft(page);
+    await setWorkingDirectory(page, repo.path);
+    await ensureHostSelected(page);
+    await createAgent(page, "Terminal key combo capture");
+
+    await openTerminalsPanel(page);
+
+    const surface = page.getByTestId("terminal-surface").first();
+    await expect(surface).toBeVisible({ timeout: 30000 });
+    await surface.click({ force: true });
+
+    await page.keyboard.type("cat -v", { delay: 1 });
+    await page.keyboard.press("Enter");
+    await expect(surface).toContainText("cat -v", { timeout: 30000 });
+
+    await page.keyboard.press("Escape");
+    await expect(surface).toContainText("^[", { timeout: 30000 });
+
+    await page.keyboard.press("Control+C");
+    await expect(surface).toContainText("^C", { timeout: 30000 });
+
+    await page.keyboard.press("Control+B");
+    await expect(surface).toContainText("^B", { timeout: 30000 });
+
+    const marker = `terminal-key-capture-${Date.now()}`;
+    await page.keyboard.type(`echo ${marker}`, { delay: 1 });
+    await page.keyboard.press("Enter");
+    await expect(surface).toContainText(marker, { timeout: 30000 });
+  } finally {
+    await repo.cleanup();
+  }
+});
+
+test("Cmd+B toggles sidebar even when terminal is focused", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-terminal-cmd-b-");
+
+  try {
+    await openNewAgentDraft(page);
+    await setWorkingDirectory(page, repo.path);
+    await ensureHostSelected(page);
+    await createAgent(page, "Terminal Cmd+B");
+
+    await openTerminalsPanel(page);
+    const surface = page.getByTestId("terminal-surface").first();
+    await expect(surface).toBeVisible({ timeout: 30000 });
+    await surface.click({ force: true });
+
+    await expect
+      .poll(async () => await getDesktopAgentSidebarOpen(page), { timeout: 30000 })
+      .toBe(true);
+
+    await page.keyboard.press("Meta+B");
+    await expect
+      .poll(async () => await getDesktopAgentSidebarOpen(page), { timeout: 30000 })
+      .toBe(false);
+
+    await page.keyboard.press("Meta+B");
+    await expect
+      .poll(async () => await getDesktopAgentSidebarOpen(page), { timeout: 30000 })
+      .toBe(true);
+  } finally {
+    await repo.cleanup();
+  }
+});
+
+async function getTerminalRows(page: Page): Promise<number> {
+  return await page.evaluate(() => {
+    const terminal = (window as { __paseoTerminal?: { rows?: unknown } }).__paseoTerminal;
+    return typeof terminal?.rows === "number" ? terminal.rows : 0;
+  });
+}
+
+async function setExplorerContentBottomPadding(page: Page, padding: number): Promise<void> {
+  await page.evaluate((nextPadding) => {
+    const container = document.querySelector<HTMLElement>(
+      '[data-testid="explorer-content-area"]'
+    );
+    if (!container) {
+      return;
+    }
+    container.style.boxSizing = "border-box";
+    container.style.paddingBottom = nextPadding + "px";
+  }, padding);
+}
+
+async function getTerminalScrollbackDistance(page: Page): Promise<number> {
+  return await page.evaluate(() => {
+    const terminal = (
+      window as {
+        __paseoTerminal?: {
+          buffer?: { active?: { baseY?: unknown; viewportY?: unknown } };
+        };
+      }
+    ).__paseoTerminal;
+    const baseY = terminal?.buffer?.active?.baseY;
+    const viewportY = terminal?.buffer?.active?.viewportY;
+    if (typeof baseY !== "number" || typeof viewportY !== "number") {
+      return 0;
+    }
+    return Math.max(0, baseY - viewportY);
+  });
+}
+
+test("terminal viewport resizes and uses xterm scrollback", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-terminal-viewport-");
+
+  try {
+    await openNewAgentDraft(page);
+    await setWorkingDirectory(page, repo.path);
+    await ensureHostSelected(page);
+    await createAgent(page, "Viewport and scrollback test");
+
+    await openTerminalsPanel(page);
+
+    const initialViewport = page.viewportSize();
+    if (!initialViewport) {
+      throw new Error("Expected a viewport size");
+    }
+
+    await expect
+      .poll(() => getTerminalRows(page), { timeout: 30000 })
+      .toBeGreaterThan(0);
+    const initialRows = await getTerminalRows(page);
+
+    await setExplorerContentBottomPadding(page, 220);
+    await expect
+      .poll(() => getTerminalRows(page), { timeout: 30000 })
+      .toBeLessThan(initialRows);
+
+    await setExplorerContentBottomPadding(page, 0);
+    await expect
+      .poll(() => getTerminalRows(page), { timeout: 30000 })
+      .toBeGreaterThanOrEqual(initialRows);
+
+    const reducedHeight = Math.max(520, initialViewport.height - 220);
+    await page.setViewportSize({
+      width: initialViewport.width,
+      height: reducedHeight,
+    });
+
+    await expect
+      .poll(() => getTerminalRows(page), { timeout: 30000 })
+      .toBeLessThan(initialRows);
+
+    await page.setViewportSize(initialViewport);
+
+    await expect
+      .poll(() => getTerminalRows(page), { timeout: 30000 })
+      .toBeGreaterThanOrEqual(initialRows);
+
+    const scrollbackMarker = `scrollback-${Date.now()}`;
+    await runTerminalCommand(
+      page,
+      `for i in $(seq 1 180); do echo ${scrollbackMarker}-$i; done`,
+      `${scrollbackMarker}-180`
+    );
+
+    const surface = page.getByTestId("terminal-surface").first();
+    await surface.hover();
+    await page.mouse.wheel(0, -3000);
+
+    await expect
+      .poll(() => getTerminalScrollbackDistance(page), { timeout: 30000 })
+      .toBeGreaterThan(0);
+
+    const distanceAfterScrollUp = await getTerminalScrollbackDistance(page);
+
+    await surface.hover();
+    await page.mouse.wheel(0, 3000);
+
+    await expect
+      .poll(() => getTerminalScrollbackDistance(page), { timeout: 30000 })
+      .toBeLessThan(distanceAfterScrollUp);
+  } finally {
+    await repo.cleanup();
+  }
+});

packages/app/e2e/working-directory-combobox-positioning.spec.ts

@@ -0,0 +1,158 @@
+import { expect, test } from "./fixtures";
+import { gotoHome } from "./helpers/app";
+
+function escapeRegex(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+test("working directory combobox stays visually stable while typing search", async ({ page }) => {
+  await gotoHome(page);
+
+  const workingDirectorySelect = page
+    .locator('[data-testid="working-directory-select"]:visible')
+    .first();
+  await expect(workingDirectorySelect).toBeVisible();
+  await workingDirectorySelect.click({ force: true });
+
+  const searchInput = page.getByRole("textbox", { name: /search directories/i }).first();
+  await expect(searchInput).toBeVisible();
+
+  await page.evaluate(() => {
+    const trigger = document.querySelector('[data-testid="working-directory-select"]');
+    const searchInput = document.querySelector('input[placeholder="Search directories..."]');
+    const container = document.querySelector('[data-testid="combobox-desktop-container"]');
+    if (!(trigger instanceof HTMLElement)) {
+      throw new Error("Missing working-directory-select trigger.");
+    }
+    if (!(searchInput instanceof HTMLInputElement)) {
+      throw new Error("Missing working directory search input.");
+    }
+    if (!(container instanceof HTMLElement)) {
+      throw new Error("Missing combobox desktop container.");
+    }
+
+    const state = {
+      samples: 0,
+      underTriggerSamples: 0,
+      emptyWhileSearchingSamples: 0,
+      minSearchDelta: Number.POSITIVE_INFINITY,
+      maxSearchDelta: Number.NEGATIVE_INFINITY,
+      minContainerDelta: Number.POSITIVE_INFINITY,
+      maxContainerDelta: Number.NEGATIVE_INFINITY,
+      logs: [] as Array<{
+        reason: string;
+        query: string;
+        searchDelta: number;
+        containerDelta: number;
+        hasEmpty: boolean;
+        containerTop: number;
+        containerBottom: number;
+        triggerTop: number;
+        searchBottom: number;
+      }>,
+    };
+
+    const sample = (reason: string) => {
+      if (!document.body.contains(trigger) || !document.body.contains(searchInput) || !document.body.contains(container)) {
+        return;
+      }
+      const query = searchInput.value.trim();
+      if (!query) {
+        return;
+      }
+
+      const triggerRect = trigger.getBoundingClientRect();
+      const searchRect = searchInput.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const hasEmpty = Boolean(container.querySelector('[data-testid="combobox-empty-text"]'));
+      const searchDelta = searchRect.bottom - triggerRect.top;
+      const containerDelta = containerRect.bottom - triggerRect.top;
+
+      state.samples += 1;
+      state.minSearchDelta = Math.min(state.minSearchDelta, searchDelta);
+      state.maxSearchDelta = Math.max(state.maxSearchDelta, searchDelta);
+      state.minContainerDelta = Math.min(state.minContainerDelta, containerDelta);
+      state.maxContainerDelta = Math.max(state.maxContainerDelta, containerDelta);
+      if (searchDelta > 2 || containerDelta > 2) {
+        state.underTriggerSamples += 1;
+      }
+      if (hasEmpty) {
+        state.emptyWhileSearchingSamples += 1;
+      }
+      if (state.logs.length < 80) {
+        state.logs.push({
+          reason,
+          query,
+          searchDelta,
+          containerDelta,
+          hasEmpty,
+          containerTop: containerRect.top,
+          containerBottom: containerRect.bottom,
+          triggerTop: triggerRect.top,
+          searchBottom: searchRect.bottom,
+        });
+      }
+    };
+
+    const mutationObserver = new MutationObserver(() => sample("mutation"));
+    mutationObserver.observe(container, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      characterData: true,
+    });
+
+    const resizeObserver = new ResizeObserver(() => sample("resize"));
+    resizeObserver.observe(container);
+    resizeObserver.observe(searchInput);
+
+    let rafId = 0;
+    const loop = () => {
+      sample("raf");
+      rafId = requestAnimationFrame(loop);
+    };
+    rafId = requestAnimationFrame(loop);
+
+    (window as any).__paseoComboboxObserver = {
+      stop: () => {
+        cancelAnimationFrame(rafId);
+        mutationObserver.disconnect();
+        resizeObserver.disconnect();
+        sample("stop");
+        return {
+          ...state,
+          minSearchDelta: state.samples > 0 ? state.minSearchDelta : 0,
+          maxSearchDelta: state.samples > 0 ? state.maxSearchDelta : 0,
+          minContainerDelta: state.samples > 0 ? state.minContainerDelta : 0,
+          maxContainerDelta: state.samples > 0 ? state.maxContainerDelta : 0,
+        };
+      },
+    };
+  });
+
+  const queries = [
+    "/tmp/paseo-stability-a",
+    "/tmp/paseo-stability-ab",
+    "/tmp/paseo-stability-abc",
+    "/tmp/paseo-stability-longer-branch",
+    "/tmp/paseo-stability-z",
+  ];
+
+  for (const query of queries) {
+    await searchInput.fill("");
+    await searchInput.type(query, { delay: 20 });
+    const customOption = page.getByText(new RegExp(`^${escapeRegex(query)}$`)).first();
+    await expect(customOption).toBeVisible();
+    await page.waitForTimeout(100);
+  }
+
+  const stats = await page.evaluate(() => (window as any).__paseoComboboxObserver.stop());
+  const debug = JSON.stringify(stats.logs.slice(-10));
+
+  expect(stats.samples, debug).toBeGreaterThan(20);
+  expect(stats.underTriggerSamples, debug).toBe(0);
+  expect(stats.emptyWhileSearchingSamples, debug).toBe(0);
+  expect(stats.maxSearchDelta - stats.minSearchDelta, debug).toBeLessThanOrEqual(3);
+  expect(stats.maxContainerDelta - stats.minContainerDelta, debug).toBeLessThanOrEqual(3);
+  expect(stats.maxContainerDelta, debug).toBeLessThanOrEqual(2);
+});

packages/app/eas.json

@@ -1,6 +1,7 @@
 {
   "cli": {
-    "version": ">= 14.0.0"
+    "version": ">= 14.0.0",
+    "appVersionSource": "remote"
   },
   "build": {
     "development": {
@@ -18,10 +19,28 @@
       "channel": "production",
       "env": {
         "APP_VARIANT": "production"
+      },
+      "android": {
+        "autoIncrement": "versionCode"
+      }
+    },
+    "production-apk": {
+      "extends": "production",
+      "distribution": "internal",
+      "android": {
+        "buildType": "apk",
+        "gradleCommand": ":app:assembleRelease -x lint -x lintVitalAnalyzeRelease -x lintVitalRelease -x generateReleaseLintModel -x generateReleaseLintVitalModel"
       }
     }
   },
   "submit": {
-    "production": {}
+    "production": {
+      "ios": {
+        "ascAppId": "6758887924"
+      },
+      "android": {
+        "releaseStatus": "draft"
+      }
+    }
   }
 }

packages/app/metro.config.js

@@ -7,6 +7,10 @@ const projectRoot = __dirname;
 const monorepoRoot = path.resolve(projectRoot, "../..");
 const serverSrcRoot = path.resolve(projectRoot, "../server/src");
 const relaySrcRoot = path.resolve(projectRoot, "../relay/src");
+const customWebPlatform = (process.env.PASEO_WEB_PLATFORM ?? "")
+  .trim()
+  .replace(/^\./, "")
+  .toLowerCase();
 
 const config = getDefaultConfig(projectRoot);
 const defaultResolveRequest = config.resolver.resolveRequest ?? resolve;
@@ -25,6 +29,40 @@ config.resolver.nodeModulesPaths = Array.from(
   ])
 );
 
+function isLocalModuleImport(moduleName) {
+  return (
+    moduleName.startsWith("./") ||
+    moduleName.startsWith("../") ||
+    moduleName.startsWith("@/") ||
+    path.isAbsolute(moduleName)
+  );
+}
+
+function resolveWithCustomWebOverlay(context, moduleName, platform) {
+  const shouldResolveCustomWebVariant =
+    platform === "web" &&
+    customWebPlatform.length > 0 &&
+    customWebPlatform !== "web" &&
+    isLocalModuleImport(moduleName);
+
+  if (shouldResolveCustomWebVariant) {
+    const overlayContext = {
+      ...context,
+      // Resolve only "<custom-platform>.<ext>" variants in overlay mode.
+      sourceExts: context.sourceExts.map((ext) => `${customWebPlatform}.${ext}`),
+      preferNativePlatform: false,
+    };
+
+    try {
+      return defaultResolveRequest(overlayContext, moduleName, null);
+    } catch {
+      // Ignore overlay misses and continue with normal web resolution.
+    }
+  }
+
+  return defaultResolveRequest(context, moduleName, platform);
+}
+
 config.resolver.resolveRequest = (context, moduleName, platform) => {
   const origin = context.originModulePath;
   if (
@@ -35,11 +73,11 @@ config.resolver.resolveRequest = (context, moduleName, platform) => {
     const tsModuleName = moduleName.replace(/\.js$/, ".ts");
     const candidatePath = path.resolve(path.dirname(origin), tsModuleName);
     if (fs.existsSync(candidatePath)) {
-      return defaultResolveRequest(context, tsModuleName, platform);
+      return resolveWithCustomWebOverlay(context, tsModuleName, platform);
     }
   }
 
-  return defaultResolveRequest(context, moduleName, platform);
+  return resolveWithCustomWebOverlay(context, moduleName, platform);
 };
 
 module.exports = config;

packages/app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@getpaseo/app",
   "main": "index.ts",
-  "version": "0.1.2",
+  "version": "0.1.16",
   "private": true,
   "scripts": {
     "start": "expo start",
@@ -14,6 +14,7 @@
     "ios": "expo run:ios",
     "ios:release": "expo run:ios --configuration Release",
     "web": "expo start --web",
+    "web:tauri": "PASEO_WEB_PLATFORM=tauri expo start --web",
     "lint": "expo lint",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
@@ -21,6 +22,7 @@
     "test:e2e:ui": "playwright test --ui",
     "build": "npm run build:web",
     "build:web": "expo export --platform web",
+    "build:web:tauri": "PASEO_WEB_PLATFORM=tauri expo export --platform web",
     "deploy:web": "npm run build:web && wrangler pages deploy dist --project-name paseo-app"
   },
   "dependencies": {
@@ -30,7 +32,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@expo/vector-icons": "^15.0.2",
     "@floating-ui/react-native": "^0.10.7",
-    "@getpaseo/server": "0.1.2",
+    "@getpaseo/server": "0.1.16",
     "@gorhom/bottom-sheet": "^5.2.6",
     "@gorhom/portal": "^1.0.14",
     "@lezer/common": "^1.5.0",
@@ -49,6 +51,8 @@
     "@react-navigation/native": "^7.1.8",
     "@tanstack/react-query": "^5.90.11",
     "@tauri-apps/api": "^2.9.1",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/xterm": "^6.0.0",
     "base64-js": "^1.5.1",
     "buffer": "^6.0.3",
     "expo": "^54.0.18",
@@ -75,6 +79,7 @@
     "expo-system-ui": "~6.0.7",
     "expo-updates": "~29.0.12",
     "expo-web-browser": "~15.0.8",
+    "lezer-elixir": "^1.1.2",
     "lucide-react-native": "^0.546.0",
     "mnemonic-id": "^3.2.7",
     "react": "19.1.0",

packages/app/src/app/+html.tsx

@@ -20,6 +20,22 @@ const webEcosystemStyles = /* css */ `
     -webkit-user-select: text;
     user-select: text;
   }
+
+  [data-testid="sidebar-agent-list-scroll"],
+  [data-testid="agent-chat-scroll"],
+  [data-testid="git-diff-scroll"],
+  [data-testid="file-explorer-tree-scroll"] {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  [data-testid="sidebar-agent-list-scroll"]::-webkit-scrollbar,
+  [data-testid="agent-chat-scroll"]::-webkit-scrollbar,
+  [data-testid="git-diff-scroll"]::-webkit-scrollbar,
+  [data-testid="file-explorer-tree-scroll"]::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
 `;
 
 function WebRespectfulStyleReset() {

packages/app/src/app/_layout.tsx

@@ -13,14 +13,13 @@ import { View, ActivityIndicator, Text } from "react-native";
 import { UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { darkTheme } from "@/styles/theme";
 import { DaemonRegistryProvider, useDaemonRegistry } from "@/contexts/daemon-registry-context";
-import { DaemonConnectionsProvider, useDaemonConnections } from "@/contexts/daemon-connections-context";
 import { MultiDaemonSessionHost } from "@/components/multi-daemon-session-host";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { useState, useEffect, type ReactNode, useMemo, useRef } from "react";
 import { Platform } from "react-native";
 import * as Linking from "expo-linking";
 import * as Notifications from "expo-notifications";
-import { SlidingSidebar } from "@/components/sliding-sidebar";
+import { LeftSidebar } from "@/components/left-sidebar";
 import { DownloadToast } from "@/components/download-toast";
 import { ToastProvider } from "@/contexts/toast-context";
 import { usePanelStore } from "@/stores/panel-store";
@@ -36,15 +35,34 @@ import {
 import { getIsTauri, getIsTauriMac } from "@/constants/layout";
 import { useTrafficLightPadding } from "@/utils/tauri-window";
 import { CommandCenter } from "@/components/command-center";
-import { useGlobalKeyboardNav } from "@/hooks/use-global-keyboard-nav";
+import { KeyboardShortcutsDialog } from "@/components/keyboard-shortcuts-dialog";
+import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
 import { queryClient } from "@/query/query-client";
 import {
   WEB_NOTIFICATION_CLICK_EVENT,
   type WebNotificationClickDetail,
+  ensureOsNotificationPermission,
 } from "@/utils/os-notifications";
 import { buildNotificationRoute } from "@/utils/notification-routing";
+import {
+  buildHostAgentDraftRoute,
+  parseHostAgentRouteFromPathname,
+} from "@/utils/host-routes";
+import { getTauri } from "@/utils/tauri";
+import { PerfDiagnosticsProvider } from "@/runtime/perf-diagnostics";
 
 polyfillCrypto();
+const IS_DEV = Boolean((globalThis as { __DEV__?: boolean }).__DEV__);
+
+function logLeftSidebarOpenGesture(
+  event: string,
+  details: Record<string, unknown>
+): void {
+  if (!IS_DEV) {
+    return;
+  }
+  console.log(`[LeftSidebarOpenGesture] ${event}`, details);
+}
 
 function PushNotificationRouter() {
   const router = useRouter();
@@ -52,6 +70,15 @@ function PushNotificationRouter() {
 
   useEffect(() => {
     if (Platform.OS === "web") {
+      if (getTauri()) {
+        void ensureOsNotificationPermission().then((granted) => {
+          console.log(
+            "[OSNotifications][Tauri] Startup permission preflight result:",
+            granted ? "granted" : "not-granted"
+          );
+        });
+      }
+
       const target = globalThis as unknown as EventTarget;
       const openFromWebClick = (event: Event) => {
         const customEvent = event as CustomEvent<WebNotificationClickDetail>;
@@ -140,8 +167,10 @@ function AppContainer({ children, selectedAgentId }: AppContainerProps) {
       ? mobileView === "agent-list"
       : desktopAgentListOpen
     : false;
+  const openGestureEnabled =
+    chromeEnabled && isMobile && mobileView === "agent";
 
-  useGlobalKeyboardNav({
+  useKeyboardShortcuts({
     enabled: chromeEnabled,
     isMobile,
     toggleAgentList,
@@ -165,7 +194,7 @@ function AppContainer({ children, selectedAgentId }: AppContainerProps) {
   const openGesture = useMemo(
     () =>
       Gesture.Pan()
-        .enabled(chromeEnabled && isMobile && !isOpen)
+        .enabled(openGestureEnabled)
         .manualActivation(true)
         // Fail if 10px vertical movement happens first (allow vertical scroll)
         .failOffsetY([-10, 10])
@@ -194,6 +223,10 @@ function AppContainer({ children, selectedAgentId }: AppContainerProps) {
         })
         .onStart(() => {
           isGesturing.value = true;
+          runOnJS(logLeftSidebarOpenGesture)("start", {
+            mobileView,
+            openGestureEnabled,
+          });
         })
         .onUpdate((event) => {
           // Start from closed position (-windowWidth) and move towards 0
@@ -210,6 +243,13 @@ function AppContainer({ children, selectedAgentId }: AppContainerProps) {
           isGesturing.value = false;
           // Open if dragged more than 1/3 of sidebar or fast swipe
           const shouldOpen = event.translationX > windowWidth / 3 || event.velocityX > 500;
+          runOnJS(logLeftSidebarOpenGesture)("end", {
+            translationX: event.translationX,
+            velocityX: event.velocityX,
+            shouldOpen,
+            mobileView,
+            openGestureEnabled,
+          });
           if (shouldOpen) {
             animateToOpen();
             runOnJS(openAgentList)();
@@ -221,15 +261,14 @@ function AppContainer({ children, selectedAgentId }: AppContainerProps) {
           isGesturing.value = false;
         }),
     [
-      chromeEnabled,
-      isMobile,
-      isOpen,
+      openGestureEnabled,
       windowWidth,
       translateX,
       backdropOpacity,
       animateToOpen,
       animateToClose,
       openAgentList,
+      mobileView,
       isGesturing,
       horizontalScroll?.isAnyScrolledRight,
       touchStartX,
@@ -243,14 +282,15 @@ function AppContainer({ children, selectedAgentId }: AppContainerProps) {
   const content = (
     <View style={{ flex: 1, backgroundColor: theme.colors.surface0 }}>
       <View style={{ flex: 1, flexDirection: "row" }}>
-        {!isMobile && chromeEnabled && <SlidingSidebar selectedAgentId={selectedAgentId} />}
+        {!isMobile && chromeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
         <View style={{ flex: 1, paddingLeft: needsTrafficLightPadding ? trafficLightPadding.left : 0 }}>
           {children}
         </View>
       </View>
-      {isMobile && chromeEnabled && <SlidingSidebar selectedAgentId={selectedAgentId} />}
+      {isMobile && chromeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
       <DownloadToast />
       <CommandCenter />
+      <KeyboardShortcutsDialog />
     </View>
   );
 
@@ -268,53 +308,8 @@ function AppContainer({ children, selectedAgentId }: AppContainerProps) {
 function ProvidersWrapper({ children }: { children: ReactNode }) {
   const { settings, isLoading: settingsLoading } = useAppSettings();
   const { daemons, isLoading: registryLoading, upsertDaemonFromOfferUrl } = useDaemonRegistry();
-  const { connectionStates } = useDaemonConnections();
   const isLoading = settingsLoading || registryLoading;
 
-  const isInitialConnectionPending = useMemo(() => {
-    if (daemons.length === 0) return false;
-    return daemons.some((daemon) => {
-      const record = connectionStates.get(daemon.serverId);
-      if (!record) return true;
-      if (record.hasEverReceivedAgentList) return false;
-      return (
-        record.status === "idle" ||
-        record.status === "connecting" ||
-        (record.status === "online" && !record.agentListReady)
-      );
-    });
-  }, [daemons, connectionStates]);
-
-  const [connectionTimedOut, setConnectionTimedOut] = useState(false);
-
-  useEffect(() => {
-    if (!isInitialConnectionPending) {
-      setConnectionTimedOut(false);
-      return;
-    }
-    const timer = setTimeout(() => setConnectionTimedOut(true), 5000);
-    return () => clearTimeout(timer);
-  }, [isInitialConnectionPending]);
-
-  const connectingMessage = useMemo(() => {
-    if (!isInitialConnectionPending) return null;
-    const pending = daemons.filter((daemon) => {
-      const record = connectionStates.get(daemon.serverId);
-      if (!record) return true;
-      if (record.hasEverReceivedAgentList) return false;
-      return (
-        record.status === "idle" ||
-        record.status === "connecting" ||
-        (record.status === "online" && !record.agentListReady)
-      );
-    });
-    if (pending.length === 1) {
-      const label = pending[0].label?.trim();
-      return label ? `Connecting to ${label}...` : "Connecting...";
-    }
-    return "Connecting...";
-  }, [isInitialConnectionPending, daemons, connectionStates]);
-
   // Apply theme setting on mount and when it changes
   useEffect(() => {
     if (isLoading) return;
@@ -330,10 +325,6 @@ function ProvidersWrapper({ children }: { children: ReactNode }) {
     return <LoadingView />;
   }
 
-  if (connectingMessage && !connectionTimedOut) {
-    return <LoadingView message={connectingMessage} />;
-  }
-
   return (
     <VoiceProvider>
       <OfferLinkListener upsertDaemonFromOfferUrl={upsertDaemonFromOfferUrl} />
@@ -359,7 +350,7 @@ function OfferLinkListener({
           if (cancelled) return;
           const serverId = (profile as any)?.serverId;
           if (typeof serverId !== "string" || !serverId) return;
-          router.replace({ pathname: "/", params: { serverId } });
+          router.replace(buildHostAgentDraftRoute(serverId) as any);
         })
         .catch((error) => {
           if (cancelled) return;
@@ -389,13 +380,8 @@ function AppWithSidebar({ children }: { children: ReactNode }) {
   // Parse selectedAgentKey directly from pathname
   // useLocalSearchParams doesn't update when navigating between same-pattern routes
   const selectedAgentKey = useMemo(() => {
-    // Match /agent/[serverId]/[agentId] pattern
-    const match = pathname.match(/^\/agent\/([^/]+)\/([^/]+)\/?$/);
-    if (match) {
-      const [, serverId, agentId] = match;
-      return `${serverId}:${agentId}`;
-    }
-    return undefined;
+    const match = parseHostAgentRouteFromPathname(pathname);
+    return match ? `${match.serverId}:${match.agentId}` : undefined;
   }, [pathname]);
 
   return (
@@ -457,13 +443,13 @@ function MissingDaemonView() {
 export default function RootLayout() {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <PortalProvider>
-        <SafeAreaProvider>
-          <KeyboardProvider>
-            <BottomSheetModalProvider>
-              <QueryProvider>
-                <DaemonRegistryProvider>
-                  <DaemonConnectionsProvider>
+      <PerfDiagnosticsProvider scope="root_layout">
+        <PortalProvider>
+          <SafeAreaProvider>
+            <KeyboardProvider>
+              <BottomSheetModalProvider>
+                <QueryProvider>
+                  <DaemonRegistryProvider>
                     <PushNotificationRouter />
                     <MultiDaemonSessionHost />
                     <ProvidersWrapper>
@@ -478,14 +464,14 @@ export default function RootLayout() {
                                 }}
                               >
                                 <Stack.Screen name="index" />
-                                <Stack.Screen name="agents" />
-                                <Stack.Screen name="agent" />
-                                <Stack.Screen name="agent/[id]" options={{ gestureEnabled: false }} />
                                 <Stack.Screen
-                                  name="agent/[serverId]/[agentId]"
+                                  name="h/[serverId]/agent/[agentId]"
                                   options={{ gestureEnabled: false }}
                                 />
-                                <Stack.Screen name="settings" />
+                                <Stack.Screen name="h/[serverId]/index" />
+                                <Stack.Screen name="h/[serverId]/agent/index" />
+                                <Stack.Screen name="h/[serverId]/agents" />
+                                <Stack.Screen name="h/[serverId]/settings" />
                                 <Stack.Screen name="pair-scan" />
                               </Stack>
                             </AppWithSidebar>
@@ -493,13 +479,13 @@ export default function RootLayout() {
                         </HorizontalScrollProvider>
                       </SidebarAnimationProvider>
                     </ProvidersWrapper>
-                  </DaemonConnectionsProvider>
-                </DaemonRegistryProvider>
-              </QueryProvider>
-            </BottomSheetModalProvider>
-          </KeyboardProvider>
-        </SafeAreaProvider>
-      </PortalProvider>
+                  </DaemonRegistryProvider>
+                </QueryProvider>
+              </BottomSheetModalProvider>
+            </KeyboardProvider>
+          </SafeAreaProvider>
+        </PortalProvider>
+      </PerfDiagnosticsProvider>
     </GestureHandlerRootView>
   );
 }

packages/app/src/app/agent/[id].tsx

@@ -1,8 +0,0 @@
-import { useLocalSearchParams } from "expo-router";
-import { LegacyAgentIdScreen } from "@/screens/agent/legacy-agent-id-screen";
-
-export default function LegacyAgentRoute() {
-  const { id } = useLocalSearchParams<{ id?: string }>();
-  return <LegacyAgentIdScreen agentId={typeof id === "string" ? id : ""} />;
-}
-

packages/app/src/app/agent/[serverId]/[agentId].tsx

@@ -1,16 +0,0 @@
-import { useLocalSearchParams } from "expo-router";
-import { AgentReadyScreen } from "@/screens/agent/agent-ready-screen";
-
-export default function AgentReadyRoute() {
-  const { serverId, agentId } = useLocalSearchParams<{
-    serverId?: string;
-    agentId?: string;
-  }>();
-
-  return (
-    <AgentReadyScreen
-      serverId={typeof serverId === "string" ? serverId : ""}
-      agentId={typeof agentId === "string" ? agentId : ""}
-    />
-  );
-}

packages/app/src/app/agent/index.tsx

@@ -1,6 +0,0 @@
-import { DraftAgentScreen } from "@/screens/agent/draft-agent-screen";
-
-export default function AgentDraftRoute() {
-  return <DraftAgentScreen />;
-}
-

packages/app/src/app/h/[serverId]/agent/[agentId].tsx

@@ -0,0 +1,17 @@
+import { useLocalSearchParams } from "expo-router";
+import { AgentReadyScreen } from "@/screens/agent/agent-ready-screen";
+
+export default function HostAgentReadyRoute() {
+  const params = useLocalSearchParams<{
+    serverId?: string;
+    agentId?: string;
+  }>();
+
+  return (
+    <AgentReadyScreen
+      serverId={typeof params.serverId === "string" ? params.serverId : ""}
+      agentId={typeof params.agentId === "string" ? params.agentId : ""}
+    />
+  );
+}
+

packages/app/src/app/h/[serverId]/agent/index.tsx

@@ -0,0 +1,10 @@
+import { useLocalSearchParams } from "expo-router";
+import { DraftAgentScreen } from "@/screens/agent/draft-agent-screen";
+
+export default function HostDraftAgentRoute() {
+  const params = useLocalSearchParams<{ serverId?: string }>();
+  const serverId = typeof params.serverId === "string" ? params.serverId : "";
+
+  return <DraftAgentScreen forcedServerId={serverId} />;
+}
+

packages/app/src/app/h/[serverId]/agents.tsx

@@ -0,0 +1,9 @@
+import { useLocalSearchParams } from "expo-router";
+import { AgentsScreen } from "@/screens/agents-screen";
+
+export default function HostAgentsRoute() {
+  const params = useLocalSearchParams<{ serverId?: string }>();
+  const serverId = typeof params.serverId === "string" ? params.serverId : "";
+
+  return <AgentsScreen serverId={serverId} />;
+}

packages/app/src/app/h/[serverId]/index.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { buildHostAgentDraftRoute } from "@/utils/host-routes";
+
+export default function HostIndexRoute() {
+  const router = useRouter();
+  const params = useLocalSearchParams<{ serverId?: string }>();
+  const serverId = typeof params.serverId === "string" ? params.serverId : "";
+
+  useEffect(() => {
+    if (!serverId) {
+      return;
+    }
+    router.replace(buildHostAgentDraftRoute(serverId) as any);
+  }, [router, serverId]);
+
+  return null;
+}
+

packages/app/src/app/h/[serverId]/settings.tsx

@@ -0,0 +1,3 @@
+import SettingsScreen from "@/screens/settings-screen";
+
+export default SettingsScreen;

packages/app/src/app/index.tsx

@@ -1,5 +1,59 @@
+import { useEffect, useMemo } from "react";
+import { ActivityIndicator, View } from "react-native";
+import { useRouter } from "expo-router";
+import { useUnistyles } from "react-native-unistyles";
 import { DraftAgentScreen } from "@/screens/agent/draft-agent-screen";
+import { useDaemonRegistry } from "@/contexts/daemon-registry-context";
+import { useFormPreferences } from "@/hooks/use-form-preferences";
+import { buildHostAgentDraftRoute } from "@/utils/host-routes";
 
 export default function Index() {
-  return <DraftAgentScreen />;
+  const router = useRouter();
+  const { theme } = useUnistyles();
+  const { daemons, isLoading: registryLoading } = useDaemonRegistry();
+  const { preferences, isLoading: preferencesLoading } = useFormPreferences();
+
+  const targetServerId = useMemo(() => {
+    if (daemons.length === 0) {
+      return null;
+    }
+    if (preferences.serverId) {
+      const match = daemons.find((daemon) => daemon.serverId === preferences.serverId);
+      if (match) {
+        return match.serverId;
+      }
+    }
+    return daemons[0]?.serverId ?? null;
+  }, [daemons, preferences.serverId]);
+
+  useEffect(() => {
+    if (registryLoading || preferencesLoading) {
+      return;
+    }
+    if (!targetServerId) {
+      return;
+    }
+    router.replace(buildHostAgentDraftRoute(targetServerId) as any);
+  }, [preferencesLoading, registryLoading, router, targetServerId]);
+
+  if (registryLoading || preferencesLoading) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: theme.colors.surface0,
+        }}
+      >
+        <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
+      </View>
+    );
+  }
+
+  if (!targetServerId) {
+    return <DraftAgentScreen />;
+  }
+
+  return null;
 }

packages/app/src/app/pair-scan.tsx

@@ -11,6 +11,10 @@ import { NameHostModal } from "@/components/name-host-modal";
 import { decodeOfferFragmentPayload, normalizeHostPort } from "@/utils/daemon-endpoints";
 import { probeConnection } from "@/utils/test-daemon-connection";
 import { ConnectionOfferSchema } from "@server/shared/connection-offer";
+import {
+  buildHostAgentDraftRoute,
+  buildHostSettingsRoute,
+} from "@/utils/host-routes";
 
 const styles = StyleSheet.create((theme) => ({
   container: {
@@ -138,8 +142,14 @@ export default function PairScanScreen() {
   const { theme } = useUnistyles();
   const insets = useSafeAreaInsets();
   const router = useRouter();
-  const params = useLocalSearchParams<{ source?: string; targetServerId?: string }>();
+  const params = useLocalSearchParams<{
+    source?: string;
+    sourceServerId?: string;
+    targetServerId?: string;
+  }>();
   const source = typeof params.source === "string" ? params.source : "settings";
+  const sourceServerId =
+    typeof params.sourceServerId === "string" ? params.sourceServerId : null;
   const targetServerId = typeof params.targetServerId === "string" ? params.targetServerId : null;
   const { daemons, upsertDaemonFromOfferUrl, updateHost } = useDaemonRegistry();
 
@@ -160,34 +170,47 @@ export default function PairScanScreen() {
   const returnToSource = useCallback(
     (serverId: string) => {
       if (source === "onboarding") {
-        router.replace({ pathname: "/", params: { serverId } });
+        router.replace(buildHostAgentDraftRoute(serverId) as any);
         return;
       }
       if (source === "editHost" && targetServerId) {
-        router.replace({ pathname: "/settings", params: { editHost: targetServerId } });
+        const settingsServerId = sourceServerId ?? targetServerId;
+        router.replace({
+          pathname: buildHostSettingsRoute(settingsServerId),
+          params: { editHost: targetServerId },
+        } as any);
         return;
       }
       // settings (default): return to previous screen
       try {
         router.back();
       } catch {
-        router.replace("/settings");
+        const settingsServerId = sourceServerId ?? serverId;
+        router.replace(buildHostSettingsRoute(settingsServerId) as any);
       }
     },
-    [router, source, targetServerId]
+    [router, source, sourceServerId, targetServerId]
   );
 
   const closeToSource = useCallback(() => {
     if (source === "editHost" && targetServerId) {
-      router.replace({ pathname: "/settings", params: { editHost: targetServerId } });
+      const settingsServerId = sourceServerId ?? targetServerId;
+      router.replace({
+        pathname: buildHostSettingsRoute(settingsServerId),
+        params: { editHost: targetServerId },
+      } as any);
       return;
     }
     try {
       router.back();
     } catch {
-      router.replace("/settings");
+      if (sourceServerId) {
+        router.replace(buildHostSettingsRoute(sourceServerId) as any);
+        return;
+      }
+      router.replace("/" as any);
     }
-  }, [router, source, targetServerId]);
+  }, [router, source, sourceServerId, targetServerId]);
 
   useEffect(() => {
     if (Platform.OS === "web") return;

packages/app/src/attachments/local-file-attachment-store.ts

@@ -0,0 +1,208 @@
+import * as FileSystem from "expo-file-system/legacy";
+import {
+  type AttachmentStore,
+  type AttachmentStorageType,
+  type AttachmentMetadata,
+  type SaveAttachmentInput,
+} from "@/attachments/types";
+import {
+  blobToBase64,
+  fileUriToPath,
+  generateAttachmentId,
+  getFileExtensionFromName,
+  normalizeMimeType,
+  parseDataUrl,
+  pathToFileUri,
+} from "@/attachments/utils";
+
+const IMAGE_EXTENSION_BY_MIME_TYPE: Record<string, string> = {
+  "image/png": ".png",
+  "image/jpeg": ".jpg",
+  "image/jpg": ".jpg",
+  "image/gif": ".gif",
+  "image/webp": ".webp",
+  "image/avif": ".avif",
+  "image/heic": ".heic",
+  "image/heif": ".heif",
+  "image/tiff": ".tiff",
+  "image/bmp": ".bmp",
+  "image/svg+xml": ".svg",
+};
+
+function extensionForAttachment(params: { fileName?: string | null; mimeType: string }): string {
+  const fromName = getFileExtensionFromName(params.fileName);
+  if (fromName) {
+    return fromName;
+  }
+  return IMAGE_EXTENSION_BY_MIME_TYPE[params.mimeType] ?? ".img";
+}
+
+async function ensureDirectory(uri: string): Promise<void> {
+  const info = await FileSystem.getInfoAsync(uri);
+  if (info.exists && info.isDirectory) {
+    return;
+  }
+  await FileSystem.makeDirectoryAsync(uri, { intermediates: true });
+}
+
+async function writeFromSource(input: {
+  source: SaveAttachmentInput["source"];
+  targetUri: string;
+  mimeType: string;
+}): Promise<void> {
+  if (input.source.kind === "file_uri") {
+    const from = pathToFileUri(input.source.uri);
+    if (from === input.targetUri) {
+      return;
+    }
+    await FileSystem.copyAsync({ from, to: input.targetUri });
+    return;
+  }
+
+  if (input.source.kind === "data_url") {
+    const parsed = parseDataUrl(input.source.dataUrl);
+    const mimeType = normalizeMimeType(parsed.mimeType || input.mimeType);
+    const base64 = parsed.base64;
+    await FileSystem.writeAsStringAsync(input.targetUri, base64, {
+      encoding: FileSystem.EncodingType.Base64,
+    });
+    if (mimeType !== input.mimeType) {
+      return;
+    }
+    return;
+  }
+
+  const base64 = await blobToBase64(input.source.blob);
+  await FileSystem.writeAsStringAsync(input.targetUri, base64, {
+    encoding: FileSystem.EncodingType.Base64,
+  });
+}
+
+function attachmentUri(metadata: AttachmentMetadata): string {
+  return pathToFileUri(metadata.storageKey);
+}
+
+export function createLocalFileAttachmentStore(params: {
+  storageType: Extract<AttachmentStorageType, "desktop-file" | "native-file">;
+  baseDirectoryName: string;
+  resolvePreviewUrl: (attachment: AttachmentMetadata) => Promise<string>;
+  releasePreviewUrl?: (input: {
+    attachment: AttachmentMetadata;
+    url: string;
+  }) => Promise<void>;
+}): AttachmentStore {
+  const baseDirectory = FileSystem.cacheDirectory
+    ? `${FileSystem.cacheDirectory}${params.baseDirectoryName}/`
+    : null;
+
+  async function resolveTarget(input: SaveAttachmentInput): Promise<{
+    id: string;
+    mimeType: string;
+    fileName: string | null;
+    createdAt: number;
+    targetUri: string;
+    storageKey: string;
+  }> {
+    if (!baseDirectory) {
+      throw new Error("expo-file-system cacheDirectory is unavailable.");
+    }
+
+    await ensureDirectory(baseDirectory);
+
+    const id = input.id ?? generateAttachmentId();
+    const mimeTypeFromSource =
+      input.source.kind === "data_url"
+        ? parseDataUrl(input.source.dataUrl).mimeType
+        : input.source.kind === "blob"
+          ? input.source.blob.type
+          : undefined;
+    const mimeType = normalizeMimeType(input.mimeType ?? mimeTypeFromSource);
+    const fileName = input.fileName ?? null;
+    const extension = extensionForAttachment({ fileName, mimeType });
+    const createdAt = Date.now();
+    const targetUri = `${baseDirectory}${id}${extension}`;
+    const storageKey = fileUriToPath(targetUri);
+
+    return {
+      id,
+      mimeType,
+      fileName,
+      createdAt,
+      targetUri,
+      storageKey,
+    };
+  }
+
+  return {
+    storageType: params.storageType,
+
+    async save(input): Promise<AttachmentMetadata> {
+      const target = await resolveTarget(input);
+      await writeFromSource({
+        source: input.source,
+        targetUri: target.targetUri,
+        mimeType: target.mimeType,
+      });
+
+      const info = await FileSystem.getInfoAsync(target.targetUri);
+      const byteSize =
+        info.exists && typeof (info as { size?: number }).size === "number"
+          ? (info as { size: number }).size
+          : null;
+      return {
+        id: target.id,
+        mimeType: target.mimeType,
+        storageType: params.storageType,
+        storageKey: target.storageKey,
+        fileName: target.fileName,
+        byteSize,
+        createdAt: target.createdAt,
+      };
+    },
+
+    async encodeBase64({ attachment }): Promise<string> {
+      const uri = attachmentUri(attachment);
+      return await FileSystem.readAsStringAsync(uri, {
+        encoding: FileSystem.EncodingType.Base64,
+      });
+    },
+
+    async resolvePreviewUrl({ attachment }): Promise<string> {
+      return await params.resolvePreviewUrl(attachment);
+    },
+
+    ...(params.releasePreviewUrl
+      ? {
+          async releasePreviewUrl(input: {
+            attachment: AttachmentMetadata;
+            url: string;
+          }): Promise<void> {
+            await params.releasePreviewUrl?.(input);
+          },
+        }
+      : {}),
+
+    async delete({ attachment }): Promise<void> {
+      await FileSystem.deleteAsync(attachmentUri(attachment), { idempotent: true });
+    },
+
+    async garbageCollect({ referencedIds }): Promise<void> {
+      if (!baseDirectory) {
+        return;
+      }
+      await ensureDirectory(baseDirectory);
+      const entries = await FileSystem.readDirectoryAsync(baseDirectory);
+      await Promise.all(
+        entries.map(async (entryName) => {
+          const id = entryName.split(".", 1)[0] ?? "";
+          if (!id || referencedIds.has(id)) {
+            return;
+          }
+          await FileSystem.deleteAsync(`${baseDirectory}${entryName}`, {
+            idempotent: true,
+          });
+        })
+      );
+    },
+  };
+}

packages/app/src/attachments/native/native-file-attachment-store.ts

@@ -0,0 +1,17 @@
+import { createLocalFileAttachmentStore } from "@/attachments/local-file-attachment-store";
+
+export function createNativeFileAttachmentStore() {
+  return createLocalFileAttachmentStore({
+    storageType: "native-file",
+    baseDirectoryName: "paseo-native-attachments",
+    resolvePreviewUrl: async (attachment) => {
+      if (attachment.storageKey.startsWith("file://")) {
+        return attachment.storageKey;
+      }
+      if (attachment.storageKey.startsWith("/")) {
+        return `file://${attachment.storageKey}`;
+      }
+      return attachment.storageKey;
+    },
+  });
+}

packages/app/src/attachments/service.ts

@@ -0,0 +1,125 @@
+import type { AttachmentMetadata } from "@/attachments/types";
+import { getAttachmentStore } from "@/attachments/store";
+
+export async function persistAttachmentFromBlob(input: {
+  blob: Blob;
+  mimeType?: string;
+  fileName?: string | null;
+  id?: string;
+}): Promise<AttachmentMetadata> {
+  const store = await getAttachmentStore();
+  return await store.save({
+    id: input.id,
+    mimeType: input.mimeType,
+    fileName: input.fileName,
+    source: { kind: "blob", blob: input.blob },
+  });
+}
+
+export async function persistAttachmentFromDataUrl(input: {
+  dataUrl: string;
+  mimeType?: string;
+  fileName?: string | null;
+  id?: string;
+}): Promise<AttachmentMetadata> {
+  const store = await getAttachmentStore();
+  return await store.save({
+    id: input.id,
+    mimeType: input.mimeType,
+    fileName: input.fileName,
+    source: { kind: "data_url", dataUrl: input.dataUrl },
+  });
+}
+
+export async function persistAttachmentFromFileUri(input: {
+  uri: string;
+  mimeType?: string;
+  fileName?: string | null;
+  id?: string;
+}): Promise<AttachmentMetadata> {
+  const store = await getAttachmentStore();
+  return await store.save({
+    id: input.id,
+    mimeType: input.mimeType,
+    fileName: input.fileName,
+    source: { kind: "file_uri", uri: input.uri },
+  });
+}
+
+export async function encodeAttachmentsForSend(
+  attachments: readonly AttachmentMetadata[] | undefined
+): Promise<Array<{ data: string; mimeType: string }> | undefined> {
+  if (!attachments || attachments.length === 0) {
+    return undefined;
+  }
+
+  const store = await getAttachmentStore();
+  const encoded = await Promise.all(
+    attachments.map(async (attachment) => {
+      try {
+        const data = await store.encodeBase64({ attachment });
+        return {
+          data,
+          mimeType: attachment.mimeType,
+        };
+      } catch (error) {
+        console.error("[attachments] Failed to encode attachment for send", {
+          id: attachment.id,
+          error,
+        });
+        return null;
+      }
+    })
+  );
+
+  const valid = encoded.filter(
+    (entry): entry is { data: string; mimeType: string } => entry !== null
+  );
+  return valid.length > 0 ? valid : undefined;
+}
+
+export async function resolveAttachmentPreviewUrl(
+  attachment: AttachmentMetadata
+): Promise<string> {
+  const store = await getAttachmentStore();
+  return await store.resolvePreviewUrl({ attachment });
+}
+
+export async function releaseAttachmentPreviewUrl(input: {
+  attachment: AttachmentMetadata;
+  url: string;
+}): Promise<void> {
+  const store = await getAttachmentStore();
+  if (!store.releasePreviewUrl) {
+    return;
+  }
+  await store.releasePreviewUrl({ attachment: input.attachment, url: input.url });
+}
+
+export async function deleteAttachments(
+  attachments: readonly AttachmentMetadata[] | undefined
+): Promise<void> {
+  if (!attachments || attachments.length === 0) {
+    return;
+  }
+  const store = await getAttachmentStore();
+  await Promise.all(
+    attachments.map(async (attachment) => {
+      try {
+        await store.delete({ attachment });
+      } catch (error) {
+        console.warn("[attachments] Failed to delete attachment", {
+          id: attachment.id,
+          error,
+        });
+      }
+    })
+  );
+}
+
+export async function garbageCollectAttachments(input: {
+  referencedIds: ReadonlySet<string>;
+}): Promise<void> {
+  const store = await getAttachmentStore();
+  await store.garbageCollect({ referencedIds: input.referencedIds });
+}

packages/app/src/attachments/store.ts

@@ -0,0 +1,38 @@
+import { Platform } from "react-native";
+import { isTauriEnvironment } from "@/utils/tauri";
+import type { AttachmentStore } from "@/attachments/types";
+
+let attachmentStorePromise: Promise<AttachmentStore> | null = null;
+
+async function createAttachmentStore(): Promise<AttachmentStore> {
+  if (Platform.OS === "web") {
+    if (isTauriEnvironment()) {
+      const { createDesktopAttachmentStore } = await import(
+        "@/desktop/attachments/desktop-attachment-store"
+      );
+      return createDesktopAttachmentStore();
+    }
+
+    const { createIndexedDbAttachmentStore } = await import(
+      "@/attachments/web/indexeddb-attachment-store"
+    );
+    return createIndexedDbAttachmentStore();
+  }
+
+  const { createNativeFileAttachmentStore } = await import(
+    "@/attachments/native/native-file-attachment-store"
+  );
+  return createNativeFileAttachmentStore();
+}
+
+export async function getAttachmentStore(): Promise<AttachmentStore> {
+  if (!attachmentStorePromise) {
+    attachmentStorePromise = createAttachmentStore();
+  }
+  return await attachmentStorePromise;
+}
+
+/** Test-only hook to inject a deterministic store implementation. */
+export function __setAttachmentStoreForTests(store: AttachmentStore | null): void {
+  attachmentStorePromise = store ? Promise.resolve(store) : null;
+}

packages/app/src/attachments/types.ts

@@ -0,0 +1,63 @@
+export type AttachmentStorageType = "web-indexeddb" | "desktop-file" | "native-file";
+
+export interface AttachmentMetadata {
+  id: string;
+  mimeType: string;
+  storageType: AttachmentStorageType;
+  /**
+   * Platform-specific location key.
+   * - web-indexeddb: object store key
+   * - desktop-file/native-file: absolute file path without preview URL indirection
+   */
+  storageKey: string;
+  fileName?: string | null;
+  byteSize?: number | null;
+  createdAt: number;
+}
+
+export type AttachmentDataSource =
+  | { kind: "blob"; blob: Blob }
+  | { kind: "data_url"; dataUrl: string }
+  | { kind: "file_uri"; uri: string };
+
+export interface SaveAttachmentInput {
+  id?: string;
+  mimeType?: string;
+  fileName?: string | null;
+  source: AttachmentDataSource;
+}
+
+export interface ResolvePreviewUrlInput {
+  attachment: AttachmentMetadata;
+}
+
+export interface ReleasePreviewUrlInput {
+  attachment: AttachmentMetadata;
+  url: string;
+}
+
+export interface EncodeAttachmentInput {
+  attachment: AttachmentMetadata;
+}
+
+export interface DeleteAttachmentInput {
+  attachment: AttachmentMetadata;
+}
+
+export interface GarbageCollectInput {
+  referencedIds: ReadonlySet<string>;
+}
+
+/**
+ * Async storage contract for attachment bytes.
+ * Metadata is persisted in drafts/messages; bytes live in platform stores.
+ */
+export interface AttachmentStore {
+  readonly storageType: AttachmentStorageType;
+  save(input: SaveAttachmentInput): Promise<AttachmentMetadata>;
+  encodeBase64(input: EncodeAttachmentInput): Promise<string>;
+  resolvePreviewUrl(input: ResolvePreviewUrlInput): Promise<string>;
+  releasePreviewUrl?(input: ReleasePreviewUrlInput): Promise<void>;
+  delete(input: DeleteAttachmentInput): Promise<void>;
+  garbageCollect(input: GarbageCollectInput): Promise<void>;
+}

packages/app/src/attachments/use-attachment-preview-url.ts

@@ -0,0 +1,63 @@
+import { useEffect, useRef, useState } from "react";
+import type { AttachmentMetadata } from "@/attachments/types";
+import {
+  releaseAttachmentPreviewUrl,
+  resolveAttachmentPreviewUrl,
+} from "@/attachments/service";
+
+export function useAttachmentPreviewUrl(
+  attachment: AttachmentMetadata | null | undefined
+): string | null {
+  const [url, setUrl] = useState<string | null>(null);
+  const activeAttachmentRef = useRef<AttachmentMetadata | null>(null);
+
+  useEffect(() => {
+    let disposed = false;
+    let currentUrl: string | null = null;
+
+    activeAttachmentRef.current = attachment ?? null;
+    if (!attachment) {
+      setUrl(null);
+      return;
+    }
+
+    void (async () => {
+      try {
+        const resolved = await resolveAttachmentPreviewUrl(attachment);
+        if (disposed) {
+          await releaseAttachmentPreviewUrl({ attachment, url: resolved });
+          return;
+        }
+        currentUrl = resolved;
+        setUrl(resolved);
+      } catch (error) {
+        console.error("[attachments] Failed to resolve preview URL", {
+          attachmentId: attachment.id,
+          error,
+        });
+        if (!disposed) {
+          setUrl(null);
+        }
+      }
+    })();
+
+    return () => {
+      disposed = true;
+      const activeAttachment = activeAttachmentRef.current;
+      if (!currentUrl || !activeAttachment) {
+        return;
+      }
+      void releaseAttachmentPreviewUrl({
+        attachment: activeAttachment,
+        url: currentUrl,
+      });
+    };
+  }, [
+    attachment?.id,
+    attachment?.storageType,
+    attachment?.storageKey,
+    attachment?.mimeType,
+  ]);
+
+  return url;
+}

packages/app/src/attachments/utils.ts

@@ -0,0 +1,78 @@
+import { generateMessageId } from "@/types/stream";
+
+export function generateAttachmentId(): string {
+  return `att_${generateMessageId()}`;
+}
+
+export function normalizeMimeType(input: string | undefined | null): string {
+  if (!input) {
+    return "image/jpeg";
+  }
+  const trimmed = input.trim();
+  return trimmed.length > 0 ? trimmed : "image/jpeg";
+}
+
+export function parseDataUrl(dataUrl: string): { mimeType: string; base64: string } {
+  const match = /^data:([^;,]+)?;base64,(.+)$/i.exec(dataUrl);
+  if (!match) {
+    throw new Error("Malformed data URL for attachment.");
+  }
+  const [, mimeTypeRaw, base64] = match;
+  if (!base64) {
+    throw new Error("Attachment data URL is missing base64 payload.");
+  }
+  return {
+    mimeType: normalizeMimeType(mimeTypeRaw),
+    base64,
+  };
+}
+
+export async function blobToBase64(blob: Blob): Promise<string> {
+  return await new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result !== "string") {
+        reject(new Error("Unexpected FileReader result while encoding attachment."));
+        return;
+      }
+      const payload = reader.result.split(",", 2)[1];
+      if (!payload) {
+        reject(new Error("Attachment FileReader result did not contain base64 payload."));
+        return;
+      }
+      resolve(payload);
+    };
+    reader.onerror = () => {
+      reject(reader.error ?? new Error("Failed to read attachment blob."));
+    };
+    reader.readAsDataURL(blob);
+  });
+}
+
+export function pathToFileUri(path: string): string {
+  if (path.startsWith("file://")) {
+    return path;
+  }
+  if (path.startsWith("/")) {
+    return `file://${path}`;
+  }
+  return path;
+}
+
+export function fileUriToPath(uri: string): string {
+  if (!uri.startsWith("file://")) {
+    return uri;
+  }
+  return decodeURIComponent(uri.replace(/^file:\/\//, ""));
+}
+
+export function getFileExtensionFromName(fileName: string | null | undefined): string {
+  if (!fileName) {
+    return "";
+  }
+  const idx = fileName.lastIndexOf(".");
+  if (idx <= 0 || idx === fileName.length - 1) {
+    return "";
+  }
+  return fileName.slice(idx);
+}

packages/app/src/attachments/web/indexeddb-attachment-store.ts

@@ -0,0 +1,213 @@
+import {
+  type AttachmentStore,
+  type AttachmentMetadata,
+  type SaveAttachmentInput,
+} from "@/attachments/types";
+import {
+  blobToBase64,
+  generateAttachmentId,
+  normalizeMimeType,
+  parseDataUrl,
+} from "@/attachments/utils";
+
+type StoredBlobRecord = {
+  id: string;
+  blob: Blob;
+  createdAt: number;
+  fileName: string | null;
+};
+
+const DB_NAME = "paseo-attachment-bytes";
+const STORE_NAME = "attachments";
+const DB_VERSION = 1;
+
+function ensureIndexedDb(): IDBFactory {
+  const idb = globalThis.indexedDB;
+  if (!idb) {
+    throw new Error("IndexedDB is unavailable in this runtime.");
+  }
+  return idb;
+}
+
+function openAttachmentDb(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = ensureIndexedDb().open(DB_NAME, DB_VERSION);
+
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, { keyPath: "id" });
+      }
+    };
+
+    request.onsuccess = () => {
+      resolve(request.result);
+    };
+
+    request.onerror = () => {
+      reject(request.error ?? new Error("Failed to open attachment IndexedDB."));
+    };
+  });
+}
+
+function runTx<T>(
+  db: IDBDatabase,
+  mode: IDBTransactionMode,
+  run: (store: IDBObjectStore) => IDBRequest<T>
+): Promise<T> {
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(STORE_NAME, mode);
+    const store = transaction.objectStore(STORE_NAME);
+    const request = run(store);
+
+    request.onsuccess = () => {
+      resolve(request.result as T);
+    };
+
+    request.onerror = () => {
+      reject(request.error ?? new Error("IndexedDB transaction request failed."));
+    };
+
+    transaction.onerror = () => {
+      reject(transaction.error ?? new Error("IndexedDB transaction failed."));
+    };
+  });
+}
+
+async function sourceToBlob(input: SaveAttachmentInput): Promise<{ blob: Blob; mimeType: string }> {
+  const source = input.source;
+  if (source.kind === "blob") {
+    const mimeType = normalizeMimeType(input.mimeType ?? source.blob.type);
+    const blob = source.blob.type === mimeType ? source.blob : source.blob.slice(0, source.blob.size, mimeType);
+    return { blob, mimeType };
+  }
+
+  if (source.kind === "data_url") {
+    const parsed = parseDataUrl(source.dataUrl);
+    const response = await fetch(source.dataUrl);
+    const blob = await response.blob();
+    const mimeType = normalizeMimeType(input.mimeType ?? parsed.mimeType ?? blob.type);
+    return {
+      blob: blob.type === mimeType ? blob : blob.slice(0, blob.size, mimeType),
+      mimeType,
+    };
+  }
+
+  const response = await fetch(source.uri);
+  const blob = await response.blob();
+  const mimeType = normalizeMimeType(input.mimeType ?? blob.type);
+  return {
+    blob: blob.type === mimeType ? blob : blob.slice(0, blob.size, mimeType),
+    mimeType,
+  };
+}
+
+async function loadBlob(db: IDBDatabase, id: string): Promise<Blob> {
+  const record = await runTx<StoredBlobRecord | undefined>(db, "readonly", (store) =>
+    store.get(id)
+  );
+  if (!record?.blob) {
+    throw new Error(`Attachment ${id} was not found in IndexedDB.`);
+  }
+  return record.blob;
+}
+
+export function createIndexedDbAttachmentStore(): AttachmentStore {
+  return {
+    storageType: "web-indexeddb",
+
+    async save(input): Promise<AttachmentMetadata> {
+      const id = input.id ?? generateAttachmentId();
+      const createdAt = Date.now();
+      const { blob, mimeType } = await sourceToBlob(input);
+      const fileName = input.fileName ?? null;
+      const db = await openAttachmentDb();
+
+      try {
+        await runTx(db, "readwrite", (store) =>
+          store.put({ id, blob, createdAt, fileName } satisfies StoredBlobRecord)
+        );
+      } finally {
+        db.close();
+      }
+
+      return {
+        id,
+        mimeType,
+        storageType: "web-indexeddb",
+        storageKey: id,
+        fileName,
+        byteSize: blob.size,
+        createdAt,
+      };
+    },
+
+    async encodeBase64({ attachment }): Promise<string> {
+      const db = await openAttachmentDb();
+      try {
+        const blob = await loadBlob(db, attachment.storageKey);
+        return await blobToBase64(blob);
+      } finally {
+        db.close();
+      }
+    },
+
+    async resolvePreviewUrl({ attachment }): Promise<string> {
+      const db = await openAttachmentDb();
+      try {
+        const blob = await loadBlob(db, attachment.storageKey);
+        return URL.createObjectURL(blob);
+      } finally {
+        db.close();
+      }
+    },
+
+    async releasePreviewUrl({ url }): Promise<void> {
+      URL.revokeObjectURL(url);
+    },
+
+    async delete({ attachment }): Promise<void> {
+      const db = await openAttachmentDb();
+      try {
+        await runTx(db, "readwrite", (store) => store.delete(attachment.storageKey));
+      } finally {
+        db.close();
+      }
+    },
+
+    async garbageCollect({ referencedIds }): Promise<void> {
+      const db = await openAttachmentDb();
+      try {
+        await new Promise<void>((resolve, reject) => {
+          const tx = db.transaction(STORE_NAME, "readwrite");
+          const store = tx.objectStore(STORE_NAME);
+          const cursorRequest = store.openCursor();
+
+          cursorRequest.onerror = () => {
+            reject(cursorRequest.error ?? new Error("Failed to iterate IndexedDB attachment store."));
+          };
+
+          cursorRequest.onsuccess = () => {
+            const cursor = cursorRequest.result;
+            if (!cursor) {
+              resolve();
+              return;
+            }
+
+            const key = String(cursor.key);
+            if (!referencedIds.has(key)) {
+              cursor.delete();
+            }
+            cursor.continue();
+          };
+
+          tx.onerror = () => {
+            reject(tx.error ?? new Error("Failed to garbage collect IndexedDB attachments."));
+          };
+        });
+      } finally {
+        db.close();
+      }
+    },
+  };
+}

packages/app/src/components/agent-form/agent-form-dropdowns.tsx

@@ -97,7 +97,7 @@ export function DropdownField({
         >
           {value || placeholder}
         </Text>
-        <ChevronDown size={16} color={defaultTheme.colors.foregroundMuted} />
+        <ChevronDown size={defaultTheme.iconSize.md} color={defaultTheme.colors.foregroundMuted} />
       </Pressable>
       {errorMessage ? <Text style={styles.errorText}>{errorMessage}</Text> : null}
       {warningMessage ? <Text style={styles.warningText}>{warningMessage}</Text> : null}
@@ -196,7 +196,7 @@ export function SelectField({
             {value || placeholder || "Select..."}
           </Text>
         </View>
-        <ChevronRight size={20} color={defaultTheme.colors.foregroundMuted} />
+        <ChevronRight size={defaultTheme.iconSize.lg} color={defaultTheme.colors.foregroundMuted} />
       </Pressable>
       {errorMessage ? <Text style={styles.errorText}>{errorMessage}</Text> : null}
       {warningMessage ? <Text style={styles.warningText}>{warningMessage}</Text> : null}
@@ -289,7 +289,7 @@ export function DropdownSheet({
           hitSlop={10}
           testID="dropdown-sheet-close"
         >
-          <X size={18} color={defaultTheme.colors.foregroundMuted} />
+          <X size={defaultTheme.iconSize.md} color={defaultTheme.colors.foregroundMuted} />
         </Pressable>
       </View>
       <BottomSheetScrollView
@@ -343,7 +343,8 @@ export function ComboSelect({
   const anchorRef = useRef<View>(null);
 
   const selectedOption = options.find((opt) => opt.id === value);
-  const displayValue = selectedOption?.label ?? (value || "");
+  const displayValue = selectedOption?.label ?? "";
+  const isEmpty = options.length === 0;
 
   const handleOpen = useCallback(() => setIsOpen(true), []);
   const handleOpenChange = useCallback((open: boolean) => setIsOpen(open), []);
@@ -355,7 +356,7 @@ export function ComboSelect({
         value={displayValue}
         placeholder={placeholder}
         onPress={handleOpen}
-        disabled={disabled}
+        disabled={disabled || isEmpty}
         isLoading={isLoading}
         controlRef={anchorRef}
         icon={icon}
@@ -476,7 +477,7 @@ export function FormSelectTrigger({
           </Text>
         )}
       </View>
-      <ChevronDown size={16} color={defaultTheme.colors.foregroundMuted} />
+      <ChevronDown size={defaultTheme.iconSize.md} color={defaultTheme.colors.foregroundMuted} />
     </Pressable>
   );
 }
@@ -567,10 +568,10 @@ export function AgentConfigRow({
           title="Select provider"
           value={selectedProvider}
           options={providerOptions}
-          placeholder="Select..."
-          disabled={disabled}
+          placeholder={providerOptions.length > 0 ? "Select..." : "No providers available"}
+          disabled={disabled || providerOptions.length === 0}
           onSelect={onSelectProvider}
-          icon={<Bot size={16} color={defaultTheme.colors.foregroundMuted} />}
+          icon={<Bot size={defaultTheme.iconSize.md} color={defaultTheme.colors.foregroundMuted} />}
           showLabel={false}
         />
       </View>
@@ -584,7 +585,7 @@ export function AgentConfigRow({
           disabled={disabled}
           isLoading={isModelLoading}
           onSelect={onSelectModel}
-          icon={<Brain size={16} color={defaultTheme.colors.foregroundMuted} />}
+          icon={<Brain size={defaultTheme.iconSize.md} color={defaultTheme.colors.foregroundMuted} />}
           showLabel={false}
         />
       </View>
@@ -597,7 +598,7 @@ export function AgentConfigRow({
           placeholder="Default"
           disabled={disabled || modeOptions.length === 0}
           onSelect={onSelectMode}
-          icon={<Shield size={16} color={defaultTheme.colors.foregroundMuted} />}
+          icon={<Shield size={defaultTheme.iconSize.md} color={defaultTheme.colors.foregroundMuted} />}
           showLabel={false}
         />
       </View>
@@ -611,7 +612,7 @@ export function AgentConfigRow({
             placeholder="Select..."
             disabled={disabled}
             onSelect={onSelectThinkingOption}
-            icon={<Brain size={16} color={defaultTheme.colors.foregroundMuted} />}
+            icon={<Brain size={defaultTheme.iconSize.md} color={defaultTheme.colors.foregroundMuted} />}
             showLabel={false}
           />
         </View>
@@ -861,16 +862,14 @@ export function WorkingDirectoryDropdown({
   const handleOpen = useCallback(() => setIsOpen(true), []);
   const handleOpenChange = useCallback((open: boolean) => setIsOpen(open), []);
 
-  const emptyText = suggestedPaths.length > 0
-    ? "No agent directories match your search."
-    : "We'll suggest directories from agents on this host once they exist.";
+  const emptyText = "No agent directories match your search.";
 
   return (
     <>
       <SelectField
         label="WORKING DIRECTORY"
         value={workingDir}
-        placeholder="/path/to/project"
+        placeholder="Choose a working directory"
         onPress={handleOpen}
         disabled={disabled}
         errorMessage={errorMessage || undefined}
@@ -882,11 +881,12 @@ export function WorkingDirectoryDropdown({
         options={options}
         value={workingDir}
         onSelect={onSelectPath}
-        searchPlaceholder="/path/to/project"
+        searchPlaceholder="Search directories..."
         emptyText={emptyText}
         allowCustomValue
-        customValuePrefix="Use"
-        customValueDescription="Launch the agent in this directory"
+        customValuePrefix=""
+        customValueKind="directory"
+        optionsPosition="above-search"
         title="Working directory"
         open={isOpen}
         onOpenChange={handleOpenChange}
@@ -1118,16 +1118,16 @@ export function GitOptionsSection({
                 onSubmitEditing={handleConfirmEdit}
               />
               <Pressable onPress={handleConfirmEdit} hitSlop={8} style={styles.baseBranchIconButton}>
-                <Check size={16} color={defaultTheme.colors.palette.green[500]} />
+                <Check size={defaultTheme.iconSize.md} color={defaultTheme.colors.palette.green[500]} />
               </Pressable>
               <Pressable onPress={handleCancelEdit} hitSlop={8} style={styles.baseBranchIconButton}>
-                <X size={16} color={defaultTheme.colors.foregroundMuted} />
+                <X size={defaultTheme.iconSize.md} color={defaultTheme.colors.foregroundMuted} />
               </Pressable>
             </View>
           ) : (
             <Pressable onPress={handleStartEdit} style={styles.baseBranchValueRow}>
               <Text style={styles.baseBranchValue}>{displayBranch}</Text>
-              <Pencil size={14} color={defaultTheme.colors.foregroundMuted} />
+              <Pencil size={defaultTheme.iconSize.sm} color={defaultTheme.colors.foregroundMuted} />
             </Pressable>
           )}
         </View>

packages/app/src/components/agent-input-area.draft-persist-guard.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { shouldSkipDraftPersist } from "./agent-input-area.draft-persist-guard";
+
+describe("shouldSkipDraftPersist", () => {
+  it("blocks persist while hydrate for current uncontrolled generation is incomplete", () => {
+    expect(
+      shouldSkipDraftPersist({
+        isControlled: false,
+        currentGeneration: 2,
+        hydratedGeneration: 1,
+        isCurrentGeneration: true,
+      })
+    ).toBe(true);
+  });
+
+  it("allows persist after hydrate completes for current generation", () => {
+    expect(
+      shouldSkipDraftPersist({
+        isControlled: false,
+        currentGeneration: 3,
+        hydratedGeneration: 3,
+        isCurrentGeneration: true,
+      })
+    ).toBe(false);
+  });
+
+  it("blocks persist for stale generations", () => {
+    expect(
+      shouldSkipDraftPersist({
+        isControlled: false,
+        currentGeneration: 4,
+        hydratedGeneration: 4,
+        isCurrentGeneration: false,
+      })
+    ).toBe(true);
+  });
+
+  it("does not block controlled draft persistence", () => {
+    expect(
+      shouldSkipDraftPersist({
+        isControlled: true,
+        currentGeneration: 0,
+        hydratedGeneration: 0,
+        isCurrentGeneration: true,
+      })
+    ).toBe(false);
+  });
+});

packages/app/src/components/agent-input-area.draft-persist-guard.ts

@@ -0,0 +1,20 @@
+export function shouldSkipDraftPersist(input: {
+  isControlled: boolean;
+  currentGeneration: number;
+  hydratedGeneration: number;
+  isCurrentGeneration: boolean;
+}): boolean {
+  if (input.isControlled) {
+    return false;
+  }
+
+  if (input.currentGeneration <= 0) {
+    return true;
+  }
+
+  if (!input.isCurrentGeneration) {
+    return true;
+  }
+
+  return input.hydratedGeneration !== input.currentGeneration;
+}

packages/app/src/components/agent-list.tsx

@@ -9,7 +9,7 @@ import {
   type SectionListRenderItem,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useCallback, useMemo, useRef, useState, type ReactElement } from "react";
+import { useCallback, useMemo, useState, type ReactElement } from "react";
 import { router, usePathname } from "expo-router";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useQueryClient } from "@tanstack/react-query";
@@ -18,6 +18,10 @@ import { shortenPath } from "@/utils/shorten-path";
 import { deriveBranchLabel, deriveProjectPath } from "@/utils/agent-display-info";
 import { type AggregatedAgent } from "@/hooks/use-aggregated-agents";
 import { useSessionStore } from "@/stores/session-store";
+import {
+  getHostRuntimeStore,
+  isHostRuntimeConnected,
+} from "@/runtime/host-runtime";
 import { AgentStatusDot } from "@/components/agent-status-dot";
 import {
   CHECKOUT_STATUS_STALE_TIME,
@@ -28,6 +32,10 @@ import {
   buildAgentNavigationKey,
   startNavigationTiming,
 } from "@/utils/navigation-timing";
+import {
+  buildHostAgentDetailRoute,
+  parseHostAgentRouteFromPathname,
+} from "@/utils/host-routes";
 
 interface AgentListProps {
   agents: AggregatedAgent[];
@@ -73,6 +81,71 @@ function deriveDateSectionLabel(lastActivityAt: Date): string {
   return "Older";
 }
 
+interface AgentListRowProps {
+  agent: AggregatedAgent;
+  selectedAgentId?: string;
+  showCheckoutInfo: boolean;
+  onPress: (serverId: string, agentId: string) => void;
+  onLongPress: (agent: AggregatedAgent) => void;
+}
+
+function AgentListRow({
+  agent,
+  selectedAgentId,
+  showCheckoutInfo,
+  onPress,
+  onLongPress,
+}: AgentListRowProps) {
+  const timeAgo = formatTimeAgo(agent.lastActivityAt);
+  const agentKey = `${agent.serverId}:${agent.id}`;
+  const isSelected = selectedAgentId === agentKey;
+  const checkoutQuery = useCheckoutStatusCacheOnly({
+    serverId: agent.serverId,
+    cwd: agent.cwd,
+  });
+  const checkout = checkoutQuery.data ?? null;
+  const projectPath = showCheckoutInfo
+    ? deriveProjectPath(agent.cwd, checkout)
+    : agent.cwd;
+  const branchLabel = showCheckoutInfo ? deriveBranchLabel(checkout) : null;
+
+  return (
+    <Pressable
+      style={({ pressed, hovered }) => [
+        styles.agentItem,
+        isSelected && styles.agentItemSelected,
+        hovered && styles.agentItemHovered,
+        pressed && styles.agentItemPressed,
+      ]}
+      onPress={() => onPress(agent.serverId, agent.id)}
+      onLongPress={() => onLongPress(agent)}
+      testID={`agent-row-${agent.serverId}-${agent.id}`}
+    >
+      {({ hovered }) => (
+        <View style={styles.agentContent}>
+          <View style={styles.row}>
+            <AgentStatusDot status={agent.status} requiresAttention={agent.requiresAttention} />
+            <Text
+              style={[
+                styles.agentTitle,
+                (isSelected || hovered) && styles.agentTitleHighlighted,
+              ]}
+              numberOfLines={1}
+            >
+              {agent.title || "New agent"}
+            </Text>
+          </View>
+
+          <Text style={styles.secondaryRow} numberOfLines={1}>
+            {shortenPath(projectPath)}
+            {branchLabel ? ` · ${branchLabel}` : ""} · {timeAgo}
+          </Text>
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
 export function AgentList({
   agents,
   showCheckoutInfo = true,
@@ -101,12 +174,6 @@ export function AgentList({
         return;
       }
 
-      // Clear attention flag when opening agent
-      const session = useSessionStore.getState().sessions[serverId];
-      if (session?.client) {
-        session.client.clearAgentAttention(agentId);
-      }
-
       const navigationKey = buildAgentNavigationKey(serverId, agentId);
       startNavigationTiming(navigationKey, {
         from: "home",
@@ -114,12 +181,12 @@ export function AgentList({
         params: { serverId, agentId },
       });
 
-      const shouldReplace = pathname.startsWith("/agent/");
+      const shouldReplace = Boolean(parseHostAgentRouteFromPathname(pathname));
       const navigate = shouldReplace ? router.replace : router.push;
 
       onAgentSelect?.();
 
-      navigate(`/agent/${serverId}/${agentId}` as any);
+      navigate(buildHostAgentDetailRoute(serverId, agentId) as any);
     },
     [isActionSheetVisible, pathname, onAgentSelect]
   );
@@ -156,9 +223,9 @@ export function AgentList({
           continue;
         }
 
-        const session = useSessionStore.getState().sessions[agent.serverId];
-        const client = session?.client ?? null;
-        const isConnected = session?.connection.isConnected ?? false;
+        const runtime = getHostRuntimeStore();
+        const client = runtime.getClient(agent.serverId);
+        const isConnected = isHostRuntimeConnected(runtime.getSnapshot(agent.serverId));
         if (!client || !isConnected) {
           continue;
         }
@@ -185,66 +252,6 @@ export function AgentList({
     [queryClient, showCheckoutInfo]
   );
 
-  const AgentListRow = useCallback(
-    ({ agent }: { agent: AggregatedAgent }) => {
-      const timeAgo = formatTimeAgo(agent.lastActivityAt);
-      const agentKey = `${agent.serverId}:${agent.id}`;
-      const isSelected = selectedAgentId === agentKey;
-
-      const checkoutQuery = useCheckoutStatusCacheOnly({
-        serverId: agent.serverId,
-        cwd: agent.cwd,
-      });
-      const checkout = checkoutQuery.data ?? null;
-      const projectPath = showCheckoutInfo
-        ? deriveProjectPath(agent.cwd, checkout)
-        : agent.cwd;
-      const branchLabel = showCheckoutInfo ? deriveBranchLabel(checkout) : null;
-
-      return (
-        <Pressable
-          style={({ pressed, hovered }) => [
-            styles.agentItem,
-            isSelected && styles.agentItemSelected,
-            hovered && styles.agentItemHovered,
-            pressed && styles.agentItemPressed,
-          ]}
-          onPress={() => handleAgentPress(agent.serverId, agent.id)}
-          onLongPress={() => handleAgentLongPress(agent)}
-          testID={`agent-row-${agent.serverId}-${agent.id}`}
-        >
-          {({ hovered }) => (
-            <View style={styles.agentContent}>
-              <View style={styles.row}>
-                <AgentStatusDot status={agent.status} requiresAttention={agent.requiresAttention} />
-                <Text
-                  style={[
-                    styles.agentTitle,
-                    (isSelected || hovered) && styles.agentTitleHighlighted,
-                  ]}
-                  numberOfLines={1}
-                >
-                  {agent.title || "New agent"}
-                </Text>
-              </View>
-
-              <Text style={styles.secondaryRow} numberOfLines={1}>
-                {shortenPath(projectPath)}
-                {branchLabel ? ` · ${branchLabel}` : ""} · {timeAgo}
-              </Text>
-            </View>
-          )}
-        </Pressable>
-      );
-    },
-    [
-      handleAgentLongPress,
-      handleAgentPress,
-      selectedAgentId,
-      showCheckoutInfo,
-    ]
-  );
-
   const sections = useMemo((): AgentListSection[] => {
     const order = ["Today", "Yesterday", "This week", "This month", "Older"] as const;
     const buckets = new Map<string, AggregatedAgent[]>();
@@ -267,7 +274,18 @@ export function AgentList({
   }, [agents]);
 
   const renderAgentItem: SectionListRenderItem<AggregatedAgent, AgentListSection> =
-    useCallback(({ item: agent }) => <AgentListRow agent={agent} />, [AgentListRow]);
+    useCallback(
+      ({ item: agent }) => (
+        <AgentListRow
+          agent={agent}
+          selectedAgentId={selectedAgentId}
+          showCheckoutInfo={showCheckoutInfo}
+          onPress={handleAgentPress}
+          onLongPress={handleAgentLongPress}
+        />
+      ),
+      [handleAgentLongPress, handleAgentPress, selectedAgentId, showCheckoutInfo]
+    );
 
   const renderSectionHeader = useCallback(
     ({ section }: { section: AgentListSection }) => (

packages/app/src/components/agent-status-bar.tsx

@@ -17,6 +17,14 @@ interface AgentStatusBarProps {
   serverId: string;
 }
 
+function normalizeModelId(modelId: string | null | undefined): string | null {
+  const normalized = typeof modelId === "string" ? modelId.trim() : "";
+  if (!normalized || normalized.toLowerCase() === "default") {
+    return null;
+  }
+  return normalized;
+}
+
 export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
   const { theme } = useUnistyles();
   const IS_WEB = Platform.OS === "web";
@@ -30,17 +38,19 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
 
   const client = useSessionStore((state) => state.sessions[serverId]?.client ?? null);
 
-  if (!agent) {
-    return null;
-  }
-
-  const canFetchModels = Boolean(client) && Boolean(agent.provider) && (IS_WEB || prefsOpen);
+  const canFetchModels =
+    Boolean(client) && Boolean(agent?.provider) && (IS_WEB || prefsOpen);
   const modelsQuery = useQuery({
-    queryKey: ["providerModels", serverId, agent.provider, agent.cwd],
+    queryKey: [
+      "providerModels",
+      serverId,
+      agent?.provider ?? "__missing_provider__",
+      agent?.cwd ?? "__missing_cwd__",
+    ],
     enabled: canFetchModels,
     staleTime: 5 * 60 * 1000,
     queryFn: async () => {
-      if (!client) {
+      if (!client || !agent) {
         throw new Error("Daemon client unavailable");
       }
       const payload = await client.listProviderModels(agent.provider, { cwd: agent.cwd });
@@ -53,7 +63,7 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
   const models = modelsQuery.data ?? null;
 
   function handleModeChange(modeId: string) {
-    if (!client) {
+    if (!client || !agent) {
       return;
     }
     void client.setAgentMode(agentId, modeId).catch((error) => {
@@ -61,18 +71,20 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
     });
   }
 
+  const normalizedRuntimeModelId = normalizeModelId(agent?.runtimeInfo?.model);
+  const normalizedConfiguredModelId = normalizeModelId(agent?.model);
+  const preferredModelId = normalizedRuntimeModelId ?? normalizedConfiguredModelId;
   const selectedModel = useMemo(() => {
-    if (!models || !agent.model) return null;
-    return models.find((m) => m.id === agent.model) ?? null;
-  }, [models, agent.model]);
+    if (!models || !preferredModelId) return null;
+    return models.find((m) => m.id === preferredModelId) ?? null;
+  }, [models, preferredModelId]);
 
-  const displayModel = selectedModel
-    ? selectedModel.label
-    : agent.model ?? "default";
+  const activeModelId = selectedModel?.id ?? preferredModelId ?? null;
+  const displayModel = selectedModel ? selectedModel.label : preferredModelId ?? "Auto";
 
   const thinkingOptions = selectedModel?.thinkingOptions ?? null;
   const explicitThinkingId =
-    agent.thinkingOptionId && agent.thinkingOptionId !== "default"
+    agent?.thinkingOptionId && agent.thinkingOptionId !== "default"
       ? agent.thinkingOptionId
       : null;
   const selectedThinkingId =
@@ -83,10 +95,14 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
     (selectedThinkingId === "default" ? "Model default" : selectedThinkingId ?? "auto");
 
   const displayMode =
-    agent.availableModes?.find((m) => m.id === agent.currentModeId)?.label ||
-    agent.currentModeId ||
+    agent?.availableModes?.find((m) => m.id === agent.currentModeId)?.label ||
+    agent?.currentModeId ||
     "default";
 
+  if (!agent) {
+    return null;
+  }
+
   return (
     <View style={[styles.container, IS_WEB && { marginBottom: -theme.spacing[1] }]}>
       {/* Agent Mode Badge (desktop only — on mobile, mode is in the preferences sheet) */}
@@ -108,7 +124,7 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
                 agent.currentModeId ||
                 "default"}
             </Text>
-            <ChevronDown size={14} color={theme.colors.foregroundMuted} />
+            <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
           </DropdownMenuTrigger>
           <DropdownMenuContent
             side="top"
@@ -147,7 +163,7 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
               testID="agent-model-selector"
             >
               <Text style={styles.modeBadgeText}>{displayModel}</Text>
-              <ChevronDown size={14} color={theme.colors.foregroundMuted} />
+              <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
             </DropdownMenuTrigger>
             <DropdownMenuContent
               side="top"
@@ -156,7 +172,7 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
               testID="agent-model-menu"
             >
               {models?.map((model) => {
-                const isActive = model.id === agent.model;
+                const isActive = model.id === activeModelId;
                 return (
                   <DropdownMenuItem
                     key={model.id}
@@ -189,9 +205,13 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
                 accessibilityLabel="Select thinking option"
                 testID="agent-thinking-selector"
               >
-                <Brain size={12} color={theme.colors.foregroundMuted} style={{ marginTop: 1 }} />
+                <Brain
+                  size={theme.iconSize.xs}
+                  color={theme.colors.foregroundMuted}
+                  style={{ marginTop: 1 }}
+                />
                 <Text style={styles.modeBadgeText}>{displayThinking}</Text>
-                <ChevronDown size={14} color={theme.colors.foregroundMuted} />
+                <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
               </DropdownMenuTrigger>
               <DropdownMenuContent
                 side="top"
@@ -239,7 +259,7 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
             accessibilityLabel="Agent preferences"
             testID="agent-preferences-button"
           >
-            <SlidersHorizontal size={20} color={theme.colors.foreground} />
+            <SlidersHorizontal size={theme.iconSize.lg} color={theme.colors.foreground} />
           </Pressable>
 
           <AdaptiveModalSheet
@@ -261,7 +281,7 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
                     testID="agent-preferences-mode"
                   >
                     <Text style={styles.sheetSelectText}>{displayMode}</Text>
-                    <ChevronDown size={16} color={theme.colors.foregroundMuted} />
+                    <ChevronDown size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent side="top" align="start">
                     {agent.availableModes.map((mode) => {
@@ -293,11 +313,11 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
                   testID="agent-preferences-model"
                 >
                   <Text style={styles.sheetSelectText}>{displayModel}</Text>
-                  <ChevronDown size={16} color={theme.colors.foregroundMuted} />
+                  <ChevronDown size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent side="top" align="start">
                   {models?.map((model) => {
-                    const isActive = model.id === agent.model;
+                    const isActive = model.id === activeModelId;
                     return (
                       <DropdownMenuItem
                         key={model.id}
@@ -332,7 +352,7 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
                     testID="agent-preferences-thinking"
                   >
                     <Text style={styles.sheetSelectText}>{displayThinking}</Text>
-                    <ChevronDown size={16} color={theme.colors.foregroundMuted} />
+                    <ChevronDown size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent side="top" align="start">
                     {thinkingOptions.map((opt) => {

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

@@ -50,6 +50,10 @@ import type { DaemonClient } from "@server/client/daemon-client";
 import { ToolCallDetailsContent } from "./tool-call-details";
 import { QuestionFormCard } from "./question-form-card";
 import { ToolCallSheetProvider } from "./tool-call-sheet";
+import {
+  WebDesktopScrollbarOverlay,
+  useWebDesktopScrollbarMetrics,
+} from "./web-desktop-scrollbar";
 import { createMarkdownStyles } from "@/styles/markdown-styles";
 import { MAX_CONTENT_WIDTH } from "@/constants/layout";
 import { isPerfLoggingEnabled, measurePayload, perfLog } from "@/utils/perf";
@@ -95,15 +99,21 @@ export function AgentStreamView({
 }: AgentStreamViewProps) {
   const flatListRef = useRef<FlatList<StreamItem>>(null);
   const { theme } = useUnistyles();
+  const isMobile =
+    UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const showDesktopWebScrollbar = Platform.OS === "web" && !isMobile;
   const insets = useSafeAreaInsets();
   const [isNearBottom, setIsNearBottom] = useState(true);
   const hasScrolledInitially = useRef(false);
   const hasAutoScrolledOnce = useRef(false);
   const isNearBottomRef = useRef(true);
+  const pendingAutoScrollFrameRef = useRef<number | null>(null);
+  const pendingAutoScrollAnimatedRef = useRef(false);
   const streamItemCountRef = useRef(0);
+  const streamScrollbarMetrics = useWebDesktopScrollbarMetrics();
   const [expandedInlineToolCallIds, setExpandedInlineToolCallIds] = useState<Set<string>>(new Set());
   const openFileExplorer = usePanelStore((state) => state.openFileExplorer);
-  const setExplorerTab = usePanelStore((state) => state.setExplorerTab);
+  const setExplorerTabForCheckout = usePanelStore((state) => state.setExplorerTabForCheckout);
 
   // Get serverId (fallback to agent's serverId if not provided)
   const resolvedServerId = serverId ?? agent.serverId ?? "";
@@ -154,7 +164,12 @@ export function AgentStreamView({
         requestFilePreview(agentId, normalized.file);
       }
 
-      setExplorerTab("files");
+      setExplorerTabForCheckout({
+        serverId: resolvedServerId,
+        cwd: agent.cwd,
+        isGit: agent.projectPlacement?.checkout?.isGit ?? true,
+        tab: "files",
+      });
       openFileExplorer();
     },
     [
@@ -163,7 +178,7 @@ export function AgentStreamView({
       requestDirectoryListing,
       requestFilePreview,
       selectExplorerEntry,
-      setExplorerTab,
+      setExplorerTabForCheckout,
       openFileExplorer,
     ]
   );
@@ -179,8 +194,12 @@ export function AgentStreamView({
         isNearBottomRef.current = nearBottom;
         setIsNearBottom(nearBottom);
       }
+
+      if (showDesktopWebScrollbar) {
+        streamScrollbarMetrics.onScroll(event);
+      }
     },
-    [insets.bottom]
+    [insets.bottom, showDesktopWebScrollbar, streamScrollbarMetrics]
   );
 
   const scrollToBottomInternal = useCallback(
@@ -197,6 +216,35 @@ export function AgentStreamView({
     []
   );
 
+  const scheduleAutoScroll = useCallback(
+    ({ animated }: { animated: boolean }) => {
+      pendingAutoScrollAnimatedRef.current =
+        pendingAutoScrollAnimatedRef.current || animated;
+
+      if (pendingAutoScrollFrameRef.current !== null) {
+        return;
+      }
+
+      pendingAutoScrollFrameRef.current = requestAnimationFrame(() => {
+        pendingAutoScrollFrameRef.current = null;
+        const shouldAnimate = pendingAutoScrollAnimatedRef.current;
+        pendingAutoScrollAnimatedRef.current = false;
+        scrollToBottomInternal({ animated: shouldAnimate });
+      });
+    },
+    [scrollToBottomInternal]
+  );
+
+  useEffect(() => {
+    return () => {
+      if (pendingAutoScrollFrameRef.current !== null) {
+        cancelAnimationFrame(pendingAutoScrollFrameRef.current);
+        pendingAutoScrollFrameRef.current = null;
+      }
+      pendingAutoScrollAnimatedRef.current = false;
+    };
+  }, []);
+
   useEffect(() => {
     if (streamItems.length === 0) {
       return;
@@ -216,9 +264,9 @@ export function AgentStreamView({
     }
 
     const shouldAnimate = hasScrolledInitially.current;
-    scrollToBottomInternal({ animated: shouldAnimate });
+    scheduleAutoScroll({ animated: shouldAnimate });
     hasScrolledInitially.current = true;
-  }, [streamItems, scrollToBottomInternal]);
+  }, [streamItems, scheduleAutoScroll]);
 
   function scrollToBottom() {
     scrollToBottomInternal({ animated: true });
@@ -309,6 +357,7 @@ export function AgentStreamView({
           return (
             <UserMessage
               message={item.text}
+              images={item.images}
               timestamp={item.timestamp.getTime()}
               isFirstInGroup={isFirstInGroup}
               isLastInGroup={isLastInGroup}
@@ -641,14 +690,25 @@ export function AgentStreamView({
               data={flatListData}
               renderItem={renderStreamItem}
               keyExtractor={(item) => item.id}
+              testID="agent-chat-scroll"
               ListHeaderComponentStyle={headerGapStyle}
               contentContainerStyle={{
                 paddingVertical: 0,
                 flexGrow: 1,
               }}
               style={stylesheet.list}
+              onLayout={
+                showDesktopWebScrollbar
+                  ? streamScrollbarMetrics.onLayout
+                  : undefined
+              }
               onScroll={handleScroll}
               scrollEventThrottle={16}
+              onContentSizeChange={
+                showDesktopWebScrollbar
+                  ? streamScrollbarMetrics.onContentSizeChange
+                  : undefined
+              }
               ListEmptyComponent={listEmptyComponent}
               ListHeaderComponent={listHeaderComponent}
               extraData={flatListExtraData}
@@ -661,9 +721,21 @@ export function AgentStreamView({
               initialNumToRender={12}
               windowSize={10}
               scrollEnabled={Platform.OS !== "web" || expandedInlineToolCallIds.size === 0}
+              showsVerticalScrollIndicator={!showDesktopWebScrollbar}
               inverted
             />
           </MessageOuterSpacingProvider>
+          <WebDesktopScrollbarOverlay
+            enabled={showDesktopWebScrollbar}
+            metrics={streamScrollbarMetrics}
+            inverted
+            onScrollToOffset={(nextOffset) => {
+              flatListRef.current?.scrollToOffset({
+                offset: nextOffset,
+                animated: false,
+              });
+            }}
+          />
 
           {/* Scroll to bottom button */}
           {!isNearBottom && (

packages/app/src/components/command-autocomplete.tsx

@@ -1,164 +0,0 @@
-import { View, Text, Pressable, ScrollView } from "react-native";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { useAgentCommandsQuery } from "@/hooks/use-agent-commands-query";
-import { Fonts } from "@/constants/theme";
-import { Theme } from "@/styles/theme";
-
-interface AgentSlashCommand {
-  name: string;
-  description: string;
-  argumentHint: string;
-}
-
-interface CommandAutocompleteProps {
-  serverId: string;
-  agentId: string;
-  filter: string;
-  selectedIndex: number;
-  onSelect: (command: AgentSlashCommand) => void;
-}
-
-export function CommandAutocomplete({
-  serverId,
-  agentId,
-  filter,
-  selectedIndex,
-  onSelect,
-}: CommandAutocompleteProps) {
-  const { theme } = useUnistyles();
-  const { commands, isLoading, isError, error } = useAgentCommandsQuery({
-    serverId,
-    agentId,
-    enabled: true,
-  });
-
-  // Filter commands based on input after /
-  const filterLower = filter.toLowerCase();
-  const filteredCommands = commands.filter((cmd) =>
-    cmd.name.toLowerCase().includes(filterLower)
-  );
-
-  if (isLoading) {
-    return (
-      <View style={styles.container}>
-        <View style={styles.loadingItem}>
-          <Text style={styles.loadingText}>Loading commands...</Text>
-        </View>
-      </View>
-    );
-  }
-
-  if (isError) {
-    return (
-      <View style={styles.container}>
-        <View style={styles.emptyItem}>
-          <Text style={styles.emptyText}>Error: {error?.message ?? "Failed to load"}</Text>
-        </View>
-      </View>
-    );
-  }
-
-  if (filteredCommands.length === 0) {
-    return (
-      <View style={styles.container}>
-        <View style={styles.emptyItem}>
-          <Text style={styles.emptyText}>No commands found</Text>
-        </View>
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.container}>
-      <ScrollView style={styles.scrollView} keyboardShouldPersistTaps="always">
-        {filteredCommands.map((cmd, index) => {
-          const isSelected = index === selectedIndex;
-          return (
-            <Pressable
-              key={cmd.name}
-              onPress={() => onSelect(cmd)}
-              style={[
-                styles.commandItem,
-                isSelected && {
-                  backgroundColor: theme.colors.accent,
-                },
-              ]}
-            >
-              <View style={styles.commandHeader}>
-                <Text style={styles.commandName}>/{cmd.name}</Text>
-                {cmd.argumentHint && (
-                  <Text style={styles.commandArgs}>{cmd.argumentHint}</Text>
-                )}
-              </View>
-              <Text style={styles.commandDescription} numberOfLines={1}>
-                {cmd.description}
-              </Text>
-            </Pressable>
-          );
-        })}
-      </ScrollView>
-    </View>
-  );
-}
-
-export function useCommandAutocomplete(commands: AgentSlashCommand[], filter: string) {
-  const filterLower = filter.toLowerCase();
-  return commands.filter((cmd) => cmd.name.toLowerCase().includes(filterLower));
-}
-
-const styles = StyleSheet.create(((theme: Theme) => ({
-  container: {
-    backgroundColor: theme.colors.surface2,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-    borderRadius: theme.borderRadius.lg,
-    maxHeight: 200,
-  },
-  scrollView: {
-    flexGrow: 0,
-    flexShrink: 1,
-  },
-  commandItem: {
-    paddingHorizontal: theme.spacing[3],
-    paddingVertical: theme.spacing[2],
-    borderBottomWidth: theme.borderWidth[1],
-    borderBottomColor: theme.colors.border,
-  },
-  commandHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[2],
-  },
-  commandName: {
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize.sm,
-    fontWeight: theme.fontWeight.medium,
-    fontFamily: Fonts.mono,
-  },
-  commandArgs: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.xs,
-    fontFamily: Fonts.mono,
-  },
-  commandDescription: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.xs,
-    marginTop: 2,
-  },
-  loadingItem: {
-    paddingHorizontal: theme.spacing[3],
-    paddingVertical: theme.spacing[3],
-  },
-  loadingText: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.sm,
-  },
-  emptyItem: {
-    paddingHorizontal: theme.spacing[3],
-    paddingVertical: theme.spacing[3],
-  },
-  emptyText: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.sm,
-  },
-})) as any) as Record<string, any>;

packages/app/src/components/command-center.tsx

@@ -48,9 +48,13 @@ export function CommandCenter() {
       <View style={styles.overlay}>
         <Pressable style={styles.backdrop} onPress={handleClose} />
 
-        <View style={[styles.panel, { borderColor: theme.colors.border, backgroundColor: theme.colors.surface0 }]}>
+        <View
+          testID="command-center-panel"
+          style={[styles.panel, { borderColor: theme.colors.border, backgroundColor: theme.colors.surface0 }]}
+        >
           <View style={[styles.header, { borderBottomColor: theme.colors.border }]}>
             <TextInput
+              testID="command-center-input"
               ref={inputRef}
               value={query}
               onChangeText={setQuery}

packages/app/src/components/dictation-controls.tsx

@@ -1,6 +1,6 @@
 import { View, Text, Pressable, ActivityIndicator } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { X, ArrowUp, RefreshCcw, Check, Mic } from "lucide-react-native";
+import { X, ArrowUp, RefreshCcw, Check, Mic, Pencil } from "lucide-react-native";
 import { VolumeMeter } from "./volume-meter";
 import { FOOTER_HEIGHT } from "@/constants/layout";
 import type { DictationStatus } from "@/hooks/use-dictation";
@@ -58,7 +58,7 @@ export function DictationControls({
         accessibilityLabel="Start voice dictation"
         style={[styles.micButton, disabled && styles.buttonDisabled]}
       >
-        <Mic size={16} color={theme.colors.foreground} />
+        <Mic size={theme.iconSize.md} color={theme.colors.foreground} />
       </Pressable>
     );
   }
@@ -88,7 +88,7 @@ export function DictationControls({
             actionsDisabled && !isFailed ? styles.buttonDisabled : undefined,
           ]}
         >
-          <X size={14} color={theme.colors.foreground} />
+          <X size={theme.iconSize.sm} color={theme.colors.foreground} />
         </Pressable>
         {actionsDisabled ? (
           <View style={styles.loadingContainer}>
@@ -100,7 +100,7 @@ export function DictationControls({
             accessibilityLabel="Retry dictation"
             style={[styles.actionButton, styles.actionButtonConfirm]}
           >
-            <RefreshCcw size={14} color={theme.colors.surface0} />
+            <RefreshCcw size={theme.iconSize.sm} color={theme.colors.surface0} />
           </Pressable>
         ) : (
           <>
@@ -109,14 +109,14 @@ export function DictationControls({
               accessibilityLabel="Insert transcription"
               style={[styles.actionButton, styles.actionButtonSecondary]}
             >
-              <Check size={14} color={theme.colors.foreground} />
+              <Check size={theme.iconSize.sm} color={theme.colors.foreground} />
             </Pressable>
             <Pressable
               onPress={onAcceptAndSend}
               accessibilityLabel="Insert transcription and send"
               style={[styles.actionButton, styles.actionButtonConfirm]}
             >
-              <ArrowUp size={14} color={theme.colors.surface0} />
+              <ArrowUp size={theme.iconSize.sm} color={theme.colors.surface0} />
             </Pressable>
           </>
         )}
@@ -167,7 +167,7 @@ export function DictationOverlay({
           actionsDisabled && !isFailed && overlayStyles.buttonDisabled,
         ]}
       >
-        <X size={20} color={theme.colors.palette.white} strokeWidth={2.5} />
+        <X size={theme.iconSize.lg} color={theme.colors.palette.white} strokeWidth={2.5} />
       </Pressable>
 
       <View style={overlayStyles.centerContainer}>
@@ -219,7 +219,7 @@ export function DictationOverlay({
             ]}
           >
             <RefreshCcw
-              size={20}
+              size={theme.iconSize.lg}
               color={theme.colors.accent}
               strokeWidth={2.5}
             />
@@ -233,8 +233,8 @@ export function DictationOverlay({
                 { backgroundColor: "rgba(255, 255, 255, 0.25)" },
               ]}
             >
-              <Check
-                size={20}
+              <Pencil
+                size={theme.iconSize.lg}
                 color={theme.colors.palette.white}
                 strokeWidth={2.5}
               />
@@ -247,7 +247,7 @@ export function DictationOverlay({
               ]}
             >
               <ArrowUp
-                size={20}
+                size={theme.iconSize.lg}
                 color={theme.colors.accent}
                 strokeWidth={2.5}
               />

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

@@ -129,6 +129,12 @@ const styles = StyleSheet.create((theme) => {
       fontFamily: Fonts.mono,
       fontSize: theme.fontSize.xs,
       color: theme.colors.foreground,
+      ...(Platform.OS === "web"
+        ? {
+            whiteSpace: "pre",
+            overflowWrap: "normal",
+          }
+        : null),
     },
     headerLine: {
       backgroundColor: theme.colors.surface1,

packages/app/src/components/draggable-list.native.tsx

@@ -18,10 +18,12 @@ export function DraggableList<T>({
   onDragEnd,
   style,
   contentContainerStyle,
+  testID,
   ListFooterComponent,
   ListHeaderComponent,
   ListEmptyComponent,
   showsVerticalScrollIndicator = true,
+  enableDesktopWebScrollbar: _enableDesktopWebScrollbar = false,
   refreshing,
   onRefresh,
   simultaneousGestureRef,
@@ -69,6 +71,7 @@ export function DraggableList<T>({
 
   return (
     <DraggableFlatList
+      testID={testID}
       data={data}
       keyExtractor={keyExtractor}
       renderItem={handleRenderItem}

packages/app/src/components/draggable-list.types.ts

@@ -16,10 +16,12 @@ export interface DraggableListProps<T> {
   onDragEnd: (data: T[]) => void;
   style?: StyleProp<ViewStyle>;
   contentContainerStyle?: StyleProp<ViewStyle>;
+  testID?: string;
   ListFooterComponent?: ReactElement | null;
   ListHeaderComponent?: ReactElement | null;
   ListEmptyComponent?: ReactElement | null;
   showsVerticalScrollIndicator?: boolean;
+  enableDesktopWebScrollbar?: boolean;
   refreshing?: boolean;
   onRefresh?: () => void;
   /** Fill remaining space when content is smaller than container */

packages/app/src/components/draggable-list.web.tsx

@@ -1,5 +1,5 @@
-import { useCallback, useState, useRef, type ReactElement } from "react";
-import { View, ScrollView } from "react-native";
+import { useCallback, useRef, useState, type ReactElement } from "react";
+import { ScrollView, View } from "react-native";
 import {
   DndContext,
   closestCenter,
@@ -23,6 +23,10 @@ import type {
   DraggableListProps,
   DraggableRenderItemInfo,
 } from "./draggable-list.types";
+import {
+  WebDesktopScrollbarOverlay,
+  useWebDesktopScrollbarMetrics,
+} from "./web-desktop-scrollbar";
 
 export type { DraggableListProps, DraggableRenderItemInfo };
 
@@ -99,14 +103,18 @@ export function DraggableList<T>({
   onDragEnd,
   style,
   contentContainerStyle,
+  testID,
   ListFooterComponent,
   ListHeaderComponent,
   ListEmptyComponent,
   showsVerticalScrollIndicator = true,
+  enableDesktopWebScrollbar = false,
   // simultaneousGestureRef is native-only, ignored on web
 }: DraggableListProps<T>) {
   const [activeId, setActiveId] = useState<string | null>(null);
   const [items, setItems] = useState(data);
+  const scrollViewRef = useRef<ScrollView>(null);
+  const scrollbarMetrics = useWebDesktopScrollbarMetrics();
 
   // Sync items with data prop
   if (data !== items && !activeId) {
@@ -151,39 +159,59 @@ export function DraggableList<T>({
   );
 
   const ids = items.map((item, index) => keyExtractor(item, index));
+  const showCustomScrollbar = enableDesktopWebScrollbar;
 
   return (
-    <ScrollView
-      style={style}
-      contentContainerStyle={contentContainerStyle}
-      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-    >
-      {ListHeaderComponent}
-      {items.length === 0 && ListEmptyComponent}
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        modifiers={[restrictToVerticalAxis]}
-        onDragStart={handleDragStart}
-        onDragEnd={handleDragEnd}
+    <View style={{ flex: 1, minHeight: 0, position: "relative" }}>
+      <ScrollView
+        ref={scrollViewRef}
+        testID={testID}
+        style={style}
+        contentContainerStyle={contentContainerStyle}
+        showsVerticalScrollIndicator={
+          showCustomScrollbar ? false : showsVerticalScrollIndicator
+        }
+        onLayout={showCustomScrollbar ? scrollbarMetrics.onLayout : undefined}
+        onContentSizeChange={
+          showCustomScrollbar ? scrollbarMetrics.onContentSizeChange : undefined
+        }
+        onScroll={showCustomScrollbar ? scrollbarMetrics.onScroll : undefined}
+        scrollEventThrottle={showCustomScrollbar ? 16 : undefined}
       >
-        <SortableContext items={ids} strategy={verticalListSortingStrategy}>
-          {items.map((item, index) => {
-            const id = keyExtractor(item, index);
-            return (
-              <SortableItem
-                key={id}
-                id={id}
-                item={item}
-                index={index}
-                renderItem={renderItem}
-                activeId={activeId}
-              />
-            );
-          })}
-        </SortableContext>
-      </DndContext>
-      {ListFooterComponent}
-    </ScrollView>
+        {ListHeaderComponent}
+        {items.length === 0 && ListEmptyComponent}
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          modifiers={[restrictToVerticalAxis]}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext items={ids} strategy={verticalListSortingStrategy}>
+            {items.map((item, index) => {
+              const id = keyExtractor(item, index);
+              return (
+                <SortableItem
+                  key={id}
+                  id={id}
+                  item={item}
+                  index={index}
+                  renderItem={renderItem}
+                  activeId={activeId}
+                />
+              );
+            })}
+          </SortableContext>
+        </DndContext>
+        {ListFooterComponent}
+      </ScrollView>
+      <WebDesktopScrollbarOverlay
+        enabled={showCustomScrollbar}
+        metrics={scrollbarMetrics}
+        onScrollToOffset={(nextOffset) => {
+          scrollViewRef.current?.scrollTo({ y: nextOffset, animated: false });
+        }}
+      />
+    </View>
   );
 }

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

@@ -8,6 +8,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
 import { X } from "lucide-react-native";
 import {
   usePanelStore,
@@ -17,19 +18,39 @@ import {
 } from "@/stores/panel-store";
 import { useExplorerSidebarAnimation } from "@/contexts/explorer-sidebar-animation-context";
 import { HEADER_INNER_HEIGHT } from "@/constants/layout";
-import { useCheckoutStatusQuery } from "@/hooks/use-checkout-status-query";
 import { GitDiffPane } from "./git-diff-pane";
 import { FileExplorerPane } from "./file-explorer-pane";
+import { TerminalPane } from "./terminal-pane";
 
 const MIN_CHAT_WIDTH = 400;
+const IOS_KEYBOARD_INSET_MIN_HEIGHT = 120;
+const IS_DEV = Boolean((globalThis as { __DEV__?: boolean }).__DEV__);
+
+function logExplorerSidebar(event: string, details: Record<string, unknown>): void {
+  if (!IS_DEV) {
+    return;
+  }
+  console.log(`[ExplorerSidebar] ${event}`, details);
+}
+
+function resolveKeyboardShift(rawHeight: number, inset: number): number {
+  "worklet";
+  // iOS can report a small accessory/prediction bar height during touch focus.
+  // Treat that as non-keyboard so terminal scroll gestures don't "bounce" the layout.
+  if (Platform.OS === "ios" && rawHeight < IOS_KEYBOARD_INSET_MIN_HEIGHT) {
+    return 0;
+  }
+  return Math.max(0, rawHeight - inset);
+}
 
 interface ExplorerSidebarProps {
   serverId: string;
   agentId: string;
   cwd: string;
+  isGit: boolean;
 }
 
-export function ExplorerSidebar({ serverId, agentId, cwd }: ExplorerSidebarProps) {
+export function ExplorerSidebar({ serverId, agentId, cwd, isGit }: ExplorerSidebarProps) {
   const { theme } = useUnistyles();
   const insets = useSafeAreaInsets();
   const isMobile =
@@ -39,9 +60,17 @@ export function ExplorerSidebar({ serverId, agentId, cwd }: ExplorerSidebarProps
   const closeToAgent = usePanelStore((state) => state.closeToAgent);
   const explorerTab = usePanelStore((state) => state.explorerTab);
   const explorerWidth = usePanelStore((state) => state.explorerWidth);
-  const setExplorerTab = usePanelStore((state) => state.setExplorerTab);
+  const setExplorerTabForCheckout = usePanelStore((state) => state.setExplorerTabForCheckout);
   const setExplorerWidth = usePanelStore((state) => state.setExplorerWidth);
   const { width: viewportWidth } = useWindowDimensions();
+  const { height: keyboardHeight } = useReanimatedKeyboardAnimation();
+  const bottomInset = useSharedValue(insets.bottom);
+  const closeTouchStartX = useSharedValue(0);
+  const closeTouchStartY = useSharedValue(0);
+
+  useEffect(() => {
+    bottomInset.value = insets.bottom;
+  }, [bottomInset, insets.bottom]);
 
   useEffect(() => {
     if (isMobile) {
@@ -73,15 +102,26 @@ export function ExplorerSidebar({ serverId, agentId, cwd }: ExplorerSidebarProps
   const startWidthRef = useRef(explorerWidth);
   const resizeWidth = useSharedValue(explorerWidth);
 
-  const handleClose = useCallback(() => {
-    closeToAgent();
-  }, [closeToAgent]);
+  const handleClose = useCallback(
+    (reason: string) => {
+      logExplorerSidebar("handleClose", {
+        reason,
+        isOpen,
+        mobileView,
+        desktopFileExplorerOpen,
+      });
+      closeToAgent();
+    },
+    [closeToAgent, desktopFileExplorerOpen, isOpen, mobileView]
+  );
+
+  const enableSidebarCloseGesture = isMobile && isOpen;
 
   const handleTabPress = useCallback(
     (tab: ExplorerTab) => {
-      setExplorerTab(tab);
+      setExplorerTabForCheckout({ serverId, cwd, isGit, tab });
     },
-    [setExplorerTab]
+    [cwd, isGit, serverId, setExplorerTabForCheckout]
   );
 
   // Swipe gesture to close (swipe right on mobile)
@@ -89,12 +129,45 @@ export function ExplorerSidebar({ serverId, agentId, cwd }: ExplorerSidebarProps
     () =>
       Gesture.Pan()
         .withRef(closeGestureRef)
-        .enabled(isMobile && isOpen)
-        // Only activate on rightward swipe (positive X), fail on leftward or vertical
-        // This allows ScrollViews using waitFor to scroll left normally
-        .activeOffsetX(15)
-        .failOffsetX(-10)
-        .failOffsetY([-10, 10])
+        .enabled(enableSidebarCloseGesture)
+        // Use manual activation so child views (e.g. WebView terminals) 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);
+
+          // 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;
         })
@@ -109,9 +182,15 @@ export function ExplorerSidebar({ serverId, agentId, cwd }: ExplorerSidebarProps
           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(handleClose)();
+            runOnJS(handleClose)("swipe-close-gesture");
           } else {
             animateToOpen();
           }
@@ -120,8 +199,7 @@ export function ExplorerSidebar({ serverId, agentId, cwd }: ExplorerSidebarProps
           isGesturing.value = false;
         }),
     [
-      isMobile,
-      isOpen,
+      enableSidebarCloseGesture,
       windowWidth,
       translateX,
       backdropOpacity,
@@ -130,6 +208,8 @@ export function ExplorerSidebar({ serverId, agentId, cwd }: ExplorerSidebarProps
       handleClose,
       isGesturing,
       closeGestureRef,
+      closeTouchStartX,
+      closeTouchStartY,
     ]
   );
 
@@ -171,37 +251,51 @@ export function ExplorerSidebar({ serverId, agentId, cwd }: ExplorerSidebarProps
     pointerEvents: backdropOpacity.value > 0.01 ? "auto" : "none",
   }));
 
+  const mobileKeyboardInsetStyle = useAnimatedStyle(() => {
+    const absoluteHeight = Math.abs(keyboardHeight.value);
+    const shift = resolveKeyboardShift(absoluteHeight, bottomInset.value);
+    return {
+      paddingBottom: bottomInset.value + shift,
+    };
+  });
+
   const resizeAnimatedStyle = useAnimatedStyle(() => ({
     width: resizeWidth.value,
   }));
 
-  // Mobile: full-screen overlay with gesture
-  const overlayPointerEvents = Platform.OS === "web" ? "auto" : "box-none";
+  // Mobile: full-screen overlay with gesture.
+  // On web, keep it interactive only while open so closed sidebars don't eat taps.
+  const overlayPointerEvents = Platform.OS === "web" ? (isOpen ? "auto" : "none") : "box-none";
 
   if (isMobile) {
     return (
       <View style={StyleSheet.absoluteFillObject} pointerEvents={overlayPointerEvents}>
         {/* Backdrop */}
         <Animated.View style={[styles.backdrop, backdropAnimatedStyle]}>
-          <Pressable style={styles.backdropPressable} onPress={handleClose} />
+          <Pressable
+            style={styles.backdropPressable}
+            onPress={() => handleClose("backdrop-press")}
+          />
         </Animated.View>
 
         <GestureDetector gesture={closeGesture} touchAction="pan-y">
           <Animated.View
             style={[
               styles.mobileSidebar,
-              { width: windowWidth, paddingTop: insets.top, paddingBottom: insets.bottom },
+              { width: windowWidth, paddingTop: insets.top },
               sidebarAnimatedStyle,
+              mobileKeyboardInsetStyle,
             ]}
             pointerEvents="auto"
           >
             <SidebarContent
               activeTab={explorerTab}
               onTabPress={handleTabPress}
-              onClose={handleClose}
+              onClose={() => handleClose("header-close-button")}
               serverId={serverId}
               agentId={agentId}
               cwd={cwd}
+              isGit={isGit}
               isMobile={isMobile}
             />
           </Animated.View>
@@ -230,10 +324,11 @@ export function ExplorerSidebar({ serverId, agentId, cwd }: ExplorerSidebarProps
       <SidebarContent
         activeTab={explorerTab}
         onTabPress={handleTabPress}
-        onClose={handleClose}
+        onClose={() => handleClose("desktop-close-button")}
         serverId={serverId}
         agentId={agentId}
         cwd={cwd}
+        isGit={isGit}
         isMobile={false}
       />
     </Animated.View>
@@ -247,6 +342,7 @@ interface SidebarContentProps {
   serverId: string;
   agentId: string;
   cwd: string;
+  isGit: boolean;
   isMobile: boolean;
 }
 
@@ -257,44 +353,62 @@ function SidebarContent({
   serverId,
   agentId,
   cwd,
+  isGit,
   isMobile,
 }: SidebarContentProps) {
   const { theme } = useUnistyles();
-  const { status } = useCheckoutStatusQuery({ serverId, cwd });
-  const isGit = status?.isGit ?? false;
+  const resolvedTab: ExplorerTab =
+    !isGit && activeTab === "changes" ? "files" : activeTab;
 
   return (
     <View style={styles.sidebarContent} pointerEvents="auto">
       {/* Header with tabs and close button */}
       <View style={styles.header} testID="explorer-header">
         <View style={styles.tabsContainer}>
-          <Pressable
-            style={[styles.tab, activeTab === "changes" && styles.tabActive]}
-            onPress={() => onTabPress("changes")}
-          >
-            <Text
-              style={[
-                styles.tabText,
-                activeTab === "changes" && styles.tabTextActive,
-                !isGit && styles.tabTextMuted,
-              ]}
+          {isGit && (
+            <Pressable
+              testID="explorer-tab-changes"
+              style={[styles.tab, resolvedTab === "changes" && styles.tabActive]}
+              onPress={() => onTabPress("changes")}
             >
-              Changes
-            </Text>
-          </Pressable>
+              <Text
+                style={[
+                  styles.tabText,
+                  resolvedTab === "changes" && styles.tabTextActive,
+                ]}
+              >
+                Changes
+              </Text>
+            </Pressable>
+          )}
           <Pressable
-            style={[styles.tab, activeTab === "files" && styles.tabActive]}
+            testID="explorer-tab-files"
+            style={[styles.tab, resolvedTab === "files" && styles.tabActive]}
             onPress={() => onTabPress("files")}
           >
             <Text
               style={[
                 styles.tabText,
-                activeTab === "files" && styles.tabTextActive,
+                resolvedTab === "files" && styles.tabTextActive,
               ]}
             >
               Files
             </Text>
           </Pressable>
+          <Pressable
+            testID="explorer-tab-terminals"
+            style={[styles.tab, resolvedTab === "terminals" && styles.tabActive]}
+            onPress={() => onTabPress("terminals")}
+          >
+            <Text
+              style={[
+                styles.tabText,
+                resolvedTab === "terminals" && styles.tabTextActive,
+              ]}
+            >
+              Terminals
+            </Text>
+          </Pressable>
         </View>
         <View style={styles.headerRightSection}>
           {isMobile && (
@@ -307,12 +421,15 @@ function SidebarContent({
 
       {/* Content based on active tab */}
       <View style={styles.contentArea} testID="explorer-content-area">
-        {activeTab === "changes" && (
+        {resolvedTab === "changes" && (
           <GitDiffPane serverId={serverId} agentId={agentId} cwd={cwd} />
         )}
-        {activeTab === "files" && (
+        {resolvedTab === "files" && (
           <FileExplorerPane serverId={serverId} agentId={agentId} />
         )}
+        {resolvedTab === "terminals" && (
+          <TerminalPane serverId={serverId} cwd={cwd} />
+        )}
       </View>
     </View>
   );

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

@@ -1,9 +1,13 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import {
   ActivityIndicator,
   FlatList,
   Image as RNImage,
   ListRenderItemInfo,
+  type LayoutChangeEvent,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
   Pressable,
   ScrollView as RNScrollView,
   Text,
@@ -13,9 +17,13 @@ import {
 import { ScrollView, Gesture, GestureDetector } from "react-native-gesture-handler";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import Animated, {
+  cancelAnimation,
+  Easing,
   runOnJS,
   useAnimatedStyle,
   useSharedValue,
+  withRepeat,
+  withTiming,
 } from "react-native-reanimated";
 import { Fonts } from "@/constants/theme";
 import * as Clipboard from "expo-clipboard";
@@ -33,6 +41,7 @@ import {
   FolderOpen,
   Image as ImageIcon,
   MoreVertical,
+  RotateCw,
   X,
 } from "lucide-react-native";
 import type {
@@ -40,7 +49,7 @@ import type {
   ExplorerEntry,
   ExplorerFile,
 } from "@/stores/session-store";
-import { useDaemonConnections } from "@/contexts/daemon-connections-context";
+import { useDaemonRegistry } from "@/contexts/daemon-registry-context";
 import { useSessionStore } from "@/stores/session-store";
 import { useDownloadStore } from "@/stores/download-store";
 import {
@@ -57,6 +66,10 @@ import {
   type SortOption,
 } from "@/stores/panel-store";
 import { formatTimeAgo } from "@/utils/time";
+import {
+  WebDesktopScrollbarOverlay,
+  useWebDesktopScrollbarMetrics,
+} from "@/components/web-desktop-scrollbar";
 
 const SORT_OPTIONS: { value: SortOption; label: string }[] = [
   { value: "name", label: "Name" },
@@ -80,9 +93,13 @@ export function FileExplorerPane({ serverId, agentId }: FileExplorerPaneProps) {
   const { theme } = useUnistyles();
   const isMobile =
     UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const showDesktopWebScrollbar = Platform.OS === "web" && !isMobile;
 
-  const { connectionStates } = useDaemonConnections();
-  const daemonProfile = connectionStates.get(serverId)?.daemon;
+  const { daemons } = useDaemonRegistry();
+  const daemonProfile = useMemo(
+    () => daemons.find((daemon) => daemon.serverId === serverId),
+    [daemons, serverId]
+  );
   const agentExists = useSessionStore((state) =>
     agentId && state.sessions[serverId]
       ? state.sessions[serverId]?.agents.has(agentId)
@@ -130,6 +147,8 @@ export function FileExplorerPane({ serverId, agentId }: FileExplorerPaneProps) {
   const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => new Set(["."]));
   const [containerWidth, setContainerWidth] = useState(0);
   const wasInlinePreviewVisibleRef = useRef(false);
+  const treeListRef = useRef<FlatList<TreeRow>>(null);
+  const treeScrollbarMetrics = useWebDesktopScrollbarMetrics();
 
   // Bottom sheet for file preview (mobile)
   const previewSheetRef = useRef<BottomSheetModal>(null);
@@ -263,6 +282,78 @@ export function FileExplorerPane({ serverId, agentId }: FileExplorerPaneProps) {
     setSortOption(SORT_OPTIONS[nextIndex].value);
   }, [sortOption, setSortOption]);
 
+  const { refetch: refetchExplorer, isFetching: isRefreshFetching } = useQuery({
+    queryKey: ["fileExplorerRefresh", serverId, agentId],
+    queryFn: async () => {
+      if (!agentId) {
+        return null;
+      }
+
+      const directoryPaths = Array.from(expandedPaths);
+      if (!directoryPaths.includes(".")) {
+        directoryPaths.unshift(".");
+      }
+
+      await Promise.all([
+        ...directoryPaths.map((path) =>
+          requestDirectoryListing(agentId, path, {
+            recordHistory: false,
+            setCurrentPath: false,
+          })
+        ),
+        ...(selectedEntryPath ? [requestFilePreview(agentId, selectedEntryPath)] : []),
+      ]);
+      return null;
+    },
+    enabled: false,
+  });
+
+  const handleRefresh = useCallback(() => {
+    void refetchExplorer();
+  }, [refetchExplorer]);
+  const refreshIconRotation = useSharedValue(0);
+
+  useEffect(() => {
+    if (isRefreshFetching) {
+      refreshIconRotation.value = 0;
+      refreshIconRotation.value = withRepeat(
+        withTiming(360, {
+          duration: 700,
+          easing: Easing.linear,
+        }),
+        -1,
+        false
+      );
+      return;
+    }
+
+    cancelAnimation(refreshIconRotation);
+    const remainder = refreshIconRotation.value % 360;
+    if (Math.abs(remainder) < 0.001) {
+      refreshIconRotation.value = 0;
+      return;
+    }
+
+    const remaining = 360 - remainder;
+    const duration = Math.max(80, Math.round((remaining / 360) * 700));
+    refreshIconRotation.value = withTiming(
+      360,
+      {
+        duration,
+        easing: Easing.linear,
+      },
+      (finished) => {
+        if (finished) {
+          refreshIconRotation.value = 0;
+        }
+      }
+    );
+  }, [isRefreshFetching, refreshIconRotation]);
+
+  const refreshIconAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${refreshIconRotation.value}deg` }],
+  }));
+
   const currentSortLabel = SORT_OPTIONS.find((opt) => opt.value === sortOption)?.label ?? "Name";
 
   const treeRows = useMemo(() => {
@@ -506,6 +597,24 @@ export function FileExplorerPane({ serverId, agentId }: FileExplorerPaneProps) {
     });
   }, [agentId, errorRecoveryPath, requestDirectoryListing, selectExplorerEntry]);
 
+  const handleTreeListScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (showDesktopWebScrollbar) {
+        treeScrollbarMetrics.onScroll(event);
+      }
+    },
+    [showDesktopWebScrollbar, treeScrollbarMetrics]
+  );
+
+  const handleTreeListLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      if (showDesktopWebScrollbar) {
+        treeScrollbarMetrics.onLayout(event);
+      }
+    },
+    [showDesktopWebScrollbar, treeScrollbarMetrics]
+  );
+
   if (!agentExists) {
     return (
       <View style={styles.centerState}>
@@ -579,7 +688,12 @@ export function FileExplorerPane({ serverId, agentId }: FileExplorerPaneProps) {
                 </View>
               </View>
 
-              <FilePreviewBody preview={preview} isLoading={isPreviewLoading} variant="inline" />
+              <FilePreviewBody
+                preview={preview}
+                isLoading={isPreviewLoading}
+                variant="inline"
+                showDesktopWebScrollbar={showDesktopWebScrollbar}
+              />
             </View>
           ) : null}
 
@@ -603,39 +717,125 @@ export function FileExplorerPane({ serverId, agentId }: FileExplorerPaneProps) {
               </GestureDetector>
               <View style={styles.paneHeader} testID="files-pane-header">
                 <View style={styles.paneHeaderLeft} />
-                <Pressable style={styles.sortButton} onPress={handleSortCycle}>
-                  <Text style={styles.sortButtonText}>{currentSortLabel}</Text>
-                </Pressable>
+                <View style={styles.paneHeaderRight}>
+                  <Pressable
+                    onPress={handleRefresh}
+                    disabled={isRefreshFetching}
+                    hitSlop={8}
+                    style={({ hovered, pressed }) => [
+                      styles.iconButton,
+                      (hovered || pressed) && styles.iconButtonHovered,
+                      pressed && styles.iconButtonPressed,
+                    ]}
+                    accessibilityRole="button"
+                    accessibilityLabel="Refresh files"
+                  >
+                    <Animated.View style={[styles.refreshIcon, refreshIconAnimatedStyle]}>
+                      <RotateCw size={16} color={theme.colors.foregroundMuted} />
+                    </Animated.View>
+                  </Pressable>
+                  <Pressable style={styles.sortButton} onPress={handleSortCycle}>
+                    <Text style={styles.sortButtonText}>{currentSortLabel}</Text>
+                  </Pressable>
+                </View>
               </View>
               <FlatList
+                ref={treeListRef}
                 style={styles.treeList}
                 data={treeRows}
                 renderItem={renderTreeRow}
                 keyExtractor={(row) => row.entry.path}
+                testID="file-explorer-tree-scroll"
                 contentContainerStyle={styles.entriesContent}
+                onLayout={
+                  showDesktopWebScrollbar ? handleTreeListLayout : undefined
+                }
+                onScroll={
+                  showDesktopWebScrollbar ? handleTreeListScroll : undefined
+                }
+                onContentSizeChange={
+                  showDesktopWebScrollbar
+                    ? treeScrollbarMetrics.onContentSizeChange
+                    : undefined
+                }
+                scrollEventThrottle={showDesktopWebScrollbar ? 16 : undefined}
+                showsVerticalScrollIndicator={!showDesktopWebScrollbar}
                 initialNumToRender={24}
                 maxToRenderPerBatch={40}
                 windowSize={12}
               />
+              <WebDesktopScrollbarOverlay
+                enabled={showDesktopWebScrollbar}
+                metrics={treeScrollbarMetrics}
+                onScrollToOffset={(nextOffset) => {
+                  treeListRef.current?.scrollToOffset({
+                    offset: nextOffset,
+                    animated: false,
+                  });
+                }}
+              />
             </Animated.View>
           ) : (
             <View style={[styles.treePane, styles.treePaneFill]}>
               <View style={styles.paneHeader} testID="files-pane-header">
                 <View style={styles.paneHeaderLeft} />
-                <Pressable style={styles.sortButton} onPress={handleSortCycle}>
-                  <Text style={styles.sortButtonText}>{currentSortLabel}</Text>
-                </Pressable>
+                <View style={styles.paneHeaderRight}>
+                  <Pressable
+                    onPress={handleRefresh}
+                    disabled={isRefreshFetching}
+                    hitSlop={8}
+                    style={({ hovered, pressed }) => [
+                      styles.iconButton,
+                      (hovered || pressed) && styles.iconButtonHovered,
+                      pressed && styles.iconButtonPressed,
+                    ]}
+                    accessibilityRole="button"
+                    accessibilityLabel="Refresh files"
+                  >
+                    <Animated.View style={[styles.refreshIcon, refreshIconAnimatedStyle]}>
+                      <RotateCw size={16} color={theme.colors.foregroundMuted} />
+                    </Animated.View>
+                  </Pressable>
+                  <Pressable style={styles.sortButton} onPress={handleSortCycle}>
+                    <Text style={styles.sortButtonText}>{currentSortLabel}</Text>
+                  </Pressable>
+                </View>
               </View>
               <FlatList
+                ref={treeListRef}
                 style={styles.treeList}
                 data={treeRows}
                 renderItem={renderTreeRow}
                 keyExtractor={(row) => row.entry.path}
+                testID="file-explorer-tree-scroll"
                 contentContainerStyle={styles.entriesContent}
+                onLayout={
+                  showDesktopWebScrollbar ? handleTreeListLayout : undefined
+                }
+                onScroll={
+                  showDesktopWebScrollbar ? handleTreeListScroll : undefined
+                }
+                onContentSizeChange={
+                  showDesktopWebScrollbar
+                    ? treeScrollbarMetrics.onContentSizeChange
+                    : undefined
+                }
+                scrollEventThrottle={showDesktopWebScrollbar ? 16 : undefined}
+                showsVerticalScrollIndicator={!showDesktopWebScrollbar}
                 initialNumToRender={24}
                 maxToRenderPerBatch={40}
                 windowSize={12}
               />
+              <WebDesktopScrollbarOverlay
+                enabled={showDesktopWebScrollbar}
+                metrics={treeScrollbarMetrics}
+                onScrollToOffset={(nextOffset) => {
+                  treeListRef.current?.scrollToOffset({
+                    offset: nextOffset,
+                    animated: false,
+                  });
+                }}
+              />
             </View>
           )}
         </View>
@@ -661,7 +861,12 @@ export function FileExplorerPane({ serverId, agentId }: FileExplorerPaneProps) {
               <X size={20} color={theme.colors.foregroundMuted} />
             </Pressable>
           </View>
-          <FilePreviewBody preview={preview} isLoading={isPreviewLoading} variant="sheet" />
+          <FilePreviewBody
+            preview={preview}
+            isLoading={isPreviewLoading}
+            variant="sheet"
+            showDesktopWebScrollbar={false}
+          />
         </BottomSheetModal>
       ) : null}
     </View>
@@ -672,11 +877,36 @@ function FilePreviewBody({
   preview,
   isLoading,
   variant,
+  showDesktopWebScrollbar,
 }: {
   preview: ExplorerFile | null;
   isLoading: boolean;
   variant: "inline" | "sheet";
+  showDesktopWebScrollbar: boolean;
 }) {
+  const enablePreviewDesktopScrollbar =
+    variant === "inline" && showDesktopWebScrollbar;
+  const previewScrollRef = useRef<RNScrollView>(null);
+  const previewScrollbarMetrics = useWebDesktopScrollbarMetrics();
+
+  const handlePreviewScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (enablePreviewDesktopScrollbar) {
+        previewScrollbarMetrics.onScroll(event);
+      }
+    },
+    [enablePreviewDesktopScrollbar, previewScrollbarMetrics]
+  );
+
+  const handlePreviewLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      if (enablePreviewDesktopScrollbar) {
+        previewScrollbarMetrics.onLayout(event);
+      }
+    },
+    [enablePreviewDesktopScrollbar, previewScrollbarMetrics]
+  );
+
   if (isLoading && !preview) {
     return (
       <View style={styles.sheetCenterState}>
@@ -710,16 +940,37 @@ function FilePreviewBody({
       );
     }
     return (
-      <RNScrollView style={styles.previewContent}>
+      <View style={styles.previewScrollContainer}>
         <RNScrollView
-          horizontal
-          nestedScrollEnabled
-          showsHorizontalScrollIndicator
-          contentContainerStyle={styles.previewCodeScrollContent}
+          ref={previewScrollRef}
+          style={styles.previewContent}
+          onLayout={enablePreviewDesktopScrollbar ? handlePreviewLayout : undefined}
+          onScroll={enablePreviewDesktopScrollbar ? handlePreviewScroll : undefined}
+          onContentSizeChange={
+            enablePreviewDesktopScrollbar
+              ? previewScrollbarMetrics.onContentSizeChange
+              : undefined
+          }
+          scrollEventThrottle={enablePreviewDesktopScrollbar ? 16 : undefined}
+          showsVerticalScrollIndicator={!enablePreviewDesktopScrollbar}
         >
-          <Text style={styles.codeText}>{preview.content}</Text>
+          <RNScrollView
+            horizontal
+            nestedScrollEnabled
+            showsHorizontalScrollIndicator
+            contentContainerStyle={styles.previewCodeScrollContent}
+          >
+            <Text style={styles.codeText}>{preview.content}</Text>
+          </RNScrollView>
         </RNScrollView>
-      </RNScrollView>
+        <WebDesktopScrollbarOverlay
+          enabled={enablePreviewDesktopScrollbar}
+          metrics={previewScrollbarMetrics}
+          onScrollToOffset={(nextOffset) => {
+            previewScrollRef.current?.scrollTo({ y: nextOffset, animated: false });
+          }}
+        />
+      </View>
     );
   }
 
@@ -738,15 +989,37 @@ function FilePreviewBody({
       );
     }
     return (
-      <RNScrollView contentContainerStyle={styles.previewImageScrollContent}>
-        <RNImage
-          source={{
-            uri: `data:${preview.mimeType ?? "image/png"};base64,${preview.content}`,
+      <View style={styles.previewScrollContainer}>
+        <RNScrollView
+          ref={previewScrollRef}
+          style={styles.previewContent}
+          contentContainerStyle={styles.previewImageScrollContent}
+          onLayout={enablePreviewDesktopScrollbar ? handlePreviewLayout : undefined}
+          onScroll={enablePreviewDesktopScrollbar ? handlePreviewScroll : undefined}
+          onContentSizeChange={
+            enablePreviewDesktopScrollbar
+              ? previewScrollbarMetrics.onContentSizeChange
+              : undefined
+          }
+          scrollEventThrottle={enablePreviewDesktopScrollbar ? 16 : undefined}
+          showsVerticalScrollIndicator={!enablePreviewDesktopScrollbar}
+        >
+          <RNImage
+            source={{
+              uri: `data:${preview.mimeType ?? "image/png"};base64,${preview.content}`,
+            }}
+            style={styles.previewImage}
+            resizeMode="contain"
+          />
+        </RNScrollView>
+        <WebDesktopScrollbarOverlay
+          enabled={enablePreviewDesktopScrollbar}
+          metrics={previewScrollbarMetrics}
+          onScrollToOffset={(nextOffset) => {
+            previewScrollRef.current?.scrollTo({ y: nextOffset, animated: false });
           }}
-          style={styles.previewImage}
-          resizeMode="contain"
         />
-      </RNScrollView>
+      </View>
     );
   }
 
@@ -1023,6 +1296,12 @@ const styles = StyleSheet.create((theme) => ({
     flex: 1,
     minWidth: 0,
   },
+  paneHeaderRight: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    flexShrink: 0,
+  },
   previewHeaderRight: {
     flexDirection: "row",
     alignItems: "center",
@@ -1166,9 +1445,24 @@ const styles = StyleSheet.create((theme) => ({
   iconButtonHovered: {
     backgroundColor: theme.colors.surface2,
   },
+  iconButtonPressed: {
+    opacity: 0.8,
+    transform: [{ scale: 0.96 }],
+  },
+  refreshIcon: {
+    width: 16,
+    height: 16,
+    alignItems: "center",
+    justifyContent: "center",
+  },
   previewContent: {
     flex: 1,
   },
+  previewScrollContainer: {
+    flex: 1,
+    minHeight: 0,
+    position: "relative",
+  },
   previewCodeScrollContent: {
     paddingTop: theme.spacing[3],
     paddingHorizontal: theme.spacing[3],

packages/app/src/components/git-action-visibility.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest";
+
+import { shouldShowMergeFromBaseAction } from "./git-action-visibility";
+
+describe("git-action-visibility", () => {
+  describe("shouldShowMergeFromBaseAction", () => {
+    it("shows on non-base branches", () => {
+      expect(
+        shouldShowMergeFromBaseAction({
+          isOnBaseBranch: false,
+          hasRemote: false,
+          aheadOfOrigin: 0,
+          behindOfOrigin: 0,
+        })
+      ).toBe(true);
+    });
+
+    it("hides on base branch when no remote exists", () => {
+      expect(
+        shouldShowMergeFromBaseAction({
+          isOnBaseBranch: true,
+          hasRemote: false,
+          aheadOfOrigin: 0,
+          behindOfOrigin: 0,
+        })
+      ).toBe(false);
+    });
+
+    it("hides on base branch when local is in sync with origin", () => {
+      expect(
+        shouldShowMergeFromBaseAction({
+          isOnBaseBranch: true,
+          hasRemote: true,
+          aheadOfOrigin: 0,
+          behindOfOrigin: 0,
+        })
+      ).toBe(false);
+    });
+
+    it("shows on base branch when ahead of origin", () => {
+      expect(
+        shouldShowMergeFromBaseAction({
+          isOnBaseBranch: true,
+          hasRemote: true,
+          aheadOfOrigin: 1,
+          behindOfOrigin: 0,
+        })
+      ).toBe(true);
+    });
+
+    it("shows on base branch when behind origin", () => {
+      expect(
+        shouldShowMergeFromBaseAction({
+          isOnBaseBranch: true,
+          hasRemote: true,
+          aheadOfOrigin: 0,
+          behindOfOrigin: 2,
+        })
+      ).toBe(true);
+    });
+  });
+});

packages/app/src/components/git-action-visibility.ts

@@ -0,0 +1,14 @@
+export function shouldShowMergeFromBaseAction(input: {
+  isOnBaseBranch: boolean;
+  hasRemote: boolean;
+  aheadOfOrigin: number;
+  behindOfOrigin: number;
+}): boolean {
+  if (!input.isOnBaseBranch) {
+    return true;
+  }
+  if (!input.hasRemote) {
+    return false;
+  }
+  return input.aheadOfOrigin > 0 || input.behindOfOrigin > 0;
+}

packages/app/src/components/git-diff-pane.tsx

@@ -7,13 +7,13 @@ import {
   Pressable,
   FlatList,
   Platform,
+  type LayoutChangeEvent,
   type NativeSyntheticEvent,
   type NativeScrollEvent,
 } from "react-native";
 import { ScrollView, type ScrollView as ScrollViewType } from "react-native-gesture-handler";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import * as Linking from "expo-linking";
 import {
   Archive,
   ChevronDown,
@@ -40,6 +40,7 @@ import { useHorizontalScrollOptional } from "@/contexts/horizontal-scroll-contex
 import { useExplorerSidebarAnimation } from "@/contexts/explorer-sidebar-animation-context";
 import { Fonts } from "@/constants/theme";
 import { getNowMs, isPerfLoggingEnabled, perfLog } from "@/utils/perf";
+import { shouldAnchorHeaderBeforeCollapse } from "@/utils/git-diff-scroll";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -49,6 +50,13 @@ import {
   type ActionStatus,
 } from "@/components/ui/dropdown-menu";
 import { GitHubIcon } from "@/components/icons/github-icon";
+import {
+  WebDesktopScrollbarOverlay,
+  useWebDesktopScrollbarMetrics,
+} from "@/components/web-desktop-scrollbar";
+import { buildNewAgentRoute, resolveNewAgentWorkingDir } from "@/utils/new-agent-routing";
+import { openExternalUrl } from "@/utils/open-external-url";
+import { shouldShowMergeFromBaseAction } from "./git-action-visibility";
 
 // =============================================================================
 // Git Actions Data Structure
@@ -82,11 +90,7 @@ interface GitActions {
 }
 
 function openURLInNewTab(url: string): void {
-  if (Platform.OS === "web") {
-    window.open(url, "_blank", "noopener");
-  } else {
-    void Linking.openURL(url);
-  }
+  void openExternalUrl(url);
 }
 
 const DIFF_PANE_LOG_TAG = "[GitDiffPane]";
@@ -470,9 +474,13 @@ type DiffFlatItem =
 
 export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
   const { theme } = useUnistyles();
+  const isMobile =
+    UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const showDesktopWebScrollbar = Platform.OS === "web" && !isMobile;
   const router = useRouter();
   const [diffModeOverride, setDiffModeOverride] = useState<"uncommitted" | "base" | null>(null);
   const [actionError, setActionError] = useState<string | null>(null);
+  const [postShipArchiveSuggested, setPostShipArchiveSuggested] = useState(false);
   const [shipDefault, setShipDefault] = useState<"merge" | "pr">("merge");
   const { status, isLoading: isStatusLoading, isFetching: isStatusFetching, isError: isStatusError, error: statusError, refresh: refreshStatus } =
     useCheckoutStatusQuery({ serverId, cwd });
@@ -506,6 +514,7 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
   });
   const {
     status: prStatus,
+    githubFeaturesEnabled,
     payloadError: prPayloadError,
     refresh: refreshPrStatus,
   } = useCheckoutPrStatusQuery({
@@ -517,6 +526,9 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
   const [isManualRefresh, setIsManualRefresh] = useState(false);
   const [expandedByPath, setExpandedByPath] = useState<Record<string, boolean>>({});
   const diffListRef = useRef<FlatList<DiffFlatItem>>(null);
+  const diffScrollbarMetrics = useWebDesktopScrollbarMetrics();
+  const diffListScrollOffsetRef = useRef(0);
+  const diffListViewportHeightRef = useRef(0);
   const headerHeightByPathRef = useRef<Record<string, number>>({});
   const bodyHeightByPathRef = useRef<Record<string, number>>({});
   const defaultHeaderHeightRef = useRef<number>(44);
@@ -621,6 +633,30 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
     bodyHeightByPathRef.current[path] = height;
   }, []);
 
+  const handleDiffListScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      diffListScrollOffsetRef.current = event.nativeEvent.contentOffset.y;
+      if (showDesktopWebScrollbar) {
+        diffScrollbarMetrics.onScroll(event);
+      }
+    },
+    [diffScrollbarMetrics, showDesktopWebScrollbar]
+  );
+
+  const handleDiffListLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const height = event.nativeEvent.layout.height;
+      if (!Number.isFinite(height) || height <= 0) {
+        return;
+      }
+      diffListViewportHeightRef.current = height;
+      if (showDesktopWebScrollbar) {
+        diffScrollbarMetrics.onLayout(event);
+      }
+    },
+    [diffScrollbarMetrics, showDesktopWebScrollbar]
+  );
+
   const computeHeaderOffset = useCallback(
     (path: string): number => {
       const defaultHeaderHeight = defaultHeaderHeightRef.current;
@@ -644,9 +680,19 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
       const isCurrentlyExpanded = expandedByPath[path] ?? false;
       const nextExpanded = !isCurrentlyExpanded;
       const targetOffset = isCurrentlyExpanded ? computeHeaderOffset(path) : null;
+      const headerHeight = headerHeightByPathRef.current[path] ?? defaultHeaderHeightRef.current;
+      const shouldAnchor =
+        isCurrentlyExpanded &&
+        targetOffset !== null &&
+        shouldAnchorHeaderBeforeCollapse({
+          headerOffset: targetOffset,
+          headerHeight,
+          viewportOffset: diffListScrollOffsetRef.current,
+          viewportHeight: diffListViewportHeightRef.current,
+        });
 
       // Anchor to the clicked header before collapsing so visual context is preserved.
-      if (isCurrentlyExpanded && targetOffset !== null) {
+      if (shouldAnchor && targetOffset !== null) {
         diffListRef.current?.scrollToOffset({
           offset: targetOffset,
           animated: false,
@@ -772,10 +818,14 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
     }
     void persistShipDefault("merge");
     setActionError(null);
-    void runMergeBranch({ serverId, cwd, baseRef }).catch((err) => {
-      const message = err instanceof Error ? err.message : "Failed to merge";
-      setActionError(message);
-    });
+    void runMergeBranch({ serverId, cwd, baseRef })
+      .then(() => {
+        setPostShipArchiveSuggested(true);
+      })
+      .catch((err) => {
+        const message = err instanceof Error ? err.message : "Failed to merge";
+        setActionError(message);
+      });
   }, [baseRef, persistShipDefault, runMergeBranch, serverId, cwd]);
 
   const handleMergeFromBase = useCallback(() => {
@@ -797,15 +847,16 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
       return;
     }
     setActionError(null);
+    const targetWorkingDir = resolveNewAgentWorkingDir(cwd, status ?? null);
     void runArchiveWorktree({ serverId, cwd, worktreePath })
       .then(() => {
-        router.replace("/agent" as any);
+        router.replace(buildNewAgentRoute(serverId, targetWorkingDir) as any);
       })
       .catch((err) => {
         const message = err instanceof Error ? err.message : "Failed to archive worktree";
         setActionError(message);
       });
-  }, [runArchiveWorktree, router, serverId, cwd, status?.cwd]);
+  }, [runArchiveWorktree, router, serverId, cwd, status]);
 
   const renderFlatItem = useCallback(
     ({ item }: { item: DiffFlatItem }) => {
@@ -840,7 +891,7 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
   const diffErrorMessage =
     diffPayloadError?.message ??
     (isDiffError && diffError instanceof Error ? diffError.message : null);
-  const prErrorMessage = prPayloadError?.message ?? null;
+  const prErrorMessage = githubFeaturesEnabled ? prPayloadError?.message ?? null : null;
   const branchLabel =
     gitStatus?.currentBranch && gitStatus.currentBranch !== "HEAD"
       ? gitStatus.currentBranch
@@ -850,6 +901,7 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
   const actionsDisabled = !isGit || Boolean(status?.error) || isStatusLoading;
   const aheadCount = gitStatus?.aheadBehind?.ahead ?? 0;
   const aheadOfOrigin = gitStatus?.aheadOfOrigin ?? 0;
+  const behindOfOrigin = gitStatus?.behindOfOrigin ?? 0;
   const baseRefLabel = useMemo(() => {
     if (!baseRef) return "base";
     const trimmed = baseRef.replace(/^refs\/(heads|remotes)\//, "").trim();
@@ -863,12 +915,27 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
       ? undefined
       : `${branchLabel} -> ${baseRefLabel}`;
   }, [baseRefLabel, branchLabel]);
+  const hasPullRequest = Boolean(prStatus?.url);
+  const hasRemote = gitStatus?.hasRemote ?? false;
+  const isPaseoOwnedWorktree = gitStatus?.isPaseoOwnedWorktree ?? false;
+  const isMergedPullRequest = Boolean(prStatus?.isMerged);
+  const currentBranch = gitStatus?.currentBranch;
+  const isOnBaseBranch = currentBranch === baseRefLabel;
+  const shouldPromoteArchive =
+    isPaseoOwnedWorktree &&
+    !hasUncommittedChanges &&
+    (postShipArchiveSuggested || isMergedPullRequest);
+
   const commitDisabled = actionsDisabled || commitStatus === "pending";
   const prDisabled = actionsDisabled || prCreateStatus === "pending";
   const mergeDisabled =
     actionsDisabled || mergeStatus === "pending" || hasUncommittedChanges || !baseRef;
   const mergeFromBaseDisabled =
-    actionsDisabled || mergeFromBaseStatus === "pending" || hasUncommittedChanges || !baseRef;
+    actionsDisabled ||
+    mergeFromBaseStatus === "pending" ||
+    hasUncommittedChanges ||
+    !baseRef ||
+    (isOnBaseBranch && !hasRemote);
   const pushDisabled =
     actionsDisabled || pushStatus === "pending" || !(gitStatus?.hasRemote ?? false);
   const archiveDisabled =
@@ -930,6 +997,15 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
         style={styles.scrollView}
         contentContainerStyle={styles.contentContainer}
         testID="git-diff-scroll"
+        onLayout={handleDiffListLayout}
+        onScroll={handleDiffListScroll}
+        onContentSizeChange={
+          showDesktopWebScrollbar
+            ? diffScrollbarMetrics.onContentSizeChange
+            : undefined
+        }
+        scrollEventThrottle={16}
+        showsVerticalScrollIndicator={!showDesktopWebScrollbar}
         onRefresh={handleRefresh}
         refreshing={isManualRefresh && isDiffFetching}
         // Mixed-height rows (header + potentially very large body) are prone to clipping artifacts.
@@ -942,11 +1018,9 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
     );
   }
 
-  const hasPullRequest = Boolean(prStatus?.url);
-  const hasRemote = gitStatus?.hasRemote ?? false;
-  const isPaseoOwnedWorktree = gitStatus?.isPaseoOwnedWorktree ?? false;
-  const currentBranch = gitStatus?.currentBranch;
-  const isOnBaseBranch = currentBranch === baseRefLabel;
+  useEffect(() => {
+    setPostShipArchiveSuggested(false);
+  }, [cwd]);
 
   // ==========================================================================
   // Git Actions (Data-Oriented)
@@ -993,7 +1067,7 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
     }
 
     // View PR - when PR exists
-    if (hasPullRequest && prStatus?.url) {
+    if (githubFeaturesEnabled && hasPullRequest && prStatus?.url) {
       const prUrl = prStatus.url;
       allActions.set("view-pr", {
         id: "view-pr",
@@ -1008,7 +1082,7 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
     }
 
     // Create PR - when ahead of base and no PR
-    if (aheadCount > 0 && !hasPullRequest) {
+    if (githubFeaturesEnabled && aheadCount > 0 && !hasPullRequest) {
       allActions.set("create-pr", {
         id: "create-pr",
         label: "Create PR",
@@ -1036,16 +1110,28 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
       });
     }
 
-    // Update from base - only when not on base branch
-    if (!isOnBaseBranch) {
+    // Update/sync from base
+    if (
+      shouldShowMergeFromBaseAction({
+        isOnBaseBranch,
+        hasRemote,
+        aheadOfOrigin,
+        behindOfOrigin,
+      })
+    ) {
       allActions.set("merge-from-base", {
         id: "merge-from-base",
-        label: `Update from ${baseRefLabel}`,
+        label: isOnBaseBranch ? "Sync" : `Update from ${baseRefLabel}`,
         pendingLabel: "Updating...",
         successLabel: "Updated",
         disabled: mergeFromBaseDisabled,
         status: mergeFromBaseStatus,
-        description: hasUncommittedChanges ? "Requires clean working tree" : undefined,
+        description:
+          hasUncommittedChanges
+            ? "Requires clean working tree"
+            : isOnBaseBranch && !hasRemote
+              ? "No remote configured"
+              : undefined,
         icon: <RefreshCcw size={16} color={theme.colors.foregroundMuted} />,
         handler: handleMergeFromBase,
       });
@@ -1068,8 +1154,12 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
     // Select primary action (priority rules)
     let primaryActionId: GitActionId | null = null;
 
+    // Rule 0: Post-ship in worktree -> Archive
+    if (shouldPromoteArchive && allActions.has("archive-worktree")) {
+      primaryActionId = "archive-worktree";
+    }
     // Rule 1: Uncommitted changes → Commit
-    if (hasUncommittedChanges) {
+    else if (hasUncommittedChanges) {
       primaryActionId = "commit";
     }
     // Rule 2: Ahead of origin → Push
@@ -1080,7 +1170,11 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
     else if (hasPullRequest) {
       primaryActionId = "view-pr";
     }
-    // Rule 4: Ahead of base → Ship action based on preference
+    // Rule 4: On base branch -> surface sync explicitly
+    else if (isOnBaseBranch && allActions.has("merge-from-base")) {
+      primaryActionId = "merge-from-base";
+    }
+    // Rule 5: Ahead of base → Ship action based on preference
     else if (aheadCount > 0) {
       const preferred: GitActionId = shipDefault === "merge" ? "merge-branch" : "create-pr";
       const fallback: GitActionId = shipDefault === "merge" ? "create-pr" : "merge-branch";
@@ -1100,20 +1194,25 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
     const primary = primaryActionId ? allActions.get(primaryActionId) ?? null : null;
 
     // Secondary actions: ship-related + merge from base + push (excluding primary)
-    const secondaryIds: GitActionId[] = ["merge-branch", "create-pr", "view-pr", "merge-from-base", "push"];
+    const secondaryIds: GitActionId[] = [
+      "merge-branch",
+      "create-pr",
+      "view-pr",
+      "merge-from-base",
+      "push",
+      "archive-worktree",
+    ];
     const secondary = secondaryIds
       .filter(id => id !== primaryActionId && allActions.has(id))
       .map(id => allActions.get(id)!);
 
-    // Menu actions: archive worktree only
-    const menu = allActions.has("archive-worktree")
-      ? [allActions.get("archive-worktree")!]
-      : [];
+    // Menu actions: none for now (all actionable items are in primary/secondary)
+    const menu: GitAction[] = [];
 
     return { primary, secondary, menu };
   }, [
-    isGit, hasRemote, hasPullRequest, prStatus?.url, aheadCount, isPaseoOwnedWorktree, isOnBaseBranch,
-    hasUncommittedChanges, aheadOfOrigin, shipDefault, baseRefLabel,
+    isGit, hasRemote, hasPullRequest, prStatus?.url, aheadCount, isPaseoOwnedWorktree, isOnBaseBranch, githubFeaturesEnabled,
+    hasUncommittedChanges, aheadOfOrigin, behindOfOrigin, shipDefault, baseRefLabel, shouldPromoteArchive,
     commitDisabled, pushDisabled, prDisabled, mergeDisabled, mergeFromBaseDisabled, archiveDisabled,
     commitStatus, pushStatus, prCreateStatus, mergeStatus, mergeFromBaseStatus, archiveStatus,
     handleCommit, handlePush, handleCreatePr, handleMergeBranch, handleMergeFromBase, handleArchiveWorktree,
@@ -1304,7 +1403,19 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
         <Text style={styles.actionErrorText}>{prErrorMessage}</Text>
       ) : null}
 
-      <View style={styles.diffContainer}>{bodyContent}</View>
+      <View style={styles.diffContainer}>
+        {bodyContent}
+        <WebDesktopScrollbarOverlay
+          enabled={showDesktopWebScrollbar && hasChanges}
+          metrics={diffScrollbarMetrics}
+          onScrollToOffset={(nextOffset) => {
+            diffListRef.current?.scrollToOffset({
+              offset: nextOffset,
+              animated: false,
+            });
+          }}
+        />
+      </View>
     </View>
   );
 }
@@ -1504,6 +1615,7 @@ const styles = StyleSheet.create((theme) => ({
   diffContainer: {
     flex: 1,
     minHeight: 0,
+    position: "relative",
   },
   scrollView: {
     flex: 1,

packages/app/src/components/headers/back-header.tsx

@@ -11,7 +11,11 @@ interface BackHeaderProps {
   onBack?: () => void;
 }
 
-export function BackHeader({ title, rightContent, onBack }: BackHeaderProps) {
+export function BackHeader({
+  title,
+  rightContent,
+  onBack,
+}: BackHeaderProps) {
   const { theme } = useUnistyles();
 
   return (
@@ -22,7 +26,7 @@ export function BackHeader({ title, rightContent, onBack }: BackHeaderProps) {
             onPress={onBack ?? (() => router.back())}
             style={styles.backButton}
           >
-            <ArrowLeft size={20} color={theme.colors.foregroundMuted} />
+            <ArrowLeft size={theme.iconSize.lg} color={theme.colors.foregroundMuted} />
           </Pressable>
           {title && (
             <Text style={styles.title} numberOfLines={1}>

packages/app/src/components/headers/menu-header.tsx

@@ -1,48 +1,95 @@
 import type { ReactNode } from "react";
-import { Text } from "react-native";
+import { Text, View, type StyleProp, type ViewStyle } from "react-native";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
-import { Menu, PanelLeft } from "lucide-react-native";
+import { PanelLeft } from "lucide-react-native";
 import { ScreenHeader } from "./screen-header";
 import { HeaderToggleButton } from "./header-toggle-button";
 import { usePanelStore } from "@/stores/panel-store";
+import { getShortcutOs } from "@/utils/shortcut-platform";
 
 interface MenuHeaderProps {
   title?: string;
   rightContent?: ReactNode;
 }
 
-export function MenuHeader({ title, rightContent }: MenuHeaderProps) {
+interface SidebarMenuToggleProps {
+  style?: StyleProp<ViewStyle>;
+  tooltipSide?: "left" | "right" | "top" | "bottom";
+  testID?: string;
+  nativeID?: string;
+}
+
+const MOBILE_MENU_LINE_WIDTH = 16;
+const MOBILE_MENU_LINE_SHORT_WIDTH = 8;
+const MOBILE_MENU_LINE_HEIGHT = 2;
+
+function MobileMenuIcon({ color }: { color: string }) {
+  return (
+    <View style={styles.mobileMenuIcon} pointerEvents="none">
+      <View style={[styles.mobileMenuLine, { backgroundColor: color }]} />
+      <View style={[styles.mobileMenuLine, { backgroundColor: color }]} />
+      <View
+        style={[
+          styles.mobileMenuLine,
+          styles.mobileMenuLineShort,
+          { backgroundColor: color },
+        ]}
+      />
+    </View>
+  );
+}
+
+export function SidebarMenuToggle({
+  style,
+  tooltipSide = "right",
+  testID = "menu-button",
+  nativeID = "menu-button",
+}: SidebarMenuToggleProps = {}) {
   const { theme } = useUnistyles();
   const isMobile =
     UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
   const toggleAgentList = usePanelStore((state) => state.toggleAgentList);
+  const toggleShortcutKeys = getShortcutOs() === "mac" ? ["mod", "B"] : ["mod", "."];
 
   const isOpen = isMobile ? mobileView === "agent-list" : desktopAgentListOpen;
-  const MenuIcon = isMobile ? Menu : PanelLeft;
   const menuIconColor = !isMobile && isOpen
     ? theme.colors.foreground
     : theme.colors.foregroundMuted;
 
+  return (
+    <HeaderToggleButton
+      onPress={toggleAgentList}
+      tooltipLabel="Toggle sidebar"
+      tooltipKeys={toggleShortcutKeys}
+      tooltipSide={tooltipSide}
+      testID={testID}
+      nativeID={nativeID}
+      style={style}
+      accessible
+      accessibilityRole="button"
+      accessibilityLabel={isOpen ? "Close menu" : "Open menu"}
+      accessibilityState={{ expanded: isOpen }}
+    >
+      {isMobile ? (
+        <MobileMenuIcon color={menuIconColor} />
+      ) : (
+        <PanelLeft size={theme.iconSize.md} color={menuIconColor} />
+      )}
+    </HeaderToggleButton>
+  );
+}
+
+export function MenuHeader({
+  title,
+  rightContent,
+}: MenuHeaderProps) {
   return (
     <ScreenHeader
       left={
         <>
-          <HeaderToggleButton
-            onPress={toggleAgentList}
-            tooltipLabel="Toggle sidebar"
-            tooltipKeys={["mod", "B"]}
-            tooltipSide="right"
-            testID="menu-button"
-            nativeID="menu-button"
-            accessible
-            accessibilityRole="button"
-            accessibilityLabel={isOpen ? "Close menu" : "Open menu"}
-            accessibilityState={{ expanded: isOpen }}
-          >
-            <MenuIcon size={isMobile ? 20 : 16} color={menuIconColor} />
-          </HeaderToggleButton>
+          <SidebarMenuToggle />
           {title && (
             <Text style={styles.title} numberOfLines={1}>
               {title}
@@ -69,4 +116,18 @@ const styles = StyleSheet.create((theme) => ({
     },
     color: theme.colors.foreground,
   },
+  mobileMenuIcon: {
+    width: MOBILE_MENU_LINE_WIDTH,
+    height: 12,
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+  },
+  mobileMenuLine: {
+    width: MOBILE_MENU_LINE_WIDTH,
+    height: MOBILE_MENU_LINE_HEIGHT,
+    borderRadius: theme.borderRadius.full,
+  },
+  mobileMenuLineShort: {
+    width: MOBILE_MENU_LINE_SHORT_WIDTH,
+  },
 }));

packages/app/src/components/headers/screen-header.tsx

@@ -2,7 +2,11 @@ import type { ReactNode } from "react";
 import { View, type StyleProp, type ViewStyle } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, UnistylesRuntime } from "react-native-unistyles";
-import { HEADER_INNER_HEIGHT, HEADER_INNER_HEIGHT_MOBILE } from "@/constants/layout";
+import {
+  HEADER_INNER_HEIGHT,
+  HEADER_INNER_HEIGHT_MOBILE,
+  HEADER_TOP_PADDING_MOBILE,
+} from "@/constants/layout";
 import { useTauriDragHandlers } from "@/utils/tauri-window";
 
 interface ScreenHeaderProps {
@@ -16,11 +20,16 @@ interface ScreenHeaderProps {
  * Shared frame for the home/back headers so we only maintain padding, border,
  * and safe-area logic in one place.
  */
-export function ScreenHeader({ left, right, leftStyle, rightStyle }: ScreenHeaderProps) {
+export function ScreenHeader({
+  left,
+  right,
+  leftStyle,
+  rightStyle,
+}: ScreenHeaderProps) {
   const insets = useSafeAreaInsets();
   const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
   // Only add extra padding on mobile for better touch targets; on desktop, only use safe area insets
-  const topPadding = isMobile ? 8 : 0;
+  const topPadding = isMobile ? HEADER_TOP_PADDING_MOBILE : 0;
 
   // On Tauri macOS, enable window dragging and double-click to maximize
   // Left padding for traffic lights is handled by _layout.tsx when sidebar is collapsed

packages/app/src/components/keyboard-shortcuts-dialog.tsx

@@ -0,0 +1,96 @@
+import { useMemo } from "react";
+import { Text, View } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import { getIsTauri } from "@/constants/layout";
+import { AdaptiveModalSheet } from "@/components/adaptive-modal-sheet";
+import { Shortcut } from "@/components/ui/shortcut";
+import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
+import { getShortcutOs } from "@/utils/shortcut-platform";
+import { buildKeyboardShortcutHelpSections } from "@/keyboard/keyboard-shortcuts";
+
+export function KeyboardShortcutsDialog() {
+  const open = useKeyboardShortcutsStore((s) => s.shortcutsDialogOpen);
+  const setOpen = useKeyboardShortcutsStore((s) => s.setShortcutsDialogOpen);
+
+  const isMac = getShortcutOs() === "mac";
+  const isTauri = getIsTauri();
+  const sections = useMemo(
+    () => buildKeyboardShortcutHelpSections({ isMac, isTauri }),
+    [isMac, isTauri]
+  );
+
+  return (
+    <AdaptiveModalSheet
+      title="Keyboard shortcuts"
+      visible={open}
+      onClose={() => setOpen(false)}
+      testID="keyboard-shortcuts-dialog"
+      snapPoints={["70%", "92%"]}
+    >
+      <View testID="keyboard-shortcuts-dialog-content" style={styles.content}>
+        {sections.map((section) => (
+          <View key={section.title} style={styles.section}>
+            <Text style={styles.sectionTitle}>{section.title}</Text>
+            <View style={styles.rows}>
+              {section.rows.map((row) => (
+                <View key={row.id} style={styles.row}>
+                  <View style={styles.rowText}>
+                    <Text style={styles.rowLabel}>{row.label}</Text>
+                    {row.note ? <Text style={styles.rowNote}>{row.note}</Text> : null}
+                  </View>
+                  <Shortcut keys={row.keys} style={styles.rowShortcut} />
+                </View>
+              ))}
+            </View>
+          </View>
+        ))}
+      </View>
+    </AdaptiveModalSheet>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  content: {
+    gap: theme.spacing[4],
+  },
+  section: {
+    gap: theme.spacing[2],
+  },
+  sectionTitle: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.colors.foregroundMuted,
+  },
+  rows: {
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.surface2,
+    borderRadius: theme.borderRadius.lg,
+    overflow: "hidden",
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing[3],
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[3],
+    borderBottomWidth: theme.borderWidth[1],
+    borderBottomColor: theme.colors.surface2,
+  },
+  rowText: {
+    flex: 1,
+    minWidth: 0,
+  },
+  rowLabel: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foreground,
+  },
+  rowNote: {
+    marginTop: 2,
+    fontSize: theme.fontSize.xs,
+    color: theme.colors.foregroundMuted,
+  },
+  rowShortcut: {
+    alignSelf: "flex-start",
+  },
+}));

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

@@ -0,0 +1,781 @@
+import {
+  useCallback,
+  useMemo,
+  useState,
+  useEffect,
+  useRef,
+  useSyncExternalStore,
+} from "react";
+import { View, Pressable, Text, Platform } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Animated, {
+  useAnimatedStyle,
+  interpolate,
+  Extrapolation,
+  runOnJS,
+} from "react-native-reanimated";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { Plus, Settings, Users } from "lucide-react-native";
+import { router, usePathname } from "expo-router";
+import { usePanelStore } from "@/stores/panel-store";
+import { SidebarAgentList } from "./sidebar-agent-list";
+import { SidebarAgentListSkeleton } from "./sidebar-agent-list-skeleton";
+import { useSidebarAgentsList } from "@/hooks/use-sidebar-agents-list";
+import { useSidebarAnimation } from "@/contexts/sidebar-animation-context";
+import { useTauriDragHandlers, useTrafficLightPadding } from "@/utils/tauri-window";
+import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
+import { Combobox } from "@/components/ui/combobox";
+import { useDaemonRegistry } from "@/contexts/daemon-registry-context";
+import { getHostRuntimeStore } from "@/runtime/host-runtime";
+import { useSessionStore } from "@/stores/session-store";
+import { formatConnectionStatus } from "@/utils/daemons";
+import { HEADER_INNER_HEIGHT, HEADER_INNER_HEIGHT_MOBILE } from "@/constants/layout";
+import {
+  checkoutStatusQueryKey,
+  type CheckoutStatusPayload,
+} from "@/hooks/use-checkout-status-query";
+import { queryClient } from "@/query/query-client";
+import {
+  buildNewAgentRoute,
+  resolveNewAgentWorkingDir,
+  resolveSelectedAgentForNewAgent,
+} from "@/utils/new-agent-routing";
+import {
+  buildHostAgentsRoute,
+  buildHostSettingsRoute,
+  mapPathnameToServer,
+  parseServerIdFromPathname,
+} from "@/utils/host-routes";
+
+const DESKTOP_SIDEBAR_WIDTH = 320;
+
+interface LeftSidebarProps {
+  selectedAgentId?: string;
+}
+
+export function LeftSidebar({ selectedAgentId }: LeftSidebarProps) {
+  const { theme } = useUnistyles();
+  const insets = useSafeAreaInsets();
+  const isMobile =
+    UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const mobileView = usePanelStore((state) => state.mobileView);
+  const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
+  const closeToAgent = usePanelStore((state) => state.closeToAgent);
+  const pathname = usePathname();
+  const { daemons } = useDaemonRegistry();
+  const runtime = getHostRuntimeStore();
+  const runtimeConnectionStatusSignature = useSyncExternalStore(
+    (onStoreChange) => runtime.subscribeAll(onStoreChange),
+    () =>
+      daemons
+        .map(
+          (daemon) =>
+            `${daemon.serverId}:${
+              runtime.getSnapshot(daemon.serverId)?.connectionStatus ?? "connecting"
+            }`
+        )
+        .join("|"),
+    () =>
+      daemons
+        .map(
+          (daemon) =>
+            `${daemon.serverId}:${
+              runtime.getSnapshot(daemon.serverId)?.connectionStatus ?? "connecting"
+            }`
+        )
+        .join("|")
+  );
+  const activeServerIdFromPath = useMemo(
+    () => parseServerIdFromPathname(pathname),
+    [pathname]
+  );
+  const activeServerId = activeServerIdFromPath ?? daemons[0]?.serverId ?? null;
+  const activeHostLabel = useMemo(() => {
+    if (!activeServerId) return "No host";
+    const daemon = daemons.find((entry) => entry.serverId === activeServerId);
+    const trimmed = daemon?.label?.trim();
+    return trimmed && trimmed.length > 0 ? trimmed : activeServerId;
+  }, [activeServerId, daemons]);
+  const activeHostStatus = activeServerId
+    ? runtime.getSnapshot(activeServerId)?.connectionStatus ?? "connecting"
+    : "idle";
+  const activeHostStatusColor =
+    activeHostStatus === "online"
+      ? theme.colors.palette.green[400]
+      : activeHostStatus === "connecting"
+        ? theme.colors.palette.amber[500]
+        : theme.colors.palette.red[500];
+  const hostOptions = useMemo(
+    () =>
+      daemons.map((daemon) => ({
+        id: daemon.serverId,
+        label: daemon.label?.trim() || daemon.serverId,
+        description: formatConnectionStatus(
+          runtime.getSnapshot(daemon.serverId)?.connectionStatus ?? "connecting"
+        ),
+      })),
+    [daemons, runtime, runtimeConnectionStatusSignature]
+  );
+  const hostTriggerRef = useRef<View>(null);
+  const [isHostPickerOpen, setIsHostPickerOpen] = useState(false);
+
+  // Derive isOpen from the unified panel state
+  const isOpen = isMobile ? mobileView === "agent-list" : desktopAgentListOpen;
+  const [selectedProjectFilterKeys, setSelectedProjectFilterKeys] = useState<
+    string[]
+  >([]);
+
+  const {
+    entries,
+    projectFilterOptions,
+    hasMoreEntries,
+    isInitialLoad,
+    isRevalidating,
+    refreshAll,
+  } = useSidebarAgentsList({
+    serverId: activeServerId,
+    selectedProjectFilterKeys,
+  });
+  useEffect(() => {
+    setSelectedProjectFilterKeys([]);
+  }, [activeServerId]);
+  const {
+    translateX,
+    backdropOpacity,
+    windowWidth,
+    animateToOpen,
+    animateToClose,
+    isGesturing,
+    closeGestureRef,
+  } = useSidebarAnimation();
+  const dragHandlers = useTauriDragHandlers();
+  const trafficLightPadding = useTrafficLightPadding();
+
+  // Track user-initiated refresh to avoid showing spinner on background revalidation
+  const [isManualRefresh, setIsManualRefresh] = useState(false);
+
+  const handleRefresh = useCallback(() => {
+    setIsManualRefresh(true);
+    refreshAll();
+  }, [refreshAll]);
+
+  // Reset manual refresh flag when revalidation completes
+  useEffect(() => {
+    if (!isRevalidating && isManualRefresh) {
+      setIsManualRefresh(false);
+    }
+  }, [isRevalidating, isManualRefresh]);
+
+  const setSidebarShortcutAgentKeys = useKeyboardShortcutsStore(
+    (s) => s.setSidebarShortcutAgentKeys
+  );
+  const sidebarShortcutAgentKeys = useMemo(() => {
+    return entries.slice(0, 9).map((entry) => `${entry.agent.serverId}:${entry.agent.id}`);
+  }, [entries]);
+
+  useEffect(() => {
+    setSidebarShortcutAgentKeys(sidebarShortcutAgentKeys);
+  }, [setSidebarShortcutAgentKeys, sidebarShortcutAgentKeys]);
+
+  const handleClose = useCallback(() => {
+    closeToAgent();
+  }, [closeToAgent]);
+
+  const handleCreateAgentClean = useCallback(() => {
+    let targetServerId = activeServerId;
+    let targetWorkingDir: string | null = null;
+
+    const selectedAgent = resolveSelectedAgentForNewAgent({
+      pathname,
+      selectedAgentId,
+    });
+    if (selectedAgent) {
+      targetServerId = selectedAgent.serverId;
+      const agent = useSessionStore
+        .getState()
+        .sessions[selectedAgent.serverId]
+        ?.agents?.get(selectedAgent.agentId);
+      const cwd = agent?.cwd?.trim();
+      if (cwd) {
+        const checkout =
+          queryClient.getQueryData<CheckoutStatusPayload>(
+            checkoutStatusQueryKey(selectedAgent.serverId, cwd)
+          ) ?? null;
+        targetWorkingDir = resolveNewAgentWorkingDir(cwd, checkout);
+      }
+    }
+
+    if (!targetServerId) {
+      return;
+    }
+    router.push(buildNewAgentRoute(targetServerId, targetWorkingDir) as any);
+  }, [activeServerId, pathname, selectedAgentId]);
+
+  // Mobile: close sidebar and navigate
+  const handleCreateAgentCleanMobile = useCallback(() => {
+    closeToAgent();
+    handleCreateAgentClean();
+  }, [closeToAgent, handleCreateAgentClean]);
+
+  // Desktop: just navigate, don't close
+  const handleCreateAgentCleanDesktop = useCallback(() => {
+    handleCreateAgentClean();
+  }, [handleCreateAgentClean]);
+
+  // Mobile: close sidebar and navigate
+  const handleSettingsMobile = useCallback(() => {
+    if (!activeServerId) {
+      return;
+    }
+    closeToAgent();
+    router.push(buildHostSettingsRoute(activeServerId) as any);
+  }, [activeServerId, closeToAgent]);
+
+  // Desktop: just navigate, don't close
+  const handleSettingsDesktop = useCallback(() => {
+    if (!activeServerId) {
+      return;
+    }
+    router.push(buildHostSettingsRoute(activeServerId) as any);
+  }, [activeServerId]);
+
+  // Mobile: close sidebar when agent is selected
+  // Snap immediately since navigation interrupts animations
+  const handleAgentSelectMobile = useCallback(() => {
+    translateX.value = -windowWidth;
+    backdropOpacity.value = 0;
+    closeToAgent();
+  }, [closeToAgent, translateX, backdropOpacity, windowWidth]);
+
+  const handleViewMore = useCallback(() => {
+    if (!activeServerId) {
+      return;
+    }
+    if (isMobile) {
+      translateX.value = -windowWidth;
+      backdropOpacity.value = 0;
+      closeToAgent();
+    }
+    router.push(buildHostAgentsRoute(activeServerId) as any);
+  }, [
+    activeServerId,
+    backdropOpacity,
+    closeToAgent,
+    isMobile,
+    translateX,
+    windowWidth,
+  ]);
+
+  const listFooterComponent = useMemo(() => {
+    if (!hasMoreEntries) {
+      return null;
+    }
+
+    return (
+      <Pressable style={styles.listViewMoreButton} onPress={handleViewMore}>
+        {({ hovered }) => (
+          <Text
+            style={[
+              styles.listViewMoreButtonText,
+              hovered && styles.listViewMoreButtonTextHovered,
+            ]}
+          >
+            View more
+          </Text>
+        )}
+      </Pressable>
+    );
+  }, [handleViewMore, hasMoreEntries]);
+
+  const handleHostSelect = useCallback(
+    (nextServerId: string) => {
+      if (!nextServerId) {
+        return;
+      }
+      const nextPath = mapPathnameToServer(pathname, nextServerId);
+      setIsHostPickerOpen(false);
+      router.push(nextPath as any);
+    },
+    [pathname]
+  );
+
+  // Close gesture (swipe left to close when sidebar is open)
+  // Only activates on leftward swipe, fails on rightward or vertical movement
+  // This mirrors the explorer-sidebar pattern for the right sidebar
+  const closeGesture = Gesture.Pan()
+    .withRef(closeGestureRef)
+    .enabled(isOpen)
+    // Only activate on leftward swipe (negative X)
+    .activeOffsetX(-15)
+    // Fail on rightward movement (allow internal list scrolling)
+    .failOffsetX(10)
+    // Fail if vertical movement happens first (allow vertical scroll)
+    .failOffsetY([-10, 10])
+    .onStart(() => {
+      isGesturing.value = true;
+    })
+    .onUpdate((event) => {
+      if (!isMobile) return;
+      // Only allow swiping left (closing)
+      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;
+      if (!isMobile) return;
+      const shouldClose = event.translationX < -windowWidth / 3 || event.velocityX < -500;
+      if (shouldClose) {
+        animateToClose();
+        runOnJS(handleClose)();
+      } else {
+        animateToOpen();
+      }
+    })
+    .onFinalize(() => {
+      isGesturing.value = false;
+    });
+
+
+  const sidebarAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }],
+  }));
+
+  const backdropAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: backdropOpacity.value,
+    pointerEvents: backdropOpacity.value > 0.01 ? "auto" : "none",
+  }));
+
+
+  // Render mobile sidebar
+  // On web, keep the overlay interactive only while the sidebar is open.
+  // This preserves swipe/scroll behavior without blocking taps when closed.
+  const overlayPointerEvents = Platform.OS === "web" ? (isOpen ? "auto" : "none") : "box-none";
+  if (isMobile) {
+    return (
+      <View style={StyleSheet.absoluteFillObject} pointerEvents={overlayPointerEvents}>
+        {/* Backdrop */}
+        <Animated.View style={[styles.backdrop, backdropAnimatedStyle]}>
+          <Pressable style={styles.backdropPressable} onPress={handleClose} />
+        </Animated.View>
+
+        <GestureDetector gesture={closeGesture} touchAction="pan-y">
+          <Animated.View
+            style={[
+              styles.mobileSidebar,
+              { width: windowWidth, paddingTop: insets.top, paddingBottom: insets.bottom },
+              sidebarAnimatedStyle,
+            ]}
+            pointerEvents="auto"
+          >
+            <View style={styles.sidebarContent} pointerEvents="auto">
+              {/* Header */}
+              <View style={styles.sidebarHeader}>
+                <View style={styles.sidebarHeaderRow}>
+                  <Pressable
+                    style={styles.newAgentButton}
+                    testID="sidebar-new-agent"
+                    onPress={handleCreateAgentCleanMobile}
+                  >
+                    {({ hovered }) => (
+                      <>
+                        <Plus
+                          size={theme.iconSize.md}
+                          color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
+                        />
+                        <Text style={[styles.newAgentButtonText, hovered && styles.newAgentButtonTextHovered]}>New agent</Text>
+                      </>
+                    )}
+                  </Pressable>
+                </View>
+              </View>
+
+              {/* Middle: scrollable agent list */}
+              {isInitialLoad ? (
+                <SidebarAgentListSkeleton />
+              ) : (
+                <SidebarAgentList
+                  isOpen={isOpen}
+                  entries={entries}
+                  projectFilterOptions={projectFilterOptions}
+                  selectedProjectFilterKeys={selectedProjectFilterKeys}
+                  onSelectedProjectFilterKeysChange={setSelectedProjectFilterKeys}
+                  isRefreshing={isManualRefresh && isRevalidating}
+                  onRefresh={handleRefresh}
+                  listFooterComponent={listFooterComponent}
+                  selectedAgentId={selectedAgentId}
+                  onAgentSelect={handleAgentSelectMobile}
+                  parentGestureRef={closeGestureRef}
+                />
+              )}
+
+              {/* Footer */}
+              <View style={styles.sidebarFooter}>
+                <View style={styles.footerHostSlot}>
+                  <Pressable
+                    ref={hostTriggerRef}
+                    style={({ hovered = false }) => [
+                      styles.hostTrigger,
+                      hovered && styles.hostTriggerHovered,
+                    ]}
+                    onPress={() => setIsHostPickerOpen(true)}
+                    disabled={hostOptions.length === 0}
+                  >
+                    <View
+                      style={[
+                        styles.hostStatusDot,
+                        { backgroundColor: activeHostStatusColor },
+                      ]}
+                    />
+                    <Text style={styles.hostTriggerText} numberOfLines={1}>
+                      {activeHostLabel}
+                    </Text>
+                  </Pressable>
+                </View>
+                <View style={styles.footerIconRow}>
+                  <Pressable
+                    style={styles.footerIconButton}
+                    testID="sidebar-all-agents"
+                    nativeID="sidebar-all-agents"
+                    collapsable={false}
+                    accessible
+                    accessibilityLabel="All agents"
+                    accessibilityRole="button"
+                    onPress={handleViewMore}
+                  >
+                    {({ hovered }) => (
+                      <Users
+                        size={theme.iconSize.lg}
+                        color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
+                      />
+                    )}
+                  </Pressable>
+                  <Pressable
+                    style={styles.footerIconButton}
+                    testID="sidebar-settings"
+                    nativeID="sidebar-settings"
+                    collapsable={false}
+                    accessible
+                    accessibilityLabel="Settings"
+                    accessibilityRole="button"
+                    onPress={handleSettingsMobile}
+                  >
+                    {({ hovered }) => (
+                      <Settings
+                        size={theme.iconSize.lg}
+                        color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
+                      />
+                    )}
+                  </Pressable>
+                </View>
+                <Combobox
+                  options={hostOptions}
+                  value={activeServerId ?? ""}
+                  onSelect={handleHostSelect}
+                  searchable={false}
+                  title="Switch host"
+                  searchPlaceholder="Search hosts..."
+                  open={isHostPickerOpen}
+                  onOpenChange={setIsHostPickerOpen}
+                  anchorRef={hostTriggerRef}
+                />
+              </View>
+            </View>
+          </Animated.View>
+        </GestureDetector>
+      </View>
+    );
+  }
+
+  // Desktop: no edge swipe, just show/hide based on isOpen
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.desktopSidebar, { width: DESKTOP_SIDEBAR_WIDTH }]}>
+      <View
+        style={[styles.sidebarHeader, { paddingLeft: theme.spacing[2] + trafficLightPadding.left }]}
+        {...dragHandlers}
+      >
+        <View style={styles.sidebarHeaderRow}>
+          <Pressable
+            style={styles.newAgentButton}
+            testID="sidebar-new-agent"
+            onPress={handleCreateAgentCleanDesktop}
+          >
+            {({ hovered }) => (
+              <>
+                <Plus
+                  size={theme.iconSize.md}
+                  color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
+                />
+              <Text style={[styles.newAgentButtonText, hovered && styles.newAgentButtonTextHovered]}>New agent</Text>
+              </>
+            )}
+          </Pressable>
+        </View>
+      </View>
+
+      {/* Middle: scrollable agent list */}
+      {isInitialLoad ? (
+        <SidebarAgentListSkeleton />
+      ) : (
+        <SidebarAgentList
+          isOpen={isOpen}
+          entries={entries}
+          projectFilterOptions={projectFilterOptions}
+          selectedProjectFilterKeys={selectedProjectFilterKeys}
+          onSelectedProjectFilterKeysChange={setSelectedProjectFilterKeys}
+          isRefreshing={isManualRefresh && isRevalidating}
+          onRefresh={handleRefresh}
+          listFooterComponent={listFooterComponent}
+          selectedAgentId={selectedAgentId}
+        />
+      )}
+
+      {/* Footer */}
+      <View style={styles.sidebarFooter}>
+        <View style={styles.footerHostSlot}>
+          <Pressable
+            ref={hostTriggerRef}
+            style={({ hovered = false }) => [
+              styles.hostTrigger,
+              hovered && styles.hostTriggerHovered,
+            ]}
+            onPress={() => setIsHostPickerOpen(true)}
+            disabled={hostOptions.length === 0}
+          >
+            <View
+              style={[
+                styles.hostStatusDot,
+                { backgroundColor: activeHostStatusColor },
+              ]}
+            />
+            <Text style={styles.hostTriggerText} numberOfLines={1}>
+              {activeHostLabel}
+            </Text>
+          </Pressable>
+        </View>
+        <View style={styles.footerIconRow}>
+          <Pressable
+            style={styles.footerIconButton}
+            testID="sidebar-all-agents"
+            nativeID="sidebar-all-agents"
+            collapsable={false}
+            accessible
+            accessibilityLabel="All agents"
+            accessibilityRole="button"
+            onPress={handleViewMore}
+          >
+            {({ hovered }) => (
+              <Users
+                size={theme.iconSize.lg}
+                color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
+              />
+            )}
+          </Pressable>
+          <Pressable
+            style={styles.footerIconButton}
+            testID="sidebar-settings"
+            nativeID="sidebar-settings"
+            collapsable={false}
+            accessible
+            accessibilityLabel="Settings"
+            accessibilityRole="button"
+            onPress={handleSettingsDesktop}
+          >
+            {({ hovered }) => (
+              <Settings
+                size={theme.iconSize.lg}
+                color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
+              />
+            )}
+          </Pressable>
+        </View>
+        <Combobox
+          options={hostOptions}
+          value={activeServerId ?? ""}
+          onSelect={handleHostSelect}
+          searchable={false}
+          title="Switch host"
+          searchPlaceholder="Search hosts..."
+          open={isHostPickerOpen}
+          onOpenChange={setIsHostPickerOpen}
+          anchorRef={hostTriggerRef}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+  },
+  backdropPressable: {
+    flex: 1,
+  },
+  mobileSidebar: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    backgroundColor: theme.colors.surface0,
+    overflow: "hidden",
+  },
+  sidebarContent: {
+    flex: 1,
+    minHeight: 0,
+    overflow: "hidden",
+  },
+  desktopSidebar: {
+    borderRightWidth: 1,
+    borderRightColor: theme.colors.border,
+    backgroundColor: theme.colors.surface0,
+  },
+  sidebarHeader: {
+    height: {
+      xs: HEADER_INNER_HEIGHT_MOBILE,
+      md: HEADER_INNER_HEIGHT,
+    },
+    paddingHorizontal: theme.spacing[2],
+    justifyContent: "center",
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+    userSelect: "none",
+  },
+  sidebarHeaderRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    gap: theme.spacing[2],
+  },
+  newAgentButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    paddingVertical: theme.spacing[1],
+    paddingHorizontal: theme.spacing[1],
+    flexShrink: 0,
+  },
+  newAgentButtonHovered: {},
+  newAgentButtonText: {
+    fontSize: theme.fontSize.base,
+    fontWeight: theme.fontWeight.normal,
+    color: theme.colors.foregroundMuted,
+  },
+  newAgentButtonTextHovered: {
+    color: theme.colors.foreground,
+  },
+  hostTrigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    gap: theme.spacing[2],
+    minWidth: 0,
+    paddingVertical: theme.spacing[1],
+    paddingHorizontal: theme.spacing[2],
+    borderRadius: theme.borderRadius.lg,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.surface1,
+  },
+  hostTriggerHovered: {
+    borderColor: theme.colors.borderAccent,
+  },
+  hostStatusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: theme.borderRadius.full,
+  },
+  hostTriggerText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foregroundMuted,
+    flexShrink: 1,
+    minWidth: 0,
+  },
+  sidebarFooter: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[3],
+    borderTopWidth: 1,
+    borderTopColor: theme.colors.border,
+  },
+  footerHostSlot: {
+    flexGrow: 0,
+    flexShrink: 1,
+    minWidth: 0,
+    marginRight: theme.spacing[2],
+  },
+  footerIconRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    flexShrink: 0,
+  },
+  footerIconButton: {
+    width: 28,
+    height: 28,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: theme.spacing[1],
+    paddingHorizontal: theme.spacing[1],
+  },
+  listViewMoreButton: {
+    marginTop: theme.spacing[2],
+    marginHorizontal: theme.spacing[2],
+    marginBottom: theme.spacing[1],
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    borderRadius: theme.borderRadius.full,
+    backgroundColor: theme.colors.surface1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: theme.spacing[2],
+  },
+  listViewMoreButtonText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foregroundMuted,
+  },
+  listViewMoreButtonTextHovered: {
+    color: theme.colors.foreground,
+  },
+  hostPickerList: {
+    gap: theme.spacing[2],
+  },
+  hostPickerOption: {
+    paddingVertical: theme.spacing[3],
+    paddingHorizontal: theme.spacing[3],
+    borderRadius: theme.borderRadius.lg,
+    backgroundColor: theme.colors.surface2,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+  },
+  hostPickerOptionText: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.sm,
+  },
+  hostPickerCancel: {
+    paddingVertical: theme.spacing[3],
+    paddingHorizontal: theme.spacing[3],
+    borderRadius: theme.borderRadius.lg,
+    backgroundColor: theme.colors.surface0,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+    alignItems: "center",
+  },
+  hostPickerCancelText: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+  },
+}));

packages/app/src/components/message.tsx

@@ -1,6 +1,7 @@
 import {
   View,
   Text,
+  Image,
   Pressable,
   ActivityIndicator,
   type LayoutChangeEvent,
@@ -20,7 +21,6 @@ import {
 } from "react";
 import type { ReactNode, ComponentType } from "react";
 import Markdown, { MarkdownIt } from "react-native-markdown-display";
-import * as Linking from "expo-linking";
 import MaskedView from "@react-native-masked-view/masked-view";
 import {
   Circle,
@@ -62,7 +62,7 @@ import {
 } from "@/styles/markdown-styles";
 import { Colors, Fonts } from "@/constants/theme";
 import * as Clipboard from "expo-clipboard";
-import type { TodoEntry } from "@/types/stream";
+import type { TodoEntry, UserMessageImageAttachment } from "@/types/stream";
 import type { ToolCallDetail } from "@server/server/agent/agent-sdk-types";
 import {
   buildToolCallDisplayModel,
@@ -71,12 +71,15 @@ import { resolveToolCallIcon } from "@/utils/tool-call-icon";
 import { getNowMs, isPerfLoggingEnabled, perfLog } from "@/utils/perf";
 import { parseInlinePathToken, type InlinePathTarget } from "@/utils/inline-path";
 import { getMarkdownListMarker } from "@/utils/markdown-list";
+import { openExternalUrl } from "@/utils/open-external-url";
 export type { InlinePathTarget } from "@/utils/inline-path";
 import { useToolCallSheet } from "./tool-call-sheet";
 import { ToolCallDetailsContent } from "./tool-call-details";
+import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-url";
 
 interface UserMessageProps {
   message: string;
+  images?: UserMessageImageAttachment[];
   timestamp: number;
   isFirstInGroup?: boolean;
   isLastInGroup?: boolean;
@@ -117,6 +120,8 @@ const WEB_TOOLCALL_SHIMMER_KEYFRAME_CSS = `
   }
 `;
 let webToolCallShimmerRegistered = false;
+const SCROLL_EDGE_EPSILON = 0.5;
+type ScrollAxis = "x" | "y";
 
 function ensureWebToolCallShimmerKeyframes() {
   if (Platform.OS !== "web") {
@@ -143,6 +148,113 @@ function ensureWebToolCallShimmerKeyframes() {
   webToolCallShimmerRegistered = true;
 }
 
+function getWheelEventElementTarget(
+  event: WheelEvent,
+  fallback: HTMLElement
+): HTMLElement {
+  const { target } = event;
+  if (target instanceof HTMLElement) {
+    return target;
+  }
+  if (target instanceof Node && target.parentElement) {
+    return target.parentElement;
+  }
+  return fallback;
+}
+
+function canElementScrollInDirection(
+  element: HTMLElement,
+  axis: ScrollAxis,
+  delta: number
+): boolean {
+  if (delta === 0) {
+    return false;
+  }
+
+  const computedStyle = window.getComputedStyle(element);
+  const overflow = axis === "x" ? computedStyle.overflowX : computedStyle.overflowY;
+  const isScrollableOverflow =
+    overflow === "auto" || overflow === "scroll" || overflow === "overlay";
+  if (!isScrollableOverflow) {
+    return false;
+  }
+
+  const scrollPosition = axis === "x" ? element.scrollLeft : element.scrollTop;
+  const scrollSize =
+    axis === "x" ? element.scrollWidth - element.clientWidth : element.scrollHeight - element.clientHeight;
+  if (scrollSize <= SCROLL_EDGE_EPSILON) {
+    return false;
+  }
+
+  if (delta > 0) {
+    return scrollPosition < scrollSize - SCROLL_EDGE_EPSILON;
+  }
+  return scrollPosition > SCROLL_EDGE_EPSILON;
+}
+
+function canScrollInsideDetailFromTarget(
+  detailRoot: HTMLElement,
+  startElement: HTMLElement,
+  axis: ScrollAxis,
+  delta: number
+): boolean {
+  if (delta === 0) {
+    return false;
+  }
+
+  let current: HTMLElement | null = startElement;
+  while (current) {
+    if (canElementScrollInDirection(current, axis, delta)) {
+      return true;
+    }
+    if (current === detailRoot) {
+      break;
+    }
+    current = current.parentElement;
+  }
+  return false;
+}
+
+function shouldStopDetailWheelPropagation(
+  detailRoot: HTMLElement,
+  event: WheelEvent
+): boolean {
+  const startElement = getWheelEventElementTarget(event, detailRoot);
+  const verticalDelta = event.deltaY;
+  const horizontalDelta =
+    event.deltaX !== 0 ? event.deltaX : (event.shiftKey ? event.deltaY : 0);
+
+  const hasVerticalIntent = Math.abs(verticalDelta) > SCROLL_EDGE_EPSILON;
+  const hasHorizontalIntent = Math.abs(horizontalDelta) > SCROLL_EDGE_EPSILON;
+  if (!hasVerticalIntent && !hasHorizontalIntent) {
+    return false;
+  }
+
+  const canScrollVertically = hasVerticalIntent
+    ? canScrollInsideDetailFromTarget(detailRoot, startElement, "y", verticalDelta)
+    : false;
+  const canScrollHorizontally = hasHorizontalIntent
+    ? canScrollInsideDetailFromTarget(
+        detailRoot,
+        startElement,
+        "x",
+        horizontalDelta
+      )
+    : false;
+
+  if (hasVerticalIntent && hasHorizontalIntent) {
+    const isVerticalDominant = Math.abs(verticalDelta) >= Math.abs(horizontalDelta);
+    return isVerticalDominant
+      ? canScrollVertically || canScrollHorizontally
+      : canScrollHorizontally || canScrollVertically;
+  }
+
+  if (hasVerticalIntent) {
+    return canScrollVertically;
+  }
+  return canScrollHorizontally;
+}
+
 const userMessageStylesheet = StyleSheet.create((theme) => ({
   container: {
     flexDirection: "row",
@@ -177,6 +289,29 @@ const userMessageStylesheet = StyleSheet.create((theme) => ({
     lineHeight: 22,
     overflowWrap: "anywhere",
   },
+  imagePreviewContainer: {
+    flexDirection: "row",
+    gap: theme.spacing[2],
+    flexWrap: "wrap",
+  },
+  imagePreviewSpacing: {
+    marginBottom: theme.spacing[2],
+  },
+  imagePill: {
+    borderRadius: theme.borderRadius.md,
+    borderWidth: 1,
+    borderColor: theme.colors.borderAccent,
+    overflow: "hidden",
+  },
+  imageThumbnail: {
+    width: 48,
+    height: 48,
+  },
+  imageThumbnailPlaceholder: {
+    width: 48,
+    height: 48,
+    backgroundColor: theme.colors.surface1,
+  },
   copyButton: {
     alignSelf: "flex-end",
     padding: theme.spacing[1],
@@ -190,8 +325,21 @@ const userMessageStylesheet = StyleSheet.create((theme) => ({
   },
 }));
 
+function UserMessageAttachmentThumbnail({
+  image,
+}: {
+  image: UserMessageImageAttachment;
+}) {
+  const uri = useAttachmentPreviewUrl(image);
+  if (!uri) {
+    return <View style={userMessageStylesheet.imageThumbnailPlaceholder} />;
+  }
+  return <Image source={{ uri }} style={userMessageStylesheet.imageThumbnail} />;
+}
+
 export const UserMessage = memo(function UserMessage({
   message,
+  images = [],
   timestamp,
   isFirstInGroup = true,
   isLastInGroup = true,
@@ -201,8 +349,10 @@ export const UserMessage = memo(function UserMessage({
   const [copyButtonHovered, setCopyButtonHovered] = useState(false);
   const resolvedDisableOuterSpacing =
     useDisableOuterSpacing(disableOuterSpacing);
+  const hasText = message.trim().length > 0;
+  const hasImages = images.length > 0;
   const showCopyButton =
-    Platform.OS !== "web" || messageHovered || copyButtonHovered;
+    hasText && (Platform.OS !== "web" || messageHovered || copyButtonHovered);
 
   return (
     <View
@@ -227,21 +377,42 @@ export const UserMessage = memo(function UserMessage({
         }
       >
         <View style={userMessageStylesheet.bubble}>
-          <Text selectable style={userMessageStylesheet.text}>
-            {message}
-          </Text>
+          {hasImages ? (
+            <View
+              style={[
+                userMessageStylesheet.imagePreviewContainer,
+                hasText ? userMessageStylesheet.imagePreviewSpacing : undefined,
+              ]}
+            >
+              {images.map((image, index) => (
+                <View
+                  key={`${image.id}-${index}`}
+                  style={userMessageStylesheet.imagePill}
+                >
+                  <UserMessageAttachmentThumbnail image={image} />
+                </View>
+              ))}
+            </View>
+          ) : null}
+          {hasText ? (
+            <Text selectable style={userMessageStylesheet.text}>
+              {message}
+            </Text>
+          ) : null}
         </View>
-        <TurnCopyButton
-          getContent={() => message}
-          containerStyle={[
-            userMessageStylesheet.copyButton,
-            showCopyButton
-              ? userMessageStylesheet.copyButtonVisible
-              : userMessageStylesheet.copyButtonHidden,
-          ]}
-          accessibilityLabel="Copy message"
-          onHoverChange={setCopyButtonHovered}
-        />
+        {hasText ? (
+          <TurnCopyButton
+            getContent={() => message}
+            containerStyle={[
+              userMessageStylesheet.copyButton,
+              showCopyButton
+                ? userMessageStylesheet.copyButtonVisible
+                : userMessageStylesheet.copyButtonHidden,
+            ]}
+            accessibilityLabel="Copy message"
+            onHoverChange={setCopyButtonHovered}
+          />
+        ) : null}
       </Pressable>
     </View>
   );
@@ -272,6 +443,10 @@ export const assistantMessageStylesheet = StyleSheet.create((theme) => ({
     fontFamily: Fonts.mono,
     fontSize: 13,
   },
+  markdownCodeInlineLink: {
+    color: theme.colors.primary,
+    textDecorationLine: "underline",
+  },
   // Used in custom markdownRules for path chip styling
   pathChip: {
     backgroundColor: theme.colors.surface2,
@@ -288,6 +463,30 @@ export const assistantMessageStylesheet = StyleSheet.create((theme) => ({
   },
 }));
 
+function getInlineCodeAutoLinkUrl(
+  markdownParser: ReturnType<typeof MarkdownIt>,
+  content: string
+): string | null {
+  const trimmed = content.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  const matches = markdownParser.linkify.match(trimmed) as
+    | Array<{ index: number; lastIndex: number; url: string }>
+    | null;
+  if (!matches || matches.length !== 1) {
+    return null;
+  }
+
+  const [match] = matches;
+  if (!match || match.index !== 0 || match.lastIndex !== trimmed.length) {
+    return null;
+  }
+
+  return match.url;
+}
+
 const turnCopyButtonStylesheet = StyleSheet.create((theme) => ({
   container: {
     alignSelf: "flex-start",
@@ -512,12 +711,10 @@ export const AssistantMessage = memo(function AssistantMessage({
   );
 
   const handleLinkPress = useCallback((url: string) => {
-    if (Platform.OS === "web") {
-      window.open(url, "_blank", "noopener,noreferrer");
-    } else {
-      void Linking.openURL(url);
-    }
-    return true;
+    void openExternalUrl(url);
+    // react-native-markdown-display opens the link itself when this returns true.
+    // We already handled it above, so return false to avoid duplicate opens.
+    return false;
   }, []);
 
   const markdownRules = useMemo(() => {
@@ -584,13 +781,35 @@ export const AssistantMessage = memo(function AssistantMessage({
           ? parseInlinePathToken(content)
           : null;
 
-        if (!parsed) {
+        if (parsed) {
           return (
             <Text
               key={node.key}
+              onPress={() => parsed && onInlinePathPress?.(parsed)}
+              selectable={false}
+              style={[
+                assistantMessageStylesheet.pathChip,
+                assistantMessageStylesheet.pathChipText,
+              ]}
+            >
+              {content}
+            </Text>
+          );
+        }
+
+        const inlineCodeLinkUrl = getInlineCodeAutoLinkUrl(markdownParser, content);
+        if (inlineCodeLinkUrl) {
+          return (
+            <Text
+              key={node.key}
+              accessibilityRole="link"
+              onPress={() => {
+                handleLinkPress(inlineCodeLinkUrl);
+              }}
               style={[
                 inheritedStyles,
                 assistantMessageStylesheet.markdownCodeInline,
+                assistantMessageStylesheet.markdownCodeInlineLink,
               ]}
             >
               {content}
@@ -601,11 +820,9 @@ export const AssistantMessage = memo(function AssistantMessage({
         return (
           <Text
             key={node.key}
-            onPress={() => parsed && onInlinePathPress?.(parsed)}
-            selectable={false}
             style={[
-              assistantMessageStylesheet.pathChip,
-              assistantMessageStylesheet.pathChipText,
+              inheritedStyles,
+              assistantMessageStylesheet.markdownCodeInline,
             ]}
           >
             {content}
@@ -658,7 +875,7 @@ export const AssistantMessage = memo(function AssistantMessage({
         );
       },
     };
-  }, [onInlinePathPress]);
+  }, [handleLinkPress, markdownParser, onInlinePathPress]);
 
   return (
     <View
@@ -1075,6 +1292,7 @@ const ExpandableBadge = memo(function ExpandableBadge({
   const hasDetailContent = Boolean(renderDetails);
   const detailContent =
     hasDetailContent && isExpanded ? renderDetails?.() : null;
+  const detailWrapperRef = useRef<View | null>(null);
 
   const nativeGradientIdRef = useRef(
     `shimmer-gradient-${Math.random().toString(36).substring(2, 9)}`
@@ -1194,6 +1412,28 @@ const ExpandableBadge = memo(function ExpandableBadge({
     shimmerTranslateX,
   ]);
 
+  useEffect(() => {
+    if (Platform.OS !== "web" || !isExpanded || !hasDetailContent) {
+      return;
+    }
+
+    const node = detailWrapperRef.current as unknown as HTMLElement | null;
+    if (!node || typeof node.addEventListener !== "function") {
+      return;
+    }
+
+    const stopWheelPropagation = (event: WheelEvent) => {
+      if (shouldStopDetailWheelPropagation(node, event)) {
+        event.stopPropagation();
+      }
+    };
+
+    node.addEventListener("wheel", stopWheelPropagation, { passive: true });
+    return () => {
+      node.removeEventListener("wheel", stopWheelPropagation);
+    };
+  }, [isExpanded, hasDetailContent]);
+
   const nativeShimmerPeakStyle = useAnimatedStyle(() => ({
     transform: [{ translateX: shimmerTranslateX.value }],
   }));
@@ -1430,6 +1670,7 @@ const ExpandableBadge = memo(function ExpandableBadge({
       </Pressable>
       {detailContent ? (
         <Pressable
+          ref={detailWrapperRef}
           style={expandableBadgeStylesheet.detailWrapper}
           onHoverIn={() => onDetailHoverChange?.(true)}
           onHoverOut={() => onDetailHoverChange?.(false)}

packages/app/src/components/multi-daemon-session-host.tsx

@@ -1,193 +1,23 @@
+import { useEffect } from "react";
 import { SessionProvider } from "@/contexts/session-context";
+import { useDaemonRegistry, type HostProfile } from "@/contexts/daemon-registry-context";
 import {
-  useDaemonRegistry,
-  type HostProfile,
-} from "@/contexts/daemon-registry-context";
-import { useDaemonConnections } from "@/contexts/daemon-connections-context";
-import {
-  buildDaemonWebSocketUrl,
-  buildRelayWebSocketUrl,
-} from "@/utils/daemon-endpoints";
-import { probeConnection } from "@/utils/test-daemon-connection";
-import { useEffect, useMemo, useRef, useState } from "react";
-import type { ActiveConnection } from "@/contexts/daemon-connections-context";
-
-type Candidate = {
-  connectionId: string;
-  url: string;
-  activeConnection: ActiveConnection;
-  daemonPublicKeyB64?: string;
-};
-
-function sortConnectionsByPreference<T extends { id: string }>(
-  connections: T[],
-  preferredId: string | null
-): T[] {
-  if (!preferredId) return connections;
-  const idx = connections.findIndex((c) => c.id === preferredId);
-  if (idx === -1) return connections;
-  return [connections[idx]!, ...connections.slice(0, idx), ...connections.slice(idx + 1)];
-}
-
-function buildCandidates(host: HostProfile): Candidate[] {
-  const preferred = host.preferredConnectionId ?? null;
-
-  const direct = sortConnectionsByPreference(
-    host.connections.filter((c) => c.type === "direct"),
-    preferred
-  );
-  const relay = sortConnectionsByPreference(
-    host.connections.filter((c) => c.type === "relay"),
-    preferred
-  );
-
-  const out: Candidate[] = [];
-
-  for (const conn of direct) {
-    out.push({
-      connectionId: conn.id,
-      url: buildDaemonWebSocketUrl(conn.endpoint),
-      activeConnection: { type: "direct", endpoint: conn.endpoint, display: conn.endpoint },
-    });
-  }
-
-  for (const conn of relay) {
-    out.push({
-      connectionId: conn.id,
-      url: buildRelayWebSocketUrl({
-        endpoint: conn.relayEndpoint,
-        serverId: host.serverId,
-      }),
-      activeConnection: { type: "relay", endpoint: conn.relayEndpoint, display: "relay" },
-      daemonPublicKeyB64: conn.daemonPublicKeyB64,
-    });
-  }
-
-  return out;
-}
+  getHostRuntimeStore,
+  useHostRuntimeSession,
+} from "@/runtime/host-runtime";
 
 function ManagedDaemonSession({ daemon }: { daemon: HostProfile }) {
-  const { connectionStates } = useDaemonConnections();
-  const { updateHost } = useDaemonRegistry();
+  const { client } = useHostRuntimeSession(daemon.serverId);
 
-  const candidates = useMemo(() => buildCandidates(daemon), [daemon]);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const active = candidates[activeIndex] ?? candidates[0] ?? null;
-  const activeUrl = active?.url ?? null;
-
-  const lastAttemptedUrlRef = useRef<string | null>(null);
-  const pendingPreferenceWriteRef = useRef(false);
-  const upgradeProbeInFlightRef = useRef(false);
-
-  useEffect(() => {
-    if (!activeUrl) {
-      return;
-    }
-    // If the active URL fell out of the candidate set (e.g. endpoints updated), snap back.
-    const idx = candidates.findIndex((c) => c.url === activeUrl);
-    if (idx === -1) {
-      setActiveIndex(0);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [candidates.map((c) => c.url).join("|")]);
-
-  if (!activeUrl) {
+  if (!client) {
     return null;
   }
 
-  const connection = connectionStates.get(daemon.serverId);
-  const status = connection?.status ?? "idle";
-  const lastError = connection?.lastError ?? null;
-
-  useEffect(() => {
-    if (!connection) return;
-
-    if (status === "online") {
-      if (!active) return;
-      if (pendingPreferenceWriteRef.current) return;
-      if (daemon.preferredConnectionId === active.connectionId) return;
-
-      pendingPreferenceWriteRef.current = true;
-      void updateHost(daemon.serverId, {
-        preferredConnectionId: active.connectionId,
-      }).finally(() => {
-        pendingPreferenceWriteRef.current = false;
-      });
-      return;
-    }
-
-    if ((status === "error" || (status === "offline" && lastError)) && candidates.length > 1) {
-      if (lastAttemptedUrlRef.current === activeUrl) {
-        return;
-      }
-      lastAttemptedUrlRef.current = activeUrl;
-      if (activeIndex < candidates.length - 1) {
-        setActiveIndex((idx) => Math.min(idx + 1, candidates.length - 1));
-      }
-    }
-  }, [
-    active,
-    activeIndex,
-    activeUrl,
-    candidates.length,
-    daemon.preferredConnectionId,
-    daemon.serverId,
-    lastError,
-    status,
-    updateHost,
-    connection,
-  ]);
-
-  useEffect(() => {
-    if (!connection) return;
-    if (status !== "online") return;
-    if (activeIndex === 0) return;
-
-    const best = candidates[0];
-    if (!best) return;
-    if (best.activeConnection.type !== "direct") return;
-
-    const intervalMs = 15_000;
-    let cancelled = false;
-
-    const attemptUpgrade = async () => {
-      if (cancelled) return;
-      if (upgradeProbeInFlightRef.current) return;
-      if (activeIndex === 0) return;
-
-      upgradeProbeInFlightRef.current = true;
-      try {
-        const { serverId } = await probeConnection(
-          { id: "probe", type: "direct", endpoint: best.activeConnection.endpoint },
-          { timeoutMs: 2000 },
-        );
-        if (cancelled) return;
-        if (serverId !== daemon.serverId) return;
-
-        lastAttemptedUrlRef.current = null;
-        setActiveIndex(0);
-      } catch {
-        // ignore - we'll retry periodically
-      } finally {
-        upgradeProbeInFlightRef.current = false;
-      }
-    };
-
-    void attemptUpgrade();
-    const interval = setInterval(() => void attemptUpgrade(), intervalMs);
-    return () => {
-      cancelled = true;
-      clearInterval(interval);
-    };
-  }, [activeIndex, candidates, connection, daemon.serverId, status]);
-
   return (
     <SessionProvider
-      key={`${daemon.serverId}:${activeUrl}`}
-      serverUrl={activeUrl}
+      key={daemon.serverId}
       serverId={daemon.serverId}
-      activeConnection={active?.activeConnection ?? null}
-      daemonPublicKeyB64={active?.daemonPublicKeyB64}
+      client={client}
     >
       {null}
     </SessionProvider>
@@ -196,6 +26,12 @@ function ManagedDaemonSession({ daemon }: { daemon: HostProfile }) {
 
 export function MultiDaemonSessionHost() {
   const { daemons } = useDaemonRegistry();
+
+  useEffect(() => {
+    const runtime = getHostRuntimeStore();
+    runtime.syncHosts(daemons);
+  }, [daemons]);
+
   if (daemons.length === 0) {
     return null;
   }

packages/app/src/components/realtime-voice-overlay.tsx

@@ -54,9 +54,9 @@ export function RealtimeVoiceOverlay({
           ]}
         >
           {isMuted ? (
-            <MicOff size={20} color={theme.colors.palette.white} strokeWidth={2.5} />
+            <MicOff size={theme.iconSize.lg} color={theme.colors.palette.white} strokeWidth={2.5} />
           ) : (
-            <Mic size={20} color={theme.colors.foreground} strokeWidth={2.5} />
+            <Mic size={theme.iconSize.lg} color={theme.colors.foreground} strokeWidth={2.5} />
           )}
         </Pressable>
 
@@ -75,7 +75,7 @@ export function RealtimeVoiceOverlay({
             <ActivityIndicator size="small" color={theme.colors.palette.white} />
           ) : (
             <Square
-              size={20}
+              size={theme.iconSize.lg}
               color={theme.colors.palette.white}
               fill={theme.colors.palette.white}
               strokeWidth={2.5}

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

@@ -1,463 +0,0 @@
-import { useCallback, useMemo, useState, useEffect } from "react";
-import { View, Pressable, Text, Platform } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Animated, {
-  useAnimatedStyle,
-  interpolate,
-  Extrapolation,
-  runOnJS,
-} from "react-native-reanimated";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
-import { Plus, Settings, Users } from "lucide-react-native";
-import { router } from "expo-router";
-import { usePanelStore } from "@/stores/panel-store";
-import { SidebarAgentList } from "./sidebar-agent-list";
-import { SidebarAgentListSkeleton } from "./sidebar-agent-list-skeleton";
-import { useSidebarAgentsGrouped } from "@/hooks/use-sidebar-agents-grouped";
-import { useSidebarAnimation } from "@/contexts/sidebar-animation-context";
-import { useTauriDragHandlers, useTrafficLightPadding } from "@/utils/tauri-window";
-import { useSidebarCollapsedSectionsStore } from "@/stores/sidebar-collapsed-sections-store";
-import { useKeyboardNavStore } from "@/stores/keyboard-nav-store";
-import { deriveSidebarShortcutAgentKeys } from "@/utils/sidebar-shortcuts";
-
-const DESKTOP_SIDEBAR_WIDTH = 320;
-
-interface SlidingSidebarProps {
-  selectedAgentId?: string;
-}
-
-export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
-  const { theme } = useUnistyles();
-  const insets = useSafeAreaInsets();
-  const isMobile =
-    UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
-  const mobileView = usePanelStore((state) => state.mobileView);
-  const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
-  const closeToAgent = usePanelStore((state) => state.closeToAgent);
-
-  // Derive isOpen from the unified panel state
-  const isOpen = isMobile ? mobileView === "agent-list" : desktopAgentListOpen;
-
-  const {
-    sections,
-    checkoutByAgentKey,
-    isInitialLoad,
-    isRevalidating,
-    refreshAll,
-  } = useSidebarAgentsGrouped({ isOpen });
-  const {
-    translateX,
-    backdropOpacity,
-    windowWidth,
-    animateToOpen,
-    animateToClose,
-    isGesturing,
-    closeGestureRef,
-  } = useSidebarAnimation();
-  const trafficLightPadding = useTrafficLightPadding();
-  const dragHandlers = useTauriDragHandlers();
-
-  // Track user-initiated refresh to avoid showing spinner on background revalidation
-  const [isManualRefresh, setIsManualRefresh] = useState(false);
-
-  const handleRefresh = useCallback(() => {
-    setIsManualRefresh(true);
-    refreshAll();
-  }, [refreshAll]);
-
-  // Reset manual refresh flag when revalidation completes
-  useEffect(() => {
-    if (!isRevalidating && isManualRefresh) {
-      setIsManualRefresh(false);
-    }
-  }, [isRevalidating, isManualRefresh]);
-
-  const collapsedProjectKeys = useSidebarCollapsedSectionsStore((s) => s.collapsedProjectKeys);
-  const setSidebarShortcutAgentKeys = useKeyboardNavStore((s) => s.setSidebarShortcutAgentKeys);
-  const sidebarShortcutAgentKeys = useMemo(() => {
-    return deriveSidebarShortcutAgentKeys(sections, collapsedProjectKeys, 9);
-  }, [collapsedProjectKeys, sections]);
-
-  useEffect(() => {
-    setSidebarShortcutAgentKeys(sidebarShortcutAgentKeys);
-  }, [setSidebarShortcutAgentKeys, sidebarShortcutAgentKeys]);
-
-  const handleClose = useCallback(() => {
-    closeToAgent();
-  }, [closeToAgent]);
-
-  const handleCreateAgentClean = useCallback(() => {
-    router.push("/agent" as any);
-  }, []);
-
-  // Mobile: close sidebar and navigate
-  const handleCreateAgentCleanMobile = useCallback(() => {
-    closeToAgent();
-    handleCreateAgentClean();
-  }, [closeToAgent, handleCreateAgentClean]);
-
-  // Desktop: just navigate, don't close
-  const handleCreateAgentCleanDesktop = useCallback(() => {
-    handleCreateAgentClean();
-  }, [handleCreateAgentClean]);
-
-  // Mobile: close sidebar and navigate
-  const handleSettingsMobile = useCallback(() => {
-    closeToAgent();
-    router.push("/settings");
-  }, [closeToAgent]);
-
-  // Desktop: just navigate, don't close
-  const handleSettingsDesktop = useCallback(() => {
-    router.push("/settings");
-  }, []);
-
-  // Mobile: close sidebar when agent is selected
-  // Snap immediately since navigation interrupts animations
-  const handleAgentSelectMobile = useCallback(() => {
-    translateX.value = -windowWidth;
-    backdropOpacity.value = 0;
-    closeToAgent();
-  }, [closeToAgent, translateX, backdropOpacity, windowWidth]);
-
-  const handleViewMore = useCallback(() => {
-    if (isMobile) {
-      translateX.value = -windowWidth;
-      backdropOpacity.value = 0;
-      closeToAgent();
-    }
-    router.push("/agents");
-  }, [backdropOpacity, closeToAgent, isMobile, translateX, windowWidth]);
-
-  // Close gesture (swipe left to close when sidebar is open)
-  // Only activates on leftward swipe, fails on rightward or vertical movement
-  // This mirrors the explorer-sidebar pattern for the right sidebar
-  const closeGesture = Gesture.Pan()
-    .withRef(closeGestureRef)
-    .enabled(isOpen)
-    // Only activate on leftward swipe (negative X)
-    .activeOffsetX(-15)
-    // Fail on rightward movement (allow internal list scrolling)
-    .failOffsetX(10)
-    // Fail if vertical movement happens first (allow vertical scroll)
-    .failOffsetY([-10, 10])
-    .onStart(() => {
-      isGesturing.value = true;
-    })
-    .onUpdate((event) => {
-      if (!isMobile) return;
-      // Only allow swiping left (closing)
-      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;
-      if (!isMobile) return;
-      const shouldClose = event.translationX < -windowWidth / 3 || event.velocityX < -500;
-      if (shouldClose) {
-        animateToClose();
-        runOnJS(handleClose)();
-      } else {
-        animateToOpen();
-      }
-    })
-    .onFinalize(() => {
-      isGesturing.value = false;
-    });
-
-
-  const sidebarAnimatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: translateX.value }],
-  }));
-
-  const backdropAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: backdropOpacity.value,
-    pointerEvents: backdropOpacity.value > 0.01 ? "auto" : "none",
-  }));
-
-
-  // Render mobile sidebar
-  // On web, use "auto" instead of "box-none" because web's pointer-events: none blocks scroll
-  const overlayPointerEvents = Platform.OS === "web" ? "auto" : "box-none";
-  if (isMobile) {
-    return (
-      <View style={StyleSheet.absoluteFillObject} pointerEvents={overlayPointerEvents}>
-        {/* Backdrop */}
-        <Animated.View style={[styles.backdrop, backdropAnimatedStyle]}>
-          <Pressable style={styles.backdropPressable} onPress={handleClose} />
-        </Animated.View>
-
-        <GestureDetector gesture={closeGesture} touchAction="pan-y">
-          <Animated.View
-            style={[
-              styles.mobileSidebar,
-              { width: windowWidth, paddingTop: insets.top, paddingBottom: insets.bottom },
-              sidebarAnimatedStyle,
-            ]}
-            pointerEvents="auto"
-          >
-            <View style={styles.sidebarContent} pointerEvents="auto">
-              {/* Header */}
-              <View style={styles.sidebarHeader}>
-                <Pressable
-                  style={styles.newAgentButton}
-                  testID="sidebar-new-agent"
-                  onPress={handleCreateAgentCleanMobile}
-                >
-                  {({ hovered }) => (
-                    <>
-                      <Plus size={18} color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted} />
-                      <Text style={[styles.newAgentButtonText, hovered && styles.newAgentButtonTextHovered]}>New agent</Text>
-                    </>
-                  )}
-                </Pressable>
-              </View>
-
-              {/* Middle: scrollable agent list */}
-              {isInitialLoad ? (
-                <SidebarAgentListSkeleton />
-              ) : (
-                <SidebarAgentList
-                  sections={sections}
-                  checkoutByAgentKey={checkoutByAgentKey}
-                  isRefreshing={isManualRefresh && isRevalidating}
-                  onRefresh={handleRefresh}
-                  selectedAgentId={selectedAgentId}
-                  onAgentSelect={handleAgentSelectMobile}
-                  parentGestureRef={closeGestureRef}
-                />
-              )}
-
-              {/* Footer */}
-              <View style={styles.sidebarFooter}>
-                <Pressable
-                  style={styles.footerButton}
-                  onPress={handleViewMore}
-                >
-                  {({ hovered }) => (
-                    <>
-                      <Users size={18} color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted} />
-                      <Text style={[styles.footerButtonText, hovered && styles.footerButtonTextHovered]}>
-                        All agents
-                      </Text>
-                    </>
-                  )}
-                </Pressable>
-                <View style={styles.footerIconRow}>
-                <Pressable
-                  style={styles.footerIconButton}
-                  testID="sidebar-settings"
-                  nativeID="sidebar-settings"
-                  collapsable={false}
-                  accessible
-                  accessibilityLabel="Settings"
-                  accessibilityRole="button"
-                  onPress={handleSettingsMobile}
-                >
-                  {({ hovered }) => (
-                    <Settings size={20} color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted} />
-                  )}
-                </Pressable>
-                </View>
-              </View>
-            </View>
-          </Animated.View>
-        </GestureDetector>
-      </View>
-    );
-  }
-
-  // Desktop: no edge swipe, just show/hide based on isOpen
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <View style={[styles.desktopSidebar, { width: DESKTOP_SIDEBAR_WIDTH }]}>
-      {/* Header: New Agent button - top padding area is draggable on Tauri */}
-      <View
-        style={[styles.sidebarHeader, { paddingTop: trafficLightPadding.top || styles.sidebarHeader.paddingTop }]}
-        {...dragHandlers}
-      >
-        <Pressable
-          style={styles.newAgentButton}
-          testID="sidebar-new-agent"
-          onPress={handleCreateAgentCleanDesktop}
-        >
-          {({ hovered }) => (
-            <>
-              <Plus size={18} color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted} />
-              <Text style={[styles.newAgentButtonText, hovered && styles.newAgentButtonTextHovered]}>New agent</Text>
-            </>
-          )}
-        </Pressable>
-      </View>
-
-      {/* Middle: scrollable agent list */}
-      {isInitialLoad ? (
-        <SidebarAgentListSkeleton />
-      ) : (
-        <SidebarAgentList
-          sections={sections}
-          checkoutByAgentKey={checkoutByAgentKey}
-          isRefreshing={isManualRefresh && isRevalidating}
-          onRefresh={handleRefresh}
-          selectedAgentId={selectedAgentId}
-        />
-      )}
-
-      {/* Footer */}
-      <View style={styles.sidebarFooter}>
-        <Pressable
-          style={styles.footerButton}
-          onPress={handleViewMore}
-        >
-          {({ hovered }) => (
-            <>
-              <Users size={18} color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted} />
-              <Text style={[styles.footerButtonText, hovered && styles.footerButtonTextHovered]}>
-                All agents
-              </Text>
-            </>
-          )}
-        </Pressable>
-        <View style={styles.footerIconRow}>
-          <Pressable
-            style={styles.footerIconButton}
-            testID="sidebar-settings"
-            nativeID="sidebar-settings"
-            collapsable={false}
-            accessible
-            accessibilityLabel="Settings"
-            accessibilityRole="button"
-            onPress={handleSettingsDesktop}
-          >
-            {({ hovered }) => (
-              <Settings size={20} color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted} />
-            )}
-          </Pressable>
-        </View>
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create((theme) => ({
-  backdrop: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-  },
-  backdropPressable: {
-    flex: 1,
-  },
-  mobileSidebar: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    bottom: 0,
-    backgroundColor: theme.colors.surface0,
-    overflow: "hidden",
-  },
-  sidebarContent: {
-    flex: 1,
-    minHeight: 0,
-    overflow: "hidden",
-  },
-  desktopSidebar: {
-    borderRightWidth: 1,
-    borderRightColor: theme.colors.border,
-    backgroundColor: theme.colors.surface0,
-  },
-  sidebarHeader: {
-    paddingHorizontal: theme.spacing[4],
-    paddingTop: theme.spacing[4],
-    paddingBottom: theme.spacing[3],
-    borderBottomWidth: 1,
-    borderBottomColor: theme.colors.border,
-    userSelect: "none",
-  },
-  newAgentButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[2],
-    paddingVertical: theme.spacing[1],
-    paddingHorizontal: theme.spacing[1],
-  },
-  newAgentButtonHovered: {},
-  newAgentButtonText: {
-    fontSize: theme.fontSize.base,
-    fontWeight: theme.fontWeight.normal,
-    color: theme.colors.foregroundMuted,
-  },
-  newAgentButtonTextHovered: {
-    color: theme.colors.foreground,
-  },
-  sidebarFooter: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: theme.spacing[4],
-    paddingVertical: theme.spacing[3],
-    borderTopWidth: 1,
-    borderTopColor: theme.colors.border,
-  },
-  footerIconRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[3],
-  },
-  footerButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[2],
-    paddingVertical: theme.spacing[1],
-    paddingHorizontal: theme.spacing[1],
-  },
-  footerIconButton: {
-    paddingVertical: theme.spacing[1],
-    paddingHorizontal: theme.spacing[1],
-  },
-  footerButtonText: {
-    fontSize: theme.fontSize.base,
-    fontWeight: theme.fontWeight.normal,
-    color: theme.colors.foregroundMuted,
-  },
-  footerButtonTextHovered: {
-    color: theme.colors.foreground,
-  },
-  hostPickerList: {
-    gap: theme.spacing[2],
-  },
-  hostPickerOption: {
-    paddingVertical: theme.spacing[3],
-    paddingHorizontal: theme.spacing[3],
-    borderRadius: theme.borderRadius.lg,
-    backgroundColor: theme.colors.surface2,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-  },
-  hostPickerOptionText: {
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize.sm,
-  },
-  hostPickerCancel: {
-    paddingVertical: theme.spacing[3],
-    paddingHorizontal: theme.spacing[3],
-    borderRadius: theme.borderRadius.lg,
-    backgroundColor: theme.colors.surface0,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-    alignItems: "center",
-  },
-  hostPickerCancelText: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.sm,
-  },
-}));

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

@@ -0,0 +1,187 @@
+"use dom";
+
+import { useEffect, useRef } from "react";
+import type { DOMProps } from "expo/dom";
+import "@xterm/xterm/css/xterm.css";
+import type { PendingTerminalModifiers } from "../utils/terminal-keys";
+import { TerminalEmulatorRuntime } from "../terminal/runtime/terminal-emulator-runtime";
+
+interface TerminalEmulatorProps {
+  dom?: DOMProps;
+  streamKey: string;
+  initialOutputText: string;
+  outputChunkText: string;
+  outputChunkSequence: number;
+  testId?: string;
+  backgroundColor?: string;
+  foregroundColor?: string;
+  cursorColor?: string;
+  onInput?: (data: string) => Promise<void> | void;
+  onResize?: (input: { rows: number; cols: number }) => Promise<void> | void;
+  onTerminalKey?: (input: {
+    key: string;
+    ctrl: boolean;
+    shift: boolean;
+    alt: boolean;
+    meta: boolean;
+  }) => Promise<void> | void;
+  onPendingModifiersConsumed?: () => Promise<void> | void;
+  onOutputChunkConsumed?: (sequence: number) => Promise<void> | void;
+  pendingModifiers?: PendingTerminalModifiers;
+  focusRequestToken?: number;
+  resizeRequestToken?: number;
+}
+
+declare global {
+  interface Window {}
+}
+
+export default function TerminalEmulator({
+  streamKey,
+  initialOutputText,
+  outputChunkText,
+  outputChunkSequence,
+  testId = "terminal-surface",
+  backgroundColor = "#0b0b0b",
+  foregroundColor = "#e6e6e6",
+  cursorColor = "#e6e6e6",
+  onInput,
+  onResize,
+  onTerminalKey,
+  onPendingModifiersConsumed,
+  onOutputChunkConsumed,
+  pendingModifiers = { ctrl: false, shift: false, alt: false },
+  focusRequestToken = 0,
+  resizeRequestToken = 0,
+}: TerminalEmulatorProps) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const runtimeRef = useRef<TerminalEmulatorRuntime | null>(null);
+
+  useEffect(() => {
+    const host = hostRef.current;
+    const root = rootRef.current;
+    if (!host || !root) {
+      return;
+    }
+
+    const runtime = new TerminalEmulatorRuntime();
+    runtimeRef.current = runtime;
+    runtime.setCallbacks({
+      callbacks: {
+        onInput,
+        onResize,
+        onTerminalKey,
+        onPendingModifiersConsumed,
+      },
+    });
+    runtime.setPendingModifiers({ pendingModifiers });
+    runtime.mount({
+      root,
+      host,
+      initialOutputText,
+      theme: {
+        backgroundColor,
+        foregroundColor,
+        cursorColor,
+      },
+    });
+
+    return () => {
+      runtime.unmount();
+      if (runtimeRef.current === runtime) {
+        runtimeRef.current = null;
+      }
+    };
+  }, [backgroundColor, cursorColor, foregroundColor, streamKey]);
+
+  useEffect(() => {
+    runtimeRef.current?.setCallbacks({
+      callbacks: {
+        onInput,
+        onResize,
+        onTerminalKey,
+        onPendingModifiersConsumed,
+      },
+    });
+  }, [onInput, onPendingModifiersConsumed, onResize, onTerminalKey]);
+
+  useEffect(() => {
+    runtimeRef.current?.setPendingModifiers({ pendingModifiers });
+  }, [pendingModifiers]);
+
+  useEffect(() => {
+    const runtime = runtimeRef.current;
+    if (outputChunkSequence <= 0) {
+      return;
+    }
+
+    if (!runtime) {
+      onOutputChunkConsumed?.(outputChunkSequence);
+      return;
+    }
+
+    if (outputChunkText.length === 0) {
+      runtime.clear({
+        onCommitted: () => {
+          onOutputChunkConsumed?.(outputChunkSequence);
+        },
+      });
+      return;
+    }
+    runtime.write({
+      text: outputChunkText,
+      onCommitted: () => {
+        onOutputChunkConsumed?.(outputChunkSequence);
+      },
+    });
+  }, [onOutputChunkConsumed, outputChunkSequence, outputChunkText]);
+
+  useEffect(() => {
+    if (focusRequestToken <= 0) {
+      return;
+    }
+    runtimeRef.current?.focus();
+  }, [focusRequestToken]);
+
+  useEffect(() => {
+    if (resizeRequestToken <= 0) {
+      return;
+    }
+    runtimeRef.current?.resize({ force: true });
+  }, [resizeRequestToken]);
+
+  return (
+    <div
+      ref={rootRef}
+      data-testid={testId}
+      style={{
+        position: "relative",
+        display: "flex",
+        width: "100%",
+        height: "100%",
+        minHeight: 0,
+        minWidth: 0,
+        backgroundColor,
+        overflow: "hidden",
+        overscrollBehavior: "none",
+      }}
+      onPointerDown={() => {
+        runtimeRef.current?.focus();
+      }}
+    >
+      <div
+        ref={hostRef}
+        style={{
+          flex: 1,
+          minHeight: 0,
+          minWidth: 0,
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          overscrollBehavior: "none",
+        }}
+      />
+    </div>
+  );
+}

packages/app/src/components/tool-call-details.tsx

@@ -48,7 +48,8 @@ export function ToolCallDetailsContent({
     (detail?.type === "shell" ||
       detail?.type === "edit" ||
       detail?.type === "write" ||
-      detail?.type === "read");
+      detail?.type === "read" ||
+      detail?.type === "sub_agent");
   const codeBlockStyle = isFullBleed ? styles.fullBleedBlock : styles.diffContainer;
 
   if (detail?.type === "shell") {
@@ -89,6 +90,82 @@ export function ToolCallDetailsContent({
         </View>
       </View>
     );
+  } else if (detail?.type === "worktree_setup") {
+    const setupLog = detail.log.replace(/^\n+/, "");
+    const hasLog = setupLog.length > 0;
+    sections.push(
+      <View
+        key="worktree-setup"
+        style={[styles.section, shouldFill && styles.fillHeight]}
+      >
+        <View style={[codeBlockStyle, shouldFill && styles.fillHeight]}>
+          <ScrollView
+            style={[
+              styles.codeVerticalScroll,
+              resolvedMaxHeight !== undefined && { maxHeight: resolvedMaxHeight },
+              shouldFill && styles.fillHeight,
+            ]}
+            contentContainerStyle={styles.codeVerticalContent}
+            nestedScrollEnabled
+            showsVerticalScrollIndicator
+          >
+            <ScrollView
+              horizontal
+              nestedScrollEnabled
+              showsHorizontalScrollIndicator
+              contentContainerStyle={styles.codeHorizontalContent}
+            >
+              <View style={styles.codeLine}>
+                <Text selectable style={styles.scrollText}>
+                  {hasLog
+                    ? setupLog
+                    : `Preparing worktree ${detail.branchName} at ${detail.worktreePath}`}
+                </Text>
+              </View>
+            </ScrollView>
+          </ScrollView>
+        </View>
+      </View>
+    );
+  } else if (detail?.type === "sub_agent") {
+    const activityLog = detail.log.replace(/^\n+/, "");
+    const hasLog = activityLog.length > 0;
+    const fallbackHeader =
+      detail.subAgentType && detail.description
+        ? `${detail.subAgentType}: ${detail.description}`
+        : detail.subAgentType ?? detail.description ?? "Sub-agent activity";
+    sections.push(
+      <View
+        key="sub-agent"
+        style={[styles.section, shouldFill && styles.fillHeight]}
+      >
+        <View style={[codeBlockStyle, shouldFill && styles.fillHeight]}>
+          <ScrollView
+            style={[
+              styles.codeVerticalScroll,
+              resolvedMaxHeight !== undefined && { maxHeight: resolvedMaxHeight },
+              shouldFill && styles.fillHeight,
+            ]}
+            contentContainerStyle={styles.codeVerticalContent}
+            nestedScrollEnabled
+            showsVerticalScrollIndicator
+          >
+            <ScrollView
+              horizontal
+              nestedScrollEnabled
+              showsHorizontalScrollIndicator
+              contentContainerStyle={styles.codeHorizontalContent}
+            >
+              <View style={styles.codeLine}>
+                <Text selectable style={styles.scrollText}>
+                  {hasLog ? activityLog : fallbackHeader}
+                </Text>
+              </View>
+            </ScrollView>
+          </ScrollView>
+        </View>
+      </View>
+    );
   } else if (detail?.type === "edit") {
     sections.push(
       <View
@@ -177,7 +254,7 @@ export function ToolCallDetailsContent({
     if (plainInputText !== null) {
       sections.push(
         <View key="unknown-plain-text" style={styles.plainTextSection}>
-          <Text selectable style={styles.scrollText}>{plainInputText}</Text>
+          <Text selectable style={styles.plainText}>{plainInputText}</Text>
         </View>
       );
     } else {
@@ -298,6 +375,13 @@ const styles = StyleSheet.create((theme) => {
     gap: theme.spacing[2],
     padding: theme.spacing[3],
   },
+  plainText: {
+    fontFamily: Fonts.sans,
+    fontSize: theme.fontSize.base,
+    color: theme.colors.foreground,
+    lineHeight: 22,
+    overflowWrap: "anywhere",
+  },
   sectionTitle: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.xs,
@@ -349,6 +433,12 @@ const styles = StyleSheet.create((theme) => {
       fontSize: theme.fontSize.xs,
       color: theme.colors.foreground,
       lineHeight: 18,
+      ...(Platform.OS === "web"
+        ? {
+            whiteSpace: "pre",
+            overflowWrap: "normal",
+          }
+        : null),
     },
     shellPrompt: {
       color: theme.colors.foregroundMuted,

packages/app/src/components/ui/autocomplete-utils.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  getAutocompleteFallbackIndex,
+  getAutocompleteScrollOffset,
+  orderAutocompleteOptions,
+} from "./autocomplete-utils";
+
+const OPTIONS = ["alpha", "beta", "gamma"];
+
+describe("orderAutocompleteOptions", () => {
+  it("keeps first logical option closest to the input by default", () => {
+    expect(orderAutocompleteOptions(OPTIONS)).toEqual([
+      "gamma",
+      "beta",
+      "alpha",
+    ]);
+  });
+
+  it("keeps normal top-down order when below-input is selected", () => {
+    expect(orderAutocompleteOptions(OPTIONS, "below-input")).toEqual([
+      "alpha",
+      "beta",
+      "gamma",
+    ]);
+  });
+});
+
+describe("getAutocompleteFallbackIndex", () => {
+  it("picks the option nearest the input by default", () => {
+    expect(getAutocompleteFallbackIndex(3)).toBe(2);
+    expect(getAutocompleteFallbackIndex(0)).toBe(-1);
+  });
+
+  it("picks top item when below-input ordering is used", () => {
+    expect(getAutocompleteFallbackIndex(3, "below-input")).toBe(0);
+  });
+});
+
+describe("getAutocompleteScrollOffset", () => {
+  it("scrolls up when the active item is above the viewport", () => {
+    expect(
+      getAutocompleteScrollOffset({
+        currentOffset: 120,
+        viewportHeight: 80,
+        itemTop: 90,
+        itemHeight: 20,
+      })
+    ).toBe(90);
+  });
+
+  it("scrolls down when the active item is below the viewport", () => {
+    expect(
+      getAutocompleteScrollOffset({
+        currentOffset: 0,
+        viewportHeight: 100,
+        itemTop: 150,
+        itemHeight: 24,
+      })
+    ).toBe(74);
+  });
+});

packages/app/src/components/ui/autocomplete-utils.ts

@@ -0,0 +1,56 @@
+import { getNextActiveIndex } from "./combobox-keyboard";
+
+export type AutocompleteOptionsPosition = "above-input" | "below-input";
+
+export function orderAutocompleteOptions<T>(
+  options: readonly T[],
+  position: AutocompleteOptionsPosition = "above-input"
+): T[] {
+  if (position === "below-input") {
+    return [...options];
+  }
+  return [...options].reverse();
+}
+
+export function getAutocompleteFallbackIndex(
+  itemCount: number,
+  position: AutocompleteOptionsPosition = "above-input"
+): number {
+  if (itemCount <= 0) {
+    return -1;
+  }
+  return position === "above-input" ? itemCount - 1 : 0;
+}
+
+export function getAutocompleteNextIndex(args: {
+  currentIndex: number;
+  itemCount: number;
+  key: "ArrowDown" | "ArrowUp";
+}): number {
+  return getNextActiveIndex(args);
+}
+
+export function getAutocompleteScrollOffset(args: {
+  currentOffset: number;
+  viewportHeight: number;
+  itemTop: number;
+  itemHeight: number;
+}): number {
+  if (args.viewportHeight <= 0) {
+    return args.currentOffset;
+  }
+
+  const itemBottom = args.itemTop + args.itemHeight;
+  const viewportTop = args.currentOffset;
+  const viewportBottom = args.currentOffset + args.viewportHeight;
+
+  if (args.itemTop < viewportTop) {
+    return Math.max(0, args.itemTop);
+  }
+
+  if (itemBottom > viewportBottom) {
+    return Math.max(0, itemBottom - args.viewportHeight);
+  }
+
+  return args.currentOffset;
+}

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

@@ -0,0 +1,272 @@
+import { useCallback, useEffect, useRef } from 'react'
+import { ScrollView, Text, View, Pressable, type LayoutChangeEvent } from 'react-native'
+import { StyleSheet, useUnistyles } from 'react-native-unistyles'
+import { File, Folder } from 'lucide-react-native'
+import { Theme } from '@/styles/theme'
+import { getAutocompleteScrollOffset } from './autocomplete-utils'
+
+export interface AutocompleteOption {
+  id: string
+  label: string
+  detail?: string
+  description?: string
+  kind?: 'command' | 'file' | 'directory'
+}
+
+interface AutocompleteProps {
+  options: readonly AutocompleteOption[]
+  selectedIndex: number
+  onSelect: (option: AutocompleteOption) => void
+  isLoading?: boolean
+  errorMessage?: string
+  loadingText?: string
+  emptyText?: string
+  maxHeight?: number
+}
+
+const BOLT_GLYPH_PATTERN = /[\u26A1\uFE0F]/g
+
+function removeBoltGlyphs(value?: string): string | undefined {
+  if (!value) {
+    return value
+  }
+  const cleaned = value.replace(BOLT_GLYPH_PATTERN, '').trim()
+  return cleaned.length > 0 ? cleaned : undefined
+}
+
+export function Autocomplete({
+  options,
+  selectedIndex,
+  onSelect,
+  isLoading = false,
+  errorMessage,
+  loadingText = 'Loading...',
+  emptyText = 'No results found',
+  maxHeight = 220,
+}: AutocompleteProps) {
+  const { theme } = useUnistyles()
+  const scrollRef = useRef<ScrollView>(null)
+  const rowLayoutsRef = useRef<Map<number, { top: number; height: number }>>(new Map())
+  const viewportHeightRef = useRef(0)
+  const scrollOffsetRef = useRef(0)
+
+  const ensureActiveItemVisible = useCallback(() => {
+    if (selectedIndex < 0) {
+      return
+    }
+
+    const layout = rowLayoutsRef.current.get(selectedIndex)
+    if (!layout) {
+      return
+    }
+
+    const nextOffset = getAutocompleteScrollOffset({
+      currentOffset: scrollOffsetRef.current,
+      viewportHeight: viewportHeightRef.current,
+      itemTop: layout.top,
+      itemHeight: layout.height,
+    })
+
+    if (Math.abs(nextOffset - scrollOffsetRef.current) < 1) {
+      return
+    }
+
+    scrollOffsetRef.current = nextOffset
+    scrollRef.current?.scrollTo({ y: nextOffset, animated: false })
+  }, [selectedIndex])
+
+  const pinToBottom = useCallback(() => {
+    scrollRef.current?.scrollToEnd({ animated: false })
+    requestAnimationFrame(() => {
+      scrollRef.current?.scrollToEnd({ animated: false })
+    })
+  }, [])
+
+  useEffect(() => {
+    rowLayoutsRef.current.clear()
+    scrollOffsetRef.current = 0
+  }, [options])
+
+  useEffect(() => {
+    if (options.length === 0) {
+      return
+    }
+    pinToBottom()
+  }, [options, pinToBottom])
+
+  useEffect(() => {
+    const raf = requestAnimationFrame(ensureActiveItemVisible)
+    return () => {
+      cancelAnimationFrame(raf)
+    }
+  }, [ensureActiveItemVisible, options.length])
+
+  const handleScrollViewLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      viewportHeightRef.current = event.nativeEvent.layout.height
+      ensureActiveItemVisible()
+    },
+    [ensureActiveItemVisible]
+  )
+
+  const handleRowLayout = useCallback(
+    (index: number, event: LayoutChangeEvent) => {
+      rowLayoutsRef.current.set(index, {
+        top: event.nativeEvent.layout.y,
+        height: event.nativeEvent.layout.height,
+      })
+      ensureActiveItemVisible()
+    },
+    [ensureActiveItemVisible]
+  )
+
+  if (isLoading) {
+    return (
+      <View style={[styles.container, { maxHeight }]}>
+        <View style={styles.emptyItem}>
+          <Text style={styles.emptyText}>{loadingText}</Text>
+        </View>
+      </View>
+    )
+  }
+
+  if (errorMessage) {
+    return (
+      <View style={[styles.container, { maxHeight }]}>
+        <View style={styles.emptyItem}>
+          <Text style={styles.emptyText}>Error: {errorMessage}</Text>
+        </View>
+      </View>
+    )
+  }
+
+  if (options.length === 0) {
+    return (
+      <View style={[styles.container, { maxHeight }]}>
+        <View style={styles.emptyItem}>
+          <Text style={styles.emptyText}>{emptyText}</Text>
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View style={[styles.container, { maxHeight }]}>
+      <ScrollView
+        ref={scrollRef}
+        onLayout={handleScrollViewLayout}
+        onContentSizeChange={pinToBottom}
+        onScroll={(event) => {
+          scrollOffsetRef.current = event.nativeEvent.contentOffset.y
+        }}
+        scrollEventThrottle={16}
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollContent}
+        keyboardShouldPersistTaps="always"
+      >
+        {options.map((option, index) => {
+          const isSelected = index === selectedIndex
+          const optionLabel = removeBoltGlyphs(option.label) ?? option.label
+          const optionDetail = removeBoltGlyphs(option.detail)
+          const optionDescription = removeBoltGlyphs(option.description)
+          return (
+            <Pressable
+              key={option.id}
+              onLayout={(event) => handleRowLayout(index, event)}
+              onPress={() => onSelect(option)}
+              style={({ hovered = false, pressed }) => [
+                styles.item,
+                (hovered || pressed || isSelected) && styles.itemActive,
+              ]}
+            >
+              {option.kind === 'directory' || option.kind === 'file' ? (
+                <View style={styles.itemLeading}>
+                  {option.kind === 'directory' ? (
+                    <Folder size={14} color={theme.colors.foregroundMuted} />
+                  ) : (
+                    <File size={14} color={theme.colors.foregroundMuted} />
+                  )}
+                </View>
+              ) : null}
+              <View style={styles.itemMain}>
+                <View style={styles.itemHeader}>
+                  <Text style={styles.itemLabel}>{optionLabel}</Text>
+                  {optionDetail ? <Text style={styles.itemDetail}>{optionDetail}</Text> : null}
+                </View>
+                {optionDescription ? (
+                  <Text style={styles.itemDescription} numberOfLines={1}>
+                    {optionDescription}
+                  </Text>
+                ) : null}
+              </View>
+            </Pressable>
+          )
+        })}
+      </ScrollView>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create(((theme: Theme) => ({
+  container: {
+    backgroundColor: theme.colors.surface0,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+    borderRadius: theme.borderRadius.lg,
+    overflow: 'hidden',
+  },
+  scrollView: {
+    flexGrow: 0,
+    flexShrink: 1,
+  },
+  scrollContent: {
+    paddingVertical: theme.spacing[1],
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: 36,
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[2],
+  },
+  itemLeading: {
+    width: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: theme.spacing[1],
+  },
+  itemActive: {
+    backgroundColor: theme.colors.surface1,
+  },
+  itemMain: {
+    flex: 1,
+    minWidth: 0,
+  },
+  itemHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing[2],
+  },
+  itemLabel: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.normal,
+  },
+  itemDetail: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+  },
+  itemDescription: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    marginTop: 2,
+  },
+  emptyItem: {
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[3],
+  },
+  emptyText: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+  },
+})) as any) as Record<string, any>

packages/app/src/components/ui/combobox-options.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  buildVisibleComboboxOptions,
+  getComboboxFallbackIndex,
+  orderVisibleComboboxOptions,
+} from "./combobox-options";
+
+describe("buildVisibleComboboxOptions", () => {
+  const options = [
+    { id: "/Users/me/project-a", label: "/Users/me/project-a", kind: "directory" as const },
+    { id: "/Users/me/project-b", label: "/Users/me/project-b", kind: "directory" as const },
+  ];
+
+  it("keeps a custom row visible while searching with no matches", () => {
+    const visible = buildVisibleComboboxOptions({
+      options,
+      searchQuery: "/tmp/new-project",
+      searchable: true,
+      allowCustomValue: true,
+      customValuePrefix: "",
+      customValueKind: "directory",
+    });
+
+    expect(visible).toHaveLength(1);
+    expect(visible[0]).toEqual({
+      id: "/tmp/new-project",
+      label: "/tmp/new-project",
+      description: undefined,
+      kind: "directory",
+    });
+  });
+
+  it("does not duplicate a row when search exactly matches an existing option", () => {
+    const visible = buildVisibleComboboxOptions({
+      options,
+      searchQuery: "/Users/me/project-a",
+      searchable: true,
+      allowCustomValue: true,
+      customValuePrefix: "",
+      customValueKind: "directory",
+    });
+
+    expect(visible).toEqual([
+      { id: "/Users/me/project-a", label: "/Users/me/project-a", kind: "directory" },
+    ]);
+  });
+});
+
+describe("combobox above-search ordering", () => {
+  const visible = [
+    { id: "/tmp/new-project", label: "/tmp/new-project", kind: "directory" as const },
+    { id: "/Users/me/project-a", label: "/Users/me/project-a", kind: "directory" as const },
+    { id: "/Users/me/project-b", label: "/Users/me/project-b", kind: "directory" as const },
+  ];
+
+  it("renders first logical option closest to the search box in above-search mode", () => {
+    const ordered = orderVisibleComboboxOptions(visible, "above-search");
+    expect(ordered.map((option) => option.id)).toEqual([
+      "/Users/me/project-b",
+      "/Users/me/project-a",
+      "/tmp/new-project",
+    ]);
+    expect(getComboboxFallbackIndex(ordered.length, "above-search")).toBe(2);
+  });
+
+  it("keeps normal top-down order in below-search mode", () => {
+    const ordered = orderVisibleComboboxOptions(visible, "below-search");
+    expect(ordered.map((option) => option.id)).toEqual([
+      "/tmp/new-project",
+      "/Users/me/project-a",
+      "/Users/me/project-b",
+    ]);
+    expect(getComboboxFallbackIndex(ordered.length, "below-search")).toBe(0);
+  });
+});

packages/app/src/components/ui/combobox-options.ts

@@ -0,0 +1,95 @@
+export type ComboboxOptionKind = 'directory' | 'file'
+
+export interface ComboboxOptionModel {
+  id: string
+  label: string
+  description?: string
+  kind?: ComboboxOptionKind
+}
+
+export interface BuildVisibleComboboxOptionsInput {
+  options: ComboboxOptionModel[]
+  searchQuery: string
+  searchable: boolean
+  allowCustomValue: boolean
+  customValuePrefix: string
+  customValueDescription?: string
+  customValueKind?: ComboboxOptionKind
+}
+
+export function shouldShowCustomComboboxOption(input: {
+  options: ComboboxOptionModel[]
+  searchQuery: string
+  searchable: boolean
+  allowCustomValue: boolean
+}): boolean {
+  const sanitizedSearchValue = input.searchQuery.trim()
+  if (!input.searchable || !input.allowCustomValue || sanitizedSearchValue.length === 0) {
+    return false
+  }
+
+  return !input.options.some(
+    (opt) =>
+      opt.id.toLowerCase() === sanitizedSearchValue.toLowerCase() ||
+      opt.label.toLowerCase() === sanitizedSearchValue.toLowerCase()
+  )
+}
+
+export function buildVisibleComboboxOptions(
+  input: BuildVisibleComboboxOptionsInput
+): ComboboxOptionModel[] {
+  const normalizedSearch = input.searchable ? input.searchQuery.trim().toLowerCase() : ''
+  const filteredOptions = normalizedSearch
+    ? input.options.filter(
+        (opt) =>
+          opt.label.toLowerCase().includes(normalizedSearch) ||
+          opt.id.toLowerCase().includes(normalizedSearch) ||
+          opt.description?.toLowerCase().includes(normalizedSearch)
+      )
+    : input.options
+
+  const sanitizedSearchValue = input.searchQuery.trim()
+  const showCustomOption = shouldShowCustomComboboxOption({
+    options: input.options,
+    searchQuery: input.searchQuery,
+    searchable: input.searchable,
+    allowCustomValue: input.allowCustomValue,
+  })
+
+  const visibleOptions: ComboboxOptionModel[] = []
+
+  if (showCustomOption) {
+    const trimmedPrefix = input.customValuePrefix.trim()
+    const customLabel =
+      trimmedPrefix.length > 0 ? `${trimmedPrefix} "${sanitizedSearchValue}"` : sanitizedSearchValue
+    visibleOptions.push({
+      id: sanitizedSearchValue,
+      label: customLabel,
+      description: input.customValueDescription,
+      kind: input.customValueKind,
+    })
+  }
+
+  visibleOptions.push(...filteredOptions)
+  return visibleOptions
+}
+
+export function orderVisibleComboboxOptions(
+  visibleOptions: ComboboxOptionModel[],
+  optionsPosition: 'below-search' | 'above-search'
+): ComboboxOptionModel[] {
+  if (optionsPosition !== 'above-search') {
+    return visibleOptions
+  }
+  return [...visibleOptions].reverse()
+}
+
+export function getComboboxFallbackIndex(
+  itemCount: number,
+  optionsPosition: 'below-search' | 'above-search'
+): number {
+  if (itemCount <= 0) {
+    return -1
+  }
+  return optionsPosition === 'above-search' ? itemCount - 1 : 0
+}

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

@@ -0,0 +1,145 @@
+import type { ReactNode } from "react";
+import { Pressable, Text, View } from "react-native";
+import type { StyleProp, ViewStyle } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+type SegmentedControlSize = "sm" | "md";
+
+type SegmentedControlIconRenderer = (props: {
+  color: string;
+  size: number;
+}) => ReactNode;
+
+export type SegmentedControlOption<T extends string> = {
+  value: T;
+  label: string;
+  icon?: SegmentedControlIconRenderer;
+  disabled?: boolean;
+  testID?: string;
+};
+
+type SegmentedControlProps<T extends string> = {
+  options: SegmentedControlOption<T>[];
+  value: T;
+  onValueChange: (value: T) => void;
+  size?: SegmentedControlSize;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+};
+
+export function SegmentedControl<T extends string>({
+  options,
+  value,
+  onValueChange,
+  size = "md",
+  style,
+  testID,
+}: SegmentedControlProps<T>) {
+  const { theme } = useUnistyles();
+  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;
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      {options.map((option) => {
+        const isSelected = option.value === value;
+        const iconColor = isSelected ? theme.colors.foreground : theme.colors.foregroundMuted;
+
+        return (
+          <Pressable
+            key={option.value}
+            accessibilityRole="button"
+            accessibilityState={{ selected: isSelected, disabled: option.disabled }}
+            disabled={option.disabled}
+            testID={option.testID}
+            onPress={() => {
+              if (!option.disabled && option.value !== value) {
+                onValueChange(option.value);
+              }
+            }}
+            style={({ hovered, pressed }) => [
+              styles.segment,
+              segmentSizeStyle,
+              isSelected && styles.segmentSelected,
+              hovered && !isSelected && styles.segmentHover,
+              pressed && !isSelected && styles.segmentPressed,
+              option.disabled && styles.segmentDisabled,
+            ]}
+          >
+            {option.icon ? (
+              <View style={styles.iconContainer}>
+                {option.icon({ color: iconColor, size: iconSize })}
+              </View>
+            ) : null}
+            <Text
+              style={[styles.label, labelSizeStyle, isSelected && styles.labelSelected]}
+              numberOfLines={1}
+            >
+              {option.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    maxWidth: "100%",
+    gap: 4,
+  },
+  segment: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    borderRadius: theme.borderRadius.full,
+    borderWidth: 1,
+    borderColor: "transparent",
+    gap: theme.spacing[1],
+  },
+  segmentSm: {
+    paddingVertical: theme.spacing[1],
+    paddingHorizontal: theme.spacing[2],
+  },
+  segmentMd: {
+    paddingVertical: theme.spacing[2],
+    paddingHorizontal: theme.spacing[3],
+  },
+  segmentSelected: {
+    backgroundColor: theme.colors.surface3,
+    borderColor: theme.colors.border,
+  },
+  segmentHover: {
+    backgroundColor: theme.colors.surface3,
+    borderColor: theme.colors.borderAccent,
+  },
+  segmentPressed: {
+    backgroundColor: theme.colors.surface3,
+    borderColor: theme.colors.borderAccent,
+  },
+  segmentDisabled: {
+    opacity: theme.opacity[50],
+  },
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  label: {
+    color: theme.colors.foregroundMuted,
+    fontWeight: theme.fontWeight.normal,
+  },
+  labelSm: {
+    fontSize: theme.fontSize.xs,
+  },
+  labelMd: {
+    fontSize: theme.fontSize.sm,
+  },
+  labelSelected: {
+    color: theme.colors.foreground,
+  },
+}));

packages/app/src/components/voice-panel.tsx

@@ -3,11 +3,11 @@ import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { MicOff, Square } from "lucide-react-native";
 import { VolumeMeter } from "./volume-meter";
 import { useVoice } from "@/contexts/voice-context";
-import { useDaemonConnections } from "@/contexts/daemon-connections-context";
+import { useDaemonRegistry } from "@/contexts/daemon-registry-context";
 
 export function VoicePanel() {
   const { theme } = useUnistyles();
-  const { connectionStates } = useDaemonConnections();
+  const { daemons } = useDaemonRegistry();
   const {
     volume,
     isMuted,
@@ -18,8 +18,9 @@ export function VoicePanel() {
     activeServerId,
   } = useVoice();
 
-  const activeHost = activeServerId ? connectionStates.get(activeServerId) ?? null : null;
-  const hostLabel = activeHost?.daemon.label ?? null;
+  const hostLabel = activeServerId
+    ? daemons.find((daemon) => daemon.serverId === activeServerId)?.label ?? null
+    : null;
   const hostSuffix = hostLabel ? ` (${hostLabel})` : "";
 
   return (

packages/app/src/components/web-desktop-scrollbar.math.ts

@@ -0,0 +1,81 @@
+const DEFAULT_MIN_HANDLE_SIZE = 36;
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export type VerticalScrollbarGeometryInput = {
+  viewportSize: number;
+  contentSize: number;
+  offset: number;
+  minHandleSize?: number;
+};
+
+export type VerticalScrollbarGeometry = {
+  isVisible: boolean;
+  maxScrollOffset: number;
+  handleSize: number;
+  handleOffset: number;
+  maxHandleOffset: number;
+};
+
+export function computeVerticalScrollbarGeometry(
+  input: VerticalScrollbarGeometryInput
+): VerticalScrollbarGeometry {
+  const viewportSize = Number.isFinite(input.viewportSize)
+    ? Math.max(0, input.viewportSize)
+    : 0;
+  const contentSize = Number.isFinite(input.contentSize)
+    ? Math.max(0, input.contentSize)
+    : 0;
+  const minHandleSize = Number.isFinite(input.minHandleSize)
+    ? Math.max(0, input.minHandleSize ?? DEFAULT_MIN_HANDLE_SIZE)
+    : DEFAULT_MIN_HANDLE_SIZE;
+
+  const maxScrollOffset = Math.max(0, contentSize - viewportSize);
+  if (maxScrollOffset <= 0 || viewportSize <= 0 || contentSize <= 0) {
+    return {
+      isVisible: false,
+      maxScrollOffset: 0,
+      handleSize: 0,
+      handleOffset: 0,
+      maxHandleOffset: 0,
+    };
+  }
+
+  const rawHandleSize = (viewportSize * viewportSize) / contentSize;
+  const handleSize = clamp(rawHandleSize, minHandleSize, viewportSize);
+  const maxHandleOffset = Math.max(0, viewportSize - handleSize);
+  const clampedOffset = clamp(input.offset, 0, maxScrollOffset);
+  const handleOffset =
+    maxScrollOffset > 0
+      ? (clampedOffset / maxScrollOffset) * maxHandleOffset
+      : 0;
+
+  return {
+    isVisible: true,
+    maxScrollOffset,
+    handleSize,
+    handleOffset,
+    maxHandleOffset,
+  };
+}
+
+export type ScrollOffsetFromDragDeltaInput = {
+  startOffset: number;
+  dragDelta: number;
+  maxScrollOffset: number;
+  maxHandleOffset: number;
+};
+
+export function computeScrollOffsetFromDragDelta(
+  input: ScrollOffsetFromDragDeltaInput
+): number {
+  if (input.maxScrollOffset <= 0 || input.maxHandleOffset <= 0) {
+    return clamp(input.startOffset, 0, Math.max(0, input.maxScrollOffset));
+  }
+
+  const scrollPerPixel = input.maxScrollOffset / input.maxHandleOffset;
+  const nextOffset = input.startOffset + input.dragDelta * scrollPerPixel;
+  return clamp(nextOffset, 0, input.maxScrollOffset);
+}

packages/app/src/components/web-desktop-scrollbar.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from "vitest";
+import {
+  computeScrollOffsetFromDragDelta,
+  computeVerticalScrollbarGeometry,
+} from "./web-desktop-scrollbar.math";
+
+describe("computeVerticalScrollbarGeometry", () => {
+  it("returns hidden geometry when content does not overflow", () => {
+    const geometry = computeVerticalScrollbarGeometry({
+      viewportSize: 500,
+      contentSize: 500,
+      offset: 0,
+      minHandleSize: 36,
+    });
+
+    expect(geometry).toEqual({
+      isVisible: false,
+      maxScrollOffset: 0,
+      handleSize: 0,
+      handleOffset: 0,
+      maxHandleOffset: 0,
+    });
+  });
+
+  it("computes visible geometry when content overflows", () => {
+    const geometry = computeVerticalScrollbarGeometry({
+      viewportSize: 500,
+      contentSize: 2000,
+      offset: 375,
+      minHandleSize: 36,
+    });
+
+    expect(geometry).toEqual({
+      isVisible: true,
+      maxScrollOffset: 1500,
+      handleSize: 125,
+      handleOffset: 93.75,
+      maxHandleOffset: 375,
+    });
+  });
+
+  it("clamps handle size to min and offset to bounds", () => {
+    const geometry = computeVerticalScrollbarGeometry({
+      viewportSize: 100,
+      contentSize: 10000,
+      offset: 99999,
+      minHandleSize: 24,
+    });
+
+    expect(geometry).toEqual({
+      isVisible: true,
+      maxScrollOffset: 9900,
+      handleSize: 24,
+      handleOffset: 76,
+      maxHandleOffset: 76,
+    });
+  });
+});
+
+describe("computeScrollOffsetFromDragDelta", () => {
+  it("maps drag distance proportionally to scroll offset", () => {
+    const nextOffset = computeScrollOffsetFromDragDelta({
+      startOffset: 250,
+      dragDelta: 50,
+      maxScrollOffset: 1000,
+      maxHandleOffset: 200,
+    });
+
+    expect(nextOffset).toBe(500);
+  });
+
+  it("clamps to scroll bounds", () => {
+    const nextOffset = computeScrollOffsetFromDragDelta({
+      startOffset: 900,
+      dragDelta: 1000,
+      maxScrollOffset: 1000,
+      maxHandleOffset: 200,
+    });
+
+    expect(nextOffset).toBe(1000);
+  });
+});

packages/app/src/components/web-desktop-scrollbar.tsx

@@ -0,0 +1,451 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  PanResponder,
+  Platform,
+  View,
+  type LayoutChangeEvent,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+} from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import {
+  computeScrollOffsetFromDragDelta,
+  computeVerticalScrollbarGeometry,
+} from "./web-desktop-scrollbar.math";
+
+const METRICS_EPSILON = 0.5;
+const HANDLE_WIDTH_IDLE = 6;
+const HANDLE_WIDTH_ACTIVE = 9;
+const HANDLE_GRAB_WIDTH = 18;
+const HANDLE_GRAB_VERTICAL_PADDING = 8;
+const HANDLE_OPACITY_VISIBLE = 0.62;
+const HANDLE_OPACITY_HOVERED = 0.78;
+const HANDLE_OPACITY_DRAGGING = 0.9;
+const HANDLE_TRAVEL_TRANSITION_DURATION_MS = 90;
+const HANDLE_FADE_DURATION_MS = 220;
+const HANDLE_WIDTH_TRANSITION_DURATION_MS = 240;
+const HANDLE_SCROLL_VISIBILITY_MS = 1200;
+const HANDLE_SCROLL_ACTIVE_MS = 110;
+
+function readClientY(event: any): number | null {
+  const value =
+    event?.nativeEvent?.clientY ??
+    event?.clientY ??
+    event?.nativeEvent?.pageY ??
+    event?.pageY;
+  return typeof value === "number" ? value : null;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+type ScrollbarMetrics = {
+  offset: number;
+  viewportSize: number;
+  contentSize: number;
+};
+
+function areMetricsEqual(a: ScrollbarMetrics, b: ScrollbarMetrics): boolean {
+  return (
+    Math.abs(a.offset - b.offset) <= METRICS_EPSILON &&
+    Math.abs(a.viewportSize - b.viewportSize) <= METRICS_EPSILON &&
+    Math.abs(a.contentSize - b.contentSize) <= METRICS_EPSILON
+  );
+}
+
+export function useWebDesktopScrollbarMetrics() {
+  const [metrics, setMetrics] = useState<ScrollbarMetrics>({
+    offset: 0,
+    viewportSize: 0,
+    contentSize: 0,
+  });
+
+  const setMetricsIfChanged = useCallback((next: ScrollbarMetrics) => {
+    setMetrics((previous) => (areMetricsEqual(previous, next) ? previous : next));
+  }, []);
+
+  const onScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const { contentOffset, layoutMeasurement, contentSize } = event.nativeEvent;
+      setMetricsIfChanged({
+        offset: Math.max(0, contentOffset.y),
+        viewportSize: Math.max(0, layoutMeasurement.height),
+        contentSize: Math.max(0, contentSize.height),
+      });
+    },
+    [setMetricsIfChanged]
+  );
+
+  const onLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const viewportSize = Math.max(0, event.nativeEvent.layout.height);
+      setMetrics((previous) => {
+        const next = { ...previous, viewportSize };
+        return areMetricsEqual(previous, next) ? previous : next;
+      });
+    },
+    []
+  );
+
+  const onContentSizeChange = useCallback((_width: number, height: number) => {
+    const contentSize = Math.max(0, height);
+    setMetrics((previous) => {
+      const next = { ...previous, contentSize };
+      return areMetricsEqual(previous, next) ? previous : next;
+    });
+  }, []);
+
+  const setOffset = useCallback((offset: number) => {
+    const clampedOffset = Math.max(0, offset);
+    setMetrics((previous) => {
+      const next = { ...previous, offset: clampedOffset };
+      return areMetricsEqual(previous, next) ? previous : next;
+    });
+  }, []);
+
+  return {
+    ...metrics,
+    onScroll,
+    onLayout,
+    onContentSizeChange,
+    setOffset,
+  };
+}
+
+type WebDesktopScrollbarOverlayProps = {
+  enabled: boolean;
+  metrics: ScrollbarMetrics;
+  onScrollToOffset: (offset: number) => void;
+  inverted?: boolean;
+};
+
+export function WebDesktopScrollbarOverlay({
+  enabled,
+  metrics,
+  onScrollToOffset,
+  inverted = false,
+}: WebDesktopScrollbarOverlayProps) {
+  const { theme } = useUnistyles();
+  const [isHandleHovered, setIsHandleHovered] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isScrollVisible, setIsScrollVisible] = useState(false);
+  const [isScrollActive, setIsScrollActive] = useState(false);
+  const dragStartOffsetRef = useRef(0);
+  const dragStartClientYRef = useRef(0);
+  const scrollVisibilityTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const scrollActiveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastObservedOffsetRef = useRef<number | null>(null);
+  const geometryRef = useRef({
+    maxHandleOffset: 0,
+    maxScrollOffset: 0,
+  });
+  const onScrollToOffsetRef = useRef(onScrollToOffset);
+  const isWeb = Platform.OS === "web";
+
+  const maxScrollOffset = Math.max(0, metrics.contentSize - metrics.viewportSize);
+  const normalizedOffset = inverted
+    ? Math.max(0, maxScrollOffset - clamp(metrics.offset, 0, maxScrollOffset))
+    : clamp(metrics.offset, 0, maxScrollOffset);
+  const normalizedOffsetRef = useRef(normalizedOffset);
+
+  const geometry = useMemo(
+    () =>
+      computeVerticalScrollbarGeometry({
+        viewportSize: metrics.viewportSize,
+        contentSize: metrics.contentSize,
+        offset: normalizedOffset,
+      }),
+    [metrics.contentSize, metrics.viewportSize, normalizedOffset]
+  );
+
+  useEffect(() => {
+    geometryRef.current = {
+      maxHandleOffset: geometry.maxHandleOffset,
+      maxScrollOffset: geometry.maxScrollOffset,
+    };
+  }, [geometry.maxHandleOffset, geometry.maxScrollOffset]);
+
+  useEffect(() => {
+    onScrollToOffsetRef.current = onScrollToOffset;
+  }, [onScrollToOffset]);
+
+  useEffect(() => {
+    normalizedOffsetRef.current = normalizedOffset;
+  }, [normalizedOffset]);
+
+  const clearScrollVisibilityTimeout = useCallback(() => {
+    if (scrollVisibilityTimeoutRef.current === null) {
+      return;
+    }
+    clearTimeout(scrollVisibilityTimeoutRef.current);
+    scrollVisibilityTimeoutRef.current = null;
+  }, []);
+
+  const clearScrollActiveTimeout = useCallback(() => {
+    if (scrollActiveTimeoutRef.current === null) {
+      return;
+    }
+    clearTimeout(scrollActiveTimeoutRef.current);
+    scrollActiveTimeoutRef.current = null;
+  }, []);
+
+  const revealScrollbarFromScroll = useCallback(() => {
+    setIsScrollVisible(true);
+    clearScrollVisibilityTimeout();
+    scrollVisibilityTimeoutRef.current = setTimeout(() => {
+      setIsScrollVisible(false);
+      scrollVisibilityTimeoutRef.current = null;
+    }, HANDLE_SCROLL_VISIBILITY_MS);
+  }, [clearScrollVisibilityTimeout]);
+
+  const markScrollActivity = useCallback(() => {
+    setIsScrollActive(true);
+    clearScrollActiveTimeout();
+    scrollActiveTimeoutRef.current = setTimeout(() => {
+      setIsScrollActive(false);
+      scrollActiveTimeoutRef.current = null;
+    }, HANDLE_SCROLL_ACTIVE_MS);
+  }, [clearScrollActiveTimeout]);
+
+  useEffect(() => {
+    if (!enabled || !geometry.isVisible) {
+      setIsScrollVisible(false);
+      setIsScrollActive(false);
+      clearScrollVisibilityTimeout();
+      clearScrollActiveTimeout();
+      lastObservedOffsetRef.current = null;
+      return;
+    }
+
+    const previousOffset = lastObservedOffsetRef.current;
+    lastObservedOffsetRef.current = normalizedOffset;
+    if (previousOffset === null) {
+      return;
+    }
+    if (Math.abs(normalizedOffset - previousOffset) <= METRICS_EPSILON) {
+      return;
+    }
+    revealScrollbarFromScroll();
+    markScrollActivity();
+  }, [
+    clearScrollActiveTimeout,
+    clearScrollVisibilityTimeout,
+    enabled,
+    geometry.isVisible,
+    markScrollActivity,
+    normalizedOffset,
+    revealScrollbarFromScroll,
+  ]);
+
+  useEffect(
+    () => () => {
+      clearScrollActiveTimeout();
+      clearScrollVisibilityTimeout();
+    },
+    [clearScrollActiveTimeout, clearScrollVisibilityTimeout]
+  );
+
+  const applyDragDelta = useCallback(
+    (dragDelta: number) => {
+      const currentGeometry = geometryRef.current;
+      const nextNormalizedOffset = computeScrollOffsetFromDragDelta({
+        startOffset: dragStartOffsetRef.current,
+        dragDelta,
+        maxScrollOffset: currentGeometry.maxScrollOffset,
+        maxHandleOffset: currentGeometry.maxHandleOffset,
+      });
+      const nextOffset = inverted
+        ? currentGeometry.maxScrollOffset - nextNormalizedOffset
+        : nextNormalizedOffset;
+      onScrollToOffsetRef.current(nextOffset);
+    },
+    [inverted]
+  );
+
+  const panResponder = useMemo(() => {
+    if (isWeb) {
+      return null;
+    }
+
+    return PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderGrant: () => {
+        dragStartOffsetRef.current = normalizedOffsetRef.current;
+        setIsDragging(true);
+      },
+      onPanResponderMove: (_event, gestureState) => {
+        applyDragDelta(gestureState.dy);
+      },
+      onPanResponderRelease: () => {
+        setIsDragging(false);
+      },
+      onPanResponderTerminate: () => {
+        setIsDragging(false);
+      },
+    });
+  }, [applyDragDelta, isWeb]);
+
+  const startWebDrag = useCallback(
+    (event: any) => {
+      if (!isWeb) {
+        return;
+      }
+      const clientY = readClientY(event);
+      if (clientY === null) {
+        return;
+      }
+      event?.preventDefault?.();
+      event?.stopPropagation?.();
+      event?.nativeEvent?.preventDefault?.();
+      dragStartOffsetRef.current = normalizedOffsetRef.current;
+      dragStartClientYRef.current = clientY;
+      setIsDragging(true);
+    },
+    [isWeb]
+  );
+
+  const handleGrabHoverIn = useCallback(() => {
+    if (!isScrollVisible && !isDragging) {
+      return;
+    }
+    setIsHandleHovered(true);
+  }, [isDragging, isScrollVisible]);
+
+  const handleGrabHoverOut = useCallback(() => {
+    setIsHandleHovered(false);
+  }, []);
+
+  useEffect(() => {
+    if (!isWeb || !isDragging) {
+      return;
+    }
+
+    const handlePointerMove = (event: PointerEvent) => {
+      const dragDelta = event.clientY - dragStartClientYRef.current;
+      applyDragDelta(dragDelta);
+    };
+
+    const stopDragging = () => {
+      setIsDragging(false);
+    };
+
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", stopDragging);
+    window.addEventListener("pointercancel", stopDragging);
+
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", stopDragging);
+      window.removeEventListener("pointercancel", stopDragging);
+    };
+  }, [applyDragDelta, isDragging, isWeb]);
+
+  if (!enabled || !geometry.isVisible) {
+    return null;
+  }
+
+  const handleVisible = isDragging || isScrollVisible || isHandleHovered;
+  const handleOpacity = isDragging
+    ? HANDLE_OPACITY_DRAGGING
+    : isHandleHovered
+      ? HANDLE_OPACITY_HOVERED
+      : isScrollVisible
+        ? HANDLE_OPACITY_VISIBLE
+        : 0;
+  const handleWidth = isDragging || isHandleHovered ? HANDLE_WIDTH_ACTIVE : HANDLE_WIDTH_IDLE;
+  const isDark = theme.colors.surface0 === "#18181c";
+  const handleColor = isDark
+    ? theme.colors.palette.zinc[500]
+    : theme.colors.palette.zinc[700];
+  const handleCursor = isDragging ? "grabbing" : "grab";
+  const handleTravelDurationMs =
+    isDragging || isScrollActive ? 0 : HANDLE_TRAVEL_TRANSITION_DURATION_MS;
+  const thumbRegionOffset = Math.max(0, geometry.handleOffset - HANDLE_GRAB_VERTICAL_PADDING);
+  const thumbRegionHeight = Math.min(
+    metrics.viewportSize - thumbRegionOffset,
+    geometry.handleSize + HANDLE_GRAB_VERTICAL_PADDING * 2
+  );
+  const handleInsetTop = Math.max(0, (thumbRegionHeight - geometry.handleSize) / 2);
+
+  return (
+    <View style={styles.overlay} pointerEvents="box-none">
+      <View
+        style={[
+          styles.thumbRegion,
+          {
+            top: 0,
+            height: thumbRegionHeight,
+            transform: [{ translateY: thumbRegionOffset }],
+          },
+          isWeb &&
+            ({
+              cursor: handleCursor,
+              touchAction: "none",
+              userSelect: "none",
+              transitionProperty: "transform",
+              transitionDuration: `${handleTravelDurationMs}ms`,
+              transitionTimingFunction: "linear",
+            } as any),
+        ]}
+        pointerEvents={handleVisible ? "auto" : "none"}
+        {...(panResponder?.panHandlers ?? {})}
+        {...(isWeb
+          ? ({
+              onPointerDown: startWebDrag,
+              onPointerEnter: handleGrabHoverIn,
+              onPointerLeave: handleGrabHoverOut,
+              onMouseEnter: handleGrabHoverIn,
+              onMouseLeave: handleGrabHoverOut,
+            } as any)
+          : null)}
+      >
+        <View
+          style={[
+            styles.handle,
+            {
+              marginTop: handleInsetTop,
+              height: geometry.handleSize,
+              width: handleWidth,
+              backgroundColor: handleColor,
+              opacity: handleOpacity,
+            },
+            isWeb &&
+              ({
+                transitionProperty: "opacity, width, background-color",
+                transitionDuration: `${HANDLE_FADE_DURATION_MS}ms, ${HANDLE_WIDTH_TRANSITION_DURATION_MS}ms, ${HANDLE_FADE_DURATION_MS}ms`,
+                transitionTimingFunction:
+                  "ease-out, cubic-bezier(0.22, 0.75, 0.2, 1), ease-out",
+              } as any),
+          ]}
+          pointerEvents="none"
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create(() => ({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: 12,
+    alignItems: "center",
+    justifyContent: "flex-start",
+    zIndex: 10,
+  },
+  handle: {
+    width: HANDLE_WIDTH_IDLE,
+    borderRadius: 999,
+    alignSelf: "center",
+  },
+  thumbRegion: {
+    position: "absolute",
+    right: -3,
+    width: HANDLE_GRAB_WIDTH,
+  },
+}));

packages/app/src/components/welcome-screen.tsx

@@ -9,6 +9,7 @@ import { useSessionStore } from "@/stores/session-store";
 import { AddHostModal } from "./add-host-modal";
 import { PairLinkModal } from "./pair-link-modal";
 import { NameHostModal } from "./name-host-modal";
+import { buildHostAgentDraftRoute } from "@/utils/host-routes";
 
 const styles = StyleSheet.create((theme) => ({
   container: {
@@ -90,7 +91,7 @@ export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) {
 
   const finishOnboarding = useCallback(
     (serverId: string) => {
-      router.replace({ pathname: "/", params: { serverId } });
+      router.replace(buildHostAgentDraftRoute(serverId) as any);
     },
     [router]
   );

packages/app/src/constants/layout.ts

@@ -1,4 +1,5 @@
 import { Platform } from "react-native";
+import { getTauri } from "@/utils/tauri";
 
 export const FOOTER_HEIGHT = 75;
 
@@ -7,6 +8,7 @@ export const FOOTER_HEIGHT = 75;
 // This ensures both headers have the same visual height
 export const HEADER_INNER_HEIGHT = 48;
 export const HEADER_INNER_HEIGHT_MOBILE = 56;
+export const HEADER_TOP_PADDING_MOBILE = 8;
 
 // Max width for chat content (stream view, input area, new agent form)
 export const MAX_CONTENT_WIDTH = 820;
@@ -19,21 +21,20 @@ export const TAURI_TRAFFIC_LIGHT_HEIGHT = 56;
 // Check if running in Tauri desktop app (any OS)
 function isTauri(): boolean {
   if (Platform.OS !== "web") return false;
-  if (typeof window === "undefined") return false;
-  return "__TAURI__" in window;
+  return getTauri() !== null;
 }
 
 // Check if running in Tauri desktop app on macOS
 function isTauriMac(): boolean {
   if (Platform.OS !== "web") return false;
   if (typeof window === "undefined") return false;
-  if (!("__TAURI__" in window)) return false;
+  if (getTauri() === null) return false;
   // Check for macOS via user agent
   const ua = navigator.userAgent;
   return ua.includes("Mac OS") || ua.includes("Macintosh");
 }
 
-// Cached result - only cache true, keep checking if false (in case __TAURI__ loads later)
+// Cached result - only cache true, keep checking if false (in case Tauri globals load later)
 let _isTauriMacCached: boolean | null = null;
 let _isTauriCached: boolean | null = null;
 

packages/app/src/contexts/daemon-connections-context.tsx

@@ -1,187 +0,0 @@
-import { createContext, useCallback, useContext, useEffect, useState } from "react";
-import type { ReactNode } from "react";
-import { useDaemonRegistry, type HostProfile } from "./daemon-registry-context";
-
-export type ActiveConnection =
-  | { type: "direct"; endpoint: string; display: string }
-  | { type: "relay"; endpoint: string; display: "relay" };
-
-export type ConnectionState =
-  | { status: "idle"; activeConnection: ActiveConnection | null; lastError: null; lastOnlineAt: string | null; agentListReady: false; hasEverReceivedAgentList: false }
-  | { status: "connecting"; activeConnection: ActiveConnection | null; lastError: null; lastOnlineAt: string | null; agentListReady: false; hasEverReceivedAgentList: boolean }
-  | { status: "online"; activeConnection: ActiveConnection | null; lastError: null; lastOnlineAt: string; agentListReady: boolean; hasEverReceivedAgentList: boolean }
-  | { status: "offline"; activeConnection: ActiveConnection | null; lastError: string | null; lastOnlineAt: string | null; agentListReady: false; hasEverReceivedAgentList: boolean }
-  | { status: "error"; activeConnection: ActiveConnection | null; lastError: string; lastOnlineAt: string | null; agentListReady: false; hasEverReceivedAgentList: boolean };
-
-export type ConnectionStatus = ConnectionState["status"];
-
-type ConnectionStateUpdate =
-  | { status: "idle" }
-  | { status: "connecting"; activeConnection?: ActiveConnection | null; lastOnlineAt?: string | null }
-  | { status: "online"; activeConnection?: ActiveConnection | null; lastOnlineAt: string; agentListReady?: boolean }
-  | { status: "offline"; activeConnection?: ActiveConnection | null; lastError?: string | null; lastOnlineAt?: string | null }
-  | { status: "error"; activeConnection?: ActiveConnection | null; lastError: string; lastOnlineAt?: string | null };
-
-export type DaemonConnectionRecord = {
-  daemon: HostProfile;
-} & ConnectionState;
-
-interface DaemonConnectionsContextValue {
-  connectionStates: Map<string, DaemonConnectionRecord>;
-  isLoading: boolean;
-  updateConnectionStatus: (serverId: string, update: ConnectionStateUpdate) => void;
-}
-
-const DaemonConnectionsContext = createContext<DaemonConnectionsContextValue | null>(null);
-
-function createDefaultConnectionState(): ConnectionState {
-  return {
-    status: "idle",
-    activeConnection: null,
-    lastError: null,
-    lastOnlineAt: null,
-    agentListReady: false,
-    hasEverReceivedAgentList: false,
-  };
-}
-
-function resolveNextConnectionState(
-  existing: ConnectionState,
-  update: ConnectionStateUpdate
-): ConnectionState {
-  switch (update.status) {
-    case "idle":
-      return {
-        status: "idle",
-        activeConnection: existing.activeConnection ?? null,
-        lastError: null,
-        lastOnlineAt: existing.lastOnlineAt,
-        agentListReady: false,
-        hasEverReceivedAgentList: false,
-      };
-    case "connecting":
-      return {
-        status: "connecting",
-        activeConnection: update.activeConnection ?? existing.activeConnection ?? null,
-        lastError: null,
-        lastOnlineAt: update.lastOnlineAt ?? existing.lastOnlineAt,
-        agentListReady: false,
-        hasEverReceivedAgentList: existing.hasEverReceivedAgentList ?? false,
-      };
-    case "online":
-      const currentAgentListReady = update.agentListReady ?? (existing.status === "online" ? existing.agentListReady : false);
-
-      return {
-        status: "online",
-        activeConnection: update.activeConnection ?? existing.activeConnection ?? null,
-        lastError: null,
-        lastOnlineAt: update.lastOnlineAt,
-        agentListReady: currentAgentListReady,
-        hasEverReceivedAgentList:
-          currentAgentListReady || existing.hasEverReceivedAgentList || false,
-      };
-    case "offline":
-      return {
-        status: "offline",
-        activeConnection: update.activeConnection ?? existing.activeConnection ?? null,
-        lastError: update.lastError ?? null,
-        lastOnlineAt: update.lastOnlineAt ?? existing.lastOnlineAt,
-        agentListReady: false,
-        hasEverReceivedAgentList: existing.hasEverReceivedAgentList ?? false,
-      };
-    case "error":
-      return {
-        status: "error",
-        activeConnection: update.activeConnection ?? existing.activeConnection ?? null,
-        lastError: update.lastError,
-        lastOnlineAt: update.lastOnlineAt ?? existing.lastOnlineAt,
-        agentListReady: false,
-        hasEverReceivedAgentList: existing.hasEverReceivedAgentList ?? false,
-      };
-  }
-}
-
-function logConnectionLifecycle(daemon: HostProfile, previous: ConnectionState, next: ConnectionState) {
-  const severity: "info" | "warn" = next.status === "error" ? "warn" : "info";
-  const logger = severity === "warn" ? console.warn : console.info;
-
-  const logPayload = {
-    event: "daemon_connection_state",
-    serverId: daemon.serverId,
-    label: daemon.label,
-    from: previous.status,
-    to: next.status,
-    lastError: next.lastError ?? null,
-    lastOnlineAt: next.lastOnlineAt ?? null,
-    timestamp: new Date().toISOString(),
-    severity,
-  };
-
-  logger("[DaemonConnection]", logPayload);
-}
-
-export function useDaemonConnections(): DaemonConnectionsContextValue {
-  const ctx = useContext(DaemonConnectionsContext);
-  if (!ctx) {
-    throw new Error("useDaemonConnections must be used within DaemonConnectionsProvider");
-  }
-  return ctx;
-}
-
-export function DaemonConnectionsProvider({ children }: { children: ReactNode }) {
-  const { daemons, isLoading: registryLoading } = useDaemonRegistry();
-  const [connectionStates, setConnectionStates] = useState<Map<string, DaemonConnectionRecord>>(new Map());
-
-  // Ensure connection states stay in sync with registry entries
-  useEffect(() => {
-    setConnectionStates((prev) => {
-      const next = new Map<string, DaemonConnectionRecord>();
-      for (const daemon of daemons) {
-        const existing = prev.get(daemon.serverId);
-        next.set(daemon.serverId, {
-          daemon,
-          ...(existing ?? createDefaultConnectionState()),
-        });
-      }
-      return next;
-    });
-  }, [daemons]);
-
-
-  const updateConnectionStatus = useCallback(
-    (serverId: string, update: ConnectionStateUpdate) => {
-      setConnectionStates((prev) => {
-        const existing = prev.get(serverId);
-        if (!existing) {
-          return prev;
-        }
-        const nextState = resolveNextConnectionState(existing, update);
-        const hasChanged =
-          existing.status !== nextState.status ||
-          existing.lastError !== nextState.lastError ||
-          existing.lastOnlineAt !== nextState.lastOnlineAt;
-
-        if (hasChanged) {
-          logConnectionLifecycle(existing.daemon, existing, nextState);
-        }
-
-        const next = new Map(prev);
-        next.set(serverId, { daemon: existing.daemon, ...nextState });
-        return next;
-      });
-    },
-    []
-  );
-
-  const value: DaemonConnectionsContextValue = {
-    connectionStates,
-    isLoading: registryLoading,
-    updateConnectionStatus,
-  };
-
-  return (
-    <DaemonConnectionsContext.Provider value={value}>
-      {children}
-    </DaemonConnectionsContext.Provider>
-  );
-}

packages/app/src/contexts/daemon-registry-context.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, it } from 'vitest'
+import {
+  hostHasDirectEndpoint,
+  registryHasDirectEndpoint,
+  type HostProfile,
+} from './daemon-registry-context'
+
+function makeHost(input: Partial<HostProfile> & Pick<HostProfile, 'serverId'>): HostProfile {
+  const now = '2026-01-01T00:00:00.000Z'
+  return {
+    serverId: input.serverId,
+    label: input.label ?? input.serverId,
+    connections: input.connections ?? [],
+    preferredConnectionId: input.preferredConnectionId ?? null,
+    createdAt: input.createdAt ?? now,
+    updatedAt: input.updatedAt ?? now,
+  }
+}
+
+describe('hostHasDirectEndpoint', () => {
+  it('returns true when host has matching direct endpoint', () => {
+    const host = makeHost({
+      serverId: 'srv_local',
+      connections: [{ id: 'direct:localhost:6767', type: 'direct', endpoint: 'localhost:6767' }],
+      preferredConnectionId: 'direct:localhost:6767',
+    })
+
+    expect(hostHasDirectEndpoint(host, 'localhost:6767')).toBe(true)
+  })
+
+  it('returns false when only relay connections exist', () => {
+    const host = makeHost({
+      serverId: 'srv_relay',
+      connections: [
+        {
+          id: 'relay:relay.example:443',
+          type: 'relay',
+          relayEndpoint: 'relay.example:443',
+          daemonPublicKeyB64: 'abcd',
+        },
+      ],
+      preferredConnectionId: 'relay:relay.example:443',
+    })
+
+    expect(hostHasDirectEndpoint(host, 'localhost:6767')).toBe(false)
+  })
+})
+
+describe('registryHasDirectEndpoint', () => {
+  it('returns true when any host contains the direct endpoint', () => {
+    const hosts: HostProfile[] = [
+      makeHost({
+        serverId: 'srv_one',
+        connections: [{ id: 'direct:127.0.0.1:7777', type: 'direct', endpoint: '127.0.0.1:7777' }],
+        preferredConnectionId: 'direct:127.0.0.1:7777',
+      }),
+      makeHost({
+        serverId: 'srv_two',
+        connections: [{ id: 'direct:localhost:6767', type: 'direct', endpoint: 'localhost:6767' }],
+        preferredConnectionId: 'direct:localhost:6767',
+      }),
+    ]
+
+    expect(registryHasDirectEndpoint(hosts, 'localhost:6767')).toBe(true)
+  })
+
+  it('returns false when no host has the endpoint', () => {
+    const hosts: HostProfile[] = [
+      makeHost({
+        serverId: 'srv_one',
+        connections: [{ id: 'direct:127.0.0.1:7777', type: 'direct', endpoint: '127.0.0.1:7777' }],
+        preferredConnectionId: 'direct:127.0.0.1:7777',
+      }),
+    ]
+
+    expect(registryHasDirectEndpoint(hosts, 'localhost:6767')).toBe(false)
+  })
+})

packages/app/src/contexts/daemon-registry-context.tsx

@@ -1,97 +1,131 @@
-import { createContext, useCallback, useContext } from "react";
-import type { ReactNode } from "react";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import {
-  decodeOfferFragmentPayload,
-  normalizeHostPort,
-} from "@/utils/daemon-endpoints";
-import {
-  ConnectionOfferSchema,
-  type ConnectionOffer,
-} from "@server/shared/connection-offer";
+import { createContext, useCallback, useContext, useEffect, useRef } from 'react'
+import type { ReactNode } from 'react'
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { decodeOfferFragmentPayload, normalizeHostPort } from '@/utils/daemon-endpoints'
+import { probeConnection } from '@/utils/test-daemon-connection'
+import { ConnectionOfferSchema, type ConnectionOffer } from '@server/shared/connection-offer'
 
-const REGISTRY_STORAGE_KEY = "@paseo:daemon-registry";
-const DAEMON_REGISTRY_QUERY_KEY = ["daemon-registry"];
+const REGISTRY_STORAGE_KEY = '@paseo:daemon-registry'
+const DAEMON_REGISTRY_QUERY_KEY = ['daemon-registry']
+const DEFAULT_LOCALHOST_ENDPOINT = 'localhost:6767'
+const DEFAULT_LOCALHOST_BOOTSTRAP_KEY = '@paseo:default-localhost-bootstrap-v1'
+const DEFAULT_LOCALHOST_BOOTSTRAP_TIMEOUT_MS = 2500
+const E2E_STORAGE_KEY = '@paseo:e2e'
 
 export type DirectHostConnection = {
-  id: string;
-  type: "direct";
-  endpoint: string; // host:port
-};
-
-export type RelayHostConnection = {
-  id: string;
-  type: "relay";
-  relayEndpoint: string; // host:port
-  daemonPublicKeyB64: string;
-};
-
-export type HostConnection = DirectHostConnection | RelayHostConnection;
-
-export type HostProfile = {
-  serverId: string;
-  label: string;
-  connections: HostConnection[];
-  preferredConnectionId: string | null;
-  createdAt: string;
-  updatedAt: string;
-};
-
-export type UpdateHostInput = Partial<Omit<HostProfile, "serverId" | "createdAt">>;
-
-interface DaemonRegistryContextValue {
-  daemons: HostProfile[];
-  isLoading: boolean;
-  error: unknown | null;
-  upsertDirectConnection: (input: {
-    serverId: string;
-    endpoint: string;
-    label?: string;
-  }) => Promise<HostProfile>;
-  upsertRelayConnection: (input: {
-    serverId: string;
-    relayEndpoint: string;
-    daemonPublicKeyB64: string;
-    label?: string;
-  }) => Promise<HostProfile>;
-  updateHost: (serverId: string, updates: UpdateHostInput) => Promise<void>;
-  removeHost: (serverId: string) => Promise<void>;
-  removeConnection: (serverId: string, connectionId: string) => Promise<void>;
-  upsertDaemonFromOffer: (offer: ConnectionOffer) => Promise<HostProfile>;
-  upsertDaemonFromOfferUrl: (offerUrlOrFragment: string) => Promise<HostProfile>;
+  id: string
+  type: 'direct'
+  endpoint: string // host:port
 }
 
-const DaemonRegistryContext = createContext<DaemonRegistryContextValue | null>(null);
+export type RelayHostConnection = {
+  id: string
+  type: 'relay'
+  relayEndpoint: string // host:port
+  daemonPublicKeyB64: string
+}
+
+export type HostConnection = DirectHostConnection | RelayHostConnection
+
+export type HostProfile = {
+  serverId: string
+  label: string
+  connections: HostConnection[]
+  preferredConnectionId: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+export type UpdateHostInput = Partial<Omit<HostProfile, 'serverId' | 'createdAt'>>
+
+interface DaemonRegistryContextValue {
+  daemons: HostProfile[]
+  isLoading: boolean
+  error: unknown | null
+  upsertDirectConnection: (input: {
+    serverId: string
+    endpoint: string
+    label?: string
+  }) => Promise<HostProfile>
+  upsertRelayConnection: (input: {
+    serverId: string
+    relayEndpoint: string
+    daemonPublicKeyB64: string
+    label?: string
+  }) => Promise<HostProfile>
+  updateHost: (serverId: string, updates: UpdateHostInput) => Promise<void>
+  removeHost: (serverId: string) => Promise<void>
+  removeConnection: (serverId: string, connectionId: string) => Promise<void>
+  upsertDaemonFromOffer: (offer: ConnectionOffer) => Promise<HostProfile>
+  upsertDaemonFromOfferUrl: (offerUrlOrFragment: string) => Promise<HostProfile>
+}
+
+const DaemonRegistryContext = createContext<DaemonRegistryContextValue | null>(null)
+
+function normalizeEndpointOrNull(endpoint: string): string | null {
+  try {
+    return normalizeHostPort(endpoint)
+  } catch {
+    return null
+  }
+}
+
+function isDefaultLocalhostConnection(connection: HostConnection): boolean {
+  return connection.type === 'direct' && connection.endpoint === DEFAULT_LOCALHOST_ENDPOINT
+}
+
+export function hostHasDirectEndpoint(host: HostProfile, endpoint: string): boolean {
+  const normalized = normalizeEndpointOrNull(endpoint)
+  if (!normalized) {
+    return false
+  }
+  return host.connections.some(
+    (connection) => connection.type === 'direct' && connection.endpoint === normalized
+  )
+}
+
+export function registryHasDirectEndpoint(hosts: HostProfile[], endpoint: string): boolean {
+  return hosts.some((host) => hostHasDirectEndpoint(host, endpoint))
+}
 
 export function useDaemonRegistry(): DaemonRegistryContextValue {
-  const ctx = useContext(DaemonRegistryContext);
+  const ctx = useContext(DaemonRegistryContext)
   if (!ctx) {
-    throw new Error("useDaemonRegistry must be used within DaemonRegistryProvider");
+    throw new Error('useDaemonRegistry must be used within DaemonRegistryProvider')
   }
-  return ctx;
+  return ctx
 }
 
 export function DaemonRegistryProvider({ children }: { children: ReactNode }) {
-  const queryClient = useQueryClient();
-  const { data: daemons = [], isPending, error } = useQuery({
+  const queryClient = useQueryClient()
+  const localhostBootstrapAttemptedRef = useRef(false)
+  const {
+    data: daemons = [],
+    isPending,
+    error,
+  } = useQuery({
     queryKey: DAEMON_REGISTRY_QUERY_KEY,
     queryFn: loadDaemonRegistryFromStorage,
     staleTime: Infinity,
     gcTime: Infinity,
-  });
+  })
 
   const persist = useCallback(
     async (profiles: HostProfile[]) => {
-      queryClient.setQueryData<HostProfile[]>(DAEMON_REGISTRY_QUERY_KEY, profiles);
-      await AsyncStorage.setItem(REGISTRY_STORAGE_KEY, JSON.stringify(profiles));
+      queryClient.setQueryData<HostProfile[]>(DAEMON_REGISTRY_QUERY_KEY, profiles)
+      await AsyncStorage.setItem(REGISTRY_STORAGE_KEY, JSON.stringify(profiles))
     },
     [queryClient]
-  );
+  )
 
   const readDaemons = useCallback(() => {
-    return queryClient.getQueryData<HostProfile[]>(DAEMON_REGISTRY_QUERY_KEY) ?? daemons;
-  }, [queryClient, daemons]);
+    return queryClient.getQueryData<HostProfile[]>(DAEMON_REGISTRY_QUERY_KEY) ?? daemons
+  }, [queryClient, daemons])
+
+  const markDefaultLocalhostBootstrapHandled = useCallback(async () => {
+    await AsyncStorage.setItem(DEFAULT_LOCALHOST_BOOTSTRAP_KEY, '1')
+  }, [])
 
   const updateHost = useCallback(
     async (serverId: string, updates: UpdateHostInput) => {
@@ -103,68 +137,78 @@ export function DaemonRegistryProvider({ children }: { children: ReactNode }) {
               updatedAt: new Date().toISOString(),
             }
           : daemon
-      );
-      await persist(next);
+      )
+      await persist(next)
     },
     [persist, readDaemons]
-  );
+  )
 
   const removeHost = useCallback(
     async (serverId: string) => {
-      const remaining = readDaemons().filter((daemon) => daemon.serverId !== serverId);
-      await persist(remaining);
+      const existing = readDaemons()
+      const removedHost = existing.find((daemon) => daemon.serverId === serverId) ?? null
+      const remaining = existing.filter((daemon) => daemon.serverId !== serverId)
+      await persist(remaining)
+      if (removedHost && hostHasDirectEndpoint(removedHost, DEFAULT_LOCALHOST_ENDPOINT)) {
+        await markDefaultLocalhostBootstrapHandled()
+      }
     },
-    [persist, readDaemons]
-  );
+    [markDefaultLocalhostBootstrapHandled, persist, readDaemons]
+  )
 
   const removeConnection = useCallback(
     async (serverId: string, connectionId: string) => {
-      const now = new Date().toISOString();
-      const next = readDaemons()
+      const existing = readDaemons()
+      const removedConnection =
+        existing
+          .find((daemon) => daemon.serverId === serverId)
+          ?.connections.find((connection) => connection.id === connectionId) ?? null
+      const now = new Date().toISOString()
+      const next = existing
         .map((daemon) => {
-        if (daemon.serverId !== serverId) return daemon;
-        const remaining = daemon.connections.filter((conn) => conn.id !== connectionId);
-        if (remaining.length === 0) {
-          return null;
-        }
-        const preferred =
-          daemon.preferredConnectionId === connectionId
-            ? remaining[0]?.id ?? null
-            : daemon.preferredConnectionId;
-        return {
-          ...daemon,
-          connections: remaining,
-          preferredConnectionId: preferred,
-          updatedAt: now,
-        } satisfies HostProfile;
-      })
-        .filter((entry): entry is HostProfile => entry !== null);
-      await persist(next);
+          if (daemon.serverId !== serverId) return daemon
+          const remaining = daemon.connections.filter((conn) => conn.id !== connectionId)
+          if (remaining.length === 0) {
+            return null
+          }
+          const preferred =
+            daemon.preferredConnectionId === connectionId
+              ? (remaining[0]?.id ?? null)
+              : daemon.preferredConnectionId
+          return {
+            ...daemon,
+            connections: remaining,
+            preferredConnectionId: preferred,
+            updatedAt: now,
+          } satisfies HostProfile
+        })
+        .filter((entry): entry is HostProfile => entry !== null)
+      await persist(next)
+      if (removedConnection && isDefaultLocalhostConnection(removedConnection)) {
+        await markDefaultLocalhostBootstrapHandled()
+      }
     },
-    [persist, readDaemons]
-  );
+    [markDefaultLocalhostBootstrapHandled, persist, readDaemons]
+  )
 
   const upsertHostConnection = useCallback(
     async (
       input: {
-        serverId: string;
-        label?: string;
-      } & (
-        | { connection: DirectHostConnection }
-        | { connection: RelayHostConnection }
-      )
+        serverId: string
+        label?: string
+      } & ({ connection: DirectHostConnection } | { connection: RelayHostConnection })
     ) => {
-      const existing = readDaemons();
-      const now = new Date().toISOString();
-      const serverId = input.serverId.trim();
+      const existing = readDaemons()
+      const now = new Date().toISOString()
+      const serverId = input.serverId.trim()
       if (!serverId) {
-        throw new Error("serverId is required");
+        throw new Error('serverId is required')
       }
 
-      const labelTrimmed = input.label?.trim() ?? "";
-      const derivedLabel = labelTrimmed || serverId;
+      const labelTrimmed = input.label?.trim() ?? ''
+      const derivedLabel = labelTrimmed || serverId
 
-      const idx = existing.findIndex((d) => d.serverId === serverId);
+      const idx = existing.findIndex((d) => d.serverId === serverId)
       if (idx === -1) {
         const profile: HostProfile = {
           serverId,
@@ -173,18 +217,18 @@ export function DaemonRegistryProvider({ children }: { children: ReactNode }) {
           preferredConnectionId: input.connection.id,
           createdAt: now,
           updatedAt: now,
-        };
-        const next = [...existing, profile];
-        await persist(next);
-        return profile;
+        }
+        const next = [...existing, profile]
+        await persist(next)
+        return profile
       }
 
-      const prev = existing[idx]!;
-      const connectionIdx = prev.connections.findIndex((c) => c.id === input.connection.id);
+      const prev = existing[idx]!
+      const connectionIdx = prev.connections.findIndex((c) => c.id === input.connection.id)
       const nextConnections =
         connectionIdx === -1
           ? [...prev.connections, input.connection]
-          : prev.connections.map((c, i) => (i === connectionIdx ? input.connection : c));
+          : prev.connections.map((c, i) => (i === connectionIdx ? input.connection : c))
 
       const nextProfile: HostProfile = {
         ...prev,
@@ -192,54 +236,118 @@ export function DaemonRegistryProvider({ children }: { children: ReactNode }) {
         connections: nextConnections,
         preferredConnectionId: prev.preferredConnectionId ?? input.connection.id,
         updatedAt: now,
-      };
+      }
 
-      const next = [...existing];
-      next[idx] = nextProfile;
-      await persist(next);
-      return nextProfile;
+      const next = [...existing]
+      next[idx] = nextProfile
+      await persist(next)
+      return nextProfile
     },
     [persist, readDaemons]
-  );
+  )
 
   const upsertDirectConnection = useCallback(
     async (input: { serverId: string; endpoint: string; label?: string }) => {
-      const endpoint = normalizeHostPort(input.endpoint);
+      const endpoint = normalizeHostPort(input.endpoint)
       const connection: DirectHostConnection = {
         id: `direct:${endpoint}`,
-        type: "direct",
+        type: 'direct',
         endpoint,
-      };
+      }
       return upsertHostConnection({
         serverId: input.serverId,
         label: input.label,
         connection,
-      });
+      })
     },
     [upsertHostConnection]
-  );
+  )
+
+  useEffect(() => {
+    if (isPending) return
+    if (localhostBootstrapAttemptedRef.current) return
+    localhostBootstrapAttemptedRef.current = true
+
+    let cancelled = false
+
+    const bootstrapDefaultLocalhost = async () => {
+      try {
+        const [isE2E, alreadyHandled] = await Promise.all([
+          AsyncStorage.getItem(E2E_STORAGE_KEY),
+          AsyncStorage.getItem(DEFAULT_LOCALHOST_BOOTSTRAP_KEY),
+        ])
+        if (cancelled || isE2E || alreadyHandled) {
+          return
+        }
+
+        const existing = readDaemons()
+        if (registryHasDirectEndpoint(existing, DEFAULT_LOCALHOST_ENDPOINT)) {
+          await markDefaultLocalhostBootstrapHandled()
+          return
+        }
+
+        try {
+          const { serverId, hostname } = await probeConnection(
+            {
+              id: `bootstrap:${DEFAULT_LOCALHOST_ENDPOINT}`,
+              type: 'direct',
+              endpoint: DEFAULT_LOCALHOST_ENDPOINT,
+            },
+            { timeoutMs: DEFAULT_LOCALHOST_BOOTSTRAP_TIMEOUT_MS }
+          )
+          if (cancelled) return
+
+          await upsertDirectConnection({
+            serverId,
+            endpoint: DEFAULT_LOCALHOST_ENDPOINT,
+            label: hostname ?? undefined,
+          })
+          await markDefaultLocalhostBootstrapHandled()
+        } catch {
+          // Best-effort bootstrap only; keep startup resilient if localhost isn't reachable.
+        }
+      } catch (bootstrapError) {
+        if (cancelled) return
+        console.warn(
+          '[DaemonRegistry] Failed to bootstrap default localhost connection',
+          bootstrapError
+        )
+      }
+    }
+
+    void bootstrapDefaultLocalhost()
+
+    return () => {
+      cancelled = true
+    }
+  }, [isPending, markDefaultLocalhostBootstrapHandled, readDaemons, upsertDirectConnection])
 
   const upsertRelayConnection = useCallback(
-    async (input: { serverId: string; relayEndpoint: string; daemonPublicKeyB64: string; label?: string }) => {
-      const relayEndpoint = normalizeHostPort(input.relayEndpoint);
-      const daemonPublicKeyB64 = input.daemonPublicKeyB64.trim();
+    async (input: {
+      serverId: string
+      relayEndpoint: string
+      daemonPublicKeyB64: string
+      label?: string
+    }) => {
+      const relayEndpoint = normalizeHostPort(input.relayEndpoint)
+      const daemonPublicKeyB64 = input.daemonPublicKeyB64.trim()
       if (!daemonPublicKeyB64) {
-        throw new Error("daemonPublicKeyB64 is required");
+        throw new Error('daemonPublicKeyB64 is required')
       }
       const connection: RelayHostConnection = {
         id: `relay:${relayEndpoint}`,
-        type: "relay",
+        type: 'relay',
         relayEndpoint,
         daemonPublicKeyB64,
-      };
+      }
       return upsertHostConnection({
         serverId: input.serverId,
         label: input.label,
         connection,
-      });
+      })
     },
     [upsertHostConnection]
-  );
+  )
 
   const upsertDaemonFromOffer = useCallback(
     async (offer: ConnectionOffer) => {
@@ -247,28 +355,28 @@ export function DaemonRegistryProvider({ children }: { children: ReactNode }) {
         serverId: offer.serverId,
         relayEndpoint: offer.relay.endpoint,
         daemonPublicKeyB64: offer.daemonPublicKeyB64,
-      });
+      })
     },
     [upsertRelayConnection]
-  );
+  )
 
   const upsertDaemonFromOfferUrl = useCallback(
     async (offerUrlOrFragment: string) => {
-      const marker = "#offer=";
-      const idx = offerUrlOrFragment.indexOf(marker);
+      const marker = '#offer='
+      const idx = offerUrlOrFragment.indexOf(marker)
       if (idx === -1) {
-        throw new Error("Missing #offer= fragment");
+        throw new Error('Missing #offer= fragment')
       }
-      const encoded = offerUrlOrFragment.slice(idx + marker.length).trim();
+      const encoded = offerUrlOrFragment.slice(idx + marker.length).trim()
       if (!encoded) {
-        throw new Error("Offer payload is empty");
+        throw new Error('Offer payload is empty')
       }
-      const payload = decodeOfferFragmentPayload(encoded);
-      const offer = ConnectionOfferSchema.parse(payload);
-      return upsertDaemonFromOffer(offer);
+      const payload = decodeOfferFragmentPayload(encoded)
+      const offer = ConnectionOfferSchema.parse(payload)
+      return upsertDaemonFromOffer(offer)
     },
     [upsertDaemonFromOffer]
-  );
+  )
 
   const value: DaemonRegistryContextValue = {
     daemons,
@@ -281,69 +389,65 @@ export function DaemonRegistryProvider({ children }: { children: ReactNode }) {
     removeConnection,
     upsertDaemonFromOffer,
     upsertDaemonFromOfferUrl,
-  };
+  }
 
-  return (
-    <DaemonRegistryContext.Provider value={value}>
-      {children}
-    </DaemonRegistryContext.Provider>
-  );
+  return <DaemonRegistryContext.Provider value={value}>{children}</DaemonRegistryContext.Provider>
 }
 
 type LegacyHostProfileV1 = {
-  id: string;
-  label: string;
-  endpoints?: unknown;
-  daemonPublicKeyB64?: unknown;
-  relay?: unknown;
-  createdAt: string;
-  updatedAt: string;
-};
+  id: string
+  label: string
+  endpoints?: unknown
+  daemonPublicKeyB64?: unknown
+  relay?: unknown
+  createdAt: string
+  updatedAt: string
+}
 
 function isHostProfileV2(value: unknown): value is HostProfile {
-  if (!value || typeof value !== "object") return false;
-  const obj = value as Record<string, unknown>;
+  if (!value || typeof value !== 'object') return false
+  const obj = value as Record<string, unknown>
   return (
-    typeof obj.serverId === "string" &&
-    typeof obj.label === "string" &&
+    typeof obj.serverId === 'string' &&
+    typeof obj.label === 'string' &&
     Array.isArray(obj.connections) &&
-    typeof obj.createdAt === "string" &&
-    typeof obj.updatedAt === "string"
-  );
+    typeof obj.createdAt === 'string' &&
+    typeof obj.updatedAt === 'string'
+  )
 }
 
 async function loadDaemonRegistryFromStorage(): Promise<HostProfile[]> {
   try {
-    const stored = await AsyncStorage.getItem(REGISTRY_STORAGE_KEY);
+    const stored = await AsyncStorage.getItem(REGISTRY_STORAGE_KEY)
     if (stored) {
-      const parsed = JSON.parse(stored) as unknown;
+      const parsed = JSON.parse(stored) as unknown
       if (Array.isArray(parsed)) {
-        const v2 = parsed.filter((entry) => isHostProfileV2(entry)) as HostProfile[];
+        const v2 = parsed.filter((entry) => isHostProfileV2(entry)) as HostProfile[]
         if (v2.length === parsed.length) {
-          return v2;
+          return v2
         }
 
         // Hard migration from the previous in-repo schema (v1 HostProfile with `id/endpoints/relay`).
         const migrated: HostProfile[] = parsed
           .map((entry): HostProfile | null => {
-            if (!entry || typeof entry !== "object") return null;
-            const obj = entry as LegacyHostProfileV1;
-            if (typeof obj.id !== "string" || typeof obj.label !== "string") return null;
+            if (!entry || typeof entry !== 'object') return null
+            const obj = entry as LegacyHostProfileV1
+            if (typeof obj.id !== 'string' || typeof obj.label !== 'string') return null
 
             // Only keep stable daemon ids; discard transient entries to avoid confusing host selection.
-            if (!obj.id.startsWith("srv_")) return null;
+            if (!obj.id.startsWith('srv_')) return null
 
-            const now = new Date().toISOString();
-            const createdAt = typeof obj.createdAt === "string" ? obj.createdAt : now;
-            const updatedAt = typeof obj.updatedAt === "string" ? obj.updatedAt : now;
+            const now = new Date().toISOString()
+            const createdAt = typeof obj.createdAt === 'string' ? obj.createdAt : now
+            const updatedAt = typeof obj.updatedAt === 'string' ? obj.updatedAt : now
 
-            const connections: HostConnection[] = [];
+            const connections: HostConnection[] = []
 
             if (Array.isArray(obj.endpoints)) {
               for (const endpointRaw of obj.endpoints) {
                 try {
-                  const endpoint = normalizeHostPort(String(endpointRaw));
-                  connections.push({ id: `direct:${endpoint}`, type: "direct", endpoint });
+                  const endpoint = normalizeHostPort(String(endpointRaw))
+                  connections.push({ id: `direct:${endpoint}`, type: 'direct', endpoint })
                 } catch {
                   // ignore invalid endpoint
                 }
@@ -351,29 +455,29 @@ async function loadDaemonRegistryFromStorage(): Promise<HostProfile[]> {
             }
 
             const relayEndpointRaw =
-              obj.relay && typeof (obj.relay as any)?.endpoint === "string"
+              obj.relay && typeof (obj.relay as any)?.endpoint === 'string'
                 ? String((obj.relay as any).endpoint)
-                : null;
+                : null
             const daemonPublicKeyB64 =
-              typeof obj.daemonPublicKeyB64 === "string" ? obj.daemonPublicKeyB64.trim() : "";
+              typeof obj.daemonPublicKeyB64 === 'string' ? obj.daemonPublicKeyB64.trim() : ''
 
             if (relayEndpointRaw && daemonPublicKeyB64) {
               try {
-                const relayEndpoint = normalizeHostPort(relayEndpointRaw);
+                const relayEndpoint = normalizeHostPort(relayEndpointRaw)
                 connections.push({
                   id: `relay:${relayEndpoint}`,
-                  type: "relay",
+                  type: 'relay',
                   relayEndpoint,
                   daemonPublicKeyB64,
-                });
+                })
               } catch {
                 // ignore invalid relay endpoint
               }
             }
 
-            if (connections.length === 0) return null;
+            if (connections.length === 0) return null
 
-            const preferredConnectionId: string | null = connections[0]?.id ?? null;
+            const preferredConnectionId: string | null = connections[0]?.id ?? null
 
             return {
               serverId: obj.id,
@@ -382,18 +486,18 @@ async function loadDaemonRegistryFromStorage(): Promise<HostProfile[]> {
               preferredConnectionId,
               createdAt,
               updatedAt,
-            };
+            }
           })
-          .filter((entry): entry is HostProfile => entry !== null);
+          .filter((entry): entry is HostProfile => entry !== null)
 
-        await AsyncStorage.setItem(REGISTRY_STORAGE_KEY, JSON.stringify(migrated));
-        return migrated;
+        await AsyncStorage.setItem(REGISTRY_STORAGE_KEY, JSON.stringify(migrated))
+        return migrated
       }
     }
 
-    return [];
+    return []
   } catch (error) {
-    console.error("[DaemonRegistry] Failed to load daemon registry", error);
-    throw error;
+    console.error('[DaemonRegistry] Failed to load daemon registry', error)
+    throw error
   }
 }

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

@@ -12,6 +12,17 @@ import { usePanelStore } from "@/stores/panel-store";
 
 const ANIMATION_DURATION = 220;
 const ANIMATION_EASING = Easing.bezier(0.25, 0.1, 0.25, 1);
+const IS_DEV = Boolean((globalThis as { __DEV__?: boolean }).__DEV__);
+
+function logExplorerAnimation(
+  event: string,
+  details: Record<string, unknown>
+): void {
+  if (!IS_DEV) {
+    return;
+  }
+  console.log(`[ExplorerAnimation] ${event}`, details);
+}
 
 interface ExplorerSidebarAnimationContextValue {
   translateX: SharedValue<number>;
@@ -50,13 +61,28 @@ export function ExplorerSidebarAnimationProvider({ children }: { children: React
     if (prevIsOpen.current === isOpen) {
       return;
     }
+    const previousIsOpen = prevIsOpen.current;
     prevIsOpen.current = isOpen;
 
     // Don't animate if we're in the middle of a gesture - the gesture handler will handle it
     if (isGesturing.value) {
+      logExplorerAnimation("sync-skipped-during-gesture", {
+        previousIsOpen,
+        nextIsOpen: isOpen,
+        mobileView,
+        desktopFileExplorerOpen,
+      });
       return;
     }
 
+    logExplorerAnimation("sync-state-change", {
+      previousIsOpen,
+      nextIsOpen: isOpen,
+      mobileView,
+      desktopFileExplorerOpen,
+      windowWidth,
+    });
+
     if (isOpen) {
       translateX.value = withTiming(0, {
         duration: ANIMATION_DURATION,
@@ -76,7 +102,15 @@ export function ExplorerSidebarAnimationProvider({ children }: { children: React
         easing: ANIMATION_EASING,
       });
     }
-  }, [isOpen, translateX, backdropOpacity, windowWidth, isGesturing]);
+  }, [
+    isOpen,
+    translateX,
+    backdropOpacity,
+    windowWidth,
+    isGesturing,
+    mobileView,
+    desktopFileExplorerOpen,
+  ]);
 
   const animateToOpen = () => {
     "worklet";

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

@@ -19,8 +19,13 @@ import {
   View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { CheckCircle2, AlertTriangle } from "lucide-react-native";
+import {
+  HEADER_INNER_HEIGHT,
+  HEADER_INNER_HEIGHT_MOBILE,
+  HEADER_TOP_PADDING_MOBILE,
+} from "@/constants/layout";
 
 type ToastVariant = "default" | "success" | "error";
 
@@ -209,6 +214,11 @@ function ToastViewport({
     return null;
   }
 
+  const isMobile =
+    UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const headerHeight = isMobile ? HEADER_INNER_HEIGHT_MOBILE : HEADER_INNER_HEIGHT;
+  const headerTopPadding = isMobile ? HEADER_TOP_PADDING_MOBILE : 0;
+
   const icon =
     toast.icon ?? (
       toast.variant === "success" ? (
@@ -227,7 +237,8 @@ function ToastViewport({
           toast.variant === "success" ? styles.toastSuccess : null,
           toast.variant === "error" ? styles.toastError : null,
           {
-            marginTop: theme.spacing[2] + insets.top,
+            marginTop:
+              insets.top + headerTopPadding + headerHeight + theme.spacing[2],
             opacity,
             transform: [{ translateY }],
           },

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

@@ -2,6 +2,8 @@ import { createContext, useContext, useState, ReactNode, useCallback, useEffect,
 import { useSpeechmaticsAudio } from "@/hooks/use-speechmatics-audio";
 import type { SessionState } from "@/stores/session-store";
 import { useSessionStore } from "@/stores/session-store";
+import { useHostRuntimeSession } from "@/runtime/host-runtime";
+import { resolveVoiceUnavailableMessage } from "@/utils/server-info-capabilities";
 import { activateKeepAwakeAsync, deactivateKeepAwake } from "expo-keep-awake";
 import { REALTIME_VOICE_VAD_CONFIG } from "@/voice/realtime-voice-config";
 
@@ -44,6 +46,9 @@ export function VoiceProvider({ children }: VoiceProviderProps) {
   const getSession = useSessionStore((state) => state.getSession);
   const [activeServerId, setActiveServerId] = useState<string | null>(null);
   const [activeAgentId, setActiveAgentId] = useState<string | null>(null);
+  const { client: runtimeClient, isConnected: activeRuntimeConnected } = useHostRuntimeSession(
+    activeServerId ?? ""
+  );
   const activeSession = useSessionStore(
     useCallback(
       (state: ReturnType<typeof useSessionStore.getState>) => {
@@ -64,38 +69,63 @@ export function VoiceProvider({ children }: VoiceProviderProps) {
   const voiceTransportReadyRef = useRef(false);
   const voiceResyncInFlightRef = useRef(false);
   const silenceGraceStartMsRef = useRef<number | null>(null);
+  const speechInterruptTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const speechInterruptStartMsRef = useRef<number | null>(null);
+  const speechStartInterruptSentRef = useRef(false);
+  const isVoiceModeRef = useRef(false);
   const vadStateRef = useRef<{ isDetecting: boolean; isSpeaking: boolean }>({
     isDetecting: false,
     isSpeaking: false,
   });
 
+  const clearSpeechStartInterruptTimer = useCallback((reason: string) => {
+    const timer = speechInterruptTimerRef.current;
+    if (timer) {
+      clearTimeout(timer);
+      speechInterruptTimerRef.current = null;
+      const startedAt = speechInterruptStartMsRef.current;
+      speechInterruptStartMsRef.current = null;
+      if (startedAt !== null) {
+        console.log("[Voice] Cleared speech-start interrupt timer", {
+          reason,
+          elapsedMs: Date.now() - startedAt,
+        });
+      } else {
+        console.log("[Voice] Cleared speech-start interrupt timer", { reason });
+      }
+      return;
+    }
+    speechInterruptStartMsRef.current = null;
+  }, []);
+
+  const interruptActiveVoiceTurn = useCallback((source: string) => {
+    const session = realtimeSessionRef.current;
+    const sessionAudioPlayer = session?.audioPlayer ?? null;
+    const sessionClient = session?.client ?? null;
+    const sessionIsPlayingAudio = session?.isPlayingAudio ?? false;
+
+    if (sessionIsPlayingAudio && sessionAudioPlayer) {
+      if (bargeInPlaybackStopRef.current === null) {
+        bargeInPlaybackStopRef.current = Date.now();
+      }
+      sessionAudioPlayer.stop();
+    }
+
+    try {
+      if (sessionClient) {
+        void sessionClient.abortRequest().catch((error) => {
+          console.error("[Voice] Failed to send abort_request:", error);
+        });
+      }
+      console.log("[Voice] Sent abort_request before streaming audio", { source });
+    } catch (error) {
+      console.error("[Voice] Failed to send abort_request:", error);
+    }
+  }, []);
+
   const realtimeAudio = useSpeechmaticsAudio({
     onSpeechStart: () => {
       console.log("[Voice] Segment started (speech confirmed)");
-      // Stop audio playback if playing
-      const session = realtimeSessionRef.current;
-      const sessionAudioPlayer = session?.audioPlayer ?? null;
-      const sessionClient = session?.client ?? null;
-      const sessionIsPlayingAudio = session?.isPlayingAudio ?? false;
-
-      if (sessionIsPlayingAudio && sessionAudioPlayer) {
-        if (bargeInPlaybackStopRef.current === null) {
-          bargeInPlaybackStopRef.current = Date.now();
-        }
-        sessionAudioPlayer.stop();
-      }
-
-      // Abort any in-flight orchestrator turn before the new speech segment streams
-      try {
-        if (sessionClient) {
-          void sessionClient.abortRequest().catch((error) => {
-            console.error("[Voice] Failed to send abort_request:", error);
-          });
-        }
-        console.log("[Voice] Sent abort_request before streaming audio");
-      } catch (error) {
-        console.error("[Voice] Failed to send abort_request:", error);
-      }
     },
     onSpeechEnd: () => {
       const silenceMs =
@@ -108,6 +138,8 @@ export function VoiceProvider({ children }: VoiceProviderProps) {
         console.log("[Voice] Segment finalized", { silenceMs });
       }
       silenceGraceStartMsRef.current = null;
+      clearSpeechStartInterruptTimer("speech ended");
+      speechStartInterruptSentRef.current = false;
     },
     onAudioSegment: ({ audioData, isLast }) => {
       if (!voiceTransportReadyRef.current) {
@@ -158,6 +190,58 @@ export function VoiceProvider({ children }: VoiceProviderProps) {
     realtimeSessionRef.current = activeSession;
   }, [activeSession]);
 
+  useEffect(() => {
+    isVoiceModeRef.current = isVoiceMode;
+  }, [isVoiceMode]);
+
+  useEffect(() => {
+    if (!isVoiceMode) {
+      clearSpeechStartInterruptTimer("voice mode disabled");
+      speechStartInterruptSentRef.current = false;
+      return;
+    }
+
+    if (realtimeAudio.isSpeaking) {
+      if (
+        speechStartInterruptSentRef.current ||
+        speechInterruptTimerRef.current !== null
+      ) {
+        return;
+      }
+      speechInterruptStartMsRef.current = Date.now();
+      speechInterruptTimerRef.current = setTimeout(() => {
+        speechInterruptTimerRef.current = null;
+        speechInterruptStartMsRef.current = null;
+        if (
+          !isVoiceModeRef.current ||
+          !vadStateRef.current.isSpeaking ||
+          speechStartInterruptSentRef.current
+        ) {
+          return;
+        }
+        speechStartInterruptSentRef.current = true;
+        console.log("[Voice] Speech persisted beyond grace; interrupting turn", {
+          graceMs: REALTIME_VOICE_VAD_CONFIG.interruptGracePeriodMs,
+        });
+        interruptActiveVoiceTurn("speech_start_grace_elapsed");
+      }, REALTIME_VOICE_VAD_CONFIG.interruptGracePeriodMs);
+      return;
+    }
+
+    clearSpeechStartInterruptTimer("speech stopped before grace");
+  }, [
+    clearSpeechStartInterruptTimer,
+    interruptActiveVoiceTurn,
+    isVoiceMode,
+    realtimeAudio.isSpeaking,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      clearSpeechStartInterruptTimer("voice provider unmounted");
+    };
+  }, [clearSpeechStartInterruptTimer]);
+
   useEffect(() => {
     const next = {
       isDetecting: realtimeAudio.isDetecting,
@@ -187,14 +271,15 @@ export function VoiceProvider({ children }: VoiceProviderProps) {
     // Fully idle (neither detecting nor speaking).
     if (!next.isDetecting && !next.isSpeaking) {
       silenceGraceStartMsRef.current = null;
+      speechStartInterruptSentRef.current = false;
     }
 
     vadStateRef.current = next;
   }, [isVoiceMode, realtimeAudio.isDetecting, realtimeAudio.isSpeaking]);
 
   useEffect(() => {
-    const connected = activeSession?.connection.isConnected ?? false;
-    const client = activeSession?.client ?? null;
+    const connected = activeRuntimeConnected;
+    const client = runtimeClient;
     if (!connected) {
       voiceTransportReadyRef.current = false;
     }
@@ -232,7 +317,7 @@ export function VoiceProvider({ children }: VoiceProviderProps) {
     }
 
     wasVoiceSocketConnectedRef.current = connected;
-  }, [activeAgentId, activeServerId, activeSession?.client, activeSession?.connection.isConnected, isVoiceMode]);
+  }, [activeAgentId, activeRuntimeConnected, activeServerId, isVoiceMode, runtimeClient]);
 
   const isPlayingAudio = activeSession?.isPlayingAudio ?? false;
 
@@ -254,6 +339,13 @@ export function VoiceProvider({ children }: VoiceProviderProps) {
       if (!session) {
         throw new Error(`Host ${serverId} is not connected`);
       }
+      const unavailableMessage = resolveVoiceUnavailableMessage({
+        serverInfo: session.serverInfo,
+        mode: "voice",
+      });
+      if (unavailableMessage) {
+        throw new Error(unavailableMessage);
+      }
 
       setIsVoiceSwitching(true);
       voiceTransportReadyRef.current = false;