chore(release): cut 0.1.18

Add x86_64-apple-darwin Rust target alongside the existing aarch64 target
and switch Tauri build to --target universal-apple-darwin, producing a single
DMG that runs natively on both Apple Silicon and Intel Macs.

.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

@@ -42,7 +42,7 @@ jobs:
       - name: Install Rust stable
         uses: dtolnay/rust-toolchain@stable
         with:
-          targets: aarch64-apple-darwin
+          targets: aarch64-apple-darwin,x86_64-apple-darwin
 
       - name: Install JS dependencies
         run: npm ci
@@ -95,11 +95,19 @@ jobs:
         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
-          args: --target aarch64-apple-darwin
+          args: --target universal-apple-darwin

.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[@]}"

.gitignore

@@ -74,3 +74,5 @@ valknut-report.json/
 .plans/
 packages/server/src/server/fixtures/dictation/dictation-debug-largest.wav
 packages/server/src/server/fixtures/dictation/dictation-debug-largest.transcript.txt
+
+/artifacts

.mise.toml

@@ -0,0 +1,9 @@
+[env]
+ANDROID_HOME = "{{env.HOME}}/.local/share/mise/installs/android-sdk/1.0"
+_.path = [
+  "{{env.HOME}}/.local/share/mise/installs/android-sdk/1.0/platform-tools",
+  "{{env.HOME}}/.local/share/mise/installs/android-sdk/1.0/emulator",
+]
+
+[tools]
+java = "17"

.tool-versions

@@ -1 +1,4 @@
-rust 1.85.1
+rust        1.85.1
+nodejs      22.20.0
+java        21
+android-sdk latest

CHANGELOG.md

@@ -0,0 +1,200 @@
+# Changelog
+
+## 0.1.18 - 2026-03-06
+### Added
+- Added a desktop `Mod+W` shortcut to close the current tab.
+
+### Improved
+- New and newly selected terminals now take focus automatically so you can type immediately.
+- Kept newly created workspaces and projects in a more stable order in the sidebar.
+- Improved project naming for GitHub remotes and expanded project icon discovery to Phoenix `priv/static` assets.
+- Updated the website desktop download link to use the universal macOS DMG.
+
+### Fixed
+- Restored automatic agent metadata generation for Claude runs.
+
+## 0.1.17 - 2026-03-06
+### Added
+- New workspace-first navigation model with workspace tabs, file tabs, and sortable tab groups.
+- Keyboard shortcuts for workspace and tab navigation, with shortcut badges in the sidebar.
+- Workspace-level archive actions with improved worktree archiving flow and context menu support.
+- In-chat task notifications rendered as synthetic tool-call events for clearer status tracking.
+
+### Improved
+- Desktop builds now ship as a universal macOS binary (Apple Silicon + Intel).
+- More reliable workspace routing and tab identity handling across refreshes and deep links.
+- Better sidebar drag-and-drop behavior with explicit drag handles and nested list interactions.
+- Smoother terminal/file rendering and WebGL-backed terminal performance improvements.
+- Stronger provider error surfacing and updated Claude model/runtime handling.
+
+### Fixed
+- Fixed orphan workspace runs caused by non-canonical tab routes.
+- Fixed mobile terminal tab remount/routing restore issues.
+- Fixed agent metadata title/branch update reliability.
+- Fixed stream/timeline ordering and cursor synchronization issues in the app.
+- Fixed reversed edge-wheel scroll behavior in chat/tool stream views.
+
+## 0.1.16 - 2026-02-22
+### Added
+- Update the Paseo desktop app and local daemon directly from Settings.
+- Microphone and notification permission controls in Settings.
+- Thinking/reasoning mode — agents can use extended thinking when the provider supports it.
+- Autonomous run mode — let agents keep working without manual approval at each step.
+- `paseo wait` now shows a snapshot of recent agent activity while you wait.
+
+### Improved
+- Smoother streaming with less UI flicker and scroll jumping during long agent runs.
+- Faster agent sidebar list rendering.
+- Archiving an agent now stops it first instead of archiving a half-running session.
+- Agent titles no longer reset when refreshing.
+- More reliable relay connections.
+
+### Fixed
+- Fixed Claude background tasks desyncing the chat.
+- Fixed duplicate user messages appearing in the timeline.
+- Fixed a startup crash caused by an OpenCode SDK update.
+- Fixed spurious "needs attention" notifications from background 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

@@ -37,6 +37,8 @@ PASEO_HOME=~/.paseo-blue npm run dev
 
 - `PASEO_HOME` – path for runtime state (agent data, sockets, etc.). Defaults to `~/.paseo`; set this to a unique directory when running a secondary server instance.
 
+For trace+ logs, check $PASEO_HOME/daemon.log
+
 ## Running and checking logs
 
 Both the server and Expo app are running in a Tmux session. See CLAUDE.local.md for system-specific session details.
@@ -56,6 +58,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 +131,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`.
 
@@ -119,12 +141,15 @@ From `packages/app`:
 
 ```bash
 # development (debug)
-APP_VARIANT=development npx expo prebuild --platform android --clean --non-interactive
+APP_VARIANT=development npx expo prebuild --platform android --non-interactive
 APP_VARIANT=development npx expo run:android --variant=debug
 
 # production (release)
-APP_VARIANT=production npx expo prebuild --platform android --clean --non-interactive
+APP_VARIANT=production npx expo prebuild --platform android --non-interactive
 APP_VARIANT=production npx expo run:android --variant=release
+
+# clean native project (when needed)
+npx expo prebuild --platform android --clean --non-interactive
 ```
 
 From repo root:
@@ -132,9 +157,33 @@ From repo root:
 ```bash
 npm run android:development
 npm run android:production
+npm run android:clean
 ```
 
-`npm run android:prod` and `npm run android:release` are aliases for `npm run android:production`.
+`npm run android:release` is an alias 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
 
@@ -150,22 +199,36 @@ 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 or publish commands unless debugging.
+Use the scripted release flow from repo root. Avoid manual version bumps, manual tags, or ad hoc publish commands unless debugging.
 
 ```bash
-# 1) bump all workspaces and refresh workspace links
-npm run version:all:patch
+# Recommended: full patch release (bump, check, publish, push branch+tag)
+npm run release:patch
 
-# 2) run release gate checks (typecheck, build, pack dry-run)
+# Manual, step-by-step fallback:
+npm run version:all:patch  # npm version across all workspaces (creates commit + local tag)
 npm run release:check
-
-# 3) publish relay/server/cli packages
 npm run release:publish
+npm run release:push       # pushes HEAD and current version tag (triggers desktop + Android APK + EAS mobile workflows)
 ```
 
 Notes:
-- `release:prepare` is part of the flow and refreshes workspace `node_modules` links to prevent stale local package types during release checks.
+- `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
 

EXECUTION_PLAN_ITERATION_2_PROJECTS_WORKSPACES_TABS.md

@@ -0,0 +1,160 @@
+# Execution Plan — Iteration 2 Projects → Workspaces → Tabs (Paseo Orchestrated)
+
+This document describes **how** we will execute the fixes defined in:
+- `PLAN_ITERATION_2_PROJECTS_WORKSPACES_TABS.md`
+
+It is optimized for parallel work using **Paseo-managed worktrees** and strict quality gates.
+
+---
+
+## Constraints / Guardrails
+
+- **Do not restart or modify** the user’s main daemon on `localhost:6767`.
+- Use **isolated dev stacks** for manual verification (new daemon + new Metro) via:
+  - `PASEO_HOME=~/.paseo-<unique>` and `npm run dev` (auto-picks free ports).
+- No “legacy view” preserved: we fix the current UX directly (no dead/unused code paths left behind).
+- Agents must treat **terminals and agents as equal first-class tab types** (no special layouts).
+- Keep changes focused to the reported issues; avoid unrelated refactors.
+
+---
+
+## Work Breakdown (Parallel)
+
+### Agent A — Sidebar drag scoping + sidebar polish
+
+**Worktree:** `polish/sidebar-dnd-and-style`
+
+Responsibilities:
+- Fix project drag so dragging a **project header** reorders the **entire project section** (header + workspaces).
+- Fix workspace drag so workspaces reorder **only within their project** (no cross-project placement).
+- Ensure sidebar list **snaps back** to canonical `Project → Workspaces` structure after any drag.
+- Sidebar visuals:
+  - remove workspace “border” style, match project “ghost” style language
+  - remove “No agents yet”
+  - reduce workspace indentation/padding (mobile-friendly)
+- Navigation polish:
+  - clicking a workspace closes the left sidebar (mobile)
+
+### Agent B — Workspace header + tabs polish (icons, unified create, persistence)
+
+**Worktree:** `polish/workspace-tabs-and-header`
+
+Responsibilities:
+- Workspace header shows **branch name** for git workspaces (including base branch like `main`).
+- Replace separate “create agent” vs “create terminal” rows with **one unified New Tab control** (agent + terminal).
+- Agent tabs show **provider icons** (Claude + Codex minimum, using existing assets/components).
+- Fix “remember focused tab per workspace” so:
+  - switching away and back restores the last focused agent/terminal tab
+  - stored selection is **not overwritten** while agent/terminal lists are still loading
+
+### Agent C — Review / sanity check (no code changes)
+
+Runs after merges to:
+- review diff for edge cases + regressions
+- double-check acceptance criteria mapping
+- call out missing verification steps
+
+---
+
+## Agent Launch Commands (local CLI)
+
+We use the repo-local CLI:
+
+```bash
+npm run -s cli -- run --provider codex --model gpt-5.3-codex --mode full-access --worktree <name> --name "<title>" --detach "<prompt>" --quiet
+```
+
+Notes:
+- `--detach --quiet` returns the agent ID quickly so we can launch in parallel.
+- Each agent must **commit** their work in their worktree branch before finishing.
+
+---
+
+## Prompts (exact)
+
+### Prompt for Agent A
+
+Title: `🎭 Sidebar DnD + Polish`
+
+Prompt:
+- Implement **only** the items in “Sidebar drag behavior” + “Sidebar visuals + navigation polish” from `PLAN_ITERATION_2_PROJECTS_WORKSPACES_TABS.md`.
+- Do not change gestures beyond the required drag constraints.
+- Ensure the post-drag list snaps back to the canonical project/workspace grouping.
+- Remove “No agents yet” and fix workspace row styling/indentation.
+- Close sidebar on workspace selection (mobile).
+- Run `npm run typecheck` and `npm run test --workspace=@getpaseo/app` in the worktree.
+- Commit with a clear message.
+
+### Prompt for Agent B
+
+Title: `🎭 Workspace Tabs + Header`
+
+Prompt:
+- Implement **only** the items in “Workspace header + tab bar fixes” from `PLAN_ITERATION_2_PROJECTS_WORKSPACES_TABS.md`.
+- Terminals and agents must be treated as identical first-class tab types (no separate rows/layout).
+- Add provider icons for agent tabs (Claude/Codex minimum) using existing app icon components.
+- Fix per-workspace focused-tab persistence (don’t overwrite selection while queries are pending).
+- Run `npm run typecheck` and `npm run test --workspace=@getpaseo/app` in the worktree.
+- Commit with a clear message.
+
+### Prompt for Agent C (review-only)
+
+Title: `🎭 Review: Sidebar + Tabs Polish`
+
+Prompt:
+- Review the combined diff for correctness vs acceptance criteria in `PLAN_ITERATION_2_PROJECTS_WORKSPACES_TABS.md`.
+- DO NOT edit code. Provide a checklist of anything missing or risky.
+
+---
+
+## Merge Strategy (back to `main`)
+
+1. Wait for Agents A + B to complete.
+2. For each worktree branch:
+   - verify it has a clean commit history (no unrelated changes)
+   - re-run `npm run typecheck` if needed
+3. Merge into `main` sequentially:
+   - merge A
+   - rebase/merge B on top of updated `main` (resolve conflicts if any)
+4. Do not delete/prune worktrees until the user has manually verified.
+
+---
+
+## Verification Gates (strict)
+
+### 1) Automated (must pass)
+
+From repo root on `main` after merges:
+
+```bash
+npm run typecheck
+npm run test --workspace=@getpaseo/app
+```
+
+Optional (run if environment supports it; starts isolated daemon/metro itself):
+
+```bash
+npm run test:e2e --workspace=@getpaseo/app
+```
+
+### 2) Manual (must be performed by us before handing back)
+
+Use an **isolated dev stack** (new daemon + new Metro):
+
+```bash
+PASEO_HOME=~/.paseo-iter2-polish npm run dev
+```
+
+Then use `agent-browser` to verify the “Manual (agent-browser)” section in:
+- `PLAN_ITERATION_2_PROJECTS_WORKSPACES_TABS.md`
+
+---
+
+## Completion Definition
+
+We are “done” when:
+- All acceptance criteria in `PLAN_ITERATION_2_PROJECTS_WORKSPACES_TABS.md` are met.
+- Automated verification gates pass.
+- Manual verification steps pass.
+- Changes are merged into `main` with no leftover legacy code paths.
+

EXECUTION_PLAN_ITERATION_3_WORKSPACE_HEADER_TABS_RESTORE.md

@@ -0,0 +1,60 @@
+# Iteration 3 Execution Plan — Paseo Orchestrated
+
+## Principles
+
+- Work happens in an isolated git worktree and merges back to `main` once verified.
+- Do not restart or touch the daemon on `localhost:6767`.
+- Use the repo’s existing Playwright global setup (isolated daemon/metro) for E2E.
+- Pass all gates before merging:
+  - Typecheck
+  - Vitest
+  - Playwright E2E
+  - Manual `agent-browser` verification
+
+## Agent Delegation (Paseo)
+
+### Implementation agent (1)
+
+- **Agent:** Codex
+- **Mode:** full-access
+- **Worktree:** `iter3-workspace-header-tabs-restore`
+- **Mission:**
+  - Fix New tab dropdown visibility (on-screen, correct pattern)
+  - Restore workspace header structure + explorer toggle + agent kebab menu
+  - Add terminal close (X) from workspace tab strip
+  - Add/adjust Playwright E2E specs for the above
+  - Run verification commands before declaring done
+
+### Reviewer (optional, if needed)
+
+- Only used if implementation is large/risky or tests expose subtle regressions.
+- Codex or Claude Sonnet as a second-pass reviewer for UI regressions.
+
+## Merge Strategy
+
+1. Agent commits all changes in the worktree.
+2. Orchestrator reviews the diff on the worktree.
+3. Run gates locally on the worktree:
+   - `npm run typecheck`
+   - `npm run test --workspace=@getpaseo/app`
+   - `npm run test:e2e --workspace=@getpaseo/app`
+4. Manual `agent-browser` verification:
+   - Desktop viewport: New tab menu visible + explorer toggle + kebab menu
+   - Mobile viewport: explorer icon uses git/folder, toggles right sidebar, left sidebar unaffected
+5. Merge worktree back into `main` with a fast-forward merge if possible; otherwise merge commit.
+
+## Verification Checklist (strict)
+
+- [ ] New tab menu opens and is visible (desktop)
+- [ ] Selecting Agent tab routes to draft agent flow scoped to workspace
+- [ ] Selecting Terminal tab creates terminal and focuses it
+- [ ] Terminal tabs show X; closing kills terminal and removes tab
+- [ ] Workspace header shows branch name
+- [ ] Workspace header has explorer toggle with correct icon behavior
+- [ ] Agent kebab menu exists when Agent tab active
+- [ ] Right sidebar opens/closes via header and mobile swipe gesture
+- [ ] Left sidebar gestures unchanged
+- [ ] `npm run typecheck` ✅
+- [ ] `npm run test --workspace=@getpaseo/app` ✅
+- [ ] `npm run test:e2e --workspace=@getpaseo/app` ✅
+

EXECUTION_PLAN_ITERATION_4_WORKSPACE_HEADER_LAYOUT_RESTORE.md

@@ -0,0 +1,113 @@
+# Execution Plan — Iteration 4 (Paseo-orchestrated)
+
+## Strategy
+
+Use a Paseo-managed implementation agent in an isolated git worktree to patch the workspace screen to restore legacy header/layout parity while keeping tabs. Then review, validate with tests + agent-browser, and merge back to `main`.
+
+## Agents
+
+### 1) Implementation agent (Codex)
+
+- Provider/model: `codex / gpt-5.3-codex`
+- Mode: `full-access`
+- Worktree: `iter4-workspace-header-layout-restore` (base: `main`)
+- Responsibilities:
+  - Fix `New tab` dropdown to use the established dropdown/menu pattern (not off-screen combobox).
+  - Restore workspace header explorer toggle parity with legacy `AgentReadyScreen` (icons, aria state).
+  - Restore agent overflow (kebab) menu when active tab is an agent.
+  - Add terminal tab close `X` on desktop with confirm + kill terminal mutation.
+  - Add/extend Playwright E2E specs for `New tab` on-screen + explorer toggle open/close.
+  - Commit changes.
+
+### 2) Reviewer/validator (you/me)
+
+- Review diffs locally.
+- Run:
+  - `npm run typecheck`
+  - `npm run test --workspace=@getpaseo/app`
+  - Targeted Playwright spec(s) for this iteration
+- Perform agent-browser manual verification (desktop + mobile viewports).
+
+## Tooling / Commands (canonical)
+
+### Create agent (detached)
+
+```bash
+paseo run -d \
+  --worktree iter4-workspace-header-layout-restore \
+  --base main \
+  --provider codex \
+  --model gpt-5.3-codex \
+  --mode full-access \
+  --name "🎭 Iter4 workspace header/layout restore" \
+  "<paste the implementation prompt>"
+```
+
+### Wait
+
+```bash
+paseo wait <agent-id>
+```
+
+### Review worktree diff
+
+```bash
+cd ~/.paseo/worktrees/<hash>/iter4-workspace-header-layout-restore
+git status --short --branch
+git log -n 5 --oneline
+git diff main..HEAD
+```
+
+### Merge into main
+
+Prefer `git cherry-pick <commit>` into `/Users/moboudra/dev/paseo` `main` after verification.
+
+## Verification gates (must be green)
+
+### 1) Typecheck
+
+```bash
+npm run typecheck
+```
+
+### 2) App unit tests
+
+```bash
+npm run test --workspace=@getpaseo/app
+```
+
+### 3) Playwright E2E (targeted)
+
+Run only the spec(s) for this iteration (avoid unrelated flakes):
+
+```bash
+cd packages/app
+npx playwright test e2e/workspace-header-tabs-restore.spec.ts
+```
+
+## Manual verification (agent-browser)
+
+Use explicit sessions:
+
+```bash
+agent-browser --session iter4-desktop open http://localhost:8081
+agent-browser --session iter4-mobile open http://localhost:8081
+```
+
+Desktop:
+- Validate `New tab` dropdown opens on-screen
+- Validate explorer toggle opens/closes explorer
+- Validate kebab menu appears for agent tabs
+- Validate terminal tab `X` close flow
+
+Mobile viewport:
+- Validate git/folder icon for explorer toggle
+- Validate gestures for left/right sidebars
+
+## Rollback plan
+
+If verification fails:
+- Do not merge.
+- Patch in worktree until acceptance criteria + gates pass.
+- Only then cherry-pick/merge into `main`.
+

EXECUTION_PLAN_PASEO.md

@@ -0,0 +1,138 @@
+# Execution Plan (Paseo Orchestrator)
+
+This document is the concrete execution plan for `PLAN_PROJECTS_WORKSPACES_TABS.md`, using the Paseo CLI to delegate work to sub-agents running inside isolated git worktrees.
+
+## Conventions
+
+- All agent names are prefixed with `🎭` so they’re easy to identify.
+- Use **Codex** for implementation work (`--provider codex --mode full-access`).
+- Each agent runs in its **own worktree** to avoid concurrent writes to the same git working directory.
+- Agents must avoid “legacy/compat mode” code paths: we are fully redirecting/reworking.
+
+## 0) Preflight
+
+```bash
+git branch --show-current
+npm run -s cli -- daemon status
+```
+
+Expected:
+- current branch is `main` (or the branch you want as base)
+- daemon is reachable
+
+## 1) Launch parallel agents (detached)
+
+### Agent A — Server protocol + workspace data
+
+Scope:
+- Replace file explorer + download token RPC to be **workspace-scoped** (remove `agentId` usage).
+- Extend worktree list payload with `createdAt` (and a stable `workspaceId` if needed).
+- Ensure agent index loads once at daemon startup (no repeated disk hydration).
+
+```bash
+SERVER_ID=$(npm run -s cli -- run -d -q \
+  --name "🎭 PWT Server: workspace RPCs" \
+  --provider codex --mode full-access \
+  --worktree pwt-server-workspace-rpcs --base main \
+  "Implement server-side changes from PLAN_PROJECTS_WORKSPACES_TABS.md: replace file_explorer_request and file_download_token_request to be workspace-scoped (no agentId), update handlers + client types, add createdAt to paseo_worktree_list_response, and make agent storage/index load once at daemon startup. Do NOT add legacy compatibility. Keep changes minimal and typecheck. Output a short checklist of touched files + how to test."
+)
+echo "$SERVER_ID"
+```
+
+### Agent B — App: workspace routes + tabs main view
+
+Scope:
+- Add workspace routes/screens and redirect old agent routes.
+- Implement workspace header + tab bar (agent + terminal tabs).
+- Persist/restore last focused tab per workspace.
+- Mobile tab switcher + plus button (draft agent flow pre-scoped).
+
+```bash
+APP_TABS_ID=$(npm run -s cli -- run -d -q \
+  --name "🎭 PWT App: workspace tabs" \
+  --provider codex --mode full-access \
+  --worktree pwt-app-workspace-tabs --base main \
+  "Implement app-side workspace main view + tabs from PLAN_PROJECTS_WORKSPACES_TABS.md. Replace old /h/:serverId/agent routes with workspace routes, render a workspace screen with a horizontal tab bar (agent + terminal tabs), restore last focused tab, and implement a mobile tab switcher + header plus button to open draft agent flow pre-scoped to workspace. Terminals are just tabs; no special casing. Do NOT keep legacy UI. Keep gestures/overlay sidebars unchanged. Typecheck."
+)
+echo \"$APP_TABS_ID\"
+```
+
+### Agent C — App: left sidebar projects → workspaces
+
+Scope:
+- Replace left sidebar agent list with Project → Workspace tree.
+- Project icon, status dot aggregation, reorder persistence.
+- Workspace rows: branch + createdAt, no path.
+
+```bash
+APP_SIDEBAR_ID=$(npm run -s cli -- run -d -q \
+  --name "🎭 PWT App: projects sidebar" \
+  --provider codex --mode full-access \
+  --worktree pwt-app-projects-sidebar --base main \
+  "Implement the left sidebar rewrite per PLAN_PROJECTS_WORKSPACES_TABS.md: Projects grouped by projectKey (remote when available else local), each project shows icon + status dot, and contains workspaces (main checkout + Paseo worktrees incl empty). Workspace row shows branch name + createdAt only (no path). Keep drag reorder for projects + workspaces and persist on-device. Do not show agents in sidebar. Typecheck."
+)
+echo \"$APP_SIDEBAR_ID\"
+```
+
+### Agent D — App: right sidebar changes + files (workspace-scoped)
+
+Scope:
+- Remove terminals from the right sidebar.
+- Make Changes/Files sidebar workspace-scoped (not agent-scoped).
+- Update file explorer calls to use new workspace-scoped RPC.
+
+```bash
+APP_EXPLORER_ID=$(npm run -s cli -- run -d -q \
+  --name "🎭 PWT App: explorer sidebar" \
+  --provider codex --mode full-access \
+  --worktree pwt-app-explorer-sidebar --base main \
+  "Update the right sidebar per PLAN_PROJECTS_WORKSPACES_TABS.md: it must contain only Changes + Files and be scoped to the opened workspace (not the selected tab). Remove terminals from the right sidebar entirely. Replace file explorer client actions/state to use the new workspace-scoped RPC (no agentId). Ensure empty workspaces still work. Typecheck."
+)
+echo \"$APP_EXPLORER_ID\"
+```
+
+## 2) Wait for completion
+
+```bash
+npm run -s cli -- wait "$SERVER_ID"
+npm run -s cli -- wait "$APP_TABS_ID"
+npm run -s cli -- wait "$APP_SIDEBAR_ID"
+npm run -s cli -- wait "$APP_EXPLORER_ID"
+```
+
+## 3) Collect diffs from each worktree
+
+```bash
+SERVER_CWD=$(npm run -s cli -- inspect "$SERVER_ID" --json | jq -r '.cwd')
+APP_TABS_CWD=$(npm run -s cli -- inspect "$APP_TABS_ID" --json | jq -r '.cwd')
+APP_SIDEBAR_CWD=$(npm run -s cli -- inspect "$APP_SIDEBAR_ID" --json | jq -r '.cwd')
+APP_EXPLORER_CWD=$(npm run -s cli -- inspect "$APP_EXPLORER_ID" --json | jq -r '.cwd')
+
+git -C "$SERVER_CWD" diff > /tmp/pwt-server.patch
+git -C "$APP_TABS_CWD" diff > /tmp/pwt-app-tabs.patch
+git -C "$APP_SIDEBAR_CWD" diff > /tmp/pwt-app-sidebar.patch
+git -C "$APP_EXPLORER_CWD" diff > /tmp/pwt-app-explorer.patch
+```
+
+## 4) Integrate (apply patches in order)
+
+Recommended: create a clean integration worktree/branch first, then apply patches.
+
+```bash
+# In a clean integration branch/worktree:
+git apply /tmp/pwt-server.patch
+git apply /tmp/pwt-app-tabs.patch
+git apply /tmp/pwt-app-sidebar.patch
+git apply /tmp/pwt-app-explorer.patch
+
+npm run typecheck
+```
+
+If `git apply` fails due to overlap, apply one patch at a time and resolve manually, then re-run typecheck.
+
+## 5) QA pass
+
+- Verify acceptance criteria list in `PLAN_PROJECTS_WORKSPACES_TABS.md`.
+- Smoke test navigation: open workspace → tabs → right sidebar → plus flow.
+- Confirm no remaining agentId-based explorer/download usage.
+

LICENSE

@@ -1,21 +1,671 @@
-MIT License
+Copyright (c) 2025-present Mohamed Boudra
 
-Copyright (c) 2025 Mohamed Boudra
+Portions of this software are licensed as follows:
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+* All third party components incorporated into the Paseo Software are
+  licensed under the original license provided by the owner of the
+  applicable component.
+* All content outside of the above mentioned restrictions is available
+  under the "AGPLv3" license as defined below.
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.

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.3",
+  "version": "0.1.18",
   "private": true,
   "workspaces": [
     "packages/server",
@@ -12,34 +12,41 @@
   ],
   "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",
     "build": "npm run build --workspaces --if-present",
+    "build:daemon": "npm run build --workspace=@getpaseo/relay && npm run build --workspace=@getpaseo/server && npm run build --workspace=@getpaseo/cli",
     "typecheck": "npm run typecheck --workspaces --if-present",
+    "typecheck:daemon": "npm run typecheck --workspace=@getpaseo/relay && npm run typecheck --workspace=@getpaseo/server && npm run typecheck --workspace=@getpaseo/cli",
     "test": "npm run test --workspaces --if-present",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "start": "npm run start --workspace=@getpaseo/server",
     "android": "npm run android --workspace=@getpaseo/app",
     "android:development": "npm run android:development --workspace=@getpaseo/app",
-    "android:prod": "npm run android:prod --workspace=@getpaseo/app",
     "android:production": "npm run android:production --workspace=@getpaseo/app",
-    "android:release": "npm run android:prod --workspace=@getpaseo/app",
+    "android:release": "npm run android:production --workspace=@getpaseo/app",
+    "android:clean": "npm run android:clean --workspace=@getpaseo/app",
     "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",
     "release:prepare": "npm install --workspaces --include-workspace-root",
-    "version:all:patch": "npm version patch --workspaces --include-workspace-root --no-git-tag-version && npm run version:sync-internal && npm run release:prepare",
-    "version:all:minor": "npm version minor --workspaces --include-workspace-root --no-git-tag-version && npm run version:sync-internal && npm run release:prepare",
-    "version:all:major": "npm version major --workspaces --include-workspace-root --no-git-tag-version && npm run version:sync-internal && npm run release:prepare",
+    "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",
@@ -59,7 +66,7 @@
     "mcp"
   ],
   "author": "moboudra",
-  "license": "MIT",
+  "license": "AGPL-3.0-or-later",
   "overrides": {
     "lightningcss": "1.30.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-details-sheet.spec.ts

@@ -14,8 +14,6 @@ test("agent details sheet shows IDs and copy toast", async ({ page }) => {
     await createAgent(page, prompt);
 
     await page.getByTestId("agent-overflow-menu").click();
-    await page.getByTestId("agent-menu-details").click();
-
     await expect(page.getByTestId("agent-details-sheet")).toBeVisible();
 
     await expect(page.getByTestId("agent-details-agent-id")).toBeVisible();

packages/app/e2e/agent-scroll-submit-firefox.spec.ts

@@ -0,0 +1,197 @@
+import { expect, test, type Page } from "@playwright/test";
+
+const SERVER_ID =
+  process.env.PLAYWRIGHT_REPRO_SERVER_ID ?? "srv_ETXtcjYRGrCI";
+const AGENT_ID =
+  process.env.PLAYWRIGHT_REPRO_AGENT_ID ??
+  "3533e6c3-c0b3-4310-b85c-eb07cbb501a0";
+const APP_BASE_URL = process.env.PLAYWRIGHT_REPRO_BASE_URL ?? "http://localhost:8081";
+const DAEMON_ENDPOINT =
+  process.env.PLAYWRIGHT_REPRO_DAEMON_ENDPOINT ?? "127.0.0.1:6767";
+const SUBMIT_TEXT = process.env.PLAYWRIGHT_REPRO_MESSAGE ?? "hello";
+const AGENT_URL = `${APP_BASE_URL}/h/${SERVER_ID}/agent/${AGENT_ID}`;
+const NEAR_BOTTOM_THRESHOLD_PX = 64;
+
+type ScrollMetrics = {
+  offsetY: number;
+  contentHeight: number;
+  viewportHeight: number;
+  distanceFromBottom: number;
+};
+
+test.use({ browserName: "firefox" });
+
+function seedDaemonRegistryScript(params: {
+  serverId: string;
+  endpoint: string;
+  nowIso: string;
+}) {
+  const daemon = {
+    serverId: params.serverId,
+    label: "localhost",
+    connections: [
+      {
+        id: `direct:${params.endpoint}`,
+        type: "direct",
+        endpoint: params.endpoint,
+      },
+    ],
+    preferredConnectionId: `direct:${params.endpoint}`,
+    createdAt: params.nowIso,
+    updatedAt: params.nowIso,
+  };
+
+  localStorage.setItem("@paseo:e2e", "1");
+  localStorage.setItem("@paseo:daemon-registry", JSON.stringify([daemon]));
+  localStorage.setItem(
+    "@paseo:create-agent-preferences",
+    JSON.stringify({
+      serverId: params.serverId,
+      provider: "codex",
+      providerPreferences: {
+        claude: { model: "haiku" },
+        codex: { model: "gpt-5.1-codex-mini", thinkingOptionId: "low" },
+      },
+    })
+  );
+}
+
+async function readScrollMetrics(page: Page): Promise<ScrollMetrics> {
+  return page.getByTestId("agent-chat-scroll").evaluate((root: Element) => {
+    const rootElement = root as HTMLElement;
+    const candidates = [rootElement, ...Array.from(rootElement.querySelectorAll("*"))];
+    const scrollElement =
+      candidates.find(
+        (element) =>
+          element instanceof HTMLElement &&
+          element.scrollHeight - element.clientHeight > 1
+      ) ?? rootElement;
+
+    const offsetY = Math.max(0, scrollElement.scrollTop);
+    const contentHeight = Math.max(0, scrollElement.scrollHeight);
+    const viewportHeight = Math.max(0, scrollElement.clientHeight);
+    const distanceFromBottom = Math.max(
+      0,
+      contentHeight - (offsetY + viewportHeight)
+    );
+
+    return {
+      offsetY,
+      contentHeight,
+      viewportHeight,
+      distanceFromBottom,
+    };
+  });
+}
+
+async function scrollUpFromBottom(
+  page: Page,
+  pixels: number
+): Promise<void> {
+  await page.getByTestId("agent-chat-scroll").evaluate(
+    (root: Element, amount: number) => {
+      const rootElement = root as HTMLElement;
+      const candidates = [
+        rootElement,
+        ...Array.from(rootElement.querySelectorAll("*")),
+      ];
+      const scrollElement =
+        candidates.find(
+          (element) =>
+            element instanceof HTMLElement &&
+            element.scrollHeight - element.clientHeight > 1
+        ) ?? rootElement;
+
+      const bottomOffset = Math.max(
+        0,
+        scrollElement.scrollHeight - scrollElement.clientHeight
+      );
+      scrollElement.scrollTop = Math.max(0, bottomOffset - amount);
+    },
+    pixels
+  );
+}
+
+test("repro: submit while scrolled up should stay anchored to bottom (Firefox)", async ({
+  page,
+}, testInfo) => {
+  const userAgent = await page.evaluate(() => navigator.userAgent);
+  expect(userAgent).toContain("Firefox");
+
+  await page.addInitScript(seedDaemonRegistryScript, {
+    serverId: SERVER_ID,
+    endpoint: DAEMON_ENDPOINT,
+    nowIso: new Date().toISOString(),
+  });
+
+  await page.goto(AGENT_URL, { waitUntil: "domcontentloaded" });
+  await expect(page.getByTestId("agent-chat-scroll")).toBeVisible({
+    timeout: 60_000,
+  });
+  await expect(page.getByRole("textbox", { name: "Message agent..." })).toBeVisible({
+    timeout: 60_000,
+  });
+
+  // Require enough history so the repro actually scrolls away from bottom.
+  await expect
+    .poll(async () => {
+      const metrics = await readScrollMetrics(page);
+      return Math.max(0, metrics.contentHeight - metrics.viewportHeight);
+    })
+    .toBeGreaterThan(300);
+
+  await scrollUpFromBottom(page, 900);
+  await page.waitForTimeout(250);
+  const beforeSubmit = await readScrollMetrics(page);
+  const beforePath = testInfo.outputPath("before-submit.png");
+  await page.screenshot({ path: beforePath, fullPage: true });
+  await testInfo.attach("before-submit", {
+    path: beforePath,
+    contentType: "image/png",
+  });
+
+  await page.getByRole("textbox", { name: "Message agent..." }).fill(SUBMIT_TEXT);
+  await page.getByRole("textbox", { name: "Message agent..." }).press("Enter");
+  await page.waitForTimeout(1200);
+
+  const afterSubmit = await readScrollMetrics(page);
+  const afterPath = testInfo.outputPath("after-submit.png");
+  await page.screenshot({ path: afterPath, fullPage: true });
+  await testInfo.attach("after-submit", {
+    path: afterPath,
+    contentType: "image/png",
+  });
+  await testInfo.attach("firefox-scroll-metrics", {
+    body: JSON.stringify(
+      {
+        url: AGENT_URL,
+        submitText: SUBMIT_TEXT,
+        thresholdPx: NEAR_BOTTOM_THRESHOLD_PX,
+        beforeScreenshot: beforePath,
+        afterScreenshot: afterPath,
+        beforeSubmit,
+        afterSubmit,
+      },
+      null,
+      2
+    ),
+    contentType: "application/json",
+  });
+
+  console.log(
+    `[firefox-scroll-repro] ${JSON.stringify(
+      {
+        submitText: SUBMIT_TEXT,
+        beforeSubmit,
+        afterSubmit,
+      },
+      null,
+      2
+    )}`
+  );
+
+  expect(beforeSubmit.distanceFromBottom).toBeGreaterThan(NEAR_BOTTOM_THRESHOLD_PX);
+  expect(afterSubmit.distanceFromBottom).toBeLessThanOrEqual(
+    NEAR_BOTTOM_THRESHOLD_PX
+  );
+});

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

@@ -0,0 +1,27 @@
+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 prompt = 'Respond with exactly: TIMELINE_HYDRATION_OK';
+
+  try {
+    await gotoHome(page);
+    await setWorkingDirectory(page, repo.path);
+    await ensureHostSelected(page);
+    await createAgent(page, prompt);
+    await expect(page.getByText(prompt, { exact: true }).first()).toBeVisible({
+      timeout: 30000,
+    });
+
+    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,
+    });
+  } finally {
+    await repo.cleanup();
+  }
+});

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

@@ -4,6 +4,7 @@ import { execSync } from 'node:child_process';
 import { tmpdir } from 'node:os';
 import { test, expect, type Page } from './fixtures';
 import {
+  createAgent,
   ensureHostSelected,
   gotoHome,
   setWorkingDirectory,
@@ -12,6 +13,10 @@ import { createTempGitRepo } from './helpers/workspace';
 
 test.describe.configure({ mode: 'serial', timeout: 120000 });
 
+function escapeRegex(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
 function getChangesScope(page: Page) {
   return page.locator('[data-testid="explorer-content-area"]:visible').first();
 }
@@ -20,6 +25,26 @@ function getChangesHeader(page: Page) {
   return getChangesScope(page).getByTestId('changes-header');
 }
 
+async function ensureExplorerTabsVisible(page: Page) {
+  const changesTab = page.getByTestId('explorer-tab-changes').first();
+  if (await changesTab.isVisible().catch(() => false)) {
+    return;
+  }
+
+  const toggle = page
+    .getByRole('button', { name: /open explorer|close explorer|toggle explorer/i })
+    .first();
+  await expect(toggle).toBeVisible({ timeout: 10000 });
+  for (let attempt = 0; attempt < 4; attempt += 1) {
+    if (await changesTab.isVisible().catch(() => false)) {
+      return;
+    }
+    await toggle.click();
+    await page.waitForTimeout(200);
+  }
+  await expect(changesTab).toBeVisible({ timeout: 30000 });
+}
+
 async function selectChangesView(page: Page, view: 'working' | 'base') {
   // Defensive: close any open dropdown menus (their backdrops intercept clicks).
   const primaryBackdrop = page.getByTestId('changes-primary-cta-menu-backdrop');
@@ -32,6 +57,11 @@ async function selectChangesView(page: Page, view: 'working' | 'base') {
     await overflowBackdrop.click({ force: true });
     await expect(overflowBackdrop).toHaveCount(0);
   }
+  const diffModeBackdrop = page.getByTestId('changes-diff-status-menu-backdrop');
+  if (await diffModeBackdrop.isVisible().catch(() => false)) {
+    await diffModeBackdrop.click({ force: true });
+    await expect(diffModeBackdrop).toHaveCount(0);
+  }
 
   const scope = getChangesScope(page);
   const modeToggle = scope.getByTestId('changes-diff-status').first();
@@ -42,16 +72,15 @@ async function selectChangesView(page: Page, view: 'working' | 'base') {
   const current = ((await modeToggle.innerText().catch(() => '')) ?? '').trim();
   if (current !== expected) {
     await modeToggle.click();
+    const menu = page.getByTestId('changes-diff-status-menu');
+    await expect(menu).toBeVisible({ timeout: 10000 });
+    const optionTestId =
+      view === 'working' ? 'changes-diff-mode-uncommitted' : 'changes-diff-mode-committed';
+    await page.getByTestId(optionTestId).click({ force: true });
   }
   await expect(modeToggle).toContainText(expected, { timeout: 10000 });
 }
 
-async function openChangesOverflowMenu(page: Page) {
-  const menuButton = getChangesScope(page).locator('[data-testid="changes-overflow-menu"]:visible').first();
-  await expect(menuButton).toBeVisible();
-  await menuButton.click();
-}
-
 async function openChangesPrimaryMenu(page: Page) {
   const scope = getChangesScope(page);
   const caret = scope.getByTestId('changes-primary-cta-caret').first();
@@ -62,25 +91,10 @@ async function openChangesPrimaryMenu(page: Page) {
 }
 
 async function openChangesPanel(page: Page, options?: { expectGit?: boolean }) {
+  await ensureExplorerTabsVisible(page);
   const changesHeader = getChangesHeader(page);
   if (!(await changesHeader.isVisible())) {
-    const explorerHeader = page.getByTestId('explorer-header');
-    if (await explorerHeader.isVisible()) {
-      const changesTab = explorerHeader.getByText('Changes', { exact: true });
-      if (await changesTab.isVisible().catch(() => false)) {
-        await changesTab.click();
-      } else {
-        const overflowMenu = page.getByTestId('agent-overflow-menu').first();
-        await expect(overflowMenu).toBeVisible({ timeout: 10000 });
-        await overflowMenu.click();
-        await page.getByText(/view changes/i).first().click();
-      }
-    } else {
-      const overflowMenu = page.getByTestId('agent-overflow-menu').first();
-      await expect(overflowMenu).toBeVisible({ timeout: 10000 });
-      await overflowMenu.click();
-      await page.getByText(/view changes/i).first().click();
-    }
+    await page.getByTestId('explorer-tab-changes').first().click();
   }
   await expect(changesHeader).toBeVisible({ timeout: 30000 });
   if (options?.expectGit === false) {
@@ -95,98 +109,62 @@ async function openChangesPanel(page: Page, options?: { expectGit?: boolean }) {
   });
 }
 
-async function sendPrompt(page: Page, prompt: string) {
-  const input = page.getByRole('textbox', { name: 'Message agent...' });
-  await expect(input).toBeEditable();
-  await input.fill(prompt);
-  await input.press('Enter');
-}
-
-async function waitForAssistantText(page: Page, text: string) {
-  const assistantMessage = page.getByTestId('assistant-message').filter({ hasText: text }).last();
-  await expect(assistantMessage).toBeVisible({ timeout: 60000 });
-  return assistantMessage;
+async function waitForAgentTurnToSettle(page: Page, timeout = 90000) {
+  const stopButton = page.getByRole('button', { name: /stop agent|stop/i }).first();
+  if (!(await stopButton.isVisible().catch(() => false))) {
+    return;
+  }
+  await expect(stopButton).not.toBeVisible({ timeout });
 }
 
 async function createAgentAndWait(page: Page, message: string) {
-  const input = page.getByRole('textbox', { name: 'Message agent...' });
-  await expect(input).toBeEditable();
-  await input.fill(message);
-  await input.press('Enter');
-  await expect(page).toHaveURL(/\/agent\//, { timeout: 120000 });
-  await expect(page.getByText(message, { exact: true })).toBeVisible();
-}
-
-async function requestCwd(page: Page) {
-  await sendPrompt(page, 'Run `pwd` and respond with exactly: CWD: <path>');
-  const message = await waitForAssistantText(page, 'CWD:');
-  // The assistant streams tokens; make sure we capture the full path (not a partial prefix).
-  await expect.poll(async () => (await message.textContent()) ?? '', { timeout: 60000 }).toContain('/worktrees/');
-  const content = (await message.textContent()) ?? '';
-  const match = content.match(/CWD:\s*(\S+)/);
-  if (!match) {
-    throw new Error(`Expected agent to respond with "CWD: <path>", got: ${content}`);
-  }
-  return match[1].trim();
+  await createAgent(page, message);
 }
 
 async function selectAttachWorktree(page: Page, branchName: string) {
-  await page.getByTestId('worktree-attach-toggle').click();
-  const picker = page.getByTestId('worktree-attach-picker');
-  await expect(picker).toBeVisible();
+  const trigger = page.getByTestId('worktree-select-trigger').first();
+  await expect(trigger).toBeVisible({ timeout: 30000 });
+  await trigger.click();
 
-  // Wait a bit for the worktree list to load
-  await page.waitForTimeout(1000);
-
-  await picker.click();
-
-  // Wait a bit for animation
-  await page.waitForTimeout(500);
-
-  const sheet = page.getByLabel('Bottom Sheet', { exact: true });
-  const backdrop = page.getByRole('button', { name: 'Bottom sheet backdrop' }).first();
-
-  await expect.poll(async () => {
-    const sheetVisible = await sheet.isVisible().catch(() => false);
-    const backdropVisible = await backdrop.isVisible().catch(() => false);
-    // Also check if branch name is visible directly
-    const branchVisible = await page.getByText(branchName, { exact: true }).first().isVisible().catch(() => false);
-    return sheetVisible || backdropVisible || branchVisible;
-  }, { timeout: 10000 }).toBeTruthy();
-  const sheetVisible = await sheet.isVisible().catch(() => false);
-  const scope = sheetVisible ? sheet : page;
-  const preferredOption = scope.getByText(branchName, { exact: true }).first();
-  if (await preferredOption.isVisible().catch(() => false)) {
-    await preferredOption.click();
-    await expect(picker).toContainText(branchName);
-    return;
+  const menu = page.getByTestId('combobox-desktop-container').first();
+  await expect(menu).toBeVisible({ timeout: 10000 });
+  const searchInput = page.getByRole('textbox', { name: /search worktrees/i }).first();
+  if (await searchInput.isVisible().catch(() => false)) {
+    await searchInput.fill(branchName);
   }
 
-  const options = scope.locator('[data-testid^="worktree-attach-option-"]');
-  const optionCount = await options.count();
-  if (optionCount === 0) {
-    throw new Error(`No worktree options were available in the attach picker`);
-  }
-  const fallbackOption = options.first();
-  const fallbackLabel = ((await fallbackOption.innerText()) ?? "").trim();
-  await fallbackOption.click();
-  if (fallbackLabel.length > 0) {
-    await expect(picker).toContainText(fallbackLabel);
-  }
+  const preferredOption = menu
+    .getByText(new RegExp(`^${escapeRegex(branchName)}$`, 'i'))
+    .first();
+  await expect(preferredOption).toBeVisible({ timeout: 10000 });
+  await preferredOption.click({ force: true });
+  await expect(menu).toHaveCount(0);
+  await expect(trigger).toContainText(branchName, { timeout: 30000 });
 }
 
 async function enableCreateWorktree(page: Page) {
-  const createToggle = page.getByTestId('worktree-create-toggle');
-  const willCreateLabel = page.getByText(/Will create:/);
-  if (await willCreateLabel.isVisible()) {
+  const trigger = page.getByTestId('worktree-select-trigger').first();
+  await expect(trigger).toBeVisible({ timeout: 30000 });
+
+  const currentValue = ((await trigger.innerText().catch(() => '')) ?? '').trim();
+  if (/Create new worktree/i.test(currentValue)) {
+    await expect(page.getByTestId('worktree-base-branch-trigger')).toBeVisible({
+      timeout: 30000,
+    });
     return;
   }
-  const readyLabel = page.getByText(
-    /Run isolated from|Run in an isolated directory/
-  );
-  await expect(readyLabel).toBeVisible({ timeout: 30000 });
-  await createToggle.click({ force: true });
-  await expect(willCreateLabel).toBeVisible({ timeout: 30000 });
+
+  await trigger.click();
+  const menu = page.getByTestId('combobox-desktop-container').first();
+  await expect(menu).toBeVisible({ timeout: 10000 });
+  const createOption = menu.getByText('Create new worktree', { exact: true }).first();
+  await expect(createOption).toBeVisible({ timeout: 10000 });
+  await createOption.click({ force: true });
+  await expect(menu).toHaveCount(0);
+  await expect(trigger).toContainText('Create new worktree', { timeout: 30000 });
+  await expect(page.getByTestId('worktree-base-branch-trigger')).toBeVisible({
+    timeout: 30000,
+  });
 }
 
 async function refreshUncommittedMode(page: Page) {
@@ -195,9 +173,9 @@ async function refreshUncommittedMode(page: Page) {
 }
 
 async function refreshChangesTab(page: Page) {
-  const header = page.locator('[data-testid="explorer-header"]:visible').first();
-  await header.getByText('Files', { exact: true }).first().click();
-  await header.getByText('Changes', { exact: true }).first().click();
+  await ensureExplorerTabsVisible(page);
+  await page.getByTestId('explorer-tab-files').first().click();
+  await page.getByTestId('explorer-tab-changes').first().click();
 }
 
 function normalizeTmpPath(value: string) {
@@ -207,6 +185,72 @@ function normalizeTmpPath(value: string) {
   return value;
 }
 
+type GitWorktreeEntry = {
+  worktreePath: string;
+  branchRef: string | null;
+};
+
+function parseGitWorktreeList(raw: string): GitWorktreeEntry[] {
+  const blocks = raw
+    .split(/\n\s*\n/g)
+    .map((block) => block.trim())
+    .filter((block) => block.length > 0);
+
+  const entries: GitWorktreeEntry[] = [];
+  for (const block of blocks) {
+    const worktreeMatch = block.match(/^worktree (.+)$/m);
+    if (!worktreeMatch) {
+      continue;
+    }
+    const branchMatch = block.match(/^branch (.+)$/m);
+    entries.push({
+      worktreePath: worktreeMatch[1].trim(),
+      branchRef: branchMatch ? branchMatch[1].trim() : null,
+    });
+  }
+  return entries;
+}
+
+async function waitForCreatedWorktree(repoPath: string, timeoutMs = 30000) {
+  const deadline = Date.now() + timeoutMs;
+  const normalizedRepoPath = normalizeTmpPath(repoPath);
+
+  while (Date.now() < deadline) {
+    try {
+      const output = execSync('git worktree list --porcelain', {
+        cwd: repoPath,
+        encoding: 'utf8',
+      });
+      const entries = parseGitWorktreeList(output);
+      const candidate = entries.find((entry) => {
+        const normalizedWorktreePath = normalizeTmpPath(entry.worktreePath);
+        if (normalizedWorktreePath === normalizedRepoPath) {
+          return false;
+        }
+        if (!entry.branchRef) {
+          return false;
+        }
+        return !/\/main$/i.test(entry.branchRef);
+      });
+
+      if (candidate) {
+        const branchName = candidate.branchRef?.split('/').filter(Boolean).pop();
+        if (branchName) {
+          return {
+            worktreePath: candidate.worktreePath,
+            branchName,
+          };
+        }
+      }
+    } catch {
+      // Ignore transient git worktree read errors while polling.
+    }
+    await new Promise((resolve) => setTimeout(resolve, 250));
+  }
+
+  throw new Error(`Timed out waiting for a non-main worktree under ${repoPath}`);
+}
+
 test('checkout-first Changes panel ship loop', async ({ page }) => {
   const repo = await createTempGitRepo('paseo-e2e-', { withRemote: true });
   const nonGitDir = await mkdtemp(path.join(tmpdir(), 'paseo-e2e-non-git-'));
@@ -218,7 +262,7 @@ test('checkout-first Changes panel ship loop', async ({ page }) => {
 
     await enableCreateWorktree(page);
     await createAgentAndWait(page, 'Respond with exactly: READY');
-    await waitForAssistantText(page, 'READY');
+    await waitForAgentTurnToSettle(page);
 
     await openChangesPanel(page);
     const branchLabelLocator = getChangesScope(page).getByTestId('changes-branch');
@@ -228,11 +272,9 @@ test('checkout-first Changes panel ship loop', async ({ page }) => {
     const branchNameFromUi = (await branchLabelLocator.innerText()).trim();
     expect(branchNameFromUi.length).toBeGreaterThan(0);
 
-    const firstCwd = await requestCwd(page);
-    const worktreeBranch = execSync('git rev-parse --abbrev-ref HEAD', {
-      cwd: firstCwd,
-      encoding: 'utf8',
-    }).trim();
+    const { worktreePath: firstCwd, branchName: worktreeBranch } = await waitForCreatedWorktree(
+      repo.path
+    );
     expect(worktreeBranch.length).toBeGreaterThan(0);
     const [resolvedCwd, resolvedRepo] = await Promise.all([
       realpath(firstCwd).catch(() => firstCwd),
@@ -244,19 +286,14 @@ test('checkout-first Changes panel ship loop', async ({ page }) => {
     expect(normalizedCwd.includes(expectedMarker)).toBeTruthy();
 
     await page.getByTestId('sidebar-new-agent').click();
-    await expect(page).toHaveURL(/\/agent\/?$/);
+    await expect(page).toHaveURL(/\/h\/[^/]+\/agent(\?|$)/);
 
     await setWorkingDirectory(page, repo.path);
     await ensureHostSelected(page);
     await selectAttachWorktree(page, worktreeBranch);
     await createAgentAndWait(page, 'Respond with exactly: READY2');
-    await waitForAssistantText(page, 'READY2');
-
-    const secondCwd = await requestCwd(page);
-    expect(secondCwd).toBe(firstCwd);
-
-    await sendPrompt(page, "Respond with exactly: OK");
-    await waitForAssistantText(page, "OK");
+    await waitForAgentTurnToSettle(page);
+    await openChangesPanel(page);
 
     const readmePath = path.join(firstCwd, 'README.md');
     await appendFile(readmePath, '\nFirst change\n');
@@ -384,43 +421,18 @@ test('checkout-first Changes panel ship loop', async ({ page }) => {
     execSync("git push", { cwd: repo.path });
 
     await selectChangesView(page, 'base');
-    await expect(getChangesScope(page).getByText(/No changes vs/i)).toBeVisible({
-      timeout: 60000,
-    });
+    await expect(getChangesScope(page).getByTestId('changes-diff-status')).toContainText(
+      'Committed',
+      { timeout: 30000 }
+    );
     await refreshChangesTab(page);
-    await expect(getChangesScope(page).getByTestId('changes-primary-cta')).toHaveCount(0, { timeout: 30000 });
 
-    await openChangesOverflowMenu(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 setWorkingDirectory(page, repo.path);
-    await ensureHostSelected(page);
-    // Repo inspection is async; wait until git options are interactive again.
-    await expect(page.getByText('Inspecting repository…')).toHaveCount(0, { timeout: 30000 });
-    await page.getByTestId('worktree-attach-toggle').click();
-    await expect(page.getByTestId('worktree-attach-picker')).toBeVisible({ timeout: 30000 });
-    await page.getByTestId('worktree-attach-picker').click();
-    await expect(page.getByText(worktreeBranch, { exact: true })).toHaveCount(0);
-    const attachSheet = page.getByLabel('Bottom Sheet', { exact: true });
-    if (await attachSheet.isVisible().catch(() => false)) {
-      await page.getByTestId('dropdown-sheet-close').click({ force: true });
-      await expect(attachSheet).toBeHidden({ timeout: 30000 });
-    }
-    await page.getByTestId('worktree-attach-toggle').click();
-    await expect(page.getByTestId('worktree-attach-picker')).toBeHidden({ timeout: 30000 });
+    // Post-ship UI behavior is implementation-dependent (archive can be promoted into
+    // primary flow or hidden behind menu variants), so continue from a fresh draft.
+    await page.getByTestId('sidebar-new-agent').click();
+    await expect(page).toHaveURL(/\/h\/[^/]+\/agent(?:\?|$)/, { timeout: 30000 });
 
-    await setWorkingDirectory(page, nonGitDir);
-    // Wait for git options to disappear (repo inspection is async and the git section can briefly render stale UI).
-    await expect(page.getByTestId('worktree-attach-toggle')).toHaveCount(0, { timeout: 30000 });
-    await expect(page.getByTestId('worktree-attach-picker')).toHaveCount(0);
-    await createAgentAndWait(page, 'Respond with exactly: NON-GIT');
-    await waitForAssistantText(page, 'NON-GIT');
-    await openChangesPanel(page, { expectGit: false });
-    await expect(getChangesScope(page).getByTestId('changes-not-git')).toBeVisible();
-    await expect(getChangesScope(page).getByTestId('changes-primary-cta')).toHaveCount(0);
-    await expect(getChangesScope(page).getByTestId('changes-overflow-menu')).toHaveCount(0);
+    await expect(page.getByRole('textbox', { name: 'Message agent...' })).toBeEditable();
   } finally {
     await rm(nonGitDir, { recursive: true, force: true });
     await repo.cleanup();

packages/app/e2e/create-agent.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from './fixtures';
-import { createAgent, ensureHostSelected, gotoHome, setWorkingDirectory } from './helpers/app';
+import { createAgentInRepo } from './helpers/app';
 import { createTempGitRepo } from './helpers/workspace';
 
 test('create agent in a temp repo', async ({ page }) => {
@@ -7,22 +7,20 @@ test('create agent in a temp repo', async ({ page }) => {
   const prompt = "Respond with exactly: Hello";
 
   try {
-    await gotoHome(page);
-    await setWorkingDirectory(page, repo.path);
-    await ensureHostSelected(page);
-    await createAgent(page, prompt);
+    await createAgentInRepo(page, { directory: repo.path, prompt });
 
     // Verify user message is shown in the stream
     await expect(page.getByText(prompt, { exact: true })).toBeVisible();
 
-    // Verify we used a fast model (do not fall back to a default like Sonnet).
-    await page.getByTestId('agent-overflow-menu').click();
-    await expect(page.getByText('Model', { exact: true })).toBeVisible();
-    await expect(page.getByTestId('agent-overflow-content').getByText(/haiku/i)).toBeVisible();
+    // Verify we used the seeded fast model (do not fall back to other defaults).
+    const modelPicker = page.getByRole("button", { name: /select agent model/i }).first();
+    await expect(modelPicker).toBeVisible({ timeout: 30000 });
+    await expect(modelPicker).toContainText(/gpt-5\.1-codex-mini/i);
 
-    // Wait for agent response containing "Hello" within an assistant message
-    const assistantMessage = page.getByTestId('assistant-message').filter({ hasText: 'Hello' });
-    await expect(assistantMessage).toBeVisible({ timeout: 30000 });
+    // Verify the assistant response is rendered.
+    await expect(page.getByText("Hello", { exact: true }).first()).toBeVisible({
+      timeout: 30000,
+    });
   } finally {
     await repo.cleanup();
   }

packages/app/e2e/delete-agent-persists.spec.ts

@@ -17,15 +17,19 @@ test('deleting an agent persists after reload', async ({ page }) => {
     await expect(input).toBeEditable();
     await input.fill(prompt);
     await input.press('Enter');
-    await page.waitForURL(/\/agent\//, { waitUntil: 'commit' });
+    await expect(page).toHaveURL(/\/h\/[^/]+\/agent\/[^/?#]+(?:\?|$)/, {
+      timeout: 30000,
+    });
     // Wait for the initial turn to complete so the agent can be archived (web uses a hover action).
     const stopOrCancel = page.getByRole('button', { name: /Stop agent|Canceling agent/ });
     await stopOrCancel.first().waitFor({ state: 'visible', timeout: 30000 }).catch(() => undefined);
     await expect(stopOrCancel).toHaveCount(0, { timeout: 120000 });
 
-    const match = page.url().match(/\/agent\/([^/]+)\/([^/?#]+)/);
+    const match =
+      page.url().match(/\/h\/([^/]+)\/agent\/([^/?#]+)/) ??
+      page.url().match(/\/agent\/([^/]+)\/([^/?#]+)/);
     if (!match) {
-      throw new Error(`Expected /agent/:serverId/:agentId URL, got ${page.url()}`);
+      throw new Error(`Expected /h/:serverId/agent/:agentId URL, got ${page.url()}`);
     }
     const serverId = decodeURIComponent(match[1]);
     const agentId = decodeURIComponent(match[2]);
@@ -36,11 +40,16 @@ test('deleting an agent persists after reload', async ({ page }) => {
     const agentRow = page.getByTestId(rowTestId).first();
     await expect(agentRow).toBeVisible({ timeout: 30000 });
 
-    // Web UX: hover shows a quick-archive icon. (Long-press is touch-oriented and unreliable on desktop web.)
+    // Web UX: hover shows a quick-archive icon. First click enters confirm state; second click archives.
     await agentRow.hover();
     const quickArchive = page.getByTestId(`agent-archive-${serverId}-${agentId}`).first();
     await expect(quickArchive).toBeVisible({ timeout: 10000 });
     await quickArchive.click({ force: true });
+    const confirmArchive = page
+      .getByTestId(`agent-archive-confirm-${serverId}-${agentId}`)
+      .first();
+    await expect(confirmArchive).toBeVisible({ timeout: 10000 });
+    await confirmArchive.click({ force: true });
 
     // Ensure deletion finished before reload (avoids races).
     await expect(page.getByTestId(rowTestId)).toHaveCount(0, { timeout: 30000 });

packages/app/e2e/dictation-web.spec.ts

@@ -1,14 +1,33 @@
 import { test, expect } from './fixtures';
-import { createAgent, ensureHostSelected, gotoHome, setWorkingDirectory } from './helpers/app';
+import {
+  createAgent,
+  createAgentInRepo,
+  ensureHostSelected,
+  gotoHome,
+  openSettings,
+  setWorkingDirectory,
+} from './helpers/app';
 import { createTempGitRepo } from './helpers/workspace';
 import type { Page } from '@playwright/test';
 import { readFile } from 'node:fs/promises';
 import path from 'node:path';
+import {
+  buildHostWorkspaceAgentRoute,
+  buildHostWorkspaceRoute,
+} from '@/utils/host-routes';
+import {
+  ensureWorkspaceAgentPaneVisible,
+  waitForWorkspaceTabsVisible,
+} from './helpers/workspace-tabs';
+
+function escapeRegex(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
 
 async function addFakeMicrophone(page: Page) {
-  const fixturePath = path.resolve(__dirname, 'fixtures', 'recording.webm');
+  const fixturePath = path.resolve(__dirname, 'fixtures', 'recording.wav');
   const base64Audio = (await readFile(fixturePath)).toString('base64');
-  const mimeType = 'audio/webm;codecs=opus';
+  const mimeType = 'audio/wav';
 
   return page.addInitScript(({ base64Audio, mimeType }) => {
     const mic = {
@@ -39,6 +58,24 @@ async function addFakeMicrophone(page: Page) {
       };
     };
 
+    const AudioContextCtor =
+      (window as any).AudioContext ?? (window as any).webkitAudioContext;
+    if (AudioContextCtor?.prototype?.createMediaStreamSource) {
+      const nativeCreateMediaStreamSource =
+        AudioContextCtor.prototype.createMediaStreamSource;
+      AudioContextCtor.prototype.createMediaStreamSource =
+        function patchedCreateMediaStreamSource(stream: unknown) {
+          const isFakeStream =
+            !!stream &&
+            typeof (stream as { getTracks?: unknown }).getTracks === 'function' &&
+            typeof (stream as { id?: unknown }).id === 'undefined';
+          if (isFakeStream) {
+            throw new Error('Force recorder fallback for fake microphone stream');
+          }
+          return nativeCreateMediaStreamSource.call(this, stream);
+        };
+    }
+
     const blobFromBase64 = (base64: string, mimeType: string): Blob => {
       const binaryString = atob(base64);
       const bytes = new Uint8Array(binaryString.length);
@@ -88,6 +125,89 @@ async function addFakeMicrophone(page: Page) {
   }, { base64Audio, mimeType });
 }
 
+async function expectComposerReady(page: Page) {
+  await expect(page.getByRole('textbox', { name: 'Message agent...' }).first()).toBeEditable();
+}
+
+async function expectDictationStarted(page: Page) {
+  await expect
+    .poll(async () => page.evaluate(() => (window as any).__mic.active as number))
+    .toBe(1);
+}
+
+async function expectDictationStopped(page: Page) {
+  await expect
+    .poll(async () => page.evaluate(() => (window as any).__mic.active as number))
+    .toBe(0);
+}
+
+test('dictation hotkey works on a workspace agent tab', async ({ page }) => {
+  await addFakeMicrophone(page);
+
+  const repo = await createTempGitRepo();
+  try {
+    const serverId = process.env.E2E_SERVER_ID;
+    if (!serverId) {
+      throw new Error('E2E_SERVER_ID is not set.');
+    }
+
+    await createAgentInRepo(page, {
+      directory: repo.path,
+      prompt: 'Respond with exactly: Hello',
+    });
+    await page.goto(buildHostWorkspaceRoute(serverId, repo.path));
+    await waitForWorkspaceTabsVisible(page);
+    await ensureWorkspaceAgentPaneVisible(page);
+    await expect(page).toHaveURL(/\/workspace\//);
+    await expectComposerReady(page);
+
+    await page.keyboard.press('Control+d');
+    await expectDictationStarted(page);
+
+    const calls = await page.evaluate(() => (window as any).__mic.getUserMediaCalls as number);
+    expect(calls).toBe(1);
+
+    await page.keyboard.press('Escape');
+    await expectDictationStopped(page);
+  } finally {
+    await repo.cleanup();
+  }
+});
+
+test('dictation hotkey works on a workspace draft tab', async ({ page }) => {
+  await addFakeMicrophone(page);
+
+  const repo = await createTempGitRepo();
+  try {
+    const serverId = process.env.E2E_SERVER_ID;
+    if (!serverId) {
+      throw new Error('E2E_SERVER_ID is not set.');
+    }
+
+    await createAgentInRepo(page, {
+      directory: repo.path,
+      prompt: 'Respond with exactly: Hello',
+    });
+    await page.goto(buildHostWorkspaceRoute(serverId, repo.path));
+    await waitForWorkspaceTabsVisible(page);
+    await ensureWorkspaceAgentPaneVisible(page);
+
+    await page.getByTestId('workspace-new-agent-tab').first().click();
+    await expectComposerReady(page);
+
+    await page.keyboard.press('Control+d');
+    await expectDictationStarted(page);
+
+    const calls = await page.evaluate(() => (window as any).__mic.getUserMediaCalls as number);
+    expect(calls).toBe(1);
+
+    await page.keyboard.press('Escape');
+    await expectDictationStopped(page);
+  } finally {
+    await repo.cleanup();
+  }
+});
+
 test('dictation hotkeys do not trigger on background screens', async ({ page }) => {
   await addFakeMicrophone(page);
 
@@ -97,23 +217,18 @@ test('dictation hotkeys do not trigger on background screens', async ({ page })
     await ensureHostSelected(page);
     await setWorkingDirectory(page, repo.path);
     await createAgent(page, 'Respond with exactly: Hello');
+    await expect(page).toHaveURL(/\/workspace\//);
+    await expectComposerReady(page);
 
-    await expect(page).toHaveURL(/\/agent\//);
-    await expect(page.getByRole('textbox', { name: 'Message agent...' })).toBeEditable();
-
+    await openSettings(page);
     await page.keyboard.press('Control+d');
     await page.waitForTimeout(200);
 
     const calls = await page.evaluate(() => (window as any).__mic.getUserMediaCalls as number);
     const active = await page.evaluate(() => (window as any).__mic.active as number);
 
-    expect(calls).toBe(1);
-    expect(active).toBe(1);
-
-    await page.keyboard.press('Escape');
-    await expect
-      .poll(async () => page.evaluate(() => (window as any).__mic.active as number))
-      .toBe(0);
+    expect(calls).toBe(0);
+    expect(active).toBe(0);
   } finally {
     await repo.cleanup();
   }
@@ -128,20 +243,18 @@ test('dictation transcribes fixture via real STT', async ({ page }) => {
     await ensureHostSelected(page);
     await setWorkingDirectory(page, repo.path);
     await createAgent(page, 'Respond with exactly: Hello');
-
-    await expect(page).toHaveURL(/\/agent\//);
-    await expect(page.getByRole('textbox', { name: 'Message agent...' })).toBeEditable();
+    await expect(page).toHaveURL(/\/workspace\//);
+    await expectComposerReady(page);
 
     await page.keyboard.press('Control+d');
-    await expect
-      .poll(async () => page.evaluate(() => (window as any).__mic.active as number))
-      .toBe(1);
+    await expectDictationStarted(page);
 
     const initialCopyMessageCount = await page
       .getByRole('button', { name: 'Copy message' })
       .count();
 
     await page.keyboard.press('Control+d');
+    await expectDictationStopped(page);
 
     await expect
       .poll(
@@ -164,13 +277,11 @@ test('cancel stops mic even if recorder is already inactive', async ({ page }) =
     await setWorkingDirectory(page, repo.path);
     await createAgent(page, 'Respond with exactly: Hello');
 
-    await expect(page).toHaveURL(/\/agent\//);
-    await expect(page.getByRole('textbox', { name: 'Message agent...' })).toBeEditable();
+    await expect(page).toHaveURL(/\/workspace\//);
+    await expectComposerReady(page);
 
     await page.keyboard.press('Control+d');
-    await expect
-      .poll(async () => page.evaluate(() => (window as any).__mic.active as number))
-      .toBe(1);
+    await expectDictationStarted(page);
 
     await page.evaluate(() => {
       const mic = (window as any).__mic as { lastRecorder: null | { state: string } };
@@ -180,9 +291,7 @@ test('cancel stops mic even if recorder is already inactive', async ({ page }) =
     });
 
     await page.keyboard.press('Escape');
-    await expect
-      .poll(async () => page.evaluate(() => (window as any).__mic.active as number))
-      .toBe(0);
+    await expectDictationStopped(page);
   } finally {
     await repo.cleanup();
   }
@@ -198,29 +307,35 @@ test('dictation confirm+send does not dispatch after navigating away', async ({
     await ensureHostSelected(page);
     await createAgent(page, 'Respond with exactly: Hello');
 
-    await expect(page).toHaveURL(/\/agent($|\/)/);
-    await expect(page.getByRole('textbox', { name: 'Message agent...' })).toBeEditable();
+    await expect(page).toHaveURL(/\/workspace\//);
+    const match = page.url().match(/\/h\/([^/]+)\/workspace\/[^?]+(?:\?open=agent%3A|\\?open=agent:)([^/?#&]+)/);
+    if (!match) {
+      throw new Error(`Expected workspace agent URL, got ${page.url()}`);
+    }
+    const serverId = decodeURIComponent(match[1]!);
+    const agentId = decodeURIComponent(match[2]!);
+    await expectComposerReady(page);
+    const initialCopyMessageCount = await page.getByRole('button', { name: 'Copy message' }).count();
 
     await page.keyboard.press('Control+d');
-    await expect
-      .poll(async () => page.evaluate(() => (window as any).__mic.active as number))
-      .toBe(1);
+    await expectDictationStarted(page);
 
     await page.keyboard.press('Control+d');
 
     const newAgentButton = page.getByTestId('sidebar-new-agent');
     await expect(newAgentButton).toBeVisible();
     await newAgentButton.click();
-    await expect(page).toHaveURL(/\/agent\/?$/);
+    await expect(page).toHaveURL(/\/h\/[^/]+\/new-agent(\?|$)/);
 
     await page.waitForTimeout(10_000);
 
-    const agentEntry = page.getByText(repo.path).first();
-    await expect(agentEntry).toBeVisible();
-    await agentEntry.click();
-    await expect(page).toHaveURL(/\/agent($|\/)/);
+    await page.goto(buildHostWorkspaceAgentRoute(serverId, repo.path, agentId));
+    await expect(page).toHaveURL(
+      new RegExp(`/h/${escapeRegex(serverId)}/workspace/[^?]+\\?open=agent(?:%3A|:)${escapeRegex(agentId)}(?:$|&)`)
+    );
 
-    await expect(page.getByText(/voice note/i)).not.toBeVisible();
+    await expect(page.getByRole('button', { name: 'Copy message' })).toHaveCount(initialCopyMessageCount);
+    await expect(page.getByTestId('agent-chat-scroll').getByText(/this is a voice note\./i)).toHaveCount(0);
   } finally {
     await repo.cleanup();
   }

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(/\/h\/[^/]+\/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/fixtures.ts

@@ -77,10 +77,10 @@ test.beforeEach(async ({ page }) => {
     // Ensure create flow never uses a remembered host from the developer's real app.
     serverId: testDaemon.serverId,
     // Keep e2e fast/cheap by default.
-    provider: 'claude',
+    provider: 'codex',
     providerPreferences: {
       claude: { model: 'haiku' },
-      codex: { model: 'gpt-5.1-codex-mini' },
+      codex: { model: 'gpt-5.1-codex-mini', thinkingOptionId: 'low' },
     },
   };
 

packages/app/e2e/git-diff-sticky-headers.spec.ts

@@ -1,7 +1,7 @@
 import path from 'node:path';
 import { appendFile } from 'node:fs/promises';
 import { test, expect, type Page } from './fixtures';
-import { ensureHostSelected, gotoHome, setWorkingDirectory } from './helpers/app';
+import { createAgent, ensureHostSelected, gotoHome, setWorkingDirectory } from './helpers/app';
 import { createTempGitRepo } from './helpers/workspace';
 
 test.describe.configure({ timeout: 90000 });
@@ -10,18 +10,31 @@ function getChangesScope(page: Page) {
   return page.locator('[data-testid="explorer-content-area"]:visible').first();
 }
 
+async function ensureExplorerTabsVisible(page: Page) {
+  const changesTab = page.getByTestId('explorer-tab-changes').first();
+  if (await changesTab.isVisible().catch(() => false)) {
+    return;
+  }
+
+  const toggle = page
+    .getByRole('button', { name: /open explorer|close explorer|toggle explorer/i })
+    .first();
+  await expect(toggle).toBeVisible({ timeout: 10000 });
+  for (let attempt = 0; attempt < 4; attempt += 1) {
+    if (await changesTab.isVisible().catch(() => false)) {
+      return;
+    }
+    await toggle.click();
+    await page.waitForTimeout(200);
+  }
+  await expect(changesTab).toBeVisible({ timeout: 30000 });
+}
+
 async function openChangesPanel(page: Page) {
+  await ensureExplorerTabsVisible(page);
   const changesHeader = getChangesScope(page).getByTestId('changes-header');
   if (!(await changesHeader.isVisible())) {
-    const explorerHeader = page.getByTestId('explorer-header');
-    if (await explorerHeader.isVisible()) {
-      await page.getByText('Changes', { exact: true }).click();
-    } else {
-      const overflowMenu = page.getByTestId('agent-overflow-menu').first();
-      await expect(overflowMenu).toBeVisible({ timeout: 10000 });
-      await overflowMenu.click();
-      await page.getByText('View Changes', { exact: true }).click();
-    }
+    await page.getByTestId('explorer-tab-changes').first().click();
   }
   await expect(changesHeader).toBeVisible();
 }
@@ -31,22 +44,29 @@ async function refreshUncommittedMode(page: Page) {
   const toggle = scope.getByTestId('changes-diff-status').first();
   await expect(toggle).toBeVisible({ timeout: 30000 });
 
+  const diffModeBackdrop = page.getByTestId('changes-diff-status-menu-backdrop');
+  if (await diffModeBackdrop.isVisible().catch(() => false)) {
+    await diffModeBackdrop.click({ force: true });
+    await expect(diffModeBackdrop).toHaveCount(0);
+  }
+
   const currentLabel = (await toggle.innerText()).trim();
-  await toggle.click();
+  await toggle.click({ force: true });
+  await expect(page.getByTestId('changes-diff-status-menu')).toBeVisible({ timeout: 10000 });
+  const firstTarget = currentLabel === 'Uncommitted' ? 'changes-diff-mode-committed' : 'changes-diff-mode-uncommitted';
+  await page.getByTestId(firstTarget).click({ force: true });
   await expect.poll(async () => (await toggle.innerText()).trim()).not.toBe(currentLabel);
 
   const nextLabel = (await toggle.innerText()).trim();
-  await toggle.click();
+  await toggle.click({ force: true });
+  await expect(page.getByTestId('changes-diff-status-menu')).toBeVisible({ timeout: 10000 });
+  const secondTarget = nextLabel === 'Uncommitted' ? 'changes-diff-mode-committed' : 'changes-diff-mode-uncommitted';
+  await page.getByTestId(secondTarget).click({ force: true });
   await expect.poll(async () => (await toggle.innerText()).trim()).not.toBe(nextLabel);
 }
 
 async function createAgentAndWait(page: Page, message: string) {
-  const input = page.getByRole('textbox', { name: 'Message agent...' });
-  await expect(input).toBeEditable();
-  await input.fill(message);
-  await input.press('Enter');
-  await expect(page).toHaveURL(/\/agent\//, { timeout: 120000 });
-  await expect(page.getByText(message, { exact: true })).toBeVisible();
+  await createAgent(page, message);
 }
 
 test('keeps file header sticky while scrolling within a long diff', async ({ page }) => {

packages/app/e2e/global-draft-create-status-controls.spec.ts

@@ -0,0 +1,47 @@
+import { test, expect } from './fixtures'
+import { createTempGitRepo } from './helpers/workspace'
+import { ensureHostSelected, gotoHome, setWorkingDirectory } from './helpers/app'
+
+function escapeRegex(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+test('global draft create uses input status controls and preserves optimistic flow', async ({ page }) => {
+  const repo = await createTempGitRepo('paseo-e2e-global-draft-')
+  const prompt = `global draft prompt ${Date.now()}`
+
+  try {
+    await gotoHome(page)
+    await ensureHostSelected(page)
+    await setWorkingDirectory(page, repo.path)
+
+    await expect(page.getByTestId('working-directory-select').first()).toBeVisible({ timeout: 30_000 })
+
+    const providerSelector = page.getByTestId('agent-provider-selector').first()
+    const modeSelector = page.getByTestId('agent-mode-selector').first()
+    const modelSelector = page.getByTestId('agent-model-selector').first()
+    const thinkingSelector = page.getByTestId('agent-thinking-selector').first()
+
+    await expect(providerSelector).toBeVisible({ timeout: 30_000 })
+    await expect(modeSelector).toBeVisible({ timeout: 30_000 })
+    await expect(modelSelector).toBeVisible({ timeout: 30_000 })
+    await expect(thinkingSelector).toBeVisible({ timeout: 30_000 })
+
+    const selectedMode = ((await modeSelector.innerText()) ?? '').trim()
+    const selectedModel = ((await modelSelector.innerText()) ?? '').trim()
+    const selectedThinking = ((await thinkingSelector.innerText()) ?? '').trim()
+
+    const composer = page.getByRole('textbox', { name: 'Message agent...' }).first()
+    await composer.fill(prompt)
+    await composer.press('Enter')
+
+    await expect(page.getByText(prompt, { exact: true }).first()).toBeVisible({ timeout: 5_000 })
+    await expect(page).toHaveURL(/\/workspace\//, { timeout: 30_000 })
+
+    await expect(modelSelector).toContainText(new RegExp(escapeRegex(selectedModel), 'i'))
+    await expect(modeSelector).toContainText(new RegExp(escapeRegex(selectedMode), 'i'))
+    await expect(thinkingSelector).toContainText(new RegExp(escapeRegex(selectedThinking), 'i'))
+  } finally {
+    await repo.cleanup()
+  }
+})

packages/app/e2e/global-draft-to-existing-workspace-redirect.spec.ts

@@ -0,0 +1,219 @@
+import { test, expect } from './fixtures'
+import type { Page } from '@playwright/test'
+import { ensureHostSelected, gotoHome, setWorkingDirectory } from './helpers/app'
+import { createTempGitRepo } from './helpers/workspace'
+import { getWorkspaceTabTestIds } from './helpers/workspace-tabs'
+
+function parseWorkspaceContextFromUrl(rawUrl: string): { workspaceToken: string | null; agentId: string | null } {
+  const url = new URL(rawUrl)
+  const pathMatch = url.pathname.match(/\/workspace\/([^/?#]+)(?:\/agent\/([^/?#]+))?/) ?? null
+  const workspaceToken = pathMatch?.[1] ?? null
+  let agentId = pathMatch?.[2] ?? null
+
+  if (!agentId) {
+    const open = url.searchParams.get('open')
+    const openMatch = open?.match(/^agent:(.+)$/) ?? null
+    if (openMatch?.[1]) {
+      agentId = openMatch[1]
+    }
+  }
+
+  return { workspaceToken, agentId }
+}
+
+function getOpenAgentIdFromUrl(rawUrl: string): string | null {
+  const url = new URL(rawUrl)
+  const open = url.searchParams.get('open')
+  const openMatch = open?.match(/^agent:(.+)$/) ?? null
+  return openMatch?.[1] ?? null
+}
+
+async function preferSlowerThinkingOption(page: Page): Promise<void> {
+  await page.keyboard.press('Escape').catch(() => undefined)
+  const thinkingTrigger = page.getByTestId('agent-thinking-selector').first()
+  if (!(await thinkingTrigger.isVisible().catch(() => false))) {
+    return
+  }
+  await thinkingTrigger.click({ force: true })
+  const menu = page.getByTestId('agent-thinking-menu').first()
+  if (!(await menu.isVisible().catch(() => false))) {
+    return
+  }
+
+  const preferred = ['high', 'max', 'deep', 'long', 'medium']
+  for (const label of preferred) {
+    const option = menu.getByRole('button', { name: new RegExp(`^${label}$`, 'i') }).first()
+    if (await option.isVisible().catch(() => false)) {
+      await option.click({ force: true })
+      await expect(menu).not.toBeVisible({ timeout: 5_000 })
+      return
+    }
+  }
+
+  const options = menu.getByRole('button')
+  const count = await options.count()
+  if (count > 0) {
+    await options.last().click({ force: true })
+  }
+  await expect(menu).not.toBeVisible({ timeout: 5_000 })
+}
+
+async function isAnyStopVisible(page: Page): Promise<boolean> {
+  const candidates = page.getByRole('button', { name: /stop|cancel/i })
+  const count = await candidates.count()
+  for (let index = 0; index < count; index += 1) {
+    if (await candidates.nth(index).isVisible().catch(() => false)) {
+      return true
+    }
+  }
+  return false
+}
+
+async function isRunningControlVisible(page: Page): Promise<boolean> {
+  if (await isAnyStopVisible(page)) {
+    return true
+  }
+  const interruptSendButton = page.getByRole('button', { name: /interrupt agent|send and interrupt/i })
+  const count = await interruptSendButton.count()
+  for (let index = 0; index < count; index += 1) {
+    if (await interruptSendButton.nth(index).isVisible().catch(() => false)) {
+      return true
+    }
+  }
+  return false
+}
+
+async function hasVisibleText(page: Page, matcher: RegExp | string): Promise<boolean> {
+  const locator = page.getByText(matcher).first()
+  const matches = page.getByText(matcher)
+  const count = await matches.count()
+  for (let index = 0; index < count; index += 1) {
+    if (await matches.nth(index).isVisible().catch(() => false)) {
+      return true
+    }
+  }
+  return await locator.isVisible().catch(() => false)
+}
+
+test('global draft create in existing workspace redirects to that workspace with created agent tab and settles to idle', async ({
+  page,
+}) => {
+  test.setTimeout(360_000)
+  const serverId = process.env.E2E_SERVER_ID
+  if (!serverId) {
+    throw new Error('E2E_SERVER_ID is not set.')
+  }
+
+  const repo = await createTempGitRepo('paseo-e2e-global-existing-workspace-')
+  const id = `${Date.now()}`
+  const seedPrompt = `hello seed-${id}. please reply exactly: ACK_SEED_${id}`
+  const secondPrompt = `hello second-${id}. please reply exactly: ACK_SECOND_${id}`
+  const lifecyclePrompt = `hello lifecycle-${id}. wait 8 seconds, then reply exactly: ACK_LIFECYCLE_${id}`
+  const seedToken = `ACK_SEED_${id}`
+  const secondToken = `ACK_SECOND_${id}`
+  expect(seedPrompt).not.toBe(secondPrompt)
+  expect(seedToken).not.toBe(secondToken)
+
+  try {
+    await gotoHome(page)
+    await ensureHostSelected(page)
+    await page.goto(`/h/${serverId}/new-agent`)
+    await expect(page.locator('[data-testid="working-directory-select"]:visible').first()).toBeVisible({
+      timeout: 30_000,
+    })
+
+    // 1) Seed workspace with an existing agent.
+    await setWorkingDirectory(page, repo.path)
+    const seedComposer = page.getByRole('textbox', { name: 'Message agent...' }).first()
+    await seedComposer.fill(seedPrompt)
+    await seedComposer.press('Enter')
+
+    await expect(page.getByText(seedPrompt, { exact: true }).first()).toBeVisible({ timeout: 30_000 })
+    await expect(page).toHaveURL(/\/workspace\//, { timeout: 60_000 })
+    const seededContext = parseWorkspaceContextFromUrl(page.url())
+    if (!seededContext.workspaceToken || !seededContext.agentId) {
+      throw new Error(`Expected seeded workspace token and agent id in URL, got: ${page.url()}`)
+    }
+    const seededAgentId = seededContext.agentId
+    expect(getOpenAgentIdFromUrl(page.url())).toBe(seededAgentId)
+    await expect(page.getByText(new RegExp(seedToken)).first()).toBeVisible({ timeout: 180_000 })
+
+    // 2) Use global New Agent entry and 3) select same workspace.
+    await page.getByText('New agent', { exact: true }).first().click()
+    await expect(page).toHaveURL(new RegExp(`/h/${serverId}/new-agent`), { timeout: 30_000 })
+    await expect(page.locator('[data-testid="working-directory-select"]:visible').first()).toBeVisible({
+      timeout: 30_000,
+    })
+
+    await setWorkingDirectory(page, repo.path)
+    await preferSlowerThinkingOption(page)
+    await page.keyboard.press('Escape').catch(() => undefined)
+
+    // 4) Create second agent from global draft.
+    const composer = page.getByRole('textbox', { name: 'Message agent...' }).first()
+    await composer.fill(secondPrompt)
+    await composer.press('Enter')
+    await page.waitForTimeout(500)
+    if (page.url().includes('/new-agent')) {
+      const sendButton = page.getByRole('button', { name: /send message/i }).first()
+      await expect(sendButton).toBeVisible({ timeout: 10_000 })
+      await expect(sendButton).toBeEnabled({ timeout: 10_000 })
+      await sendButton.click({ force: true })
+    }
+
+    // 5) Assert redirect workspace context + created agent tab is active/open.
+    await expect(page).toHaveURL(/\/workspace\//, { timeout: 60_000 })
+    const createdContext = parseWorkspaceContextFromUrl(page.url())
+    expect(createdContext.workspaceToken).toBe(seededContext.workspaceToken)
+    if (!createdContext.agentId) {
+      throw new Error(`Expected created agent id in URL, got: ${page.url()}`)
+    }
+    const createdAgentId = createdContext.agentId
+    expect(createdAgentId).toBeTruthy()
+    expect(createdAgentId).not.toBe(seededAgentId)
+    expect(getOpenAgentIdFromUrl(page.url())).toBe(createdAgentId)
+    expect(getOpenAgentIdFromUrl(page.url())).not.toBe(seededAgentId)
+
+    const createdTabTestId = `workspace-tab-agent_${createdAgentId}`
+    await expect
+      .poll(async () => {
+        const finalTabIds = await getWorkspaceTabTestIds(page)
+        return finalTabIds.includes(createdTabTestId)
+      })
+      .toBe(true)
+    expect(getOpenAgentIdFromUrl(page.url())).toBe(createdAgentId)
+
+    // 6) Response assertions are scoped to created-agent active context.
+    await expect
+      .poll(async () => hasVisibleText(page, new RegExp(secondToken)), { timeout: 240_000 })
+      .toBe(true)
+    await expect(page.getByText(seedToken, { exact: true }).first()).not.toBeVisible({ timeout: 30_000 })
+
+    // 7) Lifecycle assertions on created agent only: running first, then idle.
+    const lifecycleComposer = page.getByRole('textbox', { name: 'Message agent...' }).first()
+    await lifecycleComposer.fill(lifecyclePrompt)
+    await lifecycleComposer.press('Enter')
+    await expect
+      .poll(async () => hasVisibleText(page, lifecyclePrompt), { timeout: 30_000 })
+      .toBe(true)
+
+    let sawRunning = false
+    for (let attempt = 0; attempt < 1200; attempt += 1) {
+      if (await isRunningControlVisible(page)) {
+        sawRunning = true
+        break
+      }
+      await page.waitForTimeout(50)
+    }
+    expect(sawRunning).toBe(true)
+
+    await expect
+      .poll(async () => (await isRunningControlVisible(page)) === false, { timeout: 240_000 })
+      .toBe(true)
+    const idleComposer = page.getByRole('textbox', { name: 'Message agent...' }).first()
+    await expect(idleComposer).toBeVisible({ timeout: 30_000 })
+    await expect(idleComposer).toBeEditable({ timeout: 30_000 })
+  } finally {
+    await repo.cleanup()
+  }
+})

packages/app/e2e/global-setup.ts

@@ -7,6 +7,14 @@ import net from 'node:net';
 import { Buffer } from 'node:buffer';
 import dotenv from 'dotenv';
 
+type WaitForServerOptions = {
+  host?: string;
+  timeoutMs?: number;
+  label: string;
+  childProcess?: ChildProcess | null;
+  getRecentOutput?: () => string;
+};
+
 async function getAvailablePort(): Promise<number> {
   return new Promise((resolve, reject) => {
     const server = net.createServer();
@@ -22,23 +30,157 @@ async function getAvailablePort(): Promise<number> {
   });
 }
 
-async function waitForServer(port: number, timeout = 15000): Promise<void> {
+function createLineBuffer(maxLines = 120): { add: (line: string) => void; dump: () => string } {
+  const lines: string[] = [];
+  return {
+    add(line: string) {
+      lines.push(line);
+      if (lines.length > maxLines) {
+        lines.shift();
+      }
+    },
+    dump() {
+      return lines.join('\n');
+    },
+  };
+}
+
+function formatRecentOutput(getRecentOutput?: () => string): string {
+  if (!getRecentOutput) {
+    return '';
+  }
+  const output = getRecentOutput().trim();
+  if (!output) {
+    return '';
+  }
+  return `\nRecent output:\n${output}`;
+}
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function waitForServer(port: number, options: WaitForServerOptions): Promise<void> {
+  const {
+    host = '127.0.0.1',
+    timeoutMs = 15000,
+    label,
+    childProcess,
+    getRecentOutput,
+  } = options;
   const start = Date.now();
-  while (Date.now() - start < timeout) {
+  let lastConnectionError: unknown = null;
+
+  while (Date.now() - start < timeoutMs) {
+    if (childProcess && childProcess.exitCode !== null) {
+      const signal = childProcess.signalCode ? `, signal ${childProcess.signalCode}` : '';
+      throw new Error(
+        `${label} exited before listening on ${host}:${port} (exit code ${childProcess.exitCode}${signal}).${formatRecentOutput(getRecentOutput)}`
+      );
+    }
+
     try {
       await new Promise<void>((resolve, reject) => {
-        const socket = net.connect(port, 'localhost', () => {
+        const socket = net.connect(port, host, () => {
           socket.end();
           resolve();
         });
+        socket.setTimeout(1000, () => {
+          socket.destroy();
+          reject(new Error(`Connection timed out to ${host}:${port}`));
+        });
         socket.on('error', reject);
       });
       return;
-    } catch {
+    } catch (error) {
+      lastConnectionError = error;
       await new Promise((r) => setTimeout(r, 100));
     }
   }
-  throw new Error(`Server did not start on port ${port} within ${timeout}ms`);
+
+  const reason =
+    lastConnectionError instanceof Error ? ` Last connection error: ${lastConnectionError.message}` : '';
+  throw new Error(
+    `${label} did not start on ${host}:${port} within ${timeoutMs}ms.${reason}${formatRecentOutput(getRecentOutput)}`
+  );
+}
+
+function parseRelayStartupFailure(line: string): string | null {
+  const clean = stripAnsi(line);
+  if (/Address already in use/i.test(clean)) {
+    return clean;
+  }
+  if (/failed: ::bind\(/i.test(clean)) {
+    return clean;
+  }
+  if (/Fatal uncaught/i.test(clean)) {
+    return clean;
+  }
+  return null;
+}
+
+async function stopProcess(child: ChildProcess | null): Promise<void> {
+  if (!child) {
+    return;
+  }
+  if (child.exitCode !== null || child.signalCode !== null) {
+    return;
+  }
+  child.kill('SIGTERM');
+  await new Promise<void>((resolve) => {
+    const timeout = setTimeout(() => {
+      if (child.exitCode === null && child.signalCode === null) {
+        child.kill('SIGKILL');
+      }
+      resolve();
+    }, 5000);
+    child.once('exit', () => {
+      clearTimeout(timeout);
+      resolve();
+    });
+  });
+}
+
+function summarizeOpenAiErrorBody(body: string): string {
+  const trimmed = body.trim();
+  if (!trimmed) {
+    return 'empty response body';
+  }
+  if (trimmed.length <= 240) {
+    return trimmed;
+  }
+  return `${trimmed.slice(0, 240)}…`;
+}
+
+async function isOpenAiApiKeyUsable(apiKey: string | undefined): Promise<boolean> {
+  const key = apiKey?.trim();
+  if (!key) {
+    return false;
+  }
+
+  try {
+    const response = await fetch('https://api.openai.com/v1/models?limit=1', {
+      method: 'GET',
+      headers: {
+        Authorization: `Bearer ${key}`,
+      },
+    });
+    if (response.ok) {
+      return true;
+    }
+    const body = await response.text();
+    console.warn(
+      `[e2e] OPENAI_API_KEY probe failed (${response.status}): ${summarizeOpenAiErrorBody(body)}`
+    );
+    return false;
+  } catch (error) {
+    console.warn(
+      `[e2e] OPENAI_API_KEY probe request failed: ${
+        error instanceof Error ? error.message : String(error)
+      }`
+    );
+    return false;
+  }
 }
 
 let daemonProcess: ChildProcess | null = null;
@@ -81,162 +223,293 @@ export default async function globalSetup() {
   }
 
   const port = await getAvailablePort();
-  const relayPort = await getAvailablePort();
+  let relayPort = 0;
   const metroPort = await getAvailablePort();
   paseoHome = await mkdtemp(path.join(tmpdir(), 'paseo-e2e-home-'));
+  let relayLineBuffer = createLineBuffer();
+  const metroLineBuffer = createLineBuffer();
+  const daemonLineBuffer = createLineBuffer();
 
-  const relayDir = path.resolve(__dirname, '..', '..', 'relay');
-  relayProcess = spawn(
-    'npx',
-    ['wrangler', 'dev', '--local', '--ip', '127.0.0.1', '--port', String(relayPort)],
-    {
-      cwd: relayDir,
-      env: { ...process.env },
-      stdio: ['ignore', 'pipe', 'pipe'],
-      detached: false,
-    }
-  );
-
-  relayProcess.stdout?.on('data', (data: Buffer) => {
-    const lines = data.toString().split('\n').filter((l) => l.trim());
-    for (const line of lines) {
-      console.log(`[relay] ${line}`);
-    }
-  });
-  relayProcess.stderr?.on('data', (data: Buffer) => {
-    const lines = data.toString().split('\n').filter((l) => l.trim());
-    for (const line of lines) {
-      console.error(`[relay] ${line}`);
-    }
-  });
-
-  await waitForServer(relayPort, 30000);
-
-  // Start Metro bundler on dynamic port
-  const appDir = path.resolve(__dirname, '..');
-  metroProcess = spawn('npx', ['expo', 'start', '--web', '--port', String(metroPort)], {
-    cwd: appDir,
-    env: {
-      ...process.env,
-      BROWSER: 'none', // Don't auto-open browser
-    },
-    stdio: ['ignore', 'pipe', 'pipe'],
-    detached: false,
-  });
-
-  metroProcess.stdout?.on('data', (data: Buffer) => {
-    const lines = data.toString().split('\n').filter((l) => l.trim());
-    for (const line of lines) {
-      console.log(`[metro] ${line}`);
-    }
-  });
-
-  metroProcess.stderr?.on('data', (data: Buffer) => {
-    console.error(`[metro] ${data.toString().trim()}`);
-  });
-
-  const serverDir = path.resolve(__dirname, '../../..', 'packages/server');
-  const tsxBin = execSync('which tsx').toString().trim();
-
-  let offerPayload: OfferPayload | null = null;
-  let offerResolve: (() => void) | null = null;
-  const offerPromise = new Promise<void>((resolve) => {
-    offerResolve = resolve;
-  });
-
-  daemonProcess = spawn(tsxBin, ['src/server/index.ts'], {
-    cwd: serverDir,
-    env: {
-      ...process.env,
-      PASEO_HOME: paseoHome,
-      PASEO_SERVER_ID: 'srv_e2e_test_daemon',
-      PASEO_LISTEN: `0.0.0.0:${port}`,
-      PASEO_RELAY_ENDPOINT: `127.0.0.1:${relayPort}`,
-      PASEO_CORS_ORIGINS: `http://localhost:${metroPort}`,
-      NODE_ENV: 'development',
-    },
-    stdio: ['ignore', 'pipe', 'pipe'],
-    detached: false,
-  });
-
-  let stdoutBuffer = '';
-  daemonProcess.stdout?.on('data', (data: Buffer) => {
-    stdoutBuffer += data.toString('utf8');
-    const lines = stdoutBuffer.split('\n');
-    stdoutBuffer = lines.pop() ?? '';
-    for (const line of lines) {
-      const trimmed = line.trim();
-      if (!trimmed) continue;
-      if (!offerPayload) {
-        const clean = stripAnsi(trimmed);
-        try {
-          const obj = JSON.parse(clean) as { msg?: string; url?: string };
-          if (obj.msg === 'pairing_offer' && typeof obj.url === 'string') {
-            offerPayload = decodeOfferFromFragmentUrl(obj.url);
-            offerResolve?.();
-          }
-        } catch {
-          const match = clean.match(/https?:\/\/[^\s"]+#offer=[A-Za-z0-9_-]+/);
-          if (match && clean.includes('pairing_offer')) {
-            try {
-              offerPayload = decodeOfferFromFragmentUrl(match[0]);
-              offerResolve?.();
-            } catch {
-              // ignore parsing failures
-            }
-          }
-        }
-      }
-      console.log(`[daemon] ${trimmed}`);
-    }
-  });
-
-  daemonProcess.stderr?.on('data', (data: Buffer) => {
-    console.error(`[daemon] ${data.toString().trim()}`);
-  });
-
-  // Wait for both daemon and Metro to be ready
-  await Promise.all([
-    waitForServer(port),
-    waitForServer(metroPort, 120000), // Metro can take longer to start
-  ]);
-
-  // Wait for daemon to emit a pairing offer (includes relay session ID).
-  await Promise.race([
-    offerPromise,
-    new Promise((_, reject) =>
-      setTimeout(() => reject(new Error('Timed out waiting for pairing_offer log')), 15000)
-    ),
-  ]);
-  if (!offerPayload) {
-    throw new Error('pairing_offer was not parsed from daemon logs');
-  }
-  const offer = offerPayload as OfferPayload;
-
-  process.env.E2E_DAEMON_PORT = String(port);
-  process.env.E2E_RELAY_PORT = String(relayPort);
-  process.env.E2E_SERVER_ID = offer.serverId;
-  process.env.E2E_RELAY_DAEMON_PUBLIC_KEY = offer.daemonPublicKeyB64;
-  process.env.E2E_METRO_PORT = String(metroPort);
-  console.log(`[e2e] Test daemon started on port ${port}, Metro on port ${metroPort}, home: ${paseoHome}`);
-
-  return async () => {
-    if (daemonProcess) {
-      daemonProcess.kill('SIGTERM');
-      daemonProcess = null;
-    }
-    if (metroProcess) {
-      metroProcess.kill('SIGTERM');
-      metroProcess = null;
-    }
-    if (relayProcess) {
-      relayProcess.kill('SIGTERM');
-      relayProcess = null;
-    }
+  const cleanup = async () => {
+    await Promise.all([stopProcess(daemonProcess), stopProcess(metroProcess), stopProcess(relayProcess)]);
+    daemonProcess = null;
+    metroProcess = null;
+    relayProcess = null;
     if (paseoHome) {
       await rm(paseoHome, { recursive: true, force: true });
       paseoHome = null;
     }
-    console.log('[e2e] Test daemon stopped');
   };
+
+  const openAiUsable = await isOpenAiApiKeyUsable(process.env.OPENAI_API_KEY);
+  const defaultLocalModelsDir = path.join(process.env.HOME ?? '', '.paseo', 'models', 'local-speech');
+  const hasDefaultLocalModelsDir = defaultLocalModelsDir.trim().length > 0 && existsSync(defaultLocalModelsDir);
+  const dictationProvider = openAiUsable ? 'openai' : 'local';
+
+  if (dictationProvider === 'local' && !hasDefaultLocalModelsDir) {
+    throw new Error(
+      'OpenAI key is not usable and local speech models are unavailable at ~/.paseo/models/local-speech. ' +
+        'Either provide a valid OPENAI_API_KEY or install local speech models before running app e2e tests.'
+    );
+  }
+
+  const localModelsDir = dictationProvider === 'local' ? defaultLocalModelsDir : null;
+  console.log(
+    `[e2e] Dictation STT provider: ${dictationProvider}${openAiUsable ? '' : ' (OpenAI probe failed)'}`
+  );
+
+  try {
+    const relayDir = path.resolve(__dirname, '..', '..', 'relay');
+    const maxRelayStartupAttempts = 5;
+    let relayStarted = false;
+    let lastRelayStartupError: unknown = null;
+
+    for (let attempt = 1; attempt <= maxRelayStartupAttempts; attempt += 1) {
+      relayPort = await getAvailablePort();
+      relayLineBuffer = createLineBuffer();
+      let relayStartupFailureLine: string | null = null;
+      let relayReadyForSelectedPort = false;
+
+      relayProcess = spawn(
+        'npx',
+        ['wrangler', 'dev', '--local', '--ip', '127.0.0.1', '--port', String(relayPort)],
+        {
+          cwd: relayDir,
+          env: { ...process.env },
+          stdio: ['ignore', 'pipe', 'pipe'],
+          detached: false,
+        }
+      );
+
+      relayProcess.stdout?.on('data', (data: Buffer) => {
+        const lines = data.toString().split('\n').filter((line) => line.trim());
+        for (const line of lines) {
+          relayLineBuffer.add(`[stdout] ${line}`);
+          const failure = parseRelayStartupFailure(line);
+          if (failure) {
+            relayStartupFailureLine = failure;
+          }
+          const clean = stripAnsi(line);
+          const readyMatch = clean.match(/Ready on .*:(\d+)\b/i);
+          if (readyMatch && Number(readyMatch[1]) === relayPort) {
+            relayReadyForSelectedPort = true;
+          }
+          console.log(`[relay] ${line}`);
+        }
+      });
+      relayProcess.stderr?.on('data', (data: Buffer) => {
+        const lines = data.toString().split('\n').filter((line) => line.trim());
+        for (const line of lines) {
+          relayLineBuffer.add(`[stderr] ${line}`);
+          const failure = parseRelayStartupFailure(line);
+          if (failure) {
+            relayStartupFailureLine = failure;
+          }
+          const clean = stripAnsi(line);
+          const readyMatch = clean.match(/Ready on .*:(\d+)\b/i);
+          if (readyMatch && Number(readyMatch[1]) === relayPort) {
+            relayReadyForSelectedPort = true;
+          }
+          console.error(`[relay] ${line}`);
+        }
+      });
+
+      try {
+        await waitForServer(relayPort, {
+          label: 'Relay dev server',
+          timeoutMs: 30000,
+          childProcess: relayProcess,
+          getRecentOutput: relayLineBuffer.dump,
+        });
+
+        const readyDeadline = Date.now() + 5000;
+        while (
+          !relayReadyForSelectedPort &&
+          relayStartupFailureLine === null &&
+          relayProcess?.exitCode === null &&
+          relayProcess?.signalCode === null &&
+          Date.now() < readyDeadline
+        ) {
+          await sleep(100);
+        }
+
+        if (relayStartupFailureLine) {
+          throw new Error(`Relay startup failed: ${relayStartupFailureLine}`);
+        }
+        if (!relayReadyForSelectedPort) {
+          throw new Error(
+            `Relay process did not report ready for selected port ${relayPort}.${formatRecentOutput(
+              relayLineBuffer.dump
+            )}`
+          );
+        }
+        if (relayProcess.exitCode !== null || relayProcess.signalCode !== null) {
+          throw new Error(
+            `Relay process exited before startup completed (exit code ${relayProcess.exitCode}, signal ${relayProcess.signalCode}).${formatRecentOutput(
+              relayLineBuffer.dump
+            )}`
+          );
+        }
+
+        relayStarted = true;
+        break;
+      } catch (error) {
+        lastRelayStartupError = error;
+        await stopProcess(relayProcess);
+        relayProcess = null;
+      }
+    }
+
+    if (!relayStarted) {
+      const message =
+        lastRelayStartupError instanceof Error
+          ? lastRelayStartupError.message
+          : String(lastRelayStartupError);
+      throw new Error(
+        `Failed to start relay dev server after ${maxRelayStartupAttempts} attempts. ${message}`
+      );
+    }
+
+    // Start Metro bundler on dynamic port
+    const appDir = path.resolve(__dirname, '..');
+    metroProcess = spawn('npx', ['expo', 'start', '--web', '--port', String(metroPort)], {
+      cwd: appDir,
+      env: {
+        ...process.env,
+        BROWSER: 'none', // Don't auto-open browser
+      },
+      stdio: ['ignore', 'pipe', 'pipe'],
+      detached: false,
+    });
+
+    metroProcess.stdout?.on('data', (data: Buffer) => {
+      const lines = data.toString().split('\n').filter((line) => line.trim());
+      for (const line of lines) {
+        metroLineBuffer.add(`[stdout] ${line}`);
+        console.log(`[metro] ${line}`);
+      }
+    });
+
+    metroProcess.stderr?.on('data', (data: Buffer) => {
+      const lines = data.toString().split('\n').filter((line) => line.trim());
+      for (const line of lines) {
+        metroLineBuffer.add(`[stderr] ${line}`);
+        console.error(`[metro] ${line}`);
+      }
+    });
+
+    const serverDir = path.resolve(__dirname, '../../..', 'packages/server');
+    const tsxBin = execSync('which tsx').toString().trim();
+
+    let offerPayload: OfferPayload | null = null;
+    let offerResolve: (() => void) | null = null;
+    const offerPromise = new Promise<void>((resolve) => {
+      offerResolve = resolve;
+    });
+
+    daemonProcess = spawn(tsxBin, ['src/server/index.ts'], {
+      cwd: serverDir,
+      env: {
+        ...process.env,
+        PASEO_HOME: paseoHome,
+        PASEO_SERVER_ID: 'srv_e2e_test_daemon',
+        PASEO_LISTEN: `0.0.0.0:${port}`,
+        PASEO_RELAY_ENDPOINT: `127.0.0.1:${relayPort}`,
+        PASEO_CORS_ORIGINS: `http://localhost:${metroPort}`,
+        // Use OpenAI speech providers in e2e to avoid local model bootstrapping delays.
+        PASEO_DICTATION_ENABLED: '1',
+        PASEO_VOICE_MODE_ENABLED: '1',
+        PASEO_DICTATION_STT_PROVIDER: dictationProvider,
+        PASEO_VOICE_STT_PROVIDER: 'openai',
+        PASEO_VOICE_TTS_PROVIDER: 'openai',
+        ...(localModelsDir ? { PASEO_LOCAL_MODELS_DIR: localModelsDir } : {}),
+        NODE_ENV: 'development',
+      },
+      stdio: ['ignore', 'pipe', 'pipe'],
+      detached: false,
+    });
+
+    let stdoutBuffer = '';
+    daemonProcess.stdout?.on('data', (data: Buffer) => {
+      stdoutBuffer += data.toString('utf8');
+      const lines = stdoutBuffer.split('\n');
+      stdoutBuffer = lines.pop() ?? '';
+      for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed) continue;
+        daemonLineBuffer.add(`[stdout] ${trimmed}`);
+        if (!offerPayload) {
+          const clean = stripAnsi(trimmed);
+          try {
+            const obj = JSON.parse(clean) as { msg?: string; url?: string };
+            if (obj.msg === 'pairing_offer' && typeof obj.url === 'string') {
+              offerPayload = decodeOfferFromFragmentUrl(obj.url);
+              offerResolve?.();
+            }
+          } catch {
+            const match = clean.match(/https?:\/\/[^\s"]+#offer=[A-Za-z0-9_-]+/);
+            if (match && clean.includes('pairing_offer')) {
+              try {
+                offerPayload = decodeOfferFromFragmentUrl(match[0]);
+                offerResolve?.();
+              } catch {
+                // ignore parsing failures
+              }
+            }
+          }
+        }
+        console.log(`[daemon] ${trimmed}`);
+      }
+    });
+
+    daemonProcess.stderr?.on('data', (data: Buffer) => {
+      const lines = data.toString().split('\n').filter((line) => line.trim());
+      for (const line of lines) {
+        daemonLineBuffer.add(`[stderr] ${line}`);
+        console.error(`[daemon] ${line}`);
+      }
+    });
+
+    // Wait for both daemon and Metro to be ready
+    await Promise.all([
+      waitForServer(port, {
+        label: 'Paseo daemon',
+        childProcess: daemonProcess,
+        getRecentOutput: daemonLineBuffer.dump,
+      }),
+      waitForServer(metroPort, {
+        label: 'Metro web server',
+        timeoutMs: 120000, // Metro can take longer to start
+        childProcess: metroProcess,
+        getRecentOutput: metroLineBuffer.dump,
+      }),
+    ]);
+
+    // Wait for daemon to emit a pairing offer (includes relay session ID).
+    await Promise.race([
+      offerPromise,
+      new Promise((_, reject) =>
+        setTimeout(() => reject(new Error('Timed out waiting for pairing_offer log')), 15000)
+      ),
+    ]);
+    if (!offerPayload) {
+      throw new Error('pairing_offer was not parsed from daemon logs');
+    }
+    const offer = offerPayload as OfferPayload;
+
+    process.env.E2E_DAEMON_PORT = String(port);
+    process.env.E2E_RELAY_PORT = String(relayPort);
+    process.env.E2E_SERVER_ID = offer.serverId;
+    process.env.E2E_RELAY_DAEMON_PUBLIC_KEY = offer.daemonPublicKeyB64;
+    process.env.E2E_METRO_PORT = String(metroPort);
+    console.log(`[e2e] Test daemon started on port ${port}, Metro on port ${metroPort}, home: ${paseoHome}`);
+
+    return async () => {
+      await cleanup();
+      console.log('[e2e] Test daemon stopped');
+    };
+  } catch (error) {
+    await cleanup();
+    throw error;
+  }
 }

packages/app/e2e/helpers/app.ts

@@ -71,10 +71,10 @@ async function ensureE2EStorageSeeded(page: Page): Promise<void> {
         '@paseo:create-agent-preferences',
         JSON.stringify({
           serverId: expectedServerId,
-          provider: 'claude',
+          provider: 'codex',
           providerPreferences: {
             claude: { model: 'haiku' },
-            codex: { model: 'gpt-5.1-codex-mini' },
+            codex: { model: 'gpt-5.1-codex-mini', thinkingOptionId: 'low' },
           },
         })
       );
@@ -158,23 +158,37 @@ export const gotoHome = async (page: Page) => {
   await page.goto('/');
   await ensureE2EStorageSeeded(page);
   await expect(page.getByText('New agent', { exact: true }).first()).toBeVisible();
-  await expect(page.getByRole('textbox', { name: 'Message agent...' })).toBeVisible();
+  const composer = page.getByRole('textbox', { name: 'Message agent...' });
+  if (!(await composer.first().isVisible().catch(() => false))) {
+    const newAgentButton = page.getByText('New agent', { exact: true }).first();
+    await newAgentButton.click();
+  }
+  await expect(composer.first()).toBeVisible({ timeout: 30000 });
 };
 
 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 worktreeSheetTitle = page.getByText('Select worktree', { exact: true }).first();
   const closeBottomSheet = async () => {
     const bottomSheetBackdrop = page
       .getByRole('button', { name: 'Bottom sheet backdrop' })
@@ -217,29 +231,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/')) {
@@ -328,18 +367,86 @@ export const ensureHostSelected = async (page: Page) => {
 export const createAgent = async (page: Page, message: string) => {
   const input = page.getByRole('textbox', { name: 'Message agent...' });
   await expect(input).toBeEditable();
+  await preferFastThinkingOption(page);
   await input.fill(message);
   await input.press('Enter');
 
-  // 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();
+  // The composer may remain on the draft screen briefly while the initial run starts,
+  // so assert the user-visible result instead of forcing one route shape here.
+  await expect(page).toHaveURL(/\/(workspace|agent|new-agent)(\/|$|\?)/, { timeout: 30000 });
+  await expect(page.getByText(message, { exact: true }).first()).toBeVisible({
+    timeout: 30000,
+  });
 };
 
+async function preferFastThinkingOption(page: Page): Promise<void> {
+  const providerTrigger = page
+    .locator('[data-testid="agent-provider-selector"]:visible, [data-testid="draft-provider-select"]:visible')
+    .first();
+  if (await providerTrigger.isVisible().catch(() => false)) {
+    const providerText = ((await providerTrigger.innerText().catch(() => '')) ?? '').trim();
+    if (!/codex/i.test(providerText)) {
+      return;
+    }
+  }
+
+  const thinkingTrigger = page.getByTestId('agent-thinking-selector').first();
+  if (!(await thinkingTrigger.isVisible().catch(() => false))) {
+    return;
+  }
+
+  const currentThinkingLabel = ((await thinkingTrigger.innerText().catch(() => '')) ?? '')
+    .trim()
+    .toLowerCase();
+  if (/\b(low|minimal|off)\b/.test(currentThinkingLabel)) {
+    return;
+  }
+
+  await thinkingTrigger.click();
+  const menu = page.getByTestId('agent-thinking-menu').first();
+  if (!(await menu.isVisible().catch(() => false))) {
+    return;
+  }
+
+  const preferredLabels = ['low', 'minimal', 'off', 'medium'];
+  let selected = false;
+  for (const label of preferredLabels) {
+    const option = menu
+      .getByRole('button', { name: new RegExp(`^${escapeRegex(label)}$`, 'i') })
+      .first();
+    if (await option.isVisible().catch(() => false)) {
+      await option.click({ force: true });
+      selected = true;
+      break;
+    }
+  }
+
+  if (!selected) {
+    const options = menu.getByRole('button');
+    const count = await options.count();
+    for (let index = 0; index < count; index += 1) {
+      const option = options.nth(index);
+      const label = ((await option.innerText().catch(() => '')) ?? '').trim();
+      if (!label) {
+        continue;
+      }
+      if (label.toLowerCase() === currentThinkingLabel) {
+        continue;
+      }
+      await option.click({ force: true });
+      selected = true;
+      break;
+    }
+  }
+
+  if (!selected) {
+    await page.keyboard.press('Escape').catch(() => undefined);
+    return;
+  }
+
+  await expect(menu).not.toBeVisible({ timeout: 5000 });
+}
+
 export interface AgentConfig {
   directory: string;
   provider?: string;
@@ -349,42 +456,110 @@ export interface AgentConfig {
 }
 
 export const selectProvider = async (page: Page, provider: string) => {
-  const providerLabel = page.getByText('PROVIDER', { exact: true }).first();
-  await expect(providerLabel).toBeVisible();
-  await providerLabel.click();
+  const normalizedProvider = provider.trim();
+  if (!normalizedProvider) {
+    throw new Error('Provider must be a non-empty string.');
+  }
 
-  const option = page.getByText(provider, { exact: true }).first();
+  const providerTrigger = page
+    .locator('[data-testid="agent-provider-selector"]:visible, [data-testid="draft-provider-select"]:visible')
+    .first();
+  if (
+    await providerTrigger
+      .getByText(new RegExp(`^${escapeRegex(normalizedProvider)}$`, 'i'))
+      .first()
+      .isVisible()
+      .catch(() => false)
+  ) {
+    return;
+  }
+
+  if (await providerTrigger.isVisible().catch(() => false)) {
+    await providerTrigger.click();
+  } else {
+    const providerLabel = page.getByText('PROVIDER', { exact: true }).first();
+    await expect(providerLabel).toBeVisible();
+    await providerLabel.click();
+  }
+
+  const dialog = page.getByRole('dialog').last();
+  const searchInput = dialog.getByRole('textbox', { name: /search provider/i }).first();
+  if (await searchInput.isVisible().catch(() => false)) {
+    await searchInput.fill(normalizedProvider);
+  }
+
+  const option = dialog
+    .getByText(new RegExp(`^${escapeRegex(normalizedProvider)}$`, 'i'))
+    .first();
   await expect(option).toBeVisible();
   await option.click();
 };
 
 export const selectModel = async (page: Page, model: string) => {
-  const modelLabel = page.getByText('MODEL', { exact: true }).first();
-  await expect(modelLabel).toBeVisible();
-  await modelLabel.click();
+  const normalizedModel = model.trim();
+  if (!normalizedModel) {
+    throw new Error('Model must be a non-empty string.');
+  }
+
+  const modelTrigger = page
+    .locator('[data-testid="agent-model-selector"]:visible, [data-testid="draft-model-select"]:visible')
+    .first();
+  if (
+    await modelTrigger
+      .getByText(new RegExp(`^${escapeRegex(normalizedModel)}$`, 'i'))
+      .first()
+      .isVisible()
+      .catch(() => false)
+  ) {
+    return;
+  }
+
+  if (await modelTrigger.isVisible().catch(() => false)) {
+    await modelTrigger.click();
+  } else {
+    const modelLabel = page.getByText('MODEL', { exact: true }).first();
+    await expect(modelLabel).toBeVisible();
+    await modelLabel.click();
+  }
 
   // Wait for the model dropdown to open
   const searchInput = page.getByRole('textbox', { name: /search model/i });
   await expect(searchInput).toBeVisible({ timeout: 10000 });
 
   // Type to search/filter models
-  await searchInput.fill(model);
+  await searchInput.fill(normalizedModel);
 
   const dialog = page.getByRole('dialog');
-  const option = dialog
-    .getByText(new RegExp(`^${escapeRegex(model)}$`, 'i'))
+  const exactOption = dialog
+    .getByText(new RegExp(`^${escapeRegex(normalizedModel)}$`, 'i'))
     .first();
-  await expect(option).toBeVisible({ timeout: 30000 });
-  await option.click({ force: true });
+  const exactVisible = await exactOption.isVisible().catch(() => false);
+  if (exactVisible) {
+    await exactOption.click({ force: true });
+  } else {
+    // Modern labels include version suffixes (for example "Haiku 4.5"), so
+    // select the first filtered result using keyboard confirm.
+    await searchInput.press('Enter');
+  }
 
   // Wait for dropdown to close
+  if (await searchInput.isVisible().catch(() => false)) {
+    await page.keyboard.press('Escape').catch(() => undefined);
+  }
   await expect(searchInput).not.toBeVisible({ timeout: 5000 });
 };
 
 export const selectMode = async (page: Page, mode: string) => {
-  const modeLabel = page.getByText('MODE', { exact: true }).first();
-  await expect(modeLabel).toBeVisible();
-  await modeLabel.click();
+  const modeTrigger = page
+    .locator('[data-testid="agent-mode-selector"]:visible, [data-testid="draft-mode-select"]:visible')
+    .first();
+  if (await modeTrigger.isVisible().catch(() => false)) {
+    await modeTrigger.click();
+  } else {
+    const modeLabel = page.getByText('MODE', { exact: true }).first();
+    await expect(modeLabel).toBeVisible();
+    await modeLabel.click();
+  }
 
   // Wait for the mode dropdown to open
   const searchInput = page.getByRole('textbox', { name: /search mode/i });
@@ -424,6 +599,16 @@ export const createAgentWithConfig = async (page: Page, config: AgentConfig) =>
   await createAgent(page, config.prompt);
 };
 
+export const createAgentInRepo = async (
+  page: Page,
+  config: Pick<AgentConfig, 'directory' | 'prompt'>
+) => {
+  await gotoHome(page);
+  await ensureHostSelected(page);
+  await setWorkingDirectory(page, config.directory);
+  await createAgent(page, config.prompt);
+};
+
 export const waitForPermissionPrompt = async (page: Page, timeout = 30000) => {
   const promptText = page.getByTestId('permission-request-question').first();
   await expect(promptText).toBeVisible({ timeout });

packages/app/e2e/helpers/workspace-tabs.ts

@@ -0,0 +1,52 @@
+import { expect, type Page } from "@playwright/test";
+
+export async function getWorkspaceTabTestIds(page: Page): Promise<string[]> {
+  const tabs = page.locator('[data-testid^="workspace-tab-"]');
+  const count = await tabs.count();
+  const ids: string[] = [];
+  for (let index = 0; index < count; index += 1) {
+    const testId = await tabs.nth(index).getAttribute("data-testid");
+    if (testId && !ids.includes(testId)) {
+      ids.push(testId);
+    }
+  }
+  return ids;
+}
+
+export async function waitForWorkspaceTabsVisible(page: Page): Promise<void> {
+  await expect(page.getByTestId("workspace-tabs-row").first()).toBeVisible({
+    timeout: 30_000,
+  });
+  await expect(page.getByTestId("workspace-new-agent-tab").first()).toBeVisible({
+    timeout: 30_000,
+  });
+}
+
+export async function ensureWorkspaceAgentPaneVisible(page: Page): Promise<void> {
+  const toggle = page.getByTestId("workspace-explorer-toggle").first();
+  if (!(await toggle.isVisible().catch(() => false))) {
+    return;
+  }
+  const isExpanded = (await toggle.getAttribute("aria-expanded")) === "true";
+  if (isExpanded) {
+    await toggle.click();
+    await expect(toggle).toHaveAttribute("aria-expanded", "false", {
+      timeout: 10_000,
+    });
+  }
+}
+
+export async function sampleWorkspaceTabIds(
+  page: Page,
+  options: { durationMs?: number; intervalMs?: number } = {}
+): Promise<string[][]> {
+  const durationMs = options.durationMs ?? 2_500;
+  const intervalMs = options.intervalMs ?? 50;
+  const snapshots: string[][] = [];
+  const start = Date.now();
+  while (Date.now() - start <= durationMs) {
+    snapshots.push(await getWorkspaceTabTestIds(page));
+    await page.waitForTimeout(intervalMs);
+  }
+  return snapshots;
+}

packages/app/e2e/helpers/workspace-ui.ts

@@ -0,0 +1,74 @@
+import { expect, type Page } from '@playwright/test';
+import { buildHostWorkspaceRoute } from '@/utils/host-routes';
+import { gotoHome } from './app';
+
+export async function openNewAgentComposer(page: Page): Promise<void> {
+  await gotoHome(page);
+}
+
+export function workspaceLabelFromPath(value: string): string {
+  const normalized = value.replace(/\\/g, '/').replace(/\/+$/, '');
+  const parts = normalized.split('/').filter(Boolean);
+  return parts[parts.length - 1] ?? normalized;
+}
+
+function escapeRegex(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function candidateWorkspaceIds(inputPath: string): string[] {
+  const trimmed = inputPath.replace(/\/+$/, '');
+  const candidates = new Set<string>([trimmed]);
+  if (trimmed.startsWith('/var/')) {
+    candidates.add(`/private${trimmed}`);
+  }
+  if (trimmed.startsWith('/private/var/')) {
+    candidates.add(trimmed.replace(/^\/private/, ''));
+  }
+  return Array.from(candidates);
+}
+
+function workspaceRowLocator(page: Page, serverId: string, workspacePath: string) {
+  const ids = candidateWorkspaceIds(workspacePath).map(
+    (id) => `[data-testid="sidebar-workspace-row-${serverId}:${id}"]`
+  );
+  return page.locator(ids.join(',')).first();
+}
+
+export async function switchWorkspaceViaSidebar(input: {
+  page: Page;
+  serverId: string;
+  targetWorkspacePath: string;
+}): Promise<void> {
+  const row = workspaceRowLocator(input.page, input.serverId, input.targetWorkspacePath);
+  await expect(row).toBeVisible({ timeout: 30_000 });
+  await row.click();
+
+  const targetWorkspaceRoute = buildHostWorkspaceRoute(input.serverId, input.targetWorkspacePath);
+  await expect(input.page).toHaveURL(new RegExp(escapeRegex(targetWorkspaceRoute)), {
+    timeout: 30_000,
+  });
+}
+
+export async function expectWorkspaceHeader(
+  page: Page,
+  input: { title: string; subtitle: string }
+): Promise<void> {
+  const titleLocator = page.getByTestId('workspace-header-title');
+  const subtitleLocator = page.getByTestId('workspace-header-subtitle');
+
+  await expect(titleLocator.first()).toHaveText(input.title, {
+    timeout: 30_000,
+  });
+  await expect(subtitleLocator.first()).toHaveText(input.subtitle, {
+    timeout: 30_000,
+  });
+}
+
+export async function seedWorkspaceActivity(page: Page, marker: string): Promise<void> {
+  const input = page.getByRole('textbox', { name: 'Message agent...' });
+  await expect(input).toBeEditable({ timeout: 30_000 });
+  await input.fill(marker);
+  await input.press('Enter');
+  await expect(page).toHaveURL(/\/workspace\//, { timeout: 30_000 });
+}

packages/app/e2e/helpers/workspace.ts

@@ -12,12 +12,15 @@ export const createTempGitRepo = async (
   prefix = 'paseo-e2e-',
   options?: { withRemote?: boolean }
 ): Promise<TempRepo> => {
-  const repoPath = await mkdtemp(path.join(tmpdir(), prefix));
+  // Keep E2E repo paths short so terminal prompt + typed commands stay visible without zsh clipping.
+  const tempRoot = process.platform === 'win32' ? tmpdir() : '/tmp';
+  const repoPath = await mkdtemp(path.join(tempRoot, prefix));
   const withRemote = options?.withRemote ?? false;
 
   execSync('git init -b main', { cwd: repoPath, stdio: 'ignore' });
   execSync('git config user.email "e2e@paseo.test"', { cwd: repoPath, stdio: 'ignore' });
   execSync('git config user.name "Paseo E2E"', { cwd: repoPath, stdio: 'ignore' });
+  execSync('git config commit.gpgsign false', { cwd: repoPath, stdio: 'ignore' });
   await writeFile(path.join(repoPath, 'README.md'), '# Temp Repo\n');
   execSync('git add README.md', { cwd: repoPath, stdio: 'ignore' });
   execSync('git commit -m "Initial commit"', { cwd: repoPath, stdio: 'ignore' });

packages/app/e2e/host-onboarding-direct.spec.ts

@@ -38,5 +38,7 @@ test('no hosts shows welcome; direct connection adds host and lands on agent cre
 
   await expect(page.getByTestId('sidebar-new-agent')).toBeVisible();
   await expect(page.getByText(serverId, { exact: true })).toBeVisible();
-  await expect(page.getByText('Online', { exact: true })).toBeVisible({ timeout: 15000 });
+  await expect(page.getByRole('textbox', { name: 'Message agent...' })).toBeEditable({
+    timeout: 15000,
+  });
 });

packages/app/e2e/host-removal.spec.ts

@@ -78,11 +78,21 @@ test('host removal removes the host from UI and persists after reload', async ({
   await expect(page.getByText('extra', { exact: true }).first()).toBeVisible();
   await expect(page.getByText(extraEndpoint, { exact: true }).first()).toBeVisible();
 
-  await page.getByTestId(`daemon-menu-trigger-${extraDaemon.serverId}`).click();
-  await page.getByTestId(`daemon-menu-remove-${extraDaemon.serverId}`).click();
+  const hostSettingsButton = page.getByTestId(`daemon-card-settings-${extraDaemon.serverId}`).first();
+  await expect(hostSettingsButton).toBeVisible({ timeout: 10000 });
+  await hostSettingsButton.click();
+
+  const hostDetailModal = page.getByTestId('host-detail-modal');
+  await expect(hostDetailModal).toBeVisible({ timeout: 10000 });
+  await hostDetailModal.getByText('Advanced', { exact: true }).click();
+  await page.getByText('Remove host', { exact: true }).last().click();
+
   await expect(page.getByTestId('remove-host-confirm-modal')).toBeVisible();
   await page.getByTestId('remove-host-confirm').click();
 
+  await expect(page.getByTestId(`daemon-card-${extraDaemon.serverId}`)).toHaveCount(0, {
+    timeout: 30000,
+  });
   await expect(page.getByText(extraEndpoint, { exact: true })).toHaveCount(0);
   await page.waitForFunction(
     (serverId) => {

packages/app/e2e/host-selection.spec.ts

@@ -41,10 +41,10 @@ test('new agent respects serverId in the URL', async ({ page }) => {
   };
   const createAgentPreferences = {
     serverId: testDaemon.serverId,
-    provider: 'claude',
+    provider: 'codex',
     providerPreferences: {
       claude: { model: 'haiku' },
-      codex: { model: 'gpt-5.1-codex-mini' },
+      codex: { model: 'gpt-5.1-codex-mini', thinkingOptionId: 'low' },
     },
   };
 
@@ -60,11 +60,18 @@ test('new agent respects serverId in the URL', async ({ page }) => {
     { daemon: testDaemon, preferences: createAgentPreferences }
   );
   await page.reload();
-  await expect(page.getByText('Online', { exact: true }).first()).toBeVisible({ timeout: 20000 });
+  await expect(page.getByText('New agent', { exact: true }).first()).toBeVisible({ timeout: 20000 });
 
   await page.goto(`/?serverId=${encodeURIComponent(serverId)}`);
   await expect(page.getByText('New agent', { exact: true }).first()).toBeVisible();
 
+  const newAgentButton = page.getByTestId('sidebar-new-agent').first();
+  if (await newAgentButton.isVisible().catch(() => false)) {
+    await newAgentButton.click();
+  } else {
+    await page.getByText('New agent', { exact: true }).first().click();
+  }
+
   const input = page.getByRole('textbox', { name: 'Message agent...' });
   await expect(input).toBeEditable({ timeout: 30000 });
 });
@@ -95,7 +102,7 @@ test('new agent auto-selects first online host when no preference is stored', as
     updatedAt: nowIso,
   };
 
-  await page.goto('/');
+  await gotoHome(page);
   await page.evaluate(
     ({ daemon }) => {
       const nonce = localStorage.getItem('@paseo:e2e-seed-nonce') ?? '1';
@@ -109,7 +116,6 @@ test('new agent auto-selects first online host when no preference is stored', as
 
   await page.reload();
   await expect(page.getByText('New agent', { exact: true }).first()).toBeVisible();
-  await expect(page.getByText('Online', { exact: true }).first()).toBeVisible({ timeout: 20000 });
 
   // Host should be auto-selected (no manual selection required).
   await expect(page.getByText('localhost', { exact: true }).first()).toBeVisible();

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/manual-host-port.spec.ts

@@ -17,8 +17,28 @@ test('manual host add accepts host:port only and persists a direct connection',
   });
   await page.goto('/settings');
 
-  await page.getByText('+ Add connection', { exact: true }).click();
-  await page.getByText('Direct connection', { exact: true }).click();
+  await expect
+    .poll(
+      async () => {
+        if (await page.getByText('Welcome to Paseo', { exact: true }).isVisible().catch(() => false)) {
+          return 'welcome';
+        }
+        if (await page.getByText('+ Add connection', { exact: true }).isVisible().catch(() => false)) {
+          return 'settings';
+        }
+        return '';
+      },
+      { timeout: 15000 }
+    )
+    .not.toBe('');
+
+  const isWelcome = await page.getByText('Welcome to Paseo', { exact: true }).isVisible().catch(() => false);
+  if (isWelcome) {
+    await page.getByText('Direct connection', { exact: true }).first().click();
+  } else {
+    await page.getByText('+ Add connection', { exact: true }).click();
+    await page.getByText('Direct connection', { exact: true }).click();
+  }
 
   const input = page.getByPlaceholder('host:6767');
   await expect(input).toBeVisible();
@@ -27,11 +47,18 @@ test('manual host add accepts host:port only and persists a direct connection',
   await page.getByText('Connect', { exact: true }).click();
 
   const nameModal = page.getByTestId('name-host-modal');
-  await expect(nameModal).toBeVisible({ timeout: 15000 });
-  await nameModal.getByTestId('name-host-skip').click();
+  if (await nameModal.isVisible().catch(() => false)) {
+    await nameModal.getByTestId('name-host-skip').click();
+  }
 
-  await expect(page.getByTestId('sidebar-new-agent')).toBeVisible();
-  await expect(page.getByText('Online', { exact: true })).toBeVisible({ timeout: 15000 });
+  await expect(page.getByTestId('sidebar-new-agent')).toBeVisible({ timeout: 30000 });
+
+  const settingsButton = page.locator('[data-testid="sidebar-settings"]:visible').first();
+  await expect(settingsButton).toBeVisible({ timeout: 10000 });
+  await settingsButton.click();
+  await expect(page.locator(`[data-testid="daemon-card-${serverId}"]:visible`).first()).toBeVisible({
+    timeout: 15000,
+  });
 
   await page.waitForFunction(
     ({ port, serverId }) => {

packages/app/e2e/pairing-offer-parsing.spec.ts

@@ -1,5 +1,6 @@
 import { test, expect } from './fixtures';
 import { Buffer } from 'node:buffer';
+import { gotoHome, openSettings } from './helpers/app';
 
 function encodeBase64Url(input: string): string {
   return Buffer.from(input, 'utf8')
@@ -10,35 +11,57 @@ function encodeBase64Url(input: string): string {
 }
 
 test('pairing flow accepts #offer=ConnectionOfferV2 and stores relay-only host', async ({ page }) => {
+  const relayPort = process.env.E2E_RELAY_PORT;
+  const serverId = process.env.E2E_SERVER_ID;
+  const daemonPublicKeyB64 = process.env.E2E_RELAY_DAEMON_PUBLIC_KEY;
+  if (!relayPort || !serverId || !daemonPublicKeyB64) {
+    throw new Error(
+      'E2E_RELAY_PORT, E2E_SERVER_ID, or E2E_RELAY_DAEMON_PUBLIC_KEY is not set (expected from globalSetup).'
+    );
+  }
+
   // Override the default fixture seeding for this test.
-  await page.goto('/settings');
+  await gotoHome(page);
+  await openSettings(page);
   await page.evaluate(() => {
     const nonce = localStorage.getItem('@paseo:e2e-seed-nonce') ?? '1';
     localStorage.setItem('@paseo:e2e-disable-default-seed-once', nonce);
     localStorage.setItem('@paseo:daemon-registry', JSON.stringify([]));
     localStorage.removeItem('@paseo:settings');
   });
-  await page.reload();
+  await page.goto('/');
+
+  const relayEndpoint = `127.0.0.1:${relayPort}`;
 
   const offer = {
     v: 2 as const,
-    serverId: 'e2e-server-123',
-    daemonPublicKeyB64: Buffer.from('e2e-public-key', 'utf8').toString('base64'),
-    relay: { endpoint: 'relay.local:443' },
+    serverId,
+    daemonPublicKeyB64,
+    relay: { endpoint: relayEndpoint },
   };
 
   const offerUrl = `https://app.paseo.sh/#offer=${encodeBase64Url(JSON.stringify(offer))}`;
 
-  await page.getByText('+ Add connection', { exact: true }).click();
-  await page.getByText('Paste pairing link', { exact: true }).click();
+  const welcomeTitle = page.getByText('Welcome to Paseo', { exact: true });
+  if (await welcomeTitle.isVisible().catch(() => false)) {
+    await page.getByTestId('welcome-paste-pairing-link').click();
+  } else {
+    await page.getByText('+ Add connection', { exact: true }).click();
+    await page.getByText('Paste pairing link', { exact: true }).click();
+  }
 
   const input = page.getByPlaceholder('https://app.paseo.sh/#offer=...');
   await expect(input).toBeVisible();
   await input.fill(offerUrl);
 
-  await page.getByText('Pair', { exact: true }).click();
+  await page.getByTestId('pair-link-submit').click();
 
-  await expect(page.getByTestId('sidebar-new-agent')).toBeVisible();
+  const nameHostModal = page.getByTestId('name-host-modal');
+  if (await nameHostModal.isVisible().catch(() => false)) {
+    await nameHostModal.getByTestId('name-host-skip').click();
+  }
+
+  await expect(page.getByTestId('sidebar-new-agent')).toBeVisible({ timeout: 30000 });
 
   await page.waitForFunction(
     ({ expected }) => {

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/permission-prompt.spec.ts

@@ -7,6 +7,7 @@ import {
   waitForPermissionPrompt,
   allowPermission,
   denyPermission,
+  waitForAgentFinishUI,
 } from './helpers/app';
 import { createTempGitRepo } from './helpers/workspace';
 
@@ -31,7 +32,7 @@ test.describe('permission prompts', () => {
     try {
       await createAgentWithConfig(page, {
         directory: repo.path,
-        model: 'haiku',
+        provider: 'claude',
         mode: 'Always Ask',
         prompt,
       });
@@ -71,7 +72,7 @@ test.describe('permission prompts', () => {
     try {
       await createAgentWithConfig(page, {
         directory: repo.path,
-        model: 'haiku',
+        provider: 'claude',
         mode: 'Always Ask',
         prompt,
       });
@@ -79,10 +80,8 @@ test.describe('permission prompts', () => {
       await waitForPermissionPrompt(page, 30000);
 
       await denyPermission(page);
-
-      await expect(page.getByText(/denied by the user|permission\/authorization check/i)).toBeVisible({
-        timeout: 30_000,
-      });
+      await waitForAgentFinishUI(page, 30000);
+      await expect(page.getByTestId('permission-request-question')).toHaveCount(0);
 
       expect(existsSync(filePath)).toBe(false);
 

packages/app/e2e/relay-fallback-connect.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from './fixtures';
+import { gotoHome, openSettings } from './helpers/app';
 
 test('connects via relay when direct endpoints fail', async ({ page }) => {
   const relayPort = process.env.E2E_RELAY_PORT;
@@ -26,7 +27,8 @@ test('connects via relay when direct endpoints fail', async ({ page }) => {
   };
 
   // Override the default fixture seeding for this test.
-  await page.goto('/settings');
+  await gotoHome(page);
+  await openSettings(page);
   await page.evaluate((daemon) => {
     const nonce = localStorage.getItem('@paseo:e2e-seed-nonce') ?? '1';
     localStorage.setItem('@paseo:e2e-disable-default-seed-once', nonce);

packages/app/e2e/relay-stability.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from './fixtures';
+import { gotoHome, openSettings } from './helpers/app';
 
 test('relay connection stays stable across multiple tabs', async ({ page }) => {
   const relayPort = process.env.E2E_RELAY_PORT;
@@ -26,7 +27,8 @@ test('relay connection stays stable across multiple tabs', async ({ page }) => {
   };
 
   // Use relay by making the direct endpoint intentionally fail.
-  await page.goto('/settings');
+  await gotoHome(page);
+  await openSettings(page);
   await page.evaluate((daemon) => {
     const nonce = localStorage.getItem('@paseo:e2e-seed-nonce') ?? '1';
     localStorage.setItem('@paseo:e2e-disable-default-seed-once', nonce);
@@ -45,7 +47,10 @@ test('relay connection stays stable across multiple tabs', async ({ page }) => {
   await page2.routeWebSocket(/:(6767)\b/, async (ws) => {
     await ws.close({ code: 1008, reason: 'Blocked connection to localhost:6767 during e2e.' });
   });
-  await page2.goto('/settings');
+  await page2.goto('/');
+  const settingsButton2 = page2.locator('[data-testid="sidebar-settings"]:visible').first();
+  await expect(settingsButton2).toBeVisible({ timeout: 20000 });
+  await settingsButton2.click();
   const card2 = page2.getByTestId(`daemon-card-${serverId}`);
   await expect(card2.getByText('Relay', { exact: true })).toBeVisible({ timeout: 20000 });
   await expect(card2.getByText('Online', { exact: true })).toBeVisible({ timeout: 20000 });

packages/app/e2e/sidebar-new-agent-clones-selected.spec.ts

@@ -13,10 +13,26 @@ test('sidebar New Agent opens a fresh create screen', async ({ page }) => {
     await createAgent(page, 'Agent A: respond with exactly A');
     await expect(page).toHaveURL(/\/agent\//);
 
-    // Click sidebar New Agent and assert it does not carry over agent settings via URL.
+    // Click sidebar New Agent and assert it re-opens the host draft route while
+    // preserving working directory context from the selected agent.
     await page.getByTestId('sidebar-new-agent').click();
-    await expect(page).toHaveURL(/\/agent\/?$/);
-    await expect(page).not.toHaveURL(new RegExp(encodeURIComponent(repoA.path)));
+    await expect(page).toHaveURL(/\/h\/[^/]+\/agent(\?|$)/);
+    const searchWorkingDir = await page.evaluate(() => {
+      try {
+        return new URL(window.location.href).searchParams.get('workingDir');
+      } catch {
+        return null;
+      }
+    });
+    const normalizedCandidates = new Set<string>([repoA.path]);
+    if (repoA.path.startsWith('/var/')) {
+      normalizedCandidates.add(`/private${repoA.path}`);
+    }
+    if (repoA.path.startsWith('/private/var/')) {
+      normalizedCandidates.add(repoA.path.replace(/^\/private/, ''));
+    }
+    expect(searchWorkingDir).not.toBeNull();
+    expect(normalizedCandidates.has(searchWorkingDir ?? '')).toBe(true);
   } finally {
     await repoA.cleanup();
   }

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

@@ -0,0 +1,117 @@
+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 tryResolveTarget = (root: HTMLElement) => {
+        const stack = [root, ...Array.from(root.querySelectorAll<HTMLElement>("*"))];
+        for (const element of stack) {
+          if (element.dataset?.testid === "combobox-desktop-container") {
+            target = element;
+            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-responsiveness-benchmark.spec.ts

@@ -0,0 +1,238 @@
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import { test, expect, type Page } from "./fixtures";
+import { setWorkingDirectory } from "./helpers/app";
+import { createTempGitRepo } from "./helpers/workspace";
+import {
+  openNewAgentComposer,
+  seedWorkspaceActivity,
+  switchWorkspaceViaSidebar,
+} from "./helpers/workspace-ui";
+
+function percentile(values: number[], p: number): number {
+  if (values.length === 0) {
+    return 0;
+  }
+  const sorted = [...values].sort((a, b) => a - b);
+  const rank = Math.ceil((p / 100) * sorted.length);
+  const index = Math.min(sorted.length - 1, Math.max(0, rank - 1));
+  return sorted[index] ?? 0;
+}
+
+function summarize(values: number[]) {
+  if (values.length === 0) {
+    return {
+      count: 0,
+      minMs: 0,
+      maxMs: 0,
+      avgMs: 0,
+      p95Ms: 0,
+      p99Ms: 0,
+    };
+  }
+
+  const sum = values.reduce((acc, value) => acc + value, 0);
+  return {
+    count: values.length,
+    minMs: Math.min(...values),
+    maxMs: Math.max(...values),
+    avgMs: Math.round((sum / values.length) * 100) / 100,
+    p95Ms: percentile(values, 95),
+    p99Ms: percentile(values, 99),
+  };
+}
+
+function buildStressCommand(doneMarker: string): string {
+  // Deterministic synthetic "TUI-like" redraw loop: alternate screen + cursor-home repaint.
+  const markerFile = ".paseo-terminal-benchmark-marker";
+  return [
+    "i=1",
+    "printf '\\033[?1049h\\033[2J'",
+    "while [ $i -le 240 ]; do",
+    "printf '\\033[H'",
+    "r=1",
+    "while [ $r -le 24 ]; do",
+    "printf 'bench frame:%03d row:%02d ########################################\\n' \"$i\" \"$r\"",
+    "r=$((r+1))",
+    "done",
+    "sleep 0.01",
+    "i=$((i+1))",
+    "done",
+    `printf '\\033[?1049l\\n${doneMarker}\\n'`,
+    `printf '${doneMarker}\\n' > '${markerFile}'`,
+  ].join("; ");
+}
+
+async function markerFileContains(filePath: string, marker: string): Promise<boolean> {
+  try {
+    const text = await readFile(filePath, "utf8");
+    return text.includes(marker);
+  } catch {
+    return false;
+  }
+}
+
+async function toggleExplorerAndMeasureLatency(page: Page): Promise<number> {
+  const toggle = page.getByTestId("workspace-explorer-toggle").first();
+  await expect(toggle).toBeVisible({ timeout: 30_000 });
+  const currentlyExpanded = (await toggle.getAttribute("aria-expanded")) === "true";
+  const expected = currentlyExpanded ? "false" : "true";
+
+  const start = Date.now();
+  await toggle.click();
+  await expect(toggle).toHaveAttribute("aria-expanded", expected, { timeout: 15_000 });
+  return Date.now() - start;
+}
+
+test("workspace terminal responsiveness benchmark (report-only, single stress profile)", async ({
+  page,
+}, testInfo) => {
+  test.setTimeout(180_000);
+  const repo = await createTempGitRepo("paseo-e2e-terminal-benchmark-");
+  const markerFilePath = path.join(repo.path, ".paseo-terminal-benchmark-marker");
+
+  try {
+    const serverId = process.env.E2E_SERVER_ID;
+    if (!serverId) {
+      throw new Error("E2E_SERVER_ID is not set.");
+    }
+
+    await openNewAgentComposer(page);
+    await setWorkingDirectory(page, repo.path);
+    await seedWorkspaceActivity(page, `terminal benchmark seed ${Date.now()}`);
+
+    await switchWorkspaceViaSidebar({ page, serverId, targetWorkspacePath: repo.path });
+    await expect(page.getByTestId("workspace-new-terminal-tab").first()).toBeVisible({
+      timeout: 30_000,
+    });
+
+    const newTerminalButton = page.getByTestId("workspace-new-terminal-tab").first();
+    await expect(newTerminalButton).toBeVisible({ timeout: 30_000 });
+    await newTerminalButton.click();
+
+    const surface = page.locator('[data-testid="terminal-surface"]:visible').first();
+    await expect(surface).toBeVisible({ timeout: 60_000 });
+    await surface.click({ force: true });
+
+    await page.evaluate(() => {
+      const monitor = {
+        samples: [] as number[],
+        active: true,
+        rafId: 0,
+        lastTs: performance.now(),
+      };
+
+      const tick = (ts: number) => {
+        if (!monitor.active) {
+          return;
+        }
+        monitor.samples.push(ts - monitor.lastTs);
+        monitor.lastTs = ts;
+        monitor.rafId = requestAnimationFrame(tick);
+      };
+
+      monitor.rafId = requestAnimationFrame(tick);
+
+      (window as { __PASEO_E2E_RAF_MONITOR__?: { stop: () => { samples: number[] } } }).__PASEO_E2E_RAF_MONITOR__ =
+        {
+          stop: () => {
+            if (!monitor.active) {
+              return { samples: monitor.samples };
+            }
+            monitor.active = false;
+            cancelAnimationFrame(monitor.rafId);
+            return { samples: monitor.samples };
+          },
+        };
+    });
+
+    const doneMarker = `TERMINAL_BENCH_DONE_${Date.now()}`;
+    const postMarker = `TERMINAL_BENCH_POST_${Date.now()}`;
+    const stressCommand = buildStressCommand(doneMarker);
+    await page.keyboard.type(stressCommand, { delay: 0 });
+    await page.keyboard.press("Enter");
+
+    const interactionLatenciesMs: number[] = [];
+    for (let attempt = 0; attempt < 18; attempt += 1) {
+      const latency = await toggleExplorerAndMeasureLatency(page);
+      interactionLatenciesMs.push(latency);
+    }
+
+    const rafResult = await page.evaluate(() => {
+      const handle = (
+        window as { __PASEO_E2E_RAF_MONITOR__?: { stop: () => { samples: number[] } } }
+      ).__PASEO_E2E_RAF_MONITOR__;
+      if (!handle || typeof handle.stop !== "function") {
+        return { samples: [] as number[] };
+      }
+      return handle.stop();
+    });
+
+    await surface.click({ force: true });
+    await page.keyboard.type(`echo ${postMarker} >> .paseo-terminal-benchmark-marker`, { delay: 0 });
+    await page.keyboard.press("Enter");
+    await expect.poll(async () => await markerFileContains(markerFilePath, postMarker), {
+      timeout: 120_000,
+    }).toBe(true);
+
+    const diagnostics = await page.evaluate(async () => {
+      const debug = (
+        window as {
+          __PASEO_PERF_DIAGNOSTICS_DEBUG__?: {
+            consumeReports?: () => Promise<unknown[]>;
+          };
+        }
+      ).__PASEO_PERF_DIAGNOSTICS_DEBUG__;
+      if (!debug || typeof debug.consumeReports !== "function") {
+        return { available: false, reports: [] as unknown[] };
+      }
+      try {
+        const reports = await debug.consumeReports();
+        return { available: true, reports: Array.isArray(reports) ? reports : [] };
+      } catch (error) {
+        return {
+          available: true,
+          reports: [] as unknown[],
+          error: error instanceof Error ? error.message : String(error),
+        };
+      }
+    });
+
+    const frameGapsMs = (rafResult.samples ?? []).filter(
+      (sample) => Number.isFinite(sample) && sample > 0
+    );
+    const report = {
+      mode: "report-only",
+      profile: "single-stress",
+      generatedAt: new Date().toISOString(),
+      workload: {
+        frames: 240,
+        rowsPerFrame: 24,
+        frameSleepMs: 10,
+        doneMarker,
+        postMarker,
+        doneMarkerObserved: await markerFileContains(markerFilePath, doneMarker),
+      },
+      frameGapMs: {
+        ...summarize(frameGapsMs),
+        over100Ms: frameGapsMs.filter((gap) => gap > 100).length,
+        over250Ms: frameGapsMs.filter((gap) => gap > 250).length,
+        over500Ms: frameGapsMs.filter((gap) => gap > 500).length,
+      },
+      explorerToggleLatencyMs: summarize(interactionLatenciesMs),
+      diagnostics: {
+        available: diagnostics.available,
+        reportCount: diagnostics.reports.length,
+        reports: diagnostics.reports,
+        error: "error" in diagnostics ? diagnostics.error : undefined,
+      },
+    };
+
+    await testInfo.attach("terminal-responsiveness-report", {
+      body: JSON.stringify(report, null, 2),
+      contentType: "application/json",
+    });
+  } 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/e2e/workspace-draft-create-status-controls.spec.ts

@@ -0,0 +1,107 @@
+import { test, expect } from './fixtures'
+import { ensureHostSelected, gotoHome, setWorkingDirectory } from './helpers/app'
+import { createTempGitRepo } from './helpers/workspace'
+import {
+  ensureWorkspaceAgentPaneVisible,
+  getWorkspaceTabTestIds,
+  waitForWorkspaceTabsVisible,
+} from './helpers/workspace-tabs'
+import { switchWorkspaceViaSidebar } from './helpers/workspace-ui'
+
+function escapeRegex(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+test('workspace draft tab uses input status controls with optimistic create and in-place transition', async ({
+  page,
+}) => {
+  const serverId = process.env.E2E_SERVER_ID
+  if (!serverId) {
+    throw new Error('E2E_SERVER_ID is not set.')
+  }
+
+  const repo = await createTempGitRepo('paseo-e2e-workspace-draft-')
+  const seedPrompt = `seed workspace ${Date.now()}`
+  const createPrompt = `workspace draft prompt ${Date.now()}`
+
+  try {
+    await gotoHome(page)
+    await ensureHostSelected(page)
+
+    // Force the setup onto the global draft surface. In slow runs the app can
+    // still be on a previously opened agent/workspace view where the placement
+    // form is not rendered.
+    await page.goto(`/h/${serverId}/new-agent`)
+    await expect(page.locator('[data-testid="working-directory-select"]:visible').first()).toBeVisible({
+      timeout: 30_000,
+    })
+
+    await setWorkingDirectory(page, repo.path)
+    const seedComposer = page.getByRole('textbox', { name: 'Message agent...' }).first()
+    await seedComposer.fill(seedPrompt)
+    await page.getByRole('button', { name: /send message/i }).first().click()
+    await expect(page.getByText(seedPrompt, { exact: true }).first()).toBeVisible({
+      timeout: 30_000,
+    })
+    await expect(page).toHaveURL(/\/workspace\//, { timeout: 60_000 })
+
+    await switchWorkspaceViaSidebar({ page, serverId, targetWorkspacePath: repo.path })
+    const workspaceRouteToken = page.url().match(/\/workspace\/([^/?#]+)/)?.[1] ?? null
+    expect(workspaceRouteToken).toBeTruthy()
+    await waitForWorkspaceTabsVisible(page)
+    await ensureWorkspaceAgentPaneVisible(page)
+
+    const beforeDraftIds = await getWorkspaceTabTestIds(page)
+    await page.getByTestId('workspace-new-agent-tab').first().click()
+    await ensureWorkspaceAgentPaneVisible(page)
+
+    const withDraftIds = await getWorkspaceTabTestIds(page)
+    const draftTabTestId = withDraftIds.find((id) => !beforeDraftIds.includes(id))
+    if (!draftTabTestId) {
+      throw new Error('Expected a draft workspace tab to be created.')
+    }
+
+    const draftId = draftTabTestId.replace('workspace-tab-', '')
+    const draftCloseButton = page.getByTestId(`workspace-draft-close-${draftId}`).first()
+    await expect(draftCloseButton).toBeVisible({ timeout: 30_000 })
+
+    await expect(page.getByTestId('working-directory-select').first()).not.toBeVisible()
+    await expect(page.getByTestId('worktree-select-trigger').first()).not.toBeVisible()
+
+    const providerSelector = page.getByTestId('agent-provider-selector').first()
+    const modeSelector = page.getByTestId('agent-mode-selector').first()
+    const modelSelector = page.getByTestId('agent-model-selector').first()
+    const thinkingSelector = page.getByTestId('agent-thinking-selector').first()
+
+    await expect(providerSelector).toBeVisible({ timeout: 30_000 })
+    await expect(modeSelector).toBeVisible({ timeout: 30_000 })
+    await expect(modelSelector).toBeVisible({ timeout: 30_000 })
+    await expect(thinkingSelector).toBeVisible({ timeout: 30_000 })
+
+    const selectedMode = ((await modeSelector.innerText()) ?? '').trim()
+    const selectedModel = ((await modelSelector.innerText()) ?? '').trim()
+    const selectedThinking = ((await thinkingSelector.innerText()) ?? '').trim()
+
+    const composer = page.getByRole('textbox', { name: 'Message agent...' }).first()
+    await composer.fill(createPrompt)
+    await composer.press('Enter')
+
+    await expect(page.getByText(createPrompt, { exact: true }).first()).toBeVisible({ timeout: 5_000 })
+    await expect(draftCloseButton).not.toBeVisible({ timeout: 30_000 })
+
+    const finalIds = await getWorkspaceTabTestIds(page)
+    expect(finalIds).toContain(draftTabTestId)
+
+    await expect(modelSelector).toContainText(new RegExp(escapeRegex(selectedModel), 'i'))
+    await expect(modeSelector).toContainText(new RegExp(escapeRegex(selectedMode), 'i'))
+    await expect(thinkingSelector).toContainText(new RegExp(escapeRegex(selectedThinking), 'i'))
+
+    const currentUrl = page.url()
+    if (!workspaceRouteToken) {
+      throw new Error('Expected workspace route token to be present.')
+    }
+    expect(currentUrl).toContain(`/workspace/${workspaceRouteToken}`)
+  } finally {
+    await repo.cleanup()
+  }
+})

packages/app/e2e/workspace-draft-tab-retarget.spec.ts

@@ -0,0 +1,125 @@
+import { test, expect } from "./fixtures";
+import type { Page } from "@playwright/test";
+import { createAgentInRepo } from "./helpers/app";
+import { createTempGitRepo } from "./helpers/workspace";
+import {
+  ensureWorkspaceAgentPaneVisible,
+  getWorkspaceTabTestIds,
+  sampleWorkspaceTabIds,
+  waitForWorkspaceTabsVisible,
+} from "./helpers/workspace-tabs";
+import { switchWorkspaceViaSidebar } from "./helpers/workspace-ui";
+
+async function expectComposerFocused(page: Page) {
+  const composer = page.getByRole("textbox", { name: "Message agent..." }).first();
+  await expect(composer).toBeEditable({ timeout: 30_000 });
+  await expect
+    .poll(async () => {
+      return await composer.evaluate(
+        (element) => document.activeElement === element
+      );
+    })
+    .toBe(true);
+}
+
+test("workspace draft submit retargets tab in place without transient extra tabs", async ({ page }) => {
+  const serverId = process.env.E2E_SERVER_ID;
+  if (!serverId) {
+    throw new Error("E2E_SERVER_ID is not set.");
+  }
+
+  const repo = await createTempGitRepo("paseo-e2e-draft-retarget-");
+  const seedPrompt = `seed prompt ${Date.now()}`;
+  const createPrompt = `retarget prompt ${Date.now()}`;
+
+  try {
+    await createAgentInRepo(page, { directory: repo.path, prompt: seedPrompt });
+
+    await switchWorkspaceViaSidebar({ page, serverId, targetWorkspacePath: repo.path });
+    await waitForWorkspaceTabsVisible(page);
+    await ensureWorkspaceAgentPaneVisible(page);
+
+    const beforeDraftIds = await getWorkspaceTabTestIds(page);
+    await page.getByTestId("workspace-new-agent-tab").first().click();
+    await ensureWorkspaceAgentPaneVisible(page);
+    await expect(page.getByRole("textbox", { name: "Message agent..." })).toBeEditable();
+
+    const withDraftIds = await getWorkspaceTabTestIds(page);
+    expect(withDraftIds.length).toBe(beforeDraftIds.length + 1);
+    const draftTabTestId = withDraftIds.find((id) => !beforeDraftIds.includes(id));
+    expect(draftTabTestId).toBeTruthy();
+
+    const draftId = draftTabTestId!.replace("workspace-tab-", "");
+    const draftCloseButton = page.getByTestId(`workspace-draft-close-${draftId}`).first();
+    await expect(draftCloseButton).toBeVisible({ timeout: 30_000 });
+
+    const samplingPromise = sampleWorkspaceTabIds(page, { durationMs: 3_000, intervalMs: 40 });
+    const input = page.getByRole("textbox", { name: "Message agent..." });
+    await input.fill(createPrompt);
+    await input.press("Enter");
+    await expect(page.getByText(createPrompt, { exact: true }).first()).toBeVisible({
+      timeout: 30_000,
+    });
+
+    const snapshots = await samplingPromise;
+    const maxObservedCount = snapshots.reduce((max, ids) => Math.max(max, ids.length), 0);
+    expect(maxObservedCount).toBe(withDraftIds.length);
+
+    const finalIds = await getWorkspaceTabTestIds(page);
+    expect(finalIds.length).toBe(withDraftIds.length);
+    expect(finalIds).toContain(draftTabTestId!);
+    await expect(draftCloseButton).not.toBeVisible({ timeout: 30_000 });
+  } finally {
+    await repo.cleanup();
+  }
+});
+
+test("workspace agent tab switch focuses composer on desktop web", async ({ page }) => {
+  const serverId = process.env.E2E_SERVER_ID;
+  if (!serverId) {
+    throw new Error("E2E_SERVER_ID is not set.");
+  }
+
+  const repo = await createTempGitRepo("paseo-e2e-tab-focus-");
+  const firstPrompt = `first tab prompt ${Date.now()}`;
+  const secondPrompt = `second tab prompt ${Date.now()}`;
+
+  try {
+    await createAgentInRepo(page, { directory: repo.path, prompt: firstPrompt });
+    await switchWorkspaceViaSidebar({ page, serverId, targetWorkspacePath: repo.path });
+    await waitForWorkspaceTabsVisible(page);
+    await ensureWorkspaceAgentPaneVisible(page);
+
+    const beforeSecondAgentIds = await getWorkspaceTabTestIds(page);
+    await page.getByTestId("workspace-new-agent-tab").first().click();
+    await expectComposerFocused(page);
+
+    const composer = page.getByRole("textbox", { name: "Message agent..." }).first();
+    await composer.fill(secondPrompt);
+    await composer.press("Enter");
+    await expect(page.getByText(secondPrompt, { exact: true }).first()).toBeVisible({
+      timeout: 30_000,
+    });
+
+    const withSecondAgentIds = await getWorkspaceTabTestIds(page);
+    const secondAgentTabTestId = withSecondAgentIds.find(
+      (id) => !beforeSecondAgentIds.includes(id)
+    );
+    if (!secondAgentTabTestId) {
+      throw new Error("Expected second agent tab to be created.");
+    }
+
+    const firstAgentTabTestId = beforeSecondAgentIds[0];
+    if (!firstAgentTabTestId) {
+      throw new Error("Expected first agent tab to exist.");
+    }
+
+    await page.getByTestId(firstAgentTabTestId).first().click();
+    await expectComposerFocused(page);
+
+    await page.getByTestId(secondAgentTabTestId).first().click();
+    await expectComposerFocused(page);
+  } finally {
+    await repo.cleanup();
+  }
+});

packages/app/e2e/workspace-header-tabs-restore.spec.ts

@@ -0,0 +1,132 @@
+import { test, expect, type Page } from "./fixtures";
+import { createAgentInRepo } from "./helpers/app";
+import { createTempGitRepo } from "./helpers/workspace";
+import { switchWorkspaceViaSidebar } from "./helpers/workspace-ui";
+
+async function openWorkspaceWithAgent(page: Page, workspacePath: string): Promise<void> {
+  const serverId = process.env.E2E_SERVER_ID;
+  if (!serverId) {
+    throw new Error("E2E_SERVER_ID is not set.");
+  }
+
+  await createAgentInRepo(page, {
+    directory: workspacePath,
+    prompt: `workspace header restore ${Date.now()}`,
+  });
+  await switchWorkspaceViaSidebar({ page, serverId, targetWorkspacePath: workspacePath });
+  await expect(page.getByTestId("workspace-new-agent-tab").first()).toBeVisible({
+    timeout: 30000,
+  });
+  await expect(page.getByTestId("workspace-new-terminal-tab").first()).toBeVisible({
+    timeout: 30000,
+  });
+}
+
+test("workspace new-tab buttons stay on-screen during horizontal scroll", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-workspace-new-tab-");
+
+  try {
+    await openWorkspaceWithAgent(page, repo.path);
+
+    const agentButton = page.getByTestId("workspace-new-agent-tab").first();
+    const terminalButton = page.getByTestId("workspace-new-terminal-tab").first();
+    const tabsScroll = page.getByTestId("workspace-tabs-scroll").first();
+    await expect(agentButton).toBeVisible({ timeout: 30000 });
+    await expect(terminalButton).toBeVisible({ timeout: 30000 });
+    await expect(tabsScroll).toBeVisible({ timeout: 30000 });
+
+    // Create enough terminal tabs to ensure the tabs row has overflow to scroll.
+    const workspaceTabs = page.locator(
+      '[data-testid^="workspace-tab-"]:not([data-testid^="workspace-tab-context-"])'
+    );
+    const initialTabCount = await workspaceTabs.count();
+    const targetTabCount = initialTabCount + 8;
+
+    for (let attempt = initialTabCount; attempt < targetTabCount; attempt += 1) {
+      await expect(terminalButton).toBeEnabled({ timeout: 30000 });
+      await terminalButton.click();
+      await expect
+        .poll(async () => await workspaceTabs.count(), { timeout: 30000 })
+        .toBeGreaterThanOrEqual(attempt + 1);
+    }
+
+    const agentBoundsBefore = await agentButton.boundingBox();
+    const terminalBoundsBefore = await terminalButton.boundingBox();
+    const viewport = page.viewportSize();
+
+    expect(agentBoundsBefore).not.toBeNull();
+    expect(terminalBoundsBefore).not.toBeNull();
+    expect(viewport).not.toBeNull();
+
+    if (!agentBoundsBefore || !terminalBoundsBefore || !viewport) {
+      return;
+    }
+
+    expect(agentBoundsBefore.x).toBeGreaterThanOrEqual(0);
+    expect(agentBoundsBefore.y).toBeGreaterThanOrEqual(0);
+    expect(agentBoundsBefore.x + agentBoundsBefore.width).toBeLessThanOrEqual(viewport.width);
+    expect(agentBoundsBefore.y + agentBoundsBefore.height).toBeLessThanOrEqual(viewport.height);
+
+    expect(terminalBoundsBefore.x).toBeGreaterThanOrEqual(0);
+    expect(terminalBoundsBefore.y).toBeGreaterThanOrEqual(0);
+    expect(terminalBoundsBefore.x + terminalBoundsBefore.width).toBeLessThanOrEqual(viewport.width);
+    expect(terminalBoundsBefore.y + terminalBoundsBefore.height).toBeLessThanOrEqual(viewport.height);
+
+    // Scroll tabs horizontally; the new-tab buttons should remain fixed on the right edge.
+    await tabsScroll.evaluate((el) => {
+      (el as HTMLElement).scrollLeft = (el as HTMLElement).scrollWidth;
+    });
+    await page.waitForTimeout(200);
+
+    const agentBoundsAfter = await agentButton.boundingBox();
+    const terminalBoundsAfter = await terminalButton.boundingBox();
+
+    expect(agentBoundsAfter).not.toBeNull();
+    expect(terminalBoundsAfter).not.toBeNull();
+
+    if (!agentBoundsAfter || !terminalBoundsAfter) {
+      return;
+    }
+
+    expect(agentBoundsAfter.x).toBeGreaterThanOrEqual(0);
+    expect(agentBoundsAfter.y).toBeGreaterThanOrEqual(0);
+    expect(agentBoundsAfter.x + agentBoundsAfter.width).toBeLessThanOrEqual(viewport.width);
+    expect(agentBoundsAfter.y + agentBoundsAfter.height).toBeLessThanOrEqual(viewport.height);
+
+    expect(terminalBoundsAfter.x).toBeGreaterThanOrEqual(0);
+    expect(terminalBoundsAfter.y).toBeGreaterThanOrEqual(0);
+    expect(terminalBoundsAfter.x + terminalBoundsAfter.width).toBeLessThanOrEqual(viewport.width);
+    expect(terminalBoundsAfter.y + terminalBoundsAfter.height).toBeLessThanOrEqual(viewport.height);
+  } finally {
+    await repo.cleanup();
+  }
+});
+
+test("workspace explorer toggle opens and closes explorer", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-workspace-explorer-toggle-");
+
+  try {
+    await openWorkspaceWithAgent(page, repo.path);
+
+    const toggle = page.getByTestId("workspace-explorer-toggle").first();
+    const explorerHeader = page.locator('[data-testid="explorer-header"]:visible').first();
+    await expect(toggle).toBeVisible({ timeout: 30000 });
+
+    const initiallyExpanded = (await toggle.getAttribute("aria-expanded")) === "true";
+    if (initiallyExpanded) {
+      await toggle.click();
+      await expect(toggle).toHaveAttribute("aria-expanded", "false");
+      await expect(explorerHeader).not.toBeVisible({ timeout: 10000 });
+    }
+
+    await toggle.click();
+    await expect(toggle).toHaveAttribute("aria-expanded", "true");
+    await expect(explorerHeader).toBeVisible({ timeout: 10000 });
+
+    await toggle.click();
+    await expect(toggle).toHaveAttribute("aria-expanded", "false");
+    await expect(explorerHeader).not.toBeVisible({ timeout: 10000 });
+  } finally {
+    await repo.cleanup();
+  }
+});

packages/app/e2e/workspace-sidebar-content-sync.spec.ts

@@ -0,0 +1,58 @@
+import { execSync } from 'node:child_process';
+import { test } from './fixtures';
+import { setWorkingDirectory } from './helpers/app';
+import { createTempGitRepo } from './helpers/workspace';
+import {
+  expectWorkspaceHeader,
+  openNewAgentComposer,
+  seedWorkspaceActivity,
+  switchWorkspaceViaSidebar,
+  workspaceLabelFromPath,
+} from './helpers/workspace-ui';
+
+test('sidebar workspace switch keeps visible content in sync with selected workspace', async ({ page }) => {
+  const serverId = process.env.E2E_SERVER_ID;
+  if (!serverId) {
+    throw new Error('E2E_SERVER_ID is not set.');
+  }
+
+  const repoA = await createTempGitRepo('paseo-e2e-sync-a-');
+  const repoB = await createTempGitRepo('paseo-e2e-sync-b-');
+
+  const tokenA = `SYNC_A_${Date.now()}`;
+  const tokenB = `SYNC_B_${Date.now()}`;
+
+  try {
+    execSync('git checkout -b sync-a-branch', { cwd: repoA.path, stdio: 'ignore' });
+    execSync('git checkout -b sync-b-branch', { cwd: repoB.path, stdio: 'ignore' });
+
+    await openNewAgentComposer(page);
+    await setWorkingDirectory(page, repoA.path);
+    await seedWorkspaceActivity(page, tokenA);
+
+    await openNewAgentComposer(page);
+    await setWorkingDirectory(page, repoB.path);
+    await seedWorkspaceActivity(page, tokenB);
+
+    await switchWorkspaceViaSidebar({ page, serverId, targetWorkspacePath: repoA.path });
+    await expectWorkspaceHeader(page, {
+      title: 'sync-a-branch',
+      subtitle: workspaceLabelFromPath(repoA.path),
+    });
+
+    await switchWorkspaceViaSidebar({ page, serverId, targetWorkspacePath: repoB.path });
+    await expectWorkspaceHeader(page, {
+      title: 'sync-b-branch',
+      subtitle: workspaceLabelFromPath(repoB.path),
+    });
+
+    await switchWorkspaceViaSidebar({ page, serverId, targetWorkspacePath: repoA.path });
+    await expectWorkspaceHeader(page, {
+      title: 'sync-a-branch',
+      subtitle: workspaceLabelFromPath(repoA.path),
+    });
+  } finally {
+    await repoA.cleanup();
+    await repoB.cleanup();
+  }
+});

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

@@ -4,26 +4,52 @@ const fs = require("fs");
 const path = require("path");
 
 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;
+config.transformer.asyncRequireModulePath = require.resolve(
+  "@expo/metro-config/build/async-require"
+);
 
-// This app imports TypeScript sources from sibling workspaces (server/relay).
-// Metro's default hierarchical lookup won't find hoisted deps when resolving
-// from those out-of-tree source files, so point Metro at the monorepo root.
-config.watchFolders = Array.from(
-  new Set([...(config.watchFolders ?? []), monorepoRoot])
-);
-config.resolver.nodeModulesPaths = Array.from(
-  new Set([
-    ...(config.resolver.nodeModulesPaths ?? []),
-    path.join(projectRoot, "node_modules"),
-    path.join(monorepoRoot, "node_modules"),
-  ])
-);
+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;
@@ -35,11 +61,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,19 +1,20 @@
 {
   "name": "@getpaseo/app",
   "main": "index.ts",
-  "version": "0.1.3",
+  "version": "0.1.18",
   "private": true,
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",
     "android": "npm run android:development",
-    "android:development": "APP_VARIANT=development expo prebuild --platform android --clean --non-interactive && APP_VARIANT=development expo run:android --variant=debug",
-    "android:production": "APP_VARIANT=production expo prebuild --platform android --clean --non-interactive && APP_VARIANT=production expo run:android --variant=release",
-    "android:prod": "npm run android:production",
+    "android:development": "APP_VARIANT=development expo prebuild --platform android --non-interactive && APP_VARIANT=development expo run:android --variant=debug",
+    "android:production": "APP_VARIANT=production expo prebuild --platform android --non-interactive && APP_VARIANT=production expo run:android --variant=release",
     "android:release": "npm run android:production",
+    "android:clean": "expo prebuild --platform android --clean --non-interactive",
     "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.3",
+    "@getpaseo/server": "0.1.18",
     "@gorhom/bottom-sheet": "^5.2.6",
     "@gorhom/portal": "^1.0.14",
     "@lezer/common": "^1.5.0",
@@ -49,6 +51,10 @@
     "@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/addon-unicode11": "^0.9.0",
+    "@xterm/addon-webgl": "^0.19.0",
+    "@xterm/xterm": "^6.0.0",
     "base64-js": "^1.5.1",
     "buffer": "^6.0.3",
     "expo": "^54.0.18",
@@ -75,6 +81,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/playwright.config.ts

@@ -11,7 +11,10 @@ export default defineConfig({
   expect: {
     timeout: 10_000,
   },
-  fullyParallel: true,
+  // E2E tests share a single daemon/relay/metro stack from global setup.
+  // Running tests concurrently causes cross-test contention and non-deterministic failures.
+  fullyParallel: false,
+  workers: 1,
   retries: process.env.CI ? 1 : 0,
   reporter: [['list']],
   use: {

packages/app/playwright.firefox.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const baseURL =
+  process.env.E2E_BASE_URL ??
+  `http://localhost:${process.env.E2E_METRO_PORT ?? "8081"}`;
+
+export default defineConfig({
+  testDir: "./e2e",
+  globalSetup: "./e2e/global-setup.ts",
+  timeout: 60_000,
+  expect: {
+    timeout: 10_000,
+  },
+  fullyParallel: false,
+  workers: 1,
+  retries: process.env.CI ? 1 : 0,
+  reporter: [["list"]],
+  use: {
+    baseURL,
+    trace: "retain-on-failure",
+    screenshot: "only-on-failure",
+    video: "retain-on-failure",
+  },
+  projects: [
+    {
+      name: "Desktop Firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+  ],
+});

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

@@ -1,6 +1,6 @@
 import "@/styles/unistyles";
 import { polyfillCrypto } from "@/polyfills/crypto";
-import { Stack, usePathname, useRouter } from "expo-router";
+import { Stack, useGlobalSearchParams, usePathname, useRouter } from "expo-router";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { KeyboardProvider } from "react-native-keyboard-controller";
 import { GestureHandlerRootView, Gesture, GestureDetector } from "react-native-gesture-handler";
@@ -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";
@@ -33,18 +32,37 @@ import {
   HorizontalScrollProvider,
   useHorizontalScrollOptional,
 } from "@/contexts/horizontal-scroll-context";
-import { getIsTauri, getIsTauriMac } from "@/constants/layout";
-import { useTrafficLightPadding } from "@/utils/tauri-window";
+import { getIsTauri } from "@/constants/layout";
 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 {
+  buildHostRootRoute,
+  parseHostAgentRouteFromPathname,
+  parseWorkspaceOpenIntent,
+} 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,36 +261,32 @@ function AppContainer({ children, selectedAgentId }: AppContainerProps) {
           isGesturing.value = false;
         }),
     [
-      chromeEnabled,
-      isMobile,
-      isOpen,
+      openGestureEnabled,
       windowWidth,
       translateX,
       backdropOpacity,
       animateToOpen,
       animateToClose,
       openAgentList,
+      mobileView,
       isGesturing,
       horizontalScroll?.isAnyScrolledRight,
       touchStartX,
     ]
   );
 
-  // When sidebar is collapsed on desktop Tauri macOS, add left padding for traffic lights
-  const trafficLightPadding = useTrafficLightPadding();
-  const needsTrafficLightPadding = !isMobile && !isOpen && getIsTauriMac();
-
   const content = (
     <View style={{ flex: 1, backgroundColor: theme.colors.surface0 }}>
       <View style={{ flex: 1, flexDirection: "row" }}>
-        {!isMobile && chromeEnabled && <SlidingSidebar selectedAgentId={selectedAgentId} />}
-        <View style={{ flex: 1, paddingLeft: needsTrafficLightPadding ? trafficLightPadding.left : 0 }}>
+        {!isMobile && chromeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
+        <View style={{ flex: 1 }}>
           {children}
         </View>
       </View>
-      {isMobile && chromeEnabled && <SlidingSidebar selectedAgentId={selectedAgentId} />}
+      {isMobile && chromeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
       <DownloadToast />
       <CommandCenter />
+      <KeyboardShortcutsDialog />
     </View>
   );
 
@@ -268,53 +304,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 +321,6 @@ function ProvidersWrapper({ children }: { children: ReactNode }) {
     return <LoadingView />;
   }
 
-  if (connectingMessage && !connectionTimedOut) {
-    return <LoadingView message={connectingMessage} />;
-  }
-
   return (
     <VoiceProvider>
       <OfferLinkListener upsertDaemonFromOfferUrl={upsertDaemonFromOfferUrl} />
@@ -359,7 +346,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(buildHostRootRoute(serverId) as any);
         })
         .catch((error) => {
           if (cancelled) return;
@@ -384,19 +371,24 @@ function OfferLinkListener({
 
 function AppWithSidebar({ children }: { children: ReactNode }) {
   const pathname = usePathname();
+  const params = useGlobalSearchParams<{ open?: string | string[] }>();
   useFaviconStatus();
 
   // 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}`;
+    const workspaceMatch = pathname.match(/^\/h\/([^/]+)\/workspace\/[^/]+(?:\/|$)/);
+    const workspaceServerId = workspaceMatch?.[1]?.trim() ?? "";
+    const openValue = Array.isArray(params.open) ? params.open[0] : params.open;
+    const openIntent = parseWorkspaceOpenIntent(openValue);
+    if (workspaceServerId && openIntent?.kind === "agent") {
+      const agentId = openIntent.agentId.trim();
+      return agentId ? `${workspaceServerId}:${agentId}` : undefined;
     }
-    return undefined;
-  }, [pathname]);
+
+    const match = parseHostAgentRouteFromPathname(pathname);
+    return match ? `${match.serverId}:${match.agentId}` : undefined;
+  }, [params.open, pathname]);
 
   return (
     <AppContainer selectedAgentId={selectedAgentKey}>{children}</AppContainer>
@@ -457,13 +449,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 +470,16 @@ 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="settings" />
+                                <Stack.Screen name="h/[serverId]/workspace/[workspaceId]" />
                                 <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]/agents" />
+                                <Stack.Screen name="h/[serverId]/new-agent" />
+                                <Stack.Screen name="h/[serverId]/settings" />
                                 <Stack.Screen name="pair-scan" />
                               </Stack>
                             </AppWithSidebar>
@@ -493,13 +487,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,99 @@
+import { useEffect, useRef } from "react";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useSessionStore } from "@/stores/session-store";
+import { useHostRuntimeSession } from "@/runtime/host-runtime";
+import {
+  buildHostRootRoute,
+  buildHostWorkspaceAgentRoute,
+} from "@/utils/host-routes";
+
+export default function HostAgentReadyRoute() {
+  const router = useRouter();
+  const params = useLocalSearchParams<{
+    serverId?: string;
+    agentId?: string;
+  }>();
+  const redirectedRef = useRef(false);
+  const serverId = typeof params.serverId === "string" ? params.serverId : "";
+  const agentId = typeof params.agentId === "string" ? params.agentId : "";
+  const { client, isConnected } = useHostRuntimeSession(serverId);
+  const agentCwd = useSessionStore((state) => {
+    if (!serverId || !agentId) {
+      return null;
+    }
+    return state.sessions[serverId]?.agents?.get(agentId)?.cwd ?? null;
+  });
+
+  useEffect(() => {
+    if (redirectedRef.current) {
+      return;
+    }
+    if (!serverId || !agentId) {
+      redirectedRef.current = true;
+      router.replace("/" as any);
+      return;
+    }
+
+    const normalizedCwd = agentCwd?.trim();
+    if (normalizedCwd) {
+      redirectedRef.current = true;
+      router.replace(
+        buildHostWorkspaceAgentRoute(serverId, normalizedCwd, agentId) as any
+      );
+    }
+  }, [agentCwd, agentId, router, serverId]);
+
+  useEffect(() => {
+    if (redirectedRef.current) {
+      return;
+    }
+    if (!serverId || !agentId) {
+      return;
+    }
+    if (agentCwd?.trim()) {
+      return;
+    }
+    if (!client || !isConnected) {
+      redirectedRef.current = true;
+      router.replace(buildHostRootRoute(serverId) as any);
+    }
+  }, [agentCwd, agentId, client, isConnected, router, serverId]);
+
+  useEffect(() => {
+    if (redirectedRef.current) {
+      return;
+    }
+    if (!serverId || !agentId || !client || !isConnected) {
+      return;
+    }
+
+    let cancelled = false;
+    void client
+      .fetchAgent(agentId)
+      .then((result) => {
+        if (cancelled || redirectedRef.current) {
+          return;
+        }
+        const cwd = result?.agent?.cwd?.trim();
+        redirectedRef.current = true;
+        if (cwd) {
+          router.replace(buildHostWorkspaceAgentRoute(serverId, cwd, agentId) as any);
+          return;
+        }
+        router.replace(buildHostRootRoute(serverId) as any);
+      })
+      .catch(() => {
+        if (cancelled || redirectedRef.current) {
+          return;
+        }
+        redirectedRef.current = true;
+        router.replace(buildHostRootRoute(serverId) as any);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [agentId, client, isConnected, router, serverId]);
+
+  return null;
+}

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,78 @@
+import { useEffect } from "react";
+import { useLocalSearchParams, usePathname, useRouter } from "expo-router";
+import { useSessionStore } from "@/stores/session-store";
+import { useFormPreferences } from "@/hooks/use-form-preferences";
+import {
+  buildHostRootRoute,
+  buildHostWorkspaceAgentRoute,
+  buildHostWorkspaceRoute,
+} from "@/utils/host-routes";
+
+const HOST_ROOT_REDIRECT_DELAY_MS = 300;
+
+export default function HostIndexRoute() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useLocalSearchParams<{ serverId?: string }>();
+  const serverId = typeof params.serverId === "string" ? params.serverId : "";
+  const { preferences, isLoading: preferencesLoading } = useFormPreferences();
+  const sessionAgents = useSessionStore(
+    (state) => (serverId ? state.sessions[serverId]?.agents : undefined)
+  );
+
+  useEffect(() => {
+    if (preferencesLoading) {
+      return;
+    }
+    if (!serverId) {
+      return;
+    }
+    const rootRoute = buildHostRootRoute(serverId);
+    if (pathname !== rootRoute && pathname !== `${rootRoute}/`) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      if (pathname !== rootRoute && pathname !== `${rootRoute}/`) {
+        return;
+      }
+
+      const visibleAgents = sessionAgents
+        ? Array.from(sessionAgents.values()).filter(
+            (agent) => !agent.archivedAt
+          )
+        : [];
+      visibleAgents.sort(
+        (left, right) => right.lastActivityAt.getTime() - left.lastActivityAt.getTime()
+      );
+
+      const primaryAgent = visibleAgents[0];
+      if (primaryAgent?.cwd?.trim()) {
+        router.replace(
+          buildHostWorkspaceAgentRoute(
+            serverId,
+            primaryAgent.cwd.trim(),
+            primaryAgent.id
+          ) as any
+        );
+        return;
+      }
+
+      const preferredWorkingDir =
+        preferences.serverId === serverId ? preferences.workingDir?.trim() : "";
+      const workspaceId = preferredWorkingDir || ".";
+      router.replace(buildHostWorkspaceRoute(serverId, workspaceId) as any);
+    }, HOST_ROOT_REDIRECT_DELAY_MS);
+
+    return () => clearTimeout(timer);
+  }, [
+    pathname,
+    preferences.serverId,
+    preferences.workingDir,
+    preferencesLoading,
+    router,
+    serverId,
+    sessionAgents,
+  ]);
+
+  return null;
+}

packages/app/src/app/h/[serverId]/new-agent.tsx

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

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/h/[serverId]/workspace/[workspaceId]/_layout.tsx

@@ -0,0 +1,25 @@
+import { useGlobalSearchParams, usePathname } from 'expo-router'
+import { WorkspaceScreen } from '@/screens/workspace/workspace-screen'
+import {
+  parseHostWorkspaceRouteFromPathname,
+  parseWorkspaceOpenIntent,
+} from '@/utils/host-routes'
+
+export default function HostWorkspaceLayout() {
+  const expoPathname = usePathname()
+  const params = useGlobalSearchParams<{ open?: string | string[] }>()
+  const activeRoute = parseHostWorkspaceRouteFromPathname(expoPathname)
+  const serverId = activeRoute?.serverId ?? ''
+  const workspaceId = activeRoute?.workspaceId ?? ''
+  const openValue = Array.isArray(params.open) ? params.open[0] : params.open
+  const openIntent = parseWorkspaceOpenIntent(openValue)
+
+  return (
+    <WorkspaceScreen
+      key={`${serverId}:${workspaceId}`}
+      serverId={serverId}
+      workspaceId={workspaceId}
+      openIntent={openIntent}
+    />
+  )
+}

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

@@ -0,0 +1,3 @@
+export default function HostWorkspaceIndexRoute() {
+  return null;
+}

packages/app/src/app/index.tsx

@@ -1,5 +1,75 @@
+import { useEffect, useMemo } from "react";
+import { ActivityIndicator, View } from "react-native";
+import { useLocalSearchParams, usePathname, 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 { buildHostRootRoute } from "@/utils/host-routes";
 
 export default function Index() {
-  return <DraftAgentScreen />;
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useLocalSearchParams<{ serverId?: string }>();
+  const { theme } = useUnistyles();
+  const { daemons, isLoading: registryLoading } = useDaemonRegistry();
+  const { preferences, isLoading: preferencesLoading } = useFormPreferences();
+  const requestedServerId = useMemo(() => {
+    return typeof params.serverId === "string" ? params.serverId.trim() : "";
+  }, [params.serverId]);
+
+  const targetServerId = useMemo(() => {
+    if (daemons.length === 0) {
+      return null;
+    }
+    if (requestedServerId) {
+      const requested = daemons.find(
+        (daemon) => daemon.serverId === requestedServerId
+      );
+      if (requested) {
+        return requested.serverId;
+      }
+    }
+    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, requestedServerId]);
+
+  useEffect(() => {
+    if (registryLoading || preferencesLoading) {
+      return;
+    }
+    if (!targetServerId) {
+      return;
+    }
+    if (pathname !== "/" && pathname !== "") {
+      return;
+    }
+    router.replace(buildHostRootRoute(targetServerId) as any);
+  }, [pathname, 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 {
+  buildHostRootRoute,
+  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(buildHostRootRoute(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 } = require(
+        "@/desktop/attachments/desktop-attachment-store"
+      );
+      return createDesktopAttachmentStore();
+    }
+
+    const { createIndexedDbAttachmentStore } = require(
+      "@/attachments/web/indexeddb-attachment-store"
+    );
+    return createIndexedDbAttachmentStore();
+  }
+
+  const { createNativeFileAttachmentStore } = require(
+    "@/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
@@ -324,6 +324,7 @@ interface ComboSelectProps {
   onSelect: (id: string) => void;
   icon?: ReactElement;
   showLabel?: boolean;
+  testID?: string;
 }
 
 export function ComboSelect({
@@ -338,6 +339,7 @@ export function ComboSelect({
   onSelect,
   icon,
   showLabel = true,
+  testID,
 }: ComboSelectProps): ReactElement {
   const [isOpen, setIsOpen] = useState(false);
   const anchorRef = useRef<View>(null);
@@ -361,6 +363,7 @@ export function ComboSelect({
         controlRef={anchorRef}
         icon={icon}
         showLabel={showLabel}
+        testID={testID}
       />
       <Combobox
         options={options}
@@ -477,7 +480,7 @@ export function FormSelectTrigger({
           </Text>
         )}
       </View>
-      <ChevronDown size={16} color={defaultTheme.colors.foregroundMuted} />
+      <ChevronDown size={defaultTheme.iconSize.md} color={defaultTheme.colors.foregroundMuted} />
     </Pressable>
   );
 }
@@ -571,8 +574,9 @@ export function AgentConfigRow({
           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}
+          testID="draft-provider-select"
         />
       </View>
       <View style={styles.agentConfigColumn}>
@@ -585,8 +589,9 @@ 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}
+          testID="draft-model-select"
         />
       </View>
       <View style={styles.agentConfigColumn}>
@@ -598,8 +603,9 @@ 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}
+          testID="draft-mode-select"
         />
       </View>
       {thinkingSelectOptions.length > 0 ? (
@@ -612,7 +618,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>
@@ -862,16 +868,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}
@@ -883,11 +887,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}
@@ -1119,16 +1124,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-input-area.status-controls.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import { resolveStatusControlMode } from './agent-input-area.status-controls'
+
+describe('resolveStatusControlMode', () => {
+  it('uses ready mode when no controlled status controls are provided', () => {
+    expect(resolveStatusControlMode(undefined)).toBe('ready')
+  })
+
+  it('uses draft mode when controlled status controls are provided', () => {
+    expect(
+      resolveStatusControlMode({
+        providerDefinitions: [],
+        selectedProvider: 'codex',
+        onSelectProvider: () => undefined,
+        modeOptions: [],
+        selectedMode: '',
+        onSelectMode: () => undefined,
+        models: [],
+        selectedModel: '',
+        onSelectModel: () => undefined,
+        isModelLoading: false,
+        thinkingOptions: [],
+        selectedThinkingOptionId: '',
+        onSelectThinkingOption: () => undefined,
+      })
+    ).toBe('draft')
+  })
+})

packages/app/src/components/agent-input-area.status-controls.ts

@@ -0,0 +1,5 @@
+import type { DraftAgentStatusBarProps } from './agent-status-bar'
+
+export function resolveStatusControlMode(statusControls?: DraftAgentStatusBarProps) {
+  return statusControls ? 'draft' : 'ready'
+}

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

@@ -9,8 +9,8 @@ import {
   type SectionListRenderItem,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useCallback, useMemo, useRef, useState, type ReactElement } from "react";
-import { router, usePathname } from "expo-router";
+import { useCallback, useMemo, useState, type ReactElement } from "react";
+import { router, usePathname, type Href } from "expo-router";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useQueryClient } from "@tanstack/react-query";
 import { formatTimeAgo } from "@/utils/time";
@@ -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,9 @@ import {
   buildAgentNavigationKey,
   startNavigationTiming,
 } from "@/utils/navigation-timing";
+import {
+  buildHostWorkspaceAgentRoute,
+} from "@/utils/host-routes";
 
 interface AgentListProps {
   agents: AggregatedAgent[];
@@ -73,6 +80,73 @@ function deriveDateSectionLabel(lastActivityAt: Date): string {
   return "Older";
 }
 
+interface AgentListRowProps {
+  agent: AggregatedAgent;
+  selectedAgentId?: string;
+  showCheckoutInfo: boolean;
+  onPress: (agent: AggregatedAgent) => 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 archivedLabel = agent.archivedAt ? "Archived" : null;
+  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)}
+      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}` : ""}
+            {archivedLabel ? ` · ${archivedLabel}` : ""} · {timeAgo}
+          </Text>
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
 export function AgentList({
   agents,
   showCheckoutInfo = true,
@@ -96,17 +170,13 @@ export function AgentList({
   const isActionDaemonUnavailable = Boolean(actionAgent?.serverId && !actionClient);
 
   const handleAgentPress = useCallback(
-    (serverId: string, agentId: string) => {
+    (agent: AggregatedAgent) => {
       if (isActionSheetVisible) {
         return;
       }
 
-      // Clear attention flag when opening agent
-      const session = useSessionStore.getState().sessions[serverId];
-      if (session?.client) {
-        session.client.clearAgentAttention(agentId);
-      }
-
+      const serverId = agent.serverId;
+      const agentId = agent.id;
       const navigationKey = buildAgentNavigationKey(serverId, agentId);
       startNavigationTiming(navigationKey, {
         from: "home",
@@ -114,12 +184,17 @@ export function AgentList({
         params: { serverId, agentId },
       });
 
-      const shouldReplace = pathname.startsWith("/agent/");
+      const shouldReplace = pathname.startsWith("/h/");
       const navigate = shouldReplace ? router.replace : router.push;
 
       onAgentSelect?.();
 
-      navigate(`/agent/${serverId}/${agentId}` as any);
+      const route: Href = buildHostWorkspaceAgentRoute(
+        serverId,
+        agent.cwd,
+        agentId
+      ) as Href;
+      navigate(route);
     },
     [isActionSheetVisible, pathname, onAgentSelect]
   );
@@ -156,9 +231,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 +260,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 +282,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.test.ts

@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest'
+import { normalizeModelId, resolveAgentModelSelection } from './agent-status-bar.utils'
+
+describe('normalizeModelId', () => {
+  it('treats empty and default values as unset', () => {
+    expect(normalizeModelId('')).toBeNull()
+    expect(normalizeModelId(' default ')).toBeNull()
+    expect(normalizeModelId(undefined)).toBeNull()
+  })
+
+  it('returns trimmed model ids', () => {
+    expect(normalizeModelId(' gpt-5.1-codex ')).toBe('gpt-5.1-codex')
+  })
+})
+
+describe('resolveAgentModelSelection', () => {
+  it('prefers runtime model over configured model', () => {
+    const selection = resolveAgentModelSelection({
+      models: [
+        {
+          id: 'a',
+          provider: 'codex',
+          label: 'Model A',
+          thinkingOptions: [{ id: 'low', label: 'Low' }],
+          defaultThinkingOptionId: 'low',
+        },
+      ],
+      runtimeModelId: 'a',
+      configuredModelId: 'b',
+      explicitThinkingOptionId: null,
+    })
+
+    expect(selection.activeModelId).toBe('a')
+    expect(selection.displayModel).toBe('Model A')
+    expect(selection.selectedThinkingId).toBe('low')
+  })
+
+  it('uses explicit thinking option when provided', () => {
+    const selection = resolveAgentModelSelection({
+      models: [
+        {
+          id: 'a',
+          provider: 'codex',
+          label: 'Model A',
+          thinkingOptions: [
+            { id: 'low', label: 'Low' },
+            { id: 'high', label: 'High' },
+          ],
+          defaultThinkingOptionId: 'low',
+        },
+      ],
+      runtimeModelId: 'a',
+      configuredModelId: null,
+      explicitThinkingOptionId: 'high',
+    })
+
+    expect(selection.selectedThinkingId).toBe('high')
+    expect(selection.displayThinking).toBe('High')
+  })
+})

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

@@ -1,163 +1,215 @@
-import { View, Text, Platform, Pressable } from "react-native";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { Brain, ChevronDown, SlidersHorizontal } from "lucide-react-native";
-import { useSessionStore } from "@/stores/session-store";
+import { useMemo, useState } from 'react'
+import { View, Text, Platform, Pressable } from 'react-native'
+import { StyleSheet, useUnistyles } from 'react-native-unistyles'
+import { Brain, ChevronDown, SlidersHorizontal } from 'lucide-react-native'
+import { useQuery } from '@tanstack/react-query'
+import { useSessionStore } from '@/stores/session-store'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { AdaptiveModalSheet } from "@/components/adaptive-modal-sheet";
-import { useMemo, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+} from '@/components/ui/dropdown-menu'
+import { AdaptiveModalSheet } from '@/components/adaptive-modal-sheet'
+import type {
+  AgentMode,
+  AgentModelDefinition,
+  AgentProvider,
+} from '@server/server/agent/agent-sdk-types'
+import type { AgentProviderDefinition } from '@server/server/agent/provider-manifest'
+import { normalizeModelId, resolveAgentModelSelection } from '@/components/agent-status-bar.utils'
+
+type StatusOption = {
+  id: string
+  label: string
+}
+
+type ControlledAgentStatusBarProps = {
+  providerOptions?: StatusOption[]
+  selectedProviderId?: string
+  onSelectProvider?: (providerId: string) => void
+  modeOptions?: StatusOption[]
+  selectedModeId?: string
+  onSelectMode?: (modeId: string) => void
+  modelOptions?: StatusOption[]
+  selectedModelId?: string
+  onSelectModel?: (modelId: string) => void
+  thinkingOptions?: StatusOption[]
+  selectedThinkingOptionId?: string
+  onSelectThinkingOption?: (thinkingOptionId: string) => void
+  disabled?: boolean
+  isModelLoading?: boolean
+}
+
+export interface DraftAgentStatusBarProps {
+  providerDefinitions: AgentProviderDefinition[]
+  selectedProvider: AgentProvider
+  onSelectProvider: (provider: AgentProvider) => void
+  modeOptions: AgentMode[]
+  selectedMode: string
+  onSelectMode: (modeId: string) => void
+  models: AgentModelDefinition[]
+  selectedModel: string
+  onSelectModel: (modelId: string) => void
+  isModelLoading: boolean
+  thinkingOptions: NonNullable<AgentModelDefinition['thinkingOptions']>
+  selectedThinkingOptionId: string
+  onSelectThinkingOption: (thinkingOptionId: string) => void
+  disabled?: boolean
+}
 
 interface AgentStatusBarProps {
-  agentId: string;
-  serverId: string;
+  agentId: string
+  serverId: string
 }
 
-function normalizeModelId(modelId: string | null | undefined): string | null {
-  const normalized = typeof modelId === "string" ? modelId.trim() : "";
-  if (!normalized || normalized.toLowerCase() === "default") {
-    return null;
+function findOptionLabel(options: StatusOption[] | undefined, selectedId: string | undefined, fallback: string) {
+  if (!options || options.length === 0) {
+    return fallback
   }
-  return normalized;
+  const selected = options.find((option) => option.id === selectedId)
+  return selected?.label ?? fallback
 }
 
-export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
-  const { theme } = useUnistyles();
-  const IS_WEB = Platform.OS === "web";
-  const [prefsOpen, setPrefsOpen] = useState(false);
-  const dropdownMaxWidth = IS_WEB ? 360 : undefined;
+function ControlledStatusBar({
+  providerOptions,
+  selectedProviderId,
+  onSelectProvider,
+  modeOptions,
+  selectedModeId,
+  onSelectMode,
+  modelOptions,
+  selectedModelId,
+  onSelectModel,
+  thinkingOptions,
+  selectedThinkingOptionId,
+  onSelectThinkingOption,
+  disabled = false,
+  isModelLoading = false,
+}: ControlledAgentStatusBarProps) {
+  const { theme } = useUnistyles()
+  const isWeb = Platform.OS === 'web'
+  const [prefsOpen, setPrefsOpen] = useState(false)
+  const dropdownMaxWidth = isWeb ? 360 : undefined
 
-  // Select only the specific agent (not all agents)
-  const agent = useSessionStore((state) =>
-    state.sessions[serverId]?.agents?.get(agentId)
-  );
+  const canSelectProvider = Boolean(onSelectProvider && providerOptions && providerOptions.length > 0)
+  const canSelectMode = Boolean(onSelectMode && modeOptions && modeOptions.length > 0)
+  const canSelectModel = Boolean(onSelectModel)
+  const canSelectThinking = Boolean(
+    onSelectThinkingOption && thinkingOptions && thinkingOptions.length > 0
+  )
 
-  const client = useSessionStore((state) => state.sessions[serverId]?.client ?? null);
+  const displayProvider = findOptionLabel(providerOptions, selectedProviderId, 'Provider')
+  const displayMode = findOptionLabel(modeOptions, selectedModeId, 'Default')
+  const displayModel =
+    isModelLoading && (!modelOptions || modelOptions.length === 0)
+      ? 'Loading models...'
+      : findOptionLabel(modelOptions, selectedModelId, 'Auto')
+  const displayThinking = findOptionLabel(thinkingOptions, selectedThinkingOptionId, 'auto')
 
-  if (!agent) {
-    return null;
+  const hasAnyControl =
+    Boolean(providerOptions?.length) ||
+    Boolean(modeOptions?.length) ||
+    canSelectModel ||
+    Boolean(thinkingOptions?.length)
+
+  if (!hasAnyControl) {
+    return null
   }
 
-  const canFetchModels = Boolean(client) && Boolean(agent.provider) && (IS_WEB || prefsOpen);
-  const modelsQuery = useQuery({
-    queryKey: ["providerModels", serverId, agent.provider, agent.cwd],
-    enabled: canFetchModels,
-    staleTime: 5 * 60 * 1000,
-    queryFn: async () => {
-      if (!client) {
-        throw new Error("Daemon client unavailable");
-      }
-      const payload = await client.listProviderModels(agent.provider, { cwd: agent.cwd });
-      if (payload.error) {
-        throw new Error(payload.error);
-      }
-      return payload.models ?? [];
-    },
-  });
-  const models = modelsQuery.data ?? null;
-
-  function handleModeChange(modeId: string) {
-    if (!client) {
-      return;
-    }
-    void client.setAgentMode(agentId, modeId).catch((error) => {
-      console.warn("[AgentStatusBar] setAgentMode failed", error);
-    });
-  }
-
-  const normalizedRuntimeModelId = normalizeModelId(agent.runtimeInfo?.model);
-  const normalizedConfiguredModelId = normalizeModelId(agent.model);
-  const preferredModelId = normalizedRuntimeModelId ?? normalizedConfiguredModelId;
-  const selectedModel = useMemo(() => {
-    if (!models || !preferredModelId) return null;
-    return models.find((m) => m.id === preferredModelId) ?? null;
-  }, [models, preferredModelId]);
-
-  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
-      : null;
-  const selectedThinkingId =
-    explicitThinkingId ?? selectedModel?.defaultThinkingOptionId ?? null;
-  const selectedThinking = thinkingOptions?.find((o) => o.id === selectedThinkingId) ?? null;
-  const displayThinking =
-    selectedThinking?.label ??
-    (selectedThinkingId === "default" ? "Model default" : selectedThinkingId ?? "auto");
-
-  const displayMode =
-    agent.availableModes?.find((m) => m.id === agent.currentModeId)?.label ||
-    agent.currentModeId ||
-    "default";
+  const modelDisabled = disabled || isModelLoading || !modelOptions || modelOptions.length === 0
 
   return (
-    <View style={[styles.container, IS_WEB && { marginBottom: -theme.spacing[1] }]}>
-      {/* Agent Mode Badge (desktop only — on mobile, mode is in the preferences sheet) */}
-      {IS_WEB && agent.availableModes && agent.availableModes.length > 0 && (
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            style={({ pressed, hovered, open }) => [
-              styles.modeBadge,
-              hovered && styles.modeBadgeHovered,
-              (pressed || open) && styles.modeBadgePressed,
-            ]}
-            accessibilityRole="button"
-            accessibilityLabel="Select agent mode"
-            testID="agent-mode-selector"
-          >
-            <Text style={styles.modeBadgeText}>
-              {agent.availableModes?.find((m) => m.id === agent.currentModeId)
-                ?.label ||
-                agent.currentModeId ||
-                "default"}
-            </Text>
-            <ChevronDown size={14} color={theme.colors.foregroundMuted} />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            side="top"
-            align="start"
-            maxWidth={dropdownMaxWidth}
-            testID="agent-mode-menu"
-          >
-            {agent.availableModes.map((mode) => {
-              const isActive = mode.id === agent.currentModeId;
-              return (
-                <DropdownMenuItem
-                  key={mode.id}
-                  selected={isActive}
-                  onSelect={() => handleModeChange(mode.id)}
-                >
-                  {mode.label}
-                </DropdownMenuItem>
-              );
-            })}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
-
-      {/* Desktop: inline dropdowns for model/thinking */}
-      {IS_WEB && (
+    <View style={[styles.container, isWeb && { marginBottom: -theme.spacing[1] }]}>
+      {isWeb ? (
         <>
+          {providerOptions && providerOptions.length > 0 ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                disabled={disabled || !canSelectProvider}
+                style={({ pressed, hovered, open }) => [
+                  styles.modeBadge,
+                  hovered && styles.modeBadgeHovered,
+                  (pressed || open) && styles.modeBadgePressed,
+                  (disabled || !canSelectProvider) && styles.disabledBadge,
+                ]}
+                accessibilityRole="button"
+                accessibilityLabel="Select agent provider"
+                testID="agent-provider-selector"
+              >
+                <Text style={styles.modeBadgeText}>{displayProvider}</Text>
+                <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                side="top"
+                align="start"
+                maxWidth={dropdownMaxWidth}
+                testID="agent-provider-menu"
+              >
+                {providerOptions.map((provider) => (
+                  <DropdownMenuItem
+                    key={provider.id}
+                    selected={provider.id === selectedProviderId}
+                    onSelect={() => onSelectProvider?.(provider.id)}
+                  >
+                    {provider.label}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : null}
+
+          {modeOptions && modeOptions.length > 0 ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                disabled={disabled || !canSelectMode}
+                style={({ pressed, hovered, open }) => [
+                  styles.modeBadge,
+                  hovered && styles.modeBadgeHovered,
+                  (pressed || open) && styles.modeBadgePressed,
+                  (disabled || !canSelectMode) && styles.disabledBadge,
+                ]}
+                accessibilityRole="button"
+                accessibilityLabel="Select agent mode"
+                testID="agent-mode-selector"
+              >
+                <Text style={styles.modeBadgeText}>{displayMode}</Text>
+                <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                side="top"
+                align="start"
+                maxWidth={dropdownMaxWidth}
+                testID="agent-mode-menu"
+              >
+                {modeOptions.map((mode) => (
+                  <DropdownMenuItem
+                    key={mode.id}
+                    selected={mode.id === selectedModeId}
+                    onSelect={() => onSelectMode?.(mode.id)}
+                  >
+                    {mode.label}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : null}
+
           <DropdownMenu>
             <DropdownMenuTrigger
+              disabled={modelDisabled}
               style={({ pressed, hovered, open }) => [
                 styles.modeBadge,
                 hovered && styles.modeBadgeHovered,
                 (pressed || open) && styles.modeBadgePressed,
+                modelDisabled && styles.disabledBadge,
               ]}
               accessibilityRole="button"
               accessibilityLabel="Select agent model"
               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"
@@ -165,43 +217,39 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
               maxWidth={dropdownMaxWidth}
               testID="agent-model-menu"
             >
-              {models?.map((model) => {
-                const isActive = model.id === activeModelId;
-                return (
-                  <DropdownMenuItem
-                    key={model.id}
-                    selected={isActive}
-                    onSelect={() => {
-                      if (!client) {
-                        return;
-                      }
-                      void client.setAgentModel(agentId, model.id).catch((error) => {
-                        console.warn("[AgentStatusBar] setAgentModel failed", error);
-                      });
-                    }}
-                  >
-                    {model.label}
-                  </DropdownMenuItem>
-                );
-              })}
+              {(modelOptions ?? []).map((model) => (
+                <DropdownMenuItem
+                  key={model.id}
+                  selected={model.id === selectedModelId}
+                  onSelect={() => onSelectModel?.(model.id)}
+                >
+                  {model.label}
+                </DropdownMenuItem>
+              ))}
             </DropdownMenuContent>
           </DropdownMenu>
 
-          {thinkingOptions && thinkingOptions.length > 1 && (
+          {thinkingOptions && thinkingOptions.length > 0 ? (
             <DropdownMenu>
               <DropdownMenuTrigger
+                disabled={disabled || !canSelectThinking}
                 style={({ pressed, hovered, open }) => [
                   styles.modeBadge,
                   hovered && styles.modeBadgeHovered,
                   (pressed || open) && styles.modeBadgePressed,
+                  (disabled || !canSelectThinking) && styles.disabledBadge,
                 ]}
                 accessibilityRole="button"
                 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"
@@ -209,35 +257,20 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
                 maxWidth={dropdownMaxWidth}
                 testID="agent-thinking-menu"
               >
-                {thinkingOptions.map((opt) => {
-                  const isActive = opt.id === selectedThinkingId;
-                  return (
-                    <DropdownMenuItem
-                      key={opt.id}
-                      selected={isActive}
-                      onSelect={() => {
-                        if (!client) {
-                          return;
-                        }
-                        void client
-                          .setAgentThinkingOption(agentId, opt.id)
-                          .catch((error) => {
-                            console.warn("[AgentStatusBar] setAgentThinkingOption failed", error);
-                          });
-                      }}
-                    >
-                      {opt.label}
-                    </DropdownMenuItem>
-                  );
-                })}
+                {thinkingOptions.map((thinking) => (
+                  <DropdownMenuItem
+                    key={thinking.id}
+                    selected={thinking.id === selectedThinkingOptionId}
+                    onSelect={() => onSelectThinkingOption?.(thinking.id)}
+                  >
+                    {thinking.label}
+                  </DropdownMenuItem>
+                ))}
               </DropdownMenuContent>
             </DropdownMenu>
-          )}
+          ) : null}
         </>
-      )}
-
-      {/* Mobile: preferences button opens a bottom sheet */}
-      {!IS_WEB && (
+      ) : (
         <>
           <Pressable
             onPress={() => setPrefsOpen(true)}
@@ -249,7 +282,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
@@ -258,140 +291,321 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
             onClose={() => setPrefsOpen(false)}
             testID="agent-preferences-sheet"
           >
-            {agent.availableModes && agent.availableModes.length > 0 && (
+            {providerOptions && providerOptions.length > 0 ? (
               <View style={styles.sheetSection}>
                 <DropdownMenu>
                   <DropdownMenuTrigger
+                    disabled={disabled || !canSelectProvider}
                     style={({ pressed }) => [
                       styles.sheetSelect,
                       pressed && styles.sheetSelectPressed,
+                      (disabled || !canSelectProvider) && styles.disabledSheetSelect,
+                    ]}
+                    accessibilityRole="button"
+                    accessibilityLabel="Select agent provider"
+                    testID="agent-preferences-provider"
+                  >
+                    <Text style={styles.sheetSelectText}>{displayProvider}</Text>
+                    <ChevronDown size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent side="top" align="start">
+                    {providerOptions.map((provider) => (
+                      <DropdownMenuItem
+                        key={provider.id}
+                        selected={provider.id === selectedProviderId}
+                        onSelect={() => onSelectProvider?.(provider.id)}
+                      >
+                        {provider.label}
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </View>
+            ) : null}
+
+            {modeOptions && modeOptions.length > 0 ? (
+              <View style={styles.sheetSection}>
+                <DropdownMenu>
+                  <DropdownMenuTrigger
+                    disabled={disabled || !canSelectMode}
+                    style={({ pressed }) => [
+                      styles.sheetSelect,
+                      pressed && styles.sheetSelectPressed,
+                      (disabled || !canSelectMode) && styles.disabledSheetSelect,
                     ]}
                     accessibilityRole="button"
                     accessibilityLabel="Select agent mode"
                     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) => {
-                      const isActive = mode.id === agent.currentModeId;
-                      return (
-                        <DropdownMenuItem
-                          key={mode.id}
-                          selected={isActive}
-                          onSelect={() => handleModeChange(mode.id)}
-                        >
-                          {mode.label}
-                        </DropdownMenuItem>
-                      );
-                    })}
+                    {modeOptions.map((mode) => (
+                      <DropdownMenuItem
+                        key={mode.id}
+                        selected={mode.id === selectedModeId}
+                        onSelect={() => onSelectMode?.(mode.id)}
+                      >
+                        {mode.label}
+                      </DropdownMenuItem>
+                    ))}
                   </DropdownMenuContent>
                 </DropdownMenu>
               </View>
-            )}
+            ) : null}
 
             <View style={styles.sheetSection}>
               <DropdownMenu>
                 <DropdownMenuTrigger
+                  disabled={modelDisabled}
                   style={({ pressed }) => [
                     styles.sheetSelect,
                     pressed && styles.sheetSelectPressed,
+                    modelDisabled && styles.disabledSheetSelect,
                   ]}
                   accessibilityRole="button"
                   accessibilityLabel="Select agent model"
                   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 === activeModelId;
-                    return (
-                      <DropdownMenuItem
-                        key={model.id}
-                        selected={isActive}
-                        onSelect={() => {
-                          if (!client) {
-                            return;
-                          }
-                          void client.setAgentModel(agentId, model.id).catch((error) => {
-                            console.warn("[AgentStatusBar] setAgentModel failed", error);
-                          });
-                        }}
-                      >
-                        {model.label}
-                      </DropdownMenuItem>
-                    );
-                  })}
+                  {(modelOptions ?? []).map((model) => (
+                    <DropdownMenuItem
+                      key={model.id}
+                      selected={model.id === selectedModelId}
+                      onSelect={() => onSelectModel?.(model.id)}
+                    >
+                      {model.label}
+                    </DropdownMenuItem>
+                  ))}
                 </DropdownMenuContent>
               </DropdownMenu>
             </View>
 
-            {thinkingOptions && thinkingOptions.length > 1 && (
+            {thinkingOptions && thinkingOptions.length > 0 ? (
               <View style={styles.sheetSection}>
                 <DropdownMenu>
                   <DropdownMenuTrigger
+                    disabled={disabled || !canSelectThinking}
                     style={({ pressed }) => [
                       styles.sheetSelect,
                       pressed && styles.sheetSelectPressed,
+                      (disabled || !canSelectThinking) && styles.disabledSheetSelect,
                     ]}
                     accessibilityRole="button"
                     accessibilityLabel="Select thinking option"
                     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) => {
-                      const isActive = opt.id === selectedThinkingId;
-                      return (
-                        <DropdownMenuItem
-                          key={opt.id}
-                          selected={isActive}
-                          onSelect={() => {
-                            if (!client) {
-                              return;
-                            }
-                            void client
-                              .setAgentThinkingOption(agentId, opt.id)
-                              .catch((error) => {
-                                console.warn("[AgentStatusBar] setAgentThinkingOption failed", error);
-                              });
-                          }}
-                        >
-                          {opt.label}
-                        </DropdownMenuItem>
-                      );
-                    })}
+                    {thinkingOptions.map((thinking) => (
+                      <DropdownMenuItem
+                        key={thinking.id}
+                        selected={thinking.id === selectedThinkingOptionId}
+                        onSelect={() => onSelectThinkingOption?.(thinking.id)}
+                      >
+                        {thinking.label}
+                      </DropdownMenuItem>
+                    ))}
                   </DropdownMenuContent>
                 </DropdownMenu>
               </View>
-            )}
-
+            ) : null}
           </AdaptiveModalSheet>
         </>
       )}
     </View>
-  );
+  )
+}
+
+export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
+  const agent = useSessionStore((state) => state.sessions[serverId]?.agents?.get(agentId))
+  const client = useSessionStore((state) => state.sessions[serverId]?.client ?? null)
+
+  const modelsQuery = useQuery({
+    queryKey: [
+      'providerModels',
+      serverId,
+      agent?.provider ?? '__missing_provider__',
+      agent?.cwd ?? '__missing_cwd__',
+    ],
+    enabled: Boolean(client && agent?.provider),
+    staleTime: 5 * 60 * 1000,
+    queryFn: async () => {
+      if (!client || !agent) {
+        throw new Error('Daemon client unavailable')
+      }
+      const payload = await client.listProviderModels(agent.provider, { cwd: agent.cwd })
+      if (payload.error) {
+        throw new Error(payload.error)
+      }
+      return payload.models ?? []
+    },
+  })
+
+  const models = modelsQuery.data ?? null
+
+  const displayMode =
+    agent?.availableModes?.find((mode) => mode.id === agent.currentModeId)?.label ||
+    agent?.currentModeId ||
+    'default'
+
+  const modelSelection = resolveAgentModelSelection({
+    models,
+    runtimeModelId: agent?.runtimeInfo?.model,
+    configuredModelId: agent?.model,
+    explicitThinkingOptionId: agent?.thinkingOptionId,
+  })
+
+  const modeOptions = useMemo<StatusOption[]>(() => {
+    return (agent?.availableModes ?? []).map((mode) => ({
+      id: mode.id,
+      label: mode.label,
+    }))
+  }, [agent?.availableModes])
+
+  const modelOptions = useMemo<StatusOption[]>(() => {
+    return (models ?? []).map((model) => ({ id: model.id, label: model.label }))
+  }, [models])
+
+  const thinkingOptions = useMemo<StatusOption[]>(() => {
+    return (modelSelection.thinkingOptions ?? []).map((option) => ({
+      id: option.id,
+      label: option.label,
+    }))
+  }, [modelSelection.thinkingOptions])
+
+  if (!agent) {
+    return null
+  }
+
+  return (
+    <ControlledStatusBar
+      modeOptions={
+        modeOptions.length > 0
+          ? modeOptions
+          : [{ id: agent.currentModeId ?? '', label: displayMode }]
+      }
+      selectedModeId={agent.currentModeId ?? undefined}
+      onSelectMode={(modeId) => {
+        if (!client) {
+          return
+        }
+        void client.setAgentMode(agentId, modeId).catch((error) => {
+          console.warn('[AgentStatusBar] setAgentMode failed', error)
+        })
+      }}
+      modelOptions={modelOptions}
+      selectedModelId={modelSelection.activeModelId ?? undefined}
+      onSelectModel={(modelId) => {
+        if (!client) {
+          return
+        }
+        void client.setAgentModel(agentId, modelId).catch((error) => {
+          console.warn('[AgentStatusBar] setAgentModel failed', error)
+        })
+      }}
+      thinkingOptions={thinkingOptions.length > 1 ? thinkingOptions : undefined}
+      selectedThinkingOptionId={modelSelection.selectedThinkingId ?? undefined}
+      onSelectThinkingOption={(thinkingOptionId) => {
+        if (!client) {
+          return
+        }
+        void client.setAgentThinkingOption(agentId, thinkingOptionId).catch((error) => {
+          console.warn('[AgentStatusBar] setAgentThinkingOption failed', error)
+        })
+      }}
+      isModelLoading={modelsQuery.isPending || modelsQuery.isFetching}
+      disabled={!client}
+    />
+  )
+}
+
+export function DraftAgentStatusBar({
+  providerDefinitions,
+  selectedProvider,
+  onSelectProvider,
+  modeOptions,
+  selectedMode,
+  onSelectMode,
+  models,
+  selectedModel,
+  onSelectModel,
+  isModelLoading,
+  thinkingOptions,
+  selectedThinkingOptionId,
+  onSelectThinkingOption,
+  disabled = false,
+}: DraftAgentStatusBarProps) {
+  const providerOptions = useMemo<StatusOption[]>(() => {
+    return providerDefinitions.map((definition) => ({
+      id: definition.id,
+      label: definition.label,
+    }))
+  }, [providerDefinitions])
+
+  const mappedModeOptions = useMemo<StatusOption[]>(() => {
+    if (modeOptions.length === 0) {
+      return [{ id: '', label: 'Default' }]
+    }
+    return modeOptions.map((mode) => ({ id: mode.id, label: mode.label }))
+  }, [modeOptions])
+
+  const modelOptions = useMemo<StatusOption[]>(() => {
+    const options: StatusOption[] = [{ id: '', label: 'Auto' }]
+    for (const model of models) {
+      options.push({ id: model.id, label: model.label })
+    }
+    return options
+  }, [models])
+
+  const mappedThinkingOptions = useMemo<StatusOption[]>(() => {
+    return thinkingOptions.map((option) => ({ id: option.id, label: option.label }))
+  }, [thinkingOptions])
+
+  const effectiveSelectedMode = selectedMode || mappedModeOptions[0]?.id || ''
+  const effectiveSelectedThinkingOption =
+    selectedThinkingOptionId || mappedThinkingOptions[0]?.id || undefined
+
+  return (
+    <ControlledStatusBar
+      providerOptions={providerOptions}
+      selectedProviderId={selectedProvider}
+      onSelectProvider={(providerId) => onSelectProvider(providerId as AgentProvider)}
+      modeOptions={mappedModeOptions}
+      selectedModeId={effectiveSelectedMode}
+      onSelectMode={onSelectMode}
+      modelOptions={modelOptions}
+      selectedModelId={selectedModel}
+      onSelectModel={onSelectModel}
+      isModelLoading={isModelLoading}
+      thinkingOptions={mappedThinkingOptions.length > 0 ? mappedThinkingOptions : undefined}
+      selectedThinkingOptionId={effectiveSelectedThinkingOption}
+      onSelectThinkingOption={onSelectThinkingOption}
+      disabled={disabled}
+    />
+  )
 }
 
 const styles = StyleSheet.create((theme) => ({
   container: {
-    flexDirection: "row",
-    alignItems: "center",
+    flexDirection: 'row',
+    alignItems: 'center',
     gap: theme.spacing[1],
   },
   modeBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: "transparent",
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
     gap: theme.spacing[1],
     paddingHorizontal: theme.spacing[2],
     paddingVertical: theme.spacing[1],
-    borderRadius: theme.borderRadius["2xl"],
+    borderRadius: theme.borderRadius['2xl'],
   },
   modeBadgeHovered: {
     backgroundColor: theme.colors.surface2,
@@ -399,6 +613,9 @@ const styles = StyleSheet.create((theme) => ({
   modeBadgePressed: {
     backgroundColor: theme.colors.surface0,
   },
+  disabledBadge: {
+    opacity: 0.5,
+  },
   modeBadgeText: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.sm,
@@ -408,8 +625,8 @@ const styles = StyleSheet.create((theme) => ({
     width: 34,
     height: 34,
     borderRadius: theme.borderRadius.full,
-    alignItems: "center",
-    justifyContent: "center",
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   prefsButtonPressed: {
     backgroundColor: theme.colors.surface0,
@@ -418,9 +635,9 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
   },
   sheetSelect: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
     gap: theme.spacing[3],
     paddingHorizontal: theme.spacing[4],
     paddingVertical: theme.spacing[3],
@@ -432,10 +649,13 @@ const styles = StyleSheet.create((theme) => ({
   sheetSelectPressed: {
     backgroundColor: theme.colors.surface2,
   },
+  disabledSheetSelect: {
+    opacity: 0.5,
+  },
   sheetSelectText: {
     flex: 1,
     color: theme.colors.foreground,
     fontSize: theme.fontSize.base,
     fontWeight: theme.fontWeight.semibold,
   },
-}));
+}))

packages/app/src/components/agent-status-bar.utils.ts

@@ -0,0 +1,45 @@
+import type { AgentModelDefinition } from '@server/server/agent/agent-sdk-types'
+
+export 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 resolveAgentModelSelection(input: {
+  models: AgentModelDefinition[] | null
+  runtimeModelId: string | null | undefined
+  configuredModelId: string | null | undefined
+  explicitThinkingOptionId: string | null | undefined
+}) {
+  const { models, runtimeModelId, configuredModelId, explicitThinkingOptionId } = input
+  const normalizedRuntimeModelId = normalizeModelId(runtimeModelId)
+  const normalizedConfiguredModelId = normalizeModelId(configuredModelId)
+  const preferredModelId = normalizedRuntimeModelId ?? normalizedConfiguredModelId
+  const selectedModel =
+    models && preferredModelId ? models.find((model) => model.id === preferredModelId) ?? null : null
+
+  const activeModelId = selectedModel?.id ?? preferredModelId ?? null
+  const displayModel = selectedModel?.label ?? preferredModelId ?? 'Auto'
+
+  const thinkingOptions = selectedModel?.thinkingOptions ?? null
+  const selectedThinkingId =
+    explicitThinkingOptionId && explicitThinkingOptionId !== 'default'
+      ? explicitThinkingOptionId
+      : selectedModel?.defaultThinkingOptionId ?? null
+  const selectedThinking = thinkingOptions?.find((option) => option.id === selectedThinkingId) ?? null
+  const displayThinking =
+    selectedThinking?.label ??
+    (selectedThinkingId === 'default' ? 'Model default' : selectedThinkingId ?? 'auto')
+
+  return {
+    selectedModel,
+    activeModelId,
+    displayModel,
+    thinkingOptions,
+    selectedThinkingId,
+    displayThinking,
+  }
+}

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

@@ -1,25 +1,41 @@
 import { View } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import {
+  AGENT_LIFECYCLE_STATUSES,
+  type AgentLifecycleStatus,
+} from "@server/shared/agent-lifecycle";
+import { deriveSidebarStateBucket } from "@/utils/sidebar-agent-state";
+import { getStatusDotColor } from "@/utils/status-dot-color";
 
 export function AgentStatusDot({
   status,
   requiresAttention,
+  attentionReason,
+  pendingPermissionCount,
   showInactive = false,
 }: {
   status: string | null | undefined;
   requiresAttention: boolean | null | undefined;
+  attentionReason?: "finished" | "error" | "permission" | null;
+  pendingPermissionCount?: number;
   showInactive?: boolean;
 }) {
   const { theme } = useUnistyles();
 
-  const isRunning = status === "running";
-  const color = isRunning
-    ? theme.colors.palette.blue[500]
-    : requiresAttention
-      ? theme.colors.success
-      : showInactive
-        ? theme.colors.border
-        : null;
+  if (!status) {
+    return null;
+  }
+  if (!isAgentLifecycleStatus(status)) {
+    return null;
+  }
+
+  const bucket = deriveSidebarStateBucket({
+    status,
+    requiresAttention: Boolean(requiresAttention),
+    attentionReason: attentionReason ?? null,
+    pendingPermissionCount: pendingPermissionCount ?? 0,
+  });
+  const color = getStatusDotColor({ theme, bucket, showDoneAsInactive: showInactive });
 
   if (!color) {
     return null;
@@ -28,6 +44,10 @@ export function AgentStatusDot({
   return <View style={[styles.dot, { backgroundColor: color }]} />;
 }
 
+function isAgentLifecycleStatus(value: string): value is AgentLifecycleStatus {
+  return AGENT_LIFECYCLE_STATUSES.some((status) => status === value);
+}
+
 const styles = StyleSheet.create((theme) => ({
   dot: {
     width: 8,

packages/app/src/components/agent-stream-render-strategy.test.ts

@@ -0,0 +1,287 @@
+import { describe, expect, it } from "vitest";
+import type { StreamItem } from "@/types/stream";
+import {
+  collectAssistantTurnContentForStreamRenderStrategy,
+  getBottomOffsetForStreamRenderStrategy,
+  getStreamEdgeSlotProps,
+  getStreamNeighborIndex,
+  getStreamNeighborItem,
+  isNearBottomForStreamRenderStrategy,
+  orderHeadForStreamRenderStrategy,
+  orderTailForStreamRenderStrategy,
+  resolveStreamRenderStrategy,
+} from "./agent-stream-render-strategy";
+
+function createTimestamp(seed: number): Date {
+  return new Date(`2026-01-01T00:00:0${seed}.000Z`);
+}
+
+function userMessage(id: string, text: string, seed: number): StreamItem {
+  return {
+    kind: "user_message",
+    id,
+    text,
+    timestamp: createTimestamp(seed),
+  };
+}
+
+function assistantMessage(id: string, text: string, seed: number): StreamItem {
+  return {
+    kind: "assistant_message",
+    id,
+    text,
+    timestamp: createTimestamp(seed),
+  };
+}
+
+describe("resolveStreamRenderStrategy", () => {
+  it("uses forward_stream on web", () => {
+    const strategy = resolveStreamRenderStrategy({
+      platform: "web",
+      isMobileBreakpoint: false,
+    });
+
+    expect(strategy.shouldUseVirtualizedList()).toBe(false);
+    expect(strategy.getFlatListInverted()).toBe(false);
+    expect(strategy.getOverlayScrollbarInverted()).toBe(false);
+    expect(strategy.shouldAnchorBottomOnContentSizeChange()).toBe(true);
+  });
+
+  it("uses inverted_stream on native", () => {
+    const strategy = resolveStreamRenderStrategy({
+      platform: "ios",
+      isMobileBreakpoint: false,
+    });
+
+    expect(strategy.shouldUseVirtualizedList()).toBe(true);
+    expect(strategy.getFlatListInverted()).toBe(true);
+    expect(strategy.getOverlayScrollbarInverted()).toBe(true);
+    expect(strategy.shouldAnchorBottomOnContentSizeChange()).toBe(false);
+  });
+});
+
+describe("stream ordering", () => {
+  const streamItems: StreamItem[] = [
+    userMessage("u1", "user-1", 1),
+    assistantMessage("a1", "assistant-1", 2),
+    assistantMessage("a2", "assistant-2", 3),
+  ];
+
+  it("keeps forward_stream order unchanged for tail and head", () => {
+    const strategy = resolveStreamRenderStrategy({
+      platform: "web",
+      isMobileBreakpoint: false,
+    });
+
+    const tail = orderTailForStreamRenderStrategy({ strategy, streamItems });
+    const head = orderHeadForStreamRenderStrategy({ strategy, streamHead: streamItems });
+
+    expect(tail.map((item) => item.id)).toEqual(["u1", "a1", "a2"]);
+    expect(head.map((item) => item.id)).toEqual(["u1", "a1", "a2"]);
+  });
+
+  it("reverses inverted_stream order for tail and head", () => {
+    const strategy = resolveStreamRenderStrategy({
+      platform: "android",
+      isMobileBreakpoint: false,
+    });
+
+    const tail = orderTailForStreamRenderStrategy({ strategy, streamItems });
+    const head = orderHeadForStreamRenderStrategy({ strategy, streamHead: streamItems });
+
+    expect(tail.map((item) => item.id)).toEqual(["a2", "a1", "u1"]);
+    expect(head.map((item) => item.id)).toEqual(["a2", "a1", "u1"]);
+  });
+});
+
+describe("neighbor and traversal semantics", () => {
+  it("maps above/below indices for forward and inverted streams", () => {
+    const forward = resolveStreamRenderStrategy({
+      platform: "web",
+      isMobileBreakpoint: false,
+    });
+    const inverted = resolveStreamRenderStrategy({
+      platform: "ios",
+      isMobileBreakpoint: false,
+    });
+
+    expect(getStreamNeighborIndex({ strategy: forward, index: 3, relation: "above" })).toBe(2);
+    expect(getStreamNeighborIndex({ strategy: forward, index: 3, relation: "below" })).toBe(4);
+    expect(getStreamNeighborIndex({ strategy: inverted, index: 3, relation: "above" })).toBe(4);
+    expect(getStreamNeighborIndex({ strategy: inverted, index: 3, relation: "below" })).toBe(2);
+  });
+
+  it("collects assistant turn content with strategy traversal direction", () => {
+    const chronological: StreamItem[] = [
+      userMessage("u1", "user-1", 1),
+      assistantMessage("a1", "assistant-1", 2),
+      assistantMessage("a2", "assistant-2", 3),
+      userMessage("u2", "user-2", 4),
+    ];
+
+    const forward = resolveStreamRenderStrategy({
+      platform: "web",
+      isMobileBreakpoint: false,
+    });
+    const forwardStartIndex = chronological.findIndex((item) => item.id === "a2");
+    expect(
+      collectAssistantTurnContentForStreamRenderStrategy({
+        strategy: forward,
+        items: chronological,
+        startIndex: forwardStartIndex,
+      })
+    ).toBe("assistant-1\n\nassistant-2");
+
+    const inverted = resolveStreamRenderStrategy({
+      platform: "android",
+      isMobileBreakpoint: false,
+    });
+    const invertedItems = orderTailForStreamRenderStrategy({
+      strategy: inverted,
+      streamItems: chronological,
+    });
+    const invertedStartIndex = invertedItems.findIndex((item) => item.id === "a2");
+    expect(
+      collectAssistantTurnContentForStreamRenderStrategy({
+        strategy: inverted,
+        items: invertedItems,
+        startIndex: invertedStartIndex,
+      })
+    ).toBe("assistant-1\n\nassistant-2");
+  });
+
+  it("returns undefined neighbor when index would be out of bounds", () => {
+    const forward = resolveStreamRenderStrategy({
+      platform: "web",
+      isMobileBreakpoint: false,
+    });
+    const items: StreamItem[] = [userMessage("u1", "user-1", 1)];
+
+    expect(
+      getStreamNeighborItem({
+        strategy: forward,
+        items,
+        index: 0,
+        relation: "above",
+      })
+    ).toBeUndefined();
+    expect(
+      getStreamNeighborItem({
+        strategy: forward,
+        items,
+        index: 0,
+        relation: "below",
+      })
+    ).toBeUndefined();
+  });
+});
+
+describe("scroll/bottom calculations", () => {
+  it("computes near-bottom using forward_stream distance-from-bottom math", () => {
+    const strategy = resolveStreamRenderStrategy({
+      platform: "web",
+      isMobileBreakpoint: false,
+    });
+
+    expect(
+      isNearBottomForStreamRenderStrategy({
+        strategy,
+        offsetY: 680,
+        viewportHeight: 300,
+        contentHeight: 1000,
+        threshold: 24,
+      })
+    ).toBe(true);
+    expect(
+      isNearBottomForStreamRenderStrategy({
+        strategy,
+        offsetY: 600,
+        viewportHeight: 300,
+        contentHeight: 1000,
+        threshold: 24,
+      })
+    ).toBe(false);
+  });
+
+  it("computes near-bottom and scroll-to-bottom offset for inverted_stream", () => {
+    const strategy = resolveStreamRenderStrategy({
+      platform: "ios",
+      isMobileBreakpoint: false,
+    });
+
+    expect(
+      isNearBottomForStreamRenderStrategy({
+        strategy,
+        offsetY: 12,
+        viewportHeight: 300,
+        contentHeight: 1000,
+        threshold: 24,
+      })
+    ).toBe(true);
+    expect(
+      isNearBottomForStreamRenderStrategy({
+        strategy,
+        offsetY: 40,
+        viewportHeight: 300,
+        contentHeight: 1000,
+        threshold: 24,
+      })
+    ).toBe(false);
+    expect(
+      getBottomOffsetForStreamRenderStrategy({
+        strategy,
+        viewportHeight: 300,
+        contentHeight: 1000,
+      })
+    ).toBe(0);
+  });
+
+  it("maps scroll-to-bottom to max offset for forward_stream", () => {
+    const strategy = resolveStreamRenderStrategy({
+      platform: "web",
+      isMobileBreakpoint: false,
+    });
+
+    expect(
+      getBottomOffsetForStreamRenderStrategy({
+        strategy,
+        viewportHeight: 320,
+        contentHeight: 1000,
+      })
+    ).toBe(680);
+  });
+});
+
+describe("edge slot semantics", () => {
+  it("uses footer slot for forward_stream and header slot for inverted_stream", () => {
+    const EdgeSlot = () => null;
+    const forward = resolveStreamRenderStrategy({
+      platform: "web",
+      isMobileBreakpoint: false,
+    });
+    const inverted = resolveStreamRenderStrategy({
+      platform: "android",
+      isMobileBreakpoint: false,
+    });
+
+    const forwardProps = getStreamEdgeSlotProps({
+      strategy: forward,
+      component: EdgeSlot,
+      gapSize: 4,
+    });
+    const invertedProps = getStreamEdgeSlotProps({
+      strategy: inverted,
+      component: EdgeSlot,
+      gapSize: 4,
+    });
+
+    expect(forwardProps).toEqual({
+      ListFooterComponent: EdgeSlot,
+      ListFooterComponentStyle: { marginTop: 4 },
+    });
+    expect(invertedProps).toEqual({
+      ListHeaderComponent: EdgeSlot,
+      ListHeaderComponentStyle: { marginBottom: 4 },
+    });
+  });
+});

packages/app/src/components/agent-stream-render-strategy.ts

@@ -0,0 +1,438 @@
+import type { ComponentType, ReactElement, RefObject } from "react";
+import type { FlatList, ScrollView, StyleProp, View, ViewStyle } from "react-native";
+import type { StreamItem } from "@/types/stream";
+
+type EdgeSlot = "header" | "footer";
+type NeighborRelation = "above" | "below";
+type AssistantTurnTraversalStep = -1 | 1;
+
+export type MaintainVisibleContentPositionConfig = Readonly<{
+  minIndexForVisible: number;
+  autoscrollToTopThreshold: number;
+}>;
+
+export type StreamViewportMetrics = {
+  contentHeight: number;
+  viewportHeight: number;
+};
+
+export type StreamNearBottomInput = StreamViewportMetrics & {
+  offsetY: number;
+  threshold: number;
+};
+
+export type StreamEdgeSlotProps = {
+  ListHeaderComponent?: ReactElement | ComponentType<any> | null;
+  ListHeaderComponentStyle?: StyleProp<ViewStyle>;
+  ListFooterComponent?: ReactElement | ComponentType<any> | null;
+  ListFooterComponentStyle?: StyleProp<ViewStyle>;
+};
+
+export type StreamRenderRefs = {
+  flatListRef: RefObject<FlatList<StreamItem> | null>;
+  scrollViewRef: RefObject<ScrollView | null>;
+  bottomAnchorRef: RefObject<View | null>;
+};
+
+export type ResolveStreamRenderStrategyInput = {
+  platform: string;
+  isMobileBreakpoint: boolean;
+};
+
+export interface StreamRenderStrategy {
+  orderTail: (streamItems: StreamItem[]) => StreamItem[];
+  orderHead: (streamHead: StreamItem[]) => StreamItem[];
+  getNeighborIndex: (index: number, relation: NeighborRelation) => number;
+  getNeighborItem: (
+    items: StreamItem[],
+    index: number,
+    relation: NeighborRelation
+  ) => StreamItem | undefined;
+  collectAssistantTurnContent: (items: StreamItem[], startIndex: number) => string;
+  isNearBottom: (input: StreamNearBottomInput) => boolean;
+  getBottomOffset: (metrics: StreamViewportMetrics) => number;
+  getEdgeSlotProps: (
+    component: ReactElement | ComponentType<any> | null,
+    gapSize: number
+  ) => StreamEdgeSlotProps;
+  getMaintainVisibleContentPosition: () =>
+    | MaintainVisibleContentPositionConfig
+    | undefined;
+  getFlatListInverted: () => boolean;
+  getOverlayScrollbarInverted: () => boolean;
+  shouldDisableParentScrollOnInlineDetailsExpansion: () => boolean;
+  shouldAnchorBottomOnContentSizeChange: () => boolean;
+  shouldAnimateManualScrollToBottom: () => boolean;
+  shouldUseVirtualizedList: () => boolean;
+  scrollToBottom: (params: {
+    refs: StreamRenderRefs;
+    metrics: StreamViewportMetrics;
+    animated: boolean;
+  }) => void;
+  scrollToOffset: (params: {
+    refs: StreamRenderRefs;
+    offset: number;
+    animated: boolean;
+  }) => void;
+}
+
+type StreamRenderStrategyConfig = {
+  orderTailReverse: boolean;
+  orderHeadReverse: boolean;
+  assistantTurnTraversalStep: AssistantTurnTraversalStep;
+  edgeSlot: EdgeSlot;
+  flatListInverted: boolean;
+  overlayScrollbarInverted: boolean;
+  maintainVisibleContentPosition?: MaintainVisibleContentPositionConfig;
+  disableParentScrollOnInlineDetailsExpansion: boolean;
+  anchorBottomOnContentSizeChange: boolean;
+  animateManualScrollToBottom: boolean;
+  useVirtualizedList: boolean;
+  isNearBottom: (input: StreamNearBottomInput) => boolean;
+  getBottomOffset: (metrics: StreamViewportMetrics) => number;
+  scrollToBottom: (params: {
+    refs: StreamRenderRefs;
+    metrics: StreamViewportMetrics;
+    animated: boolean;
+  }) => void;
+  scrollToOffset: (params: {
+    refs: StreamRenderRefs;
+    offset: number;
+    animated: boolean;
+  }) => void;
+};
+
+const DEFAULT_MAINTAIN_VISIBLE_CONTENT_POSITION: MaintainVisibleContentPositionConfig =
+  Object.freeze({
+    minIndexForVisible: 0,
+    autoscrollToTopThreshold: 0,
+  });
+
+function scrollAnchorIntoView(params: {
+  refs: StreamRenderRefs;
+  animated: boolean;
+}): boolean {
+  const anchorHandle = params.refs.bottomAnchorRef.current as
+    | ({ getNativeRef?: () => unknown; scrollIntoView?: (options?: unknown) => void } &
+        object)
+    | null;
+  if (!anchorHandle) {
+    return false;
+  }
+
+  const maybeNative =
+    typeof anchorHandle.getNativeRef === "function"
+      ? anchorHandle.getNativeRef()
+      : anchorHandle;
+
+  const domElement = maybeNative as { scrollIntoView?: (options?: unknown) => void };
+  if (typeof domElement.scrollIntoView !== "function") {
+    return false;
+  }
+
+  domElement.scrollIntoView({
+    block: "end",
+    behavior: params.animated ? "smooth" : "auto",
+  });
+  return true;
+}
+
+function forceScrollContainerToBottom(
+  refs: StreamRenderRefs,
+  fallbackOffset: number
+): void {
+  const resolveNode = (
+    input: unknown
+  ): HTMLElement | null => {
+    if (!(input instanceof HTMLElement)) {
+      return null;
+    }
+    if (input.scrollHeight - input.clientHeight > 1) {
+      return input;
+    }
+    let node: HTMLElement | null = input.parentElement;
+    while (node) {
+      if (node.scrollHeight - node.clientHeight > 1) {
+        return node;
+      }
+      node = node.parentElement;
+    }
+    return null;
+  };
+
+  const scrollViewHandle = refs.scrollViewRef.current as
+    | {
+        getNativeScrollRef?: () => unknown;
+        getScrollableNode?: () => unknown;
+        getInnerViewNode?: () => unknown;
+        getNativeRef?: () => unknown;
+      }
+    | null;
+  const anchorHandle = refs.bottomAnchorRef.current as
+    | ({ getNativeRef?: () => unknown } & object)
+    | null;
+
+  const candidates: unknown[] = [
+    scrollViewHandle?.getNativeScrollRef?.(),
+    scrollViewHandle?.getScrollableNode?.(),
+    scrollViewHandle?.getInnerViewNode?.(),
+    scrollViewHandle?.getNativeRef?.(),
+    scrollViewHandle,
+    typeof anchorHandle?.getNativeRef === "function"
+      ? anchorHandle.getNativeRef()
+      : anchorHandle,
+  ];
+
+  let scrollNode: HTMLElement | null = null;
+  for (const candidate of candidates) {
+    scrollNode = resolveNode(candidate);
+    if (scrollNode) {
+      break;
+    }
+  }
+
+  if (!scrollNode && typeof document !== "undefined") {
+    scrollNode = resolveNode(
+      document.querySelector("[data-testid='agent-chat-scroll']")
+    );
+  }
+
+  if (!scrollNode) {
+    return;
+  }
+
+  const snap = () => {
+    scrollNode.scrollTop = Math.max(
+      fallbackOffset,
+      scrollNode.scrollHeight - scrollNode.clientHeight
+    );
+  };
+  snap();
+  if (typeof requestAnimationFrame === "function") {
+    requestAnimationFrame(snap);
+  }
+}
+
+function createStreamRenderStrategy(
+  config: StreamRenderStrategyConfig
+): StreamRenderStrategy {
+  return {
+    orderTail: (streamItems) =>
+      config.orderTailReverse ? [...streamItems].reverse() : streamItems,
+    orderHead: (streamHead) =>
+      config.orderHeadReverse ? [...streamHead].reverse() : streamHead,
+    getNeighborIndex: (index, relation) =>
+      relation === "above"
+        ? index + config.assistantTurnTraversalStep
+        : index - config.assistantTurnTraversalStep,
+    getNeighborItem: (items, index, relation) => {
+      const neighborIndex =
+        relation === "above"
+          ? index + config.assistantTurnTraversalStep
+          : index - config.assistantTurnTraversalStep;
+      if (neighborIndex < 0 || neighborIndex >= items.length) {
+        return undefined;
+      }
+      return items[neighborIndex];
+    },
+    collectAssistantTurnContent: (items, startIndex) => {
+      const messages: string[] = [];
+      for (
+        let index = startIndex;
+        index >= 0 && index < items.length;
+        index += config.assistantTurnTraversalStep
+      ) {
+        const currentItem = items[index];
+        if (currentItem.kind === "user_message") {
+          break;
+        }
+        if (currentItem.kind === "assistant_message") {
+          messages.push(currentItem.text);
+        }
+      }
+      return messages.reverse().join("\n\n");
+    },
+    isNearBottom: (input) => config.isNearBottom(input),
+    getBottomOffset: (metrics) => config.getBottomOffset(metrics),
+    getEdgeSlotProps: (component, gapSize) => {
+      if (config.edgeSlot === "header") {
+        return {
+          ListHeaderComponent: component,
+          ListHeaderComponentStyle: { marginBottom: gapSize },
+        };
+      }
+      return {
+        ListFooterComponent: component,
+        ListFooterComponentStyle: { marginTop: gapSize },
+      };
+    },
+    getMaintainVisibleContentPosition: () => config.maintainVisibleContentPosition,
+    getFlatListInverted: () => config.flatListInverted,
+    getOverlayScrollbarInverted: () => config.overlayScrollbarInverted,
+    shouldDisableParentScrollOnInlineDetailsExpansion: () =>
+      config.disableParentScrollOnInlineDetailsExpansion,
+    shouldAnchorBottomOnContentSizeChange: () =>
+      config.anchorBottomOnContentSizeChange,
+    shouldAnimateManualScrollToBottom: () => config.animateManualScrollToBottom,
+    shouldUseVirtualizedList: () => config.useVirtualizedList,
+    scrollToBottom: (params) => config.scrollToBottom(params),
+    scrollToOffset: (params) => config.scrollToOffset(params),
+  };
+}
+
+function createInvertedStreamStrategy(): StreamRenderStrategy {
+  return createStreamRenderStrategy({
+    orderTailReverse: true,
+    orderHeadReverse: true,
+    assistantTurnTraversalStep: 1,
+    edgeSlot: "header",
+    flatListInverted: true,
+    overlayScrollbarInverted: true,
+    maintainVisibleContentPosition: DEFAULT_MAINTAIN_VISIBLE_CONTENT_POSITION,
+    disableParentScrollOnInlineDetailsExpansion: false,
+    anchorBottomOnContentSizeChange: false,
+    animateManualScrollToBottom: true,
+    useVirtualizedList: true,
+    isNearBottom: (input) => input.offsetY <= input.threshold,
+    getBottomOffset: () => 0,
+    scrollToBottom: ({ refs, animated }) => {
+      refs.flatListRef.current?.scrollToOffset({
+        offset: 0,
+        animated,
+      });
+    },
+    scrollToOffset: ({ refs, offset, animated }) => {
+      refs.flatListRef.current?.scrollToOffset({ offset, animated });
+    },
+  });
+}
+
+function createForwardStreamStrategy(): StreamRenderStrategy {
+  return createStreamRenderStrategy({
+    orderTailReverse: false,
+    orderHeadReverse: false,
+    assistantTurnTraversalStep: -1,
+    edgeSlot: "footer",
+    flatListInverted: false,
+    overlayScrollbarInverted: false,
+    maintainVisibleContentPosition: undefined,
+    disableParentScrollOnInlineDetailsExpansion: false,
+    anchorBottomOnContentSizeChange: true,
+    animateManualScrollToBottom: false,
+    useVirtualizedList: false,
+    isNearBottom: (inputMetrics) => {
+      const distanceFromBottom = Math.max(
+        0,
+        inputMetrics.contentHeight -
+          (inputMetrics.offsetY + inputMetrics.viewportHeight)
+      );
+      return distanceFromBottom <= inputMetrics.threshold;
+    },
+    getBottomOffset: (metrics) =>
+      Math.max(0, metrics.contentHeight - metrics.viewportHeight),
+    scrollToBottom: ({ refs, metrics, animated }) => {
+      const bottomOffset = Math.max(
+        0,
+        metrics.contentHeight - metrics.viewportHeight
+      );
+      const usedAnchor = scrollAnchorIntoView({ refs, animated });
+      if (!usedAnchor) {
+        refs.scrollViewRef.current?.scrollToEnd?.({ animated });
+      }
+      // Always apply deterministic bottom offset to avoid partial anchors.
+      refs.scrollViewRef.current?.scrollTo?.({
+        y: bottomOffset,
+        animated,
+      });
+      forceScrollContainerToBottom(refs, bottomOffset);
+    },
+    scrollToOffset: ({ refs, offset, animated }) => {
+      refs.scrollViewRef.current?.scrollTo({ y: offset, animated });
+    },
+  });
+}
+
+export function resolveStreamRenderStrategy(
+  input: ResolveStreamRenderStrategyInput
+): StreamRenderStrategy {
+  if (input.platform === "web") {
+    return createForwardStreamStrategy();
+  }
+  return createInvertedStreamStrategy();
+}
+
+export function orderTailForStreamRenderStrategy(params: {
+  strategy: StreamRenderStrategy;
+  streamItems: StreamItem[];
+}): StreamItem[] {
+  return params.strategy.orderTail(params.streamItems);
+}
+
+export function orderHeadForStreamRenderStrategy(params: {
+  strategy: StreamRenderStrategy;
+  streamHead: StreamItem[];
+}): StreamItem[] {
+  return params.strategy.orderHead(params.streamHead);
+}
+
+export function getStreamNeighborIndex(params: {
+  strategy: StreamRenderStrategy;
+  index: number;
+  relation: NeighborRelation;
+}): number {
+  return params.strategy.getNeighborIndex(params.index, params.relation);
+}
+
+export function getStreamNeighborItem(params: {
+  strategy: StreamRenderStrategy;
+  items: StreamItem[];
+  index: number;
+  relation: NeighborRelation;
+}): StreamItem | undefined {
+  return params.strategy.getNeighborItem(
+    params.items,
+    params.index,
+    params.relation
+  );
+}
+
+export function collectAssistantTurnContentForStreamRenderStrategy(params: {
+  strategy: StreamRenderStrategy;
+  items: StreamItem[];
+  startIndex: number;
+}): string {
+  return params.strategy.collectAssistantTurnContent(
+    params.items,
+    params.startIndex
+  );
+}
+
+export function isNearBottomForStreamRenderStrategy(
+  params: StreamNearBottomInput & { strategy: StreamRenderStrategy }
+): boolean {
+  return params.strategy.isNearBottom({
+    offsetY: params.offsetY,
+    threshold: params.threshold,
+    contentHeight: params.contentHeight,
+    viewportHeight: params.viewportHeight,
+  });
+}
+
+export function getBottomOffsetForStreamRenderStrategy(
+  params: StreamViewportMetrics & {
+    strategy: StreamRenderStrategy;
+  }
+): number {
+  return params.strategy.getBottomOffset({
+    contentHeight: params.contentHeight,
+    viewportHeight: params.viewportHeight,
+  });
+}
+
+export function getStreamEdgeSlotProps(params: {
+  strategy: StreamRenderStrategy;
+  component: ReactElement | ComponentType<any> | null;
+  gapSize: number;
+}): StreamEdgeSlotProps {
+  return params.strategy.getEdgeSlotProps(params.component, params.gapSize);
+}

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

@@ -1,11 +1,24 @@
-import { useEffect, useMemo, useRef, useState, useCallback } from "react";
-import type { ReactNode } from "react";
+import {
+  Fragment,
+  createElement,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import type { ComponentType, ReactElement, ReactNode } from "react";
 import {
   View,
   Text,
   Pressable,
   FlatList,
+  ScrollView,
   ListRenderItemInfo,
+  LayoutChangeEvent,
   NativeScrollEvent,
   NativeSyntheticEvent,
   InteractionManager,
@@ -16,6 +29,7 @@ import Markdown from "react-native-markdown-display";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { useMutation } from "@tanstack/react-query";
+import { useRouter } from "expo-router";
 import Animated, {
   FadeIn,
   FadeOut,
@@ -50,10 +64,25 @@ 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 {
+  collectAssistantTurnContentForStreamRenderStrategy,
+  getStreamEdgeSlotProps,
+  getStreamNeighborItem,
+  isNearBottomForStreamRenderStrategy,
+  orderHeadForStreamRenderStrategy,
+  orderTailForStreamRenderStrategy,
+  resolveStreamRenderStrategy,
+  type StreamEdgeSlotProps,
+} from "./agent-stream-render-strategy";
 import { createMarkdownStyles } from "@/styles/markdown-styles";
 import { MAX_CONTENT_WIDTH } from "@/constants/layout";
 import { isPerfLoggingEnabled, measurePayload, perfLog } from "@/utils/perf";
 import { getMarkdownListMarker } from "@/utils/markdown-list";
+import { buildHostWorkspaceFileRoute } from "@/utils/host-routes";
 
 const isUserMessageItem = (item?: StreamItem) => item?.kind === "user_message";
 const isToolSequenceItem = (item?: StreamItem) =>
@@ -61,23 +90,28 @@ const isToolSequenceItem = (item?: StreamItem) =>
 const AGENT_STREAM_LOG_TAG = "[AgentStreamView]";
 const STREAM_ITEM_LOG_MIN_COUNT = 200;
 const STREAM_ITEM_LOG_DELTA_THRESHOLD = 50;
+const NOOP_SEPARATORS: ListRenderItemInfo<StreamItem>["separators"] = {
+  highlight: () => {},
+  unhighlight: () => {},
+  updateProps: () => {},
+};
 
-function collectAssistantTurnContent(
-  flatListData: StreamItem[],
-  startIndex: number
-): string {
-  const messages: string[] = [];
-  for (let i = startIndex; i < flatListData.length; i++) {
-    const currentItem = flatListData[i];
-    if (currentItem.kind === "user_message") {
-      break;
-    }
-    if (currentItem.kind === "assistant_message") {
-      messages.push(currentItem.text);
-    }
+function renderStreamEdgeComponent(
+  component: ReactElement | ComponentType<any> | null | undefined
+): ReactNode {
+  if (!component) {
+    return null;
   }
-  return messages.reverse().join("\n\n");
+  if (isValidElement(component)) {
+    return component;
+  }
+  return createElement(component);
 }
+
+export interface AgentStreamViewHandle {
+  scrollToBottom(): void;
+}
+
 export interface AgentStreamViewProps {
   agentId: string;
   serverId?: string;
@@ -86,24 +120,51 @@ export interface AgentStreamViewProps {
   pendingPermissions: Map<string, PendingPermission>;
 }
 
-export function AgentStreamView({
+export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamViewProps>(function AgentStreamView({
   agentId,
   serverId,
   agent,
   streamItems,
   pendingPermissions,
-}: AgentStreamViewProps) {
+}, ref) {
   const flatListRef = useRef<FlatList<StreamItem>>(null);
+  const scrollViewRef = useRef<ScrollView>(null);
+  const bottomAnchorRef = useRef<View>(null);
   const { theme } = useUnistyles();
+  const router = useRouter();
+  const isMobile =
+    UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const streamRenderStrategy = useMemo(
+    () =>
+      resolveStreamRenderStrategy({
+        platform: Platform.OS,
+        isMobileBreakpoint: isMobile,
+      }),
+    [isMobile]
+  );
+  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 pendingAnchorRequestRef = useRef(false);
+  const pendingAutoScrollFrameRef = useRef<number | null>(null);
+  const pendingAutoScrollAnimatedRef = useRef(false);
+  const scrollOffsetYRef = useRef(0);
   const streamItemCountRef = useRef(0);
+  const streamViewportMetricsRef = useRef({
+    contentHeight: 0,
+    viewportHeight: 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);
+  const streamRenderRefs = useMemo(
+    () => ({ flatListRef, scrollViewRef, bottomAnchorRef }),
+    []
+  );
 
   // Get serverId (fallback to agent's serverId if not provided)
   const resolvedServerId = serverId ?? agent.serverId ?? "";
@@ -115,8 +176,13 @@ export function AgentStreamView({
     state.sessions[resolvedServerId]?.agentStreamHead?.get(agentId)
   );
 
-  const { requestDirectoryListing, requestFilePreview, selectExplorerEntry } =
-    useFileExplorerActions(resolvedServerId);
+  const workspaceRoot = agent.cwd?.trim() || "";
+  const workspaceId = agent.projectPlacement?.checkout?.cwd?.trim() || workspaceRoot;
+  const { requestDirectoryListing } = useFileExplorerActions({
+    serverId: resolvedServerId,
+    workspaceId,
+    workspaceRoot,
+  });
   // Keep entry/exit animations off on Android due to RN dispatchDraw crashes
   // tracked in react-native-reanimated#8422.
   const shouldDisableEntryExitAnimations = Platform.OS === "android";
@@ -131,6 +197,7 @@ export function AgentStreamView({
     hasScrolledInitially.current = false;
     hasAutoScrolledOnce.current = false;
     isNearBottomRef.current = true;
+    pendingAnchorRequestRef.current = false;
     setExpandedInlineToolCallIds(new Set());
   }, [agentId]);
 
@@ -145,63 +212,221 @@ export function AgentStreamView({
         return;
       }
 
-      requestDirectoryListing(agentId, normalized.directory, {
+      if (normalized.file) {
+        const route = buildHostWorkspaceFileRoute(
+          resolvedServerId,
+          workspaceId,
+          normalized.file
+        );
+        router.replace(route as any);
+        return;
+      }
+
+      void requestDirectoryListing(normalized.directory, {
         recordHistory: false,
         setCurrentPath: false,
       });
-      if (normalized.file) {
-        selectExplorerEntry(agentId, normalized.file);
-        requestFilePreview(agentId, normalized.file);
-      }
 
-      setExplorerTab("files");
+      setExplorerTabForCheckout({
+        serverId: resolvedServerId,
+        cwd: agent.cwd,
+        isGit: agent.projectPlacement?.checkout?.isGit ?? true,
+        tab: "files",
+      });
       openFileExplorer();
     },
     [
       agent.cwd,
-      agentId,
-      requestDirectoryListing,
-      requestFilePreview,
-      selectExplorerEntry,
-      setExplorerTab,
       openFileExplorer,
+      requestDirectoryListing,
+      resolvedServerId,
+      router,
+      setExplorerTabForCheckout,
+      workspaceId,
     ]
   );
 
+  const updateNearBottom = useCallback((value: boolean) => {
+    if (isNearBottomRef.current === value) return;
+    isNearBottomRef.current = value;
+    setIsNearBottom(value);
+  }, []);
+
+  const requestAnchorToBottom = useCallback(() => {
+    pendingAnchorRequestRef.current = true;
+  }, []);
+
   const handleScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      const { contentOffset } = event.nativeEvent;
+      const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+      const previousOffsetY = scrollOffsetYRef.current;
+      const previousContentHeight = streamViewportMetricsRef.current.contentHeight;
+      scrollOffsetYRef.current = contentOffset.y;
+      streamViewportMetricsRef.current = {
+        contentHeight: Math.max(0, contentSize.height),
+        viewportHeight: Math.max(0, layoutMeasurement.height),
+      };
+      const offsetDelta = contentOffset.y - previousOffsetY;
+      const contentHeightDelta =
+        streamViewportMetricsRef.current.contentHeight - previousContentHeight;
       const threshold = Math.max(insets.bottom, 32);
-      // In inverted list: scrollTop 0 = bottom, higher values = scrolled up
-      const nearBottom = contentOffset.y <= threshold;
+      const nearBottom = isNearBottomForStreamRenderStrategy({
+        strategy: streamRenderStrategy,
+        offsetY: contentOffset.y,
+        threshold,
+        contentHeight: streamViewportMetricsRef.current.contentHeight,
+        viewportHeight: streamViewportMetricsRef.current.viewportHeight,
+      });
 
-      if (isNearBottomRef.current !== nearBottom) {
-        isNearBottomRef.current = nearBottom;
-        setIsNearBottom(nearBottom);
+      const pendingAnchorBefore = pendingAnchorRequestRef.current;
+      const shouldSuppressFalseNearBottom =
+        pendingAnchorBefore &&
+        !nearBottom &&
+        Math.abs(offsetDelta) <= 1 &&
+        contentHeightDelta > 0;
+      if (shouldSuppressFalseNearBottom) {
+        updateNearBottom(true);
+      } else {
+        updateNearBottom(nearBottom);
+      }
+
+      const shouldClearPendingAnchor =
+        pendingAnchorBefore && !nearBottom && Math.abs(offsetDelta) > 1;
+      if (shouldClearPendingAnchor) {
+        pendingAnchorRequestRef.current = false;
+      }
+
+      if (showDesktopWebScrollbar) {
+        streamScrollbarMetrics.onScroll(event);
       }
     },
-    [insets.bottom]
+    [
+      insets.bottom,
+      showDesktopWebScrollbar,
+      streamRenderStrategy,
+      streamScrollbarMetrics,
+      updateNearBottom,
+    ]
+  );
+
+  const handleListLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      streamViewportMetricsRef.current = {
+        ...streamViewportMetricsRef.current,
+        viewportHeight: Math.max(0, event.nativeEvent.layout.height),
+      };
+      if (showDesktopWebScrollbar) {
+        streamScrollbarMetrics.onLayout(event);
+      }
+    },
+    [showDesktopWebScrollbar, streamScrollbarMetrics]
   );
 
   const scrollToBottomInternal = useCallback(
     ({ animated }: { animated: boolean }) => {
-      const list = flatListRef.current;
-      if (!list) {
+      const targetOffset = streamRenderStrategy.getBottomOffset(
+        streamViewportMetricsRef.current
+      );
+      streamRenderStrategy.scrollToBottom({
+        refs: streamRenderRefs,
+        metrics: streamViewportMetricsRef.current,
+        animated,
+      });
+      scrollOffsetYRef.current = targetOffset;
+      updateNearBottom(true);
+    },
+    [updateNearBottom, streamRenderRefs, streamRenderStrategy]
+  );
+
+  useImperativeHandle(ref, () => ({
+    scrollToBottom() {
+      requestAnchorToBottom();
+    },
+  }), [requestAnchorToBottom]);
+
+  const handleContentSizeChange = useCallback(
+    (width: number, height: number) => {
+      const previousMetrics = streamViewportMetricsRef.current;
+      const threshold = Math.max(insets.bottom, 32);
+      const wasNearBottom = isNearBottomForStreamRenderStrategy({
+        strategy: streamRenderStrategy,
+        offsetY: scrollOffsetYRef.current,
+        threshold,
+        contentHeight: previousMetrics.contentHeight,
+        viewportHeight: previousMetrics.viewportHeight,
+      });
+
+      streamViewportMetricsRef.current = {
+        ...previousMetrics,
+        contentHeight: Math.max(0, height),
+      };
+
+      if (streamRenderStrategy.shouldAnchorBottomOnContentSizeChange()) {
+        if (!hasAutoScrolledOnce.current) {
+          scrollToBottomInternal({ animated: false });
+          hasAutoScrolledOnce.current = true;
+          hasScrolledInitially.current = true;
+        } else if (
+          wasNearBottom ||
+          isNearBottomRef.current ||
+          pendingAnchorRequestRef.current
+        ) {
+          scrollToBottomInternal({ animated: false });
+        }
+      }
+
+      if (showDesktopWebScrollbar) {
+        streamScrollbarMetrics.onContentSizeChange(width, height);
+      }
+    },
+    [
+      insets.bottom,
+      scrollToBottomInternal,
+      showDesktopWebScrollbar,
+      streamRenderStrategy,
+      streamScrollbarMetrics,
+    ]
+  );
+
+  const scheduleAutoScroll = useCallback(
+    ({ animated }: { animated: boolean }) => {
+      pendingAutoScrollAnimatedRef.current =
+        pendingAutoScrollAnimatedRef.current || animated;
+
+      if (pendingAutoScrollFrameRef.current !== null) {
         return;
       }
 
-      list.scrollToOffset({ offset: 0, animated });
-      isNearBottomRef.current = true;
-      setIsNearBottom(true);
+      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;
     }
 
+    if (streamRenderStrategy.shouldAnchorBottomOnContentSizeChange()) {
+      // Forward streams anchor from measurement updates in handleContentSizeChange.
+      return;
+    }
+
     if (!hasAutoScrolledOnce.current) {
       const handle = InteractionManager.runAfterInteractions(() => {
         scrollToBottomInternal({ animated: false });
@@ -211,36 +436,51 @@ export function AgentStreamView({
       return () => handle.cancel();
     }
 
-    if (!isNearBottomRef.current) {
+    if (!isNearBottomRef.current && !pendingAnchorRequestRef.current) {
       return;
     }
 
     const shouldAnimate = hasScrolledInitially.current;
-    scrollToBottomInternal({ animated: shouldAnimate });
+    scheduleAutoScroll({ animated: shouldAnimate });
     hasScrolledInitially.current = true;
-  }, [streamItems, scrollToBottomInternal]);
+  }, [
+    scheduleAutoScroll,
+    scrollToBottomInternal,
+    streamItems,
+    streamRenderStrategy,
+  ]);
 
   function scrollToBottom() {
-    scrollToBottomInternal({ animated: true });
-    isNearBottomRef.current = true;
-    setIsNearBottom(true);
+    const animated = streamRenderStrategy.shouldAnimateManualScrollToBottom();
+    scrollToBottomInternal({ animated });
   }
 
   const flatListData = useMemo(() => {
-    return [...streamItems].reverse();
-  }, [streamItems]);
+    return orderTailForStreamRenderStrategy({
+      strategy: streamRenderStrategy,
+      streamItems,
+    });
+  }, [streamItems, streamRenderStrategy]);
+
+  const orderedStreamHead = useMemo(() => {
+    return orderHeadForStreamRenderStrategy({
+      strategy: streamRenderStrategy,
+      streamHead: streamHead ?? [],
+    });
+  }, [streamHead, streamRenderStrategy]);
 
   const tightGap = theme.spacing[1]; // 4px
   const looseGap = theme.spacing[4]; // 16px
 
-  // The FlatList is inverted, but each row is re-inverted by RN, so `marginBottom` still
-  // manifests as the gap *below* the row in the final visual layout. Compute spacing
-  // against the item visually below (index - 1 in our inverted list).
   const getGapBelow = useCallback(
-    (item: StreamItem, index: number) => {
-      const belowItem = flatListData[index - 1];
+    (item: StreamItem, index: number, items: StreamItem[]) => {
+      const belowItem = getStreamNeighborItem({
+        strategy: streamRenderStrategy,
+        items,
+        index,
+        relation: "below",
+      });
       if (!belowItem) {
-        // This is the bottommost (newest) item; nothing below it visually.
         return 0;
       }
 
@@ -279,13 +519,15 @@ export function AgentStreamView({
       // Different types get loose gap (16px)
       return looseGap;
     },
-    [flatListData, looseGap, tightGap]
+    [looseGap, streamRenderStrategy, tightGap]
   );
 
   const renderStreamItemContent = useCallback(
-    (item: StreamItem, index: number) => {
+    (item: StreamItem, index: number, items: StreamItem[]) => {
       const handleInlineDetailsExpandedChange = (expanded: boolean) => {
-        if (Platform.OS !== "web") {
+        if (
+          !streamRenderStrategy.shouldDisableParentScrollOnInlineDetailsExpansion()
+        ) {
           return;
         }
         setExpandedInlineToolCallIds((previous) => {
@@ -301,14 +543,24 @@ export function AgentStreamView({
 
       switch (item.kind) {
         case "user_message": {
-          // In inverted list: index+1 is the item above, index-1 is below.
-          const prevItem = flatListData[index + 1];
-          const nextItem = flatListData[index - 1];
-          const isFirstInGroup = prevItem?.kind !== "user_message";
-          const isLastInGroup = nextItem?.kind !== "user_message";
+          const aboveItem = getStreamNeighborItem({
+            strategy: streamRenderStrategy,
+            items,
+            index,
+            relation: "above",
+          });
+          const belowItem = getStreamNeighborItem({
+            strategy: streamRenderStrategy,
+            items,
+            index,
+            relation: "below",
+          });
+          const isFirstInGroup = aboveItem?.kind !== "user_message";
+          const isLastInGroup = belowItem?.kind !== "user_message";
           return (
             <UserMessage
               message={item.text}
+              images={item.images}
               timestamp={item.timestamp.getTime()}
               isFirstInGroup={isFirstInGroup}
               isLastInGroup={isLastInGroup}
@@ -326,8 +578,12 @@ export function AgentStreamView({
           );
 
         case "thought": {
-          // In inverted list: index+1 is the item above, index-1 is below.
-          const nextItem = flatListData[index - 1];
+          const nextItem = getStreamNeighborItem({
+            strategy: streamRenderStrategy,
+            items,
+            index,
+            relation: "below",
+          });
           const isLastInSequence =
             nextItem?.kind !== "tool_call" && nextItem?.kind !== "thought";
           return (
@@ -343,8 +599,12 @@ export function AgentStreamView({
 
         case "tool_call": {
           const { payload } = item;
-          // In inverted list: index+1 is the item above, index-1 is below.
-          const nextItem = flatListData[index - 1];
+          const nextItem = getStreamNeighborItem({
+            strategy: streamRenderStrategy,
+            items,
+            index,
+            relation: "below",
+          });
           const isLastInSequence =
             nextItem?.kind !== "tool_call" && nextItem?.kind !== "thought";
 
@@ -406,23 +666,33 @@ export function AgentStreamView({
           return null;
       }
     },
-    [handleInlinePathPress, agent.cwd, flatListData]
+    [handleInlinePathPress, agent.cwd, streamRenderStrategy]
   );
 
   const renderStreamItem = useCallback(
     ({ item, index }: ListRenderItemInfo<StreamItem>) => {
-      const content = renderStreamItemContent(item, index);
+      const content = renderStreamItemContent(item, index, flatListData);
       if (!content) {
         return null;
       }
 
-      const gapBelow = getGapBelow(item, index);
-      const nextItem = flatListData[index - 1];
+      const gapBelow = getGapBelow(item, index, flatListData);
+      const nextItem = getStreamNeighborItem({
+        strategy: streamRenderStrategy,
+        items: flatListData,
+        index,
+        relation: "below",
+      });
       const isEndOfAssistantTurn =
         item.kind === "assistant_message" &&
         (nextItem?.kind === "user_message" ||
           (nextItem === undefined && agent.status !== "running"));
-      const getTurnContent = () => collectAssistantTurnContent(flatListData, index);
+      const getTurnContent = () =>
+        collectAssistantTurnContentForStreamRenderStrategy({
+          strategy: streamRenderStrategy,
+          items: flatListData,
+          startIndex: index,
+        });
 
       return (
         <View style={[stylesheet.streamItemWrapper, { marginBottom: gapBelow }]}>
@@ -433,7 +703,13 @@ export function AgentStreamView({
         </View>
       );
     },
-    [getGapBelow, renderStreamItemContent, flatListData, agent.status]
+    [
+      getGapBelow,
+      renderStreamItemContent,
+      flatListData,
+      agent.status,
+      streamRenderStrategy,
+    ]
   );
 
   const pendingPermissionItems = useMemo(
@@ -514,10 +790,11 @@ export function AgentStreamView({
 
   const showWorkingIndicator = agent.status === "running";
   const showBottomBar = showWorkingIndicator;
+  const usesVirtualizedList = streamRenderStrategy.shouldUseVirtualizedList();
 
-  const listHeaderComponent = useMemo(() => {
+  const listEdgeSlotComponent = useMemo(() => {
     const hasPermissions = pendingPermissionItems.length > 0;
-    const hasHeadItems = streamHead && streamHead.length > 0;
+    const hasHeadItems = orderedStreamHead.length > 0;
 
     if (!hasPermissions && !showBottomBar && !hasHeadItems) {
       return null;
@@ -530,10 +807,8 @@ export function AgentStreamView({
         <View
           style={[
             stylesheet.listHeaderContent,
-            // In an inverted FlatList, the header is rendered at the visual bottom, so its
-            // top edge can sit directly against the newest timeline item. Add a small
-            // padding to prevent badges (e.g. Thinking/Setup) from butting up against
-            // the last user message when the streaming head is present.
+            // The edge slot (header for inverted streams, footer for forward streams)
+            // sits next to the newest timeline item.
             hasHeadItems ? { paddingTop: tightGap } : null,
           ]}
         >
@@ -550,8 +825,12 @@ export function AgentStreamView({
           ) : null}
 
           {hasHeadItems
-            ? [...streamHead].reverse().map((item, index) => {
-                const rendered = renderStreamItemContent(item, index);
+            ? orderedStreamHead.map((item, index) => {
+                const rendered = renderStreamItemContent(
+                  item,
+                  index,
+                  orderedStreamHead
+                );
                 return rendered ? (
                   <View key={item.id} style={stylesheet.streamItemWrapper}>
                     {rendered}
@@ -568,10 +847,10 @@ export function AgentStreamView({
     pendingPermissionItems,
     showWorkingIndicator,
     client,
-    streamHead,
+    orderedStreamHead,
     renderStreamItemContent,
-    tightGap,
     showBottomBar,
+    tightGap,
   ]);
 
   const flatListExtraData = useMemo(
@@ -587,19 +866,20 @@ export function AgentStreamView({
     ]
   );
 
-  // FlatList's ListHeaderComponent renders at the *bottom* when inverted.
-  // Without explicit spacing, the newest "head" rows (like Thinking/Setup tool badges)
-  // can butt up directly against the most recent stream item.
-  const headerGapStyle = useMemo(() => {
-    if (!listHeaderComponent) {
-      return undefined;
+  const listEdgeSlotProps = useMemo<StreamEdgeSlotProps>(() => {
+    if (!listEdgeSlotComponent) {
+      return {};
     }
-    return { marginBottom: tightGap };
-  }, [listHeaderComponent, tightGap]);
+    return getStreamEdgeSlotProps({
+      strategy: streamRenderStrategy,
+      component: listEdgeSlotComponent,
+      gapSize: tightGap,
+    });
+  }, [listEdgeSlotComponent, streamRenderStrategy, tightGap]);
 
   const listEmptyComponent = useMemo(() => {
     const hasPermissions = pendingPermissionItems.length > 0;
-    const hasHeadItems = (streamHead?.length ?? 0) > 0;
+    const hasHeadItems = orderedStreamHead.length > 0;
     if (hasPermissions || hasHeadItems) {
       return null;
     }
@@ -628,67 +908,139 @@ export function AgentStreamView({
   }, [
     agent.status,
     pendingPermissionItems.length,
-    streamHead,
+    orderedStreamHead,
     theme.colors.foregroundMuted,
   ]);
 
+  const streamScrollEnabled =
+    !streamRenderStrategy.shouldDisableParentScrollOnInlineDetailsExpansion() ||
+    expandedInlineToolCallIds.size === 0;
+  const listContentContainerStyle = useMemo(
+    () =>
+      usesVirtualizedList
+        ? stylesheet.listContentContainer
+        : [stylesheet.listContentContainer, stylesheet.forwardListContentContainer],
+    [usesVirtualizedList]
+  );
+  const headerEdgeContent = renderStreamEdgeComponent(
+    listEdgeSlotProps.ListHeaderComponent
+  );
+  const footerEdgeContent = renderStreamEdgeComponent(
+    listEdgeSlotProps.ListFooterComponent
+  );
+  const nonVirtualizedItems = useMemo(() => {
+    if (flatListData.length === 0) {
+      return null;
+    }
+
+    return flatListData.map((item, index) => {
+      const rendered = renderStreamItem({
+        item,
+        index,
+        separators: NOOP_SEPARATORS,
+      });
+      if (!rendered) {
+        return null;
+      }
+      return <Fragment key={item.id}>{rendered}</Fragment>;
+    });
+  }, [flatListData, renderStreamItem]);
+
   return (
     <ToolCallSheetProvider>
       <View style={stylesheet.container}>
-          <MessageOuterSpacingProvider disableOuterSpacing>
+        <MessageOuterSpacingProvider disableOuterSpacing>
+          {usesVirtualizedList ? (
             <FlatList
               ref={flatListRef}
               data={flatListData}
               renderItem={renderStreamItem}
               keyExtractor={(item) => item.id}
-              ListHeaderComponentStyle={headerGapStyle}
-              contentContainerStyle={{
-                paddingVertical: 0,
-                flexGrow: 1,
-              }}
+              testID="agent-chat-scroll"
+              {...listEdgeSlotProps}
+              contentContainerStyle={listContentContainerStyle}
               style={stylesheet.list}
+              onLayout={handleListLayout}
               onScroll={handleScroll}
               scrollEventThrottle={16}
+              onContentSizeChange={handleContentSizeChange}
               ListEmptyComponent={listEmptyComponent}
-              ListHeaderComponent={listHeaderComponent}
               extraData={flatListExtraData}
               maintainVisibleContentPosition={
-                // Disable when streaming and user is at bottom - we handle auto-scroll ourselves
-                agent.status === "running" && isNearBottom
-                  ? undefined
-                  : { minIndexForVisible: 0, autoscrollToTopThreshold: 40 }
+                streamRenderStrategy.getMaintainVisibleContentPosition()
               }
               initialNumToRender={12}
               windowSize={10}
-              scrollEnabled={Platform.OS !== "web" || expandedInlineToolCallIds.size === 0}
-              inverted
+              scrollEnabled={streamScrollEnabled}
+              showsVerticalScrollIndicator={!showDesktopWebScrollbar}
+              inverted={streamRenderStrategy.getFlatListInverted()}
             />
-          </MessageOuterSpacingProvider>
-
-          {/* Scroll to bottom button */}
-          {!isNearBottom && (
-            <Animated.View
-              style={stylesheet.scrollToBottomContainer}
-              entering={scrollIndicatorFadeIn}
-              exiting={scrollIndicatorFadeOut}
+          ) : (
+            <ScrollView
+              ref={scrollViewRef}
+              testID="agent-chat-scroll"
+              contentContainerStyle={listContentContainerStyle}
+              style={stylesheet.list}
+              onLayout={handleListLayout}
+              onScroll={handleScroll}
+              scrollEventThrottle={16}
+              onContentSizeChange={handleContentSizeChange}
+              scrollEnabled={streamScrollEnabled}
+              showsVerticalScrollIndicator={!showDesktopWebScrollbar}
             >
-              <View style={stylesheet.scrollToBottomInner}>
-                <Pressable
-                  style={stylesheet.scrollToBottomButton}
-                  onPress={scrollToBottom}
-                >
-                  <ChevronDown
-                    size={24}
-                    color={stylesheet.scrollToBottomIcon.color}
-                  />
-                </Pressable>
-              </View>
-            </Animated.View>
+              {headerEdgeContent ? (
+                <View style={listEdgeSlotProps.ListHeaderComponentStyle}>
+                  {headerEdgeContent}
+                </View>
+              ) : null}
+              {nonVirtualizedItems}
+              {flatListData.length === 0 ? listEmptyComponent : null}
+              {footerEdgeContent ? (
+                <View style={listEdgeSlotProps.ListFooterComponentStyle}>
+                  {footerEdgeContent}
+                </View>
+              ) : null}
+              <View ref={bottomAnchorRef} collapsable={false} />
+            </ScrollView>
           )}
-        </View>
+        </MessageOuterSpacingProvider>
+        <WebDesktopScrollbarOverlay
+          enabled={showDesktopWebScrollbar}
+          metrics={streamScrollbarMetrics}
+          inverted={streamRenderStrategy.getOverlayScrollbarInverted()}
+          onScrollToOffset={(nextOffset) => {
+            streamRenderStrategy.scrollToOffset({
+              refs: streamRenderRefs,
+              offset: nextOffset,
+              animated: false,
+            });
+          }}
+        />
+
+        {/* Scroll to bottom button */}
+        {!isNearBottom && (
+          <Animated.View
+            style={stylesheet.scrollToBottomContainer}
+            entering={scrollIndicatorFadeIn}
+            exiting={scrollIndicatorFadeOut}
+          >
+            <View style={stylesheet.scrollToBottomInner}>
+              <Pressable
+                style={stylesheet.scrollToBottomButton}
+                onPress={scrollToBottom}
+              >
+                <ChevronDown
+                  size={24}
+                  color={stylesheet.scrollToBottomIcon.color}
+                />
+              </Pressable>
+            </View>
+          </Animated.View>
+        )}
+      </View>
     </ToolCallSheetProvider>
   );
-}
+});
 
 function normalizeInlinePath(
   rawPath: string,
@@ -1212,13 +1564,21 @@ const stylesheet = StyleSheet.create((theme) => ({
     maxWidth: MAX_CONTENT_WIDTH,
     alignSelf: "center",
   },
-  list: {
-    flex: 1,
+  listContentContainer: {
+    paddingVertical: 0,
+    flexGrow: 1,
     paddingHorizontal: {
       xs: theme.spacing[2],
       md: theme.spacing[4],
     },
   },
+  forwardListContentContainer: {
+    paddingTop: theme.spacing[4],
+    paddingBottom: theme.spacing[4],
+  },
+  list: {
+    flex: 1,
+  },
   streamItemWrapper: {
     width: "100%",
     maxWidth: MAX_CONTENT_WIDTH,

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>;