chore(release): cut 0.1.26

Unify the initial connection handshake and capability update paths.
The server now sends a server_info status message on connect and
whenever capabilities change, enabling the onboarding flow where
voice becomes available after models are configured.

.github/workflows/desktop-release.yml

@@ -3,27 +3,50 @@ name: Desktop Release
 on:
   push:
     tags:
-      - 'v*'
-      - 'desktop-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."
+        required: false
+        default: "all"
+        type: choice
+        options:
+          - all
+          - macos
+          - linux
+          - windows
 
 concurrency:
   group: desktop-release-${{ github.ref }}
   cancel-in-progress: false
 
+env:
+  SOURCE_TAG: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref_name }}
+
 jobs:
-  publish-tauri:
+  publish-macos:
+    if: ${{ (github.event_name == 'workflow_dispatch' && (github.event.inputs.platform == 'all' || github.event.inputs.platform == 'macos')) || (github.event_name == 'push' && (startsWith(github.ref_name, 'v') || startsWith(github.ref_name, 'desktop-v') || startsWith(github.ref_name, 'desktop-macos-v'))) }}
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - runner: macos-14
+            rust_target: aarch64-apple-darwin
+          - runner: macos-15-intel
+            rust_target: x86_64-apple-darwin
     permissions:
       contents: write
       packages: read
-    runs-on: macos-latest
-    env:
-      RELEASE_TAG: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref_name }}
+    runs-on: ${{ matrix.runner }}
 
     steps:
       - uses: actions/checkout@v4
@@ -31,18 +54,82 @@ jobs:
           fetch-depth: 0
           ref: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref }}
 
+      - name: Resolve release metadata
+        shell: bash
+        run: |
+          set -euo pipefail
+          source_tag="${SOURCE_TAG}"
+          release_tag="$source_tag"
+          for prefix in desktop-windows-v desktop-linux-v desktop-macos-v desktop-v; do
+            if [[ "$source_tag" == ${prefix}* ]]; then
+              release_tag="v${source_tag#${prefix}}"
+              break
+            fi
+          done
+          echo "RELEASE_TAG=$release_tag" >> "$GITHUB_ENV"
+
+          version="${release_tag#v}"
+          echo "DESKTOP_VERSION=$version" >> "$GITHUB_ENV"
+
+          if [[ "$source_tag" == *gha-smoke* ]]; then
+            echo "IS_SMOKE_TAG=true" >> "$GITHUB_ENV"
+          else
+            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'
-          registry-url: 'https://npm.pkg.github.com'
-          scope: '@boudra'
+          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: aarch64-apple-darwin,x86_64-apple-darwin
+          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
 
       - name: Install JS dependencies
         run: npm ci
@@ -52,46 +139,40 @@ jobs:
       - name: Build web app for Tauri
         run: npm run build:web --workspace=@getpaseo/app
 
-      - name: Set desktop version from tag
+      - 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:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         shell: bash
         run: |
-          node <<'NODE'
-          const fs = require('node:fs');
-          const path = require('node:path');
+          set -euo pipefail
+          if release_draft="$(gh release view "$RELEASE_TAG" --repo "${{ github.repository }}" --json isDraft --jq '.isDraft' 2>/dev/null)"; then
+            :
+          else
+            release_draft="false"
+          fi
+          echo "RELEASE_DRAFT=$release_draft" >> "$GITHUB_ENV"
 
-          const rawTag = process.env.RELEASE_TAG;
-          if (!rawTag) throw new Error('RELEASE_TAG env var is missing');
-
-          const version = rawTag.replace(/^desktop-/, '').replace(/^v/, '');
-          console.log(`Using desktop version ${version} from tag ${rawTag}`);
-
-          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 field in ${tauriConfPath}`);
-          }
-          fs.writeFileSync(tauriConfPath, tauriConfText.replace(tauriRe, `$1${version}$3`));
-
-          const cargoTomlPath = path.join('packages', 'desktop', 'src-tauri', 'Cargo.toml');
-          const cargoLines = fs.readFileSync(cargoTomlPath, 'utf8').split(/\r?\n/);
-          let inPackage = false;
-          let updated = false;
-          const nextLines = cargoLines.map((line) => {
-            if (/^\[package\]\s*$/.test(line)) inPackage = true;
-            else if (inPackage && /^\[/.test(line)) inPackage = false;
-
-            if (inPackage && /^version\s*=\s*".*"\s*$/.test(line)) {
-              updated = true;
-              return `version = "${version}"`;
-            }
-            return line;
-          });
-          if (!updated) throw new Error(`Failed to update Cargo package version in ${cargoTomlPath}`);
-          fs.writeFileSync(cargoTomlPath, `${nextLines.join('\n')}\n`);
-          NODE
-
-      - name: Build and publish Tauri release
+      - 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 }}
@@ -108,6 +189,343 @@ jobs:
           tagName: ${{ env.RELEASE_TAG }}
           releaseName: Paseo ${{ env.RELEASE_TAG }}
           releaseBody: See the assets to download and install this version.
-          releaseDraft: false
+          releaseDraft: ${{ env.RELEASE_DRAFT }}
           prerelease: false
-          args: --target universal-apple-darwin
+          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 }}
+        shell: bash
+        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
+          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
+
+  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'))) }}
+    permissions:
+      contents: write
+      packages: read
+    runs-on: ubuntu-22.04
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref }}
+
+      - name: Resolve release metadata
+        shell: bash
+        run: |
+          set -euo pipefail
+          source_tag="${SOURCE_TAG}"
+          release_tag="$source_tag"
+          for prefix in desktop-windows-v desktop-linux-v desktop-macos-v desktop-v; do
+            if [[ "$source_tag" == ${prefix}* ]]; then
+              release_tag="v${source_tag#${prefix}}"
+              break
+            fi
+          done
+          echo "RELEASE_TAG=$release_tag" >> "$GITHUB_ENV"
+
+          version="${release_tag#v}"
+          echo "DESKTOP_VERSION=$version" >> "$GITHUB_ENV"
+
+          if [[ "$source_tag" == *gha-smoke* ]]; then
+            echo "IS_SMOKE_TAG=true" >> "$GITHUB_ENV"
+          else
+            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"
+          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
+
+      - 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
+        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
+
+      - name: Detect existing GitHub release state
+        if: env.IS_SMOKE_TAG != 'true'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          if release_draft="$(gh release view "$RELEASE_TAG" --repo "${{ github.repository }}" --json isDraft --jq '.isDraft' 2>/dev/null)"; then
+            :
+          else
+            release_draft="false"
+          fi
+          echo "RELEASE_DRAFT=$release_draft" >> "$GITHUB_ENV"
+
+      - name: Build and publish Linux Tauri release
+        if: env.IS_SMOKE_TAG != 'true'
+        uses: tauri-apps/tauri-action@v0
+        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 }}
+          NO_STRIP: "true"
+          APPIMAGE_EXTRACT_AND_RUN: "1"
+        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 appimage
+
+      - name: Build Linux app (smoke only)
+        if: env.IS_SMOKE_TAG == 'true'
+        run: npm run tauri --workspace=@getpaseo/desktop build -- --no-bundle
+
+  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'))) }}
+    permissions:
+      contents: write
+      packages: read
+    runs-on: windows-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref }}
+
+      - name: Resolve release metadata
+        shell: bash
+        run: |
+          set -euo pipefail
+          source_tag="${SOURCE_TAG}"
+          release_tag="$source_tag"
+          for prefix in desktop-windows-v desktop-linux-v desktop-macos-v desktop-v; do
+            if [[ "$source_tag" == ${prefix}* ]]; then
+              release_tag="v${source_tag#${prefix}}"
+              break
+            fi
+          done
+          echo "RELEASE_TAG=$release_tag" >> "$GITHUB_ENV"
+
+          version="${release_tag#v}"
+          echo "DESKTOP_VERSION=$version" >> "$GITHUB_ENV"
+
+          if [[ "$source_tag" == *gha-smoke* ]]; then
+            echo "IS_SMOKE_TAG=true" >> "$GITHUB_ENV"
+          else
+            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"
+          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
+
+      - 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: Detect existing GitHub release state
+        if: env.IS_SMOKE_TAG != 'true'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          if release_draft="$(gh release view "$RELEASE_TAG" --repo "${{ github.repository }}" --json isDraft --jq '.isDraft' 2>/dev/null)"; then
+            :
+          else
+            release_draft="false"
+          fi
+          echo "RELEASE_DRAFT=$release_draft" >> "$GITHUB_ENV"
+
+      - name: Build and publish Windows Tauri release
+        if: env.IS_SMOKE_TAG != 'true'
+        uses: tauri-apps/tauri-action@v0
+        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
+
+      - 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 }}

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

@@ -19,6 +19,11 @@ on:
         required: false
         default: false
         type: boolean
+      draft:
+        description: "Create missing release as draft."
+        required: false
+        default: false
+        type: boolean
 
 concurrency:
   group: release-notes-sync-${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref }}
@@ -43,6 +48,7 @@ jobs:
           REF: ${{ github.ref }}
           INPUT_TAG: ${{ github.event_name == 'push' && startsWith(github.ref, 'refs/tags/') && github.ref_name || github.event.inputs.tag }}
           INPUT_CREATE_IF_MISSING: ${{ github.event.inputs.create_if_missing }}
+          INPUT_DRAFT: ${{ github.event.inputs.draft }}
         shell: bash
         run: |
           set -euo pipefail
@@ -64,4 +70,8 @@ jobs:
             args+=(--create-if-missing)
           fi
 
+          if [ "${INPUT_DRAFT:-false}" = "true" ]; then
+            args+=(--draft)
+          fi
+
           node scripts/sync-release-notes-from-changelog.mjs "${args[@]}"

.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 relay dependency
+        run: npm run build --workspace=@getpaseo/relay
+
       - name: Typecheck
         run: npm run typecheck --workspace=@getpaseo/server
 

.gitignore

@@ -71,8 +71,12 @@ valknut-report.json/
 **/.paseo-provider-history/
 .claude/settings.local.json
 **/.claude/settings.local.json
+.claude/scheduled_tasks.lock
+.claude/worktrees/
 .plans/
 packages/server/src/server/fixtures/dictation/dictation-debug-largest.wav
 packages/server/src/server/fixtures/dictation/dictation-debug-largest.transcript.txt
 
 /artifacts
+packages/desktop/.cache/
+packages/desktop/src-tauri/resources/managed-runtime/

.mise.toml

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

.tool-versions

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

CHANGELOG.md

@@ -1,5 +1,73 @@
 # Changelog
 
+## 0.1.26 - 2026-03-12
+
+### Added
+- Added single-instance desktop behavior, Android APK download access, and refreshed splash screen styling.
+- Added bundled Codex and OpenCode binaries in the server so setup no longer depends on global installs.
+- Added Windows support with improved cross-platform shell execution.
+
+### Improved
+- Improved desktop runtime behavior on Windows by suppressing console windows and defaulting app data to `~/.paseo`.
+- Added a Discord link to the website navigation.
+
+### Fixed
+- Fixed desktop Claude agent startup from the managed runtime and rotated logs correctly on restart.
+- Fixed the home route to hide browser chrome when appropriate.
+- Fixed Expo Metro compatibility by updating the `exclusionList` import.
+- Fixed noisy shell output interfering with executable lookup.
+- Fixed Windows resource-path handling by stripping the extended-length path prefix.
+
+## 0.1.25 - 2026-03-11
+
+### Fixed
+- Fixed desktop app failing to start the built-in daemon on fresh macOS installs. The DMG was not notarized and code-signing stripped entitlements from the bundled Node runtime, causing Gatekeeper to block execution.
+- Fixed Linux AppImage build by restoring the AppImage bundle format and stripping CUDA dependencies from onnxruntime.
+
+## 0.1.24 - 2026-03-10
+
+### Improved
+- Improved command center keyboard navigation and new tab shortcut.
+- Simplified desktop release pipeline for faster and more reliable builds.
+
+## 0.1.21 - 2026-03-10
+### Improved
+- Improved desktop release reliability by fixing the Windows managed-runtime build path during GitHub Actions releases.
+
+### Fixed
+- Fixed a desktop release CI failure caused by a Unix-only server build script on Windows runners.
+- Fixed server CI to build the relay dependency before running tests, restoring relay E2EE test coverage on clean runners.
+- Fixed a Claude redesign test that depended on the local Claude CLI being installed.
+
+## 0.1.20 - 2026-03-10
+### Added
+- Added workspace sidebar git actions with quick diff stats and archive controls.
+- Added refreshed website downloads and homepage presentation for desktop installs.
+
+### Improved
+- Desktop release packaging now rebuilds and validates the bundled managed runtime during CI, improving installer reliability for macOS users.
+- Improved desktop and web stream rendering, settings polish, and React 19.1.4 compatibility.
+
+### Fixed
+- Fixed Claude interrupt/restart regressions and strengthened managed-daemon smoke coverage for desktop releases.
+
+## 0.1.19 - 2026-03-09
+### Added
+- Added a draft GitHub release flow so maintainers can upload and review desktop and Android release assets before publishing the final release.
+
+## 0.1.18 - 2026-03-06
+### Added
+- Added a desktop `Mod+W` shortcut to close the current tab.
+
+### Improved
+- New and newly selected terminals now take focus automatically so you can type immediately.
+- Kept newly created workspaces and projects in a more stable order in the sidebar.
+- Improved project naming for GitHub remotes and expanded project icon discovery to Phoenix `priv/static` assets.
+- Updated the website desktop download link to use the universal macOS DMG.
+
+### Fixed
+- Restored automatic agent metadata generation for Claude runs.
+
 ## 0.1.17 - 2026-03-06
 ### Added
 - New workspace-first navigation model with workspace tabs, file tabs, and sortable tab groups.

CLAUDE.md

@@ -1,248 +1,54 @@
 # CLAUDE.md
 
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-Paseo is a mobile app for monitoring and controlling your local AI coding agents from anywhere. Your dev environment, in your pocket.
-
-**Key features:**
-- Real-time streaming of agent output
-- Voice commands for hands-free interaction
-- Push notifications when tasks complete
-- Multi-agent orchestration across projects
-
-**Not a cloud sandbox** - Paseo connects directly to your actual development environment. Your code stays on your machine.
+Paseo is a mobile app for monitoring and controlling your local AI coding agents from anywhere. Your dev environment, in your pocket. Connects directly to your actual development environment — your code stays on your machine.
 
 **Supported agents:** Claude Code, Codex, and OpenCode.
 
-## Monorepo Structure
+## Repository map
 
 This is an npm workspace monorepo:
 
-- **packages/server**: The Paseo daemon that runs on your machine. Manages agent processes, provides WebSocket API for real-time streaming, and exposes an MCP server for agent control.
-- **packages/app**: Cross-platform client (Expo). Connects to one or more servers, displays agent output, handles voice input, and sends push notifications.
-- **packages/cli**: The `paseo` CLI that is used to manage the deamon, and acts as a client to it with  Docker-style commands like `paseo run/ls/logs/wait`
-- **packages/website**: Marketing site at paseo.sh (TanStack Router + Cloudflare Workers).
+- `packages/server` — Daemon: agent lifecycle, WebSocket API, MCP server
+- `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/website` — Marketing site (paseo.sh)
 
-## Development Server
+## Documentation
 
-The `npm run dev` script automatically picks an available port for the development server.
+| Doc | What's in it |
+|---|---|
+| [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md) | System design, package layering, WebSocket protocol, agent lifecycle, data flow |
+| [docs/CODING_STANDARDS.md](docs/CODING_STANDARDS.md) | Type hygiene, error handling, state design, React patterns, file organization |
+| [docs/TESTING.md](docs/TESTING.md) | TDD workflow, determinism, real dependencies over mocks, test organization |
+| [docs/DEVELOPMENT.md](docs/DEVELOPMENT.md) | Dev server, build sync gotchas, CLI reference, agent state, Playwright MCP |
+| [docs/RELEASE.md](docs/RELEASE.md) | Release playbook, draft releases, completion checklist |
+| [docs/ANDROID.md](docs/ANDROID.md) | App variants, local/cloud builds, EAS workflows |
+| [docs/DESIGN.md](docs/DESIGN.md) | How to design features before implementation |
+| [SECURITY.md](SECURITY.md) | Relay threat model, E2E encryption, DNS rebinding, agent auth |
 
-When running in a worktree or alongside the main checkout, set `PASEO_HOME` to isolate state:
+## Quick start
 
 ```bash
-PASEO_HOME=~/.paseo-blue npm run dev
-```
-
-- `PASEO_HOME` – path for runtime state (agent data, sockets, etc.). Defaults to `~/.paseo`; set this to a unique directory when running a secondary server instance.
-
-For trace+ logs, check $PASEO_HOME/daemon.log
-
-## Running and checking logs
-
-Both the server and Expo app are running in a Tmux session. See CLAUDE.local.md for system-specific session details.
-
-## Debugging
-
-### Daemon and CLI
-
-The Paseo daemon communicates via WebSocket. In the main checkout:
-- Daemon runs at `localhost:6767`
-- Expo app at `localhost:8081`
-- State lives in `$PASEO_HOME`
-
-In worktrees or when running `npm run dev`, ports and home directories may differ. Never assume the defaults.
-
-Use `npm run cli` to run the local CLI (instead of the globally linked `paseo` which points to the main checkout). Always run `npm run cli -- --help` or load the `/paseo` skill before using it - do not guess commands.
-
-Use `--host <host:port>` to point the CLI at a different daemon (e.g., `--host localhost:7777`).
-
-### Relay build sync (important)
-
-When changing `packages/relay/src/*`, rebuild relay before running/debugging the daemon:
-
-```bash
-npm run build --workspace=@getpaseo/relay
-```
-
-Reason: Node daemon imports `@getpaseo/relay` from `packages/relay/dist/*` (`node` export path), not directly from `src/*`.
-
-### Server build sync for CLI (important)
-
-When changing `packages/server/src/client/*` (especially `daemon-client.ts`) or shared WS protocol types, rebuild server before running/debugging CLI commands:
-
-```bash
-npm run build --workspace=@getpaseo/server
-```
-
-Reason: local CLI imports `@getpaseo/server` via package exports that resolve to `packages/server/dist/*` first. If `dist` is stale, CLI can speak an old protocol (for example, sending `session` before `hello`) and fail with handshake warnings/timeouts.
-
-### Quick reference CLI commands
-
-```bash
-npm run cli -- ls -a -g              # List all agents globally
-npm run cli -- ls -a -g --json       # Same, as JSON
-npm run cli -- inspect <id>          # Show detailed agent info
-npm run cli -- logs <id>             # View agent timeline
+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
 ```
 
-### Agent state
+See [docs/DEVELOPMENT.md](docs/DEVELOPMENT.md) for full setup, build sync requirements, and debugging.
 
-Agent data is stored at:
-```
-$PASEO_HOME/agents/{cwd-with-dashes}/{agent-id}.json
-```
+## Critical rules
 
-To find an agent by ID:
-```bash
-find $PASEO_HOME/agents -name "{agent-id}.json"
-```
+- **NEVER restart the main Paseo daemon on port 6767 without permission** — it manages all running agents. If you're an agent, restarting it kills your own process.
+- **NEVER assume a timeout means the service needs restarting** — timeouts can be transient.
+- **NEVER add auth checks to tests** — agent providers handle their own auth.
+- **Always run typecheck after every change.**
 
-To find an agent by title or other content:
-```bash
-rg -l "some title text" $PASEO_HOME/agents/
-rg -l "spiteful-toad" $PASEO_HOME/agents/
-```
+## Orchestrator mode
 
-### Provider session files
-
-Get the session ID from the agent JSON file (`persistence.sessionId`), then:
-
-**Claude sessions:**
-```
-~/.claude/projects/{cwd-with-dashes}/{session-id}.jsonl
-```
-
-**Codex sessions:**
-```
-~/.codex/sessions/{YYYY}/{MM}/{DD}/rollout-{timestamp}-{session-id}.jsonl
-```
-
-## Android
-
-Take screenshots like this: `adb exec-out screencap -p > screenshot.png`
-
-### Android variants (vanilla Expo)
-
-Use `APP_VARIANT` in `packages/app/app.config.js` to control app name + package ID (no custom Gradle flavor plugin):
-
-- `production` -> app name `Paseo`, package `sh.paseo`
-- `development` -> app name `Paseo Debug`, package `sh.paseo.debug`
-
-EAS profiles live in `packages/app/eas.json` as `development`, `production`, and `production-apk`.
-
-`development` uses Android `debug`.
-
-### Local build + install (Android device)
-
-From `packages/app`:
-
-```bash
-# development (debug)
-APP_VARIANT=development npx expo prebuild --platform android --clean --non-interactive
-APP_VARIANT=development npx expo run:android --variant=debug
-
-# production (release)
-APP_VARIANT=production npx expo prebuild --platform android --clean --non-interactive
-APP_VARIANT=production npx expo run:android --variant=release
-```
-
-From repo root:
-
-```bash
-npm run android:development
-npm run android:production
-```
-
-`npm run android:prod` and `npm run android:release` are aliases for `npm run android:production`.
-
-### Cloud build + submit (EAS Workflows)
-
-Tag pushes like `v0.1.0` trigger `packages/app/.eas/workflows/release-mobile.yml` on Expo servers.
-Tag pushes like `v0.1.0` also trigger `.github/workflows/android-apk-release.yml` on GitHub Actions to publish an APK asset on the matching GitHub Release.
-
-That workflow does:
-- Build iOS with the `production` profile
-- Build Android with the `production` profile
-- Submit each build with the `production` submit profile
-
-Useful commands:
-
-```bash
-# List recent mobile workflow runs
-cd packages/app && npx eas workflow:runs --workflow release-mobile.yml --limit 10
-
-# Inspect one run (jobs, status, outputs)
-cd packages/app && npx eas workflow:view <run-id>
-
-# Stream logs for all steps in one failed job
-cd packages/app && npx eas workflow:logs <job-id> --non-interactive --all-steps
-```
-
-## Testing with Playwright MCP
-
-**CRITICAL:** When asked to test the app, you MUST use the Playwright MCP connecting to Metro at `http://localhost:8081`.
-
-Use the Playwright MCP to test the app in Metro web. Navigate to `http://localhost:8081` to interact with the app UI.
-
-**Important:** Do NOT use browser history (back/forward). Always navigate by clicking UI elements or using `browser_navigate` with the full URL. The app uses client-side routing and browser history navigation breaks the state.
-
-## Expo troubleshooting
-
-Run `npx expo-doctor` to diagnose version mismatches and native module issues.
-
-## Release playbook
-
-Use the scripted release flow from repo root. Avoid manual version bumps, manual tags, or ad hoc publish commands unless debugging.
-
-```bash
-# Recommended: full patch release (bump, check, publish, push branch+tag)
-npm run release:patch
-
-# Manual, step-by-step fallback:
-npm run version:all:patch  # npm version across all workspaces (creates commit + local tag)
-npm run release:check
-npm run release:publish
-npm run release:push       # pushes HEAD and current version tag (triggers desktop + Android APK + EAS mobile workflows)
-```
-
-Notes:
-- `version:all:*` bumps the root package version and runs the root `version` lifecycle script to sync workspace versions and internal `@getpaseo/*` dependency versions before the release commit/tag is created.
-- `release:prepare` refreshes workspace `node_modules` links to prevent stale local package types during release checks.
-- If `release:publish` fails after a successful publish of one workspace, re-run `npm run release:publish`; npm will skip already-published versions and continue where possible.
-- If a user asks to "release paseo" (without specifying major/minor), treat it as a patch release and run `npm run release:patch`.
-- All workspaces share one version by design. Keep versions synchronized and release together.
-- The website Mac download CTA URL is derived from `packages/website/package.json` version at build time, so no manual update is required after release.
-
-Release completion checklist:
-- Manually update CHANGELOG.md with release notes, between current release vs previous one, use Git commands to figure out what changed. The notes are user-facing:
-    - Ask yourself, what do Paseo users want to know about?
-    - Include: New features, bug fixes
-    - Don't include: Refactors or code changes that are not noticeable by users
-- `npm run release:patch` completes successfully.
-- GitHub `Desktop Release` workflow for the new `v*` tag is green.
-- GitHub `Android APK Release` workflow for the same tag is green.
-- EAS `release-mobile.yml` workflow for the same tag is green (Expo queues can take longer on the free plan).
-
-## Orchestrator Mode
-
-- **When agent control tool calls fail**, make sure you list agents before trying to launch another one. It could just be a wait timeout.
-- **Always prefix agent titles** so we can tell which ones are running under you (e.g., "🎭 Feature Implementation", "🎭 Design Discussion").
-- **Launch agents in the most permissive mode**: Use full access or bypass permissions mode.
-- **Set cwd to the repository root** - The agent's working directory should usually be the repo root
-
-**CRITICAL: ALWAYS RUN TYPECHECK AFTER EVERY CHANGE.**
-
-## Agent Authentication
-
-All agent providers (Claude, Codex, OpenCode) handle their own authentication outside of environment variables. They are authenticated without providing any extra configuration—Paseo does not manage API keys or tokens for agents.
-
-**Do not add auth checks to tests.** If auth fails for whatever reason, let the user know instead of patching the code or adding conditional skips.
-
-## NEVER DO THESE THINGS
-
-- **NEVER restart the main Paseo daemon on port 6767 without permission** - This is the production daemon that launches and manages agents. If you are reading this, you are probably running as an agent under it. Restarting it will kill your own process and all other running agents. The daemon is managed by the user in Tmux.
-- **NEVER assume a timeout means the service needs restarting** - Timeouts can be transient network issues, not service failures
-- **NEVER add authentication checks to tests** - Agent providers handle their own auth. If tests fail due to auth issues, report it rather than adding conditional skips or env var checks
+- 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

EXECUTION_PLAN_ITERATION_2_PROJECTS_WORKSPACES_TABS.md

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

EXECUTION_PLAN_ITERATION_3_WORKSPACE_HEADER_TABS_RESTORE.md

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

EXECUTION_PLAN_ITERATION_4_WORKSPACE_HEADER_LAYOUT_RESTORE.md

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

EXECUTION_PLAN_PASEO.md

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

cli-client-id

@@ -0,0 +1 @@
+cid_518a41c4c44340aea1120d2b760fc6c6

docs/ANDROID.md

@@ -0,0 +1,67 @@
+# Android
+
+## App variants
+
+Controlled by `APP_VARIANT` in `packages/app/app.config.js` (vanilla Expo, no custom Gradle plugin):
+
+| Variant | App name | Package ID |
+|---|---|---|
+| `production` | Paseo | `sh.paseo` |
+| `development` | Paseo Debug | `sh.paseo.debug` |
+
+EAS profiles: `development`, `production`, and `production-apk` in `packages/app/eas.json`.
+
+`development` uses Android `debug`.
+
+## Local build + install
+
+From repo root:
+
+```bash
+npm run android:development    # Debug build
+npm run android:production     # Release build
+npm run android:clean          # Clean native project
+```
+
+Or from `packages/app`:
+
+```bash
+# Debug
+APP_VARIANT=development npx expo prebuild --platform android --non-interactive
+APP_VARIANT=development npx expo run:android --variant=debug
+
+# Release
+APP_VARIANT=production npx expo prebuild --platform android --non-interactive
+APP_VARIANT=production npx expo run:android --variant=release
+
+# Clean
+npx expo prebuild --platform android --clean --non-interactive
+```
+
+## Screenshots
+
+```bash
+adb exec-out screencap -p > screenshot.png
+```
+
+## Cloud build + submit (EAS)
+
+Tag pushes like `v0.1.0` trigger:
+
+- `packages/app/.eas/workflows/release-mobile.yml` on Expo servers (iOS + Android build + submit)
+- `.github/workflows/android-apk-release.yml` on GitHub Actions (APK asset on GitHub Release)
+
+### Useful commands
+
+```bash
+cd packages/app
+
+# List recent workflow runs
+npx eas workflow:runs --workflow release-mobile.yml --limit 10
+
+# Inspect a run
+npx eas workflow:view <run-id>
+
+# Stream logs for a failed job
+npx eas workflow:logs <job-id> --non-interactive --all-steps
+```

docs/ARCHITECTURE.md

@@ -0,0 +1,184 @@
+# Architecture
+
+Paseo is a client-server system for monitoring and controlling local AI coding agents. The daemon runs on your machine, manages agent processes, and streams their output in real time over WebSocket. Clients (mobile app, CLI, desktop app) connect to the daemon to observe and interact with agents.
+
+Your code never leaves your machine. Paseo is local-first.
+
+## System overview
+
+```
+┌─────────────┐    ┌─────────────┐    ┌─────────────┐
+│  Mobile App  │    │     CLI     │    │ Desktop App │
+│   (Expo)     │    │ (Commander) │    │  (Tauri)    │
+└──────┬───────┘    └──────┬──────┘    └──────┬──────┘
+       │                   │                  │
+       │    WebSocket      │    WebSocket     │    Managed subprocess
+       │    (direct or     │    (direct)      │    + WebSocket
+       │     via relay)    │                  │
+       └───────────┬───────┴──────────────────┘
+                   │
+            ┌──────▼──────┐
+            │   Daemon    │
+            │  (Node.js)  │
+            └──────┬──────┘
+                   │
+      ┌────────────┼────────────┐
+      │            │            │
+┌─────▼─────┐ ┌───▼────┐ ┌────▼─────┐
+│  Claude   │ │ Codex  │ │ OpenCode │
+│  Agent    │ │ Agent  │ │  Agent   │
+│  SDK      │ │ Server │ │          │
+└───────────┘ └────────┘ └──────────┘
+```
+
+## Packages
+
+### `packages/server` — The daemon
+
+The heart of Paseo. A Node.js process that:
+
+- Listens for WebSocket connections from clients
+- Manages agent lifecycle (create, run, stop, resume, archive)
+- Streams agent output in real time via a timeline model
+- Exposes an MCP server for agent-to-agent control
+- Optionally connects outbound to a relay for remote access
+
+**Key modules:**
+
+| Module | Responsibility |
+|---|---|
+| `bootstrap.ts` | Daemon initialization: HTTP server, WS server, agent manager, storage, relay |
+| `websocket-server.ts` | WebSocket connection management, hello/welcome handshake, binary multiplexing |
+| `session.ts` | Per-client session state, timeline subscriptions, terminal operations |
+| `agent/agent-manager.ts` | Agent lifecycle state machine, timeline tracking, subscriber management |
+| `agent/agent-storage.ts` | File-backed JSON persistence at `$PASEO_HOME/agents/` |
+| `agent/mcp-server.ts` | MCP server for sub-agent creation, permissions, timeouts |
+| `providers/` | Provider adapters: Claude (Agent SDK), Codex (AppServer), OpenCode |
+| `relay-transport.ts` | Outbound relay connection with E2E encryption |
+| `client/daemon-client.ts` | Client library for connecting to the daemon (used by CLI and app) |
+
+### `packages/app` — Mobile + web client (Expo)
+
+Cross-platform React Native app that connects to one or more daemons.
+
+- Expo Router navigation (`/h/[serverId]/agents`, etc.)
+- `DaemonRegistryContext` manages saved daemon connections
+- `SessionContext` wraps the daemon client for the active session
+- `Stream` model handles timeline with compaction, gap detection, sequence-based deduplication
+- Voice features: dictation (STT) and voice agent (realtime)
+
+### `packages/cli` — Command-line client
+
+Commander.js CLI with Docker-style commands:
+
+- `paseo agent ls/run/stop/logs/inspect/wait/send/attach`
+- `paseo daemon start/stop/restart/status/pair`
+- `paseo permit allow/deny/ls`
+- `paseo provider ls/models`
+- `paseo worktree ls/archive`
+
+Communicates with the daemon via the same WebSocket protocol as the app.
+
+### `packages/relay` — E2E encrypted relay
+
+Enables remote access when the daemon is behind a firewall.
+
+- ECDH key exchange + AES-256-GCM encryption
+- Relay server is zero-knowledge — it routes encrypted bytes, cannot read content
+- Client and daemon channels with identical API (`createClientChannel`, `createDaemonChannel`)
+- Pairing via QR code transfers the daemon's public key to the client
+
+See [SECURITY.md](../SECURITY.md) for the full threat model.
+
+### `packages/desktop` — Desktop app (Tauri)
+
+Tauri wrapper for macOS, Linux, and Windows.
+
+- Can spawn the daemon as a managed subprocess
+- Native file access for workspace integration
+- Same WebSocket client as mobile app
+
+### `packages/website` — Marketing site
+
+TanStack Router + Cloudflare Workers. Serves paseo.sh.
+
+## WebSocket protocol
+
+All clients speak the same binary-multiplexed WebSocket protocol.
+
+**Handshake:**
+
+```
+Client → Server:  WSHelloMessage { id, clientId, version, timestamp }
+Server → Client:  WSWelcomeMessage { clientId, daemonVersion, sessionId, capabilities }
+```
+
+**Message types:**
+
+- `agent_update` — Agent state changed (status, title, labels)
+- `agent_stream` — New timeline event from a running agent
+- `workspace_update` — Workspace state changed
+- `agent_permission_request` — Agent needs user approval for a tool call
+- Command-response pairs for fetch, list, create, etc.
+
+**Binary multiplexing:**
+
+Terminal I/O and agent streaming share the same connection via `BinaryMuxFrame`:
+- Channel 0: control messages
+- Channel 1: terminal data
+- 1-byte channel ID + 1-byte flags + variable payload
+
+## Agent lifecycle
+
+```
+initializing → idle → running → idle (or error → closed)
+                 ↑        │
+                 └────────┘  (agent completes a turn, awaits next prompt)
+```
+
+- **AgentManager** tracks up to 200 timeline items per agent
+- Timeline is append-only with epochs (each run starts a new epoch)
+- Events stream to all subscribed clients in real time
+- Agent state persists to `$PASEO_HOME/agents/{cwd-with-dashes}/{agent-id}.json`
+
+## Agent providers
+
+Each provider implements a common `AgentClient` interface:
+
+| Provider | Wraps | Session format |
+|---|---|---|
+| Claude | Anthropic Agent SDK | `~/.claude/projects/{cwd}/{session-id}.jsonl` |
+| Codex | CodexAppServer | `~/.codex/sessions/{date}/rollout-{ts}-{id}.jsonl` |
+| OpenCode | OpenCode CLI | Provider-managed |
+
+All providers:
+- Handle their own authentication (Paseo does not manage API keys)
+- Support session resume via persistence handles
+- Map tool calls to a normalized `ToolCallDetail` type
+- Expose provider-specific modes (plan, default, full-access)
+
+## Data flow: running an agent
+
+1. Client sends `CreateAgentRequestMessage` with config (prompt, cwd, provider, model, mode)
+2. Session routes to `AgentManager.create()`
+3. AgentManager creates a `ManagedAgent`, initializes provider session
+4. Provider runs the agent → emits `AgentStreamEvent` items
+5. Events append to the agent timeline, broadcast to all subscribed clients
+6. Tool calls are normalized to `ToolCallDetail` (shell, read, edit, write, search, etc.)
+7. Permission requests flow: agent → server → client → user decision → server → agent
+
+## Storage
+
+```
+$PASEO_HOME/
+├── agents/{cwd-with-dashes}/{agent-id}.json   # Agent state + config
+├── projects/projects.json                      # Project registry
+├── projects/workspaces.json                    # Workspace registry
+└── daemon.log                                  # Daemon trace logs
+```
+
+## Deployment models
+
+1. **Local daemon** (default): `paseo daemon start` on `127.0.0.1:6767`
+2. **Managed desktop**: Tauri app spawns daemon as subprocess
+3. **Remote + relay**: Daemon behind firewall, relay bridges with E2E encryption

docs/CODING_STANDARDS.md

@@ -0,0 +1,174 @@
+# Coding Standards
+
+These standards apply to all code changes: features, bug fixes, refactors, and performance work.
+
+## Core principles
+
+- **Zero complexity budget** — justify every abstraction with specific benefits
+- **Fully typed TypeScript** — no `any`, no untyped boundaries
+- **YAGNI** — build features and abstractions only when needed
+- **Functional and declarative** over object-oriented
+- **`interface`** over `type` when possible
+- **`function` declarations** over arrow function assignments
+- **Single-purpose functions** — one function, one job
+- **Design for edge cases through types** rather than explicit handling
+- **Don't catch errors** unless there's a strong reason to
+- **No index.ts barrel files** that only re-export — they create unnecessary indirection
+- **No "while I'm at it" improvements** — stay focused on the task
+
+## Type hygiene
+
+### Infer from schemas
+
+Never hand-write a TypeScript type that can be inferred from a Zod schema.
+
+```typescript
+// Bad: duplicate type that can drift
+const schema = z.object({ procedure: z.string(), args: z.record(z.unknown()) });
+type RPCArgs = { procedure: string; args: Record<string, unknown> };
+
+// Good: infer from schema
+type RPCArgs = z.infer<typeof schema>;
+```
+
+### Named types over inline
+
+No complex inline types in public function signatures.
+
+```typescript
+// Bad
+function enqueueJob(input: { userId: string; priority: "low" | "normal" | "high" }) {}
+
+// Good
+interface EnqueueJobInput { userId: string; priority: "low" | "normal" | "high" }
+function enqueueJob(input: EnqueueJobInput) {}
+```
+
+### Object parameters
+
+If a function needs more than one argument, use a single object parameter.
+
+```typescript
+// Bad: positional args
+function createToolCall(provider: string, toolName: string, payload: unknown) {}
+
+// Good: object param
+interface CreateToolCallInput { provider: string; toolName: string; payload: unknown }
+function createToolCall(input: CreateToolCallInput) {}
+```
+
+### One canonical type per concept
+
+Don't redefine the same concept in different layer-specific shapes (`RpcX`, `DbX`, `UiX`). Keep one canonical type and add explicit layer wrappers that reference it.
+
+```typescript
+// Bad: duplicated fields across layers
+type RpcToolCall = { toolName: string; args: Record<string, unknown>; requestId: string };
+type DbToolCall = { toolName: string; args: Record<string, unknown>; id: string; createdAt: Date };
+
+// Good: canonical type + wrappers
+type ToolCall = { toolName: string; args: Record<string, unknown> };
+type ToolCallRequest = { requestId: string; toolCall: ToolCall };
+type ToolCallRecord = { id: string; createdAt: Date; toolCall: ToolCall };
+```
+
+## Make impossible states impossible
+
+Use discriminated unions instead of bags of booleans and optionals.
+
+```typescript
+// Bad
+interface FetchState { isLoading: boolean; error?: Error; data?: Data }
+
+// Good
+type FetchState =
+  | { status: "idle" }
+  | { status: "loading" }
+  | { status: "error"; error: Error }
+  | { status: "success"; data: Data };
+```
+
+## Optionality is a design decision
+
+Don't mark fields optional to avoid migrations. Decide deliberately:
+
+1. Is optionality actually needed?
+2. If there are distinct valid states → discriminated union
+3. If value can be intentionally empty → explicit `null`
+4. Keep optionality at real boundaries (external input), then resolve it
+
+## Validate at boundaries, trust internally
+
+Parse external data once at the boundary with schema validation. Then use typed values everywhere else.
+
+```typescript
+// Bad: optional chaining because shape is unclear
+const value = response?.data?.items?.[0]?.name;
+
+// Good: validate at boundary, trust the types
+const parsed = responseSchema.parse(rawResponse);
+const value = parsed.data.items[0].name;
+```
+
+## Error handling
+
+- **Fail explicitly** — if caller requests X and X is unavailable, throw rather than silently returning Y
+- **Use typed domain errors** — not plain `Error`. Carry structured metadata for handling, logging, and user messaging
+- **Preserve error semantics** — don't collapse meaningful typed errors into generic `Error`
+
+```typescript
+class TimeoutError extends Error {
+  constructor(
+    public readonly operation: string,
+    public readonly waitedMs: number,
+  ) {
+    super(`${operation} timed out after ${waitedMs}ms`);
+    this.name = "TimeoutError";
+  }
+}
+```
+
+## Keep logic density low
+
+Avoid packing branching, lookup, and transformation into single dense expressions.
+
+```typescript
+// Bad: nested ternaries + inline lookups
+const billing = shouldUseLegacy(account)
+  ? getLegacy(account)
+  : buildBilling(account, rates.find((r) => r.region === account.region));
+
+// Good: named steps, then assemble
+const rate = rates.find((r) => r.region === account.region);
+if (!rate) throw new MissingRateError(account.region);
+const billing = shouldUseLegacy(account) ? getLegacy(account) : buildBilling(account, rate);
+```
+
+## Centralize policy
+
+When the same discriminator (`plan`, `provider`, `kind`, `status`) is checked across multiple files, centralize it into a policy model. A new case should require editing one place, not many.
+
+## React: keep components dumb
+
+- Components render state and dispatch events — they don't compute transitions
+- If a component has more than two interacting `useState` calls, extract a state machine or reducer
+- `useRef` for mutable coordination state (flags, timers) is a smell — model states explicitly
+- Never mirror a source of truth into local state; derive from it
+- Test state logic as pure functions without rendering
+
+## File organization
+
+- Organize by domain first (`providers/claude/`), not by technical type (`tool-parsers/`)
+- Name files after the main export (`create-toolcall.ts`)
+- Use `index.ts` as an entrypoint, not a dumping ground
+- Collocate tests with implementation (`thing.ts` + `thing.test.ts`)
+
+## Refactoring contract
+
+Refactoring is structure work, not feature work.
+
+- Preserve behavior by default, especially user-facing behavior
+- Do not remove features to simplify code without explicit approval
+- Have a verification strategy before you start
+- Fully migrate callers and remove old paths in the same refactor
+- No fallback behavior by default — prefer explicit error over silent degradation

docs/DESIGN.md

@@ -0,0 +1,73 @@
+# Designing Features
+
+How to think through a feature before writing code.
+
+## Start from the user
+
+Even for backend work, start from the user's perspective:
+
+- What problem does this solve?
+- What triggers it? User action, schedule, event?
+- What does success look like from the user's perspective?
+- What data does it need? Where does that data come from?
+
+## Map existing code
+
+Before designing anything new, understand what exists:
+
+- Where does similar functionality live?
+- What patterns does the codebase already use?
+- What layers exist? (See [ARCHITECTURE.md](./ARCHITECTURE.md))
+- What types and data shapes are already defined?
+
+New features rarely mean only new code. Usually they require modifying existing interfaces, extending existing types, or refactoring to accommodate the new functionality. Identify what needs to change, not just what needs to be added.
+
+## Define verification before implementation
+
+Before designing the solution, define how you'll know it works:
+
+- What tests will prove this feature is correct?
+- At what layer? Unit, integration, E2E?
+- What's the simplest way to verify the core behavior?
+
+If you can't define verification, you don't understand the feature well enough yet.
+
+## Design the shape
+
+### Data
+
+- What types are needed?
+- Use discriminated unions — make impossible states impossible
+- One canonical type per concept (see [CODING_STANDARDS.md](./CODING_STANDARDS.md))
+
+### Layers
+
+- What belongs in each layer?
+- Where are the boundaries?
+- What does each layer expose to the layer above?
+
+### Interactions
+
+- How does data flow through the system?
+- What triggers what?
+- Where do side effects happen?
+
+### Refactoring
+
+- What existing code needs to change?
+- Is existing code testable enough? If not, that's part of the plan.
+
+## Create a concrete plan
+
+Once the design is clear:
+
+1. **Acceptance criteria** — specific, verifiable outcomes (not "should work well" but "returns X when given Y")
+2. **Ordered steps** — what to build first (usually: types, then lowest layer, then up)
+3. **What to refactor** before adding new code
+4. **How to verify** each step
+
+## Principles
+
+- **Fit, don't force** — new code should fit existing patterns, or refactor first
+- **Simple** — the best design is the simplest one that works
+- **Verify early** — define how to test before designing the implementation

docs/DEVELOPMENT.md

@@ -0,0 +1,130 @@
+# Development
+
+## Prerequisites
+
+- Node.js (see `.tool-versions` for exact version)
+- npm workspaces (comes with Node)
+
+## Running the dev server
+
+```bash
+npm run dev
+```
+
+The dev script automatically picks an available port. Both the server and Expo app run in a Tmux session — see `CLAUDE.local.md` for system-specific session details.
+
+### Running alongside the main checkout
+
+Set `PASEO_HOME` to isolate state when running a second instance (e.g., in a worktree):
+
+```bash
+PASEO_HOME=~/.paseo-blue npm run dev
+```
+
+- `PASEO_HOME` — path for runtime state (agents, sockets, etc.). Defaults to `~/.paseo`.
+
+### Default ports
+
+In the main checkout:
+- Daemon: `localhost:6767`
+- Expo app: `localhost:8081`
+
+In worktrees or with `npm run dev`, ports may differ. Never assume defaults.
+
+### Daemon logs
+
+Check `$PASEO_HOME/daemon.log` for trace-level logs.
+
+## Build sync gotchas
+
+### Relay → Daemon
+
+When changing `packages/relay/src/*`, rebuild before running the daemon:
+
+```bash
+npm run build --workspace=@getpaseo/relay
+```
+
+The Node daemon imports `@getpaseo/relay` from `packages/relay/dist/*`, not `src/*`.
+
+### Server → CLI
+
+When changing `packages/server/src/client/*` (especially `daemon-client.ts`) or shared WS protocol types, rebuild before running CLI commands:
+
+```bash
+npm run build --workspace=@getpaseo/server
+```
+
+The CLI imports `@getpaseo/server` via package exports resolving to `dist/*`. Stale `dist` means the CLI speaks an old protocol and fails with handshake warnings or timeouts.
+
+## CLI reference
+
+Use `npm run cli` to run the local CLI (instead of the globally installed `paseo` which points to the main checkout).
+
+```bash
+npm run cli -- ls -a -g              # List all agents globally
+npm run cli -- ls -a -g --json       # Same, as JSON
+npm run cli -- inspect <id>          # Show detailed agent info
+npm run cli -- logs <id>             # View agent timeline
+npm run cli -- daemon status         # Check daemon status
+```
+
+Use `--host <host:port>` to point the CLI at a different daemon:
+
+```bash
+npm run cli -- --host localhost:7777 ls -a
+```
+
+## Agent state
+
+Agent data lives at:
+
+```
+$PASEO_HOME/agents/{cwd-with-dashes}/{agent-id}.json
+```
+
+Find an agent by ID:
+```bash
+find $PASEO_HOME/agents -name "{agent-id}.json"
+```
+
+Find by content:
+```bash
+rg -l "some title text" $PASEO_HOME/agents/
+```
+
+## Provider session files
+
+Get the session ID from the agent JSON (`persistence.sessionId`), then:
+
+**Claude:**
+```
+~/.claude/projects/{cwd-with-dashes}/{session-id}.jsonl
+```
+
+**Codex:**
+```
+~/.codex/sessions/{YYYY}/{MM}/{DD}/rollout-{timestamp}-{session-id}.jsonl
+```
+
+## Testing with Playwright MCP
+
+Use Playwright MCP connecting to Metro at `http://localhost:8081` for UI testing.
+
+Do NOT use browser history (back/forward). Always navigate by clicking UI elements or using `browser_navigate` with the full URL — the app uses client-side routing and browser history breaks state.
+
+## Expo troubleshooting
+
+```bash
+npx expo-doctor
+```
+
+Diagnoses version mismatches and native module issues.
+
+## Typecheck
+
+Always run typecheck after changes:
+
+```bash
+npm run typecheck
+```

docs/RELEASE.md

@@ -0,0 +1,48 @@
+# Release
+
+All workspaces share one version and release together.
+
+## Standard release (patch)
+
+```bash
+npm run release:patch
+```
+
+This bumps the version across all workspaces, runs checks, publishes to npm, and pushes the branch + tag (triggering desktop, APK, and EAS mobile workflows).
+
+If asked to "release paseo" without specifying major/minor, treat it as a patch release.
+
+## Manual step-by-step
+
+```bash
+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)
+```
+
+## Draft release flow
+
+```bash
+npm run draft-release:patch    # Bump, push tag, create draft GitHub Release
+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
+
+## Notes
+
+- `version:all:*` bumps root + syncs workspace versions and `@getpaseo/*` dependency versions
+- `release:prepare` refreshes workspace `node_modules` links to prevent stale types
+- 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
+
+## Completion checklist
+
+- [ ] Update `CHANGELOG.md` with user-facing release notes (features, fixes — not refactors)
+- [ ] `npm run release:patch` 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/TESTING.md

@@ -0,0 +1,123 @@
+# Testing
+
+## Philosophy
+
+Tests prove behavior, not structure. Every test should answer: "what user-visible or API-visible behavior does this verify?"
+
+## Test-driven development
+
+Work in vertical slices: one test, one implementation, repeat. Each test responds to what you learned from the previous cycle.
+
+```
+RIGHT (vertical):
+  RED→GREEN: test1→impl1
+  RED→GREEN: test2→impl2
+  RED→GREEN: test3→impl3
+
+WRONG (horizontal):
+  RED:   test1, test2, test3, test4, test5
+  GREEN: impl1, impl2, impl3, impl4, impl5
+```
+
+Writing all tests first then all implementation produces bad tests — you end up testing imagined behavior instead of actual behavior.
+
+## Determinism first
+
+Tests must produce the same result every run:
+
+- No conditional assertions or branching paths
+- No reliance on timing, randomness, or network jitter
+- No weak assertions (`toBeTruthy`, `toBeDefined`)
+- Assert the full intended behavior, not fragments
+
+```typescript
+// Bad: conditional and weak
+it("creates a tool call", async () => {
+  const result = await createToolCall(input);
+  if (result.ok) {
+    expect(result.id).toBeDefined();
+  }
+});
+
+// Good: deterministic and explicit
+it("returns timeout error when provider times out", async () => {
+  const result = await createToolCall(input);
+  expect(result).toEqual({
+    ok: false,
+    error: { code: "PROVIDER_TIMEOUT", waitedMs: 30000 },
+  });
+});
+```
+
+## Flaky tests are a bug
+
+Never remove a test because it's flaky. Find the variance source (time, randomness, race condition, shared state, non-deterministic output, environment drift) and fix it.
+
+## Real dependencies over mocks
+
+Mocks are not the default. They require an explicit decision.
+
+- **Database**: real test database, not a mock
+- **APIs**: real APIs with test/sandbox credentials, not request mocks
+- **File system**: temporary directory that gets cleaned up, not fs mocks
+
+Ask: "will this still hold with real dependencies at runtime?" If no, don't mock.
+
+### Use swappable adapters instead
+
+When you need test isolation, design code so dependencies are injectable:
+
+```typescript
+interface EmailSender {
+  send(to: string, body: string): Promise<void>;
+}
+
+// Production
+const realSender: EmailSender = { send: sendgrid.send };
+
+// Test: in-memory adapter
+function createTestEmailSender() {
+  const sent: Array<{ to: string; body: string }> = [];
+  return {
+    send: async (to: string, body: string) => { sent.push({ to, body }); },
+    sent,
+  };
+}
+```
+
+## End-to-end means end-to-end
+
+When a test is labeled end-to-end, it calls the real service. No environment variable gates, no conditional skipping, no mocking the external dependency.
+
+## Test organization
+
+- Collocate tests with implementation: `thing.ts` + `thing.test.ts`
+- Extract complex setup into reusable helpers
+- Test bodies should read like plain English
+- Build a vocabulary of test helpers that make complex flows simple
+
+## Agent authentication in tests
+
+Agent providers handle their own auth. Do not add auth checks, environment variable gates, or conditional skips to tests. If auth fails, report it.
+
+## Debugging with tests
+
+Use the test as your debugging ground:
+
+1. Add temporary logging to the code under test
+2. Run the test, observe actual values
+3. Trace the flow end-to-end through test output
+4. Confirm each assumption with actual output
+5. Remove logging when done
+
+The test output is the source of truth, not your reading of the code.
+
+## Design for testability
+
+If code isn't testable, refactor it. Signs:
+- You want to reach for a mock
+- You can't inject a dependency
+- You need to test private internals
+- Setup requires too much global state
+
+Aim for deep modules: small interface, deep implementation. Fewer methods = fewer tests needed, simpler params = simpler setup.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paseo",
-  "version": "0.1.17",
+  "version": "0.1.26",
   "private": true,
   "workspaces": [
     "packages/server",
@@ -26,9 +26,9 @@
     "start": "npm run start --workspace=@getpaseo/server",
     "android": "npm run android --workspace=@getpaseo/app",
     "android:development": "npm run android:development --workspace=@getpaseo/app",
-    "android:prod": "npm run android:prod --workspace=@getpaseo/app",
     "android:production": "npm run android:production --workspace=@getpaseo/app",
-    "android:release": "npm run android:prod --workspace=@getpaseo/app",
+    "android:release": "npm run android:production --workspace=@getpaseo/app",
+    "android:clean": "npm run android:clean --workspace=@getpaseo/app",
     "ios": "npm run ios --workspace=@getpaseo/app",
     "web": "npm run web --workspace=@getpaseo/app",
     "dev:desktop": "npm run dev --workspace=@getpaseo/desktop",
@@ -44,6 +44,11 @@
     "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: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",
+    "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"
@@ -68,7 +73,9 @@
   "author": "moboudra",
   "license": "AGPL-3.0-or-later",
   "overrides": {
-    "lightningcss": "1.30.1"
+    "lightningcss": "1.30.1",
+    "react": "19.1.4",
+    "react-dom": "19.1.4"
   },
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "^0.2.11"

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

@@ -0,0 +1,183 @@
+import { test, expect, type Page } from "./fixtures";
+import { createTempGitRepo } from "./helpers/workspace";
+import {
+  connectDaemonClient,
+  createReplyTurn,
+  expectDetachedFromBottom,
+  expectNearBottom,
+  getChatContainerKey,
+  readScrollMetrics,
+  scrollUpFromBottom,
+  seedBottomAnchorAgent,
+  waitForAgentReady,
+  waitForContentGrowth,
+} from "./helpers/agent-bottom-anchor";
+
+test.describe.configure({ timeout: 180000 });
+
+async function openWorkspaceAgentTab(page: Page, agentId: string) {
+  const tab = page.getByTestId(`workspace-tab-agent_${agentId}`).first();
+  await expect(tab).toBeVisible({ timeout: 30000 });
+  await tab.click();
+}
+
+test("direct load and refresh land at the bottom for history-backed chats", async ({
+  page,
+}) => {
+  const repo = await createTempGitRepo("paseo-e2e-bottom-anchor-direct-");
+  const client = await connectDaemonClient();
+
+  try {
+    const agent = await seedBottomAnchorAgent({
+      client,
+      cwd: repo.path,
+      title: `bottom-anchor-direct-${Date.now()}`,
+      turnCount: 4,
+    });
+
+    await page.goto(agent.url, { waitUntil: "domcontentloaded" });
+    await openWorkspaceAgentTab(page, agent.id);
+    await waitForAgentReady(page, agent.expectedTailText);
+    await expectNearBottom(page);
+
+    await page.reload({ waitUntil: "commit" });
+    await openWorkspaceAgentTab(page, agent.id);
+    await waitForAgentReady(page, agent.expectedTailText);
+    await expectNearBottom(page);
+  } finally {
+    await client.close().catch(() => undefined);
+    await repo.cleanup();
+  }
+});
+
+test("revisiting a loaded chat restores bottom anchoring", async ({
+  page,
+}) => {
+  const repo = await createTempGitRepo("paseo-e2e-bottom-anchor-switch-");
+  const client = await connectDaemonClient();
+
+  try {
+    const agent = await seedBottomAnchorAgent({
+      client,
+      cwd: repo.path,
+      title: `bottom-anchor-switch-${Date.now()}`,
+      turnCount: 4,
+    });
+
+    await page.goto(agent.url, { waitUntil: "domcontentloaded" });
+    await openWorkspaceAgentTab(page, agent.id);
+    await waitForAgentReady(page, agent.expectedTailText);
+    await expectNearBottom(page);
+
+    await page.getByTestId("sidebar-new-agent").first().click();
+    await expect(page.getByRole("textbox", { name: "Message agent..." }).first()).toBeVisible({
+      timeout: 30000,
+    });
+
+    await openWorkspaceAgentTab(page, agent.id);
+    await waitForAgentReady(page, agent.expectedTailText);
+    await expectNearBottom(page);
+  } finally {
+    await client.close().catch(() => undefined);
+    await repo.cleanup();
+  }
+});
+
+test("sticky mode stays pinned through composer growth and viewport resize, but detached mode does not fight streamed updates", async ({
+  page,
+}) => {
+  const repo = await createTempGitRepo("paseo-e2e-bottom-anchor-sticky-");
+  const client = await connectDaemonClient();
+
+  try {
+    const agent = await seedBottomAnchorAgent({
+      client,
+      cwd: repo.path,
+      title: `bottom-anchor-sticky-${Date.now()}`,
+      turnCount: 10,
+    });
+
+    await page.setViewportSize({ width: 1320, height: 920 });
+    await page.goto(agent.url, { waitUntil: "domcontentloaded" });
+    await openWorkspaceAgentTab(page, agent.id);
+    await waitForAgentReady(page, agent.expectedTailText);
+    await expectNearBottom(page);
+
+    const composer = page.getByRole("textbox", { name: "Message agent..." }).first();
+    await composer.click();
+    for (let index = 0; index < 6; index += 1) {
+      await composer.pressSequentially(`composer growth line ${index + 1}`);
+      if (index < 5) {
+        await page.keyboard.press("Shift+Enter");
+      }
+    }
+    await expectNearBottom(page);
+    await expect(page.getByTestId("scroll-to-bottom-button")).toHaveCount(0);
+
+    await page.setViewportSize({ width: 820, height: 760 });
+    await expectNearBottom(page);
+
+    await scrollUpFromBottom(page, 720);
+    await expectDetachedFromBottom(page);
+    const beforeExternalUpdate = await readScrollMetrics(page);
+
+    const externalTurn = createReplyTurn(`external-stream-${Date.now()}`);
+    await client.sendAgentMessage(agent.id, externalTurn.message);
+    await waitForContentGrowth(page, beforeExternalUpdate.contentHeight);
+    const finish = await client.waitForFinish(agent.id, 120000);
+    expect(finish.status).toBe("idle");
+    await expectDetachedFromBottom(page);
+  } finally {
+    await client.close().catch(() => undefined);
+    await repo.cleanup();
+  }
+});
+
+test("web partial virtualization keeps bottom anchoring stable across direct load, refresh, and resize", async ({
+  page,
+}) => {
+  await page.addInitScript(() => {
+    (window as typeof window & {
+      __PASEO_E2E_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD?: number;
+      __PASEO_E2E_WEB_MOUNTED_RECENT_STREAM_ITEMS?: number;
+    }).__PASEO_E2E_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD = 6;
+    (window as typeof window & {
+      __PASEO_E2E_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD?: number;
+      __PASEO_E2E_WEB_MOUNTED_RECENT_STREAM_ITEMS?: number;
+    }).__PASEO_E2E_WEB_MOUNTED_RECENT_STREAM_ITEMS = 4;
+  });
+
+  const repo = await createTempGitRepo("paseo-e2e-bottom-anchor-virtualized-");
+  const client = await connectDaemonClient();
+
+  try {
+    const agent = await seedBottomAnchorAgent({
+      client,
+      cwd: repo.path,
+      title: `bottom-anchor-virtualized-${Date.now()}`,
+      turnCount: 4,
+    });
+
+    await page.goto(agent.url, { waitUntil: "domcontentloaded" });
+    await openWorkspaceAgentTab(page, agent.id);
+    await waitForAgentReady(page, agent.expectedTailText);
+    await expect
+      .poll(async () => await getChatContainerKey(page))
+      .toBe("web-partial-virtualized");
+    await expectNearBottom(page);
+
+    await page.reload({ waitUntil: "commit" });
+    await openWorkspaceAgentTab(page, agent.id);
+    await waitForAgentReady(page, agent.expectedTailText);
+    await expect
+      .poll(async () => await getChatContainerKey(page))
+      .toBe("web-partial-virtualized");
+    await expectNearBottom(page);
+
+    await page.setViewportSize({ width: 780, height: 720 });
+    await expectNearBottom(page);
+  } finally {
+    await client.close().catch(() => undefined);
+    await repo.cleanup();
+  }
+});

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

@@ -0,0 +1,273 @@
+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";
+
+const NEAR_BOTTOM_THRESHOLD_PX = 72;
+
+export type ScrollMetrics = {
+  offsetY: number;
+  contentHeight: number;
+  viewportHeight: number;
+  distanceFromBottom: number;
+};
+
+export type SeededAgent = {
+  id: string;
+  title: string;
+  expectedTailText: string;
+  url: string;
+  workspaceUrl: string;
+};
+
+export type DaemonClientInstance = {
+  connect(): Promise<void>;
+  close(): Promise<void>;
+  createAgent(options: {
+    provider: string;
+    model: string;
+    thinkingOptionId: string;
+    modeId: string;
+    cwd: string;
+    title: string;
+    initialPrompt: string;
+  }): Promise<{ id: string }>;
+  sendAgentMessage(agentId: string, text: string): Promise<void>;
+  waitForFinish(
+    agentId: string,
+    timeout?: number
+  ): Promise<{ status: string }>;
+};
+
+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;
+}
+
+function buildReplyBlock(label: string, lineCount = 14): string {
+  return Array.from({ length: lineCount }, (_, index) => {
+    const line = (index + 1).toString().padStart(2, "0");
+    return `${label} line ${line} anchor verification text keeps wrapping stable across resize and composer growth.`;
+  }).join("\n");
+}
+
+function buildProtocolMessage(label: string): string {
+  return [
+    "For every message in this chat, reply with exactly the text after the final line `REPLY:`.",
+    "Do not add extra words, bullets, markdown fences, or tool calls.",
+    "REPLY:",
+    buildReplyBlock(label),
+  ].join("\n");
+}
+
+function buildReplyMessage(label: string): string {
+  return ["REPLY:", buildReplyBlock(label)].join("\n");
+}
+
+export function createReplyTurn(label: string): {
+  message: string;
+  expectedReply: string;
+} {
+  return {
+    message: buildReplyMessage(label),
+    expectedReply: buildReplyBlock(label),
+  };
+}
+
+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")
+  ).href;
+  const mod = (await import(moduleUrl)) as {
+    DaemonClient: new (config: {
+      url: string;
+      clientId: string;
+      clientType: "cli";
+    }) => DaemonClientInstance;
+  };
+  return mod.DaemonClient;
+}
+
+export async function connectDaemonClient(): Promise<DaemonClientInstance> {
+  const DaemonClient = await loadDaemonClientConstructor();
+  const client = new DaemonClient({
+    url: getDaemonWsUrl(),
+    clientId: `app-e2e-${randomUUID()}`,
+    clientType: "cli",
+  });
+  await client.connect();
+  return client;
+}
+
+export async function seedBottomAnchorAgent(input: {
+  client: DaemonClientInstance;
+  cwd: string;
+  title?: string;
+  turnCount?: number;
+}): Promise<SeededAgent> {
+  const title = input.title ?? `bottom-anchor-${Date.now()}`;
+  const turnCount = Math.max(3, input.turnCount ?? 5);
+  const created = await input.client.createAgent({
+    provider: "codex",
+    model: "gpt-5.1-codex-mini",
+    thinkingOptionId: "low",
+    modeId: "full-access",
+    cwd: input.cwd,
+    title,
+    initialPrompt: buildProtocolMessage(`${title}-turn-00`),
+  });
+  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}.`
+    );
+  }
+
+  let expectedTailText = buildReplyBlock(`${title}-turn-00`);
+  for (let index = 1; index < turnCount; index += 1) {
+    const label = `${title}-turn-${index.toString().padStart(2, "0")}`;
+    expectedTailText = buildReplyBlock(label);
+    await input.client.sendAgentMessage(created.id, buildReplyMessage(label));
+    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}.`
+      );
+    }
+  }
+
+  return {
+    id: created.id,
+    title,
+    expectedTailText,
+    url: buildHostWorkspaceAgentRoute(getServerId(), input.cwd, created.id),
+    workspaceUrl: buildHostWorkspaceRoute(getServerId(), input.cwd),
+  };
+}
+
+export async function readScrollMetrics(page: Page): Promise<ScrollMetrics> {
+  return page.getByTestId("agent-chat-scroll").evaluate((root: Element) => {
+    const rootElement = root as HTMLElement;
+    const candidates = [rootElement, ...Array.from(rootElement.querySelectorAll("*"))];
+    const scrollElement =
+      candidates.find(
+        (element) =>
+          element instanceof HTMLElement &&
+          element.scrollHeight - element.clientHeight > 1
+      ) ?? rootElement;
+
+    const offsetY = Math.max(0, scrollElement.scrollTop);
+    const contentHeight = Math.max(0, scrollElement.scrollHeight);
+    const viewportHeight = Math.max(0, scrollElement.clientHeight);
+    const distanceFromBottom = Math.max(
+      0,
+      contentHeight - (offsetY + viewportHeight)
+    );
+
+    return {
+      offsetY,
+      contentHeight,
+      viewportHeight,
+      distanceFromBottom,
+    };
+  });
+}
+
+export async function scrollUpFromBottom(page: Page, pixels: number): Promise<void> {
+  await page.getByTestId("agent-chat-scroll").evaluate(
+    (root: Element, amount: number) => {
+      const rootElement = root as HTMLElement;
+      const candidates = [rootElement, ...Array.from(rootElement.querySelectorAll("*"))];
+      const scrollElement =
+        candidates.find(
+          (element) =>
+            element instanceof HTMLElement &&
+            element.scrollHeight - element.clientHeight > 1
+        ) ?? rootElement;
+
+      const bottomOffset = Math.max(
+        0,
+        scrollElement.scrollHeight - scrollElement.clientHeight
+      );
+      scrollElement.scrollTop = Math.max(0, bottomOffset - amount);
+    },
+    pixels
+  );
+}
+
+export async function waitForAgentReady(page: Page, expectedTailText?: string): Promise<void> {
+  await expect(page.getByTestId("agent-chat-scroll")).toBeVisible({ timeout: 60000 });
+  await expect(page.getByRole("textbox", { name: "Message agent..." }).first()).toBeVisible({
+    timeout: 60000,
+  });
+  await expect(page.getByTestId("agent-loading")).toHaveCount(0, { timeout: 60000 });
+  if (expectedTailText) {
+    await expect
+      .poll(async () => {
+        const metrics = await readScrollMetrics(page);
+        return metrics.contentHeight;
+      })
+      .toBeGreaterThan(0);
+  }
+}
+
+export async function expectNearBottom(page: Page): Promise<void> {
+  await expect
+    .poll(async () => {
+      const metrics = await readScrollMetrics(page);
+      return metrics.distanceFromBottom;
+    })
+    .toBeLessThanOrEqual(NEAR_BOTTOM_THRESHOLD_PX);
+}
+
+export async function expectDetachedFromBottom(page: Page): Promise<void> {
+  await expect
+    .poll(async () => {
+      const metrics = await readScrollMetrics(page);
+      return metrics.distanceFromBottom;
+    })
+    .toBeGreaterThan(NEAR_BOTTOM_THRESHOLD_PX);
+}
+
+export async function waitForContentGrowth(
+  page: Page,
+  previousContentHeight: number
+): Promise<ScrollMetrics> {
+  await expect
+    .poll(async () => {
+      const metrics = await readScrollMetrics(page);
+      return metrics.contentHeight;
+    })
+    .toBeGreaterThan(previousContentHeight);
+  return readScrollMetrics(page);
+}
+
+export async function getChatContainerKey(page: Page): Promise<string | null> {
+  return page
+    .getByTestId("agent-chat-scroll")
+    .evaluate((element) => {
+      const nativeId = (element as HTMLElement).id;
+      const prefix = "agent-chat-scroll-";
+      return nativeId.startsWith(prefix) ? nativeId.slice(prefix.length) : null;
+    });
+}

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

@@ -1,4 +1,5 @@
 import { test, expect, type Page } from "./fixtures";
+import { buildHostWorkspaceRoute } from "@/utils/host-routes";
 import {
   createAgent,
   createAgentInRepo,
@@ -7,6 +8,7 @@ import {
   setWorkingDirectory,
 } from "./helpers/app";
 import { createTempGitRepo } from "./helpers/workspace";
+import { getWorkspaceTabTestIds } from "./helpers/workspace-tabs";
 import { switchWorkspaceViaSidebar } from "./helpers/workspace-ui";
 
 function visibleTestId(page: Page, testId: string) {
@@ -264,6 +266,23 @@ async function readCurrentTerminalBuffer(page: Page): Promise<string> {
   }
 }
 
+async function expectTerminalFocused(page: Page): Promise<void> {
+  await expect
+    .poll(async () => {
+      return await page.evaluate(() => {
+        const surface = document.querySelector<HTMLElement>(
+          '[data-testid="terminal-surface"]'
+        );
+        if (!surface) {
+          return false;
+        }
+        const active = document.activeElement;
+        return active instanceof HTMLElement && surface.contains(active);
+      });
+    })
+    .toBe(true);
+}
+
 async function expectCurrentTerminalBufferToContain(page: Page, marker: string): Promise<void> {
   await expect
     .poll(async () => await readCurrentTerminalBuffer(page), { timeout: 30000 })
@@ -376,11 +395,7 @@ test("new terminal does not inherit output from the previously selected terminal
       directory: repo.path,
       prompt: "hello",
     });
-    await switchWorkspaceViaSidebar({
-      page,
-      serverId,
-      targetWorkspacePath: repo.path,
-    });
+    await page.goto(buildHostWorkspaceRoute(serverId, repo.path));
     await expect(page.getByTestId("workspace-new-terminal-tab").first()).toBeVisible({
       timeout: 30000,
     });
@@ -403,6 +418,74 @@ test("new terminal does not inherit output from the previously selected terminal
   }
 });
 
+test("workspace terminal tabs auto-focus on create and switch on desktop web", async ({
+  page,
+}) => {
+  const repo = await createTempGitRepo("paseo-e2e-terminal-focus-");
+
+  try {
+    const serverId = process.env.E2E_SERVER_ID;
+    if (!serverId) {
+      throw new Error("E2E_SERVER_ID is not set.");
+    }
+
+    await createAgentInRepo(page, {
+      directory: repo.path,
+      prompt: "hello",
+    });
+    await page.goto(buildHostWorkspaceRoute(serverId, repo.path));
+    await expect(page.getByTestId("workspace-new-terminal-tab").first()).toBeVisible({
+      timeout: 30000,
+    });
+
+    await page.getByTestId("workspace-new-terminal-tab").first().click();
+    await waitForTerminalAttachToSettle(page);
+    await expectTerminalFocused(page);
+
+    const firstMarker = `terminal-focus-one-${Date.now()}`;
+    await page.keyboard.type(`echo ${firstMarker}`, { delay: 1 });
+    await page.keyboard.press("Enter");
+    await expectCurrentTerminalBufferToContain(page, firstMarker);
+
+    const terminalTabIdsBeforeSecondCreate = (await getWorkspaceTabTestIds(page)).filter((id) =>
+      id.startsWith("workspace-tab-terminal_")
+    );
+
+    await page.getByTestId("workspace-new-terminal-tab").first().click();
+    await waitForTerminalAttachToSettle(page);
+    await expectTerminalFocused(page);
+
+    const terminalTabIdsAfterSecondCreate = (await getWorkspaceTabTestIds(page)).filter((id) =>
+      id.startsWith("workspace-tab-terminal_")
+    );
+    const secondTerminalTabId = terminalTabIdsAfterSecondCreate.find(
+      (id) => !terminalTabIdsBeforeSecondCreate.includes(id)
+    );
+    const firstTerminalTabId = terminalTabIdsBeforeSecondCreate[0];
+
+    if (!firstTerminalTabId || !secondTerminalTabId) {
+      throw new Error("Expected two distinct terminal tabs to exist.");
+    }
+
+    const secondMarker = `terminal-focus-two-${Date.now()}`;
+    await page.keyboard.type(`echo ${secondMarker}`, { delay: 1 });
+    await page.keyboard.press("Enter");
+    await expectCurrentTerminalBufferToContain(page, secondMarker);
+
+    await page.getByTestId(firstTerminalTabId).first().click();
+    await waitForTerminalAttachToSettle(page);
+    await expectTerminalFocused(page);
+    await expectCurrentTerminalBufferToContain(page, firstMarker);
+
+    await page.getByTestId(secondTerminalTabId).first().click();
+    await waitForTerminalAttachToSettle(page);
+    await expectTerminalFocused(page);
+    await expectCurrentTerminalBufferToContain(page, secondMarker);
+  } finally {
+    await repo.cleanup();
+  }
+});
+
 test("terminal reattaches cleanly after heavy output and tab switches", async ({ page }) => {
   const repo = await createTempGitRepo("paseo-e2e-terminal-reattach-");
 

packages/app/e2e/terminal-responsiveness-benchmark.spec.ts

@@ -175,29 +175,6 @@ test("workspace terminal responsiveness benchmark (report-only, single stress pr
       timeout: 120_000,
     }).toBe(true);
 
-    const diagnostics = await page.evaluate(async () => {
-      const debug = (
-        window as {
-          __PASEO_PERF_DIAGNOSTICS_DEBUG__?: {
-            consumeReports?: () => Promise<unknown[]>;
-          };
-        }
-      ).__PASEO_PERF_DIAGNOSTICS_DEBUG__;
-      if (!debug || typeof debug.consumeReports !== "function") {
-        return { available: false, reports: [] as unknown[] };
-      }
-      try {
-        const reports = await debug.consumeReports();
-        return { available: true, reports: Array.isArray(reports) ? reports : [] };
-      } catch (error) {
-        return {
-          available: true,
-          reports: [] as unknown[],
-          error: error instanceof Error ? error.message : String(error),
-        };
-      }
-    });
-
     const frameGapsMs = (rafResult.samples ?? []).filter(
       (sample) => Number.isFinite(sample) && sample > 0
     );
@@ -220,12 +197,6 @@ test("workspace terminal responsiveness benchmark (report-only, single stress pr
         over500Ms: frameGapsMs.filter((gap) => gap > 500).length,
       },
       explorerToggleLatencyMs: summarize(interactionLatenciesMs),
-      diagnostics: {
-        available: diagnostics.available,
-        reportCount: diagnostics.reports.length,
-        reports: diagnostics.reports,
-        error: "error" in diagnostics ? diagnostics.error : undefined,
-      },
     };
 
     await testInfo.attach("terminal-responsiveness-report", {

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

@@ -102,6 +102,39 @@ test("workspace new-tab buttons stay on-screen during horizontal scroll", async
   }
 });
 
+test("workspace new-tab buttons sit immediately after tabs before overflow", async ({ page }) => {
+  const repo = await createTempGitRepo("paseo-e2e-workspace-new-tab-adjacent-");
+
+  try {
+    await openWorkspaceWithAgent(page, repo.path);
+
+    const agentButton = page.getByTestId("workspace-new-agent-tab").first();
+    const workspaceTabs = page.locator(
+      '[data-testid^="workspace-tab-"]:not([data-testid^="workspace-tab-context-"])'
+    );
+
+    await expect(agentButton).toBeVisible({ timeout: 30000 });
+    await expect(workspaceTabs).toHaveCount(1, { timeout: 30000 });
+
+    const lastTabBounds = await workspaceTabs.last().boundingBox();
+    const agentBounds = await agentButton.boundingBox();
+
+    expect(lastTabBounds).not.toBeNull();
+    expect(agentBounds).not.toBeNull();
+
+    if (!lastTabBounds || !agentBounds) {
+      return;
+    }
+
+    const horizontalGap = agentBounds.x - (lastTabBounds.x + lastTabBounds.width);
+
+    expect(horizontalGap).toBeGreaterThanOrEqual(0);
+    expect(horizontalGap).toBeLessThanOrEqual(24);
+  } finally {
+    await repo.cleanup();
+  }
+});
+
 test("workspace explorer toggle opens and closes explorer", async ({ page }) => {
   const repo = await createTempGitRepo("paseo-e2e-workspace-explorer-toggle-");
 

packages/app/index.ts

@@ -2,6 +2,17 @@
 import { polyfillCrypto } from "./src/polyfills/crypto";
 polyfillCrypto();
 
+// Polyfill screen.orientation for WebKitGTK (Tauri Linux) which lacks 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/metro.config.js

@@ -1,9 +1,13 @@
 const { getDefaultConfig } = require("expo/metro-config");
+const exclusionList =
+  require("@expo/metro/metro-config/defaults/exclusionList").default;
 const { resolve } = require("metro-resolver");
 const fs = require("fs");
 const path = require("path");
 
 const projectRoot = __dirname;
+const appNodeModulesRoot = path.resolve(projectRoot, "node_modules");
+const appSrcRoot = path.resolve(projectRoot, "src");
 const serverSrcRoot = path.resolve(projectRoot, "../server/src");
 const relaySrcRoot = path.resolve(projectRoot, "../relay/src");
 const customWebPlatform = (process.env.PASEO_WEB_PLATFORM ?? "")
@@ -13,9 +17,20 @@ const customWebPlatform = (process.env.PASEO_WEB_PLATFORM ?? "")
 
 const config = getDefaultConfig(projectRoot);
 const defaultResolveRequest = config.resolver.resolveRequest ?? resolve;
-config.transformer.asyncRequireModulePath = require.resolve(
-  "@expo/metro-config/build/async-require"
-);
+const escapedAppSrcRoot = appSrcRoot
+  .replace(/[|\\{}()[\]^$+*?.]/g, "\\$&")
+  .replace(/\//g, "[\\\\/]");
+
+config.resolver.extraNodeModules = {
+  ...(config.resolver.extraNodeModules ?? {}),
+  react: path.join(appNodeModulesRoot, "react"),
+  "react-dom": path.join(appNodeModulesRoot, "react-dom"),
+  "react/jsx-runtime": path.join(appNodeModulesRoot, "react/jsx-runtime"),
+  "react/jsx-dev-runtime": path.join(appNodeModulesRoot, "react/jsx-dev-runtime"),
+};
+config.resolver.blockList = exclusionList([
+  new RegExp(`^${escapedAppSrcRoot}[\\\\/].*\\.(test|spec)\\.(ts|tsx)$`),
+]);
 
 function isLocalModuleImport(moduleName) {
   return (

packages/app/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@getpaseo/app",
   "main": "index.ts",
-  "version": "0.1.17",
+  "version": "0.1.26",
   "private": true,
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",
     "android": "npm run android:development",
-    "android:development": "APP_VARIANT=development expo prebuild --platform android --clean --non-interactive && APP_VARIANT=development expo run:android --variant=debug",
-    "android:production": "APP_VARIANT=production expo prebuild --platform android --clean --non-interactive && APP_VARIANT=production expo run:android --variant=release",
-    "android:prod": "npm run android:production",
+    "android:clear-autolinking-cache": "node -e \"require('node:fs').rmSync('android/build/generated/autolinking', { recursive: true, force: true })\"",
+    "android:development": "npm run android:clear-autolinking-cache && APP_VARIANT=development expo prebuild --platform android --non-interactive && APP_VARIANT=development expo run:android --variant=debug",
+    "android:production": "npm run android:clear-autolinking-cache && APP_VARIANT=production expo prebuild --platform android --non-interactive && APP_VARIANT=production expo run:android --variant=release",
     "android:release": "npm run android:production",
+    "android:clean": "expo prebuild --platform android --clean --non-interactive",
     "ios": "expo run:ios",
     "ios:release": "expo run:ios --configuration Release",
     "web": "expo start --web",
@@ -32,7 +33,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@expo/vector-icons": "^15.0.2",
     "@floating-ui/react-native": "^0.10.7",
-    "@getpaseo/server": "0.1.17",
+    "@getpaseo/server": "0.1.26",
     "@gorhom/bottom-sheet": "^5.2.6",
     "@gorhom/portal": "^1.0.14",
     "@lezer/common": "^1.5.0",
@@ -50,7 +51,9 @@
     "@react-navigation/elements": "^2.6.3",
     "@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-fit": "^0.11.0",
     "@xterm/addon-unicode11": "^0.9.0",
     "@xterm/addon-webgl": "^0.19.0",
@@ -84,8 +87,8 @@
     "lezer-elixir": "^1.1.2",
     "lucide-react-native": "^0.546.0",
     "mnemonic-id": "^3.2.7",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "19.1.4",
+    "react-dom": "19.1.4",
     "react-native": "^0.81.5",
     "react-native-css": "^3.0.1",
     "react-native-draggable-flatlist": "^4.0.3",
@@ -93,7 +96,7 @@
     "react-native-gesture-handler": "~2.28.0",
     "react-native-keyboard-controller": "^1.19.2",
     "react-native-markdown-display": "^7.0.2",
-    "react-native-nitro-modules": "^0.30.0",
+    "react-native-nitro-modules": "0.33.8",
     "react-native-permissions": "^5.4.2",
     "react-native-popover-view": "^6.1.0",
     "react-native-reanimated": "~4.1.1",

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

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

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

@@ -1,67 +0,0 @@
-import { ScrollViewStyleReset } from "expo-router/html";
-import type { PropsWithChildren } from "react";
-
-// Ensure Unistyles runs before Expo Router statically renders each page.
-import "../styles/unistyles";
-
-const webEcosystemStyles = /* css */ `
-  html {
-    touch-action: auto;
-  }
-
-  body {
-    overflow: auto;
-    overscroll-behavior: contain;
-    -webkit-user-select: text;
-    user-select: text;
-  }
-
-  body * {
-    -webkit-user-select: text;
-    user-select: text;
-  }
-
-  [data-testid="sidebar-agent-list-scroll"],
-  [data-testid="agent-chat-scroll"],
-  [data-testid="git-diff-scroll"],
-  [data-testid="file-explorer-tree-scroll"] {
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  [data-testid="sidebar-agent-list-scroll"]::-webkit-scrollbar,
-  [data-testid="agent-chat-scroll"]::-webkit-scrollbar,
-  [data-testid="git-diff-scroll"]::-webkit-scrollbar,
-  [data-testid="file-explorer-tree-scroll"]::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-`;
-
-function WebRespectfulStyleReset() {
-  return (
-    <style
-      id="paseo-web-ecosystem"
-      dangerouslySetInnerHTML={{ __html: webEcosystemStyles }}
-    />
-  );
-}
-
-export default function Root({ children }: PropsWithChildren) {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=yes, minimum-scale=1, maximum-scale=5"
-        />
-        {/* Reset scroll styles so React Native Web views behave like native. */}
-        <ScrollViewStyleReset />
-        <WebRespectfulStyleReset />
-      </head>
-      <body>{children}</body>
-    </html>
-  );
-}

packages/app/src/app/_layout.tsx

@@ -12,10 +12,24 @@ import { useFaviconStatus } from "@/hooks/use-favicon-status";
 import { View, ActivityIndicator, Text } from "react-native";
 import { UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { darkTheme } from "@/styles/theme";
-import { DaemonRegistryProvider, useDaemonRegistry } from "@/contexts/daemon-registry-context";
-import { MultiDaemonSessionHost } from "@/components/multi-daemon-session-host";
 import { QueryClientProvider } from "@tanstack/react-query";
-import { useState, useEffect, type ReactNode, useMemo, useRef } from "react";
+import {
+  getHostRuntimeStore,
+  useHosts,
+  useHostMutations,
+  useHostRuntimeSession,
+} from "@/runtime/host-runtime";
+import { SessionProvider } from "@/contexts/session-context";
+import type { HostProfile } from "@/types/host-connection";
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  type ReactNode,
+  useMemo,
+  useRef,
+} from "react";
 import { Platform } from "react-native";
 import * as Linking from "expo-linking";
 import * as Notifications from "expo-notifications";
@@ -34,6 +48,7 @@ import {
 } from "@/contexts/horizontal-scroll-context";
 import { getIsTauri } from "@/constants/layout";
 import { CommandCenter } from "@/components/command-center";
+import { ProjectPickerModal } from "@/components/project-picker-modal";
 import { KeyboardShortcutsDialog } from "@/components/keyboard-shortcuts-dialog";
 import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
 import { queryClient } from "@/query/query-client";
@@ -49,9 +64,12 @@ import {
   parseWorkspaceOpenIntent,
 } from "@/utils/host-routes";
 import { getTauri } from "@/utils/tauri";
-import { PerfDiagnosticsProvider } from "@/runtime/perf-diagnostics";
+import { attachConsole } from "@/utils/tauri-attach-console";
 
 polyfillCrypto();
+attachConsole();
+const HostRuntimeBootstrapContext = createContext(false);
+
 const IS_DEV = Boolean((globalThis as { __DEV__?: boolean }).__DEV__);
 
 function logLeftSidebarOpenGesture(
@@ -140,6 +158,79 @@ function PushNotificationRouter() {
   return null;
 }
 
+function ManagedDaemonSession({ daemon }: { daemon: HostProfile }) {
+  const { client } = useHostRuntimeSession(daemon.serverId);
+
+  if (!client) {
+    return null;
+  }
+
+  return (
+    <SessionProvider
+      key={daemon.serverId}
+      serverId={daemon.serverId}
+      client={client}
+    >
+      {null}
+    </SessionProvider>
+  );
+}
+
+function HostSessionManager() {
+  const hosts = useHosts();
+
+  if (hosts.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {hosts.map((daemon) => (
+        <ManagedDaemonSession key={daemon.serverId} daemon={daemon} />
+      ))}
+    </>
+  );
+}
+
+function HostRuntimeBootstrapProvider({ children }: { children: ReactNode }) {
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    const store = getHostRuntimeStore();
+
+    void store
+      .loadFromStorage()
+      .then(() => {
+        if (cancelled) {
+          return;
+        }
+        setReady(true);
+        void store.bootstrap();
+      })
+      .catch((error) => {
+        console.error("[HostRuntime] Failed to initialize store", error);
+        if (!cancelled) {
+          setReady(true);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <HostRuntimeBootstrapContext.Provider value={ready}>
+      {children}
+    </HostRuntimeBootstrapContext.Provider>
+  );
+}
+
+function useStoreReady(): boolean {
+  return useContext(HostRuntimeBootstrapContext);
+}
+
 function QueryProvider({ children }: { children: ReactNode }) {
   return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
 }
@@ -147,11 +238,16 @@ function QueryProvider({ children }: { children: ReactNode }) {
 interface AppContainerProps {
   children: ReactNode;
   selectedAgentId?: string;
+  chromeEnabled?: boolean;
 }
 
-function AppContainer({ children, selectedAgentId }: AppContainerProps) {
+function AppContainer({
+  children,
+  selectedAgentId,
+  chromeEnabled: chromeEnabledOverride,
+}: AppContainerProps) {
   const { theme } = useUnistyles();
-  const { daemons } = useDaemonRegistry();
+  const daemons = useHosts();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
   const openAgentList = usePanelStore((state) => state.openAgentList);
@@ -161,7 +257,7 @@ function AppContainer({ children, selectedAgentId }: AppContainerProps) {
 
   const isMobile =
     UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
-  const chromeEnabled = daemons.length > 0;
+  const chromeEnabled = chromeEnabledOverride ?? daemons.length > 0;
   const isOpen = chromeEnabled
     ? isMobile
       ? mobileView === "agent-list"
@@ -286,6 +382,7 @@ function AppContainer({ children, selectedAgentId }: AppContainerProps) {
       {isMobile && chromeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
       <DownloadToast />
       <CommandCenter />
+      <ProjectPickerModal />
       <KeyboardShortcutsDialog />
     </View>
   );
@@ -303,8 +400,9 @@ function AppContainer({ children, selectedAgentId }: AppContainerProps) {
 
 function ProvidersWrapper({ children }: { children: ReactNode }) {
   const { settings, isLoading: settingsLoading } = useAppSettings();
-  const { daemons, isLoading: registryLoading, upsertDaemonFromOfferUrl } = useDaemonRegistry();
-  const isLoading = settingsLoading || registryLoading;
+  const storeReady = useStoreReady();
+  const { upsertConnectionFromOfferUrl } = useHostMutations();
+  const isLoading = settingsLoading || !storeReady;
 
   // Apply theme setting on mount and when it changes
   useEffect(() => {
@@ -323,7 +421,7 @@ function ProvidersWrapper({ children }: { children: ReactNode }) {
 
   return (
     <VoiceProvider>
-      <OfferLinkListener upsertDaemonFromOfferUrl={upsertDaemonFromOfferUrl} />
+      <OfferLinkListener upsertDaemonFromOfferUrl={upsertConnectionFromOfferUrl} />
       {children}
     </VoiceProvider>
   );
@@ -373,6 +471,7 @@ function AppWithSidebar({ children }: { children: ReactNode }) {
   const pathname = usePathname();
   const params = useGlobalSearchParams<{ open?: string | string[] }>();
   useFaviconStatus();
+  const shouldShowAppChrome = pathname !== "/" && pathname !== "";
 
   // Parse selectedAgentKey directly from pathname
   // useLocalSearchParams doesn't update when navigating between same-pattern routes
@@ -391,7 +490,12 @@ function AppWithSidebar({ children }: { children: ReactNode }) {
   }, [params.open, pathname]);
 
   return (
-    <AppContainer selectedAgentId={selectedAgentKey}>{children}</AppContainer>
+    <AppContainer
+      selectedAgentId={shouldShowAppChrome ? selectedAgentKey : undefined}
+      chromeEnabled={shouldShowAppChrome}
+    >
+      {children}
+    </AppContainer>
   );
 }
 
@@ -448,52 +552,56 @@ function MissingDaemonView() {
 
 export default function RootLayout() {
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <PerfDiagnosticsProvider scope="root_layout">
-        <PortalProvider>
-          <SafeAreaProvider>
-            <KeyboardProvider>
-              <BottomSheetModalProvider>
-                <QueryProvider>
-                  <DaemonRegistryProvider>
-                    <PushNotificationRouter />
-                    <MultiDaemonSessionHost />
-                    <ProvidersWrapper>
-                      <SidebarAnimationProvider>
-                        <HorizontalScrollProvider>
-                          <ToastProvider>
-                            <AppWithSidebar>
-                              <Stack
-                                screenOptions={{
-                                  headerShown: false,
-                                  animation: "none",
-                                }}
-                              >
-                                <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]/settings" />
-                                <Stack.Screen name="pair-scan" />
-                              </Stack>
-                            </AppWithSidebar>
-                          </ToastProvider>
-                        </HorizontalScrollProvider>
-                      </SidebarAnimationProvider>
-                    </ProvidersWrapper>
-                  </DaemonRegistryProvider>
-                </QueryProvider>
-              </BottomSheetModalProvider>
-            </KeyboardProvider>
-          </SafeAreaProvider>
-        </PortalProvider>
-      </PerfDiagnosticsProvider>
+    <GestureHandlerRootView
+      style={{ flex: 1, backgroundColor: darkTheme.colors.surface0 }}
+    >
+      <PortalProvider>
+        <SafeAreaProvider>
+          <KeyboardProvider>
+            <BottomSheetModalProvider>
+              <QueryProvider>
+                <HostRuntimeBootstrapProvider>
+                  <PushNotificationRouter />
+                  <HostSessionManager />
+                  <ProvidersWrapper>
+                    <SidebarAnimationProvider>
+                      <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>
+                          </AppWithSidebar>
+                        </ToastProvider>
+                      </HorizontalScrollProvider>
+                    </SidebarAnimationProvider>
+                  </ProvidersWrapper>
+                </HostRuntimeBootstrapProvider>
+              </QueryProvider>
+            </BottomSheetModalProvider>
+          </KeyboardProvider>
+        </SafeAreaProvider>
+      </PortalProvider>
     </GestureHandlerRootView>
   );
 }

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

@@ -3,6 +3,7 @@ import { useLocalSearchParams, usePathname, useRouter } from "expo-router";
 import { useSessionStore } from "@/stores/session-store";
 import { useFormPreferences } from "@/hooks/use-form-preferences";
 import {
+  buildHostOpenProjectRoute,
   buildHostRootRoute,
   buildHostWorkspaceAgentRoute,
   buildHostWorkspaceRoute,
@@ -15,10 +16,13 @@ export default function HostIndexRoute() {
   const pathname = usePathname();
   const params = useLocalSearchParams<{ serverId?: string }>();
   const serverId = typeof params.serverId === "string" ? params.serverId : "";
-  const { preferences, isLoading: preferencesLoading } = useFormPreferences();
+  const { isLoading: preferencesLoading } = useFormPreferences();
   const sessionAgents = useSessionStore(
     (state) => (serverId ? state.sessions[serverId]?.agents : undefined)
   );
+  const sessionWorkspaces = useSessionStore(
+    (state) => (serverId ? state.sessions[serverId]?.workspaces : undefined)
+  );
 
   useEffect(() => {
     if (preferencesLoading) {
@@ -37,14 +41,21 @@ export default function HostIndexRoute() {
       }
 
       const visibleAgents = sessionAgents
-        ? Array.from(sessionAgents.values()).filter(
-            (agent) => !agent.archivedAt
-          )
+        ? Array.from(sessionAgents.values()).filter((agent) => !agent.archivedAt)
         : [];
       visibleAgents.sort(
         (left, right) => right.lastActivityAt.getTime() - left.lastActivityAt.getTime()
       );
 
+      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;
+        return rightTime - leftTime;
+      });
+
       const primaryAgent = visibleAgents[0];
       if (primaryAgent?.cwd?.trim()) {
         router.replace(
@@ -57,21 +68,23 @@ export default function HostIndexRoute() {
         return;
       }
 
-      const preferredWorkingDir =
-        preferences.serverId === serverId ? preferences.workingDir?.trim() : "";
-      const workspaceId = preferredWorkingDir || ".";
-      router.replace(buildHostWorkspaceRoute(serverId, workspaceId) as any);
+      const primaryWorkspace = visibleWorkspaces[0];
+      if (primaryWorkspace?.id?.trim()) {
+        router.replace(buildHostWorkspaceRoute(serverId, primaryWorkspace.id.trim()) as any);
+        return;
+      }
+
+      router.replace(buildHostOpenProjectRoute(serverId) as any);
     }, HOST_ROOT_REDIRECT_DELAY_MS);
 
     return () => clearTimeout(timer);
   }, [
     pathname,
-    preferences.serverId,
-    preferences.workingDir,
     preferencesLoading,
     router,
     serverId,
     sessionAgents,
+    sessionWorkspaces,
   ]);
 
   return null;

packages/app/src/app/h/[serverId]/open-project.tsx

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

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

@@ -0,0 +1,36 @@
+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/index.tsx

@@ -1,75 +1,113 @@
-import { useEffect, useMemo } from "react";
-import { ActivityIndicator, View } from "react-native";
-import { useLocalSearchParams, usePathname, useRouter } from "expo-router";
-import { useUnistyles } from "react-native-unistyles";
-import { DraftAgentScreen } from "@/screens/agent/draft-agent-screen";
-import { useDaemonRegistry } from "@/contexts/daemon-registry-context";
-import { useFormPreferences } from "@/hooks/use-form-preferences";
-import { buildHostRootRoute } from "@/utils/host-routes";
+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 {
+  shouldRedirectToWelcome,
+  shouldWaitOnStartupRace,
+  WELCOME_ROUTE,
+} from './index-startup'
+
+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
+      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
+    },
+    () => {
+      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
+    }
+  )
+}
 
 export default function Index() {
-  const router = useRouter();
-  const pathname = usePathname();
-  const params = useLocalSearchParams<{ serverId?: string }>();
-  const { theme } = useUnistyles();
-  const { daemons, isLoading: registryLoading } = useDaemonRegistry();
-  const { preferences, isLoading: preferencesLoading } = useFormPreferences();
-  const requestedServerId = useMemo(() => {
-    return typeof params.serverId === "string" ? params.serverId.trim() : "";
-  }, [params.serverId]);
-
-  const targetServerId = useMemo(() => {
-    if (daemons.length === 0) {
-      return null;
+  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)
     }
-    if (requestedServerId) {
-      const requested = daemons.find(
-        (daemon) => daemon.serverId === requestedServerId
-      );
-      if (requested) {
-        return requested.serverId;
-      }
-    }
-    if (preferences.serverId) {
-      const match = daemons.find((daemon) => daemon.serverId === preferences.serverId);
-      if (match) {
-        return match.serverId;
-      }
-    }
-    return daemons[0]?.serverId ?? null;
-  }, [daemons, preferences.serverId, requestedServerId]);
+  }, [])
 
   useEffect(() => {
-    if (registryLoading || preferencesLoading) {
-      return;
+    if (!onlineServerId) {
+      return
     }
-    if (!targetServerId) {
-      return;
+    if (pathname !== '/' && pathname !== '') {
+      return
     }
-    if (pathname !== "/" && pathname !== "") {
-      return;
-    }
-    router.replace(buildHostRootRoute(targetServerId) as any);
-  }, [pathname, preferencesLoading, registryLoading, router, targetServerId]);
+    router.replace(buildHostRootRoute(onlineServerId) as any)
+  }, [onlineServerId, pathname, router])
 
-  if (registryLoading || preferencesLoading) {
-    return (
-      <View
-        style={{
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-          backgroundColor: theme.colors.surface0,
-        }}
-      >
-        <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
-      </View>
-    );
+  useEffect(() => {
+    if (
+      !shouldRedirectToWelcome({
+        onlineServerId,
+        hasTimedOut,
+        pathname,
+        isDesktopStartupRace,
+        daemonCount: daemons.length,
+      })
+    ) {
+      return
+    }
+    router.replace(WELCOME_ROUTE as any)
+  }, [daemons.length, hasTimedOut, isDesktopStartupRace, onlineServerId, pathname, router])
+
+  if (
+    shouldWaitOnStartupRace({
+      onlineServerId,
+      hasTimedOut,
+      isDesktopStartupRace,
+      daemonCount: daemons.length,
+      pathname,
+    })
+  ) {
+    return <StartupSplashScreen />
   }
 
-  if (!targetServerId) {
-    return <DraftAgentScreen />;
+  if (!onlineServerId) {
+    return <WelcomeScreen />
   }
 
-  return null;
+  return null
 }

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

@@ -5,11 +5,11 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { CameraView, useCameraPermissions } from "expo-camera";
 import type { BarcodeScanningResult } from "expo-camera";
-import { useDaemonRegistry } from "@/contexts/daemon-registry-context";
+import { useHosts, useHostMutations } from "@/runtime/host-runtime";
 import { useSessionStore } from "@/stores/session-store";
 import { NameHostModal } from "@/components/name-host-modal";
 import { decodeOfferFragmentPayload, normalizeHostPort } from "@/utils/daemon-endpoints";
-import { probeConnection } from "@/utils/test-daemon-connection";
+import { connectToDaemon } from "@/utils/test-daemon-connection";
 import { ConnectionOfferSchema } from "@server/shared/connection-offer";
 import {
   buildHostRootRoute,
@@ -151,7 +151,8 @@ export default function PairScanScreen() {
   const sourceServerId =
     typeof params.sourceServerId === "string" ? params.sourceServerId : null;
   const targetServerId = typeof params.targetServerId === "string" ? params.targetServerId : null;
-  const { daemons, upsertDaemonFromOfferUrl, updateHost } = useDaemonRegistry();
+  const daemons = useHosts();
+  const { upsertConnectionFromOfferUrl: upsertDaemonFromOfferUrl, renameHost } = useHostMutations();
 
   const [permission, requestPermission] = useCameraPermissions();
   const [isPairing, setIsPairing] = useState(false);
@@ -241,7 +242,7 @@ export default function PairScanScreen() {
           return;
         }
 
-        await probeConnection(
+        const { client } = await connectToDaemon(
           {
             id: "probe",
             type: "relay",
@@ -250,6 +251,7 @@ export default function PairScanScreen() {
           },
           { serverId: offer.serverId },
         );
+        await client.close().catch(() => undefined);
 
         const isNewHost = !daemons.some((daemon) => daemon.serverId === offer.serverId);
         const profile = await upsertDaemonFromOfferUrl(offerUrl);
@@ -311,7 +313,7 @@ export default function PairScanScreen() {
           }}
           onSave={(label) => {
             const serverId = pendingNameHost.serverId;
-            void updateHost(serverId, { label }).finally(() => {
+            void renameHost(serverId, label).finally(() => {
               setPendingNameHost(null);
               returnToSource(serverId);
             });

packages/app/src/app/settings.tsx

@@ -3,14 +3,14 @@ import { ActivityIndicator, View } from "react-native";
 import { useRouter } from "expo-router";
 import { useUnistyles } from "react-native-unistyles";
 import { DraftAgentScreen } from "@/screens/agent/draft-agent-screen";
-import { useDaemonRegistry } from "@/contexts/daemon-registry-context";
+import { 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, isLoading: registryLoading } = useDaemonRegistry();
+  const daemons = useHosts();
   const { preferences, isLoading: preferencesLoading } = useFormPreferences();
 
   const targetServerId = useMemo(() => {
@@ -29,16 +29,16 @@ export default function LegacySettingsRoute() {
   }, [daemons, preferences.serverId]);
 
   useEffect(() => {
-    if (registryLoading || preferencesLoading) {
+    if (preferencesLoading) {
       return;
     }
     if (!targetServerId) {
       return;
     }
     router.replace(buildHostSettingsRoute(targetServerId) as any);
-  }, [preferencesLoading, registryLoading, router, targetServerId]);
+  }, [preferencesLoading, router, targetServerId]);
 
-  if (registryLoading || preferencesLoading) {
+  if (preferencesLoading) {
     return (
       <View
         style={{

packages/app/src/app/welcome.tsx

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

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

@@ -65,7 +65,7 @@ export function AddHostMethodModal({
         <Link2 size={18} color={theme.colors.foreground} />
         <View style={styles.optionBody}>
           <Text style={styles.optionText}>Direct connection</Text>
-          <Text style={styles.optionSubtext}>Local network or Tailscale (unencrypted).</Text>
+          <Text style={styles.optionSubtext}>Local network or VPN.</Text>
         </View>
       </Pressable>
 
@@ -74,7 +74,7 @@ export function AddHostMethodModal({
           <QrCode size={18} color={theme.colors.foreground} />
           <View style={styles.optionBody}>
             <Text style={styles.optionText}>Scan QR code</Text>
-            <Text style={styles.optionSubtext}>Relay pairing (E2EE).</Text>
+            <Text style={styles.optionSubtext}>Encrypted relay connection.</Text>
           </View>
         </Pressable>
       ) : null}
@@ -83,7 +83,7 @@ export function AddHostMethodModal({
         <ClipboardPaste size={18} color={theme.colors.foreground} />
         <View style={styles.optionBody}>
           <Text style={styles.optionText}>Paste pairing link</Text>
-          <Text style={styles.optionSubtext}>Relay pairing (E2EE).</Text>
+          <Text style={styles.optionSubtext}>Encrypted relay connection.</Text>
         </View>
       </Pressable>
     </AdaptiveModalSheet>

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

@@ -2,9 +2,10 @@ import { useCallback, useRef, useState } from "react";
 import { Alert, Text, TextInput, View } from "react-native";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { Link2 } from "lucide-react-native";
-import { useDaemonRegistry, type HostProfile } from "@/contexts/daemon-registry-context";
+import type { HostProfile } from "@/types/host-connection";
+import { useHosts, useHostMutations } from "@/runtime/host-runtime";
 import { normalizeHostPort } from "@/utils/daemon-endpoints";
-import { DaemonConnectionTestError, probeConnection } from "@/utils/test-daemon-connection";
+import { DaemonConnectionTestError, connectToDaemon } from "@/utils/test-daemon-connection";
 import { AdaptiveModalSheet, AdaptiveTextInput } from "./adaptive-modal-sheet";
 import { Button } from "@/components/ui/button";
 
@@ -103,13 +104,13 @@ function buildConnectionFailureCopy(endpoint: string, error: unknown): { title:
     rawLower.includes("connection refused") ||
     rawLower.includes("err_connection_refused")
   ) {
-    detail = "Connection was refused. Is the daemon running on that host and port?";
+    detail = "Connection refused. Is the server running at this address?";
   } else if (rawLower.includes("enotfound") || rawLower.includes("not found")) {
     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/certificate error. This app expects a daemon reachable over the local network or via relay.";
+    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 {
@@ -129,7 +130,8 @@ export interface AddHostModalProps {
 
 export function AddHostModal({ visible, onClose, onCancel, onSaved, targetServerId }: AddHostModalProps) {
   const { theme } = useUnistyles();
-  const { daemons, upsertDirectConnection } = useDaemonRegistry();
+  const daemons = useHosts();
+  const { upsertDirectConnection } = useHostMutations();
   const isMobile =
     UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
 
@@ -179,7 +181,12 @@ export function AddHostModal({ visible, onClose, onCancel, onSaved, targetServer
       setIsSaving(true);
       setErrorMessage("");
 
-      const { serverId, hostname } = await probeConnection({ id: "probe", type: "direct", endpoint });
+      const { client, serverId, hostname } = await connectToDaemon({
+        id: "probe",
+        type: "directTcp",
+        endpoint,
+      });
+      await client.close().catch(() => undefined);
       if (targetServerId && serverId !== targetServerId) {
         const message = `That endpoint belongs to ${serverId}, not ${targetServerId}.`;
         setErrorMessage(message);
@@ -217,7 +224,7 @@ export function AddHostModal({ visible, onClose, onCancel, onSaved, targetServer
 
   return (
     <AdaptiveModalSheet title="Direct connection" visible={visible} onClose={handleClose} testID="add-host-modal">
-      <Text style={styles.helper}>Connect to a daemon by entering host:port.</Text>
+      <Text style={styles.helper}>Enter the address of a Paseo server.</Text>
 
       <View style={styles.field}>
         <Text style={styles.label}>Host</Text>
@@ -225,7 +232,7 @@ export function AddHostModal({ visible, onClose, onCancel, onSaved, targetServer
           ref={hostInputRef}
           value={endpointRaw}
           onChangeText={setEndpointRaw}
-          placeholder="host:6767"
+          placeholder="hostname:port"
           placeholderTextColor={theme.colors.foregroundMuted}
           style={styles.input}
           autoCapitalize="none"

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

@@ -39,7 +39,6 @@ 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 { shouldClearAgentAttention } from '@/utils/agent-attention'
 
 type QueuedMessage = {
   id: string
@@ -66,11 +65,16 @@ interface AgentInputAreaProps {
   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,
@@ -85,6 +89,9 @@ export function AgentInputArea({
   onAddImages,
   commandDraftConfig,
   onMessageSent,
+  onComposerHeightChange,
+  onAttentionInputFocus,
+  onAttentionPromptSend,
   statusControls,
 }: AgentInputAreaProps) {
   markScrollInvestigationRender(`AgentInputArea:${serverId}:${agentId}`)
@@ -125,6 +132,9 @@ export function AgentInputArea({
     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)
@@ -241,18 +251,9 @@ export function AgentInputArea({
         messageId: clientMessageId,
         ...(imagesData && imagesData.length > 0 ? { images: imagesData } : {}),
       })
-      if (
-        shouldClearAgentAttention({
-          agentId,
-          isConnected,
-          requiresAttention: agent?.requiresAttention,
-          attentionReason: agent?.attentionReason,
-        })
-      ) {
-        client.clearAgentAttention(agentId)
-      }
+      onAttentionPromptSend?.()
     }
-  }, [agent?.attentionReason, agent?.requiresAttention, client, isConnected, serverId, setAgentStreamTail, setAgentStreamHead])
+  }, [client, onAttentionPromptSend, serverId, setAgentStreamTail, setAgentStreamHead])
 
   useEffect(() => {
     onSubmitMessageRef.current = onSubmitMessage
@@ -596,7 +597,7 @@ export function AgentInputArea({
   const isVoiceModeForAgent = voice?.isVoiceModeForAgent(serverId, agentId) ?? false
 
   const handleToggleRealtimeVoice = useCallback(() => {
-    if (!voice || !isConnected) {
+    if (!voice || !isConnected || !agent) {
       return
     }
     if (voice.isVoiceSwitching) {
@@ -613,7 +614,7 @@ export function AgentInputArea({
         toast.error(message)
       }
     })
-  }, [agentId, isConnected, serverId, toast, voice])
+  }, [agent, agentId, isConnected, serverId, toast, voice])
 
   function handleEditQueuedMessage(id: string) {
     const item = queuedMessages.find((q) => q.id === id)
@@ -703,7 +704,7 @@ export function AgentInputArea({
 
   const rightContent = (
     <View style={styles.rightControls}>
-      {!isVoiceModeForAgent ? (
+      {!isVoiceModeForAgent && agent ? (
         <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
           <TooltipTrigger
             onPress={handleToggleRealtimeVoice}
@@ -806,7 +807,7 @@ export function AgentInputArea({
               onRemoveImage={handleRemoveImage}
               client={client}
               isReadyForDictation={isDictationReady}
-              placeholder="Message agent..."
+              placeholder={messagePlaceholder}
               autoFocus={autoFocus && isDesktopWebBreakpoint}
               autoFocusKey={`${serverId}:${agentId}`}
               disabled={isSubmitLoading}
@@ -822,7 +823,13 @@ export function AgentInputArea({
               onSelectionChange={(selection) => {
                 setCursorIndex(selection.start)
               }}
-              onFocusChange={setIsMessageInputFocused}
+              onFocusChange={(focused) => {
+                setIsMessageInputFocused(focused)
+                if (focused) {
+                  onAttentionInputFocus?.()
+                }
+              }}
+              onHeightChange={onComposerHeightChange}
             />
           </View>
         </View>

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

@@ -4,332 +4,347 @@ import {
   Pressable,
   Modal,
   RefreshControl,
-  SectionList,
-  type ViewToken,
-  type SectionListRenderItem,
-} 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, useUnistyles } from "react-native-unistyles";
-import { useQueryClient } from "@tanstack/react-query";
-import { formatTimeAgo } from "@/utils/time";
-import { shortenPath } from "@/utils/shorten-path";
-import { deriveBranchLabel, deriveProjectPath } from "@/utils/agent-display-info";
-import { type AggregatedAgent } from "@/hooks/use-aggregated-agents";
-import { useSessionStore } from "@/stores/session-store";
-import {
-  getHostRuntimeStore,
-  isHostRuntimeConnected,
-} from "@/runtime/host-runtime";
-import { AgentStatusDot } from "@/components/agent-status-dot";
-import {
-  CHECKOUT_STATUS_STALE_TIME,
-  checkoutStatusQueryKey,
-  useCheckoutStatusCacheOnly,
-} from "@/hooks/use-checkout-status-query";
-import {
-  buildAgentNavigationKey,
-  startNavigationTiming,
-} from "@/utils/navigation-timing";
-import {
-  buildHostWorkspaceAgentRoute,
-} from "@/utils/host-routes";
+  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'
 
 interface AgentListProps {
-  agents: AggregatedAgent[];
-  showCheckoutInfo?: boolean;
-  isRefreshing?: boolean;
-  onRefresh?: () => void;
-  selectedAgentId?: string;
-  onAgentSelect?: () => void;
-  listFooterComponent?: ReactElement | null;
+  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[];
+  key: string
+  title: string
+  data: 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()
-  );
+  )
 
   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'
 }
 
-interface AgentListRowProps {
-  agent: AggregatedAgent;
-  selectedAgentId?: string;
-  showCheckoutInfo: boolean;
-  onPress: (agent: AggregatedAgent) => void;
-  onLongPress: (agent: AggregatedAgent) => void;
+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'
+    default:
+      return status
+  }
 }
 
-function AgentListRow({
+function SessionBadge({
+  label,
+  tone = 'neutral',
+}: {
+  label: string
+  tone?: 'neutral' | 'warning' | 'danger'
+}) {
+  return (
+    <View
+      style={[
+        styles.badge,
+        tone === 'warning' && styles.badgeWarning,
+        tone === 'danger' && styles.badgeDanger,
+      ]}
+    >
+      <Text
+        style={[
+          styles.badgeText,
+          tone === 'warning' && styles.badgeTextWarning,
+          tone === 'danger' && styles.badgeTextDanger,
+        ]}
+      >
+        {label}
+      </Text>
+    </View>
+  )
+}
+
+function SessionRow({
   agent,
+  isMobile,
   selectedAgentId,
-  showCheckoutInfo,
+  showAttentionIndicator,
   onPress,
   onLongPress,
-}: AgentListRowProps) {
-  const timeAgo = formatTimeAgo(agent.lastActivityAt);
-  const agentKey = `${agent.serverId}:${agent.id}`;
-  const isSelected = selectedAgentId === agentKey;
-  const archivedLabel = agent.archivedAt ? "Archived" : null;
-  const checkoutQuery = useCheckoutStatusCacheOnly({
-    serverId: agent.serverId,
-    cwd: agent.cwd,
-  });
-  const checkout = checkoutQuery.data ?? null;
-  const projectPath = showCheckoutInfo
-    ? deriveProjectPath(agent.cwd, checkout)
-    : agent.cwd;
-  const branchLabel = showCheckoutInfo ? deriveBranchLabel(checkout) : null;
+}: {
+  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)
 
   return (
     <Pressable
       style={({ pressed, hovered }) => [
-        styles.agentItem,
-        isSelected && styles.agentItemSelected,
-        hovered && styles.agentItemHovered,
-        pressed && styles.agentItemPressed,
+        styles.row,
+        isSelected && styles.rowSelected,
+        hovered && styles.rowHovered,
+        pressed && styles.rowPressed,
       ]}
       onPress={() => onPress(agent)}
       onLongPress={() => onLongPress(agent)}
       testID={`agent-row-${agent.serverId}-${agent.id}`}
     >
-      {({ hovered }) => (
-        <View style={styles.agentContent}>
-          <View style={styles.row}>
-            <AgentStatusDot status={agent.status} requiresAttention={agent.requiresAttention} />
-            <Text
-              style={[
-                styles.agentTitle,
-                (isSelected || hovered) && styles.agentTitleHighlighted,
-              ]}
-              numberOfLines={1}
-            >
-              {agent.title || "New agent"}
-            </Text>
-          </View>
-
-          <Text style={styles.secondaryRow} numberOfLines={1}>
-            {shortenPath(projectPath)}
-            {branchLabel ? ` · ${branchLabel}` : ""}
-            {archivedLabel ? ` · ${archivedLabel}` : ""} · {timeAgo}
+      <View style={styles.rowLeading}>
+        <AgentStatusDot status={agent.status} requiresAttention={agent.requiresAttention} />
+      </View>
+      <View style={styles.rowContent}>
+        <View style={styles.rowTitleRow}>
+          <Text
+            style={[styles.sessionTitle, isSelected && styles.sessionTitleHighlighted]}
+            numberOfLines={1}
+          >
+            {agent.title || 'New session'}
           </Text>
+          {agent.archivedAt ? <SessionBadge label="Archived" /> : null}
+          {(agent.pendingPermissionCount ?? 0) > 0 ? (
+            <SessionBadge label={`${agent.pendingPermissionCount} pending`} tone="warning" />
+          ) : null}
+          {!isMobile && showAttentionIndicator && agent.requiresAttention ? (
+            <SessionBadge label="Attention" tone="danger" />
+          ) : null}
         </View>
+        {isMobile && (
+          <View style={styles.rowMetaRow}>
+            <Text style={styles.sessionMetaText} numberOfLines={1}>
+              {projectPath}
+            </Text>
+            <Text style={styles.sessionMetaSeparator}>·</Text>
+            <Text style={styles.sessionMetaText}>{statusLabel}</Text>
+            <Text style={styles.sessionMetaSeparator}>·</Text>
+            <Text style={styles.sessionMetaText}>{timeAgo}</Text>
+            {agent.serverLabel ? (
+              <>
+                <Text style={styles.sessionMetaSeparator}>·</Text>
+                <Text style={styles.sessionMetaText} numberOfLines={1}>
+                  {agent.serverLabel}
+                </Text>
+              </>
+            ) : null}
+          </View>
+        )}
+      </View>
+      {!isMobile && (
+        <>
+          <Text style={styles.columnMeta} numberOfLines={1}>
+            {projectPath}
+          </Text>
+          <Text style={styles.columnMetaFixed}>{statusLabel}</Text>
+          <Text style={styles.columnMetaFixed}>{timeAgo}</Text>
+        </>
       )}
+      {isMobile && showAttentionIndicator && agent.requiresAttention ? (
+        <View style={styles.rowTrailing}>
+          <SessionBadge label="Attention" tone="danger" />
+        </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({
   agents,
-  showCheckoutInfo = true,
   isRefreshing = false,
   onRefresh,
   selectedAgentId,
   onAgentSelect,
   listFooterComponent,
+  showAttentionIndicator = true,
 }: AgentListProps) {
-  const { theme } = useUnistyles();
-  const pathname = usePathname();
-  const queryClient = useQueryClient();
-  const insets = useSafeAreaInsets();
-  const [actionAgent, setActionAgent] = useState<AggregatedAgent | null>(null);
+  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 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 navigationKey = buildAgentNavigationKey(serverId, agentId);
-      startNavigationTiming(navigationKey, {
-        from: "home",
-        to: "agent",
-        params: { serverId, agentId },
-      });
+      const serverId = agent.serverId
+      const agentId = agent.id
+      const shouldReplace = pathname.startsWith('/h/')
+      const navigate = shouldReplace ? router.replace : router.push
 
-      const shouldReplace = pathname.startsWith("/h/");
-      const navigate = shouldReplace ? router.replace : router.push;
+      onAgentSelect?.()
 
-      onAgentSelect?.();
-
-      const route: Href = buildHostWorkspaceAgentRoute(
-        serverId,
-        agent.cwd,
-        agentId
-      ) as Href;
-      navigate(route);
+      const route: Href = buildHostWorkspaceAgentRoute(serverId, agent.cwd, agentId) as Href
+      navigate(route)
     },
     [isActionSheetVisible, pathname, 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]);
-
-  const viewabilityConfig = useMemo(
-    () => ({ itemVisiblePercentThreshold: 30 }),
-    []
-  );
-
-  const onViewableItemsChanged = useCallback(
-    ({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
-      if (!showCheckoutInfo) {
-        return;
-      }
-      for (const token of viewableItems) {
-        const agent = token.item as AggregatedAgent | undefined;
-        if (!agent) {
-          continue;
-        }
-
-        const runtime = getHostRuntimeStore();
-        const client = runtime.getClient(agent.serverId);
-        const isConnected = isHostRuntimeConnected(runtime.getSnapshot(agent.serverId));
-        if (!client || !isConnected) {
-          continue;
-        }
-
-        const queryKey = checkoutStatusQueryKey(agent.serverId, agent.cwd);
-        const queryState = queryClient.getQueryState(queryKey);
-        const isFetching = queryState?.fetchStatus === "fetching";
-        const isFresh =
-          typeof queryState?.dataUpdatedAt === "number" &&
-          Date.now() - queryState.dataUpdatedAt < CHECKOUT_STATUS_STALE_TIME;
-        if (isFetching || isFresh) {
-          continue;
-        }
-
-        void queryClient.prefetchQuery({
-          queryKey,
-          queryFn: async () => await client.getCheckoutStatus(agent.cwd),
-          staleTime: CHECKOUT_STATUS_STALE_TIME,
-        }).catch((error) => {
-          console.warn("[checkout_status] prefetch failed", error);
-        });
-      }
-    },
-    [queryClient, showCheckoutInfo]
-  );
+    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 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: AgentListSection[] = []
     for (const label of order) {
-      const data = buckets.get(label);
+      const data = buckets.get(label)
       if (!data || data.length === 0) {
-        continue;
+        continue
       }
-      result.push({ key: `date:${label}`, title: label, data });
+      result.push({ key: `date:${label}`, title: label, data })
     }
-    return result;
-  }, [agents]);
+    return result
+  }, [agents])
 
-  const renderAgentItem: SectionListRenderItem<AggregatedAgent, AgentListSection> =
-    useCallback(
-      ({ item: agent }) => (
-        <AgentListRow
-          agent={agent}
-          selectedAgentId={selectedAgentId}
-          showCheckoutInfo={showCheckoutInfo}
-          onPress={handleAgentPress}
-          onLongPress={handleAgentLongPress}
-        />
-      ),
-      [handleAgentLongPress, handleAgentPress, selectedAgentId, showCheckoutInfo]
-    );
-
-  const renderSectionHeader = useCallback(
-    ({ section }: { section: AgentListSection }) => (
-      <View style={styles.sectionHeader}>
-        <Text style={styles.sectionTitle}>{section.title}</Text>
-      </View>
+  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 keyExtractor = useCallback(
-    (agent: AggregatedAgent) => `${agent.serverId}:${agent.id}`,
-    []
-  );
+  const keyExtractor = useCallback((section: AgentListSection) => section.key, [])
 
   return (
     <>
-      <SectionList
-        sections={sections}
+      <FlatList
+        data={sections}
         style={styles.list}
         contentContainerStyle={styles.listContent}
         keyExtractor={keyExtractor}
-        renderItem={renderAgentItem}
-        renderSectionHeader={renderSectionHeader}
-        stickySectionHeadersEnabled={false}
-        extraData={selectedAgentId}
+        renderItem={renderSection}
         showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"
-        initialNumToRender={12}
-        windowSize={7}
-        maxToRenderPerBatch={12}
-        updateCellsBatchingPeriod={16}
-        removeClippedSubviews={true}
         ListFooterComponent={listFooterComponent}
-        onViewableItemsChanged={onViewableItemsChanged}
-        viewabilityConfig={viewabilityConfig}
         refreshControl={
           onRefresh ? (
             <RefreshControl
@@ -349,16 +364,16 @@ export function AgentList({
         onRequestClose={handleCloseActionSheet}
       >
         <View style={styles.sheetOverlay}>
-          <Pressable
-            style={styles.sheetBackdrop}
-            onPress={handleCloseActionSheet}
-          />
-          <View style={[styles.sheetContainer, { paddingBottom: Math.max(insets.bottom, theme.spacing[6]) }]}>
+          <Pressable style={styles.sheetBackdrop} onPress={handleCloseActionSheet} />
+          <View
+            style={[
+              styles.sheetContainer,
+              { paddingBottom: Math.max(insets.bottom, theme.spacing[6]) },
+            ]}
+          >
             <View style={styles.sheetHandle} />
             <Text style={styles.sheetTitle}>
-              {isActionDaemonUnavailable
-                ? "Host offline"
-                : "Archive this agent?"}
+              {isActionDaemonUnavailable ? 'Host offline' : 'Archive this session?'}
             </Text>
             <View style={styles.sheetButtonRow}>
               <Pressable
@@ -388,7 +403,7 @@ export function AgentList({
         </View>
       </Modal>
     </>
-  );
+  )
 }
 
 const styles = StyleSheet.create((theme) => ({
@@ -397,83 +412,172 @@ const styles = StyleSheet.create((theme) => ({
     minHeight: 0,
   },
   listContent: {
-    paddingHorizontal: theme.spacing[4],
+    paddingHorizontal: {
+      xs: theme.spacing[3],
+      md: theme.spacing[6],
+    },
     paddingTop: theme.spacing[2],
-    paddingBottom: theme.spacing[4],
+    paddingBottom: theme.spacing[6],
+    gap: theme.spacing[1],
   },
-  sectionHeader: {
-    paddingVertical: theme.spacing[2],
-    paddingHorizontal: theme.spacing[3],
+  sectionBlock: {
     marginTop: theme.spacing[2],
   },
+  sectionHeading: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing[3],
+    paddingHorizontal: theme.spacing[1],
+    marginBottom: theme.spacing[2],
+  },
   sectionTitle: {
     fontSize: theme.fontSize.sm,
-    fontWeight: "500",
+    fontWeight: theme.fontWeight.medium,
     color: theme.colors.foregroundMuted,
-    textAlign: "left",
   },
-  agentItem: {
-    paddingVertical: theme.spacing[2],
-    paddingHorizontal: theme.spacing[3],
-    borderRadius: theme.borderRadius.lg,
-    marginBottom: theme.spacing[1],
+  listCard: {
+    overflow: {
+      xs: 'hidden' as const,
+      md: 'visible' as const,
+    },
+    borderRadius: {
+      xs: theme.borderRadius.lg,
+      md: 0,
+    },
   },
-  agentItemSelected: {
-    backgroundColor: theme.colors.surface2,
-  },
-  agentItemHovered: {
-    backgroundColor: theme.colors.surface1,
-  },
-  agentItemPressed: {
-    backgroundColor: theme.colors.surface2,
-  },
-  agentContent: {
-    flex: 1,
-    gap: theme.spacing[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: {
+      xs: theme.borderRadius.lg,
+      md: 0,
+    },
+    marginBottom: {
+      xs: theme.spacing[1],
+      md: 0,
+    },
+  },
+  rowLeading: {
+    marginRight: theme.spacing[3],
+  },
+  rowContent: {
+    flex: 1,
+    minWidth: 0,
+  },
+  rowTitleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexWrap: 'wrap',
     gap: theme.spacing[2],
   },
-  agentTitle: {
-    flex: 1,
-    fontSize: theme.fontSize.base,
-    fontWeight: "400",
-    color: theme.colors.foreground,
-    opacity: 0.8,
+  rowMetaRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: theme.spacing[1],
+    marginTop: 2,
   },
-  agentTitleHighlighted: {
+  rowTrailing: {
+    marginLeft: theme.spacing[2],
+  },
+  rowSelected: {
+    backgroundColor: theme.colors.surface2,
+  },
+  rowHovered: {
+    backgroundColor: theme.colors.surface1,
+  },
+  rowPressed: {
+    backgroundColor: theme.colors.surface2,
+  },
+  sessionTitle: {
+    flexShrink: 1,
+    fontSize: theme.fontSize.sm,
+    fontWeight: '500',
     color: theme.colors.foreground,
+    opacity: 0.86,
+  },
+  sessionTitleHighlighted: {
     opacity: 1,
   },
-  secondaryRow: {
+  sessionMetaText: {
+    maxWidth: '100%',
     fontSize: theme.fontSize.sm,
-    fontWeight: "300",
     color: theme.colors.foregroundMuted,
   },
+  sessionMetaSeparator: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foregroundMuted,
+    opacity: 0.7,
+  },
+  columnMeta: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foregroundMuted,
+    flexShrink: 1,
+    minWidth: 60,
+    maxWidth: 200,
+    marginLeft: theme.spacing[4],
+  },
+  columnMetaFixed: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foregroundMuted,
+    flexShrink: 0,
+    width: 72,
+    textAlign: 'right' as const,
+  },
+  badge: {
+    paddingHorizontal: theme.spacing[2],
+    paddingVertical: theme.spacing[1],
+    borderRadius: theme.borderRadius.full,
+    backgroundColor: theme.colors.surface2,
+  },
+  badgeWarning: {
+    backgroundColor: 'rgba(245, 158, 11, 0.12)',
+  },
+  badgeDanger: {
+    backgroundColor: 'rgba(239, 68, 68, 0.14)',
+  },
+  badgeText: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.colors.foregroundMuted,
+  },
+  badgeTextWarning: {
+    color: theme.colors.palette.amber[500],
+  },
+  badgeTextDanger: {
+    color: theme.colors.palette.red[300],
+  },
   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,
@@ -484,18 +588,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,
@@ -516,4 +620,4 @@ const styles = StyleSheet.create((theme) => ({
     fontWeight: theme.fontWeight.semibold,
     fontSize: theme.fontSize.base,
   },
-}));
+}))

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

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { View, Text, Platform, Pressable } from 'react-native'
 import { StyleSheet, useUnistyles } from 'react-native-unistyles'
 import { Brain, ChevronDown, SlidersHorizontal } from 'lucide-react-native'
@@ -10,6 +10,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { Combobox, type ComboboxOption } from '@/components/ui/combobox'
 import { AdaptiveModalSheet } from '@/components/adaptive-modal-sheet'
 import type {
   AgentMode,
@@ -90,7 +91,12 @@ function ControlledStatusBar({
   const { theme } = useUnistyles()
   const isWeb = Platform.OS === 'web'
   const [prefsOpen, setPrefsOpen] = useState(false)
-  const dropdownMaxWidth = isWeb ? 360 : undefined
+  const [openSelector, setOpenSelector] = useState<'provider' | 'mode' | 'model' | 'thinking' | null>(null)
+
+  const providerAnchorRef = useRef<View>(null)
+  const modeAnchorRef = useRef<View>(null)
+  const modelAnchorRef = useRef<View>(null)
+  const thinkingAnchorRef = useRef<View>(null)
 
   const canSelectProvider = Boolean(onSelectProvider && providerOptions && providerOptions.length > 0)
   const canSelectMode = Boolean(onSelectMode && modeOptions && modeOptions.length > 0)
@@ -119,18 +125,47 @@ function ControlledStatusBar({
 
   const modelDisabled = disabled || isModelLoading || !modelOptions || modelOptions.length === 0
 
+  const SEARCH_THRESHOLD = 6
+
+  const comboboxProviderOptions = useMemo<ComboboxOption[]>(
+    () => (providerOptions ?? []).map((o) => ({ id: o.id, label: o.label })),
+    [providerOptions]
+  )
+  const comboboxModeOptions = useMemo<ComboboxOption[]>(
+    () => (modeOptions ?? []).map((o) => ({ id: o.id, label: o.label })),
+    [modeOptions]
+  )
+  const comboboxModelOptions = useMemo<ComboboxOption[]>(
+    () => (modelOptions ?? []).map((o) => ({ id: o.id, label: o.label })),
+    [modelOptions]
+  )
+  const comboboxThinkingOptions = useMemo<ComboboxOption[]>(
+    () => (thinkingOptions ?? []).map((o) => ({ id: o.id, label: o.label })),
+    [thinkingOptions]
+  )
+
+  const handleOpenChange = useCallback(
+    (selector: 'provider' | 'mode' | 'model' | 'thinking') => (nextOpen: boolean) => {
+      setOpenSelector(nextOpen ? selector : null)
+    },
+    []
+  )
+
   return (
     <View style={[styles.container, isWeb && { marginBottom: -theme.spacing[1] }]}>
       {isWeb ? (
         <>
           {providerOptions && providerOptions.length > 0 ? (
-            <DropdownMenu>
-              <DropdownMenuTrigger
+            <>
+              <Pressable
+                ref={providerAnchorRef}
+                collapsable={false}
                 disabled={disabled || !canSelectProvider}
-                style={({ pressed, hovered, open }) => [
+                onPress={() => setOpenSelector(openSelector === 'provider' ? null : 'provider')}
+                style={({ pressed, hovered }) => [
                   styles.modeBadge,
                   hovered && styles.modeBadgeHovered,
-                  (pressed || open) && styles.modeBadgePressed,
+                  (pressed || openSelector === 'provider') && styles.modeBadgePressed,
                   (disabled || !canSelectProvider) && styles.disabledBadge,
                 ]}
                 accessibilityRole="button"
@@ -139,34 +174,31 @@ function ControlledStatusBar({
               >
                 <Text style={styles.modeBadgeText}>{displayProvider}</Text>
                 <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                side="top"
-                align="start"
-                maxWidth={dropdownMaxWidth}
-                testID="agent-provider-menu"
-              >
-                {providerOptions.map((provider) => (
-                  <DropdownMenuItem
-                    key={provider.id}
-                    selected={provider.id === selectedProviderId}
-                    onSelect={() => onSelectProvider?.(provider.id)}
-                  >
-                    {provider.label}
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
+              </Pressable>
+              <Combobox
+                options={comboboxProviderOptions}
+                value={selectedProviderId ?? ''}
+                onSelect={(id) => onSelectProvider?.(id)}
+                searchable={comboboxProviderOptions.length > SEARCH_THRESHOLD}
+                open={openSelector === 'provider'}
+                onOpenChange={handleOpenChange('provider')}
+                anchorRef={providerAnchorRef}
+                desktopPlacement="top-start"
+              />
+            </>
           ) : null}
 
           {modeOptions && modeOptions.length > 0 ? (
-            <DropdownMenu>
-              <DropdownMenuTrigger
+            <>
+              <Pressable
+                ref={modeAnchorRef}
+                collapsable={false}
                 disabled={disabled || !canSelectMode}
-                style={({ pressed, hovered, open }) => [
+                onPress={() => setOpenSelector(openSelector === 'mode' ? null : 'mode')}
+                style={({ pressed, hovered }) => [
                   styles.modeBadge,
                   hovered && styles.modeBadgeHovered,
-                  (pressed || open) && styles.modeBadgePressed,
+                  (pressed || openSelector === 'mode') && styles.modeBadgePressed,
                   (disabled || !canSelectMode) && styles.disabledBadge,
                 ]}
                 accessibilityRole="button"
@@ -175,68 +207,60 @@ function ControlledStatusBar({
               >
                 <Text style={styles.modeBadgeText}>{displayMode}</Text>
                 <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                side="top"
-                align="start"
-                maxWidth={dropdownMaxWidth}
-                testID="agent-mode-menu"
-              >
-                {modeOptions.map((mode) => (
-                  <DropdownMenuItem
-                    key={mode.id}
-                    selected={mode.id === selectedModeId}
-                    onSelect={() => onSelectMode?.(mode.id)}
-                  >
-                    {mode.label}
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
+              </Pressable>
+              <Combobox
+                options={comboboxModeOptions}
+                value={selectedModeId ?? ''}
+                onSelect={(id) => onSelectMode?.(id)}
+                searchable={comboboxModeOptions.length > SEARCH_THRESHOLD}
+                open={openSelector === 'mode'}
+                onOpenChange={handleOpenChange('mode')}
+                anchorRef={modeAnchorRef}
+                desktopPlacement="top-start"
+              />
+            </>
           ) : null}
 
-          <DropdownMenu>
-            <DropdownMenuTrigger
-              disabled={modelDisabled}
-              style={({ pressed, hovered, open }) => [
-                styles.modeBadge,
-                hovered && styles.modeBadgeHovered,
-                (pressed || open) && styles.modeBadgePressed,
-                modelDisabled && styles.disabledBadge,
-              ]}
-              accessibilityRole="button"
-              accessibilityLabel="Select agent model"
-              testID="agent-model-selector"
-            >
-              <Text style={styles.modeBadgeText}>{displayModel}</Text>
-              <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              side="top"
-              align="start"
-              maxWidth={dropdownMaxWidth}
-              testID="agent-model-menu"
-            >
-              {(modelOptions ?? []).map((model) => (
-                <DropdownMenuItem
-                  key={model.id}
-                  selected={model.id === selectedModelId}
-                  onSelect={() => onSelectModel?.(model.id)}
-                >
-                  {model.label}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
+          <Pressable
+            ref={modelAnchorRef}
+            collapsable={false}
+            disabled={modelDisabled}
+            onPress={() => setOpenSelector(openSelector === 'model' ? null : 'model')}
+            style={({ pressed, hovered }) => [
+              styles.modeBadge,
+              hovered && styles.modeBadgeHovered,
+              (pressed || openSelector === 'model') && styles.modeBadgePressed,
+              modelDisabled && styles.disabledBadge,
+            ]}
+            accessibilityRole="button"
+            accessibilityLabel="Select agent model"
+            testID="agent-model-selector"
+          >
+            <Text style={styles.modeBadgeText}>{displayModel}</Text>
+            <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+          </Pressable>
+          <Combobox
+            options={comboboxModelOptions}
+            value={selectedModelId ?? ''}
+            onSelect={(id) => onSelectModel?.(id)}
+            searchable={comboboxModelOptions.length > SEARCH_THRESHOLD}
+            open={openSelector === 'model'}
+            onOpenChange={handleOpenChange('model')}
+            anchorRef={modelAnchorRef}
+            desktopPlacement="top-start"
+          />
 
           {thinkingOptions && thinkingOptions.length > 0 ? (
-            <DropdownMenu>
-              <DropdownMenuTrigger
+            <>
+              <Pressable
+                ref={thinkingAnchorRef}
+                collapsable={false}
                 disabled={disabled || !canSelectThinking}
-                style={({ pressed, hovered, open }) => [
+                onPress={() => setOpenSelector(openSelector === 'thinking' ? null : 'thinking')}
+                style={({ pressed, hovered }) => [
                   styles.modeBadge,
                   hovered && styles.modeBadgeHovered,
-                  (pressed || open) && styles.modeBadgePressed,
+                  (pressed || openSelector === 'thinking') && styles.modeBadgePressed,
                   (disabled || !canSelectThinking) && styles.disabledBadge,
                 ]}
                 accessibilityRole="button"
@@ -250,24 +274,18 @@ function ControlledStatusBar({
                 />
                 <Text style={styles.modeBadgeText}>{displayThinking}</Text>
                 <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                side="top"
-                align="start"
-                maxWidth={dropdownMaxWidth}
-                testID="agent-thinking-menu"
-              >
-                {thinkingOptions.map((thinking) => (
-                  <DropdownMenuItem
-                    key={thinking.id}
-                    selected={thinking.id === selectedThinkingOptionId}
-                    onSelect={() => onSelectThinkingOption?.(thinking.id)}
-                  >
-                    {thinking.label}
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
+              </Pressable>
+              <Combobox
+                options={comboboxThinkingOptions}
+                value={selectedThinkingOptionId ?? ''}
+                onSelect={(id) => onSelectThinkingOption?.(id)}
+                searchable={comboboxThinkingOptions.length > SEARCH_THRESHOLD}
+                open={openSelector === 'thinking'}
+                onOpenChange={handleOpenChange('thinking')}
+                anchorRef={thinkingAnchorRef}
+                desktopPlacement="top-start"
+              />
+            </>
           ) : null}
         </>
       ) : (

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

@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+import type { StreamItem } from "@/types/stream";
+import { buildAgentStreamRenderModel } from "./agent-stream-render-model";
+
+function createTimestamp(seed: number): Date {
+  return new Date(`2026-01-01T00:00:${seed.toString().padStart(2, "0")}.000Z`);
+}
+
+function userMessage(id: string, seed: number): StreamItem {
+  return {
+    kind: "user_message",
+    id,
+    text: id,
+    timestamp: createTimestamp(seed),
+  };
+}
+
+function assistantMessage(id: string, seed: number): StreamItem {
+  return {
+    kind: "assistant_message",
+    id,
+    text: id,
+    timestamp: createTimestamp(seed),
+  };
+}
+
+describe("buildAgentStreamRenderModel", () => {
+  it("keeps head separate from committed history on desktop web", () => {
+    const tail: StreamItem[] = [];
+    for (let index = 0; index < 60; index += 1) {
+      const seed = index * 2;
+      tail.push(userMessage(`u${index}`, seed + 1));
+      tail.push(assistantMessage(`a${index}`, seed + 2));
+    }
+    const head = [assistantMessage("live-a", 121)];
+
+    const model = buildAgentStreamRenderModel({
+      tail,
+      head,
+      platform: "web",
+      isMobileBreakpoint: false,
+    });
+
+    expect(model.segments.historyVirtualized.length).toBeGreaterThan(0);
+    expect(model.segments.historyMounted.length).toBeGreaterThan(0);
+    expect(model.segments.liveHead.map((item) => item.id)).toEqual(["live-a"]);
+    expect(model.history).not.toContain(head[0]);
+  });
+
+  it("keeps the full committed tail mounted on mobile web", () => {
+    const tail = [userMessage("u1", 1), assistantMessage("a1", 2)];
+    const head = [assistantMessage("live-a", 3)];
+
+    const model = buildAgentStreamRenderModel({
+      tail,
+      head,
+      platform: "web",
+      isMobileBreakpoint: true,
+    });
+
+    expect(model.segments.historyVirtualized).toHaveLength(0);
+    expect(model.segments.historyMounted).toBe(tail);
+    expect(model.segments.liveHead).toBe(head);
+  });
+
+  it("reuses ordered committed history when only the live head changes", () => {
+    const tail = [userMessage("u1", 1), assistantMessage("a1", 2)];
+    const firstHead = [assistantMessage("live-a", 3)];
+    const secondHead = [assistantMessage("live-b", 4)];
+
+    const first = buildAgentStreamRenderModel({
+      tail,
+      head: firstHead,
+      platform: "native",
+      isMobileBreakpoint: false,
+    });
+    const second = buildAgentStreamRenderModel({
+      tail,
+      head: secondHead,
+      platform: "native",
+      isMobileBreakpoint: false,
+    });
+
+    expect(first.history).toBe(second.history);
+    expect(first.segments.historyMounted).toBe(second.segments.historyMounted);
+    expect(second.segments.liveHead.map((item) => item.id)).toEqual(["live-b"]);
+  });
+});

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

@@ -0,0 +1,178 @@
+import type { ReactNode } from "react";
+import type { StreamItem } from "@/types/stream";
+import {
+  findMountedWindowStart,
+  getWebMountedRecentStreamItems,
+  getWebPartialVirtualizationThreshold,
+} from "./agent-stream-web-virtualization";
+import {
+  orderHeadForStreamRenderStrategy,
+  orderTailForStreamRenderStrategy,
+  resolveStreamRenderStrategy,
+} from "./stream-strategy";
+
+export type StreamRenderSegments = {
+  historyVirtualized: StreamItem[];
+  historyMounted: StreamItem[];
+  liveHead: StreamItem[];
+};
+
+export type StreamHistoryBoundary = {
+  hasVirtualizedHistory: boolean;
+  hasMountedHistory: boolean;
+  hasLiveHead: boolean;
+  historyToHeadGap: number;
+};
+
+export type StreamRenderAuxiliary = {
+  pendingPermissions: ReactNode;
+  workingIndicator: ReactNode;
+};
+
+export type AgentStreamRenderModel = {
+  history: StreamItem[];
+  segments: StreamRenderSegments;
+  boundary: StreamHistoryBoundary;
+  auxiliary: StreamRenderAuxiliary;
+};
+
+export type BuildAgentStreamRenderModelInput = {
+  tail: StreamItem[];
+  head: StreamItem[];
+  platform: "web" | "native";
+  isMobileBreakpoint: boolean;
+};
+
+const EMPTY_STREAM_ITEMS: StreamItem[] = [];
+const EMPTY_AUXILIARY: StreamRenderAuxiliary = {
+  pendingPermissions: null,
+  workingIndicator: null,
+};
+
+const orderedTailCache = new WeakMap<StreamItem[], Map<string, StreamItem[]>>();
+const orderedHeadCache = new WeakMap<StreamItem[], Map<string, StreamItem[]>>();
+const splitHistoryCache = new WeakMap<
+  StreamItem[],
+  Map<string, Pick<AgentStreamRenderModel, "history" | "segments">>
+>();
+
+function getOrderedItems(params: {
+  cache: WeakMap<StreamItem[], Map<string, StreamItem[]>>;
+  source: StreamItem[];
+  cacheKey: string;
+  order: (items: StreamItem[]) => StreamItem[];
+}): StreamItem[] {
+  const { cache, source, cacheKey, order } = params;
+  let cachedByKey = cache.get(source);
+  if (!cachedByKey) {
+    cachedByKey = new Map();
+    cache.set(source, cachedByKey);
+  }
+  const cached = cachedByKey.get(cacheKey);
+  if (cached) {
+    return cached;
+  }
+  const ordered = order(source);
+  cachedByKey.set(cacheKey, ordered);
+  return ordered;
+}
+
+function splitOrderedTail(params: {
+  orderedTail: StreamItem[];
+  platform: "web" | "native";
+  isMobileBreakpoint: boolean;
+}): Pick<AgentStreamRenderModel, "history" | "segments"> {
+  const { orderedTail, platform, isMobileBreakpoint } = params;
+  const shouldSplitHistory =
+    platform === "web" &&
+    !isMobileBreakpoint &&
+    orderedTail.length > getWebPartialVirtualizationThreshold();
+  const cacheKey = `${platform}:${isMobileBreakpoint}:${getWebMountedRecentStreamItems()}:${shouldSplitHistory}`;
+  let cachedByKey = splitHistoryCache.get(orderedTail);
+  if (!cachedByKey) {
+    cachedByKey = new Map();
+    splitHistoryCache.set(orderedTail, cachedByKey);
+  }
+  const cached = cachedByKey.get(cacheKey);
+  if (cached) {
+    return cached;
+  }
+
+  if (!shouldSplitHistory) {
+    const unsplit = {
+      history: orderedTail,
+      segments: {
+        historyVirtualized: EMPTY_STREAM_ITEMS,
+        historyMounted: orderedTail,
+        liveHead: EMPTY_STREAM_ITEMS,
+      },
+    } satisfies Pick<AgentStreamRenderModel, "history" | "segments">;
+    cachedByKey.set(cacheKey, unsplit);
+    return unsplit;
+  }
+
+  const mountedWindowStart = findMountedWindowStart({
+    items: orderedTail,
+    minMountedCount: getWebMountedRecentStreamItems(),
+  });
+  const split = {
+    history: orderedTail,
+    segments: {
+      historyVirtualized: orderedTail.slice(0, mountedWindowStart),
+      historyMounted: orderedTail.slice(mountedWindowStart),
+      liveHead: EMPTY_STREAM_ITEMS,
+    },
+  } satisfies Pick<AgentStreamRenderModel, "history" | "segments">;
+  cachedByKey.set(cacheKey, split);
+  return split;
+}
+
+export function buildAgentStreamRenderModel(
+  input: BuildAgentStreamRenderModelInput
+): AgentStreamRenderModel {
+  const strategy = resolveStreamRenderStrategy({
+    platform: input.platform === "web" ? "web" : "native",
+    isMobileBreakpoint: input.isMobileBreakpoint,
+  });
+  const orderingCacheKey = `${input.platform}:${input.isMobileBreakpoint}`;
+  const orderedTail = getOrderedItems({
+    cache: orderedTailCache,
+    source: input.tail,
+    cacheKey: orderingCacheKey,
+    order: (items) =>
+      orderTailForStreamRenderStrategy({
+        strategy,
+        streamItems: items,
+      }),
+  });
+  const orderedHead = getOrderedItems({
+    cache: orderedHeadCache,
+    source: input.head,
+    cacheKey: orderingCacheKey,
+    order: (items) =>
+      orderHeadForStreamRenderStrategy({
+        strategy,
+        streamHead: items,
+      }),
+  });
+  const splitHistory = splitOrderedTail({
+    orderedTail,
+    platform: input.platform,
+    isMobileBreakpoint: input.isMobileBreakpoint,
+  });
+
+  return {
+    history: splitHistory.history,
+    segments: {
+      ...splitHistory.segments,
+      liveHead: orderedHead,
+    },
+    boundary: {
+      hasVirtualizedHistory: splitHistory.segments.historyVirtualized.length > 0,
+      hasMountedHistory: splitHistory.segments.historyMounted.length > 0,
+      hasLiveHead: orderedHead.length > 0,
+      historyToHeadGap: 0,
+    },
+    auxiliary: EMPTY_AUXILIARY,
+  };
+}

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

@@ -9,6 +9,7 @@ import {
   isNearBottomForStreamRenderStrategy,
   orderHeadForStreamRenderStrategy,
   orderTailForStreamRenderStrategy,
+  resolveBottomAnchorTransportBehavior,
   resolveStreamRenderStrategy,
 } from "./agent-stream-render-strategy";
 
@@ -45,6 +46,10 @@ describe("resolveStreamRenderStrategy", () => {
     expect(strategy.getFlatListInverted()).toBe(false);
     expect(strategy.getOverlayScrollbarInverted()).toBe(false);
     expect(strategy.shouldAnchorBottomOnContentSizeChange()).toBe(true);
+    expect(strategy.getBottomAnchorTransportBehavior()).toEqual({
+      verificationDelayFrames: 0,
+      verificationRetryMode: "rescroll",
+    });
   });
 
   it("uses inverted_stream on native", () => {
@@ -57,6 +62,44 @@ describe("resolveStreamRenderStrategy", () => {
     expect(strategy.getFlatListInverted()).toBe(true);
     expect(strategy.getOverlayScrollbarInverted()).toBe(true);
     expect(strategy.shouldAnchorBottomOnContentSizeChange()).toBe(false);
+    expect(strategy.getBottomAnchorTransportBehavior()).toEqual({
+      verificationDelayFrames: 2,
+      verificationRetryMode: "recheck",
+    });
+  });
+
+  it("delays native verification while viewport settling is in flight", () => {
+    const strategy = resolveStreamRenderStrategy({
+      platform: "ios",
+      isMobileBreakpoint: false,
+    });
+
+    expect(
+      resolveBottomAnchorTransportBehavior({
+        strategy,
+        isViewportSettling: true,
+      })
+    ).toEqual({
+      verificationDelayFrames: 4,
+      verificationRetryMode: "recheck",
+    });
+  });
+
+  it("does not inflate forward-stream verification delays during web resize", () => {
+    const strategy = resolveStreamRenderStrategy({
+      platform: "web",
+      isMobileBreakpoint: false,
+    });
+
+    expect(
+      resolveBottomAnchorTransportBehavior({
+        strategy,
+        isViewportSettling: true,
+      })
+    ).toEqual({
+      verificationDelayFrames: 0,
+      verificationRetryMode: "rescroll",
+    });
   });
 });
 

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

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

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

@@ -1,8 +1,5 @@
 import {
-  Fragment,
-  createElement,
   forwardRef,
-  isValidElement,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -10,23 +7,14 @@ import {
   useRef,
   useState,
 } from "react";
-import type { ComponentType, ReactElement, ReactNode } from "react";
 import {
   View,
   Text,
   Pressable,
-  FlatList,
-  ScrollView,
-  ListRenderItemInfo,
-  LayoutChangeEvent,
-  NativeScrollEvent,
-  NativeSyntheticEvent,
-  InteractionManager,
   Platform,
   ActivityIndicator,
 } from "react-native";
 import Markdown from "react-native-markdown-display";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { useMutation } from "@tanstack/react-query";
 import { useRouter } from "expo-router";
@@ -65,51 +53,29 @@ import { ToolCallDetailsContent } from "./tool-call-details";
 import { QuestionFormCard } from "./question-form-card";
 import { ToolCallSheetProvider } from "./tool-call-sheet";
 import {
-  WebDesktopScrollbarOverlay,
-  useWebDesktopScrollbarMetrics,
-} from "./web-desktop-scrollbar";
-import {
+  buildAgentStreamRenderModel,
   collectAssistantTurnContentForStreamRenderStrategy,
-  getStreamEdgeSlotProps,
   getStreamNeighborItem,
-  isNearBottomForStreamRenderStrategy,
-  orderHeadForStreamRenderStrategy,
-  orderTailForStreamRenderStrategy,
   resolveStreamRenderStrategy,
-  type StreamEdgeSlotProps,
+  type AgentStreamRenderModel,
+  type StreamSegmentRenderers,
+  type StreamViewportHandle,
 } from "./agent-stream-render-strategy";
+import {
+  type BottomAnchorLocalRequest,
+  type BottomAnchorRouteRequest,
+} from "./use-bottom-anchor-controller";
 import { createMarkdownStyles } from "@/styles/markdown-styles";
 import { MAX_CONTENT_WIDTH } from "@/constants/layout";
-import { isPerfLoggingEnabled, measurePayload, perfLog } from "@/utils/perf";
 import { getMarkdownListMarker } from "@/utils/markdown-list";
 import { buildHostWorkspaceFileRoute } from "@/utils/host-routes";
 
 const isUserMessageItem = (item?: StreamItem) => item?.kind === "user_message";
 const isToolSequenceItem = (item?: StreamItem) =>
   item?.kind === "tool_call" || item?.kind === "thought" || item?.kind === "todo_list";
-const AGENT_STREAM_LOG_TAG = "[AgentStreamView]";
-const STREAM_ITEM_LOG_MIN_COUNT = 200;
-const STREAM_ITEM_LOG_DELTA_THRESHOLD = 50;
-const NOOP_SEPARATORS: ListRenderItemInfo<StreamItem>["separators"] = {
-  highlight: () => {},
-  unhighlight: () => {},
-  updateProps: () => {},
-};
-
-function renderStreamEdgeComponent(
-  component: ReactElement | ComponentType<any> | null | undefined
-): ReactNode {
-  if (!component) {
-    return null;
-  }
-  if (isValidElement(component)) {
-    return component;
-  }
-  return createElement(component);
-}
-
 export interface AgentStreamViewHandle {
-  scrollToBottom(): void;
+  scrollToBottom(reason?: BottomAnchorLocalRequest["reason"]): void;
+  prepareForViewportChange(): void;
 }
 
 export interface AgentStreamViewProps {
@@ -118,6 +84,8 @@ export interface AgentStreamViewProps {
   agent: Agent;
   streamItems: StreamItem[];
   pendingPermissions: Map<string, PendingPermission>;
+  routeBottomAnchorRequest?: BottomAnchorRouteRequest | null;
+  isAuthoritativeHistoryReady?: boolean;
 }
 
 export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamViewProps>(function AgentStreamView({
@@ -126,10 +94,10 @@ export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamView
   agent,
   streamItems,
   pendingPermissions,
+  routeBottomAnchorRequest = null,
+  isAuthoritativeHistoryReady = true,
 }, ref) {
-  const flatListRef = useRef<FlatList<StreamItem>>(null);
-  const scrollViewRef = useRef<ScrollView>(null);
-  const bottomAnchorRef = useRef<View>(null);
+  const viewportRef = useRef<StreamViewportHandle | null>(null);
   const { theme } = useUnistyles();
   const router = useRouter();
   const isMobile =
@@ -142,29 +110,10 @@ export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamView
       }),
     [isMobile]
   );
-  const showDesktopWebScrollbar = Platform.OS === "web" && !isMobile;
-  const insets = useSafeAreaInsets();
   const [isNearBottom, setIsNearBottom] = useState(true);
-  const hasScrolledInitially = useRef(false);
-  const hasAutoScrolledOnce = useRef(false);
-  const isNearBottomRef = useRef(true);
-  const pendingAnchorRequestRef = useRef(false);
-  const pendingAutoScrollFrameRef = useRef<number | null>(null);
-  const pendingAutoScrollAnimatedRef = useRef(false);
-  const scrollOffsetYRef = useRef(0);
-  const streamItemCountRef = useRef(0);
-  const streamViewportMetricsRef = useRef({
-    contentHeight: 0,
-    viewportHeight: 0,
-  });
-  const streamScrollbarMetrics = useWebDesktopScrollbarMetrics();
   const [expandedInlineToolCallIds, setExpandedInlineToolCallIds] = useState<Set<string>>(new Set());
   const openFileExplorer = usePanelStore((state) => state.openFileExplorer);
   const setExplorerTabForCheckout = usePanelStore((state) => state.setExplorerTabForCheckout);
-  const streamRenderRefs = useMemo(
-    () => ({ flatListRef, scrollViewRef, bottomAnchorRef }),
-    []
-  );
 
   // Get serverId (fallback to agent's serverId if not provided)
   const resolvedServerId = serverId ?? agent.serverId ?? "";
@@ -194,10 +143,7 @@ export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamView
     : FadeOut.duration(200);
 
   useEffect(() => {
-    hasScrolledInitially.current = false;
-    hasAutoScrolledOnce.current = false;
-    isNearBottomRef.current = true;
-    pendingAnchorRequestRef.current = false;
+    setIsNearBottom(true);
     setExpandedInlineToolCallIds(new Set());
   }, [agentId]);
 
@@ -246,284 +192,69 @@ export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamView
     ]
   );
 
-  const updateNearBottom = useCallback((value: boolean) => {
-    if (isNearBottomRef.current === value) return;
-    isNearBottomRef.current = value;
-    setIsNearBottom(value);
-  }, []);
-
-  const requestAnchorToBottom = useCallback(() => {
-    pendingAnchorRequestRef.current = true;
-  }, []);
-
-  const handleScroll = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
-      const previousOffsetY = scrollOffsetYRef.current;
-      const previousContentHeight = streamViewportMetricsRef.current.contentHeight;
-      scrollOffsetYRef.current = contentOffset.y;
-      streamViewportMetricsRef.current = {
-        contentHeight: Math.max(0, contentSize.height),
-        viewportHeight: Math.max(0, layoutMeasurement.height),
-      };
-      const offsetDelta = contentOffset.y - previousOffsetY;
-      const contentHeightDelta =
-        streamViewportMetricsRef.current.contentHeight - previousContentHeight;
-      const threshold = Math.max(insets.bottom, 32);
-      const nearBottom = isNearBottomForStreamRenderStrategy({
-        strategy: streamRenderStrategy,
-        offsetY: contentOffset.y,
-        threshold,
-        contentHeight: streamViewportMetricsRef.current.contentHeight,
-        viewportHeight: streamViewportMetricsRef.current.viewportHeight,
-      });
-
-      const pendingAnchorBefore = pendingAnchorRequestRef.current;
-      const shouldSuppressFalseNearBottom =
-        pendingAnchorBefore &&
-        !nearBottom &&
-        Math.abs(offsetDelta) <= 1 &&
-        contentHeightDelta > 0;
-      if (shouldSuppressFalseNearBottom) {
-        updateNearBottom(true);
-      } else {
-        updateNearBottom(nearBottom);
-      }
-
-      const shouldClearPendingAnchor =
-        pendingAnchorBefore && !nearBottom && Math.abs(offsetDelta) > 1;
-      if (shouldClearPendingAnchor) {
-        pendingAnchorRequestRef.current = false;
-      }
-
-      if (showDesktopWebScrollbar) {
-        streamScrollbarMetrics.onScroll(event);
-      }
-    },
-    [
-      insets.bottom,
-      showDesktopWebScrollbar,
-      streamRenderStrategy,
-      streamScrollbarMetrics,
-      updateNearBottom,
-    ]
-  );
-
-  const handleListLayout = useCallback(
-    (event: LayoutChangeEvent) => {
-      streamViewportMetricsRef.current = {
-        ...streamViewportMetricsRef.current,
-        viewportHeight: Math.max(0, event.nativeEvent.layout.height),
-      };
-      if (showDesktopWebScrollbar) {
-        streamScrollbarMetrics.onLayout(event);
-      }
-    },
-    [showDesktopWebScrollbar, streamScrollbarMetrics]
-  );
-
-  const scrollToBottomInternal = useCallback(
-    ({ animated }: { animated: boolean }) => {
-      const targetOffset = streamRenderStrategy.getBottomOffset(
-        streamViewportMetricsRef.current
-      );
-      streamRenderStrategy.scrollToBottom({
-        refs: streamRenderRefs,
-        metrics: streamViewportMetricsRef.current,
-        animated,
-      });
-      scrollOffsetYRef.current = targetOffset;
-      updateNearBottom(true);
-    },
-    [updateNearBottom, streamRenderRefs, streamRenderStrategy]
-  );
-
+  const baseRenderModel = useMemo(() => {
+    return buildAgentStreamRenderModel({
+      tail: streamItems,
+      head: streamHead ?? [],
+      platform: Platform.OS === "web" ? "web" : "native",
+      isMobileBreakpoint: isMobile,
+    });
+  }, [isMobile, streamHead, streamItems]);
   useImperativeHandle(ref, () => ({
-    scrollToBottom() {
-      requestAnchorToBottom();
+    scrollToBottom(reason = "jump-to-bottom") {
+      viewportRef.current?.scrollToBottom(reason);
     },
-  }), [requestAnchorToBottom]);
-
-  const handleContentSizeChange = useCallback(
-    (width: number, height: number) => {
-      const previousMetrics = streamViewportMetricsRef.current;
-      const threshold = Math.max(insets.bottom, 32);
-      const wasNearBottom = isNearBottomForStreamRenderStrategy({
-        strategy: streamRenderStrategy,
-        offsetY: scrollOffsetYRef.current,
-        threshold,
-        contentHeight: previousMetrics.contentHeight,
-        viewportHeight: previousMetrics.viewportHeight,
-      });
-
-      streamViewportMetricsRef.current = {
-        ...previousMetrics,
-        contentHeight: Math.max(0, height),
-      };
-
-      if (streamRenderStrategy.shouldAnchorBottomOnContentSizeChange()) {
-        if (!hasAutoScrolledOnce.current) {
-          scrollToBottomInternal({ animated: false });
-          hasAutoScrolledOnce.current = true;
-          hasScrolledInitially.current = true;
-        } else if (
-          wasNearBottom ||
-          isNearBottomRef.current ||
-          pendingAnchorRequestRef.current
-        ) {
-          scrollToBottomInternal({ animated: false });
-        }
-      }
-
-      if (showDesktopWebScrollbar) {
-        streamScrollbarMetrics.onContentSizeChange(width, height);
-      }
+    prepareForViewportChange() {
+      viewportRef.current?.prepareForViewportChange();
     },
-    [
-      insets.bottom,
-      scrollToBottomInternal,
-      showDesktopWebScrollbar,
-      streamRenderStrategy,
-      streamScrollbarMetrics,
-    ]
-  );
-
-  const scheduleAutoScroll = useCallback(
-    ({ animated }: { animated: boolean }) => {
-      pendingAutoScrollAnimatedRef.current =
-        pendingAutoScrollAnimatedRef.current || animated;
-
-      if (pendingAutoScrollFrameRef.current !== null) {
-        return;
-      }
-
-      pendingAutoScrollFrameRef.current = requestAnimationFrame(() => {
-        pendingAutoScrollFrameRef.current = null;
-        const shouldAnimate = pendingAutoScrollAnimatedRef.current;
-        pendingAutoScrollAnimatedRef.current = false;
-        scrollToBottomInternal({ animated: shouldAnimate });
-      });
-    },
-    [scrollToBottomInternal]
-  );
-
-  useEffect(() => {
-    return () => {
-      if (pendingAutoScrollFrameRef.current !== null) {
-        cancelAnimationFrame(pendingAutoScrollFrameRef.current);
-        pendingAutoScrollFrameRef.current = null;
-      }
-      pendingAutoScrollAnimatedRef.current = false;
-    };
-  }, []);
-
-  useEffect(() => {
-    if (streamItems.length === 0) {
-      return;
-    }
-
-    if (streamRenderStrategy.shouldAnchorBottomOnContentSizeChange()) {
-      // Forward streams anchor from measurement updates in handleContentSizeChange.
-      return;
-    }
-
-    if (!hasAutoScrolledOnce.current) {
-      const handle = InteractionManager.runAfterInteractions(() => {
-        scrollToBottomInternal({ animated: false });
-        hasAutoScrolledOnce.current = true;
-        hasScrolledInitially.current = true;
-      });
-      return () => handle.cancel();
-    }
-
-    if (!isNearBottomRef.current && !pendingAnchorRequestRef.current) {
-      return;
-    }
-
-    const shouldAnimate = hasScrolledInitially.current;
-    scheduleAutoScroll({ animated: shouldAnimate });
-    hasScrolledInitially.current = true;
-  }, [
-    scheduleAutoScroll,
-    scrollToBottomInternal,
-    streamItems,
-    streamRenderStrategy,
-  ]);
+  }), []);
 
   function scrollToBottom() {
-    const animated = streamRenderStrategy.shouldAnimateManualScrollToBottom();
-    scrollToBottomInternal({ animated });
+    viewportRef.current?.scrollToBottom("jump-to-bottom");
   }
 
-  const flatListData = useMemo(() => {
-    return orderTailForStreamRenderStrategy({
-      strategy: streamRenderStrategy,
-      streamItems,
-    });
-  }, [streamItems, streamRenderStrategy]);
-
-  const orderedStreamHead = useMemo(() => {
-    return orderHeadForStreamRenderStrategy({
-      strategy: streamRenderStrategy,
-      streamHead: streamHead ?? [],
-    });
-  }, [streamHead, streamRenderStrategy]);
-
   const tightGap = theme.spacing[1]; // 4px
   const looseGap = theme.spacing[4]; // 16px
 
-  const getGapBelow = useCallback(
-    (item: StreamItem, index: number, items: StreamItem[]) => {
-      const belowItem = getStreamNeighborItem({
-        strategy: streamRenderStrategy,
-        items,
-        index,
-        relation: "below",
-      });
-      if (!belowItem) {
+  const getGapBetween = useCallback(
+    (item: StreamItem | null, belowItem: StreamItem | null) => {
+      if (!item || !belowItem) {
         return 0;
       }
 
-      // Same type groups get tight gap (4px)
       if (isUserMessageItem(item) && isUserMessageItem(belowItem)) {
         return tightGap;
       }
-
       if (isToolSequenceItem(item) && isToolSequenceItem(belowItem)) {
         return tightGap;
       }
-
-      // Give user messages more breathing room before tool sequences.
       if (item.kind === "user_message" && isToolSequenceItem(belowItem)) {
         return looseGap;
       }
-
-      // Keep tool sequences visually connected to the preceding user/assistant message.
       if (
         (item.kind === "user_message" || item.kind === "assistant_message") &&
         isToolSequenceItem(belowItem)
       ) {
         return tightGap;
       }
-
-      // Keep todo lists visually connected to the following tool sequence (symmetry).
       if (item.kind === "todo_list" && isToolSequenceItem(belowItem)) {
         return tightGap;
       }
-
-      // Keep tool sequences visually connected to the assistant response (symmetry).
       if (isToolSequenceItem(item) && belowItem.kind === "assistant_message") {
         return tightGap;
       }
-
-      // Different types get loose gap (16px)
       return looseGap;
     },
-    [looseGap, streamRenderStrategy, tightGap]
+    [looseGap, tightGap]
   );
 
   const renderStreamItemContent = useCallback(
-    (item: StreamItem, index: number, items: StreamItem[]) => {
+    (
+      item: StreamItem,
+      index: number,
+      items: StreamItem[],
+      seamAboveItem: StreamItem | null = null
+    ) => {
       const handleInlineDetailsExpandedChange = (expanded: boolean) => {
         if (
           !streamRenderStrategy.shouldDisableParentScrollOnInlineDetailsExpansion()
@@ -543,12 +274,13 @@ export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamView
 
       switch (item.kind) {
         case "user_message": {
-          const aboveItem = getStreamNeighborItem({
-            strategy: streamRenderStrategy,
-            items,
-            index,
-            relation: "above",
-          });
+          const aboveItem =
+            getStreamNeighborItem({
+              strategy: streamRenderStrategy,
+              items,
+              index,
+              relation: "above",
+            }) ?? seamAboveItem ?? undefined;
           const belowItem = getStreamNeighborItem({
             strategy: streamRenderStrategy,
             items,
@@ -670,19 +402,24 @@ export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamView
   );
 
   const renderStreamItem = useCallback(
-    ({ item, index }: ListRenderItemInfo<StreamItem>) => {
-      const content = renderStreamItemContent(item, index, flatListData);
+    (
+      item: StreamItem,
+      index: number,
+      items: StreamItem[],
+      seamAboveItem: StreamItem | null = null
+    ) => {
+      const content = renderStreamItemContent(item, index, items, seamAboveItem);
       if (!content) {
         return null;
       }
 
-      const gapBelow = getGapBelow(item, index, flatListData);
       const nextItem = getStreamNeighborItem({
         strategy: streamRenderStrategy,
-        items: flatListData,
+        items,
         index,
         relation: "below",
       });
+      const gapBelow = getGapBetween(item, nextItem ?? null);
       const isEndOfAssistantTurn =
         item.kind === "assistant_message" &&
         (nextItem?.kind === "user_message" ||
@@ -690,7 +427,7 @@ export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamView
       const getTurnContent = () =>
         collectAssistantTurnContentForStreamRenderStrategy({
           strategy: streamRenderStrategy,
-          items: flatListData,
+          items,
           startIndex: index,
         });
 
@@ -704,9 +441,8 @@ export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamView
       );
     },
     [
-      getGapBelow,
+      getGapBetween,
       renderStreamItemContent,
-      flatListData,
       agent.status,
       streamRenderStrategy,
     ]
@@ -720,184 +456,59 @@ export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamView
     [pendingPermissions, agentId]
   );
 
-  useEffect(() => {
-    if (!isPerfLoggingEnabled()) {
-      return;
-    }
-    const totalCount = streamItems.length;
-    const prevCount = streamItemCountRef.current;
-    if (totalCount === prevCount) {
-      return;
-    }
-    const delta = Math.abs(totalCount - prevCount);
-    streamItemCountRef.current = totalCount;
-    if (
-      totalCount < STREAM_ITEM_LOG_MIN_COUNT &&
-      delta < STREAM_ITEM_LOG_DELTA_THRESHOLD
-    ) {
-      return;
-    }
-    let userCount = 0;
-    let assistantCount = 0;
-    let toolCallCount = 0;
-    let thoughtCount = 0;
-    let activityCount = 0;
-    let todoCount = 0;
-    for (const item of streamItems) {
-      switch (item.kind) {
-        case "user_message":
-          userCount += 1;
-          break;
-        case "assistant_message":
-          assistantCount += 1;
-          break;
-        case "tool_call":
-          toolCallCount += 1;
-          break;
-        case "thought":
-          thoughtCount += 1;
-          break;
-        case "activity_log":
-          activityCount += 1;
-          break;
-        case "todo_list":
-          todoCount += 1;
-          break;
-        default:
-          break;
-      }
-    }
-    const metrics =
-      totalCount >= STREAM_ITEM_LOG_MIN_COUNT
-        ? measurePayload(streamItems)
-        : null;
-    perfLog(AGENT_STREAM_LOG_TAG, {
-      event: "stream_items",
-      agentId,
-      totalCount,
-      userCount,
-      assistantCount,
-      toolCallCount,
-      thoughtCount,
-      activityCount,
-      todoCount,
-      pendingPermissionCount: pendingPermissionItems.length,
-      streamHeadCount: streamHead?.length ?? 0,
-      payloadApproxBytes: metrics?.approxBytes ?? 0,
-      payloadFieldCount: metrics?.fieldCount ?? 0,
-    });
-  }, [agentId, pendingPermissionItems.length, streamHead, streamItems]);
-
   const showWorkingIndicator = agent.status === "running";
-  const showBottomBar = showWorkingIndicator;
-  const usesVirtualizedList = streamRenderStrategy.shouldUseVirtualizedList();
-
-  const listEdgeSlotComponent = useMemo(() => {
-    const hasPermissions = pendingPermissionItems.length > 0;
-    const hasHeadItems = orderedStreamHead.length > 0;
-
-    if (!hasPermissions && !showBottomBar && !hasHeadItems) {
-      return null;
-    }
-
-    const leftContent = showWorkingIndicator ? <WorkingIndicator /> : null;
-
-    return (
-      <View style={stylesheet.contentWrapper}>
-        <View
-          style={[
-            stylesheet.listHeaderContent,
-            // The edge slot (header for inverted streams, footer for forward streams)
-            // sits next to the newest timeline item.
-            hasHeadItems ? { paddingTop: tightGap } : null,
-          ]}
-        >
-          {hasPermissions ? (
-            <View style={stylesheet.permissionsContainer}>
-              {pendingPermissionItems.map((permission) => (
-                <PermissionRequestCard
-                  key={permission.key}
-                  permission={permission}
-                  client={client}
-                />
-              ))}
-            </View>
-          ) : null}
-
-          {hasHeadItems
-            ? orderedStreamHead.map((item, index) => {
-                const rendered = renderStreamItemContent(
-                  item,
-                  index,
-                  orderedStreamHead
-                );
-                return rendered ? (
-                  <View key={item.id} style={stylesheet.streamItemWrapper}>
-                    {rendered}
-                  </View>
-                ) : null;
-              })
-            : null}
-
-          {showBottomBar ? <View style={stylesheet.bottomBarWrapper}>{leftContent}</View> : null}
+  const renderModel = useMemo<AgentStreamRenderModel>(() => {
+    const pendingPermissionsNode =
+      pendingPermissionItems.length > 0 ? (
+        <View style={stylesheet.permissionsContainer}>
+          {pendingPermissionItems.map((permission) => (
+            <PermissionRequestCard
+              key={permission.key}
+              permission={permission}
+              client={client}
+            />
+          ))}
         </View>
+      ) : null;
+    const workingIndicatorNode = showWorkingIndicator ? (
+      <View style={stylesheet.bottomBarWrapper}>
+        <WorkingIndicator />
       </View>
-    );
+    ) : null;
+
+    return {
+      ...baseRenderModel,
+      boundary: {
+        ...baseRenderModel.boundary,
+        historyToHeadGap: getGapBetween(
+          baseRenderModel.history.at(-1) ?? null,
+          baseRenderModel.segments.liveHead[0] ?? null
+        ),
+      },
+      auxiliary: {
+        pendingPermissions: pendingPermissionsNode,
+        workingIndicator: workingIndicatorNode,
+      },
+    };
   }, [
+    baseRenderModel,
+    client,
+    getGapBetween,
     pendingPermissionItems,
     showWorkingIndicator,
-    client,
-    orderedStreamHead,
-    renderStreamItemContent,
-    showBottomBar,
-    tightGap,
   ]);
 
-  const flatListExtraData = useMemo(
-    () => ({
-      pendingPermissionCount: pendingPermissionItems.length,
-      showWorkingIndicator,
-      showBottomBar,
-    }),
-    [
-      pendingPermissionItems.length,
-      showWorkingIndicator,
-      showBottomBar,
-    ]
-  );
-
-  const listEdgeSlotProps = useMemo<StreamEdgeSlotProps>(() => {
-    if (!listEdgeSlotComponent) {
-      return {};
-    }
-    return getStreamEdgeSlotProps({
-      strategy: streamRenderStrategy,
-      component: listEdgeSlotComponent,
-      gapSize: tightGap,
-    });
-  }, [listEdgeSlotComponent, streamRenderStrategy, tightGap]);
-
   const listEmptyComponent = useMemo(() => {
-    const hasPermissions = pendingPermissionItems.length > 0;
-    const hasHeadItems = orderedStreamHead.length > 0;
-    if (hasPermissions || hasHeadItems) {
+    if (
+      renderModel.boundary.hasVirtualizedHistory ||
+      renderModel.boundary.hasMountedHistory ||
+      renderModel.boundary.hasLiveHead ||
+      renderModel.auxiliary.pendingPermissions ||
+      renderModel.auxiliary.workingIndicator
+    ) {
       return null;
     }
 
-    const shouldShowWorking = agent.status === "running";
-
-    if (shouldShowWorking) {
-      return (
-        <View style={[stylesheet.emptyState, stylesheet.contentWrapper]}>
-          <ActivityIndicator
-            size="small"
-            color={theme.colors.foregroundMuted}
-          />
-          <Text style={stylesheet.emptyStateText}>Working…</Text>
-        </View>
-      );
-    }
-
     return (
       <View style={[stylesheet.emptyState, stylesheet.contentWrapper]}>
         <Text style={stylesheet.emptyStateText}>
@@ -905,119 +516,111 @@ export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamView
         </Text>
       </View>
     );
-  }, [
-    agent.status,
-    pendingPermissionItems.length,
-    orderedStreamHead,
-    theme.colors.foregroundMuted,
-  ]);
+  }, [renderModel]);
+
+  const historyItems = renderModel.history;
+  const liveHeadItems = renderModel.segments.liveHead;
+  const { boundary, auxiliary } = renderModel;
+  const lastHistoryItem = historyItems.at(-1) ?? null;
+
+  const historyIndexById = useMemo(() => {
+    const indexById = new Map<string, number>();
+    historyItems.forEach((item, index) => {
+      indexById.set(item.id, index);
+    });
+    return indexById;
+  }, [historyItems]);
+
+  const renderHistoryRow = useCallback(
+    (item: StreamItem) => {
+      const historyIndex = historyIndexById.get(item.id);
+      if (historyIndex === undefined) {
+        return null;
+      }
+      return renderStreamItem(item, historyIndex, historyItems);
+    },
+    [historyIndexById, historyItems, renderStreamItem]
+  );
+
+  const renderHistoryVirtualizedRow = useCallback<StreamSegmentRenderers["renderHistoryVirtualizedRow"]>(
+    (item) => renderHistoryRow(item),
+    [renderHistoryRow]
+  );
+  const renderHistoryMountedRow = useCallback<StreamSegmentRenderers["renderHistoryMountedRow"]>(
+    (item) => renderHistoryRow(item),
+    [renderHistoryRow]
+  );
+  const renderLiveHeadRow = useCallback<StreamSegmentRenderers["renderLiveHeadRow"]>(
+    (item, index, items) =>
+      renderStreamItem(item, index, items, index === 0 ? lastHistoryItem : null),
+    [lastHistoryItem, renderStreamItem]
+  );
+  const renderLiveAuxiliary = useCallback<StreamSegmentRenderers["renderLiveAuxiliary"]>(
+    () => {
+      if (!auxiliary.pendingPermissions && !auxiliary.workingIndicator) {
+        return null;
+      }
+      return (
+        <View style={stylesheet.contentWrapper}>
+          <View
+            style={[
+              stylesheet.listHeaderContent,
+              boundary.hasLiveHead ? { paddingTop: tightGap } : null,
+            ]}
+          >
+            {auxiliary.pendingPermissions}
+            {auxiliary.workingIndicator}
+          </View>
+        </View>
+      );
+    },
+    [
+      auxiliary.pendingPermissions,
+      auxiliary.workingIndicator,
+      boundary.hasLiveHead,
+      tightGap,
+    ]
+  );
+
+  const renderers = useMemo<StreamSegmentRenderers>(
+    () => ({
+      renderHistoryVirtualizedRow,
+      renderHistoryMountedRow,
+      renderLiveHeadRow,
+      renderLiveAuxiliary,
+    }),
+    [
+      renderHistoryVirtualizedRow,
+      renderHistoryMountedRow,
+      renderLiveHeadRow,
+      renderLiveAuxiliary,
+    ]
+  );
 
   const streamScrollEnabled =
     !streamRenderStrategy.shouldDisableParentScrollOnInlineDetailsExpansion() ||
     expandedInlineToolCallIds.size === 0;
-  const listContentContainerStyle = useMemo(
-    () =>
-      usesVirtualizedList
-        ? stylesheet.listContentContainer
-        : [stylesheet.listContentContainer, stylesheet.forwardListContentContainer],
-    [usesVirtualizedList]
-  );
-  const headerEdgeContent = renderStreamEdgeComponent(
-    listEdgeSlotProps.ListHeaderComponent
-  );
-  const footerEdgeContent = renderStreamEdgeComponent(
-    listEdgeSlotProps.ListFooterComponent
-  );
-  const nonVirtualizedItems = useMemo(() => {
-    if (flatListData.length === 0) {
-      return null;
-    }
-
-    return flatListData.map((item, index) => {
-      const rendered = renderStreamItem({
-        item,
-        index,
-        separators: NOOP_SEPARATORS,
-      });
-      if (!rendered) {
-        return null;
-      }
-      return <Fragment key={item.id}>{rendered}</Fragment>;
-    });
-  }, [flatListData, renderStreamItem]);
 
   return (
     <ToolCallSheetProvider>
       <View style={stylesheet.container}>
         <MessageOuterSpacingProvider disableOuterSpacing>
-          {usesVirtualizedList ? (
-            <FlatList
-              ref={flatListRef}
-              data={flatListData}
-              renderItem={renderStreamItem}
-              keyExtractor={(item) => item.id}
-              testID="agent-chat-scroll"
-              {...listEdgeSlotProps}
-              contentContainerStyle={listContentContainerStyle}
-              style={stylesheet.list}
-              onLayout={handleListLayout}
-              onScroll={handleScroll}
-              scrollEventThrottle={16}
-              onContentSizeChange={handleContentSizeChange}
-              ListEmptyComponent={listEmptyComponent}
-              extraData={flatListExtraData}
-              maintainVisibleContentPosition={
-                streamRenderStrategy.getMaintainVisibleContentPosition()
-              }
-              initialNumToRender={12}
-              windowSize={10}
-              scrollEnabled={streamScrollEnabled}
-              showsVerticalScrollIndicator={!showDesktopWebScrollbar}
-              inverted={streamRenderStrategy.getFlatListInverted()}
-            />
-          ) : (
-            <ScrollView
-              ref={scrollViewRef}
-              testID="agent-chat-scroll"
-              contentContainerStyle={listContentContainerStyle}
-              style={stylesheet.list}
-              onLayout={handleListLayout}
-              onScroll={handleScroll}
-              scrollEventThrottle={16}
-              onContentSizeChange={handleContentSizeChange}
-              scrollEnabled={streamScrollEnabled}
-              showsVerticalScrollIndicator={!showDesktopWebScrollbar}
-            >
-              {headerEdgeContent ? (
-                <View style={listEdgeSlotProps.ListHeaderComponentStyle}>
-                  {headerEdgeContent}
-                </View>
-              ) : null}
-              {nonVirtualizedItems}
-              {flatListData.length === 0 ? listEmptyComponent : null}
-              {footerEdgeContent ? (
-                <View style={listEdgeSlotProps.ListFooterComponentStyle}>
-                  {footerEdgeContent}
-                </View>
-              ) : null}
-              <View ref={bottomAnchorRef} collapsable={false} />
-            </ScrollView>
-          )}
+          {streamRenderStrategy.render({
+            agentId,
+            segments: renderModel.segments,
+            boundary,
+            renderers,
+            listEmptyComponent,
+            viewportRef,
+            routeBottomAnchorRequest,
+            isAuthoritativeHistoryReady,
+            onNearBottomChange: setIsNearBottom,
+            scrollEnabled: streamScrollEnabled,
+            listStyle: stylesheet.list,
+            baseListContentContainerStyle: stylesheet.listContentContainer,
+            forwardListContentContainerStyle: stylesheet.forwardListContentContainer,
+          })}
         </MessageOuterSpacingProvider>
-        <WebDesktopScrollbarOverlay
-          enabled={showDesktopWebScrollbar}
-          metrics={streamScrollbarMetrics}
-          inverted={streamRenderStrategy.getOverlayScrollbarInverted()}
-          onScrollToOffset={(nextOffset) => {
-            streamRenderStrategy.scrollToOffset({
-              refs: streamRenderRefs,
-              offset: nextOffset,
-              animated: false,
-            });
-          }}
-        />
-
-        {/* Scroll to bottom button */}
         {!isNearBottom && (
           <Animated.View
             style={stylesheet.scrollToBottomContainer}
@@ -1028,6 +631,9 @@ export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamView
               <Pressable
                 style={stylesheet.scrollToBottomButton}
                 onPress={scrollToBottom}
+                accessibilityRole="button"
+                accessibilityLabel="Scroll to bottom"
+                testID="scroll-to-bottom-button"
               >
                 <ChevronDown
                   size={24}

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

@@ -0,0 +1,173 @@
+import { describe, expect, it } from "vitest";
+import type { StreamItem } from "@/types/stream";
+import {
+  DEFAULT_WEB_MOUNTED_RECENT_STREAM_ITEMS,
+  DEFAULT_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD,
+  estimateStreamItemHeight,
+  findMountedWindowStart,
+  getWebMountedRecentStreamItems,
+  getWebPartialVirtualizationThreshold,
+  splitWebVirtualizedHistory,
+  type IndexedStreamItem,
+} from "./agent-stream-web-virtualization";
+
+function createTimestamp(seed: number): Date {
+  return new Date(`2026-01-01T00:00:${seed.toString().padStart(2, "0")}.000Z`);
+}
+
+function userMessage(id: string, seed: number): StreamItem {
+  return {
+    kind: "user_message",
+    id,
+    text: id,
+    timestamp: createTimestamp(seed),
+  };
+}
+
+function assistantMessage(id: string, seed: number): StreamItem {
+  return {
+    kind: "assistant_message",
+    id,
+    text: id,
+    timestamp: createTimestamp(seed),
+  };
+}
+
+function toolCall(id: string, seed: number): StreamItem {
+  return {
+    kind: "tool_call",
+    id,
+    timestamp: createTimestamp(seed),
+    payload: {
+      source: "orchestrator",
+      data: {
+        toolCallId: id,
+        toolName: "test_tool",
+        arguments: {},
+        status: "completed",
+      },
+    },
+  };
+}
+
+function indexEntries(items: StreamItem[]): IndexedStreamItem[] {
+  return items.map((item, index) => ({ item, index }));
+}
+
+describe("findMountedWindowStart", () => {
+  it("keeps all items mounted when the chat is below the threshold", () => {
+    const items = [userMessage("u1", 1), assistantMessage("a1", 2)];
+
+    expect(
+      findMountedWindowStart({
+        items,
+        minMountedCount: 50,
+      })
+    ).toBe(0);
+  });
+
+  it("rewinds to the previous user boundary when the cutoff lands inside a turn", () => {
+    const items: StreamItem[] = [];
+    for (let index = 0; index < 30; index += 1) {
+      const seed = index * 3;
+      items.push(userMessage(`u${index}`, seed + 1));
+      items.push(toolCall(`t${index}`, seed + 2));
+      items.push(assistantMessage(`a${index}`, seed + 3));
+    }
+
+    expect(
+      findMountedWindowStart({
+        items,
+        minMountedCount: 50,
+      })
+    ).toBe(39);
+  });
+});
+
+describe("splitWebVirtualizedHistory", () => {
+  it("splits older entries into the virtualized section and keeps the recent window mounted", () => {
+    const items: StreamItem[] = [];
+    for (let index = 0; index < 30; index += 1) {
+      const seed = index * 2;
+      items.push(userMessage(`u${index}`, seed + 1));
+      items.push(assistantMessage(`a${index}`, seed + 2));
+    }
+
+    const window = splitWebVirtualizedHistory({
+      entries: indexEntries(items),
+      minMountedCount: 50,
+    });
+
+    expect(window.virtualizedEntries).toHaveLength(10);
+    expect(window.virtualizedEntries[0]?.item.id).toBe("u0");
+    expect(window.virtualizedEntries.at(-1)?.item.id).toBe("a4");
+    expect(window.mountedEntries[0]?.item.id).toBe("u5");
+    expect(window.mountedEntries).toHaveLength(50);
+  });
+});
+
+describe("estimateStreamItemHeight", () => {
+  it("uses a larger estimate for user messages with image attachments", () => {
+    const item: StreamItem = {
+      kind: "user_message",
+      id: "u-image",
+      text: "image",
+      timestamp: createTimestamp(1),
+      images: [
+        {
+          id: "att-1",
+          mimeType: "image/png",
+          storageType: "desktop-file",
+          storageKey: "/tmp/screenshot.png",
+          fileName: "screenshot.png",
+          byteSize: 1024,
+          createdAt: Date.now(),
+        },
+      ],
+    };
+
+    expect(estimateStreamItemHeight(item)).toBe(220);
+  });
+});
+
+describe("web virtualization test overrides", () => {
+  it("uses defaults unless explicit positive integer overrides are present", () => {
+    const globalWithOverrides = globalThis as typeof globalThis & {
+      __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;
+
+    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
+      );
+
+      globalWithOverrides.__PASEO_E2E_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD = 6;
+      globalWithOverrides.__PASEO_E2E_WEB_MOUNTED_RECENT_STREAM_ITEMS = 4;
+      expect(getWebPartialVirtualizationThreshold()).toBe(6);
+      expect(getWebMountedRecentStreamItems()).toBe(4);
+    } finally {
+      if (previousThreshold === undefined) {
+        delete globalWithOverrides.__PASEO_E2E_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD;
+      } else {
+        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;
+      }
+    }
+  });
+});

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

@@ -0,0 +1,94 @@
+import type { StreamItem } from "@/types/stream";
+
+export const DEFAULT_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD = 100;
+export const DEFAULT_WEB_MOUNTED_RECENT_STREAM_ITEMS = 50;
+
+type BottomAnchorE2ETestGlobals = typeof globalThis & {
+  __PASEO_E2E_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD?: unknown;
+  __PASEO_E2E_WEB_MOUNTED_RECENT_STREAM_ITEMS?: unknown;
+};
+
+function readPositiveIntegerOverride(value: unknown): number | null {
+  if (!Number.isFinite(value)) {
+    return null;
+  }
+  const normalized = Math.trunc(value as number);
+  return normalized > 0 ? normalized : null;
+}
+
+export function getWebPartialVirtualizationThreshold(): number {
+  const override = readPositiveIntegerOverride(
+    (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
+  );
+  return override ?? DEFAULT_WEB_MOUNTED_RECENT_STREAM_ITEMS;
+}
+
+export type IndexedStreamItem = {
+  item: StreamItem;
+  index: number;
+};
+
+export type WebVirtualizedHistoryWindow = {
+  virtualizedEntries: IndexedStreamItem[];
+  mountedEntries: IndexedStreamItem[];
+};
+
+export function estimateStreamItemHeight(item: StreamItem): number {
+  switch (item.kind) {
+    case "user_message":
+      return item.images && item.images.length > 0 ? 220 : 96;
+    case "assistant_message":
+      return 220;
+    case "tool_call":
+      return 136;
+    case "thought":
+      return 112;
+    case "todo_list":
+      return 144;
+    case "activity_log":
+      return 88;
+    case "compaction":
+      return 72;
+    default:
+      return 120;
+  }
+}
+
+export function findMountedWindowStart(input: {
+  items: StreamItem[];
+  minMountedCount: number;
+}): number {
+  const { items, minMountedCount } = input;
+  if (items.length <= minMountedCount) {
+    return 0;
+  }
+
+  let startIndex = Math.max(items.length - minMountedCount, 0);
+  while (startIndex > 0 && items[startIndex]?.kind !== "user_message") {
+    startIndex -= 1;
+  }
+  return startIndex;
+}
+
+export function splitWebVirtualizedHistory(input: {
+  entries: IndexedStreamItem[];
+  minMountedCount: number;
+}): WebVirtualizedHistoryWindow {
+  const startIndex = findMountedWindowStart({
+    items: input.entries.map((entry) => entry.item),
+    minMountedCount: input.minMountedCount,
+  });
+  return {
+    virtualizedEntries: input.entries.slice(0, startIndex),
+    mountedEntries: input.entries.slice(startIndex),
+  };
+}

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

@@ -7,6 +7,7 @@ import {
   View,
   Platform,
 } from "react-native";
+import { memo, useEffect, useMemo, 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";
@@ -20,6 +21,37 @@ function agentKey(agent: Pick<AggregatedAgent, "serverId" | "id">): string {
   return `${agent.serverId}:${agent.id}`;
 }
 
+type CommandCenterRowProps = {
+  active: boolean;
+  children: ReactNode;
+  onPress: () => void;
+  registerRow: (el: View | null) => void;
+};
+
+const CommandCenterRow = memo(function CommandCenterRow({
+  active,
+  children,
+  onPress,
+  registerRow,
+}: CommandCenterRowProps) {
+  const { theme } = useUnistyles();
+
+  return (
+    <Pressable
+      ref={registerRow}
+      style={({ hovered, pressed }) => [
+        styles.row,
+        (hovered || pressed || active) && {
+          backgroundColor: theme.colors.surface1,
+        },
+      ]}
+      onPress={onPress}
+    >
+      {children}
+    </Pressable>
+  );
+});
+
 export function CommandCenter() {
   const { theme } = useUnistyles();
   const {
@@ -33,10 +65,52 @@ export function CommandCenter() {
     handleSelectItem,
   } = useCommandCenter();
 
+  const rowRefs = useRef<Map<number, View>>(new Map());
+  const resultsRef = useRef<ScrollView>(null);
+
+  useEffect(() => {
+    const row = rowRefs.current.get(activeIndex);
+    if (!row || typeof document === "undefined") {
+      return;
+    }
+    const scrollNode =
+      (resultsRef.current as
+        | (ScrollView & {
+            getScrollableNode?: () => HTMLElement | null;
+          })
+        | null)?.getScrollableNode?.() ?? null;
+    const rowEl = row as unknown as HTMLElement;
+
+    if (!scrollNode) {
+      rowEl.scrollIntoView?.({ block: "nearest" });
+      return;
+    }
+
+    const rowTop = rowEl.offsetTop;
+    const rowBottom = rowTop + rowEl.offsetHeight;
+    const visibleTop = scrollNode.scrollTop;
+    const visibleBottom = visibleTop + scrollNode.clientHeight;
+
+    if (rowTop < visibleTop) {
+      scrollNode.scrollTop = rowTop;
+      return;
+    }
+
+    if (rowBottom > visibleBottom) {
+      scrollNode.scrollTop = rowBottom - scrollNode.clientHeight;
+    }
+  }, [activeIndex]);
+
   if (Platform.OS !== "web") return null;
 
-  const actionItems = items.filter((item) => item.kind === "action");
-  const agentItems = items.filter((item) => item.kind === "agent");
+  const actionItems = useMemo(
+    () => items.filter((item) => item.kind === "action"),
+    [items]
+  );
+  const agentItems = useMemo(
+    () => items.filter((item) => item.kind === "agent"),
+    [items]
+  );
 
   return (
     <Modal
@@ -71,6 +145,7 @@ export function CommandCenter() {
           </View>
 
           <ScrollView
+            ref={resultsRef}
             style={styles.results}
             contentContainerStyle={styles.resultsContent}
             keyboardShouldPersistTaps="always"
@@ -105,14 +180,13 @@ export function CommandCenter() {
                           />
                         ) : null;
                       return (
-                        <Pressable
+                        <CommandCenterRow
                           key={`action:${action.id}`}
-                          style={({ hovered, pressed }) => [
-                            styles.row,
-                            (hovered || pressed || active) && {
-                              backgroundColor: theme.colors.surface1,
-                            },
-                          ]}
+                          registerRow={(el: View | null) => {
+                            if (el) rowRefs.current.set(index, el);
+                            else rowRefs.current.delete(index);
+                          }}
+                          active={active}
                           onPress={() => handleSelectItem(item)}
                         >
                           <View style={styles.rowContent}>
@@ -133,7 +207,7 @@ export function CommandCenter() {
                               <Shortcut keys={action.shortcutKeys} style={styles.rowShortcut} />
                             ) : null}
                           </View>
-                        </Pressable>
+                        </CommandCenterRow>
                       );
                     })}
                   </>
@@ -154,14 +228,13 @@ export function CommandCenter() {
                       const active = rowIndex === activeIndex;
                       const agent = item.agent;
                       return (
-                        <Pressable
+                        <CommandCenterRow
                           key={agentKey(agent)}
-                          style={({ hovered, pressed }) => [
-                            styles.row,
-                            (hovered || pressed || active) && {
-                              backgroundColor: theme.colors.surface1,
-                            },
-                          ]}
+                          registerRow={(el: View | null) => {
+                            if (el) rowRefs.current.set(rowIndex, el);
+                            else rowRefs.current.delete(rowIndex);
+                          }}
+                          active={active}
                           onPress={() => handleSelectItem(item)}
                         >
                           <View style={styles.rowContent}>
@@ -184,12 +257,12 @@ export function CommandCenter() {
                                   style={[styles.subtitle, { color: theme.colors.foregroundMuted }]}
                                   numberOfLines={1}
                                 >
-                                  {agent.serverLabel} · {shortenPath(agent.cwd)} · {formatTimeAgo(agent.lastActivityAt)}
+                                  {shortenPath(agent.cwd)} · {formatTimeAgo(agent.lastActivityAt)}
                                 </Text>
                               </View>
                             </View>
                           </View>
-                        </Pressable>
+                        </CommandCenterRow>
                       );
                     })}
                   </>
@@ -277,6 +350,8 @@ const styles = StyleSheet.create((theme) => ({
     justifyContent: "center",
   },
   textContent: {
+    flex: 1,
+    minWidth: 0,
     gap: 2,
   },
   rowShortcut: {

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

@@ -412,6 +412,7 @@ function SidebarContent({
             serverId={serverId}
             workspaceId={workspaceId}
             cwd={workspaceRoot}
+            hideHeaderRow={!isMobile}
           />
         )}
         {resolvedTab === "files" && (

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

@@ -41,7 +41,7 @@ import type {
   AgentFileExplorerState,
   ExplorerEntry,
 } from "@/stores/session-store";
-import { useDaemonRegistry } from "@/contexts/daemon-registry-context";
+import { useHosts } from "@/runtime/host-runtime";
 import { useSessionStore } from "@/stores/session-store";
 import { useDownloadStore } from "@/stores/download-store";
 import {
@@ -105,7 +105,7 @@ export function FileExplorerPane({
     UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
   const showDesktopWebScrollbar = Platform.OS === "web" && !isMobile;
 
-  const { daemons } = useDaemonRegistry();
+  const daemons = useHosts();
   const daemonProfile = useMemo(
     () => daemons.find((daemon) => daemon.serverId === serverId),
     [daemons, serverId]

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

@@ -41,10 +41,12 @@ function FilePreviewBody({
   preview,
   isLoading,
   showDesktopWebScrollbar,
+  isMobile,
 }: {
   preview: ExplorerFile | null;
   isLoading: boolean;
   showDesktopWebScrollbar: boolean;
+  isMobile: boolean;
 }) {
   const enablePreviewDesktopScrollbar = showDesktopWebScrollbar;
   const previewScrollRef = useRef<RNScrollView>(null);
@@ -101,14 +103,20 @@ function FilePreviewBody({
           scrollEventThrottle={enablePreviewDesktopScrollbar ? 16 : undefined}
           showsVerticalScrollIndicator={!enablePreviewDesktopScrollbar}
         >
-          <RNScrollView
-            horizontal
-            nestedScrollEnabled
-            showsHorizontalScrollIndicator
-            contentContainerStyle={styles.previewCodeScrollContent}
-          >
-            <Text style={styles.codeText}>{preview.content}</Text>
-          </RNScrollView>
+          {isMobile ? (
+            <View style={styles.previewCodeScrollContent}>
+              <Text style={styles.codeText}>{preview.content}</Text>
+            </View>
+          ) : (
+            <RNScrollView
+              horizontal
+              nestedScrollEnabled
+              showsHorizontalScrollIndicator
+              contentContainerStyle={styles.previewCodeScrollContent}
+            >
+              <Text style={styles.codeText}>{preview.content}</Text>
+            </RNScrollView>
+          )}
         </RNScrollView>
         <WebDesktopScrollbarOverlay
           enabled={enablePreviewDesktopScrollbar}
@@ -211,6 +219,7 @@ export function FilePane({
         preview={query.data?.file ?? null}
         isLoading={query.isFetching}
         showDesktopWebScrollbar={showDesktopWebScrollbar}
+        isMobile={isMobile}
       />
     </View>
   );

packages/app/src/components/git-actions-split-button.tsx

@@ -0,0 +1,192 @@
+import { useCallback } from "react";
+import { View, Text, ActivityIndicator, Pressable } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { ChevronDown, MoreVertical } from "lucide-react-native";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { GitAction, GitActions } from "@/hooks/use-git-actions";
+
+interface GitActionsSplitButtonProps {
+  gitActions: GitActions;
+}
+
+export function GitActionsSplitButton({ gitActions }: GitActionsSplitButtonProps) {
+  const { theme } = useUnistyles();
+
+  const getActionDisplayLabel = useCallback((action: GitAction): string => {
+    if (action.status === "pending") return action.pendingLabel;
+    if (action.status === "success") return action.successLabel;
+    return action.label;
+  }, []);
+
+  return (
+    <View style={styles.row}>
+      {gitActions.primary ? (
+        <View style={styles.splitButton}>
+          <Pressable
+            testID="changes-primary-cta"
+            style={({ hovered, pressed }) => [
+              styles.splitButtonPrimary,
+              (hovered || pressed) && styles.splitButtonPrimaryHovered,
+              gitActions.primary!.disabled && styles.splitButtonPrimaryDisabled,
+            ]}
+            onPress={gitActions.primary.handler}
+            disabled={gitActions.primary.disabled}
+            accessibilityRole="button"
+            accessibilityLabel={gitActions.primary.label}
+          >
+            {gitActions.primary.status === "pending" ? (
+              <ActivityIndicator
+                size="small"
+                color={theme.colors.foreground}
+                style={styles.splitButtonSpinnerOnly}
+              />
+            ) : (
+              <View style={styles.splitButtonContent}>
+                {gitActions.primary.icon}
+                <Text style={styles.splitButtonText}>{getActionDisplayLabel(gitActions.primary)}</Text>
+              </View>
+            )}
+          </Pressable>
+          {gitActions.secondary.length > 0 ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                testID="changes-primary-cta-caret"
+                style={({ hovered, pressed, open }) => [
+                  styles.splitButtonCaret,
+                  (hovered || pressed || open) && styles.splitButtonCaretHovered,
+                ]}
+                accessibilityRole="button"
+                accessibilityLabel="More options"
+              >
+                <ChevronDown size={16} color={theme.colors.foregroundMuted} />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" testID="changes-primary-cta-menu">
+                {gitActions.secondary.map((action, index) => {
+                  const needsSeparator = action.id === "merge-from-base" || action.id === "push";
+                  return (
+                    <View key={action.id}>
+                      {needsSeparator && index > 0 ? <DropdownMenuSeparator /> : null}
+                      <DropdownMenuItem
+                        testID={`changes-menu-${action.id}`}
+                        leading={action.icon}
+                        disabled={action.disabled}
+                        status={action.status}
+                        pendingLabel={action.pendingLabel}
+                        successLabel={action.successLabel}
+                        closeOnSelect={action.status === "idle" && action.id === "view-pr"}
+                        description={action.description}
+                        onSelect={action.handler}
+                      >
+                        {action.label}
+                      </DropdownMenuItem>
+                    </View>
+                  );
+                })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : null}
+        </View>
+      ) : null}
+      {gitActions.menu.length > 0 ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            testID="changes-overflow-menu"
+            hitSlop={8}
+            style={[styles.iconButton, styles.overflowMenuButton]}
+            accessibilityRole="button"
+            accessibilityLabel="More actions"
+          >
+            <MoreVertical size={16} color={theme.colors.foregroundMuted} />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" width={220} testID="changes-overflow-content">
+            {gitActions.menu.map((action) => (
+              <DropdownMenuItem
+                key={action.id}
+                testID={`changes-menu-${action.id}`}
+                leading={action.icon}
+                disabled={action.disabled}
+                status={action.status}
+                pendingLabel={action.pendingLabel}
+                successLabel={action.successLabel}
+                closeOnSelect={false}
+                onSelect={action.handler}
+              >
+                {action.label}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+    flexShrink: 0,
+  },
+  splitButton: {
+    flexDirection: "row",
+    alignItems: "stretch",
+    borderRadius: theme.borderRadius.md,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.borderAccent,
+    overflow: "hidden",
+  },
+  splitButtonPrimary: {
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[1],
+    justifyContent: "center",
+    position: "relative",
+  },
+  splitButtonPrimaryHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+  splitButtonPrimaryDisabled: {
+    opacity: 0.6,
+  },
+  splitButtonText: {
+    fontSize: theme.fontSize.sm,
+    lineHeight: theme.fontSize.sm * 1.5,
+    color: theme.colors.foreground,
+    fontWeight: theme.fontWeight.normal,
+  },
+  splitButtonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing[2],
+  },
+  splitButtonSpinnerOnly: {
+    transform: [{ scale: 0.8 }],
+  },
+  splitButtonCaret: {
+    width: 28,
+    alignItems: "center",
+    justifyContent: "center",
+    borderLeftWidth: theme.borderWidth[1],
+    borderLeftColor: theme.colors.borderAccent,
+  },
+  splitButtonCaretHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+  iconButton: {
+    width: 32,
+    height: 32,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.borderRadius.md,
+  },
+  overflowMenuButton: {
+    marginRight: -theme.spacing[2],
+  },
+}));

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

@@ -23,7 +23,6 @@ import {
   GitMerge,
   ListChevronsDownUp,
   ListChevronsUpDown,
-  MoreVertical,
   RefreshCcw,
   Upload,
 } from "lucide-react-native";
@@ -39,7 +38,6 @@ import { useCheckoutPrStatusQuery } from "@/hooks/use-checkout-pr-status-query";
 import { useHorizontalScrollOptional } from "@/contexts/horizontal-scroll-context";
 import { useExplorerSidebarAnimation } from "@/contexts/explorer-sidebar-animation-context";
 import { Fonts } from "@/constants/theme";
-import { getNowMs, isPerfLoggingEnabled, perfLog } from "@/utils/perf";
 import { shouldAnchorHeaderBeforeCollapse } from "@/utils/git-diff-scroll";
 import {
   DropdownMenu,
@@ -47,7 +45,6 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  type ActionStatus,
 } from "@/components/ui/dropdown-menu";
 import { GitHubIcon } from "@/components/icons/github-icon";
 import {
@@ -58,46 +55,16 @@ import { buildNewAgentRoute, resolveNewAgentWorkingDir } from "@/utils/new-agent
 import { openExternalUrl } from "@/utils/open-external-url";
 import { shouldShowMergeFromBaseAction } from "./git-action-visibility";
 
-// =============================================================================
-// Git Actions Data Structure
-// =============================================================================
+import { type GitActionId, type GitAction, type GitActions } from "@/hooks/use-git-actions";
+import { GitActionsSplitButton } from "@/components/git-actions-split-button";
 
-type GitActionId =
-  | "commit"
-  | "push"
-  | "view-pr"
-  | "create-pr"
-  | "merge-branch"
-  | "merge-from-base"
-  | "archive-worktree";
-
-interface GitAction {
-  id: GitActionId;
-  label: string;
-  pendingLabel: string;
-  successLabel: string;
-  disabled: boolean;
-  status: ActionStatus;
-  description?: string;
-  icon?: ReactElement;
-  handler: () => void;
-}
-
-interface GitActions {
-  primary: GitAction | null;
-  secondary: GitAction[];
-  menu: GitAction[];
-}
+// Re-export types from shared hook
+export type { GitActionId, GitAction, GitActions } from "@/hooks/use-git-actions";
 
 function openURLInNewTab(url: string): void {
   void openExternalUrl(url);
 }
 
-const DIFF_PANE_LOG_TAG = "[GitDiffPane]";
-const DIFF_FILE_LOG_TAG = "[DiffFileSection]";
-const DIFF_FILE_LOG_LINE_THRESHOLD = 500;
-const DIFF_FILE_LOG_TOKEN_THRESHOLD = 5000;
-
 type HighlightStyle = NonNullable<HighlightToken["style"]>;
 
 interface HighlightedTextProps {
@@ -226,75 +193,14 @@ const DiffFileHeader = memo(function DiffFileHeader({
   onHeaderHeightChange,
   testID,
 }: DiffFileSectionProps) {
-  const expandStartRef = useRef<number | null>(null);
   const layoutYRef = useRef<number | null>(null);
   const pressHandledRef = useRef(false);
   const pressInRef = useRef<{ ts: number; pageX: number; pageY: number } | null>(null);
 
-  const { hunkCount, lineCount, tokenCount } = useMemo(() => {
-    let totalLines = 0;
-    let totalTokens = 0;
-    for (const hunk of file.hunks) {
-      totalLines += hunk.lines.length;
-      for (const line of hunk.lines) {
-        if (line.tokens) {
-          totalTokens += line.tokens.length;
-        }
-      }
-    }
-    return {
-      hunkCount: file.hunks.length,
-      lineCount: totalLines,
-      tokenCount: totalTokens,
-    };
-  }, [file]);
-
-  const shouldLogFileMetrics =
-    lineCount >= DIFF_FILE_LOG_LINE_THRESHOLD ||
-    tokenCount >= DIFF_FILE_LOG_TOKEN_THRESHOLD;
-
   const toggleExpanded = useCallback(() => {
     pressHandledRef.current = true;
-    if (isPerfLoggingEnabled() && shouldLogFileMetrics) {
-      expandStartRef.current = getNowMs();
-      perfLog(DIFF_FILE_LOG_TAG, {
-        event: "toggle",
-        path: file.path,
-        nextExpanded: !isExpanded,
-        hunkCount,
-        lineCount,
-        tokenCount,
-      });
-    }
     onToggle(file.path);
-  }, [file.path, onToggle, isExpanded, hunkCount, lineCount, tokenCount, shouldLogFileMetrics]);
-
-  useEffect(() => {
-    if (!isPerfLoggingEnabled() || !shouldLogFileMetrics) {
-      return;
-    }
-    const startMs = expandStartRef.current;
-    if (startMs === null) {
-      return;
-    }
-    expandStartRef.current = null;
-    const logCommit = () => {
-      const durationMs = getNowMs() - startMs;
-      perfLog(DIFF_FILE_LOG_TAG, {
-        event: isExpanded ? "expand_commit" : "collapse_commit",
-        path: file.path,
-        durationMs: Math.round(durationMs),
-        hunkCount,
-        lineCount,
-        tokenCount,
-      });
-    };
-    if (typeof requestAnimationFrame === "function") {
-      requestAnimationFrame(() => logCommit());
-    } else {
-      logCommit();
-    }
-  }, [isExpanded, file.path, hunkCount, lineCount, tokenCount, shouldLogFileMetrics]);
+  }, [file.path, onToggle]);
 
   return (
     <View
@@ -466,13 +372,14 @@ interface GitDiffPaneProps {
   serverId: string;
   workspaceId?: string | null;
   cwd: string;
+  hideHeaderRow?: boolean;
 }
 
 type DiffFlatItem =
   | { type: "header"; file: ParsedDiffFile; fileIndex: number; isExpanded: boolean }
   | { type: "body"; file: ParsedDiffFile; fileIndex: number };
 
-export function GitDiffPane({ serverId, workspaceId, cwd }: GitDiffPaneProps) {
+export function GitDiffPane({ serverId, workspaceId, cwd, hideHeaderRow }: GitDiffPaneProps) {
   const { theme } = useUnistyles();
   const isMobile =
     UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
@@ -532,30 +439,6 @@ export function GitDiffPane({ serverId, workspaceId, cwd }: GitDiffPaneProps) {
   const headerHeightByPathRef = useRef<Record<string, number>>({});
   const bodyHeightByPathRef = useRef<Record<string, number>>({});
   const defaultHeaderHeightRef = useRef<number>(44);
-  const diffMetrics = useMemo(() => {
-    let hunkCount = 0;
-    let lineCount = 0;
-    let tokenCount = 0;
-    for (const file of files) {
-      hunkCount += file.hunks.length;
-      for (const hunk of file.hunks) {
-        lineCount += hunk.lines.length;
-        for (const line of hunk.lines) {
-          if (line.tokens) {
-            tokenCount += line.tokens.length;
-          }
-        }
-      }
-    }
-    return {
-      fileCount: files.length,
-      hunkCount,
-      lineCount,
-      tokenCount,
-    };
-  }, [files]);
-  const lastMetricsKeyRef = useRef<string | null>(null);
-
   const handleRefresh = useCallback(() => {
     setIsManualRefresh(true);
     void refreshDiff();
@@ -738,28 +621,6 @@ export function GitDiffPane({ serverId, workspaceId, cwd }: GitDiffPaneProps) {
     setDiffModeOverride(null);
   }, [autoDiffMode]);
 
-  useEffect(() => {
-    if (!isPerfLoggingEnabled()) {
-      return;
-    }
-    const metricsKey = `${diffMetrics.fileCount}:${diffMetrics.hunkCount}:${diffMetrics.lineCount}:${diffMetrics.tokenCount}`;
-    if (lastMetricsKeyRef.current === metricsKey) {
-      return;
-    }
-    lastMetricsKeyRef.current = metricsKey;
-    perfLog(DIFF_PANE_LOG_TAG, {
-      event: "files_snapshot",
-      serverId,
-      workspaceId: workspaceId ?? cwd,
-      fileCount: diffMetrics.fileCount,
-      hunkCount: diffMetrics.hunkCount,
-      lineCount: diffMetrics.lineCount,
-      tokenCount: diffMetrics.tokenCount,
-      isLoading: isDiffLoading,
-      isFetching: isDiffFetching,
-    });
-  }, [cwd, diffMetrics, isDiffFetching, isDiffLoading, serverId, workspaceId]);
-
   const commitStatus = useCheckoutGitActionsStore((state) =>
     state.getStatus({ serverId, cwd, actionId: "commit" })
   );
@@ -1219,119 +1080,22 @@ export function GitDiffPane({ serverId, workspaceId, cwd }: GitDiffPaneProps) {
   ]);
 
   // Helper to get display label based on status
-  const getActionDisplayLabel = useCallback((action: GitAction): string => {
-    if (action.status === "pending") return action.pendingLabel;
-    if (action.status === "success") return action.successLabel;
-    return action.label;
-  }, []);
 
   return (
     <View style={styles.container}>
-      <View style={styles.header} testID="changes-header">
-        <View style={styles.headerLeft}>
-          <GitBranch size={16} color={theme.colors.foregroundMuted} />
-          <Text style={styles.branchLabel} testID="changes-branch" numberOfLines={1}>
-            {branchLabel}
-          </Text>
-        </View>
-        {isGit ? (
-          <View style={styles.headerRight}>
-            {gitActions.primary ? (
-              <View style={styles.splitButton}>
-                <Pressable
-                  testID="changes-primary-cta"
-                  style={[
-                    styles.splitButtonPrimary,
-                    gitActions.primary.disabled && styles.splitButtonPrimaryDisabled,
-                  ]}
-                  onPress={gitActions.primary.handler}
-                  disabled={gitActions.primary.disabled}
-                  accessibilityRole="button"
-                  accessibilityLabel={gitActions.primary.label}
-                >
-                  {gitActions.primary.status === "pending" ? (
-                    <ActivityIndicator
-                      size="small"
-                      color={theme.colors.foreground}
-                      style={styles.splitButtonSpinnerOnly}
-                    />
-                  ) : (
-                    <View style={styles.splitButtonContent}>
-                      {gitActions.primary.icon}
-                      <Text style={styles.splitButtonText}>{getActionDisplayLabel(gitActions.primary)}</Text>
-                    </View>
-                  )}
-                </Pressable>
-                {gitActions.secondary.length > 0 ? (
-                  <DropdownMenu>
-                    <DropdownMenuTrigger
-                      testID="changes-primary-cta-caret"
-                      style={styles.splitButtonCaret}
-                      accessibilityRole="button"
-                      accessibilityLabel="More options"
-                    >
-                      <ChevronDown size={16} color={theme.colors.foregroundMuted} />
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end" testID="changes-primary-cta-menu">
-                      {gitActions.secondary.map((action, index) => {
-                        const needsSeparator = action.id === "merge-from-base" || action.id === "push";
-                        return (
-                          <View key={action.id}>
-                            {needsSeparator && index > 0 ? <DropdownMenuSeparator /> : null}
-                            <DropdownMenuItem
-                              testID={`changes-menu-${action.id}`}
-                              leading={action.icon}
-                              disabled={action.disabled}
-                              status={action.status}
-                              pendingLabel={action.pendingLabel}
-                              successLabel={action.successLabel}
-                              closeOnSelect={action.status === "idle" && action.id === "view-pr"}
-                              description={action.description}
-                              onSelect={action.handler}
-                            >
-                              {action.label}
-                            </DropdownMenuItem>
-                          </View>
-                        );
-                      })}
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                ) : null}
-              </View>
-            ) : null}
-            {gitActions.menu.length > 0 ? (
-              <DropdownMenu>
-                <DropdownMenuTrigger
-                  testID="changes-overflow-menu"
-                  hitSlop={8}
-                  style={[styles.iconButton, styles.overflowMenuButton]}
-                  accessibilityRole="button"
-                  accessibilityLabel="More actions"
-                >
-                  <MoreVertical size={16} color={theme.colors.foregroundMuted} />
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" width={220} testID="changes-overflow-content">
-                  {gitActions.menu.map((action) => (
-                    <DropdownMenuItem
-                      key={action.id}
-                      testID={`changes-menu-${action.id}`}
-                      leading={action.icon}
-                      disabled={action.disabled}
-                      status={action.status}
-                      pendingLabel={action.pendingLabel}
-                      successLabel={action.successLabel}
-                      closeOnSelect={false}
-                      onSelect={action.handler}
-                    >
-                      {action.label}
-                    </DropdownMenuItem>
-                  ))}
-                </DropdownMenuContent>
-              </DropdownMenu>
-            ) : null}
+      {!hideHeaderRow ? (
+        <View style={styles.header} testID="changes-header">
+          <View style={styles.headerLeft}>
+            <GitBranch size={16} color={theme.colors.foregroundMuted} />
+            <Text style={styles.branchLabel} testID="changes-branch" numberOfLines={1}>
+              {branchLabel}
+            </Text>
           </View>
-        ) : null}
-      </View>
+          {isGit ? (
+            <GitActionsSplitButton gitActions={gitActions} />
+          ) : null}
+        </View>
+      ) : null}
 
       {isGit ? (
         <View style={styles.diffStatusContainer}>
@@ -1438,12 +1202,6 @@ const styles = StyleSheet.create((theme) => ({
     flex: 1,
     minWidth: 0,
   },
-  headerRight: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[1],
-    flexShrink: 0,
-  },
   branchLabel: {
     fontSize: theme.fontSize.sm,
     color: theme.colors.foreground,
@@ -1451,6 +1209,7 @@ const styles = StyleSheet.create((theme) => ({
     flexShrink: 1,
   },
   diffStatusContainer: {
+    paddingVertical: 1.5,
     borderBottomWidth: 1,
     borderBottomColor: theme.colors.border,
   },
@@ -1496,112 +1255,6 @@ const styles = StyleSheet.create((theme) => ({
     paddingVertical: theme.spacing[1],
     borderRadius: theme.borderRadius.base,
   },
-  splitButton: {
-    flexDirection: "row",
-    alignItems: "stretch",
-    borderRadius: theme.borderRadius.md,
-    backgroundColor: theme.colors.surface2,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.borderAccent,
-    overflow: "hidden",
-  },
-  splitButtonPrimary: {
-    paddingHorizontal: theme.spacing[3],
-    paddingVertical: theme.spacing[1],
-    justifyContent: "center",
-    position: "relative",
-  },
-  splitButtonPrimaryDisabled: {
-    opacity: 0.6,
-  },
-  splitButtonText: {
-    fontSize: theme.fontSize.sm,
-    lineHeight: theme.fontSize.sm * 1.5,
-    color: theme.colors.foreground,
-    fontWeight: theme.fontWeight.medium,
-  },
-  splitButtonContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: theme.spacing[2],
-  },
-  splitButtonSpinnerOnly: {
-    transform: [{ scale: 0.8 }],
-  },
-  splitButtonCaret: {
-    width: 36,
-    alignItems: "center",
-    justifyContent: "center",
-    borderLeftWidth: theme.borderWidth[1],
-    borderLeftColor: theme.colors.borderAccent,
-  },
-  iconButton: {
-    width: 32,
-    height: 32,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.borderRadius.md,
-  },
-  overflowMenuButton: {
-    marginRight: -theme.spacing[2],
-  },
-  menuOverlay: {
-    flex: 1,
-  },
-  menuBackdrop: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-  },
-  dropdownMenu: {
-    backgroundColor: theme.colors.surface0,
-    borderWidth: 1,
-    borderColor: theme.colors.borderAccent,
-    borderRadius: theme.borderRadius.lg,
-    overflow: "hidden",
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.2,
-    shadowRadius: 8,
-    elevation: 8,
-  },
-  menuItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[2],
-    paddingHorizontal: theme.spacing[3],
-    paddingVertical: theme.spacing[2],
-  },
-  menuItemSelected: {
-    backgroundColor: theme.colors.surface2,
-  },
-  menuItemDisabled: {
-    opacity: 0.5,
-  },
-  menuItemText: {
-    fontSize: theme.fontSize.sm,
-    color: theme.colors.foreground,
-    fontWeight: theme.fontWeight.medium,
-  },
-  menuHintText: {
-    paddingHorizontal: theme.spacing[3],
-    paddingBottom: theme.spacing[2],
-    fontSize: theme.fontSize.xs,
-    color: theme.colors.foregroundMuted,
-  },
-  menuItemDestructive: {
-    backgroundColor: "rgba(248, 81, 73, 0.08)",
-  },
-  menuItemTextDestructive: {
-    color: theme.colors.destructive,
-  },
-  menuDivider: {
-    height: 1,
-    backgroundColor: theme.colors.border,
-  },
   actionErrorText: {
     paddingHorizontal: theme.spacing[3],
     paddingBottom: theme.spacing[1],

packages/app/src/components/headers/header-toggle-button.tsx

@@ -1,4 +1,4 @@
-import type { PropsWithChildren, ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
 import {
   Platform,
   Text,
@@ -12,6 +12,21 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { Shortcut } from "@/components/ui/shortcut";
 import type { ShortcutKey } from "@/utils/format-shortcut";
 
+interface HeaderToggleButtonState {
+  hovered: boolean;
+  pressed: boolean;
+}
+
+interface HeaderToggleButtonProps extends Omit<PressableProps, "style" | "onPress" | "children"> {
+  onPress: NonNullable<PressableProps["onPress"]>;
+  tooltipLabel: string;
+  tooltipKeys: ShortcutKey[];
+  tooltipSide: "left" | "right" | "top" | "bottom";
+  tooltipDelayDuration?: number;
+  style?: StyleProp<ViewStyle>;
+  children: ReactNode | ((state: HeaderToggleButtonState) => ReactNode);
+}
+
 export function HeaderToggleButton({
   onPress,
   tooltipLabel,
@@ -22,16 +37,7 @@ export function HeaderToggleButton({
   disabled,
   children,
   ...props
-}: PropsWithChildren<
-  Omit<PressableProps, "style" | "onPress"> & {
-    onPress: NonNullable<PressableProps["onPress"]>;
-    tooltipLabel: string;
-    tooltipKeys: ShortcutKey[];
-    tooltipSide: "left" | "right" | "top" | "bottom";
-    tooltipDelayDuration?: number;
-    style?: StyleProp<ViewStyle>;
-  }
->): ReactElement {
+}: HeaderToggleButtonProps): ReactElement {
   const tooltipTestID =
     typeof props.testID === "string" && props.testID.length > 0
       ? `${props.testID}-tooltip`
@@ -53,7 +59,10 @@ export function HeaderToggleButton({
         }}
         style={[styles.button, style]}
       >
-        {children}
+        {typeof children === "function"
+          ? (state: { pressed: boolean; hovered?: boolean }) =>
+              children({ hovered: Boolean(state.hovered), pressed: state.pressed })
+          : children}
       </TooltipTrigger>
       <TooltipContent testID={tooltipTestID} side={tooltipSide} align="center" offset={8}>
         <View style={styles.tooltipRow}>

packages/app/src/components/icons/paseo-logo.tsx

@@ -0,0 +1,17 @@
+import Svg, { Path } from "react-native-svg";
+
+interface PaseoLogoProps {
+  size?: number;
+  color?: string;
+}
+
+export function PaseoLogo({ size = 64, color = "white" }: PaseoLogoProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 700 700" fill="none">
+      <Path
+        d="M291.495 91.399C333.897 104.892 379.155 135.075 416.229 173.191C453.389 211.394 484.429 259.725 495.708 311.251C497.555 319.693 498.865 328.216 499.586 336.776C509.755 326.554 519.867 317.815 529.89 311.547C540.647 304.821 553.808 299.297 568.641 299.785C584.29 300.299 597.395 307.326 607.747 317.632C632.173 341.947 629.612 372.898 619.872 397.936C610.185 422.833 591.557 447.826 572.732 469.124C553.591 490.78 532.713 510.308 516.779 524.318C508.775 531.355 501.936 537.073 497.07 541.052C494.635 543.043 492.689 544.603 491.334 545.679C490.657 546.217 490.126 546.635 489.756 546.926C489.571 547.071 489.425 547.184 489.321 547.265C489.269 547.305 489.227 547.338 489.196 547.362C489.181 547.374 489.168 547.385 489.157 547.393C489.153 547.397 489.147 547.401 489.144 547.403C489.134 547.4 488.837 547.06 473.001 528.499L489.135 547.411C478.157 555.911 462.033 554.334 453.122 543.89C444.213 533.448 445.887 518.094 456.861 509.592C456.863 509.591 456.865 509.588 456.869 509.586C456.88 509.577 456.902 509.561 456.933 509.536C456.997 509.487 457.101 509.404 457.245 509.292C457.533 509.066 457.979 508.715 458.569 508.247C459.749 507.31 461.506 505.901 463.742 504.073C468.216 500.414 474.589 495.088 482.073 488.508C497.114 475.284 516.315 457.282 533.578 437.75C551.157 417.862 565.26 398.01 571.859 381.048C578.403 364.227 575.681 356.302 570.724 351.367C568.928 349.579 567.744 348.902 567.267 348.676C566.888 348.496 566.811 348.52 566.804 348.52C566.605 348.513 563.971 348.537 557.953 352.3C545.161 360.299 528.815 377.492 506.807 403.867C494.927 418.106 481.871 434.435 467.547 451.957C463.709 457.28 459.503 462.538 454.91 467.717L454.702 467.549C420.808 508.347 380.37 553.856 332.335 593.848C301.853 619.226 262.656 622.597 228.642 614.743C194.834 606.936 162.658 587.448 142.217 561.686C108.054 518.631 100.57 469.801 108.223 427.836C115.56 387.606 137.391 351.005 166.502 331.557C161.248 315.813 156.813 299.49 153.519 283.013C142.593 228.368 143.239 167.031 174.28 119.619C186.922 100.31 205.846 89.1535 227.387 85.2773C248.1 81.5504 270.278 84.648 291.495 91.399ZM378.642 206.356C345.773 172.563 307.463 147.917 275.208 137.654C259.096 132.527 246.171 131.514 236.828 133.195C228.314 134.727 222.227 138.497 217.721 145.38C196.712 177.468 193.858 224.004 203.82 273.827C206.532 287.394 210.127 300.834 214.345 313.817C236.45 310.276 260.156 311.463 281.22 317.11C319.621 327.403 357.501 355.419 357.501 405.654C357.501 435.255 339.111 465.136 307.278 473.815C273.211 483.103 238.854 464.822 213.105 427.541C203.716 413.947 194.443 397.766 185.947 379.89C174.028 392.223 163.08 411.953 158.673 436.118C153.128 466.518 158.514 501.286 183.085 532.253C195.993 548.522 217.742 562.031 240.771 567.349C263.594 572.619 284.147 569.24 298.664 557.154C349.383 514.927 390.709 466.547 426.366 422.952C448.879 390.86 453.195 356.06 445.578 321.265C436.703 280.718 411.425 240.06 378.642 206.356ZM306.296 405.722C306.296 384.769 292.223 370.736 267.284 364.051C256.012 361.03 244.156 360.087 233.095 360.771C240.361 375.935 248.168 389.513 255.897 400.704C275.647 429.298 289.989 427.822 293.247 426.934C298.737 425.437 306.296 418.161 306.296 405.722Z"
+        fill={color}
+      />
+    </Svg>
+  );
+}

packages/app/src/components/icons/source-control-panel-icon.tsx

@@ -0,0 +1,32 @@
+import Svg, { Rect, Line } from "react-native-svg";
+
+interface SourceControlPanelIconProps {
+  size?: number;
+  color?: string;
+}
+
+export function SourceControlPanelIcon({
+  size = 16,
+  color = "currentColor",
+}: SourceControlPanelIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Rect
+        x={3}
+        y={3}
+        width={18}
+        height={18}
+        rx={2}
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* Plus */}
+      <Line x1={9} y1={9.5} x2={15} y2={9.5} stroke={color} strokeWidth={2} strokeLinecap="round" />
+      <Line x1={12} y1={6.5} x2={12} y2={12.5} stroke={color} strokeWidth={2} strokeLinecap="round" />
+      {/* Minus */}
+      <Line x1={9} y1={16} x2={15} y2={16} stroke={color} strokeWidth={2} strokeLinecap="round" />
+    </Svg>
+  );
+}

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

@@ -10,7 +10,7 @@ import Animated, {
 } from 'react-native-reanimated'
 import { Gesture, GestureDetector } from 'react-native-gesture-handler'
 import { StyleSheet, UnistylesRuntime, useUnistyles } from 'react-native-unistyles'
-import { Plus, Settings, Users } from 'lucide-react-native'
+import { MessagesSquare, Plus, Settings } from 'lucide-react-native'
 import { router, usePathname } from 'expo-router'
 import { usePanelStore } from '@/stores/panel-store'
 import { SidebarWorkspaceList } from './sidebar-workspace-list'
@@ -19,17 +19,16 @@ import { useSidebarWorkspacesList } from '@/hooks/use-sidebar-workspaces-list'
 import { useSidebarAnimation } from '@/contexts/sidebar-animation-context'
 import { useTauriDragHandlers, useTrafficLightPadding } from '@/utils/tauri-window'
 import { Combobox } from '@/components/ui/combobox'
-import { useDaemonRegistry } from '@/contexts/daemon-registry-context'
-import { getHostRuntimeStore } from '@/runtime/host-runtime'
+import { getHostRuntimeStore, useHosts } from '@/runtime/host-runtime'
 import { formatConnectionStatus } from '@/utils/daemons'
 import { HEADER_INNER_HEIGHT, HEADER_INNER_HEIGHT_MOBILE } from '@/constants/layout'
 import {
   buildHostAgentsRoute,
-  buildHostNewAgentRoute,
   buildHostSettingsRoute,
   mapPathnameToServer,
   parseServerIdFromPathname,
 } from '@/utils/host-routes'
+import { useKeyboardShortcutsStore } from '@/stores/keyboard-shortcuts-store'
 
 const DESKTOP_SIDEBAR_WIDTH = 320
 const IS_DEV = Boolean((globalThis as { __DEV__?: boolean }).__DEV__)
@@ -53,7 +52,7 @@ export function LeftSidebar({ selectedAgentId: _selectedAgentId }: LeftSidebarPr
   const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen)
   const closeToAgent = usePanelStore((state) => state.closeToAgent)
   const pathname = usePathname()
-  const { daemons } = useDaemonRegistry()
+  const daemons = useHosts()
   const runtime = getHostRuntimeStore()
   const runtimeConnectionStatusSignature = useSyncExternalStore(
     (onStoreChange) => runtime.subscribeAll(onStoreChange),
@@ -158,23 +157,16 @@ export function LeftSidebar({ selectedAgentId: _selectedAgentId }: LeftSidebarPr
     closeToAgent()
   }, [closeToAgent])
 
-  const handleCreateAgentClean = useCallback(() => {
-    if (!activeServerId) {
-      return
-    }
-    router.push(buildHostNewAgentRoute(activeServerId) as any)
-  }, [activeServerId])
+  const setProjectPickerOpen = useKeyboardShortcutsStore((s) => s.setProjectPickerOpen)
 
-  // Mobile: close sidebar and navigate
-  const handleCreateAgentCleanMobile = useCallback(() => {
+  const handleOpenProjectMobile = useCallback(() => {
     closeToAgent()
-    handleCreateAgentClean()
-  }, [closeToAgent, handleCreateAgentClean])
+    setProjectPickerOpen(true)
+  }, [closeToAgent, setProjectPickerOpen])
 
-  // Desktop: just navigate, don't close
-  const handleCreateAgentCleanDesktop = useCallback(() => {
-    handleCreateAgentClean()
-  }, [handleCreateAgentClean])
+  const handleOpenProjectDesktop = useCallback(() => {
+    setProjectPickerOpen(true)
+  }, [setProjectPickerOpen])
 
   // Mobile: close sidebar and navigate
   const handleSettingsMobile = useCallback(() => {
@@ -332,7 +324,7 @@ export function LeftSidebar({ selectedAgentId: _selectedAgentId }: LeftSidebarPr
                   <Pressable
                     style={styles.newAgentButton}
                     testID="sidebar-new-agent"
-                    onPress={handleCreateAgentCleanMobile}
+                    onPress={handleOpenProjectMobile}
                   >
                     {({ hovered }) => (
                       <>
@@ -346,7 +338,7 @@ export function LeftSidebar({ selectedAgentId: _selectedAgentId }: LeftSidebarPr
                             hovered && styles.newAgentButtonTextHovered,
                           ]}
                         >
-                          New agent
+                          Add project
                         </Text>
                       </>
                     )}
@@ -396,12 +388,12 @@ export function LeftSidebar({ selectedAgentId: _selectedAgentId }: LeftSidebarPr
                     nativeID="sidebar-all-agents"
                     collapsable={false}
                     accessible
-                    accessibilityLabel="All agents"
+                    accessibilityLabel="Sessions"
                     accessibilityRole="button"
                     onPress={handleViewMore}
                   >
                     {({ hovered }) => (
-                      <Users
+                      <MessagesSquare
                         size={theme.iconSize.lg}
                         color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
                       />
@@ -459,7 +451,7 @@ export function LeftSidebar({ selectedAgentId: _selectedAgentId }: LeftSidebarPr
           <Pressable
             style={styles.newAgentButton}
             testID="sidebar-new-agent"
-            onPress={handleCreateAgentCleanDesktop}
+            onPress={handleOpenProjectDesktop}
           >
             {({ hovered }) => (
               <>
@@ -470,7 +462,7 @@ export function LeftSidebar({ selectedAgentId: _selectedAgentId }: LeftSidebarPr
                 <Text
                   style={[styles.newAgentButtonText, hovered && styles.newAgentButtonTextHovered]}
                 >
-                  New agent
+                  Add project
                 </Text>
               </>
             )}
@@ -516,12 +508,12 @@ export function LeftSidebar({ selectedAgentId: _selectedAgentId }: LeftSidebarPr
             nativeID="sidebar-all-agents"
             collapsable={false}
             accessible
-            accessibilityLabel="All agents"
+            accessibilityLabel="Sessions"
             accessibilityRole="button"
             onPress={handleViewMore}
           >
             {({ hovered }) => (
-              <Users
+              <MessagesSquare
                 size={theme.iconSize.lg}
                 color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
               />

packages/app/src/components/message-input.tsx

@@ -84,6 +84,7 @@ export interface MessageInputProps {
   /** Reports cursor selection updates from the underlying input. */
   onSelectionChange?: (selection: { start: number; end: number }) => void
   onFocusChange?: (focused: boolean) => void
+  onHeightChange?: (height: number) => void
 }
 
 export interface MessageInputRef {
@@ -100,6 +101,7 @@ export interface MessageInputRef {
 const MIN_INPUT_HEIGHT = 30
 const MAX_INPUT_HEIGHT = 160
 const IS_WEB = Platform.OS === 'web'
+const IS_DEV = Boolean((globalThis as { __DEV__?: boolean }).__DEV__)
 
 type WebTextInputKeyPressEvent = NativeSyntheticEvent<
   TextInputKeyPressEventData & {
@@ -111,12 +113,68 @@ type WebTextInputKeyPressEvent = NativeSyntheticEvent<
 
 type TextAreaHandle = {
   scrollHeight?: number
+  clientHeight?: number
+  offsetHeight?: number
+  scrollTop?: number
+  selectionStart?: number | null
+  selectionEnd?: number | null
   style?: {
     height?: string
     overflowY?: string
   } & Record<string, unknown>
 }
 
+function logWebStickyBottom(
+  event: string,
+  details: Record<string, unknown>
+): void {
+  if (!IS_DEV || !IS_WEB) {
+    return
+  }
+  console.log('[WebStickyBottom]', event, details)
+}
+
+function getDebugNow(): number | null {
+  if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
+    return Number(performance.now().toFixed(3))
+  }
+  return null
+}
+
+function getElementDescriptor(element: HTMLElement | null): string | null {
+  if (!element) return null
+  const tag = element.tagName?.toLowerCase() ?? 'unknown'
+  const id = element.id ? `#${element.id}` : ''
+  const testId = element.getAttribute?.('data-testid')
+  const label = element.getAttribute?.('aria-label')
+  const suffix = testId
+    ? `[data-testid="${testId}"]`
+    : label
+      ? `[aria-label="${label}"]`
+      : ''
+  return `${tag}${id}${suffix}`
+}
+
+function getScrollableAncestorChain(element: HTMLElement | null): string[] {
+  if (!element || typeof window === 'undefined') {
+    return []
+  }
+  const results: string[] = []
+  let current = element.parentElement
+  while (current) {
+    const style = window.getComputedStyle(current)
+    const overflowY = style.overflowY
+    const canScroll =
+      (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') &&
+      current.scrollHeight > current.clientHeight
+    if (canScroll) {
+      results.push(getElementDescriptor(current) ?? current.tagName.toLowerCase())
+    }
+    current = current.parentElement
+  }
+  return results
+}
+
 function ImageAttachmentThumbnail({ image }: { image: ImageAttachment }) {
   const uri = useAttachmentPreviewUrl(image)
   if (!uri) {
@@ -153,6 +211,7 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
     onKeyPress: onKeyPressCallback,
     onSelectionChange: onSelectionChangeCallback,
     onFocusChange,
+    onHeightChange,
   },
   ref
 ) {
@@ -162,6 +221,8 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
   const toast = useToast()
   const voice = useVoiceOptional()
   const [inputHeight, setInputHeight] = useState(MIN_INPUT_HEIGHT)
+  const rootRef = useRef<View | null>(null)
+  const inputWrapperRef = useRef<View | null>(null)
   const textInputRef = useRef<TextInput | (TextInput & { getNativeRef?: () => unknown }) | null>(
     null
   )
@@ -473,7 +534,8 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
     onSubmit(payload)
     inputHeightRef.current = MIN_INPUT_HEIGHT
     setInputHeight(MIN_INPUT_HEIGHT)
-  }, [value, images, onSubmit, isAgentRunning])
+    onHeightChange?.(MIN_INPUT_HEIGHT)
+  }, [value, images, onSubmit, isAgentRunning, onHeightChange])
 
   const handleQueueMessage = useCallback(() => {
     if (!onQueue) return
@@ -487,7 +549,8 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
     onChangeText('')
     inputHeightRef.current = MIN_INPUT_HEIGHT
     setInputHeight(MIN_INPUT_HEIGHT)
-  }, [value, images, onQueue, onChangeText])
+    onHeightChange?.(MIN_INPUT_HEIGHT)
+  }, [value, images, onQueue, onChangeText, onHeightChange])
 
   // Web input height measurement
   function isTextAreaLike(v: unknown): v is TextAreaHandle {
@@ -505,6 +568,12 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
     return null
   }, [])
 
+  const getWebElement = useCallback((target: 'root' | 'wrapper'): HTMLElement | null => {
+    const ref = target === 'root' ? rootRef.current : inputWrapperRef.current
+    if (!ref) return null
+    return ref instanceof HTMLElement ? ref : ((ref as unknown as { getBoundingClientRect?: () => DOMRect }).getBoundingClientRect ? (ref as unknown as HTMLElement) : null)
+  }, [])
+
   useEffect(() => {
     if (!IS_WEB || !onAddImages) {
       return
@@ -558,35 +627,125 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
     onAddImages,
   ])
 
+  useEffect(() => {
+    if (!IS_WEB || typeof ResizeObserver === 'undefined') {
+      return
+    }
+
+    const textarea = getWebTextArea()
+    const root = getWebElement('root')
+    const wrapper = getWebElement('wrapper')
+    const observed = [
+      { name: 'composer_root', element: root },
+      { name: 'composer_wrapper', element: wrapper },
+      { name: 'composer_textarea', element: textarea as unknown as HTMLElement | null },
+    ].filter((entry): entry is { name: string; element: HTMLElement } => entry.element instanceof HTMLElement)
+
+    if (observed.length === 0) {
+      return
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const target = entry.target as HTMLElement
+        const match = observed.find((item) => item.element === target)
+        if (!match) {
+          continue
+        }
+        const textareaNode = getWebTextArea()
+        logWebStickyBottom('composer_element_resized', {
+          target: match.name,
+          width: target.clientWidth,
+          height: target.clientHeight,
+          offsetHeight: target.offsetHeight,
+          scrollHeight: target.scrollHeight,
+          textareaClientHeight: textareaNode?.clientHeight ?? null,
+          textareaOffsetHeight: textareaNode?.offsetHeight ?? null,
+          textareaScrollHeight: textareaNode?.scrollHeight ?? null,
+          textareaScrollTop: (textareaNode as unknown as HTMLTextAreaElement | null)?.scrollTop ?? null,
+          valueLength: valueRef.current.length,
+        })
+      }
+    })
+
+    for (const entry of observed) {
+      observer.observe(entry.element)
+    }
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [getWebElement, getWebTextArea])
+
+  useEffect(() => {
+    if (!IS_WEB) {
+      return
+    }
+    const textarea = getWebTextArea() as (HTMLTextAreaElement & TextAreaHandle) | null
+    if (!textarea || typeof textarea.addEventListener !== 'function') {
+      return
+    }
+
+    const handleScroll = () => {
+      const textareaElement = textarea as unknown as HTMLElement
+      const chatScroller =
+        typeof document !== 'undefined'
+          ? (document.querySelector('[data-testid="agent-chat-scroll"]') as HTMLElement | null)
+          : null
+      logWebStickyBottom('composer_textarea_scrolled', {
+        now: getDebugNow(),
+        scrollTop: textarea.scrollTop,
+        clientHeight: textarea.clientHeight ?? null,
+        scrollHeight: textarea.scrollHeight ?? null,
+        selectionStart: textarea.selectionStart ?? null,
+        selectionEnd: textarea.selectionEnd ?? null,
+        textareaDescriptor: getElementDescriptor(textareaElement),
+        chatScrollerDescriptor: getElementDescriptor(chatScroller),
+        chatScrollerContainsTextarea: Boolean(chatScroller && textareaElement && chatScroller.contains(textareaElement)),
+        textareaScrollableAncestors: getScrollableAncestorChain(textareaElement),
+        valueLength: valueRef.current.length,
+      })
+    }
+
+    textarea.addEventListener('scroll', handleScroll, { passive: true })
+    return () => {
+      textarea.removeEventListener('scroll', handleScroll)
+    }
+  }, [getWebTextArea])
+
   function measureWebInputHeight(source: string): boolean {
     if (!IS_WEB) return false
     const textarea = getWebTextArea()
     if (!textarea || typeof textarea.scrollHeight !== 'number') return false
-
-    const prevHeight = textarea.style?.height
-    const prevOverflow = textarea.style?.overflowY
-    if (textarea.style) {
-      textarea.style.height = 'auto'
-      textarea.style.overflowY = 'hidden'
-    }
-
     const scrollHeight = textarea.scrollHeight ?? 0
-    if (textarea.style) {
-      textarea.style.height = prevHeight ?? ''
-      textarea.style.overflowY = prevOverflow ?? ''
-    }
 
     if (baselineInputHeightRef.current === null && scrollHeight > 0) {
       baselineInputHeightRef.current = scrollHeight
+      logWebStickyBottom('composer_baseline_measured', {
+        source,
+        baseline: scrollHeight,
+      })
     }
 
     const baseline = baselineInputHeightRef.current ?? MIN_INPUT_HEIGHT
     const rawTarget = scrollHeight > 0 ? scrollHeight : baseline
     const bounded = Math.max(MIN_INPUT_HEIGHT, Math.min(MAX_INPUT_HEIGHT, rawTarget))
 
-    if (Math.abs(inputHeightRef.current - bounded) >= 1) {
+    const previousHeight = inputHeightRef.current
+    if (Math.abs(previousHeight - bounded) >= 1) {
       inputHeightRef.current = bounded
       setInputHeight(bounded)
+      onHeightChange?.(bounded)
+      logWebStickyBottom('composer_height_changed', {
+        source,
+        previousHeight,
+        nextHeight: bounded,
+        scrollHeight,
+        clientHeight: textarea.clientHeight ?? null,
+        offsetHeight: textarea.offsetHeight ?? null,
+        baseline,
+        rawTarget,
+      })
       return true
     }
     return false
@@ -595,24 +754,51 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
   function setBoundedInputHeight(nextHeight: number) {
     const bounded = Math.max(MIN_INPUT_HEIGHT, Math.min(MAX_INPUT_HEIGHT, nextHeight))
     if (Math.abs(inputHeightRef.current - bounded) < 1) return
+    const previousHeight = inputHeightRef.current
     inputHeightRef.current = bounded
     setInputHeight(bounded)
+    onHeightChange?.(bounded)
+    logWebStickyBottom('composer_height_changed_native', {
+      previousHeight,
+      nextHeight: bounded,
+    })
   }
 
   function handleContentSizeChange(
     event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>
   ) {
+    const contentHeight = event.nativeEvent.contentSize.height
     if (IS_WEB) {
-      measureWebInputHeight('contentSizeChange')
+      logWebStickyBottom('composer_content_size_change', {
+        reportedHeight: contentHeight,
+      })
+      if (baselineInputHeightRef.current === null && contentHeight > 0) {
+        baselineInputHeightRef.current = contentHeight
+        logWebStickyBottom('composer_baseline_measured', {
+          source: 'contentSizeChange',
+          baseline: contentHeight,
+        })
+      }
+      setBoundedInputHeight(contentHeight)
       return
     }
-    const contentHeight = event.nativeEvent.contentSize.height
     setBoundedInputHeight(contentHeight)
   }
 
   function handleSelectionChange(event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) {
     const start = event.nativeEvent.selection?.start ?? 0
     const end = event.nativeEvent.selection?.end ?? start
+    if (IS_WEB) {
+      const textarea = getWebTextArea()
+      logWebStickyBottom('composer_selection_changed', {
+        now: getDebugNow(),
+        start,
+        end,
+        textareaScrollTop: textarea?.scrollTop ?? null,
+        textareaClientHeight: textarea?.clientHeight ?? null,
+        textareaScrollHeight: textarea?.scrollHeight ?? null,
+      })
+    }
     onSelectionChangeCallback?.({ start, end })
   }
 
@@ -668,14 +854,20 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
     (nextValue: string) => {
       markScrollInvestigationEvent(investigationComponentId, 'inputChange')
       onChangeText(nextValue)
+      if (IS_WEB) {
+        logWebStickyBottom('composer_text_changed', {
+          valueLength: nextValue.length,
+          lineCount: nextValue.split('\n').length,
+        })
+      }
     },
     [investigationComponentId, onChangeText]
   )
 
   return (
-    <View style={styles.container} testID="message-input-root">
+    <View ref={rootRef} style={styles.container} testID="message-input-root">
       {/* Regular input */}
-      <Animated.View style={[styles.inputWrapper, inputAnimatedStyle]}>
+      <Animated.View ref={inputWrapperRef} style={[styles.inputWrapper, inputAnimatedStyle]}>
         {/* Image preview pills */}
         {hasImages && (
           <View style={styles.imagePreviewContainer} testID="message-input-image-preview">
@@ -712,7 +904,8 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
           value={value}
           onChangeText={handleInputChange}
           placeholder={placeholder}
-          placeholderTextColor={theme.colors.mutedForeground}
+          placeholderTextColor={theme.colors.surface4}
+          accessibilityLabel="Message agent..."
           onFocus={() => {
             isInputFocusedRef.current = true
             onFocusChange?.(true)

packages/app/src/components/message.tsx

@@ -68,7 +68,6 @@ import {
   buildToolCallDisplayModel,
 } from "@/utils/tool-call-display";
 import { resolveToolCallIcon } from "@/utils/tool-call-icon";
-import { getNowMs, isPerfLoggingEnabled, perfLog } from "@/utils/perf";
 import { parseInlinePathToken, type InlinePathTarget } from "@/utils/inline-path";
 import { getMarkdownListMarker } from "@/utils/markdown-list";
 import { openExternalUrl } from "@/utils/open-external-url";
@@ -646,6 +645,9 @@ const expandableBadgeStylesheet = StyleSheet.create((theme) => ({
     marginLeft: theme.spacing[1],
     flexShrink: 0,
   },
+  chevronExpanded: {
+    transform: [{ rotate: "90deg" }],
+  },
   detailWrapper: {
     borderBottomLeftRadius: theme.borderRadius.lg,
     borderBottomRightRadius: theme.borderRadius.lg,
@@ -1289,6 +1291,8 @@ const ExpandableBadge = memo(function ExpandableBadge({
   const { theme } = useUnistyles();
   const resolvedDisableOuterSpacing =
     useDisableOuterSpacing(disableOuterSpacing);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isPressed, setIsPressed] = useState(false);
   const isInteractive = Boolean(onToggle);
   const hasDetailContent = Boolean(renderDetails);
   const detailContent =
@@ -1479,6 +1483,107 @@ const ExpandableBadge = memo(function ExpandableBadge({
       } as never)
     : null;
 
+  const containerStyle = useMemo(
+    () => [
+      expandableBadgeStylesheet.container,
+      !resolvedDisableOuterSpacing &&
+        (isLastInSequence
+          ? expandableBadgeStylesheet.containerLastInSequence
+          : expandableBadgeStylesheet.containerSpacing),
+      style,
+    ],
+    [isLastInSequence, resolvedDisableOuterSpacing, style]
+  );
+
+  const pressableStyle = useMemo(
+    () => [
+      expandableBadgeStylesheet.pressable,
+      isPressed && isInteractive
+        ? expandableBadgeStylesheet.pressablePressed
+        : null,
+      isExpanded && expandableBadgeStylesheet.pressableExpanded,
+    ],
+    [isExpanded, isInteractive, isPressed]
+  );
+
+  const accessibilityState = useMemo(
+    () => (isInteractive ? { expanded: isExpanded } : undefined),
+    [isExpanded, isInteractive]
+  );
+
+  const labelStyle = useMemo(
+    () => [
+      expandableBadgeStylesheet.label,
+      isLoading && expandableBadgeStylesheet.labelLoading,
+    ],
+    [isLoading]
+  );
+
+  const shimmerLabelTextStyle = useMemo(
+    () => [
+      expandableBadgeStylesheet.label,
+      isLoading && expandableBadgeStylesheet.labelLoading,
+      expandableBadgeStylesheet.shimmerText,
+      shimmerLabelStyle,
+    ],
+    [isLoading, shimmerLabelStyle]
+  );
+
+  const shimmerSecondaryTextStyle = useMemo(
+    () => [
+      expandableBadgeStylesheet.secondaryLabel,
+      expandableBadgeStylesheet.shimmerText,
+      shimmerSecondaryStyle,
+    ],
+    [shimmerSecondaryStyle]
+  );
+
+  const nativeShimmerTrackStyle = useMemo(
+    () => [
+      expandableBadgeStylesheet.nativeShimmerTrack,
+      { width: labelRowWidth, height: labelRowHeight },
+    ],
+    [labelRowHeight, labelRowWidth]
+  );
+
+  const nativeShimmerMaskStyle = useMemo(
+    () => [
+      expandableBadgeStylesheet.shimmerMaskRow,
+      { width: labelRowWidth, height: labelRowHeight },
+    ],
+    [labelRowHeight, labelRowWidth]
+  );
+
+  const nativeLabelMaskStyle = useMemo(
+    () => [expandableBadgeStylesheet.label, { color: "#000000", opacity: 1 }],
+    []
+  );
+
+  const nativeSecondaryMaskStyle = useMemo(
+    () => [
+      expandableBadgeStylesheet.secondaryLabel,
+      { color: "#000000", opacity: 1 },
+    ],
+    []
+  );
+
+  const nativeShimmerPeakCombinedStyle = useMemo(
+    () => [
+      expandableBadgeStylesheet.nativeShimmerPeak,
+      nativeShimmerPeakStyle,
+      { width: nativeShimmerPeakWidth, height: labelRowHeight },
+    ],
+    [labelRowHeight, nativeShimmerPeakStyle, nativeShimmerPeakWidth]
+  );
+
+  const chevronStyle = useMemo(
+    () => [
+      expandableBadgeStylesheet.chevron,
+      isExpanded && expandableBadgeStylesheet.chevronExpanded,
+    ],
+    [isExpanded]
+  );
+
   const IconComponent = icon;
   const iconColor = isError
     ? theme.colors.destructive
@@ -1493,186 +1598,142 @@ const ExpandableBadge = memo(function ExpandableBadge({
 
   return (
     <View
-      style={[
-        expandableBadgeStylesheet.container,
-        !resolvedDisableOuterSpacing &&
-          (isLastInSequence
-            ? expandableBadgeStylesheet.containerLastInSequence
-            : expandableBadgeStylesheet.containerSpacing),
-        style,
-      ]}
+      style={containerStyle}
       testID={testID}
     >
       <Pressable
         onPress={isInteractive ? onToggle : undefined}
+        onHoverIn={isInteractive ? () => setIsHovered(true) : undefined}
+        onHoverOut={
+          isInteractive
+            ? () => {
+                setIsHovered(false);
+                setIsPressed(false);
+              }
+            : undefined
+        }
+        onPressIn={isInteractive ? () => setIsPressed(true) : undefined}
+        onPressOut={isInteractive ? () => setIsPressed(false) : undefined}
         disabled={!isInteractive}
         accessibilityRole={isInteractive ? "button" : undefined}
-        accessibilityState={isInteractive ? { expanded: isExpanded } : undefined}
-        style={({ pressed }) => [
-          expandableBadgeStylesheet.pressable,
-          pressed && isInteractive
-            ? expandableBadgeStylesheet.pressablePressed
-            : null,
-          isExpanded && expandableBadgeStylesheet.pressableExpanded,
-        ]}
+        accessibilityState={accessibilityState}
+        style={pressableStyle}
       >
-        {({ hovered }) => (
-          <>
-            <View style={expandableBadgeStylesheet.headerRow}>
-              <View style={expandableBadgeStylesheet.iconBadge}>{iconNode}</View>
+        <View style={expandableBadgeStylesheet.headerRow}>
+          <View style={expandableBadgeStylesheet.iconBadge}>{iconNode}</View>
+          <View
+            style={expandableBadgeStylesheet.labelRow}
+            onLayout={shouldMeasureNativeShimmer ? handleLabelRowLayout : undefined}
+          >
+            <Text
+              style={labelStyle}
+              numberOfLines={1}
+              onLayout={shouldMeasureWebShimmer ? handleLabelLayout : undefined}
+            >
+              {label}
+            </Text>
+            {secondaryLabel ? (
+              <Text
+                style={expandableBadgeStylesheet.secondaryLabel}
+                numberOfLines={1}
+                onLayout={shouldMeasureWebShimmer ? handleSecondaryLayout : undefined}
+              >
+                {secondaryLabel}
+              </Text>
+            ) : (
+              <View style={expandableBadgeStylesheet.spacer} />
+            )}
+            {isWebShimmer ? (
               <View
-                style={expandableBadgeStylesheet.labelRow}
-                onLayout={shouldMeasureNativeShimmer ? handleLabelRowLayout : undefined}
+                style={expandableBadgeStylesheet.shimmerOverlay}
+                pointerEvents="none"
               >
                 <Text
-                  style={[
-                    expandableBadgeStylesheet.label,
-                    isLoading && expandableBadgeStylesheet.labelLoading,
-                  ]}
+                  style={shimmerLabelTextStyle}
                   numberOfLines={1}
-                  onLayout={shouldMeasureWebShimmer ? handleLabelLayout : undefined}
                 >
                   {label}
                 </Text>
                 {secondaryLabel ? (
                   <Text
-                    style={expandableBadgeStylesheet.secondaryLabel}
+                    style={shimmerSecondaryTextStyle}
                     numberOfLines={1}
-                    onLayout={shouldMeasureWebShimmer ? handleSecondaryLayout : undefined}
                   >
                     {secondaryLabel}
                   </Text>
                 ) : (
                   <View style={expandableBadgeStylesheet.spacer} />
                 )}
-                {isWebShimmer ? (
-                  <View
-                    style={expandableBadgeStylesheet.shimmerOverlay}
-                    pointerEvents="none"
-                  >
-                    <Text
-                      style={[
-                        expandableBadgeStylesheet.label,
-                        isLoading && expandableBadgeStylesheet.labelLoading,
-                        expandableBadgeStylesheet.shimmerText,
-                        shimmerLabelStyle,
-                      ]}
-                      numberOfLines={1}
-                    >
-                      {label}
-                    </Text>
-                    {secondaryLabel ? (
+              </View>
+            ) : null}
+            {isNativeShimmer ? (
+              <View
+                style={expandableBadgeStylesheet.shimmerOverlay}
+                pointerEvents="none"
+              >
+                <MaskedView
+                  style={nativeShimmerTrackStyle}
+                  maskElement={
+                    <View style={nativeShimmerMaskStyle}>
                       <Text
-                        style={[
-                          expandableBadgeStylesheet.secondaryLabel,
-                          expandableBadgeStylesheet.shimmerText,
-                          shimmerSecondaryStyle,
-                        ]}
+                        style={nativeLabelMaskStyle}
                         numberOfLines={1}
                       >
-                        {secondaryLabel}
+                        {label}
                       </Text>
-                    ) : (
-                      <View style={expandableBadgeStylesheet.spacer} />
-                    )}
-                  </View>
-                ) : null}
-                {isNativeShimmer ? (
+                      {secondaryLabel ? (
+                        <Text
+                          style={nativeSecondaryMaskStyle}
+                          numberOfLines={1}
+                        >
+                          {secondaryLabel}
+                        </Text>
+                      ) : (
+                        <View style={expandableBadgeStylesheet.spacer} />
+                      )}
+                    </View>
+                  }
+                >
                   <View
-                    style={expandableBadgeStylesheet.shimmerOverlay}
-                    pointerEvents="none"
+                    style={nativeShimmerTrackStyle}
                   >
-                    <MaskedView
-                      style={[
-                        expandableBadgeStylesheet.nativeShimmerTrack,
-                        { width: labelRowWidth, height: labelRowHeight },
-                      ]}
-                      maskElement={
-                        <View
-                          style={[
-                            expandableBadgeStylesheet.shimmerMaskRow,
-                            { width: labelRowWidth, height: labelRowHeight },
-                          ]}
-                        >
-                          <Text
-                            style={[
-                              expandableBadgeStylesheet.label,
-                              { color: "#000000", opacity: 1 },
-                            ]}
-                            numberOfLines={1}
+                    <Animated.View style={nativeShimmerPeakCombinedStyle}>
+                      <Svg width="100%" height="100%" preserveAspectRatio="none">
+                        <Defs>
+                          <SvgLinearGradient
+                            id={nativeGradientIdRef.current}
+                            x1="0%"
+                            y1="0%"
+                            x2="100%"
+                            y2="0%"
                           >
-                            {label}
-                          </Text>
-                          {secondaryLabel ? (
-                            <Text
-                              style={[
-                                expandableBadgeStylesheet.secondaryLabel,
-                                { color: "#000000", opacity: 1 },
-                              ]}
-                              numberOfLines={1}
-                            >
-                              {secondaryLabel}
-                            </Text>
-                          ) : (
-                            <View style={expandableBadgeStylesheet.spacer} />
-                          )}
-                        </View>
-                      }
-                    >
-                      <View
-                        style={[
-                          expandableBadgeStylesheet.nativeShimmerTrack,
-                          { width: labelRowWidth, height: labelRowHeight },
-                        ]}
-                      >
-                        <Animated.View
-                          style={[
-                            expandableBadgeStylesheet.nativeShimmerPeak,
-                            nativeShimmerPeakStyle,
-                            { width: nativeShimmerPeakWidth, height: labelRowHeight },
-                          ]}
-                        >
-                          <Svg width="100%" height="100%" preserveAspectRatio="none">
-                            <Defs>
-                              <SvgLinearGradient
-                                id={nativeGradientIdRef.current}
-                                x1="0%"
-                                y1="0%"
-                                x2="100%"
-                                y2="0%"
-                              >
-                                <Stop offset="0%" stopColor="#ffffff" stopOpacity={0} />
-                                <Stop offset="50%" stopColor="#ffffff" stopOpacity={1} />
-                                <Stop offset="100%" stopColor="#ffffff" stopOpacity={0} />
-                              </SvgLinearGradient>
-                            </Defs>
-                            <Rect
-                              x="0"
-                              y="0"
-                              width="100%"
-                              height="100%"
-                              fill={`url(#${nativeGradientIdRef.current})`}
-                            />
-                          </Svg>
-                        </Animated.View>
-                      </View>
-                    </MaskedView>
+                            <Stop offset="0%" stopColor="#ffffff" stopOpacity={0} />
+                            <Stop offset="50%" stopColor="#ffffff" stopOpacity={1} />
+                            <Stop offset="100%" stopColor="#ffffff" stopOpacity={0} />
+                          </SvgLinearGradient>
+                        </Defs>
+                        <Rect
+                          x="0"
+                          y="0"
+                          width="100%"
+                          height="100%"
+                          fill={`url(#${nativeGradientIdRef.current})`}
+                        />
+                      </Svg>
+                    </Animated.View>
                   </View>
-                ) : null}
+                </MaskedView>
               </View>
-              {isInteractive && hovered ? (
-                <ChevronRight
-                  size={14}
-                  color={theme.colors.foregroundMuted}
-                  style={[
-                    expandableBadgeStylesheet.chevron,
-                    { transform: [{ rotate: isExpanded ? "90deg" : "0deg" }] },
-                  ]}
-                />
-              ) : null}
-            </View>
-          </>
-        )}
+            ) : null}
+          </View>
+          {isInteractive && isHovered ? (
+            <ChevronRight
+              size={14}
+              color={theme.colors.foregroundMuted}
+              style={chevronStyle}
+            />
+          ) : null}
+        </View>
       </Pressable>
       {detailContent ? (
         <Pressable
@@ -1724,10 +1785,6 @@ interface ToolCallProps {
   onInlineDetailsExpandedChange?: (expanded: boolean) => void;
 }
 
-const TOOL_CALL_LOG_TAG = "[ToolCall]";
-const TOOL_CALL_COMMIT_THRESHOLD_MS = 16;
-
-
 export const ToolCall = memo(function ToolCall({
   toolName,
   args,
@@ -1744,7 +1801,6 @@ export const ToolCall = memo(function ToolCall({
 }: ToolCallProps) {
   const { openToolCall } = useToolCallSheet();
   const [isExpanded, setIsExpanded] = useState(false);
-  const toggleStartRef = useRef<number | null>(null);
 
   // Check if we're on mobile (use bottom sheet) or desktop (inline expand)
   const isMobile =
@@ -1787,7 +1843,6 @@ export const ToolCall = memo(function ToolCall({
   const displayName = displayModel.displayName;
   const summary = displayModel.summary;
   const errorText = displayModel.errorText;
-  const iconCategory = effectiveDetail?.type ?? toolName.trim().toLowerCase();
   const IconComponent = resolveToolCallIcon(toolName, effectiveDetail);
 
   // Check if there's any content to display
@@ -1800,9 +1855,6 @@ export const ToolCall = memo(function ToolCall({
       : false);
 
   const handleToggle = useCallback(() => {
-    if (!isMobile && isPerfLoggingEnabled()) {
-      toggleStartRef.current = getNowMs();
-    }
     if (isMobile) {
       openToolCall({
         toolName,
@@ -1816,33 +1868,6 @@ export const ToolCall = memo(function ToolCall({
     }
   }, [isMobile, openToolCall, toolName, displayName, summary, effectiveDetail, errorText]);
 
-  useEffect(() => {
-    if (isMobile || !isPerfLoggingEnabled()) {
-      return;
-    }
-    const startMs = toggleStartRef.current;
-    if (startMs === null) {
-      return;
-    }
-    toggleStartRef.current = null;
-    const logCommit = () => {
-      const durationMs = getNowMs() - startMs;
-      if (durationMs >= TOOL_CALL_COMMIT_THRESHOLD_MS) {
-        perfLog(TOOL_CALL_LOG_TAG, {
-          event: isExpanded ? "expand_commit" : "collapse_commit",
-          toolName,
-          iconCategory,
-          durationMs: Math.round(durationMs),
-        });
-      }
-    };
-    if (typeof requestAnimationFrame === "function") {
-      requestAnimationFrame(() => logCommit());
-    } else {
-      logCommit();
-    }
-  }, [isExpanded, isMobile, toolName, iconCategory]);
-
   useEffect(() => {
     if (!onInlineDetailsHoverChange || isMobile || isExpanded) {
       return;

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

@@ -1,46 +0,0 @@
-import { useEffect } from "react";
-import { SessionProvider } from "@/contexts/session-context";
-import { useDaemonRegistry, type HostProfile } from "@/contexts/daemon-registry-context";
-import {
-  getHostRuntimeStore,
-  useHostRuntimeSession,
-} from "@/runtime/host-runtime";
-
-function ManagedDaemonSession({ daemon }: { daemon: HostProfile }) {
-  const { client } = useHostRuntimeSession(daemon.serverId);
-
-  if (!client) {
-    return null;
-  }
-
-  return (
-    <SessionProvider
-      key={daemon.serverId}
-      serverId={daemon.serverId}
-      client={client}
-    >
-      {null}
-    </SessionProvider>
-  );
-}
-
-export function MultiDaemonSessionHost() {
-  const { daemons } = useDaemonRegistry();
-
-  useEffect(() => {
-    const runtime = getHostRuntimeStore();
-    runtime.syncHosts(daemons);
-  }, [daemons]);
-
-  if (daemons.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      {daemons.map((daemon) => (
-        <ManagedDaemonSession key={daemon.serverId} daemon={daemon} />
-      ))}
-    </>
-  );
-}

packages/app/src/components/pair-link-modal.tsx

@@ -2,9 +2,10 @@ import { useCallback, useState } from "react";
 import { Alert, Text, View } from "react-native";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { Link } from "lucide-react-native";
-import { useDaemonRegistry, type HostProfile } from "@/contexts/daemon-registry-context";
+import type { HostProfile } from "@/types/host-connection";
+import { useHosts, useHostMutations } from "@/runtime/host-runtime";
 import { decodeOfferFragmentPayload, normalizeHostPort } from "@/utils/daemon-endpoints";
-import { probeConnection } from "@/utils/test-daemon-connection";
+import { connectToDaemon } from "@/utils/test-daemon-connection";
 import { ConnectionOfferSchema } from "@server/shared/connection-offer";
 import { AdaptiveModalSheet, AdaptiveTextInput } from "./adaptive-modal-sheet";
 import { Button } from "@/components/ui/button";
@@ -52,7 +53,8 @@ export interface PairLinkModalProps {
 
 export function PairLinkModal({ visible, onClose, onCancel, onSaved, targetServerId }: PairLinkModalProps) {
   const { theme } = useUnistyles();
-  const { daemons, upsertDaemonFromOfferUrl } = useDaemonRegistry();
+  const daemons = useHosts();
+  const { upsertConnectionFromOfferUrl: upsertDaemonFromOfferUrl } = useHostMutations();
   const isMobile =
     UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
 
@@ -122,7 +124,7 @@ export function PairLinkModal({ visible, onClose, onCancel, onSaved, targetServe
       setIsSaving(true);
       setErrorMessage("");
 
-      const probeResult = await probeConnection(
+      const { client, hostname } = await connectToDaemon(
         {
           id: "probe",
           type: "relay",
@@ -131,10 +133,11 @@ export function PairLinkModal({ visible, onClose, onCancel, onSaved, targetServe
         },
         { serverId: parsedOffer.serverId },
       );
+      await client.close().catch(() => undefined);
 
       const isNewHost = !daemons.some((daemon) => daemon.serverId === parsedOffer.serverId);
       const profile = await upsertDaemonFromOfferUrl(raw);
-      onSaved?.({ profile, serverId: parsedOffer.serverId, hostname: probeResult.hostname, isNewHost });
+      onSaved?.({ profile, serverId: parsedOffer.serverId, hostname, isNewHost });
       handleClose();
     } catch (error) {
       const message = error instanceof Error ? error.message : "Unable to pair host";
@@ -149,7 +152,7 @@ export function PairLinkModal({ visible, onClose, onCancel, onSaved, targetServe
 
   return (
     <AdaptiveModalSheet title="Paste pairing link" visible={visible} onClose={handleClose} testID="pair-link-modal">
-      <Text style={styles.helper}>Paste the daemon’s pairing link.</Text>
+      <Text style={styles.helper}>Paste the pairing link from your server.</Text>
 
       <View style={styles.field}>
         <Text style={styles.label}>Pairing link</Text>

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

@@ -0,0 +1,377 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  Modal,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+  Platform,
+} from "react-native";
+import { Folder } from "lucide-react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useQuery } from "@tanstack/react-query";
+import { router, usePathname } from "expo-router";
+import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
+import {
+  normalizeWorkspaceDescriptor,
+  useSessionStore,
+} from "@/stores/session-store";
+import { useHosts, useHostRuntimeSession } from "@/runtime/host-runtime";
+import { useToast } from "@/contexts/toast-context";
+import { parseServerIdFromPathname } from "@/utils/host-routes";
+import { buildHostWorkspaceRouteWithOpenIntent } from "@/utils/host-routes";
+import { buildWorkingDirectorySuggestions } from "@/utils/working-directory-suggestions";
+
+export function ProjectPickerModal() {
+  const { theme } = useUnistyles();
+  const toast = useToast();
+  const pathname = usePathname();
+  const daemons = useHosts();
+
+  const open = useKeyboardShortcutsStore((s) => s.projectPickerOpen);
+  const setOpen = useKeyboardShortcutsStore((s) => s.setProjectPickerOpen);
+
+  const serverId = useMemo(() => {
+    const fromPath = parseServerIdFromPathname(pathname);
+    if (fromPath) return fromPath;
+    return daemons[0]?.serverId ?? null;
+  }, [pathname, daemons]);
+
+  const { client, isConnected } = useHostRuntimeSession(serverId ?? "");
+  const workspaces = useSessionStore((state) =>
+    serverId ? state.sessions[serverId]?.workspaces : undefined
+  );
+  const mergeWorkspaces = useSessionStore((state) => state.mergeWorkspaces);
+  const setHasHydratedWorkspaces = useSessionStore(
+    (state) => state.setHasHydratedWorkspaces
+  );
+
+  const inputRef = useRef<TextInput>(null);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const recommendedPaths = useMemo(() => {
+    if (!workspaces) return [];
+    return Array.from(workspaces.values()).map(
+      (workspace) => workspace.projectRootPath || workspace.id
+    );
+  }, [workspaces]);
+
+  const directorySuggestionsQuery = useQuery({
+    queryKey: ["project-picker-directory-suggestions", serverId, query],
+    queryFn: async () => {
+      if (!client) return [];
+      const result = await client.getDirectorySuggestions({
+        query,
+        includeDirectories: true,
+        includeFiles: false,
+        limit: 30,
+      });
+      return (
+        result.entries?.flatMap((entry) =>
+          entry.kind === "directory" ? [entry.path] : []
+        ) ?? []
+      );
+    },
+    enabled: Boolean(client) && isConnected && open,
+    staleTime: 15_000,
+    retry: false,
+  });
+
+  const options = useMemo(
+    () =>
+      buildWorkingDirectorySuggestions({
+        recommendedPaths,
+        serverPaths: directorySuggestionsQuery.data ?? [],
+        query,
+      }),
+    [query, directorySuggestionsQuery.data, recommendedPaths]
+  );
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  const handleSelectPath = useCallback(
+    async (path: string) => {
+      const trimmed = path.trim();
+      if (!trimmed || !client || !serverId) return;
+
+      setIsSubmitting(true);
+      try {
+        const payload = await client.openProject(trimmed);
+        if (payload.error || !payload.workspace) {
+          throw new Error(payload.error || "Failed to open project");
+        }
+        mergeWorkspaces(serverId, [
+          normalizeWorkspaceDescriptor(payload.workspace),
+        ]);
+        setHasHydratedWorkspaces(serverId, true);
+        setOpen(false);
+        router.replace(
+          buildHostWorkspaceRouteWithOpenIntent(
+            serverId,
+            payload.workspace.id,
+            { kind: "draft", draftId: "new" }
+          ) as any
+        );
+      } catch (error) {
+        toast.error(
+          error instanceof Error ? error.message : "Failed to open project"
+        );
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [client, mergeWorkspaces, serverId, setHasHydratedWorkspaces, setOpen, toast]
+  );
+
+  const handleSubmitCustom = useCallback(() => {
+    const trimmed = query.trim();
+    if (!trimmed) return;
+    void handleSelectPath(trimmed);
+  }, [handleSelectPath, query]);
+
+  // Reset state when opening/closing
+  useEffect(() => {
+    if (open) {
+      setQuery("");
+      setActiveIndex(0);
+      const id = setTimeout(() => inputRef.current?.focus(), 0);
+      return () => clearTimeout(id);
+    }
+  }, [open]);
+
+  // Clamp active index
+  useEffect(() => {
+    if (!open) return;
+    if (activeIndex >= options.length) {
+      setActiveIndex(options.length > 0 ? options.length - 1 : 0);
+    }
+  }, [activeIndex, options.length, open]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    if (!open || Platform.OS !== "web") return;
+
+    function handler(event: KeyboardEvent) {
+      const key = event.key;
+      if (
+        key !== "ArrowDown" &&
+        key !== "ArrowUp" &&
+        key !== "Enter" &&
+        key !== "Escape"
+      )
+        return;
+
+      if (key === "Escape") {
+        event.preventDefault();
+        setOpen(false);
+        return;
+      }
+
+      if (key === "Enter") {
+        event.preventDefault();
+        if (options.length > 0 && activeIndex < options.length) {
+          void handleSelectPath(options[activeIndex]!);
+        } else if (query.trim()) {
+          handleSubmitCustom();
+        }
+        return;
+      }
+
+      if (key === "ArrowDown" || key === "ArrowUp") {
+        if (options.length === 0) return;
+        event.preventDefault();
+        setActiveIndex((current) => {
+          const delta = key === "ArrowDown" ? 1 : -1;
+          const next = current + delta;
+          if (next < 0) return options.length - 1;
+          if (next >= options.length) return 0;
+          return next;
+        });
+      }
+    }
+
+    window.addEventListener("keydown", handler, true);
+    return () => window.removeEventListener("keydown", handler, true);
+  }, [activeIndex, handleSelectPath, handleSubmitCustom, open, options, query, setOpen]);
+
+  if (!serverId) return null;
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="fade"
+      onRequestClose={handleClose}
+    >
+      <View style={styles.overlay}>
+        <Pressable style={styles.backdrop} onPress={handleClose} />
+
+        <View
+          style={[
+            styles.panel,
+            {
+              borderColor: theme.colors.border,
+              backgroundColor: theme.colors.surface0,
+            },
+          ]}
+        >
+          <View
+            style={[styles.header, { borderBottomColor: theme.colors.border }]}
+          >
+            <TextInput
+              ref={inputRef}
+              value={query}
+              onChangeText={(text) => {
+                setQuery(text);
+                setActiveIndex(0);
+              }}
+              placeholder="Type a directory path..."
+              placeholderTextColor={theme.colors.foregroundMuted}
+              style={[styles.input, { color: theme.colors.foreground }]}
+              autoCapitalize="none"
+              autoCorrect={false}
+              autoFocus
+              editable={!isSubmitting}
+            />
+          </View>
+
+          <ScrollView
+            style={styles.results}
+            contentContainerStyle={styles.resultsContent}
+            keyboardShouldPersistTaps="always"
+            showsVerticalScrollIndicator={false}
+          >
+            {isSubmitting ? (
+              <Text
+                style={[
+                  styles.emptyText,
+                  { color: theme.colors.foregroundMuted },
+                ]}
+              >
+                Opening project...
+              </Text>
+            ) : options.length === 0 && !query.trim() ? (
+              <Text
+                style={[
+                  styles.emptyText,
+                  { color: theme.colors.foregroundMuted },
+                ]}
+              >
+                Start typing a path
+              </Text>
+            ) : (
+              <>
+                {options.map((path, index) => {
+                  const active = index === activeIndex;
+                  return (
+                    <Pressable
+                      key={path}
+                      style={({ hovered, pressed }) => [
+                        styles.row,
+                        (hovered || pressed || active) && {
+                          backgroundColor: theme.colors.surface1,
+                        },
+                      ]}
+                      onPress={() => void handleSelectPath(path)}
+                    >
+                      <View style={styles.rowContent}>
+                        <View style={styles.iconSlot}>
+                          <Folder
+                            size={16}
+                            strokeWidth={2.2}
+                            color={theme.colors.foregroundMuted}
+                          />
+                        </View>
+                        <Text
+                          style={[
+                            styles.rowText,
+                            { color: theme.colors.foreground },
+                          ]}
+                          numberOfLines={1}
+                        >
+                          {path}
+                        </Text>
+                      </View>
+                    </Pressable>
+                  );
+                })}
+              </>
+            )}
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  overlay: {
+    flex: 1,
+    justifyContent: "flex-start",
+    alignItems: "center",
+    paddingTop: theme.spacing[12],
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+  },
+  panel: {
+    width: 640,
+    maxWidth: "92%",
+    maxHeight: "80%",
+    borderWidth: 1,
+    borderRadius: theme.borderRadius.lg,
+    overflow: "hidden",
+    shadowColor: "#000",
+    shadowOpacity: 0.4,
+    shadowRadius: 24,
+    shadowOffset: { width: 0, height: 12 },
+  },
+  header: {
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[3],
+    borderBottomWidth: 1,
+  },
+  input: {
+    fontSize: theme.fontSize.lg,
+    paddingVertical: theme.spacing[1],
+    outlineStyle: "none",
+  } as any,
+  results: {
+    flexGrow: 0,
+  },
+  resultsContent: {
+    paddingVertical: theme.spacing[2],
+  },
+  row: {
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[2],
+  },
+  rowContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[3],
+  },
+  iconSlot: {
+    width: 16,
+    height: 20,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  rowText: {
+    fontSize: theme.fontSize.base,
+    fontWeight: "400",
+    lineHeight: 20,
+    flexShrink: 1,
+  },
+  emptyText: {
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[4],
+    fontSize: theme.fontSize.base,
+  },
+}));

packages/app/src/components/stream-strategy-native.tsx

@@ -0,0 +1,364 @@
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  FlatList,
+  Keyboard,
+  type LayoutChangeEvent,
+  type ListRenderItemInfo,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+} from "react-native";
+import type { StreamItem } from "@/types/stream";
+import { useBottomAnchorController } from "./use-bottom-anchor-controller";
+import type {
+  StreamRenderInput,
+  StreamStrategy,
+  StreamViewportHandle,
+} from "./stream-strategy";
+import {
+  createStreamStrategy,
+  isNearBottomForStreamRenderStrategy,
+  resolveBottomAnchorTransportBehavior,
+} from "./stream-strategy";
+
+const DEFAULT_MAINTAIN_VISIBLE_CONTENT_POSITION = Object.freeze({
+  minIndexForVisible: 0,
+  autoscrollToTopThreshold: 0,
+});
+
+function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrategy }) {
+  const {
+    agentId,
+    segments,
+    boundary,
+    renderers,
+    listEmptyComponent,
+    viewportRef,
+    routeBottomAnchorRequest,
+    isAuthoritativeHistoryReady,
+    onNearBottomChange,
+    scrollEnabled,
+    listStyle,
+    baseListContentContainerStyle,
+    strategy,
+  } = props;
+  const flatListRef = useRef<FlatList<StreamItem>>(null);
+  const streamViewportMetricsRef = useRef({
+    containerKey: "native-virtualized",
+    contentHeight: 0,
+    viewportWidth: 0,
+    viewportHeight: 0,
+    offsetY: 0,
+    viewportMeasuredForKey: null as string | null,
+    contentMeasuredForKey: null as string | null,
+  });
+  const scrollOffsetYRef = useRef(0);
+  const programmaticScrollEventBudgetRef = useRef(0);
+  const [isNativeViewportSettling, setIsNativeViewportSettling] = useState(false);
+  const nativeViewportSettlingFrameIdRef = useRef<number | null>(null);
+
+  const historyRows = useMemo(() => {
+    if (segments.historyVirtualized.length === 0) {
+      return segments.historyMounted;
+    }
+    return [...segments.historyVirtualized, ...segments.historyMounted];
+  }, [segments.historyMounted, segments.historyVirtualized]);
+
+  const clearNativeViewportSettling = useCallback(() => {
+    if (nativeViewportSettlingFrameIdRef.current !== null) {
+      cancelAnimationFrame(nativeViewportSettlingFrameIdRef.current);
+      nativeViewportSettlingFrameIdRef.current = null;
+    }
+  }, []);
+
+  const markNativeViewportSettling = useCallback(() => {
+    clearNativeViewportSettling();
+    setIsNativeViewportSettling(true);
+    let remainingFrames = 4;
+    const tick = () => {
+      if (remainingFrames <= 0) {
+        nativeViewportSettlingFrameIdRef.current = null;
+        setIsNativeViewportSettling(false);
+        return;
+      }
+      remainingFrames -= 1;
+      nativeViewportSettlingFrameIdRef.current = requestAnimationFrame(tick);
+    };
+    nativeViewportSettlingFrameIdRef.current = requestAnimationFrame(tick);
+  }, [clearNativeViewportSettling]);
+
+  const bottomAnchorTransportBehavior = useMemo(
+    () =>
+      resolveBottomAnchorTransportBehavior({
+        strategy,
+        isViewportSettling: isNativeViewportSettling,
+      }),
+    [isNativeViewportSettling, strategy]
+  );
+
+  const scrollToBottom = useCallback(
+    (animated: boolean) => {
+      programmaticScrollEventBudgetRef.current = 3;
+      flatListRef.current?.scrollToOffset({
+        offset: 0,
+        animated,
+      });
+      scrollOffsetYRef.current = 0;
+      streamViewportMetricsRef.current = {
+        ...streamViewportMetricsRef.current,
+        offsetY: 0,
+      };
+      onNearBottomChange(true);
+    },
+    [onNearBottomChange]
+  );
+
+  const bottomAnchorController = useBottomAnchorController({
+    agentId,
+    routeRequest: routeBottomAnchorRequest,
+    isAuthoritativeHistoryReady,
+    renderStrategy: "inverted-stream",
+    transportBehavior: bottomAnchorTransportBehavior,
+    getMeasurementState: () => streamViewportMetricsRef.current,
+    isNearBottom: () => {
+      const metrics = streamViewportMetricsRef.current;
+      return isNearBottomForStreamRenderStrategy({
+        strategy,
+        offsetY: metrics.offsetY,
+        threshold: 32,
+        contentHeight: metrics.contentHeight,
+        viewportHeight: metrics.viewportHeight,
+      });
+    },
+    scrollToBottom,
+  });
+
+  useEffect(() => {
+    streamViewportMetricsRef.current = {
+      containerKey: "native-virtualized",
+      contentHeight: 0,
+      viewportWidth: 0,
+      viewportHeight: 0,
+      offsetY: 0,
+      viewportMeasuredForKey: null,
+      contentMeasuredForKey: null,
+    };
+    scrollOffsetYRef.current = 0;
+    clearNativeViewportSettling();
+    setIsNativeViewportSettling(false);
+  }, [agentId, clearNativeViewportSettling]);
+
+  useEffect(() => {
+    const keyboardEvents = [
+      "keyboardWillShow",
+      "keyboardWillHide",
+      "keyboardDidShow",
+      "keyboardDidHide",
+      "keyboardWillChangeFrame",
+      "keyboardDidChangeFrame",
+    ] as const;
+    const subscriptions = keyboardEvents.map((eventName) =>
+      Keyboard.addListener(eventName, () => {
+        markNativeViewportSettling();
+      })
+    );
+    return () => {
+      for (const subscription of subscriptions) {
+        subscription.remove();
+      }
+      clearNativeViewportSettling();
+    };
+  }, [clearNativeViewportSettling, markNativeViewportSettling]);
+
+  useEffect(() => {
+    bottomAnchorController.prepareForStickyContentChange();
+  }, [bottomAnchorController, historyRows, segments.liveHead]);
+
+  useEffect(() => {
+    const handle: StreamViewportHandle = {
+      scrollToBottom: (reason = "jump-to-bottom") => {
+        bottomAnchorController.requestLocalAnchor({
+          agentId,
+          reason,
+        });
+      },
+      prepareForViewportChange: () => {
+        bottomAnchorController.prepareForStickyViewportChange();
+        markNativeViewportSettling();
+      },
+    };
+    viewportRef.current = handle;
+    return () => {
+      if (viewportRef.current === handle) {
+        viewportRef.current = null;
+      }
+    };
+  }, [agentId, bottomAnchorController, markNativeViewportSettling, viewportRef]);
+
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+      const previousOffsetY = scrollOffsetYRef.current;
+      scrollOffsetYRef.current = contentOffset.y;
+      streamViewportMetricsRef.current = {
+        contentHeight: Math.max(0, contentSize.height),
+        viewportWidth: Math.max(0, layoutMeasurement.width),
+        viewportHeight: Math.max(0, layoutMeasurement.height),
+        containerKey: "native-virtualized",
+        offsetY: contentOffset.y,
+        viewportMeasuredForKey: "native-virtualized",
+        contentMeasuredForKey: "native-virtualized",
+      };
+
+      const nearBottom = isNearBottomForStreamRenderStrategy({
+        strategy,
+        offsetY: contentOffset.y,
+        threshold: 32,
+        contentHeight: streamViewportMetricsRef.current.contentHeight,
+        viewportHeight: streamViewportMetricsRef.current.viewportHeight,
+      });
+      onNearBottomChange(nearBottom);
+
+      if (programmaticScrollEventBudgetRef.current > 0 && contentOffset.y <= 8) {
+        programmaticScrollEventBudgetRef.current -= 1;
+      } else {
+        programmaticScrollEventBudgetRef.current = 0;
+        bottomAnchorController.handleScrollNearBottomChange({
+          nextIsNearBottom: nearBottom,
+          scrollDelta: contentOffset.y - previousOffsetY,
+        });
+      }
+    },
+    [bottomAnchorController, onNearBottomChange, strategy]
+  );
+
+  const handleListLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const previousViewportWidth = streamViewportMetricsRef.current.viewportWidth;
+      const previousViewportHeight = streamViewportMetricsRef.current.viewportHeight;
+      const viewportWidth = Math.max(0, event.nativeEvent.layout.width);
+      const viewportHeight = Math.max(0, event.nativeEvent.layout.height);
+      const viewportChanged =
+        (previousViewportWidth > 0 && previousViewportWidth !== viewportWidth) ||
+        (previousViewportHeight > 0 && previousViewportHeight !== viewportHeight);
+      streamViewportMetricsRef.current = {
+        ...streamViewportMetricsRef.current,
+        containerKey: "native-virtualized",
+        viewportWidth,
+        viewportHeight,
+        viewportMeasuredForKey: "native-virtualized",
+      };
+      if (viewportChanged) {
+        markNativeViewportSettling();
+      }
+      bottomAnchorController.handleViewportMetricsChange({
+        previousViewportWidth,
+        viewportWidth,
+        previousViewportHeight,
+        viewportHeight,
+      });
+    },
+    [bottomAnchorController, markNativeViewportSettling]
+  );
+
+  const handleContentSizeChange = useCallback(
+    (_width: number, height: number) => {
+      const previousContentHeight = streamViewportMetricsRef.current.contentHeight;
+      const nextContentHeight = Math.max(0, height);
+      streamViewportMetricsRef.current = {
+        ...streamViewportMetricsRef.current,
+        containerKey: "native-virtualized",
+        contentHeight: nextContentHeight,
+        contentMeasuredForKey: "native-virtualized",
+      };
+      bottomAnchorController.handleContentSizeChange({
+        previousContentHeight,
+        contentHeight: nextContentHeight,
+      });
+    },
+    [bottomAnchorController]
+  );
+
+  const renderItem = useCallback(
+    ({ item, index }: ListRenderItemInfo<StreamItem>) => {
+      const rendered = renderers.renderHistoryMountedRow(item, index, historyRows);
+      return rendered ? <Fragment>{rendered}</Fragment> : null;
+    },
+    [historyRows, renderers]
+  );
+
+  const liveHeaderContent = useMemo(() => {
+    const liveHeadRows = segments.liveHead.map((item, index) => (
+      <Fragment key={item.id}>
+        {renderers.renderLiveHeadRow(item, index, segments.liveHead)}
+      </Fragment>
+    ));
+    const liveAuxiliary = renderers.renderLiveAuxiliary();
+    if (
+      liveHeadRows.length === 0 &&
+      !liveAuxiliary &&
+      !boundary.hasMountedHistory &&
+      !boundary.hasVirtualizedHistory
+    ) {
+      return listEmptyComponent ? <Fragment>{listEmptyComponent}</Fragment> : null;
+    }
+    return (
+      <Fragment>
+        {liveHeadRows}
+        {liveAuxiliary}
+      </Fragment>
+    );
+  }, [boundary, listEmptyComponent, renderers, segments.liveHead]);
+
+  return (
+    <FlatList
+      ref={flatListRef}
+      data={historyRows}
+      renderItem={renderItem}
+      keyExtractor={(item) => item.id}
+      testID="agent-chat-scroll"
+      nativeID="agent-chat-scroll-native-virtualized"
+      ListHeaderComponent={liveHeaderContent ? () => liveHeaderContent : undefined}
+      contentContainerStyle={baseListContentContainerStyle}
+      style={listStyle}
+      onLayout={handleListLayout}
+      onScroll={handleScroll}
+      scrollEventThrottle={16}
+      onContentSizeChange={handleContentSizeChange}
+      maintainVisibleContentPosition={DEFAULT_MAINTAIN_VISIBLE_CONTENT_POSITION}
+      initialNumToRender={12}
+      windowSize={10}
+      scrollEnabled={scrollEnabled}
+      showsVerticalScrollIndicator
+      inverted
+    />
+  );
+}
+
+export function createNativeStreamStrategy(): StreamStrategy {
+  const strategy = createStreamStrategy({
+    render: (renderInput) => (
+      <NativeStreamViewport
+        {...renderInput}
+        strategy={strategy}
+      />
+    ),
+    orderTailReverse: true,
+    orderHeadReverse: true,
+    assistantTurnTraversalStep: 1,
+    edgeSlot: "header",
+    flatListInverted: true,
+    overlayScrollbarInverted: true,
+    maintainVisibleContentPosition: DEFAULT_MAINTAIN_VISIBLE_CONTENT_POSITION,
+    bottomAnchorTransportBehavior: {
+      verificationDelayFrames: 2,
+      verificationRetryMode: "recheck",
+    },
+    disableParentScrollOnInlineDetailsExpansion: false,
+    anchorBottomOnContentSizeChange: false,
+    animateManualScrollToBottom: true,
+    useVirtualizedList: true,
+    isNearBottom: (input) => input.offsetY <= input.threshold,
+    getBottomOffset: () => 0,
+  });
+  return strategy;
+}

packages/app/src/components/stream-strategy-web.tsx

@@ -0,0 +1,812 @@
+import {
+  Fragment,
+  type CSSProperties,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { measureElement as measureVirtualElement, useVirtualizer } from '@tanstack/react-virtual'
+import { estimateStreamItemHeight } from './agent-stream-web-virtualization'
+import type { StreamRenderInput, StreamStrategy, StreamViewportHandle } from './stream-strategy'
+import { createStreamStrategy } from './stream-strategy'
+
+type CreateWebStreamStrategyInput = {
+  isMobileBreakpoint: boolean
+}
+
+type ScrollBehaviorLike = 'auto' | 'smooth'
+
+const WEB_BOTTOM_SETTLE_TIMEOUT_MS = 200
+const USER_SCROLL_DELTA_EPSILON = 1
+const AUTO_SCROLL_BOTTOM_THRESHOLD_PX = 64
+const AUTO_SCROLL_RESUME_THRESHOLD_PX = 1
+const WEB_STREAM_SCROLLBAR_STYLE_ID = 'web-stream-viewport-scrollbar-style'
+const IS_DEV = Boolean((globalThis as { __DEV__?: boolean }).__DEV__)
+const WEB_STREAM_SCROLLBAR_STYLE = `
+  #agent-chat-scroll-web-dom-scroll,
+  #agent-chat-scroll-web-dom-virtualized {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  #agent-chat-scroll-web-dom-scroll::-webkit-scrollbar,
+  #agent-chat-scroll-web-dom-virtualized::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+`
+
+function logWebStickyBottom(event: string, details: Record<string, unknown>): void {
+  if (!IS_DEV) {
+    return
+  }
+  console.log('[WebStickyBottom]', event, details)
+}
+
+function getDebugNow(): number | null {
+  if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
+    return Number(performance.now().toFixed(3))
+  }
+  return null
+}
+
+function isScrollContainerNearBottom(
+  scrollContainer: Pick<HTMLElement, 'scrollTop' | 'clientHeight' | 'scrollHeight'>,
+  thresholdPx = AUTO_SCROLL_BOTTOM_THRESHOLD_PX
+): boolean {
+  const threshold = Number.isFinite(thresholdPx)
+    ? Math.max(0, thresholdPx)
+    : AUTO_SCROLL_BOTTOM_THRESHOLD_PX
+  const { scrollTop, clientHeight, scrollHeight } = scrollContainer
+  if (![scrollTop, clientHeight, scrollHeight].every(Number.isFinite)) {
+    return true
+  }
+  const distanceFromBottom = scrollHeight - clientHeight - scrollTop
+  return distanceFromBottom <= threshold
+}
+
+function isScrollContainerAtBottom(
+  scrollContainer: Pick<HTMLElement, 'scrollTop' | 'clientHeight' | 'scrollHeight'>
+): boolean {
+  return isScrollContainerNearBottom(scrollContainer, AUTO_SCROLL_RESUME_THRESHOLD_PX)
+}
+
+function scrollElementToBottom(
+  scrollContainer: HTMLElement,
+  behavior: ScrollBehaviorLike = 'auto'
+): void {
+  scrollContainer.scrollTo({
+    top: scrollContainer.scrollHeight,
+    behavior,
+  })
+}
+
+function syncNearBottom(
+  scrollContainer: HTMLElement | null,
+  onNearBottomChange: (value: boolean) => void
+): boolean {
+  if (!scrollContainer) {
+    onNearBottomChange(true)
+    return true
+  }
+  const nextValue = isScrollContainerNearBottom(scrollContainer)
+  onNearBottomChange(nextValue)
+  return nextValue
+}
+
+function getScrollContainerDistanceFromBottom(
+  scrollContainer: Pick<HTMLElement, 'scrollTop' | 'clientHeight' | 'scrollHeight'>
+): number {
+  return scrollContainer.scrollHeight - scrollContainer.clientHeight - scrollContainer.scrollTop
+}
+
+function isScrollContainerOverscrolledPastBottom(
+  scrollContainer: Pick<HTMLElement, 'scrollTop' | 'clientHeight' | 'scrollHeight'>
+): boolean {
+  return getScrollContainerDistanceFromBottom(scrollContainer) < 0
+}
+
+function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: boolean }) {
+  const {
+    segments,
+    boundary,
+    renderers,
+    listEmptyComponent,
+    viewportRef,
+    routeBottomAnchorRequest,
+    isAuthoritativeHistoryReady,
+    onNearBottomChange,
+    scrollEnabled,
+    isMobileBreakpoint,
+  } = props
+  const { WebDesktopScrollbarOverlay, useWebDesktopScrollbarMetrics } =
+    require('./web-desktop-scrollbar') as typeof import('./web-desktop-scrollbar')
+  const scrollContainerRef = useRef<HTMLElement | null>(null)
+  const contentRef = useRef<HTMLElement | null>(null)
+  const [followOutput, setFollowOutputr] = useState(true)
+  const setFollowOutput = (value: boolean) => {
+    setFollowOutputr(value)
+    return value
+  }
+  const followOutputRef = useRef(followOutput)
+  const lastKnownScrollTopRef = useRef(0)
+  const lastLoggedMetricsRef = useRef<{
+    scrollTop: number
+    clientWidth: number
+    clientHeight: number
+    scrollWidth: number
+    scrollHeight: number
+  } | null>(null)
+  const pendingUserScrollUpIntentRef = useRef(false)
+  const isPointerScrollActiveRef = useRef(false)
+  const lastTouchClientYRef = useRef<number | null>(null)
+  const pendingAutoScrollFrameRef = useRef<number | null>(null)
+  const pendingAutoScrollTimeoutRef = useRef<number | null>(null)
+  const streamScrollbarMetrics = useWebDesktopScrollbarMetrics()
+  const showDesktopWebScrollbar = !isMobileBreakpoint
+  const shouldUseVirtualizer = segments.historyVirtualized.length > 0
+  const {
+    renderHistoryVirtualizedRow,
+    renderHistoryMountedRow,
+    renderLiveHeadRow,
+    renderLiveAuxiliary,
+  } = renderers
+
+  followOutputRef.current = followOutput
+
+  const activationKey = routeBottomAnchorRequest?.requestKey ?? props.agentId
+  const isActivationReady = routeBottomAnchorRequest === null || isAuthoritativeHistoryReady
+
+  const rowVirtualizer = useVirtualizer({
+    count: segments.historyVirtualized.length,
+    getScrollElement: () => scrollContainerRef.current,
+    getItemKey: (index: number) => segments.historyVirtualized[index]?.id ?? index,
+    estimateSize: (index: number) => {
+      const row = segments.historyVirtualized[index]
+      return row ? estimateStreamItemHeight(row) : 120
+    },
+    measureElement: measureVirtualElement,
+    useAnimationFrameWithResizeObserver: true,
+    overscan: 8,
+  })
+  useEffect(() => {
+    rowVirtualizer.shouldAdjustScrollPositionOnItemSizeChange = (_item, _delta, instance) => {
+      const viewportHeight = instance.scrollRect?.height ?? 0
+      const scrollOffset = instance.scrollOffset ?? 0
+      const remainingDistance = instance.getTotalSize() - (scrollOffset + viewportHeight)
+      logWebStickyBottom('virtualizer_item_size_change', {
+        agentId: props.agentId,
+        delta: _delta,
+        itemIndex: _item.index,
+        itemStart: _item.start,
+        itemSize: _item.size,
+        viewportHeight,
+        scrollOffset,
+        totalSize: instance.getTotalSize(),
+        remainingDistance,
+      })
+      return remainingDistance > AUTO_SCROLL_BOTTOM_THRESHOLD_PX
+    }
+    return () => {
+      rowVirtualizer.shouldAdjustScrollPositionOnItemSizeChange = undefined
+    }
+  }, [rowVirtualizer])
+  const virtualRows = rowVirtualizer.getVirtualItems()
+  const virtualTotalSize = rowVirtualizer.getTotalSize()
+
+  const cancelPendingStickToBottom = useCallback(() => {
+    const pendingFrame = pendingAutoScrollFrameRef.current
+    if (pendingFrame !== null) {
+      pendingAutoScrollFrameRef.current = null
+      window.cancelAnimationFrame(pendingFrame)
+    }
+    const pendingTimeout = pendingAutoScrollTimeoutRef.current
+    if (pendingTimeout !== null) {
+      pendingAutoScrollTimeoutRef.current = null
+      window.clearTimeout(pendingTimeout)
+    }
+  }, [])
+
+  const scrollMessagesToBottom = useCallback(
+    (behavior: ScrollBehaviorLike = 'auto') => {
+      const scrollContainer = scrollContainerRef.current
+      if (!scrollContainer) {
+        return
+      }
+      if (isScrollContainerOverscrolledPastBottom(scrollContainer)) {
+        return
+      }
+      logWebStickyBottom('viewport_scroll_to_bottom', {
+        agentId: props.agentId,
+        behavior,
+        followOutput: followOutputRef.current,
+        scrollTop: scrollContainer.scrollTop,
+        clientWidth: scrollContainer.clientWidth,
+        clientHeight: scrollContainer.clientHeight,
+        scrollWidth: scrollContainer.scrollWidth,
+        scrollHeight: scrollContainer.scrollHeight,
+      })
+      scrollElementToBottom(scrollContainer, behavior)
+      lastKnownScrollTopRef.current = scrollContainer.scrollTop
+      syncNearBottom(scrollContainer, onNearBottomChange)
+    },
+    [onNearBottomChange, props.agentId]
+  )
+
+  const scheduleStickToBottom = useCallback(
+    () => {
+      const scrollContainer = scrollContainerRef.current
+      if (scrollContainer && isScrollContainerOverscrolledPastBottom(scrollContainer)) {
+        return
+      }
+      if (pendingAutoScrollFrameRef.current !== null) {
+        return
+      }
+      logWebStickyBottom('viewport_schedule_stick_to_bottom', {
+        agentId: props.agentId,
+        followOutput: followOutputRef.current,
+        scrollTop: scrollContainer?.scrollTop ?? null,
+        clientWidth: scrollContainer?.clientWidth ?? null,
+        clientHeight: scrollContainer?.clientHeight ?? null,
+        scrollWidth: scrollContainer?.scrollWidth ?? null,
+        scrollHeight: scrollContainer?.scrollHeight ?? null,
+      })
+      pendingAutoScrollFrameRef.current = window.requestAnimationFrame(() => {
+        pendingAutoScrollFrameRef.current = null
+        if (!followOutputRef.current) {
+          return
+        }
+        scrollMessagesToBottom('auto')
+      })
+    },
+    [props.agentId, scrollMessagesToBottom]
+  )
+
+  const forceStickToBottom = useCallback(() => {
+    cancelPendingStickToBottom()
+    scrollMessagesToBottom('auto')
+    scheduleStickToBottom()
+  }, [cancelPendingStickToBottom, scheduleStickToBottom, scrollMessagesToBottom])
+
+  const updateScrollMetrics = useCallback(() => {
+    const scrollContainer = scrollContainerRef.current
+    if (!scrollContainer) {
+      onNearBottomChange(true)
+      return
+    }
+    streamScrollbarMetrics.onContentSizeChange(
+      scrollContainer.clientWidth,
+      scrollContainer.scrollHeight
+    )
+    streamScrollbarMetrics.onLayout({
+      nativeEvent: {
+        layout: {
+          width: scrollContainer.clientWidth,
+          height: scrollContainer.clientHeight,
+          x: 0,
+          y: 0,
+        },
+      },
+    } as never)
+    streamScrollbarMetrics.onScroll({
+      nativeEvent: {
+        contentOffset: { x: 0, y: scrollContainer.scrollTop },
+        contentSize: {
+          width: scrollContainer.clientWidth,
+          height: scrollContainer.scrollHeight,
+        },
+        layoutMeasurement: {
+          width: scrollContainer.clientWidth,
+          height: scrollContainer.clientHeight,
+        },
+      },
+    } as never)
+    syncNearBottom(scrollContainer, onNearBottomChange)
+    const currentMetrics = {
+      scrollTop: scrollContainer.scrollTop,
+      clientWidth: scrollContainer.clientWidth,
+      clientHeight: scrollContainer.clientHeight,
+      scrollWidth: scrollContainer.scrollWidth,
+      scrollHeight: scrollContainer.scrollHeight,
+    }
+    const previousMetrics = lastLoggedMetricsRef.current
+    const shouldLog =
+      !previousMetrics ||
+      previousMetrics.scrollTop !== currentMetrics.scrollTop ||
+      previousMetrics.clientWidth !== currentMetrics.clientWidth ||
+      previousMetrics.clientHeight !== currentMetrics.clientHeight ||
+      previousMetrics.scrollWidth !== currentMetrics.scrollWidth ||
+      previousMetrics.scrollHeight !== currentMetrics.scrollHeight
+    if (shouldLog) {
+      lastLoggedMetricsRef.current = currentMetrics
+      logWebStickyBottom('viewport_metrics_updated', {
+        agentId: props.agentId,
+        followOutput: followOutputRef.current,
+        distanceFromBottom: getScrollContainerDistanceFromBottom(scrollContainer),
+        ...currentMetrics,
+      })
+    }
+  }, [onNearBottomChange, props.agentId, streamScrollbarMetrics])
+
+  const handleDomScroll = useCallback(() => {
+    const scrollContainer = scrollContainerRef.current
+    if (!scrollContainer) {
+      return
+    }
+
+    const currentScrollTop = scrollContainer.scrollTop
+    const isAtBottom = isScrollContainerAtBottom(scrollContainer)
+    const scrolledUp = currentScrollTop < lastKnownScrollTopRef.current - USER_SCROLL_DELTA_EPSILON
+
+    if (!followOutputRef.current && isAtBottom) {
+      setFollowOutput(true)
+      pendingUserScrollUpIntentRef.current = false
+    } else if (followOutputRef.current && pendingUserScrollUpIntentRef.current) {
+      if (scrolledUp) {
+        cancelPendingStickToBottom()
+        setFollowOutput(false)
+      }
+      pendingUserScrollUpIntentRef.current = false
+    } else if (followOutputRef.current && isPointerScrollActiveRef.current) {
+      if (scrolledUp) {
+        cancelPendingStickToBottom()
+        setFollowOutput(false)
+      }
+    }
+
+    lastKnownScrollTopRef.current = currentScrollTop
+    logWebStickyBottom('viewport_dom_scroll', {
+      agentId: props.agentId,
+      now: getDebugNow(),
+      scrollTop: currentScrollTop,
+      clientHeight: scrollContainer.clientHeight,
+      scrollHeight: scrollContainer.scrollHeight,
+      activeElementTag:
+        typeof document !== 'undefined' ? document.activeElement?.tagName?.toLowerCase() ?? null : null,
+      activeElementRole:
+        typeof document !== 'undefined'
+          ? document.activeElement?.getAttribute?.('aria-label') ?? null
+          : null,
+    })
+    updateScrollMetrics()
+  }, [cancelPendingStickToBottom, updateScrollMetrics])
+
+  useLayoutEffect(() => {
+    if (!isActivationReady) {
+      return
+    }
+    setFollowOutput(true)
+    forceStickToBottom()
+    const timeout = window.setTimeout(() => {
+      if (!followOutputRef.current) {
+        return
+      }
+      const scrollContainer = scrollContainerRef.current
+      if (!scrollContainer) {
+        return
+      }
+      if (isScrollContainerNearBottom(scrollContainer)) {
+        return
+      }
+      scheduleStickToBottom()
+    }, WEB_BOTTOM_SETTLE_TIMEOUT_MS)
+    return () => {
+      window.clearTimeout(timeout)
+    }
+  }, [activationKey, forceStickToBottom, isActivationReady, scheduleStickToBottom])
+
+  useEffect(() => {
+    if (!followOutputRef.current) {
+      return
+    }
+    scheduleStickToBottom()
+  }, [
+    scheduleStickToBottom,
+    segments.historyMounted,
+    segments.historyVirtualized,
+    segments.liveHead,
+  ])
+
+  useEffect(() => {
+    if (!followOutputRef.current || !shouldUseVirtualizer) {
+      return
+    }
+    scheduleStickToBottom()
+  }, [scheduleStickToBottom, shouldUseVirtualizer, virtualTotalSize])
+
+  useEffect(() => {
+    updateScrollMetrics()
+  }, [
+    segments.historyMounted.length,
+    segments.historyVirtualized.length,
+    segments.liveHead.length,
+    updateScrollMetrics,
+    virtualTotalSize,
+  ])
+
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current
+    const contentNode = contentRef.current
+    if (!scrollContainer || typeof ResizeObserver === 'undefined') {
+      return
+    }
+
+    updateScrollMetrics()
+    const observer = new ResizeObserver(() => {
+      logWebStickyBottom('viewport_resize_observed', {
+        agentId: props.agentId,
+        followOutput: followOutputRef.current,
+        scrollTop: scrollContainer.scrollTop,
+        clientWidth: scrollContainer.clientWidth,
+        clientHeight: scrollContainer.clientHeight,
+        scrollWidth: scrollContainer.scrollWidth,
+        scrollHeight: scrollContainer.scrollHeight,
+      })
+      updateScrollMetrics()
+      if (!followOutputRef.current) {
+        return
+      }
+      scheduleStickToBottom()
+    })
+    observer.observe(scrollContainer)
+    if (contentNode) {
+      observer.observe(contentNode)
+    }
+    return () => {
+      observer.disconnect()
+    }
+  }, [props.agentId, scheduleStickToBottom, updateScrollMetrics])
+
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current
+    if (!scrollContainer) {
+      return
+    }
+
+    const originalScrollTo = scrollContainer.scrollTo.bind(scrollContainer)
+    const scrollTopDescriptor =
+      Object.getOwnPropertyDescriptor(Object.getPrototypeOf(scrollContainer), 'scrollTop') ??
+      Object.getOwnPropertyDescriptor(Element.prototype, 'scrollTop')
+    scrollContainer.scrollTo = ((...args: Parameters<HTMLElement['scrollTo']>) => {
+      const firstArg = args[0] as ScrollToOptions | number | undefined
+      const target =
+        typeof firstArg === 'object' && firstArg !== null
+          ? {
+              top: firstArg.top ?? null,
+              left: firstArg.left ?? null,
+              behavior: firstArg.behavior ?? null,
+            }
+          : {
+              top: typeof args[1] === 'number' ? args[1] : null,
+              left: typeof firstArg === 'number' ? firstArg : null,
+              behavior: null,
+            }
+      logWebStickyBottom('viewport_scroll_to_called', {
+        agentId: props.agentId,
+        now: getDebugNow(),
+        currentScrollTop: scrollContainer.scrollTop,
+        target,
+        stack:
+          typeof Error !== 'undefined'
+            ? new Error().stack?.split('\n').slice(1, 6).join('\n') ?? null
+            : null,
+      })
+      return originalScrollTo(...args)
+    }) as typeof scrollContainer.scrollTo
+    if (scrollTopDescriptor?.get && scrollTopDescriptor?.set) {
+      Object.defineProperty(scrollContainer, 'scrollTop', {
+        configurable: true,
+        enumerable: scrollTopDescriptor.enumerable ?? false,
+        get() {
+          return scrollTopDescriptor.get?.call(scrollContainer)
+        },
+        set(value: number) {
+          logWebStickyBottom('viewport_scroll_top_set', {
+            agentId: props.agentId,
+            now: getDebugNow(),
+            currentScrollTop: scrollTopDescriptor.get?.call(scrollContainer) ?? null,
+            nextScrollTop: value,
+            stack:
+              typeof Error !== 'undefined'
+                ? new Error().stack?.split('\n').slice(1, 6).join('\n') ?? null
+                : null,
+          })
+          return scrollTopDescriptor.set?.call(scrollContainer, value)
+        },
+      })
+    }
+
+    const handleWheel = (event: WheelEvent) => {
+      if (event.deltaY < 0) {
+        pendingUserScrollUpIntentRef.current = true
+        cancelPendingStickToBottom()
+      }
+    }
+    const handlePointerDown = () => {
+      isPointerScrollActiveRef.current = true
+    }
+    const handlePointerUp = () => {
+      isPointerScrollActiveRef.current = false
+    }
+    const handleTouchStart = (event: TouchEvent) => {
+      const touch = event.touches[0]
+      if (!touch) {
+        return
+      }
+      lastTouchClientYRef.current = touch.clientY
+    }
+    const handleTouchMove = (event: TouchEvent) => {
+      const touch = event.touches[0]
+      if (!touch) {
+        return
+      }
+      const previousTouchY = lastTouchClientYRef.current
+      if (previousTouchY !== null && touch.clientY > previousTouchY + 1) {
+        pendingUserScrollUpIntentRef.current = true
+        cancelPendingStickToBottom()
+      }
+      lastTouchClientYRef.current = touch.clientY
+    }
+    const handleTouchEnd = () => {
+      lastTouchClientYRef.current = null
+    }
+    const handleSelectionChange = () => {
+      const activeElement =
+        typeof document !== 'undefined' ? (document.activeElement as HTMLTextAreaElement | null) : null
+      logWebStickyBottom('document_selection_changed', {
+        agentId: props.agentId,
+        now: getDebugNow(),
+        activeElementTag: activeElement?.tagName?.toLowerCase() ?? null,
+        activeElementRole: activeElement?.getAttribute?.('aria-label') ?? null,
+        selectionStart:
+          activeElement && typeof activeElement.selectionStart === 'number'
+            ? activeElement.selectionStart
+            : null,
+        selectionEnd:
+          activeElement && typeof activeElement.selectionEnd === 'number'
+            ? activeElement.selectionEnd
+            : null,
+        scrollTop: scrollContainer.scrollTop,
+      })
+    }
+
+    scrollContainer.addEventListener('scroll', handleDomScroll, { passive: true })
+    scrollContainer.addEventListener('wheel', handleWheel, { passive: true })
+    scrollContainer.addEventListener('pointerdown', handlePointerDown, { passive: true })
+    scrollContainer.addEventListener('pointerup', handlePointerUp, { passive: true })
+    scrollContainer.addEventListener('pointercancel', handlePointerUp, { passive: true })
+    scrollContainer.addEventListener('touchstart', handleTouchStart, { passive: true })
+    scrollContainer.addEventListener('touchmove', handleTouchMove, { passive: true })
+    scrollContainer.addEventListener('touchend', handleTouchEnd, { passive: true })
+    scrollContainer.addEventListener('touchcancel', handleTouchEnd, { passive: true })
+    if (typeof document !== 'undefined') {
+      document.addEventListener('selectionchange', handleSelectionChange, { passive: true })
+    }
+
+    return () => {
+      scrollContainer.removeEventListener('scroll', handleDomScroll)
+      scrollContainer.removeEventListener('wheel', handleWheel)
+      scrollContainer.removeEventListener('pointerdown', handlePointerDown)
+      scrollContainer.removeEventListener('pointerup', handlePointerUp)
+      scrollContainer.removeEventListener('pointercancel', handlePointerUp)
+      scrollContainer.removeEventListener('touchstart', handleTouchStart)
+      scrollContainer.removeEventListener('touchmove', handleTouchMove)
+      scrollContainer.removeEventListener('touchend', handleTouchEnd)
+      scrollContainer.removeEventListener('touchcancel', handleTouchEnd)
+      scrollContainer.scrollTo = originalScrollTo
+      if (scrollTopDescriptor) {
+        Reflect.deleteProperty(scrollContainer, 'scrollTop')
+      }
+      if (typeof document !== 'undefined') {
+        document.removeEventListener('selectionchange', handleSelectionChange)
+      }
+    }
+  }, [cancelPendingStickToBottom, handleDomScroll, props.agentId])
+
+  useEffect(() => {
+    const handle: StreamViewportHandle = {
+      scrollToBottom: () => {
+        setFollowOutput(true)
+        cancelPendingStickToBottom()
+        forceStickToBottom()
+      },
+      prepareForViewportChange: () => {
+        if (!followOutputRef.current) {
+          return
+        }
+        const scrollContainer = scrollContainerRef.current
+        logWebStickyBottom('viewport_prepare_for_change', {
+          agentId: props.agentId,
+          followOutput: followOutputRef.current,
+          scrollTop: scrollContainer?.scrollTop ?? null,
+          clientWidth: scrollContainer?.clientWidth ?? null,
+          clientHeight: scrollContainer?.clientHeight ?? null,
+          scrollWidth: scrollContainer?.scrollWidth ?? null,
+          scrollHeight: scrollContainer?.scrollHeight ?? null,
+        })
+        scheduleStickToBottom()
+      },
+    }
+    viewportRef.current = handle
+    return () => {
+      if (viewportRef.current === handle) {
+        viewportRef.current = null
+      }
+      cancelPendingStickToBottom()
+    }
+  }, [cancelPendingStickToBottom, forceStickToBottom, props.agentId, scheduleStickToBottom, viewportRef])
+
+  const contentContainerStyle = useMemo(
+    (): CSSProperties => ({
+      display: 'flex',
+      flexDirection: 'column',
+      minHeight: '100%',
+      paddingTop: 16,
+      paddingBottom: 16,
+      paddingLeft: isMobileBreakpoint ? 8 : 16,
+      paddingRight: isMobileBreakpoint ? 8 : 16,
+      boxSizing: 'border-box',
+    }),
+    [isMobileBreakpoint]
+  )
+  const scrollContainerStyle = useMemo(
+    (): CSSProperties => ({
+      flex: 1,
+      minHeight: 0,
+      overflowX: 'hidden',
+      overflowY: scrollEnabled ? 'auto' : 'hidden',
+      overscrollBehaviorY: 'contain',
+    }),
+    [scrollEnabled]
+  )
+  const virtualRowsContainerStyle = useMemo(
+    (): CSSProperties => ({
+      position: 'relative',
+      width: '100%',
+      height: virtualTotalSize,
+    }),
+    [virtualTotalSize]
+  )
+  const renderVirtualRowStyle = useCallback(
+    (start: number): CSSProperties => ({
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      transform: `translateY(${start}px)`,
+    }),
+    []
+  )
+  const mountedHistoryRows = useMemo(
+    () =>
+      segments.historyMounted.map((item, index) => (
+        <Fragment key={item.id}>
+          {renderHistoryMountedRow(item, index, segments.historyMounted)}
+        </Fragment>
+      )),
+    [renderHistoryMountedRow, segments.historyMounted]
+  )
+  const liveHeadRows = useMemo(
+    () =>
+      segments.liveHead.map((item, index) => (
+        <Fragment key={item.id}>
+          {renderLiveHeadRow(item, index, segments.liveHead)}
+        </Fragment>
+      )),
+    [renderLiveHeadRow, segments.liveHead]
+  )
+  const liveAuxiliary = useMemo(() => renderLiveAuxiliary(), [renderLiveAuxiliary])
+  const shouldRenderEmpty =
+    !boundary.hasMountedHistory &&
+    !boundary.hasVirtualizedHistory &&
+    !boundary.hasLiveHead &&
+    !liveAuxiliary
+
+  return (
+    <>
+      <style id={WEB_STREAM_SCROLLBAR_STYLE_ID}>{WEB_STREAM_SCROLLBAR_STYLE}</style>
+      <div
+        ref={(node) => {
+          scrollContainerRef.current = node
+        }}
+        data-testid="agent-chat-scroll"
+        id={`agent-chat-scroll-${shouldUseVirtualizer ? 'web-dom-virtualized' : 'web-dom-scroll'}`}
+        style={scrollContainerStyle}
+      >
+        <div
+          ref={(node) => {
+            contentRef.current = node
+          }}
+          style={contentContainerStyle}
+        >
+          {shouldUseVirtualizer ? (
+            <div style={virtualRowsContainerStyle}>
+              {virtualRows.map((virtualRow) => {
+                const item = segments.historyVirtualized[virtualRow.index]
+                if (!item) {
+                  return null
+                }
+                return (
+                  <div
+                    key={virtualRow.key}
+                    data-index={virtualRow.index}
+                    ref={rowVirtualizer.measureElement}
+                    style={renderVirtualRowStyle(virtualRow.start)}
+                  >
+                    {renderHistoryVirtualizedRow(
+                      item,
+                      virtualRow.index,
+                      segments.historyVirtualized
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          ) : null}
+          {mountedHistoryRows}
+          {boundary.hasMountedHistory && boundary.hasLiveHead && boundary.historyToHeadGap > 0 ? (
+            <div style={{ height: boundary.historyToHeadGap, width: '100%' }} />
+          ) : null}
+          {liveHeadRows}
+          {liveAuxiliary}
+          {shouldRenderEmpty ? listEmptyComponent : null}
+        </div>
+      </div>
+      <WebDesktopScrollbarOverlay
+        enabled={showDesktopWebScrollbar}
+        metrics={streamScrollbarMetrics}
+        inverted={false}
+        onScrollToOffset={(nextOffset) => {
+          const scrollContainer = scrollContainerRef.current
+          if (!scrollContainer) {
+            return
+          }
+          scrollContainer.scrollTo({ top: nextOffset, behavior: 'auto' })
+          lastKnownScrollTopRef.current = scrollContainer.scrollTop
+          updateScrollMetrics()
+        }}
+      />
+    </>
+  )
+}
+
+export function createWebStreamStrategy(input: CreateWebStreamStrategyInput): StreamStrategy {
+  return createStreamStrategy({
+    render: (renderInput) => (
+      <WebStreamViewport
+        key={renderInput.agentId}
+        {...renderInput}
+        isMobileBreakpoint={input.isMobileBreakpoint}
+      />
+    ),
+    orderTailReverse: false,
+    orderHeadReverse: false,
+    assistantTurnTraversalStep: -1,
+    edgeSlot: 'footer',
+    flatListInverted: false,
+    overlayScrollbarInverted: false,
+    maintainVisibleContentPosition: undefined,
+    bottomAnchorTransportBehavior: {
+      verificationDelayFrames: 0,
+      verificationRetryMode: 'rescroll',
+    },
+    disableParentScrollOnInlineDetailsExpansion: false,
+    anchorBottomOnContentSizeChange: true,
+    animateManualScrollToBottom: false,
+    useVirtualizedList: false,
+    isNearBottom: (inputMetrics) => {
+      const distanceFromBottom = Math.max(
+        0,
+        inputMetrics.contentHeight - (inputMetrics.offsetY + inputMetrics.viewportHeight)
+      )
+      return distanceFromBottom <= inputMetrics.threshold
+    },
+    getBottomOffset: (metrics) => Math.max(0, metrics.contentHeight - metrics.viewportHeight),
+  })
+}

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

@@ -0,0 +1,309 @@
+import type { ComponentType, ReactElement, ReactNode, RefObject } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+import type { StreamItem } from "@/types/stream";
+import type {
+  StreamHistoryBoundary,
+  StreamRenderSegments,
+} from "./agent-stream-render-model";
+import type {
+  BottomAnchorLocalRequest,
+  BottomAnchorRouteRequest,
+} from "./use-bottom-anchor-controller";
+import { createNativeStreamStrategy } from "./stream-strategy-native";
+import { createWebStreamStrategy } from "./stream-strategy-web";
+
+type EdgeSlot = "header" | "footer";
+type NeighborRelation = "above" | "below";
+type AssistantTurnTraversalStep = -1 | 1;
+
+export type MaintainVisibleContentPositionConfig = Readonly<{
+  minIndexForVisible: number;
+  autoscrollToTopThreshold: number;
+}>;
+
+export type BottomAnchorTransportBehavior = Readonly<{
+  verificationDelayFrames: number;
+  verificationRetryMode: "rescroll" | "recheck";
+}>;
+
+export type StreamViewportMetrics = {
+  contentHeight: number;
+  viewportHeight: number;
+};
+
+export type StreamNearBottomInput = StreamViewportMetrics & {
+  offsetY: number;
+  threshold: number;
+};
+
+export type StreamEdgeSlotProps = {
+  ListHeaderComponent?: ReactElement | ComponentType<any> | null;
+  ListHeaderComponentStyle?: StyleProp<ViewStyle>;
+  ListFooterComponent?: ReactElement | ComponentType<any> | null;
+  ListFooterComponentStyle?: StyleProp<ViewStyle>;
+};
+
+export type StreamViewportHandle = {
+  scrollToBottom: (reason?: BottomAnchorLocalRequest["reason"]) => void;
+  prepareForViewportChange: () => void;
+};
+
+export type StreamSegmentRenderers = {
+  renderHistoryVirtualizedRow: (
+    item: StreamItem,
+    index: number,
+    items: StreamItem[]
+  ) => ReactNode;
+  renderHistoryMountedRow: (
+    item: StreamItem,
+    index: number,
+    items: StreamItem[]
+  ) => ReactNode;
+  renderLiveHeadRow: (
+    item: StreamItem,
+    index: number,
+    items: StreamItem[]
+  ) => ReactNode;
+  renderLiveAuxiliary: () => ReactNode;
+};
+
+export type StreamRenderInput = {
+  agentId: string;
+  segments: StreamRenderSegments;
+  boundary: StreamHistoryBoundary;
+  renderers: StreamSegmentRenderers;
+  listEmptyComponent: ReactNode;
+  viewportRef: RefObject<StreamViewportHandle | null>;
+  routeBottomAnchorRequest: BottomAnchorRouteRequest | null;
+  isAuthoritativeHistoryReady: boolean;
+  onNearBottomChange: (value: boolean) => void;
+  scrollEnabled: boolean;
+  listStyle: StyleProp<ViewStyle>;
+  baseListContentContainerStyle: StyleProp<ViewStyle>;
+  forwardListContentContainerStyle: StyleProp<ViewStyle>;
+};
+
+export type ResolveStreamRenderStrategyInput = {
+  platform: string;
+  isMobileBreakpoint: boolean;
+};
+
+export interface StreamStrategy {
+  render: (input: StreamRenderInput) => ReactNode;
+  orderTail: (streamItems: StreamItem[]) => StreamItem[];
+  orderHead: (streamHead: StreamItem[]) => StreamItem[];
+  getNeighborIndex: (index: number, relation: NeighborRelation) => number;
+  getNeighborItem: (
+    items: StreamItem[],
+    index: number,
+    relation: NeighborRelation
+  ) => StreamItem | undefined;
+  collectAssistantTurnContent: (items: StreamItem[], startIndex: number) => string;
+  isNearBottom: (input: StreamNearBottomInput) => boolean;
+  getBottomOffset: (metrics: StreamViewportMetrics) => number;
+  getEdgeSlotProps: (
+    component: ReactElement | ComponentType<any> | null,
+    gapSize: number
+  ) => StreamEdgeSlotProps;
+  getMaintainVisibleContentPosition: () =>
+    | MaintainVisibleContentPositionConfig
+    | undefined;
+  getBottomAnchorTransportBehavior: () => BottomAnchorTransportBehavior;
+  getFlatListInverted: () => boolean;
+  getOverlayScrollbarInverted: () => boolean;
+  shouldDisableParentScrollOnInlineDetailsExpansion: () => boolean;
+  shouldAnchorBottomOnContentSizeChange: () => boolean;
+  shouldAnimateManualScrollToBottom: () => boolean;
+  shouldUseVirtualizedList: () => boolean;
+}
+
+type StreamStrategyConfig = {
+  render: StreamStrategy["render"];
+  orderTailReverse: boolean;
+  orderHeadReverse: boolean;
+  assistantTurnTraversalStep: AssistantTurnTraversalStep;
+  edgeSlot: EdgeSlot;
+  flatListInverted: boolean;
+  overlayScrollbarInverted: boolean;
+  maintainVisibleContentPosition?: MaintainVisibleContentPositionConfig;
+  bottomAnchorTransportBehavior: BottomAnchorTransportBehavior;
+  disableParentScrollOnInlineDetailsExpansion: boolean;
+  anchorBottomOnContentSizeChange: boolean;
+  animateManualScrollToBottom: boolean;
+  useVirtualizedList: boolean;
+  isNearBottom: (input: StreamNearBottomInput) => boolean;
+  getBottomOffset: (metrics: StreamViewportMetrics) => number;
+};
+
+const NATIVE_SETTLING_VERIFICATION_DELAY_FRAMES = 4;
+
+export function createStreamStrategy(
+  config: StreamStrategyConfig
+): StreamStrategy {
+  return {
+    render: config.render,
+    orderTail: (streamItems) =>
+      config.orderTailReverse ? [...streamItems].reverse() : streamItems,
+    orderHead: (streamHead) =>
+      config.orderHeadReverse ? [...streamHead].reverse() : streamHead,
+    getNeighborIndex: (index, relation) =>
+      relation === "above"
+        ? index + config.assistantTurnTraversalStep
+        : index - config.assistantTurnTraversalStep,
+    getNeighborItem: (items, index, relation) => {
+      const neighborIndex =
+        relation === "above"
+          ? index + config.assistantTurnTraversalStep
+          : index - config.assistantTurnTraversalStep;
+      if (neighborIndex < 0 || neighborIndex >= items.length) {
+        return undefined;
+      }
+      return items[neighborIndex];
+    },
+    collectAssistantTurnContent: (items, startIndex) => {
+      const messages: string[] = [];
+      for (
+        let index = startIndex;
+        index >= 0 && index < items.length;
+        index += config.assistantTurnTraversalStep
+      ) {
+        const currentItem = items[index];
+        if (currentItem.kind === "user_message") {
+          break;
+        }
+        if (currentItem.kind === "assistant_message") {
+          messages.push(currentItem.text);
+        }
+      }
+      return messages.reverse().join("\n\n");
+    },
+    isNearBottom: (input) => config.isNearBottom(input),
+    getBottomOffset: (metrics) => config.getBottomOffset(metrics),
+    getEdgeSlotProps: (component, gapSize) => {
+      if (config.edgeSlot === "header") {
+        return {
+          ListHeaderComponent: component,
+          ListHeaderComponentStyle: { marginBottom: gapSize },
+        };
+      }
+      return {
+        ListFooterComponent: component,
+        ListFooterComponentStyle: { marginTop: gapSize },
+      };
+    },
+    getMaintainVisibleContentPosition: () => config.maintainVisibleContentPosition,
+    getBottomAnchorTransportBehavior: () => config.bottomAnchorTransportBehavior,
+    getFlatListInverted: () => config.flatListInverted,
+    getOverlayScrollbarInverted: () => config.overlayScrollbarInverted,
+    shouldDisableParentScrollOnInlineDetailsExpansion: () =>
+      config.disableParentScrollOnInlineDetailsExpansion,
+    shouldAnchorBottomOnContentSizeChange: () =>
+      config.anchorBottomOnContentSizeChange,
+    shouldAnimateManualScrollToBottom: () => config.animateManualScrollToBottom,
+    shouldUseVirtualizedList: () => config.useVirtualizedList,
+  };
+}
+
+export function resolveStreamRenderStrategy(
+  input: ResolveStreamRenderStrategyInput
+): StreamStrategy {
+  if (input.platform === "web") {
+    return createWebStreamStrategy({
+      isMobileBreakpoint: input.isMobileBreakpoint,
+    });
+  }
+  return createNativeStreamStrategy();
+}
+
+export function resolveBottomAnchorTransportBehavior(input: {
+  strategy: StreamStrategy;
+  isViewportSettling: boolean;
+}): BottomAnchorTransportBehavior {
+  const baseBehavior = input.strategy.getBottomAnchorTransportBehavior();
+  if (!input.isViewportSettling || !input.strategy.getFlatListInverted()) {
+    return baseBehavior;
+  }
+  return {
+    verificationDelayFrames: Math.max(
+      baseBehavior.verificationDelayFrames,
+      NATIVE_SETTLING_VERIFICATION_DELAY_FRAMES
+    ),
+    verificationRetryMode: "recheck",
+  };
+}
+
+export function orderTailForStreamRenderStrategy(params: {
+  strategy: StreamStrategy;
+  streamItems: StreamItem[];
+}): StreamItem[] {
+  return params.strategy.orderTail(params.streamItems);
+}
+
+export function orderHeadForStreamRenderStrategy(params: {
+  strategy: StreamStrategy;
+  streamHead: StreamItem[];
+}): StreamItem[] {
+  return params.strategy.orderHead(params.streamHead);
+}
+
+export function getStreamNeighborIndex(params: {
+  strategy: StreamStrategy;
+  index: number;
+  relation: NeighborRelation;
+}): number {
+  return params.strategy.getNeighborIndex(params.index, params.relation);
+}
+
+export function getStreamNeighborItem(params: {
+  strategy: StreamStrategy;
+  items: StreamItem[];
+  index: number;
+  relation: NeighborRelation;
+}): StreamItem | undefined {
+  return params.strategy.getNeighborItem(
+    params.items,
+    params.index,
+    params.relation
+  );
+}
+
+export function collectAssistantTurnContentForStreamRenderStrategy(params: {
+  strategy: StreamStrategy;
+  items: StreamItem[];
+  startIndex: number;
+}): string {
+  return params.strategy.collectAssistantTurnContent(
+    params.items,
+    params.startIndex
+  );
+}
+
+export function isNearBottomForStreamRenderStrategy(
+  params: StreamNearBottomInput & { strategy: StreamStrategy }
+): boolean {
+  return params.strategy.isNearBottom({
+    offsetY: params.offsetY,
+    threshold: params.threshold,
+    contentHeight: params.contentHeight,
+    viewportHeight: params.viewportHeight,
+  });
+}
+
+export function getBottomOffsetForStreamRenderStrategy(
+  params: StreamViewportMetrics & {
+    strategy: StreamStrategy;
+  }
+): number {
+  return params.strategy.getBottomOffset({
+    contentHeight: params.contentHeight,
+    viewportHeight: params.viewportHeight,
+  });
+}
+
+export function getStreamEdgeSlotProps(params: {
+  strategy: StreamStrategy;
+  component: ReactElement | ComponentType<any> | null;
+  gapSize: number;
+}): StreamEdgeSlotProps {
+  return params.strategy.getEdgeSlotProps(params.component, params.gapSize);
+}

packages/app/src/components/synced-loader.tsx

@@ -0,0 +1,170 @@
+import { View } from "react-native";
+import Animated, {
+  Easing,
+  makeMutable,
+  type SharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+import { useEffect } from "react";
+
+const SYNCED_LOADER_DURATION_MS = 950;
+const SYNCED_LOADER_EPOCH_MS = 0;
+const DOT_SEQUENCE = [0, 1, 3, 5, 4, 2] as const;
+const DOT_COUNT = DOT_SEQUENCE.length;
+const GRID_ROWS = 3;
+const GRID_COLUMNS = 2;
+const SNAKE_SEGMENT_OFFSETS = [0, -1, -2, -3, -4] as const;
+const SNAKE_OPACITIES = [1, 0.72, 0.46, 0.22, 0] as const;
+const sharedStepProgress = makeMutable(0);
+let sharedLoopStarted = false;
+
+function ensureSharedStepLoopStarted(): void {
+  if (sharedLoopStarted) {
+    return;
+  }
+
+  sharedLoopStarted = true;
+  const elapsedMs =
+    (Date.now() - SYNCED_LOADER_EPOCH_MS) % SYNCED_LOADER_DURATION_MS;
+  sharedStepProgress.value = (elapsedMs / SYNCED_LOADER_DURATION_MS) * DOT_COUNT;
+  sharedStepProgress.value = withTiming(
+    DOT_COUNT,
+    {
+      duration: Math.max(1, Math.round(SYNCED_LOADER_DURATION_MS - elapsedMs)),
+      easing: Easing.linear,
+    },
+    (finished) => {
+      if (!finished) {
+        sharedLoopStarted = false;
+        return;
+      }
+      sharedStepProgress.value = 0;
+      sharedStepProgress.value = withRepeat(
+        withTiming(DOT_COUNT, {
+          duration: SYNCED_LOADER_DURATION_MS,
+          easing: Easing.linear,
+        }),
+        -1,
+        false
+      );
+    }
+  );
+}
+
+export function SyncedLoader({
+  size = 10,
+  color,
+}: {
+  size?: number;
+  color: string;
+}) {
+  useEffect(() => {
+    ensureSharedStepLoopStarted();
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: 1,
+  }));
+
+  const gap = Math.max(1, Math.round(size * 0.12));
+  const dotSize = Math.max(2, Math.floor((size - gap * 2) / 3));
+  const gridWidth = dotSize * 2 + gap;
+  const gridHeight = dotSize * 3 + gap * 2;
+
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Animated.View
+        style={[
+          animatedStyle,
+          {
+            width: gridWidth,
+            height: gridHeight,
+          },
+        ]}
+      >
+        {Array.from({ length: DOT_COUNT }).map((_, dotIndex) => {
+          const rowIndex = Math.floor(dotIndex / GRID_COLUMNS);
+          const columnIndex = dotIndex % GRID_COLUMNS;
+          const sequenceIndex = DOT_SEQUENCE.indexOf(
+            dotIndex as (typeof DOT_SEQUENCE)[number]
+          );
+
+          return (
+            <SpinnerDot
+              key={dotIndex}
+              color={color}
+              dotSize={dotSize}
+              sequenceIndex={sequenceIndex}
+              progress={sharedStepProgress}
+              style={{
+                position: "absolute",
+                left: columnIndex * (dotSize + gap),
+                top: rowIndex * (dotSize + gap),
+              }}
+            />
+          );
+        })}
+      </Animated.View>
+    </View>
+  );
+}
+
+function SpinnerDot({
+  color,
+  dotSize,
+  sequenceIndex,
+  progress,
+  style,
+}: {
+  color: string;
+  dotSize: number;
+  sequenceIndex: number;
+  progress: SharedValue<number>;
+  style: {
+    position: "absolute";
+    left: number;
+    top: number;
+  };
+}) {
+  const animatedStyle = useAnimatedStyle(() => {
+    const headIndex = Math.floor(progress.value) % DOT_COUNT;
+    let opacity = 0;
+
+    for (let segmentIndex = 0; segmentIndex < SNAKE_SEGMENT_OFFSETS.length; segmentIndex += 1) {
+      const activeSequenceIndex =
+        (headIndex + SNAKE_SEGMENT_OFFSETS[segmentIndex] + DOT_COUNT) % DOT_COUNT;
+      if (sequenceIndex === activeSequenceIndex) {
+        opacity = SNAKE_OPACITIES[segmentIndex] ?? 0;
+        break;
+      }
+    }
+
+    return {
+      opacity,
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[
+        animatedStyle,
+        {
+          width: dotSize,
+          height: dotSize,
+          borderRadius: dotSize / 2,
+          backgroundColor: color,
+        },
+        style,
+      ]}
+    />
+  );
+}

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

@@ -6,6 +6,7 @@ import "@xterm/xterm/css/xterm.css";
 import type { ITheme } from "@xterm/xterm";
 import type { PendingTerminalModifiers } from "../utils/terminal-keys";
 import { TerminalEmulatorRuntime } from "../terminal/runtime/terminal-emulator-runtime";
+import { focusWithRetries } from "../utils/web-focus";
 import {
   summarizeTerminalText,
   terminalDebugLog,
@@ -343,7 +344,19 @@ export default function TerminalEmulator({
     if (focusRequestToken <= 0) {
       return;
     }
-    runtimeRef.current?.focus();
+    return focusWithRetries({
+      focus: () => {
+        runtimeRef.current?.focus();
+      },
+      isFocused: () => {
+        const root = rootRef.current;
+        if (!root) {
+          return false;
+        }
+        const active = typeof document !== "undefined" ? document.activeElement : null;
+        return active instanceof HTMLElement && root.contains(active);
+      },
+    });
   }, [focusRequestToken]);
 
   useEffect(() => {

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

@@ -214,6 +214,7 @@ export function TerminalPane({
   const selectedTerminalIdRef = useRef<string | null>(selectedTerminalId);
   const pendingTerminalInputRef = useRef<PendingTerminalInput[]>([]);
   const keyboardRefitTimeoutsRef = useRef<Array<ReturnType<typeof setTimeout>>>([]);
+  const lastAutoFocusKeyRef = useRef<string | null>(null);
 
   const updateSelectedTerminalId = useCallback(
     (next: string | null) => {
@@ -279,6 +280,21 @@ export function TerminalPane({
     setResizeRequestToken((current) => current + 1);
   }, []);
 
+  useEffect(() => {
+    if (isMobile || !isScreenFocused || !selectedTerminalId) {
+      lastAutoFocusKeyRef.current = null;
+      return;
+    }
+
+    const nextFocusKey = `${scopeKey}:${selectedTerminalId}`;
+    if (lastAutoFocusKeyRef.current === nextFocusKey) {
+      return;
+    }
+
+    lastAutoFocusKeyRef.current = nextFocusKey;
+    requestTerminalFocus();
+  }, [isMobile, isScreenFocused, requestTerminalFocus, scopeKey, selectedTerminalId]);
+
   const clearKeyboardRefitTimeouts = useCallback(() => {
     if (keyboardRefitTimeoutsRef.current.length === 0) {
       return;

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

@@ -35,12 +35,12 @@ const styles = StyleSheet.create((theme) => ({
     borderColor: theme.colors.accent,
   },
   secondary: {
-    backgroundColor: theme.colors.surface2,
-    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.surface3,
+    borderColor: theme.colors.surface3,
   },
   outline: {
     backgroundColor: "transparent",
-    borderColor: theme.colors.border,
+    borderColor: theme.colors.borderAccent,
   },
   ghost: {
     backgroundColor: "transparent",
@@ -59,7 +59,7 @@ const styles = StyleSheet.create((theme) => ({
   text: {
     color: theme.colors.foreground,
     fontSize: theme.fontSize.sm,
-    fontWeight: theme.fontWeight.medium,
+    fontWeight: theme.fontWeight.normal,
   },
   textDefault: {
     color: theme.colors.palette.white,

packages/app/src/components/ui/dropdown-menu.tsx

@@ -8,6 +8,7 @@ import {
   useState,
   type PropsWithChildren,
   type ReactElement,
+  type ReactNode,
 } from "react";
 import {
   ActivityIndicator,
@@ -184,8 +185,9 @@ type TriggerStyleProp =
   | StyleProp<ViewStyle>
   | ((state: TriggerState) => StyleProp<ViewStyle>);
 
-interface DropdownMenuTriggerProps extends Omit<PressableProps, "style"> {
+interface DropdownMenuTriggerProps extends Omit<PressableProps, "style" | "children"> {
   style?: TriggerStyleProp;
+  children: ReactNode | ((state: TriggerState) => ReactNode);
 }
 
 export function DropdownMenuTrigger({
@@ -193,7 +195,7 @@ export function DropdownMenuTrigger({
   disabled,
   style,
   ...props
-}: PropsWithChildren<DropdownMenuTriggerProps>): ReactElement {
+}: DropdownMenuTriggerProps): ReactElement {
   const ctx = useDropdownMenuContext("DropdownMenuTrigger");
 
   const handlePress = useCallback(() => {
@@ -215,7 +217,10 @@ export function DropdownMenuTrigger({
         return style;
       }}
     >
-      {children}
+      {({ pressed, hovered = false }) => {
+        const state: TriggerState = { pressed, hovered: Boolean(hovered), open: ctx.open };
+        return typeof children === "function" ? children(state) : children;
+      }}
     </Pressable>
   );
 }

packages/app/src/components/use-bottom-anchor-controller.test.ts

@@ -0,0 +1,698 @@
+import { describe, expect, it, vi } from "vitest";
+import {
+  __private__,
+  deriveBottomAnchorBlockedReason,
+  type BottomAnchorMode,
+} from "./use-bottom-anchor-controller";
+import type { BottomAnchorTransportBehavior } from "./agent-stream-render-strategy";
+
+type MeasurementState = ReturnType<typeof createMeasurementState>;
+
+function createMeasurementState(
+  overrides?: Partial<{
+    containerKey: string;
+    viewportWidth: number;
+    viewportHeight: number;
+    contentHeight: number;
+    offsetY: number;
+    viewportMeasuredForKey: string | null;
+    contentMeasuredForKey: string | null;
+  }>
+) {
+  return {
+    containerKey: "scroll-view",
+    viewportWidth: 0,
+    viewportHeight: 0,
+    contentHeight: 0,
+    offsetY: 0,
+    viewportMeasuredForKey: null,
+    contentMeasuredForKey: null,
+    ...overrides,
+  };
+}
+
+function createPendingRequest() {
+  return {
+    id: 1,
+    agentId: "agent-1",
+    reason: "initial-entry" as const,
+    requestKey: "route:agent-1",
+  };
+}
+
+function createFrameScheduler() {
+  let sequence = 0;
+  const tasks = new Map<
+    number,
+    {
+      cancelled: boolean;
+      remainingFrames: number;
+      callback: () => void;
+      kind: "attempt" | "verification";
+    }
+  >();
+
+  return {
+    schedule(params: {
+      kind: "attempt" | "verification";
+      callback: () => void;
+      delayFrames?: number;
+    }) {
+      const id = ++sequence;
+      tasks.set(id, {
+        cancelled: false,
+        remainingFrames: Math.max(0, params.delayFrames ?? 0),
+        callback: params.callback,
+        kind: params.kind,
+      });
+      return id;
+    },
+    cancel(handle: unknown) {
+      const task = tasks.get(handle as number);
+      if (task) {
+        task.cancelled = true;
+      }
+    },
+    flushFrame() {
+      const due: Array<() => void> = [];
+      for (const [id, task] of Array.from(tasks.entries())) {
+        if (task.cancelled) {
+          tasks.delete(id);
+          continue;
+        }
+        if (task.remainingFrames > 0) {
+          task.remainingFrames -= 1;
+          continue;
+        }
+        tasks.delete(id);
+        due.push(task.callback);
+      }
+      for (const callback of due) {
+        callback();
+      }
+    },
+    flushAll(limit = 20) {
+      for (let index = 0; index < limit && tasks.size > 0; index += 1) {
+        this.flushFrame();
+      }
+    },
+  };
+}
+
+function createDriverHarness(input?: {
+  transportBehavior?: BottomAnchorTransportBehavior;
+  isNearBottom?: boolean;
+  measurementState?: MeasurementState;
+  authoritativeReady?: boolean;
+}) {
+  const scheduler = createFrameScheduler();
+  const measurementState =
+    input?.measurementState ??
+    createMeasurementState({
+      viewportWidth: 800,
+      viewportHeight: 480,
+      contentHeight: 1200,
+      viewportMeasuredForKey: "scroll-view",
+      contentMeasuredForKey: "scroll-view",
+    });
+  const context = {
+    agentId: "agent-1",
+    authoritativeReady: input?.authoritativeReady ?? true,
+    renderStrategy: "forward-stream",
+    transportBehavior:
+      input?.transportBehavior ?? {
+        verificationDelayFrames: 0,
+        verificationRetryMode: "rescroll",
+      },
+    measurementState,
+    nearBottom: input?.isNearBottom ?? true,
+  };
+  const scrollToBottom = vi.fn(() => {
+    context.nearBottom = true;
+    context.measurementState.offsetY = 720;
+  });
+  const modeChanges: BottomAnchorMode[] = [];
+  const warnings: Array<{ agentId: string; reason: string }> = [];
+  const logs: Array<{ event: string; details: Record<string, unknown> }> = [];
+  const driver = __private__.createBottomAnchorControllerDriver({
+    getAgentId: () => context.agentId,
+    getIsAuthoritativeHistoryReady: () => context.authoritativeReady,
+    getRenderStrategy: () => context.renderStrategy,
+    getTransportBehavior: () => context.transportBehavior,
+    getMeasurementState: () => context.measurementState,
+    isNearBottom: () => context.nearBottom,
+    scrollToBottom,
+    onModeChange: (mode) => {
+      modeChanges.push(mode);
+    },
+    log: (event, details) => {
+      logs.push({ event, details });
+    },
+    warn: (details) => warnings.push(details),
+    scheduleFrame: (params) => scheduler.schedule(params),
+    cancelFrame: (handle) => scheduler.cancel(handle),
+  });
+
+  return {
+    context,
+    driver,
+    scheduler,
+    scrollToBottom,
+    modeChanges,
+    logs,
+    warnings,
+  };
+}
+
+describe("deriveBottomAnchorBlockedReason", () => {
+  it("keeps initial-entry pending until history is ready and geometry is measurable", () => {
+    const pendingRequest = createPendingRequest();
+
+    expect(
+      deriveBottomAnchorBlockedReason({
+        pendingRequest,
+        isAuthoritativeHistoryReady: false,
+        measurementState: createMeasurementState(),
+        pendingVerificationRequestId: null,
+      })
+    ).toBe("waiting_for_history_readiness");
+
+    expect(
+      deriveBottomAnchorBlockedReason({
+        pendingRequest,
+        isAuthoritativeHistoryReady: true,
+        measurementState: createMeasurementState({
+          viewportHeight: 480,
+          viewportMeasuredForKey: "scroll-view",
+        }),
+        pendingVerificationRequestId: null,
+      })
+    ).toBe("waiting_for_measurable_content");
+
+    expect(
+      deriveBottomAnchorBlockedReason({
+        pendingRequest,
+        isAuthoritativeHistoryReady: true,
+        measurementState: createMeasurementState({
+          viewportHeight: 480,
+          contentHeight: 1200,
+          viewportMeasuredForKey: "scroll-view",
+          contentMeasuredForKey: "scroll-view",
+        }),
+        pendingVerificationRequestId: pendingRequest.id,
+      })
+    ).toBe("waiting_for_post_layout_verification");
+  });
+});
+
+describe("bottom anchor controller driver", () => {
+  it("keeps initial-entry pending until authoritative history and current geometry exist", () => {
+    const harness = createDriverHarness({
+      authoritativeReady: false,
+      measurementState: createMeasurementState(),
+    });
+
+    harness.driver.applyRouteRequest({
+      agentId: "agent-1",
+      reason: "initial-entry",
+      requestKey: "route:agent-1:initial-entry",
+    });
+    harness.scheduler.flushAll();
+
+    expect(harness.scrollToBottom).not.toHaveBeenCalled();
+    expect(harness.driver.getSnapshot()).toMatchObject({
+      mode: "sticky-bottom",
+      blockedReason: "waiting_for_history_readiness",
+      pendingRequest: {
+        reason: "initial-entry",
+      },
+    });
+
+    harness.context.authoritativeReady = true;
+    harness.context.measurementState.viewportHeight = 480;
+    harness.context.measurementState.contentHeight = 1200;
+    harness.context.measurementState.viewportMeasuredForKey = "scroll-view";
+    harness.context.measurementState.contentMeasuredForKey = "scroll-view";
+    harness.context.nearBottom = true;
+    harness.driver.notifyAuthoritativeHistoryMaybeChanged();
+    harness.driver.reevaluate();
+    harness.scheduler.flushAll();
+
+    expect(harness.scrollToBottom).toHaveBeenCalledTimes(1);
+    expect(harness.driver.getSnapshot()).toMatchObject({
+      blockedReason: null,
+      pendingRequest: null,
+      pendingVerification: null,
+    });
+  });
+
+  it("suppresses sticky maintenance while detached", () => {
+    const harness = createDriverHarness();
+
+    harness.driver.detachByUser();
+    harness.driver.handleContentSizeChange({
+      previousContentHeight: 1200,
+      contentHeight: 1500,
+    });
+    harness.driver.handleViewportMetricsChange({
+      previousViewportWidth: 800,
+      viewportWidth: 640,
+      previousViewportHeight: 480,
+      viewportHeight: 420,
+    });
+    harness.scheduler.flushAll();
+
+    expect(harness.driver.getSnapshot().mode).toBe("detached");
+    expect(harness.scrollToBottom).not.toHaveBeenCalled();
+  });
+
+  it("switches back to sticky-bottom for explicit jump-to-bottom", () => {
+    const harness = createDriverHarness({
+      isNearBottom: false,
+    });
+
+    harness.driver.detachByUser();
+    harness.driver.requestLocalAnchor({
+      agentId: "agent-1",
+      reason: "jump-to-bottom",
+    });
+    harness.scheduler.flushAll();
+
+    expect(harness.modeChanges).toContain("detached");
+    expect(harness.modeChanges).toContain("sticky-bottom");
+    expect(harness.scrollToBottom).toHaveBeenCalledTimes(1);
+    expect(harness.driver.getSnapshot().mode).toBe("sticky-bottom");
+  });
+
+  it("schedules sticky maintenance on viewport and content growth", () => {
+    const harness = createDriverHarness();
+
+    harness.driver.handleViewportMetricsChange({
+      previousViewportWidth: 800,
+      viewportWidth: 640,
+      previousViewportHeight: 480,
+      viewportHeight: 420,
+    });
+    harness.scheduler.flushAll();
+
+    harness.driver.handleContentSizeChange({
+      previousContentHeight: 1200,
+      contentHeight: 1600,
+    });
+    harness.scheduler.flushAll();
+
+    expect(harness.scrollToBottom).toHaveBeenCalledTimes(2);
+  });
+
+  it("keeps a pending request blocked when stale container measurements arrive", () => {
+    const harness = createDriverHarness({
+      measurementState: createMeasurementState({
+        containerKey: "web-partial-virtualized",
+        viewportHeight: 420,
+        contentHeight: 1200,
+        viewportMeasuredForKey: "scroll-view",
+        contentMeasuredForKey: "scroll-view",
+      }),
+    });
+
+    harness.driver.applyRouteRequest({
+      agentId: "agent-1",
+      reason: "resume",
+      requestKey: "route:agent-1:resume",
+    });
+    harness.scheduler.flushAll();
+
+    expect(harness.scrollToBottom).not.toHaveBeenCalled();
+    expect(harness.driver.getSnapshot()).toMatchObject({
+      blockedReason: "waiting_for_measurable_viewport",
+      pendingRequest: {
+        reason: "resume",
+      },
+    });
+
+    harness.context.measurementState.viewportMeasuredForKey = "web-partial-virtualized";
+    harness.context.measurementState.contentMeasuredForKey = "web-partial-virtualized";
+    harness.driver.reevaluate();
+    harness.scheduler.flushAll();
+
+    expect(harness.scrollToBottom).toHaveBeenCalledTimes(1);
+    expect(harness.driver.getSnapshot().pendingRequest).toBeNull();
+  });
+
+  it("uses delayed rechecks instead of repeated rescroll loops for native transport", () => {
+    const harness = createDriverHarness({
+      transportBehavior: {
+        verificationDelayFrames: 2,
+        verificationRetryMode: "recheck",
+      },
+      isNearBottom: false,
+    });
+    harness.scrollToBottom.mockImplementation(() => {
+      harness.context.measurementState.offsetY = 0;
+    });
+
+    harness.driver.requestLocalAnchor({
+      agentId: "agent-1",
+      reason: "jump-to-bottom",
+    });
+
+    harness.scheduler.flushFrame();
+    expect(harness.scrollToBottom).toHaveBeenCalledTimes(1);
+
+    harness.scheduler.flushFrame();
+    harness.scheduler.flushFrame();
+    expect(harness.scrollToBottom).toHaveBeenCalledTimes(1);
+
+    harness.context.nearBottom = true;
+    harness.scheduler.flushAll();
+
+    expect(harness.scrollToBottom).toHaveBeenCalledTimes(1);
+    expect(harness.warnings).toEqual([]);
+    expect(harness.driver.getSnapshot().pendingRequest).toBeNull();
+  });
+
+  it("does not stay blocked on post-layout verification after a retry-scroll request", () => {
+    const harness = createDriverHarness({
+      measurementState: createMeasurementState({
+        containerKey: "web-partial-virtualized",
+        viewportWidth: 828,
+        viewportHeight: 846,
+        contentHeight: 14322,
+        offsetY: 0,
+        viewportMeasuredForKey: "web-partial-virtualized",
+        contentMeasuredForKey: "web-partial-virtualized",
+      }),
+      isNearBottom: false,
+    });
+
+    harness.scrollToBottom.mockImplementation(() => {
+      harness.context.measurementState.offsetY = 13476;
+    });
+
+    harness.driver.applyRouteRequest({
+      agentId: "agent-1",
+      reason: "resume",
+      requestKey: "route:agent-1:resume",
+    });
+
+    harness.scheduler.flushFrame();
+    expect(harness.scrollToBottom).toHaveBeenCalledTimes(1);
+
+    harness.context.measurementState.contentHeight = 14804;
+    harness.context.nearBottom = false;
+    harness.driver.handleContentSizeChange({
+      previousContentHeight: 14322,
+      contentHeight: 14804,
+    });
+
+    harness.scheduler.flushFrame();
+
+    expect(harness.driver.getSnapshot()).toMatchObject({
+      pendingRequest: {
+        reason: "resume",
+      },
+      pendingVerification: {
+        requestId: 1,
+        retries: 1,
+      },
+    });
+
+    harness.scheduler.flushFrame();
+
+    expect(harness.scrollToBottom).toHaveBeenCalledTimes(2);
+    expect(harness.driver.getSnapshot()).toMatchObject({
+      blockedReason: "waiting_for_post_layout_verification",
+      pendingRequest: {
+        reason: "resume",
+      },
+      pendingVerification: {
+        requestId: 1,
+      },
+    });
+  });
+
+  it("does not fulfill a web partial-virtualized resume request before a confirmation pass", () => {
+    const harness = createDriverHarness({
+      measurementState: createMeasurementState({
+        containerKey: "web-partial-virtualized",
+        viewportWidth: 828,
+        viewportHeight: 846,
+        contentHeight: 14322,
+        offsetY: 0,
+        viewportMeasuredForKey: "web-partial-virtualized",
+        contentMeasuredForKey: "web-partial-virtualized",
+      }),
+      isNearBottom: false,
+    });
+
+    harness.scrollToBottom.mockImplementation(() => {
+      harness.context.measurementState.offsetY = Math.max(
+        0,
+        harness.context.measurementState.contentHeight -
+          harness.context.measurementState.viewportHeight
+      );
+      harness.context.nearBottom = true;
+    });
+
+    harness.driver.applyRouteRequest({
+      agentId: "agent-1",
+      reason: "resume",
+      requestKey: "route:agent-1:resume-confirmation",
+    });
+
+    harness.scheduler.flushFrame();
+    harness.scheduler.flushFrame();
+
+    expect(harness.driver.getSnapshot()).toMatchObject({
+      pendingRequest: {
+        reason: "resume",
+      },
+      blockedReason: "waiting_for_post_layout_verification",
+    });
+
+    harness.context.measurementState.contentHeight = 16230;
+    harness.context.nearBottom = false;
+    harness.driver.handleContentSizeChange({
+      previousContentHeight: 14322,
+      contentHeight: 16230,
+    });
+
+    harness.scheduler.flushFrame();
+    harness.scheduler.flushFrame();
+    harness.scheduler.flushFrame();
+
+    expect(harness.scrollToBottom).toHaveBeenCalledTimes(2);
+    expect(harness.driver.getSnapshot().pendingRequest).toMatchObject({
+      reason: "resume",
+    });
+  });
+
+  it("keeps sticky-bottom during viewport growth until bottom is re-verified", () => {
+    const harness = createDriverHarness();
+    harness.context.nearBottom = false;
+    harness.scrollToBottom.mockImplementation(() => {
+      harness.context.measurementState.offsetY = 720;
+    });
+
+    harness.driver.handleViewportMetricsChange({
+      previousViewportWidth: 800,
+      viewportWidth: 800,
+      previousViewportHeight: 480,
+      viewportHeight: 420,
+    });
+    harness.scheduler.flushAll();
+
+    expect(harness.scrollToBottom).toHaveBeenCalledTimes(4);
+    expect(harness.driver.getSnapshot()).toMatchObject({
+      mode: "sticky-bottom",
+      pendingRequest: null,
+      pendingVerification: null,
+    });
+
+    harness.driver.handleScrollNearBottomChange({
+      nextIsNearBottom: false,
+      scrollDelta: 0,
+    });
+
+    expect(harness.driver.getSnapshot().mode).toBe("sticky-bottom");
+
+    harness.context.nearBottom = true;
+    harness.driver.handleScrollNearBottomChange({
+      nextIsNearBottom: true,
+      scrollDelta: 0,
+    });
+    harness.scheduler.flushAll();
+    harness.driver.handleScrollNearBottomChange({
+      nextIsNearBottom: false,
+      scrollDelta: 64,
+    });
+
+    expect(harness.driver.getSnapshot().mode).toBe("detached");
+  });
+
+  it("keeps sticky-bottom during streaming growth until bottom is re-verified", () => {
+    const harness = createDriverHarness();
+    harness.context.nearBottom = false;
+    harness.scrollToBottom.mockImplementation(() => {
+      harness.context.measurementState.offsetY = 900;
+    });
+
+    harness.driver.handleContentSizeChange({
+      previousContentHeight: 1200,
+      contentHeight: 1400,
+    });
+    harness.scheduler.flushAll();
+
+    expect(harness.scrollToBottom).toHaveBeenCalledTimes(4);
+    expect(harness.driver.getSnapshot()).toMatchObject({
+      mode: "sticky-bottom",
+      pendingRequest: null,
+      pendingVerification: null,
+    });
+
+    harness.driver.handleScrollNearBottomChange({
+      nextIsNearBottom: false,
+      scrollDelta: 0,
+    });
+
+    expect(harness.driver.getSnapshot().mode).toBe("sticky-bottom");
+
+    harness.context.nearBottom = true;
+    harness.driver.handleScrollNearBottomChange({
+      nextIsNearBottom: true,
+      scrollDelta: 0,
+    });
+    harness.scheduler.flushAll();
+    harness.driver.handleScrollNearBottomChange({
+      nextIsNearBottom: false,
+      scrollDelta: 64,
+    });
+
+    expect(harness.driver.getSnapshot().mode).toBe("detached");
+  });
+});
+
+describe("controller helper predicates", () => {
+  it("rejects stale container measurements during post-scroll verification", () => {
+    expect(
+      __private__.deriveVerificationBlockedReason({
+        isAuthoritativeHistoryReady: true,
+        measurementState: createMeasurementState({
+          containerKey: "web-partial-virtualized",
+          viewportHeight: 420,
+          contentHeight: 1200,
+          viewportMeasuredForKey: "scroll-view",
+          contentMeasuredForKey: "scroll-view",
+        }),
+      })
+    ).toBe("waiting_for_measurable_viewport");
+  });
+
+  it("allows verification only after authoritative readiness and current geometry exist", () => {
+    expect(
+      __private__.deriveVerificationBlockedReason({
+        isAuthoritativeHistoryReady: false,
+        measurementState: createMeasurementState({
+          containerKey: "scroll-view",
+          viewportHeight: 420,
+          contentHeight: 1200,
+          viewportMeasuredForKey: "scroll-view",
+          contentMeasuredForKey: "scroll-view",
+        }),
+      })
+    ).toBe("waiting_for_history_readiness");
+
+    expect(
+      __private__.deriveVerificationBlockedReason({
+        isAuthoritativeHistoryReady: true,
+        measurementState: createMeasurementState({
+          containerKey: "scroll-view",
+          viewportHeight: 420,
+          contentHeight: 1200,
+          viewportMeasuredForKey: "scroll-view",
+          contentMeasuredForKey: "scroll-view",
+        }),
+      })
+    ).toBeNull();
+  });
+
+  it("suppresses auto-anchor helpers while detached", () => {
+    const mode: BottomAnchorMode = "detached";
+
+    expect(
+      __private__.shouldRestickOnContentChange({
+        mode,
+        previousContentHeight: 1000,
+        contentHeight: 1100,
+      })
+    ).toBe(false);
+    expect(
+      __private__.shouldRestickOnViewportChange({
+        mode,
+        previousViewportWidth: 800,
+        viewportWidth: 640,
+        previousViewportHeight: 400,
+        viewportHeight: 360,
+      })
+    ).toBe(false);
+  });
+
+  it("does not detach from sticky while a restick request is still pending", () => {
+    expect(
+      __private__.shouldDetachFromScrollAway({
+        mode: "sticky-bottom",
+        nextIsNearBottom: false,
+        scrollDelta: 0,
+        hasPendingRequest: true,
+        hasPendingVerification: false,
+        hasUnverifiedStickyMeasurementChange: false,
+      })
+    ).toBe(false);
+
+    expect(
+      __private__.shouldDetachFromScrollAway({
+        mode: "sticky-bottom",
+        nextIsNearBottom: false,
+        scrollDelta: 0,
+        hasPendingRequest: false,
+        hasPendingVerification: true,
+        hasUnverifiedStickyMeasurementChange: false,
+      })
+    ).toBe(false);
+
+    expect(
+      __private__.shouldDetachFromScrollAway({
+        mode: "sticky-bottom",
+        nextIsNearBottom: false,
+        scrollDelta: 0,
+        hasPendingRequest: false,
+        hasPendingVerification: false,
+        hasUnverifiedStickyMeasurementChange: true,
+      })
+    ).toBe(false);
+
+    expect(
+      __private__.shouldDetachFromScrollAway({
+        mode: "sticky-bottom",
+        nextIsNearBottom: false,
+        scrollDelta: 0,
+        hasPendingRequest: false,
+        hasPendingVerification: false,
+        hasUnverifiedStickyMeasurementChange: false,
+      })
+    ).toBe(true);
+  });
+
+  it("treats a large scroll delta as user detach even during an unverified sticky change", () => {
+    expect(
+      __private__.shouldDetachFromScrollAway({
+        mode: "sticky-bottom",
+        nextIsNearBottom: false,
+        scrollDelta: 48,
+        hasPendingRequest: false,
+        hasPendingVerification: false,
+        hasUnverifiedStickyMeasurementChange: true,
+      })
+    ).toBe(true);
+  });
+});

packages/app/src/components/use-bottom-anchor-controller.ts

@@ -0,0 +1,976 @@
+import { useEffect, useRef, useState } from "react";
+import type { BottomAnchorTransportBehavior } from "./agent-stream-render-strategy";
+
+export type BottomAnchorMode = "sticky-bottom" | "detached";
+
+export type BottomAnchorRouteRequest = {
+  reason: "initial-entry" | "resume";
+  agentId: string;
+  requestKey: string;
+};
+
+export type BottomAnchorLocalRequest = {
+  reason: "jump-to-bottom" | "message-sent";
+  agentId: string;
+};
+
+export type BottomAnchorBlockedReason =
+  | "waiting_for_history_readiness"
+  | "waiting_for_measurable_viewport"
+  | "waiting_for_measurable_content"
+  | "waiting_for_post_layout_verification";
+
+type BottomAnchorRequestReason =
+  | BottomAnchorRouteRequest["reason"]
+  | BottomAnchorLocalRequest["reason"];
+
+type BottomAnchorRequest = {
+  id: number;
+  agentId: string;
+  reason: BottomAnchorRequestReason;
+  requestKey: string;
+};
+
+type ControllerMeasurementState = {
+  containerKey: string;
+  viewportWidth: number;
+  viewportHeight: number;
+  contentHeight: number;
+  offsetY: number;
+  viewportMeasuredForKey: string | null;
+  contentMeasuredForKey: string | null;
+};
+
+type AttemptContext = {
+  requestId: number | null;
+  retries: number;
+  confirmationPasses?: number;
+  startedContentHeight?: number;
+  startedOffsetY?: number;
+  startedViewportHeight?: number;
+};
+
+type ScheduledFrameHandle = {
+  cancelled: boolean;
+  rafId: number | null;
+  remainingFrames: number;
+  callback: () => void;
+};
+
+type BottomAnchorEvent =
+  | "request_created"
+  | "evaluate_called"
+  | "attempt_started"
+  | "attempt_verified"
+  | "attempt_failed"
+  | "request_fulfilled"
+  | "request_cancelled"
+  | "detached_by_user"
+  | "verification_scheduled"
+  | "blocked_reason_changed";
+
+type BottomAnchorControllerDriver = {
+  destroy: () => void;
+  getSnapshot: () => {
+    mode: BottomAnchorMode;
+    pendingRequest: BottomAnchorRequest | null;
+    pendingVerification: AttemptContext | null;
+    blockedReason: BottomAnchorBlockedReason | null;
+  };
+  resetForAgent: () => void;
+  applyRouteRequest: (request: BottomAnchorRouteRequest | null) => void;
+  requestLocalAnchor: (request: BottomAnchorLocalRequest) => void;
+  detachByUser: () => void;
+  handleViewportMetricsChange: (params: {
+    previousViewportWidth: number;
+    viewportWidth: number;
+    previousViewportHeight: number;
+    viewportHeight: number;
+  }) => void;
+  handleContentSizeChange: (params: {
+    previousContentHeight: number;
+    contentHeight: number;
+  }) => void;
+  prepareForStickyViewportChange: () => void;
+  prepareForStickyContentChange: () => void;
+  handleScrollNearBottomChange: (params: {
+    nextIsNearBottom: boolean;
+    scrollDelta: number;
+  }) => void;
+  notifyAuthoritativeHistoryMaybeChanged: () => void;
+  reevaluate: (animated?: boolean) => void;
+};
+
+type CreateBottomAnchorControllerDriverInput = {
+  getAgentId: () => string;
+  getIsAuthoritativeHistoryReady: () => boolean;
+  getRenderStrategy: () => string;
+  getTransportBehavior: () => BottomAnchorTransportBehavior;
+  getMeasurementState: () => ControllerMeasurementState;
+  isNearBottom: () => boolean;
+  scrollToBottom: (animated: boolean) => void;
+  onModeChange: (mode: BottomAnchorMode) => void;
+  log: (event: BottomAnchorEvent, details: Record<string, unknown>) => void;
+  warn: (details: { agentId: string; reason: BottomAnchorRequestReason }) => void;
+  scheduleFrame: (params: {
+    kind: "attempt" | "verification";
+    callback: () => void;
+    delayFrames?: number;
+  }) => unknown;
+  cancelFrame: (handle: unknown) => void;
+};
+
+const MAX_VERIFICATION_RETRIES = 3;
+const WEB_PARTIAL_VIRTUALIZED_CONFIRMATION_DELAY_FRAMES = 1;
+const USER_SCROLL_AWAY_DELTA_PX = 24;
+const IS_DEV = Boolean((globalThis as { __DEV__?: boolean }).__DEV__);
+
+function logBottomAnchorEvent(
+  event: BottomAnchorEvent,
+  details: Record<string, unknown>
+): void {
+  if (!IS_DEV) {
+    return;
+  }
+  console.debug("[BottomAnchor]", event, details);
+}
+
+function scheduleAnimationFrameWithDelay(input: {
+  callback: () => void;
+  delayFrames?: number;
+}): ScheduledFrameHandle {
+  const handle: ScheduledFrameHandle = {
+    cancelled: false,
+    rafId: null,
+    remainingFrames: Math.max(0, input.delayFrames ?? 0),
+    callback: input.callback,
+  };
+
+  const tick = () => {
+    if (handle.cancelled) {
+      return;
+    }
+    if (handle.remainingFrames > 0) {
+      handle.remainingFrames -= 1;
+      handle.rafId = requestAnimationFrame(tick);
+      return;
+    }
+    handle.rafId = null;
+    input.callback();
+  };
+
+  handle.rafId = requestAnimationFrame(tick);
+  return handle;
+}
+
+function cancelScheduledAnimationFrame(handle: unknown): void {
+  const scheduled = handle as ScheduledFrameHandle | null;
+  if (!scheduled) {
+    return;
+  }
+  scheduled.cancelled = true;
+  if (scheduled.rafId !== null) {
+    cancelAnimationFrame(scheduled.rafId);
+    scheduled.rafId = null;
+  }
+}
+
+function deriveVerificationBlockedReason(input: {
+  isAuthoritativeHistoryReady: boolean;
+  measurementState: ControllerMeasurementState;
+}): Exclude<BottomAnchorBlockedReason, "waiting_for_post_layout_verification"> | null {
+  if (!input.isAuthoritativeHistoryReady) {
+    return "waiting_for_history_readiness";
+  }
+  if (
+    input.measurementState.viewportHeight <= 0 ||
+    input.measurementState.viewportMeasuredForKey !== input.measurementState.containerKey
+  ) {
+    return "waiting_for_measurable_viewport";
+  }
+  if (
+    input.measurementState.contentHeight <= 0 ||
+    input.measurementState.contentMeasuredForKey !== input.measurementState.containerKey
+  ) {
+    return "waiting_for_measurable_content";
+  }
+  return null;
+}
+
+export function deriveBottomAnchorBlockedReason(input: {
+  pendingRequest: BottomAnchorRequest | null;
+  isAuthoritativeHistoryReady: boolean;
+  measurementState: ControllerMeasurementState;
+  pendingVerificationRequestId: number | null;
+}): BottomAnchorBlockedReason | null {
+  if (!input.pendingRequest) {
+    return null;
+  }
+  if (!input.isAuthoritativeHistoryReady) {
+    return "waiting_for_history_readiness";
+  }
+  if (
+    input.measurementState.viewportHeight <= 0 ||
+    input.measurementState.viewportMeasuredForKey !== input.measurementState.containerKey
+  ) {
+    return "waiting_for_measurable_viewport";
+  }
+  if (
+    input.measurementState.contentHeight <= 0 ||
+    input.measurementState.contentMeasuredForKey !== input.measurementState.containerKey
+  ) {
+    return "waiting_for_measurable_content";
+  }
+  if (input.pendingVerificationRequestId === input.pendingRequest.id) {
+    return "waiting_for_post_layout_verification";
+  }
+  return null;
+}
+
+function deriveRetryDisposition(input: {
+  mode: BottomAnchorMode;
+  retries: number;
+  verificationRetryMode: BottomAnchorTransportBehavior["verificationRetryMode"];
+}): "retry-scroll" | "retry-verify" | "fail" {
+  if (input.mode !== "sticky-bottom" || input.retries >= MAX_VERIFICATION_RETRIES) {
+    return "fail";
+  }
+  return input.verificationRetryMode === "recheck"
+    ? "retry-verify"
+    : "retry-scroll";
+}
+
+function shouldRequireRouteRequestConfirmation(input: {
+  request: BottomAnchorRequest | null;
+  measurementState: ControllerMeasurementState;
+  confirmationPasses: number;
+}): boolean {
+  if (!input.request) {
+    return false;
+  }
+  if (
+    input.request.reason !== "initial-entry" &&
+    input.request.reason !== "resume"
+  ) {
+    return false;
+  }
+  if (input.measurementState.containerKey !== "web-partial-virtualized") {
+    return false;
+  }
+  return input.confirmationPasses < 1;
+}
+
+function getDetailedMeasurementState(
+  measurementState: ControllerMeasurementState
+): Record<string, unknown> {
+  const distanceFromBottom = Math.max(
+    0,
+    measurementState.contentHeight -
+      (measurementState.offsetY + measurementState.viewportHeight)
+  );
+  return {
+    containerKey: measurementState.containerKey,
+    viewportWidth: measurementState.viewportWidth,
+    viewportHeight: measurementState.viewportHeight,
+    contentHeight: measurementState.contentHeight,
+    offsetY: measurementState.offsetY,
+    distanceFromBottom,
+    viewportMeasuredForKey: measurementState.viewportMeasuredForKey,
+    contentMeasuredForKey: measurementState.contentMeasuredForKey,
+  };
+}
+
+function createBottomAnchorControllerDriver(
+  input: CreateBottomAnchorControllerDriverInput
+): BottomAnchorControllerDriver {
+  let requestSequence = 0;
+  let mode: BottomAnchorMode = "sticky-bottom";
+  let pendingRequest: BottomAnchorRequest | null = null;
+  let pendingVerification: AttemptContext | null = null;
+  let blockedReason: BottomAnchorBlockedReason | null = null;
+  let attemptHandle: unknown = null;
+  let verificationHandle: unknown = null;
+  let lastRouteRequestKey: string | null = null;
+  let stickyMeasurementRevision = 0;
+  let lastVerifiedStickyMeasurementRevision = 0;
+
+  const getLogContext = (extra?: Record<string, unknown>) => {
+    const measurementState = input.getMeasurementState();
+    const distanceFromBottom = Math.max(
+      0,
+      measurementState.contentHeight -
+        (measurementState.offsetY + measurementState.viewportHeight)
+    );
+    return {
+      agentId: input.getAgentId(),
+      requestReason: pendingRequest?.reason ?? null,
+      authoritativeHistoryReady: input.getIsAuthoritativeHistoryReady(),
+      contentHeight: measurementState.contentHeight,
+      viewportHeight: measurementState.viewportHeight,
+      offset: measurementState.offsetY,
+      distanceFromBottom,
+      renderStrategy: input.getRenderStrategy(),
+      blockedReason,
+      mode,
+      containerKey: measurementState.containerKey,
+      transportBehavior: input.getTransportBehavior(),
+      ...extra,
+    };
+  };
+
+  const setBlockedReason = (nextBlockedReason: BottomAnchorBlockedReason | null) => {
+    if (blockedReason === nextBlockedReason) {
+      return;
+    }
+    blockedReason = nextBlockedReason;
+    input.log(
+      "blocked_reason_changed",
+      getLogContext({ nextBlockedReason })
+    );
+  };
+
+  const setModeInternal = (nextMode: BottomAnchorMode) => {
+    if (mode === nextMode) {
+      return;
+    }
+    mode = nextMode;
+    input.onModeChange(nextMode);
+    if (nextMode === "detached") {
+      lastVerifiedStickyMeasurementRevision = stickyMeasurementRevision;
+    }
+  };
+
+  const markStickyMeasurementChanged = () => {
+    stickyMeasurementRevision += 1;
+  };
+
+  const markStickyMeasurementVerified = () => {
+    lastVerifiedStickyMeasurementRevision = stickyMeasurementRevision;
+  };
+
+  const cancelPendingAttempt = () => {
+    if (attemptHandle) {
+      input.cancelFrame(attemptHandle);
+      attemptHandle = null;
+    }
+    if (verificationHandle) {
+      input.cancelFrame(verificationHandle);
+      verificationHandle = null;
+    }
+    pendingVerification = null;
+  };
+
+  const cancelPendingRequest = (reason: string) => {
+    const currentRequest = pendingRequest;
+    if (!currentRequest) {
+      cancelPendingAttempt();
+      setBlockedReason(null);
+      return;
+    }
+    input.log(
+      "request_cancelled",
+      getLogContext({
+        cancelledRequestReason: currentRequest.reason,
+        cancelReason: reason,
+      })
+    );
+    pendingRequest = null;
+    cancelPendingAttempt();
+    setBlockedReason(null);
+  };
+
+  const deriveDriverBlockedReason = (
+    measurementState: ControllerMeasurementState
+  ) =>
+    deriveBottomAnchorBlockedReason({
+      pendingRequest,
+      isAuthoritativeHistoryReady: input.getIsAuthoritativeHistoryReady(),
+      measurementState,
+      pendingVerificationRequestId:
+        verificationHandle !== null ? pendingVerification?.requestId ?? null : null,
+    });
+
+  const scheduleVerification = (
+    attemptContext: AttemptContext,
+    delayFramesOverride?: number
+  ) => {
+    const scheduledMeasurementState = input.getMeasurementState();
+    if (verificationHandle) {
+      input.cancelFrame(verificationHandle);
+    }
+    input.log(
+      "verification_scheduled",
+      getLogContext({
+        retries: attemptContext.retries,
+        startedContentHeight: attemptContext.startedContentHeight ?? null,
+        startedOffsetY: attemptContext.startedOffsetY ?? null,
+        startedViewportHeight: attemptContext.startedViewportHeight ?? null,
+        scheduledMeasurementState:
+          getDetailedMeasurementState(scheduledMeasurementState),
+        verificationDelayFrames:
+          delayFramesOverride ?? input.getTransportBehavior().verificationDelayFrames,
+      })
+    );
+    verificationHandle = input.scheduleFrame({
+      kind: "verification",
+      delayFrames:
+        delayFramesOverride ?? input.getTransportBehavior().verificationDelayFrames,
+      callback: () => {
+        verificationHandle = null;
+        const currentRequest = pendingRequest;
+        const isRequestAttempt =
+          currentRequest && attemptContext.requestId === currentRequest.id;
+        const measurementState = input.getMeasurementState();
+        const verificationBlockedReason = deriveVerificationBlockedReason({
+          isAuthoritativeHistoryReady: input.getIsAuthoritativeHistoryReady(),
+          measurementState,
+        });
+
+        if (verificationBlockedReason) {
+          input.log(
+            "attempt_verified",
+            getLogContext({
+              verificationPhase: "blocked",
+              verificationBlockedReason,
+              retries: attemptContext.retries,
+              measurementState: getDetailedMeasurementState(measurementState),
+            })
+          );
+          pendingVerification = attemptContext;
+          setBlockedReason(verificationBlockedReason);
+          return;
+        }
+
+        const verifiedNearBottom = input.isNearBottom();
+        const retryDisposition = verifiedNearBottom
+          ? null
+          : deriveRetryDisposition({
+              mode,
+              retries: attemptContext.retries,
+              verificationRetryMode:
+                input.getTransportBehavior().verificationRetryMode,
+            });
+
+        input.log(
+          "attempt_verified",
+          getLogContext({
+            verifiedNearBottom,
+            retries: attemptContext.retries,
+            retryDisposition,
+            contentHeightDeltaSinceAttempt:
+              measurementState.contentHeight -
+              (attemptContext.startedContentHeight ?? measurementState.contentHeight),
+            offsetDeltaSinceAttempt:
+              measurementState.offsetY -
+              (attemptContext.startedOffsetY ?? measurementState.offsetY),
+            viewportHeightDeltaSinceAttempt:
+              measurementState.viewportHeight -
+              (attemptContext.startedViewportHeight ??
+                measurementState.viewportHeight),
+            measurementState: getDetailedMeasurementState(measurementState),
+          })
+        );
+
+        if (verifiedNearBottom) {
+          if (
+            isRequestAttempt &&
+            shouldRequireRouteRequestConfirmation({
+              request: currentRequest,
+              measurementState,
+              confirmationPasses: attemptContext.confirmationPasses ?? 0,
+            })
+          ) {
+            pendingVerification = {
+              ...attemptContext,
+              confirmationPasses: (attemptContext.confirmationPasses ?? 0) + 1,
+            };
+            setBlockedReason("waiting_for_post_layout_verification");
+            scheduleVerification(
+              pendingVerification,
+              WEB_PARTIAL_VIRTUALIZED_CONFIRMATION_DELAY_FRAMES
+            );
+            return;
+          }
+          pendingVerification = null;
+          markStickyMeasurementVerified();
+          if (isRequestAttempt) {
+            input.log("request_fulfilled", getLogContext());
+            pendingRequest = null;
+          }
+          setBlockedReason(null);
+          return;
+        }
+
+        if (retryDisposition === "retry-verify") {
+          pendingVerification = {
+            requestId: attemptContext.requestId,
+            retries: attemptContext.retries + 1,
+          };
+          setBlockedReason("waiting_for_post_layout_verification");
+          scheduleVerification(pendingVerification);
+          return;
+        }
+
+        if (retryDisposition === "retry-scroll") {
+          pendingVerification = {
+            requestId: attemptContext.requestId,
+            retries: attemptContext.retries + 1,
+          };
+          evaluate(false, "retry_scroll");
+          return;
+        }
+
+        input.log(
+          "attempt_failed",
+          getLogContext({
+            retries: attemptContext.retries,
+            retryDisposition,
+            measurementState: getDetailedMeasurementState(measurementState),
+          })
+        );
+        pendingVerification = null;
+        if (isRequestAttempt && currentRequest) {
+          input.warn({
+            agentId: input.getAgentId(),
+            reason: currentRequest.reason,
+          });
+        }
+        setBlockedReason(
+          isRequestAttempt ? "waiting_for_post_layout_verification" : null
+        );
+      },
+    });
+  };
+
+  const runAttempt = (animated: boolean) => {
+    const measurementState = input.getMeasurementState();
+    const attemptContext: AttemptContext = {
+      requestId: pendingRequest?.id ?? null,
+      retries: pendingVerification?.retries ?? 0,
+      startedContentHeight: measurementState.contentHeight,
+      startedOffsetY: measurementState.offsetY,
+      startedViewportHeight: measurementState.viewportHeight,
+    };
+    pendingVerification = attemptContext;
+    input.log(
+      "attempt_started",
+      getLogContext({
+        animated,
+        retries: attemptContext.retries,
+        measurementState: getDetailedMeasurementState(measurementState),
+      })
+    );
+    input.scrollToBottom(animated);
+    scheduleVerification(attemptContext);
+    setBlockedReason(deriveDriverBlockedReason(input.getMeasurementState()));
+  };
+
+  const evaluate = (
+    animated: boolean,
+    reason:
+      | "request_created"
+      | "viewport_change"
+      | "content_size_change"
+      | "scroll_near_bottom_change"
+      | "history_readiness_change"
+      | "manual_reevaluate"
+      | "retry_scroll"
+  ) => {
+    input.log(
+      "evaluate_called",
+      getLogContext({
+        evaluateReason: reason,
+        animated,
+        hasAttemptHandle: attemptHandle !== null,
+        hasVerificationHandle: verificationHandle !== null,
+        pendingVerificationRequestId: pendingVerification?.requestId ?? null,
+        pendingVerificationRetries: pendingVerification?.retries ?? null,
+        measurementState: getDetailedMeasurementState(input.getMeasurementState()),
+      })
+    );
+    if (attemptHandle) {
+      return;
+    }
+    attemptHandle = input.scheduleFrame({
+      kind: "attempt",
+      callback: () => {
+        attemptHandle = null;
+        const measurementState = input.getMeasurementState();
+        const nextBlockedReason = deriveDriverBlockedReason(measurementState);
+        setBlockedReason(nextBlockedReason);
+
+        const shouldAttemptForPendingRequest =
+          pendingRequest !== null && nextBlockedReason === null;
+        const shouldAttemptForStickyVerification =
+          mode === "sticky-bottom" &&
+          pendingVerification !== null &&
+          nextBlockedReason === null;
+
+        if (
+          !shouldAttemptForPendingRequest &&
+          !shouldAttemptForStickyVerification
+        ) {
+          input.log(
+            "attempt_started",
+            getLogContext({
+              attemptPhase: "skipped",
+              evaluateReason: reason,
+              nextBlockedReason,
+              shouldAttemptForPendingRequest,
+              shouldAttemptForStickyVerification,
+              measurementState: getDetailedMeasurementState(measurementState),
+            })
+          );
+          return;
+        }
+
+        runAttempt(animated);
+      },
+    });
+  };
+
+  const createRequest = (request: BottomAnchorRouteRequest | BottomAnchorLocalRequest) => {
+    const existing = pendingRequest;
+    if (existing) {
+      input.log(
+        "request_cancelled",
+        getLogContext({
+          cancelledRequestReason: existing.reason,
+          cancelReason: "replaced_by_new_request",
+        })
+      );
+    }
+
+    cancelPendingAttempt();
+    const nextRequest: BottomAnchorRequest = {
+      id: requestSequence + 1,
+      agentId: request.agentId,
+      reason: request.reason,
+      requestKey:
+        "requestKey" in request
+          ? request.requestKey
+          : `${request.agentId}:${request.reason}:${requestSequence + 1}`,
+    };
+    requestSequence = nextRequest.id;
+    pendingRequest = nextRequest;
+    pendingVerification = null;
+    setModeInternal(
+      "requestKey" in request
+        ? "sticky-bottom"
+        : __private__.deriveModeForLocalRequest({ reason: request.reason })
+    );
+    input.log(
+      "request_created",
+      getLogContext({ requestReason: request.reason })
+    );
+    evaluate(request.reason === "jump-to-bottom", "request_created");
+  };
+
+  return {
+    destroy() {
+      cancelPendingAttempt();
+    },
+    getSnapshot() {
+      return {
+        mode,
+        pendingRequest,
+        pendingVerification,
+        blockedReason,
+      };
+    },
+    resetForAgent() {
+      lastRouteRequestKey = null;
+      pendingRequest = null;
+      blockedReason = null;
+      cancelPendingAttempt();
+      stickyMeasurementRevision = 0;
+      lastVerifiedStickyMeasurementRevision = 0;
+      mode = "sticky-bottom";
+      input.onModeChange("sticky-bottom");
+    },
+    applyRouteRequest(request) {
+      if (!request) {
+        return;
+      }
+      if (lastRouteRequestKey === request.requestKey) {
+        return;
+      }
+      lastRouteRequestKey = request.requestKey;
+      createRequest(request);
+    },
+    requestLocalAnchor(request) {
+      createRequest(request);
+    },
+    detachByUser() {
+      if (mode === "detached") {
+        return;
+      }
+      cancelPendingRequest("user_scrolled_away");
+      setModeInternal("detached");
+      input.log("detached_by_user", getLogContext());
+    },
+    handleViewportMetricsChange(params) {
+      if (
+        params.previousViewportWidth !== params.viewportWidth ||
+        params.previousViewportHeight !== params.viewportHeight
+      ) {
+        markStickyMeasurementChanged();
+      }
+      const shouldRestick = __private__.shouldRestickOnViewportChange({
+        mode,
+        previousViewportWidth: params.previousViewportWidth,
+        viewportWidth: params.viewportWidth,
+        previousViewportHeight: params.previousViewportHeight,
+        viewportHeight: params.viewportHeight,
+      });
+      if (shouldRestick && !pendingRequest) {
+        pendingVerification = { requestId: null, retries: 0 };
+      }
+      if (shouldRestick || pendingRequest) {
+        evaluate(false, "viewport_change");
+      }
+    },
+    handleContentSizeChange(params) {
+      if (params.previousContentHeight !== params.contentHeight) {
+        markStickyMeasurementChanged();
+      }
+      const shouldRestick = __private__.shouldRestickOnContentChange({
+        mode,
+        previousContentHeight: params.previousContentHeight,
+        contentHeight: params.contentHeight,
+      });
+      if (shouldRestick && !pendingRequest) {
+        pendingVerification = { requestId: null, retries: 0 };
+      }
+      if (shouldRestick || pendingRequest) {
+        evaluate(false, "content_size_change");
+      }
+    },
+    prepareForStickyViewportChange() {
+      if (mode !== "sticky-bottom") {
+        return;
+      }
+      markStickyMeasurementChanged();
+    },
+    prepareForStickyContentChange() {
+      if (mode !== "sticky-bottom") {
+        return;
+      }
+      markStickyMeasurementChanged();
+    },
+    handleScrollNearBottomChange(params) {
+      const { nextIsNearBottom, scrollDelta } = params;
+      if (
+        nextIsNearBottom &&
+        mode === "sticky-bottom" &&
+        stickyMeasurementRevision !== lastVerifiedStickyMeasurementRevision
+      ) {
+        markStickyMeasurementVerified();
+      }
+      const hasUnverifiedStickyMeasurementChange =
+        stickyMeasurementRevision !== lastVerifiedStickyMeasurementRevision;
+      if (
+        __private__.shouldDetachFromScrollAway({
+          mode,
+          nextIsNearBottom,
+          scrollDelta,
+          hasPendingRequest: pendingRequest !== null,
+          hasPendingVerification: pendingVerification !== null,
+          hasUnverifiedStickyMeasurementChange,
+        })
+      ) {
+        this.detachByUser();
+        return;
+      }
+      if (
+        mode === "sticky-bottom" &&
+        !nextIsNearBottom &&
+        hasUnverifiedStickyMeasurementChange
+      ) {
+        if (!pendingRequest && !pendingVerification) {
+          pendingVerification = { requestId: null, retries: 0 };
+        }
+        evaluate(false, "scroll_near_bottom_change");
+        return;
+      }
+      if (nextIsNearBottom && pendingRequest) {
+        evaluate(false, "scroll_near_bottom_change");
+      }
+    },
+    notifyAuthoritativeHistoryMaybeChanged() {
+      if (!pendingVerification && !pendingRequest) {
+        return;
+      }
+      evaluate(false, "history_readiness_change");
+    },
+    reevaluate(animated = false) {
+      evaluate(animated, "manual_reevaluate");
+    },
+  };
+}
+
+export const __private__ = {
+  createBottomAnchorControllerDriver,
+  deriveBottomAnchorBlockedReason,
+  deriveVerificationBlockedReason,
+  deriveRetryDisposition,
+  deriveModeForLocalRequest(input: {
+    reason: BottomAnchorLocalRequest["reason"];
+  }): BottomAnchorMode {
+    return "sticky-bottom";
+  },
+  shouldRestickOnViewportChange(input: {
+    mode: BottomAnchorMode;
+    previousViewportWidth: number;
+    viewportWidth: number;
+    previousViewportHeight: number;
+    viewportHeight: number;
+  }): boolean {
+    return (
+      input.mode === "sticky-bottom" &&
+      ((input.previousViewportHeight > 0 &&
+        input.viewportHeight > 0 &&
+        input.previousViewportHeight !== input.viewportHeight) ||
+        (input.previousViewportWidth > 0 &&
+          input.viewportWidth > 0 &&
+          input.previousViewportWidth !== input.viewportWidth))
+    );
+  },
+  shouldRestickOnContentChange(input: {
+    mode: BottomAnchorMode;
+    previousContentHeight: number;
+    contentHeight: number;
+  }): boolean {
+    return (
+      input.mode === "sticky-bottom" &&
+      input.previousContentHeight > 0 &&
+      input.contentHeight > input.previousContentHeight
+    );
+  },
+  shouldDetachFromScrollAway(input: {
+    mode: BottomAnchorMode;
+    nextIsNearBottom: boolean;
+    scrollDelta: number;
+    hasPendingRequest: boolean;
+    hasPendingVerification: boolean;
+    hasUnverifiedStickyMeasurementChange: boolean;
+  }): boolean {
+    const scrolledAwayIntentionally =
+      Math.abs(input.scrollDelta) >= USER_SCROLL_AWAY_DELTA_PX;
+    return (
+      input.mode === "sticky-bottom" &&
+      !input.nextIsNearBottom &&
+      !input.hasPendingRequest &&
+      !input.hasPendingVerification &&
+      (!input.hasUnverifiedStickyMeasurementChange || scrolledAwayIntentionally)
+    );
+  },
+};
+
+export function useBottomAnchorController(input: {
+  agentId: string;
+  routeRequest: BottomAnchorRouteRequest | null;
+  isAuthoritativeHistoryReady: boolean;
+  renderStrategy: string;
+  transportBehavior: BottomAnchorTransportBehavior;
+  getMeasurementState: () => ControllerMeasurementState;
+  isNearBottom: () => boolean;
+  scrollToBottom: (animated: boolean) => void;
+}) {
+  const [mode, setMode] = useState<BottomAnchorMode>("sticky-bottom");
+  const agentIdRef = useRef(input.agentId);
+  const readinessRef = useRef(input.isAuthoritativeHistoryReady);
+  const renderStrategyRef = useRef(input.renderStrategy);
+  const transportBehaviorRef = useRef(input.transportBehavior);
+  const getMeasurementStateRef = useRef(input.getMeasurementState);
+  const isNearBottomRef = useRef(input.isNearBottom);
+  const scrollToBottomRef = useRef(input.scrollToBottom);
+  const driverRef = useRef<BottomAnchorControllerDriver | null>(null);
+
+  agentIdRef.current = input.agentId;
+  readinessRef.current = input.isAuthoritativeHistoryReady;
+  renderStrategyRef.current = input.renderStrategy;
+  transportBehaviorRef.current = input.transportBehavior;
+  getMeasurementStateRef.current = input.getMeasurementState;
+  isNearBottomRef.current = input.isNearBottom;
+  scrollToBottomRef.current = input.scrollToBottom;
+
+  if (!driverRef.current) {
+    driverRef.current = __private__.createBottomAnchorControllerDriver({
+      getAgentId: () => agentIdRef.current,
+      getIsAuthoritativeHistoryReady: () => readinessRef.current,
+      getRenderStrategy: () => renderStrategyRef.current,
+      getTransportBehavior: () => transportBehaviorRef.current,
+      getMeasurementState: () => getMeasurementStateRef.current(),
+      isNearBottom: () => isNearBottomRef.current(),
+      scrollToBottom: (animated) => scrollToBottomRef.current(animated),
+      onModeChange: (nextMode) => setMode(nextMode),
+      log: (event, details) => logBottomAnchorEvent(event, details),
+      warn: (details) => {
+        console.warn("[BottomAnchor] request could not be fulfilled", details);
+      },
+      scheduleFrame: ({ callback, delayFrames }) =>
+        scheduleAnimationFrameWithDelay({ callback, delayFrames }),
+      cancelFrame: (handle) => cancelScheduledAnimationFrame(handle),
+    });
+  }
+
+  useEffect(() => {
+    driverRef.current?.resetForAgent();
+  }, [input.agentId]);
+
+  useEffect(() => {
+    driverRef.current?.applyRouteRequest(input.routeRequest);
+  }, [input.routeRequest]);
+
+  useEffect(() => {
+    driverRef.current?.notifyAuthoritativeHistoryMaybeChanged();
+  }, [input.isAuthoritativeHistoryReady]);
+
+  useEffect(() => {
+    return () => {
+      driverRef.current?.destroy();
+      driverRef.current = null;
+    };
+  }, []);
+
+  return {
+    mode,
+    requestLocalAnchor(request: BottomAnchorLocalRequest) {
+      driverRef.current?.requestLocalAnchor(request);
+    },
+    detachByUser() {
+      driverRef.current?.detachByUser();
+    },
+    handleViewportLayout() {},
+    handleViewportMetricsChange(params: {
+      previousViewportWidth: number;
+      viewportWidth: number;
+      previousViewportHeight: number;
+      viewportHeight: number;
+    }) {
+      driverRef.current?.handleViewportMetricsChange(params);
+    },
+    handleContentSizeChange(params: {
+      previousContentHeight: number;
+      contentHeight: number;
+    }) {
+      driverRef.current?.handleContentSizeChange(params);
+    },
+    prepareForStickyViewportChange() {
+      driverRef.current?.prepareForStickyViewportChange();
+    },
+    prepareForStickyContentChange() {
+      driverRef.current?.prepareForStickyContentChange();
+    },
+    handleScrollNearBottomChange(params: {
+      nextIsNearBottom: boolean;
+      scrollDelta: number;
+    }) {
+      driverRef.current?.handleScrollNearBottomChange(params);
+    },
+    reevaluate(animated = false) {
+      driverRef.current?.reevaluate(animated);
+    },
+  };
+}

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

@@ -3,11 +3,11 @@ import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { MicOff, Square } from "lucide-react-native";
 import { VolumeMeter } from "./volume-meter";
 import { useVoice } from "@/contexts/voice-context";
-import { useDaemonRegistry } from "@/contexts/daemon-registry-context";
+import { useHosts } from "@/runtime/host-runtime";
 
 export function VoicePanel() {
   const { theme } = useUnistyles();
-  const { daemons } = useDaemonRegistry();
+  const daemons = useHosts();
   const {
     volume,
     isMuted,

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

@@ -3,8 +3,8 @@ import { Image, Pressable, Text, View, Platform, ScrollView } from "react-native
 import { useRouter } from "expo-router";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { QrCode, Link2, ClipboardPaste } from "lucide-react-native";
-import type { HostProfile } from "@/contexts/daemon-registry-context";
-import { useDaemonRegistry } from "@/contexts/daemon-registry-context";
+import type { HostProfile } from "@/types/host-connection";
+import { useHostMutations } from "@/runtime/host-runtime";
 import { useSessionStore } from "@/stores/session-store";
 import { AddHostModal } from "./add-host-modal";
 import { PairLinkModal } from "./pair-link-modal";
@@ -87,7 +87,7 @@ export interface WelcomeScreenProps {
 export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) {
   const { theme } = useUnistyles();
   const router = useRouter();
-  const { updateHost } = useDaemonRegistry();
+  const { renameHost } = useHostMutations();
   const appVersion = resolveAppVersion();
   const appVersionText = formatVersionWithPrefix(appVersion);
   const [isDirectOpen, setIsDirectOpen] = useState(false);
@@ -201,7 +201,7 @@ export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) {
           }}
           onSave={(label) => {
             const serverId = pendingRedirectServerId;
-            void updateHost(pendingNameHost.serverId, { label }).finally(() => {
+            void renameHost(pendingNameHost.serverId, label).finally(() => {
               setPendingNameHost(null);
               setPendingRedirectServerId(null);
               finishOnboarding(serverId);

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

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

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

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

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

@@ -34,8 +34,9 @@ import {
 import {
   useSessionStore,
   type Agent,
-  type WorkspaceDescriptor,
   type SessionState,
+  type WorkspaceDescriptor,
+  normalizeWorkspaceDescriptor,
 } from "@/stores/session-store";
 import { useDraftStore } from "@/stores/draft-store";
 import type { AgentDirectoryEntry } from "@/types/agent-directory";
@@ -52,7 +53,6 @@ import {
   normalizeAgentSnapshot,
 } from "@/utils/agent-snapshots";
 import { resolveProjectPlacement } from "@/utils/project-placement";
-import { normalizeWorkspaceIdentity } from "@/utils/workspace-identity";
 import { buildDraftStoreKey } from "@/stores/draft-keys";
 import type { AttachmentMetadata } from "@/attachments/types";
 
@@ -130,24 +130,6 @@ type WorkspaceUpdatePayload = Extract<
 const getAgentIdFromUpdate = (update: AgentUpdatePayload): string =>
   update.kind === "remove" ? update.agentId : update.agent.id;
 
-function normalizeWorkspaceDescriptor(
-  payload: Extract<WorkspaceUpdatePayload, { kind: "upsert" }>["workspace"]
-): WorkspaceDescriptor {
-  const activityAt = payload.activityAt
-    ? new Date(payload.activityAt)
-    : null;
-  return {
-    id: normalizeWorkspaceIdentity(payload.id) ?? payload.id,
-    projectId: payload.projectId,
-    name: payload.name,
-    status: payload.status,
-    activityAt:
-      activityAt && !Number.isNaN(activityAt.getTime())
-        ? activityAt
-        : null,
-  };
-}
-
 // ---------------------------------------------------------------------------
 // Module-level pending agent updates buffer (scoped by serverId)
 // ---------------------------------------------------------------------------
@@ -258,6 +240,9 @@ function SessionProviderInternal({
   const markAgentHistorySynchronized = useSessionStore(
     (state) => state.markAgentHistorySynchronized
   );
+  const setAgentAuthoritativeHistoryApplied = useSessionStore(
+    (state) => state.setAgentAuthoritativeHistoryApplied
+  );
   const setHasHydratedAgents = useSessionStore(
     (state) => state.setHasHydratedAgents
   );
@@ -737,6 +722,7 @@ function SessionProviderInternal({
           next.delete(agentId);
           return next;
         });
+        setAgentAuthoritativeHistoryApplied(serverId, agentId, false);
         return;
       }
 
@@ -789,6 +775,8 @@ function SessionProviderInternal({
     ) => {
       const agentId = payload.agentId;
       const initKey = getInitKey(serverId, agentId);
+      const shouldMarkAuthoritativeHistoryApplied =
+        payload.direction === "tail" || payload.direction === "after";
 
       // Read current store state
       const session = useSessionStore.getState().sessions[serverId];
@@ -908,6 +896,9 @@ function SessionProviderInternal({
         });
       }
 
+      if (shouldMarkAuthoritativeHistoryApplied) {
+        setAgentAuthoritativeHistoryApplied(serverId, agentId, true);
+      }
       if (result.initResolution === "resolve") {
         resolveInitDeferred(initKey);
       }
@@ -922,6 +913,7 @@ function SessionProviderInternal({
       markAgentHistorySynchronized,
       requestCanonicalCatchUp,
       serverId,
+      setAgentAuthoritativeHistoryApplied,
       setAgentStreamTail,
       setAgentTimelineCursor,
       setInitializingAgents,

packages/app/src/desktop/components/desktop-permission-row.tsx

@@ -41,7 +41,7 @@ export function DesktopPermissionRow({
             <Text style={styles.permissionStatusText}>Granted</Text>
           </View>
         ) : (
-          <Button variant="secondary" size="sm" onPress={onRequest} disabled={isRequesting}>
+          <Button variant="outline" size="sm" onPress={onRequest} disabled={isRequesting}>
             {isRequesting ? "Requesting..." : "Request"}
           </Button>
         )}

packages/app/src/desktop/components/desktop-permissions-section.tsx

@@ -1,8 +1,10 @@
-import { View, Text, Pressable } from "react-native";
+import { View, Text } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { RotateCw } from "lucide-react-native";
+import { Button } from "@/components/ui/button";
 import { DesktopPermissionRow } from "@/desktop/components/desktop-permission-row";
 import { useDesktopPermissions } from "@/desktop/permissions/use-desktop-permissions";
+import { settingsStyles } from "@/styles/settings";
 
 export function DesktopPermissionsSection() {
   const { theme } = useUnistyles();
@@ -22,26 +24,23 @@ export function DesktopPermissionsSection() {
   const isBusy = isRefreshing || requestingPermission !== null;
 
   return (
-    <View style={styles.section}>
+    <View style={settingsStyles.section}>
       <View style={styles.permissionSectionHeader}>
-        <Text style={styles.sectionTitle}>Desktop Permissions</Text>
-        <Pressable
-          style={({ pressed }) => [
-            styles.permissionRefreshButton,
-            isBusy && styles.permissionRefreshButtonDisabled,
-            pressed && { opacity: 0.85 },
-          ]}
+        <Text style={settingsStyles.sectionTitle}>Desktop Permissions</Text>
+        <Button
+          variant="ghost"
+          size="sm"
+          leftIcon={<RotateCw size={theme.iconSize.md} color={theme.colors.foregroundMuted} />}
           onPress={() => {
             void refreshPermissions();
           }}
           disabled={isBusy}
-          accessibilityRole="button"
           accessibilityLabel="Refresh desktop permissions"
         >
-          <RotateCw size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
-        </Pressable>
+          {isRefreshing ? "Refreshing..." : "Refresh"}
+        </Button>
       </View>
-      <View style={styles.audioCard}>
+      <View style={settingsStyles.card}>
         <DesktopPermissionRow
           title="Notifications"
           status={snapshot?.notifications ?? null}
@@ -65,16 +64,6 @@ export function DesktopPermissionsSection() {
 }
 
 const styles = StyleSheet.create((theme) => ({
-  section: {
-    marginBottom: theme.spacing[6],
-  },
-  sectionTitle: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.xs,
-    fontWeight: theme.fontWeight.normal,
-    marginBottom: 0,
-    marginLeft: theme.spacing[1],
-  },
   permissionSectionHeader: {
     flexDirection: "row",
     alignItems: "center",
@@ -82,24 +71,4 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
     marginBottom: theme.spacing[3],
   },
-  permissionRefreshButton: {
-    width: 34,
-    height: 34,
-    borderRadius: theme.borderRadius.md,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    backgroundColor: theme.colors.surface2,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  permissionRefreshButtonDisabled: {
-    opacity: theme.opacity[50],
-  },
-  audioCard: {
-    backgroundColor: theme.colors.surface2,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    overflow: "hidden",
-  },
 }));

packages/app/src/desktop/components/desktop-updates-section.tsx

@@ -1,169 +1,458 @@
-import { useCallback, useState } from "react";
-import { Alert, Text, View } from "react-native";
-import * as Clipboard from "expo-clipboard";
-import { useFocusEffect } from "@react-navigation/native";
-import { StyleSheet } from "react-native-unistyles";
-import { Button } from "@/components/ui/button";
-import { confirmDialog } from "@/utils/confirm-dialog";
+import { useCallback, useEffect, useState } from 'react'
+import { ActivityIndicator, Alert, Image, Text, View } from 'react-native'
+import * as Clipboard from 'expo-clipboard'
+import * as QRCode from 'qrcode'
+import { useFocusEffect } from '@react-navigation/native'
+import { StyleSheet, useUnistyles } from 'react-native-unistyles'
+import { settingsStyles } from '@/styles/settings'
 import {
-  buildDaemonUpdateDiagnostics,
-  formatVersionWithPrefix,
-  getLocalDaemonVersion,
-  isVersionMismatch,
-  runLocalDaemonUpdate,
-  shouldShowDesktopUpdateSection,
-} from "@/desktop/updates/desktop-updates";
+  ArrowUpRight,
+  Play,
+  Pause,
+  RotateCw,
+  Terminal,
+  Copy,
+  FileText,
+  Smartphone,
+} from 'lucide-react-native'
+import { AdaptiveModalSheet } from '@/components/adaptive-modal-sheet'
+import { Button } from '@/components/ui/button'
+import { useAppSettings } from '@/hooks/use-settings'
+import { confirmDialog } from '@/utils/confirm-dialog'
+import { openExternalUrl } from '@/utils/open-external-url'
+import { formatVersionWithPrefix, isVersionMismatch } from '@/desktop/updates/desktop-updates'
+import {
+  getCliSymlinkInstructions,
+  getManagedDaemonLogs,
+  getManagedDaemonPairing,
+  getManagedDaemonStatus,
+  restartManagedDaemon,
+  shouldUseManagedDesktopDaemon,
+  startManagedDaemon,
+  stopManagedDaemon,
+  type CliSymlinkInstructions,
+  type ManagedDaemonLogs,
+  type ManagedPairingOffer,
+  type ManagedDaemonStatus,
+} from '@/desktop/managed-runtime/managed-runtime'
 
 export interface LocalDaemonSectionProps {
-  appVersion: string | null;
+  appVersion: string | null
 }
 
 export function LocalDaemonSection({ appVersion }: LocalDaemonSectionProps) {
-  const showSection = shouldShowDesktopUpdateSection();
-  const [localDaemonVersion, setLocalDaemonVersion] = useState<string | null>(null);
-  const [localDaemonVersionError, setLocalDaemonVersionError] = useState<string | null>(null);
-  const [isUpdatingLocalDaemon, setIsUpdatingLocalDaemon] = useState(false);
-  const [localDaemonUpdateMessage, setLocalDaemonUpdateMessage] = useState<string | null>(null);
-  const [localDaemonUpdateDiagnostics, setLocalDaemonUpdateDiagnostics] = useState<string | null>(
-    null
-  );
+  const { theme } = useUnistyles()
+  const showSection = shouldUseManagedDesktopDaemon()
+  const { settings, updateSettings } = useAppSettings()
+  const [managedStatus, setManagedStatus] = useState<ManagedDaemonStatus | null>(null)
+  const [statusError, setStatusError] = useState<string | null>(null)
+  const [isRestartingDaemon, setIsRestartingDaemon] = useState(false)
+  const [isUpdatingDaemonManagement, setIsUpdatingDaemonManagement] = useState(false)
+  const [isLoadingCliSymlinkInstructions, setIsLoadingCliSymlinkInstructions] = useState(false)
+  const [statusMessage, setStatusMessage] = useState<string | null>(null)
+  const [cliStatusMessage, setCliStatusMessage] = useState<string | null>(null)
+  const [managedLogs, setManagedLogs] = useState<ManagedDaemonLogs | null>(null)
+  const [isLogsModalOpen, setIsLogsModalOpen] = useState(false)
+  const [isPairingModalOpen, setIsPairingModalOpen] = useState(false)
+  const [isCliSymlinkModalOpen, setIsCliSymlinkModalOpen] = useState(false)
+  const [isLoadingPairing, setIsLoadingPairing] = useState(false)
+  const [pairingOffer, setPairingOffer] = useState<ManagedPairingOffer | null>(null)
+  const [cliSymlinkInstructions, setCliSymlinkInstructions] =
+    useState<CliSymlinkInstructions | null>(null)
+  const [pairingStatusMessage, setPairingStatusMessage] = useState<string | null>(null)
+
+  const loadManagedStatus = useCallback(() => {
+    if (!showSection) {
+      return Promise.resolve()
+    }
+    return Promise.all([getManagedDaemonStatus(), getManagedDaemonLogs()])
+      .then(([status, logs]) => {
+        setManagedStatus(status)
+        setManagedLogs(logs)
+        setStatusError(null)
+      })
+      .catch((error) => {
+        const message = error instanceof Error ? error.message : String(error)
+        setStatusError(message)
+      })
+  }, [showSection])
 
   useFocusEffect(
     useCallback(() => {
       if (!showSection) {
-        return undefined;
+        return undefined
       }
+      void loadManagedStatus()
+      return undefined
+    }, [loadManagedStatus, showSection])
+  )
 
-      void getLocalDaemonVersion().then((result) => {
-        setLocalDaemonVersion(result.version);
-        setLocalDaemonVersionError(result.error);
-      });
-      return undefined;
-    }, [showSection])
-  );
-
-  const localDaemonVersionText = formatVersionWithPrefix(localDaemonVersion);
-  const daemonVersionMismatch = isVersionMismatch(appVersion, localDaemonVersion);
-  const daemonVersionHint = localDaemonVersionError ?? "Daemon installed on this computer.";
+  const localDaemonVersionText = formatVersionWithPrefix(managedStatus?.runtimeVersion ?? null)
+  const daemonVersionMismatch = isVersionMismatch(appVersion, managedStatus?.runtimeVersion ?? null)
+  const daemonStatusStateText =
+    statusError ?? (managedStatus?.status === 'running' ? managedStatus.status : 'not running')
+  const daemonStatusDetailText = `PID ${managedStatus?.pid ? managedStatus.pid : '—'}`
+  const isDaemonManagementPaused = !settings.manageBuiltInDaemon
+  const daemonActionLabel = managedStatus?.status === 'running' ? 'Restart daemon' : 'Start daemon'
+  const daemonActionMessage =
+    managedStatus?.status === 'running'
+      ? 'Restarts the built-in daemon.'
+      : 'Starts the built-in daemon.'
 
   const handleUpdateLocalDaemon = useCallback(() => {
     if (!showSection) {
-      return;
+      return
     }
-    if (isUpdatingLocalDaemon) {
-      return;
+    if (isRestartingDaemon) {
+      return
     }
 
     void confirmDialog({
-      title: "Update local daemon",
+      title: daemonActionLabel,
       message:
-        "This updates the Paseo daemon on this computer. A restart is required afterwards.",
-      confirmLabel: "Update daemon",
-      cancelLabel: "Cancel",
+        managedStatus?.status === 'running'
+          ? 'This will restart the built-in daemon. The app will reconnect automatically.'
+          : 'This will start the built-in daemon.',
+      confirmLabel: daemonActionLabel,
+      cancelLabel: 'Cancel',
     })
       .then((confirmed) => {
         if (!confirmed) {
-          return;
+          return
         }
 
-        setIsUpdatingLocalDaemon(true);
-        setLocalDaemonUpdateMessage(null);
-        setLocalDaemonUpdateDiagnostics(null);
+        setIsRestartingDaemon(true)
+        setStatusMessage(null)
 
-        void runLocalDaemonUpdate()
-          .then((result) => {
-            const diagnostics = buildDaemonUpdateDiagnostics(result);
-            if (result.exitCode !== 0) {
-              setLocalDaemonUpdateMessage(
-                `Local daemon update failed (exit code ${result.exitCode}). Copy diagnostics below to troubleshoot.`
-              );
-              setLocalDaemonUpdateDiagnostics(diagnostics);
-              return;
-            }
+        const action =
+          managedStatus?.status === 'running' ? restartManagedDaemon : startManagedDaemon
 
-            setLocalDaemonUpdateMessage(
-              "Local daemon update finished. Restart is required: run `paseo daemon restart` on this computer."
-            );
-            if (result.stdout.trim().length > 0 || result.stderr.trim().length > 0) {
-              setLocalDaemonUpdateDiagnostics(diagnostics);
-            }
-
-            void getLocalDaemonVersion().then((versionResult) => {
-              setLocalDaemonVersion(versionResult.version);
-              setLocalDaemonVersionError(versionResult.error);
-            });
+        void action()
+          .then((status) => {
+            setManagedStatus(status)
+            setStatusMessage(
+              managedStatus?.status === 'running' ? 'Daemon restarted.' : 'Daemon started.'
+            )
+            return loadManagedStatus()
           })
           .catch((error) => {
-            console.error("[Settings] Failed to update local daemon", error);
-            const message = error instanceof Error ? error.message : String(error);
-            setLocalDaemonUpdateMessage(
-              "Local daemon update failed before completion. Copy diagnostics below to troubleshoot."
-            );
-            setLocalDaemonUpdateDiagnostics(
-              buildDaemonUpdateDiagnostics({
-                exitCode: -1,
-                stdout: "",
-                stderr: message,
-              })
-            );
+            console.error('[Settings] Failed to change managed daemon state', error)
+            const message = error instanceof Error ? error.message : String(error)
+            setStatusMessage(`${daemonActionLabel} failed: ${message}`)
           })
           .finally(() => {
-            setIsUpdatingLocalDaemon(false);
-          });
+            setIsRestartingDaemon(false)
+          })
       })
       .catch((error) => {
-        console.error("[Settings] Failed to open daemon update confirmation", error);
-        Alert.alert("Error", "Unable to open the daemon update confirmation dialog.");
-      });
-  }, [isUpdatingLocalDaemon, showSection]);
+        console.error('[Settings] Failed to open managed daemon action confirmation', error)
+        Alert.alert('Error', 'Unable to open the daemon confirmation dialog.')
+      })
+  }, [daemonActionLabel, isRestartingDaemon, loadManagedStatus, managedStatus?.status, showSection])
 
-  const handleCopyDaemonDiagnostics = useCallback(() => {
-    if (!localDaemonUpdateDiagnostics) {
-      return;
+  const handleToggleDaemonManagement = useCallback(() => {
+    if (isUpdatingDaemonManagement) {
+      return
     }
 
-    void Clipboard.setStringAsync(localDaemonUpdateDiagnostics)
-      .then(() => {
-        Alert.alert("Copied", "Daemon update diagnostics copied.");
+    if (!settings.manageBuiltInDaemon) {
+      setIsUpdatingDaemonManagement(true)
+      setStatusMessage(null)
+      void updateSettings({ manageBuiltInDaemon: true })
+        .then(() => {
+          setStatusMessage('Built-in daemon management resumed.')
+        })
+        .catch((error) => {
+          console.error('[Settings] Failed to update built-in daemon management', error)
+          Alert.alert('Error', 'Unable to update built-in daemon management.')
+        })
+        .finally(() => {
+          setIsUpdatingDaemonManagement(false)
+        })
+      return
+    }
+
+    void confirmDialog({
+      title: 'Pause built-in daemon',
+      message:
+        'This will stop the built-in daemon immediately. Running agents and terminals connected to the built-in daemon will be stopped.',
+      confirmLabel: 'Pause and stop',
+      cancelLabel: 'Cancel',
+      destructive: true,
+    })
+      .then((confirmed) => {
+        if (!confirmed) {
+          return
+        }
+
+        setIsUpdatingDaemonManagement(true)
+        setStatusMessage(null)
+
+        const stopPromise =
+          managedStatus?.status === 'running'
+            ? stopManagedDaemon()
+            : Promise.resolve(managedStatus ?? null)
+
+        void stopPromise
+          .then(() => updateSettings({ manageBuiltInDaemon: false }))
+          .then(() => loadManagedStatus())
+          .then(() => {
+            setStatusMessage('Built-in daemon paused and stopped.')
+          })
+          .catch((error) => {
+            console.error('[Settings] Failed to pause built-in daemon management', error)
+            Alert.alert('Error', 'Unable to pause built-in daemon management.')
+          })
+          .finally(() => {
+            setIsUpdatingDaemonManagement(false)
+          })
       })
       .catch((error) => {
-        console.error("[Settings] Failed to copy daemon update diagnostics", error);
-        Alert.alert("Error", "Unable to copy diagnostics.");
-      });
-  }, [localDaemonUpdateDiagnostics]);
+        console.error('[Settings] Failed to open built-in daemon pause confirmation', error)
+        Alert.alert('Error', 'Unable to open the daemon confirmation dialog.')
+      })
+  }, [
+    isUpdatingDaemonManagement,
+    loadManagedStatus,
+    managedStatus,
+    settings.manageBuiltInDaemon,
+    updateSettings,
+  ])
+
+  const handleOpenCliSymlinkInstructions = useCallback(() => {
+    if (!showSection || isLoadingCliSymlinkInstructions) {
+      return
+    }
+    setIsLoadingCliSymlinkInstructions(true)
+    setCliStatusMessage(null)
+    void getCliSymlinkInstructions()
+      .then((instructions) => {
+        setCliSymlinkInstructions(instructions)
+        setIsCliSymlinkModalOpen(true)
+      })
+      .catch((error) => {
+        const message = error instanceof Error ? error.message : String(error)
+        setCliStatusMessage(`Unable to load CLI symlink instructions: ${message}`)
+      })
+      .finally(() => {
+        setIsLoadingCliSymlinkInstructions(false)
+      })
+  }, [isLoadingCliSymlinkInstructions, showSection])
+
+  const handleCopyCliSymlinkCommands = useCallback(() => {
+    if (!cliSymlinkInstructions?.commands) {
+      return
+    }
+    void Clipboard.setStringAsync(cliSymlinkInstructions.commands)
+      .then(() => {
+        Alert.alert('Copied', 'CLI symlink commands copied.')
+      })
+      .catch((error) => {
+        console.error('[Settings] Failed to copy CLI symlink commands', error)
+        Alert.alert('Error', 'Unable to copy CLI symlink commands.')
+      })
+  }, [cliSymlinkInstructions?.commands])
+
+  const handleCopyLogPath = useCallback(() => {
+    const logPath = managedLogs?.logPath
+    if (!logPath) {
+      return
+    }
+
+    void Clipboard.setStringAsync(logPath)
+      .then(() => {
+        Alert.alert('Copied', 'Log path copied.')
+      })
+      .catch((error) => {
+        console.error('[Settings] Failed to copy log path', error)
+        Alert.alert('Error', 'Unable to copy log path.')
+      })
+  }, [managedLogs?.logPath])
+
+  const handleOpenLogs = useCallback(() => {
+    if (!managedLogs) {
+      return
+    }
+    setIsLogsModalOpen(true)
+  }, [managedLogs])
+
+  const handleOpenPairingModal = useCallback(() => {
+    if (isLoadingPairing) {
+      return
+    }
+
+    setIsPairingModalOpen(true)
+    setIsLoadingPairing(true)
+    setPairingStatusMessage(null)
+
+    void getManagedDaemonPairing()
+      .then((pairing) => {
+        setPairingOffer(pairing)
+        if (!pairing.relayEnabled || !pairing.url) {
+          setPairingStatusMessage('Relay pairing is not available.')
+        }
+      })
+      .catch((error) => {
+        const message = error instanceof Error ? error.message : String(error)
+        setPairingOffer(null)
+        setPairingStatusMessage(`Unable to load pairing offer: ${message}`)
+      })
+      .finally(() => {
+        setIsLoadingPairing(false)
+      })
+  }, [isLoadingPairing])
+
+  const handleCopyPairingLink = useCallback(() => {
+    if (!pairingOffer?.url) {
+      return
+    }
+    void Clipboard.setStringAsync(pairingOffer.url)
+      .then(() => {
+        Alert.alert('Copied', 'Pairing link copied.')
+      })
+      .catch((error) => {
+        console.error('[Settings] Failed to copy pairing link', error)
+        Alert.alert('Error', 'Unable to copy pairing link.')
+      })
+  }, [pairingOffer?.url])
 
   if (!showSection) {
-    return null;
+    return null
   }
 
   return (
-    <View style={styles.section}>
-      <Text style={styles.sectionTitle}>Local daemon</Text>
-      <View style={styles.card}>
+    <View style={settingsStyles.section}>
+      <View style={styles.sectionHeader}>
+        <Text style={settingsStyles.sectionTitle}>Built-in daemon</Text>
+        <Button
+          variant="ghost"
+          size="sm"
+          leftIcon={<ArrowUpRight size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />}
+          textStyle={styles.sectionLinkText}
+          style={styles.sectionLink}
+          onPress={() => void openExternalUrl(ADVANCED_DAEMON_SETTINGS_URL)}
+          accessibilityLabel="Open advanced daemon settings"
+        >
+          Advanced settings
+        </Button>
+      </View>
+      <View style={settingsStyles.card}>
         <View style={styles.row}>
           <View style={styles.rowContent}>
-            <Text style={styles.rowTitle}>Version</Text>
-            <Text style={styles.hintText}>{daemonVersionHint}</Text>
+            <Text style={styles.rowTitle}>Status</Text>
+            <Text style={styles.hintText}>Only the built-in managed daemon is shown here.</Text>
+          </View>
+          <View style={styles.statusValueGroup}>
+            <Text style={styles.valueText}>{daemonStatusStateText}</Text>
+            <Text style={styles.valueSubtext}>{daemonStatusDetailText}</Text>
           </View>
-          <Text style={styles.valueText}>{localDaemonVersionText}</Text>
         </View>
         <View style={[styles.row, styles.rowBorder]}>
           <View style={styles.rowContent}>
-            <Text style={styles.rowTitle}>Update daemon</Text>
+            <Text style={styles.rowTitle}>Daemon management</Text>
             <Text style={styles.hintText}>
-              Updates the daemon on this computer only. Requires a restart.
+              {isDaemonManagementPaused
+                ? 'Paused. The built-in daemon stays stopped until you start it again.'
+                : 'Enabled. Paseo can manage the built-in daemon from the desktop app.'}
             </Text>
-            {localDaemonUpdateMessage ? (
-              <Text style={styles.statusText}>{localDaemonUpdateMessage}</Text>
-            ) : null}
           </View>
           <Button
-            variant="secondary"
+            variant="outline"
             size="sm"
-            onPress={handleUpdateLocalDaemon}
-            disabled={isUpdatingLocalDaemon}
+            leftIcon={
+              isDaemonManagementPaused ? (
+                <Play size={theme.iconSize.sm} color={theme.colors.foreground} />
+              ) : (
+                <Pause size={theme.iconSize.sm} color={theme.colors.foreground} />
+              )
+            }
+            onPress={handleToggleDaemonManagement}
+            disabled={isUpdatingDaemonManagement}
           >
-            {isUpdatingLocalDaemon ? "Updating..." : "Update daemon"}
+            {isUpdatingDaemonManagement
+              ? isDaemonManagementPaused
+                ? 'Resuming...'
+                : 'Pausing...'
+              : isDaemonManagementPaused
+                ? 'Resume'
+                : 'Pause'}
+          </Button>
+        </View>
+        <View style={[styles.row, styles.rowBorder]}>
+          <View style={styles.rowContent}>
+            <Text style={styles.rowTitle}>{daemonActionLabel}</Text>
+            <Text style={styles.hintText}>{daemonActionMessage}</Text>
+            {statusMessage ? <Text style={styles.statusText}>{statusMessage}</Text> : null}
+          </View>
+          <Button
+            variant="outline"
+            size="sm"
+            leftIcon={<RotateCw size={theme.iconSize.sm} color={theme.colors.foreground} />}
+            onPress={handleUpdateLocalDaemon}
+            disabled={isRestartingDaemon}
+          >
+            {isRestartingDaemon
+              ? managedStatus?.status === 'running'
+                ? 'Restarting...'
+                : 'Starting...'
+              : daemonActionLabel}
+          </Button>
+        </View>
+        <View style={[styles.row, styles.rowBorder]}>
+          <View style={styles.rowContent}>
+            <Text style={styles.rowTitle}>Command line (CLI)</Text>
+            <Text style={styles.hintText}>Shows the command to add `paseo` to your terminal.</Text>
+            {cliStatusMessage ? <Text style={styles.statusText}>{cliStatusMessage}</Text> : null}
+          </View>
+          <Button
+            variant="outline"
+            size="sm"
+            leftIcon={<Terminal size={theme.iconSize.sm} color={theme.colors.foreground} />}
+            onPress={handleOpenCliSymlinkInstructions}
+            disabled={isLoadingCliSymlinkInstructions}
+          >
+            {isLoadingCliSymlinkInstructions ? 'Loading...' : 'Show instructions'}
+          </Button>
+        </View>
+        <View style={[styles.row, styles.rowBorder]}>
+          <View style={styles.rowContent}>
+            <Text style={styles.rowTitle}>Log file</Text>
+            <Text style={styles.hintText}>{managedLogs?.logPath ?? 'Log path unavailable.'}</Text>
+          </View>
+          <View style={styles.actionGroup}>
+            {managedLogs?.logPath ? (
+              <Button
+                variant="outline"
+                size="sm"
+                leftIcon={<Copy size={theme.iconSize.sm} color={theme.colors.foreground} />}
+                onPress={handleCopyLogPath}
+              >
+                Copy path
+              </Button>
+            ) : null}
+            <Button
+              variant="outline"
+              size="sm"
+              leftIcon={<FileText size={theme.iconSize.sm} color={theme.colors.foreground} />}
+              onPress={handleOpenLogs}
+              disabled={!managedLogs}
+            >
+              Open logs
+            </Button>
+          </View>
+        </View>
+        <View style={[styles.row, styles.rowBorder]}>
+          <View style={styles.rowContent}>
+            <Text style={styles.rowTitle}>Pair device</Text>
+            <Text style={styles.hintText}>Connect your phone to this computer.</Text>
+          </View>
+          <Button
+            variant="outline"
+            size="sm"
+            leftIcon={<Smartphone size={theme.iconSize.sm} color={theme.colors.foreground} />}
+            onPress={handleOpenPairingModal}
+          >
+            Pair device
           </Button>
         </View>
       </View>
@@ -171,51 +460,193 @@ export function LocalDaemonSection({ appVersion }: LocalDaemonSectionProps) {
       {daemonVersionMismatch ? (
         <View style={styles.warningCard}>
           <Text style={styles.warningText}>
-            Desktop app and local daemon versions differ. Keep both on the same version to avoid
-            stability issues or breaking changes.
+            App and daemon versions don't match. Update both to the same version for the best
+            experience.
           </Text>
         </View>
       ) : null}
 
-      {localDaemonUpdateDiagnostics ? (
-        <View style={styles.diagnosticsCard}>
-          <View style={styles.diagnosticsHeader}>
-            <Text style={styles.diagnosticsTitle}>Daemon update diagnostics</Text>
-            <Button variant="secondary" size="sm" onPress={handleCopyDaemonDiagnostics}>
-              Copy output
+      <AdaptiveModalSheet
+        visible={isCliSymlinkModalOpen}
+        onClose={() => setIsCliSymlinkModalOpen(false)}
+        title="Add paseo to your shell"
+        testID="managed-daemon-cli-symlink-dialog"
+      >
+        <View style={styles.modalBody}>
+          <Text style={styles.hintText}>
+            Paseo does not add the command for you. Run the command below in your terminal.
+          </Text>
+          {cliSymlinkInstructions?.detail ? (
+            <Text style={styles.hintText}>{cliSymlinkInstructions.detail}</Text>
+          ) : null}
+          <Text style={styles.codeBlock} selectable>
+            {cliSymlinkInstructions?.commands ?? ''}
+          </Text>
+          <View style={styles.modalActions}>
+            <Button variant="outline" size="sm" onPress={() => setIsCliSymlinkModalOpen(false)}>
+              Close
+            </Button>
+            <Button size="sm" onPress={handleCopyCliSymlinkCommands}>
+              Copy commands
             </Button>
           </View>
-          <Text style={styles.diagnosticsText} selectable>
-            {localDaemonUpdateDiagnostics}
+        </View>
+      </AdaptiveModalSheet>
+
+      <AdaptiveModalSheet
+        visible={isPairingModalOpen}
+        onClose={() => setIsPairingModalOpen(false)}
+        title="Pair device"
+        testID="managed-daemon-pairing-dialog"
+      >
+        <PairingOfferDialogContent
+          isLoading={isLoadingPairing}
+          pairingOffer={pairingOffer}
+          statusMessage={pairingStatusMessage}
+          onCopyLink={handleCopyPairingLink}
+        />
+      </AdaptiveModalSheet>
+
+      <AdaptiveModalSheet
+        visible={isLogsModalOpen}
+        onClose={() => setIsLogsModalOpen(false)}
+        title="Daemon logs"
+        testID="managed-daemon-logs-dialog"
+        snapPoints={['70%', '92%']}
+      >
+        <View style={styles.modalBody}>
+          <Text style={styles.hintText}>{managedLogs?.logPath ?? 'Log path unavailable.'}</Text>
+          <Text style={styles.logOutput} selectable>
+            {managedLogs?.contents.length ? managedLogs.contents : '(log file is empty)'}
           </Text>
         </View>
-      ) : null}
+      </AdaptiveModalSheet>
     </View>
-  );
+  )
+}
+
+const ADVANCED_DAEMON_SETTINGS_URL = 'https://paseo.sh/docs/configuration'
+
+function PairingOfferDialogContent(input: {
+  isLoading: boolean
+  pairingOffer: ManagedPairingOffer | null
+  statusMessage: string | null
+  onCopyLink: () => void
+}) {
+  const { isLoading, pairingOffer, statusMessage, onCopyLink } = input
+  const [qrDataUrl, setQrDataUrl] = useState<string | null>(null)
+  const [qrError, setQrError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+
+    if (!pairingOffer?.url) {
+      setQrDataUrl(null)
+      setQrError(null)
+      return () => {
+        cancelled = true
+      }
+    }
+
+    setQrError(null)
+    setQrDataUrl(null)
+
+    void QRCode.toDataURL(pairingOffer.url, {
+      errorCorrectionLevel: 'M',
+      margin: 1,
+      width: 320,
+    })
+      .then((dataUrl) => {
+        if (cancelled) {
+          return
+        }
+        setQrDataUrl(dataUrl)
+      })
+      .catch((error) => {
+        if (cancelled) {
+          return
+        }
+        setQrError(error instanceof Error ? error.message : String(error))
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [pairingOffer?.url])
+
+  if (isLoading) {
+    return (
+      <View style={styles.pairingState}>
+        <ActivityIndicator size="small" />
+        <Text style={styles.hintText}>Loading pairing offer…</Text>
+      </View>
+    )
+  }
+
+  if (statusMessage) {
+    return (
+      <View style={styles.modalBody}>
+        <Text style={styles.hintText}>{statusMessage}</Text>
+      </View>
+    )
+  }
+
+  if (!pairingOffer?.url) {
+    return (
+      <View style={styles.modalBody}>
+        <Text style={styles.hintText}>Pairing offer unavailable.</Text>
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.modalBody}>
+      <Text style={styles.hintText}>
+        Scan this QR code in Paseo, or copy the pairing link below.
+      </Text>
+      <View style={styles.qrCard}>
+        {qrDataUrl ? (
+          <Image source={{ uri: qrDataUrl }} style={styles.qrImage} />
+        ) : qrError ? (
+          <Text style={styles.hintText}>QR unavailable: {qrError}</Text>
+        ) : (
+          <ActivityIndicator size="small" />
+        )}
+      </View>
+      <Text style={styles.linkLabel}>Pairing link</Text>
+      <Text style={styles.linkText} selectable>
+        {pairingOffer.url}
+      </Text>
+      <View style={styles.modalActions}>
+        <Button variant="outline" size="sm" onPress={onCopyLink}>
+          Copy link
+        </Button>
+      </View>
+    </View>
+  )
 }
 
 const styles = StyleSheet.create((theme) => ({
-  section: {
-    marginBottom: theme.spacing[6],
-  },
-  sectionTitle: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.xs,
-    fontWeight: theme.fontWeight.normal,
+  sectionHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
     marginBottom: theme.spacing[3],
     marginLeft: theme.spacing[1],
   },
-  card: {
-    backgroundColor: theme.colors.surface2,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    overflow: "hidden",
+  sectionLink: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: theme.spacing[1],
+  },
+  sectionLinkText: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
   },
   row: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
     paddingVertical: theme.spacing[4],
     paddingHorizontal: theme.spacing[4],
   },
@@ -227,6 +658,16 @@ const styles = StyleSheet.create((theme) => ({
     flex: 1,
     marginRight: theme.spacing[3],
   },
+  actionGroup: {
+    flexDirection: 'row',
+    gap: theme.spacing[2],
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end',
+  },
+  statusValueGroup: {
+    alignItems: 'flex-end',
+    gap: 2,
+  },
   rowTitle: {
     color: theme.colors.foreground,
     fontSize: theme.fontSize.base,
@@ -236,6 +677,10 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.sm,
     fontWeight: theme.fontWeight.normal,
   },
+  valueSubtext: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+  },
   hintText: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.xs,
@@ -251,7 +696,7 @@ const styles = StyleSheet.create((theme) => ({
     borderRadius: theme.borderRadius.lg,
     borderWidth: 1,
     borderColor: theme.colors.palette.amber[500],
-    backgroundColor: "rgba(245, 158, 11, 0.12)",
+    backgroundColor: 'rgba(245, 158, 11, 0.12)',
     paddingVertical: theme.spacing[2],
     paddingHorizontal: theme.spacing[3],
   },
@@ -259,28 +704,61 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.palette.amber[500],
     fontSize: theme.fontSize.xs,
   },
-  diagnosticsCard: {
-    marginTop: theme.spacing[3],
+  modalBody: {
+    gap: theme.spacing[3],
+    paddingBottom: theme.spacing[2],
+  },
+  pairingState: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.spacing[3],
+    paddingVertical: theme.spacing[6],
+  },
+  qrCard: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    minHeight: 220,
+    minWidth: 220,
+    padding: theme.spacing[4],
     borderRadius: theme.borderRadius.lg,
     borderWidth: 1,
     borderColor: theme.colors.border,
-    backgroundColor: theme.colors.surface1,
-    padding: theme.spacing[3],
-    gap: theme.spacing[2],
+    backgroundColor: theme.colors.surface0,
   },
-  diagnosticsHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: theme.spacing[2],
+  qrImage: {
+    width: 220,
+    height: 220,
   },
-  diagnosticsTitle: {
+  linkLabel: {
     color: theme.colors.foreground,
     fontSize: theme.fontSize.sm,
   },
-  diagnosticsText: {
+  linkText: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.xs,
-    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+    lineHeight: 18,
   },
-}));
+  logOutput: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+    lineHeight: 18,
+  },
+  codeBlock: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+    lineHeight: 18,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    borderRadius: theme.borderRadius.md,
+    backgroundColor: theme.colors.surface0,
+    padding: theme.spacing[3],
+  },
+  modalActions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: theme.spacing[2],
+  },
+}))

packages/app/src/desktop/managed-runtime/managed-runtime.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { parseCliSymlinkInstructions } from "./managed-runtime";
+
+describe("parseCliSymlinkInstructions", () => {
+  it("parses CLI symlink instructions from the desktop backend", () => {
+    expect(
+      parseCliSymlinkInstructions({
+        title: "Add paseo to your shell",
+        detail: "Create a symlink to the Paseo desktop executable.",
+        commands: "sudo ln -sf /Applications/Paseo.app/Contents/MacOS/Paseo /usr/local/bin/paseo",
+      })
+    ).toEqual({
+      title: "Add paseo to your shell",
+      detail: "Create a symlink to the Paseo desktop executable.",
+      commands: "sudo ln -sf /Applications/Paseo.app/Contents/MacOS/Paseo /usr/local/bin/paseo",
+    });
+  });
+
+  it("rejects non-object payloads", () => {
+    expect(() => parseCliSymlinkInstructions(null)).toThrow(
+      "Unexpected CLI symlink instructions response."
+    );
+  });
+});

packages/app/src/desktop/managed-runtime/managed-runtime.ts

@@ -0,0 +1,232 @@
+import { invokeDesktopCommand } from '@/desktop/tauri/invoke-desktop-command'
+import { getTauri, isTauriEnvironment } from '@/utils/tauri'
+
+export type ManagedRuntimeStatus = {
+  runtimeId: string
+  runtimeVersion: string
+  runtimeRoot: string
+}
+
+export type ManagedDaemonStatus = {
+  runtimeId: string
+  runtimeVersion: string
+  serverId: string
+  status: string
+  listen: string
+  hostname: string | null
+  pid: number | null
+  home: string
+}
+
+export type ManagedDaemonLogs = {
+  logPath: string
+  contents: string
+}
+
+export type ManagedPairingOffer = {
+  relayEnabled: boolean
+  url: string | null
+  qr: string | null
+}
+
+export type CliSymlinkInstructions = {
+  title: string
+  detail: string
+  commands: string
+}
+
+export type ManagedTcpSettings = {
+  enabled: boolean
+  host: string
+  port: number
+}
+
+export type LocalTransportTarget = {
+  transportType: 'socket' | 'pipe'
+  transportPath: string
+}
+
+type LocalTransportEventPayload = {
+  sessionId: string
+  kind: 'open' | 'message' | 'close' | 'error'
+  text?: string | null
+  binaryBase64?: string | null
+  code?: number | null
+  reason?: string | null
+  error?: string | null
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+function toStringOrNull(value: unknown): string | null {
+  return typeof value === 'string' && value.trim().length > 0 ? value : null
+}
+
+function toNumberOrNull(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value) ? value : null
+}
+
+function parseManagedRuntimeStatus(raw: unknown): ManagedRuntimeStatus {
+  if (!isRecord(raw)) {
+    throw new Error('Unexpected managed runtime status response.')
+  }
+  return {
+    runtimeId: toStringOrNull(raw.runtimeId) ?? '',
+    runtimeVersion: toStringOrNull(raw.runtimeVersion) ?? '',
+    runtimeRoot: toStringOrNull(raw.runtimeRoot) ?? '',
+  }
+}
+
+function parseManagedDaemonStatus(raw: unknown): ManagedDaemonStatus {
+  if (!isRecord(raw)) {
+    throw new Error('Unexpected managed daemon status response.')
+  }
+  return {
+    runtimeId: toStringOrNull(raw.runtimeId) ?? '',
+    runtimeVersion: toStringOrNull(raw.runtimeVersion) ?? '',
+    serverId: toStringOrNull(raw.serverId) ?? '',
+    status: toStringOrNull(raw.status) ?? 'unknown',
+    listen: toStringOrNull(raw.listen) ?? '',
+    hostname: toStringOrNull(raw.hostname),
+    pid: toNumberOrNull(raw.pid),
+    home: toStringOrNull(raw.home) ?? '',
+  }
+}
+
+function parseManagedDaemonLogs(raw: unknown): ManagedDaemonLogs {
+  if (!isRecord(raw)) {
+    throw new Error('Unexpected managed daemon logs response.')
+  }
+  return {
+    logPath: toStringOrNull(raw.logPath) ?? '',
+    contents: typeof raw.contents === 'string' ? raw.contents : '',
+  }
+}
+
+function parseManagedPairingOffer(raw: unknown): ManagedPairingOffer {
+  if (!isRecord(raw)) {
+    throw new Error('Unexpected managed daemon pairing response.')
+  }
+  return {
+    relayEnabled: raw.relayEnabled === true,
+    url: toStringOrNull(raw.url),
+    qr: toStringOrNull(raw.qr),
+  }
+}
+
+function parseCliSymlinkInstructionsInternal(raw: unknown): CliSymlinkInstructions | null {
+  if (!isRecord(raw)) {
+    return null
+  }
+  return {
+    title: toStringOrNull(raw.title) ?? '',
+    detail: toStringOrNull(raw.detail) ?? '',
+    commands: toStringOrNull(raw.commands) ?? '',
+  }
+}
+
+export function shouldUseManagedDesktopDaemon(): boolean {
+  return isTauriEnvironment() && getTauri() !== null
+}
+
+export async function getManagedRuntimeStatus(): Promise<ManagedRuntimeStatus> {
+  return parseManagedRuntimeStatus(await invokeDesktopCommand('managed_runtime_status'))
+}
+
+export async function getManagedDaemonStatus(): Promise<ManagedDaemonStatus> {
+  return parseManagedDaemonStatus(await invokeDesktopCommand('managed_daemon_status'))
+}
+
+export async function startManagedDaemon(): Promise<ManagedDaemonStatus> {
+  return parseManagedDaemonStatus(await invokeDesktopCommand('start_managed_daemon'))
+}
+
+export async function stopManagedDaemon(): Promise<ManagedDaemonStatus> {
+  return parseManagedDaemonStatus(await invokeDesktopCommand('stop_managed_daemon'))
+}
+
+export async function restartManagedDaemon(): Promise<ManagedDaemonStatus> {
+  return parseManagedDaemonStatus(await invokeDesktopCommand('restart_managed_daemon'))
+}
+
+export async function getManagedDaemonLogs(): Promise<ManagedDaemonLogs> {
+  return parseManagedDaemonLogs(await invokeDesktopCommand('managed_daemon_logs'))
+}
+
+export async function getManagedDaemonPairing(): Promise<ManagedPairingOffer> {
+  return parseManagedPairingOffer(await invokeDesktopCommand('managed_daemon_pairing'))
+}
+
+export function parseCliSymlinkInstructions(raw: unknown): CliSymlinkInstructions {
+  const instructions = parseCliSymlinkInstructionsInternal(raw)
+  if (!instructions) {
+    throw new Error('Unexpected CLI symlink instructions response.')
+  }
+  return instructions
+}
+
+export async function getCliSymlinkInstructions(): Promise<CliSymlinkInstructions> {
+  return parseCliSymlinkInstructions(await invokeDesktopCommand('cli_symlink_instructions'))
+}
+
+export async function updateManagedDaemonTcpSettings(
+  settings: ManagedTcpSettings
+): Promise<ManagedDaemonStatus> {
+  return parseManagedDaemonStatus(
+    await invokeDesktopCommand('update_managed_daemon_tcp_settings', { settings })
+  )
+}
+
+export type LocalTransportEventUnlisten = () => void
+export type LocalTransportEventHandler = (payload: LocalTransportEventPayload) => void
+
+export async function listenToLocalTransportEvents(
+  handler: LocalTransportEventHandler
+): Promise<LocalTransportEventUnlisten> {
+  const listen = getTauri()?.event?.listen
+  if (typeof listen !== 'function') {
+    throw new Error('Tauri event API is unavailable.')
+  }
+  const unlisten = await listen('local-daemon-transport-event', (event: unknown) => {
+    const payload = isRecord(event) && isRecord(event.payload) ? event.payload : null
+    if (!payload) {
+      return
+    }
+    handler({
+      sessionId: toStringOrNull(payload.sessionId) ?? '',
+      kind: (toStringOrNull(payload.kind) ?? 'error') as LocalTransportEventPayload['kind'],
+      text: toStringOrNull(payload.text),
+      binaryBase64: toStringOrNull(payload.binaryBase64),
+      code: toNumberOrNull(payload.code),
+      reason: toStringOrNull(payload.reason),
+      error: toStringOrNull(payload.error),
+    })
+  })
+  return typeof unlisten === 'function' ? unlisten : () => {}
+}
+
+export async function openLocalTransportSession(target: LocalTransportTarget): Promise<string> {
+  const raw = await invokeDesktopCommand<unknown>('open_local_daemon_transport', target)
+  if (typeof raw !== 'string' || raw.trim().length === 0) {
+    throw new Error('Unexpected local transport session response.')
+  }
+  return raw
+}
+
+export async function sendLocalTransportMessage(input: {
+  sessionId: string
+  text?: string
+  binaryBase64?: string
+}): Promise<void> {
+  await invokeDesktopCommand('send_local_daemon_transport_message', {
+    sessionId: input.sessionId,
+    ...(input.text ? { text: input.text } : {}),
+    ...(input.binaryBase64 ? { binaryBase64: input.binaryBase64 } : {}),
+  })
+}
+
+export async function closeLocalTransportSession(sessionId: string): Promise<void> {
+  await invokeDesktopCommand('close_local_daemon_transport', { sessionId })
+}

packages/app/src/hooks/use-agent-attention-clear.ts

@@ -0,0 +1,152 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AppState, Platform } from "react-native";
+import type { DaemonClient } from "@server/client/daemon-client";
+import {
+  shouldClearAgentAttention,
+  type AgentAttentionClearTrigger,
+} from "@/utils/agent-attention";
+
+type AttentionReason = "finished" | "error" | "permission" | null | undefined;
+
+interface UseAgentAttentionClearParams {
+  agentId: string | null | undefined;
+  client: DaemonClient | null;
+  isConnected: boolean;
+  requiresAttention: boolean | null | undefined;
+  attentionReason: AttentionReason;
+  isScreenFocused: boolean;
+}
+
+interface AgentAttentionClearController {
+  clearOnInputFocus: () => void;
+  clearOnPromptSend: () => void;
+  clearOnAgentBlur: () => void;
+}
+
+function getIsAppVisible(): boolean {
+  const isAppStateActive = AppState.currentState === "active";
+  if (Platform.OS !== "web") {
+    return isAppStateActive;
+  }
+  const documentVisible =
+    typeof document === "undefined" || document.visibilityState === "visible";
+  const windowFocused =
+    typeof document === "undefined" ||
+    typeof document.hasFocus !== "function" ||
+    document.hasFocus();
+  return isAppStateActive && documentVisible && windowFocused;
+}
+
+export function useAgentAttentionClear({
+  agentId,
+  client,
+  isConnected,
+  requiresAttention,
+  attentionReason,
+  isScreenFocused,
+}: UseAgentAttentionClearParams): AgentAttentionClearController {
+  const [isAppVisible, setIsAppVisible] = useState<boolean>(() => getIsAppVisible());
+  const deferredFocusEntryClearRef = useRef(false);
+  const prevRequiresAttentionRef = useRef(Boolean(requiresAttention));
+  const prevActivelyViewedRef = useRef(isScreenFocused && getIsAppVisible());
+  const prevScreenFocusedRef = useRef(false);
+  const prevAppVisibleRef = useRef(getIsAppVisible());
+
+  const clearAttention = useCallback(
+    (trigger: AgentAttentionClearTrigger) => {
+      const resolvedAgentId = agentId?.trim();
+      if (!client || !resolvedAgentId) {
+        return;
+      }
+      if (
+        !shouldClearAgentAttention({
+          agentId: resolvedAgentId,
+          isConnected,
+          requiresAttention,
+          attentionReason,
+          trigger,
+          hasDeferredFocusEntryClear: deferredFocusEntryClearRef.current,
+        })
+      ) {
+        return;
+      }
+      deferredFocusEntryClearRef.current = false;
+      client.clearAgentAttention(resolvedAgentId);
+    },
+    [agentId, attentionReason, client, isConnected, requiresAttention]
+  );
+
+  useEffect(() => {
+    const updateVisibility = () => {
+      setIsAppVisible(getIsAppVisible());
+    };
+
+    const appStateSubscription = AppState.addEventListener(
+      "change",
+      updateVisibility
+    );
+
+    if (Platform.OS === "web" && typeof document !== "undefined") {
+      document.addEventListener("visibilitychange", updateVisibility);
+      window.addEventListener("focus", updateVisibility);
+      window.addEventListener("blur", updateVisibility);
+
+      return () => {
+        appStateSubscription.remove();
+        document.removeEventListener("visibilitychange", updateVisibility);
+        window.removeEventListener("focus", updateVisibility);
+        window.removeEventListener("blur", updateVisibility);
+      };
+    }
+
+    return () => {
+      appStateSubscription.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!requiresAttention) {
+      deferredFocusEntryClearRef.current = false;
+    }
+  }, [requiresAttention]);
+
+  useEffect(() => {
+    const isActivelyViewed = isScreenFocused && isAppVisible;
+    if (
+      !prevRequiresAttentionRef.current &&
+      Boolean(requiresAttention) &&
+      prevActivelyViewedRef.current &&
+      isActivelyViewed
+    ) {
+      deferredFocusEntryClearRef.current = true;
+    }
+    prevRequiresAttentionRef.current = Boolean(requiresAttention);
+    prevActivelyViewedRef.current = isActivelyViewed;
+  }, [isAppVisible, isScreenFocused, requiresAttention]);
+
+  useEffect(() => {
+    const enteredScreenFocus =
+      !prevScreenFocusedRef.current && isScreenFocused && isAppVisible;
+    const resumedIntoFocusedAgent =
+      !prevAppVisibleRef.current && isAppVisible && isScreenFocused;
+
+    if (enteredScreenFocus || resumedIntoFocusedAgent) {
+      clearAttention("focus-entry");
+    }
+
+    prevScreenFocusedRef.current = isScreenFocused;
+    prevAppVisibleRef.current = isAppVisible;
+  }, [clearAttention, isAppVisible, isScreenFocused]);
+
+  return {
+    clearOnInputFocus: useCallback(() => {
+      clearAttention("input-focus");
+    }, [clearAttention]),
+    clearOnPromptSend: useCallback(() => {
+      clearAttention("prompt-send");
+    }, [clearAttention]),
+    clearOnAgentBlur: useCallback(() => {
+      clearAttention("agent-blur");
+    }, [clearAttention]),
+  };
+}

packages/app/src/hooks/use-agent-form-state.ts

@@ -9,7 +9,7 @@ import type {
   AgentModelDefinition,
   AgentProvider,
 } from "@server/server/agent/agent-sdk-types";
-import { useDaemonRegistry } from "@/contexts/daemon-registry-context";
+import { useHosts } from "@/runtime/host-runtime";
 import { useHostRuntimeSession } from "@/runtime/host-runtime";
 import { useFormPreferences, type FormPreferences } from "./use-form-preferences";
 
@@ -327,7 +327,7 @@ export function useAgentFormState(
     updateProviderPreferences,
   } = useFormPreferences();
 
-  const { daemons } = useDaemonRegistry();
+  const daemons = useHosts();
 
   // Build a set of valid server IDs for preference validation
   const validServerIds = useMemo(

packages/app/src/hooks/use-agent-initialization.test.ts

@@ -64,4 +64,10 @@ describe("useAgentInitialization timeline request policy", () => {
       projection: "canonical",
     });
   });
+
+  it("does not expose an RPC-success init fallback", () => {
+    expect(
+      "shouldResolveInitFromRpcSuccess" in __private__
+    ).toBe(false);
+  });
 });

packages/app/src/hooks/use-agent-initialization.ts

@@ -62,7 +62,7 @@ export function useAgentInitialization({
       const cursor = session?.agentTimelineCursor.get(agentId);
       const initialTimelineLimit = resolveInitialTimelineLimit();
       const hasAuthoritativeHistory =
-        (session?.agentHistorySyncGeneration.get(agentId) ?? -1) >= 0;
+        session?.agentAuthoritativeHistoryApplied.get(agentId) === true;
       const timelineRequest = deriveInitialTimelineRequest({
         cursor: cursor
           ? { epoch: cursor.epoch, seq: cursor.endSeq }
@@ -95,10 +95,6 @@ export function useAgentInitialization({
 
       client
         .fetchAgentTimeline(agentId, timelineRequest)
-        .then(() => {
-          // No-op: hydration completion is handled by SessionContext
-          // when it processes fetch_agent_timeline_response.
-        })
         .catch((error) => {
           setAgentInitializing(agentId, false);
           rejectInitDeferred(

packages/app/src/hooks/use-agent-screen-state-machine.test.ts

@@ -342,6 +342,46 @@ describe("deriveAgentScreenViewState", () => {
     expect(ready.sync.status).toBe("idle");
   });
 
+  it("keeps first route entry blocked until authoritative history is applied", () => {
+    const memory = createBaseMemory();
+    const input: AgentScreenMachineInput = {
+      ...createBaseInput(),
+      agent: createAgent("agent-1"),
+      needsAuthoritativeSync: true,
+      isHistorySyncing: true,
+      hasHydratedHistoryBefore: false,
+    };
+
+    const result = deriveAgentScreenViewState({ input, memory });
+
+    expect(result.state).toEqual({
+      tag: "boot",
+      reason: "loading",
+      source: "none",
+    });
+    expect(result.memory.hasRenderedReady).toBe(false);
+    expect(result.memory.lastReadyAgent).toBeNull();
+  });
+
+  it("still allows optimistic create flow to render before authoritative history arrives", () => {
+    const memory = createBaseMemory();
+    const input: AgentScreenMachineInput = {
+      ...createBaseInput(),
+      agent: createAgentWithStatus({ id: "agent-1", status: "idle" }),
+      placeholderAgent: createAgent("agent-1"),
+      shouldUseOptimisticStream: true,
+      needsAuthoritativeSync: true,
+      isHistorySyncing: true,
+      hasHydratedHistoryBefore: false,
+    };
+
+    const result = deriveAgentScreenViewState({ input, memory });
+    const ready = expectReadyState(result.state);
+
+    expect(ready.source).toBe("optimistic");
+    expect(ready.agent.status).toBe("running");
+  });
+
   it("keeps optimistic flow non-blocking while transitioning to authoritative stream", () => {
     const initialMemory = createBaseMemory();
     const optimisticInput: AgentScreenMachineInput = {

packages/app/src/hooks/use-agent-screen-state-machine.ts

@@ -19,6 +19,16 @@ export interface AgentScreenMachineInput {
   hasHydratedHistoryBefore: boolean;
 }
 
+function shouldBlockInitialAuthoritativeReadyState(
+  input: AgentScreenMachineInput
+): boolean {
+  return (
+    !input.shouldUseOptimisticStream &&
+    !input.hasHydratedHistoryBefore &&
+    (input.needsAuthoritativeSync || input.isHistorySyncing)
+  );
+}
+
 export type AgentScreenToastLatch = "none" | "history_refresh" | "sync_error";
 
 export interface AgentScreenMachineMemory {
@@ -104,10 +114,7 @@ export function deriveAgentScreenViewState({
     input.agent && useOptimisticCreateFlowAgent && input.placeholderAgent
       ? { ...input.agent, status: input.placeholderAgent.status }
       : input.agent ?? input.placeholderAgent;
-  if (candidateAgent) {
-    nextMemory.hasRenderedReady = true;
-    nextMemory.lastReadyAgent = candidateAgent;
-  }
+  const shouldBlockReadyState = shouldBlockInitialAuthoritativeReadyState(input);
 
   if (input.missingAgentState.kind === "not_found") {
     return {
@@ -129,6 +136,22 @@ export function deriveAgentScreenViewState({
     };
   }
 
+  if (candidateAgent && shouldBlockReadyState) {
+    return {
+      state: {
+        tag: "boot",
+        reason: "loading",
+        source: "none",
+      },
+      memory: nextMemory,
+    };
+  }
+
+  if (candidateAgent) {
+    nextMemory.hasRenderedReady = true;
+    nextMemory.lastReadyAgent = candidateAgent;
+  }
+
   const displayAgent =
     candidateAgent ?? (nextMemory.hasRenderedReady ? nextMemory.lastReadyAgent : null);
   if (!displayAgent) {

packages/app/src/hooks/use-aggregated-agents.ts

@@ -1,10 +1,9 @@
 import { useMemo, useCallback, useSyncExternalStore } from "react";
 import { useShallow } from "zustand/shallow";
-import { useDaemonRegistry } from "@/contexts/daemon-registry-context";
 import { useSessionStore } from "@/stores/session-store";
 import type { AgentDirectoryEntry } from "@/types/agent-directory";
 import type { Agent } from "@/stores/session-store";
-import { getHostRuntimeStore } from "@/runtime/host-runtime";
+import { getHostRuntimeStore, useHosts } from "@/runtime/host-runtime";
 
 export interface AggregatedAgent extends AgentDirectoryEntry {
   serverId: string;
@@ -19,9 +18,12 @@ export interface AggregatedAgentsResult {
   refreshAll: () => void;
 }
 
-export function useAggregatedAgents(): AggregatedAgentsResult {
-  const { daemons } = useDaemonRegistry();
+export function useAggregatedAgents(options?: {
+  includeArchived?: boolean;
+}): AggregatedAgentsResult {
+  const daemons = useHosts();
   const runtime = getHostRuntimeStore();
+  const includeArchived = options?.includeArchived ?? false;
   const runtimeVersion = useSyncExternalStore(
     (onStoreChange) => runtime.subscribeAll(onStoreChange),
     () => runtime.getVersion(),
@@ -55,7 +57,7 @@ export function useAggregatedAgents(): AggregatedAgentsResult {
       }
       const serverLabel = serverLabelById.get(serverId) ?? serverId;
       for (const agent of agents.values()) {
-        if (agent.archivedAt) {
+        if (!includeArchived && agent.archivedAt) {
           continue;
         }
         const nextAgent: AggregatedAgent = {
@@ -112,7 +114,7 @@ export function useAggregatedAgents(): AggregatedAgentsResult {
       isInitialLoad,
       isRevalidating,
     };
-  }, [daemons, runtime, runtimeVersion, sessionAgents]);
+  }, [daemons, includeArchived, runtime, runtimeVersion, sessionAgents]);
 
   return {
     ...result,

packages/app/src/hooks/use-all-agents-list.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it } from "vitest";
+import { __private__ } from "./use-all-agents-list";
+import type { Agent } from "@/stores/session-store";
+
+function makeAgent(input?: Partial<Agent>): Agent {
+  const timestamp = new Date("2026-03-08T10:00:00.000Z");
+  return {
+    serverId: "server-1",
+    id: input?.id ?? "agent-1",
+    provider: input?.provider ?? "codex",
+    status: input?.status ?? "idle",
+    createdAt: input?.createdAt ?? timestamp,
+    updatedAt: input?.updatedAt ?? timestamp,
+    lastUserMessageAt: input?.lastUserMessageAt ?? null,
+    lastActivityAt: input?.lastActivityAt ?? timestamp,
+    capabilities: input?.capabilities ?? {
+      supportsStreaming: true,
+      supportsSessionPersistence: true,
+      supportsDynamicModes: true,
+      supportsMcpServers: true,
+      supportsReasoningStream: true,
+      supportsToolInvocations: true,
+    },
+    currentModeId: input?.currentModeId ?? null,
+    availableModes: input?.availableModes ?? [],
+    pendingPermissions: input?.pendingPermissions ?? [],
+    persistence: input?.persistence ?? null,
+    runtimeInfo: input?.runtimeInfo,
+    lastUsage: input?.lastUsage,
+    lastError: input?.lastError ?? null,
+    title: input?.title ?? "Agent",
+    cwd: input?.cwd ?? "/tmp/project",
+    model: input?.model ?? null,
+    thinkingOptionId: input?.thinkingOptionId,
+    requiresAttention: input?.requiresAttention ?? false,
+    attentionReason: input?.attentionReason ?? null,
+    attentionTimestamp: input?.attentionTimestamp ?? null,
+    archivedAt: input?.archivedAt ?? null,
+    labels: input?.labels ?? {},
+    projectPlacement: input?.projectPlacement ?? null,
+  };
+}
+
+describe("useAllAgentsList", () => {
+  it("excludes archived agents by default", () => {
+    const visibleAgent = makeAgent({ id: "visible" });
+    const archivedAgent = makeAgent({
+      id: "archived",
+      archivedAt: new Date("2026-03-08T11:00:00.000Z"),
+    });
+
+    const result = __private__.buildAllAgentsList({
+      agents: [visibleAgent, archivedAgent],
+      serverId: "server-1",
+      serverLabel: "Local",
+      includeArchived: false,
+    });
+
+    expect(result.map((agent) => agent.id)).toEqual(["visible"]);
+  });
+
+  it("includes archived agents when requested", () => {
+    const visibleAgent = makeAgent({ id: "visible" });
+    const archivedAgent = makeAgent({
+      id: "archived",
+      archivedAt: new Date("2026-03-08T11:00:00.000Z"),
+    });
+
+    const result = __private__.buildAllAgentsList({
+      agents: [visibleAgent, archivedAgent],
+      serverId: "server-1",
+      serverLabel: "Local",
+      includeArchived: true,
+    });
+
+    expect(result.map((agent) => agent.id)).toEqual(["visible", "archived"]);
+    expect(result[1]?.archivedAt).toEqual(archivedAgent.archivedAt);
+  });
+});

packages/app/src/hooks/use-all-agents-list.ts

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from "react";
-import { useDaemonRegistry } from "@/contexts/daemon-registry-context";
+import { useHosts } from "@/runtime/host-runtime";
 import { useSessionStore, type Agent } from "@/stores/session-store";
 import {
   getHostRuntimeStore,
@@ -35,10 +35,46 @@ function toAggregatedAgent(params: {
   };
 }
 
+function buildAllAgentsList(params: {
+  agents: Iterable<Agent>;
+  serverId: string;
+  serverLabel: string;
+  includeArchived: boolean;
+}): AggregatedAgent[] {
+  const list: AggregatedAgent[] = [];
+
+  for (const agent of params.agents) {
+    const aggregated = toAggregatedAgent({
+      source: agent,
+      serverId: params.serverId,
+      serverLabel: params.serverLabel,
+    });
+    if (!params.includeArchived && aggregated.archivedAt) {
+      continue;
+    }
+    list.push(aggregated);
+  }
+
+  list.sort((left, right) => {
+    const leftRunning = left.status === "running";
+    const rightRunning = right.status === "running";
+    if (leftRunning && !rightRunning) {
+      return -1;
+    }
+    if (!leftRunning && rightRunning) {
+      return 1;
+    }
+    return right.lastActivityAt.getTime() - left.lastActivityAt.getTime();
+  });
+
+  return list;
+}
+
 export function useAllAgentsList(options?: {
   serverId?: string | null;
+  includeArchived?: boolean;
 }): AggregatedAgentsResult {
-  const { daemons } = useDaemonRegistry();
+  const daemons = useHosts();
   const runtime = getHostRuntimeStore();
 
   const serverId = useMemo(() => {
@@ -47,6 +83,7 @@ export function useAllAgentsList(options?: {
       ? value.trim()
       : null;
   }, [options?.serverId]);
+  const includeArchived = options?.includeArchived ?? false;
 
   const liveAgents = useSessionStore((state) =>
     serverId ? state.sessions[serverId]?.agents ?? null : null
@@ -66,34 +103,13 @@ export function useAllAgentsList(options?: {
     }
     const serverLabel =
       daemons.find((daemon) => daemon.serverId === serverId)?.label ?? serverId;
-    const list: AggregatedAgent[] = [];
-
-    for (const agent of liveAgents.values()) {
-      const aggregated = toAggregatedAgent({
-        source: agent,
-        serverId,
-        serverLabel,
-      });
-      if (aggregated.archivedAt) {
-        continue;
-      }
-      list.push(aggregated);
-    }
-
-    list.sort((left, right) => {
-      const leftRunning = left.status === "running";
-      const rightRunning = right.status === "running";
-      if (leftRunning && !rightRunning) {
-        return -1;
-      }
-      if (!leftRunning && rightRunning) {
-        return 1;
-      }
-      return right.lastActivityAt.getTime() - left.lastActivityAt.getTime();
+    return buildAllAgentsList({
+      agents: liveAgents.values(),
+      serverId,
+      serverLabel,
+      includeArchived,
     });
-
-    return list;
-  }, [daemons, liveAgents, serverId]);
+  }, [daemons, includeArchived, liveAgents, serverId]);
 
   const isDirectoryLoading = Boolean(serverId && isHostRuntimeDirectoryLoading(snapshot));
   const isInitialLoad = isDirectoryLoading && agents.length === 0;
@@ -107,3 +123,8 @@ export function useAllAgentsList(options?: {
     refreshAll,
   };
 }
+
+export const __private__ = {
+  buildAllAgentsList,
+  toAggregatedAgent,
+};

packages/app/src/hooks/use-command-center.ts

@@ -3,13 +3,15 @@ import type { TextInput } from "react-native";
 import { router, usePathname, type Href } from "expo-router";
 import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
 import { keyboardActionDispatcher } from "@/keyboard/keyboard-action-dispatcher";
-import { useAggregatedAgents, type AggregatedAgent } from "@/hooks/use-aggregated-agents";
+import { useHosts } from "@/runtime/host-runtime";
+import { useAllAgentsList } from "@/hooks/use-all-agents-list";
+import type { AggregatedAgent } from "@/hooks/use-aggregated-agents";
 import {
   clearCommandCenterFocusRestoreElement,
   takeCommandCenterFocusRestoreElement,
 } from "@/utils/command-center-focus-restore";
 import {
-  buildHostNewAgentRoute,
+  buildHostOpenProjectRoute,
   buildHostWorkspaceAgentRoute,
   buildHostSettingsRoute,
   parseHostAgentRouteFromPathname,
@@ -23,8 +25,7 @@ function isMatch(agent: AggregatedAgent, query: string): boolean {
   const q = query.toLowerCase();
   const title = (agent.title ?? "New agent").toLowerCase();
   const cwd = agent.cwd.toLowerCase();
-  const host = agent.serverLabel.toLowerCase();
-  return title.includes(q) || cwd.includes(q) || host.includes(q);
+  return title.includes(q) || cwd.includes(q);
 }
 
 function sortAgents(left: AggregatedAgent, right: AggregatedAgent): number {
@@ -55,10 +56,10 @@ type CommandCenterActionDefinition = {
 const COMMAND_CENTER_ACTIONS: readonly CommandCenterActionDefinition[] = [
   {
     id: "new-agent",
-    title: "New agent",
+    title: "Open project",
     icon: "plus",
     shortcutKeys: ["mod", "shift", "O"],
-    keywords: ["new", "new agent", "create", "start", "launch", "agent"],
+    keywords: ["open", "project", "folder", "workspace", "repo"],
     buildRoute: ({ newAgentRoute }) => newAgentRoute,
   },
   {
@@ -103,34 +104,49 @@ export type CommandCenterItem =
 
 export function useCommandCenter() {
   const pathname = usePathname();
-  const { agents } = useAggregatedAgents();
+  const daemons = useHosts();
   const open = useKeyboardShortcutsStore((s) => s.commandCenterOpen);
   const setOpen = useKeyboardShortcutsStore((s) => s.setCommandCenterOpen);
   const inputRef = useRef<TextInput>(null);
   const didNavigateRef = useRef(false);
   const prevOpenRef = useRef(open);
+  const activeIndexRef = useRef(0);
+  const itemsRef = useRef<CommandCenterItem[]>([]);
+  const handleCloseRef = useRef<() => void>(() => undefined);
+  const handleSelectItemRef = useRef<(item: CommandCenterItem) => void>(() => undefined);
   const [query, setQuery] = useState("");
   const [activeIndex, setActiveIndex] = useState(0);
 
+  const activeServerId = useMemo(() => {
+    const serverIdFromPath = parseServerIdFromPathname(pathname);
+    if (serverIdFromPath) {
+      const routeMatch = daemons.find((entry) => entry.serverId === serverIdFromPath);
+      if (routeMatch) {
+        return routeMatch.serverId;
+      }
+    }
+    return daemons[0]?.serverId ?? null;
+  }, [daemons, pathname]);
+
+  const { agents } = useAllAgentsList({
+    serverId: activeServerId,
+  });
+
   const agentResults = useMemo(() => {
     const filtered = agents.filter((agent) => isMatch(agent, query));
     filtered.sort(sortAgents);
     return filtered;
   }, [agents, query]);
 
-  const fallbackServerId = agents[0]?.serverId ?? null;
-
   const newAgentRoute = useMemo<Href>(() => {
-    const serverIdFromPath =
-      parseServerIdFromPathname(pathname) ?? fallbackServerId;
-    return serverIdFromPath ? (buildHostNewAgentRoute(serverIdFromPath) as Href) : "/";
-  }, [fallbackServerId, pathname]);
+    const serverIdFromPath = activeServerId;
+    return serverIdFromPath ? (buildHostOpenProjectRoute(serverIdFromPath) as Href) : "/";
+  }, [activeServerId]);
 
   const settingsRoute = useMemo<Href>(() => {
-    const serverIdFromPath =
-      parseServerIdFromPathname(pathname) ?? fallbackServerId;
+    const serverIdFromPath = activeServerId;
     return serverIdFromPath ? (buildHostSettingsRoute(serverIdFromPath) as Href) : "/";
-  }, [fallbackServerId, pathname]);
+  }, [activeServerId]);
 
   const actionItems = useMemo(() => {
     return COMMAND_CENTER_ACTIONS.filter((action) =>
@@ -185,12 +201,18 @@ export function useCommandCenter() {
     [pathname, setOpen]
   );
 
+  const setProjectPickerOpen = useKeyboardShortcutsStore((s) => s.setProjectPickerOpen);
+
   const handleSelectAction = useCallback((action: CommandCenterActionItem) => {
-    didNavigateRef.current = true;
     clearCommandCenterFocusRestoreElement();
     setOpen(false);
+    if (action.id === "new-agent") {
+      setProjectPickerOpen(true);
+      return;
+    }
+    didNavigateRef.current = true;
     router.push(action.route);
-  }, [setOpen]);
+  }, [setOpen, setProjectPickerOpen]);
 
   const handleSelectItem = useCallback(
     (item: CommandCenterItem) => {
@@ -203,6 +225,22 @@ export function useCommandCenter() {
     [handleSelectAction, handleSelectAgent]
   );
 
+  useEffect(() => {
+    activeIndexRef.current = activeIndex;
+  }, [activeIndex]);
+
+  useEffect(() => {
+    itemsRef.current = items;
+  }, [items]);
+
+  useEffect(() => {
+    handleCloseRef.current = handleClose;
+  }, [handleClose]);
+
+  useEffect(() => {
+    handleSelectItemRef.current = handleSelectItem;
+  }, [handleSelectItem]);
+
   useEffect(() => {
     const prevOpen = prevOpenRef.current;
     prevOpenRef.current = open;
@@ -253,6 +291,7 @@ export function useCommandCenter() {
     if (!open) return;
 
     const handler = (event: KeyboardEvent) => {
+      const currentItems = itemsRef.current;
       const key = event.key;
       if (
         key !== "ArrowDown" &&
@@ -265,26 +304,29 @@ export function useCommandCenter() {
 
       if (key === "Escape") {
         event.preventDefault();
-        handleClose();
+        handleCloseRef.current();
         return;
       }
 
       if (key === "Enter") {
-        if (items.length === 0) return;
+        if (currentItems.length === 0) return;
         event.preventDefault();
-        const index = Math.max(0, Math.min(activeIndex, items.length - 1));
-        handleSelectItem(items[index]!);
+        const index = Math.max(
+          0,
+          Math.min(activeIndexRef.current, currentItems.length - 1)
+        );
+        handleSelectItemRef.current(currentItems[index]!);
         return;
       }
 
       if (key === "ArrowDown" || key === "ArrowUp") {
-        if (items.length === 0) return;
+        if (currentItems.length === 0) return;
         event.preventDefault();
         setActiveIndex((current) => {
           const delta = key === "ArrowDown" ? 1 : -1;
           const next = current + delta;
-          if (next < 0) return items.length - 1;
-          if (next >= items.length) return 0;
+          if (next < 0) return currentItems.length - 1;
+          if (next >= currentItems.length) return 0;
           return next;
         });
       }
@@ -293,7 +335,7 @@ export function useCommandCenter() {
     // react-native-web can stop propagation on key events, so listen in capture phase.
     window.addEventListener("keydown", handler, true);
     return () => window.removeEventListener("keydown", handler, true);
-  }, [activeIndex, handleClose, handleSelectItem, items, open]);
+  }, [open]);
 
   return {
     open,

packages/app/src/hooks/use-git-actions.ts

@@ -0,0 +1,445 @@
+import { useState, useCallback, useEffect, useMemo, type ReactElement } from "react";
+import { useRouter } from "expo-router";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useCheckoutGitActionsStore } from "@/stores/checkout-git-actions-store";
+import { useCheckoutStatusQuery } from "@/hooks/use-checkout-status-query";
+import { useCheckoutPrStatusQuery } from "@/hooks/use-checkout-pr-status-query";
+import { shouldShowMergeFromBaseAction } from "@/components/git-action-visibility";
+import { buildNewAgentRoute, resolveNewAgentWorkingDir } from "@/utils/new-agent-routing";
+import { openExternalUrl } from "@/utils/open-external-url";
+import type { ActionStatus } from "@/components/ui/dropdown-menu";
+
+export type GitActionId =
+  | "commit"
+  | "push"
+  | "view-pr"
+  | "create-pr"
+  | "merge-branch"
+  | "merge-from-base"
+  | "archive-worktree";
+
+export interface GitAction {
+  id: GitActionId;
+  label: string;
+  pendingLabel: string;
+  successLabel: string;
+  disabled: boolean;
+  status: ActionStatus;
+  description?: string;
+  icon?: ReactElement;
+  handler: () => void;
+}
+
+export interface GitActions {
+  primary: GitAction | null;
+  secondary: GitAction[];
+  menu: GitAction[];
+}
+
+function openURLInNewTab(url: string): void {
+  void openExternalUrl(url);
+}
+
+interface UseGitActionsInput {
+  serverId: string;
+  cwd: string;
+  icons: {
+    commit: ReactElement;
+    push: ReactElement;
+    viewPr: ReactElement;
+    createPr: ReactElement;
+    merge: ReactElement;
+    mergeFromBase: ReactElement;
+    archive: ReactElement;
+  };
+}
+
+interface UseGitActionsResult {
+  gitActions: GitActions;
+  branchLabel: string;
+  actionError: string | null;
+  isGit: boolean;
+}
+
+export function useGitActions({ serverId, cwd, icons }: UseGitActionsInput): UseGitActionsResult {
+  const router = useRouter();
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [postShipArchiveSuggested, setPostShipArchiveSuggested] = useState(false);
+  const [shipDefault, setShipDefault] = useState<"merge" | "pr">("merge");
+
+  const { status, isLoading: isStatusLoading } =
+    useCheckoutStatusQuery({ serverId, cwd });
+  const gitStatus = status && status.isGit ? status : null;
+  const isGit = Boolean(gitStatus);
+  const notGit = status !== null && !status.isGit && !status.error;
+  const baseRef = gitStatus?.baseRef ?? undefined;
+
+  const hasUncommittedChanges = Boolean(gitStatus?.isDirty);
+
+  const {
+    status: prStatus,
+    githubFeaturesEnabled,
+  } = useCheckoutPrStatusQuery({
+    serverId,
+    cwd,
+    enabled: isGit,
+  });
+
+  // Ship default persistence
+  const shipDefaultStorageKey = useMemo(() => {
+    if (!gitStatus?.repoRoot) {
+      return null;
+    }
+    return `@paseo:changes-ship-default:${gitStatus.repoRoot}`;
+  }, [gitStatus?.repoRoot]);
+
+  useEffect(() => {
+    if (!shipDefaultStorageKey) {
+      return;
+    }
+    let isActive = true;
+    AsyncStorage.getItem(shipDefaultStorageKey)
+      .then((value) => {
+        if (!isActive) return;
+        if (value === "pr" || value === "merge") {
+          setShipDefault(value);
+        }
+      })
+      .catch(() => undefined);
+    return () => {
+      isActive = false;
+    };
+  }, [shipDefaultStorageKey]);
+
+  const persistShipDefault = useCallback(
+    async (next: "merge" | "pr") => {
+      setShipDefault(next);
+      if (!shipDefaultStorageKey) return;
+      try {
+        await AsyncStorage.setItem(shipDefaultStorageKey, next);
+      } catch {
+        // Ignore persistence failures; default will reset to "merge".
+      }
+    },
+    [shipDefaultStorageKey]
+  );
+
+  useEffect(() => {
+    setPostShipArchiveSuggested(false);
+  }, [cwd]);
+
+  // Store selectors
+  const commitStatus = useCheckoutGitActionsStore((state) =>
+    state.getStatus({ serverId, cwd, actionId: "commit" })
+  );
+  const pushStatus = useCheckoutGitActionsStore((state) =>
+    state.getStatus({ serverId, cwd, actionId: "push" })
+  );
+  const prCreateStatus = useCheckoutGitActionsStore((state) =>
+    state.getStatus({ serverId, cwd, actionId: "create-pr" })
+  );
+  const mergeStatus = useCheckoutGitActionsStore((state) =>
+    state.getStatus({ serverId, cwd, actionId: "merge-branch" })
+  );
+  const mergeFromBaseStatus = useCheckoutGitActionsStore((state) =>
+    state.getStatus({ serverId, cwd, actionId: "merge-from-base" })
+  );
+  const archiveStatus = useCheckoutGitActionsStore((state) =>
+    state.getStatus({ serverId, cwd, actionId: "archive-worktree" })
+  );
+
+  const runCommit = useCheckoutGitActionsStore((state) => state.commit);
+  const runPush = useCheckoutGitActionsStore((state) => state.push);
+  const runCreatePr = useCheckoutGitActionsStore((state) => state.createPr);
+  const runMergeBranch = useCheckoutGitActionsStore((state) => state.mergeBranch);
+  const runMergeFromBase = useCheckoutGitActionsStore((state) => state.mergeFromBase);
+  const runArchiveWorktree = useCheckoutGitActionsStore((state) => state.archiveWorktree);
+
+  // Handlers
+  const handleCommit = useCallback(() => {
+    setActionError(null);
+    void runCommit({ serverId, cwd }).catch((err) => {
+      const message = err instanceof Error ? err.message : "Failed to commit";
+      setActionError(message);
+    });
+  }, [runCommit, serverId, cwd]);
+
+  const handlePush = useCallback(() => {
+    setActionError(null);
+    void runPush({ serverId, cwd }).catch((err) => {
+      const message = err instanceof Error ? err.message : "Failed to push";
+      setActionError(message);
+    });
+  }, [runPush, serverId, cwd]);
+
+  const handleCreatePr = useCallback(() => {
+    void persistShipDefault("pr");
+    setActionError(null);
+    void runCreatePr({ serverId, cwd }).catch((err) => {
+      const message = err instanceof Error ? err.message : "Failed to create PR";
+      setActionError(message);
+    });
+  }, [persistShipDefault, runCreatePr, serverId, cwd]);
+
+  const handleMergeBranch = useCallback(() => {
+    if (!baseRef) {
+      setActionError("Base ref unavailable");
+      return;
+    }
+    void persistShipDefault("merge");
+    setActionError(null);
+    void runMergeBranch({ serverId, cwd, baseRef })
+      .then(() => {
+        setPostShipArchiveSuggested(true);
+      })
+      .catch((err) => {
+        const message = err instanceof Error ? err.message : "Failed to merge";
+        setActionError(message);
+      });
+  }, [baseRef, persistShipDefault, runMergeBranch, serverId, cwd]);
+
+  const handleMergeFromBase = useCallback(() => {
+    if (!baseRef) {
+      setActionError("Base ref unavailable");
+      return;
+    }
+    setActionError(null);
+    void runMergeFromBase({ serverId, cwd, baseRef }).catch((err) => {
+      const message = err instanceof Error ? err.message : "Failed to merge from base";
+      setActionError(message);
+    });
+  }, [baseRef, runMergeFromBase, serverId, cwd]);
+
+  const handleArchiveWorktree = useCallback(() => {
+    const worktreePath = status?.cwd;
+    if (!worktreePath) {
+      setActionError("Worktree path unavailable");
+      return;
+    }
+    setActionError(null);
+    const targetWorkingDir = resolveNewAgentWorkingDir(cwd, status ?? null);
+    void runArchiveWorktree({ serverId, cwd, worktreePath })
+      .then(() => {
+        router.replace(buildNewAgentRoute(serverId, targetWorkingDir) as any);
+      })
+      .catch((err) => {
+        const message = err instanceof Error ? err.message : "Failed to archive worktree";
+        setActionError(message);
+      });
+  }, [runArchiveWorktree, router, serverId, cwd, status]);
+
+  // Derived state
+  const actionsDisabled = !isGit || Boolean(status?.error) || isStatusLoading;
+  const aheadCount = gitStatus?.aheadBehind?.ahead ?? 0;
+  const aheadOfOrigin = gitStatus?.aheadOfOrigin ?? 0;
+  const behindOfOrigin = gitStatus?.behindOfOrigin ?? 0;
+  const baseRefLabel = useMemo(() => {
+    if (!baseRef) return "base";
+    const trimmed = baseRef.replace(/^refs\/(heads|remotes)\//, "").trim();
+    return trimmed.startsWith("origin/") ? trimmed.slice("origin/".length) : trimmed;
+  }, [baseRef]);
+  const hasPullRequest = Boolean(prStatus?.url);
+  const hasRemote = gitStatus?.hasRemote ?? false;
+  const isPaseoOwnedWorktree = gitStatus?.isPaseoOwnedWorktree ?? false;
+  const isMergedPullRequest = Boolean(prStatus?.isMerged);
+  const currentBranch = gitStatus?.currentBranch;
+  const isOnBaseBranch = currentBranch === baseRefLabel;
+  const shouldPromoteArchive =
+    isPaseoOwnedWorktree &&
+    !hasUncommittedChanges &&
+    (postShipArchiveSuggested || isMergedPullRequest);
+
+  const commitDisabled = actionsDisabled || commitStatus === "pending";
+  const prDisabled = actionsDisabled || prCreateStatus === "pending";
+  const mergeDisabled =
+    actionsDisabled || mergeStatus === "pending" || hasUncommittedChanges || !baseRef;
+  const mergeFromBaseDisabled =
+    actionsDisabled ||
+    mergeFromBaseStatus === "pending" ||
+    hasUncommittedChanges ||
+    !baseRef ||
+    (isOnBaseBranch && !hasRemote);
+  const pushDisabled =
+    actionsDisabled || pushStatus === "pending" || !(gitStatus?.hasRemote ?? false);
+  const archiveDisabled =
+    actionsDisabled ||
+    archiveStatus === "pending" ||
+    !gitStatus?.isPaseoOwnedWorktree;
+
+  const branchLabel =
+    gitStatus?.currentBranch && gitStatus.currentBranch !== "HEAD"
+      ? gitStatus.currentBranch
+      : notGit
+        ? "Not a git repository"
+        : "Unknown";
+
+  // Build actions
+  const gitActions: GitActions = useMemo(() => {
+    if (!isGit) {
+      return { primary: null, secondary: [], menu: [] };
+    }
+
+    const allActions = new Map<GitActionId, GitAction>();
+
+    allActions.set("commit", {
+      id: "commit",
+      label: "Commit",
+      pendingLabel: "Committing...",
+      successLabel: "Committed",
+      disabled: commitDisabled,
+      status: commitStatus,
+      icon: icons.commit,
+      handler: handleCommit,
+    });
+
+    if (hasRemote) {
+      allActions.set("push", {
+        id: "push",
+        label: "Push",
+        pendingLabel: "Pushing...",
+        successLabel: "Pushed",
+        disabled: pushDisabled,
+        status: pushStatus,
+        description: !hasRemote ? "No remote configured" : undefined,
+        icon: icons.push,
+        handler: handlePush,
+      });
+    }
+
+    if (githubFeaturesEnabled && hasPullRequest && prStatus?.url) {
+      const prUrl = prStatus.url;
+      allActions.set("view-pr", {
+        id: "view-pr",
+        label: "View PR",
+        pendingLabel: "View PR",
+        successLabel: "View PR",
+        disabled: false,
+        status: "idle",
+        icon: icons.viewPr,
+        handler: () => openURLInNewTab(prUrl),
+      });
+    }
+
+    if (githubFeaturesEnabled && aheadCount > 0 && !hasPullRequest) {
+      allActions.set("create-pr", {
+        id: "create-pr",
+        label: "Create PR",
+        pendingLabel: "Creating PR...",
+        successLabel: "PR Created",
+        disabled: prDisabled,
+        status: prCreateStatus,
+        icon: icons.createPr,
+        handler: handleCreatePr,
+      });
+    }
+
+    if (aheadCount > 0) {
+      allActions.set("merge-branch", {
+        id: "merge-branch",
+        label: `Merge into ${baseRefLabel}`,
+        pendingLabel: "Merging...",
+        successLabel: "Merged",
+        disabled: mergeDisabled,
+        status: mergeStatus,
+        description: hasUncommittedChanges ? "Requires clean working tree" : undefined,
+        icon: icons.merge,
+        handler: handleMergeBranch,
+      });
+    }
+
+    if (
+      shouldShowMergeFromBaseAction({
+        isOnBaseBranch,
+        hasRemote,
+        aheadOfOrigin,
+        behindOfOrigin,
+      })
+    ) {
+      allActions.set("merge-from-base", {
+        id: "merge-from-base",
+        label: isOnBaseBranch ? "Sync" : `Update from ${baseRefLabel}`,
+        pendingLabel: "Updating...",
+        successLabel: "Updated",
+        disabled: mergeFromBaseDisabled,
+        status: mergeFromBaseStatus,
+        description:
+          hasUncommittedChanges
+            ? "Requires clean working tree"
+            : isOnBaseBranch && !hasRemote
+              ? "No remote configured"
+              : undefined,
+        icon: icons.mergeFromBase,
+        handler: handleMergeFromBase,
+      });
+    }
+
+    if (isPaseoOwnedWorktree) {
+      allActions.set("archive-worktree", {
+        id: "archive-worktree",
+        label: "Archive worktree",
+        pendingLabel: "Archiving...",
+        successLabel: "Archived",
+        disabled: archiveDisabled,
+        status: archiveStatus,
+        icon: icons.archive,
+        handler: handleArchiveWorktree,
+      });
+    }
+
+    // Select primary action (priority rules)
+    let primaryActionId: GitActionId | null = null;
+
+    if (shouldPromoteArchive && allActions.has("archive-worktree")) {
+      primaryActionId = "archive-worktree";
+    } else if (hasUncommittedChanges) {
+      primaryActionId = "commit";
+    } else if (aheadOfOrigin > 0 && allActions.has("push")) {
+      primaryActionId = "push";
+    } else if (hasPullRequest) {
+      primaryActionId = "view-pr";
+    } else if (isOnBaseBranch && allActions.has("merge-from-base")) {
+      primaryActionId = "merge-from-base";
+    } else if (aheadCount > 0) {
+      const preferred: GitActionId = shipDefault === "merge" ? "merge-branch" : "create-pr";
+      const fallback: GitActionId = shipDefault === "merge" ? "create-pr" : "merge-branch";
+
+      const preferredAction = allActions.get(preferred);
+      const fallbackAction = allActions.get(fallback);
+
+      if (preferredAction && !preferredAction.disabled) {
+        primaryActionId = preferred;
+      } else if (fallbackAction && !fallbackAction.disabled) {
+        primaryActionId = fallback;
+      } else if (preferredAction) {
+        primaryActionId = preferred;
+      }
+    }
+
+    const primary = primaryActionId ? allActions.get(primaryActionId) ?? null : null;
+
+    const secondaryIds: GitActionId[] = [
+      "merge-branch",
+      "create-pr",
+      "view-pr",
+      "merge-from-base",
+      "push",
+      "archive-worktree",
+    ];
+    const secondary = secondaryIds
+      .filter(id => id !== primaryActionId && allActions.has(id))
+      .map(id => allActions.get(id)!);
+
+    const menu: GitAction[] = [];
+
+    return { primary, secondary, menu };
+  }, [
+    isGit, hasRemote, hasPullRequest, prStatus?.url, aheadCount, isPaseoOwnedWorktree, isOnBaseBranch, githubFeaturesEnabled,
+    hasUncommittedChanges, aheadOfOrigin, behindOfOrigin, shipDefault, baseRefLabel, shouldPromoteArchive,
+    commitDisabled, pushDisabled, prDisabled, mergeDisabled, mergeFromBaseDisabled, archiveDisabled,
+    commitStatus, pushStatus, prCreateStatus, mergeStatus, mergeFromBaseStatus, archiveStatus,
+    handleCommit, handlePush, handleCreatePr, handleMergeBranch, handleMergeFromBase, handleArchiveWorktree,
+    icons, baseRef,
+  ]);
+
+  return { gitActions, branchLabel, actionError, isGit };
+}

packages/app/src/hooks/use-keyboard-shortcuts.ts

@@ -2,15 +2,12 @@ import { useEffect } from "react";
 import { Platform } from "react-native";
 import { usePathname, useRouter } from "expo-router";
 import { getIsTauri } from "@/constants/layout";
-import { useSessionStore } from "@/stores/session-store";
 import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
 import { setCommandCenterFocusRestoreElement } from "@/utils/command-center-focus-restore";
 import {
-  buildHostNewAgentRoute,
   buildHostWorkspaceRoute,
   parseHostAgentRouteFromPathname,
   parseHostWorkspaceRouteFromPathname,
-  parseServerIdFromPathname,
 } from "@/utils/host-routes";
 import {
   type MessageInputKeyboardActionKind,
@@ -99,19 +96,8 @@ export function useKeyboardShortcuts({
       return true;
     };
 
-    const navigateToNewAgent = (): boolean => {
-      let targetServerId = parseServerIdFromPathname(pathname);
-
-      if (!targetServerId) {
-        const sessionServerIds = Object.keys(useSessionStore.getState().sessions);
-        targetServerId = sessionServerIds[0] ?? null;
-      }
-
-      if (!targetServerId) {
-        return false;
-      }
-
-      router.push(buildHostNewAgentRoute(targetServerId) as any);
+    const openProjectPicker = (): boolean => {
+      useKeyboardShortcutsStore.getState().setProjectPickerOpen(true);
       return true;
     };
 
@@ -171,7 +157,7 @@ export function useKeyboardShortcuts({
     }): boolean => {
       switch (input.action) {
         case "agent.new":
-          return navigateToNewAgent();
+          return openProjectPicker();
         case "workspace.tab.new":
           return requestWorkspaceTabAction({ kind: "new" });
         case "workspace.tab.close.current":