fix: update lockfile signatures and Nix hash

- Remove orphaned PID lock code from bootstrap (moved to supervisor)
- Fix worktree archive adapter to look up workspace by directory
- Replace registerWorktreeWorkspaceRecord with inline SQLite implementation
- Remove unused imports (stat, createPersistedWorkspaceRecord, PersistedProjectRecord)

.github/FUNDING.yml

@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: [boudra]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

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

@@ -4,6 +4,7 @@ on:
   push:
     tags:
       - "v*"
+      - "android-v*"
   workflow_dispatch:
     inputs:
       tag:
@@ -16,7 +17,7 @@ concurrency:
   cancel-in-progress: false
 
 env:
-  RELEASE_TAG: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref_name }}
+  SOURCE_TAG: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref_name }}
 
 jobs:
   publish-android-apk:
@@ -31,6 +32,18 @@ jobs:
           fetch-depth: 0
           ref: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref }}
 
+      - name: Resolve release tag
+        shell: bash
+        run: |
+          set -euo pipefail
+          source_tag="${SOURCE_TAG}"
+          if [[ "$source_tag" =~ ^(android-)?v([0-9]+\.[0-9]+\.[0-9]+) ]]; then
+            release_tag="v${BASH_REMATCH[2]}"
+          else
+            release_tag="$source_tag"
+          fi
+          echo "RELEASE_TAG=$release_tag" >> "$GITHUB_ENV"
+
       - name: Setup Node
         uses: actions/setup-node@v4
         with:

.github/workflows/deploy-app.yml

@@ -26,6 +26,9 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Build highlight dependency
+        run: npm run build --workspace=@getpaseo/highlight
+
       - name: Typecheck
         run: npm run typecheck --workspace=@getpaseo/app
 

.github/workflows/deploy-website.yml

@@ -9,6 +9,8 @@ on:
       - 'package-lock.json'
       - 'patches/**'
       - '.github/workflows/deploy-website.yml'
+  release:
+    types: [published, edited]
   workflow_dispatch:
 
 jobs:

.github/workflows/desktop-release.yml

@@ -3,21 +3,21 @@ name: Desktop Release
 on:
   push:
     tags:
-      - "v*"
-      - "desktop-v*"
-      - "desktop-macos-v*"
-      - "desktop-linux-v*"
-      - "desktop-windows-v*"
+      - 'v*'
+      - 'desktop-v*'
+      - 'desktop-macos-v*'
+      - 'desktop-linux-v*'
+      - 'desktop-windows-v*'
   workflow_dispatch:
     inputs:
       tag:
-        description: "Existing tag to build (e.g. v0.1.0)"
+        description: 'Existing tag to build (e.g. v0.1.0)'
         required: true
         type: string
       platform:
-        description: "Optional desktop platform to build."
+        description: 'Optional desktop platform to build.'
         required: false
-        default: "all"
+        default: 'all'
         type: choice
         options:
           - all
@@ -31,6 +31,8 @@ concurrency:
 
 env:
   SOURCE_TAG: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref_name }}
+  DESKTOP_WORKSPACE: '@getpaseo/desktop'
+  DESKTOP_PACKAGE_PATH: 'packages/desktop'
 
 jobs:
   publish-macos:
@@ -40,9 +42,9 @@ jobs:
       matrix:
         include:
           - runner: macos-14
-            rust_target: aarch64-apple-darwin
+            electron_arch: arm64
           - runner: macos-15-intel
-            rust_target: x86_64-apple-darwin
+            electron_arch: x64
     permissions:
       contents: write
       packages: read
@@ -75,85 +77,39 @@ jobs:
             echo "IS_SMOKE_TAG=false" >> "$GITHUB_ENV"
           fi
 
-      - name: Set desktop version from tag
-        shell: bash
-        run: |
-          node <<'NODE'
-          const fs = require('node:fs');
-          const path = require('node:path');
-          const version = process.env.DESKTOP_VERSION;
-          if (!version) throw new Error('DESKTOP_VERSION env var is missing');
-          console.log(`Setting desktop version to ${version}`);
-
-          const tauriConfPath = path.join('packages', 'desktop', 'src-tauri', 'tauri.conf.json');
-          const tauriConfText = fs.readFileSync(tauriConfPath, 'utf8');
-          const tauriRe = /("version"\s*:\s*")([^"]+)(")/;
-          if (!tauriRe.test(tauriConfText)) throw new Error('Failed to find version in tauri.conf.json');
-          fs.writeFileSync(tauriConfPath, tauriConfText.replace(tauriRe, `$1${version}$3`));
-
-          const cargoTomlPath = path.join('packages', 'desktop', 'src-tauri', 'Cargo.toml');
-          const lines = fs.readFileSync(cargoTomlPath, 'utf8').split(/\r?\n/);
-          let inPackage = false, updated = false;
-          const result = lines.map((line) => {
-            if (/^\[package\]\s*$/.test(line)) inPackage = true;
-            else if (inPackage && /^\[/.test(line)) inPackage = false;
-            if (inPackage && /^version\s*=\s*".*"\s*$/.test(line)) {
-              updated = true;
-              return `version = "${version}"`;
-            }
-            return line;
-          });
-          if (!updated) throw new Error('Failed to update Cargo.toml version');
-          fs.writeFileSync(cargoTomlPath, result.join('\n') + '\n');
-          NODE
-
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "22"
-          cache: "npm"
+          node-version: '22'
+          cache: 'npm'
           cache-dependency-path: package-lock.json
-          registry-url: "https://npm.pkg.github.com"
-          scope: "@boudra"
-
-      - name: Install Rust stable
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          targets: ${{ matrix.rust_target }}
-
-      - name: Restore Rust cache
-        uses: Swatinem/rust-cache@v2
-        with:
-          shared-key: desktop-release-macos-${{ matrix.rust_target }}
-          workspaces: |
-            .
-            packages/desktop/src-tauri -> target
+          registry-url: 'https://npm.pkg.github.com'
+          scope: '@boudra'
 
       - name: Install JS dependencies
         run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Build web app for Tauri
+      - name: Set desktop package version from tag
+        shell: bash
+        run: |
+          node <<'NODE'
+          const fs = require('node:fs');
+          const path = require('node:path');
+
+          const version = process.env.DESKTOP_VERSION;
+          if (!version) throw new Error('DESKTOP_VERSION env var is missing');
+
+          const packageJsonPath = path.join(process.env.DESKTOP_PACKAGE_PATH, 'package.json');
+          const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+          packageJson.version = version;
+          fs.writeFileSync(packageJsonPath, `${JSON.stringify(packageJson, null, 2)}\n`);
+          NODE
+
+      - name: Build web app for desktop
         run: npm run build:web --workspace=@getpaseo/app
 
-      - name: Build managed runtime
-        run: npm run prepare:managed-runtime --workspace=@getpaseo/desktop
-
-      - name: Validate managed runtime bundle
-        run: npm run validate:managed-runtime --workspace=@getpaseo/desktop
-
-      - name: Import Apple code-signing certificate
-        uses: apple-actions/import-codesign-certs@v3
-        with:
-          p12-file-base64: ${{ secrets.APPLE_CERTIFICATE }}
-          p12-password: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
-
-      - name: Sign bundled managed runtime
-        env:
-          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
-        run: node ./packages/desktop/scripts/sign-managed-runtime-macos.mjs
-
       - name: Detect existing GitHub release state
         if: env.IS_SMOKE_TAG != 'true'
         env:
@@ -162,76 +118,36 @@ jobs:
         run: |
           set -euo pipefail
           if release_draft="$(gh release view "$RELEASE_TAG" --repo "${{ github.repository }}" --json isDraft --jq '.isDraft' 2>/dev/null)"; then
-            :
+            if [[ "$release_draft" == "true" ]]; then
+              release_type="draft"
+            else
+              release_type="release"
+            fi
           else
-            release_draft="false"
+            release_type="draft"
           fi
-          echo "RELEASE_DRAFT=$release_draft" >> "$GITHUB_ENV"
+          echo "RELEASE_TYPE=$release_type" >> "$GITHUB_ENV"
 
-      - name: Build and publish macOS Tauri release
-        if: env.IS_SMOKE_TAG != 'true'
-        id: tauri_build
-        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 ${{ env.RELEASE_TAG }}
-          releaseBody: See the assets to download and install this version.
-          releaseDraft: ${{ env.RELEASE_DRAFT }}
-          prerelease: false
-          args: --target ${{ matrix.rust_target }}
-
-      - name: Notarize and re-upload DMG
-        if: env.IS_SMOKE_TAG != 'true'
-        env:
-          APPLE_ID: ${{ secrets.APPLE_ID }}
-          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
-          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
-          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Build desktop release
         shell: bash
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          EP_GH_IGNORE_TIME: true
+          CSC_LINK: ${{ secrets.APPLE_CERTIFICATE }}
+          CSC_KEY_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
         run: |
           set -euo pipefail
-          artifacts='${{ steps.tauri_build.outputs.artifactPaths }}'
-          dmg_path=$(echo "$artifacts" | jq -r '.[] | select(endswith(".dmg"))')
-          if [ -z "$dmg_path" ]; then
-            echo "::error::No DMG found in tauri build artifacts"
-            exit 1
+          publish_mode="never"
+          publish_args=()
+          if [[ "$IS_SMOKE_TAG" != "true" ]]; then
+            publish_mode="always"
+            publish_args+=("-c.publish.releaseType=$RELEASE_TYPE")
           fi
-          echo "DMG: $dmg_path"
 
-          echo "Signing DMG..."
-          codesign --force --sign "$APPLE_SIGNING_IDENTITY" --timestamp "$dmg_path"
-
-          echo "Submitting DMG for notarization..."
-          xcrun notarytool submit "$dmg_path" \
-            --apple-id "$APPLE_ID" \
-            --password "$APPLE_PASSWORD" \
-            --team-id "$APPLE_TEAM_ID" \
-            --wait
-
-          echo "Stapling notarization ticket..."
-          xcrun stapler staple "$dmg_path"
-
-          echo "Verifying..."
-          spctl --assess --type install --verbose "$dmg_path"
-
-          echo "Replacing release asset with notarized DMG..."
-          gh release upload "$RELEASE_TAG" "$dmg_path" --repo "${{ github.repository }}" --clobber
-
-      - name: Build macOS app (smoke only)
-        if: env.IS_SMOKE_TAG == 'true'
-        run: npm run tauri --workspace=@getpaseo/desktop build -- --target ${{ matrix.rust_target }} --no-bundle
+          npm run build --workspace="$DESKTOP_WORKSPACE" -- --publish "$publish_mode" --mac --${{ matrix.electron_arch }} "${publish_args[@]}"
 
   publish-linux:
     if: ${{ (github.event_name == 'workflow_dispatch' && (github.event.inputs.platform == 'all' || github.event.inputs.platform == 'linux')) || (github.event_name == 'push' && (startsWith(github.ref_name, 'v') || startsWith(github.ref_name, 'desktop-v') || startsWith(github.ref_name, 'desktop-linux-v'))) }}
@@ -267,89 +183,38 @@ jobs:
             echo "IS_SMOKE_TAG=false" >> "$GITHUB_ENV"
           fi
 
-      - name: Set desktop version from tag
-        shell: bash
-        run: |
-          node <<'NODE'
-          const fs = require('node:fs');
-          const path = require('node:path');
-          const version = process.env.DESKTOP_VERSION;
-          if (!version) throw new Error('DESKTOP_VERSION env var is missing');
-          console.log(`Setting desktop version to ${version}`);
-
-          const tauriConfPath = path.join('packages', 'desktop', 'src-tauri', 'tauri.conf.json');
-          const tauriConfText = fs.readFileSync(tauriConfPath, 'utf8');
-          const tauriRe = /("version"\s*:\s*")([^"]+)(")/;
-          if (!tauriRe.test(tauriConfText)) throw new Error('Failed to find version in tauri.conf.json');
-          fs.writeFileSync(tauriConfPath, tauriConfText.replace(tauriRe, `$1${version}$3`));
-
-          const cargoTomlPath = path.join('packages', 'desktop', 'src-tauri', 'Cargo.toml');
-          const lines = fs.readFileSync(cargoTomlPath, 'utf8').split(/\r?\n/);
-          let inPackage = false, updated = false;
-          const result = lines.map((line) => {
-            if (/^\[package\]\s*$/.test(line)) inPackage = true;
-            else if (inPackage && /^\[/.test(line)) inPackage = false;
-            if (inPackage && /^version\s*=\s*".*"\s*$/.test(line)) {
-              updated = true;
-              return `version = "${version}"`;
-            }
-            return line;
-          });
-          if (!updated) throw new Error('Failed to update Cargo.toml version');
-          fs.writeFileSync(cargoTomlPath, result.join('\n') + '\n');
-          NODE
-
-      - name: Install Linux packaging dependencies
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y libwebkit2gtk-4.1-dev libgtk-3-dev libappindicator3-dev librsvg2-dev patchelf libfuse2
-
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "22"
-          cache: "npm"
+          node-version: '22'
+          cache: 'npm'
           cache-dependency-path: package-lock.json
-          registry-url: "https://npm.pkg.github.com"
-          scope: "@boudra"
-
-      - name: Install Rust stable
-        uses: dtolnay/rust-toolchain@stable
-
-      - name: Restore Rust cache
-        uses: Swatinem/rust-cache@v2
-        with:
-          shared-key: desktop-release-linux
-          workspaces: |
-            .
-            packages/desktop/src-tauri -> target
+          registry-url: 'https://npm.pkg.github.com'
+          scope: '@boudra'
 
       - name: Install JS dependencies
         run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Build web app for Tauri
-        run: npm run build:web --workspace=@getpaseo/app
-
-      - name: Build managed runtime
-        run: npm run prepare:managed-runtime --workspace=@getpaseo/desktop
-
-      - name: Validate managed runtime bundle
-        run: npm run validate:managed-runtime --workspace=@getpaseo/desktop
-
-      - name: Strip CUDA dependencies from onnxruntime
+      - name: Set desktop package version from tag
         shell: bash
         run: |
-          find packages/desktop/src-tauri/resources/managed-runtime -path '*/onnxruntime-node/bin/*' \( -name '*cuda*' -o -name '*tensorrt*' \) -delete || true
-          # Remove CUDA shared library references from onnxruntime .so files so linuxdeploy
-          # doesn't try to bundle them (they're optional runtime deps, not needed for CPU inference)
-          for f in $(find packages/desktop/src-tauri/resources/managed-runtime -path '*/onnxruntime-node/bin/*' \( -name '*.so' -o -name '*.so.*' \)); do
-            for lib in $(patchelf --print-needed "$f" 2>/dev/null | grep -iE 'cublas|cudnn|cudart|cufft|curand|cusolver|cusparse|nccl|nvrtc|tensorrt|nvinfer'); do
-              echo "Removing needed $lib from $f"
-              patchelf --remove-needed "$lib" "$f"
-            done
-          done
+          node <<'NODE'
+          const fs = require('node:fs');
+          const path = require('node:path');
+
+          const version = process.env.DESKTOP_VERSION;
+          if (!version) throw new Error('DESKTOP_VERSION env var is missing');
+
+          const packageJsonPath = path.join(process.env.DESKTOP_PACKAGE_PATH, 'package.json');
+          const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+          packageJson.version = version;
+          fs.writeFileSync(packageJsonPath, `${JSON.stringify(packageJson, null, 2)}\n`);
+          NODE
+
+      - name: Build web app for desktop
+        run: npm run build:web --workspace=@getpaseo/app
 
       - name: Detect existing GitHub release state
         if: env.IS_SMOKE_TAG != 'true'
@@ -359,97 +224,31 @@ jobs:
         run: |
           set -euo pipefail
           if release_draft="$(gh release view "$RELEASE_TAG" --repo "${{ github.repository }}" --json isDraft --jq '.isDraft' 2>/dev/null)"; then
-            :
+            if [[ "$release_draft" == "true" ]]; then
+              release_type="draft"
+            else
+              release_type="release"
+            fi
           else
-            release_draft="false"
+            release_type="draft"
           fi
-          echo "RELEASE_DRAFT=$release_draft" >> "$GITHUB_ENV"
+          echo "RELEASE_TYPE=$release_type" >> "$GITHUB_ENV"
 
-      - name: Build Linux Tauri release
-        if: env.IS_SMOKE_TAG != 'true'
-        id: linux_tauri
-        continue-on-error: true
-        env:
-          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
-          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
-          NO_STRIP: "1"
-          APPIMAGE_EXTRACT_AND_RUN: "1"
+      - name: Build desktop release
         shell: bash
-        run: |
-          set -euo pipefail
-          npm run tauri --workspace=@getpaseo/desktop build -- --bundles appimage
-
-      - name: Attempt manual Linux AppImage fallback
-        if: env.IS_SMOKE_TAG != 'true' && steps.linux_tauri.outcome == 'failure'
-        env:
-          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
-          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
-        shell: bash
-        run: |
-          set -euxo pipefail
-          appimage_dir="packages/desktop/src-tauri/target/release/bundle/appimage"
-          appdir_path="$appimage_dir/Paseo.AppDir"
-          canonical_appimage="$appimage_dir/Paseo_${DESKTOP_VERSION}_amd64.AppImage"
-          existing_appimage="$(find "$appimage_dir" -maxdepth 1 -type f -name '*.AppImage' | head -n 1)"
-          if [ -n "$existing_appimage" ]; then
-            if [ "$existing_appimage" != "$canonical_appimage" ]; then
-              mv "$existing_appimage" "$canonical_appimage"
-            fi
-            if [ ! -f "$canonical_appimage.sig" ]; then
-              npx tauri signer sign "$canonical_appimage"
-            fi
-            exit 0
-          fi
-          if [ ! -d "$appdir_path" ]; then
-            echo "::error::AppDir was not generated at $appdir_path"
-            exit 1
-          fi
-          cp --remove-destination "$appdir_path/usr/share/applications/Paseo.desktop" "$appdir_path/Paseo.desktop"
-          cp --remove-destination "$appdir_path/Paseo.png" "$appdir_path/.DirIcon"
-          env | sort | grep -E '^(APPIMAGE|DESKTOP_VERSION|NO_STRIP|RELEASE_TAG|SOURCE_TAG|TAURI_)' || true
-          tools_dir="$(mktemp -d)"
-          curl -fsSL https://github.com/AppImage/appimagetool/releases/download/continuous/appimagetool-x86_64.AppImage -o "$tools_dir/appimagetool-x86_64.AppImage"
-          chmod +x "$tools_dir/appimagetool-x86_64.AppImage"
-          ARCH=x86_64 APPIMAGE_EXTRACT_AND_RUN=1 "$tools_dir/appimagetool-x86_64.AppImage" "$appdir_path" "$canonical_appimage"
-          npx tauri signer sign "$canonical_appimage"
-
-      - name: Fail Linux release when AppImage bundling fails
-        if: env.IS_SMOKE_TAG != 'true' && steps.linux_tauri.outcome == 'failure'
-        shell: bash
-        run: |
-          set -euo pipefail
-          shopt -s nullglob
-          assets=(
-            packages/desktop/src-tauri/target/release/bundle/appimage/*.AppImage
-            packages/desktop/src-tauri/target/release/bundle/appimage/*.AppImage.sig
-          )
-          if [ "${#assets[@]}" -eq 0 ]; then
-            echo "::error::Linux AppImage assets are still missing after the manual fallback."
-            exit 1
-          fi
-
-      - name: Upload Linux release assets
-        if: env.IS_SMOKE_TAG != 'true'
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        shell: bash
+          EP_GH_IGNORE_TIME: true
         run: |
           set -euo pipefail
-          shopt -s nullglob
-          assets=(
-            packages/desktop/src-tauri/target/release/bundle/appimage/*.AppImage
-            packages/desktop/src-tauri/target/release/bundle/appimage/*.AppImage.sig
-          )
-          if [ "${#assets[@]}" -eq 0 ]; then
-            echo "::error::No Linux AppImage assets were produced."
-            exit 1
+          publish_mode="never"
+          publish_args=()
+          if [[ "$IS_SMOKE_TAG" != "true" ]]; then
+            publish_mode="always"
+            publish_args+=("-c.publish.releaseType=$RELEASE_TYPE")
           fi
-          printf 'Uploading Linux assets:\n%s\n' "${assets[@]}"
-          gh release upload "$RELEASE_TAG" "${assets[@]}" --repo "${{ github.repository }}" --clobber
 
-      - name: Build Linux app (smoke only)
-        if: env.IS_SMOKE_TAG == 'true'
-        run: npm run tauri --workspace=@getpaseo/desktop build -- --no-bundle
+          npm run build --workspace="$DESKTOP_WORKSPACE" -- --publish "$publish_mode" --linux --x64 "${publish_args[@]}"
 
   publish-windows:
     if: ${{ (github.event_name == 'workflow_dispatch' && (github.event.inputs.platform == 'all' || github.event.inputs.platform == 'windows')) || (github.event_name == 'push' && (startsWith(github.ref_name, 'v') || startsWith(github.ref_name, 'desktop-v') || startsWith(github.ref_name, 'desktop-windows-v'))) }}
@@ -485,75 +284,46 @@ jobs:
             echo "IS_SMOKE_TAG=false" >> "$GITHUB_ENV"
           fi
 
-      - name: Set desktop version from tag
-        shell: bash
-        run: |
-          node <<'NODE'
-          const fs = require('node:fs');
-          const path = require('node:path');
-          const version = process.env.DESKTOP_VERSION;
-          if (!version) throw new Error('DESKTOP_VERSION env var is missing');
-          console.log(`Setting desktop version to ${version}`);
-
-          const tauriConfPath = path.join('packages', 'desktop', 'src-tauri', 'tauri.conf.json');
-          const tauriConfText = fs.readFileSync(tauriConfPath, 'utf8');
-          const tauriRe = /("version"\s*:\s*")([^"]+)(")/;
-          if (!tauriRe.test(tauriConfText)) throw new Error('Failed to find version in tauri.conf.json');
-          fs.writeFileSync(tauriConfPath, tauriConfText.replace(tauriRe, `$1${version}$3`));
-
-          const cargoTomlPath = path.join('packages', 'desktop', 'src-tauri', 'Cargo.toml');
-          const lines = fs.readFileSync(cargoTomlPath, 'utf8').split(/\r?\n/);
-          let inPackage = false, updated = false;
-          const result = lines.map((line) => {
-            if (/^\[package\]\s*$/.test(line)) inPackage = true;
-            else if (inPackage && /^\[/.test(line)) inPackage = false;
-            if (inPackage && /^version\s*=\s*".*"\s*$/.test(line)) {
-              updated = true;
-              return `version = "${version}"`;
-            }
-            return line;
-          });
-          if (!updated) throw new Error('Failed to update Cargo.toml version');
-          fs.writeFileSync(cargoTomlPath, result.join('\n') + '\n');
-          NODE
-
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "22"
-          cache: "npm"
+          node-version: '22'
+          cache: 'npm'
           cache-dependency-path: package-lock.json
-          registry-url: "https://npm.pkg.github.com"
-          scope: "@boudra"
-
-      - name: Install Rust stable
-        uses: dtolnay/rust-toolchain@stable
-
-      - name: Restore Rust cache
-        uses: Swatinem/rust-cache@v2
-        with:
-          shared-key: desktop-release-windows
-          workspaces: |
-            .
-            packages/desktop/src-tauri -> target
+          registry-url: 'https://npm.pkg.github.com'
+          scope: '@boudra'
 
       - name: Install JS dependencies
         run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Build web app for Tauri
+      - name: Set desktop package version from tag
+        shell: bash
+        run: |
+          node <<'NODE'
+          const fs = require('node:fs');
+          const path = require('node:path');
+
+          const version = process.env.DESKTOP_VERSION;
+          if (!version) throw new Error('DESKTOP_VERSION env var is missing');
+
+          const packageJsonPath = path.join(process.env.DESKTOP_PACKAGE_PATH, 'package.json');
+          const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+          packageJson.version = version;
+          fs.writeFileSync(packageJsonPath, `${JSON.stringify(packageJson, null, 2)}\n`);
+          NODE
+
+      - name: Build workspace dependencies
+        run: npm run build:workspace-deps --workspace=@getpaseo/app
+
+      - name: Build web app for desktop
         shell: pwsh
         run: |
           $patchPath = (Get-Item "$env:GITHUB_WORKSPACE/scripts/metro-config-windows-loader-patch.cjs").FullName
           $env:NODE_OPTIONS = "--require=$patchPath"
-          npm run build:web --workspace=@getpaseo/app
-
-      - name: Build managed runtime
-        run: npm run prepare:managed-runtime --workspace=@getpaseo/desktop
-
-      - name: Validate managed runtime bundle
-        run: npm run validate:managed-runtime --workspace=@getpaseo/desktop
+          npx expo export --platform web
+        working-directory: packages/app
 
       - name: Detect existing GitHub release state
         if: env.IS_SMOKE_TAG != 'true'
@@ -563,31 +333,28 @@ jobs:
         run: |
           set -euo pipefail
           if release_draft="$(gh release view "$RELEASE_TAG" --repo "${{ github.repository }}" --json isDraft --jq '.isDraft' 2>/dev/null)"; then
-            :
+            if [[ "$release_draft" == "true" ]]; then
+              release_type="draft"
+            else
+              release_type="release"
+            fi
           else
-            release_draft="false"
+            release_type="draft"
           fi
-          echo "RELEASE_DRAFT=$release_draft" >> "$GITHUB_ENV"
+          echo "RELEASE_TYPE=$release_type" >> "$GITHUB_ENV"
 
-      - name: Build and publish Windows Tauri release
-        if: env.IS_SMOKE_TAG != 'true'
-        uses: tauri-apps/tauri-action@v0
+      - name: Build desktop release
+        shell: bash
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          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 ${{ env.RELEASE_TAG }}
-          releaseBody: See the assets to download and install this version.
-          releaseDraft: ${{ env.RELEASE_DRAFT }}
-          prerelease: false
-          args: --bundles nsis
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          EP_GH_IGNORE_TIME: true
+        run: |
+          set -euo pipefail
+          publish_mode="never"
+          publish_args=()
+          if [[ "$IS_SMOKE_TAG" != "true" ]]; then
+            publish_mode="always"
+            publish_args+=("-c.publish.releaseType=$RELEASE_TYPE")
+          fi
 
-      - name: Build Windows app (smoke only)
-        if: env.IS_SMOKE_TAG == 'true'
-        run: npm run tauri --workspace=@getpaseo/desktop build -- --no-bundle
-        env:
-          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
-          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
+          npm run build --workspace="$DESKTOP_WORKSPACE" -- --publish "$publish_mode" --win --x64 "${publish_args[@]}"

.github/workflows/fix-nix-hash.yml

@@ -0,0 +1,45 @@
+name: Fix Nix hash
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'package.json'
+      - 'package-lock.json'
+  pull_request:
+    paths:
+      - 'package.json'
+      - 'package-lock.json'
+
+permissions:
+  contents: write
+
+jobs:
+  fix-nix-hash:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.head_ref || github.ref }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - uses: cachix/install-nix-action@v31
+        with:
+          nix_path: nixpkgs=channel:nixos-unstable
+
+      - name: Fix lockfile and update hash
+        run: ./scripts/update-nix.sh
+
+      - name: Commit changes
+        run: |
+          git diff --quiet package-lock.json nix/package.nix && exit 0
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git add package-lock.json nix/package.nix
+          git commit -m "fix: update lockfile signatures and Nix hash"
+          git push

.github/workflows/nix-build.yml

@@ -0,0 +1,59 @@
+name: Nix Build
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'nix/**'
+      - 'flake.nix'
+      - 'flake.lock'
+      - 'package.json'
+      - 'package-lock.json'
+      - 'packages/highlight/**'
+      - 'packages/server/**'
+      - 'packages/relay/**'
+      - 'packages/cli/**'
+  pull_request:
+    branches: [main]
+    paths:
+      - 'nix/**'
+      - 'flake.nix'
+      - 'flake.lock'
+      - 'package.json'
+      - 'package-lock.json'
+      - 'packages/highlight/**'
+      - 'packages/server/**'
+      - 'packages/relay/**'
+      - 'packages/cli/**'
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    continue-on-error: false
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: cachix/install-nix-action@v31
+        with:
+          nix_path: nixpkgs=channel:nixos-unstable
+
+      - name: Build Nix package
+        run: nix build .#default -o result
+
+      - name: Verify lockfile is complete
+        # npm silently omits resolved/integrity fields in workspace monorepos.
+        # Nix needs them for offline builds. See https://github.com/npm/cli/issues/4460
+        run: |
+          node scripts/fix-lockfile.mjs package-lock.json
+          git diff --exit-code package-lock.json || {
+            echo "ERROR: package-lock.json has missing resolved/integrity fields."
+            echo "This is a known npm bug: https://github.com/npm/cli/issues/4460"
+            echo "Run 'node scripts/fix-lockfile.mjs' and commit the result."
+            exit 1
+          }
+
+      - name: Check npmDepsHash is up to date
+        run: ./scripts/update-nix.sh --check

.github/workflows/server-ci.yml

@@ -36,6 +36,9 @@ jobs:
       - name: Install server dependencies
         run: npm install --workspace=@getpaseo/server --include-workspace-root
 
+      - name: Build highlight dependency
+        run: npm run build --workspace=@getpaseo/highlight
+
       - name: Build relay dependency
         run: npm run build --workspace=@getpaseo/relay
 

.gitignore

@@ -46,6 +46,9 @@ test-results/
 # Vercel
 .vercel/
 
+# Expo
+.expo/
+
 # Misc
 *.pem
 .vercel

.prettierignore

@@ -1,21 +0,0 @@
-# Dependencies
-node_modules
-
-# Build outputs
-dist
-.next
-.expo
-build
-*.tsbuildinfo
-
-# Coverage
-coverage
-
-# Lock files
-*.lock
-package-lock.json
-
-# Generated
-android
-ios
-.turbo

.prettierrc

@@ -1,7 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "tabWidth": 2,
-  "printWidth": 100
-}

CHANGELOG.md

@@ -1,12 +1,129 @@
 # Changelog
 
-## 0.1.29 - 2026-03-18
-
-### Improved
-- Improved `paseo daemon status` with provider binary resolution and version checks for Claude, Codex, and OpenCode.
+## 0.1.38 - 2026-03-30
 
 ### Fixed
-- Fixed desktop-managed agent startup failures caused by the daemon using the GUI process PATH instead of the user's login shell PATH.
+- Fixed daemon startup race where the app could time out connecting on first launch because the PID file advertised a listen address before the server was ready.
+- Fixed daemon log rotation losing startup traces — trace-level WebSocket logs no longer include full message payloads.
+
+## 0.1.37 - 2026-03-29
+
+### Added
+- Custom window controls on Windows and Linux — the native titlebar is replaced with overlay controls that match the app's design.
+- Desktop file logging with electron-log for easier debugging of daemon and app issues.
+
+### Fixed
+- Fixed broken PATH propagation and Claude binary resolution on Windows.
+- Dictation errors now show a visible toast instead of failing silently.
+
+## 0.1.36 - 2026-03-27
+
+### Fixed
+- Fixed Windows drive-letter path handling across the codebase.
+- Fixed stale Nix hash with automatic lockfile-change detection.
+
+### Added
+- Added metrics collection and terminal performance tests.
+
+## 0.1.35 - 2026-03-26
+
+### Improved
+- Faster app startup by redirecting to the welcome screen immediately and showing host connection status inline.
+- Codex file deletions now display correctly as removed lines in diffs.
+- OpenCode questions are now surfaced in the permission UI.
+
+### Fixed
+- Fixed queued prompt dispatch after idle transition.
+- Replaced bash-only `mapfile` with a portable `while-read` loop in the chat script.
+
+### Added
+- Added support for Nix and NixOS installation.
+
+## 0.1.34 - 2026-03-25
+
+### Added
+- Added `paseo archive` as a top-level alias for `paseo agent archive`.
+- Added the `PASEO_AGENT_ID` environment variable for Claude and Codex agents.
+- Added a redesigned command autocomplete with a detail card and dropdown styling.
+- Linked Android download surfaces to the Google Play Store.
+
+### Improved
+- Autonomous turns now complete gracefully on interrupt instead of being canceled.
+- Thinking/model selection now always resolves to a real option instead of showing a generic Default choice.
+- Restored per-provider form preferences and removed the Auto model fallback.
+- Improved Codex activity logs with clearer tool-call summaries.
+- Reduced unnecessary re-renders in the agent panel and input area for smoother interaction.
+- Improved chat transcript readability.
+
+### Fixed
+- Fixed `paseo send --no-wait` not taking effect.
+- Fixed stale abort results contaminating replacement turns after an interrupt.
+- Fixed Claude interrupt handling and autonomous wake reliability.
+- Fixed nested Claude Code session detection and provider availability checks.
+- Fixed agent input focus scoping across panels.
+- Fixed terminal snapshot ordering when subscribing.
+- Fixed `chat read --since` to accept message IDs.
+- Fixed keyboard pane focus syncing with the active panel.
+- Fixed assistant text selection on web.
+- Fixed archived-agent notifications still appearing in chat rooms.
+- Fixed the attach-images button interaction in the message composer.
+- Pruned wrong-platform native binaries from Electron desktop builds.
+
+## 0.1.33 - 2026-03-23
+
+### Fixed
+- Fixed the desktop app failing to reopen after closing on macOS — the daemon and agent processes were registering with Launch Services as instances of the main app, blocking subsequent launches.
+- Fixed dictation not working in the packaged desktop app — the microphone entitlement was missing from the hardened runtime configuration.
+- Fixed leaked Claude Code child processes when agents were closed — the SDK query stream was not being properly shut down.
+- The notification test button now surfaces errors instead of failing silently.
+
+## 0.1.32 - 2026-03-23
+
+### Added
+- Fully rebindable keyboard shortcuts with chord support — all shortcuts are now declarative with proper Cmd (Mac) vs Ctrl (Windows/Linux) separation.
+- Migrated the desktop app from Tauri to Electron, with macOS notarization, code signing, and Linux Wayland support.
+- Added line numbers and word-wrap toggle to file previews.
+- Added an archived agent callout with an unarchive button so you can restore agents directly from the chat view.
+- Added workspace kind indicators in the sidebar (e.g. worktree vs standalone).
+- Expanded diff syntax highlighting to cover more languages.
+- Added status bar tooltips for project and agent status.
+
+### Improved
+- Redesigned the mobile tab switcher as a compact header row with quick access to new agents and terminals.
+- Streamlined workspace creation — worktrees are now created inline with a single action instead of a multi-step flow.
+- Agent history now streams from disk on reconnect, so you see past messages immediately instead of a blank screen.
+- Automatic cleanup of stale workspaces: deleted worktree directories and fully-archived workspaces are pruned automatically.
+- After archiving a workspace, the app now redirects to the next available workspace instead of leaving you on a dead screen.
+- Reopening an archived agent tab now keeps it open instead of collapsing back to archived state.
+- Reduced unnecessary re-renders across the workspace screen, sidebar, and agent list for smoother scrolling and interaction.
+- Agent list no longer refreshes in the background when the screen is unfocused, saving resources.
+- Desktop key repeat now works correctly on macOS.
+- Desktop notifications on macOS are more reliable.
+- Daemon startup no longer blocks on model downloads.
+- Better error messages from the daemon — RPC errors now include the actual underlying details.
+
+### Fixed
+- Fixed user messages appearing as assistant output in the timeline when messages contained structured content blocks.
+- Fixed archived workspace routing so navigating to an archived session no longer breaks the app.
+- Fixed Linux AppImage failing to launch on Wayland-only desktops.
+- Fixed desktop window drag coordinates being applied when they shouldn't be.
+
+## 0.1.30 - 2026-03-19
+
+### Added
+- Added terminal tabs, split pane controls, and drop previews for workspace layouts.
+- Added a combined model selector and agent mode visuals across key UI surfaces.
+- Added Open Graph metadata improvements for richer website sharing previews.
+
+### Improved
+- Improved workspace navigation with better active-workspace tracking and keyboard-driven pane interactions.
+- Improved terminal scrollbar behavior, pane focus handling, and status bar/message input spacing.
+- Improved project picker path display and general workspace UI polish.
+
+### Fixed
+- Fixed agent startup reliability by tightening PATH resolution and surfacing missing provider binaries in status.
+- Fixed workspace route syncing, drag hit areas, and git diff panel header styling regressions.
+- Fixed website mobile horizontal scrolling and ensured the workspace audio module builds during EAS installs.
 
 ## 0.1.28 - 2026-03-15
 
@@ -157,7 +274,7 @@
 - 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.
+- Enabled drag interactions in previously unhandled areas on the desktop draft screen.
 - Hid empty filter groups in the left sidebar.
 
 ### Fixed
@@ -179,7 +296,7 @@
 - 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 desktop settings and permissions UX on desktop.
 - Improved scrollbar visibility, drag interactions, tracking, and animation timing on web/desktop.
 
 ### Fixed
@@ -218,7 +335,7 @@
 - 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 desktop 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

CLAUDE.md

@@ -12,7 +12,7 @@ This is an npm workspace monorepo:
 - `packages/app` — Mobile + web client (Expo)
 - `packages/cli` — Docker-style CLI (`paseo run/ls/logs/wait`)
 - `packages/relay` — E2E encrypted relay for remote access
-- `packages/desktop` — Tauri desktop wrapper
+- `packages/desktop` — Electron desktop wrapper
 - `packages/website` — Marketing site (paseo.sh)
 
 ## Documentation
@@ -35,6 +35,8 @@ npm run dev                          # Start daemon + Expo in Tmux
 npm run cli -- ls -a -g              # List all agents
 npm run cli -- daemon status         # Check daemon status
 npm run typecheck                    # Always run after changes
+npm run db:query                     # Show DB table row counts
+npm run db:query -- "SELECT ..."     # Run arbitrary SQL against SQLite
 ```
 
 See [docs/DEVELOPMENT.md](docs/DEVELOPMENT.md) for full setup, build sync requirements, and debugging.
@@ -46,9 +48,7 @@ See [docs/DEVELOPMENT.md](docs/DEVELOPMENT.md) for full setup, build sync requir
 - **NEVER add auth checks to tests** — agent providers handle their own auth.
 - **Always run typecheck after every change.**
 
-## Orchestrator mode
+## Debugging
 
-- Prefix agent titles with "🎭" (e.g., "🎭 Feature Implementation")
-- Launch agents in the most permissive mode
-- Set cwd to the repository root
-- When agent control tool calls fail, list agents first — it may be a wait timeout
+
+Find the complete daemon logs and traces in the $PASEO_HOME/daemon.log

README.md

@@ -4,47 +4,107 @@
 
 <h1 align="center">Paseo</h1>
 
-<p align="center">One interface for all your coding agents.</p>
+<p align="center">One interface for all your Claude Code, Codex and OpenCode agents.</p>
 
 <p align="center">
-  <img src="https://paseo.sh/paseo-mockup.png" alt="Paseo app screenshot" width="100%">
+  <img src="https://paseo.sh/hero-mockup.png" alt="Paseo app screenshot" width="100%">
+</p>
+
+<p align="center">
+  <img src="https://paseo.sh/mobile-mockup.png" alt="Paseo mobile app" width="100%">
 </p>
 
 ---
 
 Run agents in parallel on your own machines. Ship from your phone or your desk.
 
-- **Self-hosted** — Agents run on your machine with your full dev environment. Use your tools, your configs, and your skills.
-- **Multi-provider** — Claude Code, Codex, and OpenCode through the same interface. Pick the right model for each job.
-- **Voice control** — Dictate tasks or talk through problems in voice mode. Hands-free when you need it.
-- **Cross-device** — iOS, Android, desktop, web, and CLI. Start work at your desk, check in from your phone, script it from the terminal.
+- **Self-hosted:** Agents run on your machine with your full dev environment. Use your tools, your configs, and your skills.
+- **Multi-provider:** Claude Code, Codex, and OpenCode through the same interface. Pick the right model for each job.
+- **Voice control:** Dictate tasks or talk through problems in voice mode. Hands-free when you need it.
+- **Cross-device:** iOS, Android, desktop, web, and CLI. Start work at your desk, check in from your phone, script it from the terminal.
+- **Privacy-first:** Paseo doesn't have any telemetry, tracking, or forced log-ins.
 
 ## Getting Started
 
-Download the desktop app from [paseo.sh](https://paseo.sh) or the [GitHub releases page](https://github.com/getpaseo/paseo/releases) — it bundles the daemon so there's nothing else to install.
+Paseo runs a local server called the daemon that manages your coding agents. Clients like the desktop app, mobile app, web app, and CLI connect to it.
 
-### Headless / server mode
+### Prerequisites
 
-To run the daemon on a remote or headless machine:
+You need at least one agent CLI installed and configured with your credentials:
+
+- [Claude Code](https://docs.anthropic.com/en/docs/claude-code)
+- [Codex](https://github.com/openai/codex)
+- [OpenCode](https://github.com/anomalyco/opencode)
+
+### Desktop app (recommended)
+
+Download it from [paseo.sh/download](https://paseo.sh/download) or the [GitHub releases page](https://github.com/getpaseo/paseo/releases). Open the app and the daemon starts automatically. Nothing else to install.
+
+To connect from your phone, scan the QR code shown in Settings.
+
+### CLI / headless
+
+Install the CLI and start Paseo:
 
 ```bash
 npm install -g @getpaseo/cli
 paseo
 ```
 
-Then connect from the desktop app, mobile app, or CLI.
+This shows a QR code in the terminal. Connect from any client. This path is useful for servers and remote machines.
 
 For full setup and configuration, see:
 - [Docs](https://paseo.sh/docs)
 - [Configuration reference](https://paseo.sh/docs/configuration)
 
+## CLI
+
+Everything you can do in the app, you can do from the terminal.
+
+```bash
+paseo run --provider claude/opus-4.6 "implement user authentication"
+paseo run --provider codex/gpt-5.4 --worktree feature-x "implement feature X"
+
+paseo ls                           # list running agents
+paseo attach abc123                # stream live output
+paseo send abc123 "also add tests" # follow-up task
+
+# run on a remote daemon
+paseo --host workstation.local:6767 run "run the full test suite"
+```
+
+See the [full CLI reference](https://paseo.sh/docs/cli) for more.
+
+## Orchestration skills (Unstable)
+
+Experimental skills that teach agents how to use the Paseo CLI to orchestrate other agents. I am updating these very frequently as I learn new things, expect changes without notice, might be coupled to my own setup, use at your own risk.
+
+```bash
+npx skills add getpaseo/paseo
+```
+
+Then use them in any agent conversation:
+
+```bash
+# Use handoff when you discuss something with an agent but want another one to implement.
+# I use this to plan with Claude and then handoff to Codex to implement.
+/paseo-handoff hand off the authentication fix to codex 5.4 in a worktree
+
+# Use loops when you have clear acceptance criteria (aka Ralph loops).
+/paseo-loop loop a codex agent to fix the backend tests, use sonnet to verify, max 10 iterations
+
+# Orchestrator teaches the agent how to create teams and manage them via a chat room.
+# Very opinionated and expects both Codex and Claude to work.
+/paseo-orchestrator spin up a team to implement the database refactor, use chat to coordinate. use claude to plan and codex to implement and review
+```
+
 ## Development
 
 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/desktop`: Electron desktop app
 - `packages/relay`: Relay package for remote connectivity
 - `packages/website`: Marketing site and documentation (`paseo.sh`)
 
@@ -57,8 +117,12 @@ npm run dev
 # run individual surfaces
 npm run dev:server
 npm run dev:app
+npm run dev:desktop
 npm run dev:website
 
+# build the daemon
+npm run build:daemon
+
 # repo-wide checks
 npm run typecheck
 ```

SECURITY.md

@@ -51,4 +51,4 @@ Paseo wraps agent CLIs (Claude Code, Codex, OpenCode) but does not manage their
 
 ## Reporting vulnerabilities
 
-If you discover a security vulnerability, please report it privately by emailing mo@faro.so. Do not open a public issue.
+If you discover a security vulnerability, please report it privately by emailing hello@moboudra.com. Do not open a public issue.

biome.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "includes": ["**", "!*.lock"]
+  },
+  "formatter": {
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double",
+      "trailingCommas": "all",
+      "semicolons": "always"
+    }
+  },
+  "css": {
+    "parser": {
+      "cssModules": true,
+      "tailwindDirectives": true
+    }
+  },
+  "linter": {
+    "enabled": false
+  }
+}

docs/ARCHITECTURE.md

@@ -9,7 +9,7 @@ Your code never leaves your machine. Paseo is local-first.
 ```
 ┌─────────────┐    ┌─────────────┐    ┌─────────────┐
 │  Mobile App  │    │     CLI     │    │ Desktop App │
-│   (Expo)     │    │ (Commander) │    │  (Tauri)    │
+│   (Expo)     │    │ (Commander) │    │ (Electron)  │
 └──────┬───────┘    └──────┬──────┘    └──────┬──────┘
        │                   │                  │
        │    WebSocket      │    WebSocket     │    Managed subprocess
@@ -31,6 +31,14 @@ Your code never leaves your machine. Paseo is local-first.
 └───────────┘ └────────┘ └──────────┘
 ```
 
+## Components at a glance
+
+- **Daemon:** Local server that spawns and manages agent processes and exposes the WebSocket API.
+- **App:** Cross-platform Expo client for iOS, Android, web, and the shared UI used by desktop.
+- **CLI:** Terminal interface for agent workflows that can also start and manage the daemon.
+- **Desktop app:** Electron wrapper around the web app that bundles and auto-manages its own daemon.
+- **Relay:** Optional encrypted bridge for remote access without opening ports directly.
+
 ## Packages
 
 ### `packages/server` — The daemon
@@ -90,9 +98,9 @@ Enables remote access when the daemon is behind a firewall.
 
 See [SECURITY.md](../SECURITY.md) for the full threat model.
 
-### `packages/desktop` — Desktop app (Tauri)
+### `packages/desktop` — Desktop app (Electron)
 
-Tauri wrapper for macOS, Linux, and Windows.
+Electron wrapper for macOS, Linux, and Windows.
 
 - Can spawn the daemon as a managed subprocess
 - Native file access for workspace integration
@@ -180,5 +188,5 @@ $PASEO_HOME/
 ## Deployment models
 
 1. **Local daemon** (default): `paseo daemon start` on `127.0.0.1:6767`
-2. **Managed desktop**: Tauri app spawns daemon as subprocess
+2. **Managed desktop**: Electron app spawns daemon as subprocess
 3. **Remote + relay**: Daemon behind firewall, relay bridges with E2E encryption

docs/DEVELOPMENT.md

@@ -35,6 +35,25 @@ In worktrees or with `npm run dev`, ports may differ. Never assume defaults.
 
 Check `$PASEO_HOME/daemon.log` for trace-level logs.
 
+### Database queries
+
+Run arbitrary SQL against the SQLite database:
+
+```bash
+# Show table row counts
+npm run db:query
+
+# Run any SQL
+npm run db:query -- "SELECT agent_id, title, last_status FROM agent_snapshots"
+npm run db:query -- "SELECT agent_id, seq, item_kind FROM agent_timeline_rows ORDER BY committed_at DESC LIMIT 10"
+
+# Point at a specific DB directory
+npm run db:query -- --db /path/to/db "SELECT ..."
+```
+
+Auto-detects the running dev daemon's database from `/tmp/paseo-dev.*`, `PASEO_HOME`, or `~/.paseo/db`.
+Pass either a DB directory or a `paseo.sqlite` file to `--db`. The script opens the database directly in read-only mode.
+
 ## Build sync gotchas
 
 ### Relay → Daemon

docs/FILE_ICONS.md

@@ -0,0 +1,109 @@
+# File Icons
+
+The file explorer uses colored SVG icons from [`material-icon-theme`](https://github.com/material-extensions/vscode-material-icon-theme) (installed as a dev dependency in `packages/app`).
+
+Icons are inlined as SVG strings in:
+
+```
+packages/app/src/components/material-file-icons.ts
+```
+
+This file is auto-generated. Do not edit it by hand.
+
+## How it works
+
+- `SVG_ICONS` maps icon names (e.g. `"typescript"`) to raw SVG strings
+- `EXTENSION_TO_ICON` maps file extensions (e.g. `"ts"`) to icon names
+- `getFileIconSvg(fileName)` returns the SVG string for a given filename, falling back to a generic file icon
+
+## Adding a new icon
+
+1. Find the icon name in the material-icon-theme manifest:
+
+```bash
+node -e "
+const m = require('./node_modules/material-icon-theme/dist/material-icons.json');
+console.log('fileExtensions:', m.fileExtensions['YOUR_EXT']);
+console.log('languageIds:', m.languageIds['YOUR_LANG']);
+"
+```
+
+2. Verify the SVG exists:
+
+```bash
+cat node_modules/material-icon-theme/icons/ICON_NAME.svg
+```
+
+3. Add two things to `material-file-icons.ts`:
+
+   - The SVG string in `SVG_ICONS`:
+     ```ts
+     "icon_name": `<svg ...>...</svg>`,
+     ```
+
+   - The extension mapping in `EXTENSION_TO_ICON`:
+     ```ts
+     "ext": "icon_name",
+     ```
+
+4. Run `npm run typecheck` to verify.
+
+## Currently included icons
+
+53 unique icons covering these extensions:
+
+| Extension(s) | Icon |
+|---|---|
+| `ts` | typescript |
+| `tsx` | react_ts |
+| `js` | javascript |
+| `jsx` | react |
+| `py` | python |
+| `go` | go |
+| `rs` | rust |
+| `rb` | ruby |
+| `java` | java |
+| `kt` | kotlin |
+| `c` | c |
+| `cpp` | cpp |
+| `h` | h |
+| `hpp` | hpp |
+| `cs` | csharp |
+| `swift` | swift |
+| `dart` | dart |
+| `ex`, `exs` | elixir |
+| `erl` | erlang |
+| `hs` | haskell |
+| `clj` | clojure |
+| `scala` | scala |
+| `ml` | ocaml |
+| `r` | r |
+| `lua` | lua |
+| `zig` | zig |
+| `nix` | nix |
+| `php` | php |
+| `html` | html |
+| `css` | css |
+| `scss` | sass |
+| `less` | less |
+| `json` | json |
+| `yml`, `yaml` | yaml |
+| `xml` | xml |
+| `toml` | toml |
+| `md`, `markdown` | markdown |
+| `sql` | database |
+| `graphql`, `gql` | graphql |
+| `sh`, `bash` | console |
+| `tf` | terraform |
+| `hcl` | hcl |
+| `vue` | vue |
+| `svelte` | svelte |
+| `astro` | astro |
+| `wasm` | webassembly |
+| `svg` | svg |
+| `png`, `jpg`, `jpeg`, `gif`, `webp`, `ico` | image |
+| `txt` | document |
+| `conf`, `cfg`, `ini` | settings |
+| `lock` | lock |
+| `groovy` | groovy |
+| `gradle` | gradle |

docs/PRODUCT.md

@@ -0,0 +1,74 @@
+# Product
+
+What Paseo is, who it's for, and where it's going.
+
+## What is Paseo
+
+Paseo is a next-generation development environment built around agents. One interface to run, monitor, and interact with coding agents across desktop, mobile, terminal, and web.
+
+The development workflow is shifting from manually editing files to orchestrating agents that do the editing. Paseo is built for that workflow.
+
+## Core philosophy
+
+Freedom and flexibility. Every design decision follows from this:
+
+- **Multi-provider** — Use any coding agent harness. Pick the right model for each job, switch freely as the landscape shifts. No vendor-lock in.
+- **Cross-device** — Desktop, mobile, web, CLI. Start work at your desk, check progress from your phone, script from the terminal.
+- **Self-hosted** — The daemon runs on your machine. Your code, your keys, your environment. No inference markup, no cloud dependency.
+- **Respectful** - No telemetry, no forced cloud, no forced accounts
+- **Open source** — AGPL-3.0. Users can inspect, fork, and contribute.
+- **BYOK** — Bring your own keys. Use your subsidized plans and first-party provider pricing. Paseo adds zero cost on top.
+
+## How it works
+
+### Projects and workspaces
+
+Projects are grouped in the sidebar, detected automatically from your filesystem and tagged by git remote when available.
+
+Each project opens as a workspace. For git projects, the default workspace is the main checkout. Users can create additional workspaces, which are isolated copies (git worktrees) where agents work without affecting main.
+
+### Inside a workspace
+
+A workspace is a flexible canvas:
+- Launch multiple agents side by side in split panes
+- Open terminals alongside agents
+- Mix and match providers within the same workspace
+
+### The daemon
+
+Paseo is a client-server system. The daemon (Node.js) runs on your machine, manages agent processes, and streams output in real time over WebSocket. Clients connect to the daemon — locally or remotely.
+
+This architecture means:
+- The daemon can run on any machine: laptop, VM, remote server
+- Multiple clients can connect simultaneously
+- Agents keep running when you close the app
+
+## Target user
+
+Anyone who builds software:
+
+- Care about owning their tools and their data
+- Use multiple AI providers and want to switch freely
+- Run agents on real tasks across real projects
+- Want to work from multiple devices
+
+## What compounds over time
+
+- **Trust** — Showing up daily, shipping in public, being open source. Earned slowly, lost quickly.
+- **Community contributions** — Code, packaging, skills, agent configs. Contributors become advocates.
+- **Ecosystem** — Skills, integrations, shared configs. Community-built content that makes the platform more valuable.
+
+## Strategic bets
+
+1. **Models commoditize.** Value moves to the orchestration layer. The best model changes monthly — the workflow layer stays.
+2. **Multi-provider wins.** No single provider stays on top. Developers want the best model for each task.
+3. **The daemon as infrastructure.** Server/client architecture enables deployment anywhere.
+4. **Open source outlasts funding.** Open source communities are resilient. Contributors become advocates.
+
+## Current state (March 2026)
+
+- Desktop (Electron), mobile (iOS/Android), web, CLI
+- Providers: Claude Code (Agent SDK), Codex (app-server), OpenCode
+- Daily releases
+- Community contributions starting (packaging, bug fixes)
+- Key UX: split panes, keybinding customization, workspace model

docs/RELEASE.md

@@ -15,8 +15,8 @@ If asked to "release paseo" without specifying major/minor, treat it as a patch
 ## Manual step-by-step
 
 ```bash
+npm run release:check        # Typecheck, build, dry-run pack
 npm run version:all:patch    # Bump version, create commit + tag
-npm run release:check        # Validate release
 npm run release:publish      # Publish to npm
 npm run release:push         # Push HEAD + tag (triggers CI workflows)
 ```
@@ -25,24 +25,62 @@ npm run release:push         # Push HEAD + tag (triggers CI workflows)
 
 ```bash
 npm run draft-release:patch    # Bump, push tag, create draft GitHub Release
+# ... test builds from the draft release assets ...
 npm run release:finalize       # Publish npm, promote draft to published
 ```
 
 - `draft-release:patch` creates the GitHub Release as a draft so desktop assets, APK uploads, and synced notes attach to it
 - `release:finalize` publishes npm and promotes the same draft release
 - Use the same semver tag for both; don't cut a second tag
+- Desktop assets now come from the Electron package at `packages/desktop`
+- **Do NOT create a changelog entry for drafts.** The changelog entry is written only when finalizing. The website parses `CHANGELOG.md` to determine the latest published version for download links — adding an entry for a draft will point the homepage at untested assets.
+
+## Fixing a failed release build
+
+**NEVER bump the version to fix a build problem.** New versions are reserved for meaningful product changes (features, fixes, improvements). Build/CI failures are fixed on the current version.
+
+**NEVER use `workflow_dispatch` to retry release builds.** The `workflow_dispatch` trigger runs the workflow file from the default branch but checks out the code at the tag ref (`ref: ${{ inputs.tag }}`). This means build fixes committed to `main` won't be picked up — the old broken code at the tag gets built again.
+
+To retry a failed workflow, **always push a retry tag** on the commit you want to build:
+
+```bash
+# Desktop (all platforms)
+git tag -f desktop-v0.1.28 HEAD && git push origin desktop-v0.1.28 --force
+
+# Desktop (single platform)
+git tag -f desktop-macos-v0.1.28 HEAD && git push origin desktop-macos-v0.1.28 --force
+git tag -f desktop-linux-v0.1.28 HEAD && git push origin desktop-linux-v0.1.28 --force
+git tag -f desktop-windows-v0.1.28 HEAD && git push origin desktop-windows-v0.1.28 --force
+
+# Android APK
+git tag -f android-v0.1.28 HEAD && git push origin android-v0.1.28 --force
+```
+
+This ensures the checkout ref matches the actual code on `main` with the fix included.
 
 ## Notes
 
 - `version:all:*` bumps root + syncs workspace versions and `@getpaseo/*` dependency versions
 - `release:prepare` refreshes workspace `node_modules` links to prevent stale types
+- `npm run dev:desktop` and `npm run build:desktop` target the Electron desktop package in `packages/desktop`
 - If `release:publish` partially fails, re-run it — npm skips already-published versions
-- Website Mac download CTA URL derives from `packages/website/package.json` version at build time
+- The website parses the first `## X.Y.Z` heading in `CHANGELOG.md` to determine the download version. This is why changelog entries must only be added at finalization, not during drafts.
+
+## Changelog format
+
+The website depends on the changelog to determine the latest download version. The heading format **must** be strictly followed:
+
+```
+## X.Y.Z - YYYY-MM-DD
+```
+
+No prefix (`v`), no extra text. The parser matches the first `## X.Y.Z` line to extract the version. A malformed heading will break download links on the homepage.
 
 ## Completion checklist
 
 - [ ] Update `CHANGELOG.md` with user-facing release notes (features, fixes — not refactors)
-- [ ] `npm run release:patch` completes successfully
+- [ ] Verify the changelog heading follows strict `## X.Y.Z - YYYY-MM-DD` format
+- [ ] `npm run release:patch` (or `release:finalize` for drafts) completes successfully
 - [ ] GitHub `Desktop Release` workflow for the `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

docs/STORAGE_REVAMP_PLAN.md

@@ -0,0 +1,217 @@
+# Storage Revamp Plan
+
+Status: active rollout, phases 1 and 2 complete
+
+This document now tracks the storage revamp as it exists today, not as a speculative design exercise.
+The DB foundation and the project/workspace identity cutover have landed. What remains is the explicit
+creation/archive surface cleanup, timeline durability cutover, and final removal of legacy paths.
+
+## Goals
+
+- make structured records durable in Drizzle + SQLite
+- make projects and workspaces explicit first-class records
+- stop deriving project/workspace identity from agent `cwd`
+- keep agent snapshot persistence behind clear ownership
+- move committed timeline history to storage-owned rows
+- remove legacy JSON and in-memory authority once the DB path is proven
+
+## Out of scope
+
+- moving config, keypairs, push tokens, or server identity into the DB
+- persisting raw provider deltas or transport-only chunk streams
+- designing a hosted/remote database story beyond keeping the schema portable
+- durable reasoning history unless product explicitly asks for it later
+
+## Current state
+
+The storage revamp is no longer hypothetical.
+
+Completed:
+
+- Drizzle + SQLite database bootstrap is in place
+- `projects`, `workspaces`, and `agent_snapshots` use integer primary keys
+- `workspaces.project_id` and `agent_snapshots.workspace_id` cascade on delete
+- `agent_snapshots.workspace_id` is `NOT NULL`
+- legacy JSON import feeds the DB-backed structured records
+- project/workspace records use explicit `directory` fields instead of path-as-identity
+- session read paths now use persisted workspace/project rows instead of cwd/git derivation
+- `workspace-reconciliation-service.ts` is deleted
+- `workspace-registry-bootstrap.ts` is deleted
+- `workspace-registry-model.ts` is reduced to `normalizeWorkspaceId`
+
+Still pending:
+
+- explicit `create_project` / `create_workspace` API cleanup
+- final archive cascade behavior for descendants and live agents
+- committed timeline storage cutover
+- removal of remaining legacy JSON and in-memory committed-history authority
+
+## Converged decisions
+
+### Structured record authority
+
+Projects, workspaces, and agent snapshots are DB-backed structured records.
+The server should not recreate project/workspace identity from:
+
+- git remotes
+- worktree main-repo roots
+- normalized cwd strings
+
+Temporary exception:
+
+- agent creation may still find-or-create a workspace by directory if the UI has not yet provided
+  `workspaceId` explicitly
+
+That fallback is transitional and should be deleted once the client always sends the workspace id.
+
+### Storage seams
+
+The useful seams remain concrete and domain-shaped:
+
+- `ProjectRegistry`
+- `WorkspaceRegistry`
+- `AgentSnapshotStore`
+- `AgentTimelineStore`
+
+There is no reason to reintroduce a reconciliation service layer for project/workspace identity.
+
+### Timeline contract
+
+The long-term timeline contract remains:
+
+- committed rows are durable, canonical history
+- provisional live updates are transient subscription state
+- committed history is fetched by seq
+- provider history replay is not the durability mechanism
+
+The structured-record cutover is complete before the timeline cutover so timeline rows can rely on
+stable DB-backed agent and workspace identity.
+
+## Remaining phases
+
+### Phase 3: Explicit creation and archive cleanup
+
+Goal:
+Remove the last transitional write paths that still infer state from directories.
+
+Required work:
+
+- add explicit `create_project` handling
+- add explicit `create_workspace` handling
+- make agent creation require `workspaceId` once the UI is ready
+- finish archive semantics for workspaces/projects and any descendant agent state
+- remove the temporary find-or-create-by-directory fallback from agent creation
+
+Exit gate:
+
+- project/workspace creation is explicit end to end
+- no normal creation path infers identity from cwd or git metadata
+- archive flows behave consistently for structured records and live runtime state
+
+### Phase 4: Timeline storage cutover
+
+Goal:
+Make committed history durable and storage-owned.
+
+Required work:
+
+- make `AgentTimelineStore` authoritative for committed history
+- write one committed row per finalized logical item
+- support tail, before-seq, and after-seq queries from storage
+- stop treating provider history hydration as the normal refresh/load path
+- keep provisional live updates in memory only
+
+Exit gate:
+
+- committed history survives daemon restart
+- reconnect uses committed catch-up plus future live events without gaps or duplicates
+- unloaded agents can serve committed history from storage alone
+
+### Phase 5: Legacy cleanup
+
+Goal:
+Remove compatibility paths after the DB-backed model is fully authoritative.
+
+Required work:
+
+- remove legacy JSON authority for structured records
+- remove in-memory committed-history ownership
+- remove provider-history rehydrate compatibility paths
+- trim dead protocol and reducer logic from the pre-storage model
+- update architecture docs to match the final model
+
+Exit gate:
+
+- there is one durable storage path for structured records
+- there is one durable storage path for committed timeline history
+- the runtime no longer depends on the removed JSON/in-memory model
+
+## Data model summary
+
+### Projects
+
+- integer primary key
+- `directory` is unique
+- `display_name`
+- `kind`: `git | directory`
+- optional `git_remote`
+- timestamps and archive state
+
+### Workspaces
+
+- integer primary key
+- belongs to a project by `project_id`
+- `directory` is unique
+- `display_name`
+- `kind`: `checkout | worktree`
+- timestamps and archive state
+
+### Agent snapshots
+
+- `agent_id` remains the primary key
+- belongs to a workspace by integer `workspace_id`
+- `workspace_id` is required
+- timestamps, lifecycle state, persistence metadata, attention metadata, archive state
+
+### Timeline rows
+
+Target shape once Phase 4 lands:
+
+- `agent_id`
+- committed `seq`
+- committed timestamp
+- canonical finalized item payload
+
+Not part of durable history:
+
+- raw streaming chunks
+- provisional assistant text
+- provisional reasoning text
+
+## Verification requirements
+
+Every remaining phase should keep the same bar:
+
+- `npm run typecheck`
+- targeted tests for the touched storage/session/runtime paths
+- migration/import coverage when storage authority changes
+- reconnect and catch-up scenario coverage when timeline behavior changes
+
+At minimum, timeline cutover must explicitly prove:
+
+- `fetch-after-seq`
+- `fetch-before-seq`
+- restart durability
+- no-gap/no-duplicate reconnect behavior
+
+## Main risks
+
+- timeline work reintroduces provider-history replay as hidden authority
+- archive behavior diverges between stored records and live in-memory agents
+- explicit creation work leaves the transitional cwd fallback in place too long
+- cleanup stalls after compatibility paths stop being exercised
+
+## Rule of thumb
+
+If a new change needs to ask "what can we infer from this cwd?" for project or workspace identity,
+it is probably moving in the wrong direction.

docs/TERMINAL-MODE.md

@@ -0,0 +1,506 @@
+# Terminal Mode — Implementation Plan
+
+## Concept
+
+Terminal mode wraps an agent TUI (Claude Code, Codex, OpenCode, Gemini, etc.) in a Paseo agent entity. The agent is tracked in sessions, has a provider/icon/title, and can be archived — but instead of rendering a structured chat view, it renders a terminal running the agent's CLI.
+
+**Key principle:** `agent.terminal` is a boolean flag on the agent entity. If `true`, the panel renders a terminal. If `false` (default), it renders the current structured AgentStreamView.
+
+## What Changes
+
+### Phase 1: Server — Data Model & Provider Interface
+
+#### 1.1 Add `terminal` flag to `ManagedAgentBase`
+
+**File:** `packages/server/src/server/agent/agent-manager.ts`
+
+```typescript
+type ManagedAgentBase = {
+  // ...existing fields...
+  terminal: boolean;  // NEW — if true, this agent renders as a terminal TUI
+};
+```
+
+This flag is set at creation time and never changes. A terminal agent is always a terminal agent.
+
+#### 1.2 Add `terminal` to `AgentSessionConfig`
+
+**File:** `packages/server/src/server/agent/agent-sdk-types.ts`
+
+```typescript
+export type AgentSessionConfig = {
+  // ...existing fields...
+  terminal?: boolean;  // NEW — create as terminal agent
+};
+```
+
+#### 1.3 Add `terminal` to the Zod schema
+
+**File:** `packages/server/src/shared/messages.ts`
+
+Add to `AgentSessionConfigSchema`:
+```typescript
+terminal: z.boolean().optional(),
+```
+
+Add to the `AgentStateSchema` (the wire format sent to clients):
+```typescript
+terminal: z.boolean().optional(),
+```
+
+#### 1.4 Add terminal command builders to `AgentClient`
+
+**File:** `packages/server/src/server/agent/agent-sdk-types.ts`
+
+```typescript
+export type TerminalCommand = {
+  command: string;
+  args: string[];
+  env?: Record<string, string>;
+};
+
+export interface AgentClient {
+  // ...existing methods...
+
+  /**
+   * Build the shell command to launch this agent's TUI for a new session.
+   * Only available if capabilities.supportsTerminalMode is true.
+   */
+  buildTerminalCreateCommand?(config: AgentSessionConfig): TerminalCommand;
+
+  /**
+   * Build the shell command to resume an existing session in the agent's TUI.
+   * Only available if capabilities.supportsTerminalMode is true.
+   */
+  buildTerminalResumeCommand?(handle: AgentPersistenceHandle): TerminalCommand;
+}
+```
+
+#### 1.5 Add `supportsTerminalMode` capability
+
+**File:** `packages/server/src/server/agent/agent-sdk-types.ts`
+
+```typescript
+export type AgentCapabilityFlags = {
+  // ...existing flags...
+  supportsTerminalMode: boolean;  // NEW
+};
+```
+
+Also add to the Zod schema in `messages.ts`:
+```typescript
+supportsTerminalMode: z.boolean(),
+```
+
+#### 1.6 Implement terminal command builders in providers
+
+**Claude** (`packages/server/src/server/agent/providers/claude-agent.ts`):
+```typescript
+buildTerminalCreateCommand(config: AgentSessionConfig): TerminalCommand {
+  const args: string[] = [];
+  if (config.modeId === "bypassPermissions") {
+    args.push("--dangerously-skip-permissions");
+  }
+  if (config.model) args.push("--model", config.model);
+  // mode mapping: default → nothing, plan → --plan, etc.
+  return { command: "claude", args, env: {} };
+}
+
+buildTerminalResumeCommand(handle: AgentPersistenceHandle): TerminalCommand {
+  return {
+    command: "claude",
+    args: ["--resume", handle.sessionId],
+    env: {},
+  };
+}
+```
+
+**Codex** (`packages/server/src/server/agent/providers/codex-app-server-agent.ts`):
+```typescript
+buildTerminalCreateCommand(config: AgentSessionConfig): TerminalCommand {
+  const args: string[] = [];
+  if (config.model) args.push("--model", config.model);
+  if (config.modeId) args.push("--approval-mode", config.modeId);
+  return { command: "codex", args, env: {} };
+}
+
+buildTerminalResumeCommand(handle: AgentPersistenceHandle): TerminalCommand {
+  return {
+    command: "codex",
+    args: ["--resume", handle.nativeHandle ?? handle.sessionId],
+    env: {},
+  };
+}
+```
+
+**OpenCode** (`packages/server/src/server/agent/providers/opencode-agent.ts`):
+```typescript
+buildTerminalCreateCommand(config: AgentSessionConfig): TerminalCommand {
+  return { command: "opencode", args: [], env: {} };
+}
+// No resume support for OpenCode initially
+```
+
+Capabilities for each provider:
+- Claude: `supportsTerminalMode: true`
+- Codex: `supportsTerminalMode: true`
+- OpenCode: `supportsTerminalMode: true`
+
+#### 1.7 Handle terminal agent creation in `AgentManager.createAgent()`
+
+**File:** `packages/server/src/server/agent/agent-manager.ts`
+
+When `config.terminal === true`:
+1. Do NOT call `client.createSession()` — there is no managed session
+2. Call `client.buildTerminalCreateCommand(config)` to get the command
+3. Create a `TerminalSession` via `terminalManager.createTerminal()` with the command
+4. Register the agent with `terminal: true`, `lifecycle: "idle"`, `session: null`
+5. Store the terminal ID in the agent's metadata or a new field
+6. The agent's persistence handle can be populated later (the CLI will create its own session file)
+
+```typescript
+async createAgent(config: AgentSessionConfig, agentId?: string, options?: { labels?: Record<string, string> }): Promise<ManagedAgent> {
+  const resolvedAgentId = validateAgentId(agentId ?? this.idFactory(), "createAgent");
+  const normalizedConfig = await this.normalizeConfig(config);
+  const client = this.requireClient(normalizedConfig.provider);
+
+  if (normalizedConfig.terminal) {
+    // Terminal mode — no managed session, just build the command
+    const buildCmd = client.buildTerminalCreateCommand;
+    if (!buildCmd) {
+      throw new Error(`Provider '${normalizedConfig.provider}' does not support terminal mode`);
+    }
+    const cmd = buildCmd.call(client, normalizedConfig);
+    return this.registerTerminalAgent(resolvedAgentId, normalizedConfig, cmd, {
+      labels: options?.labels,
+    });
+  }
+
+  // ...existing managed agent flow...
+}
+```
+
+New method `registerTerminalAgent()`:
+- Creates a ManagedAgent with `terminal: true`
+- Stores the `TerminalCommand` in agent metadata for later use (resume, reconnect)
+- Sets lifecycle to `"idle"` (the terminal itself manages the agent's internal state)
+- Does NOT have an `AgentSession` — the `session` field is `null` (like closed agents)
+- Broadcasts `agent_state` event so clients know about it
+
+#### 1.8 New message: create terminal for agent
+
+The client needs a way to request a terminal for a terminal agent. Options:
+
+**Option A:** Extend `createTerminal` to accept an agent ID. When provided, the server looks up the agent, gets the command, and creates a terminal pre-configured with that command.
+
+**Option B:** New message type `create_terminal_agent_request` that combines agent creation + terminal creation in one step.
+
+**Recommendation: Option A.** Add optional `agentId` to `CreateTerminalRequestMessage`. If provided:
+- Look up the agent (must be a terminal agent)
+- Use the agent's stored command to create the terminal
+- Associate the terminal with the agent
+
+**File:** `packages/server/src/shared/messages.ts`
+
+```typescript
+const CreateTerminalRequestMessageSchema = z.object({
+  type: z.literal("create_terminal_request"),
+  cwd: z.string(),
+  name: z.string().optional(),
+  agentId: z.string().optional(),  // NEW — if provided, create terminal for this terminal agent
+  requestId: z.string(),
+});
+```
+
+#### 1.9 Terminal → Agent lifecycle binding
+
+When a terminal associated with a terminal agent exits:
+- Set agent lifecycle to `"closed"`
+- Attempt to detect the agent's session file for persistence handle
+- Broadcast state update
+
+When a terminal agent is opened from the sessions page:
+- Server calls `buildTerminalResumeCommand(handle)` if persistence handle exists
+- Otherwise calls `buildTerminalCreateCommand(config)`
+- Creates a new terminal with that command
+
+#### 1.10 Extend `createTerminal()` to support command + args
+
+**File:** `packages/server/src/terminal/terminal.ts`
+
+```typescript
+export interface CreateTerminalOptions {
+  cwd: string;
+  shell?: string;
+  env?: Record<string, string>;
+  rows?: number;
+  cols?: number;
+  name?: string;
+  command?: string;   // NEW — if provided, run this instead of shell
+  args?: string[];    // NEW — arguments for command
+}
+```
+
+In `createTerminal()`:
+```typescript
+const spawnCommand = options.command ?? shell;
+const spawnArgs = options.command ? (options.args ?? []) : [];
+
+const ptyProcess = pty.spawn(spawnCommand, spawnArgs, {
+  name: "xterm-256color",
+  cols, rows, cwd,
+  env: { ...process.env, ...env, TERM: "xterm-256color" },
+});
+```
+
+---
+
+### Phase 2: App — Draft UI & Terminal Toggle
+
+#### 2.1 Add terminal toggle to draft tab
+
+**File:** `packages/app/src/screens/workspace/workspace-draft-agent-tab.tsx`
+
+Add a toggle switch in the draft UI: **"Chat" / "Terminal"**
+
+State:
+```typescript
+const [isTerminalMode, setIsTerminalMode] = useState(false);
+```
+
+The toggle should be persistent per draft (stored in the draft store or as a preference).
+
+When terminal mode is selected:
+- The provider/model pickers still work (same UI)
+- The mode picker still works
+- The "send" button label changes to "Launch" or "Start"
+- The initial prompt input may be hidden or optional (terminal agents don't need an initial prompt — the user types directly into the TUI)
+
+#### 2.2 Modify agent creation to pass `terminal: true`
+
+When the user submits a draft in terminal mode:
+
+```typescript
+const config: AgentSessionConfig = {
+  provider: selectedProvider,
+  cwd: workspaceId,
+  model: selectedModel,
+  modeId: selectedMode,
+  terminal: true,  // NEW
+};
+```
+
+The `CreateAgentRequestMessage` already carries `config`, so no new wire message needed.
+
+#### 2.3 Terminal mode in `AgentStatusBar`
+
+**File:** `packages/app/src/components/agent-status-bar.tsx`
+
+When rendering a draft's status bar, filter the capability:
+- If `supportsTerminalMode` is false for a provider, disable the terminal toggle when that provider is selected
+- The terminal toggle can live next to the provider selector or as a segmented control above the input area
+
+---
+
+### Phase 3: App — Agent Panel Rendering
+
+#### 3.1 Branch rendering in `AgentPanel`
+
+**File:** `packages/app/src/panels/agent-panel.tsx`
+
+```typescript
+function AgentPanelContent({ agentId, ... }) {
+  const agent = useAgentState(agentId);
+
+  if (agent?.terminal) {
+    return <TerminalAgentPanel agentId={agentId} agent={agent} />;
+  }
+
+  return <AgentPanelBody agent={agent} ... />;
+}
+```
+
+#### 3.2 New component: `TerminalAgentPanel`
+
+**File:** `packages/app/src/panels/terminal-agent-panel.tsx` (new file)
+
+This component:
+1. Gets the terminal ID associated with the agent (from agent metadata or a new field)
+2. Renders a `TerminalPane` connected to that terminal session
+3. If no terminal exists yet (agent from sessions page), requests terminal creation via `createTerminal({ agentId })`
+4. Handles terminal exit → agent close lifecycle
+
+Essentially: it's the existing `TerminalPane` component, but associated with an agent entity instead of a standalone terminal.
+
+#### 3.3 Tab descriptor for terminal agents
+
+**File:** `packages/app/src/panels/agent-panel.tsx` → `useAgentPanelDescriptor`
+
+The tab descriptor (icon, label) already comes from the agent's provider. Terminal agents get the same icon/label as managed agents — that's the whole point. No changes needed here unless we want a "terminal" badge.
+
+Optional: add a small terminal icon badge to distinguish terminal agents from managed agents in the tab bar.
+
+---
+
+### Phase 4: Sessions Page
+
+#### 4.1 Terminal agents appear in sessions list
+
+No changes needed for listing — terminal agents are real agents, they already show up via `AgentManager.getAgents()`.
+
+#### 4.2 Opening a terminal agent from sessions
+
+**File:** `packages/app/src/screens/sessions/` (sessions screen)
+
+When the user clicks a closed terminal agent:
+1. Server calls `buildTerminalResumeCommand(handle)` if persistence exists
+2. Creates a new terminal with that command
+3. Opens agent tab in workspace
+
+If no persistence handle (session was ephemeral), show "Start new session" which calls `buildTerminalCreateCommand(config)`.
+
+---
+
+### Phase 5: CLI Gating
+
+#### 5.1 `paseo send` — error for terminal agents
+
+**File:** `packages/cli/src/commands/send.ts`
+
+```typescript
+if (agent.terminal) {
+  throw new Error("Cannot send messages to terminal agents. Open the terminal in the UI instead.");
+}
+```
+
+#### 5.2 `paseo run` — could support `--terminal` flag (future)
+
+Not in v1. For now, `paseo run` always creates managed agents. Terminal mode is UI-only.
+
+#### 5.3 `paseo ls` — show terminal flag
+
+Add a `terminal` column or badge to `paseo ls` output so users can distinguish terminal agents.
+
+---
+
+## Wire Format Changes Summary
+
+### AgentSessionConfig (create request)
+```diff
+ {
+   provider: string;
+   cwd: string;
+   model?: string;
+   modeId?: string;
++  terminal?: boolean;
+   ...
+ }
+```
+
+### AgentState (server → client)
+```diff
+ {
+   id: string;
+   provider: string;
+   lifecycle: string;
++  terminal?: boolean;
+   ...
+ }
+```
+
+### AgentCapabilityFlags
+```diff
+ {
+   supportsStreaming: boolean;
+   supportsSessionPersistence: boolean;
++  supportsTerminalMode: boolean;
+   ...
+ }
+```
+
+### CreateTerminalRequest
+```diff
+ {
+   type: "create_terminal_request";
+   cwd: string;
+   name?: string;
++  agentId?: string;
+   requestId: string;
+ }
+```
+
+### TerminalCommand (new type)
+```typescript
+{
+  command: string;
+  args: string[];
+  env?: Record<string, string>;
+}
+```
+
+---
+
+## Implementation Phases & Agent Assignments
+
+### Phase 1: Server data model (1 agent)
+- Add `terminal` to types, schemas, and agent manager
+- Add `TerminalCommand` type and `buildTerminalCreateCommand`/`buildTerminalResumeCommand` to `AgentClient`
+- Add `supportsTerminalMode` capability flag
+- Extend `createTerminal()` to support command+args
+- Implement terminal agent creation flow in `AgentManager`
+- Wire terminal exit → agent close lifecycle
+- Implement command builders in Claude, Codex, OpenCode providers
+- Typecheck must pass
+
+### Phase 2: App draft UI + terminal toggle (1 agent)
+- Add terminal mode toggle to `workspace-draft-agent-tab.tsx`
+- Pass `terminal: true` in config when toggle is on
+- Filter toggle based on `supportsTerminalMode` capability
+- Persist toggle preference
+- Typecheck must pass
+
+### Phase 3: App panel rendering (1 agent)
+- Branch `AgentPanelContent` on `agent.terminal`
+- Create `TerminalAgentPanel` component
+- Handle terminal creation for agent on open
+- Handle terminal exit lifecycle
+- Typecheck must pass
+
+### Phase 4: Sessions page + CLI gating (1 agent)
+- Terminal agents show in sessions with badge
+- Opening from sessions resumes or creates terminal
+- `paseo send` errors for terminal agents
+- `paseo ls` shows terminal badge
+- Typecheck must pass
+
+---
+
+## Feature Interaction Guards
+
+Terminal agents are explicitly excluded from automated dispatch paths:
+
+- **LoopService**: `buildWorkerConfig` and `buildVerifierConfig` set `terminal: false`
+- **ScheduleService**: `executeSchedule` rejects terminal agents with a clear error for agent-targeted schedules; new-agent schedules set `terminal: false`
+- **Voice mode / `handleSendAgentMessage`**: Guarded by `getStructuredSendRejection()` before send
+- **CLI `paseo send`**: Returns error for terminal agents
+- **MCP agent creation**: Programmatic paths don't pass `terminal: true`
+
+All session-specific operations (`runAgent`, `streamAgent`, `setMode`, `cancelAgentRun`, etc.) are guarded by the centralized `requireSessionAgent()` which rejects terminal agents.
+
+## What This Does NOT Change
+
+- The existing managed agent flow is untouched
+- Terminal sessions (non-agent) still work as before
+- The `AgentSession` interface is unchanged
+- Mobile experience is unchanged (terminal mode is web/desktop only for now)
+- No new providers are added (existing providers gain terminal command builders)
+- No hooks, no env injection, no process tree detection (v1 keeps it simple)
+
+## Future Work (Not In This Plan)
+
+- Auto-detect agent type from PTY process tree (for standalone terminals)
+- "Convert to chat" / "Convert to terminal" actions
+- Terminal title/icon from OSC sequences
+- `paseo run --terminal` CLI support
+- Mobile terminal mode (if xterm.js works well enough on mobile web)
+- Gemini / Aider / Goose provider definitions (terminal-only providers)

flake.lock

@@ -0,0 +1,27 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1772963539,
+        "narHash": "sha256-9jVDGZnvCckTGdYT53d/EfznygLskyLQXYwJLKMPsZs=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "9dcb002ca1690658be4a04645215baea8b95f31d",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,59 @@
+{
+  description = "Paseo - self-hosted daemon for AI coding agents";
+
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+  };
+
+  outputs =
+    {
+      self,
+      nixpkgs,
+    }:
+    let
+      supportedSystems = [
+        "x86_64-linux"
+        "aarch64-linux"
+        "x86_64-darwin"
+        "aarch64-darwin"
+      ];
+      forAllSystems = nixpkgs.lib.genAttrs supportedSystems;
+      pkgsFor = system: import nixpkgs { inherit system; };
+    in
+    {
+      packages = forAllSystems (
+        system:
+        let
+          pkgs = pkgsFor system;
+          paseo = pkgs.callPackage ./nix/package.nix { };
+        in
+        {
+          default = paseo;
+          paseo = paseo;
+        }
+      );
+
+      nixosModules.default = self.nixosModules.paseo;
+      nixosModules.paseo =
+        { pkgs, lib, ... }:
+        {
+          imports = [ ./nix/module.nix ];
+          services.paseo.package = lib.mkDefault self.packages.${pkgs.stdenv.hostPlatform.system}.default;
+        };
+
+      devShells = forAllSystems (
+        system:
+        let
+          pkgs = pkgsFor system;
+        in
+        {
+          default = pkgs.mkShell {
+            packages = [
+              pkgs.nodejs_22
+              pkgs.python3
+            ];
+          };
+        }
+      );
+    };
+}

nix/module.nix

@@ -0,0 +1,172 @@
+{
+  config,
+  lib,
+  pkgs,
+  ...
+}:
+
+let
+  cfg = config.services.paseo;
+in
+{
+  options.services.paseo = {
+    enable = lib.mkEnableOption "Paseo, a self-hosted daemon for AI coding agents";
+
+    package = lib.mkPackageOption pkgs "paseo" { };
+
+    user = lib.mkOption {
+      type = lib.types.str;
+      default = "paseo";
+      description = "User account under which Paseo runs.";
+    };
+
+    group = lib.mkOption {
+      type = lib.types.str;
+      default = "paseo";
+      description = "Group under which Paseo runs.";
+    };
+
+    dataDir = lib.mkOption {
+      type = lib.types.str;
+      default =
+        if cfg.user == "paseo"
+        then "/var/lib/paseo"
+        else "/home/${cfg.user}/.paseo";
+      defaultText = lib.literalExpression ''
+        if cfg.user == "paseo"
+        then "/var/lib/paseo"
+        else "/home/''${cfg.user}/.paseo"
+      '';
+      description = "Directory for Paseo state (PASEO_HOME). Stores agent data, config, and logs.";
+    };
+
+    port = lib.mkOption {
+      type = lib.types.port;
+      default = 6767;
+      description = "Port for the Paseo daemon to listen on.";
+    };
+
+    listenAddress = lib.mkOption {
+      type = lib.types.str;
+      default = "127.0.0.1";
+      description = "Address for the Paseo daemon to bind to.";
+    };
+
+    openFirewall = lib.mkOption {
+      type = lib.types.bool;
+      default = false;
+      description = "Whether to open the firewall for the Paseo daemon port.";
+    };
+
+    allowedHosts = lib.mkOption {
+      type = lib.types.either (lib.types.enum [ true ]) (lib.types.listOf lib.types.str);
+      default = [ ];
+      example = [ ".example.com" "myhost.local" ];
+      description = ''
+        Hosts allowed to connect to the Paseo daemon (DNS rebinding protection).
+        Localhost and IP addresses are always allowed by default.
+
+        Use a leading dot to match a domain and all its subdomains
+        (e.g. `".example.com"` matches `example.com` and `foo.example.com`).
+
+        Set to `true` to allow any host (not recommended).
+      '';
+    };
+
+    relay = {
+      enable = lib.mkOption {
+        type = lib.types.bool;
+        default = true;
+        description = "Whether to enable the relay connection for remote access via app.paseo.sh.";
+      };
+    };
+
+    inheritUserEnvironment = lib.mkOption {
+      type = lib.types.bool;
+      default = cfg.user != "paseo";
+      defaultText = lib.literalExpression ''cfg.user != "paseo"'';
+      description = ''
+        Whether to include the user's profile PATH in the service environment.
+
+        When Paseo runs as a real user (not the default system user), AI agents
+        need access to the user's tools (git, ssh, etc.). This adds the user's
+        NixOS profile and system paths so agents can use them without manually
+        setting PATH.
+
+        Enabled by default when `user` is set to a non-default value.
+      '';
+    };
+
+    environment = lib.mkOption {
+      type = lib.types.attrsOf lib.types.str;
+      default = { };
+      example = lib.literalExpression ''
+        {
+          PASEO_RELAY_ENDPOINT = "relay.paseo.sh:443";
+        }
+      '';
+      description = "Extra environment variables for the Paseo daemon.";
+    };
+  };
+
+  config = lib.mkIf cfg.enable {
+    users.users.${cfg.user} = lib.mkIf (cfg.user == "paseo") {
+      isSystemUser = true;
+      group = cfg.group;
+      home = cfg.dataDir;
+    };
+
+    users.groups.${cfg.group} = lib.mkIf (cfg.group == "paseo") { };
+
+    systemd.tmpfiles.rules = [
+      "d ${cfg.dataDir} 0700 ${cfg.user} ${cfg.group} - -"
+    ];
+
+    systemd.services.paseo = {
+      description = "Paseo - self-hosted daemon for AI coding agents";
+      after = [ "network.target" ];
+      wantedBy = [ "multi-user.target" ];
+
+      environment = {
+        NODE_ENV = "production";
+        PASEO_HOME = cfg.dataDir;
+        PASEO_LISTEN = "${cfg.listenAddress}:${toString cfg.port}";
+      } // lib.optionalAttrs cfg.inheritUserEnvironment {
+        # mkForce overrides the default PATH from NixOS's systemd module (which
+        # only includes store paths for coreutils/grep/sed/systemd). Our PATH
+        # includes /run/current-system/sw/bin which is a superset of those.
+        PATH = lib.mkForce (lib.concatStringsSep ":" [
+          "/etc/profiles/per-user/${cfg.user}/bin"
+          "/run/current-system/sw/bin"
+          "/run/wrappers/bin"
+          "/nix/var/nix/profiles/default/bin"
+        ]);
+      } // lib.optionalAttrs (cfg.allowedHosts == true) {
+        PASEO_ALLOWED_HOSTS = "true";
+      } // lib.optionalAttrs (lib.isList cfg.allowedHosts && cfg.allowedHosts != [ ]) {
+        PASEO_ALLOWED_HOSTS = lib.concatStringsSep "," cfg.allowedHosts;
+      } // cfg.environment;
+
+      serviceConfig = {
+        Type = "simple";
+        User = cfg.user;
+        Group = cfg.group;
+
+        ExecStart =
+          "${cfg.package}/bin/paseo-server"
+          + lib.optionalString (!cfg.relay.enable) " --no-relay";
+
+        Restart = "on-failure";
+        RestartSec = 5;
+
+        # Graceful shutdown (server handles SIGTERM with a 10s timeout)
+        KillSignal = "SIGTERM";
+        TimeoutStopSec = 15;
+      };
+    };
+
+    environment.systemPackages = [ cfg.package ];
+
+    networking.firewall.allowedTCPPorts = lib.mkIf cfg.openFirewall [ cfg.port ];
+  };
+}

nix/package.nix

@@ -0,0 +1,144 @@
+{
+  lib,
+  stdenv,
+  buildNpmPackage,
+  nodejs_22,
+  python3,
+  makeWrapper,
+  # node-pty needs libuv headers on Linux
+  libuv,
+}:
+
+buildNpmPackage rec {
+  pname = "paseo";
+  version = (builtins.fromJSON (builtins.readFile ../package.json)).version;
+
+  src = lib.cleanSourceWith {
+    src = ./..;
+    filter = path: type:
+      let
+        baseName = builtins.baseNameOf path;
+        relPath = lib.removePrefix (toString ./..) path;
+      in
+      # Exclude non-daemon workspace contents (keep package.json for workspace resolution)
+      !(lib.hasPrefix "/packages/app/src" relPath)
+      && !(lib.hasPrefix "/packages/app/assets" relPath)
+      && !(lib.hasPrefix "/packages/app/android" relPath)
+      && !(lib.hasPrefix "/packages/app/ios" relPath)
+      && !(lib.hasPrefix "/packages/website/src" relPath)
+      && !(lib.hasPrefix "/packages/website/public" relPath)
+      && !(lib.hasPrefix "/packages/desktop/src" relPath)
+      && !(lib.hasPrefix "/packages/desktop/src-tauri" relPath)
+      # Exclude test fixtures and debug files
+      && !(lib.hasSuffix ".test.ts" baseName)
+      && !(lib.hasSuffix ".e2e.test.ts" baseName)
+      && baseName != "node_modules"
+      && baseName != ".git"
+      && baseName != ".paseo"
+      && baseName != ".DS_Store";
+  };
+
+  nodejs = nodejs_22;
+
+  # To update: run `nix build` with lib.fakeHash, copy the `got:` hash.
+  # CI auto-updates this when package-lock.json changes (see .github/workflows/).
+  npmDepsHash = "sha256-r9y8rUyT/56wHFUp8D/yA7mjy715jjezSYaEuj1D4TQ=";
+
+  # Prevent onnxruntime-node's install script from running during automatic
+  # npm rebuild (it tries to download from api.nuget.org, which fails in the sandbox).
+  # We manually rebuild only node-pty in buildPhase.
+  npmRebuildFlags = [ "--ignore-scripts" ];
+
+  nativeBuildInputs = [
+    python3 # for node-gyp (node-pty compilation)
+    makeWrapper
+  ];
+
+  buildInputs = lib.optionals stdenv.hostPlatform.isLinux [
+    libuv
+  ];
+
+  # Don't use the default npm build hook — we need a custom build sequence
+  dontNpmBuild = true;
+
+  buildPhase = ''
+    runHook preBuild
+
+    # Rebuild only node-pty (native addon for terminal emulation).
+    # Speech-related native modules (sherpa-onnx, onnxruntime-node) are
+    # intentionally left unbuilt — they're lazily loaded and gracefully
+    # degrade when unavailable.
+    npm rebuild node-pty
+
+    # Build all daemon packages in dependency order (defined in package.json)
+    npm run build:daemon
+
+    runHook postBuild
+  '';
+
+  installPhase = ''
+    runHook preInstall
+
+    mkdir -p $out/lib/paseo
+
+    # Copy root package metadata
+    cp package.json $out/lib/paseo/
+
+    # Copy node_modules (preserving workspace symlinks)
+    cp -a node_modules $out/lib/paseo/
+
+    # Auto-detect which @getpaseo/* packages were built by build:daemon
+    # (they'll have a dist/ directory). Copy those and remove the rest.
+    for link in $out/lib/paseo/node_modules/@getpaseo/*; do
+      name=$(basename "$link")
+      if [ -d "packages/$name/dist" ]; then
+        mkdir -p "$out/lib/paseo/packages/$name"
+        cp "packages/$name/package.json" "$out/lib/paseo/packages/$name/"
+        cp -a "packages/$name/dist" "$out/lib/paseo/packages/$name/"
+        if [ -d "packages/$name/node_modules" ]; then
+          cp -a "packages/$name/node_modules" "$out/lib/paseo/packages/$name/"
+        fi
+      else
+        rm -f "$link"
+      fi
+    done
+
+    # Copy CLI bin entry
+    mkdir -p $out/lib/paseo/packages/cli/bin
+    cp packages/cli/bin/paseo $out/lib/paseo/packages/cli/bin/
+
+    # Copy extra server files referenced at runtime
+    for f in agent-prompt.md .env.example; do
+      if [ -f packages/server/$f ]; then
+        cp packages/server/$f $out/lib/paseo/packages/server/
+      fi
+    done
+
+    # Copy server scripts (including supervisor-entrypoint) needed by CLI
+    if [ -d packages/server/dist/scripts ]; then
+      mkdir -p $out/lib/paseo/packages/server/dist/scripts
+      cp -a packages/server/dist/scripts/* $out/lib/paseo/packages/server/dist/scripts/
+    fi
+
+    # Create wrapper for the server entry point (for systemd / direct use)
+    mkdir -p $out/bin
+    makeWrapper ${nodejs}/bin/node $out/bin/paseo-server \
+      --add-flags "$out/lib/paseo/packages/server/dist/server/server/index.js" \
+      --set NODE_ENV production
+
+    # Create wrapper for the CLI
+    makeWrapper ${nodejs}/bin/node $out/bin/paseo \
+      --add-flags "$out/lib/paseo/packages/cli/dist/index.js" \
+      --set NODE_PATH "$out/lib/paseo/node_modules"
+
+    runHook postInstall
+  '';
+
+  meta = {
+    description = "Self-hosted daemon for Claude Code, Codex, and OpenCode";
+    homepage = "https://github.com/getpaseo/paseo";
+    license = lib.licenses.agpl3Plus;
+    mainProgram = "paseo";
+    platforms = lib.platforms.linux ++ lib.platforms.darwin;
+  };
+}

package.json

@@ -1,9 +1,10 @@
 {
   "name": "paseo",
-  "version": "0.1.29",
+  "version": "0.1.38",
   "private": true,
   "workspaces": [
     "packages/expo-two-way-audio",
+    "packages/highlight",
     "packages/server",
     "packages/app",
     "packages/relay",
@@ -13,17 +14,18 @@
   ],
   "scripts": {
     "dev": "./scripts/dev.sh",
-    "dev:server": "NODE_ENV=development tsx packages/server/scripts/daemon-runner.ts --dev",
+    "dev:server": "npm run dev --workspace=@getpaseo/server",
     "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",
+    "build:highlight": "npm run build --workspace=@getpaseo/highlight",
+    "build:daemon": "npm run build --workspace=@getpaseo/highlight && 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 .",
+    "format": "biome format --write .",
+    "format:check": "biome format .",
     "start": "npm run start --workspace=@getpaseo/server",
     "android": "npm run android --workspace=@getpaseo/app",
     "android:development": "npm run android:development --workspace=@getpaseo/app",
@@ -35,6 +37,7 @@
     "web": "npm run web --workspace=@getpaseo/app",
     "dev:desktop": "npm run dev --workspace=@getpaseo/desktop",
     "build:desktop": "npm run version:sync-internal && npm run build:web --workspace=@getpaseo/app && npm run build --workspace=@getpaseo/desktop",
+    "db:query": "npm run db:query --workspace=@getpaseo/server --",
     "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",
@@ -42,22 +45,22 @@
     "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:check": "npm run release:prepare && npm run typecheck --workspace=@getpaseo/highlight && npm run typecheck --workspace=@getpaseo/relay && npm run typecheck --workspace=@getpaseo/server && npm run typecheck --workspace=@getpaseo/cli && npm run build --workspace=@getpaseo/highlight && npm run build --workspace=@getpaseo/relay && npm run build --workspace=@getpaseo/server && npm run build --workspace=@getpaseo/cli && npm pack --dry-run --workspace=@getpaseo/highlight && 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/highlight --access public && 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/highlight --access public && 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",
     "draft-release:push": "node scripts/push-current-release-tag.mjs --draft-release",
-    "draft-release:patch": "npm run version:all:patch && npm run release:check && npm run draft-release:push",
-    "draft-release:minor": "npm run version:all:minor && npm run release:check && npm run draft-release:push",
-    "draft-release:major": "npm run version:all:major && npm run release:check && npm run draft-release:push",
+    "draft-release:patch": "npm run release:check && npm run version:all:patch && npm run draft-release:push",
+    "draft-release:minor": "npm run release:check && npm run version:all:minor && npm run draft-release:push",
+    "draft-release:major": "npm run release:check && npm run version:all:major && npm run draft-release:push",
     "release:finalize": "node scripts/finalize-current-release.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"
+    "release:patch": "npm run release:check && npm run version:all:patch && npm run release:publish && npm run release:push",
+    "release:minor": "npm run release:check && npm run version:all:minor && npm run release:publish && npm run release:push",
+    "release:major": "npm run release:check && npm run version:all:major && npm run release:publish && npm run release:push"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.4.8",
     "concurrently": "^9.2.1",
-    "prettier": "^3.5.3",
     "get-port-cli": "^3.0.0",
     "knip": "^5.82.1",
     "patch-package": "^8.0.1",
@@ -66,6 +69,7 @@
     "typescript": "^5.9.3"
   },
   "description": "Paseo: voice-controlled development environment with OpenAI Realtime API",
+  "homepage": "https://paseo.sh",
   "keywords": [
     "openai",
     "realtime",
@@ -74,7 +78,14 @@
     "development",
     "mcp"
   ],
-  "author": "moboudra",
+  "author": {
+    "name": "Mohamed Boudra",
+    "email": "hello@moboudra.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/getpaseo/paseo.git"
+  },
   "license": "AGPL-3.0-or-later",
   "overrides": {
     "lightningcss": "1.30.1",
@@ -82,6 +93,7 @@
     "react-dom": "19.1.4"
   },
   "dependencies": {
-    "@anthropic-ai/claude-agent-sdk": "^0.2.11"
+    "@anthropic-ai/claude-agent-sdk": "^0.2.11",
+    "@modelcontextprotocol/sdk": "^1.27.1"
   }
 }

packages/app/app.config.js

@@ -65,8 +65,7 @@ export default {
     ios: {
       supportsTablet: true,
       infoPlist: {
-        NSMicrophoneUsageDescription:
-          "This app needs access to the microphone for voice commands.",
+        NSMicrophoneUsageDescription: "This app needs access to the microphone for voice commands.",
         ITSAppUsesNonExemptEncryption: false,
       },
       bundleIdentifier: variant.packageId,
@@ -92,9 +91,7 @@ export default {
         "android.permission.CAMERA",
       ],
       package: variant.packageId,
-      ...(variant.googleServicesFile
-        ? { googleServicesFile: variant.googleServicesFile }
-        : {}),
+      ...(variant.googleServicesFile ? { googleServicesFile: variant.googleServicesFile } : {}),
     },
     web: {
       output: "single",

packages/app/e2e/fixtures.ts

@@ -1,15 +1,12 @@
-import { test as base, expect, type Page } from '@playwright/test';
-import {
-  buildCreateAgentPreferences,
-  buildSeededHost,
-} from './helpers/daemon-registry';
+import { test as base, expect, type Page } from "@playwright/test";
+import { buildCreateAgentPreferences, buildSeededHost } from "./helpers/daemon-registry";
 
 // Extend base test to provide dynamic baseURL from global-setup
 const test = base.extend({
   baseURL: async ({}, use) => {
     const metroPort = process.env.E2E_METRO_PORT;
     if (!metroPort) {
-      throw new Error('E2E_METRO_PORT not set - globalSetup must run first');
+      throw new Error("E2E_METRO_PORT not set - globalSetup must run first");
     }
     await use(`http://localhost:${metroPort}`);
   },
@@ -22,19 +19,19 @@ test.beforeEach(async ({ page }) => {
   const metroPort = process.env.E2E_METRO_PORT;
   if (!daemonPort) {
     throw new Error(
-      'E2E_DAEMON_PORT is not set. Refusing to run e2e against the default daemon (e.g. localhost:6767). ' +
-        'Ensure Playwright `globalSetup` starts the e2e daemon and exports E2E_DAEMON_PORT.'
+      "E2E_DAEMON_PORT is not set. Refusing to run e2e against the default daemon (e.g. localhost:6767). " +
+        "Ensure Playwright `globalSetup` starts the e2e daemon and exports E2E_DAEMON_PORT.",
     );
   }
-  if (daemonPort === '6767') {
+  if (daemonPort === "6767") {
     throw new Error(
-      'E2E_DAEMON_PORT is 6767. Refusing to run e2e against the default local daemon. ' +
-        'Fix Playwright globalSetup to start an isolated test daemon and export its port.'
+      "E2E_DAEMON_PORT is 6767. Refusing to run e2e against the default local daemon. " +
+        "Fix Playwright globalSetup to start an isolated test daemon and export its port.",
     );
   }
   if (!metroPort) {
     throw new Error(
-      'E2E_METRO_PORT is not set. Ensure Playwright `globalSetup` starts Metro and exports E2E_METRO_PORT.'
+      "E2E_METRO_PORT is not set. Ensure Playwright `globalSetup` starts Metro and exports E2E_METRO_PORT.",
     );
   }
 
@@ -42,17 +39,17 @@ test.beforeEach(async ({ page }) => {
   // This blocks both HTTP and WS attempts to :6767 (before any navigation).
   await page.route(/:(6767)\b/, (route) => route.abort());
   await page.routeWebSocket(/:(6767)\b/, async (ws) => {
-    await ws.close({ code: 1008, reason: 'Blocked connection to localhost:6767 during e2e.' });
+    await ws.close({ code: 1008, reason: "Blocked connection to localhost:6767 during e2e." });
   });
 
   const entries: string[] = [];
   consoleEntries.set(page, entries);
 
-  page.on('console', (message) => {
+  page.on("console", (message) => {
     entries.push(`[console:${message.type()}] ${message.text()}`);
   });
 
-  page.on('pageerror', (error) => {
+  page.on("pageerror", (error) => {
     entries.push(`[pageerror] ${error.message}`);
   });
 
@@ -60,7 +57,7 @@ test.beforeEach(async ({ page }) => {
   const seedNonce = Math.random().toString(36).slice(2);
   const serverId = process.env.E2E_SERVER_ID;
   if (!serverId) {
-    throw new Error('E2E_SERVER_ID is not set - expected from Playwright globalSetup.');
+    throw new Error("E2E_SERVER_ID is not set - expected from Playwright globalSetup.");
   }
   const testDaemon = buildSeededHost({
     serverId,
@@ -74,7 +71,7 @@ test.beforeEach(async ({ page }) => {
       // `addInitScript` runs on every navigation (including reloads). Some tests intentionally
       // override storage and reload; they can opt out of seeding for the *next* navigation by
       // setting this flag before the reload.
-      const disableOnceKey = '@paseo:e2e-disable-default-seed-once';
+      const disableOnceKey = "@paseo:e2e-disable-default-seed-once";
       const disableValue = localStorage.getItem(disableOnceKey);
       if (disableValue) {
         localStorage.removeItem(disableOnceKey);
@@ -83,15 +80,15 @@ test.beforeEach(async ({ page }) => {
         }
       }
 
-      localStorage.setItem('@paseo:e2e', '1');
-      localStorage.setItem('@paseo:e2e-seed-nonce', seedNonce);
+      localStorage.setItem("@paseo:e2e", "1");
+      localStorage.setItem("@paseo:e2e-seed-nonce", seedNonce);
 
       // Hard-reset anything that could point to a developer's real daemon.
-      localStorage.setItem('@paseo:daemon-registry', JSON.stringify([daemon]));
-      localStorage.removeItem('@paseo:settings');
-      localStorage.setItem('@paseo:create-agent-preferences', JSON.stringify(preferences));
+      localStorage.setItem("@paseo:daemon-registry", JSON.stringify([daemon]));
+      localStorage.removeItem("@paseo:settings");
+      localStorage.setItem("@paseo:create-agent-preferences", JSON.stringify(preferences));
     },
-    { daemon: testDaemon, preferences: createAgentPreferences, seedNonce }
+    { daemon: testDaemon, preferences: createAgentPreferences, seedNonce },
   );
 });
 
@@ -105,9 +102,9 @@ test.afterEach(async ({ page }, testInfo) => {
     return;
   }
 
-  await testInfo.attach('browser-console', {
-    body: entries.join('\n'),
-    contentType: 'text/plain',
+  await testInfo.attach("browser-console", {
+    body: entries.join("\n"),
+    contentType: "text/plain",
   });
 });
 

packages/app/e2e/global-setup.ts

@@ -1,11 +1,11 @@
-import { spawn, type ChildProcess, execSync } from 'node:child_process';
-import { existsSync } from 'node:fs';
-import { mkdtemp, rm } from 'node:fs/promises';
-import { tmpdir } from 'node:os';
-import path from 'node:path';
-import net from 'node:net';
-import { Buffer } from 'node:buffer';
-import dotenv from 'dotenv';
+import { spawn, type ChildProcess, execSync } from "node:child_process";
+import { existsSync } from "node:fs";
+import { mkdtemp, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import net from "node:net";
+import { Buffer } from "node:buffer";
+import dotenv from "dotenv";
 
 type WaitForServerOptions = {
   host?: string;
@@ -18,11 +18,11 @@ type WaitForServerOptions = {
 async function getAvailablePort(): Promise<number> {
   return new Promise((resolve, reject) => {
     const server = net.createServer();
-    server.once('error', reject);
+    server.once("error", reject);
     server.listen(0, () => {
       const address = server.address();
-      if (!address || typeof address === 'string') {
-        server.close(() => reject(new Error('Failed to acquire port')));
+      if (!address || typeof address === "string") {
+        server.close(() => reject(new Error("Failed to acquire port")));
         return;
       }
       server.close(() => resolve(address.port));
@@ -40,18 +40,18 @@ function createLineBuffer(maxLines = 120): { add: (line: string) => void; dump:
       }
     },
     dump() {
-      return lines.join('\n');
+      return lines.join("\n");
     },
   };
 }
 
 function formatRecentOutput(getRecentOutput?: () => string): string {
   if (!getRecentOutput) {
-    return '';
+    return "";
   }
   const output = getRecentOutput().trim();
   if (!output) {
-    return '';
+    return "";
   }
   return `\nRecent output:\n${output}`;
 }
@@ -61,21 +61,15 @@ function sleep(ms: number): Promise<void> {
 }
 
 async function waitForServer(port: number, options: WaitForServerOptions): Promise<void> {
-  const {
-    host = '127.0.0.1',
-    timeoutMs = 15000,
-    label,
-    childProcess,
-    getRecentOutput,
-  } = options;
+  const { host = "127.0.0.1", timeoutMs = 15000, label, childProcess, getRecentOutput } = options;
   const start = Date.now();
   let lastConnectionError: unknown = null;
 
   while (Date.now() - start < timeoutMs) {
     if (childProcess && childProcess.exitCode !== null) {
-      const signal = childProcess.signalCode ? `, signal ${childProcess.signalCode}` : '';
+      const signal = childProcess.signalCode ? `, signal ${childProcess.signalCode}` : "";
       throw new Error(
-        `${label} exited before listening on ${host}:${port} (exit code ${childProcess.exitCode}${signal}).${formatRecentOutput(getRecentOutput)}`
+        `${label} exited before listening on ${host}:${port} (exit code ${childProcess.exitCode}${signal}).${formatRecentOutput(getRecentOutput)}`,
       );
     }
 
@@ -89,7 +83,7 @@ async function waitForServer(port: number, options: WaitForServerOptions): Promi
           socket.destroy();
           reject(new Error(`Connection timed out to ${host}:${port}`));
         });
-        socket.on('error', reject);
+        socket.on("error", reject);
       });
       return;
     } catch (error) {
@@ -99,9 +93,11 @@ async function waitForServer(port: number, options: WaitForServerOptions): Promi
   }
 
   const reason =
-    lastConnectionError instanceof Error ? ` Last connection error: ${lastConnectionError.message}` : '';
+    lastConnectionError instanceof Error
+      ? ` Last connection error: ${lastConnectionError.message}`
+      : "";
   throw new Error(
-    `${label} did not start on ${host}:${port} within ${timeoutMs}ms.${reason}${formatRecentOutput(getRecentOutput)}`
+    `${label} did not start on ${host}:${port} within ${timeoutMs}ms.${reason}${formatRecentOutput(getRecentOutput)}`,
   );
 }
 
@@ -126,15 +122,15 @@ async function stopProcess(child: ChildProcess | null): Promise<void> {
   if (child.exitCode !== null || child.signalCode !== null) {
     return;
   }
-  child.kill('SIGTERM');
+  child.kill("SIGTERM");
   await new Promise<void>((resolve) => {
     const timeout = setTimeout(() => {
       if (child.exitCode === null && child.signalCode === null) {
-        child.kill('SIGKILL');
+        child.kill("SIGKILL");
       }
       resolve();
     }, 5000);
-    child.once('exit', () => {
+    child.once("exit", () => {
       clearTimeout(timeout);
       resolve();
     });
@@ -144,7 +140,7 @@ async function stopProcess(child: ChildProcess | null): Promise<void> {
 function summarizeOpenAiErrorBody(body: string): string {
   const trimmed = body.trim();
   if (!trimmed) {
-    return 'empty response body';
+    return "empty response body";
   }
   if (trimmed.length <= 240) {
     return trimmed;
@@ -159,8 +155,8 @@ async function isOpenAiApiKeyUsable(apiKey: string | undefined): Promise<boolean
   }
 
   try {
-    const response = await fetch('https://api.openai.com/v1/models?limit=1', {
-      method: 'GET',
+    const response = await fetch("https://api.openai.com/v1/models?limit=1", {
+      method: "GET",
       headers: {
         Authorization: `Bearer ${key}`,
       },
@@ -170,14 +166,14 @@ async function isOpenAiApiKeyUsable(apiKey: string | undefined): Promise<boolean
     }
     const body = await response.text();
     console.warn(
-      `[e2e] OPENAI_API_KEY probe failed (${response.status}): ${summarizeOpenAiErrorBody(body)}`
+      `[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;
   }
@@ -196,42 +192,42 @@ type OfferPayload = {
 };
 
 function stripAnsi(input: string): string {
-  return input.replace(/\u001b\[[0-9;]*m/g, '');
+  return input.replace(/\u001b\[[0-9;]*m/g, "");
 }
 
 function ensureRelayBuildArtifact(repoRoot: string): void {
-  const relayDistEntry = path.join(repoRoot, 'packages/relay/dist/e2ee.js');
+  const relayDistEntry = path.join(repoRoot, "packages/relay/dist/e2ee.js");
   if (existsSync(relayDistEntry)) {
     return;
   }
 
-  console.log('[e2e] Building @getpaseo/relay for daemon startup');
-  execSync('npm run build --workspace=@getpaseo/relay', {
+  console.log("[e2e] Building @getpaseo/relay for daemon startup");
+  execSync("npm run build --workspace=@getpaseo/relay", {
     cwd: repoRoot,
-    stdio: 'inherit',
+    stdio: "inherit",
   });
 }
 
 function decodeOfferFromFragmentUrl(url: string): OfferPayload {
-  const marker = '#offer=';
+  const marker = "#offer=";
   const idx = url.indexOf(marker);
   if (idx === -1) {
     throw new Error(`missing ${marker} fragment: ${url}`);
   }
   const encoded = url.slice(idx + marker.length);
-  const json = Buffer.from(encoded, 'base64url').toString('utf8');
+  const json = Buffer.from(encoded, "base64url").toString("utf8");
   const offer = JSON.parse(json) as Partial<OfferPayload>;
-  if (offer.v !== 2) throw new Error('offer.v missing/invalid');
-  if (!offer.serverId) throw new Error('offer.serverId missing');
-  if (!offer.daemonPublicKeyB64) throw new Error('offer.daemonPublicKeyB64 missing');
-  if (!offer.relay?.endpoint) throw new Error('offer.relay.endpoint missing');
+  if (offer.v !== 2) throw new Error("offer.v missing/invalid");
+  if (!offer.serverId) throw new Error("offer.serverId missing");
+  if (!offer.daemonPublicKeyB64) throw new Error("offer.daemonPublicKeyB64 missing");
+  if (!offer.relay?.endpoint) throw new Error("offer.relay.endpoint missing");
   return offer as OfferPayload;
 }
 
 export default async function globalSetup() {
-  const repoRoot = path.resolve(__dirname, '../../..');
+  const repoRoot = path.resolve(__dirname, "../../..");
   ensureRelayBuildArtifact(repoRoot);
-  const envTestPath = path.join(repoRoot, '.env.test');
+  const envTestPath = path.join(repoRoot, ".env.test");
   if (existsSync(envTestPath)) {
     dotenv.config({ path: envTestPath });
   }
@@ -239,13 +235,17 @@ export default async function globalSetup() {
   const port = await getAvailablePort();
   let relayPort = 0;
   const metroPort = await getAvailablePort();
-  paseoHome = await mkdtemp(path.join(tmpdir(), 'paseo-e2e-home-'));
+  paseoHome = await mkdtemp(path.join(tmpdir(), "paseo-e2e-home-"));
   let relayLineBuffer = createLineBuffer();
   const metroLineBuffer = createLineBuffer();
   const daemonLineBuffer = createLineBuffer();
 
   const cleanup = async () => {
-    await Promise.all([stopProcess(daemonProcess), stopProcess(metroProcess), stopProcess(relayProcess)]);
+    await Promise.all([
+      stopProcess(daemonProcess),
+      stopProcess(metroProcess),
+      stopProcess(relayProcess),
+    ]);
     daemonProcess = null;
     metroProcess = null;
     relayProcess = null;
@@ -256,24 +256,30 @@ export default async function globalSetup() {
   };
 
   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';
+  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) {
+  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.'
+      "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;
+  const localModelsDir = dictationProvider === "local" ? defaultLocalModelsDir : null;
   console.log(
-    `[e2e] Dictation STT provider: ${dictationProvider}${openAiUsable ? '' : ' (OpenAI probe failed)'}`
+    `[e2e] Dictation STT provider: ${dictationProvider}${openAiUsable ? "" : " (OpenAI probe failed)"}`,
   );
 
   try {
-    const relayDir = path.resolve(__dirname, '..', '..', 'relay');
+    const relayDir = path.resolve(__dirname, "..", "..", "relay");
     const maxRelayStartupAttempts = 5;
     let relayStarted = false;
     let lastRelayStartupError: unknown = null;
@@ -285,18 +291,21 @@ export default async function globalSetup() {
       let relayReadyForSelectedPort = false;
 
       relayProcess = spawn(
-        'npx',
-        ['wrangler', 'dev', '--local', '--ip', '127.0.0.1', '--port', String(relayPort)],
+        "npx",
+        ["wrangler", "dev", "--local", "--ip", "127.0.0.1", "--port", String(relayPort)],
         {
           cwd: relayDir,
           env: { ...process.env },
-          stdio: ['ignore', 'pipe', 'pipe'],
+          stdio: ["ignore", "pipe", "pipe"],
           detached: false,
-        }
+        },
       );
 
-      relayProcess.stdout?.on('data', (data: Buffer) => {
-        const lines = data.toString().split('\n').filter((line) => line.trim());
+      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);
@@ -311,8 +320,11 @@ export default async function globalSetup() {
           console.log(`[relay] ${line}`);
         }
       });
-      relayProcess.stderr?.on('data', (data: Buffer) => {
-        const lines = data.toString().split('\n').filter((line) => line.trim());
+      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);
@@ -330,7 +342,7 @@ export default async function globalSetup() {
 
       try {
         await waitForServer(relayPort, {
-          label: 'Relay dev server',
+          label: "Relay dev server",
           timeoutMs: 30000,
           childProcess: relayProcess,
           getRecentOutput: relayLineBuffer.dump,
@@ -353,15 +365,15 @@ export default async function globalSetup() {
         if (!relayReadyForSelectedPort) {
           throw new Error(
             `Relay process did not report ready for selected port ${relayPort}.${formatRecentOutput(
-              relayLineBuffer.dump
-            )}`
+              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
-            )}`
+              relayLineBuffer.dump,
+            )}`,
           );
         }
 
@@ -380,40 +392,46 @@ export default async function globalSetup() {
           ? lastRelayStartupError.message
           : String(lastRelayStartupError);
       throw new Error(
-        `Failed to start relay dev server after ${maxRelayStartupAttempts} attempts. ${message}`
+        `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)], {
+    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
+        BROWSER: "none", // Don't auto-open browser
       },
-      stdio: ['ignore', 'pipe', 'pipe'],
+      stdio: ["ignore", "pipe", "pipe"],
       detached: false,
     });
 
-    metroProcess.stdout?.on('data', (data: Buffer) => {
-      const lines = data.toString().split('\n').filter((line) => line.trim());
+    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());
+    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();
+    const serverDir = path.resolve(__dirname, "../../..", "packages/server");
+    const tsxBin = execSync("which tsx").toString().trim();
 
     let offerPayload: OfferPayload | null = null;
     let offerResolve: (() => void) | null = null;
@@ -421,33 +439,36 @@ export default async function globalSetup() {
       offerResolve = resolve;
     });
 
-    daemonProcess = spawn(tsxBin, ['src/server/index.ts'], {
+    daemonProcess = spawn(tsxBin, ["src/server/index.ts"], {
       cwd: serverDir,
       env: {
         ...process.env,
         PASEO_HOME: paseoHome,
-        PASEO_SERVER_ID: 'srv_e2e_test_daemon',
+        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',
+        PASEO_DICTATION_ENABLED: openAiUsable ? "1" : "0",
+        PASEO_VOICE_MODE_ENABLED: openAiUsable ? "1" : "0",
+        ...(openAiUsable
+          ? {
+              PASEO_DICTATION_STT_PROVIDER: "openai",
+              PASEO_VOICE_STT_PROVIDER: "openai",
+              PASEO_VOICE_TTS_PROVIDER: "openai",
+            }
+          : {}),
         ...(localModelsDir ? { PASEO_LOCAL_MODELS_DIR: localModelsDir } : {}),
-        NODE_ENV: 'development',
+        NODE_ENV: "development",
       },
-      stdio: ['ignore', 'pipe', 'pipe'],
+      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() ?? '';
+    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;
@@ -456,13 +477,13 @@ export default async function globalSetup() {
           const clean = stripAnsi(trimmed);
           try {
             const obj = JSON.parse(clean) as { msg?: string; url?: string };
-            if (obj.msg === 'pairing_offer' && typeof obj.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')) {
+            if (match && clean.includes("pairing_offer")) {
               try {
                 offerPayload = decodeOfferFromFragmentUrl(match[0]);
                 offerResolve?.();
@@ -476,8 +497,11 @@ export default async function globalSetup() {
       }
     });
 
-    daemonProcess.stderr?.on('data', (data: Buffer) => {
-      const lines = data.toString().split('\n').filter((line) => line.trim());
+    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}`);
@@ -487,12 +511,12 @@ export default async function globalSetup() {
     // Wait for both daemon and Metro to be ready
     await Promise.all([
       waitForServer(port, {
-        label: 'Paseo daemon',
+        label: "Paseo daemon",
         childProcess: daemonProcess,
         getRecentOutput: daemonLineBuffer.dump,
       }),
       waitForServer(metroPort, {
-        label: 'Metro web server',
+        label: "Metro web server",
         timeoutMs: 120000, // Metro can take longer to start
         childProcess: metroProcess,
         getRecentOutput: metroLineBuffer.dump,
@@ -503,11 +527,11 @@ export default async function globalSetup() {
     await Promise.race([
       offerPromise,
       new Promise((_, reject) =>
-        setTimeout(() => reject(new Error('Timed out waiting for pairing_offer log')), 15000)
+        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');
+      throw new Error("pairing_offer was not parsed from daemon logs");
     }
     const offer = offerPayload as OfferPayload;
 
@@ -516,11 +540,13 @@ export default async function globalSetup() {
     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}`);
+    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');
+      console.log("[e2e] Test daemon stopped");
     };
   } catch (error) {
     await cleanup();

packages/app/e2e/helpers/agent-bottom-anchor.ts

@@ -2,10 +2,7 @@ import { expect, type Page } from "@playwright/test";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
 import { randomUUID } from "node:crypto";
-import {
-  buildHostWorkspaceAgentRoute,
-  buildHostWorkspaceRoute,
-} from "../../src/utils/host-routes";
+import { buildHostWorkspaceRoute } from "../../src/utils/host-routes";
 
 const NEAR_BOTTOM_THRESHOLD_PX = 72;
 
@@ -37,10 +34,7 @@ export type DaemonClientInstance = {
     initialPrompt: string;
   }): Promise<{ id: string }>;
   sendAgentMessage(agentId: string, text: string): Promise<void>;
-  waitForFinish(
-    agentId: string,
-    timeout?: number
-  ): Promise<{ status: string }>;
+  waitForFinish(agentId: string, timeout?: number): Promise<{ status: string }>;
 };
 
 function getDaemonWsUrl(): string {
@@ -89,14 +83,16 @@ export function createReplyTurn(label: string): {
   };
 }
 
-async function loadDaemonClientConstructor(): Promise<new (config: {
-  url: string;
-  clientId: string;
-  clientType: "cli";
-}) => DaemonClientInstance> {
+async function loadDaemonClientConstructor(): Promise<
+  new (config: {
+    url: string;
+    clientId: string;
+    clientType: "cli";
+  }) => DaemonClientInstance
+> {
   const repoRoot = path.resolve(process.cwd(), "../..");
   const moduleUrl = pathToFileURL(
-    path.join(repoRoot, "packages/server/dist/server/server/exports.js")
+    path.join(repoRoot, "packages/server/dist/server/server/exports.js"),
   ).href;
   const mod = (await import(moduleUrl)) as {
     DaemonClient: new (config: {
@@ -141,7 +137,7 @@ export async function seedBottomAnchorAgent(input: {
   const initialFinish = await input.client.waitForFinish(created.id, 120000);
   if (initialFinish.status !== "idle") {
     throw new Error(
-      `Expected seeded agent ${created.id} to become idle after initial prompt, got ${initialFinish.status}.`
+      `Expected seeded agent ${created.id} to become idle after initial prompt, got ${initialFinish.status}.`,
     );
   }
 
@@ -153,7 +149,7 @@ export async function seedBottomAnchorAgent(input: {
     const finish = await input.client.waitForFinish(created.id, 120000);
     if (finish.status !== "idle") {
       throw new Error(
-        `Expected seeded agent ${created.id} to become idle after turn ${index}, got ${finish.status}.`
+        `Expected seeded agent ${created.id} to become idle after turn ${index}, got ${finish.status}.`,
       );
     }
   }
@@ -162,7 +158,7 @@ export async function seedBottomAnchorAgent(input: {
     id: created.id,
     title,
     expectedTailText,
-    url: buildHostWorkspaceAgentRoute(getServerId(), input.cwd, created.id),
+    url: `${buildHostWorkspaceRoute(getServerId(), input.cwd)}?open=${encodeURIComponent(`agent:${created.id}`)}`,
     workspaceUrl: buildHostWorkspaceRoute(getServerId(), input.cwd),
   };
 }
@@ -186,18 +182,13 @@ export async function readScrollMetrics(page: Page): Promise<ScrollMetrics> {
     const scrollElement =
       candidates.sort(
         (left, right) =>
-          right.scrollHeight -
-          right.clientHeight -
-          (left.scrollHeight - left.clientHeight)
+          right.scrollHeight - right.clientHeight - (left.scrollHeight - left.clientHeight),
       )[0] ?? (root as HTMLElement);
 
     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)
-    );
+    const distanceFromBottom = Math.max(0, contentHeight - (offsetY + viewportHeight));
 
     return {
       offsetY,
@@ -221,7 +212,7 @@ export async function scrollUpFromBottom(page: Page, pixels: number): Promise<vo
           deltaY: -step,
           bubbles: true,
           cancelable: true,
-        })
+        }),
       );
       scrollContainer.scrollTop = Math.max(0, scrollContainer.scrollTop - step);
       scrollContainer.dispatchEvent(new Event("scroll", { bubbles: true }));
@@ -270,7 +261,7 @@ export async function expectDetachedFromBottom(page: Page): Promise<void> {
 
 export async function waitForContentGrowth(
   page: Page,
-  previousContentHeight: number
+  previousContentHeight: number,
 ): Promise<ScrollMetrics> {
   await expect
     .poll(async () => {
@@ -283,8 +274,8 @@ export async function waitForContentGrowth(
 
 export async function getChatContainerKey(page: Page): Promise<string | null> {
   return getVisibleChatScroll(page).evaluate((element) => {
-      const nativeId = (element as HTMLElement).id;
-      const prefix = "agent-chat-scroll-";
-      return nativeId.startsWith(prefix) ? nativeId.slice(prefix.length) : null;
-    });
+    const nativeId = (element as HTMLElement).id;
+    const prefix = "agent-chat-scroll-";
+    return nativeId.startsWith(prefix) ? nativeId.slice(prefix.length) : null;
+  });
 }

packages/app/e2e/helpers/app.ts

@@ -1,20 +1,19 @@
-import { expect, type Page } from '@playwright/test';
-import {
-  buildCreateAgentPreferences,
-  buildSeededHost,
-} from './daemon-registry';
+import { expect, type Page } from "@playwright/test";
+import { buildCreateAgentPreferences, buildSeededHost } from "./daemon-registry";
 
 function escapeRegex(value: string): string {
-  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
 function getE2EDaemonPort(): string {
   const port = process.env.E2E_DAEMON_PORT;
   if (!port) {
-    throw new Error('E2E_DAEMON_PORT is not set (expected from Playwright globalSetup).');
+    throw new Error("E2E_DAEMON_PORT is not set (expected from Playwright globalSetup).");
   }
-  if (port === '6767') {
-    throw new Error('E2E_DAEMON_PORT is 6767. Refusing to run e2e against the default local daemon.');
+  if (port === "6767") {
+    throw new Error(
+      "E2E_DAEMON_PORT is 6767. Refusing to run e2e against the default local daemon.",
+    );
   }
   return port;
 }
@@ -24,25 +23,38 @@ async function ensureE2EStorageSeeded(page: Page): Promise<void> {
   const expectedEndpoint = `127.0.0.1:${port}`;
   const expectedServerId = process.env.E2E_SERVER_ID;
   if (!expectedServerId) {
-    throw new Error('E2E_SERVER_ID is not set (expected from Playwright globalSetup).');
+    throw new Error("E2E_SERVER_ID is not set (expected from Playwright globalSetup).");
   }
 
-  const needsReset = await page.evaluate(({ expectedEndpoint, expectedServerId }) => {
-    const raw = localStorage.getItem('@paseo:daemon-registry');
-    if (!raw) return true;
-    try {
-      const parsed = JSON.parse(raw);
-      if (!Array.isArray(parsed) || parsed.length !== 1) return true;
-      const entry = parsed[0] as any;
-      if (entry?.serverId !== expectedServerId) return true;
-      const connections = entry?.connections;
-      if (!Array.isArray(connections)) return true;
-      if (connections.some((c: any) => c?.type === 'directTcp' && typeof c?.endpoint === 'string' && /:6767\b/.test(c.endpoint))) return true;
-      return !connections.some((c: any) => c?.type === 'directTcp' && c?.endpoint === expectedEndpoint);
-    } catch {
-      return true;
-    }
-  }, { expectedEndpoint, expectedServerId });
+  const needsReset = await page.evaluate(
+    ({ expectedEndpoint, expectedServerId }) => {
+      const raw = localStorage.getItem("@paseo:daemon-registry");
+      if (!raw) return true;
+      try {
+        const parsed = JSON.parse(raw);
+        if (!Array.isArray(parsed) || parsed.length !== 1) return true;
+        const entry = parsed[0] as any;
+        if (entry?.serverId !== expectedServerId) return true;
+        const connections = entry?.connections;
+        if (!Array.isArray(connections)) return true;
+        if (
+          connections.some(
+            (c: any) =>
+              c?.type === "directTcp" &&
+              typeof c?.endpoint === "string" &&
+              /:6767\b/.test(c.endpoint),
+          )
+        )
+          return true;
+        return !connections.some(
+          (c: any) => c?.type === "directTcp" && c?.endpoint === expectedEndpoint,
+        );
+      } catch {
+        return true;
+      }
+    },
+    { expectedEndpoint, expectedServerId },
+  );
 
   if (!needsReset) {
     return;
@@ -57,12 +69,12 @@ async function ensureE2EStorageSeeded(page: Page): Promise<void> {
   const preferences = buildCreateAgentPreferences(expectedServerId);
   await page.evaluate(
     ({ daemon, preferences }) => {
-      localStorage.setItem('@paseo:e2e', '1');
-      localStorage.setItem('@paseo:daemon-registry', JSON.stringify([daemon]));
-      localStorage.setItem('@paseo:create-agent-preferences', JSON.stringify(preferences));
-      localStorage.removeItem('@paseo:settings');
+      localStorage.setItem("@paseo:e2e", "1");
+      localStorage.setItem("@paseo:daemon-registry", JSON.stringify([daemon]));
+      localStorage.setItem("@paseo:create-agent-preferences", JSON.stringify(preferences));
+      localStorage.removeItem("@paseo:settings");
     },
-    { daemon, preferences }
+    { daemon, preferences },
   );
 
   await page.reload();
@@ -73,81 +85,98 @@ async function assertE2EUsesSeededTestDaemon(page: Page): Promise<void> {
   const expectedEndpoint = `127.0.0.1:${port}`;
   const expectedServerId = process.env.E2E_SERVER_ID;
   if (!expectedServerId) {
-    throw new Error('E2E_SERVER_ID is not set (expected from Playwright globalSetup).');
+    throw new Error("E2E_SERVER_ID is not set (expected from Playwright globalSetup).");
   }
 
   const snapshot = await page.evaluate(() => {
-    const registryRaw = localStorage.getItem('@paseo:daemon-registry');
-    const prefsRaw = localStorage.getItem('@paseo:create-agent-preferences');
+    const registryRaw = localStorage.getItem("@paseo:daemon-registry");
+    const prefsRaw = localStorage.getItem("@paseo:create-agent-preferences");
     return { registryRaw, prefsRaw };
   });
 
   if (!snapshot.registryRaw) {
-    throw new Error('E2E expected @paseo:daemon-registry to be set before app load.');
+    throw new Error("E2E expected @paseo:daemon-registry to be set before app load.");
   }
 
   let registry: any;
   try {
     registry = JSON.parse(snapshot.registryRaw);
   } catch {
-    throw new Error('E2E expected @paseo:daemon-registry to be valid JSON.');
+    throw new Error("E2E expected @paseo:daemon-registry to be valid JSON.");
   }
 
   if (!Array.isArray(registry) || registry.length !== 1) {
     throw new Error(
-      `E2E expected @paseo:daemon-registry to contain exactly 1 daemon (got ${Array.isArray(registry) ? registry.length : 'non-array'}).`
+      `E2E expected @paseo:daemon-registry to contain exactly 1 daemon (got ${Array.isArray(registry) ? registry.length : "non-array"}).`,
     );
   }
 
   const daemon = registry[0];
-  if (typeof daemon?.serverId !== 'string' || daemon.serverId.length === 0) {
-    throw new Error(`E2E expected seeded daemon to have a string serverId (got ${String(daemon?.serverId)}).`);
+  if (typeof daemon?.serverId !== "string" || daemon.serverId.length === 0) {
+    throw new Error(
+      `E2E expected seeded daemon to have a string serverId (got ${String(daemon?.serverId)}).`,
+    );
   }
   if (daemon.serverId !== expectedServerId) {
-    throw new Error(`E2E expected seeded daemon serverId to be ${expectedServerId} (got ${daemon.serverId}).`);
+    throw new Error(
+      `E2E expected seeded daemon serverId to be ${expectedServerId} (got ${daemon.serverId}).`,
+    );
   }
 
   const connections: unknown = daemon?.connections;
   if (
     !Array.isArray(connections) ||
-    !connections.some((c: any) => c?.type === 'directTcp' && c?.endpoint === expectedEndpoint)
+    !connections.some((c: any) => c?.type === "directTcp" && c?.endpoint === expectedEndpoint)
   ) {
     throw new Error(
-      `E2E expected seeded daemon connections to include directTcp ${expectedEndpoint} (got ${JSON.stringify(connections)}).`
+      `E2E expected seeded daemon connections to include directTcp ${expectedEndpoint} (got ${JSON.stringify(connections)}).`,
     );
   }
-  if (Array.isArray(connections) && connections.some((c: any) => c?.type === 'directTcp' && typeof c?.endpoint === 'string' && /:6767\b/.test(c.endpoint))) {
-    throw new Error(`E2E detected a daemon endpoint pointing at :6767 (${JSON.stringify(connections)}).`);
+  if (
+    Array.isArray(connections) &&
+    connections.some(
+      (c: any) =>
+        c?.type === "directTcp" && typeof c?.endpoint === "string" && /:6767\b/.test(c.endpoint),
+    )
+  ) {
+    throw new Error(
+      `E2E detected a daemon endpoint pointing at :6767 (${JSON.stringify(connections)}).`,
+    );
   }
 
   if (!snapshot.prefsRaw) {
-    throw new Error('E2E expected @paseo:create-agent-preferences to be set before app load.');
+    throw new Error("E2E expected @paseo:create-agent-preferences to be set before app load.");
   }
   try {
     const prefs = JSON.parse(snapshot.prefsRaw) as any;
     if (prefs?.serverId !== daemon.serverId) {
       throw new Error(
-        `E2E expected create-agent-preferences.serverId to match seeded daemon serverId (${daemon.serverId}) (got ${String(prefs?.serverId)}).`
+        `E2E expected create-agent-preferences.serverId to match seeded daemon serverId (${daemon.serverId}) (got ${String(prefs?.serverId)}).`,
       );
     }
   } catch (error) {
     if (error instanceof Error) throw error;
-    throw new Error('E2E expected @paseo:create-agent-preferences to be valid JSON.');
+    throw new Error("E2E expected @paseo:create-agent-preferences to be valid JSON.");
   }
 }
 
 export const gotoAppShell = async (page: Page) => {
-  await page.goto('/');
+  await page.goto("/");
   await ensureE2EStorageSeeded(page);
 };
 
 export const gotoHome = async (page: Page) => {
   await gotoAppShell(page);
-  const composer = page.getByRole('textbox', { name: 'Message agent...' });
-  if (!(await composer.first().isVisible().catch(() => false))) {
-    const addProjectCta = page.getByText('Add a project', { exact: true }).first();
-    const addProjectSidebar = page.getByText('Add project', { exact: true }).first();
-    const newAgentButton = page.getByText('New agent', { exact: true }).first();
+  const composer = page.getByRole("textbox", { name: "Message agent..." });
+  if (
+    !(await composer
+      .first()
+      .isVisible()
+      .catch(() => false))
+  ) {
+    const addProjectCta = page.getByText("Add a project", { exact: true }).first();
+    const addProjectSidebar = page.getByText("Add project", { exact: true }).first();
+    const newAgentButton = page.getByText("New agent", { exact: true }).first();
 
     await expect
       .poll(
@@ -155,7 +184,7 @@ export const gotoHome = async (page: Page) => {
           (await addProjectCta.isVisible().catch(() => false)) ||
           (await addProjectSidebar.isVisible().catch(() => false)) ||
           (await newAgentButton.isVisible().catch(() => false)),
-        { timeout: 10000 }
+        { timeout: 10000 },
       )
       .toBe(true);
 
@@ -173,7 +202,7 @@ export const gotoHome = async (page: Page) => {
 export const openSettings = async (page: Page) => {
   const serverId = process.env.E2E_SERVER_ID;
   if (!serverId) {
-    throw new Error('E2E_SERVER_ID is not set (expected from Playwright globalSetup).');
+    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.
@@ -189,23 +218,19 @@ export const setWorkingDirectory = async (page: Page, directory: string) => {
     .first();
   await expect(workingDirectorySelect).toBeVisible({ timeout: 30000 });
 
-  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 }).first();
+  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 }).first();
   const closeBottomSheet = async () => {
-    const bottomSheetBackdrop = page
-      .getByRole('button', { name: 'Bottom sheet backdrop' })
-      .first();
-    const bottomSheetHandle = page
-      .getByRole('slider', { name: 'Bottom sheet handle' })
-      .first();
+    const bottomSheetBackdrop = page.getByRole("button", { name: "Bottom sheet backdrop" }).first();
+    const bottomSheetHandle = page.getByRole("slider", { name: "Bottom sheet handle" }).first();
     for (let attempt = 0; attempt < 3; attempt += 1) {
       if (!(await bottomSheetBackdrop.isVisible())) {
         return;
       }
       await bottomSheetBackdrop.click({ force: true });
-      await page.keyboard.press('Escape').catch(() => undefined);
+      await page.keyboard.press("Escape").catch(() => undefined);
       await page.waitForTimeout(200);
     }
     if (await bottomSheetBackdrop.isVisible()) {
@@ -225,7 +250,7 @@ export const setWorkingDirectory = async (page: Page, directory: string) => {
     if (!(await worktreeSheetTitle.isVisible()) && !(await worktreePicker.isVisible())) {
       return;
     }
-    const attachToggle = page.getByTestId('worktree-attach-toggle');
+    const attachToggle = page.getByTestId("worktree-attach-toggle");
     if (await attachToggle.isVisible()) {
       await attachToggle.click({ force: true });
       await page.waitForTimeout(200);
@@ -246,26 +271,23 @@ export const setWorkingDirectory = async (page: Page, directory: string) => {
       await closeBottomSheet();
       await workingDirectorySelect.click({ force: true });
     }
-    await expect
-      .poll(async () => pickerInputVisible(), { timeout: 10000 })
-      .toBe(true);
+    await expect.poll(async () => pickerInputVisible(), { timeout: 10000 }).toBe(true);
   }
 
-  const trimmedDirectory = directory.replace(/\/+$/, '');
-  const activeInput =
-    (await directorySearchInput.isVisible().catch(() => false))
-      ? directorySearchInput
-      : legacyInput;
+  const trimmedDirectory = directory.replace(/\/+$/, "");
+  const activeInput = (await directorySearchInput.isVisible().catch(() => false))
+    ? directorySearchInput
+    : legacyInput;
 
   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'))
+      .getByText(new RegExp(`^${escapeRegex(trimmedDirectory)}$`, "i"))
       .first();
     const prefixedUseOption = page
-      .getByText(new RegExp(`^Use "${escapeRegex(trimmedDirectory)}"$`, 'i'))
+      .getByText(new RegExp(`^Use "${escapeRegex(trimmedDirectory)}"$`, "i"))
       .first();
 
     if (await plainOption.isVisible().catch(() => false)) {
@@ -274,33 +296,38 @@ export const setWorkingDirectory = async (page: Page, directory: string) => {
       await prefixedUseOption.click({ force: true });
     } else {
       // Fallback: accept highlighted option (directory suggestion).
-      await activeInput.press('Enter');
+      await activeInput.press("Enter");
     }
   } else {
     // Legacy path picker fallback.
-    await activeInput.press('Enter');
+    await activeInput.press("Enter");
   }
 
   // Wait for picker to close.
   await expect(activeInput).not.toBeVisible({ timeout: 10000 });
 
   const directoryCandidates = new Set<string>([trimmedDirectory]);
-  if (trimmedDirectory.startsWith('/var/')) {
+  if (trimmedDirectory.startsWith("/var/")) {
     directoryCandidates.add(`/private${trimmedDirectory}`);
   }
-  if (trimmedDirectory.startsWith('/private/var/')) {
-    directoryCandidates.add(trimmedDirectory.replace(/^\/private/, ''));
+  if (trimmedDirectory.startsWith("/private/var/")) {
+    directoryCandidates.add(trimmedDirectory.replace(/^\/private/, ""));
   }
-  const basename = trimmedDirectory.split('/').filter(Boolean).pop() ?? trimmedDirectory;
+  const basename = trimmedDirectory.split("/").filter(Boolean).pop() ?? trimmedDirectory;
 
-  await expect.poll(async () => {
-    const text = await workingDirectorySelect.innerText().catch(() => '');
-    if (text.includes(basename)) return true;
-    for (const candidate of directoryCandidates) {
-      if (text.includes(candidate)) return true;
-    }
-    return false;
-  }, { timeout: 30000 }).toBe(true);
+  await expect
+    .poll(
+      async () => {
+        const text = await workingDirectorySelect.innerText().catch(() => "");
+        if (text.includes(basename)) return true;
+        for (const candidate of directoryCandidates) {
+          if (text.includes(candidate)) return true;
+        }
+        return false;
+      },
+      { timeout: 30000 },
+    )
+    .toBe(true);
 };
 
 export const ensureHostSelected = async (page: Page) => {
@@ -318,19 +345,21 @@ export const ensureHostSelected = async (page: Page) => {
     }
 
     const fix = await page.evaluate(() => {
-      const registryRaw = localStorage.getItem('@paseo:daemon-registry');
-      const prefsRaw = localStorage.getItem('@paseo:create-agent-preferences');
-      if (!registryRaw || !prefsRaw) return { ok: false, reason: 'missing storage' } as const;
+      const registryRaw = localStorage.getItem("@paseo:daemon-registry");
+      const prefsRaw = localStorage.getItem("@paseo:create-agent-preferences");
+      if (!registryRaw || !prefsRaw) return { ok: false, reason: "missing storage" } as const;
       const registry = JSON.parse(registryRaw) as any[];
       const prefs = JSON.parse(prefsRaw) as any;
-      if (!Array.isArray(registry) || registry.length !== 1) return { ok: false, reason: 'registry shape' } as const;
+      if (!Array.isArray(registry) || registry.length !== 1)
+        return { ok: false, reason: "registry shape" } as const;
       const serverId = registry[0]?.serverId;
-      if (typeof serverId !== 'string' || serverId.length === 0) return { ok: false, reason: 'missing serverId' } as const;
+      if (typeof serverId !== "string" || serverId.length === 0)
+        return { ok: false, reason: "missing serverId" } as const;
       prefs.serverId = serverId;
-      localStorage.setItem('@paseo:create-agent-preferences', JSON.stringify(prefs));
+      localStorage.setItem("@paseo:create-agent-preferences", JSON.stringify(prefs));
       // Prevent the fixture's init-script from overwriting the corrected prefs on reload.
-      const nonce = localStorage.getItem('@paseo:e2e-seed-nonce') ?? '1';
-      localStorage.setItem('@paseo:e2e-disable-default-seed-once', nonce);
+      const nonce = localStorage.getItem("@paseo:e2e-seed-nonce") ?? "1";
+      localStorage.setItem("@paseo:e2e-disable-default-seed-once", nonce);
       return { ok: true } as const;
     });
 
@@ -342,20 +371,22 @@ export const ensureHostSelected = async (page: Page) => {
     await assertE2EUsesSeededTestDaemon(page);
   }
 
-  const input = page.getByRole('textbox', { name: 'Message agent...' });
+  const input = page.getByRole("textbox", { name: "Message agent..." });
   await expect(input).toBeVisible();
 
   if (await input.isEditable()) {
     return;
   }
 
-  const selectHostLabel = page.getByText('Select host', { exact: true });
+  const selectHostLabel = page.getByText("Select host", { exact: true });
   if (await selectHostLabel.isVisible()) {
     await selectHostLabel.click();
 
     // E2E safety: we enforce a single seeded daemon, so the option should be unambiguous.
-    const localhostOption = page.getByText('localhost', { exact: true }).first();
-    const daemonIdOption = page.getByText(process.env.E2E_SERVER_ID ?? 'srv_e2e_test_daemon', { exact: true }).first();
+    const localhostOption = page.getByText("localhost", { exact: true }).first();
+    const daemonIdOption = page
+      .getByText(process.env.E2E_SERVER_ID ?? "srv_e2e_test_daemon", { exact: true })
+      .first();
 
     if (await localhostOption.isVisible()) {
       await localhostOption.click();
@@ -369,11 +400,11 @@ export const ensureHostSelected = async (page: Page) => {
 };
 
 export const createAgent = async (page: Page, message: string) => {
-  const input = page.getByRole('textbox', { name: 'Message agent...' });
+  const input = page.getByRole("textbox", { name: "Message agent..." });
   await expect(input).toBeEditable();
   await preferFastThinkingOption(page);
   await input.fill(message);
-  await input.press('Enter');
+  await input.press("Enter");
 
   // 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.
@@ -385,21 +416,23 @@ export const createAgent = async (page: Page, message: string) => {
 
 async function preferFastThinkingOption(page: Page): Promise<void> {
   const providerTrigger = page
-    .locator('[data-testid="agent-provider-selector"]:visible, [data-testid="draft-provider-select"]:visible')
+    .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();
+    const providerText = ((await providerTrigger.innerText().catch(() => "")) ?? "").trim();
     if (!/codex/i.test(providerText)) {
       return;
     }
   }
 
-  const thinkingTrigger = page.getByTestId('agent-thinking-selector').first();
+  const thinkingTrigger = page.getByTestId("agent-thinking-selector").first();
   if (!(await thinkingTrigger.isVisible().catch(() => false))) {
     return;
   }
 
-  const currentThinkingLabel = ((await thinkingTrigger.innerText().catch(() => '')) ?? '')
+  const currentThinkingLabel = ((await thinkingTrigger.innerText().catch(() => "")) ?? "")
     .trim()
     .toLowerCase();
   if (/\b(low|minimal|off)\b/.test(currentThinkingLabel)) {
@@ -407,16 +440,16 @@ async function preferFastThinkingOption(page: Page): Promise<void> {
   }
 
   await thinkingTrigger.click();
-  const menu = page.getByTestId('agent-thinking-menu').first();
+  const menu = page.getByTestId("agent-thinking-menu").first();
   if (!(await menu.isVisible().catch(() => false))) {
     return;
   }
 
-  const preferredLabels = ['low', 'minimal', 'off', 'medium'];
+  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') })
+      .getByRole("button", { name: new RegExp(`^${escapeRegex(label)}$`, "i") })
       .first();
     if (await option.isVisible().catch(() => false)) {
       await option.click({ force: true });
@@ -426,11 +459,11 @@ async function preferFastThinkingOption(page: Page): Promise<void> {
   }
 
   if (!selected) {
-    const options = menu.getByRole('button');
+    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();
+      const label = ((await option.innerText().catch(() => "")) ?? "").trim();
       if (!label) {
         continue;
       }
@@ -444,7 +477,7 @@ async function preferFastThinkingOption(page: Page): Promise<void> {
   }
 
   if (!selected) {
-    await page.keyboard.press('Escape').catch(() => undefined);
+    await page.keyboard.press("Escape").catch(() => undefined);
     return;
   }
 
@@ -462,15 +495,17 @@ export interface AgentConfig {
 export const selectProvider = async (page: Page, provider: string) => {
   const normalizedProvider = provider.trim();
   if (!normalizedProvider) {
-    throw new Error('Provider must be a non-empty string.');
+    throw new Error("Provider must be a non-empty string.");
   }
 
   const providerTrigger = page
-    .locator('[data-testid="agent-provider-selector"]:visible, [data-testid="draft-provider-select"]:visible')
+    .locator(
+      '[data-testid="agent-provider-selector"]:visible, [data-testid="draft-provider-select"]:visible',
+    )
     .first();
   if (
     await providerTrigger
-      .getByText(new RegExp(`^${escapeRegex(normalizedProvider)}$`, 'i'))
+      .getByText(new RegExp(`^${escapeRegex(normalizedProvider)}$`, "i"))
       .first()
       .isVisible()
       .catch(() => false)
@@ -481,20 +516,18 @@ export const selectProvider = async (page: Page, provider: string) => {
   if (await providerTrigger.isVisible().catch(() => false)) {
     await providerTrigger.click();
   } else {
-    const providerLabel = page.getByText('PROVIDER', { exact: true }).first();
+    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();
+  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();
+  const option = dialog.getByText(new RegExp(`^${escapeRegex(normalizedProvider)}$`, "i")).first();
   await expect(option).toBeVisible();
   await option.click();
 };
@@ -502,15 +535,17 @@ export const selectProvider = async (page: Page, provider: string) => {
 export const selectModel = async (page: Page, model: string) => {
   const normalizedModel = model.trim();
   if (!normalizedModel) {
-    throw new Error('Model must be a non-empty string.');
+    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')
+    .locator(
+      '[data-testid="agent-model-selector"]:visible, [data-testid="draft-model-select"]:visible',
+    )
     .first();
   if (
     await modelTrigger
-      .getByText(new RegExp(`^${escapeRegex(normalizedModel)}$`, 'i'))
+      .getByText(new RegExp(`^${escapeRegex(normalizedModel)}$`, "i"))
       .first()
       .isVisible()
       .catch(() => false)
@@ -521,21 +556,21 @@ export const selectModel = async (page: Page, model: string) => {
   if (await modelTrigger.isVisible().catch(() => false)) {
     await modelTrigger.click();
   } else {
-    const modelLabel = page.getByText('MODEL', { exact: true }).first();
+    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 });
+  const searchInput = page.getByRole("textbox", { name: /search model/i });
   await expect(searchInput).toBeVisible({ timeout: 10000 });
 
   // Type to search/filter models
   await searchInput.fill(normalizedModel);
 
-  const dialog = page.getByRole('dialog');
+  const dialog = page.getByRole("dialog");
   const exactOption = dialog
-    .getByText(new RegExp(`^${escapeRegex(normalizedModel)}$`, 'i'))
+    .getByText(new RegExp(`^${escapeRegex(normalizedModel)}$`, "i"))
     .first();
   const exactVisible = await exactOption.isVisible().catch(() => false);
   if (exactVisible) {
@@ -543,39 +578,39 @@ export const selectModel = async (page: Page, model: string) => {
   } else {
     // Modern labels include version suffixes (for example "Haiku 4.5"), so
     // select the first filtered result using keyboard confirm.
-    await searchInput.press('Enter');
+    await searchInput.press("Enter");
   }
 
   // Wait for dropdown to close
   if (await searchInput.isVisible().catch(() => false)) {
-    await page.keyboard.press('Escape').catch(() => undefined);
+    await page.keyboard.press("Escape").catch(() => undefined);
   }
   await expect(searchInput).not.toBeVisible({ timeout: 5000 });
 };
 
 export const selectMode = async (page: Page, mode: string) => {
   const modeTrigger = page
-    .locator('[data-testid="agent-mode-selector"]:visible, [data-testid="draft-mode-select"]:visible')
+    .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();
+    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 });
+  const searchInput = page.getByRole("textbox", { name: /search mode/i });
   await expect(searchInput).toBeVisible({ timeout: 10000 });
 
   // Type to filter modes
   await searchInput.fill(mode);
 
-  const dialog = page.getByRole('dialog');
-  const option = dialog
-    .getByText(new RegExp(`^${escapeRegex(mode)}$`, 'i'))
-    .first();
+  const dialog = page.getByRole("dialog");
+  const option = dialog.getByText(new RegExp(`^${escapeRegex(mode)}$`, "i")).first();
   await expect(option).toBeVisible();
   await option.click({ force: true });
 
@@ -605,7 +640,7 @@ export const createAgentWithConfig = async (page: Page, config: AgentConfig) =>
 
 export const createAgentInRepo = async (
   page: Page,
-  config: Pick<AgentConfig, 'directory' | 'prompt'>
+  config: Pick<AgentConfig, "directory" | "prompt">,
 ) => {
   await gotoHome(page);
   await ensureHostSelected(page);
@@ -614,25 +649,25 @@ export const createAgentInRepo = async (
 };
 
 export const waitForPermissionPrompt = async (page: Page, timeout = 30000) => {
-  const promptText = page.getByTestId('permission-request-question').first();
+  const promptText = page.getByTestId("permission-request-question").first();
   await expect(promptText).toBeVisible({ timeout });
 };
 
 export const allowPermission = async (page: Page) => {
-  const acceptButton = page.getByTestId('permission-request-accept').first();
+  const acceptButton = page.getByTestId("permission-request-accept").first();
   await expect(acceptButton).toBeVisible({ timeout: 5000 });
   await acceptButton.click();
 };
 
 export const denyPermission = async (page: Page) => {
-  const denyButton = page.getByTestId('permission-request-deny').first();
+  const denyButton = page.getByTestId("permission-request-deny").first();
   await expect(denyButton).toBeVisible({ timeout: 5000 });
   await denyButton.click();
 };
 
 export async function waitForAgentFinishUI(page: Page, timeout = 30000) {
   // Wait for the stop button to disappear
-  const stopButton = page.getByRole('button', { name: /stop|cancel/i });
+  const stopButton = page.getByRole("button", { name: /stop|cancel/i });
 
   // First, let's debug what's happening - wait a bit to see the state
   await page.waitForTimeout(2000);
@@ -649,9 +684,11 @@ export async function waitForAgentFinishUI(page: Page, timeout = 30000) {
     const toolCallResult = page.getByText(/permission.*denied|denied|blocked/i);
 
     // Wait for the tool call result to appear
-    await expect(toolCallResult).toBeVisible({ timeout: 10000 }).catch(() => {
-      // If no specific message, just wait for the button to disappear
-    });
+    await expect(toolCallResult)
+      .toBeVisible({ timeout: 10000 })
+      .catch(() => {
+        // If no specific message, just wait for the button to disappear
+      });
 
     // Now wait for the stop button to disappear
     await expect(stopButton).not.toBeVisible({ timeout });

packages/app/e2e/helpers/launcher.ts

@@ -0,0 +1,196 @@
+import { expect, type Page } from "@playwright/test";
+import { buildHostWorkspaceRoute } from "../../src/utils/host-routes";
+import { createTempGitRepo } from "./workspace";
+
+// ─── Navigation ────────────────────────────────────────────────────────────
+
+function getServerId(): string {
+  const serverId = process.env.E2E_SERVER_ID;
+  if (!serverId) {
+    throw new Error("E2E_SERVER_ID is not set (expected from Playwright globalSetup).");
+  }
+  return serverId;
+}
+
+/** Navigate to a workspace and wait for the tab bar to appear. */
+export async function gotoWorkspace(page: Page, cwd: string): Promise<void> {
+  const route = buildHostWorkspaceRoute(getServerId(), cwd);
+  await page.goto(route);
+  await waitForTabBar(page);
+}
+
+// ─── Tab bar queries ───────────────────────────────────────────────────────
+
+/** Wait for the workspace tab bar to be visible. */
+export async function waitForTabBar(page: Page): Promise<void> {
+  await expect(page.getByTestId("workspace-tabs-row").first()).toBeVisible({
+    timeout: 30_000,
+  });
+}
+
+/** Return all tab test IDs currently in the tab bar. */
+export async function getTabTestIds(page: Page): Promise<string[]> {
+  const tabs = page.locator('[data-testid^="workspace-tab-"]');
+  const count = await tabs.count();
+  const ids: string[] = [];
+  for (let i = 0; i < count; i++) {
+    const testId = await tabs.nth(i).getAttribute("data-testid");
+    if (testId) ids.push(testId);
+  }
+  return ids;
+}
+
+/** Return the number of tabs matching a kind prefix (e.g. "launcher", "draft", "terminal", "agent"). */
+export async function countTabsOfKind(page: Page, kind: string): Promise<number> {
+  const ids = await getTabTestIds(page);
+  return ids.filter((id) => id.includes(kind)).length;
+}
+
+/** Return the currently active tab's test ID (the one with aria-selected or focus styling). */
+export async function getActiveTabTestId(page: Page): Promise<string | null> {
+  // Active tab has the focused highlight — check for the aria-selected or data-active attribute
+  const activeTab = page.locator('[data-testid^="workspace-tab-"][aria-selected="true"]').first();
+  if (await activeTab.isVisible().catch(() => false)) {
+    return activeTab.getAttribute("data-testid");
+  }
+  // Fallback: the tab with focused styling
+  return null;
+}
+
+// ─── Tab actions ───────────────────────────────────────────────────────────
+
+/** Click the '+' button in the tab bar to open a new launcher tab. */
+export async function clickNewTabButton(page: Page): Promise<void> {
+  const button = page.getByTestId("workspace-new-tab");
+  await expect(button).toBeVisible({ timeout: 10_000 });
+  await button.click();
+}
+
+/** Press Cmd+T (macOS) to open a new tab. */
+export async function pressNewTabShortcut(page: Page): Promise<void> {
+  await page.keyboard.press("Meta+t");
+}
+
+// ─── Launcher panel assertions ─────────────────────────────────────────────
+
+/** Wait for the launcher panel to render with its primary tiles. */
+export async function waitForLauncherPanel(page: Page): Promise<void> {
+  await expect(page.getByRole("button", { name: "New Chat" }).first()).toBeVisible({
+    timeout: 15_000,
+  });
+  await expect(page.getByRole("button", { name: "Terminal" }).first()).toBeVisible({
+    timeout: 15_000,
+  });
+}
+
+/** Assert that the launcher panel shows provider tiles under "Terminal Agents". */
+export async function assertProviderTilesVisible(page: Page): Promise<void> {
+  await expect(page.getByText("Terminal Agents", { exact: true }).first()).toBeVisible({
+    timeout: 10_000,
+  });
+}
+
+/** Assert the launcher panel has a "New Chat" tile. */
+export async function assertNewChatTileVisible(page: Page): Promise<void> {
+  await expect(page.getByRole("button", { name: "New Chat" }).first()).toBeVisible();
+}
+
+/** Assert the launcher panel has a "Terminal" tile. */
+export async function assertTerminalTileVisible(page: Page): Promise<void> {
+  await expect(page.getByRole("button", { name: "Terminal" }).first()).toBeVisible();
+}
+
+// ─── Launcher tile clicks ──────────────────────────────────────────────────
+
+/** Click the "New Chat" tile on the launcher panel. */
+export async function clickNewChat(page: Page): Promise<void> {
+  const button = page.getByRole("button", { name: "New Chat" }).first();
+  await expect(button).toBeVisible({ timeout: 10_000 });
+  await button.click();
+}
+
+/** Click the "Terminal" tile on the launcher panel. */
+export async function clickTerminal(page: Page): Promise<void> {
+  const button = page.getByRole("button", { name: "Terminal" }).first();
+  await expect(button).toBeVisible({ timeout: 10_000 });
+  await button.click();
+}
+
+/** Click a provider tile by label (e.g. "Claude Code", "Codex"). */
+export async function clickProviderTile(page: Page, providerLabel: string): Promise<void> {
+  const tile = page.getByRole("button", { name: providerLabel }).first();
+  await expect(tile).toBeVisible({ timeout: 10_000 });
+  await tile.click();
+}
+
+// ─── Tab title assertions ──────────────────────────────────────────────────
+
+/** Wait for any tab in the bar to display the given title text. */
+export async function waitForTabWithTitle(
+  page: Page,
+  title: string | RegExp,
+  timeout = 30_000,
+): Promise<void> {
+  const matcher = typeof title === "string" ? new RegExp(title, "i") : title;
+  await expect(page.locator('[data-testid^="workspace-tab-"]').filter({ hasText: matcher }).first())
+    .toBeVisible({ timeout });
+}
+
+/** Assert the new-tab '+' button is visible and there is only one. */
+export async function assertSingleNewTabButton(page: Page): Promise<void> {
+  const buttons = page.getByTestId("workspace-new-tab");
+  // There might be multiple panes, each with a "+" button
+  // But within a single pane there should only be one
+  const count = await buttons.count();
+  expect(count).toBeGreaterThanOrEqual(1);
+}
+
+// ─── No-flash measurement ──────────────────────────────────────────────────
+
+/**
+ * Measure the time between clicking a launcher tile and the replacement panel becoming visible.
+ * Returns elapsed milliseconds.
+ */
+export async function measureTileTransition(
+  page: Page,
+  clickAction: () => Promise<void>,
+  successLocator: ReturnType<Page["locator"]>,
+  timeout = 5_000,
+): Promise<number> {
+  const start = Date.now();
+  await clickAction();
+  await expect(successLocator).toBeVisible({ timeout });
+  return Date.now() - start;
+}
+
+/**
+ * Sample tab IDs at high frequency across a transition to detect blank/intermediate states.
+ * Returns all unique snapshots observed.
+ */
+export async function sampleTabsDuringTransition(
+  page: Page,
+  action: () => Promise<void>,
+  durationMs = 2_000,
+  intervalMs = 30,
+): Promise<string[][]> {
+  const snapshots: string[][] = [];
+  const startSampling = async () => {
+    const start = Date.now();
+    while (Date.now() - start < durationMs) {
+      snapshots.push(await getTabTestIds(page));
+      await page.waitForTimeout(intervalMs);
+    }
+  };
+
+  const samplingPromise = startSampling();
+  await action();
+  await samplingPromise;
+  return snapshots;
+}
+
+// ─── Workspace setup ───────────────────────────────────────────────────────
+
+/** Create a temp git repo and return its path with a cleanup function. */
+export async function createWorkspace(prefix = "launcher-e2e-"): ReturnType<typeof createTempGitRepo> {
+  return createTempGitRepo(prefix);
+}

packages/app/e2e/helpers/terminal-perf.ts

@@ -0,0 +1,228 @@
+import type { Page } from "@playwright/test";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+import { randomUUID } from "node:crypto";
+import { buildHostWorkspaceRoute } from "../../src/utils/host-routes";
+
+export type TerminalPerfDaemonClient = {
+  connect(): Promise<void>;
+  close(): Promise<void>;
+  createTerminal(
+    cwd: string,
+    name?: string,
+  ): Promise<{
+    terminal: { id: string; name: string; cwd: string } | null;
+    error: string | null;
+  }>;
+  subscribeTerminal(
+    terminalId: string,
+  ): Promise<{ terminalId: string; slot: number; error: null } | { error: string }>;
+  sendTerminalInput(
+    terminalId: string,
+    message: { type: "input"; data: string } | { type: "resize"; rows: number; cols: number },
+  ): void;
+  onTerminalStreamEvent(
+    handler: (event: { terminalId: string; type: string; data?: Uint8Array }) => void,
+  ): () => void;
+  killTerminal(terminalId: string): Promise<{ error: string | null }>;
+};
+
+function getDaemonWsUrl(): string {
+  const daemonPort = process.env.E2E_DAEMON_PORT;
+  if (!daemonPort) {
+    throw new Error("E2E_DAEMON_PORT is not set.");
+  }
+  return `ws://127.0.0.1:${daemonPort}/ws`;
+}
+
+function getServerId(): string {
+  const serverId = process.env.E2E_SERVER_ID;
+  if (!serverId) {
+    throw new Error("E2E_SERVER_ID is not set.");
+  }
+  return serverId;
+}
+
+async function loadDaemonClientConstructor(): Promise<
+  new (config: { url: string; clientId: string; clientType: "cli" }) => TerminalPerfDaemonClient
+> {
+  const repoRoot = path.resolve(process.cwd(), "../..");
+  const moduleUrl = pathToFileURL(
+    path.join(repoRoot, "packages/server/dist/server/server/exports.js"),
+  ).href;
+  const mod = (await import(moduleUrl)) as {
+    DaemonClient: new (config: {
+      url: string;
+      clientId: string;
+      clientType: "cli";
+    }) => TerminalPerfDaemonClient;
+  };
+  return mod.DaemonClient;
+}
+
+export async function connectTerminalClient(): Promise<TerminalPerfDaemonClient> {
+  const DaemonClient = await loadDaemonClientConstructor();
+  const client = new DaemonClient({
+    url: getDaemonWsUrl(),
+    clientId: `terminal-perf-${randomUUID()}`,
+    clientType: "cli",
+  });
+  await client.connect();
+  return client;
+}
+
+export function buildTerminalWorkspaceUrl(cwd: string, terminalId: string): string {
+  const serverId = getServerId();
+  const route = buildHostWorkspaceRoute(serverId, cwd);
+  return `${route}?open=${encodeURIComponent(`terminal:${terminalId}`)}`;
+}
+
+export async function getTerminalBufferText(page: Page): Promise<string> {
+  return page.evaluate(() => {
+    const term = (window as any).__paseoTerminal;
+    if (!term) {
+      return "";
+    }
+    const buf = term.buffer.active;
+    const lines: string[] = [];
+    for (let i = 0; i < buf.length; i++) {
+      const line = buf.getLine(i);
+      if (line) {
+        lines.push(line.translateToString(true));
+      }
+    }
+    return lines.join("\n");
+  });
+}
+
+export async function waitForTerminalContent(
+  page: Page,
+  predicate: (text: string) => boolean,
+  timeout: number,
+): Promise<void> {
+  const deadline = Date.now() + timeout;
+  while (Date.now() < deadline) {
+    const text = await getTerminalBufferText(page);
+    if (predicate(text)) {
+      return;
+    }
+    await page.waitForTimeout(50);
+  }
+  throw new Error(`Terminal content did not match predicate within ${timeout}ms`);
+}
+
+export async function navigateToTerminal(
+  page: Page,
+  input: { cwd: string; terminalId: string },
+): Promise<void> {
+  // Boot the app at the workspace route directly.
+  // The fixtures.ts beforeEach addInitScript seeds localStorage on every navigation,
+  // so the daemon registry is already configured when the app starts.
+  const workspaceRoute = buildHostWorkspaceRoute(getServerId(), input.cwd);
+  await page.goto(workspaceRoute);
+
+  // Wait for daemon connection (sidebar shows host label)
+  await page.getByText("localhost", { exact: true }).first().waitFor({ state: "visible", timeout: 15_000 });
+
+  // The workspace should now query listTerminals and discover our terminal.
+  // Click the terminal tab if it auto-appeared, or wait for it.
+  const terminalSurface = page.locator('[data-testid="terminal-surface"]');
+  const surfaceVisible = await terminalSurface.isVisible().catch(() => false);
+
+  if (!surfaceVisible) {
+    // Terminal tab might not be focused — look for it in the tab row and click it
+    const terminalTab = page.locator(`[data-testid="workspace-tab-terminal:${input.terminalId}"]`);
+    const tabExists = await terminalTab.isVisible({ timeout: 5_000 }).catch(() => false);
+
+    if (tabExists) {
+      await terminalTab.click();
+    } else {
+      // Terminal tab not yet created — click "New terminal tab" to create one through the UI
+      const newTerminalBtn = page.getByRole("button", { name: "New terminal tab" });
+      await newTerminalBtn.waitFor({ state: "visible", timeout: 10_000 });
+      await newTerminalBtn.click();
+    }
+  }
+
+  // Wait for terminal surface to be visible
+  await terminalSurface.waitFor({ state: "visible", timeout: 15_000 });
+
+  // Wait for loading overlay to disappear (terminal attached)
+  await page
+    .locator('[data-testid="terminal-attach-loading"]')
+    .waitFor({ state: "hidden", timeout: 10_000 })
+    .catch(() => {
+      // overlay may never appear if attachment is instant
+    });
+
+  await terminalSurface.click();
+}
+
+export async function setupDeterministicPrompt(page: Page, sentinel?: string): Promise<void> {
+  const tag = sentinel ?? `READY_${Date.now()}`;
+  const terminal = page.locator('[data-testid="terminal-surface"]');
+
+  await terminal.pressSequentially(`echo ${tag}\n`, { delay: 0 });
+  await waitForTerminalContent(page, (text) => text.includes(tag), 10_000);
+
+  await terminal.pressSequentially("export PS1='$ '\n", { delay: 0 });
+  await page.waitForTimeout(300);
+}
+
+export type LatencySample = {
+  char: string;
+  latencyMs: number;
+};
+
+/**
+ * Measures keystroke echo round-trip latency.
+ *
+ * Starts a high-resolution timer on the browser keydown event (capture phase)
+ * and stops it when xterm.js finishes parsing the echoed write. This measures
+ * the full path: keydown → WebSocket → daemon PTY echo → WebSocket → xterm render.
+ */
+export async function measureKeystrokeLatency(page: Page, char: string): Promise<number> {
+  await page.evaluate(() => {
+    const term = (window as any).__paseoTerminal;
+    if (!term) {
+      throw new Error("__paseoTerminal not available");
+    }
+
+    const state = ((window as any).__perfKeystroke = {
+      promise: null as Promise<number> | null,
+    });
+
+    state.promise = new Promise<number>((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        document.removeEventListener("keydown", onKeyDown, true);
+        reject(new Error("keystroke echo timeout (5s)"));
+      }, 5000);
+
+      function onKeyDown() {
+        document.removeEventListener("keydown", onKeyDown, true);
+        const start = performance.now();
+        const disposable = term.onWriteParsed(() => {
+          clearTimeout(timeout);
+          disposable.dispose();
+          resolve(performance.now() - start);
+        });
+      }
+
+      document.addEventListener("keydown", onKeyDown, true);
+    });
+  });
+
+  await page.keyboard.press(char);
+
+  return page.evaluate(() => (window as any).__perfKeystroke.promise);
+}
+
+export function computePercentile(samples: number[], p: number): number {
+  const sorted = [...samples].sort((a, b) => a - b);
+  const index = Math.ceil((p / 100) * sorted.length) - 1;
+  return sorted[Math.max(0, index)];
+}
+
+export function round2(value: number): number {
+  return Math.round(value * 100) / 100;
+}

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

@@ -38,7 +38,7 @@ export async function ensureWorkspaceAgentPaneVisible(page: Page): Promise<void>
 
 export async function sampleWorkspaceTabIds(
   page: Page,
-  options: { durationMs?: number; intervalMs?: number } = {}
+  options: { durationMs?: number; intervalMs?: number } = {},
 ): Promise<string[][]> {
   const durationMs = options.durationMs ?? 2_500;
   const intervalMs = options.intervalMs ?? 50;

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

@@ -1,38 +1,38 @@
-import { expect, type Page } from '@playwright/test';
-import { buildHostWorkspaceRoute } from '@/utils/host-routes';
-import { gotoHome } from './app';
+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);
+  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, '\\$&');
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
 function candidateWorkspaceIds(inputPath: string): string[] {
-  const trimmed = inputPath.replace(/\/+$/, '');
+  const trimmed = inputPath.replace(/\/+$/, "");
   const candidates = new Set<string>([trimmed]);
-  if (trimmed.startsWith('/var/')) {
+  if (trimmed.startsWith("/var/")) {
     candidates.add(`/private${trimmed}`);
   }
-  if (trimmed.startsWith('/private/var/')) {
-    candidates.add(trimmed.replace(/^\/private/, ''));
+  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}"]`
+    (id) => `[data-testid="sidebar-workspace-row-${serverId}:${id}"]`,
   );
-  return page.locator(ids.join(',')).first();
+  return page.locator(ids.join(",")).first();
 }
 
 export async function switchWorkspaceViaSidebar(input: {
@@ -52,10 +52,10 @@ export async function switchWorkspaceViaSidebar(input: {
 
 export async function expectWorkspaceHeader(
   page: Page,
-  input: { title: string; subtitle: string }
+  input: { title: string; subtitle: string },
 ): Promise<void> {
-  const titleLocator = page.getByTestId('workspace-header-title');
-  const subtitleLocator = page.getByTestId('workspace-header-subtitle');
+  const titleLocator = page.getByTestId("workspace-header-title");
+  const subtitleLocator = page.getByTestId("workspace-header-subtitle");
 
   await expect(titleLocator.first()).toHaveText(input.title, {
     timeout: 30_000,
@@ -66,9 +66,9 @@ export async function expectWorkspaceHeader(
 }
 
 export async function seedWorkspaceActivity(page: Page, marker: string): Promise<void> {
-  const input = page.getByRole('textbox', { name: 'Message agent...' });
+  const input = page.getByRole("textbox", { name: "Message agent..." });
   await expect(input).toBeEditable({ timeout: 30_000 });
   await input.fill(marker);
-  await input.press('Enter');
+  await input.press("Enter");
   await expect(page).toHaveURL(/\/workspace\//, { timeout: 30_000 });
 }

packages/app/e2e/helpers/workspace.ts

@@ -1,7 +1,7 @@
-import { execSync } from 'node:child_process';
-import { mkdtemp, writeFile, rm, mkdir } from 'node:fs/promises';
-import { tmpdir } from 'node:os';
-import path from 'node:path';
+import { execSync } from "node:child_process";
+import { mkdtemp, writeFile, rm, mkdir } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
 
 type TempRepo = {
   path: string;
@@ -9,29 +9,29 @@ type TempRepo = {
 };
 
 export const createTempGitRepo = async (
-  prefix = 'paseo-e2e-',
-  options?: { withRemote?: boolean }
+  prefix = "paseo-e2e-",
+  options?: { withRemote?: boolean },
 ): Promise<TempRepo> => {
   // Keep E2E repo paths short so terminal prompt + typed commands stay visible without zsh clipping.
-  const tempRoot = process.platform === 'win32' ? tmpdir() : '/tmp';
+  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' });
+  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" });
 
   if (withRemote) {
     // Deterministic local remote to avoid relying on external auth/network in e2e.
-    const remoteDir = path.join(repoPath, 'remote.git');
+    const remoteDir = path.join(repoPath, "remote.git");
     await mkdir(remoteDir, { recursive: true });
-    execSync(`git init --bare -b main ${remoteDir}`, { cwd: repoPath, stdio: 'ignore' });
-    execSync(`git remote add origin ${remoteDir}`, { cwd: repoPath, stdio: 'ignore' });
-    execSync('git push -u origin main', { cwd: repoPath, stdio: 'ignore' });
+    execSync(`git init --bare -b main ${remoteDir}`, { cwd: repoPath, stdio: "ignore" });
+    execSync(`git remote add origin ${remoteDir}`, { cwd: repoPath, stdio: "ignore" });
+    execSync("git push -u origin main", { cwd: repoPath, stdio: "ignore" });
   }
 
   return {

packages/app/e2e/launcher-tab.spec.ts

@@ -0,0 +1,343 @@
+import { test, expect } from "./fixtures";
+import { createTempGitRepo } from "./helpers/workspace";
+import {
+  gotoWorkspace,
+  waitForLauncherPanel,
+  assertProviderTilesVisible,
+  assertNewChatTileVisible,
+  assertTerminalTileVisible,
+  assertSingleNewTabButton,
+  clickNewTabButton,
+  pressNewTabShortcut,
+  clickNewChat,
+  clickTerminal,
+  clickProviderTile,
+  countTabsOfKind,
+  getTabTestIds,
+  waitForTabWithTitle,
+  measureTileTransition,
+  sampleTabsDuringTransition,
+} from "./helpers/launcher";
+import {
+  connectTerminalClient,
+  waitForTerminalContent,
+  setupDeterministicPrompt,
+  type TerminalPerfDaemonClient,
+} from "./helpers/terminal-perf";
+
+// ─── Shared state ──────────────────────────────────────────────────────────
+
+let tempRepo: { path: string; cleanup: () => Promise<void> };
+
+test.beforeAll(async () => {
+  tempRepo = await createTempGitRepo("launcher-e2e-");
+});
+
+test.afterAll(async () => {
+  if (tempRepo) await tempRepo.cleanup();
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Launcher Tab Tests
+// ═══════════════════════════════════════════════════════════════════════════
+
+test.describe("Launcher tab", () => {
+  test("Cmd+T opens launcher panel with New Chat, Terminal, and provider tiles", async ({
+    page,
+  }) => {
+    await gotoWorkspace(page, tempRepo.path);
+
+    await pressNewTabShortcut(page);
+
+    await waitForLauncherPanel(page);
+    await assertNewChatTileVisible(page);
+    await assertTerminalTileVisible(page);
+    await assertProviderTilesVisible(page);
+  });
+
+  test("opening two new tabs creates two launcher tabs", async ({ page }) => {
+    await gotoWorkspace(page, tempRepo.path);
+
+    await pressNewTabShortcut(page);
+    await waitForLauncherPanel(page);
+    const countAfterFirst = await countTabsOfKind(page, "launcher");
+
+    await pressNewTabShortcut(page);
+    await waitForLauncherPanel(page);
+    const countAfterSecond = await countTabsOfKind(page, "launcher");
+
+    expect(countAfterSecond).toBe(countAfterFirst + 1);
+  });
+
+  test("clicking New Chat replaces launcher in-place with draft tab", async ({ page }) => {
+    await gotoWorkspace(page, tempRepo.path);
+
+    await clickNewTabButton(page);
+    await waitForLauncherPanel(page);
+
+    const tabsBefore = await getTabTestIds(page);
+    const launcherCountBefore = tabsBefore.filter((id) => id.includes("launcher")).length;
+
+    await clickNewChat(page);
+
+    // Draft composer should appear (the agent message input)
+    const composer = page.getByRole("textbox", { name: "Message agent..." });
+    await expect(composer.first()).toBeVisible({ timeout: 15_000 });
+
+    // Launcher tab should have been replaced (not added alongside)
+    const tabsAfter = await getTabTestIds(page);
+    const launcherCountAfter = tabsAfter.filter((id) => id.includes("launcher")).length;
+    const draftCountAfter = tabsAfter.filter((id) => id.includes("draft")).length;
+
+    expect(launcherCountAfter).toBe(launcherCountBefore - 1);
+    expect(draftCountAfter).toBeGreaterThanOrEqual(1);
+    // Total tab count should stay the same (replaced, not added)
+    expect(tabsAfter.length).toBe(tabsBefore.length);
+  });
+
+  test("clicking Terminal replaces launcher with standalone terminal", async ({ page }) => {
+    test.setTimeout(45_000);
+    await gotoWorkspace(page, tempRepo.path);
+
+    await clickNewTabButton(page);
+    await waitForLauncherPanel(page);
+
+    const tabsBefore = await getTabTestIds(page);
+
+    await clickTerminal(page);
+
+    // Terminal surface should appear
+    const terminal = page.locator('[data-testid="terminal-surface"]');
+    await expect(terminal.first()).toBeVisible({ timeout: 20_000 });
+
+    // Tab count stays the same (in-place replacement)
+    const tabsAfter = await getTabTestIds(page);
+    expect(tabsAfter.length).toBe(tabsBefore.length);
+
+    // The launcher tab is gone, a terminal tab exists
+    const terminalTabs = tabsAfter.filter((id) => id.includes("terminal"));
+    expect(terminalTabs.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test("clicking a provider tile replaces launcher with terminal agent tab", async ({ page }) => {
+    test.setTimeout(45_000);
+    await gotoWorkspace(page, tempRepo.path);
+
+    await clickNewTabButton(page);
+    await waitForLauncherPanel(page);
+
+    const tabsBefore = await getTabTestIds(page);
+
+    // Click the first visible provider tile under "Terminal Agents"
+    const providerTiles = page.locator('[role="button"]').filter({
+      has: page.locator("text=Terminal Agents").locator("..").locator(".."),
+    });
+
+    // Try clicking any provider tile — find the first one after the "Terminal Agents" label
+    const terminalAgentsLabel = page.getByText("Terminal Agents", { exact: true }).first();
+    await expect(terminalAgentsLabel).toBeVisible({ timeout: 10_000 });
+
+    // The provider grid follows the label. Click the first provider tile.
+    const providerGrid = terminalAgentsLabel.locator("~ *").first();
+    const firstProvider = providerGrid.getByRole("button").first();
+    if (await firstProvider.isVisible().catch(() => false)) {
+      await firstProvider.click();
+    } else {
+      // Fallback: look for any provider button after the section label
+      const allButtons = page.getByRole("button");
+      const count = await allButtons.count();
+      let clicked = false;
+      for (let i = 0; i < count; i++) {
+        const btn = allButtons.nth(i);
+        const text = await btn.innerText().catch(() => "");
+        // Skip known non-provider buttons
+        if (["New Chat", "Terminal", "More", "+"].includes(text.trim())) continue;
+        if (!text.trim()) continue;
+        await btn.click();
+        clicked = true;
+        break;
+      }
+      if (!clicked) {
+        test.skip(true, "No provider tiles available");
+        return;
+      }
+    }
+
+    // Should see an agent panel (terminal surface or agent stream)
+    const agentOrTerminal = page.locator(
+      '[data-testid="terminal-surface"], [data-testid^="agent-"]',
+    );
+    await expect(agentOrTerminal.first()).toBeVisible({ timeout: 30_000 });
+
+    // Tab count stays the same (replaced, not added)
+    const tabsAfter = await getTabTestIds(page);
+    expect(tabsAfter.length).toBe(tabsBefore.length);
+  });
+
+  test("tab bar shows a single + button per pane", async ({ page }) => {
+    await gotoWorkspace(page, tempRepo.path);
+    await assertSingleNewTabButton(page);
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Terminal Title Tests
+// ═══════════════════════════════════════════════════════════════════════════
+
+test.describe("Terminal title propagation", () => {
+  let client: TerminalPerfDaemonClient;
+
+  test.beforeAll(async () => {
+    client = await connectTerminalClient();
+  });
+
+  test.afterAll(async () => {
+    if (client) await client.close();
+  });
+
+  test("terminal tab title updates from OSC title escape sequence", async ({ page }) => {
+    test.setTimeout(60_000);
+
+    const result = await client.createTerminal(tempRepo.path, "title-test");
+    if (!result.terminal) throw new Error(`Failed to create terminal: ${result.error}`);
+    const terminalId = result.terminal.id;
+
+    try {
+      // Navigate to workspace and open the terminal
+      await gotoWorkspace(page, tempRepo.path);
+      await clickNewTabButton(page);
+      await waitForLauncherPanel(page);
+      await clickTerminal(page);
+
+      const terminal = page.locator('[data-testid="terminal-surface"]');
+      await expect(terminal.first()).toBeVisible({ timeout: 20_000 });
+      await terminal.first().click();
+
+      await setupDeterministicPrompt(page);
+
+      // Send OSC 0 (set window title) escape sequence
+      const testTitle = `E2E-Title-${Date.now()}`;
+      await terminal
+        .first()
+        .pressSequentially(`printf '\\033]0;${testTitle}\\007'\n`, { delay: 0 });
+
+      // Wait for the tab to reflect the new title
+      await waitForTabWithTitle(page, testTitle, 15_000);
+    } finally {
+      await client.killTerminal(terminalId).catch(() => {});
+    }
+  });
+
+  test("title debouncing coalesces rapid changes", async ({ page }) => {
+    test.setTimeout(60_000);
+
+    const result = await client.createTerminal(tempRepo.path, "debounce-test");
+    if (!result.terminal) throw new Error(`Failed to create terminal: ${result.error}`);
+    const terminalId = result.terminal.id;
+
+    try {
+      await gotoWorkspace(page, tempRepo.path);
+      await clickNewTabButton(page);
+      await waitForLauncherPanel(page);
+      await clickTerminal(page);
+
+      const terminal = page.locator('[data-testid="terminal-surface"]');
+      await expect(terminal.first()).toBeVisible({ timeout: 20_000 });
+      await terminal.first().click();
+
+      await setupDeterministicPrompt(page);
+
+      // Fire many rapid title changes — only the last should stick
+      const finalTitle = `Final-${Date.now()}`;
+      for (let i = 0; i < 5; i++) {
+        await terminal
+          .first()
+          .pressSequentially(`printf '\\033]0;Rapid-${i}\\007'\n`, { delay: 0 });
+      }
+      await terminal
+        .first()
+        .pressSequentially(`printf '\\033]0;${finalTitle}\\007'\n`, { delay: 0 });
+
+      // The tab should eventually settle on the final title
+      await waitForTabWithTitle(page, finalTitle, 15_000);
+    } finally {
+      await client.killTerminal(terminalId).catch(() => {});
+    }
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// No-Flash Transition Tests
+// ═══════════════════════════════════════════════════════════════════════════
+
+test.describe("Launcher transitions (no flash)", () => {
+  test("New Chat transition has no blank intermediate tab state", async ({ page }) => {
+    await gotoWorkspace(page, tempRepo.path);
+
+    await clickNewTabButton(page);
+    await waitForLauncherPanel(page);
+
+    // Sample tabs at high frequency across the transition
+    const snapshots = await sampleTabsDuringTransition(
+      page,
+      () => clickNewChat(page),
+      2_000,
+      30,
+    );
+
+    // Every snapshot should have at least one tab — no blank/zero-tab frames
+    for (const snapshot of snapshots) {
+      expect(snapshot.length).toBeGreaterThanOrEqual(1);
+    }
+
+    // Tab count should never increase (no duplicate flash from add-then-remove)
+    const counts = snapshots.map((s) => s.length);
+    const maxCount = Math.max(...counts);
+    const initialCount = counts[0] ?? 0;
+
+    // Allow at most +1 transient tab (tolerance for React render batching)
+    expect(maxCount).toBeLessThanOrEqual(initialCount + 1);
+  });
+
+  test("Terminal transition completes within visual budget", async ({ page }) => {
+    test.setTimeout(30_000);
+    await gotoWorkspace(page, tempRepo.path);
+
+    await clickNewTabButton(page);
+    await waitForLauncherPanel(page);
+
+    const terminal = page.locator('[data-testid="terminal-surface"]');
+    const elapsed = await measureTileTransition(
+      page,
+      () => clickTerminal(page),
+      terminal.first(),
+      20_000,
+    );
+
+    // Terminal surface should appear within a reasonable budget.
+    // Note: terminal creation involves a server round-trip, so we allow more time
+    // than a pure in-memory transition, but it should still be well under 5 seconds.
+    expect(elapsed).toBeLessThan(5_000);
+  });
+
+  test("New Chat click → composer appears without launcher flash", async ({ page }) => {
+    await gotoWorkspace(page, tempRepo.path);
+
+    await clickNewTabButton(page);
+    await waitForLauncherPanel(page);
+
+    const composer = page.getByRole("textbox", { name: "Message agent..." }).first();
+
+    const elapsed = await measureTileTransition(
+      page,
+      () => clickNewChat(page),
+      composer,
+      10_000,
+    );
+
+    // Draft replacement is fully in-memory — should be fast
+    // We use a generous budget here because CI can be slow, but the key assertion
+    // is that no blank/flash frame appears (tested above).
+    expect(elapsed).toBeLessThan(3_000);
+  });
+});

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

@@ -0,0 +1,160 @@
+import { test, expect } from "./fixtures";
+import { createTempGitRepo } from "./helpers/workspace";
+import {
+  connectTerminalClient,
+  navigateToTerminal,
+  setupDeterministicPrompt,
+  waitForTerminalContent,
+  measureKeystrokeLatency,
+  computePercentile,
+  round2,
+  type TerminalPerfDaemonClient,
+  type LatencySample,
+} from "./helpers/terminal-perf";
+
+const LINE_COUNT = 50_000;
+const THROUGHPUT_BUDGET_MS = 30_000;
+const KEYSTROKE_SAMPLE_COUNT = 20;
+const KEYSTROKE_P95_BUDGET_MS = 150;
+
+test.describe("Terminal wire performance", () => {
+  let client: TerminalPerfDaemonClient;
+  let tempRepo: { path: string; cleanup: () => Promise<void> };
+
+  test.beforeAll(async () => {
+    tempRepo = await createTempGitRepo("perf-");
+    client = await connectTerminalClient();
+  });
+
+  test.afterAll(async () => {
+    if (client) {
+      await client.close();
+    }
+    if (tempRepo) {
+      await tempRepo.cleanup();
+    }
+  });
+
+  test("throughput: bulk terminal output renders within budget", async ({ page }, testInfo) => {
+    test.setTimeout(90_000);
+
+    const result = await client.createTerminal(tempRepo.path, "throughput");
+    if (!result.terminal) {
+      throw new Error(`Failed to create terminal: ${result.error}`);
+    }
+    const terminalId = result.terminal.id;
+
+    try {
+      await navigateToTerminal(page, { cwd: tempRepo.path, terminalId });
+      await setupDeterministicPrompt(page);
+
+      const sentinel = `PERF_DONE_${Date.now()}`;
+      const terminal = page.locator('[data-testid="terminal-surface"]');
+      const startMs = Date.now();
+
+      await terminal.pressSequentially(`seq 1 ${LINE_COUNT}; echo ${sentinel}\n`, { delay: 0 });
+
+      await waitForTerminalContent(page, (text) => text.includes(sentinel), THROUGHPUT_BUDGET_MS + 15_000);
+
+      const elapsedMs = Date.now() - startMs;
+
+      // seq 1 N outputs each number on its own line
+      const estimatedBytes = Array.from(
+        { length: LINE_COUNT },
+        (_, i) => String(i + 1).length + 1,
+      ).reduce((a, b) => a + b, 0);
+      const throughputMBps = estimatedBytes / (1024 * 1024) / (elapsedMs / 1000);
+
+      const report = {
+        lineCount: LINE_COUNT,
+        estimatedBytes,
+        elapsedMs,
+        throughputMBps: round2(throughputMBps),
+      };
+
+      await testInfo.attach("throughput-report", {
+        body: JSON.stringify(report, null, 2),
+        contentType: "application/json",
+      });
+
+      console.log(
+        `[perf] Throughput: ${report.throughputMBps} MB/s — ${LINE_COUNT} lines in ${elapsedMs}ms`,
+      );
+
+      expect(elapsedMs, `${LINE_COUNT} lines should render within ${THROUGHPUT_BUDGET_MS}ms`).toBeLessThan(
+        THROUGHPUT_BUDGET_MS,
+      );
+    } finally {
+      await client.killTerminal(terminalId).catch(() => {});
+    }
+  });
+
+  test("keystroke latency: echo round-trip under budget", async ({ page }, testInfo) => {
+    test.setTimeout(60_000);
+
+    const result = await client.createTerminal(tempRepo.path, "latency");
+    if (!result.terminal) {
+      throw new Error(`Failed to create terminal: ${result.error}`);
+    }
+    const terminalId = result.terminal.id;
+
+    try {
+      await navigateToTerminal(page, { cwd: tempRepo.path, terminalId });
+      await setupDeterministicPrompt(page);
+
+      // Ensure clean prompt state
+      const terminal = page.locator('[data-testid="terminal-surface"]');
+      await terminal.press("Control+c");
+      await page.waitForTimeout(200);
+
+      const samples: LatencySample[] = [];
+      const chars = "abcdefghijklmnopqrst";
+
+      for (let i = 0; i < KEYSTROKE_SAMPLE_COUNT; i++) {
+        const char = chars[i % chars.length];
+        const latencyMs = await measureKeystrokeLatency(page, char);
+        samples.push({ char, latencyMs });
+        await page.waitForTimeout(50);
+      }
+
+      // Clean up typed characters
+      await terminal.press("Control+c");
+
+      const latencies = samples.map((s) => s.latencyMs);
+      const p50 = computePercentile(latencies, 50);
+      const p95 = computePercentile(latencies, 95);
+      const max = Math.max(...latencies);
+      const min = Math.min(...latencies);
+      const avg = latencies.reduce((a, b) => a + b, 0) / latencies.length;
+
+      const report = {
+        sampleCount: KEYSTROKE_SAMPLE_COUNT,
+        p50Ms: round2(p50),
+        p95Ms: round2(p95),
+        maxMs: round2(max),
+        minMs: round2(min),
+        avgMs: round2(avg),
+        samples: samples.map((s) => ({
+          char: s.char,
+          latencyMs: round2(s.latencyMs),
+        })),
+      };
+
+      await testInfo.attach("latency-report", {
+        body: JSON.stringify(report, null, 2),
+        contentType: "application/json",
+      });
+
+      console.log(
+        `[perf] Keystroke latency — p50: ${report.p50Ms}ms, p95: ${report.p95Ms}ms, max: ${report.maxMs}ms`,
+      );
+
+      expect(
+        p95,
+        `Keystroke p95 latency should be under ${KEYSTROKE_P95_BUDGET_MS}ms`,
+      ).toBeLessThan(KEYSTROKE_P95_BUDGET_MS);
+    } finally {
+      await client.killTerminal(terminalId).catch(() => {});
+    }
+  });
+});

packages/app/eslint.config.js

@@ -1,10 +1,10 @@
 // https://docs.expo.dev/guides/using-eslint/
-const { defineConfig } = require('eslint/config');
-const expoConfig = require('eslint-config-expo/flat');
+const { defineConfig } = require("eslint/config");
+const expoConfig = require("eslint-config-expo/flat");
 
 module.exports = defineConfig([
   expoConfig,
   {
-    ignores: ['dist/*'],
+    ignores: ["dist/*"],
   },
 ]);

packages/app/index.ts

@@ -2,17 +2,10 @@
 import { polyfillCrypto } from "./src/polyfills/crypto";
 polyfillCrypto();
 
-// Polyfill screen.orientation for WebKitGTK (Tauri Linux) which lacks the API
+// Polyfill screen.orientation for WebKitGTK desktop runtimes that lack the API.
 import { polyfillScreenOrientation } from "./src/polyfills/screen-orientation";
 polyfillScreenOrientation();
 
-// Bridge console.log/warn/error to Tauri's log plugin so JS output appears in app.log
-if ((globalThis as { __TAURI__?: unknown }).__TAURI__) {
-  import("@tauri-apps/plugin-log").then(({ attachConsole }) => {
-    attachConsole();
-  });
-}
-
 // Configure Unistyles before Expo Router pulls in any components using StyleSheet.
 import "./src/styles/unistyles";
 import "expo-router/entry";

packages/app/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@getpaseo/app",
   "main": "index.ts",
-  "version": "0.1.29",
+  "version": "0.1.38",
   "private": true,
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",
+    "build:workspace-deps": "npm run build --workspace=@getpaseo/highlight && npm run build --workspace=@getpaseo/expo-two-way-audio",
+    "eas-build-post-install": "npm run build:workspace-deps",
     "android": "npm run android:development",
     "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",
@@ -14,35 +16,26 @@
     "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",
     "test:e2e": "playwright test",
     "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",
+    "build:web": "npm run build:workspace-deps && expo export --platform web",
     "deploy:web": "npm run build:web && wrangler pages deploy dist --project-name paseo-app --branch main"
   },
   "dependencies": {
-    "@getpaseo/expo-two-way-audio": "0.1.29",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@expo/vector-icons": "^15.0.2",
     "@floating-ui/react-native": "^0.10.7",
-    "@getpaseo/server": "0.1.29",
+    "@getpaseo/expo-two-way-audio": "0.1.38",
+    "@getpaseo/highlight": "0.1.38",
+    "@getpaseo/server": "0.1.38",
     "@gorhom/bottom-sheet": "^5.2.6",
     "@gorhom/portal": "^1.0.14",
-    "@lezer/common": "^1.5.0",
-    "@lezer/css": "^1.3.0",
-    "@lezer/highlight": "^1.2.3",
-    "@lezer/html": "^1.3.13",
-    "@lezer/javascript": "^1.5.4",
-    "@lezer/json": "^1.0.3",
-    "@lezer/markdown": "^1.6.2",
-    "@lezer/python": "^1.1.18",
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-masked-view/masked-view": "^0.3.2",
     "@react-native/normalize-colors": "^0.81.5",
@@ -51,10 +44,13 @@
     "@react-navigation/native": "^7.1.8",
     "@tanstack/react-query": "^5.90.11",
     "@tanstack/react-virtual": "^3.13.21",
-    "@tauri-apps/api": "^2.9.1",
-    "@tauri-apps/plugin-log": "^2.8.0",
+    "@xterm/addon-clipboard": "^0.2.0",
     "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-image": "^0.9.0",
+    "@xterm/addon-ligatures": "^0.10.0",
+    "@xterm/addon-search": "^0.16.0",
     "@xterm/addon-unicode11": "^0.9.0",
+    "@xterm/addon-web-links": "^0.12.0",
     "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
     "base64-js": "^1.5.1",
@@ -83,7 +79,6 @@
     "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.4",
@@ -116,6 +111,7 @@
     "eas-cli": "^16.24.1",
     "eslint": "^9.25.0",
     "eslint-config-expo": "~10.0.0",
+    "material-icon-theme": "^5.32.0",
     "playwright": "^1.56.1",
     "typescript": "~5.9.2",
     "vitest": "^3.2.4",

packages/app/playwright.config.ts

@@ -1,12 +1,13 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
 // E2E_METRO_PORT is set dynamically by global-setup.ts after finding a free port
 // This allows multiple test runs in parallel across different worktrees
-const baseURL = process.env.E2E_BASE_URL ?? `http://localhost:${process.env.E2E_METRO_PORT ?? '8081'}`;
+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',
+  testDir: "./e2e",
+  globalSetup: "./e2e/global-setup.ts",
   timeout: 60_000,
   expect: {
     timeout: 10_000,
@@ -16,17 +17,17 @@ export default defineConfig({
   fullyParallel: false,
   workers: 1,
   retries: process.env.CI ? 1 : 0,
-  reporter: [['list']],
+  reporter: [["list"]],
   use: {
     baseURL,
-    trace: 'retain-on-failure',
-    screenshot: 'only-on-failure',
-    video: 'retain-on-failure',
+    trace: "retain-on-failure",
+    screenshot: "only-on-failure",
+    video: "retain-on-failure",
   },
   projects: [
     {
-      name: 'Desktop Chrome',
-      use: { ...devices['Desktop Chrome'] },
+      name: "Desktop Chrome",
+      use: { ...devices["Desktop Chrome"] },
     },
   ],
   // Note: Metro is started by global-setup.ts on a dynamic port to allow parallel test runs

packages/app/playwright.firefox.config.ts

@@ -1,8 +1,7 @@
 import { defineConfig, devices } from "@playwright/test";
 
 const baseURL =
-  process.env.E2E_BASE_URL ??
-  `http://localhost:${process.env.E2E_METRO_PORT ?? "8081"}`;
+  process.env.E2E_BASE_URL ?? `http://localhost:${process.env.E2E_METRO_PORT ?? "8081"}`;
 
 export default defineConfig({
   testDir: "./e2e",

packages/app/playwright.webkit.tmp.config.ts

@@ -1,8 +1,7 @@
 import { defineConfig, devices } from "@playwright/test";
 
 const baseURL =
-  process.env.E2E_BASE_URL ??
-  `http://localhost:${process.env.E2E_METRO_PORT ?? "8081"}`;
+  process.env.E2E_BASE_URL ?? `http://localhost:${process.env.E2E_METRO_PORT ?? "8081"}`;
 
 export default defineConfig({
   testDir: "./e2e",

packages/app/public/index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="%LANG_ISO_CODE%">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
+    />
+    <title>%WEB_TITLE%</title>
+    <!-- The `react-native-web` recommended style reset: https://necolas.github.io/react-native-web/docs/setup/#root-element -->
+    <style id="expo-reset">
+      /* These styles make the body full-height */
+      html,
+      body {
+        height: 100%;
+      }
+      /* These styles disable body scrolling if you are using <ScrollView> */
+      body {
+        overflow: hidden;
+      }
+      /* These styles make the root element full-height */
+      #root {
+        display: flex;
+        height: 100%;
+        flex: 1;
+      }
+    </style>
+    <style>
+      button,
+      a,
+      input,
+      textarea,
+      select,
+      [role='button'],
+      [role='link'],
+      [role='textbox'],
+      [role='combobox'],
+      [role='tab'],
+      [role='switch'],
+      [role='checkbox'],
+      [role='slider'],
+      [role='menuitem'],
+      [tabindex],
+      [contenteditable='true'] {
+        -webkit-app-region: no-drag !important;
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

packages/app/scripts/reset-project.js

@@ -91,7 +91,7 @@ const moveDirectories = async (userInput) => {
         userInput === "y"
           ? `\n3. Delete the /${exampleDir} directory when you're done referencing it.`
           : ""
-      }`
+      }`,
     );
   } catch (error) {
     console.error(`❌ Error during script execution: ${error.message}`);
@@ -108,5 +108,5 @@ rl.question(
       console.log("❌ Invalid input. Please enter 'Y' or 'N'.");
       rl.close();
     }
-  }
+  },
 );

packages/app/src/app-support/index-startup.ts

@@ -1,36 +0,0 @@
-export const WELCOME_ROUTE = '/welcome'
-
-export function shouldWaitOnStartupRace(input: {
-  onlineServerId: string | null
-  hasTimedOut: boolean
-  isDesktopStartupRace: boolean
-  daemonCount: number
-  pathname: string
-}): boolean {
-  if (input.onlineServerId) {
-    return false
-  }
-  if (input.pathname === WELCOME_ROUTE) {
-    return false
-  }
-  if (input.hasTimedOut) {
-    return false
-  }
-  return input.isDesktopStartupRace || input.daemonCount > 0
-}
-
-export function shouldRedirectToWelcome(input: {
-  onlineServerId: string | null
-  hasTimedOut: boolean
-  pathname: string
-  isDesktopStartupRace: boolean
-  daemonCount: number
-}): boolean {
-  if (input.onlineServerId || !input.hasTimedOut) {
-    return false
-  }
-  if (input.pathname !== '/' && input.pathname !== '') {
-    return false
-  }
-  return input.isDesktopStartupRace || input.daemonCount > 0
-}

packages/app/src/app/_layout.tsx

@@ -1,6 +1,12 @@
 import "@/styles/unistyles";
 import { polyfillCrypto } from "@/polyfills/crypto";
-import { Stack, useGlobalSearchParams, usePathname, useRouter } from "expo-router";
+import {
+  Stack,
+  useGlobalSearchParams,
+  useNavigationContainerRef,
+  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";
@@ -9,7 +15,7 @@ import { PortalProvider } from "@gorhom/portal";
 import { VoiceProvider } from "@/contexts/voice-context";
 import { useAppSettings } from "@/hooks/use-settings";
 import { useFaviconStatus } from "@/hooks/use-favicon-status";
-import { View, ActivityIndicator, Text } from "react-native";
+import { View, Text } from "react-native";
 import { UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { darkTheme } from "@/styles/theme";
 import { QueryClientProvider } from "@tanstack/react-query";
@@ -17,12 +23,16 @@ import {
   getHostRuntimeStore,
   useHosts,
   useHostMutations,
-  useHostRuntimeSession,
+  useHostRuntimeClient,
 } from "@/runtime/host-runtime";
+import { shouldUseDesktopDaemon } from "@/desktop/daemon/desktop-daemon";
+import { loadSettingsFromStorage } from "@/hooks/use-settings";
+import { useColorScheme } from "@/hooks/use-color-scheme";
 import { SessionProvider } from "@/contexts/session-context";
 import type { HostProfile } from "@/types/host-connection";
 import {
   createContext,
+  useCallback,
   useContext,
   useState,
   useEffect,
@@ -35,6 +45,7 @@ import * as Linking from "expo-linking";
 import * as Notifications from "expo-notifications";
 import { LeftSidebar } from "@/components/left-sidebar";
 import { DownloadToast } from "@/components/download-toast";
+import { UpdateBanner } from "@/desktop/updates/update-banner";
 import { ToastProvider } from "@/contexts/toast-context";
 import { usePanelStore } from "@/stores/panel-store";
 import { runOnJS, interpolate, Extrapolation, useSharedValue } from "react-native-reanimated";
@@ -46,11 +57,11 @@ import {
   HorizontalScrollProvider,
   useHorizontalScrollOptional,
 } from "@/contexts/horizontal-scroll-context";
-import { getIsTauri } from "@/constants/layout";
+import { getIsDesktop } from "@/constants/layout";
 import { CommandCenter } from "@/components/command-center";
 import { ProjectPickerModal } from "@/components/project-picker-modal";
 import { KeyboardShortcutsDialog } from "@/components/keyboard-shortcuts-dialog";
-import { listenToDesktopNotificationClicks } from "@/desktop/notifications/desktop-notifications";
+import { WorkspaceSetupDialog } from "@/components/workspace-setup-dialog";
 import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
 import { queryClient } from "@/query/query-client";
 import {
@@ -58,19 +69,31 @@ import {
   type WebNotificationClickDetail,
   ensureOsNotificationPermission,
 } from "@/utils/os-notifications";
+import { getDesktopHost } from "@/desktop/host";
+import { setDesktopTitleBarTheme } from "@/desktop/electron/window";
 import { buildNotificationRoute } from "@/utils/notification-routing";
 import {
   buildHostRootRoute,
+  mapPathnameToServer,
   parseServerIdFromPathname,
   parseHostAgentRouteFromPathname,
   parseWorkspaceOpenIntent,
 } from "@/utils/host-routes";
-import { getTauri } from "@/utils/tauri";
-import { attachConsole } from "@/utils/tauri-attach-console";
+import { syncNavigationActiveWorkspace } from "@/stores/navigation-active-workspace-store";
 
 polyfillCrypto();
-attachConsole();
-const HostRuntimeBootstrapContext = createContext(false);
+
+export type HostRuntimeBootstrapState = {
+  phase: "starting-daemon" | "connecting" | "online" | "error";
+  error: string | null;
+  retry: () => void;
+};
+
+const HostRuntimeBootstrapContext = createContext<HostRuntimeBootstrapState>({
+  phase: "starting-daemon",
+  error: null,
+  retry: () => {},
+});
 
 function PushNotificationRouter() {
   const router = useRouter();
@@ -78,33 +101,37 @@ function PushNotificationRouter() {
 
   useEffect(() => {
     if (Platform.OS === "web") {
-      if (getTauri()) {
+      let removeDesktopNotificationListener: (() => void) | null = null;
+      let cancelled = false;
+
+      if (getIsDesktop()) {
         void ensureOsNotificationPermission();
 
-        let disposed = false;
-        let unlisten: (() => void) | null = null;
+        const unlistenResult = getDesktopHost()?.events?.on?.(
+          "notification-click",
+          (payload: unknown) => {
+            const data =
+              typeof payload === "object" &&
+              payload !== null &&
+              "data" in payload &&
+              typeof (payload as { data?: unknown }).data === "object" &&
+              (payload as { data?: unknown }).data !== null
+                ? (payload as { data: Record<string, unknown> }).data
+                : undefined;
+            router.push(buildNotificationRoute(data) as any);
+          },
+        );
 
-        void listenToDesktopNotificationClicks((payload) => {
-          router.push(buildNotificationRoute(payload.data) as any);
-        })
-          .then((cleanup) => {
-            if (disposed) {
-              cleanup();
-              return;
-            }
-            unlisten = cleanup;
-          })
-          .catch((error) => {
-            console.error(
-              "[OSNotifications][Desktop] Failed to register notification click listener",
-              error
-            );
-          });
-
-        return () => {
-          disposed = true;
-          unlisten?.();
-        };
+        void Promise.resolve(unlistenResult).then((unlisten) => {
+          if (typeof unlisten !== "function") {
+            return;
+          }
+          if (cancelled) {
+            unlisten();
+            return;
+          }
+          removeDesktopNotificationListener = unlisten;
+        });
       }
 
       const target = globalThis as unknown as EventTarget;
@@ -114,15 +141,12 @@ function PushNotificationRouter() {
         router.push(buildNotificationRoute(customEvent.detail?.data) as any);
       };
 
-      target.addEventListener(
-        WEB_NOTIFICATION_CLICK_EVENT,
-        openFromWebClick as EventListener
-      );
+      target.addEventListener(WEB_NOTIFICATION_CLICK_EVENT, openFromWebClick as EventListener);
+
       return () => {
-        target.removeEventListener(
-          WEB_NOTIFICATION_CLICK_EVENT,
-          openFromWebClick as EventListener
-        );
+        cancelled = true;
+        removeDesktopNotificationListener?.();
+        target.removeEventListener(WEB_NOTIFICATION_CLICK_EVENT, openFromWebClick as EventListener);
       };
     }
 
@@ -150,8 +174,7 @@ function PushNotificationRouter() {
       router.push(buildNotificationRoute(data) as any);
     };
 
-    const subscription =
-      Notifications.addNotificationResponseReceivedListener(openFromResponse);
+    const subscription = Notifications.addNotificationResponseReceivedListener(openFromResponse);
 
     void Notifications.getLastNotificationResponseAsync().then((response) => {
       if (response) {
@@ -168,18 +191,14 @@ function PushNotificationRouter() {
 }
 
 function ManagedDaemonSession({ daemon }: { daemon: HostProfile }) {
-  const { client } = useHostRuntimeSession(daemon.serverId);
+  const client = useHostRuntimeClient(daemon.serverId);
 
   if (!client) {
     return null;
   }
 
   return (
-    <SessionProvider
-      key={daemon.serverId}
-      serverId={daemon.serverId}
-      client={client}
-    >
+    <SessionProvider key={daemon.serverId} serverId={daemon.serverId} client={client}>
       {null}
     </SessionProvider>
   );
@@ -202,41 +221,99 @@ function HostSessionManager() {
 }
 
 function HostRuntimeBootstrapProvider({ children }: { children: ReactNode }) {
-  const [ready, setReady] = useState(false);
+  const [phase, setPhase] = useState<HostRuntimeBootstrapState["phase"]>("starting-daemon");
+  const [error, setError] = useState<string | null>(null);
+  const [retryToken, setRetryToken] = useState(0);
+  const retry = useCallback(() => {
+    setPhase("starting-daemon");
+    setError(null);
+    setRetryToken((current) => current + 1);
+  }, []);
 
   useEffect(() => {
     let cancelled = false;
+    const shouldManageDesktop = shouldUseDesktopDaemon();
     const store = getHostRuntimeStore();
 
-    void store
-      .loadFromStorage()
-      .then(() => {
+    const init = async () => {
+      const settings = await loadSettingsFromStorage();
+      const isDesktopManaged = shouldManageDesktop && settings.manageBuiltInDaemon;
+      await store.loadFromStorage();
+      if (isDesktopManaged) {
+        setPhase("starting-daemon");
+        setError(null);
+        const bootstrapResult = await store.bootstrapDesktop();
+        if (!bootstrapResult.ok) {
+          if (!cancelled) {
+            setPhase("error");
+            setError(bootstrapResult.error);
+          }
+          return;
+        }
+
         if (cancelled) {
           return;
         }
-        setReady(true);
-        void store.bootstrap();
-      })
-      .catch((error) => {
-        console.error("[HostRuntime] Failed to initialize store", error);
+
+        setPhase("connecting");
+        await store.addConnectionFromListenAndWaitForOnline({
+          listenAddress: bootstrapResult.listenAddress,
+          serverId: bootstrapResult.serverId,
+          hostname: bootstrapResult.hostname,
+        });
         if (!cancelled) {
-          setReady(true);
+          setPhase("online");
+          setError(null);
         }
-      });
+      } else {
+        void store.bootstrap({ manageBuiltInDaemon: settings.manageBuiltInDaemon });
+        if (!cancelled) {
+          setPhase("online");
+          setError(null);
+        }
+      }
+    };
+
+    void init().catch((bootstrapError) => {
+      console.error("[HostRuntime] Failed to initialize store", bootstrapError);
+      if (cancelled) {
+        return;
+      }
+      if (shouldManageDesktop) {
+        setPhase("error");
+        setError(bootstrapError instanceof Error ? bootstrapError.message : String(bootstrapError));
+        return;
+      }
+      setPhase("online");
+      setError(null);
+    });
 
     return () => {
       cancelled = true;
     };
-  }, []);
+  }, [retryToken]);
+
+  const state = useMemo<HostRuntimeBootstrapState>(
+    () => ({
+      phase,
+      error,
+      retry,
+    }),
+    [error, phase, retry],
+  );
 
   return (
-    <HostRuntimeBootstrapContext.Provider value={ready}>
+    <HostRuntimeBootstrapContext.Provider value={state}>
       {children}
     </HostRuntimeBootstrapContext.Provider>
   );
 }
 
-function useStoreReady(): boolean {
+export function useStoreReady(): boolean {
+  return useContext(HostRuntimeBootstrapContext).phase === "online";
+}
+
+export function useHostRuntimeBootstrapState(): HostRuntimeBootstrapState {
   return useContext(HostRuntimeBootstrapContext);
 }
 
@@ -244,6 +321,9 @@ function QueryProvider({ children }: { children: ReactNode }) {
   return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
 }
 
+const rowStyle = { flex: 1, flexDirection: "row" } as const;
+const flexStyle = { flex: 1 } as const;
+
 interface AppContainerProps {
   children: ReactNode;
   selectedAgentId?: string;
@@ -257,23 +337,14 @@ function AppContainer({
 }: AppContainerProps) {
   const { theme } = useUnistyles();
   const daemons = useHosts();
-  const mobileView = usePanelStore((state) => state.mobileView);
-  const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
-  const openAgentList = usePanelStore((state) => state.openAgentList);
   const toggleAgentList = usePanelStore((state) => state.toggleAgentList);
   const toggleFileExplorer = usePanelStore((state) => state.toggleFileExplorer);
-  const horizontalScroll = useHorizontalScrollOptional();
+  const toggleBothSidebars = usePanelStore((state) => state.toggleBothSidebars);
+  const toggleFocusMode = usePanelStore((state) => state.toggleFocusMode);
+  const isFocusModeEnabled = usePanelStore((state) => state.desktop.focusModeEnabled);
 
-  const isMobile =
-    UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
   const chromeEnabled = chromeEnabledOverride ?? daemons.length > 0;
-  const isOpen = chromeEnabled
-    ? isMobile
-      ? mobileView === "agent-list"
-      : desktopAgentListOpen
-    : false;
-  const openGestureEnabled =
-    chromeEnabled && isMobile && mobileView === "agent";
 
   useKeyboardShortcuts({
     enabled: chromeEnabled,
@@ -281,27 +352,58 @@ function AppContainer({
     toggleAgentList,
     selectedAgentId,
     toggleFileExplorer,
+    toggleBothSidebars,
+    toggleFocusMode,
   });
-  const {
-    translateX,
-    backdropOpacity,
-    windowWidth,
-    animateToOpen,
-    animateToClose,
-    isGesturing,
-  } = useSidebarAnimation();
 
-  // Track initial touch position for manual activation
+  const containerStyle = useMemo(
+    () => ({ flex: 1 as const, backgroundColor: theme.colors.surface0 }),
+    [theme.colors.surface0],
+  );
+
+  const content = (
+    <View style={containerStyle}>
+      <View style={rowStyle}>
+        {!isMobile && chromeEnabled && !isFocusModeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
+        <View style={flexStyle}>{children}</View>
+      </View>
+      {isMobile && chromeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
+      <DownloadToast />
+      <UpdateBanner />
+      <CommandCenter />
+      <ProjectPickerModal />
+      <WorkspaceSetupDialog />
+      <KeyboardShortcutsDialog />
+    </View>
+  );
+
+  if (!isMobile) {
+    return content;
+  }
+
+  return <MobileGestureWrapper chromeEnabled={chromeEnabled}>{content}</MobileGestureWrapper>;
+}
+
+function MobileGestureWrapper({
+  children,
+  chromeEnabled,
+}: {
+  children: ReactNode;
+  chromeEnabled: boolean;
+}) {
+  const mobileView = usePanelStore((state) => state.mobileView);
+  const openAgentList = usePanelStore((state) => state.openAgentList);
+  const horizontalScroll = useHorizontalScrollOptional();
+  const { translateX, backdropOpacity, windowWidth, animateToOpen, animateToClose, isGesturing } =
+    useSidebarAnimation();
   const touchStartX = useSharedValue(0);
+  const openGestureEnabled = chromeEnabled && mobileView === "agent";
 
-  // Open gesture: swipe right from anywhere to open sidebar (interactive drag)
-  // If any horizontal scroll is scrolled right, let the scroll view handle the gesture first
   const openGesture = useMemo(
     () =>
       Gesture.Pan()
         .enabled(openGestureEnabled)
         .manualActivation(true)
-        // Fail if 10px vertical movement happens first (allow vertical scroll)
         .failOffsetY([-10, 10])
         .onTouchesDown((event) => {
           const touch = event.changedTouches[0];
@@ -315,13 +417,11 @@ function AppContainer({
 
           const deltaX = touch.absoluteX - touchStartX.value;
 
-          // If horizontal scroll is scrolled right, fail so ScrollView handles it
           if (horizontalScroll?.isAnyScrolledRight.value) {
             stateManager.fail();
             return;
           }
 
-          // Activate after 15px rightward movement
           if (deltaX > 15) {
             stateManager.activate();
           }
@@ -330,19 +430,17 @@ function AppContainer({
           isGesturing.value = true;
         })
         .onUpdate((event) => {
-          // Start from closed position (-windowWidth) and move towards 0
           const newTranslateX = Math.min(0, -windowWidth + event.translationX);
           translateX.value = newTranslateX;
           backdropOpacity.value = interpolate(
             newTranslateX,
             [-windowWidth, 0],
             [0, 1],
-            Extrapolation.CLAMP
+            Extrapolation.CLAMP,
           );
         })
         .onEnd((event) => {
           isGesturing.value = false;
-          // Open if dragged more than 1/3 of sidebar or fast swipe
           const shouldOpen = event.translationX > windowWidth / 3 || event.velocityX > 500;
           if (shouldOpen) {
             animateToOpen();
@@ -362,65 +460,51 @@ function AppContainer({
       animateToOpen,
       animateToClose,
       openAgentList,
-      mobileView,
       isGesturing,
       horizontalScroll?.isAnyScrolledRight,
       touchStartX,
-    ]
+    ],
   );
 
-  const content = (
-    <View style={{ flex: 1, backgroundColor: theme.colors.surface0 }}>
-      <View style={{ flex: 1, flexDirection: "row" }}>
-        {!isMobile && chromeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
-        <View style={{ flex: 1 }}>
-          {children}
-        </View>
-      </View>
-      {isMobile && chromeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
-      <DownloadToast />
-      <CommandCenter />
-      <ProjectPickerModal />
-      <KeyboardShortcutsDialog />
-    </View>
-  );
-
-  if (!isMobile) {
-    return content;
-  }
-
   return (
     <GestureDetector gesture={openGesture} touchAction="pan-y">
-      {content}
+      {children}
     </GestureDetector>
   );
 }
 
 function ProvidersWrapper({ children }: { children: ReactNode }) {
   const { settings, isLoading: settingsLoading } = useAppSettings();
-  const storeReady = useStoreReady();
   const { upsertConnectionFromOfferUrl } = useHostMutations();
-  const isLoading = settingsLoading || !storeReady;
+  const systemColorScheme = useColorScheme();
+  const resolvedTheme = settings.theme === "auto" ? (systemColorScheme ?? "light") : settings.theme;
 
   // Apply theme setting on mount and when it changes
   useEffect(() => {
-    if (isLoading) return;
+    if (settingsLoading) return;
     if (settings.theme === "auto") {
       UnistylesRuntime.setAdaptiveThemes(true);
     } else {
       UnistylesRuntime.setAdaptiveThemes(false);
       UnistylesRuntime.setTheme(settings.theme);
     }
-  }, [isLoading, settings.theme]);
+  }, [settingsLoading, settings.theme]);
 
-  if (isLoading) {
-    return <LoadingView />;
-  }
+  useEffect(() => {
+    if (settingsLoading || Platform.OS !== "web") {
+      return;
+    }
+
+    void setDesktopTitleBarTheme(resolvedTheme).catch((error) => {
+      console.warn("[DesktopWindow] Failed to update title bar theme", error);
+    });
+  }, [settingsLoading, resolvedTheme]);
 
   return (
     <VoiceProvider>
       <OfferLinkListener upsertDaemonFromOfferUrl={upsertConnectionFromOfferUrl} />
       <HostSessionManager />
+      <FaviconStatusSync />
       {children}
     </VoiceProvider>
   );
@@ -451,7 +535,9 @@ function OfferLinkListener({
         });
     };
 
-    void Linking.getInitialURL().then(handleUrl).catch(() => undefined);
+    void Linking.getInitialURL()
+      .then(handleUrl)
+      .catch(() => undefined);
 
     const subscription = Linking.addEventListener("url", (event) => {
       handleUrl(event.url);
@@ -467,12 +553,23 @@ function OfferLinkListener({
 }
 
 function AppWithSidebar({ children }: { children: ReactNode }) {
+  const router = useRouter();
   const pathname = usePathname();
   const params = useGlobalSearchParams<{ open?: string | string[] }>();
-  useFaviconStatus();
+  const hosts = useHosts();
   const activeServerId = useMemo(() => parseServerIdFromPathname(pathname), [pathname]);
   const shouldShowAppChrome = activeServerId !== null;
 
+  useEffect(() => {
+    if (!activeServerId || hosts.length === 0) {
+      return;
+    }
+    if (hosts.some((host) => host.serverId === activeServerId)) {
+      return;
+    }
+    router.replace(mapPathnameToServer(pathname, hosts[0]!.serverId) as any);
+  }, [activeServerId, hosts, pathname, router]);
+
   // Parse selectedAgentKey directly from pathname
   // useLocalSearchParams doesn't update when navigating between same-pattern routes
   const selectedAgentKey = useMemo(() => {
@@ -499,67 +596,72 @@ function AppWithSidebar({ children }: { children: ReactNode }) {
   );
 }
 
-function LoadingView({ message }: { message?: string } = {}) {
+function FaviconStatusSync() {
+  useFaviconStatus();
+  return null;
+}
+
+function RootStack() {
+  const storeReady = useStoreReady();
+
   return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: darkTheme.colors.surface0,
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        animation: "none",
+        contentStyle: {
+          backgroundColor: darkTheme.colors.surface0,
+        },
       }}
     >
-      <ActivityIndicator size="large" color={darkTheme.colors.foreground} />
-      {message ? (
-        <Text
-          style={{
-            color: darkTheme.colors.foregroundMuted,
-            marginTop: 16,
-            fontSize: 14,
-          }}
-        >
-          {message}
-        </Text>
-      ) : null}
-    </View>
+      <Stack.Protected guard={storeReady}>
+        <Stack.Screen name="welcome" />
+        <Stack.Screen name="settings" />
+        <Stack.Screen name="h/[serverId]/workspace/[workspaceId]" />
+        <Stack.Screen
+          name="h/[serverId]/agent/[agentId]"
+          options={{ gestureEnabled: false }}
+        />
+        <Stack.Screen name="h/[serverId]/index" />
+        <Stack.Screen name="h/[serverId]/sessions" />
+        <Stack.Screen name="h/[serverId]/open-project" />
+        <Stack.Screen name="h/[serverId]/settings" />
+        <Stack.Screen name="pair-scan" />
+      </Stack.Protected>
+      <Stack.Screen name="index" />
+    </Stack>
   );
 }
 
-function MissingDaemonView() {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        padding: 24,
-        backgroundColor: darkTheme.colors.surface0,
-      }}
-    >
-      <ActivityIndicator size="small" color={darkTheme.colors.foreground} />
-      <Text
-        style={{
-          color: darkTheme.colors.foreground,
-          marginTop: 16,
-          textAlign: "center",
-        }}
-      >
-        No host configured. Open Settings to add a server URL.
-      </Text>
-    </View>
-  );
+function NavigationActiveWorkspaceObserver() {
+  const navigationRef = useNavigationContainerRef();
+
+  useEffect(() => {
+    syncNavigationActiveWorkspace(navigationRef);
+    const unsubscribeState = navigationRef.addListener("state", () => {
+      syncNavigationActiveWorkspace(navigationRef);
+    });
+    const unsubscribeReady = navigationRef.addListener("ready" as never, () => {
+      syncNavigationActiveWorkspace(navigationRef);
+    });
+    return () => {
+      unsubscribeState();
+      unsubscribeReady();
+    };
+  }, [navigationRef]);
+
+  return null;
 }
 
 export default function RootLayout() {
   return (
-    <GestureHandlerRootView
-      style={{ flex: 1, backgroundColor: darkTheme.colors.surface0 }}
-    >
+    <GestureHandlerRootView style={{ flex: 1, backgroundColor: darkTheme.colors.surface0 }}>
+      <NavigationActiveWorkspaceObserver />
       <PortalProvider>
         <SafeAreaProvider>
           <KeyboardProvider>
-            <BottomSheetModalProvider>
-              <QueryProvider>
+            <QueryProvider>
+              <BottomSheetModalProvider>
                 <HostRuntimeBootstrapProvider>
                   <PushNotificationRouter />
                   <ProvidersWrapper>
@@ -567,37 +669,15 @@ export default function RootLayout() {
                       <HorizontalScrollProvider>
                         <ToastProvider>
                           <AppWithSidebar>
-                            <Stack
-                              screenOptions={{
-                                headerShown: false,
-                                animation: "none",
-                                contentStyle: {
-                                  backgroundColor: darkTheme.colors.surface0,
-                                },
-                              }}
-                            >
-                              <Stack.Screen name="index" />
-                              <Stack.Screen name="settings" />
-                              <Stack.Screen name="h/[serverId]/workspace/[workspaceId]" />
-                              <Stack.Screen
-                                name="h/[serverId]/agent/[agentId]"
-                                options={{ gestureEnabled: false }}
-                              />
-                              <Stack.Screen name="h/[serverId]/index" />
-                              <Stack.Screen name="h/[serverId]/agents" />
-                              <Stack.Screen name="h/[serverId]/new-agent" />
-                              <Stack.Screen name="h/[serverId]/open-project" />
-                              <Stack.Screen name="h/[serverId]/settings" />
-                              <Stack.Screen name="pair-scan" />
-                            </Stack>
+                            <RootStack />
                           </AppWithSidebar>
                         </ToastProvider>
                       </HorizontalScrollProvider>
                     </SidebarAnimationProvider>
                   </ProvidersWrapper>
                 </HostRuntimeBootstrapProvider>
-              </QueryProvider>
-            </BottomSheetModalProvider>
+              </BottomSheetModalProvider>
+            </QueryProvider>
           </KeyboardProvider>
         </SafeAreaProvider>
       </PortalProvider>

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

@@ -1,11 +1,9 @@
 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";
+import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
+import { buildHostRootRoute } from "@/utils/host-routes";
+import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
 
 export default function HostAgentReadyRoute() {
   const router = useRouter();
@@ -16,7 +14,8 @@ export default function HostAgentReadyRoute() {
   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 client = useHostRuntimeClient(serverId);
+  const isConnected = useHostRuntimeIsConnected(serverId);
   const agentCwd = useSessionStore((state) => {
     if (!serverId || !agentId) {
       return null;
@@ -38,7 +37,11 @@ export default function HostAgentReadyRoute() {
     if (normalizedCwd) {
       redirectedRef.current = true;
       router.replace(
-        buildHostWorkspaceAgentRoute(serverId, normalizedCwd, agentId) as any
+        prepareWorkspaceTab({
+          serverId,
+          workspaceId: normalizedCwd,
+          target: { kind: "agent", agentId },
+        }) as any,
       );
     }
   }, [agentCwd, agentId, router, serverId]);
@@ -77,7 +80,13 @@ export default function HostAgentReadyRoute() {
         const cwd = result?.agent?.cwd?.trim();
         redirectedRef.current = true;
         if (cwd) {
-          router.replace(buildHostWorkspaceAgentRoute(serverId, cwd, agentId) as any);
+          router.replace(
+            prepareWorkspaceTab({
+              serverId,
+              workspaceId: cwd,
+              target: { kind: "agent", agentId },
+            }) as any,
+          );
           return;
         }
         router.replace(buildHostRootRoute(serverId) as any);

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

@@ -5,9 +5,10 @@ import { useFormPreferences } from "@/hooks/use-form-preferences";
 import {
   buildHostOpenProjectRoute,
   buildHostRootRoute,
-  buildHostWorkspaceAgentRoute,
+  buildHostWorkspaceOpenRoute,
   buildHostWorkspaceRoute,
 } from "@/utils/host-routes";
+import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
 
 const HOST_ROOT_REDIRECT_DELAY_MS = 300;
 
@@ -17,11 +18,11 @@ export default function HostIndexRoute() {
   const params = useLocalSearchParams<{ serverId?: string }>();
   const serverId = typeof params.serverId === "string" ? params.serverId : "";
   const { isLoading: preferencesLoading } = useFormPreferences();
-  const sessionAgents = useSessionStore(
-    (state) => (serverId ? state.sessions[serverId]?.agents : undefined)
+  const sessionAgents = useSessionStore((state) =>
+    serverId ? state.sessions[serverId]?.agents : undefined,
   );
-  const sessionWorkspaces = useSessionStore(
-    (state) => (serverId ? state.sessions[serverId]?.workspaces : undefined)
+  const sessionWorkspaces = useSessionStore((state) =>
+    serverId ? state.sessions[serverId]?.workspaces : undefined,
   );
 
   useEffect(() => {
@@ -44,12 +45,10 @@ export default function HostIndexRoute() {
         ? Array.from(sessionAgents.values()).filter((agent) => !agent.archivedAt)
         : [];
       visibleAgents.sort(
-        (left, right) => right.lastActivityAt.getTime() - left.lastActivityAt.getTime()
+        (left, right) => right.lastActivityAt.getTime() - left.lastActivityAt.getTime(),
       );
 
-      const visibleWorkspaces = sessionWorkspaces
-        ? Array.from(sessionWorkspaces.values())
-        : [];
+      const visibleWorkspaces = sessionWorkspaces ? Array.from(sessionWorkspaces.values()) : [];
       visibleWorkspaces.sort((left, right) => {
         const leftTime = left.activityAt?.getTime() ?? Number.NEGATIVE_INFINITY;
         const rightTime = right.activityAt?.getTime() ?? Number.NEGATIVE_INFINITY;
@@ -59,18 +58,20 @@ export default function HostIndexRoute() {
       const primaryAgent = visibleAgents[0];
       if (primaryAgent?.cwd?.trim()) {
         router.replace(
-          buildHostWorkspaceAgentRoute(
+          prepareWorkspaceTab({
             serverId,
-            primaryAgent.cwd.trim(),
-            primaryAgent.id
-          ) as any
+            workspaceId: primaryAgent.cwd.trim(),
+            target: { kind: "agent", agentId: primaryAgent.id },
+          }) as any,
         );
         return;
       }
 
       const primaryWorkspace = visibleWorkspaces[0];
       if (primaryWorkspace?.id?.trim()) {
-        router.replace(buildHostWorkspaceRoute(serverId, primaryWorkspace.id.trim()) as any);
+        router.replace(
+          buildHostWorkspaceOpenRoute(serverId, primaryWorkspace.id.trim(), "draft:new") as any,
+        );
         return;
       }
 
@@ -78,14 +79,7 @@ export default function HostIndexRoute() {
     }, HOST_ROOT_REDIRECT_DELAY_MS);
 
     return () => clearTimeout(timer);
-  }, [
-    pathname,
-    preferencesLoading,
-    router,
-    serverId,
-    sessionAgents,
-    sessionWorkspaces,
-  ]);
+  }, [pathname, preferencesLoading, router, serverId, sessionAgents, sessionWorkspaces]);
 
   return null;
 }

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

@@ -1,9 +0,0 @@
-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]/sessions.tsx

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

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

@@ -1,25 +1,89 @@
-import { useGlobalSearchParams, usePathname } from 'expo-router'
-import { WorkspaceScreen } from '@/screens/workspace/workspace-screen'
+import { useEffect, useRef } from "react";
+import { useGlobalSearchParams, useLocalSearchParams, useRouter } from "expo-router";
+import type { WorkspaceTabTarget } from "@/stores/workspace-tabs-store";
+import { WorkspaceScreen } from "@/screens/workspace/workspace-screen";
 import {
-  parseHostWorkspaceRouteFromPathname,
+  buildHostWorkspaceRoute,
+  decodeWorkspaceIdFromPathSegment,
   parseWorkspaceOpenIntent,
-} from '@/utils/host-routes'
+  type WorkspaceOpenIntent,
+} from "@/utils/host-routes";
+import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
+
+function getParamValue(value: string | string[] | undefined): string {
+  if (typeof value === "string") {
+    return value.trim();
+  }
+  if (Array.isArray(value)) {
+    const firstValue = value[0];
+    return typeof firstValue === "string" ? firstValue.trim() : "";
+  }
+  return "";
+}
+
+function getOpenIntentTarget(openIntent: WorkspaceOpenIntent): WorkspaceTabTarget {
+  if (openIntent.kind === "agent") {
+    return { kind: "agent", agentId: openIntent.agentId };
+  }
+  if (openIntent.kind === "terminal") {
+    return { kind: "terminal", terminalId: openIntent.terminalId };
+  }
+  if (openIntent.kind === "file") {
+    return { kind: "file", path: openIntent.path };
+  }
+  return { kind: "draft", draftId: openIntent.draftId };
+}
 
 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)
+  const router = useRouter();
+  const consumedIntentRef = useRef<string | null>(null);
+  const params = useLocalSearchParams<{
+    serverId?: string | string[];
+    workspaceId?: string | string[];
+  }>();
+  const globalParams = useGlobalSearchParams<{
+    open?: string | string[];
+  }>();
+  const serverId = getParamValue(params.serverId);
+  const workspaceValue = getParamValue(params.workspaceId);
+  const workspaceId = workspaceValue
+    ? (decodeWorkspaceIdFromPathSegment(workspaceValue) ?? "")
+    : "";
+  const openValue = getParamValue(globalParams.open);
+
+  useEffect(() => {
+    if (!openValue) {
+      return;
+    }
+
+    const consumptionKey = `${serverId}:${workspaceId}:${openValue}`;
+    if (consumedIntentRef.current === consumptionKey) {
+      return;
+    }
+    consumedIntentRef.current = consumptionKey;
+
+    const openIntent = parseWorkspaceOpenIntent(openValue);
+    const route = openIntent
+      ? prepareWorkspaceTab({
+          serverId,
+          workspaceId,
+          target: getOpenIntentTarget(openIntent),
+          pin: openIntent.kind === "agent",
+        })
+      : buildHostWorkspaceRoute(serverId, workspaceId);
+
+    router.replace(route as any);
+  }, [openValue, router, serverId, workspaceId]);
+
+  if (openValue) {
+    return null;
+  }
 
   return (
     <WorkspaceScreen
       key={`${serverId}:${workspaceId}`}
       serverId={serverId}
       workspaceId={workspaceId}
-      openIntent={openIntent}
     />
-  )
+  );
 }

packages/app/src/app/index.tsx

@@ -1,113 +1,65 @@
-import { useEffect, useSyncExternalStore, useState } from 'react'
-import { usePathname, useRouter } from 'expo-router'
-import { useHosts } from '@/runtime/host-runtime'
-import { shouldUseManagedDesktopDaemon } from '@/desktop/managed-runtime/managed-runtime'
-import { buildHostRootRoute } from '@/utils/host-routes'
-import { StartupSplashScreen } from '@/screens/startup-splash-screen'
-import { WelcomeScreen } from '@/components/welcome-screen'
-import { getHostRuntimeStore, isHostRuntimeConnected } from '@/runtime/host-runtime'
+import { useEffect, useSyncExternalStore } from "react";
+import { usePathname, useRouter } from "expo-router";
+import { StartupSplashScreen } from "@/screens/startup-splash-screen";
 import {
-  shouldRedirectToWelcome,
-  shouldWaitOnStartupRace,
-  WELCOME_ROUTE,
-} from '@/app-support/index-startup'
+  useHostRuntimeBootstrapState,
+  useStoreReady,
+} from "@/app/_layout";
+import {
+  getHostRuntimeStore,
+  isHostRuntimeConnected,
+  useHosts,
+} from "@/runtime/host-runtime";
+import { buildHostRootRoute } from "@/utils/host-routes";
+
+const WELCOME_ROUTE = "/welcome";
+
+function useAnyOnlineHostServerId(serverIds: string[]): string | null {
+  const runtime = getHostRuntimeStore();
 
-const STARTUP_TIMEOUT_MS = 30_000
-function useAnyHostOnline(serverIds: string[]): string | null {
-  const runtime = getHostRuntimeStore()
   return useSyncExternalStore(
     (onStoreChange) => runtime.subscribeAll(onStoreChange),
     () => {
-      let firstOnlineServerId: string | null = null
-      let firstOnlineAt: string | null = null
+      let firstOnlineServerId: string | null = null;
+      let firstOnlineAt: string | null = null;
       for (const serverId of serverIds) {
-        const snapshot = runtime.getSnapshot(serverId)
-        const lastOnlineAt = snapshot?.lastOnlineAt ?? null
+        const snapshot = runtime.getSnapshot(serverId);
+        const lastOnlineAt = snapshot?.lastOnlineAt ?? null;
         if (!isHostRuntimeConnected(snapshot) || !lastOnlineAt) {
-          continue
+          continue;
         }
         if (!firstOnlineAt || lastOnlineAt < firstOnlineAt) {
-          firstOnlineAt = lastOnlineAt
-          firstOnlineServerId = serverId
+          firstOnlineAt = lastOnlineAt;
+          firstOnlineServerId = serverId;
         }
       }
-      return firstOnlineServerId
+      return firstOnlineServerId;
     },
-    () => {
-      let firstOnlineServerId: string | null = null
-      let firstOnlineAt: string | null = null
-      for (const serverId of serverIds) {
-        const snapshot = runtime.getSnapshot(serverId)
-        const lastOnlineAt = snapshot?.lastOnlineAt ?? null
-        if (!isHostRuntimeConnected(snapshot) || !lastOnlineAt) {
-          continue
-        }
-        if (!firstOnlineAt || lastOnlineAt < firstOnlineAt) {
-          firstOnlineAt = lastOnlineAt
-          firstOnlineServerId = serverId
-        }
-      }
-      return firstOnlineServerId
-    }
-  )
+    () => null,
+  );
 }
 
 export default function Index() {
-  const router = useRouter()
-  const pathname = usePathname()
-  const daemons = useHosts()
-  const [hasTimedOut, setHasTimedOut] = useState(false)
-  const isDesktopStartupRace = shouldUseManagedDesktopDaemon()
-  const onlineServerId = useAnyHostOnline(daemons.map((daemon) => daemon.serverId))
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setHasTimedOut(true)
-    }, STARTUP_TIMEOUT_MS)
-    return () => {
-      clearTimeout(timer)
-    }
-  }, [])
+  const router = useRouter();
+  const pathname = usePathname();
+  const bootstrapState = useHostRuntimeBootstrapState();
+  const storeReady = useStoreReady();
+  const hosts = useHosts();
+  const anyOnlineServerId = useAnyOnlineHostServerId(hosts.map((host) => host.serverId));
 
   useEffect(() => {
-    if (!onlineServerId) {
-      return
+    if (!storeReady) {
+      return;
     }
-    if (pathname !== '/' && pathname !== '') {
-      return
+    if (pathname !== "/" && pathname !== "") {
+      return;
     }
-    router.replace(buildHostRootRoute(onlineServerId) as any)
-  }, [onlineServerId, pathname, router])
 
-  useEffect(() => {
-    if (
-      !shouldRedirectToWelcome({
-        onlineServerId,
-        hasTimedOut,
-        pathname,
-        isDesktopStartupRace,
-        daemonCount: daemons.length,
-      })
-    ) {
-      return
-    }
-    router.replace(WELCOME_ROUTE as any)
-  }, [daemons.length, hasTimedOut, isDesktopStartupRace, onlineServerId, pathname, router])
+    const targetRoute = anyOnlineServerId
+      ? buildHostRootRoute(anyOnlineServerId)
+      : WELCOME_ROUTE;
+    router.replace(targetRoute as any);
+  }, [anyOnlineServerId, pathname, router, storeReady]);
 
-  if (
-    shouldWaitOnStartupRace({
-      onlineServerId,
-      hasTimedOut,
-      isDesktopStartupRace,
-      daemonCount: daemons.length,
-      pathname,
-    })
-  ) {
-    return <StartupSplashScreen />
-  }
-
-  if (!onlineServerId) {
-    return <WelcomeScreen />
-  }
-
-  return null
+  return <StartupSplashScreen bootstrapState={bootstrapState} />;
 }

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

@@ -11,10 +11,7 @@ import { NameHostModal } from "@/components/name-host-modal";
 import { decodeOfferFragmentPayload, normalizeHostPort } from "@/utils/daemon-endpoints";
 import { connectToDaemon } from "@/utils/test-daemon-connection";
 import { ConnectionOfferSchema } from "@server/shared/connection-offer";
-import {
-  buildHostRootRoute,
-  buildHostSettingsRoute,
-} from "@/utils/host-routes";
+import { buildHostRootRoute, buildHostSettingsRoute } from "@/utils/host-routes";
 
 const styles = StyleSheet.create((theme) => ({
   container: {
@@ -148,8 +145,7 @@ export default function PairScanScreen() {
     targetServerId?: string;
   }>();
   const source = typeof params.source === "string" ? params.source : "settings";
-  const sourceServerId =
-    typeof params.sourceServerId === "string" ? params.sourceServerId : null;
+  const sourceServerId = typeof params.sourceServerId === "string" ? params.sourceServerId : null;
   const targetServerId = typeof params.targetServerId === "string" ? params.targetServerId : null;
   const daemons = useHosts();
   const { upsertConnectionFromOfferUrl: upsertDaemonFromOfferUrl, renameHost } = useHostMutations();
@@ -157,15 +153,22 @@ export default function PairScanScreen() {
   const [permission, requestPermission] = useCameraPermissions();
   const [isPairing, setIsPairing] = useState(false);
   const lastScannedRef = useRef<string | null>(null);
-  const [pendingNameHost, setPendingNameHost] = useState<{ serverId: string; hostname: string | null } | null>(null);
+  const [pendingNameHost, setPendingNameHost] = useState<{
+    serverId: string;
+    hostname: string | null;
+  } | null>(null);
   const pendingNameHostname = useSessionStore(
     useCallback(
       (state) => {
         if (!pendingNameHost) return null;
-        return state.sessions[pendingNameHost.serverId]?.serverInfo?.hostname ?? pendingNameHost.hostname ?? null;
+        return (
+          state.sessions[pendingNameHost.serverId]?.serverInfo?.hostname ??
+          pendingNameHost.hostname ??
+          null
+        );
       },
-      [pendingNameHost]
-    )
+      [pendingNameHost],
+    ),
   );
 
   const returnToSource = useCallback(
@@ -190,7 +193,7 @@ export default function PairScanScreen() {
         router.replace(buildHostSettingsRoute(settingsServerId) as any);
       }
     },
-    [router, source, sourceServerId, targetServerId]
+    [router, source, sourceServerId, targetServerId],
   );
 
   const closeToSource = useCallback(() => {
@@ -238,7 +241,10 @@ export default function PairScanScreen() {
 
         if (targetServerId && offer.serverId !== targetServerId) {
           lastScannedRef.current = null;
-          Alert.alert("Wrong daemon", `That QR code belongs to ${offer.serverId}, not ${targetServerId}.`);
+          Alert.alert(
+            "Wrong daemon",
+            `That QR code belongs to ${offer.serverId}, not ${targetServerId}.`,
+          );
           return;
         }
 
@@ -270,7 +276,7 @@ export default function PairScanScreen() {
         setIsPairing(false);
       }
     },
-    [daemons, isPairing, pendingNameHost, returnToSource, targetServerId, upsertDaemonFromOfferUrl]
+    [daemons, isPairing, pendingNameHost, returnToSource, targetServerId, upsertDaemonFromOfferUrl],
   );
 
   if (Platform.OS === "web") {
@@ -334,10 +340,7 @@ export default function PairScanScreen() {
             <Text style={styles.permissionBody}>
               Allow camera access to scan the pairing QR code from your daemon.
             </Text>
-            <Pressable
-              style={styles.permissionButton}
-              onPress={() => void requestPermission()}
-            >
+            <Pressable style={styles.permissionButton} onPress={() => void requestPermission()}>
               <Text style={styles.permissionButtonText}>Grant permission</Text>
             </Pressable>
           </View>
@@ -356,9 +359,7 @@ export default function PairScanScreen() {
                 <View style={[styles.corner, styles.cornerBL]} />
                 <View style={[styles.corner, styles.cornerBR]} />
               </View>
-              <Text style={styles.helperText}>
-                Point your camera at the pairing QR code.
-              </Text>
+              <Text style={styles.helperText}>Point your camera at the pairing QR code.</Text>
               {isPairing ? (
                 <Text style={[styles.helperText, { color: theme.colors.foreground }]}>
                   Pairing…

packages/app/src/app/settings.tsx

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

packages/app/src/app/welcome.tsx

@@ -1,5 +1,5 @@
-import { WelcomeScreen } from '@/components/welcome-screen'
+import { WelcomeScreen } from "@/components/welcome-screen";
 
 export default function WelcomeRoute() {
-  return <WelcomeScreen />
+  return <WelcomeScreen />;
 }

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

@@ -86,10 +86,7 @@ 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>;
+  releasePreviewUrl?: (input: { attachment: AttachmentMetadata; url: string }) => Promise<void>;
 }): AttachmentStore {
   const baseDirectory = FileSystem.cacheDirectory
     ? `${FileSystem.cacheDirectory}${params.baseDirectoryName}/`
@@ -201,7 +198,7 @@ export function createLocalFileAttachmentStore(params: {
           await FileSystem.deleteAsync(`${baseDirectory}${entryName}`, {
             idempotent: true,
           });
-        })
+        }),
       );
     },
   };

packages/app/src/attachments/service.ts

@@ -47,7 +47,7 @@ export async function persistAttachmentFromFileUri(input: {
 }
 
 export async function encodeAttachmentsForSend(
-  attachments: readonly AttachmentMetadata[] | undefined
+  attachments: readonly AttachmentMetadata[] | undefined,
 ): Promise<Array<{ data: string; mimeType: string }> | undefined> {
   if (!attachments || attachments.length === 0) {
     return undefined;
@@ -69,18 +69,16 @@ export async function encodeAttachmentsForSend(
         });
         return null;
       }
-    })
+    }),
   );
 
   const valid = encoded.filter(
-    (entry): entry is { data: string; mimeType: string } => entry !== null
+    (entry): entry is { data: string; mimeType: string } => entry !== null,
   );
   return valid.length > 0 ? valid : undefined;
 }
 
-export async function resolveAttachmentPreviewUrl(
-  attachment: AttachmentMetadata
-): Promise<string> {
+export async function resolveAttachmentPreviewUrl(attachment: AttachmentMetadata): Promise<string> {
   const store = await getAttachmentStore();
   return await store.resolvePreviewUrl({ attachment });
 }
@@ -97,7 +95,7 @@ export async function releaseAttachmentPreviewUrl(input: {
 }
 
 export async function deleteAttachments(
-  attachments: readonly AttachmentMetadata[] | undefined
+  attachments: readonly AttachmentMetadata[] | undefined,
 ): Promise<void> {
   if (!attachments || attachments.length === 0) {
     return;
@@ -113,7 +111,7 @@ export async function deleteAttachments(
           error,
         });
       }
-    })
+    }),
   );
 }
 

packages/app/src/attachments/store.ts

@@ -1,27 +1,23 @@
 import { Platform } from "react-native";
-import { isTauriEnvironment } from "@/utils/tauri";
+import { isDesktop } from "@/desktop/host";
 import type { AttachmentStore } from "@/attachments/types";
 
 let attachmentStorePromise: Promise<AttachmentStore> | null = null;
 
 async function createAttachmentStore(): Promise<AttachmentStore> {
   if (Platform.OS === "web") {
-    if (isTauriEnvironment()) {
+    if (isDesktop()) {
       const { createDesktopAttachmentStore } = await import(
         "../desktop/attachments/desktop-attachment-store"
       );
       return createDesktopAttachmentStore();
     }
 
-    const { createIndexedDbAttachmentStore } = await import(
-      "./web/indexeddb-attachment-store"
-    );
+    const { createIndexedDbAttachmentStore } = await import("./web/indexeddb-attachment-store");
     return createIndexedDbAttachmentStore();
   }
 
-  const { createNativeFileAttachmentStore } = await import(
-    "./native/native-file-attachment-store"
-  );
+  const { createNativeFileAttachmentStore } = await import("./native/native-file-attachment-store");
   return createNativeFileAttachmentStore();
 }
 

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

@@ -1,12 +1,9 @@
 import { useEffect, useRef, useState } from "react";
 import type { AttachmentMetadata } from "@/attachments/types";
-import {
-  releaseAttachmentPreviewUrl,
-  resolveAttachmentPreviewUrl,
-} from "@/attachments/service";
+import { releaseAttachmentPreviewUrl, resolveAttachmentPreviewUrl } from "@/attachments/service";
 
 export function useAttachmentPreviewUrl(
-  attachment: AttachmentMetadata | null | undefined
+  attachment: AttachmentMetadata | null | undefined,
 ): string | null {
   const [url, setUrl] = useState<string | null>(null);
   const activeAttachmentRef = useRef<AttachmentMetadata | null>(null);
@@ -52,12 +49,7 @@ export function useAttachmentPreviewUrl(
         url: currentUrl,
       });
     };
-  }, [
-    attachment?.id,
-    attachment?.storageType,
-    attachment?.storageKey,
-    attachment?.mimeType,
-  ]);
+  }, [attachment?.id, attachment?.storageType, attachment?.storageKey, attachment?.mimeType]);
 
   return url;
 }

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

@@ -53,7 +53,7 @@ function openAttachmentDb(): Promise<IDBDatabase> {
 function runTx<T>(
   db: IDBDatabase,
   mode: IDBTransactionMode,
-  run: (store: IDBObjectStore) => IDBRequest<T>
+  run: (store: IDBObjectStore) => IDBRequest<T>,
 ): Promise<T> {
   return new Promise((resolve, reject) => {
     const transaction = db.transaction(STORE_NAME, mode);
@@ -78,7 +78,10 @@ async function sourceToBlob(input: SaveAttachmentInput): Promise<{ blob: Blob; m
   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);
+    const blob =
+      source.blob.type === mimeType
+        ? source.blob
+        : source.blob.slice(0, source.blob.size, mimeType);
     return { blob, mimeType };
   }
 
@@ -104,7 +107,7 @@ async function sourceToBlob(input: SaveAttachmentInput): Promise<{ blob: Blob; m
 
 async function loadBlob(db: IDBDatabase, id: string): Promise<Blob> {
   const record = await runTx<StoredBlobRecord | undefined>(db, "readonly", (store) =>
-    store.get(id)
+    store.get(id),
   );
   if (!record?.blob) {
     throw new Error(`Attachment ${id} was not found in IndexedDB.`);
@@ -125,7 +128,7 @@ export function createIndexedDbAttachmentStore(): AttachmentStore {
 
       try {
         await runTx(db, "readwrite", (store) =>
-          store.put({ id, blob, createdAt, fileName } satisfies StoredBlobRecord)
+          store.put({ id, blob, createdAt, fileName } satisfies StoredBlobRecord),
         );
       } finally {
         db.close();
@@ -184,7 +187,9 @@ export function createIndexedDbAttachmentStore(): AttachmentStore {
           const cursorRequest = store.openCursor();
 
           cursorRequest.onerror = () => {
-            reject(cursorRequest.error ?? new Error("Failed to iterate IndexedDB attachment store."));
+            reject(
+              cursorRequest.error ?? new Error("Failed to iterate IndexedDB attachment store."),
+            );
           };
 
           cursorRequest.onsuccess = () => {

packages/app/src/components/active-processes.tsx

@@ -36,10 +36,12 @@ function getModeName(modeId?: string, availableModes?: Agent["availableModes"]):
 function getModeColor(modeId?: string): string {
   if (!modeId) return "#9ca3af"; // gray
 
-  // Color based on common mode types
-  if (modeId.includes("ask")) return "#f59e0b"; // orange - asks permission
-  if (modeId.includes("code")) return "#22c55e"; // green - writes code
-  if (modeId.includes("architect") || modeId.includes("plan")) return "#3b82f6"; // blue - plans
+  if (modeId.includes("bypass") || modeId.includes("full-access")) return "#ef4444"; // red - dangerous
+  if (modeId.includes("auto") || modeId.includes("build") || modeId.includes("acceptEdits"))
+    return "#3b82f6"; // blue - build/auto
+  if (modeId.includes("plan") || modeId.includes("architect")) return "#a855f7"; // purple - planning
+  if (modeId.includes("ask") || modeId.includes("read-only") || modeId === "default")
+    return "#22c55e"; // green - safest
 
   return "#9ca3af"; // gray - unknown
 }
@@ -68,16 +70,16 @@ const styles = StyleSheet.create((theme) => ({
   backButtonText: {
     color: theme.colors.foreground,
     fontSize: theme.fontSize.sm,
-    fontWeight: '600',
-    textAlign: 'center',
+    fontWeight: "600",
+    textAlign: "center",
   },
   scrollView: {
     paddingHorizontal: theme.spacing[4],
     paddingVertical: theme.spacing[3],
   },
   processItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     gap: theme.spacing[2],
     paddingHorizontal: theme.spacing[3],
     paddingVertical: theme.spacing[2],
@@ -104,7 +106,7 @@ const styles = StyleSheet.create((theme) => ({
   processText: {
     color: theme.colors.foreground,
     fontSize: theme.fontSize.xs,
-    fontWeight: '500',
+    fontWeight: "500",
   },
   processTextActive: {
     color: theme.colors.primaryForeground,
@@ -147,20 +149,21 @@ export function ActiveProcesses({
           onPress={onSelectOrchestrator}
           style={({ pressed }) => [
             styles.processItem,
-            viewMode === 'orchestrator' ? styles.processItemActive : styles.processItemInactive,
+            viewMode === "orchestrator" ? styles.processItemActive : styles.processItemInactive,
             pressed && { opacity: 0.7 },
           ]}
         >
           <View style={styles.agentIcon} />
-          <Text style={[
-            styles.processText,
-            viewMode === 'orchestrator' && styles.processTextActive,
-          ]}>Orchestrator</Text>
+          <Text
+            style={[styles.processText, viewMode === "orchestrator" && styles.processTextActive]}
+          >
+            Orchestrator
+          </Text>
         </Pressable>
 
         {/* Agent pills */}
         {agents.map((agent) => {
-          const isActive = viewMode === 'agent' && activeAgentId === agent.id;
+          const isActive = viewMode === "agent" && activeAgentId === agent.id;
 
           return (
             <Pressable
@@ -174,15 +177,21 @@ export function ActiveProcesses({
             >
               <View style={styles.agentIcon} />
 
-              <Text style={[
-                styles.processText,
-                isActive && styles.processTextActive,
-              ]}>{agent.id.substring(0, 8)}</Text>
+              <Text style={[styles.processText, isActive && styles.processTextActive]}>
+                {agent.id.substring(0, 8)}
+              </Text>
 
-              <View style={[styles.statusDot, { backgroundColor: getAgentStatusColor(agent.status) }]} />
+              <View
+                style={[styles.statusDot, { backgroundColor: getAgentStatusColor(agent.status) }]}
+              />
 
               {agent.currentModeId && (
-                <View style={[styles.modeIndicator, { backgroundColor: getModeColor(agent.currentModeId) }]} />
+                <View
+                  style={[
+                    styles.modeIndicator,
+                    { backgroundColor: getModeColor(agent.currentModeId) },
+                  ]}
+                />
               )}
             </Pressable>
           );

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

@@ -1,15 +1,7 @@
 import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
 import type { ReactNode } from "react";
 import { createPortal } from "react-dom";
-import {
-  Modal,
-  Platform,
-  Pressable,
-  ScrollView,
-  Text,
-  TextInput,
-  View,
-} from "react-native";
+import { Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from "react-native";
 import type { TextInputProps } from "react-native";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { getOverlayRoot, OVERLAY_Z } from "../lib/overlay-root";
@@ -109,6 +101,7 @@ export interface AdaptiveModalSheetProps {
   onClose: () => void;
   children: ReactNode;
   snapPoints?: string[];
+  stackBehavior?: "push" | "switch" | "replace";
   testID?: string;
 }
 
@@ -118,11 +111,11 @@ export function AdaptiveModalSheet({
   onClose,
   children,
   snapPoints,
+  stackBehavior,
   testID,
 }: AdaptiveModalSheetProps) {
   const { theme } = useUnistyles();
-  const isMobile =
-    UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
   const sheetRef = useRef<BottomSheetModal>(null);
   const dismissingForVisibilityRef = useRef(false);
   const resolvedSnapPoints = useMemo(() => snapPoints ?? ["65%", "90%"], [snapPoints]);
@@ -148,19 +141,14 @@ export function AdaptiveModalSheet({
         onClose();
       }
     },
-    [onClose]
+    [onClose],
   );
 
   const renderBackdrop = useCallback(
     (props: React.ComponentProps<typeof BottomSheetBackdrop>) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-        opacity={0.45}
-      />
+      <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} opacity={0.45} />
     ),
-    []
+    [],
   );
 
   if (isMobile) {
@@ -173,6 +161,7 @@ export function AdaptiveModalSheet({
         onChange={handleSheetChange}
         backdropComponent={renderBackdrop}
         enablePanDownToClose
+        stackBehavior={stackBehavior}
         backgroundComponent={SheetBackground}
         handleIndicatorStyle={styles.bottomSheetHandle}
         keyboardBehavior="extend"
@@ -180,11 +169,7 @@ export function AdaptiveModalSheet({
       >
         <View style={styles.bottomSheetHeader}>
           <Text style={styles.title}>{title}</Text>
-          <Pressable
-            accessibilityLabel="Close"
-            style={styles.closeButton}
-            onPress={onClose}
-          >
+          <Pressable accessibilityLabel="Close" style={styles.closeButton} onPress={onClose}>
             <X size={16} color={theme.colors.foregroundMuted} />
           </Pressable>
         </View>
@@ -209,11 +194,7 @@ export function AdaptiveModalSheet({
       <View style={styles.desktopCard}>
         <View style={styles.header}>
           <Text style={styles.title}>{title}</Text>
-          <Pressable
-            accessibilityLabel="Close"
-            style={styles.closeButton}
-            onPress={onClose}
-          >
+          <Pressable accessibilityLabel="Close" style={styles.closeButton} onPress={onClose}>
             <X size={16} color={theme.colors.foregroundMuted} />
           </Pressable>
         </View>
@@ -254,13 +235,12 @@ export function AdaptiveModalSheet({
  */
 export const AdaptiveTextInput = forwardRef<TextInput, TextInputProps>(
   function AdaptiveTextInput(props, ref) {
-    const isMobile =
-      UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+    const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
 
     if (isMobile) {
       return <BottomSheetTextInput ref={ref as any} {...props} />;
     }
 
     return <TextInput ref={ref} {...props} />;
-  }
+  },
 );

packages/app/src/components/add-host-method-modal.tsx

@@ -60,8 +60,17 @@ export function AddHostMethodModal({
   }, [onPasteLink]);
 
   return (
-    <AdaptiveModalSheet title="Add connection" visible={visible} onClose={onClose} testID="add-host-method-modal">
-      <Pressable style={styles.option} onPress={handleDirect} accessibilityLabel="Direct connection">
+    <AdaptiveModalSheet
+      title="Add connection"
+      visible={visible}
+      onClose={onClose}
+      testID="add-host-method-modal"
+    >
+      <Pressable
+        style={styles.option}
+        onPress={handleDirect}
+        accessibilityLabel="Direct connection"
+      >
         <Link2 size={18} color={theme.colors.foreground} />
         <View style={styles.optionBody}>
           <Text style={styles.optionText}>Direct connection</Text>
@@ -79,7 +88,11 @@ export function AddHostMethodModal({
         </Pressable>
       ) : null}
 
-      <Pressable style={styles.option} onPress={handlePaste} accessibilityLabel="Paste pairing link">
+      <Pressable
+        style={styles.option}
+        onPress={handlePaste}
+        accessibilityLabel="Paste pairing link"
+      >
         <ClipboardPaste size={18} color={theme.colors.foreground} />
         <View style={styles.optionBody}>
           <Text style={styles.optionText}>Paste pairing link</Text>

packages/app/src/components/add-host-modal.tsx

@@ -60,8 +60,8 @@ function formatTechnicalTransportDetails(details: Array<string | null>): string
         .map((value) => normalizeTransportMessage(value))
         .filter((value): value is string => Boolean(value))
         .map((value) => value.trim())
-        .filter((value) => value.length > 0)
-    )
+        .filter((value) => value.length > 0),
+    ),
   );
 
   if (unique.length === 0) return null;
@@ -78,7 +78,10 @@ function formatTechnicalTransportDetails(details: Array<string | null>): string
   return unique.join(" — ");
 }
 
-function buildConnectionFailureCopy(endpoint: string, error: unknown): { title: string; detail: string | null; raw: string | null } {
+function buildConnectionFailureCopy(
+  endpoint: string,
+  error: unknown,
+): { title: string; detail: string | null; raw: string | null } {
   const title = `We failed to connect to ${endpoint}.`;
 
   const raw = (() => {
@@ -109,8 +112,13 @@ function buildConnectionFailureCopy(endpoint: string, error: unknown): { title:
     detail = "Host not found. Check the hostname and try again.";
   } else if (rawLower.includes("ehostunreach") || rawLower.includes("host is unreachable")) {
     detail = "Host is unreachable. Check your network and firewall.";
-  } else if (rawLower.includes("certificate") || rawLower.includes("tls") || rawLower.includes("ssl")) {
-    detail = "TLS error. Direct connections use an unencrypted local connection. Use relay for remote access.";
+  } else if (
+    rawLower.includes("certificate") ||
+    rawLower.includes("tls") ||
+    rawLower.includes("ssl")
+  ) {
+    detail =
+      "TLS error. Direct connections use an unencrypted local connection. Use relay for remote access.";
   } else if (raw) {
     detail = "Unable to connect. Check the host/port and that the daemon is reachable.";
   } else {
@@ -125,15 +133,25 @@ export interface AddHostModalProps {
   onClose: () => void;
   targetServerId?: string;
   onCancel?: () => void;
-  onSaved?: (result: { profile: HostProfile; serverId: string; hostname: string | null; isNewHost: boolean }) => void;
+  onSaved?: (result: {
+    profile: HostProfile;
+    serverId: string;
+    hostname: string | null;
+    isNewHost: boolean;
+  }) => void;
 }
 
-export function AddHostModal({ visible, onClose, onCancel, onSaved, targetServerId }: AddHostModalProps) {
+export function AddHostModal({
+  visible,
+  onClose,
+  onCancel,
+  onSaved,
+  targetServerId,
+}: AddHostModalProps) {
   const { theme } = useUnistyles();
   const daemons = useHosts();
   const { upsertDirectConnection } = useHostMutations();
-  const isMobile =
-    UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
 
   const hostInputRef = useRef<TextInput>(null);
 
@@ -220,10 +238,24 @@ export function AddHostModal({ visible, onClose, onCancel, onSaved, targetServer
     } finally {
       setIsSaving(false);
     }
-  }, [daemons, endpointRaw, handleClose, isMobile, isSaving, onSaved, targetServerId, upsertDirectConnection]);
+  }, [
+    daemons,
+    endpointRaw,
+    handleClose,
+    isMobile,
+    isSaving,
+    onSaved,
+    targetServerId,
+    upsertDirectConnection,
+  ]);
 
   return (
-    <AdaptiveModalSheet title="Direct connection" visible={visible} onClose={handleClose} testID="add-host-modal">
+    <AdaptiveModalSheet
+      title="Direct connection"
+      visible={visible}
+      onClose={handleClose}
+      testID="add-host-modal"
+    >
       <Text style={styles.helper}>Enter the address of a Paseo server.</Text>
 
       <View style={styles.field}>

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

@@ -1,76 +1,77 @@
-import { useState } from 'react';
-import { View, Text, Pressable } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
+import { useState } from "react";
+import { View, Text, Pressable } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
 import { Fonts } from "@/constants/theme";
-import type { AgentActivity, GroupedTextMessage, MergedToolCall, SessionUpdate } from '@/types/agent-activity';
+import type {
+  AgentActivity,
+  GroupedTextMessage,
+  MergedToolCall,
+  SessionUpdate,
+} from "@/types/agent-activity";
 
 interface AgentActivityItemProps {
   item: GroupedTextMessage | MergedToolCall | AgentActivity;
 }
 
 function formatTimestamp(date: Date): string {
-  return new Intl.DateTimeFormat('en-US', {
-    hour: 'numeric',
-    minute: '2-digit',
-    second: '2-digit',
+  return new Intl.DateTimeFormat("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    second: "2-digit",
     hour12: true,
   }).format(date);
 }
 
 function getToolIcon(toolKind?: string): string {
   switch (toolKind) {
-    case 'read':
-      return '📖';
-    case 'edit':
-      return '✏️';
-    case 'delete':
-      return '🗑️';
-    case 'move':
-      return '📦';
-    case 'search':
-      return '🔍';
-    case 'execute':
-      return '▶️';
-    case 'think':
-      return '💭';
-    case 'fetch':
-      return '🌐';
-    case 'switch_mode':
-      return '🔄';
+    case "read":
+      return "📖";
+    case "edit":
+      return "✏️";
+    case "delete":
+      return "🗑️";
+    case "move":
+      return "📦";
+    case "search":
+      return "🔍";
+    case "execute":
+      return "▶️";
+    case "think":
+      return "💭";
+    case "fetch":
+      return "🌐";
+    case "switch_mode":
+      return "🔄";
     default:
-      return '🔧';
+      return "🔧";
   }
 }
 
 function getStatusColor(status?: string): string {
   switch (status) {
-    case 'pending':
-      return '#9ca3af';
-    case 'in_progress':
-      return '#fbbf24';
-    case 'completed':
-      return '#22c55e';
-    case 'failed':
-      return '#ef4444';
+    case "pending":
+      return "#9ca3af";
+    case "in_progress":
+      return "#fbbf24";
+    case "completed":
+      return "#22c55e";
+    case "failed":
+      return "#ef4444";
     default:
-      return '#6b7280';
+      return "#6b7280";
   }
 }
 
 function GroupedTextItem({ item }: { item: GroupedTextMessage }) {
-  const isThought = item.messageType === 'thought';
+  const isThought = item.messageType === "thought";
 
   return (
     <View style={[stylesheet.card, isThought && stylesheet.thoughtCard]}>
       <Text style={[stylesheet.timestamp, isThought && stylesheet.thoughtTimestamp]}>
         {formatTimestamp(item.startTimestamp)}
       </Text>
-      {isThought && (
-        <Text style={stylesheet.thoughtLabel}>💭 Thinking</Text>
-      )}
-      <Text style={[stylesheet.text, isThought && stylesheet.thoughtText]}>
-        {item.text}
-      </Text>
+      {isThought && <Text style={stylesheet.thoughtLabel}>💭 Thinking</Text>}
+      <Text style={[stylesheet.text, isThought && stylesheet.thoughtText]}>{item.text}</Text>
     </View>
   );
 }
@@ -80,28 +81,20 @@ function MergedToolCallItem({ item }: { item: MergedToolCall }) {
 
   return (
     <View style={stylesheet.toolCard}>
-      <Pressable
-        onPress={() => setIsExpanded(!isExpanded)}
-        style={stylesheet.toolHeader}
-      >
+      <Pressable onPress={() => setIsExpanded(!isExpanded)} style={stylesheet.toolHeader}>
         <View style={stylesheet.toolHeaderLeft}>
-          <Text style={stylesheet.timestamp}>
-            {formatTimestamp(item.startTimestamp)}
-          </Text>
+          <Text style={stylesheet.timestamp}>{formatTimestamp(item.startTimestamp)}</Text>
           <View style={stylesheet.toolTitleRow}>
             <Text style={stylesheet.toolIcon}>{getToolIcon(item.toolKind)}</Text>
             <Text style={stylesheet.toolTitle}>{item.title}</Text>
             <View
-              style={[
-                stylesheet.statusBadge,
-                { backgroundColor: getStatusColor(item.status) },
-              ]}
+              style={[stylesheet.statusBadge, { backgroundColor: getStatusColor(item.status) }]}
             >
               <Text style={stylesheet.statusText}>{item.status}</Text>
             </View>
           </View>
         </View>
-        <Text style={stylesheet.expandIcon}>{isExpanded ? '▼' : '▶'}</Text>
+        <Text style={stylesheet.expandIcon}>{isExpanded ? "▼" : "▶"}</Text>
       </Pressable>
 
       {isExpanded && (
@@ -109,23 +102,17 @@ function MergedToolCallItem({ item }: { item: MergedToolCall }) {
           {item.input && (
             <View style={stylesheet.section}>
               <Text style={stylesheet.sectionTitle}>Input:</Text>
-              <Text style={stylesheet.code}>
-                {JSON.stringify(item.input, null, 2)}
-              </Text>
+              <Text style={stylesheet.code}>{JSON.stringify(item.input, null, 2)}</Text>
             </View>
           )}
           {item.output && (
             <View style={stylesheet.section}>
               <Text style={stylesheet.sectionTitle}>Output:</Text>
-              <Text style={stylesheet.code}>
-                {JSON.stringify(item.output, null, 2)}
-              </Text>
+              <Text style={stylesheet.code}>{JSON.stringify(item.output, null, 2)}</Text>
             </View>
           )}
           {!item.input && !item.output && (
-            <Text style={stylesheet.emptyText}>
-              No details available
-            </Text>
+            <Text style={stylesheet.emptyText}>No details available</Text>
           )}
         </View>
       )}
@@ -136,36 +123,26 @@ function MergedToolCallItem({ item }: { item: MergedToolCall }) {
 function PlanItem({ update, timestamp }: { update: SessionUpdate; timestamp: Date }) {
   const [isExpanded, setIsExpanded] = useState(true);
 
-  if (update.kind !== 'plan') {
+  if (update.kind !== "plan") {
     return null;
   }
 
   return (
     <View style={stylesheet.planCard}>
-      <Pressable
-        onPress={() => setIsExpanded(!isExpanded)}
-        style={stylesheet.planHeader}
-      >
+      <Pressable onPress={() => setIsExpanded(!isExpanded)} style={stylesheet.planHeader}>
         <View style={stylesheet.planHeaderLeft}>
           <Text style={stylesheet.timestamp}>{formatTimestamp(timestamp)}</Text>
-          <Text style={stylesheet.planTitle}>
-            📋 Tasks ({update.entries.length})
-          </Text>
+          <Text style={stylesheet.planTitle}>📋 Tasks ({update.entries.length})</Text>
         </View>
-        <Text style={stylesheet.expandIcon}>{isExpanded ? '▼' : '▶'}</Text>
+        <Text style={stylesheet.expandIcon}>{isExpanded ? "▼" : "▶"}</Text>
       </Pressable>
 
       {isExpanded && (
         <View style={stylesheet.planContent}>
           {update.entries.map((entry, idx) => (
             <View key={idx} style={stylesheet.planEntry}>
-              <Text
-                style={[
-                  stylesheet.planEntryStatus,
-                  { color: getStatusColor(entry.status) },
-                ]}
-              >
-                {entry.status === 'completed' ? '✓' : entry.status === 'in_progress' ? '⏳' : '○'}
+              <Text style={[stylesheet.planEntryStatus, { color: getStatusColor(entry.status) }]}>
+                {entry.status === "completed" ? "✓" : entry.status === "in_progress" ? "⏳" : "○"}
               </Text>
               <Text style={stylesheet.planEntryText}>{entry.content}</Text>
             </View>
@@ -181,10 +158,7 @@ function UnknownActivityItem({ update, timestamp }: { update: SessionUpdate; tim
 
   return (
     <View style={stylesheet.unknownCard}>
-      <Pressable
-        onPress={() => setShowDrawer(!showDrawer)}
-        style={stylesheet.unknownHeader}
-      >
+      <Pressable onPress={() => setShowDrawer(!showDrawer)} style={stylesheet.unknownHeader}>
         <Text style={stylesheet.timestamp}>{formatTimestamp(timestamp)}</Text>
         <View style={stylesheet.unknownBadge}>
           <Text style={stylesheet.unknownBadgeText}>{update.kind}</Text>
@@ -193,9 +167,7 @@ function UnknownActivityItem({ update, timestamp }: { update: SessionUpdate; tim
 
       {showDrawer && (
         <View style={stylesheet.drawerContent}>
-          <Text style={stylesheet.code}>
-            {JSON.stringify(update, null, 2)}
-          </Text>
+          <Text style={stylesheet.code}>{JSON.stringify(update, null, 2)}</Text>
         </View>
       )}
     </View>
@@ -204,12 +176,12 @@ function UnknownActivityItem({ update, timestamp }: { update: SessionUpdate; tim
 
 export function AgentActivityItem({ item }: AgentActivityItemProps) {
   // Grouped text message
-  if ('kind' in item && item.kind === 'grouped_text') {
+  if ("kind" in item && item.kind === "grouped_text") {
     return <GroupedTextItem item={item} />;
   }
 
   // Merged tool call
-  if ('kind' in item && item.kind === 'merged_tool_call') {
+  if ("kind" in item && item.kind === "merged_tool_call") {
     return <MergedToolCallItem item={item} />;
   }
 
@@ -218,12 +190,12 @@ export function AgentActivityItem({ item }: AgentActivityItemProps) {
   const update = activity.update;
 
   // Tasks
-  if (update.kind === 'plan') {
+  if (update.kind === "plan") {
     return <PlanItem update={update} timestamp={activity.timestamp} />;
   }
 
   // Available commands update
-  if (update.kind === 'available_commands_update') {
+  if (update.kind === "available_commands_update") {
     return (
       <View style={stylesheet.card}>
         <Text style={stylesheet.timestamp}>{formatTimestamp(activity.timestamp)}</Text>
@@ -235,13 +207,11 @@ export function AgentActivityItem({ item }: AgentActivityItemProps) {
   }
 
   // Current mode update
-  if (update.kind === 'current_mode_update') {
+  if (update.kind === "current_mode_update") {
     return (
       <View style={stylesheet.card}>
         <Text style={stylesheet.timestamp}>{formatTimestamp(activity.timestamp)}</Text>
-        <Text style={stylesheet.infoText}>
-          Mode changed to: {update.currentModeId}
-        </Text>
+        <Text style={stylesheet.infoText}>Mode changed to: {update.currentModeId}</Text>
       </View>
     );
   }
@@ -284,26 +254,26 @@ const stylesheet = StyleSheet.create((theme) => ({
   },
   thoughtText: {
     color: theme.colors.foregroundMuted,
-    fontStyle: 'italic',
+    fontStyle: "italic",
   },
   toolCard: {
     backgroundColor: theme.colors.surface2,
     borderRadius: theme.borderRadius.lg,
     marginBottom: theme.spacing[2],
-    overflow: 'hidden',
+    overflow: "hidden",
   },
   toolHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
     padding: theme.spacing[3],
   },
   toolHeaderLeft: {
     flex: 1,
   },
   toolTitleRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     gap: theme.spacing[2],
     marginTop: theme.spacing[1],
   },
@@ -355,18 +325,18 @@ const stylesheet = StyleSheet.create((theme) => ({
   emptyText: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.sm,
-    fontStyle: 'italic',
+    fontStyle: "italic",
   },
   planCard: {
     backgroundColor: theme.colors.surface2,
     borderRadius: theme.borderRadius.lg,
     marginBottom: theme.spacing[2],
-    overflow: 'hidden',
+    overflow: "hidden",
   },
   planHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
     padding: theme.spacing[3],
   },
   planHeaderLeft: {
@@ -384,8 +354,8 @@ const stylesheet = StyleSheet.create((theme) => ({
     padding: theme.spacing[3],
   },
   planEntry: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
+    flexDirection: "row",
+    alignItems: "flex-start",
     gap: theme.spacing[2],
     marginBottom: theme.spacing[2],
   },
@@ -406,7 +376,7 @@ const stylesheet = StyleSheet.create((theme) => ({
     backgroundColor: theme.colors.surface2,
     borderRadius: theme.borderRadius.lg,
     marginBottom: theme.spacing[2],
-    overflow: 'hidden',
+    overflow: "hidden",
   },
   unknownHeader: {
     padding: theme.spacing[3],
@@ -417,7 +387,7 @@ const stylesheet = StyleSheet.create((theme) => ({
     paddingVertical: theme.spacing[2],
     borderRadius: theme.borderRadius.md,
     marginTop: theme.spacing[2],
-    alignSelf: 'flex-start',
+    alignSelf: "flex-start",
   },
   unknownBadgeText: {
     color: theme.colors.foreground,

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

@@ -1,13 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { ReactElement, ReactNode } from "react";
-import {
-  View,
-  Text,
-  Pressable,
-  TextInput,
-  ActivityIndicator,
-  Platform,
-} from "react-native";
+import { View, Text, Pressable, TextInput, ActivityIndicator, Platform } from "react-native";
 import type { StyleProp, ViewStyle, TextProps } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import {
@@ -17,7 +10,18 @@ import {
   BottomSheetBackgroundProps,
 } from "@gorhom/bottom-sheet";
 import Animated from "react-native-reanimated";
-import { ChevronDown, ChevronRight, Pencil, Check, X, Bot, Brain, Shield } from "lucide-react-native";
+import {
+  ChevronDown,
+  ChevronRight,
+  Pencil,
+  Check,
+  X,
+  Bot,
+  Brain,
+  ShieldCheck,
+  ShieldAlert,
+  ShieldOff,
+} from "lucide-react-native";
 import { theme as defaultTheme } from "@/styles/theme";
 import type {
   AgentMode,
@@ -25,7 +29,23 @@ import type {
   AgentProvider,
 } from "@server/server/agent/agent-sdk-types";
 import type { AgentProviderDefinition } from "@server/server/agent/provider-manifest";
+import { getModeVisuals, type AgentModeIcon } from "@server/server/agent/provider-manifest";
 import { Combobox, ComboboxItem, ComboboxEmpty } from "@/components/ui/combobox";
+import { baseColors } from "@/styles/theme";
+
+const MODE_ICON_MAP: Record<AgentModeIcon, typeof ShieldCheck> = {
+  ShieldCheck,
+  ShieldAlert,
+  ShieldOff,
+};
+
+const MODE_COLOR_MAP: Record<string, string> = {
+  default: baseColors.blue[500],
+  safe: baseColors.green[500],
+  moderate: baseColors.amber[500],
+  dangerous: baseColors.red[500],
+  readonly: baseColors.purple[500],
+};
 
 type DropdownTriggerRenderProps = {
   label: string;
@@ -91,19 +111,14 @@ export function DropdownField({
         testID={testID}
         style={[styles.dropdownControl, disabled && styles.dropdownControlDisabled]}
       >
-        <Text
-          style={value ? styles.dropdownValue : styles.dropdownPlaceholder}
-          numberOfLines={1}
-        >
+        <Text style={value ? styles.dropdownValue : styles.dropdownPlaceholder} numberOfLines={1}>
           {value || placeholder}
         </Text>
         <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}
-      {!errorMessage && helperText ? (
-        <Text style={styles.helperText}>{helperText}</Text>
-      ) : null}
+      {!errorMessage && helperText ? <Text style={styles.helperText}>{helperText}</Text> : null}
     </View>
   );
 }
@@ -160,7 +175,7 @@ export function SelectField({
         onPress();
       }
     },
-    [getWebKey, onPress, preventWebDefault]
+    [getWebKey, onPress, preventWebDefault],
   );
 
   const normalizedValue = (value ?? "").trim();
@@ -168,9 +183,7 @@ export function SelectField({
   const hasConcreteValue =
     normalizedValue.length > 0 &&
     (normalizedPlaceholder.length === 0 || normalizedValue !== normalizedPlaceholder);
-  const displayText = hasConcreteValue
-    ? normalizedValue
-    : (normalizedPlaceholder || "Select...");
+  const displayText = hasConcreteValue ? normalizedValue : normalizedPlaceholder || "Select...";
 
   return (
     <View style={styles.selectFieldContainer}>
@@ -215,12 +228,7 @@ interface DropdownSheetProps {
 }
 
 function DropdownSheetBackground({ style }: BottomSheetBackgroundProps) {
-  return (
-    <Animated.View
-      pointerEvents="none"
-      style={[style, styles.bottomSheetBackground]}
-    />
-  );
+  return <Animated.View pointerEvents="none" style={[style, styles.bottomSheetBackground]} />;
 }
 
 export function DropdownSheet({
@@ -251,19 +259,14 @@ export function DropdownSheet({
         onClose();
       }
     },
-    [onClose]
+    [onClose],
   );
 
   const renderBackdrop = useCallback(
     (props: React.ComponentProps<typeof BottomSheetBackdrop>) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-        opacity={0.45}
-      />
+      <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} opacity={0.45} />
     ),
-    []
+    [],
   );
 
   return (
@@ -434,16 +437,14 @@ export function FormSelectTrigger({
         onPress();
       }
     },
-    [getWebKey, onPress, preventWebDefault]
+    [getWebKey, onPress, preventWebDefault],
   );
   const normalizedValue = (value ?? "").trim();
   const normalizedPlaceholder = (placeholder ?? "").trim();
   const hasConcreteValue =
     normalizedValue.length > 0 &&
     (normalizedPlaceholder.length === 0 || normalizedValue !== normalizedPlaceholder);
-  const displayText = hasConcreteValue
-    ? normalizedValue
-    : (normalizedPlaceholder || "Select...");
+  const displayText = hasConcreteValue ? normalizedValue : normalizedPlaceholder || "Select...";
 
   return (
     <Pressable
@@ -465,9 +466,7 @@ export function FormSelectTrigger({
     >
       {icon ? <View style={styles.compactSelectLeading}>{icon}</View> : null}
       <View style={styles.compactSelectValueContainer}>
-        {showLabel ? (
-          <Text style={styles.compactSelectLabel}>{label}</Text>
-        ) : null}
+        {showLabel ? <Text style={styles.compactSelectLabel}>{label}</Text> : null}
         {isLoading ? (
           <ActivityIndicator size="small" color={defaultTheme.colors.foregroundMuted} />
         ) : (
@@ -524,7 +523,7 @@ export function AgentConfigRow({
         id: def.id,
         label: def.label,
       })),
-    [providerDefinitions]
+    [providerDefinitions],
   );
 
   const modeSelectOptions: ComboSelectOption[] = useMemo(() => {
@@ -538,16 +537,10 @@ export function AgentConfigRow({
   }, [modeOptions]);
 
   const modelSelectOptions: ComboSelectOption[] = useMemo(() => {
-    const opts: ComboSelectOption[] = [
-      { id: "", label: "Auto" },
-    ];
-    for (const model of models) {
-      opts.push({
-        id: model.id,
-        label: model.label,
-      });
-    }
-    return opts;
+    return models.map((model) => ({
+      id: model.id,
+      label: model.label,
+    }));
   }, [models]);
 
   const thinkingSelectOptions: ComboSelectOption[] = useMemo(
@@ -556,13 +549,17 @@ export function AgentConfigRow({
         id: option.id,
         label: option.label,
       })),
-    [thinkingOptions]
+    [thinkingOptions],
   );
 
   const effectiveSelectedMode = selectedMode || (modeOptions.length > 0 ? modeOptions[0]?.id : "");
   const effectiveSelectedThinkingOption =
     selectedThinkingOptionId || thinkingSelectOptions[0]?.id || "";
 
+  const selectedModeVisuals = getModeVisuals(selectedProvider, effectiveSelectedMode);
+  const ModeIcon = MODE_ICON_MAP[selectedModeVisuals?.icon ?? "ShieldCheck"];
+  const modeIconColor = MODE_COLOR_MAP[selectedModeVisuals?.colorTier ?? "safe"];
+
   return (
     <View style={styles.agentConfigRow}>
       <View style={styles.agentConfigColumn}>
@@ -585,11 +582,13 @@ export function AgentConfigRow({
           title="Select model"
           value={selectedModel}
           options={modelSelectOptions}
-          placeholder="Auto"
+          placeholder={isModelLoading ? "Loading..." : "Select model"}
           disabled={disabled}
           isLoading={isModelLoading}
           onSelect={onSelectModel}
-          icon={<Brain size={defaultTheme.iconSize.md} color={defaultTheme.colors.foregroundMuted} />}
+          icon={
+            <Brain size={defaultTheme.iconSize.md} color={defaultTheme.colors.foregroundMuted} />
+          }
           showLabel={false}
           testID="draft-model-select"
         />
@@ -603,7 +602,7 @@ export function AgentConfigRow({
           placeholder="Default"
           disabled={disabled || modeOptions.length === 0}
           onSelect={onSelectMode}
-          icon={<Shield size={defaultTheme.iconSize.md} color={defaultTheme.colors.foregroundMuted} />}
+          icon={<ModeIcon size={defaultTheme.iconSize.md} color={modeIconColor} />}
           showLabel={false}
           testID="draft-mode-select"
         />
@@ -618,7 +617,9 @@ export function AgentConfigRow({
             placeholder="Select..."
             disabled={disabled}
             onSelect={onSelectThinkingOption}
-            icon={<Brain size={defaultTheme.iconSize.md} color={defaultTheme.colors.foregroundMuted} />}
+            icon={
+              <Brain size={defaultTheme.iconSize.md} color={defaultTheme.colors.foregroundMuted} />
+            }
             showLabel={false}
           />
         </View>
@@ -644,7 +645,7 @@ export function AssistantDropdown({
   const anchorRef = useRef<View>(null);
 
   const selectedDefinition = providerDefinitions.find(
-    (definition) => definition.id === selectedProvider
+    (definition) => definition.id === selectedProvider,
   );
 
   const options = useMemo(
@@ -653,7 +654,7 @@ export function AssistantDropdown({
         id: def.id,
         label: def.label,
       })),
-    [providerDefinitions]
+    [providerDefinitions],
   );
 
   const handleOpen = useCallback(() => setIsOpen(true), []);
@@ -700,9 +701,9 @@ export function PermissionsDropdown({
 
   const hasOptions = modeOptions.length > 0;
   const selectedModeLabel = hasOptions
-    ? modeOptions.find((mode) => mode.id === selectedMode)?.label ??
+    ? (modeOptions.find((mode) => mode.id === selectedMode)?.label ??
       modeOptions[0]?.label ??
-      "Default"
+      "Default")
     : "Automatic";
 
   const options = useMemo(
@@ -712,7 +713,7 @@ export function PermissionsDropdown({
         label: mode.label,
         description: mode.description,
       })),
-    [modeOptions]
+    [modeOptions],
   );
 
   const handleOpen = useCallback(() => {
@@ -731,9 +732,7 @@ export function PermissionsDropdown({
         onPress={handleOpen}
         disabled={disabled || !hasOptions}
         helperText={
-          hasOptions
-            ? undefined
-            : "This assistant does not expose selectable permissions."
+          hasOptions ? undefined : "This assistant does not expose selectable permissions."
         }
         controlRef={anchorRef}
       />
@@ -774,10 +773,8 @@ export function ModelDropdown({
   const [isOpen, setIsOpen] = useState(false);
   const anchorRef = useRef<View>(null);
 
-  const selectedLabel = selectedModel
-    ? models.find((model) => model.id === selectedModel)?.label ?? selectedModel
-    : "Automatic";
-  const placeholder = isLoading && models.length === 0 ? "Loading..." : "Automatic";
+  const selectedLabel = models.find((model) => model.id === selectedModel)?.label ?? selectedModel ?? "Select model";
+  const placeholder = isLoading && models.length === 0 ? "Loading..." : "Select model";
   const helperText = error
     ? undefined
     : isLoading
@@ -787,34 +784,20 @@ export function ModelDropdown({
         : undefined;
 
   const options = useMemo(() => {
-    const opts: ComboSelectOption[] = [
-      {
-        id: "",
-        label: "Automatic (provider default)",
-        description: "Let the assistant pick the recommended model.",
-      },
-    ];
-    for (const model of models) {
-      opts.push({
-        id: model.id,
-        label: model.label,
-        description: model.description,
-      });
-    }
-    return opts;
+    return models.map((model) => ({
+      id: model.id,
+      label: model.label,
+      description: model.description,
+    }));
   }, [models]);
 
   const handleOpen = useCallback(() => setIsOpen(true), []);
   const handleOpenChange = useCallback((open: boolean) => setIsOpen(open), []);
   const handleSelect = useCallback(
     (id: string) => {
-      if (id === "") {
-        onClear();
-      } else {
-        onSelect(id);
-      }
+      onSelect(id);
     },
-    [onClear, onSelect]
+    [onSelect],
   );
 
   return (
@@ -862,7 +845,7 @@ export function WorkingDirectoryDropdown({
 
   const options = useMemo(
     () => suggestedPaths.map((path) => ({ id: path, label: path })),
-    [suggestedPaths]
+    [suggestedPaths],
   );
 
   const handleOpen = useCallback(() => setIsOpen(true), []);
@@ -937,9 +920,7 @@ export function ToggleRow({
       </View>
       <View style={styles.toggleTextContainer}>
         <Text style={styles.toggleLabel}>{label}</Text>
-        {description ? (
-          <Text style={styles.helperText}>{description}</Text>
-        ) : null}
+        {description ? <Text style={styles.helperText}>{description}</Text> : null}
       </View>
     </Pressable>
   );
@@ -1032,9 +1013,7 @@ export function GitOptionsSection({
     <View style={styles.gitOptionsContainer}>
       <Pressable
         testID="worktree-create-toggle"
-        onPress={() =>
-          onWorktreeModeChange(isCreateMode ? "none" : "create")
-        }
+        onPress={() => onWorktreeModeChange(isCreateMode ? "none" : "create")}
         disabled={isLoading}
         style={[styles.worktreeToggle, isLoading && styles.worktreeToggleDisabled]}
       >
@@ -1057,9 +1036,7 @@ export function GitOptionsSection({
 
       <Pressable
         testID="worktree-attach-toggle"
-        onPress={() =>
-          onWorktreeModeChange(isAttachMode ? "none" : "attach")
-        }
+        onPress={() => onWorktreeModeChange(isAttachMode ? "none" : "attach")}
         disabled={isLoading}
         style={[styles.worktreeToggle, isLoading && styles.worktreeToggleDisabled]}
       >
@@ -1123,8 +1100,15 @@ export function GitOptionsSection({
                 placeholderTextColor={defaultTheme.colors.foregroundMuted}
                 onSubmitEditing={handleConfirmEdit}
               />
-              <Pressable onPress={handleConfirmEdit} hitSlop={8} style={styles.baseBranchIconButton}>
-                <Check size={defaultTheme.iconSize.md} color={defaultTheme.colors.palette.green[500]} />
+              <Pressable
+                onPress={handleConfirmEdit}
+                hitSlop={8}
+                style={styles.baseBranchIconButton}
+              >
+                <Check
+                  size={defaultTheme.iconSize.md}
+                  color={defaultTheme.colors.palette.green[500]}
+                />
               </Pressable>
               <Pressable onPress={handleCancelEdit} hitSlop={8} style={styles.baseBranchIconButton}>
                 <X size={defaultTheme.iconSize.md} color={defaultTheme.colors.foregroundMuted} />
@@ -1139,17 +1123,11 @@ export function GitOptionsSection({
         </View>
       ) : null}
 
-      {baseBranchError ? (
-        <Text style={styles.errorText}>{baseBranchError}</Text>
-      ) : null}
+      {baseBranchError ? <Text style={styles.errorText}>{baseBranchError}</Text> : null}
 
-      {repoError ? (
-        <Text style={styles.errorText}>{repoError}</Text>
-      ) : null}
+      {repoError ? <Text style={styles.errorText}>{repoError}</Text> : null}
 
-      {gitValidationError ? (
-        <Text style={styles.errorText}>{gitValidationError}</Text>
-      ) : null}
+      {gitValidationError ? <Text style={styles.errorText}>{gitValidationError}</Text> : null}
     </View>
   );
 }

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

@@ -1,48 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

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

packages/app/src/components/agent-input-area.tsx

@@ -1,971 +0,0 @@
-import { View, Pressable, Text, ActivityIndicator, Platform } from 'react-native'
-import { useState, useEffect, useRef, useCallback } from 'react'
-import { StyleSheet, UnistylesRuntime, useUnistyles } from 'react-native-unistyles'
-import { ArrowUp, Square, Pencil, AudioLines } from 'lucide-react-native'
-import Animated from 'react-native-reanimated'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { useIsFocused } from '@react-navigation/native'
-import { FOOTER_HEIGHT, MAX_CONTENT_WIDTH } from '@/constants/layout'
-import { generateMessageId, type StreamItem } from '@/types/stream'
-import { AgentStatusBar, DraftAgentStatusBar, type DraftAgentStatusBarProps } from './agent-status-bar'
-import { useImageAttachmentPicker } from '@/hooks/use-image-attachment-picker'
-import { useSessionStore } from '@/stores/session-store'
-import { useDraftStore } from '@/stores/draft-store'
-import { buildDraftStoreKey } from '@/stores/draft-keys'
-import {
-  MessageInput,
-  type MessagePayload,
-  type ImageAttachment,
-  type MessageInputRef,
-} from './message-input'
-import { Theme } from '@/styles/theme'
-import type { DraftCommandConfig } from '@/hooks/use-agent-commands-query'
-import { encodeImages } from '@/utils/encode-images'
-import { focusWithRetries } from '@/utils/web-focus'
-import { useVoiceOptional } from '@/contexts/voice-context'
-import { useToast } from '@/contexts/toast-context'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { Shortcut } from '@/components/ui/shortcut'
-import { Autocomplete } from '@/components/ui/autocomplete'
-import { useAgentAutocomplete } from '@/hooks/use-agent-autocomplete'
-import { useHostRuntimeSession } from '@/runtime/host-runtime'
-import {
-  deleteAttachments,
-  persistAttachmentFromBlob,
-  persistAttachmentFromFileUri,
-} from '@/attachments/service'
-import { resolveStatusControlMode } from '@/components/agent-input-area.status-controls'
-import { shouldSkipDraftPersist } from '@/components/agent-input-area.draft-persist-guard'
-import { markScrollInvestigationRender } from '@/utils/scroll-jank-investigation'
-import { useKeyboardShiftStyle } from '@/hooks/use-keyboard-shift-style'
-import { useKeyboardActionHandler } from '@/hooks/use-keyboard-action-handler'
-import type { KeyboardActionDefinition } from '@/keyboard/keyboard-action-dispatcher'
-
-type QueuedMessage = {
-  id: string
-  text: string
-  images?: ImageAttachment[]
-}
-
-interface AgentInputAreaProps {
-  agentId: string
-  serverId: string
-  draftId?: string
-  onSubmitMessage?: (payload: MessagePayload) => Promise<void>
-  /** Externally controlled loading state. When true, disables the submit button. */
-  isSubmitLoading?: boolean
-  /** When true, blurs the input immediately when submitting. */
-  blurOnSubmit?: boolean
-  value?: string
-  onChangeText?: (text: string) => void
-  /** When true, auto-focuses the text input on web. */
-  autoFocus?: boolean
-  /** Callback to expose the addImages function to parent components */
-  onAddImages?: (addImages: (images: ImageAttachment[]) => void) => void
-  /** Optional draft context for listing commands before an agent exists. */
-  commandDraftConfig?: DraftCommandConfig
-  /** Called when a message is about to be sent (any path: keyboard, dictation, queued). */
-  onMessageSent?: () => void
-  onComposerHeightChange?: (height: number) => void
-  onAttentionInputFocus?: () => void
-  onAttentionPromptSend?: () => void
-  /** Controlled status controls rendered in input area (draft flows). */
-  statusControls?: DraftAgentStatusBarProps
-}
-
-const EMPTY_ARRAY: readonly QueuedMessage[] = []
-const DESKTOP_MESSAGE_PLACEHOLDER = 'Message the agent, tag @files, or use /commands and /skills'
-const MOBILE_MESSAGE_PLACEHOLDER = 'Message, @files, /commands'
-
-export function AgentInputArea({
-  agentId,
-  serverId,
-  draftId,
-  onSubmitMessage,
-  isSubmitLoading = false,
-  blurOnSubmit = false,
-  value,
-  onChangeText,
-  autoFocus = false,
-  onAddImages,
-  commandDraftConfig,
-  onMessageSent,
-  onComposerHeightChange,
-  onAttentionInputFocus,
-  onAttentionPromptSend,
-  statusControls,
-}: AgentInputAreaProps) {
-  markScrollInvestigationRender(`AgentInputArea:${serverId}:${agentId}`)
-  const { theme } = useUnistyles()
-  const insets = useSafeAreaInsets()
-  const isScreenFocused = useIsFocused()
-
-  const { client, isConnected, snapshot } = useHostRuntimeSession(serverId)
-  const toast = useToast()
-  const voice = useVoiceOptional()
-  const isDictationReady =
-    isConnected &&
-    (snapshot?.agentDirectoryStatus === 'ready' ||
-      snapshot?.agentDirectoryStatus === 'revalidating' ||
-      snapshot?.agentDirectoryStatus === 'error_after_ready')
-
-  const agent = useSessionStore((state) => state.sessions[serverId]?.agents?.get(agentId))
-
-  const draftStoreKey = buildDraftStoreKey({ serverId, agentId, draftId })
-  const getDraftInput = useDraftStore((state) => state.getDraftInput)
-  const hydrateDraftInput = useDraftStore((state) => state.hydrateDraftInput)
-  const saveDraftInput = useDraftStore((state) => state.saveDraftInput)
-  const clearDraftInput = useDraftStore((state) => state.clearDraftInput)
-  const beginDraftGeneration = useDraftStore((state) => state.beginDraftGeneration)
-  const isDraftGenerationCurrent = useDraftStore((state) => state.isDraftGenerationCurrent)
-
-  const queuedMessagesRaw = useSessionStore((state) =>
-    state.sessions[serverId]?.queuedMessages?.get(agentId)
-  )
-  const queuedMessages = queuedMessagesRaw ?? EMPTY_ARRAY
-
-  const setQueuedMessages = useSessionStore((state) => state.setQueuedMessages)
-  const setAgentStreamTail = useSessionStore((state) => state.setAgentStreamTail)
-  const setAgentStreamHead = useSessionStore((state) => state.setAgentStreamHead)
-
-  const [internalInput, setInternalInput] = useState('')
-  const isDesktopWebBreakpoint =
-    Platform.OS === 'web' &&
-    UnistylesRuntime.breakpoint !== 'xs' &&
-    UnistylesRuntime.breakpoint !== 'sm'
-  const messagePlaceholder = isDesktopWebBreakpoint
-    ? DESKTOP_MESSAGE_PLACEHOLDER
-    : MOBILE_MESSAGE_PLACEHOLDER
-  const userInput = value ?? internalInput
-  const setUserInput = onChangeText ?? setInternalInput
-  const [cursorIndex, setCursorIndex] = useState(0)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [selectedImages, setSelectedImages] = useState<ImageAttachment[]>([])
-  const [isCancellingAgent, setIsCancellingAgent] = useState(false)
-  const [sendError, setSendError] = useState<string | null>(null)
-  const [isMessageInputFocused, setIsMessageInputFocused] = useState(false)
-  const messageInputRef = useRef<MessageInputRef>(null)
-  const draftGenerationRef = useRef(0)
-  const hydratedGenerationRef = useRef(0)
-  const keyboardHandlerIdRef = useRef(
-    `message-input:${serverId}:${agentId}:${Math.random().toString(36).slice(2)}`
-  )
-
-  const autocomplete = useAgentAutocomplete({
-    userInput,
-    cursorIndex,
-    setUserInput,
-    serverId,
-    agentId,
-    draftConfig: commandDraftConfig,
-    onAutocompleteApplied: () => {
-      messageInputRef.current?.focus()
-    },
-  })
-
-  // Clear send error when user edits the input
-  useEffect(() => {
-    if (sendError && userInput) {
-      setSendError(null)
-    }
-  }, [userInput, sendError])
-
-  useEffect(() => {
-    setCursorIndex((current) => Math.min(current, userInput.length))
-  }, [userInput.length])
-
-  const { pickImages } = useImageAttachmentPicker()
-  const agentIdRef = useRef(agentId)
-  const sendAgentMessageRef = useRef<
-    ((agentId: string, text: string, images?: ImageAttachment[]) => Promise<void>) | null
-  >(null)
-  const onSubmitMessageRef = useRef(onSubmitMessage)
-
-  // Expose addImages function to parent for drag-and-drop support
-  const addImages = useCallback((images: ImageAttachment[]) => {
-    setSelectedImages((prev) => [...prev, ...images])
-  }, [])
-
-  useEffect(() => {
-    onAddImages?.(addImages)
-  }, [addImages, onAddImages])
-
-  const submitMessage = useCallback(async (text: string, images?: ImageAttachment[]) => {
-    onMessageSent?.()
-    if (onSubmitMessageRef.current) {
-      await onSubmitMessageRef.current({ text, images })
-      return
-    }
-    if (!sendAgentMessageRef.current) {
-      throw new Error('Host is not connected')
-    }
-    await sendAgentMessageRef.current(agentIdRef.current, text, images)
-  }, [onMessageSent])
-
-  useEffect(() => {
-    agentIdRef.current = agentId
-  }, [agentId])
-
-  useEffect(() => {
-    sendAgentMessageRef.current = async (
-      agentId: string,
-      text: string,
-      images?: ImageAttachment[]
-    ) => {
-      if (!client) {
-        throw new Error('Host is not connected')
-      }
-
-      const clientMessageId = generateMessageId()
-      const userMessage: StreamItem = {
-        kind: 'user_message',
-        id: clientMessageId,
-        text,
-        timestamp: new Date(),
-        ...(images && images.length > 0 ? { images } : {}),
-      }
-
-      // Append to head if streaming (keeps the user message with the current
-      // turn so late text_deltas still find the existing assistant_message).
-      // Otherwise append to tail.
-      const currentHead = useSessionStore
-        .getState()
-        .sessions[serverId]?.agentStreamHead?.get(agentId)
-      if (currentHead && currentHead.length > 0) {
-        setAgentStreamHead(serverId, (prev) => {
-          const head = prev.get(agentId) || []
-          const updated = new Map(prev)
-          updated.set(agentId, [...head, userMessage])
-          return updated
-        })
-      } else {
-        setAgentStreamTail(serverId, (prev) => {
-          const currentStream = prev.get(agentId) || []
-          const updated = new Map(prev)
-          updated.set(agentId, [...currentStream, userMessage])
-          return updated
-        })
-      }
-
-      const imagesData = await encodeImages(images)
-      await client.sendAgentMessage(agentId, text, {
-        messageId: clientMessageId,
-        ...(imagesData && imagesData.length > 0 ? { images: imagesData } : {}),
-      })
-      onAttentionPromptSend?.()
-    }
-  }, [client, onAttentionPromptSend, serverId, setAgentStreamTail, setAgentStreamHead])
-
-  useEffect(() => {
-    onSubmitMessageRef.current = onSubmitMessage
-  }, [onSubmitMessage])
-
-  const isAgentRunning = agent?.status === 'running'
-  const agentUpdatedAtMs = agent?.updatedAt?.getTime() ?? 0
-
-  const prevIsAgentRunningRef = useRef(isAgentRunning)
-  const latestAgentUpdatedAtRef = useRef(agentUpdatedAtMs)
-  useEffect(() => {
-    const previousUpdatedAt = latestAgentUpdatedAtRef.current
-    if (agentUpdatedAtMs < previousUpdatedAt) {
-      if (isProcessing && !isAgentRunning) {
-        prevIsAgentRunningRef.current = false
-        setIsProcessing(false)
-      }
-      return
-    }
-
-    const wasRunning = prevIsAgentRunningRef.current
-    let shouldClearProcessing = false
-
-    if (isProcessing) {
-      const hasEnteredRunning = !wasRunning && isAgentRunning
-      const hasFreshRunningUpdateWhileRunning =
-        wasRunning && isAgentRunning && agentUpdatedAtMs > previousUpdatedAt
-      const hasStoppedRunning = wasRunning && !isAgentRunning
-
-      shouldClearProcessing =
-        hasEnteredRunning || hasFreshRunningUpdateWhileRunning || hasStoppedRunning
-    }
-
-    prevIsAgentRunningRef.current = isAgentRunning
-    latestAgentUpdatedAtRef.current = agentUpdatedAtMs
-
-    if (shouldClearProcessing) {
-      setIsProcessing(false)
-    }
-  }, [agentUpdatedAtMs, isAgentRunning, isProcessing])
-
-  const updateQueue = useCallback(
-    (updater: (current: QueuedMessage[]) => QueuedMessage[]) => {
-      setQueuedMessages(serverId, (prev: Map<string, QueuedMessage[]>) => {
-        const next = new Map(prev)
-        next.set(agentId, updater(prev.get(agentId) ?? []))
-        return next
-      })
-    },
-    [agentId, serverId, setQueuedMessages]
-  )
-
-  function queueMessage(message: string, imageAttachments?: ImageAttachment[]) {
-    const trimmedMessage = message.trim()
-    if (!trimmedMessage && !imageAttachments?.length) return
-
-    const newItem = {
-      id: generateMessageId(),
-      text: trimmedMessage,
-      images: imageAttachments,
-    }
-
-    setQueuedMessages(serverId, (prev: Map<string, QueuedMessage[]>) => {
-      const next = new Map(prev)
-      next.set(agentId, [...(prev.get(agentId) ?? []), newItem])
-      return next
-    })
-
-    const isControlled = value !== undefined
-    if (!isControlled) {
-      setUserInput('')
-    }
-    setSelectedImages([])
-  }
-
-  async function sendMessageWithContent(
-    message: string,
-    imageAttachments?: ImageAttachment[],
-    forceSend?: boolean
-  ) {
-    const trimmedMessage = message.trim()
-    if (!trimmedMessage && !imageAttachments?.length) return
-    // When the parent controls submission (e.g. draft agent creation), let it
-    // decide what to do even if the socket is currently disconnected (so we
-    // don't no-op and lose deterministic error handling in the UI/tests).
-    if (!sendAgentMessageRef.current && !onSubmitMessageRef.current) return
-
-    if (agent?.status === 'running' && !forceSend) {
-      queueMessage(trimmedMessage, imageAttachments)
-      return
-    }
-
-    // Clear input optimistically before awaiting server ack.
-    // Save values so we can restore on error.
-    const savedImages = imageAttachments
-    if (!onSubmitMessageRef.current) {
-      if (value !== undefined) {
-        onChangeText?.('')
-      } else {
-        setUserInput('')
-      }
-    }
-    setSelectedImages([])
-    setSendError(null)
-    setIsProcessing(true)
-
-    try {
-      await submitMessage(trimmedMessage, imageAttachments)
-      clearDraftInput({ draftKey: draftStoreKey, lifecycle: 'sent' })
-    } catch (error) {
-      console.error('[AgentInput] Failed to send message:', error)
-      // Restore input so the user never loses their message
-      if (!onSubmitMessageRef.current) {
-        if (value !== undefined) {
-          onChangeText?.(trimmedMessage)
-        } else {
-          setUserInput(trimmedMessage)
-        }
-      }
-      if (savedImages) {
-        setSelectedImages(savedImages)
-      }
-      setSendError(error instanceof Error ? error.message : 'Failed to send message')
-      setIsProcessing(false)
-    }
-  }
-
-  function handleSubmit(payload: MessagePayload) {
-    if (blurOnSubmit) {
-      messageInputRef.current?.blur()
-    }
-    void sendMessageWithContent(payload.text, payload.images, payload.forceSend)
-  }
-
-  async function handlePickImage() {
-    const result = await pickImages()
-    if (!result?.length) {
-      return
-    }
-
-    const newImages = await Promise.all(
-      result.map(async (pickedImage) => {
-        if (pickedImage.source.kind === 'blob') {
-          return await persistAttachmentFromBlob({
-            blob: pickedImage.source.blob,
-            mimeType: pickedImage.mimeType || 'image/jpeg',
-            fileName: pickedImage.fileName ?? null,
-          })
-        }
-
-        return await persistAttachmentFromFileUri({
-          uri: pickedImage.source.uri,
-          mimeType: pickedImage.mimeType || 'image/jpeg',
-          fileName: pickedImage.fileName ?? null,
-        })
-      })
-    )
-    setSelectedImages((prev) => [...prev, ...newImages])
-  }
-
-  function handleRemoveImage(index: number) {
-    setSelectedImages((prev) => {
-      const removed = prev[index]
-      if (removed) {
-        void deleteAttachments([removed])
-      }
-      return prev.filter((_, i) => i !== index)
-    })
-  }
-
-  useEffect(() => {
-    if (!isAgentRunning || !isConnected) {
-      setIsCancellingAgent(false)
-    }
-  }, [isAgentRunning, isConnected])
-
-  // Hydrate draft only when switching agents (uncontrolled mode only)
-  const isControlled = value !== undefined
-  useEffect(() => {
-    // Skip draft hydration for controlled inputs - parent manages state
-    if (isControlled) {
-      return
-    }
-    const generation = beginDraftGeneration(draftStoreKey)
-    draftGenerationRef.current = generation
-    hydratedGenerationRef.current = 0
-    setUserInput('')
-    setSelectedImages([])
-    let cancelled = false
-
-    void (async () => {
-      const draft = await hydrateDraftInput(draftStoreKey)
-      if (cancelled) {
-        return
-      }
-      if (!isDraftGenerationCurrent({ draftKey: draftStoreKey, generation })) {
-        return
-      }
-      if (!draft) {
-        hydratedGenerationRef.current = generation
-        return
-      }
-
-      setUserInput(draft.text)
-      setSelectedImages(draft.images)
-      hydratedGenerationRef.current = generation
-    })()
-
-    return () => {
-      cancelled = true
-    }
-  }, [
-    beginDraftGeneration,
-    draftStoreKey,
-    hydrateDraftInput,
-    isControlled,
-    isDraftGenerationCurrent,
-    setUserInput,
-  ])
-
-  // Persist drafts into the shared session store with change detection to avoid redundant work
-  useEffect(() => {
-    const currentGeneration = draftGenerationRef.current
-    const isCurrentGeneration =
-      currentGeneration > 0
-        ? isDraftGenerationCurrent({ draftKey: draftStoreKey, generation: currentGeneration })
-        : true
-    if (
-      shouldSkipDraftPersist({
-        isControlled,
-        currentGeneration,
-        hydratedGeneration: hydratedGenerationRef.current,
-        isCurrentGeneration,
-      })
-    ) {
-      return
-    }
-
-    const existing = getDraftInput(draftStoreKey)
-    const isSameText = existing?.text === userInput
-    const existingImages: ImageAttachment[] = existing?.images ?? []
-    const isSameImages =
-      existingImages.length === selectedImages.length &&
-      existingImages.every((img, idx) => {
-        return (
-          img.id === selectedImages[idx]?.id &&
-          img.mimeType === selectedImages[idx]?.mimeType &&
-          img.storageType === selectedImages[idx]?.storageType &&
-          img.storageKey === selectedImages[idx]?.storageKey
-        )
-      })
-
-    if (isSameText && isSameImages) {
-      return
-    }
-
-    const hasContent = userInput.trim().length > 0 || selectedImages.length > 0
-    if (!hasContent) {
-      if (existing) {
-        clearDraftInput({ draftKey: draftStoreKey, lifecycle: 'abandoned' })
-      }
-      return
-    }
-
-    saveDraftInput({
-      draftKey: draftStoreKey,
-      draft: { text: userInput, images: selectedImages },
-    })
-  }, [
-    clearDraftInput,
-    draftStoreKey,
-    getDraftInput,
-    isControlled,
-    isDraftGenerationCurrent,
-    saveDraftInput,
-    selectedImages,
-    userInput,
-  ])
-
-  const handleKeyboardAction = useCallback((action: KeyboardActionDefinition): boolean => {
-    if (!isScreenFocused) {
-      return false
-    }
-
-    switch (action.id) {
-      case 'message-input.focus':
-        if (Platform.OS !== 'web') {
-          messageInputRef.current?.focus()
-          return true
-        }
-
-        focusWithRetries({
-          focus: () => messageInputRef.current?.focus(),
-          isFocused: () => {
-            const el = messageInputRef.current?.getNativeElement?.() ?? null
-            const active = typeof document !== 'undefined' ? document.activeElement : null
-            return Boolean(el) && active === el
-          },
-        })
-        return true
-      case 'message-input.dictation-toggle':
-        messageInputRef.current?.runKeyboardAction('dictation-toggle')
-        return true
-      case 'message-input.dictation-cancel':
-        messageInputRef.current?.runKeyboardAction('dictation-cancel')
-        return true
-      case 'message-input.voice-toggle':
-        messageInputRef.current?.runKeyboardAction('voice-toggle')
-        return true
-      case 'message-input.voice-mute-toggle':
-        messageInputRef.current?.runKeyboardAction('voice-mute-toggle')
-        return true
-      default:
-        return false
-    }
-  }, [isScreenFocused])
-
-  useKeyboardActionHandler({
-    handlerId: keyboardHandlerIdRef.current,
-    actions: [
-      'message-input.focus',
-      'message-input.dictation-toggle',
-      'message-input.dictation-cancel',
-      'message-input.voice-toggle',
-      'message-input.voice-mute-toggle',
-    ],
-    enabled: isScreenFocused,
-    priority: isMessageInputFocused ? 200 : 100,
-    isActive: () => isScreenFocused,
-    handle: handleKeyboardAction,
-  })
-
-  const { style: keyboardAnimatedStyle } = useKeyboardShiftStyle({
-    mode: 'translate',
-  })
-
-  function handleCancelAgent() {
-    if (!agent || agent.status !== 'running' || isCancellingAgent) {
-      return
-    }
-    if (!isConnected || !client) {
-      return
-    }
-    setIsCancellingAgent(true)
-    void client.cancelAgent(agentIdRef.current)
-    messageInputRef.current?.focus()
-  }
-
-  const isVoiceModeForAgent = voice?.isVoiceModeForAgent(serverId, agentId) ?? false
-
-  const handleToggleRealtimeVoice = useCallback(() => {
-    if (!voice || !isConnected || !agent) {
-      return
-    }
-    if (voice.isVoiceSwitching) {
-      return
-    }
-    if (voice.isVoiceModeForAgent(serverId, agentId)) {
-      return
-    }
-    void voice.startVoice(serverId, agentId).catch((error) => {
-      console.error('[AgentInputArea] Failed to start voice mode', error)
-      const message =
-        error instanceof Error ? error.message : typeof error === 'string' ? error : null
-      if (message && message.trim().length > 0) {
-        toast.error(message)
-      }
-    })
-  }, [agent, agentId, isConnected, serverId, toast, voice])
-
-  function handleEditQueuedMessage(id: string) {
-    const item = queuedMessages.find((q) => q.id === id)
-    if (!item) return
-
-    updateQueue((current) => current.filter((q) => q.id !== id))
-    setUserInput(item.text)
-    setSelectedImages(item.images ?? [])
-  }
-
-  async function handleSendQueuedNow(id: string) {
-    const item = queuedMessages.find((q) => q.id === id)
-    if (!item) return
-    if (!sendAgentMessageRef.current && !onSubmitMessageRef.current) return
-
-    updateQueue((current) => current.filter((q) => q.id !== id))
-
-    // Reuse the regular send path; server-side send atomically interrupts any active run.
-    try {
-      await submitMessage(item.text, item.images)
-    } catch (error) {
-      updateQueue((current) => [item, ...current])
-      setSendError(error instanceof Error ? error.message : 'Failed to send message')
-    }
-  }
-
-  const handleQueue = useCallback((payload: MessagePayload) => {
-    queueMessage(payload.text, payload.images)
-  }, [])
-
-  const hasSendableContent = userInput.trim().length > 0 || selectedImages.length > 0
-
-  // Handle keyboard navigation for command autocomplete and stop action.
-  const handleCommandKeyPress = useCallback(
-    (event: { key: string; preventDefault: () => void }) => {
-      if (
-        event.key === 'Escape' &&
-        isAgentRunning &&
-        !hasSendableContent &&
-        !isCancellingAgent &&
-        isConnected
-      ) {
-        event.preventDefault()
-        handleCancelAgent()
-        return true
-      }
-
-      return autocomplete.onKeyPress(event)
-    },
-    [
-      autocomplete,
-      hasSendableContent,
-      isAgentRunning,
-      isCancellingAgent,
-      isConnected,
-      handleCancelAgent,
-    ]
-  )
-
-  const cancelButton =
-    isAgentRunning && !hasSendableContent && !isProcessing ? (
-      <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
-        <TooltipTrigger
-          onPress={handleCancelAgent}
-          disabled={!isConnected || isCancellingAgent}
-          accessibilityLabel={isCancellingAgent ? 'Canceling agent' : 'Stop agent'}
-          accessibilityRole="button"
-          style={[
-            styles.cancelButton as any,
-            (!isConnected || isCancellingAgent ? styles.buttonDisabled : undefined) as any,
-          ]}
-        >
-          {isCancellingAgent ? (
-            <ActivityIndicator size="small" color="white" />
-          ) : (
-            <Square size={theme.iconSize.lg} color="white" fill="white" />
-          )}
-        </TooltipTrigger>
-        <TooltipContent side="top" align="center" offset={8}>
-          <View style={styles.tooltipRow}>
-            <Text style={styles.tooltipText}>Interrupt</Text>
-            <Shortcut keys={['Esc']} style={styles.tooltipShortcut} />
-          </View>
-        </TooltipContent>
-      </Tooltip>
-    ) : null
-
-  const rightContent = (
-    <View style={styles.rightControls}>
-      {!isVoiceModeForAgent && agent ? (
-        <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
-          <TooltipTrigger
-            onPress={handleToggleRealtimeVoice}
-            disabled={!isConnected || voice?.isVoiceSwitching}
-            accessibilityLabel="Enable Voice mode"
-            accessibilityRole="button"
-            style={[
-              styles.realtimeVoiceButton as any,
-              (!isConnected || voice?.isVoiceSwitching ? styles.buttonDisabled : undefined) as any,
-            ]}
-          >
-            {voice?.isVoiceSwitching ? (
-              <ActivityIndicator size="small" color="white" />
-            ) : (
-              <AudioLines size={theme.iconSize.lg} color={theme.colors.foreground} />
-            )}
-          </TooltipTrigger>
-          <TooltipContent side="top" align="center" offset={8}>
-            <View style={styles.tooltipRow}>
-              <Text style={styles.tooltipText}>Voice mode</Text>
-              <Shortcut keys={['mod', 'shift', 'D']} style={styles.tooltipShortcut} />
-            </View>
-          </TooltipContent>
-        </Tooltip>
-      ) : null}
-      {cancelButton}
-    </View>
-  )
-
-  const leftContent =
-    resolveStatusControlMode(statusControls) === 'draft' && statusControls ? (
-      <DraftAgentStatusBar {...statusControls} />
-    ) : (
-      <AgentStatusBar agentId={agentId} serverId={serverId} />
-    )
-
-  return (
-    <Animated.View
-      style={[styles.container, { paddingBottom: insets.bottom }, keyboardAnimatedStyle]}
-    >
-      {/* Input area */}
-      <View style={styles.inputAreaContainer}>
-        <View style={styles.inputAreaContent}>
-          {/* Queue list */}
-          {queuedMessages.length > 0 && (
-            <View style={styles.queueContainer}>
-              {queuedMessages.map((item) => (
-                <View key={item.id} style={styles.queueItem}>
-                  <Text style={styles.queueText} numberOfLines={2} ellipsizeMode="tail">
-                    {item.text}
-                  </Text>
-                  <View style={styles.queueActions}>
-                    <Pressable
-                      onPress={() => handleEditQueuedMessage(item.id)}
-                      style={styles.queueActionButton}
-                    >
-                      <Pencil size={theme.iconSize.sm} color={theme.colors.foreground} />
-                    </Pressable>
-                    <Pressable
-                      onPress={() => handleSendQueuedNow(item.id)}
-                      style={[styles.queueActionButton, styles.queueSendButton]}
-                    >
-                      <ArrowUp size={theme.iconSize.sm} color="white" />
-                    </Pressable>
-                  </View>
-                </View>
-              ))}
-            </View>
-          )}
-
-          {sendError && <Text style={styles.sendErrorText}>{sendError}</Text>}
-
-          <View style={styles.messageInputContainer}>
-            {/* Command + file mention autocomplete rendered as a true popover */}
-            {autocomplete.isVisible && (
-              <View style={styles.autocompletePopover} pointerEvents="box-none">
-                <Autocomplete
-                  options={autocomplete.options}
-                  selectedIndex={autocomplete.selectedIndex}
-                  isLoading={autocomplete.isLoading}
-                  errorMessage={autocomplete.errorMessage}
-                  loadingText={autocomplete.loadingText}
-                  emptyText={autocomplete.emptyText}
-                  onSelect={autocomplete.onSelectOption}
-                />
-              </View>
-            )}
-
-            {/* MessageInput handles everything: text, dictation, attachments, all buttons */}
-            <MessageInput
-              ref={messageInputRef}
-              value={userInput}
-              onChangeText={setUserInput}
-              onSubmit={handleSubmit}
-              isSubmitDisabled={isProcessing || isSubmitLoading}
-              isSubmitLoading={isProcessing || isSubmitLoading}
-              images={selectedImages}
-              onPickImages={handlePickImage}
-              onAddImages={addImages}
-              onRemoveImage={handleRemoveImage}
-              client={client}
-              isReadyForDictation={isDictationReady}
-              placeholder={messagePlaceholder}
-              autoFocus={autoFocus && isDesktopWebBreakpoint}
-              autoFocusKey={`${serverId}:${agentId}`}
-              disabled={isSubmitLoading}
-              isScreenFocused={isScreenFocused}
-              leftContent={leftContent}
-              rightContent={rightContent}
-              voiceServerId={serverId}
-              voiceAgentId={agentId}
-              isAgentRunning={isAgentRunning}
-              onQueue={handleQueue}
-              onSubmitLoadingPress={isAgentRunning ? handleCancelAgent : undefined}
-              onKeyPress={handleCommandKeyPress}
-              onSelectionChange={(selection) => {
-                setCursorIndex(selection.start)
-              }}
-              onFocusChange={(focused) => {
-                setIsMessageInputFocused(focused)
-                if (focused) {
-                  onAttentionInputFocus?.()
-                }
-              }}
-              onHeightChange={onComposerHeightChange}
-            />
-          </View>
-        </View>
-      </View>
-    </Animated.View>
-  )
-}
-
-const BUTTON_SIZE = 40
-
-const styles = StyleSheet.create(((theme: Theme) => ({
-  container: {
-    flexDirection: 'column',
-    position: 'relative',
-  },
-  borderSeparator: {
-    height: theme.borderWidth[1],
-    backgroundColor: theme.colors.border,
-  },
-  inputAreaContainer: {
-    position: 'relative',
-    minHeight: FOOTER_HEIGHT,
-    marginHorizontal: 'auto',
-    alignItems: 'center',
-    width: '100%',
-    overflow: 'visible',
-    padding: theme.spacing[4],
-  },
-  inputAreaContent: {
-    width: '100%',
-    maxWidth: MAX_CONTENT_WIDTH,
-    gap: theme.spacing[3],
-  },
-  messageInputContainer: {
-    position: 'relative',
-    width: '100%',
-  },
-  autocompletePopover: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: '100%',
-    marginBottom: theme.spacing[3],
-    zIndex: 30,
-  },
-  cancelButton: {
-    width: 34,
-    height: 34,
-    borderRadius: theme.borderRadius.full,
-    backgroundColor: theme.colors.palette.red[600],
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  rightControls: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: theme.spacing[2],
-  },
-  realtimeVoiceButton: {
-    width: 34,
-    height: 34,
-    borderRadius: theme.borderRadius.full,
-    backgroundColor: theme.colors.surface0,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  realtimeVoiceButtonActive: {
-    backgroundColor: theme.colors.palette.green[600],
-    borderColor: theme.colors.palette.green[800],
-  },
-  tooltipRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: theme.spacing[2],
-  },
-  tooltipText: {
-    fontSize: theme.fontSize.sm,
-    color: theme.colors.popoverForeground,
-  },
-  tooltipShortcut: {
-    backgroundColor: theme.colors.surface3,
-    borderColor: theme.colors.borderAccent,
-  },
-  buttonDisabled: {
-    opacity: 0.5,
-  },
-  queueContainer: {
-    flexDirection: 'column',
-    gap: theme.spacing[2],
-  },
-  queueItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: theme.spacing[3],
-    paddingVertical: theme.spacing[2],
-    backgroundColor: theme.colors.surface1,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-    gap: theme.spacing[2],
-  },
-  queueText: {
-    flex: 1,
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize.base,
-  },
-  queueActions: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: theme.spacing[2],
-  },
-  queueActionButton: {
-    width: 32,
-    height: 32,
-    borderRadius: theme.borderRadius.full,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: theme.colors.surface2,
-  },
-  queueSendButton: {
-    backgroundColor: theme.colors.accent,
-  },
-  sendErrorText: {
-    color: theme.colors.palette.red[500],
-    fontSize: theme.fontSize.sm,
-  },
-})) as any) as Record<string, any>

packages/app/src/components/agent-input-submit.test.ts

@@ -0,0 +1,140 @@
+import { describe, expect, it, vi } from "vitest";
+import { submitAgentInput } from "./agent-input-submit";
+
+function createDeferredPromise<T>() {
+  let resolve!: (value: T | PromiseLike<T>) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((nextResolve, nextReject) => {
+    resolve = nextResolve;
+    reject = nextReject;
+  });
+  return {
+    promise,
+    resolve,
+    reject,
+  };
+}
+
+describe("submitAgentInput", () => {
+  it("clears the composer before an in-flight submit resolves", async () => {
+    const deferred = createDeferredPromise<void>();
+    const queueMessage = vi.fn();
+    const submitMessage = vi.fn(async () => {
+      await deferred.promise;
+    });
+    const clearDraft = vi.fn();
+    const setUserInput = vi.fn();
+    const setSelectedImages = vi.fn();
+    const setSendError = vi.fn();
+    const setIsProcessing = vi.fn();
+
+    const submitPromise = submitAgentInput({
+      message: "  hello world  ",
+      isAgentRunning: false,
+      canSubmit: true,
+      queueMessage,
+      submitMessage,
+      clearDraft,
+      setUserInput,
+      setSelectedImages,
+      setSendError,
+      setIsProcessing,
+    });
+
+    expect(queueMessage).not.toHaveBeenCalled();
+    expect(submitMessage).toHaveBeenCalledWith({
+      message: "hello world",
+      imageAttachments: undefined,
+    });
+    expect(setUserInput).toHaveBeenCalledWith("");
+    expect(setSelectedImages).toHaveBeenCalledWith([]);
+    expect(setSendError).toHaveBeenCalledWith(null);
+    expect(setIsProcessing).toHaveBeenCalledWith(true);
+    expect(clearDraft).not.toHaveBeenCalled();
+
+    deferred.resolve();
+
+    await expect(submitPromise).resolves.toBe("submitted");
+    expect(clearDraft).toHaveBeenCalledWith("sent");
+  });
+
+  it("queues while the agent is running and clears the composer immediately", async () => {
+    const queueMessage = vi.fn();
+    const submitMessage = vi.fn();
+    const clearDraft = vi.fn();
+    const setUserInput = vi.fn();
+    const setSelectedImages = vi.fn();
+    const setSendError = vi.fn();
+    const setIsProcessing = vi.fn();
+
+    await expect(
+      submitAgentInput({
+        message: "  queued message  ",
+        imageAttachments: [{ id: "img-1" }],
+        isAgentRunning: true,
+        canSubmit: true,
+        queueMessage,
+        submitMessage,
+        clearDraft,
+        setUserInput,
+        setSelectedImages,
+        setSendError,
+        setIsProcessing,
+      }),
+    ).resolves.toBe("queued");
+
+    expect(queueMessage).toHaveBeenCalledWith({
+      message: "queued message",
+      imageAttachments: [{ id: "img-1" }],
+    });
+    expect(submitMessage).not.toHaveBeenCalled();
+    expect(setUserInput).toHaveBeenCalledWith("");
+    expect(setSelectedImages).toHaveBeenCalledWith([]);
+    expect(setSendError).not.toHaveBeenCalled();
+    expect(setIsProcessing).not.toHaveBeenCalled();
+    expect(clearDraft).not.toHaveBeenCalled();
+  });
+
+  it("restores the composer when submit fails", async () => {
+    const submitError = new Error("No host selected");
+    const queueMessage = vi.fn();
+    const submitMessage = vi.fn(async () => {
+      throw submitError;
+    });
+    const clearDraft = vi.fn();
+    const setUserInput = vi.fn();
+    const setSelectedImages = vi.fn();
+    const setSendError = vi.fn();
+    const setIsProcessing = vi.fn();
+    const onSubmitError = vi.fn();
+    const imageAttachments = [{ id: "img-1" }];
+
+    await expect(
+      submitAgentInput({
+        message: "  hello world  ",
+        imageAttachments,
+        isAgentRunning: false,
+        canSubmit: true,
+        queueMessage,
+        submitMessage,
+        clearDraft,
+        setUserInput,
+        setSelectedImages,
+        setSendError,
+        setIsProcessing,
+        onSubmitError,
+      }),
+    ).resolves.toBe("failed");
+
+    expect(onSubmitError).toHaveBeenCalledWith(submitError);
+    expect(setUserInput).toHaveBeenNthCalledWith(1, "");
+    expect(setUserInput).toHaveBeenNthCalledWith(2, "hello world");
+    expect(setSelectedImages).toHaveBeenNthCalledWith(1, []);
+    expect(setSelectedImages).toHaveBeenNthCalledWith(2, imageAttachments);
+    expect(setSendError).toHaveBeenNthCalledWith(1, null);
+    expect(setSendError).toHaveBeenNthCalledWith(2, "No host selected");
+    expect(setIsProcessing).toHaveBeenNthCalledWith(1, true);
+    expect(setIsProcessing).toHaveBeenNthCalledWith(2, false);
+    expect(clearDraft).not.toHaveBeenCalled();
+  });
+});

packages/app/src/components/agent-input-submit.ts

@@ -0,0 +1,59 @@
+export type AgentInputSubmitResult = "noop" | "queued" | "submitted" | "failed";
+
+export interface AgentInputSubmitActionInput<TImage> {
+  message: string;
+  imageAttachments?: TImage[];
+  forceSend?: boolean;
+  isAgentRunning: boolean;
+  canSubmit: boolean;
+  queueMessage: (input: { message: string; imageAttachments?: TImage[] }) => void;
+  submitMessage: (input: { message: string; imageAttachments?: TImage[] }) => Promise<void>;
+  clearDraft: (lifecycle: "sent" | "abandoned") => void;
+  setUserInput: (text: string) => void;
+  setSelectedImages: (images: TImage[]) => void;
+  setSendError: (message: string | null) => void;
+  setIsProcessing: (isProcessing: boolean) => void;
+  onSubmitError?: (error: unknown) => void;
+}
+
+export async function submitAgentInput<TImage>(
+  input: AgentInputSubmitActionInput<TImage>,
+): Promise<AgentInputSubmitResult> {
+  const trimmedMessage = input.message.trim();
+  const imageAttachments = input.imageAttachments;
+
+  if (!trimmedMessage && !imageAttachments?.length) {
+    return "noop";
+  }
+
+  if (!input.canSubmit) {
+    return "noop";
+  }
+
+  if (input.isAgentRunning && !input.forceSend) {
+    input.queueMessage({ message: trimmedMessage, imageAttachments });
+    input.setUserInput("");
+    input.setSelectedImages([]);
+    return "queued";
+  }
+
+  // Clear immediately so optimistic stream updates and composer state stay in sync.
+  input.setUserInput("");
+  input.setSelectedImages([]);
+  input.setSendError(null);
+  input.setIsProcessing(true);
+
+  try {
+    await input.submitMessage({ message: trimmedMessage, imageAttachments });
+    input.clearDraft("sent");
+    input.setIsProcessing(false);
+    return "submitted";
+  } catch (error) {
+    input.onSubmitError?.(error);
+    input.setUserInput(trimmedMessage);
+    input.setSelectedImages(imageAttachments ?? []);
+    input.setSendError(error instanceof Error ? error.message : "Failed to send message");
+    input.setIsProcessing(false);
+    return "failed";
+  }
+}

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

@@ -6,106 +6,108 @@ import {
   RefreshControl,
   FlatList,
   type ListRenderItem,
-} from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { useCallback, useMemo, useState, type ReactElement } from 'react'
-import { router, usePathname, type Href } from 'expo-router'
-import { StyleSheet, UnistylesRuntime, useUnistyles } from 'react-native-unistyles'
-import { formatTimeAgo } from '@/utils/time'
-import { shortenPath } from '@/utils/shorten-path'
-import { type AggregatedAgent } from '@/hooks/use-aggregated-agents'
-import { useSessionStore } from '@/stores/session-store'
-import { AgentStatusDot } from '@/components/agent-status-dot'
-import { buildHostWorkspaceAgentRoute } from '@/utils/host-routes'
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useCallback, useMemo, useState, type ReactElement } from "react";
+import { router } from "expo-router";
+import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { formatTimeAgo } from "@/utils/time";
+import { shortenPath } from "@/utils/shorten-path";
+import { type AggregatedAgent } from "@/hooks/use-aggregated-agents";
+import { useSessionStore } from "@/stores/session-store";
+import { Archive, SquareTerminal } from "lucide-react-native";
+import { getProviderIcon } from "@/components/provider-icons";
+import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
 
 interface AgentListProps {
-  agents: AggregatedAgent[]
-  showCheckoutInfo?: boolean
-  isRefreshing?: boolean
-  onRefresh?: () => void
-  selectedAgentId?: string
-  onAgentSelect?: () => void
-  listFooterComponent?: ReactElement | null
-  showAttentionIndicator?: boolean
+  agents: AggregatedAgent[];
+  showCheckoutInfo?: boolean;
+  isRefreshing?: boolean;
+  onRefresh?: () => void;
+  selectedAgentId?: string;
+  onAgentSelect?: () => void;
+  listFooterComponent?: ReactElement | null;
+  showAttentionIndicator?: boolean;
 }
 
-interface AgentListSection {
-  key: string
-  title: string
-  data: AggregatedAgent[]
-}
+type FlatListItem =
+  | { type: "header"; key: string; title: string }
+  | { type: "agent"; key: string; agent: AggregatedAgent };
 
 function deriveDateSectionLabel(lastActivityAt: Date): string {
-  const now = new Date()
-  const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())
-  const yesterdayStart = new Date(todayStart.getTime() - 24 * 60 * 60 * 1000)
+  const now = new Date();
+  const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const yesterdayStart = new Date(todayStart.getTime() - 24 * 60 * 60 * 1000);
   const activityStart = new Date(
     lastActivityAt.getFullYear(),
     lastActivityAt.getMonth(),
-    lastActivityAt.getDate()
-  )
+    lastActivityAt.getDate(),
+  );
 
   if (activityStart.getTime() >= todayStart.getTime()) {
-    return 'Today'
+    return "Today";
   }
   if (activityStart.getTime() >= yesterdayStart.getTime()) {
-    return 'Yesterday'
+    return "Yesterday";
   }
 
-  const diffTime = todayStart.getTime() - activityStart.getTime()
-  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
+  const diffTime = todayStart.getTime() - activityStart.getTime();
+  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
   if (diffDays <= 7) {
-    return 'This week'
+    return "This week";
   }
   if (diffDays <= 30) {
-    return 'This month'
+    return "This month";
   }
-  return 'Older'
+  return "Older";
 }
 
-function formatStatusLabel(status: AggregatedAgent['status']): string {
+function formatStatusLabel(status: AggregatedAgent["status"]): string {
   switch (status) {
-    case 'initializing':
-      return 'Starting'
-    case 'idle':
-      return 'Idle'
-    case 'running':
-      return 'Running'
-    case 'error':
-      return 'Error'
-    case 'closed':
-      return 'Closed'
+    case "initializing":
+      return "Starting";
+    case "idle":
+      return "Idle";
+    case "running":
+      return "Running";
+    case "error":
+      return "Error";
+    case "closed":
+      return "Closed";
     default:
-      return status
+      return status;
   }
 }
 
 function SessionBadge({
   label,
-  tone = 'neutral',
+  icon,
+  tone = "neutral",
 }: {
-  label: string
-  tone?: 'neutral' | 'warning' | 'danger'
+  label: string;
+  icon?: ReactElement;
+  tone?: "neutral" | "warning" | "danger";
 }) {
   return (
     <View
       style={[
         styles.badge,
-        tone === 'warning' && styles.badgeWarning,
-        tone === 'danger' && styles.badgeDanger,
+        tone === "warning" && styles.badgeWarning,
+        tone === "danger" && styles.badgeDanger,
       ]}
     >
+      {icon}
       <Text
         style={[
           styles.badgeText,
-          tone === 'warning' && styles.badgeTextWarning,
-          tone === 'danger' && styles.badgeTextDanger,
+          tone === "warning" && styles.badgeTextWarning,
+          tone === "danger" && styles.badgeTextDanger,
         ]}
       >
         {label}
       </Text>
     </View>
-  )
+  );
 }
 
 function SessionRow({
@@ -116,18 +118,20 @@ function SessionRow({
   onPress,
   onLongPress,
 }: {
-  agent: AggregatedAgent
-  isMobile: boolean
-  selectedAgentId?: string
-  showAttentionIndicator: boolean
-  onPress: (agent: AggregatedAgent) => void
-  onLongPress: (agent: AggregatedAgent) => void
+  agent: AggregatedAgent;
+  isMobile: boolean;
+  selectedAgentId?: string;
+  showAttentionIndicator: boolean;
+  onPress: (agent: AggregatedAgent) => void;
+  onLongPress: (agent: AggregatedAgent) => void;
 }) {
-  const timeAgo = formatTimeAgo(agent.lastActivityAt)
-  const agentKey = `${agent.serverId}:${agent.id}`
-  const isSelected = selectedAgentId === agentKey
-  const statusLabel = formatStatusLabel(agent.status)
-  const projectPath = shortenPath(agent.cwd)
+  const { theme } = useUnistyles();
+  const timeAgo = formatTimeAgo(agent.lastActivityAt);
+  const agentKey = `${agent.serverId}:${agent.id}`;
+  const isSelected = selectedAgentId === agentKey;
+  const statusLabel = formatStatusLabel(agent.status);
+  const projectPath = shortenPath(agent.cwd);
+  const ProviderIcon = getProviderIcon(agent.provider);
 
   return (
     <Pressable
@@ -141,18 +145,29 @@ function SessionRow({
       onLongPress={() => onLongPress(agent)}
       testID={`agent-row-${agent.serverId}-${agent.id}`}
     >
-      <View style={styles.rowLeading}>
-        <AgentStatusDot status={agent.status} requiresAttention={agent.requiresAttention} />
-      </View>
       <View style={styles.rowContent}>
         <View style={styles.rowTitleRow}>
+          <View style={styles.providerIconWrap}>
+            <ProviderIcon size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+          </View>
           <Text
             style={[styles.sessionTitle, isSelected && styles.sessionTitleHighlighted]}
             numberOfLines={1}
           >
-            {agent.title || 'New session'}
+            {agent.title || "New session"}
           </Text>
-          {agent.archivedAt ? <SessionBadge label="Archived" /> : null}
+          {agent.terminal ? (
+            <SessionBadge
+              label="Terminal"
+              icon={<SquareTerminal size={theme.fontSize.xs} color={theme.colors.foregroundMuted} />}
+            />
+          ) : null}
+          {agent.archivedAt ? (
+            <SessionBadge
+              label="Archived"
+              icon={<Archive size={theme.fontSize.xs} color={theme.colors.foregroundMuted} />}
+            />
+          ) : null}
           {(agent.pendingPermissionCount ?? 0) > 0 ? (
             <SessionBadge label={`${agent.pendingPermissionCount} pending`} tone="warning" />
           ) : null}
@@ -195,49 +210,7 @@ function SessionRow({
         </View>
       ) : null}
     </Pressable>
-  )
-}
-
-function SessionTableSection({
-  section,
-  isMobile,
-  selectedAgentId,
-  showAttentionIndicator,
-  onAgentPress,
-  onAgentLongPress,
-}: {
-  section: AgentListSection
-  isMobile: boolean
-  selectedAgentId?: string
-  showAttentionIndicator: boolean
-  onAgentPress: (agent: AggregatedAgent) => void
-  onAgentLongPress: (agent: AggregatedAgent) => void
-}) {
-  return (
-    <View style={styles.sectionBlock}>
-      <View style={styles.sectionHeading}>
-        <Text style={styles.sectionTitle}>{section.title}</Text>
-      </View>
-
-      <View style={styles.listCard}>
-        {section.data.map((agent, index) => (
-          <View
-            key={`${agent.serverId}:${agent.id}`}
-            style={index > 0 ? styles.rowDivider : undefined}
-          >
-            <SessionRow
-              agent={agent}
-              isMobile={isMobile}
-              selectedAgentId={selectedAgentId}
-              showAttentionIndicator={showAttentionIndicator}
-              onPress={onAgentPress}
-              onLongPress={onAgentLongPress}
-            />
-          </View>
-        ))}
-      </View>
-    </View>
-  )
+  );
 }
 
 export function AgentList({
@@ -249,99 +222,114 @@ export function AgentList({
   listFooterComponent,
   showAttentionIndicator = true,
 }: AgentListProps) {
-  const { theme } = useUnistyles()
-  const pathname = usePathname()
-  const insets = useSafeAreaInsets()
-  const [actionAgent, setActionAgent] = useState<AggregatedAgent | null>(null)
-  const isMobile = UnistylesRuntime.breakpoint === 'xs' || UnistylesRuntime.breakpoint === 'sm'
+  const { theme } = useUnistyles();
+  const insets = useSafeAreaInsets();
+  const [actionAgent, setActionAgent] = useState<AggregatedAgent | null>(null);
+  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
 
   const actionClient = useSessionStore((state) =>
-    actionAgent?.serverId ? (state.sessions[actionAgent.serverId]?.client ?? null) : null
-  )
+    actionAgent?.serverId ? (state.sessions[actionAgent.serverId]?.client ?? null) : null,
+  );
 
-  const isActionSheetVisible = actionAgent !== null
-  const isActionDaemonUnavailable = Boolean(actionAgent?.serverId && !actionClient)
+  const isActionSheetVisible = actionAgent !== null;
+  const isActionDaemonUnavailable = Boolean(actionAgent?.serverId && !actionClient);
 
   const handleAgentPress = useCallback(
     (agent: AggregatedAgent) => {
       if (isActionSheetVisible) {
-        return
+        return;
       }
 
-      const serverId = agent.serverId
-      const agentId = agent.id
-      const shouldReplace = pathname.startsWith('/h/')
-      const navigate = shouldReplace ? router.replace : router.push
+      const serverId = agent.serverId;
+      const agentId = agent.id;
 
-      onAgentSelect?.()
+      onAgentSelect?.();
 
-      const route: Href = buildHostWorkspaceAgentRoute(serverId, agent.cwd, agentId) as Href
-      navigate(route)
+      const route = prepareWorkspaceTab({
+        serverId,
+        workspaceId: agent.cwd,
+        target: { kind: "agent", agentId },
+        pin: Boolean(agent.archivedAt),
+        requestReopen: agent.terminal && agent.status === "closed",
+      });
+      router.navigate(route as any);
     },
-    [isActionSheetVisible, pathname, onAgentSelect]
-  )
+    [isActionSheetVisible, onAgentSelect],
+  );
 
   const handleAgentLongPress = useCallback((agent: AggregatedAgent) => {
-    setActionAgent(agent)
-  }, [])
+    setActionAgent(agent);
+  }, []);
 
   const handleCloseActionSheet = useCallback(() => {
-    setActionAgent(null)
-  }, [])
+    setActionAgent(null);
+  }, []);
 
   const handleArchiveAgent = useCallback(() => {
     if (!actionAgent || !actionClient) {
-      return
+      return;
     }
-    void actionClient.archiveAgent(actionAgent.id)
-    setActionAgent(null)
-  }, [actionAgent, actionClient])
+    void actionClient.archiveAgent(actionAgent.id);
+    setActionAgent(null);
+  }, [actionAgent, actionClient]);
 
-  const sections = useMemo((): AgentListSection[] => {
-    const order = ['Today', 'Yesterday', 'This week', 'This month', 'Older'] as const
-    const buckets = new Map<string, AggregatedAgent[]>()
+  const flatItems = useMemo((): FlatListItem[] => {
+    const order = ["Today", "Yesterday", "This week", "This month", "Older"] as const;
+    const buckets = new Map<string, AggregatedAgent[]>();
     for (const agent of agents) {
-      const label = deriveDateSectionLabel(agent.lastActivityAt)
-      const existing = buckets.get(label) ?? []
-      existing.push(agent)
-      buckets.set(label, existing)
+      const label = deriveDateSectionLabel(agent.lastActivityAt);
+      const existing = buckets.get(label) ?? [];
+      existing.push(agent);
+      buckets.set(label, existing);
     }
 
-    const result: AgentListSection[] = []
+    const result: FlatListItem[] = [];
     for (const label of order) {
-      const data = buckets.get(label)
+      const data = buckets.get(label);
       if (!data || data.length === 0) {
-        continue
+        continue;
+      }
+      result.push({ type: "header", key: `header:${label}`, title: label });
+      for (const agent of data) {
+        result.push({ type: "agent", key: `${agent.serverId}:${agent.id}`, agent });
       }
-      result.push({ key: `date:${label}`, title: label, data })
     }
-    return result
-  }, [agents])
+    return result;
+  }, [agents]);
 
-  const renderSection: ListRenderItem<AgentListSection> = useCallback(
-    ({ item: section }) => (
-      <SessionTableSection
-        section={section}
-        isMobile={isMobile}
-        selectedAgentId={selectedAgentId}
-        showAttentionIndicator={showAttentionIndicator}
-        onAgentPress={handleAgentPress}
-        onAgentLongPress={handleAgentLongPress}
-      />
-    ),
-    [handleAgentLongPress, handleAgentPress, isMobile, selectedAgentId, showAttentionIndicator]
-  )
+  const renderItem: ListRenderItem<FlatListItem> = useCallback(
+    ({ item }) => {
+      if (item.type === "header") {
+        return (
+          <View style={styles.sectionHeading}>
+            <Text style={styles.sectionTitle}>{item.title}</Text>
+          </View>
+        );
+      }
+      return (
+        <SessionRow
+          agent={item.agent}
+          isMobile={isMobile}
+          selectedAgentId={selectedAgentId}
+          showAttentionIndicator={showAttentionIndicator}
+          onPress={handleAgentPress}
+          onLongPress={handleAgentLongPress}
+        />
+      );
+    },
+    [handleAgentLongPress, handleAgentPress, isMobile, selectedAgentId, showAttentionIndicator],
+  );
 
-  const keyExtractor = useCallback((section: AgentListSection) => section.key, [])
+  const keyExtractor = useCallback((item: FlatListItem) => item.key, []);
 
   return (
     <>
       <FlatList
-        data={sections}
+        data={flatItems}
         style={styles.list}
         contentContainerStyle={styles.listContent}
         keyExtractor={keyExtractor}
-        renderItem={renderSection}
+        renderItem={renderItem}
         showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"
         ListFooterComponent={listFooterComponent}
@@ -373,7 +361,7 @@ export function AgentList({
           >
             <View style={styles.sheetHandle} />
             <Text style={styles.sheetTitle}>
-              {isActionDaemonUnavailable ? 'Host offline' : 'Archive this session?'}
+              {isActionDaemonUnavailable ? "Host offline" : "Archive this session?"}
             </Text>
             <View style={styles.sheetButtonRow}>
               <Pressable
@@ -403,7 +391,7 @@ export function AgentList({
         </View>
       </Modal>
     </>
-  )
+  );
 }
 
 const styles = StyleSheet.create((theme) => ({
@@ -416,18 +404,16 @@ const styles = StyleSheet.create((theme) => ({
       xs: theme.spacing[3],
       md: theme.spacing[6],
     },
-    paddingTop: theme.spacing[2],
+    paddingTop: theme.spacing[4],
     paddingBottom: theme.spacing[6],
     gap: theme.spacing[1],
   },
-  sectionBlock: {
-    marginTop: theme.spacing[2],
-  },
   sectionHeading: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    marginTop: theme.spacing[2],
+    flexDirection: "row",
+    alignItems: "center",
     gap: theme.spacing[3],
-    paddingHorizontal: theme.spacing[1],
+    paddingHorizontal: theme.spacing[3],
     marginBottom: theme.spacing[2],
   },
   sectionTitle: {
@@ -435,26 +421,9 @@ const styles = StyleSheet.create((theme) => ({
     fontWeight: theme.fontWeight.medium,
     color: theme.colors.foregroundMuted,
   },
-  listCard: {
-    overflow: {
-      xs: 'hidden' as const,
-      md: 'visible' as const,
-    },
-    borderRadius: {
-      xs: theme.borderRadius.lg,
-      md: 0,
-    },
-  },
-  rowDivider: {
-    borderTopWidth: {
-      xs: StyleSheet.hairlineWidth,
-      md: 0,
-    },
-    borderTopColor: theme.colors.border,
-  },
   row: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     paddingVertical: theme.spacing[2],
     paddingHorizontal: theme.spacing[3],
     borderRadius: {
@@ -466,23 +435,25 @@ const styles = StyleSheet.create((theme) => ({
       md: 0,
     },
   },
-  rowLeading: {
-    marginRight: theme.spacing[3],
-  },
   rowContent: {
     flex: 1,
     minWidth: 0,
   },
   rowTitleRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap',
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
     gap: theme.spacing[2],
   },
+  providerIconWrap: {
+    width: theme.iconSize.md,
+    alignItems: "center",
+    justifyContent: "center",
+  },
   rowMetaRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap',
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
     gap: theme.spacing[1],
     marginTop: 2,
   },
@@ -501,7 +472,7 @@ const styles = StyleSheet.create((theme) => ({
   sessionTitle: {
     flexShrink: 1,
     fontSize: theme.fontSize.sm,
-    fontWeight: '500',
+    fontWeight: "400",
     color: theme.colors.foreground,
     opacity: 0.86,
   },
@@ -509,7 +480,7 @@ const styles = StyleSheet.create((theme) => ({
     opacity: 1,
   },
   sessionMetaText: {
-    maxWidth: '100%',
+    maxWidth: "100%",
     fontSize: theme.fontSize.sm,
     color: theme.colors.foregroundMuted,
   },
@@ -531,19 +502,22 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foregroundMuted,
     flexShrink: 0,
     width: 72,
-    textAlign: 'right' as const,
+    textAlign: "right" as const,
   },
   badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
     paddingHorizontal: theme.spacing[2],
     paddingVertical: theme.spacing[1],
     borderRadius: theme.borderRadius.full,
     backgroundColor: theme.colors.surface2,
   },
   badgeWarning: {
-    backgroundColor: 'rgba(245, 158, 11, 0.12)',
+    backgroundColor: "rgba(245, 158, 11, 0.12)",
   },
   badgeDanger: {
-    backgroundColor: 'rgba(239, 68, 68, 0.14)',
+    backgroundColor: "rgba(239, 68, 68, 0.14)",
   },
   badgeText: {
     fontSize: theme.fontSize.xs,
@@ -558,26 +532,26 @@ const styles = StyleSheet.create((theme) => ({
   },
   sheetOverlay: {
     flex: 1,
-    justifyContent: 'flex-end',
+    justifyContent: "flex-end",
   },
   sheetBackdrop: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     right: 0,
     bottom: 0,
     left: 0,
-    backgroundColor: 'rgba(0,0,0,0.35)',
+    backgroundColor: "rgba(0,0,0,0.35)",
   },
   sheetContainer: {
     backgroundColor: theme.colors.surface2,
-    borderTopLeftRadius: theme.borderRadius['2xl'],
-    borderTopRightRadius: theme.borderRadius['2xl'],
+    borderTopLeftRadius: theme.borderRadius["2xl"],
+    borderTopRightRadius: theme.borderRadius["2xl"],
     paddingHorizontal: theme.spacing[6],
     paddingTop: theme.spacing[4],
     gap: theme.spacing[4],
   },
   sheetHandle: {
-    alignSelf: 'center',
+    alignSelf: "center",
     width: 40,
     height: 4,
     borderRadius: theme.borderRadius.full,
@@ -588,18 +562,18 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.lg,
     fontWeight: theme.fontWeight.semibold,
     color: theme.colors.foreground,
-    textAlign: 'center',
+    textAlign: "center",
   },
   sheetButtonRow: {
-    flexDirection: 'row',
+    flexDirection: "row",
     gap: theme.spacing[3],
   },
   sheetButton: {
     flex: 1,
     borderRadius: theme.borderRadius.lg,
     paddingVertical: theme.spacing[4],
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
   },
   sheetArchiveButton: {
     backgroundColor: theme.colors.primary,
@@ -620,4 +594,4 @@ const styles = StyleSheet.create((theme) => ({
     fontWeight: theme.fontWeight.semibold,
     fontSize: theme.fontSize.base,
   },
-}))
+}));

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

@@ -1,60 +1,118 @@
-import { describe, expect, it } from 'vitest'
-import { normalizeModelId, resolveAgentModelSelection } from './agent-status-bar.utils'
+import { describe, expect, it } from "vitest";
+import {
+  getStatusSelectorHint,
+  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()
-  })
+describe("getStatusSelectorHint", () => {
+  it("explains what each editable status control does", () => {
+    expect(getStatusSelectorHint("thinking")).toBe("Thinking mode");
+    expect(getStatusSelectorHint("model")).toBe("Change model");
+    expect(getStatusSelectorHint("mode")).toBe("Change permission mode");
+  });
+});
 
-  it('returns trimmed model ids', () => {
-    expect(normalizeModelId(' gpt-5.1-codex ')).toBe('gpt-5.1-codex')
-  })
-})
+describe("normalizeModelId", () => {
+  it("treats empty values as unset", () => {
+    expect(normalizeModelId("")).toBeNull();
+    expect(normalizeModelId(undefined)).toBeNull();
+  });
 
-describe('resolveAgentModelSelection', () => {
-  it('prefers runtime model over configured model', () => {
+  it("returns trimmed model ids", () => {
+    expect(normalizeModelId(" gpt-5.1-codex ")).toBe("gpt-5.1-codex");
+    expect(normalizeModelId(" default ")).toBe("default");
+  });
+});
+
+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',
+          id: "a",
+          provider: "codex",
+          label: "Model A",
+          thinkingOptions: [{ id: "low", label: "Low" }],
+          defaultThinkingOptionId: "low",
         },
       ],
-      runtimeModelId: 'a',
-      configuredModelId: 'b',
+      runtimeModelId: "a",
+      configuredModelId: "b",
       explicitThinkingOptionId: null,
-    })
+    });
 
-    expect(selection.activeModelId).toBe('a')
-    expect(selection.displayModel).toBe('Model A')
-    expect(selection.selectedThinkingId).toBe('low')
-  })
+    expect(selection.activeModelId).toBe("a");
+    expect(selection.displayModel).toBe("Model A");
+    expect(selection.selectedThinkingId).toBe("low");
+  });
 
-  it('uses explicit thinking option when provided', () => {
+  it("uses explicit thinking option when provided", () => {
     const selection = resolveAgentModelSelection({
       models: [
         {
-          id: 'a',
-          provider: 'codex',
-          label: 'Model A',
+          id: "a",
+          provider: "codex",
+          label: "Model A",
           thinkingOptions: [
-            { id: 'low', label: 'Low' },
-            { id: 'high', label: 'High' },
+            { id: "low", label: "Low" },
+            { id: "high", label: "High" },
           ],
-          defaultThinkingOptionId: 'low',
+          defaultThinkingOptionId: "low",
         },
       ],
-      runtimeModelId: 'a',
+      runtimeModelId: "a",
       configuredModelId: null,
-      explicitThinkingOptionId: 'high',
-    })
+      explicitThinkingOptionId: "high",
+    });
 
-    expect(selection.selectedThinkingId).toBe('high')
-    expect(selection.displayThinking).toBe('High')
-  })
-})
+    expect(selection.selectedThinkingId).toBe("high");
+    expect(selection.displayThinking).toBe("High");
+  });
+
+  it("falls back to the provider default model label instead of Auto", () => {
+    const selection = resolveAgentModelSelection({
+      models: [
+        {
+          id: "a",
+          provider: "codex",
+          label: "Model A",
+          isDefault: true,
+          thinkingOptions: [{ id: "low", label: "Low" }],
+          defaultThinkingOptionId: "low",
+        },
+      ],
+      runtimeModelId: null,
+      configuredModelId: null,
+      explicitThinkingOptionId: null,
+    });
+
+    expect(selection.displayModel).toBe("Model A");
+    expect(selection.displayThinking).toBe("Low");
+  });
+
+  it("prefers the configured model when runtime model is not in the model list", () => {
+    const selection = resolveAgentModelSelection({
+      models: [
+        {
+          id: "default",
+          provider: "claude",
+          label: "Default (Sonnet 4.6)",
+          isDefault: true,
+          thinkingOptions: [
+            { id: "low", label: "Low" },
+            { id: "medium", label: "Medium" },
+          ],
+        },
+      ],
+      runtimeModelId: "claude-sonnet-4-6-20260101",
+      configuredModelId: "default",
+      explicitThinkingOptionId: null,
+    });
+
+    expect(selection.activeModelId).toBe("default");
+    expect(selection.displayModel).toBe("Default (Sonnet 4.6)");
+    expect(selection.selectedThinkingId).toBe("low");
+    expect(selection.displayThinking).toBe("Low");
+  });
+});

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

@@ -1,38 +1,62 @@
-import type { AgentModelDefinition } from '@server/server/agent/agent-sdk-types'
+import type { AgentModelDefinition } from "@server/server/agent/agent-sdk-types";
+
+export type ExplainedStatusSelector = "mode" | "model" | "thinking";
+
+export function getStatusSelectorHint(selector: ExplainedStatusSelector): string {
+  switch (selector) {
+    case "thinking":
+      return "Thinking mode";
+    case "model":
+      return "Change model";
+    case "mode":
+      return "Change permission mode";
+  }
+}
 
 export function normalizeModelId(modelId: string | null | undefined): string | null {
-  const normalized = typeof modelId === 'string' ? modelId.trim() : ''
-  if (!normalized || normalized.toLowerCase() === 'default') {
-    return null
+  const normalized = typeof modelId === "string" ? modelId.trim() : "";
+  if (!normalized) {
+    return null;
   }
-  return normalized
+  return normalized;
 }
 
 export function resolveAgentModelSelection(input: {
-  models: AgentModelDefinition[] | null
-  runtimeModelId: string | null | undefined
-  configuredModelId: string | null | undefined
-  explicitThinkingOptionId: string | null | undefined
+  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 { models, runtimeModelId, configuredModelId, explicitThinkingOptionId } = input;
+  const normalizedRuntimeModelId = normalizeModelId(runtimeModelId);
+  const normalizedConfiguredModelId = normalizeModelId(configuredModelId);
+  const runtimeSelectedModel =
+    models && normalizedRuntimeModelId
+      ? (models.find((model) => model.id === normalizedRuntimeModelId) ?? null)
+      : null;
+  const preferredModelId =
+    runtimeSelectedModel?.id ?? normalizedConfiguredModelId ?? normalizedRuntimeModelId;
+  const fallbackModel =
+    models?.find((model) => model.isDefault) ?? models?.[0] ?? null;
   const selectedModel =
-    models && preferredModelId ? models.find((model) => model.id === preferredModelId) ?? null : null
+    models && preferredModelId
+      ? (models.find((model) => model.id === preferredModelId) ?? fallbackModel ?? null)
+      : fallbackModel;
 
-  const activeModelId = selectedModel?.id ?? preferredModelId ?? null
-  const displayModel = selectedModel?.label ?? preferredModelId ?? 'Auto'
+  const activeModelId = selectedModel?.id ?? preferredModelId ?? null;
+  const displayModel =
+    selectedModel?.label ?? preferredModelId ?? fallbackModel?.label ?? "Unknown model";
 
-  const thinkingOptions = selectedModel?.thinkingOptions ?? null
-  const selectedThinkingId =
-    explicitThinkingOptionId && explicitThinkingOptionId !== 'default'
+  const thinkingOptions = selectedModel?.thinkingOptions ?? null;
+  const resolvedThinkingId =
+    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')
+      : (selectedModel?.defaultThinkingOptionId ?? null);
+  const selectedThinking =
+    thinkingOptions?.find((option) => option.id === resolvedThinkingId) ?? null;
+  const effectiveThinking = selectedThinking ?? thinkingOptions?.[0] ?? null;
+  const selectedThinkingId = effectiveThinking?.id ?? null;
+  const displayThinking = effectiveThinking?.label ?? selectedThinkingId ?? "Unknown";
 
   return {
     selectedModel,
@@ -41,5 +65,5 @@ export function resolveAgentModelSelection(input: {
     thinkingOptions,
     selectedThinkingId,
     displayThinking,
-  }
+  };
 }

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

@@ -128,7 +128,7 @@ function splitOrderedTail(params: {
 }
 
 export function buildAgentStreamRenderModel(
-  input: BuildAgentStreamRenderModelInput
+  input: BuildAgentStreamRenderModelInput,
 ): AgentStreamRenderModel {
   const strategy = resolveStreamRenderStrategy({
     platform: input.platform === "web" ? "web" : "native",

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

@@ -78,7 +78,7 @@ describe("resolveStreamRenderStrategy", () => {
       resolveBottomAnchorTransportBehavior({
         strategy,
         isViewportSettling: true,
-      })
+      }),
     ).toEqual({
       verificationDelayFrames: 4,
       verificationRetryMode: "recheck",
@@ -95,7 +95,7 @@ describe("resolveStreamRenderStrategy", () => {
       resolveBottomAnchorTransportBehavior({
         strategy,
         isViewportSettling: true,
-      })
+      }),
     ).toEqual({
       verificationDelayFrames: 0,
       verificationRetryMode: "rescroll",
@@ -172,7 +172,7 @@ describe("neighbor and traversal semantics", () => {
         strategy: forward,
         items: chronological,
         startIndex: forwardStartIndex,
-      })
+      }),
     ).toBe("assistant-1\n\nassistant-2");
 
     const inverted = resolveStreamRenderStrategy({
@@ -189,7 +189,7 @@ describe("neighbor and traversal semantics", () => {
         strategy: inverted,
         items: invertedItems,
         startIndex: invertedStartIndex,
-      })
+      }),
     ).toBe("assistant-1\n\nassistant-2");
   });
 
@@ -206,7 +206,7 @@ describe("neighbor and traversal semantics", () => {
         items,
         index: 0,
         relation: "above",
-      })
+      }),
     ).toBeUndefined();
     expect(
       getStreamNeighborItem({
@@ -214,7 +214,7 @@ describe("neighbor and traversal semantics", () => {
         items,
         index: 0,
         relation: "below",
-      })
+      }),
     ).toBeUndefined();
   });
 });
@@ -233,7 +233,7 @@ describe("scroll/bottom calculations", () => {
         viewportHeight: 300,
         contentHeight: 1000,
         threshold: 24,
-      })
+      }),
     ).toBe(true);
     expect(
       isNearBottomForStreamRenderStrategy({
@@ -242,7 +242,7 @@ describe("scroll/bottom calculations", () => {
         viewportHeight: 300,
         contentHeight: 1000,
         threshold: 24,
-      })
+      }),
     ).toBe(false);
   });
 
@@ -259,7 +259,7 @@ describe("scroll/bottom calculations", () => {
         viewportHeight: 300,
         contentHeight: 1000,
         threshold: 24,
-      })
+      }),
     ).toBe(true);
     expect(
       isNearBottomForStreamRenderStrategy({
@@ -268,14 +268,14 @@ describe("scroll/bottom calculations", () => {
         viewportHeight: 300,
         contentHeight: 1000,
         threshold: 24,
-      })
+      }),
     ).toBe(false);
     expect(
       getBottomOffsetForStreamRenderStrategy({
         strategy,
         viewportHeight: 300,
         contentHeight: 1000,
-      })
+      }),
     ).toBe(0);
   });
 
@@ -290,7 +290,7 @@ describe("scroll/bottom calculations", () => {
         strategy,
         viewportHeight: 320,
         contentHeight: 1000,
-      })
+      }),
     ).toBe(680);
   });
 });

packages/app/src/components/agent-stream-web-virtualization.test.ts

@@ -62,7 +62,7 @@ describe("findMountedWindowStart", () => {
       findMountedWindowStart({
         items,
         minMountedCount: 50,
-      })
+      }),
     ).toBe(0);
   });
 
@@ -79,7 +79,7 @@ describe("findMountedWindowStart", () => {
       findMountedWindowStart({
         items,
         minMountedCount: 50,
-      })
+      }),
     ).toBe(39);
   });
 });
@@ -136,20 +136,16 @@ describe("web virtualization test overrides", () => {
       __PASEO_E2E_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD?: unknown;
       __PASEO_E2E_WEB_MOUNTED_RECENT_STREAM_ITEMS?: unknown;
     };
-    const previousThreshold =
-      globalWithOverrides.__PASEO_E2E_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD;
-    const previousMounted =
-      globalWithOverrides.__PASEO_E2E_WEB_MOUNTED_RECENT_STREAM_ITEMS;
+    const previousThreshold = globalWithOverrides.__PASEO_E2E_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD;
+    const previousMounted = globalWithOverrides.__PASEO_E2E_WEB_MOUNTED_RECENT_STREAM_ITEMS;
 
     try {
       delete globalWithOverrides.__PASEO_E2E_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD;
       delete globalWithOverrides.__PASEO_E2E_WEB_MOUNTED_RECENT_STREAM_ITEMS;
       expect(getWebPartialVirtualizationThreshold()).toBe(
-        DEFAULT_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD
-      );
-      expect(getWebMountedRecentStreamItems()).toBe(
-        DEFAULT_WEB_MOUNTED_RECENT_STREAM_ITEMS
+        DEFAULT_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD,
       );
+      expect(getWebMountedRecentStreamItems()).toBe(DEFAULT_WEB_MOUNTED_RECENT_STREAM_ITEMS);
 
       globalWithOverrides.__PASEO_E2E_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD = 6;
       globalWithOverrides.__PASEO_E2E_WEB_MOUNTED_RECENT_STREAM_ITEMS = 4;
@@ -159,14 +155,12 @@ describe("web virtualization test overrides", () => {
       if (previousThreshold === undefined) {
         delete globalWithOverrides.__PASEO_E2E_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD;
       } else {
-        globalWithOverrides.__PASEO_E2E_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD =
-          previousThreshold;
+        globalWithOverrides.__PASEO_E2E_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD = previousThreshold;
       }
       if (previousMounted === undefined) {
         delete globalWithOverrides.__PASEO_E2E_WEB_MOUNTED_RECENT_STREAM_ITEMS;
       } else {
-        globalWithOverrides.__PASEO_E2E_WEB_MOUNTED_RECENT_STREAM_ITEMS =
-          previousMounted;
+        globalWithOverrides.__PASEO_E2E_WEB_MOUNTED_RECENT_STREAM_ITEMS = previousMounted;
       }
     }
   });

packages/app/src/components/agent-stream-web-virtualization.ts

@@ -18,16 +18,14 @@ function readPositiveIntegerOverride(value: unknown): number | null {
 
 export function getWebPartialVirtualizationThreshold(): number {
   const override = readPositiveIntegerOverride(
-    (globalThis as BottomAnchorE2ETestGlobals)
-      .__PASEO_E2E_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD
+    (globalThis as BottomAnchorE2ETestGlobals).__PASEO_E2E_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD,
   );
   return override ?? DEFAULT_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD;
 }
 
 export function getWebMountedRecentStreamItems(): number {
   const override = readPositiveIntegerOverride(
-    (globalThis as BottomAnchorE2ETestGlobals)
-      .__PASEO_E2E_WEB_MOUNTED_RECENT_STREAM_ITEMS
+    (globalThis as BottomAnchorE2ETestGlobals).__PASEO_E2E_WEB_MOUNTED_RECENT_STREAM_ITEMS,
   );
   return override ?? DEFAULT_WEB_MOUNTED_RECENT_STREAM_ITEMS;
 }

packages/app/src/components/archived-agent-callout.tsx

@@ -0,0 +1,99 @@
+import { useState } from "react";
+import { View, Text } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import Animated from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { FOOTER_HEIGHT, MAX_CONTENT_WIDTH } from "@/constants/layout";
+import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
+import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
+import { Button } from "@/components/ui/button";
+import type { Theme } from "@/styles/theme";
+
+interface ArchivedAgentCalloutProps {
+  serverId: string;
+  agentId: string;
+}
+
+export function ArchivedAgentCallout({ serverId, agentId }: ArchivedAgentCalloutProps) {
+  const insets = useSafeAreaInsets();
+  const client = useHostRuntimeClient(serverId);
+  const isConnected = useHostRuntimeIsConnected(serverId);
+  const [isUnarchiving, setIsUnarchiving] = useState(false);
+
+  const { style: keyboardAnimatedStyle } = useKeyboardShiftStyle({ mode: "translate" });
+
+  async function handleUnarchive() {
+    if (!client || !isConnected || isUnarchiving) return;
+    setIsUnarchiving(true);
+    try {
+      await client.refreshAgent(agentId);
+    } catch (error) {
+      console.error("[ArchivedAgentCallout] Failed to unarchive agent:", error);
+      setIsUnarchiving(false);
+    }
+  }
+
+  return (
+    <Animated.View
+      style={[styles.container, { paddingBottom: insets.bottom }, keyboardAnimatedStyle]}
+    >
+      <View style={styles.inputAreaContainer}>
+        <View style={styles.inputAreaContent}>
+          <View style={styles.callout}>
+            <Text style={styles.calloutText}>This agent is archived</Text>
+            <Button
+              size="sm"
+              variant="secondary"
+              onPress={handleUnarchive}
+              disabled={!isConnected || isUnarchiving}
+            >
+              Unarchive
+            </Button>
+          </View>
+        </View>
+      </View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create(((theme: Theme) => ({
+  container: {
+    flexDirection: "column",
+    position: "relative",
+  },
+  inputAreaContainer: {
+    position: "relative",
+    minHeight: FOOTER_HEIGHT,
+    marginHorizontal: "auto",
+    alignItems: "center",
+    width: "100%",
+    overflow: "visible",
+    padding: theme.spacing[4],
+  },
+  inputAreaContent: {
+    width: "100%",
+    maxWidth: MAX_CONTENT_WIDTH,
+  },
+  callout: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing[3],
+    backgroundColor: theme.colors.surface1,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.borderAccent,
+    borderRadius: theme.borderRadius["2xl"],
+    paddingVertical: {
+      xs: theme.spacing[3],
+      md: theme.spacing[4],
+    },
+    paddingHorizontal: {
+      xs: theme.spacing[4],
+      md: theme.spacing[6],
+    },
+  },
+  calloutText: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.base,
+  },
+})) as any) as Record<string, any>;

packages/app/src/components/artifact-drawer.tsx

@@ -1,10 +1,4 @@
-import {
-  View,
-  Text,
-  ScrollView,
-  Pressable,
-  Modal,
-} from "react-native";
+import { View, Text, ScrollView, Pressable, Modal } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { StyleSheet } from "react-native-unistyles";
 import { Fonts } from "@/constants/theme";
@@ -185,15 +179,8 @@ export function ArtifactDrawer({ artifact, onClose }: ArtifactDrawerProps) {
               </Text>
             </View>
             <View style={styles.headerActions}>
-              <View
-                style={[
-                  styles.badge,
-                  typeBadgeStyles[artifact.type],
-                ]}
-              >
-                <Text style={styles.badgeText}>
-                  {artifact.type.toUpperCase()}
-                </Text>
+              <View style={[styles.badge, typeBadgeStyles[artifact.type]]}>
+                <Text style={styles.badgeText}>{artifact.type.toUpperCase()}</Text>
               </View>
               <Pressable onPress={onClose} style={styles.closeButton}>
                 <Text style={styles.closeButtonText}>×</Text>
@@ -208,12 +195,8 @@ export function ArtifactDrawer({ artifact, onClose }: ArtifactDrawerProps) {
         >
           {artifact.type === "image" ? (
             <View style={styles.imagePlaceholder}>
-              <Text style={styles.imagePlaceholderText}>
-                Image viewing not yet implemented
-              </Text>
-              <Text style={styles.imagePlaceholderSubtext}>
-                Base64 image data received
-              </Text>
+              <Text style={styles.imagePlaceholderText}>Image viewing not yet implemented</Text>
+              <Text style={styles.imagePlaceholderSubtext}>Base64 image data received</Text>
             </View>
           ) : (
             <View style={styles.codeContainer}>
@@ -244,9 +227,7 @@ export function ArtifactDrawer({ artifact, onClose }: ArtifactDrawerProps) {
             </View>
             <View style={styles.metadataRow}>
               <Text style={styles.metadataLabel}>Size:</Text>
-              <Text style={styles.metadataValue}>
-                {content.length.toLocaleString()} characters
-              </Text>
+              <Text style={styles.metadataValue}>{content.length.toLocaleString()} characters</Text>
             </View>
           </View>
         </View>

packages/app/src/components/audio-debug-notice.tsx

@@ -49,7 +49,11 @@ function formatDuration(duration?: number): string | null {
   return `${seconds.toFixed(seconds >= 10 ? 0 : 1)} s`;
 }
 
-export function AudioDebugNotice({ info, onDismiss, title = "Dictation Debug" }: AudioDebugNoticeProps) {
+export function AudioDebugNotice({
+  info,
+  onDismiss,
+  title = "Dictation Debug",
+}: AudioDebugNoticeProps) {
   const { theme } = useUnistyles();
   const [copied, setCopied] = useState(false);
 
@@ -115,11 +119,12 @@ export function AudioDebugNotice({ info, onDismiss, title = "Dictation Debug" }:
       </View>
 
       {info.debugRecordingPath ? (
-        <Pressable style={styles.pathRow} onPress={handleCopyPath} accessibilityLabel="Copy raw audio path">
-          <Text
-            numberOfLines={2}
-            style={[styles.pathText, { color: theme.colors.foreground }]}
-          >
+        <Pressable
+          style={styles.pathRow}
+          onPress={handleCopyPath}
+          accessibilityLabel="Copy raw audio path"
+        >
+          <Text numberOfLines={2} style={[styles.pathText, { color: theme.colors.foreground }]}>
             {info.debugRecordingPath}
           </Text>
           <View style={[styles.copyPill, { backgroundColor: theme.colors.primary }]}>
@@ -137,9 +142,7 @@ export function AudioDebugNotice({ info, onDismiss, title = "Dictation Debug" }:
       )}
 
       {stats ? (
-        <Text style={[styles.stats, { color: theme.colors.foregroundMuted }]}>
-          {stats}
-        </Text>
+        <Text style={[styles.stats, { color: theme.colors.foregroundMuted }]}>{stats}</Text>
       ) : null}
     </View>
   );

packages/app/src/components/code-insets.ts

@@ -1,3 +1,12 @@
+/**
+ * Compute the pixel width for a line-number gutter based on the highest
+ * line number that will be displayed. Minimum width accommodates 2 digits.
+ */
+export function lineNumberGutterWidth(maxLineNumber: number): number {
+  const digits = Math.max(2, String(maxLineNumber).length);
+  return digits * 8 + 12;
+}
+
 export function getCodeInsets(theme: any) {
   const padding =
     typeof theme.spacing?.[3] === "number"

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

@@ -0,0 +1,382 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import { View, Text, Pressable, Platform } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { ArrowLeft, Check, ChevronDown, ChevronRight } from "lucide-react-native";
+import type { AgentModelDefinition, AgentProvider } from "@server/server/agent/agent-sdk-types";
+import type { AgentProviderDefinition } from "@server/server/agent/provider-manifest";
+import { Combobox, ComboboxItem, SearchInput } from "@/components/ui/combobox";
+import { getProviderIcon } from "@/components/provider-icons";
+
+const INLINE_MODEL_THRESHOLD = 8;
+
+type DrillDownView = { provider: string };
+
+function resolveDefaultModelLabel(models: AgentModelDefinition[] | undefined): string {
+  if (!models || models.length === 0) {
+    return "Select model";
+  }
+  return (models.find((model) => model.isDefault) ?? models[0])?.label ?? "Select model";
+}
+
+interface CombinedModelSelectorProps {
+  providerDefinitions: AgentProviderDefinition[];
+  allProviderModels: Map<string, AgentModelDefinition[]>;
+  selectedProvider: string;
+  selectedModel: string;
+  onSelect: (provider: AgentProvider, modelId: string) => void;
+  isLoading: boolean;
+  disabled?: boolean;
+}
+
+export function CombinedModelSelector({
+  providerDefinitions,
+  allProviderModels,
+  selectedProvider,
+  selectedModel,
+  onSelect,
+  isLoading,
+  disabled = false,
+}: CombinedModelSelectorProps) {
+  const { theme } = useUnistyles();
+  const anchorRef = useRef<View>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [view, setView] = useState<"groups" | DrillDownView>("groups");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      setIsOpen(open);
+      if (open) {
+        const models = allProviderModels.get(selectedProvider);
+        if (models && models.length > INLINE_MODEL_THRESHOLD) {
+          setView({ provider: selectedProvider });
+        }
+      } else {
+        setView("groups");
+        setSearchQuery("");
+      }
+    },
+    [allProviderModels, selectedProvider],
+  );
+
+  const handleSelect = useCallback(
+    (provider: string, modelId: string) => {
+      onSelect(provider as AgentProvider, modelId);
+      setIsOpen(false);
+      setView("groups");
+      setSearchQuery("");
+    },
+    [onSelect],
+  );
+
+  const ProviderIcon = getProviderIcon(selectedProvider);
+
+  const selectedModelLabel = useMemo(() => {
+    const models = allProviderModels.get(selectedProvider);
+    if (!models) return isLoading ? "Loading..." : "Select model";
+    const model = models.find((m) => m.id === selectedModel);
+    return model?.label ?? resolveDefaultModelLabel(models);
+  }, [allProviderModels, selectedProvider, selectedModel, isLoading]);
+
+  return (
+    <>
+      <Pressable
+        ref={anchorRef}
+        collapsable={false}
+        disabled={disabled}
+        onPress={() => handleOpenChange(!isOpen)}
+        style={({ pressed, hovered }) => [
+          styles.trigger,
+          hovered && styles.triggerHovered,
+          (pressed || isOpen) && styles.triggerPressed,
+          disabled && styles.triggerDisabled,
+        ]}
+        accessibilityRole="button"
+        accessibilityLabel={`Select model (${selectedModelLabel})`}
+        testID="combined-model-selector"
+      >
+        <ProviderIcon size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
+        <Text style={styles.triggerText}>{selectedModelLabel}</Text>
+        <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+      </Pressable>
+      <Combobox
+        options={[]}
+        value=""
+        onSelect={() => {}}
+        open={isOpen}
+        onOpenChange={handleOpenChange}
+        anchorRef={anchorRef}
+        desktopPlacement="top-start"
+        title="Select model"
+      >
+        {view === "groups" ? (
+          <GroupsView
+            providerDefinitions={providerDefinitions}
+            allProviderModels={allProviderModels}
+            selectedProvider={selectedProvider}
+            selectedModel={selectedModel}
+            onSelect={handleSelect}
+            onDrillDown={(provider) => {
+              setView({ provider });
+              setSearchQuery("");
+            }}
+          />
+        ) : (
+          <DrillDownModelView
+            provider={view.provider}
+            providerDefinitions={providerDefinitions}
+            models={allProviderModels.get(view.provider) ?? []}
+            selectedProvider={selectedProvider}
+            selectedModel={selectedModel}
+            searchQuery={searchQuery}
+            onSearchChange={setSearchQuery}
+            onSelect={handleSelect}
+            onBack={() => {
+              setView("groups");
+              setSearchQuery("");
+            }}
+          />
+        )}
+      </Combobox>
+    </>
+  );
+}
+
+function GroupsView({
+  providerDefinitions,
+  allProviderModels,
+  selectedProvider,
+  selectedModel,
+  onSelect,
+  onDrillDown,
+}: {
+  providerDefinitions: AgentProviderDefinition[];
+  allProviderModels: Map<string, AgentModelDefinition[]>;
+  selectedProvider: string;
+  selectedModel: string;
+  onSelect: (provider: string, modelId: string) => void;
+  onDrillDown: (provider: string) => void;
+}) {
+  const { theme } = useUnistyles();
+
+  return (
+    <View>
+      {providerDefinitions.map((def, index) => {
+        const models = allProviderModels.get(def.id) ?? [];
+        const isInline = models.length <= INLINE_MODEL_THRESHOLD;
+        const ProvIcon = getProviderIcon(def.id);
+
+        return (
+          <View key={def.id}>
+            {index > 0 ? <View style={styles.separator} /> : null}
+
+            {isInline ? (
+              <>
+                <View style={styles.sectionHeading}>
+                  <ProvIcon size={14} color={theme.colors.foregroundMuted} />
+                  <Text style={styles.sectionHeadingText}>{def.label}</Text>
+                </View>
+                {models.map((model) => (
+                  <ComboboxItem
+                    key={model.id}
+                    label={model.label}
+                    selected={model.id === selectedModel && def.id === selectedProvider}
+                    onPress={() => onSelect(def.id, model.id)}
+                  />
+                ))}
+              </>
+            ) : (
+              <Pressable
+                onPress={() => onDrillDown(def.id)}
+                style={({ pressed, hovered }) => [
+                  styles.drillDownRow,
+                  hovered && styles.drillDownRowHovered,
+                  pressed && styles.drillDownRowPressed,
+                ]}
+              >
+                <ProvIcon size={14} color={theme.colors.foregroundMuted} />
+                <Text style={styles.drillDownText}>{def.label}</Text>
+                <View style={styles.drillDownTrailing}>
+                  <Text style={styles.drillDownCount}>{models.length}</Text>
+                  <ChevronRight size={14} color={theme.colors.foregroundMuted} />
+                </View>
+              </Pressable>
+            )}
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+function DrillDownModelView({
+  provider,
+  providerDefinitions,
+  models,
+  selectedProvider,
+  selectedModel,
+  searchQuery,
+  onSearchChange,
+  onSelect,
+  onBack,
+}: {
+  provider: string;
+  providerDefinitions: AgentProviderDefinition[];
+  models: AgentModelDefinition[];
+  selectedProvider: string;
+  selectedModel: string;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  onSelect: (provider: string, modelId: string) => void;
+  onBack: () => void;
+}) {
+  const { theme } = useUnistyles();
+  const ProvIcon = getProviderIcon(provider);
+  const providerLabel = providerDefinitions.find((d) => d.id === provider)?.label ?? provider;
+
+  const filteredModels = useMemo(() => {
+    if (!searchQuery.trim()) return models;
+    const q = searchQuery.toLowerCase();
+    return models.filter(
+      (m) => m.label.toLowerCase().includes(q) || m.id.toLowerCase().includes(q),
+    );
+  }, [models, searchQuery]);
+
+  return (
+    <View>
+      <Pressable
+        onPress={onBack}
+        style={({ pressed, hovered }) => [
+          styles.backButton,
+          hovered && styles.backButtonHovered,
+          pressed && styles.backButtonPressed,
+        ]}
+      >
+        <ArrowLeft size={14} color={theme.colors.foregroundMuted} />
+        <ProvIcon size={14} color={theme.colors.foregroundMuted} />
+        <Text style={styles.backButtonText}>{providerLabel}</Text>
+      </Pressable>
+
+      <SearchInput
+        placeholder="Search models..."
+        value={searchQuery}
+        onChangeText={onSearchChange}
+        autoFocus={Platform.OS === "web"}
+      />
+
+      {filteredModels.map((model) => (
+        <ComboboxItem
+          key={model.id}
+          label={model.label}
+          description={model.description}
+          selected={model.id === selectedModel && provider === selectedProvider}
+          onPress={() => onSelect(provider, model.id)}
+        />
+      ))}
+
+      {filteredModels.length === 0 ? (
+        <View style={styles.emptyState}>
+          <Text style={styles.emptyStateText}>No models match your search</Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  trigger: {
+    height: 28,
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "transparent",
+    gap: theme.spacing[1],
+    paddingHorizontal: theme.spacing[2],
+    borderRadius: theme.borderRadius["2xl"],
+  },
+  triggerHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+  triggerPressed: {
+    backgroundColor: theme.colors.surface0,
+  },
+  triggerDisabled: {
+    opacity: 0.5,
+  },
+  triggerText: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.normal,
+  },
+  separator: {
+    height: 1,
+    backgroundColor: theme.colors.border,
+    marginVertical: theme.spacing[1],
+  },
+  sectionHeading: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[1],
+  },
+  sectionHeadingText: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
+    color: theme.colors.foregroundMuted,
+  },
+  drillDownRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[2],
+    minHeight: 36,
+  },
+  drillDownRowHovered: {
+    backgroundColor: theme.colors.surface1,
+  },
+  drillDownRowPressed: {
+    backgroundColor: theme.colors.surface2,
+  },
+  drillDownText: {
+    flex: 1,
+    fontSize: theme.fontSize.xs,
+    color: theme.colors.foregroundMuted,
+  },
+  drillDownTrailing: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+  },
+  drillDownCount: {
+    fontSize: theme.fontSize.xs,
+    color: theme.colors.foregroundMuted,
+  },
+  backButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[2],
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+  },
+  backButtonHovered: {
+    backgroundColor: theme.colors.surface1,
+  },
+  backButtonPressed: {
+    backgroundColor: theme.colors.surface2,
+  },
+  backButtonText: {
+    fontSize: theme.fontSize.xs,
+    color: theme.colors.foregroundMuted,
+  },
+  emptyState: {
+    paddingVertical: theme.spacing[4],
+    alignItems: "center",
+  },
+  emptyStateText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foregroundMuted,
+  },
+}));

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

@@ -1,13 +1,5 @@
-import {
-  Modal,
-  Pressable,
-  ScrollView,
-  Text,
-  TextInput,
-  View,
-  Platform,
-} from "react-native";
-import { memo, useEffect, useMemo, useRef, type ReactNode } from "react";
+import { Modal, Pressable, ScrollView, Text, TextInput, View, Platform } from "react-native";
+import { memo, useEffect, useRef, type ReactNode } from "react";
 import { Plus, Settings } from "lucide-react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useCommandCenter } from "@/hooks/use-command-center";
@@ -54,31 +46,28 @@ const CommandCenterRow = memo(function CommandCenterRow({
 
 export function CommandCenter() {
   const { theme } = useUnistyles();
-  const {
-    open,
-    inputRef,
-    query,
-    setQuery,
-    activeIndex,
-    items,
-    handleClose,
-    handleSelectItem,
-  } = useCommandCenter();
+  const { open, inputRef, query, setQuery, activeIndex, items, handleClose, handleSelectItem } =
+    useCommandCenter();
 
   const rowRefs = useRef<Map<number, View>>(new Map());
   const resultsRef = useRef<ScrollView>(null);
 
   useEffect(() => {
+    if (!open) {
+      return;
+    }
     const row = rowRefs.current.get(activeIndex);
     if (!row || typeof document === "undefined") {
       return;
     }
     const scrollNode =
-      (resultsRef.current as
-        | (ScrollView & {
-            getScrollableNode?: () => HTMLElement | null;
-          })
-        | null)?.getScrollableNode?.() ?? null;
+      (
+        resultsRef.current as
+          | (ScrollView & {
+              getScrollableNode?: () => HTMLElement | null;
+            })
+          | null
+      )?.getScrollableNode?.() ?? null;
     const rowEl = row as unknown as HTMLElement;
 
     if (!scrollNode) {
@@ -99,32 +88,24 @@ export function CommandCenter() {
     if (rowBottom > visibleBottom) {
       scrollNode.scrollTop = rowBottom - scrollNode.clientHeight;
     }
-  }, [activeIndex]);
+  }, [activeIndex, open]);
 
-  if (Platform.OS !== "web") return null;
+  if (Platform.OS !== "web" || !open) return null;
 
-  const actionItems = useMemo(
-    () => items.filter((item) => item.kind === "action"),
-    [items]
-  );
-  const agentItems = useMemo(
-    () => items.filter((item) => item.kind === "agent"),
-    [items]
-  );
+  const actionItems = items.filter((item) => item.kind === "action");
+  const agentItems = items.filter((item) => item.kind === "agent");
 
   return (
-    <Modal
-      visible={open}
-      transparent
-      animationType="fade"
-      onRequestClose={handleClose}
-    >
+    <Modal visible={open} transparent animationType="fade" onRequestClose={handleClose}>
       <View style={styles.overlay}>
         <Pressable style={styles.backdrop} onPress={handleClose} />
 
         <View
           testID="command-center-panel"
-          style={[styles.panel, { borderColor: theme.colors.border, backgroundColor: theme.colors.surface0 }]}
+          style={[
+            styles.panel,
+            { borderColor: theme.colors.border, backgroundColor: theme.colors.surface0 },
+          ]}
         >
           <View style={[styles.header, { borderBottomColor: theme.colors.border }]}>
             <TextInput
@@ -134,10 +115,7 @@ export function CommandCenter() {
               onChangeText={setQuery}
               placeholder="Type a command or search agents..."
               placeholderTextColor={theme.colors.foregroundMuted}
-              style={[
-                styles.input,
-                { color: theme.colors.foreground },
-              ]}
+              style={[styles.input, { color: theme.colors.foreground }]}
               autoCapitalize="none"
               autoCorrect={false}
               autoFocus
@@ -167,11 +145,7 @@ export function CommandCenter() {
                       const action = item.action;
                       const actionIcon =
                         action.icon === "plus" ? (
-                          <Plus
-                            size={16}
-                            strokeWidth={2.4}
-                            color={theme.colors.foregroundMuted}
-                          />
+                          <Plus size={16} strokeWidth={2.4} color={theme.colors.foregroundMuted} />
                         ) : action.icon === "settings" ? (
                           <Settings
                             size={16}
@@ -204,7 +178,7 @@ export function CommandCenter() {
                               </View>
                             </View>
                             {action.shortcutKeys ? (
-                              <Shortcut keys={action.shortcutKeys} style={styles.rowShortcut} />
+                              <Shortcut chord={action.shortcutKeys} style={styles.rowShortcut} />
                             ) : null}
                           </View>
                         </CommandCenterRow>

packages/app/src/components/composer.status-controls.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { resolveStatusControlMode } from "./composer.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,
+        allProviderModels: new Map(),
+        isAllModelsLoading: false,
+        onSelectProviderAndModel: () => undefined,
+        thinkingOptions: [],
+        selectedThinkingOptionId: "",
+        onSelectThinkingOption: () => undefined,
+      }),
+    ).toBe("draft");
+  });
+});

packages/app/src/components/composer.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/composer.tsx

@@ -0,0 +1,843 @@
+import { View, Pressable, Text, ActivityIndicator, Platform } from "react-native";
+import { useState, useEffect, useRef, useCallback } from "react";
+import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { useShallow } from "zustand/shallow";
+import { ArrowUp, Square, Pencil, AudioLines } from "lucide-react-native";
+import Animated from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { FOOTER_HEIGHT, MAX_CONTENT_WIDTH } from "@/constants/layout";
+import { generateMessageId, type StreamItem } from "@/types/stream";
+import {
+  AgentStatusBar,
+  DraftAgentStatusBar,
+  type DraftAgentStatusBarProps,
+} from "./agent-status-bar";
+import { useImageAttachmentPicker } from "@/hooks/use-image-attachment-picker";
+import { useSessionStore } from "@/stores/session-store";
+import {
+  MessageInput,
+  type MessagePayload,
+  type ImageAttachment,
+  type MessageInputRef,
+} from "./message-input";
+import { Theme } from "@/styles/theme";
+import type { DraftCommandConfig } from "@/hooks/use-agent-commands-query";
+import { encodeImages } from "@/utils/encode-images";
+import { focusWithRetries } from "@/utils/web-focus";
+import { useVoiceOptional } from "@/contexts/voice-context";
+import { useToast } from "@/contexts/toast-context";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { Shortcut } from "@/components/ui/shortcut";
+import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
+import { Autocomplete } from "@/components/ui/autocomplete";
+import { useAgentAutocomplete } from "@/hooks/use-agent-autocomplete";
+import {
+  useHostRuntimeAgentDirectoryStatus,
+  useHostRuntimeClient,
+  useHostRuntimeIsConnected,
+} from "@/runtime/host-runtime";
+import {
+  deleteAttachments,
+  persistAttachmentFromBlob,
+  persistAttachmentFromFileUri,
+} from "@/attachments/service";
+import { resolveStatusControlMode } from "@/components/composer.status-controls";
+import { markScrollInvestigationRender } from "@/utils/scroll-jank-investigation";
+import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
+import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
+import type { KeyboardActionDefinition } from "@/keyboard/keyboard-action-dispatcher";
+import { submitAgentInput } from "@/components/agent-input-submit";
+
+type QueuedMessage = {
+  id: string;
+  text: string;
+  images?: ImageAttachment[];
+};
+
+type ImageListUpdater = ImageAttachment[] | ((prev: ImageAttachment[]) => ImageAttachment[]);
+
+interface ComposerProps {
+  agentId: string;
+  serverId: string;
+  isInputActive: boolean;
+  onSubmitMessage?: (payload: MessagePayload) => Promise<void>;
+  allowEmptySubmit?: boolean;
+  /** Externally controlled loading state. When true, disables the submit button. */
+  isSubmitLoading?: boolean;
+  /** When true, blurs the input immediately when submitting. */
+  blurOnSubmit?: boolean;
+  value: string;
+  onChangeText: (text: string) => void;
+  images: ImageAttachment[];
+  onChangeImages: (updater: ImageListUpdater) => void;
+  clearDraft: (lifecycle: "sent" | "abandoned") => void;
+  /** When true, auto-focuses the text input on web. */
+  autoFocus?: boolean;
+  /** Callback to expose the addImages function to parent components */
+  onAddImages?: (addImages: (images: ImageAttachment[]) => void) => void;
+  /** Optional draft context for listing commands before an agent exists. */
+  commandDraftConfig?: DraftCommandConfig;
+  /** Called when a message is about to be sent (any path: keyboard, dictation, queued). */
+  onMessageSent?: () => void;
+  onComposerHeightChange?: (height: number) => void;
+  onAttentionInputFocus?: () => void;
+  onAttentionPromptSend?: () => void;
+  /** Controlled status controls rendered in input area (draft flows). */
+  statusControls?: DraftAgentStatusBarProps;
+}
+
+const EMPTY_ARRAY: readonly QueuedMessage[] = [];
+const DESKTOP_MESSAGE_PLACEHOLDER = "Message the agent, tag @files, or use /commands and /skills";
+const MOBILE_MESSAGE_PLACEHOLDER = "Message, @files, /commands";
+
+export function Composer({
+  agentId,
+  serverId,
+  isInputActive,
+  onSubmitMessage,
+  allowEmptySubmit = false,
+  isSubmitLoading = false,
+  blurOnSubmit = false,
+  value,
+  onChangeText,
+  images,
+  onChangeImages,
+  clearDraft,
+  autoFocus = false,
+  onAddImages,
+  commandDraftConfig,
+  onMessageSent,
+  onComposerHeightChange,
+  onAttentionInputFocus,
+  onAttentionPromptSend,
+  statusControls,
+}: ComposerProps) {
+  markScrollInvestigationRender(`Composer:${serverId}:${agentId}`);
+  const { theme } = useUnistyles();
+  const buttonIconSize = Platform.OS === "web" ? theme.iconSize.md : theme.iconSize.lg;
+  const insets = useSafeAreaInsets();
+  const client = useHostRuntimeClient(serverId);
+  const isConnected = useHostRuntimeIsConnected(serverId);
+  const agentDirectoryStatus = useHostRuntimeAgentDirectoryStatus(serverId);
+  const toast = useToast();
+  const voice = useVoiceOptional();
+  const voiceToggleKeys = useShortcutKeys("voice-toggle");
+  const dictationCancelKeys = useShortcutKeys("dictation-cancel");
+  const isDictationReady =
+    isConnected &&
+    (agentDirectoryStatus === "ready" ||
+      agentDirectoryStatus === "revalidating" ||
+      agentDirectoryStatus === "error_after_ready");
+
+  const agentState = useSessionStore(
+    useShallow((state) => {
+      const agent = state.sessions[serverId]?.agents?.get(agentId) ?? null;
+      return {
+        status: agent?.status ?? null,
+      };
+    }),
+  );
+
+  const queuedMessagesRaw = useSessionStore((state) =>
+    state.sessions[serverId]?.queuedMessages?.get(agentId),
+  );
+  const queuedMessages = queuedMessagesRaw ?? EMPTY_ARRAY;
+
+  const setQueuedMessages = useSessionStore((state) => state.setQueuedMessages);
+  const setAgentStreamTail = useSessionStore((state) => state.setAgentStreamTail);
+  const setAgentStreamHead = useSessionStore((state) => state.setAgentStreamHead);
+
+  const isDesktopWebBreakpoint =
+    Platform.OS === "web" &&
+    UnistylesRuntime.breakpoint !== "xs" &&
+    UnistylesRuntime.breakpoint !== "sm";
+  const messagePlaceholder = isDesktopWebBreakpoint
+    ? DESKTOP_MESSAGE_PLACEHOLDER
+    : MOBILE_MESSAGE_PLACEHOLDER;
+  const userInput = value;
+  const setUserInput = onChangeText;
+  const selectedImages = images;
+  const setSelectedImages = onChangeImages;
+  const [cursorIndex, setCursorIndex] = useState(0);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isCancellingAgent, setIsCancellingAgent] = useState(false);
+  const [sendError, setSendError] = useState<string | null>(null);
+  const [isMessageInputFocused, setIsMessageInputFocused] = useState(false);
+  const messageInputRef = useRef<MessageInputRef>(null);
+  const keyboardHandlerIdRef = useRef(
+    `message-input:${serverId}:${agentId}:${Math.random().toString(36).slice(2)}`,
+  );
+
+  const autocomplete = useAgentAutocomplete({
+    userInput,
+    cursorIndex,
+    setUserInput,
+    serverId,
+    agentId,
+    draftConfig: commandDraftConfig,
+    onAutocompleteApplied: () => {
+      messageInputRef.current?.focus();
+    },
+  });
+
+  // Clear send error when user edits the input
+  useEffect(() => {
+    if (sendError && userInput) {
+      setSendError(null);
+    }
+  }, [userInput, sendError]);
+
+  useEffect(() => {
+    setCursorIndex((current) => Math.min(current, userInput.length));
+  }, [userInput.length]);
+
+  const { pickImages } = useImageAttachmentPicker();
+  const agentIdRef = useRef(agentId);
+  const sendAgentMessageRef = useRef<
+    ((agentId: string, text: string, images?: ImageAttachment[]) => Promise<void>) | null
+  >(null);
+  const onSubmitMessageRef = useRef(onSubmitMessage);
+
+  // Expose addImages function to parent for drag-and-drop support
+  const addImages = useCallback(
+    (images: ImageAttachment[]) => {
+      setSelectedImages((prev) => [...prev, ...images]);
+    },
+    [setSelectedImages],
+  );
+
+  useEffect(() => {
+    onAddImages?.(addImages);
+  }, [addImages, onAddImages]);
+
+  const submitMessage = useCallback(
+    async (text: string, images?: ImageAttachment[]) => {
+      onMessageSent?.();
+      if (onSubmitMessageRef.current) {
+        await onSubmitMessageRef.current({ text, images });
+        return;
+      }
+      if (!sendAgentMessageRef.current) {
+        throw new Error("Host is not connected");
+      }
+      await sendAgentMessageRef.current(agentIdRef.current, text, images);
+    },
+    [onMessageSent],
+  );
+
+  useEffect(() => {
+    agentIdRef.current = agentId;
+  }, [agentId]);
+
+  useEffect(() => {
+    sendAgentMessageRef.current = async (
+      agentId: string,
+      text: string,
+      images?: ImageAttachment[],
+    ) => {
+      if (!client) {
+        throw new Error("Host is not connected");
+      }
+
+      const clientMessageId = generateMessageId();
+      const userMessage: StreamItem = {
+        kind: "user_message",
+        id: clientMessageId,
+        text,
+        timestamp: new Date(),
+        ...(images && images.length > 0 ? { images } : {}),
+      };
+
+      // Append to head if streaming (keeps the user message with the current
+      // turn so late text_deltas still find the existing assistant_message).
+      // Otherwise append to tail.
+      const currentHead = useSessionStore
+        .getState()
+        .sessions[serverId]?.agentStreamHead?.get(agentId);
+      if (currentHead && currentHead.length > 0) {
+        setAgentStreamHead(serverId, (prev) => {
+          const head = prev.get(agentId) || [];
+          const updated = new Map(prev);
+          updated.set(agentId, [...head, userMessage]);
+          return updated;
+        });
+      } else {
+        setAgentStreamTail(serverId, (prev) => {
+          const currentStream = prev.get(agentId) || [];
+          const updated = new Map(prev);
+          updated.set(agentId, [...currentStream, userMessage]);
+          return updated;
+        });
+      }
+      const imagesData = await encodeImages(images);
+      await client.sendAgentMessage(agentId, text, {
+        messageId: clientMessageId,
+        ...(imagesData && imagesData.length > 0 ? { images: imagesData } : {}),
+      });
+      onAttentionPromptSend?.();
+    };
+  }, [client, onAttentionPromptSend, serverId, setAgentStreamTail, setAgentStreamHead]);
+
+  useEffect(() => {
+    onSubmitMessageRef.current = onSubmitMessage;
+  }, [onSubmitMessage]);
+
+  const isAgentRunning = agentState.status === "running";
+  const hasAgent = agentState.status !== null;
+
+  const updateQueue = useCallback(
+    (updater: (current: QueuedMessage[]) => QueuedMessage[]) => {
+      setQueuedMessages(serverId, (prev: Map<string, QueuedMessage[]>) => {
+        const next = new Map(prev);
+        next.set(agentId, updater(prev.get(agentId) ?? []));
+        return next;
+      });
+    },
+    [agentId, serverId, setQueuedMessages],
+  );
+
+  function queueMessage(message: string, imageAttachments?: ImageAttachment[]) {
+    const trimmedMessage = message.trim();
+    if (!trimmedMessage && !imageAttachments?.length) return;
+
+    const newItem = {
+      id: generateMessageId(),
+      text: trimmedMessage,
+      images: imageAttachments,
+    };
+
+    setQueuedMessages(serverId, (prev: Map<string, QueuedMessage[]>) => {
+      const next = new Map(prev);
+      next.set(agentId, [...(prev.get(agentId) ?? []), newItem]);
+      return next;
+    });
+
+    setUserInput("");
+    setSelectedImages([]);
+  }
+
+  async function sendMessageWithContent(
+    message: string,
+    imageAttachments?: ImageAttachment[],
+    forceSend?: boolean,
+  ) {
+    await submitAgentInput({
+      message,
+      imageAttachments,
+      forceSend,
+      isAgentRunning: agentState.status === "running",
+      // Parent-managed submits are still valid submit paths even when the
+      // transport is disconnected, because the parent decides the failure mode.
+      canSubmit: Boolean(sendAgentMessageRef.current || onSubmitMessageRef.current),
+      queueMessage: ({ message, imageAttachments }) => {
+        queueMessage(message, imageAttachments);
+      },
+      submitMessage: async ({ message, imageAttachments }) => {
+        await submitMessage(message, imageAttachments);
+      },
+      clearDraft,
+      setUserInput,
+      setSelectedImages: (images) => {
+        setSelectedImages(images);
+      },
+      setSendError,
+      setIsProcessing,
+      onSubmitError: (error) => {
+        console.error("[AgentInput] Failed to send message:", error);
+      },
+    });
+  }
+
+  function handleSubmit(payload: MessagePayload) {
+    if (blurOnSubmit) {
+      messageInputRef.current?.blur();
+    }
+    void sendMessageWithContent(payload.text, payload.images, payload.forceSend);
+  }
+
+  async function handlePickImage() {
+    const result = await pickImages();
+    if (!result?.length) {
+      return;
+    }
+
+    const newImages = await Promise.all(
+      result.map(async (pickedImage) => {
+        if (pickedImage.source.kind === "blob") {
+          return await persistAttachmentFromBlob({
+            blob: pickedImage.source.blob,
+            mimeType: pickedImage.mimeType || "image/jpeg",
+            fileName: pickedImage.fileName ?? null,
+          });
+        }
+
+        return await persistAttachmentFromFileUri({
+          uri: pickedImage.source.uri,
+          mimeType: pickedImage.mimeType || "image/jpeg",
+          fileName: pickedImage.fileName ?? null,
+        });
+      }),
+    );
+    setSelectedImages((prev) => [...prev, ...newImages]);
+  }
+
+  function handleRemoveImage(index: number) {
+    setSelectedImages((prev) => {
+      const removed = prev[index];
+      if (removed) {
+        void deleteAttachments([removed]);
+      }
+      return prev.filter((_, i) => i !== index);
+    });
+  }
+
+  useEffect(() => {
+    if (!isAgentRunning || !isConnected) {
+      setIsCancellingAgent(false);
+    }
+  }, [isAgentRunning, isConnected]);
+
+  const handleKeyboardAction = useCallback(
+    (action: KeyboardActionDefinition): boolean => {
+      if (!isInputActive) {
+        return false;
+      }
+
+      switch (action.id) {
+        case "message-input.focus":
+          if (Platform.OS !== "web") {
+            messageInputRef.current?.focus();
+            return true;
+          }
+
+          focusWithRetries({
+            focus: () => messageInputRef.current?.focus(),
+            isFocused: () => {
+              const el = messageInputRef.current?.getNativeElement?.() ?? null;
+              const active = typeof document !== "undefined" ? document.activeElement : null;
+              return Boolean(el) && active === el;
+            },
+          });
+          return true;
+        case "message-input.dictation-toggle":
+          messageInputRef.current?.runKeyboardAction("dictation-toggle");
+          return true;
+        case "message-input.dictation-cancel":
+          messageInputRef.current?.runKeyboardAction("dictation-cancel");
+          return true;
+        case "message-input.voice-toggle":
+          messageInputRef.current?.runKeyboardAction("voice-toggle");
+          return true;
+        case "message-input.voice-mute-toggle":
+          messageInputRef.current?.runKeyboardAction("voice-mute-toggle");
+          return true;
+        default:
+          return false;
+      }
+    },
+    [isInputActive],
+  );
+
+  useKeyboardActionHandler({
+    handlerId: keyboardHandlerIdRef.current,
+    actions: [
+      "message-input.focus",
+      "message-input.dictation-toggle",
+      "message-input.dictation-cancel",
+      "message-input.voice-toggle",
+      "message-input.voice-mute-toggle",
+    ],
+    enabled: isInputActive,
+    priority: isMessageInputFocused ? 200 : 100,
+    isActive: () => isInputActive,
+    handle: handleKeyboardAction,
+  });
+
+  const { style: keyboardAnimatedStyle } = useKeyboardShiftStyle({
+    mode: "translate",
+  });
+
+  function handleCancelAgent() {
+    if (!isAgentRunning || isCancellingAgent) {
+      return;
+    }
+    if (!isConnected || !client) {
+      return;
+    }
+    setIsCancellingAgent(true);
+    void client.cancelAgent(agentIdRef.current);
+    messageInputRef.current?.focus();
+  }
+
+  const isVoiceModeForAgent = voice?.isVoiceModeForAgent(serverId, agentId) ?? false;
+
+  const handleToggleRealtimeVoice = useCallback(() => {
+    if (!voice || !isConnected || !hasAgent) {
+      return;
+    }
+    if (voice.isVoiceSwitching) {
+      return;
+    }
+    if (voice.isVoiceModeForAgent(serverId, agentId)) {
+      return;
+    }
+    void voice.startVoice(serverId, agentId).catch((error) => {
+      console.error("[Composer] Failed to start voice mode", error);
+      const message =
+        error instanceof Error ? error.message : typeof error === "string" ? error : null;
+      if (message && message.trim().length > 0) {
+        toast.error(message);
+      }
+    });
+  }, [agentId, hasAgent, isConnected, serverId, toast, voice]);
+
+  function handleEditQueuedMessage(id: string) {
+    const item = queuedMessages.find((q) => q.id === id);
+    if (!item) return;
+
+    updateQueue((current) => current.filter((q) => q.id !== id));
+    setUserInput(item.text);
+    setSelectedImages(item.images ?? []);
+  }
+
+  async function handleSendQueuedNow(id: string) {
+    const item = queuedMessages.find((q) => q.id === id);
+    if (!item) return;
+    if (!sendAgentMessageRef.current && !onSubmitMessageRef.current) return;
+
+    updateQueue((current) => current.filter((q) => q.id !== id));
+
+    // Reuse the regular send path; server-side send atomically interrupts any active run.
+    try {
+      await submitMessage(item.text, item.images);
+    } catch (error) {
+      updateQueue((current) => [item, ...current]);
+      setSendError(error instanceof Error ? error.message : "Failed to send message");
+    }
+  }
+
+  const handleQueue = useCallback((payload: MessagePayload) => {
+    queueMessage(payload.text, payload.images);
+  }, []);
+
+  const hasSendableContent = userInput.trim().length > 0 || selectedImages.length > 0;
+
+  // Handle keyboard navigation for command autocomplete and stop action.
+  const handleCommandKeyPress = useCallback(
+    (event: { key: string; preventDefault: () => void }) => {
+      if (
+        event.key === "Escape" &&
+        isAgentRunning &&
+        !hasSendableContent &&
+        !isCancellingAgent &&
+        isConnected
+      ) {
+        event.preventDefault();
+        handleCancelAgent();
+        return true;
+      }
+
+      return autocomplete.onKeyPress(event);
+    },
+    [
+      autocomplete,
+      hasSendableContent,
+      isAgentRunning,
+      isCancellingAgent,
+      isConnected,
+      handleCancelAgent,
+    ],
+  );
+
+  const cancelButton =
+    isAgentRunning && !hasSendableContent && !isProcessing ? (
+      <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
+        <TooltipTrigger
+          onPress={handleCancelAgent}
+          disabled={!isConnected || isCancellingAgent}
+          accessibilityLabel={isCancellingAgent ? "Canceling agent" : "Stop agent"}
+          accessibilityRole="button"
+          style={[
+            styles.cancelButton as any,
+            (!isConnected || isCancellingAgent ? styles.buttonDisabled : undefined) as any,
+          ]}
+        >
+          {isCancellingAgent ? (
+            <ActivityIndicator size="small" color="white" />
+          ) : (
+            <Square size={buttonIconSize} color="white" fill="white" />
+          )}
+        </TooltipTrigger>
+        <TooltipContent side="top" align="center" offset={8}>
+            <View style={styles.tooltipRow}>
+              <Text style={styles.tooltipText}>Interrupt</Text>
+              {dictationCancelKeys ? (
+                <Shortcut chord={dictationCancelKeys} style={styles.tooltipShortcut} />
+              ) : null}
+            </View>
+          </TooltipContent>
+        </Tooltip>
+    ) : null;
+
+  const rightContent = (
+    <View style={styles.rightControls}>
+      {!isVoiceModeForAgent && hasAgent ? (
+        <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
+          <TooltipTrigger
+            onPress={handleToggleRealtimeVoice}
+            disabled={!isConnected || voice?.isVoiceSwitching}
+            accessibilityLabel="Enable Voice mode"
+            accessibilityRole="button"
+            style={({ hovered }) => [
+              styles.realtimeVoiceButton as any,
+              (hovered ? styles.iconButtonHovered : undefined) as any,
+              (!isConnected || voice?.isVoiceSwitching ? styles.buttonDisabled : undefined) as any,
+            ]}
+          >
+            {voice?.isVoiceSwitching ? (
+              <ActivityIndicator size="small" color="white" />
+            ) : (
+              <AudioLines size={buttonIconSize} color={theme.colors.foreground} />
+            )}
+          </TooltipTrigger>
+          <TooltipContent side="top" align="center" offset={8}>
+            <View style={styles.tooltipRow}>
+              <Text style={styles.tooltipText}>Voice mode</Text>
+              {voiceToggleKeys ? (
+                <Shortcut chord={voiceToggleKeys} style={styles.tooltipShortcut} />
+              ) : null}
+            </View>
+          </TooltipContent>
+        </Tooltip>
+      ) : null}
+      {cancelButton}
+    </View>
+  );
+
+  const leftContent =
+    resolveStatusControlMode(statusControls) === "draft" && statusControls ? (
+      <DraftAgentStatusBar {...statusControls} />
+    ) : (
+      <AgentStatusBar agentId={agentId} serverId={serverId} />
+    );
+
+  return (
+    <Animated.View
+      style={[styles.container, { paddingBottom: insets.bottom }, keyboardAnimatedStyle]}
+    >
+      {/* Input area */}
+      <View style={styles.inputAreaContainer}>
+        <View style={styles.inputAreaContent}>
+          {/* Queue list */}
+          {queuedMessages.length > 0 && (
+            <View style={styles.queueContainer}>
+              {queuedMessages.map((item) => (
+                <View key={item.id} style={styles.queueItem}>
+                  <Text style={styles.queueText} numberOfLines={2} ellipsizeMode="tail">
+                    {item.text}
+                  </Text>
+                  <View style={styles.queueActions}>
+                    <Pressable
+                      onPress={() => handleEditQueuedMessage(item.id)}
+                      style={styles.queueActionButton}
+                    >
+                      <Pencil size={theme.iconSize.sm} color={theme.colors.foreground} />
+                    </Pressable>
+                    <Pressable
+                      onPress={() => handleSendQueuedNow(item.id)}
+                      style={[styles.queueActionButton, styles.queueSendButton]}
+                    >
+                      <ArrowUp size={theme.iconSize.sm} color="white" />
+                    </Pressable>
+                  </View>
+                </View>
+              ))}
+            </View>
+          )}
+
+          {sendError && <Text style={styles.sendErrorText}>{sendError}</Text>}
+
+          <View style={styles.messageInputContainer}>
+            {/* Command + file mention autocomplete rendered as a true popover */}
+            {autocomplete.isVisible && (
+              <View style={styles.autocompletePopover} pointerEvents="box-none">
+                <Autocomplete
+                  options={autocomplete.options}
+                  selectedIndex={autocomplete.selectedIndex}
+                  isLoading={autocomplete.isLoading}
+                  errorMessage={autocomplete.errorMessage}
+                  loadingText={autocomplete.loadingText}
+                  emptyText={autocomplete.emptyText}
+                  onSelect={autocomplete.onSelectOption}
+                />
+              </View>
+            )}
+
+            {/* MessageInput handles everything: text, dictation, attachments, all buttons */}
+            <MessageInput
+              ref={messageInputRef}
+              value={userInput}
+              onChangeText={setUserInput}
+              onSubmit={handleSubmit}
+              allowEmptySubmit={allowEmptySubmit}
+              isSubmitDisabled={isProcessing || isSubmitLoading}
+              isSubmitLoading={isProcessing || isSubmitLoading}
+              images={selectedImages}
+              onPickImages={handlePickImage}
+              onAddImages={addImages}
+              onRemoveImage={handleRemoveImage}
+              client={client}
+              isReadyForDictation={isDictationReady}
+              placeholder={messagePlaceholder}
+              autoFocus={autoFocus && isDesktopWebBreakpoint}
+              autoFocusKey={`${serverId}:${agentId}`}
+              disabled={isSubmitLoading}
+              isInputActive={isInputActive}
+              leftContent={leftContent}
+              rightContent={rightContent}
+              voiceServerId={serverId}
+              voiceAgentId={agentId}
+              isAgentRunning={isAgentRunning}
+              onQueue={handleQueue}
+              onSubmitLoadingPress={isAgentRunning ? handleCancelAgent : undefined}
+              onKeyPress={handleCommandKeyPress}
+              onSelectionChange={(selection) => {
+                setCursorIndex(selection.start);
+              }}
+              onFocusChange={(focused) => {
+                setIsMessageInputFocused(focused);
+                if (focused) {
+                  onAttentionInputFocus?.();
+                }
+              }}
+              onHeightChange={onComposerHeightChange}
+            />
+          </View>
+        </View>
+      </View>
+    </Animated.View>
+  );
+}
+
+const BUTTON_SIZE = 40;
+
+const styles = StyleSheet.create(((theme: Theme) => ({
+  container: {
+    flexDirection: "column",
+    position: "relative",
+  },
+  borderSeparator: {
+    height: theme.borderWidth[1],
+    backgroundColor: theme.colors.border,
+  },
+  inputAreaContainer: {
+    position: "relative",
+    minHeight: FOOTER_HEIGHT,
+    marginHorizontal: "auto",
+    alignItems: "center",
+    width: "100%",
+    overflow: "visible",
+    padding: theme.spacing[4],
+  },
+  inputAreaContent: {
+    width: "100%",
+    maxWidth: MAX_CONTENT_WIDTH,
+    gap: theme.spacing[3],
+  },
+  messageInputContainer: {
+    position: "relative",
+    width: "100%",
+  },
+  autocompletePopover: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: "100%",
+    marginBottom: theme.spacing[3],
+    zIndex: 30,
+  },
+  cancelButton: {
+    width: 28,
+    height: 28,
+    borderRadius: theme.borderRadius.full,
+    backgroundColor: theme.colors.palette.red[600],
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  rightControls: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  realtimeVoiceButton: {
+    width: 28,
+    height: 28,
+    borderRadius: theme.borderRadius.full,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  realtimeVoiceButtonActive: {
+    backgroundColor: theme.colors.palette.green[600],
+    borderColor: theme.colors.palette.green[800],
+  },
+  iconButtonHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+  tooltipRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  tooltipText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.popoverForeground,
+  },
+  tooltipShortcut: {
+    backgroundColor: theme.colors.surface3,
+    borderColor: theme.colors.borderAccent,
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+  queueContainer: {
+    flexDirection: "column",
+    gap: theme.spacing[2],
+  },
+  queueItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[2],
+    backgroundColor: theme.colors.surface1,
+    borderRadius: theme.borderRadius.lg,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+    gap: theme.spacing[2],
+  },
+  queueText: {
+    flex: 1,
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.base,
+  },
+  queueActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  queueActionButton: {
+    width: 32,
+    height: 32,
+    borderRadius: theme.borderRadius.full,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.colors.surface2,
+  },
+  queueSendButton: {
+    backgroundColor: theme.colors.accent,
+  },
+  sendErrorText: {
+    color: theme.colors.palette.red[500],
+    fontSize: theme.fontSize.sm,
+  },
+})) as any) as Record<string, any>;

packages/app/src/components/connection-status.tsx

@@ -40,18 +40,8 @@ export function ConnectionStatus({ isConnected }: ConnectionStatusProps) {
   return (
     <View style={styles.container}>
       <View style={styles.row}>
-        <View
-          style={[
-            styles.dot,
-            isConnected ? styles.dotConnected : styles.dotDisconnected,
-          ]}
-        />
-        <Text
-          style={[
-            styles.text,
-            isConnected ? styles.textConnected : styles.textDisconnected,
-          ]}
-        >
+        <View style={[styles.dot, isConnected ? styles.dotConnected : styles.dotDisconnected]} />
+        <Text style={[styles.text, isConnected ? styles.textConnected : styles.textDisconnected]}>
           {isConnected ? "Connected" : "Disconnected"}
         </Text>
       </View>

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

@@ -24,9 +24,7 @@ interface DictationControlsProps {
 function formatDuration(seconds: number): string {
   const mins = Math.floor(seconds / 60);
   const secs = seconds % 60;
-  return `${mins.toString().padStart(2, "0")}:${secs
-    .toString()
-    .padStart(2, "0")}`;
+  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
 }
 
 export function DictationControls({
@@ -66,12 +64,7 @@ export function DictationControls({
   return (
     <View style={styles.activeContainer}>
       <View style={styles.meterWrapper}>
-        <VolumeMeter
-          volume={volume}
-          isMuted={false}
-          isSpeaking={false}
-          orientation="horizontal"
-        />
+        <VolumeMeter volume={volume} isMuted={false} isSpeaking={false} orientation="horizontal" />
       </View>
       <Text style={[styles.timerText, { color: theme.colors.foreground }]}>
         {formatDuration(duration)}
@@ -152,12 +145,7 @@ export function DictationOverlay({
   }
 
   return (
-    <View
-      style={[
-        overlayStyles.container,
-        { backgroundColor: theme.colors.accent },
-      ]}
-    >
+    <View style={[overlayStyles.container, { backgroundColor: theme.colors.accent }]}>
       <Pressable
         onPress={handleCancel}
         disabled={actionsDisabled && !isFailed}
@@ -180,12 +168,7 @@ export function DictationOverlay({
             orientation="horizontal"
             color={theme.colors.palette.white}
           />
-          <Text
-            style={[
-              overlayStyles.timerText,
-              { color: theme.colors.palette.white },
-            ]}
-          >
+          <Text style={[overlayStyles.timerText, { color: theme.colors.palette.white }]}>
             {formatDuration(duration)}
           </Text>
         </View>
@@ -205,26 +188,16 @@ export function DictationOverlay({
       <View style={overlayStyles.actionButtonsContainer}>
         {actionsDisabled ? (
           <View style={overlayStyles.loadingContainer}>
-            <ActivityIndicator
-              size="small"
-              color={theme.colors.palette.white}
-            />
+            <ActivityIndicator size="small" color={theme.colors.palette.white} />
           </View>
         ) : isFailed ? (
           <Pressable
             onPress={onRetry}
             accessibilityRole="button"
             accessibilityLabel="Retry dictation"
-            style={[
-              overlayStyles.actionButton,
-              { backgroundColor: theme.colors.palette.white },
-            ]}
+            style={[overlayStyles.actionButton, { backgroundColor: theme.colors.palette.white }]}
           >
-            <RefreshCcw
-              size={theme.iconSize.lg}
-              color={theme.colors.accent}
-              strokeWidth={2.5}
-            />
+            <RefreshCcw size={theme.iconSize.lg} color={theme.colors.accent} strokeWidth={2.5} />
           </Pressable>
         ) : (
           <>
@@ -232,10 +205,7 @@ export function DictationOverlay({
               onPress={onAccept}
               accessibilityRole="button"
               accessibilityLabel="Insert transcription"
-              style={[
-                overlayStyles.actionButton,
-                { backgroundColor: "rgba(255, 255, 255, 0.25)" },
-              ]}
+              style={[overlayStyles.actionButton, { backgroundColor: "rgba(255, 255, 255, 0.25)" }]}
             >
               <Pencil
                 size={theme.iconSize.lg}
@@ -247,16 +217,9 @@ export function DictationOverlay({
               onPress={onAcceptAndSend}
               accessibilityRole="button"
               accessibilityLabel="Insert transcription and send"
-              style={[
-                overlayStyles.actionButton,
-                { backgroundColor: theme.colors.palette.white },
-              ]}
+              style={[overlayStyles.actionButton, { backgroundColor: theme.colors.palette.white }]}
             >
-              <ArrowUp
-                size={theme.iconSize.lg}
-                color={theme.colors.accent}
-                strokeWidth={2.5}
-              />
+              <ArrowUp size={theme.iconSize.lg} color={theme.colors.accent} strokeWidth={2.5} />
             </Pressable>
           </>
         )}

packages/app/src/components/dictation-status-notice.tsx

@@ -1,6 +1,14 @@
 import { View, Text, Pressable } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { AlertTriangle, CheckCircle2, Info, RefreshCcw, RotateCcw, WifiOff, X } from "lucide-react-native";
+import {
+  AlertTriangle,
+  CheckCircle2,
+  Info,
+  RefreshCcw,
+  RotateCcw,
+  WifiOff,
+  X,
+} from "lucide-react-native";
 
 export type DictationToastVariant = "info" | "success" | "warning" | "error";
 
@@ -53,7 +61,8 @@ export function DictationStatusNotice({
   })();
 
   const foregroundColor = variant === "info" ? theme.colors.foreground : theme.colors.palette.white;
-  const secondaryColor = variant === "info" ? theme.colors.foregroundMuted : theme.colors.palette.white;
+  const secondaryColor =
+    variant === "info" ? theme.colors.foregroundMuted : theme.colors.palette.white;
 
   return (
     <View
@@ -83,11 +92,7 @@ export function DictationStatusNotice({
 
       {(meta || (actionLabel && onAction)) && (
         <View style={styles.actionsRow}>
-          {meta ? (
-            <Text style={[styles.meta, { color: secondaryColor }]}>{meta}</Text>
-          ) : (
-            <View />
-          )}
+          {meta ? <Text style={[styles.meta, { color: secondaryColor }]}>{meta}</Text> : <View />}
           {actionLabel && onAction ? (
             <Pressable
               style={[

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

@@ -0,0 +1,85 @@
+import { useState, useCallback, useEffect, useId, useRef } from "react";
+import {
+  type LayoutChangeEvent,
+  type NativeSyntheticEvent,
+  type NativeScrollEvent,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { ScrollView, type ScrollView as ScrollViewType } from "react-native-gesture-handler";
+import { useHorizontalScrollOptional } from "@/contexts/horizontal-scroll-context";
+import { useExplorerSidebarAnimation } from "@/contexts/explorer-sidebar-animation-context";
+
+interface DiffScrollProps {
+  children: React.ReactNode;
+  scrollViewWidth: number;
+  onScrollViewWidthChange: (width: number) => void;
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+export function DiffScroll({
+  children,
+  scrollViewWidth,
+  onScrollViewWidthChange,
+  style,
+  contentContainerStyle,
+}: DiffScrollProps) {
+  const [isAtLeftEdge, setIsAtLeftEdge] = useState(true);
+  const horizontalScroll = useHorizontalScrollOptional();
+  const scrollId = useId();
+  const scrollViewRef = useRef<ScrollViewType>(null);
+
+  // Get the close gesture ref from animation context (may not be available outside sidebar)
+  let closeGestureRef: React.MutableRefObject<any> | undefined;
+  try {
+    const animation = useExplorerSidebarAnimation();
+    closeGestureRef = animation.closeGestureRef;
+  } catch {
+    // Not inside ExplorerSidebarAnimationProvider, which is fine
+  }
+
+  // Register/unregister scroll offset tracking
+  useEffect(() => {
+    if (!horizontalScroll) return;
+    // Start at 0 (not scrolled)
+    horizontalScroll.registerScrollOffset(scrollId, 0);
+    return () => {
+      horizontalScroll.unregisterScrollOffset(scrollId);
+    };
+  }, [horizontalScroll, scrollId]);
+
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetX = event.nativeEvent.contentOffset.x;
+      // Track if we're at the left edge (with small threshold for float precision)
+      setIsAtLeftEdge(offsetX <= 1);
+      if (horizontalScroll) {
+        horizontalScroll.registerScrollOffset(scrollId, offsetX);
+      }
+    },
+    [horizontalScroll, scrollId],
+  );
+
+  return (
+    <ScrollView
+      ref={scrollViewRef}
+      horizontal
+      nestedScrollEnabled
+      showsHorizontalScrollIndicator
+      bounces={false}
+      style={style}
+      contentContainerStyle={contentContainerStyle}
+      onScroll={handleScroll}
+      scrollEventThrottle={16}
+      onLayout={(e: LayoutChangeEvent) => onScrollViewWidthChange(e.nativeEvent.layout.width)}
+      // When at left edge, wait for close gesture to fail before scrolling.
+      // The close gesture fails quickly on leftward swipes (failOffsetX=-10),
+      // so scrolling left works normally. On rightward swipes, close gesture
+      // activates and closes the sidebar.
+      waitFor={isAtLeftEdge && closeGestureRef?.current ? closeGestureRef : undefined}
+    >
+      {children}
+    </ScrollView>
+  );
+}