fix(tui): simplify console org display (#21339)

Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>

.github/VOUCHED.td

@@ -10,6 +10,10 @@
 adamdotdevin
 -agusbasari29 AI PR slop
 ariane-emory
+-atharvau AI review spamming literally every PR
+-borealbytes
+-danieljoshuanazareth
+-danieljoshuanazareth
 edemaine
 -florianleibert
 fwang
@@ -17,7 +21,11 @@ iamdavidhill
 jayair
 kitlangton
 kommander
+-opencode2026
+-opencodeengineer bot that spams issues
 r44vc0rp
 rekram1-node
+-robinmordasiewicz
 -spider-yamet clawdbot/llm psychosis, spam pinging the team
 thdxr
+-toastythebot

.github/actions/setup-bun/action.yml

@@ -41,5 +41,13 @@ runs:
       shell: bash
 
     - name: Install dependencies
-      run: bun install
+      run: |
+        # Workaround for patched peer variants
+        # e.g. ./patches/ for standard-openapi
+        # https://github.com/oven-sh/bun/issues/28147
+        if [ "$RUNNER_OS" = "Windows" ]; then
+          bun install --linker hoisted
+        else
+          bun install
+        fi
       shell: bash

.github/workflows/close-issues.yml

@@ -0,0 +1,24 @@
+name: close-issues
+
+on:
+  schedule:
+    - cron: "0 2 * * *" # Daily at 2:00 AM
+  workflow_dispatch:
+
+jobs:
+  close:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      issues: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Close stale issues
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: bun script/github/close-issues.ts

.github/workflows/deploy.yml

@@ -11,7 +11,7 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 jobs:
   deploy:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
 

.github/workflows/docs-locale-sync.yml

@@ -9,7 +9,8 @@ on:
 
 jobs:
   sync-locales:
-    if: github.actor != 'opencode-agent[bot]'
+    if: false
+    #if: github.actor != 'opencode-agent[bot]'
     runs-on: blacksmith-4vcpu-ubuntu-2404
     permissions:
       contents: write
@@ -34,7 +35,7 @@ jobs:
       - name: Compute changed English docs
         id: changes
         run: |
-          FILES=$(git diff --name-only "${{ github.event.before }}" "${{ github.sha }}" -- 'packages/web/src/content/docs/*.mdx' || true)
+          FILES=$(git diff --name-only "${{ github.event.before }}" "${{ github.sha }}" -- ':(glob)packages/web/src/content/docs/*.mdx' || true)
           if [ -z "$FILES" ]; then
             echo "has_changes=false" >> "$GITHUB_OUTPUT"
             echo "No English docs changed in push range"

.github/workflows/nix-hashes.yml

@@ -17,6 +17,10 @@ on:
       - "patches/**"
       - ".github/workflows/nix-hashes.yml"
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   # Native runners required: bun install cross-compilation flags (--os/--cpu)
   # do not produce byte-identical node_modules as native installs.
@@ -56,7 +60,7 @@ jobs:
           nix build ".#packages.${SYSTEM}.node_modules_updater" --no-link 2>&1 | tee "$BUILD_LOG" || true
 
           # Extract hash from build log with portability
-          HASH="$(grep -oE 'sha256-[A-Za-z0-9+/=]+' "$BUILD_LOG" | tail -n1 || true)"
+          HASH="$(nix run --inputs-from . nixpkgs#gnugrep -- -oP 'got:\s*\Ksha256-[A-Za-z0-9+/=]+' "$BUILD_LOG" | tail -n1 || true)"
 
           if [ -z "$HASH" ]; then
             echo "::error::Failed to compute hash for ${SYSTEM}"

.github/workflows/publish.yml

@@ -98,15 +98,129 @@ jobs:
       - uses: actions/upload-artifact@v4
         with:
           name: opencode-cli
-          path: packages/opencode/dist
+          path: |
+            packages/opencode/dist/opencode-darwin*
+            packages/opencode/dist/opencode-linux*
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: opencode-cli-windows
+          path: packages/opencode/dist/opencode-windows*
     outputs:
       version: ${{ needs.version.outputs.version }}
 
+  sign-cli-windows:
+    needs:
+      - build-cli
+      - version
+    runs-on: blacksmith-4vcpu-windows-2025
+    if: github.repository == 'anomalyco/opencode'
+    env:
+      AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
+      AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
+      AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+      AZURE_TRUSTED_SIGNING_ACCOUNT_NAME: ${{ secrets.AZURE_TRUSTED_SIGNING_ACCOUNT_NAME }}
+      AZURE_TRUSTED_SIGNING_CERTIFICATE_PROFILE: ${{ secrets.AZURE_TRUSTED_SIGNING_CERTIFICATE_PROFILE }}
+      AZURE_TRUSTED_SIGNING_ENDPOINT: ${{ secrets.AZURE_TRUSTED_SIGNING_ENDPOINT }}
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: opencode-cli-windows
+          path: packages/opencode/dist
+
+      - name: Setup git committer
+        id: committer
+        uses: ./.github/actions/setup-git-committer
+        with:
+          opencode-app-id: ${{ vars.OPENCODE_APP_ID }}
+          opencode-app-secret: ${{ secrets.OPENCODE_APP_SECRET }}
+
+      - name: Azure login
+        uses: azure/login@v2
+        with:
+          client-id: ${{ env.AZURE_CLIENT_ID }}
+          tenant-id: ${{ env.AZURE_TENANT_ID }}
+          subscription-id: ${{ env.AZURE_SUBSCRIPTION_ID }}
+
+      - uses: azure/artifact-signing-action@v1
+        with:
+          endpoint: ${{ env.AZURE_TRUSTED_SIGNING_ENDPOINT }}
+          signing-account-name: ${{ env.AZURE_TRUSTED_SIGNING_ACCOUNT_NAME }}
+          certificate-profile-name: ${{ env.AZURE_TRUSTED_SIGNING_CERTIFICATE_PROFILE }}
+          files: |
+            ${{ github.workspace }}\packages\opencode\dist\opencode-windows-arm64\bin\opencode.exe
+            ${{ github.workspace }}\packages\opencode\dist\opencode-windows-x64\bin\opencode.exe
+            ${{ github.workspace }}\packages\opencode\dist\opencode-windows-x64-baseline\bin\opencode.exe
+          exclude-environment-credential: true
+          exclude-workload-identity-credential: true
+          exclude-managed-identity-credential: true
+          exclude-shared-token-cache-credential: true
+          exclude-visual-studio-credential: true
+          exclude-visual-studio-code-credential: true
+          exclude-azure-cli-credential: false
+          exclude-azure-powershell-credential: true
+          exclude-azure-developer-cli-credential: true
+          exclude-interactive-browser-credential: true
+
+      - name: Verify Windows CLI signatures
+        shell: pwsh
+        run: |
+          $files = @(
+            "${{ github.workspace }}\packages\opencode\dist\opencode-windows-arm64\bin\opencode.exe",
+            "${{ github.workspace }}\packages\opencode\dist\opencode-windows-x64\bin\opencode.exe",
+            "${{ github.workspace }}\packages\opencode\dist\opencode-windows-x64-baseline\bin\opencode.exe"
+          )
+
+          foreach ($file in $files) {
+            $sig = Get-AuthenticodeSignature $file
+            if ($sig.Status -ne "Valid") {
+              throw "Invalid signature for ${file}: $($sig.Status)"
+            }
+          }
+
+      - name: Repack Windows CLI archives
+        working-directory: packages/opencode/dist
+        shell: pwsh
+        run: |
+          Compress-Archive -Path "opencode-windows-arm64\bin\*" -DestinationPath "opencode-windows-arm64.zip" -Force
+          Compress-Archive -Path "opencode-windows-x64\bin\*" -DestinationPath "opencode-windows-x64.zip" -Force
+          Compress-Archive -Path "opencode-windows-x64-baseline\bin\*" -DestinationPath "opencode-windows-x64-baseline.zip" -Force
+
+      - name: Upload signed Windows CLI release assets
+        if: needs.version.outputs.release != ''
+        shell: pwsh
+        env:
+          GH_TOKEN: ${{ steps.committer.outputs.token }}
+        run: |
+          gh release upload "v${{ needs.version.outputs.version }}" `
+            "${{ github.workspace }}\packages\opencode\dist\opencode-windows-arm64.zip" `
+            "${{ github.workspace }}\packages\opencode\dist\opencode-windows-x64.zip" `
+            "${{ github.workspace }}\packages\opencode\dist\opencode-windows-x64-baseline.zip" `
+            --clobber `
+            --repo "${{ needs.version.outputs.repo }}"
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: opencode-cli-signed-windows
+          path: |
+            packages/opencode/dist/opencode-windows-arm64
+            packages/opencode/dist/opencode-windows-x64
+            packages/opencode/dist/opencode-windows-x64-baseline
+
   build-tauri:
     needs:
       - build-cli
       - version
     continue-on-error: false
+    env:
+      AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
+      AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
+      AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+      AZURE_TRUSTED_SIGNING_ACCOUNT_NAME: ${{ secrets.AZURE_TRUSTED_SIGNING_ACCOUNT_NAME }}
+      AZURE_TRUSTED_SIGNING_CERTIFICATE_PROFILE: ${{ secrets.AZURE_TRUSTED_SIGNING_CERTIFICATE_PROFILE }}
+      AZURE_TRUSTED_SIGNING_ENDPOINT: ${{ secrets.AZURE_TRUSTED_SIGNING_ENDPOINT }}
     strategy:
       fail-fast: false
       matrix:
@@ -152,6 +266,14 @@ jobs:
 
       - uses: ./.github/actions/setup-bun
 
+      - name: Azure login
+        if: runner.os == 'Windows'
+        uses: azure/login@v2
+        with:
+          client-id: ${{ env.AZURE_CLIENT_ID }}
+          tenant-id: ${{ env.AZURE_TENANT_ID }}
+          subscription-id: ${{ env.AZURE_SUBSCRIPTION_ID }}
+
       - uses: actions/setup-node@v4
         with:
           node-version: "24"
@@ -190,6 +312,7 @@ jobs:
         env:
           OPENCODE_VERSION: ${{ needs.version.outputs.version }}
           GITHUB_TOKEN: ${{ steps.committer.outputs.token }}
+          OPENCODE_CLI_ARTIFACT: ${{ (runner.os == 'Windows' && 'opencode-cli-windows') || 'opencode-cli' }}
           RUST_TARGET: ${{ matrix.settings.target }}
           GH_TOKEN: ${{ github.token }}
           GITHUB_RUN_ID: ${{ github.run_id }}
@@ -246,11 +369,34 @@ jobs:
           APPLE_API_KEY: ${{ secrets.APPLE_API_KEY }}
           APPLE_API_KEY_PATH: ${{ runner.temp }}/apple-api-key.p8
 
+      - name: Verify signed Windows desktop artifacts
+        if: runner.os == 'Windows'
+        shell: pwsh
+        run: |
+          $files = @(
+            "${{ github.workspace }}\packages\desktop\src-tauri\sidecars\opencode-cli-${{ matrix.settings.target }}.exe"
+          )
+          $files += Get-ChildItem "${{ github.workspace }}\packages\desktop\src-tauri\target\${{ matrix.settings.target }}\release\bundle\nsis\*.exe" | Select-Object -ExpandProperty FullName
+
+          foreach ($file in $files) {
+            $sig = Get-AuthenticodeSignature $file
+            if ($sig.Status -ne "Valid") {
+              throw "Invalid signature for ${file}: $($sig.Status)"
+            }
+          }
+
   build-electron:
     needs:
       - build-cli
       - version
     continue-on-error: false
+    env:
+      AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
+      AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
+      AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+      AZURE_TRUSTED_SIGNING_ACCOUNT_NAME: ${{ secrets.AZURE_TRUSTED_SIGNING_ACCOUNT_NAME }}
+      AZURE_TRUSTED_SIGNING_CERTIFICATE_PROFILE: ${{ secrets.AZURE_TRUSTED_SIGNING_CERTIFICATE_PROFILE }}
+      AZURE_TRUSTED_SIGNING_ENDPOINT: ${{ secrets.AZURE_TRUSTED_SIGNING_ENDPOINT }}
     strategy:
       fail-fast: false
       matrix:
@@ -292,6 +438,14 @@ jobs:
 
       - uses: ./.github/actions/setup-bun
 
+      - name: Azure login
+        if: runner.os == 'Windows'
+        uses: azure/login@v2
+        with:
+          client-id: ${{ env.AZURE_CLIENT_ID }}
+          tenant-id: ${{ env.AZURE_TENANT_ID }}
+          subscription-id: ${{ env.AZURE_SUBSCRIPTION_ID }}
+
       - uses: actions/setup-node@v4
         with:
           node-version: "24"
@@ -326,6 +480,7 @@ jobs:
         env:
           OPENCODE_VERSION: ${{ needs.version.outputs.version }}
           OPENCODE_CHANNEL: ${{ (github.ref_name == 'beta' && 'beta') || 'prod' }}
+          OPENCODE_CLI_ARTIFACT: ${{ (runner.os == 'Windows' && 'opencode-cli-windows') || 'opencode-cli' }}
           RUST_TARGET: ${{ matrix.settings.target }}
           GH_TOKEN: ${{ github.token }}
           GITHUB_RUN_ID: ${{ github.run_id }}
@@ -358,6 +513,22 @@ jobs:
         env:
           OPENCODE_CHANNEL: ${{ (github.ref_name == 'beta' && 'beta') || 'prod' }}
 
+      - name: Verify signed Windows Electron artifacts
+        if: runner.os == 'Windows'
+        shell: pwsh
+        run: |
+          $files = @()
+          $files += Get-ChildItem "${{ github.workspace }}\packages\desktop-electron\dist\*.exe" | Select-Object -ExpandProperty FullName
+          $files += Get-ChildItem "${{ github.workspace }}\packages\desktop-electron\dist\*unpacked\*.exe" | Select-Object -ExpandProperty FullName
+          $files += Get-ChildItem "${{ github.workspace }}\packages\desktop-electron\dist\*unpacked\resources\opencode-cli.exe" -ErrorAction SilentlyContinue | Select-Object -ExpandProperty FullName
+
+          foreach ($file in $files | Select-Object -Unique) {
+            $sig = Get-AuthenticodeSignature $file
+            if ($sig.Status -ne "Valid") {
+              throw "Invalid signature for ${file}: $($sig.Status)"
+            }
+          }
+
       - uses: actions/upload-artifact@v4
         with:
           name: opencode-electron-${{ matrix.settings.target }}
@@ -373,6 +544,7 @@ jobs:
     needs:
       - version
       - build-cli
+      - sign-cli-windows
       - build-tauri
       - build-electron
     runs-on: blacksmith-4vcpu-ubuntu-2404
@@ -411,6 +583,16 @@ jobs:
           name: opencode-cli
           path: packages/opencode/dist
 
+      - uses: actions/download-artifact@v4
+        with:
+          name: opencode-cli-windows
+          path: packages/opencode/dist
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: opencode-cli-signed-windows
+          path: packages/opencode/dist
+
       - uses: actions/download-artifact@v4
         if: needs.version.outputs.release
         with:

.github/workflows/sign-cli.yml

@@ -1,54 +0,0 @@
-name: sign-cli
-
-on:
-  push:
-    branches:
-      - brendan/desktop-signpath
-  workflow_dispatch:
-
-permissions:
-  contents: read
-  actions: read
-
-jobs:
-  sign-cli:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
-    if: github.repository == 'anomalyco/opencode'
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-tags: true
-
-      - uses: ./.github/actions/setup-bun
-
-      - name: Build
-        run: |
-          ./packages/opencode/script/build.ts
-
-      - name: Upload unsigned Windows CLI
-        id: upload_unsigned_windows_cli
-        uses: actions/upload-artifact@v4
-        with:
-          name: unsigned-opencode-windows-cli
-          path: packages/opencode/dist/opencode-windows-x64/bin/opencode.exe
-          if-no-files-found: error
-
-      - name: Submit SignPath signing request
-        id: submit_signpath_signing_request
-        uses: signpath/github-action-submit-signing-request@v1
-        with:
-          api-token: ${{ secrets.SIGNPATH_API_KEY }}
-          organization-id: ${{ secrets.SIGNPATH_ORGANIZATION_ID }}
-          project-slug: ${{ secrets.SIGNPATH_PROJECT_SLUG }}
-          signing-policy-slug: ${{ secrets.SIGNPATH_SIGNING_POLICY_SLUG }}
-          artifact-configuration-slug: ${{ secrets.SIGNPATH_ARTIFACT_CONFIGURATION_SLUG }}
-          github-artifact-id: ${{ steps.upload_unsigned_windows_cli.outputs.artifact-id }}
-          wait-for-completion: true
-          output-artifact-directory: signed-opencode-cli
-
-      - name: Upload signed Windows CLI
-        uses: actions/upload-artifact@v4
-        with:
-          name: signed-opencode-windows-cli
-          path: signed-opencode-cli/*.exe
-          if-no-files-found: error

.github/workflows/stale-issues.yml

@@ -1,33 +0,0 @@
-name: stale-issues
-
-on:
-  schedule:
-    - cron: "30 1 * * *" # Daily at 1:30 AM
-  workflow_dispatch:
-
-env:
-  DAYS_BEFORE_STALE: 90
-  DAYS_BEFORE_CLOSE: 7
-
-jobs:
-  stale:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-    steps:
-      - uses: actions/stale@v10
-        with:
-          days-before-stale: ${{ env.DAYS_BEFORE_STALE }}
-          days-before-close: ${{ env.DAYS_BEFORE_CLOSE }}
-          stale-issue-label: "stale"
-          close-issue-message: |
-            [automated] Closing due to ${{ env.DAYS_BEFORE_STALE }}+ days of inactivity.
-
-            Feel free to reopen if you still need this!
-          stale-issue-message: |
-            [automated] This issue has had no activity for ${{ env.DAYS_BEFORE_STALE }} days.
-
-            It will be closed in ${{ env.DAYS_BEFORE_CLOSE }} days if there's no new activity.
-          remove-stale-when-updated: true
-          exempt-issue-labels: "pinned,security,feature-request,on-hold"
-          start-date: "2025-12-27"

.github/workflows/test.yml

@@ -15,6 +15,7 @@ concurrency:
 
 permissions:
   contents: read
+  checks: write
 
 jobs:
   unit:
@@ -45,25 +46,53 @@ jobs:
           git config --global user.email "bot@opencode.ai"
           git config --global user.name "opencode"
 
+      - name: Cache Turbo
+        uses: actions/cache@v4
+        with:
+          path: node_modules/.cache/turbo
+          key: turbo-${{ runner.os }}-${{ hashFiles('turbo.json', '**/package.json') }}-${{ github.sha }}
+          restore-keys: |
+            turbo-${{ runner.os }}-${{ hashFiles('turbo.json', '**/package.json') }}-
+            turbo-${{ runner.os }}-
+
       - name: Run unit tests
-        run: bun turbo test
+        run: bun turbo test:ci
+        env:
+          OPENCODE_EXPERIMENTAL_DISABLE_FILEWATCHER: ${{ runner.os == 'Windows' && 'true' || 'false' }}
+
+      - name: Publish unit reports
+        if: always()
+        uses: mikepenz/action-junit-report@v6
+        with:
+          report_paths: packages/*/.artifacts/unit/junit.xml
+          check_name: "unit results (${{ matrix.settings.name }})"
+          detailed_summary: true
+          include_time_in_summary: true
+          fail_on_failure: false
+
+      - name: Upload unit artifacts
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: unit-${{ matrix.settings.name }}-${{ github.run_attempt }}
+          include-hidden-files: true
+          if-no-files-found: ignore
+          retention-days: 7
+          path: packages/*/.artifacts/unit/junit.xml
 
   e2e:
     name: e2e (${{ matrix.settings.name }})
-    needs: unit
     strategy:
       fail-fast: false
       matrix:
         settings:
           - name: linux
             host: blacksmith-4vcpu-ubuntu-2404
-            playwright: bunx playwright install --with-deps
           - name: windows
             host: blacksmith-4vcpu-windows-2025
-            playwright: bunx playwright install
     runs-on: ${{ matrix.settings.host }}
     env:
-      PLAYWRIGHT_BROWSERS_PATH: 0
+      PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/.playwright-browsers
     defaults:
       run:
         shell: bash
@@ -76,23 +105,44 @@ jobs:
       - name: Setup Bun
         uses: ./.github/actions/setup-bun
 
-      - name: Install Playwright browsers
+      - name: Read Playwright version
+        id: playwright-version
+        run: |
+          version=$(node -e 'console.log(require("./packages/app/package.json").devDependencies["@playwright/test"])')
+          echo "version=$version" >> "$GITHUB_OUTPUT"
+
+      - name: Cache Playwright browsers
+        id: playwright-cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ github.workspace }}/.playwright-browsers
+          key: ${{ runner.os }}-${{ runner.arch }}-playwright-${{ steps.playwright-version.outputs.version }}-chromium
+
+      - name: Install Playwright system dependencies
+        if: runner.os == 'Linux'
         working-directory: packages/app
-        run: ${{ matrix.settings.playwright }}
+        run: bunx playwright install-deps chromium
+
+      - name: Install Playwright browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        working-directory: packages/app
+        run: bunx playwright install chromium
 
       - name: Run app e2e tests
         run: bun --cwd packages/app test:e2e:local
         env:
           CI: true
+          PLAYWRIGHT_JUNIT_OUTPUT: e2e/junit-${{ matrix.settings.name }}.xml
         timeout-minutes: 30
 
       - name: Upload Playwright artifacts
-        if: failure()
+        if: always()
         uses: actions/upload-artifact@v4
         with:
           name: playwright-${{ matrix.settings.name }}-${{ github.run_attempt }}
           if-no-files-found: ignore
           retention-days: 7
           path: |
+            packages/app/e2e/junit-*.xml
             packages/app/e2e/test-results
             packages/app/e2e/playwright-report

.github/workflows/vouch-manage-by-issue.yml

@@ -33,6 +33,6 @@ jobs:
         with:
           issue-id: ${{ github.event.issue.number }}
           comment-id: ${{ github.event.comment.id }}
-          roles: admin,maintain
+          roles: admin,maintain,write
         env:
           GITHUB_TOKEN: ${{ steps.committer.outputs.token }}

.gitignore

@@ -25,6 +25,7 @@ target
 
 # Local dev files
 opencode-dev
+UPCOMING_CHANGELOG.md
 logs/
 *.bun-build
 tsconfig.tsbuildinfo

.opencode/.gitignore

@@ -1,4 +1,6 @@
-plans/
-bun.lock
+node_modules
+plans
 package.json
-package-lock.json
+bun.lock
+.gitignore
+package-lock.json

.opencode/agent/docs.md

@@ -1,34 +0,0 @@
----
-description: ALWAYS use this when writing docs
-color: "#38A3EE"
----
-
-You are an expert technical documentation writer
-
-You are not verbose
-
-Use a relaxed and friendly tone
-
-The title of the page should be a word or a 2-3 word phrase
-
-The description should be one short line, should not start with "The", should
-avoid repeating the title of the page, should be 5-10 words long
-
-Chunks of text should not be more than 2 sentences long
-
-Each section is separated by a divider of 3 dashes
-
-The section titles are short with only the first letter of the word capitalized
-
-The section titles are in the imperative mood
-
-The section titles should not repeat the term used in the page title, for
-example, if the page title is "Models", avoid using a section title like "Add
-new models". This might be unavoidable in some cases, but try to avoid it.
-
-Check out the /packages/web/src/content/docs/docs/index.mdx as an example.
-
-For JS or TS code snippets remove trailing semicolons and any trailing commas
-that might not be needed.
-
-If you are making a commit prefix the commit message with `docs:`

.opencode/agent/translator.md

@@ -1,7 +1,7 @@
 ---
 description: Translate content for a specified locale while preserving technical terms
 mode: subagent
-model: opencode/gemini-3-pro
+model: opencode/gpt-5.4
 ---
 
 You are a professional translator and localization specialist.

.opencode/command/changelog.md

@@ -0,0 +1,46 @@
+---
+model: opencode/gpt-5.4
+---
+
+Create `UPCOMING_CHANGELOG.md` from the structured changelog input below.
+If `UPCOMING_CHANGELOG.md` already exists, ignore its current contents completely.
+Do not preserve, merge, or reuse text from the existing file.
+
+The input already contains the exact commit range since the last non-draft release.
+The commits are already filtered to the release-relevant packages and grouped into
+the release sections. Do not fetch GitHub releases, PRs, or build your own commit list.
+The input may also include a `## Community Contributors Input` section.
+
+Before writing any entry you keep, inspect the real diff with
+`git show --stat --format='' <hash>` or `git show --format='' <hash>` so you can
+understand the actual code changes and not just the commit message (they may be misleading).
+Do not use `git log` or author metadata when deciding attribution.
+
+Rules:
+
+- Write the final file with sections in this order:
+  `## Core`, `## TUI`, `## Desktop`, `## SDK`, `## Extensions`
+- Only include sections that have at least one notable entry
+- Keep one bullet per commit you keep
+- Skip commits that are entirely internal, CI, tests, refactors, or otherwise not user-facing
+- Start each bullet with a capital letter
+- Prefer what changed for users over what code changed internally
+- Do not copy raw commit prefixes like `fix:` or `feat:` or trailing PR numbers like `(#123)`
+- Community attribution is deterministic: only preserve an existing `(@username)` suffix from the changelog input
+- If an input bullet has no `(@username)` suffix, do not add one
+- Never add a new `(@username)` suffix from `git show`, commit authors, names, or email addresses
+- If no notable entries remain and there is no contributor block, write exactly `No notable changes.`
+- If no notable entries remain but there is a contributor block, omit all release sections and return only the contributor block
+- If the input contains `## Community Contributors Input`, append the block below that heading to the end of the final file verbatim
+- Do not add, remove, rewrite, or reorder contributor names or commit titles in that block
+- Do not derive the thank-you section from the main summary bullets
+- Do not include the heading `## Community Contributors Input` in the final file
+- Focus on writing the least words to get your point across - users will skim read the changelog, so we should be precise
+
+**Importantly, the changelog is for users (who are at least slightly technical), they may use the TUI, Desktop, SDK, Plugins and so forth. Be thorough in understanding flow on effects may not be immediately apparent. e.g. a package upgrade looks internal but may patch a bug. Or a refactor may also stabilise some race condition that fixes bugs for users. The PR title/body + commit message will give you the authors context, usually containing the outcome not just technical detail**
+
+<changelog_input>
+
+!`bun script/raw-changelog.ts $ARGUMENTS`
+
+</changelog_input>

.opencode/plugins/smoke-theme.json

@@ -0,0 +1,223 @@
+{
+  "$schema": "https://opencode.ai/theme.json",
+  "defs": {
+    "nord0": "#2E3440",
+    "nord1": "#3B4252",
+    "nord2": "#434C5E",
+    "nord3": "#4C566A",
+    "nord4": "#D8DEE9",
+    "nord5": "#E5E9F0",
+    "nord6": "#ECEFF4",
+    "nord7": "#8FBCBB",
+    "nord8": "#88C0D0",
+    "nord9": "#81A1C1",
+    "nord10": "#5E81AC",
+    "nord11": "#BF616A",
+    "nord12": "#D08770",
+    "nord13": "#EBCB8B",
+    "nord14": "#A3BE8C",
+    "nord15": "#B48EAD"
+  },
+  "theme": {
+    "primary": {
+      "dark": "nord10",
+      "light": "nord9"
+    },
+    "secondary": {
+      "dark": "nord9",
+      "light": "nord9"
+    },
+    "accent": {
+      "dark": "nord7",
+      "light": "nord7"
+    },
+    "error": {
+      "dark": "nord11",
+      "light": "nord11"
+    },
+    "warning": {
+      "dark": "nord12",
+      "light": "nord12"
+    },
+    "success": {
+      "dark": "nord14",
+      "light": "nord14"
+    },
+    "info": {
+      "dark": "nord8",
+      "light": "nord10"
+    },
+    "text": {
+      "dark": "nord6",
+      "light": "nord0"
+    },
+    "textMuted": {
+      "dark": "#8B95A7",
+      "light": "nord1"
+    },
+    "background": {
+      "dark": "nord0",
+      "light": "nord6"
+    },
+    "backgroundPanel": {
+      "dark": "nord1",
+      "light": "nord5"
+    },
+    "backgroundElement": {
+      "dark": "nord2",
+      "light": "nord4"
+    },
+    "border": {
+      "dark": "nord2",
+      "light": "nord3"
+    },
+    "borderActive": {
+      "dark": "nord3",
+      "light": "nord2"
+    },
+    "borderSubtle": {
+      "dark": "nord2",
+      "light": "nord3"
+    },
+    "diffAdded": {
+      "dark": "nord14",
+      "light": "nord14"
+    },
+    "diffRemoved": {
+      "dark": "nord11",
+      "light": "nord11"
+    },
+    "diffContext": {
+      "dark": "#8B95A7",
+      "light": "nord3"
+    },
+    "diffHunkHeader": {
+      "dark": "#8B95A7",
+      "light": "nord3"
+    },
+    "diffHighlightAdded": {
+      "dark": "nord14",
+      "light": "nord14"
+    },
+    "diffHighlightRemoved": {
+      "dark": "nord11",
+      "light": "nord11"
+    },
+    "diffAddedBg": {
+      "dark": "#36413C",
+      "light": "#E6EBE7"
+    },
+    "diffRemovedBg": {
+      "dark": "#43393D",
+      "light": "#ECE6E8"
+    },
+    "diffContextBg": {
+      "dark": "nord1",
+      "light": "nord5"
+    },
+    "diffLineNumber": {
+      "dark": "nord2",
+      "light": "nord4"
+    },
+    "diffAddedLineNumberBg": {
+      "dark": "#303A35",
+      "light": "#DDE4DF"
+    },
+    "diffRemovedLineNumberBg": {
+      "dark": "#3C3336",
+      "light": "#E4DDE0"
+    },
+    "markdownText": {
+      "dark": "nord4",
+      "light": "nord0"
+    },
+    "markdownHeading": {
+      "dark": "nord8",
+      "light": "nord10"
+    },
+    "markdownLink": {
+      "dark": "nord9",
+      "light": "nord9"
+    },
+    "markdownLinkText": {
+      "dark": "nord7",
+      "light": "nord7"
+    },
+    "markdownCode": {
+      "dark": "nord14",
+      "light": "nord14"
+    },
+    "markdownBlockQuote": {
+      "dark": "#8B95A7",
+      "light": "nord3"
+    },
+    "markdownEmph": {
+      "dark": "nord12",
+      "light": "nord12"
+    },
+    "markdownStrong": {
+      "dark": "nord13",
+      "light": "nord13"
+    },
+    "markdownHorizontalRule": {
+      "dark": "#8B95A7",
+      "light": "nord3"
+    },
+    "markdownListItem": {
+      "dark": "nord8",
+      "light": "nord10"
+    },
+    "markdownListEnumeration": {
+      "dark": "nord7",
+      "light": "nord7"
+    },
+    "markdownImage": {
+      "dark": "nord9",
+      "light": "nord9"
+    },
+    "markdownImageText": {
+      "dark": "nord7",
+      "light": "nord7"
+    },
+    "markdownCodeBlock": {
+      "dark": "nord4",
+      "light": "nord0"
+    },
+    "syntaxComment": {
+      "dark": "#8B95A7",
+      "light": "nord3"
+    },
+    "syntaxKeyword": {
+      "dark": "nord9",
+      "light": "nord9"
+    },
+    "syntaxFunction": {
+      "dark": "nord8",
+      "light": "nord8"
+    },
+    "syntaxVariable": {
+      "dark": "nord7",
+      "light": "nord7"
+    },
+    "syntaxString": {
+      "dark": "nord14",
+      "light": "nord14"
+    },
+    "syntaxNumber": {
+      "dark": "nord15",
+      "light": "nord15"
+    },
+    "syntaxType": {
+      "dark": "nord7",
+      "light": "nord7"
+    },
+    "syntaxOperator": {
+      "dark": "nord9",
+      "light": "nord9"
+    },
+    "syntaxPunctuation": {
+      "dark": "nord4",
+      "light": "nord0"
+    }
+  }
+}

.opencode/plugins/tui-smoke.tsx

@@ -0,0 +1,937 @@
+/** @jsxImportSource @opentui/solid */
+import { useKeyboard, useTerminalDimensions, type JSX } from "@opentui/solid"
+import { RGBA, VignetteEffect } from "@opentui/core"
+import type {
+  TuiKeybindSet,
+  TuiPlugin,
+  TuiPluginApi,
+  TuiPluginMeta,
+  TuiPluginModule,
+  TuiSlotPlugin,
+} from "@opencode-ai/plugin/tui"
+
+const tabs = ["overview", "counter", "help"]
+const bind = {
+  modal: "ctrl+shift+m",
+  screen: "ctrl+shift+o",
+  home: "escape,ctrl+h",
+  left: "left,h",
+  right: "right,l",
+  up: "up,k",
+  down: "down,j",
+  alert: "a",
+  confirm: "c",
+  prompt: "p",
+  select: "s",
+  modal_accept: "enter,return",
+  modal_close: "escape",
+  dialog_close: "escape",
+  local: "x",
+  local_push: "enter,return",
+  local_close: "q,backspace",
+  host: "z",
+}
+
+const pick = (value: unknown, fallback: string) => {
+  if (typeof value !== "string") return fallback
+  if (!value.trim()) return fallback
+  return value
+}
+
+const num = (value: unknown, fallback: number) => {
+  if (typeof value !== "number") return fallback
+  return value
+}
+
+const rec = (value: unknown) => {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return
+  return Object.fromEntries(Object.entries(value))
+}
+
+type Cfg = {
+  label: string
+  route: string
+  vignette: number
+  keybinds: Record<string, unknown> | undefined
+}
+
+type Route = {
+  modal: string
+  screen: string
+}
+
+type State = {
+  tab: number
+  count: number
+  source: string
+  note: string
+  selected: string
+  local: number
+}
+
+const cfg = (options: Record<string, unknown> | undefined) => {
+  return {
+    label: pick(options?.label, "smoke"),
+    route: pick(options?.route, "workspace-smoke"),
+    vignette: Math.max(0, num(options?.vignette, 0.35)),
+    keybinds: rec(options?.keybinds),
+  }
+}
+
+const names = (input: Cfg) => {
+  return {
+    modal: `${input.route}.modal`,
+    screen: `${input.route}.screen`,
+  }
+}
+
+type Keys = TuiKeybindSet
+const ui = {
+  panel: "#1d1d1d",
+  border: "#4a4a4a",
+  text: "#f0f0f0",
+  muted: "#a5a5a5",
+  accent: "#5f87ff",
+}
+
+type Color = RGBA | string
+
+const ink = (map: Record<string, unknown>, name: string, fallback: string): Color => {
+  const value = map[name]
+  if (typeof value === "string") return value
+  if (value instanceof RGBA) return value
+  return fallback
+}
+
+const look = (map: Record<string, unknown>) => {
+  return {
+    panel: ink(map, "backgroundPanel", ui.panel),
+    border: ink(map, "border", ui.border),
+    text: ink(map, "text", ui.text),
+    muted: ink(map, "textMuted", ui.muted),
+    accent: ink(map, "primary", ui.accent),
+    selected: ink(map, "selectedListItemText", ui.text),
+  }
+}
+
+const tone = (api: TuiPluginApi) => {
+  return look(api.theme.current)
+}
+
+type Skin = {
+  panel: Color
+  border: Color
+  text: Color
+  muted: Color
+  accent: Color
+  selected: Color
+}
+
+const Btn = (props: { txt: string; run: () => void; skin: Skin; on?: boolean }) => {
+  return (
+    <box
+      onMouseUp={() => {
+        props.run()
+      }}
+      backgroundColor={props.on ? props.skin.accent : props.skin.border}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      <text fg={props.on ? props.skin.selected : props.skin.text}>{props.txt}</text>
+    </box>
+  )
+}
+
+const parse = (params: Record<string, unknown> | undefined) => {
+  const tab = typeof params?.tab === "number" ? params.tab : 0
+  const count = typeof params?.count === "number" ? params.count : 0
+  const source = typeof params?.source === "string" ? params.source : "unknown"
+  const note = typeof params?.note === "string" ? params.note : ""
+  const selected = typeof params?.selected === "string" ? params.selected : ""
+  const local = typeof params?.local === "number" ? params.local : 0
+  return {
+    tab: Math.max(0, Math.min(tab, tabs.length - 1)),
+    count,
+    source,
+    note,
+    selected,
+    local: Math.max(0, local),
+  }
+}
+
+const current = (api: TuiPluginApi, route: Route) => {
+  const value = api.route.current
+  const ok = Object.values(route).includes(value.name)
+  if (!ok) return parse(undefined)
+  if (!("params" in value)) return parse(undefined)
+  return parse(value.params)
+}
+
+const opts = [
+  {
+    title: "Overview",
+    value: 0,
+    description: "Switch to overview tab",
+  },
+  {
+    title: "Counter",
+    value: 1,
+    description: "Switch to counter tab",
+  },
+  {
+    title: "Help",
+    value: 2,
+    description: "Switch to help tab",
+  },
+]
+
+const host = (api: TuiPluginApi, input: Cfg, skin: Skin) => {
+  api.ui.dialog.setSize("medium")
+  api.ui.dialog.replace(() => (
+    <box paddingBottom={1} paddingLeft={2} paddingRight={2} gap={1} flexDirection="column">
+      <text fg={skin.text}>
+        <b>{input.label} host overlay</b>
+      </text>
+      <text fg={skin.muted}>Using api.ui.dialog stack with built-in backdrop</text>
+      <text fg={skin.muted}>esc closes · depth {api.ui.dialog.depth}</text>
+      <box flexDirection="row" gap={1}>
+        <Btn txt="close" run={() => api.ui.dialog.clear()} skin={skin} on />
+      </box>
+    </box>
+  ))
+}
+
+const warn = (api: TuiPluginApi, route: Route, value: State) => {
+  const DialogAlert = api.ui.DialogAlert
+  api.ui.dialog.setSize("medium")
+  api.ui.dialog.replace(() => (
+    <DialogAlert
+      title="Smoke alert"
+      message="Testing built-in alert dialog"
+      onConfirm={() => api.route.navigate(route.screen, { ...value, source: "alert" })}
+    />
+  ))
+}
+
+const check = (api: TuiPluginApi, route: Route, value: State) => {
+  const DialogConfirm = api.ui.DialogConfirm
+  api.ui.dialog.setSize("medium")
+  api.ui.dialog.replace(() => (
+    <DialogConfirm
+      title="Smoke confirm"
+      message="Apply +1 to counter?"
+      onConfirm={() => api.route.navigate(route.screen, { ...value, count: value.count + 1, source: "confirm" })}
+      onCancel={() => api.route.navigate(route.screen, { ...value, source: "confirm-cancel" })}
+    />
+  ))
+}
+
+const entry = (api: TuiPluginApi, route: Route, value: State) => {
+  const DialogPrompt = api.ui.DialogPrompt
+  api.ui.dialog.setSize("medium")
+  api.ui.dialog.replace(() => (
+    <DialogPrompt
+      title="Smoke prompt"
+      value={value.note}
+      onConfirm={(note) => {
+        api.ui.dialog.clear()
+        api.route.navigate(route.screen, { ...value, note, source: "prompt" })
+      }}
+      onCancel={() => {
+        api.ui.dialog.clear()
+        api.route.navigate(route.screen, value)
+      }}
+    />
+  ))
+}
+
+const picker = (api: TuiPluginApi, route: Route, value: State) => {
+  const DialogSelect = api.ui.DialogSelect
+  api.ui.dialog.setSize("medium")
+  api.ui.dialog.replace(() => (
+    <DialogSelect
+      title="Smoke select"
+      options={opts}
+      current={value.tab}
+      onSelect={(item) => {
+        api.ui.dialog.clear()
+        api.route.navigate(route.screen, {
+          ...value,
+          tab: typeof item.value === "number" ? item.value : value.tab,
+          selected: item.title,
+          source: "select",
+        })
+      }}
+    />
+  ))
+}
+
+const Screen = (props: {
+  api: TuiPluginApi
+  input: Cfg
+  route: Route
+  keys: Keys
+  meta: TuiPluginMeta
+  params?: Record<string, unknown>
+}) => {
+  const dim = useTerminalDimensions()
+  const value = parse(props.params)
+  const skin = tone(props.api)
+  const set = (local: number, base?: State) => {
+    const next = base ?? current(props.api, props.route)
+    props.api.route.navigate(props.route.screen, { ...next, local: Math.max(0, local), source: "local" })
+  }
+  const push = (base?: State) => {
+    const next = base ?? current(props.api, props.route)
+    set(next.local + 1, next)
+  }
+  const open = () => {
+    const next = current(props.api, props.route)
+    if (next.local > 0) return
+    set(1, next)
+  }
+  const pop = (base?: State) => {
+    const next = base ?? current(props.api, props.route)
+    const local = Math.max(0, next.local - 1)
+    set(local, next)
+  }
+  const show = () => {
+    setTimeout(() => {
+      open()
+    }, 0)
+  }
+  useKeyboard((evt) => {
+    if (props.api.route.current.name !== props.route.screen) return
+    const next = current(props.api, props.route)
+    if (props.api.ui.dialog.open) {
+      if (props.keys.match("dialog_close", evt)) {
+        evt.preventDefault()
+        evt.stopPropagation()
+        props.api.ui.dialog.clear()
+        return
+      }
+      return
+    }
+
+    if (next.local > 0) {
+      if (evt.name === "escape" || props.keys.match("local_close", evt)) {
+        evt.preventDefault()
+        evt.stopPropagation()
+        pop(next)
+        return
+      }
+
+      if (props.keys.match("local_push", evt)) {
+        evt.preventDefault()
+        evt.stopPropagation()
+        push(next)
+        return
+      }
+      return
+    }
+
+    if (props.keys.match("home", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.api.route.navigate("home")
+      return
+    }
+
+    if (props.keys.match("left", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.api.route.navigate(props.route.screen, { ...next, tab: (next.tab - 1 + tabs.length) % tabs.length })
+      return
+    }
+
+    if (props.keys.match("right", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.api.route.navigate(props.route.screen, { ...next, tab: (next.tab + 1) % tabs.length })
+      return
+    }
+
+    if (props.keys.match("up", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.api.route.navigate(props.route.screen, { ...next, count: next.count + 1 })
+      return
+    }
+
+    if (props.keys.match("down", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.api.route.navigate(props.route.screen, { ...next, count: next.count - 1 })
+      return
+    }
+
+    if (props.keys.match("modal", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.api.route.navigate(props.route.modal, next)
+      return
+    }
+
+    if (props.keys.match("local", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      open()
+      return
+    }
+
+    if (props.keys.match("host", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      host(props.api, props.input, skin)
+      return
+    }
+
+    if (props.keys.match("alert", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      warn(props.api, props.route, next)
+      return
+    }
+
+    if (props.keys.match("confirm", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      check(props.api, props.route, next)
+      return
+    }
+
+    if (props.keys.match("prompt", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      entry(props.api, props.route, next)
+      return
+    }
+
+    if (props.keys.match("select", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      picker(props.api, props.route, next)
+    }
+  })
+
+  return (
+    <box width={dim().width} height={dim().height} backgroundColor={skin.panel} position="relative">
+      <box
+        flexDirection="column"
+        width="100%"
+        height="100%"
+        paddingTop={1}
+        paddingBottom={1}
+        paddingLeft={2}
+        paddingRight={2}
+      >
+        <box flexDirection="row" justifyContent="space-between" paddingBottom={1}>
+          <text fg={skin.text}>
+            <b>{props.input.label} screen</b>
+            <span style={{ fg: skin.muted }}> plugin route</span>
+          </text>
+          <text fg={skin.muted}>{props.keys.print("home")} home</text>
+        </box>
+
+        <box flexDirection="row" gap={1} paddingBottom={1}>
+          {tabs.map((item, i) => {
+            const on = value.tab === i
+            return (
+              <Btn
+                txt={item}
+                run={() => props.api.route.navigate(props.route.screen, { ...value, tab: i })}
+                skin={skin}
+                on={on}
+              />
+            )
+          })}
+        </box>
+
+        <box
+          border
+          borderColor={skin.border}
+          paddingTop={1}
+          paddingBottom={1}
+          paddingLeft={2}
+          paddingRight={2}
+          flexGrow={1}
+        >
+          {value.tab === 0 ? (
+            <box flexDirection="column" gap={1}>
+              <text fg={skin.text}>Route: {props.route.screen}</text>
+              <text fg={skin.muted}>plugin state: {props.meta.state}</text>
+              <text fg={skin.muted}>
+                first: {props.meta.state === "first" ? "yes" : "no"} · updated:{" "}
+                {props.meta.state === "updated" ? "yes" : "no"} · loads: {props.meta.load_count}
+              </text>
+              <text fg={skin.muted}>plugin source: {props.meta.source}</text>
+              <text fg={skin.muted}>source: {value.source}</text>
+              <text fg={skin.muted}>note: {value.note || "(none)"}</text>
+              <text fg={skin.muted}>selected: {value.selected || "(none)"}</text>
+              <text fg={skin.muted}>local stack depth: {value.local}</text>
+              <text fg={skin.muted}>host stack open: {props.api.ui.dialog.open ? "yes" : "no"}</text>
+            </box>
+          ) : null}
+
+          {value.tab === 1 ? (
+            <box flexDirection="column" gap={1}>
+              <text fg={skin.text}>Counter: {value.count}</text>
+              <text fg={skin.muted}>
+                {props.keys.print("up")} / {props.keys.print("down")} change value
+              </text>
+            </box>
+          ) : null}
+
+          {value.tab === 2 ? (
+            <box flexDirection="column" gap={1}>
+              <text fg={skin.muted}>
+                {props.keys.print("modal")} modal | {props.keys.print("alert")} alert | {props.keys.print("confirm")}{" "}
+                confirm | {props.keys.print("prompt")} prompt | {props.keys.print("select")} select
+              </text>
+              <text fg={skin.muted}>
+                {props.keys.print("local")} local stack | {props.keys.print("host")} host stack
+              </text>
+              <text fg={skin.muted}>
+                local open: {props.keys.print("local_push")} push nested · esc or {props.keys.print("local_close")}{" "}
+                close
+              </text>
+              <text fg={skin.muted}>{props.keys.print("home")} returns home</text>
+            </box>
+          ) : null}
+        </box>
+
+        <box flexDirection="row" gap={1} paddingTop={1}>
+          <Btn txt="go home" run={() => props.api.route.navigate("home")} skin={skin} />
+          <Btn txt="modal" run={() => props.api.route.navigate(props.route.modal, value)} skin={skin} on />
+          <Btn txt="local overlay" run={show} skin={skin} />
+          <Btn txt="host overlay" run={() => host(props.api, props.input, skin)} skin={skin} />
+          <Btn txt="alert" run={() => warn(props.api, props.route, value)} skin={skin} />
+          <Btn txt="confirm" run={() => check(props.api, props.route, value)} skin={skin} />
+          <Btn txt="prompt" run={() => entry(props.api, props.route, value)} skin={skin} />
+          <Btn txt="select" run={() => picker(props.api, props.route, value)} skin={skin} />
+        </box>
+      </box>
+
+      <box
+        visible={value.local > 0}
+        width={dim().width}
+        height={dim().height}
+        alignItems="center"
+        position="absolute"
+        zIndex={3000}
+        paddingTop={dim().height / 4}
+        left={0}
+        top={0}
+        backgroundColor={RGBA.fromInts(0, 0, 0, 160)}
+        onMouseUp={() => {
+          pop()
+        }}
+      >
+        <box
+          onMouseUp={(evt) => {
+            evt.stopPropagation()
+          }}
+          width={60}
+          maxWidth={dim().width - 2}
+          backgroundColor={skin.panel}
+          border
+          borderColor={skin.border}
+          paddingTop={1}
+          paddingBottom={1}
+          paddingLeft={2}
+          paddingRight={2}
+          gap={1}
+          flexDirection="column"
+        >
+          <text fg={skin.text}>
+            <b>{props.input.label} local overlay</b>
+          </text>
+          <text fg={skin.muted}>Plugin-owned stack depth: {value.local}</text>
+          <text fg={skin.muted}>
+            {props.keys.print("local_push")} push nested · {props.keys.print("local_close")} pop/close
+          </text>
+          <box flexDirection="row" gap={1}>
+            <Btn txt="push" run={push} skin={skin} on />
+            <Btn txt="pop" run={pop} skin={skin} />
+          </box>
+        </box>
+      </box>
+    </box>
+  )
+}
+
+const Modal = (props: {
+  api: TuiPluginApi
+  input: Cfg
+  route: Route
+  keys: Keys
+  params?: Record<string, unknown>
+}) => {
+  const Dialog = props.api.ui.Dialog
+  const value = parse(props.params)
+  const skin = tone(props.api)
+
+  useKeyboard((evt) => {
+    if (props.api.route.current.name !== props.route.modal) return
+
+    if (props.keys.match("modal_accept", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.api.route.navigate(props.route.screen, { ...value, source: "modal" })
+      return
+    }
+
+    if (props.keys.match("modal_close", evt)) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.api.route.navigate("home")
+    }
+  })
+
+  return (
+    <box width="100%" height="100%" backgroundColor={skin.panel}>
+      <Dialog onClose={() => props.api.route.navigate("home")}>
+        <box paddingBottom={1} paddingLeft={2} paddingRight={2} gap={1} flexDirection="column">
+          <text fg={skin.text}>
+            <b>{props.input.label} modal</b>
+          </text>
+          <text fg={skin.muted}>{props.keys.print("modal")} modal command</text>
+          <text fg={skin.muted}>{props.keys.print("screen")} screen command</text>
+          <text fg={skin.muted}>
+            {props.keys.print("modal_accept")} opens screen · {props.keys.print("modal_close")} closes
+          </text>
+          <box flexDirection="row" gap={1}>
+            <Btn
+              txt="open screen"
+              run={() => props.api.route.navigate(props.route.screen, { ...value, source: "modal" })}
+              skin={skin}
+              on
+            />
+            <Btn txt="cancel" run={() => props.api.route.navigate("home")} skin={skin} />
+          </box>
+        </box>
+      </Dialog>
+    </box>
+  )
+}
+
+const home = (api: TuiPluginApi, input: Cfg) => ({
+  slots: {
+    home_logo(ctx) {
+      const map = ctx.theme.current
+      const skin = look(map)
+      const art = [
+        "                                  $$\\",
+        "                                  $$ |",
+        " $$$$$$$\\ $$$$$$\\$$$$\\   $$$$$$\\  $$ |  $$\\  $$$$$$\\",
+        "$$  _____|$$  _$$  _$$\\ $$  __$$\\ $$ | $$  |$$  __$$\\",
+        "\\$$$$$$\\  $$ / $$ / $$ |$$ /  $$ |$$$$$$  / $$$$$$$$ |",
+        " \\____$$\\ $$ | $$ | $$ |$$ |  $$ |$$  _$$<  $$   ____|",
+        "$$$$$$$  |$$ | $$ | $$ |\\$$$$$$  |$$ | \\$$\\ \\$$$$$$$\\",
+        "\\_______/ \\__| \\__| \\__| \\______/ \\__|  \\__| \\_______|",
+      ]
+      const fill = [
+        skin.accent,
+        skin.muted,
+        ink(map, "info", ui.accent),
+        skin.text,
+        ink(map, "success", ui.accent),
+        ink(map, "warning", ui.accent),
+        ink(map, "secondary", ui.accent),
+        ink(map, "error", ui.accent),
+      ]
+
+      return (
+        <box flexDirection="column">
+          {art.map((line, i) => (
+            <text fg={fill[i]}>{line}</text>
+          ))}
+        </box>
+      )
+    },
+    home_prompt(ctx, value) {
+      const skin = look(ctx.theme.current)
+      type Prompt = (props: {
+        workspaceID?: string
+        visible?: boolean
+        disabled?: boolean
+        onSubmit?: () => void
+        hint?: JSX.Element
+        right?: JSX.Element
+        showPlaceholder?: boolean
+        placeholders?: {
+          normal?: string[]
+          shell?: string[]
+        }
+      }) => JSX.Element
+      type Slot = (
+        props: { name: string; mode?: unknown; children?: JSX.Element } & Record<string, unknown>,
+      ) => JSX.Element | null
+      const ui = api.ui as TuiPluginApi["ui"] & { Prompt: Prompt; Slot: Slot }
+      const Prompt = ui.Prompt
+      const Slot = ui.Slot
+      const normal = [
+        `[SMOKE] route check for ${input.label}`,
+        "[SMOKE] confirm home_prompt slot override",
+        "[SMOKE] verify prompt-right slot passthrough",
+      ]
+      const shell = ["printf '[SMOKE] home prompt\n'", "git status --short", "bun --version"]
+      const hint = (
+        <box flexShrink={0} flexDirection="row" gap={1}>
+          <text fg={skin.muted}>
+            <span style={{ fg: skin.accent }}>•</span> smoke home prompt
+          </text>
+        </box>
+      )
+
+      return (
+        <Prompt
+          workspaceID={value.workspace_id}
+          hint={hint}
+          right={
+            <box flexDirection="row" gap={1}>
+              <Slot name="home_prompt_right" workspace_id={value.workspace_id} />
+              <Slot name="smoke_prompt_right" workspace_id={value.workspace_id} label={input.label} />
+            </box>
+          }
+          placeholders={{ normal, shell }}
+        />
+      )
+    },
+    home_prompt_right(ctx, value) {
+      const skin = look(ctx.theme.current)
+      const id = value.workspace_id?.slice(0, 8) ?? "none"
+      return (
+        <text fg={skin.muted}>
+          <span style={{ fg: skin.accent }}>{input.label}</span> home:{id}
+        </text>
+      )
+    },
+    session_prompt_right(ctx, value) {
+      const skin = look(ctx.theme.current)
+      return (
+        <text fg={skin.muted}>
+          <span style={{ fg: skin.accent }}>{input.label}</span> session:{value.session_id.slice(0, 8)}
+        </text>
+      )
+    },
+    smoke_prompt_right(ctx, value) {
+      const skin = look(ctx.theme.current)
+      const id = typeof value.workspace_id === "string" ? value.workspace_id.slice(0, 8) : "none"
+      const label = typeof value.label === "string" ? value.label : input.label
+      return (
+        <text fg={skin.muted}>
+          <span style={{ fg: skin.accent }}>{label}</span> custom:{id}
+        </text>
+      )
+    },
+    home_bottom(ctx) {
+      const skin = look(ctx.theme.current)
+      const text = "extra content in the unified home bottom slot"
+
+      return (
+        <box width="100%" maxWidth={75} alignItems="center" paddingTop={1} flexShrink={0} gap={1}>
+          <box
+            border
+            borderColor={skin.border}
+            backgroundColor={skin.panel}
+            paddingTop={1}
+            paddingBottom={1}
+            paddingLeft={2}
+            paddingRight={2}
+            width="100%"
+          >
+            <text fg={skin.muted}>
+              <span style={{ fg: skin.accent }}>{input.label}</span> {text}
+            </text>
+          </box>
+        </box>
+      )
+    },
+  },
+})
+
+const block = (input: Cfg, order: number, title: string, text: string): TuiSlotPlugin => ({
+  order,
+  slots: {
+    sidebar_content(ctx, value) {
+      const skin = look(ctx.theme.current)
+
+      return (
+        <box
+          border
+          borderColor={skin.border}
+          backgroundColor={skin.panel}
+          paddingTop={1}
+          paddingBottom={1}
+          paddingLeft={2}
+          paddingRight={2}
+          flexDirection="column"
+          gap={1}
+        >
+          <text fg={skin.accent}>
+            <b>{title}</b>
+          </text>
+          <text fg={skin.text}>{text}</text>
+          <text fg={skin.muted}>
+            {input.label} order {order} · session {value.session_id.slice(0, 8)}
+          </text>
+        </box>
+      )
+    },
+  },
+})
+
+const slot = (api: TuiPluginApi, input: Cfg): TuiSlotPlugin[] => [
+  home(api, input),
+  block(input, 50, "Smoke above", "renders above internal sidebar blocks"),
+  block(input, 250, "Smoke between", "renders between internal sidebar blocks"),
+  block(input, 650, "Smoke below", "renders below internal sidebar blocks"),
+]
+
+const reg = (api: TuiPluginApi, input: Cfg, keys: Keys) => {
+  const route = names(input)
+  api.command.register(() => [
+    {
+      title: `${input.label} modal`,
+      value: "plugin.smoke.modal",
+      keybind: keys.get("modal"),
+      category: "Plugin",
+      slash: {
+        name: "smoke",
+      },
+      onSelect: () => {
+        api.route.navigate(route.modal, { source: "command" })
+      },
+    },
+    {
+      title: `${input.label} screen`,
+      value: "plugin.smoke.screen",
+      keybind: keys.get("screen"),
+      category: "Plugin",
+      slash: {
+        name: "smoke-screen",
+      },
+      onSelect: () => {
+        api.route.navigate(route.screen, { source: "command", tab: 0, count: 0 })
+      },
+    },
+    {
+      title: `${input.label} alert dialog`,
+      value: "plugin.smoke.alert",
+      category: "Plugin",
+      slash: {
+        name: "smoke-alert",
+      },
+      onSelect: () => {
+        warn(api, route, current(api, route))
+      },
+    },
+    {
+      title: `${input.label} confirm dialog`,
+      value: "plugin.smoke.confirm",
+      category: "Plugin",
+      slash: {
+        name: "smoke-confirm",
+      },
+      onSelect: () => {
+        check(api, route, current(api, route))
+      },
+    },
+    {
+      title: `${input.label} prompt dialog`,
+      value: "plugin.smoke.prompt",
+      category: "Plugin",
+      slash: {
+        name: "smoke-prompt",
+      },
+      onSelect: () => {
+        entry(api, route, current(api, route))
+      },
+    },
+    {
+      title: `${input.label} select dialog`,
+      value: "plugin.smoke.select",
+      category: "Plugin",
+      slash: {
+        name: "smoke-select",
+      },
+      onSelect: () => {
+        picker(api, route, current(api, route))
+      },
+    },
+    {
+      title: `${input.label} host overlay`,
+      value: "plugin.smoke.host",
+      category: "Plugin",
+      slash: {
+        name: "smoke-host",
+      },
+      onSelect: () => {
+        host(api, input, tone(api))
+      },
+    },
+    {
+      title: `${input.label} go home`,
+      value: "plugin.smoke.home",
+      category: "Plugin",
+      enabled: api.route.current.name !== "home",
+      onSelect: () => {
+        api.route.navigate("home")
+      },
+    },
+    {
+      title: `${input.label} toast`,
+      value: "plugin.smoke.toast",
+      category: "Plugin",
+      onSelect: () => {
+        api.ui.toast({
+          variant: "info",
+          title: "Smoke",
+          message: "Plugin toast works",
+          duration: 2000,
+        })
+      },
+    },
+  ])
+}
+
+const tui: TuiPlugin = async (api, options, meta) => {
+  if (options?.enabled === false) return
+
+  await api.theme.install("./smoke-theme.json")
+  api.theme.set("smoke-theme")
+
+  const value = cfg(options ?? undefined)
+  const route = names(value)
+  const keys = api.keybind.create(bind, value.keybinds)
+  const fx = new VignetteEffect(value.vignette)
+  const post = fx.apply.bind(fx)
+  api.renderer.addPostProcessFn(post)
+  api.lifecycle.onDispose(() => {
+    api.renderer.removePostProcessFn(post)
+  })
+
+  api.route.register([
+    {
+      name: route.screen,
+      render: ({ params }) => <Screen api={api} input={value} route={route} keys={keys} meta={meta} params={params} />,
+    },
+    {
+      name: route.modal,
+      render: ({ params }) => <Modal api={api} input={value} route={route} keys={keys} params={params} />,
+    },
+  ])
+
+  reg(api, value, keys)
+  for (const item of slot(api, value)) {
+    api.slots.register(item)
+  }
+}
+
+const plugin: TuiPluginModule & { id: string } = {
+  id: "tui-smoke",
+  tui,
+}
+
+export default plugin

.opencode/themes/.gitignore

@@ -0,0 +1 @@
+smoke-theme.json

.opencode/tool/github-pr-search.ts

@@ -1,7 +1,5 @@
 /// <reference path="../env.d.ts" />
 import { tool } from "@opencode-ai/plugin"
-import DESCRIPTION from "./github-pr-search.txt"
-
 async function githubFetch(endpoint: string, options: RequestInit = {}) {
   const response = await fetch(`https://api.github.com${endpoint}`, {
     ...options,
@@ -24,7 +22,16 @@ interface PR {
 }
 
 export default tool({
-  description: DESCRIPTION,
+  description: `Use this tool to search GitHub pull requests by title and description.
+
+This tool searches PRs in the anomalyco/opencode repository and returns LLM-friendly results including:
+- PR number and title
+- Author
+- State (open/closed/merged)
+- Labels
+- Description snippet
+
+Use the query parameter to search for keywords that might appear in PR titles or descriptions.`,
   args: {
     query: tool.schema.string().describe("Search query for PR titles and descriptions"),
     limit: tool.schema.number().describe("Maximum number of results to return").default(10),

.opencode/tool/github-pr-search.txt

@@ -1,10 +0,0 @@
-Use this tool to search GitHub pull requests by title and description.
-
-This tool searches PRs in the anomalyco/opencode repository and returns LLM-friendly results including:
-- PR number and title
-- Author
-- State (open/closed/merged)
-- Labels
-- Description snippet
-
-Use the query parameter to search for keywords that might appear in PR titles or descriptions.

.opencode/tool/github-triage.ts

@@ -1,7 +1,5 @@
 /// <reference path="../env.d.ts" />
 import { tool } from "@opencode-ai/plugin"
-import DESCRIPTION from "./github-triage.txt"
-
 const TEAM = {
   desktop: ["adamdotdevin", "iamdavidhill", "Brendonovich", "nexxeln"],
   zen: ["fwang", "MrMushrooooom"],
@@ -40,7 +38,12 @@ async function githubFetch(endpoint: string, options: RequestInit = {}) {
 }
 
 export default tool({
-  description: DESCRIPTION,
+  description: `Use this tool to assign and/or label a GitHub issue.
+
+Choose labels and assignee using the current triage policy and ownership rules.
+Pick the most fitting labels for the issue and assign one owner.
+
+If unsure, choose the team/section with the most overlap with the issue and assign a member from that team at random.`,
   args: {
     assignee: tool.schema
       .enum(ASSIGNEES as [string, ...string[]])

.opencode/tool/github-triage.txt

@@ -1,6 +0,0 @@
-Use this tool to assign and/or label a GitHub issue.
-
-Choose labels and assignee using the current triage policy and ownership rules.
-Pick the most fitting labels for the issue and assign one owner.
-
-If unsure, choose the team/section with the most overlap with the issue and assign a member from that team at random.

.opencode/tui.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://opencode.ai/tui.json",
+  "plugin": [
+    [
+      "./plugins/tui-smoke.tsx",
+      {
+        "enabled": false,
+        "label": "workspace",
+        "keybinds": {
+          "modal": "ctrl+alt+m",
+          "screen": "ctrl+alt+o",
+          "home": "escape,ctrl+shift+h",
+          "dialog_close": "escape,q"
+        }
+      }
+    ]
+  ]
+}

.signpath/policies/opencode/test-signing.yml

@@ -1,5 +0,0 @@
-github-policies:
-  runners:
-    allowed_groups:
-      - "GitHub Actions"
-      - "blacksmith runners 01kbd5v56sg8tz7rea39b7ygpt"

README.zh.md

@@ -137,4 +137,4 @@ OpenCode 内置两种 Agent，可用 `Tab` 键快速切换：
 
 ---
 
-**加入我们的社区** [飞书](https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=de8k6664-1b5e-43f2-8efd-21d6772647b5&qr_code=true) | [X.com](https://x.com/opencode)
+**加入我们的社区** [飞书](https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=738j8655-cd59-4633-a30a-1124e0096789&qr_code=true) | [X.com](https://x.com/opencode)

README.zht.md

@@ -137,4 +137,4 @@ OpenCode 內建了兩種 Agent，您可以使用 `Tab` 鍵快速切換。
 
 ---
 
-**加入我們的社群** [飞书](https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=de8k6664-1b5e-43f2-8efd-21d6772647b5&qr_code=true) | [X.com](https://x.com/opencode)
+**加入我們的社群** [飞书](https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=738j8655-cd59-4633-a30a-1124e0096789&qr_code=true) | [X.com](https://x.com/opencode)

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1772091128,
-        "narHash": "sha256-TnrYykX8Mf/Ugtkix6V+PjW7miU2yClA6uqWl/v6KWM=",
+        "lastModified": 1773909469,
+        "narHash": "sha256-vglVrLfHjFIzIdV9A27Ugul6rh3I1qHbbitGW7dk420=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "3f0336406035444b4a24b942788334af5f906259",
+        "rev": "7149c06513f335be57f26fcbbbe34afda923882b",
         "type": "github"
       },
       "original": {

github/index.ts

@@ -496,7 +496,6 @@ async function subscribeSessionEvents() {
 
   const TOOL: Record<string, [string, string]> = {
     todowrite: ["Todo", "\x1b[33m\x1b[1m"],
-    todoread: ["Todo", "\x1b[33m\x1b[1m"],
     bash: ["Bash", "\x1b[31m\x1b[1m"],
     edit: ["Edit", "\x1b[32m\x1b[1m"],
     glob: ["Glob", "\x1b[34m\x1b[1m"],

infra/console.ts

@@ -109,6 +109,12 @@ const zenLiteCouponFirstMonth50 = new stripe.Coupon("ZenLiteCouponFirstMonth50",
   appliesToProducts: [zenLiteProduct.id],
   duration: "once",
 })
+const zenLiteCouponFirstMonth100 = new stripe.Coupon("ZenLiteCouponFirstMonth100", {
+  name: "First month 100% off",
+  percentOff: 100,
+  appliesToProducts: [zenLiteProduct.id],
+  duration: "once",
+})
 const zenLitePrice = new stripe.Price("ZenLitePrice", {
   product: zenLiteProduct.id,
   currency: "usd",
@@ -122,7 +128,9 @@ const ZEN_LITE_PRICE = new sst.Linkable("ZEN_LITE_PRICE", {
   properties: {
     product: zenLiteProduct.id,
     price: zenLitePrice.id,
+    priceInr: 92900,
     firstMonth50Coupon: zenLiteCouponFirstMonth50.id,
+    firstMonth100Coupon: zenLiteCouponFirstMonth100.id,
   },
 })
 
@@ -201,6 +209,10 @@ const bucketNew = new sst.cloudflare.Bucket("ZenDataNew")
 const AWS_SES_ACCESS_KEY_ID = new sst.Secret("AWS_SES_ACCESS_KEY_ID")
 const AWS_SES_SECRET_ACCESS_KEY = new sst.Secret("AWS_SES_SECRET_ACCESS_KEY")
 
+const SALESFORCE_CLIENT_ID = new sst.Secret("SALESFORCE_CLIENT_ID")
+const SALESFORCE_CLIENT_SECRET = new sst.Secret("SALESFORCE_CLIENT_SECRET")
+const SALESFORCE_INSTANCE_URL = new sst.Secret("SALESFORCE_INSTANCE_URL")
+
 const logProcessor = new sst.cloudflare.Worker("LogProcessor", {
   handler: "packages/console/function/src/log-processor.ts",
   link: [new sst.Secret("HONEYCOMB_API_KEY")],
@@ -219,8 +231,12 @@ new sst.cloudflare.x.SolidStart("Console", {
     EMAILOCTOPUS_API_KEY,
     AWS_SES_ACCESS_KEY_ID,
     AWS_SES_SECRET_ACCESS_KEY,
+    SALESFORCE_CLIENT_ID,
+    SALESFORCE_CLIENT_SECRET,
+    SALESFORCE_INSTANCE_URL,
     ZEN_BLACK_PRICE,
     ZEN_LITE_PRICE,
+    new sst.Secret("ZEN_LITE_COUPON_FIRST_MONTH_100_INVITEES"),
     new sst.Secret("ZEN_LIMITS"),
     new sst.Secret("ZEN_SESSION_SECRET"),
     ...ZEN_MODELS,

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-WJgo6UclmtQOEubnKMZybdIEhZ1uRTucF61yojjd+l0=",
-    "aarch64-linux": "sha256-QfZ/g7EZFpe6ndR3dG8WvVfMj5Kyd/R/4kkTJfGJxL4=",
-    "aarch64-darwin": "sha256-ezr/R70XJr9eN5l3mgb7HzLF6QsofNEKUOtuxbfli80=",
-    "x86_64-darwin": "sha256-MbsBGS415uEU/n1RQ/5H5pqh+udLY3+oimJ+eS5uJVI="
+    "x86_64-linux": "sha256-85wpU1oCWbthPleNIOj5d5AOuuYZ6rM7gMLZR6YJ2WU=",
+    "aarch64-linux": "sha256-C3A56SDQGJquCpIRj2JhIzr4A7N4cc9lxtEjl8bXDeM=",
+    "aarch64-darwin": "sha256-/Ij3qhGRrcLlMfl9uEacDNnGK5URxhctuQFBW4Njrog=",
+    "x86_64-darwin": "sha256-10sOPuN4eZ75orw4FI8ztCq1+AKS2e8aAfg3Z6Yn56w="
   }
 }

nix/node_modules.nix

@@ -20,7 +20,7 @@ let
 in
 stdenvNoCC.mkDerivation {
   pname = "opencode-node_modules";
-  version = "${packageJson.version}-${rev}";
+  version = "${packageJson.version}+${lib.replaceString "-" "." rev}";
 
   src = lib.fileset.toSource {
     root = ../.;
@@ -54,6 +54,7 @@ stdenvNoCC.mkDerivation {
       --filter '!./' \
       --filter './packages/opencode' \
       --filter './packages/desktop' \
+      --filter './packages/app' \
       --frozen-lockfile \
       --ignore-scripts \
       --no-progress

nix/opencode.nix

@@ -3,6 +3,7 @@
   stdenvNoCC,
   callPackage,
   bun,
+  nodejs,
   sysctl,
   makeBinaryWrapper,
   models-dev,
@@ -19,6 +20,7 @@ stdenvNoCC.mkDerivation (finalAttrs: {
 
   nativeBuildInputs = [
     bun
+    nodejs # for patchShebangs node_modules
     installShellFiles
     makeBinaryWrapper
     models-dev
@@ -29,6 +31,8 @@ stdenvNoCC.mkDerivation (finalAttrs: {
     runHook preConfigure
 
     cp -R ${finalAttrs.node_modules}/. .
+    patchShebangs node_modules
+    patchShebangs packages/*/node_modules
 
     runHook postConfigure
   '';

package.json

@@ -4,13 +4,15 @@
   "description": "AI-powered development tool",
   "private": true,
   "type": "module",
-  "packageManager": "bun@1.3.10",
+  "packageManager": "bun@1.3.11",
   "scripts": {
     "dev": "bun run --cwd packages/opencode --conditions=browser src/index.ts",
     "dev:desktop": "bun --cwd packages/desktop tauri dev",
     "dev:web": "bun --cwd packages/app dev",
+    "dev:console": "ulimit -n 10240 2>/dev/null; bun run --cwd packages/console/app dev",
     "dev:storybook": "bun --cwd packages/storybook storybook",
     "typecheck": "bun turbo typecheck",
+    "postinstall": "bun run --cwd packages/opencode fix-node-pty",
     "prepare": "husky",
     "random": "echo 'Random script'",
     "hello": "echo 'Hello World!'",
@@ -24,7 +26,9 @@
       "packages/slack"
     ],
     "catalog": {
-      "@types/bun": "1.3.9",
+      "@effect/platform-node": "4.0.0-beta.43",
+      "@types/bun": "1.3.11",
+      "@types/cross-spawn": "6.0.6",
       "@octokit/rest": "22.0.0",
       "@hono/zod-validator": "0.4.2",
       "ulid": "3.0.1",
@@ -41,16 +45,18 @@
       "@tailwindcss/vite": "4.1.11",
       "diff": "8.0.2",
       "dompurify": "3.3.1",
-      "drizzle-kit": "1.0.0-beta.16-ea816b6",
-      "drizzle-orm": "1.0.0-beta.16-ea816b6",
-      "effect": "4.0.0-beta.31",
-      "ai": "5.0.124",
+      "drizzle-kit": "1.0.0-beta.19-d95b7a4",
+      "drizzle-orm": "1.0.0-beta.19-d95b7a4",
+      "effect": "4.0.0-beta.43",
+      "ai": "6.0.149",
+      "cross-spawn": "7.0.6",
       "hono": "4.10.7",
       "hono-openapi": "1.1.2",
       "fuzzysort": "3.1.0",
       "luxon": "3.6.1",
       "marked": "17.0.1",
       "marked-shiki": "1.2.1",
+      "remend": "1.3.0",
       "@playwright/test": "1.51.0",
       "typescript": "5.8.2",
       "@typescript/native-preview": "7.0.0-dev.20251207.1",
@@ -85,6 +91,7 @@
     "@opencode-ai/plugin": "workspace:*",
     "@opencode-ai/script": "workspace:*",
     "@opencode-ai/sdk": "workspace:*",
+    "heap-snapshot-toolkit": "1.1.3",
     "typescript": "catalog:"
   },
   "repository": {
@@ -98,9 +105,11 @@
   },
   "trustedDependencies": [
     "esbuild",
+    "node-pty",
     "protobufjs",
     "tree-sitter",
     "tree-sitter-bash",
+    "tree-sitter-powershell",
     "web-tree-sitter",
     "electron"
   ],
@@ -110,6 +119,6 @@
   },
   "patchedDependencies": {
     "@standard-community/standard-openapi@0.2.9": "patches/@standard-community%2Fstandard-openapi@0.2.9.patch",
-    "@openrouter/ai-sdk-provider@1.5.4": "patches/@openrouter%2Fai-sdk-provider@1.5.4.patch"
+    "solid-js@1.9.10": "patches/solid-js@1.9.10.patch"
   }
 }

packages/app/e2e/AGENTS.md

@@ -59,8 +59,10 @@ test("test description", async ({ page, sdk, gotoSession }) => {
 ### Using Fixtures
 
 - `page` - Playwright page
-- `sdk` - OpenCode SDK client for API calls
-- `gotoSession(sessionID?)` - Navigate to session
+- `llm` - Mock LLM server for queuing responses (`text`, `tool`, `toolMatch`, `textMatch`, etc.)
+- `project` - Golden-path project fixture (call `project.open()` first, then use `project.sdk`, `project.prompt(...)`, `project.gotoSession(...)`, `project.trackSession(...)`)
+- `sdk` - OpenCode SDK client for API calls (worker-scoped, shared directory)
+- `gotoSession(sessionID?)` - Navigate to session (worker-scoped, shared directory)
 
 ### Helper Functions
 
@@ -73,12 +75,9 @@ test("test description", async ({ page, sdk, gotoSession }) => {
 - `waitTerminalReady(page, { term? })` - Wait for a mounted terminal to connect and finish rendering output
 - `runTerminal(page, { cmd, token, term?, timeout? })` - Type into the terminal via the browser and wait for rendered output
 - `withSession(sdk, title, callback)` - Create temp session
-- `withProject(...)` - Create temp project/workspace
 - `sessionIDFromUrl(url)` - Read session ID from URL
 - `slugFromUrl(url)` - Read workspace slug from URL
 - `waitSlug(page, skip?)` - Wait for resolved workspace slug
-- `trackSession(sessionID, directory?)` - Register session for fixture cleanup
-- `trackDirectory(directory)` - Register directory for fixture cleanup
 - `clickListItem(container, filter)` - Click list item by key/text
 
 **Selectors** (`selectors.ts`):
@@ -128,9 +127,9 @@ test("test with cleanup", async ({ page, sdk, gotoSession }) => {
 })
 ```
 
-- Prefer `withSession(...)` for temp sessions
-- In `withProject(...)` tests that create sessions or extra workspaces, call `trackSession(sessionID, directory?)` and `trackDirectory(directory)`
-- This lets fixture teardown abort, wait for idle, and clean up safely under CI concurrency
+- Prefer the `project` fixture for tests that need a dedicated project with LLM mocking — call `project.open()` then use `project.prompt(...)`, `project.trackSession(...)`, etc.
+- Use `withSession(sdk, title, callback)` for lightweight temp sessions on the shared worker directory
+- Call `project.trackSession(sessionID, directory?)` and `project.trackDirectory(directory)` for any resources created outside the fixture so teardown can clean them up
 - Avoid calling `sdk.session.delete(...)` directly
 
 ### Timeouts
@@ -174,6 +173,8 @@ await page.keyboard.press(`${modKey}+Comma`) // Open settings
 - In terminal tests, type through the browser. Do not write to the PTY through the SDK.
 - Use `waitTerminalReady(page, { term? })` and `runTerminal(page, { cmd, token, term?, timeout? })` from `actions.ts`.
 - These helpers use the fixture-enabled test-only terminal driver and wait for output after the terminal writer settles.
+- After opening the terminal, use `waitTerminalFocusIdle(...)` before the next keyboard action when prompt focus or keyboard routing matters.
+- This avoids racing terminal mount, focus handoff, and prompt readiness when the next step types or sends shortcuts.
 - Avoid `waitForTimeout` and custom DOM or `data-*` readiness checks.
 
 ### Wait on state
@@ -182,6 +183,9 @@ await page.keyboard.press(`${modKey}+Comma`) // Open settings
 - Avoid race-prone flows that assume work is finished after an action
 - Wait or poll on observable state with `expect(...)`, `expect.poll(...)`, or existing helpers
 - Prefer locator assertions like `toBeVisible()`, `toHaveCount(0)`, and `toHaveAttribute(...)` for normal UI state, and reserve `expect.poll(...)` for probe, mock, or backend state
+- Prefer semantic app state over transient DOM visibility when behavior depends on active selection, focus ownership, or async retry loops
+- Do not treat a visible element as proof that the app will route the next action to it
+- When fixing a flake, validate with `--repeat-each` and multiple workers when practical
 
 ### Add hooks
 
@@ -189,11 +193,16 @@ await page.keyboard.press(`${modKey}+Comma`) // Open settings
 - Keep these hooks minimal and purpose-built, following the style of `packages/app/src/testing/terminal.ts`
 - Test-only hooks must be inert unless explicitly enabled; do not add normal-runtime listeners, reactive subscriptions, or per-update allocations for e2e ceremony
 - When mocking routes or APIs, expose explicit mock state and wait on that before asserting post-action UI
+- Add minimal test-only probes for semantic state like the active list item or selected command when DOM intermediates are unstable
+- Prefer probing committed app state over asserting on transient highlight, visibility, or animation states
 
 ### Prefer helpers
 
 - Prefer fluent helpers and drivers when they make intent obvious and reduce locator-heavy noise
 - Use direct locators when the interaction is simple and a helper would not add clarity
+- Prefer helpers that both perform an action and verify the app consumed it
+- Avoid composing helpers redundantly when one already includes the other or already waits for the resulting state
+- If a helper already covers the required wait or verification, use it directly instead of layering extra clicks, keypresses, or assertions
 
 ## Writing New Tests
 

packages/app/e2e/actions.ts

@@ -1,3 +1,4 @@
+import { base64Decode, base64Encode } from "@opencode-ai/util/encode"
 import { expect, type Locator, type Page } from "@playwright/test"
 import fs from "node:fs/promises"
 import os from "node:os"
@@ -6,8 +7,8 @@ import { execSync } from "node:child_process"
 import { terminalAttr, type E2EWindow } from "../src/testing/terminal"
 import { createSdk, modKey, resolveDirectory, serverUrl } from "./utils"
 import {
-  dropdownMenuTriggerSelector,
   dropdownMenuContentSelector,
+  projectSwitchSelector,
   projectMenuTriggerSelector,
   projectCloseMenuSelector,
   projectWorkspacesToggleSelector,
@@ -16,11 +17,22 @@ import {
   listItemSelector,
   listItemKeySelector,
   listItemKeyStartsWithSelector,
+  promptSelector,
   terminalSelector,
   workspaceItemSelector,
   workspaceMenuTriggerSelector,
 } from "./selectors"
 
+const phase = new WeakMap<Page, "test" | "cleanup">()
+
+export function setHealthPhase(page: Page, value: "test" | "cleanup") {
+  phase.set(page, value)
+}
+
+export function healthPhase(page: Page) {
+  return phase.get(page) ?? "test"
+}
+
 export async function defocus(page: Page) {
   await page
     .evaluate(() => {
@@ -61,6 +73,15 @@ async function terminalReady(page: Page, term?: Locator) {
   }, id)
 }
 
+async function terminalFocusIdle(page: Page, term?: Locator) {
+  const next = term ?? page.locator(terminalSelector).first()
+  const id = await terminalID(next)
+  return page.evaluate((id) => {
+    const state = (window as E2EWindow).__opencode_e2e?.terminal?.terminals?.[id]
+    return (state?.focusing ?? 0) === 0
+  }, id)
+}
+
 async function terminalHas(page: Page, input: { term?: Locator; token: string }) {
   const next = input.term ?? page.locator(terminalSelector).first()
   const id = await terminalID(next)
@@ -73,6 +94,29 @@ async function terminalHas(page: Page, input: { term?: Locator; token: string })
   )
 }
 
+async function promptSlashActive(page: Page, id: string) {
+  return page.evaluate((id) => {
+    const state = (window as E2EWindow).__opencode_e2e?.prompt?.current
+    if (state?.popover !== "slash") return false
+    if (!state.slash.ids.includes(id)) return false
+    return state.slash.active === id
+  }, id)
+}
+
+async function promptSlashSelects(page: Page) {
+  return page.evaluate(() => {
+    return (window as E2EWindow).__opencode_e2e?.prompt?.current?.selects ?? 0
+  })
+}
+
+async function promptSlashSelected(page: Page, input: { id: string; count: number }) {
+  return page.evaluate((input) => {
+    const state = (window as E2EWindow).__opencode_e2e?.prompt?.current
+    if (!state) return false
+    return state.selected === input.id && state.selects >= input.count
+  }, input)
+}
+
 export async function waitTerminalReady(page: Page, input?: { term?: Locator; timeout?: number }) {
   const term = input?.term ?? page.locator(terminalSelector).first()
   const timeout = input?.timeout ?? 10_000
@@ -81,6 +125,43 @@ export async function waitTerminalReady(page: Page, input?: { term?: Locator; ti
   await expect.poll(() => terminalReady(page, term), { timeout }).toBe(true)
 }
 
+export async function waitTerminalFocusIdle(page: Page, input?: { term?: Locator; timeout?: number }) {
+  const term = input?.term ?? page.locator(terminalSelector).first()
+  const timeout = input?.timeout ?? 10_000
+  await waitTerminalReady(page, { term, timeout })
+  await expect.poll(() => terminalFocusIdle(page, term), { timeout }).toBe(true)
+}
+
+export async function showPromptSlash(
+  page: Page,
+  input: { id: string; text: string; prompt?: Locator; timeout?: number },
+) {
+  const prompt = input.prompt ?? page.locator(promptSelector)
+  const timeout = input.timeout ?? 10_000
+  await expect
+    .poll(
+      async () => {
+        await prompt.click().catch(() => false)
+        await prompt.fill(input.text).catch(() => false)
+        return promptSlashActive(page, input.id).catch(() => false)
+      },
+      { timeout },
+    )
+    .toBe(true)
+}
+
+export async function runPromptSlash(
+  page: Page,
+  input: { id: string; text: string; prompt?: Locator; timeout?: number },
+) {
+  const prompt = input.prompt ?? page.locator(promptSelector)
+  const timeout = input.timeout ?? 10_000
+  const count = await promptSlashSelects(page)
+  await showPromptSlash(page, input)
+  await prompt.press("Enter")
+  await expect.poll(() => promptSlashSelected(page, { id: input.id, count: count + 1 }), { timeout }).toBe(true)
+}
+
 export async function runTerminal(page: Page, input: { cmd: string; token: string; term?: Locator; timeout?: number }) {
   const term = input.term ?? page.locator(terminalSelector).first()
   const timeout = input.timeout ?? 10_000
@@ -93,9 +174,9 @@ export async function runTerminal(page: Page, input: { cmd: string; token: strin
   await expect.poll(() => terminalHas(page, { term, token: input.token }), { timeout }).toBe(true)
 }
 
-export async function openPalette(page: Page) {
+export async function openPalette(page: Page, key = "K") {
   await defocus(page)
-  await page.keyboard.press(`${modKey}+P`)
+  await page.keyboard.press(`${modKey}+${key}`)
 
   const dialog = page.getByRole("dialog")
   await expect(dialog).toBeVisible()
@@ -124,12 +205,52 @@ export async function closeDialog(page: Page, dialog: Locator) {
   await expect(dialog).toHaveCount(0)
 }
 
-export async function isSidebarClosed(page: Page) {
-  const button = page.getByRole("button", { name: /toggle sidebar/i }).first()
-  await expect(button).toBeVisible()
+async function isSidebarClosed(page: Page) {
+  const button = await waitSidebarButton(page, "isSidebarClosed")
   return (await button.getAttribute("aria-expanded")) !== "true"
 }
 
+async function errorBoundaryText(page: Page) {
+  const title = page.getByRole("heading", { name: /something went wrong/i }).first()
+  if (!(await title.isVisible().catch(() => false))) return
+
+  const description = await page
+    .getByText(/an error occurred while loading the application\./i)
+    .first()
+    .textContent()
+    .catch(() => "")
+  const detail = await page
+    .getByRole("textbox", { name: /error details/i })
+    .first()
+    .inputValue()
+    .catch(async () =>
+      (
+        (await page
+          .getByRole("textbox", { name: /error details/i })
+          .first()
+          .textContent()
+          .catch(() => "")) ?? ""
+      ).trim(),
+    )
+
+  return [title ? "Error boundary" : "", description ?? "", detail ?? ""].filter(Boolean).join("\n")
+}
+
+async function assertHealthy(page: Page, context: string) {
+  const text = await errorBoundaryText(page)
+  if (!text) return
+  console.log(`[e2e:error-boundary][${context}]\n${text}`)
+  throw new Error(`Error boundary during ${context}\n${text}`)
+}
+
+async function waitSidebarButton(page: Page, context: string) {
+  const button = page.getByRole("button", { name: /toggle sidebar/i }).first()
+  const boundary = page.getByRole("heading", { name: /something went wrong/i }).first()
+  await button.or(boundary).first().waitFor({ state: "visible", timeout: 10_000 })
+  await assertHealthy(page, context)
+  return button
+}
+
 export async function toggleSidebar(page: Page) {
   await defocus(page)
   await page.keyboard.press(`${modKey}+B`)
@@ -138,7 +259,7 @@ export async function toggleSidebar(page: Page) {
 export async function openSidebar(page: Page) {
   if (!(await isSidebarClosed(page))) return
 
-  const button = page.getByRole("button", { name: /toggle sidebar/i }).first()
+  const button = await waitSidebarButton(page, "openSidebar")
   await button.click()
 
   const opened = await expect(button)
@@ -155,7 +276,7 @@ export async function openSidebar(page: Page) {
 export async function closeSidebar(page: Page) {
   if (await isSidebarClosed(page)) return
 
-  const button = page.getByRole("button", { name: /toggle sidebar/i }).first()
+  const button = await waitSidebarButton(page, "closeSidebar")
   await button.click()
 
   const closed = await expect(button)
@@ -170,6 +291,7 @@ export async function closeSidebar(page: Page) {
 }
 
 export async function openSettings(page: Page) {
+  await assertHealthy(page, "openSettings")
   await defocus(page)
 
   const dialog = page.getByRole("dialog")
@@ -182,79 +304,30 @@ export async function openSettings(page: Page) {
 
   if (opened) return dialog
 
+  await assertHealthy(page, "openSettings")
+
   await page.getByRole("button", { name: "Settings" }).first().click()
   await expect(dialog).toBeVisible()
   return dialog
 }
 
-export async function seedProjects(page: Page, input: { directory: string; extra?: string[] }) {
-  await page.addInitScript(
-    (args: { directory: string; serverUrl: string; extra: string[] }) => {
-      const key = "opencode.global.dat:server"
-      const raw = localStorage.getItem(key)
-      const parsed = (() => {
-        if (!raw) return undefined
-        try {
-          return JSON.parse(raw) as unknown
-        } catch {
-          return undefined
-        }
-      })()
-
-      const store = parsed && typeof parsed === "object" ? (parsed as Record<string, unknown>) : {}
-      const list = Array.isArray(store.list) ? store.list : []
-      const lastProject = store.lastProject && typeof store.lastProject === "object" ? store.lastProject : {}
-      const projects = store.projects && typeof store.projects === "object" ? store.projects : {}
-      const nextProjects = { ...(projects as Record<string, unknown>) }
-
-      const add = (origin: string, directory: string) => {
-        const current = nextProjects[origin]
-        const items = Array.isArray(current) ? current : []
-        const existing = items.filter(
-          (p): p is { worktree: string; expanded?: boolean } =>
-            !!p &&
-            typeof p === "object" &&
-            "worktree" in p &&
-            typeof (p as { worktree?: unknown }).worktree === "string",
-        )
-
-        if (existing.some((p) => p.worktree === directory)) return
-        nextProjects[origin] = [{ worktree: directory, expanded: true }, ...existing]
-      }
-
-      const directories = [args.directory, ...args.extra]
-      for (const directory of directories) {
-        add("local", directory)
-        add(args.serverUrl, directory)
-      }
-
-      localStorage.setItem(
-        key,
-        JSON.stringify({
-          list,
-          projects: nextProjects,
-          lastProject,
-        }),
-      )
-    },
-    { directory: input.directory, serverUrl, extra: input.extra ?? [] },
-  )
-}
-
-export async function createTestProject() {
+export async function createTestProject(input?: { serverUrl?: string }) {
   const root = await fs.mkdtemp(path.join(os.tmpdir(), "opencode-e2e-project-"))
+  const id = `e2e-${path.basename(root)}`
 
-  await fs.writeFile(path.join(root, "README.md"), "# e2e\n")
+  await fs.writeFile(path.join(root, "README.md"), `# e2e\n\n${id}\n`)
 
   execSync("git init", { cwd: root, stdio: "ignore" })
+  await fs.writeFile(path.join(root, ".git", "opencode"), id)
   execSync("git config core.fsmonitor false", { cwd: root, stdio: "ignore" })
+  execSync("git config commit.gpgsign false", { cwd: root, stdio: "ignore" })
   execSync("git add -A", { cwd: root, stdio: "ignore" })
   execSync('git -c user.name="e2e" -c user.email="e2e@example.com" commit -m "init" --allow-empty', {
     cwd: root,
     stdio: "ignore",
   })
 
-  return resolveDirectory(root)
+  return resolveDirectory(root, input?.serverUrl)
 }
 
 export async function cleanupTestProject(directory: string) {
@@ -268,12 +341,24 @@ export function slugFromUrl(url: string) {
   return /\/([^/]+)\/session(?:[/?#]|$)/.exec(url)?.[1] ?? ""
 }
 
+async function probeSession(page: Page) {
+  return page
+    .evaluate(() => {
+      const win = window as E2EWindow
+      const current = win.__opencode_e2e?.model?.current
+      if (!current) return null
+      return { dir: current.dir, sessionID: current.sessionID }
+    })
+    .catch(() => null as { dir?: string; sessionID?: string } | null)
+}
+
 export async function waitSlug(page: Page, skip: string[] = []) {
   let prev = ""
   let next = ""
   await expect
     .poll(
-      () => {
+      async () => {
+        await assertHealthy(page, "waitSlug")
         const slug = slugFromUrl(page.url())
         if (!slug) return ""
         if (skip.includes(slug)) return ""
@@ -291,6 +376,105 @@ export async function waitSlug(page: Page, skip: string[] = []) {
   return next
 }
 
+export async function resolveSlug(slug: string, input?: { serverUrl?: string }) {
+  const directory = base64Decode(slug)
+  if (!directory) throw new Error(`Failed to decode workspace slug: ${slug}`)
+  const resolved = await resolveDirectory(directory, input?.serverUrl)
+  return { directory: resolved, slug: base64Encode(resolved), raw: slug }
+}
+
+export async function waitDir(page: Page, directory: string, input?: { serverUrl?: string }) {
+  const target = await resolveDirectory(directory, input?.serverUrl)
+  await expect
+    .poll(
+      async () => {
+        await assertHealthy(page, "waitDir")
+        const slug = slugFromUrl(page.url())
+        if (!slug) return ""
+        return resolveSlug(slug, input)
+          .then((item) => item.directory)
+          .catch(() => "")
+      },
+      { timeout: 45_000 },
+    )
+    .toBe(target)
+  return { directory: target, slug: base64Encode(target) }
+}
+
+export async function waitSession(
+  page: Page,
+  input: {
+    directory: string
+    sessionID?: string
+    serverUrl?: string
+    allowAnySession?: boolean
+  },
+) {
+  const target = await resolveDirectory(input.directory, input.serverUrl)
+  await expect
+    .poll(
+      async () => {
+        await assertHealthy(page, "waitSession")
+        const slug = slugFromUrl(page.url())
+        if (!slug) return false
+        const resolved = await resolveSlug(slug, { serverUrl: input.serverUrl }).catch(() => undefined)
+        if (!resolved || resolved.directory !== target) return false
+        const current = sessionIDFromUrl(page.url())
+        if (input.sessionID && current !== input.sessionID) return false
+        if (!input.sessionID && !input.allowAnySession && current) return false
+
+        const state = await probeSession(page)
+        if (input.sessionID && (!state || state.sessionID !== input.sessionID)) return false
+        if (!input.sessionID && !input.allowAnySession && state?.sessionID) return false
+        if (state?.dir) {
+          const dir = await resolveDirectory(state.dir, input.serverUrl).catch(() => state.dir ?? "")
+          if (dir !== target) return false
+        }
+
+        return page
+          .locator(promptSelector)
+          .first()
+          .isVisible()
+          .catch(() => false)
+      },
+      { timeout: 45_000 },
+    )
+    .toBe(true)
+  return { directory: target, slug: base64Encode(target) }
+}
+
+export async function waitSessionSaved(directory: string, sessionID: string, timeout = 30_000, serverUrl?: string) {
+  const sdk = createSdk(directory, serverUrl)
+  const target = await resolveDirectory(directory, serverUrl)
+
+  await expect
+    .poll(
+      async () => {
+        const data = await sdk.session
+          .get({ sessionID })
+          .then((x) => x.data)
+          .catch(() => undefined)
+        if (!data?.directory) return ""
+        return resolveDirectory(data.directory, serverUrl).catch(() => data.directory)
+      },
+      { timeout },
+    )
+    .toBe(target)
+
+  await expect
+    .poll(
+      async () => {
+        const items = await sdk.session
+          .messages({ sessionID, limit: 20 })
+          .then((x) => x.data ?? [])
+          .catch(() => [])
+        return items.some((item) => item.info.role === "user")
+      },
+      { timeout },
+    )
+    .toBe(true)
+}
+
 export function sessionIDFromUrl(url: string) {
   const match = /\/session\/([^/?#]+)/.exec(url)
   return match?.[1]
@@ -348,12 +532,15 @@ export async function confirmDialog(page: Page, buttonName: string | RegExp) {
 }
 
 export async function openSharePopover(page: Page) {
-  const rightSection = page.locator(titlebarRightSelector)
-  const shareButton = rightSection.getByRole("button", { name: "Share" }).first()
-  await expect(shareButton).toBeVisible()
+  const scroller = page.locator(".scroll-view__viewport").first()
+  await expect(scroller).toBeVisible()
+  await expect(scroller.getByRole("heading", { level: 1 }).first()).toBeVisible({ timeout: 30_000 })
+
+  const menuTrigger = scroller.getByRole("button", { name: /more options/i }).first()
+  await expect(menuTrigger).toBeVisible({ timeout: 30_000 })
 
   const popoverBody = page
-    .locator(popoverBodySelector)
+    .locator('[data-component="popover-content"]')
     .filter({ has: page.getByRole("button", { name: /^(Publish|Unpublish)$/ }) })
     .first()
 
@@ -363,16 +550,13 @@ export async function openSharePopover(page: Page) {
     .catch(() => false)
 
   if (!opened) {
-    await shareButton.click()
-    await expect(popoverBody).toBeVisible()
+    const menu = page.locator(dropdownMenuContentSelector).first()
+    await menuTrigger.click()
+    await clickMenuItem(menu, /share/i)
+    await expect(menu).toHaveCount(0)
+    await expect(popoverBody).toBeVisible({ timeout: 30_000 })
   }
-  return { rightSection, popoverBody }
-}
-
-export async function clickPopoverButton(page: Page, buttonName: string | RegExp) {
-  const button = page.getByRole("button").filter({ hasText: buttonName }).first()
-  await expect(button).toBeVisible()
-  await button.click()
+  return { rightSection: scroller, popoverBody }
 }
 
 export async function clickListItem(
@@ -436,8 +620,9 @@ export async function cleanupSession(input: {
   sessionID: string
   directory?: string
   sdk?: ReturnType<typeof createSdk>
+  serverUrl?: string
 }) {
-  const sdk = input.sdk ?? (input.directory ? createSdk(input.directory) : undefined)
+  const sdk = input.sdk ?? (input.directory ? createSdk(input.directory, input.serverUrl) : undefined)
   if (!sdk) throw new Error("cleanupSession requires sdk or directory")
   await waitSessionIdle(sdk, input.sessionID, 5_000).catch(() => undefined)
   const current = await status(sdk, input.sessionID).catch(() => undefined)
@@ -539,40 +724,6 @@ export async function seedSessionQuestion(
   return { id: result.id }
 }
 
-export async function seedSessionPermission(
-  sdk: ReturnType<typeof createSdk>,
-  input: {
-    sessionID: string
-    permission: string
-    patterns: string[]
-    description?: string
-  },
-) {
-  const text = [
-    "Your only valid response is one bash tool call.",
-    `Use this JSON input: ${JSON.stringify({
-      command: input.patterns[0] ? `ls ${JSON.stringify(input.patterns[0])}` : "pwd",
-      workdir: "/",
-      description: input.description ?? `seed ${input.permission} permission request`,
-    })}`,
-    "Do not output plain text.",
-  ].join("\n")
-
-  const result = await seed({
-    sdk,
-    sessionID: input.sessionID,
-    prompt: text,
-    timeout: 30_000,
-    probe: async () => {
-      const list = await sdk.permission.list().then((x) => x.data ?? [])
-      return list.find((item) => item.sessionID === input.sessionID)
-    },
-  })
-
-  if (!result) throw new Error("Timed out seeding permission request")
-  return { id: result.id }
-}
-
 export async function seedSessionTask(
   sdk: ReturnType<typeof createSdk>,
   input: {
@@ -631,36 +782,6 @@ export async function seedSessionTask(
   return result
 }
 
-export async function seedSessionTodos(
-  sdk: ReturnType<typeof createSdk>,
-  input: {
-    sessionID: string
-    todos: Array<{ content: string; status: string; priority: string }>
-  },
-) {
-  const text = [
-    "Your only valid response is one todowrite tool call.",
-    `Use this JSON input: ${JSON.stringify({ todos: input.todos })}`,
-    "Do not output plain text.",
-  ].join("\n")
-  const target = JSON.stringify(input.todos)
-
-  const result = await seed({
-    sdk,
-    sessionID: input.sessionID,
-    prompt: text,
-    timeout: 30_000,
-    probe: async () => {
-      const todos = await sdk.session.todo({ sessionID: input.sessionID }).then((x) => x.data ?? [])
-      if (JSON.stringify(todos) !== target) return
-      return true
-    },
-  })
-
-  if (!result) throw new Error("Timed out seeding todos")
-  return true
-}
-
 export async function clearSessionDockSeed(sdk: ReturnType<typeof createSdk>, sessionID: string) {
   const [questions, permissions] = await Promise.all([
     sdk.question.list().then((x) => x.data ?? []),
@@ -702,8 +823,14 @@ export async function openStatusPopover(page: Page) {
 }
 
 export async function openProjectMenu(page: Page, projectSlug: string) {
+  await openSidebar(page)
+  const item = page.locator(projectSwitchSelector(projectSlug)).first()
+  await expect(item).toBeVisible()
+  await item.hover()
+
   const trigger = page.locator(projectMenuTriggerSelector(projectSlug)).first()
   await expect(trigger).toHaveCount(1)
+  await expect(trigger).toBeVisible()
 
   const menu = page
     .locator(dropdownMenuContentSelector)
@@ -712,7 +839,7 @@ export async function openProjectMenu(page: Page, projectSlug: string) {
   const close = menu.locator(projectCloseMenuSelector(projectSlug)).first()
 
   const clicked = await trigger
-    .click({ timeout: 1500 })
+    .click({ force: true, timeout: 1500 })
     .then(() => true)
     .catch(() => false)
 
@@ -744,30 +871,57 @@ export async function openProjectMenu(page: Page, projectSlug: string) {
 }
 
 export async function setWorkspacesEnabled(page: Page, projectSlug: string, enabled: boolean) {
-  const current = await page
-    .getByRole("button", { name: "New workspace" })
-    .first()
-    .isVisible()
-    .then((x) => x)
-    .catch(() => false)
+  const current = () =>
+    page
+      .getByRole("button", { name: "New workspace" })
+      .first()
+      .isVisible()
+      .then((x) => x)
+      .catch(() => false)
 
-  if (current === enabled) return
+  if ((await current()) === enabled) return
+
+  if (enabled) {
+    await page.reload()
+    await openSidebar(page)
+    if ((await current()) === enabled) return
+  }
 
   const flip = async (timeout?: number) => {
     const menu = await openProjectMenu(page, projectSlug)
     const toggle = menu.locator(projectWorkspacesToggleSelector(projectSlug)).first()
     await expect(toggle).toBeVisible()
-    return toggle.click({ force: true, timeout })
+    await expect(toggle).toBeEnabled({ timeout: 30_000 })
+    const clicked = await toggle
+      .click({ force: true, timeout })
+      .then(() => true)
+      .catch(() => false)
+    if (clicked) return
+    await toggle.focus()
+    await page.keyboard.press("Enter")
   }
 
-  const flipped = await flip(1500)
-    .then(() => true)
-    .catch(() => false)
+  for (const timeout of [1500, undefined, undefined]) {
+    if ((await current()) === enabled) break
+    await flip(timeout)
+      .then(() => undefined)
+      .catch(() => undefined)
+    const matched = await expect
+      .poll(current, { timeout: 5_000 })
+      .toBe(enabled)
+      .then(() => true)
+      .catch(() => false)
+    if (matched) break
+  }
 
-  if (!flipped) await flip()
+  if ((await current()) !== enabled) {
+    await page.reload()
+    await openSidebar(page)
+  }
 
   const expected = enabled ? "New workspace" : "New session"
-  await expect(page.getByRole("button", { name: expected }).first()).toBeVisible()
+  await expect.poll(current, { timeout: 60_000 }).toBe(enabled)
+  await expect(page.getByRole("button", { name: expected }).first()).toBeVisible({ timeout: 30_000 })
 }
 
 export async function openWorkspaceMenu(page: Page, workspaceSlug: string) {
@@ -783,3 +937,13 @@ export async function openWorkspaceMenu(page: Page, workspaceSlug: string) {
   await expect(menu).toBeVisible()
   return menu
 }
+
+export async function assistantText(sdk: ReturnType<typeof createSdk>, sessionID: string) {
+  const messages = await sdk.session.messages({ sessionID, limit: 50 }).then((r) => r.data ?? [])
+  return messages
+    .filter((m) => m.info.role === "assistant")
+    .flatMap((m) => m.parts)
+    .filter((p) => p.type === "text")
+    .map((p) => p.text)
+    .join("\n")
+}

packages/app/e2e/app/home.spec.ts

@@ -3,8 +3,11 @@ import { serverNamePattern } from "../utils"
 
 test("home renders and shows core entrypoints", async ({ page }) => {
   await page.goto("/")
+  const nav = page.locator('[data-component="sidebar-nav-desktop"]')
 
   await expect(page.getByRole("button", { name: "Open project" }).first()).toBeVisible()
+  await expect(nav.getByText("No projects open")).toBeVisible()
+  await expect(nav.getByText("Open a project to get started")).toBeVisible()
   await expect(page.getByRole("button", { name: serverNamePattern })).toBeVisible()
 })
 

packages/app/e2e/app/palette.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "../fixtures"
-import { openPalette } from "../actions"
+import { closeDialog, openPalette } from "../actions"
 
 test("search palette opens and closes", async ({ page, gotoSession }) => {
   await gotoSession()
@@ -9,3 +9,12 @@ test("search palette opens and closes", async ({ page, gotoSession }) => {
   await page.keyboard.press("Escape")
   await expect(dialog).toHaveCount(0)
 })
+
+test("search palette also opens with cmd+p", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const dialog = await openPalette(page, "P")
+
+  await closeDialog(page, dialog)
+  await expect(dialog).toHaveCount(0)
+})

packages/app/e2e/backend.ts

@@ -0,0 +1,137 @@
+import { spawn } from "node:child_process"
+import fs from "node:fs/promises"
+import net from "node:net"
+import os from "node:os"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+type Handle = {
+  url: string
+  stop: () => Promise<void>
+}
+
+function freePort() {
+  return new Promise<number>((resolve, reject) => {
+    const server = net.createServer()
+    server.once("error", reject)
+    server.listen(0, () => {
+      const address = server.address()
+      if (!address || typeof address === "string") {
+        server.close(() => reject(new Error("Failed to acquire a free port")))
+        return
+      }
+      server.close((err) => {
+        if (err) reject(err)
+        else resolve(address.port)
+      })
+    })
+  })
+}
+
+async function waitForHealth(url: string, probe = "/global/health") {
+  const end = Date.now() + 120_000
+  let last = ""
+  while (Date.now() < end) {
+    try {
+      const res = await fetch(`${url}${probe}`)
+      if (res.ok) return
+      last = `status ${res.status}`
+    } catch (err) {
+      last = err instanceof Error ? err.message : String(err)
+    }
+    await new Promise((resolve) => setTimeout(resolve, 250))
+  }
+  throw new Error(`Timed out waiting for backend health at ${url}${probe}${last ? ` (${last})` : ""}`)
+}
+
+async function waitExit(proc: ReturnType<typeof spawn>, timeout = 10_000) {
+  if (proc.exitCode !== null) return
+  await Promise.race([
+    new Promise<void>((resolve) => proc.once("exit", () => resolve())),
+    new Promise<void>((resolve) => setTimeout(resolve, timeout)),
+  ])
+}
+
+const LOG_CAP = 100
+
+function cap(input: string[]) {
+  if (input.length > LOG_CAP) input.splice(0, input.length - LOG_CAP)
+}
+
+function tail(input: string[]) {
+  return input.slice(-40).join("")
+}
+
+export async function startBackend(label: string, input?: { llmUrl?: string }): Promise<Handle> {
+  const port = await freePort()
+  const sandbox = await fs.mkdtemp(path.join(os.tmpdir(), `opencode-e2e-${label}-`))
+  const appDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..")
+  const repoDir = path.resolve(appDir, "../..")
+  const opencodeDir = path.join(repoDir, "packages", "opencode")
+  const env = {
+    ...process.env,
+    OPENCODE_DISABLE_LSP_DOWNLOAD: "true",
+    OPENCODE_DISABLE_DEFAULT_PLUGINS: "true",
+    OPENCODE_EXPERIMENTAL_DISABLE_FILEWATCHER: "true",
+    OPENCODE_TEST_HOME: path.join(sandbox, "home"),
+    XDG_DATA_HOME: path.join(sandbox, "share"),
+    XDG_CACHE_HOME: path.join(sandbox, "cache"),
+    XDG_CONFIG_HOME: path.join(sandbox, "config"),
+    XDG_STATE_HOME: path.join(sandbox, "state"),
+    OPENCODE_CLIENT: "app",
+    OPENCODE_STRICT_CONFIG_DEPS: "true",
+    OPENCODE_E2E_LLM_URL: input?.llmUrl,
+  } satisfies Record<string, string | undefined>
+  const out: string[] = []
+  const err: string[] = []
+  const proc = spawn(
+    "bun",
+    ["run", "--conditions=browser", "./src/index.ts", "serve", "--port", String(port), "--hostname", "127.0.0.1"],
+    {
+      cwd: opencodeDir,
+      env,
+      stdio: ["ignore", "pipe", "pipe"],
+    },
+  )
+  proc.stdout?.on("data", (chunk) => {
+    out.push(String(chunk))
+    cap(out)
+  })
+  proc.stderr?.on("data", (chunk) => {
+    err.push(String(chunk))
+    cap(err)
+  })
+
+  const url = `http://127.0.0.1:${port}`
+  try {
+    await waitForHealth(url)
+  } catch (error) {
+    proc.kill("SIGTERM")
+    await fs.rm(sandbox, { recursive: true, force: true }).catch(() => undefined)
+    throw new Error(
+      [
+        `Failed to start isolated e2e backend for ${label}`,
+        error instanceof Error ? error.message : String(error),
+        tail(out),
+        tail(err),
+      ]
+        .filter(Boolean)
+        .join("\n"),
+    )
+  }
+
+  return {
+    url,
+    async stop() {
+      if (proc.exitCode === null) {
+        proc.kill("SIGTERM")
+        await waitExit(proc)
+      }
+      if (proc.exitCode === null) {
+        proc.kill("SIGKILL")
+        await waitExit(proc)
+      }
+      await fs.rm(sandbox, { recursive: true, force: true }).catch(() => undefined)
+    },
+  }
+}

packages/app/e2e/fixtures.ts

@@ -1,36 +1,277 @@
 import { test as base, expect, type Page } from "@playwright/test"
+import { ManagedRuntime } from "effect"
 import type { E2EWindow } from "../src/testing/terminal"
-import { cleanupSession, cleanupTestProject, createTestProject, seedProjects, sessionIDFromUrl } from "./actions"
+import type { Item, Reply, Usage } from "../../opencode/test/lib/llm-server"
+import { TestLLMServer } from "../../opencode/test/lib/llm-server"
+import { startBackend } from "./backend"
+import {
+  healthPhase,
+  cleanupSession,
+  cleanupTestProject,
+  createTestProject,
+  setHealthPhase,
+  sessionIDFromUrl,
+  waitSession,
+  waitSessionIdle,
+  waitSessionSaved,
+  waitSlug,
+} from "./actions"
 import { promptSelector } from "./selectors"
-import { createSdk, dirSlug, getWorktree, sessionPath } from "./utils"
+import { createSdk, dirSlug, getWorktree, serverUrl, sessionPath } from "./utils"
+
+type LLMFixture = {
+  url: string
+  push: (...input: (Item | Reply)[]) => Promise<void>
+  pushMatch: (
+    match: (hit: { url: URL; body: Record<string, unknown> }) => boolean,
+    ...input: (Item | Reply)[]
+  ) => Promise<void>
+  textMatch: (
+    match: (hit: { url: URL; body: Record<string, unknown> }) => boolean,
+    value: string,
+    opts?: { usage?: Usage },
+  ) => Promise<void>
+  toolMatch: (
+    match: (hit: { url: URL; body: Record<string, unknown> }) => boolean,
+    name: string,
+    input: unknown,
+  ) => Promise<void>
+  text: (value: string, opts?: { usage?: Usage }) => Promise<void>
+  tool: (name: string, input: unknown) => Promise<void>
+  toolHang: (name: string, input: unknown) => Promise<void>
+  reason: (value: string, opts?: { text?: string; usage?: Usage }) => Promise<void>
+  fail: (message?: unknown) => Promise<void>
+  error: (status: number, body: unknown) => Promise<void>
+  hang: () => Promise<void>
+  hold: (value: string, wait: PromiseLike<unknown>) => Promise<void>
+  hits: () => Promise<Array<{ url: URL; body: Record<string, unknown> }>>
+  calls: () => Promise<number>
+  wait: (count: number) => Promise<void>
+  inputs: () => Promise<Record<string, unknown>[]>
+  pending: () => Promise<number>
+  misses: () => Promise<Array<{ url: URL; body: Record<string, unknown> }>>
+}
+
+type LLMWorker = LLMFixture & {
+  reset: () => Promise<void>
+}
+
+type AssistantFixture = {
+  reply: LLMFixture["text"]
+  tool: LLMFixture["tool"]
+  toolHang: LLMFixture["toolHang"]
+  reason: LLMFixture["reason"]
+  fail: LLMFixture["fail"]
+  error: LLMFixture["error"]
+  hang: LLMFixture["hang"]
+  hold: LLMFixture["hold"]
+  calls: LLMFixture["calls"]
+  pending: LLMFixture["pending"]
+}
 
 export const settingsKey = "settings.v3"
 
+const seedModel = (() => {
+  const [providerID = "opencode", modelID = "big-pickle"] = (
+    process.env.OPENCODE_E2E_MODEL ?? "opencode/big-pickle"
+  ).split("/")
+  return {
+    providerID: providerID || "opencode",
+    modelID: modelID || "big-pickle",
+  }
+})()
+
+function clean(value: string | null) {
+  return (value ?? "").replace(/\u200B/g, "").trim()
+}
+
+async function visit(page: Page, url: string) {
+  let err: unknown
+  for (const _ of [0, 1, 2]) {
+    try {
+      await page.goto(url)
+      return
+    } catch (cause) {
+      err = cause
+      if (!String(cause).includes("ERR_CONNECTION_REFUSED")) throw cause
+      await new Promise((resolve) => setTimeout(resolve, 300))
+    }
+  }
+  throw err
+}
+
+async function promptSend(page: Page) {
+  return page
+    .evaluate(() => {
+      const win = window as E2EWindow
+      const sent = win.__opencode_e2e?.prompt?.sent
+      return {
+        started: sent?.started ?? 0,
+        count: sent?.count ?? 0,
+        sessionID: sent?.sessionID,
+        directory: sent?.directory,
+      }
+    })
+    .catch(() => ({ started: 0, count: 0, sessionID: undefined, directory: undefined }))
+}
+
+type ProjectHandle = {
+  directory: string
+  slug: string
+  gotoSession: (sessionID?: string) => Promise<void>
+  trackSession: (sessionID: string, directory?: string) => void
+  trackDirectory: (directory: string) => void
+  sdk: ReturnType<typeof createSdk>
+}
+
+type ProjectOptions = {
+  extra?: string[]
+  model?: { providerID: string; modelID: string }
+  setup?: (directory: string) => Promise<void>
+  beforeGoto?: (project: { directory: string; sdk: ReturnType<typeof createSdk> }) => Promise<void>
+}
+
+type ProjectFixture = ProjectHandle & {
+  open: (options?: ProjectOptions) => Promise<void>
+  prompt: (text: string) => Promise<string>
+  user: (text: string) => Promise<string>
+  shell: (cmd: string) => Promise<string>
+}
+
 type TestFixtures = {
+  llm: LLMFixture
+  assistant: AssistantFixture
+  project: ProjectFixture
   sdk: ReturnType<typeof createSdk>
   gotoSession: (sessionID?: string) => Promise<void>
-  withProject: <T>(
-    callback: (project: {
-      directory: string
-      slug: string
-      gotoSession: (sessionID?: string) => Promise<void>
-      trackSession: (sessionID: string, directory?: string) => void
-      trackDirectory: (directory: string) => void
-    }) => Promise<T>,
-    options?: { extra?: string[] },
-  ) => Promise<T>
 }
 
 type WorkerFixtures = {
+  _llm: LLMWorker
+  backend: {
+    url: string
+    sdk: (directory?: string) => ReturnType<typeof createSdk>
+  }
   directory: string
   slug: string
 }
 
 export const test = base.extend<TestFixtures, WorkerFixtures>({
-  directory: [
+  _llm: [
     async ({}, use) => {
-      const directory = await getWorktree()
-      await use(directory)
+      const rt = ManagedRuntime.make(TestLLMServer.layer)
+      try {
+        const svc = await rt.runPromise(TestLLMServer.asEffect())
+        await use({
+          url: svc.url,
+          push: (...input) => rt.runPromise(svc.push(...input)),
+          pushMatch: (match, ...input) => rt.runPromise(svc.pushMatch(match, ...input)),
+          textMatch: (match, value, opts) => rt.runPromise(svc.textMatch(match, value, opts)),
+          toolMatch: (match, name, input) => rt.runPromise(svc.toolMatch(match, name, input)),
+          text: (value, opts) => rt.runPromise(svc.text(value, opts)),
+          tool: (name, input) => rt.runPromise(svc.tool(name, input)),
+          toolHang: (name, input) => rt.runPromise(svc.toolHang(name, input)),
+          reason: (value, opts) => rt.runPromise(svc.reason(value, opts)),
+          fail: (message) => rt.runPromise(svc.fail(message)),
+          error: (status, body) => rt.runPromise(svc.error(status, body)),
+          hang: () => rt.runPromise(svc.hang),
+          hold: (value, wait) => rt.runPromise(svc.hold(value, wait)),
+          reset: () => rt.runPromise(svc.reset),
+          hits: () => rt.runPromise(svc.hits),
+          calls: () => rt.runPromise(svc.calls),
+          wait: (count) => rt.runPromise(svc.wait(count)),
+          inputs: () => rt.runPromise(svc.inputs),
+          pending: () => rt.runPromise(svc.pending),
+          misses: () => rt.runPromise(svc.misses),
+        })
+      } finally {
+        await rt.dispose()
+      }
+    },
+    { scope: "worker" },
+  ],
+  backend: [
+    async ({ _llm }, use, workerInfo) => {
+      const handle = await startBackend(`w${workerInfo.workerIndex}`, { llmUrl: _llm.url })
+      try {
+        await use({
+          url: handle.url,
+          sdk: (directory?: string) => createSdk(directory, handle.url),
+        })
+      } finally {
+        await handle.stop()
+      }
+    },
+    { scope: "worker" },
+  ],
+  llm: async ({ _llm }, use) => {
+    await _llm.reset()
+    await use({
+      url: _llm.url,
+      push: _llm.push,
+      pushMatch: _llm.pushMatch,
+      textMatch: _llm.textMatch,
+      toolMatch: _llm.toolMatch,
+      text: _llm.text,
+      tool: _llm.tool,
+      toolHang: _llm.toolHang,
+      reason: _llm.reason,
+      fail: _llm.fail,
+      error: _llm.error,
+      hang: _llm.hang,
+      hold: _llm.hold,
+      hits: _llm.hits,
+      calls: _llm.calls,
+      wait: _llm.wait,
+      inputs: _llm.inputs,
+      pending: _llm.pending,
+      misses: _llm.misses,
+    })
+    const pending = await _llm.pending()
+    if (pending > 0) {
+      throw new Error(`TestLLMServer still has ${pending} queued response(s) after the test finished`)
+    }
+  },
+  assistant: async ({ llm }, use) => {
+    await use({
+      reply: llm.text,
+      tool: llm.tool,
+      toolHang: llm.toolHang,
+      reason: llm.reason,
+      fail: llm.fail,
+      error: llm.error,
+      hang: llm.hang,
+      hold: llm.hold,
+      calls: llm.calls,
+      pending: llm.pending,
+    })
+  },
+  page: async ({ page }, use) => {
+    let boundary: string | undefined
+    setHealthPhase(page, "test")
+    const consoleHandler = (msg: { text(): string }) => {
+      const text = msg.text()
+      if (!text.includes("[e2e:error-boundary]")) return
+      if (healthPhase(page) === "cleanup") {
+        console.warn(`[e2e:error-boundary][cleanup-warning]\n${text}`)
+        return
+      }
+      boundary ||= text
+      console.log(text)
+    }
+    const pageErrorHandler = (err: Error) => {
+      console.log(`[e2e:pageerror] ${err.stack || err.message}`)
+    }
+    page.on("console", consoleHandler)
+    page.on("pageerror", pageErrorHandler)
+    await use(page)
+    page.off("console", consoleHandler)
+    page.off("pageerror", pageErrorHandler)
+    if (boundary) throw new Error(boundary)
+  },
+  directory: [
+    async ({ backend }, use) => {
+      await use(await getWorktree(backend.url))
     },
     { scope: "worker" },
   ],
@@ -40,75 +281,324 @@ export const test = base.extend<TestFixtures, WorkerFixtures>({
     },
     { scope: "worker" },
   ],
-  sdk: async ({ directory }, use) => {
-    await use(createSdk(directory))
+  sdk: async ({ directory, backend }, use) => {
+    await use(backend.sdk(directory))
   },
-  gotoSession: async ({ page, directory }, use) => {
-    await seedStorage(page, { directory })
+  gotoSession: async ({ page, directory, backend }, use) => {
+    await seedStorage(page, { directory, serverUrl: backend.url })
 
     const gotoSession = async (sessionID?: string) => {
-      await page.goto(sessionPath(directory, sessionID))
-      await expect(page.locator(promptSelector)).toBeVisible()
+      await visit(page, sessionPath(directory, sessionID))
+      await waitSession(page, {
+        directory,
+        sessionID,
+        serverUrl: backend.url,
+        allowAnySession: !sessionID,
+      })
     }
     await use(gotoSession)
   },
-  withProject: async ({ page }, use) => {
-    await use(async (callback, options) => {
-      const root = await createTestProject()
-      const slug = dirSlug(root)
-      const sessions = new Map<string, string>()
-      const dirs = new Set<string>()
-      await seedStorage(page, { directory: root, extra: options?.extra })
-
-      const gotoSession = async (sessionID?: string) => {
-        await page.goto(sessionPath(root, sessionID))
-        await expect(page.locator(promptSelector)).toBeVisible()
-        const current = sessionIDFromUrl(page.url())
-        if (current) trackSession(current)
-      }
-
-      const trackSession = (sessionID: string, directory?: string) => {
-        sessions.set(sessionID, directory ?? root)
-      }
-
-      const trackDirectory = (directory: string) => {
-        if (directory !== root) dirs.add(directory)
-      }
-
-      try {
-        await gotoSession()
-        return await callback({ directory: root, slug, gotoSession, trackSession, trackDirectory })
-      } finally {
-        await Promise.allSettled(
-          Array.from(sessions, ([sessionID, directory]) => cleanupSession({ sessionID, directory })),
-        )
-        await Promise.allSettled(Array.from(dirs, (directory) => cleanupTestProject(directory)))
-        await cleanupTestProject(root)
-      }
-    })
+  project: async ({ page, llm, backend }, use) => {
+    const item = makeProject(page, llm, backend)
+    try {
+      await use(item.project)
+    } finally {
+      await item.cleanup()
+    }
   },
 })
 
-async function seedStorage(page: Page, input: { directory: string; extra?: string[] }) {
-  await seedProjects(page, input)
-  await page.addInitScript(() => {
-    const win = window as E2EWindow
-    win.__opencode_e2e = {
-      ...win.__opencode_e2e,
-      terminal: {
-        enabled: true,
-        terminals: {},
-      },
+function makeProject(
+  page: Page,
+  llm: LLMFixture,
+  backend: { url: string; sdk: (directory?: string) => ReturnType<typeof createSdk> },
+) {
+  let state:
+    | {
+        directory: string
+        slug: string
+        sdk: ReturnType<typeof createSdk>
+        sessions: Map<string, string>
+        dirs: Set<string>
+      }
+    | undefined
+
+  const need = () => {
+    if (state) return state
+    throw new Error("project.open() must be called first")
+  }
+
+  const trackSession = (sessionID: string, directory?: string) => {
+    const cur = need()
+    cur.sessions.set(sessionID, directory ?? cur.directory)
+  }
+
+  const trackDirectory = (directory: string) => {
+    const cur = need()
+    if (directory !== cur.directory) cur.dirs.add(directory)
+  }
+
+  const gotoSession = async (sessionID?: string) => {
+    const cur = need()
+    await visit(page, sessionPath(cur.directory, sessionID))
+    await waitSession(page, {
+      directory: cur.directory,
+      sessionID,
+      serverUrl: backend.url,
+      allowAnySession: !sessionID,
+    })
+    const current = sessionIDFromUrl(page.url())
+    if (current) trackSession(current)
+  }
+
+  const open = async (options?: ProjectOptions) => {
+    if (state) return
+    const directory = await createTestProject({ serverUrl: backend.url })
+    const sdk = backend.sdk(directory)
+    await options?.setup?.(directory)
+    await seedStorage(page, {
+      directory,
+      extra: options?.extra,
+      model: options?.model,
+      serverUrl: backend.url,
+    })
+    state = {
+      directory,
+      slug: "",
+      sdk,
+      sessions: new Map(),
+      dirs: new Set(),
     }
-    localStorage.setItem(
-      "opencode.global.dat:model",
-      JSON.stringify({
-        recent: [{ providerID: "opencode", modelID: "big-pickle" }],
-        user: [],
-        variant: {},
-      }),
+    await options?.beforeGoto?.({ directory, sdk })
+    await gotoSession()
+    need().slug = await waitSlug(page)
+  }
+
+  const send = async (text: string, input: { noReply: boolean; shell: boolean }) => {
+    if (input.noReply) {
+      const cur = need()
+      const state = await page.evaluate(() => {
+        const model = (window as E2EWindow).__opencode_e2e?.model?.current
+        if (!model) return null
+        return {
+          dir: model.dir,
+          sessionID: model.sessionID,
+          agent: model.agent,
+          model: model.model ? { providerID: model.model.providerID, modelID: model.model.modelID } : undefined,
+          variant: model.variant ?? undefined,
+        }
+      })
+      const dir = state?.dir ?? cur.directory
+      const sdk = backend.sdk(dir)
+      const sessionID = state?.sessionID
+        ? state.sessionID
+        : await sdk.session.create({ directory: dir, title: "E2E Session" }).then((res) => {
+            if (!res.data?.id) throw new Error("Failed to create no-reply session")
+            return res.data.id
+          })
+      await sdk.session.prompt({
+        sessionID,
+        agent: state?.agent,
+        model: state?.model,
+        variant: state?.variant,
+        noReply: true,
+        parts: [{ type: "text", text }],
+      })
+      await visit(page, sessionPath(dir, sessionID))
+      const active = await waitSession(page, {
+        directory: dir,
+        sessionID,
+        serverUrl: backend.url,
+      })
+      trackSession(sessionID, active.directory)
+      await waitSessionSaved(active.directory, sessionID, 90_000, backend.url)
+      return sessionID
+    }
+
+    const prev = await promptSend(page)
+    if (!input.noReply && !input.shell && (await llm.pending()) === 0) {
+      await llm.text("ok")
+    }
+
+    const prompt = page.locator(promptSelector).first()
+    const submit = async () => {
+      await expect(prompt).toBeVisible()
+      await prompt.click()
+      if (input.shell) {
+        await page.keyboard.type("!")
+        await expect(prompt).toHaveAttribute("aria-label", /enter shell command/i)
+      }
+      await page.keyboard.type(text)
+      await expect.poll(async () => clean(await prompt.textContent())).toBe(text)
+      await page.keyboard.press("Enter")
+      const started = await expect
+        .poll(async () => (await promptSend(page)).started, { timeout: 5_000 })
+        .toBeGreaterThan(prev.started)
+        .then(() => true)
+        .catch(() => false)
+      if (started) return
+      const send = page.getByRole("button", { name: "Send" }).first()
+      const enabled = await send
+        .isEnabled()
+        .then((x) => x)
+        .catch(() => false)
+      if (enabled) {
+        await send.click()
+      } else {
+        await prompt.click()
+        await page.keyboard.press("Enter")
+      }
+      await expect.poll(async () => (await promptSend(page)).started, { timeout: 5_000 }).toBeGreaterThan(prev.started)
+    }
+
+    await submit()
+
+    let next: { sessionID: string; directory: string } | undefined
+    await expect
+      .poll(
+        async () => {
+          const sent = await promptSend(page)
+          if (sent.count <= prev.count) return ""
+          if (!sent.sessionID || !sent.directory) return ""
+          next = { sessionID: sent.sessionID, directory: sent.directory }
+          return sent.sessionID
+        },
+        { timeout: 90_000 },
+      )
+      .not.toBe("")
+
+    if (!next) throw new Error("Failed to observe prompt submission in e2e prompt probe")
+    const active = await waitSession(page, {
+      directory: next.directory,
+      sessionID: next.sessionID,
+      serverUrl: backend.url,
+    })
+    trackSession(next.sessionID, active.directory)
+    if (!input.shell) {
+      await waitSessionSaved(active.directory, next.sessionID, 90_000, backend.url)
+    }
+    await waitSessionIdle(backend.sdk(active.directory), next.sessionID, 90_000).catch(() => undefined)
+    return next.sessionID
+  }
+
+  const prompt = async (text: string) => {
+    return send(text, { noReply: false, shell: false })
+  }
+
+  const user = async (text: string) => {
+    return send(text, { noReply: true, shell: false })
+  }
+
+  const shell = async (cmd: string) => {
+    return send(cmd, { noReply: false, shell: true })
+  }
+
+  const cleanup = async () => {
+    const cur = state
+    if (!cur) return
+    setHealthPhase(page, "cleanup")
+    await Promise.allSettled(
+      Array.from(cur.sessions, ([sessionID, directory]) =>
+        cleanupSession({ sessionID, directory, serverUrl: backend.url }),
+      ),
     )
-  })
+    await Promise.allSettled(Array.from(cur.dirs, (directory) => cleanupTestProject(directory)))
+    await cleanupTestProject(cur.directory)
+    state = undefined
+    setHealthPhase(page, "test")
+  }
+
+  return {
+    project: {
+      open,
+      prompt,
+      user,
+      shell,
+      gotoSession,
+      trackSession,
+      trackDirectory,
+      get directory() {
+        return need().directory
+      },
+      get slug() {
+        return need().slug
+      },
+      get sdk() {
+        return need().sdk
+      },
+    },
+    cleanup,
+  }
+}
+
+async function seedStorage(
+  page: Page,
+  input: {
+    directory: string
+    extra?: string[]
+    model?: { providerID: string; modelID: string }
+    serverUrl?: string
+  },
+) {
+  const origin = input.serverUrl ?? serverUrl
+  await page.addInitScript(
+    (args: {
+      directory: string
+      serverUrl: string
+      extra: string[]
+      model: { providerID: string; modelID: string }
+    }) => {
+      const key = "opencode.global.dat:server"
+      const raw = localStorage.getItem(key)
+      const parsed = (() => {
+        if (!raw) return undefined
+        try {
+          return JSON.parse(raw) as unknown
+        } catch {
+          return undefined
+        }
+      })()
+
+      const store = parsed && typeof parsed === "object" ? (parsed as Record<string, unknown>) : {}
+      const list = Array.isArray(store.list) ? store.list : []
+      const lastProject = store.lastProject && typeof store.lastProject === "object" ? store.lastProject : {}
+      const projects = store.projects && typeof store.projects === "object" ? store.projects : {}
+      const next = { ...(projects as Record<string, unknown>) }
+      const nextList = list.includes(args.serverUrl) ? list : [args.serverUrl, ...list]
+
+      const add = (origin: string, directory: string) => {
+        const current = next[origin]
+        const items = Array.isArray(current) ? current : []
+        const existing = items.filter(
+          (p): p is { worktree: string; expanded?: boolean } =>
+            !!p &&
+            typeof p === "object" &&
+            "worktree" in p &&
+            typeof (p as { worktree?: unknown }).worktree === "string",
+        )
+        if (existing.some((p) => p.worktree === directory)) return
+        next[origin] = [{ worktree: directory, expanded: true }, ...existing]
+      }
+
+      for (const directory of [args.directory, ...args.extra]) {
+        add("local", directory)
+        add(args.serverUrl, directory)
+      }
+
+      localStorage.setItem(key, JSON.stringify({ list: nextList, projects: next, lastProject }))
+      localStorage.setItem("opencode.settings.dat:defaultServerUrl", args.serverUrl)
+
+      const win = window as E2EWindow
+      win.__opencode_e2e = {
+        ...win.__opencode_e2e,
+        model: { enabled: true },
+        prompt: { enabled: true },
+        terminal: { enabled: true, terminals: {} },
+      }
+      localStorage.setItem("opencode.global.dat:model", JSON.stringify({ recent: [args.model], user: [], variant: {} }))
+    },
+    { directory: input.directory, serverUrl: origin, extra: input.extra ?? [], model: input.model ?? seedModel },
+  )
 }
 
 export { expect }

packages/app/e2e/models/model-picker.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from "../fixtures"
 import { promptSelector } from "../selectors"
 import { clickListItem } from "../actions"
 
-test("smoke model selection updates prompt footer", async ({ page, gotoSession }) => {
+test.fixme("smoke model selection updates prompt footer", async ({ page, gotoSession }) => {
   await gotoSession()
 
   await page.locator(promptSelector).click()

packages/app/e2e/projects/project-edit.spec.ts

@@ -1,43 +1,49 @@
 import { test, expect } from "../fixtures"
 import { clickMenuItem, openProjectMenu, openSidebar } from "../actions"
 
-test("dialog edit project updates name and startup script", async ({ page, withProject }) => {
+test("dialog edit project updates name and startup script", async ({ page, project }) => {
   await page.setViewportSize({ width: 1400, height: 800 })
 
-  await withProject(async ({ slug }) => {
-    await openSidebar(page)
+  await project.open()
+  await openSidebar(page)
 
-    const open = async () => {
-      const menu = await openProjectMenu(page, slug)
-      await clickMenuItem(menu, /^Edit$/i, { force: true })
+  const open = async () => {
+    const menu = await openProjectMenu(page, project.slug)
+    await clickMenuItem(menu, /^Edit$/i, { force: true })
 
-      const dialog = page.getByRole("dialog")
-      await expect(dialog).toBeVisible()
-      await expect(dialog.getByRole("heading", { level: 2 })).toHaveText("Edit project")
-      return dialog
-    }
+    const dialog = page.getByRole("dialog")
+    await expect(dialog).toBeVisible()
+    await expect(dialog.getByRole("heading", { level: 2 })).toHaveText("Edit project")
+    return dialog
+  }
 
-    const name = `e2e project ${Date.now()}`
-    const startup = `echo e2e_${Date.now()}`
+  const name = `e2e project ${Date.now()}`
+  const startup = `echo e2e_${Date.now()}`
 
-    const dialog = await open()
+  const dialog = await open()
 
-    const nameInput = dialog.getByLabel("Name")
-    await nameInput.fill(name)
+  const nameInput = dialog.getByLabel("Name")
+  await nameInput.fill(name)
 
-    const startupInput = dialog.getByLabel("Workspace startup script")
-    await startupInput.fill(startup)
+  const startupInput = dialog.getByLabel("Workspace startup script")
+  await startupInput.fill(startup)
 
-    await dialog.getByRole("button", { name: "Save" }).click()
-    await expect(dialog).toHaveCount(0)
+  await dialog.getByRole("button", { name: "Save" }).click()
+  await expect(dialog).toHaveCount(0)
 
-    const header = page.locator(".group\\/project").first()
-    await expect(header).toContainText(name)
-
-    const reopened = await open()
-    await expect(reopened.getByLabel("Name")).toHaveValue(name)
-    await expect(reopened.getByLabel("Workspace startup script")).toHaveValue(startup)
-    await reopened.getByRole("button", { name: "Cancel" }).click()
-    await expect(reopened).toHaveCount(0)
-  })
+  await expect
+    .poll(
+      async () => {
+        await page.reload()
+        await openSidebar(page)
+        const reopened = await open()
+        const value = await reopened.getByLabel("Name").inputValue()
+        const next = await reopened.getByLabel("Workspace startup script").inputValue()
+        await reopened.getByRole("button", { name: "Cancel" }).click()
+        await expect(reopened).toHaveCount(0)
+        return `${value}\n${next}`
+      },
+      { timeout: 30_000 },
+    )
+    .toBe(`${name}\n${startup}`)
 })

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

@@ -3,51 +3,46 @@ import { createTestProject, cleanupTestProject, openSidebar, clickMenuItem, open
 import { projectSwitchSelector } from "../selectors"
 import { dirSlug } from "../utils"
 
-test("closing active project navigates to another open project", async ({ page, withProject }) => {
+test("closing active project navigates to another open project", async ({ page, project }) => {
   await page.setViewportSize({ width: 1400, height: 800 })
 
   const other = await createTestProject()
   const otherSlug = dirSlug(other)
 
   try {
-    await withProject(
-      async ({ slug }) => {
-        await openSidebar(page)
+    await project.open({ extra: [other] })
+    await openSidebar(page)
 
-        const otherButton = page.locator(projectSwitchSelector(otherSlug)).first()
-        await expect(otherButton).toBeVisible()
-        await otherButton.click()
+    const otherButton = page.locator(projectSwitchSelector(otherSlug)).first()
+    await expect(otherButton).toBeVisible()
+    await otherButton.click()
 
-        await expect(page).toHaveURL(new RegExp(`/${otherSlug}/session`))
+    await expect(page).toHaveURL(new RegExp(`/${otherSlug}/session`))
 
-        const menu = await openProjectMenu(page, otherSlug)
+    const menu = await openProjectMenu(page, otherSlug)
+    await clickMenuItem(menu, /^Close$/i, { force: true })
 
-        await clickMenuItem(menu, /^Close$/i, { force: true })
+    await expect
+      .poll(
+        () => {
+          const pathname = new URL(page.url()).pathname
+          if (new RegExp(`^/${project.slug}/session(?:/[^/]+)?/?$`).test(pathname)) return "project"
+          if (pathname === "/") return "home"
+          return ""
+        },
+        { timeout: 15_000 },
+      )
+      .toMatch(/^(project|home)$/)
 
-        await expect
-          .poll(
-            () => {
-              const pathname = new URL(page.url()).pathname
-              if (new RegExp(`^/${slug}/session(?:/[^/]+)?/?$`).test(pathname)) return "project"
-              if (pathname === "/") return "home"
-              return ""
-            },
-            { timeout: 15_000 },
-          )
-          .toMatch(/^(project|home)$/)
-
-        await expect(page).not.toHaveURL(new RegExp(`/${otherSlug}/session(?:[/?#]|$)`))
-        await expect
-          .poll(
-            async () => {
-              return await page.locator(projectSwitchSelector(otherSlug)).count()
-            },
-            { timeout: 15_000 },
-          )
-          .toBe(0)
-      },
-      { extra: [other] },
-    )
+    await expect(page).not.toHaveURL(new RegExp(`/${otherSlug}/session(?:[/?#]|$)`))
+    await expect
+      .poll(
+        async () => {
+          return await page.locator(projectSwitchSelector(otherSlug)).count()
+        },
+        { timeout: 15_000 },
+      )
+      .toBe(0)
   } finally {
     await cleanupTestProject(other)
   }

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

@@ -1,142 +1,93 @@
 import { base64Decode } from "@opencode-ai/util/encode"
-import type { Page } from "@playwright/test"
 import { test, expect } from "../fixtures"
-import { defocus, createTestProject, cleanupTestProject, openSidebar, sessionIDFromUrl, waitSlug } from "../actions"
-import { projectSwitchSelector, promptSelector, workspaceItemSelector, workspaceNewSessionSelector } from "../selectors"
+import {
+  defocus,
+  createTestProject,
+  cleanupTestProject,
+  openSidebar,
+  setWorkspacesEnabled,
+  waitSession,
+  waitSlug,
+} from "../actions"
+import { projectSwitchSelector, workspaceItemSelector, workspaceNewSessionSelector } from "../selectors"
 import { dirSlug, resolveDirectory } from "../utils"
 
-async function workspaces(page: Page, directory: string, enabled: boolean) {
-  await page.evaluate(
-    ({ directory, enabled }: { directory: string; enabled: boolean }) => {
-      const key = "opencode.global.dat:layout"
-      const raw = localStorage.getItem(key)
-      const data = raw ? JSON.parse(raw) : {}
-      const sidebar = data.sidebar && typeof data.sidebar === "object" ? data.sidebar : {}
-      const current =
-        sidebar.workspaces && typeof sidebar.workspaces === "object" && !Array.isArray(sidebar.workspaces)
-          ? sidebar.workspaces
-          : {}
-      const next = { ...current }
-
-      if (enabled) next[directory] = true
-      if (!enabled) delete next[directory]
-
-      localStorage.setItem(
-        key,
-        JSON.stringify({
-          ...data,
-          sidebar: {
-            ...sidebar,
-            workspaces: next,
-          },
-        }),
-      )
-    },
-    { directory, enabled },
-  )
-}
-
-test("can switch between projects from sidebar", async ({ page, withProject }) => {
+test("can switch between projects from sidebar", async ({ page, project }) => {
   await page.setViewportSize({ width: 1400, height: 800 })
 
   const other = await createTestProject()
   const otherSlug = dirSlug(other)
 
   try {
-    await withProject(
-      async ({ directory }) => {
-        await defocus(page)
+    await project.open({ extra: [other] })
+    await defocus(page)
 
-        const currentSlug = dirSlug(directory)
-        const otherButton = page.locator(projectSwitchSelector(otherSlug)).first()
-        await expect(otherButton).toBeVisible()
-        await otherButton.click()
+    const currentSlug = dirSlug(project.directory)
+    const otherButton = page.locator(projectSwitchSelector(otherSlug)).first()
+    await expect(otherButton).toBeVisible()
+    await otherButton.click()
 
-        await expect(page).toHaveURL(new RegExp(`/${otherSlug}/session`))
+    await expect(page).toHaveURL(new RegExp(`/${otherSlug}/session`))
 
-        const currentButton = page.locator(projectSwitchSelector(currentSlug)).first()
-        await expect(currentButton).toBeVisible()
-        await currentButton.click()
+    const currentButton = page.locator(projectSwitchSelector(currentSlug)).first()
+    await expect(currentButton).toBeVisible()
+    await currentButton.click()
 
-        await expect(page).toHaveURL(new RegExp(`/${currentSlug}/session`))
-      },
-      { extra: [other] },
-    )
+    await expect(page).toHaveURL(new RegExp(`/${currentSlug}/session`))
   } finally {
     await cleanupTestProject(other)
   }
 })
 
-test("switching back to a project opens the latest workspace session", async ({ page, withProject }) => {
+test("switching back to a project opens the latest workspace session", async ({ page, project }) => {
   await page.setViewportSize({ width: 1400, height: 800 })
 
   const other = await createTestProject()
   const otherSlug = dirSlug(other)
   try {
-    await withProject(
-      async ({ directory, slug, trackSession, trackDirectory }) => {
-        await defocus(page)
-        await workspaces(page, directory, true)
-        await page.reload()
-        await expect(page.locator(promptSelector)).toBeVisible()
-        await openSidebar(page)
-        await expect(page.getByRole("button", { name: "New workspace" }).first()).toBeVisible()
+    await project.open({ extra: [other] })
+    await defocus(page)
+    await setWorkspacesEnabled(page, project.slug, true)
+    await openSidebar(page)
+    await expect(page.getByRole("button", { name: "New workspace" }).first()).toBeVisible()
 
-        await page.getByRole("button", { name: "New workspace" }).first().click()
+    await page.getByRole("button", { name: "New workspace" }).first().click()
 
-        const raw = await waitSlug(page, [slug])
-        const dir = base64Decode(raw)
-        if (!dir) throw new Error(`Failed to decode workspace slug: ${raw}`)
-        const space = await resolveDirectory(dir)
-        const next = dirSlug(space)
-        trackDirectory(space)
-        await openSidebar(page)
+    const raw = await waitSlug(page, [project.slug])
+    const dir = base64Decode(raw)
+    if (!dir) throw new Error(`Failed to decode workspace slug: ${raw}`)
+    const space = await resolveDirectory(dir)
+    const next = dirSlug(space)
+    project.trackDirectory(space)
+    await openSidebar(page)
 
-        const item = page.locator(`${workspaceItemSelector(next)}, ${workspaceItemSelector(raw)}`).first()
-        await expect(item).toBeVisible()
-        await item.hover()
+    const item = page.locator(`${workspaceItemSelector(next)}, ${workspaceItemSelector(raw)}`).first()
+    await expect(item).toBeVisible()
+    await item.hover()
 
-        const btn = page.locator(`${workspaceNewSessionSelector(next)}, ${workspaceNewSessionSelector(raw)}`).first()
-        await expect(btn).toBeVisible()
-        await btn.click({ force: true })
+    const btn = page.locator(`${workspaceNewSessionSelector(next)}, ${workspaceNewSessionSelector(raw)}`).first()
+    await expect(btn).toBeVisible()
+    await btn.click({ force: true })
 
-        // A new workspace can be discovered via a transient slug before the route and sidebar
-        // settle to the canonical workspace path on Windows, so interact with either and assert
-        // against the resolved workspace slug.
-        await waitSlug(page)
-        await expect(page).toHaveURL(new RegExp(`/${next}/session(?:[/?#]|$)`))
+    await waitSession(page, { directory: space })
 
-        // Create a session by sending a prompt
-        const prompt = page.locator(promptSelector)
-        await expect(prompt).toBeVisible()
-        await prompt.fill("test")
-        await page.keyboard.press("Enter")
+    const created = await project.user("test")
 
-        // Wait for the URL to update with the new session ID
-        await expect.poll(() => sessionIDFromUrl(page.url()) ?? "", { timeout: 15_000 }).not.toBe("")
+    await expect(page).toHaveURL(new RegExp(`/${next}/session/${created}(?:[/?#]|$)`))
 
-        const created = sessionIDFromUrl(page.url())
-        if (!created) throw new Error(`Failed to get session ID from url: ${page.url()}`)
-        trackSession(created, space)
+    await openSidebar(page)
 
-        await expect(page).toHaveURL(new RegExp(`/${next}/session/${created}(?:[/?#]|$)`))
+    const otherButton = page.locator(projectSwitchSelector(otherSlug)).first()
+    await expect(otherButton).toBeVisible()
+    await otherButton.click({ force: true })
+    await waitSession(page, { directory: other })
 
-        await openSidebar(page)
+    const rootButton = page.locator(projectSwitchSelector(project.slug)).first()
+    await expect(rootButton).toBeVisible()
+    await rootButton.click({ force: true })
 
-        const otherButton = page.locator(projectSwitchSelector(otherSlug)).first()
-        await expect(otherButton).toBeVisible()
-        await otherButton.click()
-        await expect(page).toHaveURL(new RegExp(`/${otherSlug}/session`))
-
-        const rootButton = page.locator(projectSwitchSelector(slug)).first()
-        await expect(rootButton).toBeVisible()
-        await rootButton.click()
-
-        await expect.poll(() => sessionIDFromUrl(page.url()) ?? "").toBe(created)
-        await expect(page).toHaveURL(new RegExp(`/session/${created}(?:[/?#]|$)`))
-      },
-      { extra: [other] },
-    )
+    await waitSession(page, { directory: space, sessionID: created })
+    await expect(page).toHaveURL(new RegExp(`/session/${created}(?:[/?#]|$)`))
   } finally {
     await cleanupTestProject(other)
   }

packages/app/e2e/projects/workspace-new-session.spec.ts

@@ -1,109 +1,78 @@
-import { base64Decode } from "@opencode-ai/util/encode"
 import type { Page } from "@playwright/test"
 import { test, expect } from "../fixtures"
-import { openSidebar, sessionIDFromUrl, setWorkspacesEnabled, slugFromUrl, waitSlug } from "../actions"
-import { promptSelector, workspaceItemSelector, workspaceNewSessionSelector } from "../selectors"
-import { createSdk } from "../utils"
+import {
+  openSidebar,
+  resolveSlug,
+  sessionIDFromUrl,
+  setWorkspacesEnabled,
+  waitDir,
+  waitSession,
+  waitSlug,
+} from "../actions"
+import { workspaceItemSelector, workspaceNewSessionSelector } from "../selectors"
 
-async function waitWorkspaceReady(page: Page, slug: string) {
+function item(space: { slug: string; raw: string }) {
+  return `${workspaceItemSelector(space.slug)}, ${workspaceItemSelector(space.raw)}`
+}
+
+function button(space: { slug: string; raw: string }) {
+  return `${workspaceNewSessionSelector(space.slug)}, ${workspaceNewSessionSelector(space.raw)}`
+}
+
+async function waitWorkspaceReady(page: Page, space: { slug: string; raw: string }) {
   await openSidebar(page)
-  await expect
-    .poll(
-      async () => {
-        const item = page.locator(workspaceItemSelector(slug)).first()
-        try {
-          await item.hover({ timeout: 500 })
-          return true
-        } catch {
-          return false
-        }
-      },
-      { timeout: 60_000 },
-    )
-    .toBe(true)
+  await expect(page.locator(item(space)).first()).toBeVisible({ timeout: 60_000 })
 }
 
 async function createWorkspace(page: Page, root: string, seen: string[]) {
   await openSidebar(page)
   await page.getByRole("button", { name: "New workspace" }).first().click()
 
-  const slug = await waitSlug(page, [root, ...seen])
-  const directory = base64Decode(slug)
-  if (!directory) throw new Error(`Failed to decode workspace slug: ${slug}`)
-  return { slug, directory }
-}
-
-async function openWorkspaceNewSession(page: Page, slug: string) {
-  await waitWorkspaceReady(page, slug)
-
-  const item = page.locator(workspaceItemSelector(slug)).first()
-  await item.hover()
-
-  const button = page.locator(workspaceNewSessionSelector(slug)).first()
-  await expect(button).toBeVisible()
-  await button.click({ force: true })
-
-  const next = await waitSlug(page)
-  await expect(page).toHaveURL(new RegExp(`/${next}/session(?:[/?#]|$)`))
+  const next = await resolveSlug(await waitSlug(page, [root, ...seen]))
+  await waitDir(page, next.directory)
   return next
 }
 
-async function createSessionFromWorkspace(page: Page, slug: string, text: string) {
-  const next = await openWorkspaceNewSession(page, slug)
+async function openWorkspaceNewSession(page: Page, space: { slug: string; raw: string; directory: string }) {
+  await waitWorkspaceReady(page, space)
 
-  const prompt = page.locator(promptSelector)
-  await expect(prompt).toBeVisible()
-  await expect(prompt).toBeEditable()
-  await prompt.click()
-  await expect(prompt).toBeFocused()
-  await prompt.fill(text)
-  await expect.poll(async () => ((await prompt.textContent()) ?? "").trim()).toContain(text)
-  await prompt.press("Enter")
+  const row = page.locator(item(space)).first()
+  await row.hover()
 
-  await expect.poll(() => slugFromUrl(page.url())).toBe(next)
-  await expect.poll(() => sessionIDFromUrl(page.url()) ?? "", { timeout: 30_000 }).not.toBe("")
+  const next = page.locator(button(space)).first()
+  await expect(next).toBeVisible()
+  await next.click({ force: true })
 
-  const sessionID = sessionIDFromUrl(page.url())
-  if (!sessionID) throw new Error(`Failed to parse session id from url: ${page.url()}`)
-  await expect(page).toHaveURL(new RegExp(`/${next}/session/${sessionID}(?:[/?#]|$)`))
-  return { sessionID, slug: next }
+  await waitSession(page, { directory: space.directory })
+  await expect.poll(() => sessionIDFromUrl(page.url()) ?? "").toBe("")
 }
 
-async function sessionDirectory(directory: string, sessionID: string) {
-  const info = await createSdk(directory)
-    .session.get({ sessionID })
-    .then((x) => x.data)
-    .catch(() => undefined)
-  if (!info) return ""
-  return info.directory
+async function createSessionFromWorkspace(
+  project: Parameters<typeof test>[0]["project"],
+  page: Page,
+  space: { slug: string; raw: string; directory: string },
+  text: string,
+) {
+  await openWorkspaceNewSession(page, space)
+  return project.user(text)
 }
 
-test("new sessions from sidebar workspace actions stay in selected workspace", async ({ page, withProject }) => {
+test("new sessions from sidebar workspace actions stay in selected workspace", async ({ page, project }) => {
   await page.setViewportSize({ width: 1400, height: 800 })
 
-  await withProject(async ({ directory, slug: root, trackSession, trackDirectory }) => {
-    await openSidebar(page)
-    await setWorkspacesEnabled(page, root, true)
+  await project.open()
+  await openSidebar(page)
+  await setWorkspacesEnabled(page, project.slug, true)
 
-    const first = await createWorkspace(page, root, [])
-    trackDirectory(first.directory)
-    await waitWorkspaceReady(page, first.slug)
+  const first = await createWorkspace(page, project.slug, [])
+  project.trackDirectory(first.directory)
+  await waitWorkspaceReady(page, first)
 
-    const second = await createWorkspace(page, root, [first.slug])
-    trackDirectory(second.directory)
-    await waitWorkspaceReady(page, second.slug)
+  const second = await createWorkspace(page, project.slug, [first.slug])
+  project.trackDirectory(second.directory)
+  await waitWorkspaceReady(page, second)
 
-    const firstSession = await createSessionFromWorkspace(page, first.slug, `workspace one ${Date.now()}`)
-    trackSession(firstSession.sessionID, first.directory)
-
-    const secondSession = await createSessionFromWorkspace(page, second.slug, `workspace two ${Date.now()}`)
-    trackSession(secondSession.sessionID, second.directory)
-
-    const thirdSession = await createSessionFromWorkspace(page, first.slug, `workspace one again ${Date.now()}`)
-    trackSession(thirdSession.sessionID, first.directory)
-
-    await expect.poll(() => sessionDirectory(first.directory, firstSession.sessionID)).toBe(first.directory)
-    await expect.poll(() => sessionDirectory(second.directory, secondSession.sessionID)).toBe(second.directory)
-    await expect.poll(() => sessionDirectory(first.directory, thirdSession.sessionID)).toBe(first.directory)
-  })
+  await createSessionFromWorkspace(project, page, first, `workspace one ${Date.now()}`)
+  await createSessionFromWorkspace(project, page, second, `workspace two ${Date.now()}`)
+  await createSessionFromWorkspace(project, page, first, `workspace one again ${Date.now()}`)
 })

packages/app/e2e/projects/workspaces.spec.ts

@@ -1,7 +1,7 @@
-import { base64Decode } from "@opencode-ai/util/encode"
 import fs from "node:fs/promises"
 import os from "node:os"
 import path from "node:path"
+import { base64Decode } from "@opencode-ai/util/encode"
 import type { Page } from "@playwright/test"
 
 import { test, expect } from "../fixtures"
@@ -13,29 +13,32 @@ import {
   confirmDialog,
   openSidebar,
   openWorkspaceMenu,
+  resolveSlug,
   setWorkspacesEnabled,
   slugFromUrl,
+  waitDir,
   waitSlug,
 } from "../actions"
-import { dropdownMenuContentSelector, inlineInputSelector, workspaceItemSelector } from "../selectors"
-import { createSdk, dirSlug } from "../utils"
+import { inlineInputSelector, workspaceItemSelector } from "../selectors"
+import { dirSlug } from "../utils"
 
-async function setupWorkspaceTest(page: Page, project: { slug: string }) {
+async function setupWorkspaceTest(page: Page, project: { slug: string; trackDirectory: (directory: string) => void }) {
   const rootSlug = project.slug
   await openSidebar(page)
 
   await setWorkspacesEnabled(page, rootSlug, true)
 
   await page.getByRole("button", { name: "New workspace" }).first().click()
-  const slug = await waitSlug(page, [rootSlug])
-  const dir = base64Decode(slug)
+  const next = await resolveSlug(await waitSlug(page, [rootSlug]))
+  await waitDir(page, next.directory)
+  project.trackDirectory(next.directory)
 
   await openSidebar(page)
 
   await expect
     .poll(
       async () => {
-        const item = page.locator(workspaceItemSelector(slug)).first()
+        const item = page.locator(workspaceItemSelector(next.slug)).first()
         try {
           await item.hover({ timeout: 500 })
           return true
@@ -47,47 +50,195 @@ async function setupWorkspaceTest(page: Page, project: { slug: string }) {
     )
     .toBe(true)
 
-  return { rootSlug, slug, directory: dir }
+  return { rootSlug, slug: next.slug, directory: next.directory }
 }
 
-test("can enable and disable workspaces from project menu", async ({ page, withProject }) => {
+test("can enable and disable workspaces from project menu", async ({ page, project }) => {
   await page.setViewportSize({ width: 1400, height: 800 })
+  await project.open()
 
-  await withProject(async ({ slug }) => {
-    await openSidebar(page)
+  await openSidebar(page)
 
-    await expect(page.getByRole("button", { name: "New session" }).first()).toBeVisible()
-    await expect(page.getByRole("button", { name: "New workspace" })).toHaveCount(0)
+  await expect(page.getByRole("button", { name: "New session" }).first()).toBeVisible()
+  await expect(page.getByRole("button", { name: "New workspace" })).toHaveCount(0)
 
-    await setWorkspacesEnabled(page, slug, true)
-    await expect(page.getByRole("button", { name: "New workspace" }).first()).toBeVisible()
-    await expect(page.locator(workspaceItemSelector(slug)).first()).toBeVisible()
+  await setWorkspacesEnabled(page, project.slug, true)
+  await expect(page.getByRole("button", { name: "New workspace" }).first()).toBeVisible()
+  await expect(page.locator(workspaceItemSelector(project.slug)).first()).toBeVisible()
 
-    await setWorkspacesEnabled(page, slug, false)
-    await expect(page.getByRole("button", { name: "New session" }).first()).toBeVisible()
-    await expect(page.locator(workspaceItemSelector(slug))).toHaveCount(0)
-  })
+  await setWorkspacesEnabled(page, project.slug, false)
+  await expect(page.getByRole("button", { name: "New session" }).first()).toBeVisible()
+  await expect(page.locator(workspaceItemSelector(project.slug))).toHaveCount(0)
 })
 
-test("can create a workspace", async ({ page, withProject }) => {
+test("can create a workspace", async ({ page, project }) => {
+  await page.setViewportSize({ width: 1400, height: 800 })
+  await project.open()
+
+  await openSidebar(page)
+  await setWorkspacesEnabled(page, project.slug, true)
+
+  await expect(page.getByRole("button", { name: "New workspace" }).first()).toBeVisible()
+
+  await page.getByRole("button", { name: "New workspace" }).first().click()
+  const next = await resolveSlug(await waitSlug(page, [project.slug]))
+  await waitDir(page, next.directory)
+  project.trackDirectory(next.directory)
+
+  await openSidebar(page)
+
+  await expect
+    .poll(
+      async () => {
+        const item = page.locator(workspaceItemSelector(next.slug)).first()
+        try {
+          await item.hover({ timeout: 500 })
+          return true
+        } catch {
+          return false
+        }
+      },
+      { timeout: 60_000 },
+    )
+    .toBe(true)
+
+  await expect(page.locator(workspaceItemSelector(next.slug)).first()).toBeVisible()
+})
+
+test("non-git projects keep workspace mode disabled", async ({ page, project }) => {
   await page.setViewportSize({ width: 1400, height: 800 })
 
-  await withProject(async ({ slug }) => {
-    await openSidebar(page)
-    await setWorkspacesEnabled(page, slug, true)
+  const nonGit = await fs.mkdtemp(path.join(os.tmpdir(), "opencode-e2e-project-nongit-"))
+  const nonGitSlug = dirSlug(nonGit)
 
-    await expect(page.getByRole("button", { name: "New workspace" }).first()).toBeVisible()
+  await fs.writeFile(path.join(nonGit, "README.md"), "# e2e nongit\n")
 
-    await page.getByRole("button", { name: "New workspace" }).first().click()
-    const workspaceSlug = await waitSlug(page, [slug])
-    const workspaceDir = base64Decode(workspaceSlug)
+  try {
+    await project.open({ extra: [nonGit] })
+    await page.goto(`/${nonGitSlug}/session`)
+
+    await expect.poll(() => slugFromUrl(page.url()), { timeout: 30_000 }).not.toBe("")
+
+    const activeDir = await resolveSlug(slugFromUrl(page.url())).then((item) => item.directory)
+    expect(path.basename(activeDir)).toContain("opencode-e2e-project-nongit-")
 
     await openSidebar(page)
+    await expect(page.getByRole("button", { name: "New workspace" })).toHaveCount(0)
+    await expect(page.getByRole("button", { name: "Create Git repository" })).toBeVisible()
+  } finally {
+    await cleanupTestProject(nonGit)
+  }
+})
 
+test("can rename a workspace", async ({ page, project }) => {
+  await page.setViewportSize({ width: 1400, height: 800 })
+  await project.open()
+
+  const { slug } = await setupWorkspaceTest(page, project)
+
+  const rename = `e2e workspace ${Date.now()}`
+  const menu = await openWorkspaceMenu(page, slug)
+  await clickMenuItem(menu, /^Rename$/i, { force: true })
+
+  await expect(menu).toHaveCount(0)
+
+  const item = page.locator(workspaceItemSelector(slug)).first()
+  await expect(item).toBeVisible()
+  const input = item.locator(inlineInputSelector).first()
+  const shown = await input
+    .isVisible()
+    .then((x) => x)
+    .catch(() => false)
+  if (!shown) {
+    const retry = await openWorkspaceMenu(page, slug)
+    await clickMenuItem(retry, /^Rename$/i, { force: true })
+    await expect(retry).toHaveCount(0)
+  }
+  await expect(input).toBeVisible()
+  await input.fill(rename)
+  await input.press("Enter")
+  await expect(item).toContainText(rename)
+})
+
+test("can reset a workspace", async ({ page, project }) => {
+  await page.setViewportSize({ width: 1400, height: 800 })
+  await project.open()
+
+  const { slug, directory: createdDir } = await setupWorkspaceTest(page, project)
+
+  const readme = path.join(createdDir, "README.md")
+  const extra = path.join(createdDir, `e2e_reset_${Date.now()}.txt`)
+  const original = await fs.readFile(readme, "utf8")
+  const dirty = `${original.trimEnd()}\n\nchange_${Date.now()}\n`
+  await fs.writeFile(readme, dirty, "utf8")
+  await fs.writeFile(extra, `created_${Date.now()}\n`, "utf8")
+
+  await expect
+    .poll(async () => {
+      return await fs
+        .stat(extra)
+        .then(() => true)
+        .catch(() => false)
+    })
+    .toBe(true)
+
+  await expect
+    .poll(async () => {
+      const files = await project.sdk.file
+        .status({ directory: createdDir })
+        .then((r) => r.data ?? [])
+        .catch(() => [])
+      return files.length
+    })
+    .toBeGreaterThan(0)
+
+  const menu = await openWorkspaceMenu(page, slug)
+  await clickMenuItem(menu, /^Reset$/i, { force: true })
+  await confirmDialog(page, /^Reset workspace$/i)
+
+  await expect
+    .poll(
+      async () => {
+        const files = await project.sdk.file
+          .status({ directory: createdDir })
+          .then((r) => r.data ?? [])
+          .catch(() => [])
+        return files.length
+      },
+      { timeout: 120_000 },
+    )
+    .toBe(0)
+
+  await expect.poll(() => fs.readFile(readme, "utf8"), { timeout: 120_000 }).toBe(original)
+
+  await expect
+    .poll(async () => {
+      return await fs
+        .stat(extra)
+        .then(() => true)
+        .catch(() => false)
+    })
+    .toBe(false)
+})
+
+test("can reorder workspaces by drag and drop", async ({ page, project }) => {
+  await page.setViewportSize({ width: 1400, height: 800 })
+  await project.open()
+  const rootSlug = project.slug
+
+  const listSlugs = async () => {
+    const nodes = page.locator('[data-component="sidebar-nav-desktop"] [data-component="workspace-item"]')
+    const slugs = await nodes.evaluateAll((els) => {
+      return els.map((el) => el.getAttribute("data-workspace") ?? "").filter((x) => x.length > 0)
+    })
+    return slugs
+  }
+
+  const waitReady = async (slug: string) => {
     await expect
       .poll(
         async () => {
-          const item = page.locator(workspaceItemSelector(workspaceSlug)).first()
+          const item = page.locator(workspaceItemSelector(slug)).first()
           try {
             await item.hover({ timeout: 500 })
             return true
@@ -98,276 +249,120 @@ test("can create a workspace", async ({ page, withProject }) => {
         { timeout: 60_000 },
       )
       .toBe(true)
-
-    await expect(page.locator(workspaceItemSelector(workspaceSlug)).first()).toBeVisible()
-
-    await cleanupTestProject(workspaceDir)
-  })
-})
-
-test("non-git projects keep workspace mode disabled", async ({ page, withProject }) => {
-  await page.setViewportSize({ width: 1400, height: 800 })
-
-  const nonGit = await fs.mkdtemp(path.join(os.tmpdir(), "opencode-e2e-project-nongit-"))
-  const nonGitSlug = dirSlug(nonGit)
-
-  await fs.writeFile(path.join(nonGit, "README.md"), "# e2e nongit\n")
-
-  try {
-    await withProject(async () => {
-      await page.goto(`/${nonGitSlug}/session`)
-
-      await expect.poll(() => slugFromUrl(page.url()), { timeout: 30_000 }).not.toBe("")
-
-      const activeDir = base64Decode(slugFromUrl(page.url()))
-      expect(path.basename(activeDir)).toContain("opencode-e2e-project-nongit-")
-
-      await openSidebar(page)
-      await expect(page.getByRole("button", { name: "New workspace" })).toHaveCount(0)
-
-      const trigger = page.locator('[data-action="project-menu"]').first()
-      const hasMenu = await trigger
-        .isVisible()
-        .then((x) => x)
-        .catch(() => false)
-      if (!hasMenu) return
-
-      await trigger.click({ force: true })
-
-      const menu = page.locator(dropdownMenuContentSelector).first()
-      await expect(menu).toBeVisible()
-
-      const toggle = menu.locator('[data-action="project-workspaces-toggle"]').first()
-
-      await expect(toggle).toBeVisible()
-      await expect(toggle).toBeDisabled()
-      await expect(menu.getByRole("menuitem", { name: "New workspace" })).toHaveCount(0)
-    })
-  } finally {
-    await cleanupTestProject(nonGit)
   }
-})
 
-test("can rename a workspace", async ({ page, withProject }) => {
-  await page.setViewportSize({ width: 1400, height: 800 })
+  const drag = async (from: string, to: string) => {
+    const src = page.locator(workspaceItemSelector(from)).first()
+    const dst = page.locator(workspaceItemSelector(to)).first()
 
-  await withProject(async (project) => {
-    const { slug } = await setupWorkspaceTest(page, project)
+    const a = await src.boundingBox()
+    const b = await dst.boundingBox()
+    if (!a || !b) throw new Error("Failed to resolve workspace drag bounds")
 
-    const rename = `e2e workspace ${Date.now()}`
-    const menu = await openWorkspaceMenu(page, slug)
-    await clickMenuItem(menu, /^Rename$/i, { force: true })
+    await page.mouse.move(a.x + a.width / 2, a.y + a.height / 2)
+    await page.mouse.down()
+    await page.mouse.move(b.x + b.width / 2, b.y + b.height / 2, { steps: 12 })
+    await page.mouse.up()
+  }
 
-    await expect(menu).toHaveCount(0)
+  await openSidebar(page)
 
-    const item = page.locator(workspaceItemSelector(slug)).first()
-    await expect(item).toBeVisible()
-    const input = item.locator(inlineInputSelector).first()
-    await expect(input).toBeVisible()
-    await input.fill(rename)
-    await input.press("Enter")
-    await expect(item).toContainText(rename)
-  })
-})
+  await setWorkspacesEnabled(page, rootSlug, true)
 
-test("can reset a workspace", async ({ page, sdk, withProject }) => {
-  await page.setViewportSize({ width: 1400, height: 800 })
-
-  await withProject(async (project) => {
-    const { slug, directory: createdDir } = await setupWorkspaceTest(page, project)
-
-    const readme = path.join(createdDir, "README.md")
-    const extra = path.join(createdDir, `e2e_reset_${Date.now()}.txt`)
-    const original = await fs.readFile(readme, "utf8")
-    const dirty = `${original.trimEnd()}\n\nchange_${Date.now()}\n`
-    await fs.writeFile(readme, dirty, "utf8")
-    await fs.writeFile(extra, `created_${Date.now()}\n`, "utf8")
-
-    await expect
-      .poll(async () => {
-        return await fs
-          .stat(extra)
-          .then(() => true)
-          .catch(() => false)
-      })
-      .toBe(true)
-
-    await expect
-      .poll(async () => {
-        const files = await sdk.file
-          .status({ directory: createdDir })
-          .then((r) => r.data ?? [])
-          .catch(() => [])
-        return files.length
-      })
-      .toBeGreaterThan(0)
-
-    const menu = await openWorkspaceMenu(page, slug)
-    await clickMenuItem(menu, /^Reset$/i, { force: true })
-    await confirmDialog(page, /^Reset workspace$/i)
-
-    await expect
-      .poll(
-        async () => {
-          const files = await sdk.file
-            .status({ directory: createdDir })
-            .then((r) => r.data ?? [])
-            .catch(() => [])
-          return files.length
-        },
-        { timeout: 60_000 },
-      )
-      .toBe(0)
-
-    await expect.poll(() => fs.readFile(readme, "utf8"), { timeout: 60_000 }).toBe(original)
-
-    await expect
-      .poll(async () => {
-        return await fs
-          .stat(extra)
-          .then(() => true)
-          .catch(() => false)
-      })
-      .toBe(false)
-  })
-})
-
-test("can delete a workspace", async ({ page, withProject }) => {
-  await page.setViewportSize({ width: 1400, height: 800 })
-
-  await withProject(async (project) => {
-    const sdk = createSdk(project.directory)
-    const { rootSlug, slug, directory } = await setupWorkspaceTest(page, project)
-
-    await expect
-      .poll(
-        async () => {
-          const worktrees = await sdk.worktree
-            .list()
-            .then((r) => r.data ?? [])
-            .catch(() => [] as string[])
-          return worktrees.includes(directory)
-        },
-        { timeout: 30_000 },
-      )
-      .toBe(true)
-
-    const menu = await openWorkspaceMenu(page, slug)
-    await clickMenuItem(menu, /^Delete$/i, { force: true })
-    await confirmDialog(page, /^Delete workspace$/i)
-
-    await expect.poll(() => base64Decode(slugFromUrl(page.url()))).toBe(project.directory)
-
-    await expect
-      .poll(
-        async () => {
-          const worktrees = await sdk.worktree
-            .list()
-            .then((r) => r.data ?? [])
-            .catch(() => [] as string[])
-          return worktrees.includes(directory)
-        },
-        { timeout: 60_000 },
-      )
-      .toBe(false)
-
-    await project.gotoSession()
+  const workspaces = [] as { directory: string; slug: string }[]
+  for (const _ of [0, 1]) {
+    const prev = slugFromUrl(page.url())
+    await page.getByRole("button", { name: "New workspace" }).first().click()
+    const next = await resolveSlug(await waitSlug(page, [rootSlug, prev]))
+    await waitDir(page, next.directory)
+    project.trackDirectory(next.directory)
+    workspaces.push(next)
 
     await openSidebar(page)
-    await expect(page.locator(workspaceItemSelector(slug))).toHaveCount(0, { timeout: 60_000 })
-    await expect(page.locator(workspaceItemSelector(rootSlug)).first()).toBeVisible()
-  })
+  }
+
+  if (workspaces.length !== 2) throw new Error("Expected two created workspaces")
+
+  const a = workspaces[0].slug
+  const b = workspaces[1].slug
+
+  await waitReady(a)
+  await waitReady(b)
+
+  const list = async () => {
+    const slugs = await listSlugs()
+    return slugs.filter((s) => s !== rootSlug && (s === a || s === b)).slice(0, 2)
+  }
+
+  await expect
+    .poll(async () => {
+      const slugs = await list()
+      return slugs.length === 2
+    })
+    .toBe(true)
+
+  const before = await list()
+  const from = before[1]
+  const to = before[0]
+  if (!from || !to) throw new Error("Failed to resolve initial workspace order")
+
+  await drag(from, to)
+
+  await expect.poll(async () => await list()).toEqual([from, to])
 })
 
-test("can reorder workspaces by drag and drop", async ({ page, withProject }) => {
+test("can delete a workspace", async ({ page, project }) => {
   await page.setViewportSize({ width: 1400, height: 800 })
-  await withProject(async ({ slug: rootSlug }) => {
-    const workspaces = [] as { directory: string; slug: string }[]
+  await project.open()
 
-    const listSlugs = async () => {
-      const nodes = page.locator('[data-component="sidebar-nav-desktop"] [data-component="workspace-item"]')
-      const slugs = await nodes.evaluateAll((els) => {
-        return els.map((el) => el.getAttribute("data-workspace") ?? "").filter((x) => x.length > 0)
-      })
-      return slugs
-    }
+  const rootSlug = project.slug
+  await openSidebar(page)
+  await setWorkspacesEnabled(page, rootSlug, true)
 
-    const waitReady = async (slug: string) => {
-      await expect
-        .poll(
-          async () => {
-            const item = page.locator(workspaceItemSelector(slug)).first()
-            try {
-              await item.hover({ timeout: 500 })
-              return true
-            } catch {
-              return false
-            }
-          },
-          { timeout: 60_000 },
-        )
-        .toBe(true)
-    }
+  const created = await project.sdk.worktree.create({ directory: project.directory }).then((res) => res.data)
+  if (!created?.directory) throw new Error("Failed to create workspace for delete test")
 
-    const drag = async (from: string, to: string) => {
-      const src = page.locator(workspaceItemSelector(from)).first()
-      const dst = page.locator(workspaceItemSelector(to)).first()
+  const directory = created.directory
+  const slug = dirSlug(directory)
+  project.trackDirectory(directory)
 
-      const a = await src.boundingBox()
-      const b = await dst.boundingBox()
-      if (!a || !b) throw new Error("Failed to resolve workspace drag bounds")
+  await page.reload()
+  await openSidebar(page)
+  await expect(page.locator(workspaceItemSelector(slug)).first()).toBeVisible({ timeout: 60_000 })
 
-      await page.mouse.move(a.x + a.width / 2, a.y + a.height / 2)
-      await page.mouse.down()
-      await page.mouse.move(b.x + b.width / 2, b.y + b.height / 2, { steps: 12 })
-      await page.mouse.up()
-    }
+  await expect
+    .poll(
+      async () => {
+        const worktrees = await project.sdk.worktree
+          .list()
+          .then((r) => r.data ?? [])
+          .catch(() => [] as string[])
+        return worktrees.includes(directory)
+      },
+      { timeout: 30_000 },
+    )
+    .toBe(true)
 
-    try {
-      await openSidebar(page)
+  const menu = await openWorkspaceMenu(page, slug)
+  await clickMenuItem(menu, /^Delete$/i, { force: true })
+  await confirmDialog(page, /^Delete workspace$/i)
 
-      await setWorkspacesEnabled(page, rootSlug, true)
+  await expect.poll(() => base64Decode(slugFromUrl(page.url()))).toBe(project.directory)
 
-      for (const _ of [0, 1]) {
-        const prev = slugFromUrl(page.url())
-        await page.getByRole("button", { name: "New workspace" }).first().click()
-        const slug = await waitSlug(page, [rootSlug, prev])
-        const dir = base64Decode(slug)
-        workspaces.push({ slug, directory: dir })
+  await expect
+    .poll(
+      async () => {
+        const worktrees = await project.sdk.worktree
+          .list()
+          .then((r) => r.data ?? [])
+          .catch(() => [] as string[])
+        return worktrees.includes(directory)
+      },
+      { timeout: 60_000 },
+    )
+    .toBe(false)
 
-        await openSidebar(page)
-      }
-
-      if (workspaces.length !== 2) throw new Error("Expected two created workspaces")
-
-      const a = workspaces[0].slug
-      const b = workspaces[1].slug
-
-      await waitReady(a)
-      await waitReady(b)
-
-      const list = async () => {
-        const slugs = await listSlugs()
-        return slugs.filter((s) => s !== rootSlug && (s === a || s === b)).slice(0, 2)
-      }
-
-      await expect
-        .poll(async () => {
-          const slugs = await list()
-          return slugs.length === 2
-        })
-        .toBe(true)
-
-      const before = await list()
-      const from = before[1]
-      const to = before[0]
-      if (!from || !to) throw new Error("Failed to resolve initial workspace order")
-
-      await drag(from, to)
-
-      await expect.poll(async () => await list()).toEqual([from, to])
-    } finally {
-      await Promise.all(workspaces.map((w) => cleanupTestProject(w.directory)))
-    }
-  })
+  await openSidebar(page)
+  await expect(page.locator(workspaceItemSelector(slug))).toHaveCount(0, { timeout: 60_000 })
+  await expect(page.locator(workspaceItemSelector(rootSlug)).first()).toBeVisible()
 })

packages/app/e2e/prompt/mock.ts

@@ -0,0 +1,15 @@
+type Hit = { body: Record<string, unknown> }
+
+export function bodyText(hit: Hit) {
+  return JSON.stringify(hit.body)
+}
+
+/**
+ * Match requests whose body contains the exact serialized tool input.
+ * The seed prompts embed JSON.stringify(input) in the prompt text, which
+ * gets escaped again inside the JSON body — so we double-escape to match.
+ */
+export function inputMatch(input: unknown) {
+  const escaped = JSON.stringify(JSON.stringify(input)).slice(1, -1)
+  return (hit: Hit) => bodyText(hit).includes(escaped)
+}

packages/app/e2e/prompt/prompt-async.spec.ts

@@ -1,47 +1,25 @@
 import { test, expect } from "../fixtures"
 import { promptSelector } from "../selectors"
-import { cleanupSession, sessionIDFromUrl, withSession } from "../actions"
+import { assistantText, withSession } from "../actions"
 
 const text = (value: string | null) => (value ?? "").replace(/\u200B/g, "").trim()
 
 // Regression test for Issue #12453: the synchronous POST /message endpoint holds
 // the connection open while the agent works, causing "Failed to fetch" over
 // VPN/Tailscale. The fix switches to POST /prompt_async which returns immediately.
-test("prompt succeeds when sync message endpoint is unreachable", async ({ page, sdk, gotoSession }) => {
+test("prompt succeeds when sync message endpoint is unreachable", async ({ page, project, assistant }) => {
   test.setTimeout(120_000)
 
   // Simulate Tailscale/VPN killing the long-lived sync connection
   await page.route("**/session/*/message", (route) => route.abort("connectionfailed"))
 
-  await gotoSession()
-
   const token = `E2E_ASYNC_${Date.now()}`
-  await page.locator(promptSelector).click()
-  await page.keyboard.type(`Reply with exactly: ${token}`)
-  await page.keyboard.press("Enter")
+  await project.open()
+  await assistant.reply(token)
+  const sessionID = await project.prompt(`Reply with exactly: ${token}`)
 
-  await expect(page).toHaveURL(/\/session\/[^/?#]+/, { timeout: 30_000 })
-  const sessionID = sessionIDFromUrl(page.url())!
-
-  try {
-    // Agent response arrives via SSE despite sync endpoint being dead
-    await expect
-      .poll(
-        async () => {
-          const messages = await sdk.session.messages({ sessionID, limit: 50 }).then((r) => r.data ?? [])
-          return messages
-            .filter((m) => m.info.role === "assistant")
-            .flatMap((m) => m.parts)
-            .filter((p) => p.type === "text")
-            .map((p) => p.text)
-            .join("\n")
-        },
-        { timeout: 90_000 },
-      )
-      .toContain(token)
-  } finally {
-    await cleanupSession({ sdk, sessionID })
-  }
+  await expect.poll(() => assistant.calls()).toBeGreaterThanOrEqual(1)
+  await expect.poll(() => assistantText(project.sdk, sessionID), { timeout: 90_000 }).toContain(token)
 })
 
 test("failed prompt send restores the composer input", async ({ page, sdk, gotoSession }) => {

packages/app/e2e/prompt/prompt-footer-focus.spec.ts

@@ -0,0 +1,88 @@
+import type { Locator, Page } from "@playwright/test"
+import { test, expect } from "../fixtures"
+import { promptAgentSelector, promptModelSelector, promptSelector } from "../selectors"
+
+type Probe = {
+  agent?: string
+  model?: { providerID: string; modelID: string; name?: string }
+  models?: Array<{ providerID: string; modelID: string; name: string }>
+  agents?: Array<{ name: string }>
+}
+
+async function probe(page: Page): Promise<Probe | null> {
+  return page.evaluate(() => {
+    const win = window as Window & {
+      __opencode_e2e?: {
+        model?: {
+          current?: Probe
+        }
+      }
+    }
+    return win.__opencode_e2e?.model?.current ?? null
+  })
+}
+
+async function state(page: Page) {
+  const value = await probe(page)
+  if (!value) throw new Error("Failed to resolve model selection probe")
+  return value
+}
+
+async function ready(page: Page) {
+  const prompt = page.locator(promptSelector)
+  await prompt.click()
+  await expect(prompt).toBeFocused()
+  await prompt.pressSequentially("focus")
+  return prompt
+}
+
+async function body(prompt: Locator) {
+  return prompt.evaluate((el) => (el as HTMLElement).innerText)
+}
+
+test("agent select returns focus to the prompt", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const prompt = await ready(page)
+
+  const info = await state(page)
+  const next = info.agents?.map((item) => item.name).find((name) => name !== info.agent)
+  test.skip(!next, "only one agent available")
+  if (!next) return
+
+  await page.locator(`${promptAgentSelector} [data-slot="select-select-trigger"]`).first().click()
+
+  const item = page.locator('[data-slot="select-select-item"]').filter({ hasText: next }).first()
+  await expect(item).toBeVisible()
+  await item.click({ force: true })
+
+  await expect(page.locator(`${promptAgentSelector} [data-slot="select-select-trigger-value"]`).first()).toHaveText(
+    next,
+  )
+  await expect(prompt).toBeFocused()
+  await prompt.pressSequentially(" agent")
+  await expect.poll(() => body(prompt)).toContain("focus agent")
+})
+
+test("model select returns focus to the prompt", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const prompt = await ready(page)
+
+  const info = await state(page)
+  const key = info.model ? `${info.model.providerID}:${info.model.modelID}` : null
+  const next = info.models?.find((item) => `${item.providerID}:${item.modelID}` !== key)
+  test.skip(!next, "only one model available")
+  if (!next) return
+
+  await page.locator(`${promptModelSelector} [data-action="prompt-model"]`).first().click()
+
+  const item = page.locator(`[data-slot="list-item"][data-key="${next.providerID}:${next.modelID}"]`).first()
+  await expect(item).toBeVisible()
+  await item.click({ force: true })
+
+  await expect(page.locator(`${promptModelSelector} [data-action="prompt-model"] span`).first()).toHaveText(next.name)
+  await expect(prompt).toBeFocused()
+  await prompt.pressSequentially(" model")
+  await expect.poll(() => body(prompt)).toContain("focus model")
+})

packages/app/e2e/prompt/prompt-history.spec.ts

@@ -1,10 +1,12 @@
 import type { ToolPart } from "@opencode-ai/sdk/v2/client"
 import type { Page } from "@playwright/test"
 import { test, expect } from "../fixtures"
-import { withSession } from "../actions"
+import { assistantText } from "../actions"
 import { promptSelector } from "../selectors"
+import { createSdk } from "../utils"
 
 const text = (value: string | null) => (value ?? "").replace(/\u200B/g, "").trim()
+type Sdk = ReturnType<typeof createSdk>
 
 const isBash = (part: unknown): part is ToolPart => {
   if (!part || typeof part !== "object") return false
@@ -13,54 +15,15 @@ const isBash = (part: unknown): part is ToolPart => {
   return "state" in part
 }
 
-async function edge(page: Page, pos: "start" | "end") {
-  await page.locator(promptSelector).evaluate((el: HTMLDivElement, pos: "start" | "end") => {
-    const selection = window.getSelection()
-    if (!selection) return
-
-    const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT)
-    const nodes: Text[] = []
-    for (let node = walk.nextNode(); node; node = walk.nextNode()) {
-      nodes.push(node as Text)
-    }
-
-    if (nodes.length === 0) {
-      const node = document.createTextNode("")
-      el.appendChild(node)
-      nodes.push(node)
-    }
-
-    const node = pos === "start" ? nodes[0]! : nodes[nodes.length - 1]!
-    const range = document.createRange()
-    range.setStart(node, pos === "start" ? 0 : (node.textContent ?? "").length)
-    range.collapse(true)
-    selection.removeAllRanges()
-    selection.addRange(range)
-  }, pos)
-}
-
 async function wait(page: Page, value: string) {
   await expect.poll(async () => text(await page.locator(promptSelector).textContent())).toBe(value)
 }
 
-async function reply(sdk: Parameters<typeof withSession>[0], sessionID: string, token: string) {
-  await expect
-    .poll(
-      async () => {
-        const messages = await sdk.session.messages({ sessionID, limit: 50 }).then((r) => r.data ?? [])
-        return messages
-          .filter((item) => item.info.role === "assistant")
-          .flatMap((item) => item.parts)
-          .filter((item) => item.type === "text")
-          .map((item) => item.text)
-          .join("\n")
-      },
-      { timeout: 90_000 },
-    )
-    .toContain(token)
+async function reply(sdk: Sdk, sessionID: string, token: string) {
+  await expect.poll(() => assistantText(sdk, sessionID), { timeout: 90_000 }).toContain(token)
 }
 
-async function shell(sdk: Parameters<typeof withSession>[0], sessionID: string, cmd: string, token: string) {
+async function shell(sdk: Sdk, sessionID: string, cmd: string, token: string) {
   await expect
     .poll(
       async () => {
@@ -79,103 +42,105 @@ async function shell(sdk: Parameters<typeof withSession>[0], sessionID: string,
     .toContain(token)
 }
 
-test("prompt history restores unsent draft with arrow navigation", async ({ page, sdk, gotoSession }) => {
+test("prompt history restores unsent draft with arrow navigation", async ({ page, project, assistant }) => {
   test.setTimeout(120_000)
 
-  await withSession(sdk, `e2e prompt history ${Date.now()}`, async (session) => {
-    await gotoSession(session.id)
+  const firstToken = `E2E_HISTORY_ONE_${Date.now()}`
+  const secondToken = `E2E_HISTORY_TWO_${Date.now()}`
+  const first = `Reply with exactly: ${firstToken}`
+  const second = `Reply with exactly: ${secondToken}`
+  const draft = `draft ${Date.now()}`
 
-    const prompt = page.locator(promptSelector)
-    const firstToken = `E2E_HISTORY_ONE_${Date.now()}`
-    const secondToken = `E2E_HISTORY_TWO_${Date.now()}`
-    const first = `Reply with exactly: ${firstToken}`
-    const second = `Reply with exactly: ${secondToken}`
-    const draft = `draft ${Date.now()}`
+  await project.open()
+  await assistant.reply(firstToken)
+  const sessionID = await project.prompt(first)
+  await wait(page, "")
+  await reply(project.sdk, sessionID, firstToken)
 
-    await prompt.click()
-    await page.keyboard.type(first)
-    await page.keyboard.press("Enter")
-    await wait(page, "")
-    await reply(sdk, session.id, firstToken)
+  await assistant.reply(secondToken)
+  await project.prompt(second)
+  await wait(page, "")
+  await reply(project.sdk, sessionID, secondToken)
 
-    await prompt.click()
-    await page.keyboard.type(second)
-    await page.keyboard.press("Enter")
-    await wait(page, "")
-    await reply(sdk, session.id, secondToken)
+  const prompt = page.locator(promptSelector)
+  await prompt.click()
+  await page.keyboard.type(draft)
+  await wait(page, draft)
 
-    await prompt.click()
-    await page.keyboard.type(draft)
-    await wait(page, draft)
+  await prompt.fill("")
+  await wait(page, "")
 
-    await edge(page, "start")
-    await page.keyboard.press("ArrowUp")
-    await wait(page, second)
+  await page.keyboard.press("ArrowUp")
+  await wait(page, second)
 
-    await page.keyboard.press("ArrowUp")
-    await wait(page, first)
+  await page.keyboard.press("ArrowUp")
+  await wait(page, first)
 
-    await page.keyboard.press("ArrowDown")
-    await wait(page, second)
+  await page.keyboard.press("ArrowDown")
+  await wait(page, second)
 
-    await page.keyboard.press("ArrowDown")
-    await wait(page, draft)
-  })
+  await page.keyboard.press("ArrowDown")
+  await wait(page, "")
 })
 
-test("shell history stays separate from normal prompt history", async ({ page, sdk, gotoSession }) => {
+test.fixme("shell history stays separate from normal prompt history", async ({ page, sdk, gotoSession }) => {
   test.setTimeout(120_000)
 
-  await withSession(sdk, `e2e shell history ${Date.now()}`, async (session) => {
-    await gotoSession(session.id)
+  const firstToken = `E2E_SHELL_ONE_${Date.now()}`
+  const secondToken = `E2E_SHELL_TWO_${Date.now()}`
+  const normalToken = `E2E_NORMAL_${Date.now()}`
+  const first = `echo ${firstToken}`
+  const second = `echo ${secondToken}`
+  const normal = `Reply with exactly: ${normalToken}`
 
-    const prompt = page.locator(promptSelector)
-    const firstToken = `E2E_SHELL_ONE_${Date.now()}`
-    const secondToken = `E2E_SHELL_TWO_${Date.now()}`
-    const normalToken = `E2E_NORMAL_${Date.now()}`
-    const first = `echo ${firstToken}`
-    const second = `echo ${secondToken}`
-    const normal = `Reply with exactly: ${normalToken}`
+  await gotoSession()
 
-    await prompt.click()
-    await page.keyboard.type("!")
-    await page.keyboard.type(first)
-    await page.keyboard.press("Enter")
-    await wait(page, "")
-    await shell(sdk, session.id, first, firstToken)
+  const prompt = page.locator(promptSelector)
 
-    await prompt.click()
-    await page.keyboard.type("!")
-    await page.keyboard.type(second)
-    await page.keyboard.press("Enter")
-    await wait(page, "")
-    await shell(sdk, session.id, second, secondToken)
+  await prompt.click()
+  await page.keyboard.type("!")
+  await page.keyboard.type(first)
+  await page.keyboard.press("Enter")
+  await wait(page, "")
 
-    await prompt.click()
-    await page.keyboard.type("!")
-    await page.keyboard.press("ArrowUp")
-    await wait(page, second)
+  await expect(page).toHaveURL(/\/session\/[^/?#]+/, { timeout: 30_000 })
+  const sessionID = sessionIDFromUrl(page.url())!
+  await shell(sdk, sessionID, first, firstToken)
 
-    await page.keyboard.press("ArrowUp")
-    await wait(page, first)
+  await prompt.click()
+  await page.keyboard.type("!")
+  await page.keyboard.type(second)
+  await page.keyboard.press("Enter")
+  await wait(page, "")
+  await shell(sdk, sessionID, second, secondToken)
 
-    await page.keyboard.press("ArrowDown")
-    await wait(page, second)
+  await page.keyboard.press("Escape")
+  await wait(page, "")
 
-    await page.keyboard.press("ArrowDown")
-    await wait(page, "")
+  await prompt.click()
+  await page.keyboard.type("!")
+  await page.keyboard.press("ArrowUp")
+  await wait(page, second)
 
-    await page.keyboard.press("Escape")
-    await wait(page, "")
+  await page.keyboard.press("ArrowUp")
+  await wait(page, first)
 
-    await prompt.click()
-    await page.keyboard.type(normal)
-    await page.keyboard.press("Enter")
-    await wait(page, "")
-    await reply(sdk, session.id, normalToken)
+  await page.keyboard.press("ArrowDown")
+  await wait(page, second)
 
-    await prompt.click()
-    await page.keyboard.press("ArrowUp")
-    await wait(page, normal)
-  })
+  await page.keyboard.press("ArrowDown")
+  await wait(page, "")
+
+  await page.keyboard.press("Escape")
+  await wait(page, "")
+
+  await prompt.click()
+  await page.keyboard.type(normal)
+  await page.keyboard.press("Enter")
+  await wait(page, "")
+  await reply(sdk, sessionID, normalToken)
+
+  await prompt.click()
+  await page.keyboard.press("ArrowUp")
+  await wait(page, normal)
 })

packages/app/e2e/prompt/prompt-multiline.spec.ts

@@ -7,12 +7,18 @@ test("shift+enter inserts a newline without submitting", async ({ page, gotoSess
   await expect(page).toHaveURL(/\/session\/?$/)
 
   const prompt = page.locator(promptSelector)
-  await prompt.click()
-  await page.keyboard.type("line one")
-  await page.keyboard.press("Shift+Enter")
-  await page.keyboard.type("line two")
+  await prompt.focus()
+  await expect(prompt).toBeFocused()
+
+  await prompt.pressSequentially("line one")
+  await expect(prompt).toBeFocused()
+
+  await prompt.press("Shift+Enter")
+  await expect(page).toHaveURL(/\/session\/?$/)
+  await expect(prompt).toBeFocused()
+
+  await prompt.pressSequentially("line two")
 
   await expect(page).toHaveURL(/\/session\/?$/)
-  await expect(prompt).toContainText("line one")
-  await expect(prompt).toContainText("line two")
+  await expect.poll(() => prompt.evaluate((el) => el.innerText)).toBe("line one\nline two")
 })

packages/app/e2e/prompt/prompt-shell.spec.ts

@@ -1,8 +1,7 @@
 import type { ToolPart } from "@opencode-ai/sdk/v2/client"
 import { test, expect } from "../fixtures"
-import { sessionIDFromUrl } from "../actions"
-import { promptSelector } from "../selectors"
-import { createSdk } from "../utils"
+import { closeDialog, openSettings, withSession } from "../actions"
+import { promptModelSelector, promptSelector, promptVariantSelector } from "../selectors"
 
 const isBash = (part: unknown): part is ToolPart => {
   if (!part || typeof part !== "object") return false
@@ -11,34 +10,34 @@ const isBash = (part: unknown): part is ToolPart => {
   return "state" in part
 }
 
-test("shell mode runs a command in the project directory", async ({ page, withProject }) => {
+test("shell mode runs a command in the project directory", async ({ page, project }) => {
   test.setTimeout(120_000)
 
-  await withProject(async ({ directory, gotoSession, trackSession }) => {
-    const sdk = createSdk(directory)
-    const prompt = page.locator(promptSelector)
-    const cmd = process.platform === "win32" ? "dir" : "ls"
+  await project.open()
+  const cmd = process.platform === "win32" ? "dir" : "command ls"
 
-    await gotoSession()
-    await prompt.click()
-    await page.keyboard.type("!")
-    await expect(prompt).toHaveAttribute("aria-label", /enter shell command/i)
-
-    await page.keyboard.type(cmd)
-    await page.keyboard.press("Enter")
-
-    await expect(page).toHaveURL(/\/session\/[^/?#]+/, { timeout: 30_000 })
-
-    const id = sessionIDFromUrl(page.url())
-    if (!id) throw new Error(`Failed to parse session id from url: ${page.url()}`)
-    trackSession(id, directory)
+  await withSession(project.sdk, `e2e shell ${Date.now()}`, async (session) => {
+    project.trackSession(session.id)
+    await project.gotoSession(session.id)
+    const dialog = await openSettings(page)
+    const toggle = dialog.locator('[data-action="settings-auto-accept-permissions"]').first()
+    const input = toggle.locator('[data-slot="switch-input"]').first()
+    await expect(toggle).toBeVisible()
+    if ((await input.getAttribute("aria-checked")) !== "true") {
+      await toggle.locator('[data-slot="switch-control"]').click()
+      await expect(input).toHaveAttribute("aria-checked", "true")
+    }
+    await closeDialog(page, dialog)
+    await project.shell(cmd)
 
     await expect
       .poll(
         async () => {
-          const list = await sdk.session.messages({ sessionID: id, limit: 50 }).then((x) => x.data ?? [])
+          const list = await project.sdk.session
+            .messages({ sessionID: session.id, limit: 50 })
+            .then((x) => x.data ?? [])
           const msg = list.findLast(
-            (item) => item.info.role === "assistant" && "path" in item.info && item.info.path.cwd === directory,
+            (item) => item.info.role === "assistant" && "path" in item.info && item.info.path.cwd === project.directory,
           )
           if (!msg) return
 
@@ -51,12 +50,25 @@ test("shell mode runs a command in the project directory", async ({ page, withPr
             typeof part.state.metadata?.output === "string" ? part.state.metadata.output : part.state.output
           if (!output.includes("README.md")) return
 
-          return { cwd: directory, output }
+          return { cwd: project.directory, output }
         },
         { timeout: 90_000 },
       )
-      .toEqual(expect.objectContaining({ cwd: directory, output: expect.stringContaining("README.md") }))
-
-    await expect(prompt).toHaveText("")
+      .toEqual(expect.objectContaining({ cwd: project.directory, output: expect.stringContaining("README.md") }))
   })
 })
+
+test("shell mode unmounts model and variant controls", async ({ page, project }) => {
+  await project.open()
+
+  const prompt = page.locator(promptSelector).first()
+  await expect(page.locator(promptModelSelector)).toHaveCount(1)
+  await expect(page.locator(promptVariantSelector)).toHaveCount(1)
+
+  await prompt.click()
+  await page.keyboard.type("!")
+
+  await expect(prompt).toHaveAttribute("aria-label", /enter shell command/i)
+  await expect(page.locator(promptModelSelector)).toHaveCount(0)
+  await expect(page.locator(promptVariantSelector)).toHaveCount(0)
+})

packages/app/e2e/prompt/prompt-slash-share.spec.ts

@@ -22,14 +22,16 @@ async function seed(sdk: Parameters<typeof withSession>[0], sessionID: string) {
     .toBeGreaterThan(0)
 }
 
-test("/share and /unshare update session share state", async ({ page, sdk, gotoSession }) => {
+test("/share and /unshare update session share state", async ({ page, project }) => {
   test.skip(shareDisabled, "Share is disabled in this environment (OPENCODE_DISABLE_SHARE).")
 
-  await withSession(sdk, `e2e slash share ${Date.now()}`, async (session) => {
+  await project.open()
+  await withSession(project.sdk, `e2e slash share ${Date.now()}`, async (session) => {
+    project.trackSession(session.id)
     const prompt = page.locator(promptSelector)
 
-    await seed(sdk, session.id)
-    await gotoSession(session.id)
+    await seed(project.sdk, session.id)
+    await project.gotoSession(session.id)
 
     await prompt.click()
     await page.keyboard.type("/share")
@@ -39,7 +41,7 @@ test("/share and /unshare update session share state", async ({ page, sdk, gotoS
     await expect
       .poll(
         async () => {
-          const data = await sdk.session.get({ sessionID: session.id }).then((r) => r.data)
+          const data = await project.sdk.session.get({ sessionID: session.id }).then((r) => r.data)
           return data?.share?.url || undefined
         },
         { timeout: 30_000 },
@@ -54,7 +56,7 @@ test("/share and /unshare update session share state", async ({ page, sdk, gotoS
     await expect
       .poll(
         async () => {
-          const data = await sdk.session.get({ sessionID: session.id }).then((r) => r.data)
+          const data = await project.sdk.session.get({ sessionID: session.id }).then((r) => r.data)
           return data?.share?.url || undefined
         },
         { timeout: 30_000 },

packages/app/e2e/prompt/prompt-slash-terminal.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "../fixtures"
-import { waitTerminalReady } from "../actions"
+import { runPromptSlash, waitTerminalFocusIdle } from "../actions"
 import { promptSelector, terminalSelector } from "../selectors"
 
 test("/terminal toggles the terminal panel", async ({ page, gotoSession }) => {
@@ -7,29 +7,12 @@ test("/terminal toggles the terminal panel", async ({ page, gotoSession }) => {
 
   const prompt = page.locator(promptSelector)
   const terminal = page.locator(terminalSelector)
-  const slash = page.locator('[data-slash-id="terminal.toggle"]').first()
 
   await expect(terminal).not.toBeVisible()
 
-  await prompt.fill("/terminal")
-  await expect(slash).toBeVisible()
-  await page.keyboard.press("Enter")
-  await waitTerminalReady(page, { term: terminal })
+  await runPromptSlash(page, { prompt, text: "/terminal", id: "terminal.toggle" })
+  await waitTerminalFocusIdle(page, { term: terminal })
 
-  // Terminal panel retries focus (immediate, RAF, 120ms, 240ms) after opening,
-  // which can steal focus from the prompt and prevent fill() from triggering
-  // the slash popover. Re-attempt click+fill until all retries are exhausted
-  // and the popover appears.
-  await expect
-    .poll(
-      async () => {
-        await prompt.click().catch(() => false)
-        await prompt.fill("/terminal").catch(() => false)
-        return slash.isVisible().catch(() => false)
-      },
-      { timeout: 10_000 },
-    )
-    .toBe(true)
-  await page.keyboard.press("Enter")
+  await runPromptSlash(page, { prompt, text: "/terminal", id: "terminal.toggle" })
   await expect(terminal).not.toBeVisible()
 })

packages/app/e2e/prompt/prompt.spec.ts

@@ -1,8 +1,7 @@
 import { test, expect } from "../fixtures"
-import { promptSelector } from "../selectors"
-import { cleanupSession, sessionIDFromUrl, withSession } from "../actions"
+import { assistantText } from "../actions"
 
-test("can send a prompt and receive a reply", async ({ page, sdk, gotoSession }) => {
+test("can send a prompt and receive a reply", async ({ page, project, assistant }) => {
   test.setTimeout(120_000)
 
   const pageErrors: string[] = []
@@ -11,42 +10,16 @@ test("can send a prompt and receive a reply", async ({ page, sdk, gotoSession })
   }
   page.on("pageerror", onPageError)
 
-  await gotoSession()
-
-  const token = `E2E_OK_${Date.now()}`
-
-  const prompt = page.locator(promptSelector)
-  await prompt.click()
-  await page.keyboard.type(`Reply with exactly: ${token}`)
-  await page.keyboard.press("Enter")
-
-  await expect(page).toHaveURL(/\/session\/[^/?#]+/, { timeout: 30_000 })
-
-  const sessionID = (() => {
-    const id = sessionIDFromUrl(page.url())
-    if (!id) throw new Error(`Failed to parse session id from url: ${page.url()}`)
-    return id
-  })()
-
   try {
-    await expect
-      .poll(
-        async () => {
-          const messages = await sdk.session.messages({ sessionID, limit: 50 }).then((r) => r.data ?? [])
-          return messages
-            .filter((m) => m.info.role === "assistant")
-            .flatMap((m) => m.parts)
-            .filter((p) => p.type === "text")
-            .map((p) => p.text)
-            .join("\n")
-        },
-        { timeout: 90_000 },
-      )
+    const token = `E2E_OK_${Date.now()}`
+    await project.open()
+    await assistant.reply(token)
+    const sessionID = await project.prompt(`Reply with exactly: ${token}`)
 
-      .toContain(token)
+    await expect.poll(() => assistant.calls()).toBeGreaterThanOrEqual(1)
+    await expect.poll(() => assistantText(project.sdk, sessionID), { timeout: 30_000 }).toContain(token)
   } finally {
     page.off("pageerror", onPageError)
-    await cleanupSession({ sdk, sessionID })
   }
 
   if (pageErrors.length > 0) {

packages/app/e2e/selectors.ts

@@ -1,22 +1,20 @@
 export const promptSelector = '[data-component="prompt-input"]'
-export const terminalPanelSelector = '#terminal-panel[aria-hidden="false"]'
+const terminalPanelSelector = '#terminal-panel[aria-hidden="false"]'
 export const terminalSelector = `${terminalPanelSelector} [data-component="terminal"]`
 export const sessionComposerDockSelector = '[data-component="session-prompt-dock"]'
 export const questionDockSelector = '[data-component="dock-prompt"][data-kind="question"]'
 export const permissionDockSelector = '[data-component="dock-prompt"][data-kind="permission"]'
-export const permissionRejectSelector = `${permissionDockSelector} [data-slot="permission-footer-actions"] [data-component="button"]:nth-child(1)`
-export const permissionAllowAlwaysSelector = `${permissionDockSelector} [data-slot="permission-footer-actions"] [data-component="button"]:nth-child(2)`
-export const permissionAllowOnceSelector = `${permissionDockSelector} [data-slot="permission-footer-actions"] [data-component="button"]:nth-child(3)`
-export const sessionTodoDockSelector = '[data-component="session-todo-dock"]'
-export const sessionTodoToggleSelector = '[data-action="session-todo-toggle"]'
 export const sessionTodoToggleButtonSelector = '[data-action="session-todo-toggle-button"]'
-export const sessionTodoListSelector = '[data-slot="session-todo-list"]'
 
 export const modelVariantCycleSelector = '[data-action="model-variant-cycle"]'
+export const promptAgentSelector = '[data-component="prompt-agent-control"]'
+export const promptModelSelector = '[data-component="prompt-model-control"]'
+export const promptVariantSelector = '[data-component="prompt-variant-control"]'
 export const settingsLanguageSelectSelector = '[data-action="settings-language"]'
 export const settingsColorSchemeSelector = '[data-action="settings-color-scheme"]'
 export const settingsThemeSelector = '[data-action="settings-theme"]'
-export const settingsFontSelector = '[data-action="settings-font"]'
+export const settingsCodeFontSelector = '[data-action="settings-code-font"]'
+export const settingsUIFontSelector = '[data-action="settings-ui-font"]'
 export const settingsNotificationsAgentSelector = '[data-action="settings-notifications-agent"]'
 export const settingsNotificationsPermissionsSelector = '[data-action="settings-notifications-permissions"]'
 export const settingsNotificationsErrorsSelector = '[data-action="settings-notifications-errors"]'
@@ -26,7 +24,7 @@ export const settingsSoundsErrorsSelector = '[data-action="settings-sounds-error
 export const settingsUpdatesStartupSelector = '[data-action="settings-updates-startup"]'
 export const settingsReleaseNotesSelector = '[data-action="settings-release-notes"]'
 
-export const sidebarNavSelector = '[data-component="sidebar-nav-desktop"]'
+const sidebarNavSelector = '[data-component="sidebar-nav-desktop"]'
 
 export const projectSwitchSelector = (slug: string) =>
   `${sidebarNavSelector} [data-action="project-switch"][data-project="${slug}"]`
@@ -36,9 +34,6 @@ export const projectMenuTriggerSelector = (slug: string) =>
 
 export const projectCloseMenuSelector = (slug: string) => `[data-action="project-close-menu"][data-project="${slug}"]`
 
-export const projectClearNotificationsSelector = (slug: string) =>
-  `[data-action="project-clear-notifications"][data-project="${slug}"]`
-
 export const projectWorkspacesToggleSelector = (slug: string) =>
   `[data-action="project-workspaces-toggle"][data-project="${slug}"]`
 
@@ -46,8 +41,6 @@ export const titlebarRightSelector = "#opencode-titlebar-right"
 
 export const popoverBodySelector = '[data-slot="popover-body"]'
 
-export const dropdownMenuTriggerSelector = '[data-slot="dropdown-menu-trigger"]'
-
 export const dropdownMenuContentSelector = '[data-component="dropdown-menu-content"]'
 
 export const inlineInputSelector = '[data-component="inline-input"]'

packages/app/e2e/session/session-child-navigation.spec.ts

@@ -1,7 +1,8 @@
 import { seedSessionTask, withSession } from "../actions"
 import { test, expect } from "../fixtures"
+import { inputMatch } from "../prompt/mock"
 
-test("task tool child-session link does not trigger stale show errors", async ({ page, sdk, gotoSession }) => {
+test("task tool child-session link does not trigger stale show errors", async ({ page, llm, project }) => {
   test.setTimeout(120_000)
 
   const errs: string[] = []
@@ -10,28 +11,54 @@ test("task tool child-session link does not trigger stale show errors", async ({
   }
   page.on("pageerror", onError)
 
-  await withSession(sdk, `e2e child nav ${Date.now()}`, async (session) => {
-    const child = await seedSessionTask(sdk, {
-      sessionID: session.id,
-      description: "Open child session",
-      prompt: "Search the repository for AssistantParts and then reply with exactly CHILD_OK.",
-    })
+  try {
+    await project.open()
+    await withSession(project.sdk, `e2e child nav ${Date.now()}`, async (session) => {
+      const taskInput = {
+        description: "Open child session",
+        prompt: "Search the repository for AssistantParts and then reply with exactly CHILD_OK.",
+        subagent_type: "general",
+      }
+      await llm.toolMatch(inputMatch(taskInput), "task", taskInput)
+      const child = await seedSessionTask(project.sdk, {
+        sessionID: session.id,
+        description: taskInput.description,
+        prompt: taskInput.prompt,
+      })
+      project.trackSession(child.sessionID)
 
-    try {
-      await gotoSession(session.id)
+      await project.gotoSession(session.id)
 
-      const link = page
-        .locator("a.subagent-link")
+      const header = page.locator("[data-session-title]")
+      await expect(header.getByRole("button", { name: "More options" })).toBeVisible({ timeout: 30_000 })
+
+      const card = page
+        .locator('[data-component="task-tool-card"]')
         .filter({ hasText: /open child session/i })
         .first()
-      await expect(link).toBeVisible({ timeout: 30_000 })
-      await link.click()
+      await expect(card).toBeVisible({ timeout: 30_000 })
+      await card.click()
 
       await expect(page).toHaveURL(new RegExp(`/session/${child.sessionID}(?:[/?#]|$)`), { timeout: 30_000 })
-      await page.waitForTimeout(1000)
-      expect(errs).toEqual([])
-    } finally {
-      page.off("pageerror", onError)
-    }
-  })
+      await expect(header.locator('[data-slot="session-title-parent"]')).toHaveText(session.title)
+      await expect(header.locator('[data-slot="session-title-child"]')).toHaveText(taskInput.description)
+      await expect(header.locator('[data-slot="session-title-separator"]')).toHaveText("/")
+      await expect
+        .poll(
+          () =>
+            header.locator('[data-slot="session-title-separator"]').evaluate((el) => ({
+              left: getComputedStyle(el).paddingLeft,
+              right: getComputedStyle(el).paddingRight,
+            })),
+          { timeout: 30_000 },
+        )
+        .toEqual({ left: "8px", right: "8px" })
+      await expect(header.getByRole("button", { name: "More options" })).toHaveCount(0)
+      await expect(page.getByText("Subagent sessions cannot be prompted.")).toBeVisible({ timeout: 30_000 })
+      await expect(page.getByRole("button", { name: "Back to main session." })).toBeVisible({ timeout: 30_000 })
+      await expect.poll(() => errs, { timeout: 5_000 }).toEqual([])
+    })
+  } finally {
+    page.off("pageerror", onError)
+  }
 })

packages/app/e2e/session/session-composer-dock.spec.ts

@@ -5,7 +5,7 @@ import {
   type ComposerProbeState,
   type ComposerWindow,
 } from "../../src/testing/session-composer"
-import { cleanupSession, clearSessionDockSeed, seedSessionQuestion } from "../actions"
+import { cleanupSession, clearSessionDockSeed, closeDialog, openSettings, seedSessionQuestion } from "../actions"
 import {
   permissionDockSelector,
   promptSelector,
@@ -13,6 +13,8 @@ import {
   sessionComposerDockSelector,
   sessionTodoToggleButtonSelector,
 } from "../selectors"
+import { modKey } from "../utils"
+import { inputMatch } from "../prompt/mock"
 
 type Sdk = Parameters<typeof clearSessionDockSeed>[0]
 type PermissionRule = { permission: string; pattern: string; action: "allow" | "deny" | "ask" }
@@ -21,12 +23,13 @@ async function withDockSession<T>(
   sdk: Sdk,
   title: string,
   fn: (session: { id: string; title: string }) => Promise<T>,
-  opts?: { permission?: PermissionRule[] },
+  opts?: { permission?: PermissionRule[]; trackSession?: (sessionID: string) => void },
 ) {
   const session = await sdk.session
     .create(opts?.permission ? { title, permission: opts.permission } : { title })
     .then((r) => r.data)
   if (!session?.id) throw new Error("Session create did not return an id")
+  opts?.trackSession?.(session.id)
   try {
     return await fn(session)
   } finally {
@@ -34,6 +37,17 @@ async function withDockSession<T>(
   }
 }
 
+const defaultQuestions = [
+  {
+    header: "Need input",
+    question: "Pick one option",
+    options: [
+      { label: "Continue", description: "Continue now" },
+      { label: "Stop", description: "Stop here" },
+    ],
+  },
+]
+
 test.setTimeout(120_000)
 
 async function withDockSeed<T>(sdk: Sdk, sessionID: string, fn: () => Promise<T>) {
@@ -51,12 +65,14 @@ async function clearPermissionDock(page: any, label: RegExp) {
 }
 
 async function setAutoAccept(page: any, enabled: boolean) {
-  const button = page.locator('[data-action="prompt-permissions"]').first()
-  await expect(button).toBeVisible()
-  const pressed = (await button.getAttribute("aria-pressed")) === "true"
-  if (pressed === enabled) return
-  await button.click()
-  await expect(button).toHaveAttribute("aria-pressed", enabled ? "true" : "false")
+  const dialog = await openSettings(page)
+  const toggle = dialog.locator('[data-action="settings-auto-accept-permissions"]').first()
+  const input = toggle.locator('[data-slot="switch-input"]').first()
+  await expect(toggle).toBeVisible()
+  const checked = (await input.getAttribute("aria-checked")) === "true"
+  if (checked !== enabled) await toggle.locator('[data-slot="switch-control"]').click()
+  await expect(input).toHaveAttribute("aria-checked", enabled ? "true" : "false")
+  await closeDialog(page, dialog)
 }
 
 async function expectQuestionBlocked(page: any) {
@@ -93,7 +109,7 @@ async function todoDock(page: any, sessionID: string) {
 
   const write = async (driver: ComposerDriverState | undefined) => {
     await page.evaluate(
-      (input) => {
+      (input: { event: string; sessionID: string; driver: ComposerDriverState | undefined }) => {
         const win = window as ComposerWindow
         const composer = win.__opencode_e2e?.composer
         if (!composer?.enabled) throw new Error("Composer e2e driver is not enabled")
@@ -118,7 +134,7 @@ async function todoDock(page: any, sessionID: string) {
   }
 
   const read = () =>
-    page.evaluate((sessionID) => {
+    page.evaluate((sessionID: string) => {
       const win = window as ComposerWindow
       return win.__opencode_e2e?.composer?.sessions?.[sessionID]?.probe ?? null
     }, sessionID) as Promise<ComposerProbeState | null>
@@ -186,6 +202,8 @@ async function withMockPermission<T>(
   opts: { child?: any } | undefined,
   fn: (state: { resolved: () => Promise<void> }) => Promise<T>,
 ) {
+  const listUrl = /\/permission(?:\?.*)?$/
+  const replyUrls = [/\/session\/[^/]+\/permissions\/[^/?]+(?:\?.*)?$/, /\/permission\/[^/]+\/reply(?:\?.*)?$/]
   let pending = [
     {
       ...request,
@@ -204,7 +222,8 @@ async function withMockPermission<T>(
 
   const reply = async (route: any) => {
     const url = new URL(route.request().url())
-    const id = url.pathname.split("/").pop()
+    const parts = url.pathname.split("/").filter(Boolean)
+    const id = parts.at(-1) === "reply" ? parts.at(-2) : parts.at(-1)
     pending = pending.filter((item) => item.id !== id)
     await route.fulfill({
       status: 200,
@@ -213,8 +232,10 @@ async function withMockPermission<T>(
     })
   }
 
-  await page.route("**/permission", list)
-  await page.route("**/session/*/permissions/*", reply)
+  await page.route(listUrl, list)
+  for (const item of replyUrls) {
+    await page.route(item, reply)
+  }
 
   const sessionList = opts?.child
     ? async (route: any) => {
@@ -223,9 +244,7 @@ async function withMockPermission<T>(
         const list = Array.isArray(json) ? json : Array.isArray(json?.data) ? json.data : undefined
         if (Array.isArray(list) && !list.some((item) => item?.id === opts.child?.id)) list.push(opts.child)
         await route.fulfill({
-          status: res.status(),
-          headers: res.headers(),
-          contentType: "application/json",
+          response: res,
           body: JSON.stringify(json),
         })
       }
@@ -242,177 +261,55 @@ async function withMockPermission<T>(
   try {
     return await fn(state)
   } finally {
-    await page.unroute("**/permission", list)
-    await page.unroute("**/session/*/permissions/*", reply)
+    await page.unroute(listUrl, list)
+    for (const item of replyUrls) {
+      await page.unroute(item, reply)
+    }
     if (sessionList) await page.unroute("**/session?*", sessionList)
   }
 }
 
-test("default dock shows prompt input", async ({ page, sdk, gotoSession }) => {
-  await withDockSession(sdk, "e2e composer dock default", async (session) => {
-    await gotoSession(session.id)
+test("default dock shows prompt input", async ({ page, project }) => {
+  await project.open()
+  await withDockSession(
+    project.sdk,
+    "e2e composer dock default",
+    async (session) => {
+      await project.gotoSession(session.id)
 
-    await expect(page.locator(sessionComposerDockSelector)).toBeVisible()
-    await expect(page.locator(promptSelector)).toBeVisible()
-    await expect(page.locator(questionDockSelector)).toHaveCount(0)
-    await expect(page.locator(permissionDockSelector)).toHaveCount(0)
+      await expect(page.locator(sessionComposerDockSelector)).toBeVisible()
+      await expect(page.locator(promptSelector)).toBeVisible()
+      await expect(page.locator('[data-action="prompt-permissions"]')).toHaveCount(0)
+      await expect(page.locator(questionDockSelector)).toHaveCount(0)
+      await expect(page.locator(permissionDockSelector)).toHaveCount(0)
 
-    await page.locator(promptSelector).click()
-    await expect(page.locator(promptSelector)).toBeFocused()
-  })
+      await page.locator(promptSelector).click()
+      await expect(page.locator(promptSelector)).toBeFocused()
+    },
+    { trackSession: project.trackSession },
+  )
 })
 
-test("auto-accept toggle works before first submit", async ({ page, gotoSession }) => {
-  await gotoSession()
-
-  const button = page.locator('[data-action="prompt-permissions"]').first()
-  await expect(button).toBeVisible()
-  await expect(button).toHaveAttribute("aria-pressed", "false")
+test("auto-accept toggle works before first submit", async ({ page, project }) => {
+  await project.open()
 
   await setAutoAccept(page, true)
   await setAutoAccept(page, false)
 })
 
-test("blocked question flow unblocks after submit", async ({ page, sdk, gotoSession }) => {
-  await withDockSession(sdk, "e2e composer dock question", async (session) => {
-    await withDockSeed(sdk, session.id, async () => {
-      await gotoSession(session.id)
+test("blocked question flow unblocks after submit", async ({ page, llm, project }) => {
+  await project.open()
+  await withDockSession(
+    project.sdk,
+    "e2e composer dock question",
+    async (session) => {
+      await withDockSeed(project.sdk, session.id, async () => {
+        await project.gotoSession(session.id)
 
-      await seedSessionQuestion(sdk, {
-        sessionID: session.id,
-        questions: [
-          {
-            header: "Need input",
-            question: "Pick one option",
-            options: [
-              { label: "Continue", description: "Continue now" },
-              { label: "Stop", description: "Stop here" },
-            ],
-          },
-        ],
-      })
-
-      const dock = page.locator(questionDockSelector)
-      await expectQuestionBlocked(page)
-
-      await dock.locator('[data-slot="question-option"]').first().click()
-      await dock.getByRole("button", { name: /submit/i }).click()
-
-      await expectQuestionOpen(page)
-    })
-  })
-})
-
-test("blocked permission flow supports allow once", async ({ page, sdk, gotoSession }) => {
-  await withDockSession(sdk, "e2e composer dock permission once", async (session) => {
-    await gotoSession(session.id)
-    await setAutoAccept(page, false)
-    await withMockPermission(
-      page,
-      {
-        id: "per_e2e_once",
-        sessionID: session.id,
-        permission: "bash",
-        patterns: ["/tmp/opencode-e2e-perm-once"],
-        metadata: { description: "Need permission for command" },
-      },
-      undefined,
-      async (state) => {
-        await page.goto(page.url())
-        await expectPermissionBlocked(page)
-
-        await clearPermissionDock(page, /allow once/i)
-        await state.resolved()
-        await page.goto(page.url())
-        await expectPermissionOpen(page)
-      },
-    )
-  })
-})
-
-test("blocked permission flow supports reject", async ({ page, sdk, gotoSession }) => {
-  await withDockSession(sdk, "e2e composer dock permission reject", async (session) => {
-    await gotoSession(session.id)
-    await setAutoAccept(page, false)
-    await withMockPermission(
-      page,
-      {
-        id: "per_e2e_reject",
-        sessionID: session.id,
-        permission: "bash",
-        patterns: ["/tmp/opencode-e2e-perm-reject"],
-      },
-      undefined,
-      async (state) => {
-        await page.goto(page.url())
-        await expectPermissionBlocked(page)
-
-        await clearPermissionDock(page, /deny/i)
-        await state.resolved()
-        await page.goto(page.url())
-        await expectPermissionOpen(page)
-      },
-    )
-  })
-})
-
-test("blocked permission flow supports allow always", async ({ page, sdk, gotoSession }) => {
-  await withDockSession(sdk, "e2e composer dock permission always", async (session) => {
-    await gotoSession(session.id)
-    await setAutoAccept(page, false)
-    await withMockPermission(
-      page,
-      {
-        id: "per_e2e_always",
-        sessionID: session.id,
-        permission: "bash",
-        patterns: ["/tmp/opencode-e2e-perm-always"],
-        metadata: { description: "Need permission for command" },
-      },
-      undefined,
-      async (state) => {
-        await page.goto(page.url())
-        await expectPermissionBlocked(page)
-
-        await clearPermissionDock(page, /allow always/i)
-        await state.resolved()
-        await page.goto(page.url())
-        await expectPermissionOpen(page)
-      },
-    )
-  })
-})
-
-test("child session question request blocks parent dock and unblocks after submit", async ({
-  page,
-  sdk,
-  gotoSession,
-}) => {
-  await withDockSession(sdk, "e2e composer dock child question parent", async (session) => {
-    await gotoSession(session.id)
-
-    const child = await sdk.session
-      .create({
-        title: "e2e composer dock child question",
-        parentID: session.id,
-      })
-      .then((r) => r.data)
-    if (!child?.id) throw new Error("Child session create did not return an id")
-
-    try {
-      await withDockSeed(sdk, child.id, async () => {
-        await seedSessionQuestion(sdk, {
-          sessionID: child.id,
-          questions: [
-            {
-              header: "Child input",
-              question: "Pick one child option",
-              options: [
-                { label: "Continue", description: "Continue child" },
-                { label: "Stop", description: "Stop child" },
-              ],
-            },
-          ],
+        await llm.toolMatch(inputMatch({ questions: defaultQuestions }), "question", { questions: defaultQuestions })
+        await seedSessionQuestion(project.sdk, {
+          sessionID: session.id,
+          questions: defaultQuestions,
         })
 
         const dock = page.locator(questionDockSelector)
@@ -423,40 +320,92 @@ test("child session question request blocks parent dock and unblocks after submi
 
         await expectQuestionOpen(page)
       })
-    } finally {
-      await cleanupSession({ sdk, sessionID: child.id })
-    }
-  })
+    },
+    { trackSession: project.trackSession },
+  )
 })
 
-test("child session permission request blocks parent dock and supports allow once", async ({
-  page,
-  sdk,
-  gotoSession,
-}) => {
-  await withDockSession(sdk, "e2e composer dock child permission parent", async (session) => {
-    await gotoSession(session.id)
-    await setAutoAccept(page, false)
+test("blocked question flow supports keyboard shortcuts", async ({ page, llm, project }) => {
+  await project.open()
+  await withDockSession(
+    project.sdk,
+    "e2e composer dock question keyboard",
+    async (session) => {
+      await withDockSeed(project.sdk, session.id, async () => {
+        await project.gotoSession(session.id)
 
-    const child = await sdk.session
-      .create({
-        title: "e2e composer dock child permission",
-        parentID: session.id,
+        await llm.toolMatch(inputMatch({ questions: defaultQuestions }), "question", { questions: defaultQuestions })
+        await seedSessionQuestion(project.sdk, {
+          sessionID: session.id,
+          questions: defaultQuestions,
+        })
+
+        const dock = page.locator(questionDockSelector)
+        const first = dock.locator('[data-slot="question-option"]').first()
+        const second = dock.locator('[data-slot="question-option"]').nth(1)
+
+        await expectQuestionBlocked(page)
+        await expect(first).toBeFocused()
+
+        await page.keyboard.press("ArrowDown")
+        await expect(second).toBeFocused()
+
+        await page.keyboard.press("Space")
+        await page.keyboard.press(`${modKey}+Enter`)
+        await expectQuestionOpen(page)
       })
-      .then((r) => r.data)
-    if (!child?.id) throw new Error("Child session create did not return an id")
+    },
+    { trackSession: project.trackSession },
+  )
+})
 
-    try {
+test("blocked question flow supports escape dismiss", async ({ page, llm, project }) => {
+  await project.open()
+  await withDockSession(
+    project.sdk,
+    "e2e composer dock question escape",
+    async (session) => {
+      await withDockSeed(project.sdk, session.id, async () => {
+        await project.gotoSession(session.id)
+
+        await llm.toolMatch(inputMatch({ questions: defaultQuestions }), "question", { questions: defaultQuestions })
+        await seedSessionQuestion(project.sdk, {
+          sessionID: session.id,
+          questions: defaultQuestions,
+        })
+
+        const dock = page.locator(questionDockSelector)
+        const first = dock.locator('[data-slot="question-option"]').first()
+
+        await expectQuestionBlocked(page)
+        await expect(first).toBeFocused()
+
+        await page.keyboard.press("Escape")
+        await expectQuestionOpen(page)
+      })
+    },
+    { trackSession: project.trackSession },
+  )
+})
+
+test("blocked permission flow supports allow once", async ({ page, project }) => {
+  await project.open()
+  await withDockSession(
+    project.sdk,
+    "e2e composer dock permission once",
+    async (session) => {
+      await project.gotoSession(session.id)
+      await setAutoAccept(page, false)
       await withMockPermission(
         page,
         {
-          id: "per_e2e_child",
-          sessionID: child.id,
+          id: "per_e2e_once",
+          sessionID: session.id,
           permission: "bash",
-          patterns: ["/tmp/opencode-e2e-perm-child"],
-          metadata: { description: "Need child permission" },
+          patterns: ["/tmp/opencode-e2e-perm-once"],
+          metadata: { description: "Need permission for command" },
         },
-        { child },
+        undefined,
         async (state) => {
           await page.goto(page.url())
           await expectPermissionBlocked(page)
@@ -464,67 +413,243 @@ test("child session permission request blocks parent dock and supports allow onc
           await clearPermissionDock(page, /allow once/i)
           await state.resolved()
           await page.goto(page.url())
-
           await expectPermissionOpen(page)
         },
       )
-    } finally {
-      await cleanupSession({ sdk, sessionID: child.id })
-    }
-  })
+    },
+    { trackSession: project.trackSession },
+  )
 })
 
-test("todo dock transitions and collapse behavior", async ({ page, sdk, gotoSession }) => {
-  await withDockSession(sdk, "e2e composer dock todo", async (session) => {
-    const dock = await todoDock(page, session.id)
-    await gotoSession(session.id)
-    await expect(page.locator(sessionComposerDockSelector)).toBeVisible()
+test("blocked permission flow supports reject", async ({ page, project }) => {
+  await project.open()
+  await withDockSession(
+    project.sdk,
+    "e2e composer dock permission reject",
+    async (session) => {
+      await project.gotoSession(session.id)
+      await setAutoAccept(page, false)
+      await withMockPermission(
+        page,
+        {
+          id: "per_e2e_reject",
+          sessionID: session.id,
+          permission: "bash",
+          patterns: ["/tmp/opencode-e2e-perm-reject"],
+        },
+        undefined,
+        async (state) => {
+          await page.goto(page.url())
+          await expectPermissionBlocked(page)
 
-    try {
-      await dock.open([
-        { content: "first task", status: "pending", priority: "high" },
-        { content: "second task", status: "in_progress", priority: "medium" },
-      ])
-      await dock.expectOpen(["pending", "in_progress"])
-
-      await dock.collapse()
-      await dock.expectCollapsed(["pending", "in_progress"])
-
-      await dock.expand()
-      await dock.expectOpen(["pending", "in_progress"])
-
-      await dock.finish([
-        { content: "first task", status: "completed", priority: "high" },
-        { content: "second task", status: "cancelled", priority: "medium" },
-      ])
-      await dock.expectClosed()
-    } finally {
-      await dock.clear()
-    }
-  })
+          await clearPermissionDock(page, /deny/i)
+          await state.resolved()
+          await page.goto(page.url())
+          await expectPermissionOpen(page)
+        },
+      )
+    },
+    { trackSession: project.trackSession },
+  )
 })
 
-test("keyboard focus stays off prompt while blocked", async ({ page, sdk, gotoSession }) => {
-  await withDockSession(sdk, "e2e composer dock keyboard", async (session) => {
-    await withDockSeed(sdk, session.id, async () => {
-      await gotoSession(session.id)
+test("blocked permission flow supports allow always", async ({ page, project }) => {
+  await project.open()
+  await withDockSession(
+    project.sdk,
+    "e2e composer dock permission always",
+    async (session) => {
+      await project.gotoSession(session.id)
+      await setAutoAccept(page, false)
+      await withMockPermission(
+        page,
+        {
+          id: "per_e2e_always",
+          sessionID: session.id,
+          permission: "bash",
+          patterns: ["/tmp/opencode-e2e-perm-always"],
+          metadata: { description: "Need permission for command" },
+        },
+        undefined,
+        async (state) => {
+          await page.goto(page.url())
+          await expectPermissionBlocked(page)
 
-      await seedSessionQuestion(sdk, {
-        sessionID: session.id,
-        questions: [
+          await clearPermissionDock(page, /allow always/i)
+          await state.resolved()
+          await page.goto(page.url())
+          await expectPermissionOpen(page)
+        },
+      )
+    },
+    { trackSession: project.trackSession },
+  )
+})
+
+test("child session question request blocks parent dock and unblocks after submit", async ({ page, llm, project }) => {
+  const questions = [
+    {
+      header: "Child input",
+      question: "Pick one child option",
+      options: [
+        { label: "Continue", description: "Continue child" },
+        { label: "Stop", description: "Stop child" },
+      ],
+    },
+  ]
+  await project.open()
+  await withDockSession(
+    project.sdk,
+    "e2e composer dock child question parent",
+    async (session) => {
+      await project.gotoSession(session.id)
+
+      const child = await project.sdk.session
+        .create({
+          title: "e2e composer dock child question",
+          parentID: session.id,
+        })
+        .then((r) => r.data)
+      if (!child?.id) throw new Error("Child session create did not return an id")
+      project.trackSession(child.id)
+
+      try {
+        await withDockSeed(project.sdk, child.id, async () => {
+          await llm.toolMatch(inputMatch({ questions }), "question", { questions })
+          await seedSessionQuestion(project.sdk, {
+            sessionID: child.id,
+            questions,
+          })
+
+          const dock = page.locator(questionDockSelector)
+          await expectQuestionBlocked(page)
+
+          await dock.locator('[data-slot="question-option"]').first().click()
+          await dock.getByRole("button", { name: /submit/i }).click()
+
+          await expectQuestionOpen(page)
+        })
+      } finally {
+        await cleanupSession({ sdk: project.sdk, sessionID: child.id })
+      }
+    },
+    { trackSession: project.trackSession },
+  )
+})
+
+test("child session permission request blocks parent dock and supports allow once", async ({ page, project }) => {
+  await project.open()
+  await withDockSession(
+    project.sdk,
+    "e2e composer dock child permission parent",
+    async (session) => {
+      await project.gotoSession(session.id)
+      await setAutoAccept(page, false)
+
+      const child = await project.sdk.session
+        .create({
+          title: "e2e composer dock child permission",
+          parentID: session.id,
+        })
+        .then((r) => r.data)
+      if (!child?.id) throw new Error("Child session create did not return an id")
+      project.trackSession(child.id)
+
+      try {
+        await withMockPermission(
+          page,
           {
-            header: "Need input",
-            question: "Pick one option",
-            options: [{ label: "Continue", description: "Continue now" }],
+            id: "per_e2e_child",
+            sessionID: child.id,
+            permission: "bash",
+            patterns: ["/tmp/opencode-e2e-perm-child"],
+            metadata: { description: "Need child permission" },
           },
-        ],
-      })
+          { child },
+          async (state) => {
+            await page.goto(page.url())
+            await expectPermissionBlocked(page)
 
-      await expectQuestionBlocked(page)
+            await clearPermissionDock(page, /allow once/i)
+            await state.resolved()
+            await page.goto(page.url())
 
-      await page.locator("main").click({ position: { x: 5, y: 5 } })
-      await page.keyboard.type("abc")
-      await expect(page.locator(promptSelector)).toHaveCount(0)
-    })
-  })
+            await expectPermissionOpen(page)
+          },
+        )
+      } finally {
+        await cleanupSession({ sdk: project.sdk, sessionID: child.id })
+      }
+    },
+    { trackSession: project.trackSession },
+  )
+})
+
+test("todo dock transitions and collapse behavior", async ({ page, project }) => {
+  await project.open()
+  await withDockSession(
+    project.sdk,
+    "e2e composer dock todo",
+    async (session) => {
+      const dock = await todoDock(page, session.id)
+      await project.gotoSession(session.id)
+      await expect(page.locator(sessionComposerDockSelector)).toBeVisible()
+
+      try {
+        await dock.open([
+          { content: "first task", status: "pending", priority: "high" },
+          { content: "second task", status: "in_progress", priority: "medium" },
+        ])
+        await dock.expectOpen(["pending", "in_progress"])
+
+        await dock.collapse()
+        await dock.expectCollapsed(["pending", "in_progress"])
+
+        await dock.expand()
+        await dock.expectOpen(["pending", "in_progress"])
+
+        await dock.finish([
+          { content: "first task", status: "completed", priority: "high" },
+          { content: "second task", status: "cancelled", priority: "medium" },
+        ])
+        await dock.expectClosed()
+      } finally {
+        await dock.clear()
+      }
+    },
+    { trackSession: project.trackSession },
+  )
+})
+
+test("keyboard focus stays off prompt while blocked", async ({ page, llm, project }) => {
+  const questions = [
+    {
+      header: "Need input",
+      question: "Pick one option",
+      options: [{ label: "Continue", description: "Continue now" }],
+    },
+  ]
+  await project.open()
+  await withDockSession(
+    project.sdk,
+    "e2e composer dock keyboard",
+    async (session) => {
+      await withDockSeed(project.sdk, session.id, async () => {
+        await project.gotoSession(session.id)
+
+        await llm.toolMatch(inputMatch({ questions }), "question", { questions })
+        await seedSessionQuestion(project.sdk, {
+          sessionID: session.id,
+          questions,
+        })
+
+        await expectQuestionBlocked(page)
+
+        await page.locator("main").click({ position: { x: 5, y: 5 } })
+        await page.keyboard.type("abc")
+        await expect(page.locator(promptSelector)).toHaveCount(0)
+      })
+    },
+    { trackSession: project.trackSession },
+  )
 })

packages/app/e2e/session/session-model-persistence.spec.ts

@@ -0,0 +1,362 @@
+import type { Locator, Page } from "@playwright/test"
+import { test, expect } from "../fixtures"
+import { openSidebar, resolveSlug, setWorkspacesEnabled, waitSession, waitSlug } from "../actions"
+import {
+  promptAgentSelector,
+  promptModelSelector,
+  promptVariantSelector,
+  workspaceItemSelector,
+  workspaceNewSessionSelector,
+} from "../selectors"
+import { createSdk, sessionPath } from "../utils"
+
+type Footer = {
+  agent: string
+  model: string
+  variant: string
+}
+
+type Probe = {
+  dir?: string
+  sessionID?: string
+  agent?: string
+  model?: { providerID: string; modelID: string; name?: string }
+  variant?: string | null
+  pick?: {
+    agent?: string
+    model?: { providerID: string; modelID: string }
+    variant?: string | null
+  }
+  variants?: string[]
+  models?: Array<{ providerID: string; modelID: string; name: string }>
+  agents?: Array<{ name: string }>
+}
+
+const escape = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+
+const text = async (locator: Locator) => ((await locator.textContent()) ?? "").trim()
+
+const modelKey = (state: Probe | null) => (state?.model ? `${state.model.providerID}:${state.model.modelID}` : null)
+
+async function probe(page: Page): Promise<Probe | null> {
+  return page.evaluate(() => {
+    const win = window as Window & {
+      __opencode_e2e?: {
+        model?: {
+          current?: Probe
+        }
+      }
+    }
+    return win.__opencode_e2e?.model?.current ?? null
+  })
+}
+
+async function currentModel(page: Page) {
+  await expect.poll(() => probe(page).then(modelKey), { timeout: 30_000 }).not.toBe(null)
+  const value = await probe(page).then(modelKey)
+  if (!value) throw new Error("Failed to resolve current model key")
+  return value
+}
+
+async function waitControl(page: Page, key: "setAgent" | "setModel" | "setVariant") {
+  await expect
+    .poll(
+      () =>
+        page.evaluate((key) => {
+          const win = window as Window & {
+            __opencode_e2e?: {
+              model?: {
+                controls?: Record<string, unknown>
+              }
+            }
+          }
+          return !!win.__opencode_e2e?.model?.controls?.[key]
+        }, key),
+      { timeout: 30_000 },
+    )
+    .toBe(true)
+}
+
+async function pickAgent(page: Page, value: string) {
+  await waitControl(page, "setAgent")
+  await page.evaluate((value) => {
+    const win = window as Window & {
+      __opencode_e2e?: {
+        model?: {
+          controls?: {
+            setAgent?: (value: string | undefined) => void
+          }
+        }
+      }
+    }
+    const fn = win.__opencode_e2e?.model?.controls?.setAgent
+    if (!fn) throw new Error("Model e2e agent control is not enabled")
+    fn(value)
+  }, value)
+}
+
+async function pickModel(page: Page, value: { providerID: string; modelID: string }) {
+  await waitControl(page, "setModel")
+  await page.evaluate((value) => {
+    const win = window as Window & {
+      __opencode_e2e?: {
+        model?: {
+          controls?: {
+            setModel?: (value: { providerID: string; modelID: string } | undefined) => void
+          }
+        }
+      }
+    }
+    const fn = win.__opencode_e2e?.model?.controls?.setModel
+    if (!fn) throw new Error("Model e2e model control is not enabled")
+    fn(value)
+  }, value)
+}
+
+async function pickVariant(page: Page, value: string) {
+  await waitControl(page, "setVariant")
+  await page.evaluate((value) => {
+    const win = window as Window & {
+      __opencode_e2e?: {
+        model?: {
+          controls?: {
+            setVariant?: (value: string | undefined) => void
+          }
+        }
+      }
+    }
+    const fn = win.__opencode_e2e?.model?.controls?.setVariant
+    if (!fn) throw new Error("Model e2e variant control is not enabled")
+    fn(value)
+  }, value)
+}
+
+async function read(page: Page): Promise<Footer> {
+  return {
+    agent: await text(page.locator(`${promptAgentSelector} [data-slot="select-select-trigger-value"]`).first()),
+    model: await text(page.locator(`${promptModelSelector} [data-action="prompt-model"] span`).first()),
+    variant: await text(page.locator(`${promptVariantSelector} [data-slot="select-select-trigger-value"]`).first()),
+  }
+}
+
+async function waitFooter(page: Page, expected: Partial<Footer>) {
+  let hit: Footer | null = null
+  await expect
+    .poll(
+      async () => {
+        const state = await read(page)
+        const ok = Object.entries(expected).every(([key, value]) => state[key as keyof Footer] === value)
+        if (ok) hit = state
+        return ok
+      },
+      { timeout: 30_000 },
+    )
+    .toBe(true)
+  if (!hit) throw new Error("Failed to resolve prompt footer state")
+  return hit
+}
+
+async function waitModel(page: Page, value: string) {
+  await expect.poll(() => probe(page).then(modelKey), { timeout: 30_000 }).toBe(value)
+}
+
+async function choose(page: Page, root: string, value: string) {
+  const select = page.locator(root)
+  await expect(select).toBeVisible()
+  await pickAgent(page, value)
+}
+
+async function variantCount(page: Page) {
+  return (await probe(page))?.variants?.length ?? 0
+}
+
+async function agents(page: Page) {
+  return ((await probe(page))?.agents ?? []).map((item) => item.name).filter(Boolean)
+}
+
+async function ensureVariant(page: Page, directory: string): Promise<Footer> {
+  const current = await read(page)
+  if ((await variantCount(page)) >= 2) return current
+
+  const cfg = await createSdk(directory)
+    .config.get()
+    .then((x) => x.data)
+  const visible = new Set(await agents(page))
+  const entry = Object.entries(cfg?.agent ?? {}).find((item) => {
+    const value = item[1]
+    return !!value && typeof value === "object" && "variant" in value && "model" in value && visible.has(item[0])
+  })
+  const name = entry?.[0]
+  test.skip(!name, "no agent with alternate variants available")
+  if (!name) return current
+
+  await choose(page, promptAgentSelector, name)
+  await expect.poll(() => variantCount(page), { timeout: 30_000 }).toBeGreaterThanOrEqual(2)
+  return waitFooter(page, { agent: name })
+}
+
+async function chooseDifferentVariant(page: Page): Promise<Footer> {
+  const current = await read(page)
+  const next = (await probe(page))?.variants?.find((item) => item !== current.variant)
+  if (!next) throw new Error("Current model has no alternate variant to select")
+
+  await pickVariant(page, next)
+  return waitFooter(page, { agent: current.agent, model: current.model, variant: next })
+}
+
+async function chooseOtherModel(page: Page, skip: string[] = []): Promise<Footer> {
+  const current = await currentModel(page)
+  const next = (await probe(page))?.models?.find((item) => {
+    const key = `${item.providerID}:${item.modelID}`
+    return key !== current && !skip.includes(key)
+  })
+  if (!next) throw new Error("Failed to choose a different model")
+  await pickModel(page, { providerID: next.providerID, modelID: next.modelID })
+  await expect.poll(async () => (await read(page)).model, { timeout: 30_000 }).toBe(next.name)
+  return read(page)
+}
+
+async function goto(page: Page, directory: string, sessionID?: string) {
+  await page.goto(sessionPath(directory, sessionID))
+  await waitSession(page, { directory, sessionID })
+}
+
+async function submit(project: Parameters<typeof test>[0]["project"], value: string) {
+  return project.prompt(value)
+}
+
+async function createWorkspace(page: Page, root: string, seen: string[]) {
+  await openSidebar(page)
+  await page.getByRole("button", { name: "New workspace" }).first().click()
+
+  const next = await resolveSlug(await waitSlug(page, [root, ...seen]))
+  await waitSession(page, { directory: next.directory })
+  return next
+}
+
+async function waitWorkspace(page: Page, slug: string) {
+  await openSidebar(page)
+  await expect
+    .poll(
+      async () => {
+        const item = page.locator(workspaceItemSelector(slug)).first()
+        try {
+          await item.hover({ timeout: 500 })
+          return true
+        } catch {
+          return false
+        }
+      },
+      { timeout: 60_000 },
+    )
+    .toBe(true)
+}
+
+async function newWorkspaceSession(page: Page, slug: string) {
+  await waitWorkspace(page, slug)
+  const item = page.locator(workspaceItemSelector(slug)).first()
+  await item.hover()
+
+  const button = page.locator(workspaceNewSessionSelector(slug)).first()
+  await expect(button).toBeVisible()
+  await button.click({ force: true })
+
+  const next = await resolveSlug(await waitSlug(page))
+  return waitSession(page, { directory: next.directory }).then((item) => item.directory)
+}
+
+test("session model restore per session without leaking into new sessions", async ({ page, project }) => {
+  await page.setViewportSize({ width: 1440, height: 900 })
+
+  await project.open()
+  await project.gotoSession()
+
+  const firstState = await chooseOtherModel(page)
+  const firstKey = await currentModel(page)
+  const first = await submit(project, `session variant ${Date.now()}`)
+
+  await page.reload()
+  await waitSession(page, { directory: project.directory, sessionID: first })
+  await waitFooter(page, firstState)
+
+  await project.gotoSession()
+  const fresh = await read(page)
+  expect(fresh.model).not.toBe(firstState.model)
+
+  const secondState = await chooseOtherModel(page, [firstKey])
+  const second = await submit(project, `session model ${Date.now()}`)
+
+  await goto(page, project.directory, first)
+  await waitFooter(page, firstState)
+
+  await goto(page, project.directory, second)
+  await waitFooter(page, secondState)
+
+  await project.gotoSession()
+  await page.reload()
+  await waitSession(page, { directory: project.directory })
+  await waitFooter(page, fresh)
+})
+
+test("session model restore across workspaces", async ({ page, project }) => {
+  await page.setViewportSize({ width: 1440, height: 900 })
+
+  await project.open()
+  const root = project.directory
+  await project.gotoSession()
+
+  const firstState = await chooseOtherModel(page)
+  const firstKey = await currentModel(page)
+  const first = await submit(project, `root session ${Date.now()}`)
+
+  await openSidebar(page)
+  await setWorkspacesEnabled(page, project.slug, true)
+
+  const one = await createWorkspace(page, project.slug, [])
+  const oneDir = await newWorkspaceSession(page, one.slug)
+  project.trackDirectory(oneDir)
+
+  const secondState = await chooseOtherModel(page, [firstKey])
+  const secondKey = await currentModel(page)
+  const second = await submit(project, `workspace one ${Date.now()}`)
+
+  const two = await createWorkspace(page, project.slug, [one.slug])
+  const twoDir = await newWorkspaceSession(page, two.slug)
+  project.trackDirectory(twoDir)
+
+  const thirdState = await chooseOtherModel(page, [firstKey, secondKey])
+  const third = await submit(project, `workspace two ${Date.now()}`)
+
+  await goto(page, root, first)
+  await waitFooter(page, firstState)
+
+  await goto(page, oneDir, second)
+  await waitFooter(page, secondState)
+
+  await goto(page, twoDir, third)
+  await waitFooter(page, thirdState)
+
+  await goto(page, root, first)
+  await waitFooter(page, firstState)
+})
+
+test("variant preserved when switching agent modes", async ({ page, project }) => {
+  await page.setViewportSize({ width: 1440, height: 900 })
+
+  await project.open()
+  await project.gotoSession()
+
+  await ensureVariant(page, project.directory)
+  const updated = await chooseDifferentVariant(page)
+
+  const available = await agents(page)
+  const other = available.find((name) => name !== updated.agent)
+  test.skip(!other, "only one agent available")
+  if (!other) return
+
+  await choose(page, promptAgentSelector, other)
+  await waitFooter(page, { agent: other, variant: updated.variant })
+
+  await choose(page, promptAgentSelector, updated.agent)
+  await waitFooter(page, { agent: updated.agent, variant: updated.variant })
+})

packages/app/e2e/session/session-review.spec.ts

@@ -1,6 +1,6 @@
 import { waitSessionIdle, withSession } from "../actions"
 import { test, expect } from "../fixtures"
-import { createSdk } from "../utils"
+import { bodyText } from "../prompt/mock"
 
 const count = 14
 
@@ -40,8 +40,19 @@ function edit(file: string, prev: string, next: string) {
   )
 }
 
-async function patch(sdk: ReturnType<typeof createSdk>, sessionID: string, patchText: string) {
-  await sdk.session.promptAsync({
+async function patchWithMock(
+  llm: Parameters<typeof test>[0]["llm"],
+  sdk: Parameters<typeof withSession>[0],
+  sessionID: string,
+  patchText: string,
+) {
+  const callsBefore = await llm.calls()
+  await llm.toolMatch(
+    (hit) => bodyText(hit).includes("Your only valid response is one apply_patch tool call."),
+    "apply_patch",
+    { patchText },
+  )
+  await sdk.session.prompt({
     sessionID,
     agent: "build",
     system: [
@@ -54,7 +65,16 @@ async function patch(sdk: ReturnType<typeof createSdk>, sessionID: string, patch
     parts: [{ type: "text", text: "Apply the provided patch exactly once." }],
   })
 
-  await waitSessionIdle(sdk, sessionID, 120_000)
+  await expect.poll(() => llm.calls().then((c) => c > callsBefore), { timeout: 30_000 }).toBe(true)
+  await expect
+    .poll(
+      async () => {
+        const diff = await sdk.session.diff({ sessionID }).then((res) => res.data ?? [])
+        return diff.length
+      },
+      { timeout: 120_000 },
+    )
+    .toBeGreaterThan(0)
 }
 
 async function show(page: Parameters<typeof test>[0]["page"]) {
@@ -123,8 +143,212 @@ async function spot(page: Parameters<typeof test>[0]["page"], file: string) {
   }, file)
 }
 
-test("review keeps scroll position after a live diff update", async ({ page, withProject }) => {
-  test.skip(Boolean(process.env.CI), "Flaky in CI for now.")
+async function comment(page: Parameters<typeof test>[0]["page"], file: string, note: string) {
+  const row = page.locator(`[data-file="${file}"]`).first()
+  await expect(row).toBeVisible()
+
+  const line = row.locator('diffs-container [data-line="2"]').first()
+  await expect(line).toBeVisible()
+  await line.hover()
+
+  const add = row.getByRole("button", { name: /^Comment$/ }).first()
+  await expect(add).toBeVisible()
+  await add.click()
+
+  const area = row.locator('[data-slot="line-comment-textarea"]').first()
+  await expect(area).toBeVisible()
+  await area.fill(note)
+
+  const submit = row.locator('[data-slot="line-comment-action"][data-variant="primary"]').first()
+  await expect(submit).toBeEnabled()
+  await submit.click()
+
+  await expect(row.locator('[data-slot="line-comment-content"]').filter({ hasText: note }).first()).toBeVisible()
+  await expect(row.locator('[data-slot="line-comment-tools"]').first()).toBeVisible()
+}
+
+async function overflow(page: Parameters<typeof test>[0]["page"], file: string) {
+  const row = page.locator(`[data-file="${file}"]`).first()
+  const view = page.locator('[data-slot="session-review-scroll"] .scroll-view__viewport').first()
+  const pop = row.locator('[data-slot="line-comment-popover"][data-inline-body]').first()
+  const tools = row.locator('[data-slot="line-comment-tools"]').first()
+
+  const [width, viewBox, popBox, toolsBox] = await Promise.all([
+    view.evaluate((el) => el.scrollWidth - el.clientWidth),
+    view.boundingBox(),
+    pop.boundingBox(),
+    tools.boundingBox(),
+  ])
+
+  if (!viewBox || !popBox || !toolsBox) return null
+
+  return {
+    width,
+    pop: popBox.x + popBox.width - (viewBox.x + viewBox.width),
+    tools: toolsBox.x + toolsBox.width - (viewBox.x + viewBox.width),
+  }
+}
+
+async function openReviewFile(page: Parameters<typeof test>[0]["page"], file: string) {
+  const row = page.locator(`[data-file="${file}"]`).first()
+  await expect(row).toBeVisible()
+  await row.hover()
+
+  const open = row.getByRole("button", { name: /^Open file$/i }).first()
+  await expect(open).toBeVisible()
+  await open.click()
+
+  const tab = page.getByRole("tab", { name: file }).first()
+  await expect(tab).toBeVisible()
+  await tab.click()
+
+  const viewer = page.locator('[data-component="file"][data-mode="text"]').first()
+  await expect(viewer).toBeVisible()
+  return viewer
+}
+
+async function fileComment(page: Parameters<typeof test>[0]["page"], note: string) {
+  const viewer = page.locator('[data-component="file"][data-mode="text"]').first()
+  await expect(viewer).toBeVisible()
+
+  const line = viewer.locator('diffs-container [data-line="2"]').first()
+  await expect(line).toBeVisible()
+  await line.hover()
+
+  const add = viewer.getByRole("button", { name: /^Comment$/ }).first()
+  await expect(add).toBeVisible()
+  await add.click()
+
+  const area = viewer.locator('[data-slot="line-comment-textarea"]').first()
+  await expect(area).toBeVisible()
+  await area.fill(note)
+
+  const submit = viewer.locator('[data-slot="line-comment-action"][data-variant="primary"]').first()
+  await expect(submit).toBeEnabled()
+  await submit.click()
+
+  await expect(viewer.locator('[data-slot="line-comment-content"]').filter({ hasText: note }).first()).toBeVisible()
+  await expect(viewer.locator('[data-slot="line-comment-tools"]').first()).toBeVisible()
+}
+
+async function fileOverflow(page: Parameters<typeof test>[0]["page"]) {
+  const viewer = page.locator('[data-component="file"][data-mode="text"]').first()
+  const view = page.locator('[role="tabpanel"] .scroll-view__viewport').first()
+  const pop = viewer.locator('[data-slot="line-comment-popover"][data-inline-body]').first()
+  const tools = viewer.locator('[data-slot="line-comment-tools"]').first()
+
+  const [width, viewBox, popBox, toolsBox] = await Promise.all([
+    view.evaluate((el) => el.scrollWidth - el.clientWidth),
+    view.boundingBox(),
+    pop.boundingBox(),
+    tools.boundingBox(),
+  ])
+
+  if (!viewBox || !popBox || !toolsBox) return null
+
+  return {
+    width,
+    pop: popBox.x + popBox.width - (viewBox.x + viewBox.width),
+    tools: toolsBox.x + toolsBox.width - (viewBox.x + viewBox.width),
+  }
+}
+
+test("review applies inline comment clicks without horizontal overflow", async ({ page, llm, project }) => {
+  test.setTimeout(180_000)
+
+  const tag = `review-comment-${Date.now()}`
+  const file = `review-comment-${tag}.txt`
+  const note = `comment ${tag}`
+
+  await page.setViewportSize({ width: 1280, height: 900 })
+
+  await project.open()
+  await withSession(project.sdk, `e2e review comment ${tag}`, async (session) => {
+    project.trackSession(session.id)
+    await patchWithMock(llm, project.sdk, session.id, seed([{ file, mark: tag }]))
+
+    await expect
+      .poll(
+        async () => {
+          const diff = await project.sdk.session.diff({ sessionID: session.id }).then((res) => res.data ?? [])
+          return diff.length
+        },
+        { timeout: 60_000 },
+      )
+      .toBe(1)
+
+    await project.gotoSession(session.id)
+    await show(page)
+
+    const tab = page.getByRole("tab", { name: /Review/i }).first()
+    await expect(tab).toBeVisible()
+    await tab.click()
+
+    await expand(page)
+    await waitMark(page, file, tag)
+    await comment(page, file, note)
+
+    await expect
+      .poll(async () => (await overflow(page, file))?.width ?? Number.POSITIVE_INFINITY, { timeout: 10_000 })
+      .toBeLessThanOrEqual(1)
+    await expect
+      .poll(async () => (await overflow(page, file))?.pop ?? Number.POSITIVE_INFINITY, { timeout: 10_000 })
+      .toBeLessThanOrEqual(1)
+    await expect
+      .poll(async () => (await overflow(page, file))?.tools ?? Number.POSITIVE_INFINITY, { timeout: 10_000 })
+      .toBeLessThanOrEqual(1)
+  })
+})
+
+test("review file comments submit on click without clipping actions", async ({ page, llm, project }) => {
+  test.setTimeout(180_000)
+
+  const tag = `review-file-comment-${Date.now()}`
+  const file = `review-file-comment-${tag}.txt`
+  const note = `comment ${tag}`
+
+  await page.setViewportSize({ width: 1280, height: 900 })
+
+  await project.open()
+  await withSession(project.sdk, `e2e review file comment ${tag}`, async (session) => {
+    project.trackSession(session.id)
+    await patchWithMock(llm, project.sdk, session.id, seed([{ file, mark: tag }]))
+
+    await expect
+      .poll(
+        async () => {
+          const diff = await project.sdk.session.diff({ sessionID: session.id }).then((res) => res.data ?? [])
+          return diff.length
+        },
+        { timeout: 60_000 },
+      )
+      .toBe(1)
+
+    await project.gotoSession(session.id)
+    await show(page)
+
+    const tab = page.getByRole("tab", { name: /Review/i }).first()
+    await expect(tab).toBeVisible()
+    await tab.click()
+
+    await expand(page)
+    await waitMark(page, file, tag)
+    await openReviewFile(page, file)
+    await fileComment(page, note)
+
+    await expect
+      .poll(async () => (await fileOverflow(page))?.width ?? Number.POSITIVE_INFINITY, { timeout: 10_000 })
+      .toBeLessThanOrEqual(1)
+    await expect
+      .poll(async () => (await fileOverflow(page))?.pop ?? Number.POSITIVE_INFINITY, { timeout: 10_000 })
+      .toBeLessThanOrEqual(1)
+    await expect
+      .poll(async () => (await fileOverflow(page))?.tools ?? Number.POSITIVE_INFINITY, { timeout: 10_000 })
+      .toBeLessThanOrEqual(1)
+  })
+})
+
+test.fixme("review keeps scroll position after a live diff update", async ({ page, llm, project }) => {
   test.setTimeout(180_000)
 
   const tag = `review-${Date.now()}`
@@ -134,84 +358,83 @@ test("review keeps scroll position after a live diff update", async ({ page, wit
 
   await page.setViewportSize({ width: 1600, height: 1000 })
 
-  await withProject(async (project) => {
-    const sdk = createSdk(project.directory)
+  await project.open()
+  await withSession(project.sdk, `e2e review ${tag}`, async (session) => {
+    project.trackSession(session.id)
+    await patchWithMock(llm, project.sdk, session.id, seed(list))
 
-    await withSession(sdk, `e2e review ${tag}`, async (session) => {
-      await patch(sdk, session.id, seed(list))
+    await expect
+      .poll(
+        async () => {
+          const info = await project.sdk.session.get({ sessionID: session.id }).then((res) => res.data)
+          return info?.summary?.files ?? 0
+        },
+        { timeout: 60_000 },
+      )
+      .toBe(list.length)
 
-      await expect
-        .poll(
-          async () => {
-            const info = await sdk.session.get({ sessionID: session.id }).then((res) => res.data)
-            return info?.summary?.files ?? 0
-          },
-          { timeout: 60_000 },
-        )
-        .toBe(list.length)
+    await expect
+      .poll(
+        async () => {
+          const diff = await project.sdk.session.diff({ sessionID: session.id }).then((res) => res.data ?? [])
+          return diff.length
+        },
+        { timeout: 60_000 },
+      )
+      .toBe(list.length)
 
-      await expect
-        .poll(
-          async () => {
-            const diff = await sdk.session.diff({ sessionID: session.id }).then((res) => res.data ?? [])
-            return diff.length
-          },
-          { timeout: 60_000 },
-        )
-        .toBe(list.length)
+    await project.gotoSession(session.id)
+    await show(page)
 
-      await project.gotoSession(session.id)
-      await show(page)
+    const tab = page.getByRole("tab", { name: /Review/i }).first()
+    await expect(tab).toBeVisible()
+    await tab.click()
 
-      const tab = page.getByRole("tab", { name: /Review/i }).first()
-      await expect(tab).toBeVisible()
-      await tab.click()
+    const view = page.locator('[data-slot="session-review-scroll"] .scroll-view__viewport').first()
+    await expect(view).toBeVisible()
+    const heads = page.getByRole("heading", { level: 3 }).filter({ hasText: /^review-scroll-/ })
+    await expect(heads).toHaveCount(list.length, { timeout: 60_000 })
 
-      const view = page.locator('[data-slot="session-review-scroll"] .scroll-view__viewport').first()
-      await expect(view).toBeVisible()
-      const heads = page.getByRole("heading", { level: 3 }).filter({ hasText: /^review-scroll-/ })
-      await expect(heads).toHaveCount(list.length, {
-        timeout: 60_000,
+    await expand(page)
+    await waitMark(page, hit.file, hit.mark)
+
+    const row = page
+      .getByRole("heading", {
+        level: 3,
+        name: new RegExp(hit.file.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")),
       })
+      .first()
+    await expect(row).toBeVisible()
+    await row.evaluate((el) => el.scrollIntoView({ block: "center" }))
 
-      await expand(page)
-      await waitMark(page, hit.file, hit.mark)
+    await expect.poll(async () => (await spot(page, hit.file))?.y ?? 0).toBeGreaterThan(200)
+    const prev = await spot(page, hit.file)
+    if (!prev) throw new Error(`missing review row for ${hit.file}`)
 
-      const row = page
-        .getByRole("heading", { level: 3, name: new RegExp(hit.file.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")) })
-        .first()
-      await expect(row).toBeVisible()
-      await row.evaluate((el) => el.scrollIntoView({ block: "center" }))
+    await patchWithMock(llm, project.sdk, session.id, edit(hit.file, hit.mark, next))
 
-      await expect.poll(async () => (await spot(page, hit.file))?.y ?? 0).toBeGreaterThan(200)
-      const prev = await spot(page, hit.file)
-      if (!prev) throw new Error(`missing review row for ${hit.file}`)
+    await expect
+      .poll(
+        async () => {
+          const diff = await project.sdk.session.diff({ sessionID: session.id }).then((res) => res.data ?? [])
+          const item = diff.find((item) => item.file === hit.file)
+          return typeof item?.after === "string" ? item.after : ""
+        },
+        { timeout: 60_000 },
+      )
+      .toContain(`mark ${next}`)
 
-      await patch(sdk, session.id, edit(hit.file, hit.mark, next))
+    await waitMark(page, hit.file, next)
 
-      await expect
-        .poll(
-          async () => {
-            const diff = await sdk.session.diff({ sessionID: session.id }).then((res) => res.data ?? [])
-            const item = diff.find((item) => item.file === hit.file)
-            return typeof item?.after === "string" ? item.after : ""
-          },
-          { timeout: 60_000 },
-        )
-        .toContain(`mark ${next}`)
-
-      await waitMark(page, hit.file, next)
-
-      await expect
-        .poll(
-          async () => {
-            const next = await spot(page, hit.file)
-            if (!next) return Number.POSITIVE_INFINITY
-            return Math.max(Math.abs(next.top - prev.top), Math.abs(next.y - prev.y))
-          },
-          { timeout: 60_000 },
-        )
-        .toBeLessThanOrEqual(32)
-    })
+    await expect
+      .poll(
+        async () => {
+          const next = await spot(page, hit.file)
+          if (!next) return Number.POSITIVE_INFINITY
+          return Math.max(Math.abs(next.top - prev.top), Math.abs(next.y - prev.y))
+        },
+        { timeout: 60_000 },
+      )
+      .toBeLessThanOrEqual(32)
   })
 })

packages/app/e2e/session/session-undo-redo.spec.ts

@@ -49,185 +49,185 @@ async function seedConversation(input: {
   return { prompt, userMessageID }
 }
 
-test("slash undo sets revert and restores prior prompt", async ({ page, withProject }) => {
+test("slash undo sets revert and restores prior prompt", async ({ page, project }) => {
   test.setTimeout(120_000)
 
   const token = `undo_${Date.now()}`
 
-  await withProject(async (project) => {
-    const sdk = createSdk(project.directory)
+  await project.open()
+  const sdk = project.sdk
 
-    await withSession(sdk, `e2e undo ${Date.now()}`, async (session) => {
-      await project.gotoSession(session.id)
+  await withSession(sdk, `e2e undo ${Date.now()}`, async (session) => {
+    project.trackSession(session.id)
+    await project.gotoSession(session.id)
 
-      const seeded = await seedConversation({ page, sdk, sessionID: session.id, token })
+    const seeded = await seedConversation({ page, sdk, sessionID: session.id, token })
 
-      await seeded.prompt.click()
-      await page.keyboard.type("/undo")
+    await seeded.prompt.click()
+    await page.keyboard.type("/undo")
 
-      const undo = page.locator('[data-slash-id="session.undo"]').first()
-      await expect(undo).toBeVisible()
-      await page.keyboard.press("Enter")
+    const undo = page.locator('[data-slash-id="session.undo"]').first()
+    await expect(undo).toBeVisible()
+    await page.keyboard.press("Enter")
 
-      await expect
-        .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
-          timeout: 30_000,
-        })
-        .toBe(seeded.userMessageID)
+    await expect
+      .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
+        timeout: 30_000,
+      })
+      .toBe(seeded.userMessageID)
 
-      await expect(seeded.prompt).toContainText(token)
-      await expect(page.locator(`[data-message-id="${seeded.userMessageID}"]`)).toHaveCount(0)
-    })
+    await expect(seeded.prompt).toContainText(token)
+    await expect(page.locator(`[data-message-id="${seeded.userMessageID}"]`)).toHaveCount(0)
   })
 })
 
-test("slash redo clears revert and restores latest state", async ({ page, withProject }) => {
+test("slash redo clears revert and restores latest state", async ({ page, project }) => {
   test.setTimeout(120_000)
 
   const token = `redo_${Date.now()}`
 
-  await withProject(async (project) => {
-    const sdk = createSdk(project.directory)
+  await project.open()
+  const sdk = project.sdk
 
-    await withSession(sdk, `e2e redo ${Date.now()}`, async (session) => {
-      await project.gotoSession(session.id)
+  await withSession(sdk, `e2e redo ${Date.now()}`, async (session) => {
+    project.trackSession(session.id)
+    await project.gotoSession(session.id)
 
-      const seeded = await seedConversation({ page, sdk, sessionID: session.id, token })
+    const seeded = await seedConversation({ page, sdk, sessionID: session.id, token })
 
-      await seeded.prompt.click()
-      await page.keyboard.type("/undo")
+    await seeded.prompt.click()
+    await page.keyboard.type("/undo")
 
-      const undo = page.locator('[data-slash-id="session.undo"]').first()
-      await expect(undo).toBeVisible()
-      await page.keyboard.press("Enter")
+    const undo = page.locator('[data-slash-id="session.undo"]').first()
+    await expect(undo).toBeVisible()
+    await page.keyboard.press("Enter")
 
-      await expect
-        .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
-          timeout: 30_000,
-        })
-        .toBe(seeded.userMessageID)
+    await expect
+      .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
+        timeout: 30_000,
+      })
+      .toBe(seeded.userMessageID)
 
-      await seeded.prompt.click()
-      await page.keyboard.press(`${modKey}+A`)
-      await page.keyboard.press("Backspace")
-      await page.keyboard.type("/redo")
+    await seeded.prompt.click()
+    await page.keyboard.press(`${modKey}+A`)
+    await page.keyboard.press("Backspace")
+    await page.keyboard.type("/redo")
 
-      const redo = page.locator('[data-slash-id="session.redo"]').first()
-      await expect(redo).toBeVisible()
-      await page.keyboard.press("Enter")
+    const redo = page.locator('[data-slash-id="session.redo"]').first()
+    await expect(redo).toBeVisible()
+    await page.keyboard.press("Enter")
 
-      await expect
-        .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
-          timeout: 30_000,
-        })
-        .toBeUndefined()
+    await expect
+      .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
+        timeout: 30_000,
+      })
+      .toBeUndefined()
 
-      await expect(seeded.prompt).not.toContainText(token)
-      await expect(page.locator(`[data-message-id="${seeded.userMessageID}"]`)).toHaveCount(1)
-    })
+    await expect(seeded.prompt).not.toContainText(token)
+    await expect(page.locator(`[data-message-id="${seeded.userMessageID}"]`)).toHaveCount(1)
   })
 })
 
-test("slash undo/redo traverses multi-step revert stack", async ({ page, withProject }) => {
+test("slash undo/redo traverses multi-step revert stack", async ({ page, project }) => {
   test.setTimeout(120_000)
 
   const firstToken = `undo_redo_first_${Date.now()}`
   const secondToken = `undo_redo_second_${Date.now()}`
 
-  await withProject(async (project) => {
-    const sdk = createSdk(project.directory)
+  await project.open()
+  const sdk = project.sdk
 
-    await withSession(sdk, `e2e undo redo stack ${Date.now()}`, async (session) => {
-      await project.gotoSession(session.id)
+  await withSession(sdk, `e2e undo redo stack ${Date.now()}`, async (session) => {
+    project.trackSession(session.id)
+    await project.gotoSession(session.id)
 
-      const first = await seedConversation({
-        page,
-        sdk,
-        sessionID: session.id,
-        token: firstToken,
-      })
-      const second = await seedConversation({
-        page,
-        sdk,
-        sessionID: session.id,
-        token: secondToken,
-      })
-
-      expect(first.userMessageID).not.toBe(second.userMessageID)
-
-      const firstMessage = page.locator(`[data-message-id="${first.userMessageID}"]`)
-      const secondMessage = page.locator(`[data-message-id="${second.userMessageID}"]`)
-
-      await expect(firstMessage).toHaveCount(1)
-      await expect(secondMessage).toHaveCount(1)
-
-      await second.prompt.click()
-      await page.keyboard.press(`${modKey}+A`)
-      await page.keyboard.press("Backspace")
-      await page.keyboard.type("/undo")
-
-      const undo = page.locator('[data-slash-id="session.undo"]').first()
-      await expect(undo).toBeVisible()
-      await page.keyboard.press("Enter")
-
-      await expect
-        .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
-          timeout: 30_000,
-        })
-        .toBe(second.userMessageID)
-
-      await expect(firstMessage).toHaveCount(1)
-      await expect(secondMessage).toHaveCount(0)
-
-      await second.prompt.click()
-      await page.keyboard.press(`${modKey}+A`)
-      await page.keyboard.press("Backspace")
-      await page.keyboard.type("/undo")
-      await expect(undo).toBeVisible()
-      await page.keyboard.press("Enter")
-
-      await expect
-        .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
-          timeout: 30_000,
-        })
-        .toBe(first.userMessageID)
-
-      await expect(firstMessage).toHaveCount(0)
-      await expect(secondMessage).toHaveCount(0)
-
-      await second.prompt.click()
-      await page.keyboard.press(`${modKey}+A`)
-      await page.keyboard.press("Backspace")
-      await page.keyboard.type("/redo")
-
-      const redo = page.locator('[data-slash-id="session.redo"]').first()
-      await expect(redo).toBeVisible()
-      await page.keyboard.press("Enter")
-
-      await expect
-        .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
-          timeout: 30_000,
-        })
-        .toBe(second.userMessageID)
-
-      await expect(firstMessage).toHaveCount(1)
-      await expect(secondMessage).toHaveCount(0)
-
-      await second.prompt.click()
-      await page.keyboard.press(`${modKey}+A`)
-      await page.keyboard.press("Backspace")
-      await page.keyboard.type("/redo")
-      await expect(redo).toBeVisible()
-      await page.keyboard.press("Enter")
-
-      await expect
-        .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
-          timeout: 30_000,
-        })
-        .toBeUndefined()
-
-      await expect(firstMessage).toHaveCount(1)
-      await expect(secondMessage).toHaveCount(1)
+    const first = await seedConversation({
+      page,
+      sdk,
+      sessionID: session.id,
+      token: firstToken,
     })
+    const second = await seedConversation({
+      page,
+      sdk,
+      sessionID: session.id,
+      token: secondToken,
+    })
+
+    expect(first.userMessageID).not.toBe(second.userMessageID)
+
+    const firstMessage = page.locator(`[data-message-id="${first.userMessageID}"]`)
+    const secondMessage = page.locator(`[data-message-id="${second.userMessageID}"]`)
+
+    await expect(firstMessage).toHaveCount(1)
+    await expect(secondMessage).toHaveCount(1)
+
+    await second.prompt.click()
+    await page.keyboard.press(`${modKey}+A`)
+    await page.keyboard.press("Backspace")
+    await page.keyboard.type("/undo")
+
+    const undo = page.locator('[data-slash-id="session.undo"]').first()
+    await expect(undo).toBeVisible()
+    await page.keyboard.press("Enter")
+
+    await expect
+      .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
+        timeout: 30_000,
+      })
+      .toBe(second.userMessageID)
+
+    await expect(firstMessage).toHaveCount(1)
+    await expect(secondMessage).toHaveCount(0)
+
+    await second.prompt.click()
+    await page.keyboard.press(`${modKey}+A`)
+    await page.keyboard.press("Backspace")
+    await page.keyboard.type("/undo")
+    await expect(undo).toBeVisible()
+    await page.keyboard.press("Enter")
+
+    await expect
+      .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
+        timeout: 30_000,
+      })
+      .toBe(first.userMessageID)
+
+    await expect(firstMessage).toHaveCount(0)
+    await expect(secondMessage).toHaveCount(0)
+
+    await second.prompt.click()
+    await page.keyboard.press(`${modKey}+A`)
+    await page.keyboard.press("Backspace")
+    await page.keyboard.type("/redo")
+
+    const redo = page.locator('[data-slash-id="session.redo"]').first()
+    await expect(redo).toBeVisible()
+    await page.keyboard.press("Enter")
+
+    await expect
+      .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
+        timeout: 30_000,
+      })
+      .toBe(second.userMessageID)
+
+    await expect(firstMessage).toHaveCount(1)
+    await expect(secondMessage).toHaveCount(0)
+
+    await second.prompt.click()
+    await page.keyboard.press(`${modKey}+A`)
+    await page.keyboard.press("Backspace")
+    await page.keyboard.type("/redo")
+    await expect(redo).toBeVisible()
+    await page.keyboard.press("Enter")
+
+    await expect
+      .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
+        timeout: 30_000,
+      })
+      .toBeUndefined()
+
+    await expect(firstMessage).toHaveCount(1)
+    await expect(secondMessage).toHaveCount(1)
   })
 })

packages/app/e2e/session/session.spec.ts

@@ -31,14 +31,16 @@ async function seedMessage(sdk: Sdk, sessionID: string) {
     .toBeGreaterThan(0)
 }
 
-test("session can be renamed via header menu", async ({ page, sdk, gotoSession }) => {
+test("session can be renamed via header menu", async ({ page, project }) => {
   const stamp = Date.now()
   const originalTitle = `e2e rename test ${stamp}`
   const renamedTitle = `e2e renamed ${stamp}`
 
-  await withSession(sdk, originalTitle, async (session) => {
-    await seedMessage(sdk, session.id)
-    await gotoSession(session.id)
+  await project.open()
+  await withSession(project.sdk, originalTitle, async (session) => {
+    project.trackSession(session.id)
+    await seedMessage(project.sdk, session.id)
+    await project.gotoSession(session.id)
     await expect(page.getByRole("heading", { level: 1 }).first()).toHaveText(originalTitle)
 
     const menu = await openSessionMoreMenu(page, session.id)
@@ -54,7 +56,7 @@ test("session can be renamed via header menu", async ({ page, sdk, gotoSession }
     await expect
       .poll(
         async () => {
-          const data = await sdk.session.get({ sessionID: session.id }).then((r) => r.data)
+          const data = await project.sdk.session.get({ sessionID: session.id }).then((r) => r.data)
           return data?.title
         },
         { timeout: 30_000 },
@@ -65,20 +67,22 @@ test("session can be renamed via header menu", async ({ page, sdk, gotoSession }
   })
 })
 
-test("session can be archived via header menu", async ({ page, sdk, gotoSession }) => {
+test("session can be archived via header menu", async ({ page, project }) => {
   const stamp = Date.now()
   const title = `e2e archive test ${stamp}`
 
-  await withSession(sdk, title, async (session) => {
-    await seedMessage(sdk, session.id)
-    await gotoSession(session.id)
+  await project.open()
+  await withSession(project.sdk, title, async (session) => {
+    project.trackSession(session.id)
+    await seedMessage(project.sdk, session.id)
+    await project.gotoSession(session.id)
     const menu = await openSessionMoreMenu(page, session.id)
     await clickMenuItem(menu, /archive/i)
 
     await expect
       .poll(
         async () => {
-          const data = await sdk.session.get({ sessionID: session.id }).then((r) => r.data)
+          const data = await project.sdk.session.get({ sessionID: session.id }).then((r) => r.data)
           return data?.time?.archived
         },
         { timeout: 30_000 },
@@ -90,13 +94,15 @@ test("session can be archived via header menu", async ({ page, sdk, gotoSession
   })
 })
 
-test("session can be deleted via header menu", async ({ page, sdk, gotoSession }) => {
+test("session can be deleted via header menu", async ({ page, project }) => {
   const stamp = Date.now()
   const title = `e2e delete test ${stamp}`
 
-  await withSession(sdk, title, async (session) => {
-    await seedMessage(sdk, session.id)
-    await gotoSession(session.id)
+  await project.open()
+  await withSession(project.sdk, title, async (session) => {
+    project.trackSession(session.id)
+    await seedMessage(project.sdk, session.id)
+    await project.gotoSession(session.id)
     const menu = await openSessionMoreMenu(page, session.id)
     await clickMenuItem(menu, /delete/i)
     await confirmDialog(page, /delete/i)
@@ -104,7 +110,7 @@ test("session can be deleted via header menu", async ({ page, sdk, gotoSession }
     await expect
       .poll(
         async () => {
-          const data = await sdk.session
+          const data = await project.sdk.session
             .get({ sessionID: session.id })
             .then((r) => r.data)
             .catch(() => undefined)
@@ -119,15 +125,17 @@ test("session can be deleted via header menu", async ({ page, sdk, gotoSession }
   })
 })
 
-test("session can be shared and unshared via header button", async ({ page, sdk, gotoSession }) => {
+test("session can be shared and unshared via header button", async ({ page, project }) => {
   test.skip(shareDisabled, "Share is disabled in this environment (OPENCODE_DISABLE_SHARE).")
 
   const stamp = Date.now()
   const title = `e2e share test ${stamp}`
 
-  await withSession(sdk, title, async (session) => {
-    await seedMessage(sdk, session.id)
-    await gotoSession(session.id)
+  await project.open()
+  await withSession(project.sdk, title, async (session) => {
+    project.trackSession(session.id)
+    await project.gotoSession(session.id)
+    await project.prompt(`share seed ${stamp}`)
 
     const shared = await openSharePopover(page)
     const publish = shared.popoverBody.getByRole("button", { name: "Publish" }).first()
@@ -141,7 +149,7 @@ test("session can be shared and unshared via header button", async ({ page, sdk,
     await expect
       .poll(
         async () => {
-          const data = await sdk.session.get({ sessionID: session.id }).then((r) => r.data)
+          const data = await project.sdk.session.get({ sessionID: session.id }).then((r) => r.data)
           return data?.share?.url || undefined
         },
         { timeout: 30_000 },
@@ -159,7 +167,7 @@ test("session can be shared and unshared via header button", async ({ page, sdk,
     await expect
       .poll(
         async () => {
-          const data = await sdk.session.get({ sessionID: session.id }).then((r) => r.data)
+          const data = await project.sdk.session.get({ sessionID: session.id }).then((r) => r.data)
           return data?.share?.url || undefined
         },
         { timeout: 30_000 },

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

@@ -1,5 +1,5 @@
 import { test, expect } from "../fixtures"
-import { openSettings, closeDialog, waitTerminalReady, withSession } from "../actions"
+import { openSettings, closeDialog, waitTerminalFocusIdle, withSession } from "../actions"
 import { keybindButtonSelector, terminalSelector } from "../selectors"
 import { modKey } from "../utils"
 
@@ -241,7 +241,7 @@ test("changing file open keybind works", async ({ page, gotoSession }) => {
   await expect(keybindButton).toBeVisible()
 
   const initialKeybind = await keybindButton.textContent()
-  expect(initialKeybind).toContain("P")
+  expect(initialKeybind).toContain("K")
 
   await keybindButton.click()
   await expect(keybindButton).toHaveText(/press/i)
@@ -302,7 +302,7 @@ test("changing terminal toggle keybind works", async ({ page, gotoSession }) =>
   await expect(terminal).not.toBeVisible()
 
   await page.keyboard.press(`${modKey}+Y`)
-  await waitTerminalReady(page, { term: terminal })
+  await waitTerminalFocusIdle(page, { term: terminal })
 
   await page.keyboard.press(`${modKey}+Y`)
   await expect(terminal).not.toBeVisible()

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

@@ -2,7 +2,7 @@ import { test, expect, settingsKey } from "../fixtures"
 import { closeDialog, openSettings } from "../actions"
 import {
   settingsColorSchemeSelector,
-  settingsFontSelector,
+  settingsCodeFontSelector,
   settingsLanguageSelectSelector,
   settingsNotificationsAgentSelector,
   settingsNotificationsErrorsSelector,
@@ -12,6 +12,7 @@ import {
   settingsSoundsErrorsSelector,
   settingsSoundsPermissionsSelector,
   settingsThemeSelector,
+  settingsUIFontSelector,
   settingsUpdatesStartupSelector,
 } from "../selectors"
 
@@ -87,10 +88,20 @@ test("changing theme persists in localStorage", async ({ page, gotoSession }) =>
     return document.documentElement.getAttribute("data-theme")
   })
   const currentTheme = (await select.locator('[data-slot="select-select-trigger-value"]').textContent())?.trim() ?? ""
-
-  await select.locator('[data-slot="select-select-trigger"]').click()
-
+  const trigger = select.locator('[data-slot="select-select-trigger"]')
   const items = page.locator('[data-slot="select-select-item"]')
+
+  await trigger.click()
+  const open = await expect
+    .poll(async () => (await items.count()) > 0, { timeout: 5_000 })
+    .toBe(true)
+    .then(() => true)
+    .catch(() => false)
+  if (!open) {
+    await trigger.click()
+    await expect.poll(async () => (await items.count()) > 0, { timeout: 10_000 }).toBe(true)
+  }
+  await expect(items.first()).toBeVisible()
   const count = await items.count()
   expect(count).toBeGreaterThan(1)
 
@@ -152,74 +163,28 @@ test("legacy oc-1 theme migrates to oc-2", async ({ page, gotoSession }) => {
     .toBeNull()
 })
 
-test("changing font persists in localStorage and updates CSS variable", async ({ page, gotoSession }) => {
+test("typing a code font with spaces persists and updates CSS variable", async ({ page, gotoSession }) => {
   await gotoSession()
 
   const dialog = await openSettings(page)
-  const select = dialog.locator(settingsFontSelector)
-  await expect(select).toBeVisible()
+  const input = dialog.locator(settingsCodeFontSelector)
+  await expect(input).toBeVisible()
+  await expect(input).toHaveAttribute("placeholder", "System Mono")
 
-  const initialFontFamily = await page.evaluate(() => {
-    return getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono")
-  })
-  expect(initialFontFamily).toContain("IBM Plex Mono")
+  const initialFontFamily = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim(),
+  )
+  const initialUIFamily = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue("--font-family-sans").trim(),
+  )
+  expect(initialFontFamily).toContain("ui-monospace")
 
-  await select.locator('[data-slot="select-select-trigger"]').click()
+  const next = "Test Mono"
 
-  const items = page.locator('[data-slot="select-select-item"]')
-  await items.nth(2).click()
-
-  await page.waitForTimeout(100)
-
-  const stored = await page.evaluate((key) => {
-    const raw = localStorage.getItem(key)
-    return raw ? JSON.parse(raw) : null
-  }, settingsKey)
-
-  expect(stored?.appearance?.font).not.toBe("ibm-plex-mono")
-
-  const newFontFamily = await page.evaluate(() => {
-    return getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono")
-  })
-  expect(newFontFamily).not.toBe(initialFontFamily)
-})
-
-test("color scheme and font rehydrate after reload", async ({ page, gotoSession }) => {
-  await gotoSession()
-
-  const dialog = await openSettings(page)
-
-  const colorSchemeSelect = dialog.locator(settingsColorSchemeSelector)
-  await expect(colorSchemeSelect).toBeVisible()
-  await colorSchemeSelect.locator('[data-slot="select-select-trigger"]').click()
-  await page.locator('[data-slot="select-select-item"]').filter({ hasText: "Dark" }).click()
-  await expect(page.locator("html")).toHaveAttribute("data-color-scheme", "dark")
-
-  const fontSelect = dialog.locator(settingsFontSelector)
-  await expect(fontSelect).toBeVisible()
-
-  const initialFontFamily = await page.evaluate(() => {
-    return getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim()
-  })
-
-  const initialSettings = await page.evaluate((key) => {
-    const raw = localStorage.getItem(key)
-    return raw ? JSON.parse(raw) : null
-  }, settingsKey)
-
-  const currentFont =
-    (await fontSelect.locator('[data-slot="select-select-trigger-value"]').textContent())?.trim() ?? ""
-  await fontSelect.locator('[data-slot="select-select-trigger"]').click()
-
-  const fontItems = page.locator('[data-slot="select-select-item"]')
-  expect(await fontItems.count()).toBeGreaterThan(1)
-
-  if (currentFont) {
-    await fontItems.filter({ hasNotText: currentFont }).first().click()
-  }
-  if (!currentFont) {
-    await fontItems.nth(1).click()
-  }
+  await input.click()
+  await input.clear()
+  await input.pressSequentially(next)
+  await expect(input).toHaveValue(next)
 
   await expect
     .poll(async () => {
@@ -230,7 +195,218 @@ test("color scheme and font rehydrate after reload", async ({ page, gotoSession
     })
     .toMatchObject({
       appearance: {
-        font: expect.any(String),
+        mono: next,
+      },
+    })
+
+  const newFontFamily = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim(),
+  )
+  const newUIFamily = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue("--font-family-sans").trim(),
+  )
+  expect(newFontFamily).toContain(next)
+  expect(newFontFamily).not.toBe(initialFontFamily)
+  expect(newUIFamily).toBe(initialUIFamily)
+})
+
+test("typing a UI font with spaces persists and updates CSS variable", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const dialog = await openSettings(page)
+  const input = dialog.locator(settingsUIFontSelector)
+  await expect(input).toBeVisible()
+  await expect(input).toHaveAttribute("placeholder", "System Sans")
+
+  const initialFontFamily = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue("--font-family-sans").trim(),
+  )
+  const initialCodeFamily = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim(),
+  )
+  expect(initialFontFamily).toContain("ui-sans-serif")
+
+  const next = "Test Sans"
+
+  await input.click()
+  await input.clear()
+  await input.pressSequentially(next)
+  await expect(input).toHaveValue(next)
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate((key) => {
+        const raw = localStorage.getItem(key)
+        return raw ? JSON.parse(raw) : null
+      }, settingsKey)
+    })
+    .toMatchObject({
+      appearance: {
+        sans: next,
+      },
+    })
+
+  const newFontFamily = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue("--font-family-sans").trim(),
+  )
+  const newCodeFamily = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim(),
+  )
+  expect(newFontFamily).toContain(next)
+  expect(newFontFamily).not.toBe(initialFontFamily)
+  expect(newCodeFamily).toBe(initialCodeFamily)
+})
+
+test("clearing the code font field restores the default placeholder and stack", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const dialog = await openSettings(page)
+  const input = dialog.locator(settingsCodeFontSelector)
+  await expect(input).toBeVisible()
+
+  await input.click()
+  await input.clear()
+  await input.pressSequentially("Reset Mono")
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate((key) => {
+        const raw = localStorage.getItem(key)
+        return raw ? JSON.parse(raw) : null
+      }, settingsKey)
+    })
+    .toMatchObject({
+      appearance: {
+        mono: "Reset Mono",
+      },
+    })
+
+  await input.clear()
+  await input.press("Space")
+  await expect(input).toHaveValue("")
+  await expect(input).toHaveAttribute("placeholder", "System Mono")
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate((key) => {
+        const raw = localStorage.getItem(key)
+        return raw ? JSON.parse(raw) : null
+      }, settingsKey)
+    })
+    .toMatchObject({
+      appearance: {
+        mono: "",
+      },
+    })
+
+  const fontFamily = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim(),
+  )
+  expect(fontFamily).toContain("ui-monospace")
+  expect(fontFamily).not.toContain("Reset Mono")
+})
+
+test("clearing the UI font field restores the default placeholder and stack", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const dialog = await openSettings(page)
+  const input = dialog.locator(settingsUIFontSelector)
+  await expect(input).toBeVisible()
+
+  await input.click()
+  await input.clear()
+  await input.pressSequentially("Reset Sans")
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate((key) => {
+        const raw = localStorage.getItem(key)
+        return raw ? JSON.parse(raw) : null
+      }, settingsKey)
+    })
+    .toMatchObject({
+      appearance: {
+        sans: "Reset Sans",
+      },
+    })
+
+  await input.clear()
+  await input.press("Space")
+  await expect(input).toHaveValue("")
+  await expect(input).toHaveAttribute("placeholder", "System Sans")
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate((key) => {
+        const raw = localStorage.getItem(key)
+        return raw ? JSON.parse(raw) : null
+      }, settingsKey)
+    })
+    .toMatchObject({
+      appearance: {
+        sans: "",
+      },
+    })
+
+  const fontFamily = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue("--font-family-sans").trim(),
+  )
+  expect(fontFamily).toContain("ui-sans-serif")
+  expect(fontFamily).not.toContain("Reset Sans")
+})
+
+test("color scheme, code font, and UI font rehydrate after reload", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const dialog = await openSettings(page)
+
+  const colorSchemeSelect = dialog.locator(settingsColorSchemeSelector)
+  await expect(colorSchemeSelect).toBeVisible()
+  await colorSchemeSelect.locator('[data-slot="select-select-trigger"]').click()
+  await page.locator('[data-slot="select-select-item"]').filter({ hasText: "Dark" }).click()
+  await expect(page.locator("html")).toHaveAttribute("data-color-scheme", "dark")
+
+  const code = dialog.locator(settingsCodeFontSelector)
+  const ui = dialog.locator(settingsUIFontSelector)
+  await expect(code).toBeVisible()
+  await expect(ui).toBeVisible()
+
+  const initialMono = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim(),
+  )
+  const initialSans = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue("--font-family-sans").trim(),
+  )
+
+  const initialSettings = await page.evaluate((key) => {
+    const raw = localStorage.getItem(key)
+    return raw ? JSON.parse(raw) : null
+  }, settingsKey)
+
+  const mono = initialSettings?.appearance?.mono === "Reload Mono" ? "Reload Mono 2" : "Reload Mono"
+  const sans = initialSettings?.appearance?.sans === "Reload Sans" ? "Reload Sans 2" : "Reload Sans"
+
+  await code.click()
+  await code.clear()
+  await code.pressSequentially(mono)
+  await expect(code).toHaveValue(mono)
+
+  await ui.click()
+  await ui.clear()
+  await ui.pressSequentially(sans)
+  await expect(ui).toHaveValue(sans)
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate((key) => {
+        const raw = localStorage.getItem(key)
+        return raw ? JSON.parse(raw) : null
+      }, settingsKey)
+    })
+    .toMatchObject({
+      appearance: {
+        mono,
+        sans,
       },
     })
 
@@ -239,11 +415,18 @@ test("color scheme and font rehydrate after reload", async ({ page, gotoSession
     return raw ? JSON.parse(raw) : null
   }, settingsKey)
 
-  const updatedFontFamily = await page.evaluate(() => {
-    return getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim()
-  })
-  expect(updatedFontFamily).not.toBe(initialFontFamily)
-  expect(updatedSettings?.appearance?.font).not.toBe(initialSettings?.appearance?.font)
+  const updatedMono = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim(),
+  )
+  const updatedSans = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue("--font-family-sans").trim(),
+  )
+  expect(updatedMono).toContain(mono)
+  expect(updatedMono).not.toBe(initialMono)
+  expect(updatedSans).toContain(sans)
+  expect(updatedSans).not.toBe(initialSans)
+  expect(updatedSettings?.appearance?.mono).toBe(mono)
+  expect(updatedSettings?.appearance?.sans).toBe(sans)
 
   await closeDialog(page, dialog)
   await page.reload()
@@ -259,7 +442,8 @@ test("color scheme and font rehydrate after reload", async ({ page, gotoSession
     })
     .toMatchObject({
       appearance: {
-        font: updatedSettings?.appearance?.font,
+        mono,
+        sans,
       },
     })
 
@@ -270,17 +454,32 @@ test("color scheme and font rehydrate after reload", async ({ page, gotoSession
 
   await expect
     .poll(async () => {
-      return await page.evaluate(() => {
-        return getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim()
-      })
+      return await page.evaluate(() =>
+        getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim(),
+      )
     })
-    .not.toBe(initialFontFamily)
+    .toContain(mono)
 
-  const rehydratedFontFamily = await page.evaluate(() => {
-    return getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim()
-  })
-  expect(rehydratedFontFamily).not.toBe(initialFontFamily)
-  expect(rehydratedSettings?.appearance?.font).toBe(updatedSettings?.appearance?.font)
+  await expect
+    .poll(async () => {
+      return await page.evaluate(() =>
+        getComputedStyle(document.documentElement).getPropertyValue("--font-family-sans").trim(),
+      )
+    })
+    .toContain(sans)
+
+  const rehydratedMono = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim(),
+  )
+  const rehydratedSans = await page.evaluate(() =>
+    getComputedStyle(document.documentElement).getPropertyValue("--font-family-sans").trim(),
+  )
+  expect(rehydratedMono).toContain(mono)
+  expect(rehydratedMono).not.toBe(initialMono)
+  expect(rehydratedSans).toContain(sans)
+  expect(rehydratedSans).not.toBe(initialSans)
+  expect(rehydratedSettings?.appearance?.mono).toBe(mono)
+  expect(rehydratedSettings?.appearance?.sans).toBe(sans)
 })
 
 test("toggling notification agent switch updates localStorage", async ({ page, gotoSession }) => {

packages/app/e2e/sidebar/sidebar-popover-actions.spec.ts

@@ -1,6 +1,16 @@
 import { test, expect } from "../fixtures"
-import { cleanupSession, closeSidebar, hoverSessionItem } from "../actions"
+import {
+  defocus,
+  cleanupSession,
+  cleanupTestProject,
+  closeSidebar,
+  createTestProject,
+  hoverSessionItem,
+  openSidebar,
+  waitSession,
+} from "../actions"
 import { projectSwitchSelector } from "../selectors"
+import { dirSlug } from "../utils"
 
 test("collapsed sidebar popover stays open when archiving a session", async ({ page, slug, sdk, gotoSession }) => {
   const stamp = Date.now()
@@ -37,3 +47,63 @@ test("collapsed sidebar popover stays open when archiving a session", async ({ p
     await cleanupSession({ sdk, sessionID: two.id })
   }
 })
+
+test("open sidebar project popover stays closed after clicking avatar", async ({ page, project }) => {
+  await page.setViewportSize({ width: 1400, height: 800 })
+
+  const other = await createTestProject()
+  const slug = dirSlug(other)
+
+  try {
+    await project.open({ extra: [other] })
+    await openSidebar(page)
+
+    const projectButton = page.locator(projectSwitchSelector(slug)).first()
+    const card = page.locator('[data-component="hover-card-content"]')
+
+    await expect(projectButton).toBeVisible()
+    await projectButton.hover()
+    await expect(card.getByText(/recent sessions/i)).toBeVisible()
+
+    await projectButton.click()
+    await expect(card).toHaveCount(0)
+
+    await waitSession(page, { directory: other })
+    await expect(card).toHaveCount(0)
+  } finally {
+    await cleanupTestProject(other)
+  }
+})
+
+test("open sidebar project switch activates on first tabbed enter", async ({ page, project }) => {
+  await page.setViewportSize({ width: 1400, height: 800 })
+
+  const other = await createTestProject()
+  const slug = dirSlug(other)
+
+  try {
+    await project.open({ extra: [other] })
+    await openSidebar(page)
+    await defocus(page)
+
+    const projectButton = page.locator(projectSwitchSelector(slug)).first()
+
+    await expect(projectButton).toBeVisible()
+
+    let hit = false
+    for (let i = 0; i < 20; i++) {
+      hit = await projectButton.evaluate((el) => {
+        return el.matches(":focus") || !!el.parentElement?.matches(":focus")
+      })
+      if (hit) break
+      await page.keyboard.press("Tab")
+    }
+
+    expect(hit).toBe(true)
+
+    await page.keyboard.press("Enter")
+    await waitSession(page, { directory: other })
+  } finally {
+    await cleanupTestProject(other)
+  }
+})

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

@@ -1,5 +1,5 @@
 import { test, expect } from "../fixtures"
-import { waitTerminalReady } from "../actions"
+import { waitTerminalFocusIdle, waitTerminalReady } from "../actions"
 import { promptSelector, terminalSelector } from "../selectors"
 import { terminalToggleKey } from "../utils"
 
@@ -14,7 +14,7 @@ test("smoke terminal mounts and can create a second tab", async ({ page, gotoSes
     await page.keyboard.press(terminalToggleKey)
   }
 
-  await waitTerminalReady(page, { term: terminals.first() })
+  await waitTerminalFocusIdle(page, { term: terminals.first() })
   await expect(terminals).toHaveCount(1)
 
   // Ghostty captures a lot of keybinds when focused; move focus back

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

@@ -12,35 +12,34 @@ async function open(page: Page) {
   return term
 }
 
-test("terminal reconnects without replacing the pty", async ({ page, withProject }) => {
-  await withProject(async ({ gotoSession }) => {
-    const name = `OPENCODE_E2E_RECONNECT_${Date.now()}`
-    const token = `E2E_RECONNECT_${Date.now()}`
+test("terminal reconnects without replacing the pty", async ({ page, project }) => {
+  await project.open()
+  const name = `OPENCODE_E2E_RECONNECT_${Date.now()}`
+  const token = `E2E_RECONNECT_${Date.now()}`
 
-    await gotoSession()
+  await project.gotoSession()
 
-    const term = await open(page)
-    const id = await term.getAttribute("data-pty-id")
-    if (!id) throw new Error("Active terminal missing data-pty-id")
+  const term = await open(page)
+  const id = await term.getAttribute("data-pty-id")
+  if (!id) throw new Error("Active terminal missing data-pty-id")
 
-    const prev = await terminalConnects(page, { term })
+  const prev = await terminalConnects(page, { term })
 
-    await runTerminal(page, {
-      term,
-      cmd: `export ${name}=${token}; echo ${token}`,
-      token,
-    })
+  await runTerminal(page, {
+    term,
+    cmd: `export ${name}=${token}; echo ${token}`,
+    token,
+  })
 
-    await disconnectTerminal(page, { term })
+  await disconnectTerminal(page, { term })
 
-    await expect.poll(() => terminalConnects(page, { term }), { timeout: 15_000 }).toBeGreaterThan(prev)
-    await expect.poll(() => term.getAttribute("data-pty-id"), { timeout: 5_000 }).toBe(id)
+  await expect.poll(() => terminalConnects(page, { term }), { timeout: 15_000 }).toBeGreaterThan(prev)
+  await expect.poll(() => term.getAttribute("data-pty-id"), { timeout: 5_000 }).toBe(id)
 
-    await runTerminal(page, {
-      term,
-      cmd: `echo $${name}`,
-      token,
-      timeout: 15_000,
-    })
+  await runTerminal(page, {
+    term,
+    cmd: `echo $${name}`,
+    token,
+    timeout: 15_000,
   })
 })

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

@@ -1,7 +1,7 @@
 import type { Page } from "@playwright/test"
 import { runTerminal, waitTerminalReady } from "../actions"
 import { test, expect } from "../fixtures"
-import { terminalSelector } from "../selectors"
+import { dropdownMenuContentSelector, terminalSelector } from "../selectors"
 import { terminalToggleKey, workspacePersistKey } from "../utils"
 
 type State = {
@@ -36,97 +36,130 @@ async function store(page: Page, key: string) {
   }, key)
 }
 
-test("inactive terminal tab buffers persist across tab switches", async ({ page, withProject }) => {
-  await withProject(async ({ directory, gotoSession }) => {
-    const key = workspacePersistKey(directory, "terminal")
-    const one = `E2E_TERM_ONE_${Date.now()}`
-    const two = `E2E_TERM_TWO_${Date.now()}`
-    const tabs = page.locator('#terminal-panel [data-slot="tabs-trigger"]')
-    const first = tabs.filter({ hasText: /Terminal 1/ }).first()
-    const second = tabs.filter({ hasText: /Terminal 2/ }).first()
+test("inactive terminal tab buffers persist across tab switches", async ({ page, project }) => {
+  await project.open()
+  const key = workspacePersistKey(project.directory, "terminal")
+  const one = `E2E_TERM_ONE_${Date.now()}`
+  const two = `E2E_TERM_TWO_${Date.now()}`
+  const tabs = page.locator('#terminal-panel [data-slot="tabs-trigger"]')
+  const first = tabs.filter({ hasText: /Terminal 1/ }).first()
+  const second = tabs.filter({ hasText: /Terminal 2/ }).first()
 
-    await gotoSession()
-    await open(page)
+  await project.gotoSession()
+  await open(page)
 
-    await runTerminal(page, { cmd: `echo ${one}`, token: one })
+  await runTerminal(page, { cmd: `echo ${one}`, token: one })
 
-    await page.getByRole("button", { name: /new terminal/i }).click()
-    await expect(tabs).toHaveCount(2)
+  await page.getByRole("button", { name: /new terminal/i }).click()
+  await expect(tabs).toHaveCount(2)
 
-    await runTerminal(page, { cmd: `echo ${two}`, token: two })
+  await runTerminal(page, { cmd: `echo ${two}`, token: two })
 
-    await first.click()
-    await expect(first).toHaveAttribute("aria-selected", "true")
+  await first.click()
+  await expect(first).toHaveAttribute("aria-selected", "true")
 
-    await expect
-      .poll(
-        async () => {
-          const state = await store(page, key)
-          const first = state?.all.find((item) => item.titleNumber === 1)?.buffer ?? ""
-          const second = state?.all.find((item) => item.titleNumber === 2)?.buffer ?? ""
-          return {
-            first: first.includes(one),
-            second: second.includes(two),
-          }
-        },
-        { timeout: 5_000 },
-      )
-      .toEqual({ first: false, second: true })
+  await expect
+    .poll(
+      async () => {
+        const state = await store(page, key)
+        const first = state?.all.find((item) => item.titleNumber === 1)?.buffer ?? ""
+        const second = state?.all.find((item) => item.titleNumber === 2)?.buffer ?? ""
+        return {
+          first: first.includes(one),
+          second: second.includes(two),
+        }
+      },
+      { timeout: 5_000 },
+    )
+    .toEqual({ first: false, second: true })
 
-    await second.click()
-    await expect(second).toHaveAttribute("aria-selected", "true")
-    await expect
-      .poll(
-        async () => {
-          const state = await store(page, key)
-          const first = state?.all.find((item) => item.titleNumber === 1)?.buffer ?? ""
-          const second = state?.all.find((item) => item.titleNumber === 2)?.buffer ?? ""
-          return {
-            first: first.includes(one),
-            second: second.includes(two),
-          }
-        },
-        { timeout: 5_000 },
-      )
-      .toEqual({ first: true, second: false })
-  })
+  await second.click()
+  await expect(second).toHaveAttribute("aria-selected", "true")
+  await expect
+    .poll(
+      async () => {
+        const state = await store(page, key)
+        const first = state?.all.find((item) => item.titleNumber === 1)?.buffer ?? ""
+        const second = state?.all.find((item) => item.titleNumber === 2)?.buffer ?? ""
+        return {
+          first: first.includes(one),
+          second: second.includes(two),
+        }
+      },
+      { timeout: 5_000 },
+    )
+    .toEqual({ first: true, second: false })
 })
 
-test("closing the active terminal tab falls back to the previous tab", async ({ page, withProject }) => {
-  await withProject(async ({ directory, gotoSession }) => {
-    const key = workspacePersistKey(directory, "terminal")
-    const tabs = page.locator('#terminal-panel [data-slot="tabs-trigger"]')
+test("closing the active terminal tab falls back to the previous tab", async ({ page, project }) => {
+  await project.open()
+  const key = workspacePersistKey(project.directory, "terminal")
+  const tabs = page.locator('#terminal-panel [data-slot="tabs-trigger"]')
 
-    await gotoSession()
-    await open(page)
+  await project.gotoSession()
+  await open(page)
 
-    await page.getByRole("button", { name: /new terminal/i }).click()
-    await expect(tabs).toHaveCount(2)
+  await page.getByRole("button", { name: /new terminal/i }).click()
+  await expect(tabs).toHaveCount(2)
 
-    const second = tabs.filter({ hasText: /Terminal 2/ }).first()
-    await second.click()
-    await expect(second).toHaveAttribute("aria-selected", "true")
+  const second = tabs.filter({ hasText: /Terminal 2/ }).first()
+  await second.click()
+  await expect(second).toHaveAttribute("aria-selected", "true")
 
-    await second.hover()
-    await page
-      .getByRole("button", { name: /close terminal/i })
-      .nth(1)
-      .click({ force: true })
+  await second.hover()
+  await page
+    .getByRole("button", { name: /close terminal/i })
+    .nth(1)
+    .click({ force: true })
 
-    const first = tabs.filter({ hasText: /Terminal 1/ }).first()
-    await expect(tabs).toHaveCount(1)
-    await expect(first).toHaveAttribute("aria-selected", "true")
-    await expect
-      .poll(
-        async () => {
-          const state = await store(page, key)
-          return {
-            count: state?.all.length ?? 0,
-            first: state?.all.some((item) => item.titleNumber === 1) ?? false,
-          }
-        },
-        { timeout: 15_000 },
-      )
-      .toEqual({ count: 1, first: true })
-  })
+  const first = tabs.filter({ hasText: /Terminal 1/ }).first()
+  await expect(tabs).toHaveCount(1)
+  await expect(first).toHaveAttribute("aria-selected", "true")
+  await expect
+    .poll(
+      async () => {
+        const state = await store(page, key)
+        return {
+          count: state?.all.length ?? 0,
+          first: state?.all.some((item) => item.titleNumber === 1) ?? false,
+        }
+      },
+      { timeout: 15_000 },
+    )
+    .toEqual({ count: 1, first: true })
+})
+
+test("terminal tab can be renamed from the context menu", async ({ page, project }) => {
+  await project.open()
+  const key = workspacePersistKey(project.directory, "terminal")
+  const rename = `E2E term ${Date.now()}`
+  const tab = page.locator('#terminal-panel [data-slot="tabs-trigger"]').first()
+
+  await project.gotoSession()
+  await open(page)
+
+  await expect(tab).toContainText(/Terminal 1/)
+  await tab.click({ button: "right" })
+
+  const menu = page.locator(dropdownMenuContentSelector).first()
+  await expect(menu).toBeVisible()
+  await menu.getByRole("menuitem", { name: /^Rename$/i }).click()
+  await expect(menu).toHaveCount(0)
+
+  const input = page.locator('#terminal-panel input[type="text"]').first()
+  await expect(input).toBeVisible()
+  await input.fill(rename)
+  await input.press("Enter")
+
+  await expect(input).toHaveCount(0)
+  await expect(tab).toContainText(rename)
+  await expect
+    .poll(
+      async () => {
+        const state = await store(page, key)
+        return state?.all[0]?.title
+      },
+      { timeout: 5_000 },
+    )
+    .toBe(rename)
 })

packages/app/e2e/utils.ts

@@ -26,21 +26,21 @@ export const serverNamePattern = new RegExp(`(?:${serverNames.map(escape).join("
 export const modKey = process.platform === "darwin" ? "Meta" : "Control"
 export const terminalToggleKey = "Control+Backquote"
 
-export function createSdk(directory?: string) {
-  return createOpencodeClient({ baseUrl: serverUrl, directory, throwOnError: true })
+export function createSdk(directory?: string, baseUrl = serverUrl) {
+  return createOpencodeClient({ baseUrl, directory, throwOnError: true })
 }
 
-export async function resolveDirectory(directory: string) {
-  return createSdk(directory)
+export async function resolveDirectory(directory: string, baseUrl = serverUrl) {
+  return createSdk(directory, baseUrl)
     .path.get()
     .then((x) => x.data?.directory ?? directory)
 }
 
-export async function getWorktree() {
-  const sdk = createSdk()
+export async function getWorktree(baseUrl = serverUrl) {
+  const sdk = createSdk(undefined, baseUrl)
   const result = await sdk.path.get()
   const data = result.data
-  if (!data?.worktree) throw new Error(`Failed to resolve a worktree from ${serverUrl}/path`)
+  if (!data?.worktree) throw new Error(`Failed to resolve a worktree from ${baseUrl}/path`)
   return data.worktree
 }
 

packages/app/index.html

@@ -2,7 +2,7 @@
 <html lang="en" style="background-color: var(--background-base)">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
     <title>OpenCode</title>
     <link rel="icon" type="image/png" href="/favicon-96x96-v3.png" sizes="96x96" />
     <link rel="icon" type="image/svg+xml" href="/favicon-v3.svg" />

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/app",
-  "version": "1.2.25",
+  "version": "1.4.0",
   "description": "",
   "type": "module",
   "exports": {
@@ -15,6 +15,7 @@
     "build": "vite build",
     "serve": "vite preview",
     "test": "bun run test:unit",
+    "test:ci": "mkdir -p .artifacts/unit && bun test --preload ./happydom.ts ./src --reporter=junit --reporter-outfile=.artifacts/unit/junit.xml",
     "test:unit": "bun test --preload ./happydom.ts ./src",
     "test:unit:watch": "bun test --watch --preload ./happydom.ts ./src",
     "test:e2e": "playwright test",
@@ -46,17 +47,20 @@
     "@solid-primitives/active-element": "2.1.3",
     "@solid-primitives/audio": "1.4.2",
     "@solid-primitives/event-bus": "1.1.2",
+    "@solid-primitives/event-listener": "2.4.5",
     "@solid-primitives/i18n": "2.2.1",
     "@solid-primitives/media": "2.3.3",
-    "@solid-primitives/resize-observer": "2.1.3",
+    "@solid-primitives/resize-observer": "2.1.5",
     "@solid-primitives/scroll": "2.1.3",
     "@solid-primitives/storage": "catalog:",
+    "@solid-primitives/timer": "1.4.4",
     "@solid-primitives/websocket": "1.3.1",
     "@solidjs/meta": "catalog:",
     "@solidjs/router": "catalog:",
+    "@tanstack/solid-query": "5.91.4",
     "@thisbeyond/solid-dnd": "0.7.5",
     "diff": "catalog:",
-    "effect": "4.0.0-beta.31",
+    "effect": "catalog:",
     "fuzzysort": "catalog:",
     "ghostty-web": "github:anomalyco/ghostty-web#main",
     "luxon": "catalog:",

packages/app/playwright.config.ts

@@ -7,6 +7,11 @@ const serverPort = process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"
 const command = `bun run dev -- --host 0.0.0.0 --port ${port}`
 const reuse = !process.env.CI
 const workers = Number(process.env.PLAYWRIGHT_WORKERS ?? (process.env.CI ? 5 : 0)) || undefined
+const reporter = [["html", { outputFolder: "e2e/playwright-report", open: "never" }], ["line"]] as const
+
+if (process.env.PLAYWRIGHT_JUNIT_OUTPUT) {
+  reporter.push(["junit", { outputFile: process.env.PLAYWRIGHT_JUNIT_OUTPUT }])
+}
 
 export default defineConfig({
   testDir: "./e2e",
@@ -19,7 +24,7 @@ export default defineConfig({
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers,
-  reporter: [["html", { outputFolder: "e2e/playwright-report", open: "never" }], ["line"]],
+  reporter,
   webServer: {
     command,
     url: baseURL,

packages/app/script/e2e-local.ts

@@ -71,7 +71,7 @@ const serverEnv = {
   OPENCODE_E2E_PROJECT_DIR: repoDir,
   OPENCODE_E2E_SESSION_TITLE: "E2E Session",
   OPENCODE_E2E_MESSAGE: "Seeded for UI e2e",
-  OPENCODE_E2E_MODEL: "opencode/gpt-5-nano",
+  OPENCODE_E2E_MODEL: process.env.OPENCODE_E2E_MODEL ?? "opencode/gpt-5-nano",
   OPENCODE_CLIENT: "app",
   OPENCODE_STRICT_CONFIG_DEPS: "true",
 } satisfies Record<string, string>
@@ -87,7 +87,7 @@ const runnerEnv = {
 
 let seed: ReturnType<typeof Bun.spawn> | undefined
 let runner: ReturnType<typeof Bun.spawn> | undefined
-let server: { stop: () => Promise<void> | void } | undefined
+let server: { stop: (close?: boolean) => Promise<void> | void } | undefined
 let inst: { Instance: { disposeAll: () => Promise<void> | void } } | undefined
 let cleaned = false
 
@@ -100,7 +100,7 @@ const cleanup = async () => {
 
   const jobs = [
     inst?.Instance.disposeAll(),
-    server?.stop(),
+    typeof server?.stop === "function" ? server.stop() : undefined,
     keepSandbox ? undefined : fs.rm(sandbox, { recursive: true, force: true }),
   ].filter(Boolean)
   await Promise.allSettled(jobs)
@@ -158,7 +158,7 @@ try {
 
     const servermod = await import("../../opencode/src/server/server")
     inst = await import("../../opencode/src/project/instance")
-    server = servermod.Server.listen({ port: serverPort, hostname: "127.0.0.1" })
+    server = await servermod.Server.listen({ port: serverPort, hostname: "127.0.0.1" })
     console.log(`opencode server listening on http://127.0.0.1:${serverPort}`)
 
     await waitForHealth(`http://127.0.0.1:${serverPort}/global/health`)

packages/app/src/app.tsx

@@ -6,9 +6,10 @@ import { MarkedProvider } from "@opencode-ai/ui/context/marked"
 import { File } from "@opencode-ai/ui/file"
 import { Font } from "@opencode-ai/ui/font"
 import { Splash } from "@opencode-ai/ui/logo"
-import { ThemeProvider } from "@opencode-ai/ui/theme"
+import { ThemeProvider } from "@opencode-ai/ui/theme/context"
 import { MetaProvider } from "@solidjs/meta"
 import { type BaseRouterProps, Navigate, Route, Router } from "@solidjs/router"
+import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
 import { type Duration, Effect } from "effect"
 import {
   type Component,
@@ -31,12 +32,11 @@ import { FileProvider } from "@/context/file"
 import { GlobalSDKProvider } from "@/context/global-sdk"
 import { GlobalSyncProvider } from "@/context/global-sync"
 import { HighlightsProvider } from "@/context/highlights"
-import { LanguageProvider, useLanguage } from "@/context/language"
+import { LanguageProvider, type Locale, useLanguage } from "@/context/language"
 import { LayoutProvider } from "@/context/layout"
 import { ModelsProvider } from "@/context/models"
 import { NotificationProvider } from "@/context/notification"
 import { PermissionProvider } from "@/context/permission"
-import { usePlatform } from "@/context/platform"
 import { PromptProvider } from "@/context/prompt"
 import { ServerConnection, ServerProvider, serverName, useServer } from "@/context/server"
 import { SettingsProvider } from "@/context/settings"
@@ -46,21 +46,18 @@ import Layout from "@/pages/layout"
 import { ErrorPage } from "./pages/error"
 import { useCheckServerHealth } from "./utils/server-health"
 
-const Home = lazy(() => import("@/pages/home"))
-const Session = lazy(() => import("@/pages/session"))
+const HomeRoute = lazy(() => import("@/pages/home"))
+const loadSession = () => import("@/pages/session")
+const Session = lazy(loadSession)
 const Loading = () => <div class="size-full" />
 
-const HomeRoute = () => (
-  <Suspense fallback={<Loading />}>
-    <Home />
-  </Suspense>
-)
+if (typeof location === "object" && /\/session(?:\/|$)/.test(location.pathname)) {
+  void loadSession()
+}
 
 const SessionRoute = () => (
   <SessionProviders>
-    <Suspense fallback={<Loading />}>
-      <Session />
-    </Suspense>
+    <Session />
   </SessionProviders>
 )
 
@@ -84,9 +81,9 @@ declare global {
   }
 }
 
-function MarkedProviderWithNativeParser(props: ParentProps) {
-  const platform = usePlatform()
-  return <MarkedProvider nativeParser={platform.parseMarkdown}>{props.children}</MarkedProvider>
+function QueryProvider(props: ParentProps) {
+  const client = new QueryClient()
+  return <QueryClientProvider client={client}>{props.children}</QueryClientProvider>
 }
 
 function AppShellProviders(props: ParentProps) {
@@ -124,13 +121,15 @@ function SessionProviders(props: ParentProps) {
 function RouterRoot(props: ParentProps<{ appChildren?: JSX.Element }>) {
   return (
     <AppShellProviders>
-      {props.appChildren}
-      {props.children}
+      <Suspense fallback={<Loading />}>
+        {props.appChildren}
+        {props.children}
+      </Suspense>
     </AppShellProviders>
   )
 }
 
-export function AppBaseProviders(props: ParentProps) {
+export function AppBaseProviders(props: ParentProps<{ locale?: Locale }>) {
   return (
     <MetaProvider>
       <Font />
@@ -139,14 +138,16 @@ export function AppBaseProviders(props: ParentProps) {
           void window.api?.setTitlebar?.({ mode })
         }}
       >
-        <LanguageProvider>
+        <LanguageProvider locale={props.locale}>
           <UiI18nBridge>
             <ErrorBoundary fallback={(error) => <ErrorPage error={error} />}>
-              <DialogProvider>
-                <MarkedProviderWithNativeParser>
-                  <FileComponentProvider component={File}>{props.children}</FileComponentProvider>
-                </MarkedProviderWithNativeParser>
-              </DialogProvider>
+              <QueryProvider>
+                <DialogProvider>
+                  <MarkedProvider>
+                    <FileComponentProvider component={File}>{props.children}</FileComponentProvider>
+                  </MarkedProvider>
+                </DialogProvider>
+              </QueryProvider>
             </ErrorBoundary>
           </UiI18nBridge>
         </LanguageProvider>
@@ -182,7 +183,7 @@ function ConnectionGate(props: ParentProps<{ disableHealthCheck?: boolean }>) {
           }
         }).pipe(
           effectMinDuration(checkMode() === "blocking" ? "1.2 seconds" : 0),
-          Effect.timeoutOrElse({ duration: "10 seconds", onTimeout: () => Effect.succeed(false) }),
+          Effect.timeoutOrElse({ duration: "10 seconds", orElse: () => Effect.succeed(false) }),
           Effect.ensuring(Effect.sync(() => setCheckMode("background"))),
           Effect.runPromise,
         ),
@@ -265,6 +266,15 @@ function ConnectionError(props: { onRetry?: () => void; onServerSelected?: (key:
   )
 }
 
+function ServerKey(props: ParentProps) {
+  const server = useServer()
+  return (
+    <Show when={server.key} keyed>
+      {props.children}
+    </Show>
+  )
+}
+
 export function AppInterface(props: {
   children?: JSX.Element
   defaultServer: ServerConnection.Key
@@ -273,22 +283,28 @@ export function AppInterface(props: {
   disableHealthCheck?: boolean
 }) {
   return (
-    <ServerProvider defaultServer={props.defaultServer} servers={props.servers}>
+    <ServerProvider
+      defaultServer={props.defaultServer}
+      disableHealthCheck={props.disableHealthCheck}
+      servers={props.servers}
+    >
       <ConnectionGate disableHealthCheck={props.disableHealthCheck}>
-        <GlobalSDKProvider>
-          <GlobalSyncProvider>
-            <Dynamic
-              component={props.router ?? Router}
-              root={(routerProps) => <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>}
-            >
-              <Route path="/" component={HomeRoute} />
-              <Route path="/:dir" component={DirectoryLayout}>
-                <Route path="/" component={SessionIndexRoute} />
-                <Route path="/session/:id?" component={SessionRoute} />
-              </Route>
-            </Dynamic>
-          </GlobalSyncProvider>
-        </GlobalSDKProvider>
+        <ServerKey>
+          <GlobalSDKProvider>
+            <GlobalSyncProvider>
+              <Dynamic
+                component={props.router ?? Router}
+                root={(routerProps) => <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>}
+              >
+                <Route path="/" component={HomeRoute} />
+                <Route path="/:dir" component={DirectoryLayout}>
+                  <Route path="/" component={SessionIndexRoute} />
+                  <Route path="/session/:id?" component={SessionRoute} />
+                </Route>
+              </Dynamic>
+            </GlobalSyncProvider>
+          </GlobalSDKProvider>
+        </ServerKey>
       </ConnectionGate>
     </ServerProvider>
   )

packages/app/src/components/debug-bar.tsx

@@ -1,6 +1,7 @@
 import { useIsRouting, useLocation } from "@solidjs/router"
 import { batch, createEffect, onCleanup, onMount } from "solid-js"
 import { createStore } from "solid-js/store"
+import { makeEventListener } from "@solid-primitives/event-listener"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useLanguage } from "@/context/language"
 
@@ -55,7 +56,7 @@ function Cell(props: { bad?: boolean; dim?: boolean; label: string; tip: string;
     <Tooltip value={props.tip} placement="top">
       <div
         classList={{
-          "flex min-h-[42px] w-full min-w-0 flex-col items-center justify-center rounded-[8px] bg-white/5 px-0.5 py-1 text-center": true,
+          "flex min-h-[42px] w-full min-w-0 flex-col items-center justify-center rounded-[8px] px-0.5 py-1 text-center": true,
           "col-span-2": !!props.wide,
         }}
       >
@@ -349,13 +350,12 @@ export function DebugBar() {
 
     syncHeap()
     start()
-    document.addEventListener("visibilitychange", vis)
+    makeEventListener(document, "visibilitychange", vis)
 
     onCleanup(() => {
       if (one !== 0) cancelAnimationFrame(one)
       if (two !== 0) cancelAnimationFrame(two)
       stop()
-      document.removeEventListener("visibilitychange", vis)
       for (const ob of obs) ob.disconnect()
     })
   })
@@ -363,11 +363,7 @@ export function DebugBar() {
   return (
     <aside
       aria-label={language.t("debugBar.ariaLabel")}
-      class="pointer-events-auto fixed bottom-3 right-3 z-50 w-[308px] max-w-[calc(100vw-1.5rem)] overflow-hidden rounded-xl border p-0.5 text-text-on-interactive-base shadow-[var(--shadow-lg-border-base)] sm:bottom-4 sm:right-4 sm:w-[324px]"
-      style={{
-        "background-color": "color-mix(in srgb, var(--icon-interactive-base) 42%, black)",
-        "border-color": "color-mix(in srgb, white 14%, transparent)",
-      }}
+      class="pointer-events-auto fixed bottom-3 right-3 z-50 w-[308px] max-w-[calc(100vw-1.5rem)] overflow-hidden rounded-xl border border-border-base bg-surface-raised-stronger-non-alpha p-0.5 text-text-strong shadow-[var(--shadow-lg-border-base)] sm:bottom-4 sm:right-4 sm:w-[324px]"
     >
       <div class="grid grid-cols-5 gap-px font-mono">
         <Cell

packages/app/src/components/dialog-connect-provider.tsx

@@ -1,4 +1,4 @@
-import type { ProviderAuthAuthorization } from "@opencode-ai/sdk/v2/client"
+import type { ProviderAuthAuthorization, ProviderAuthMethod } from "@opencode-ai/sdk/v2/client"
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
@@ -9,22 +9,26 @@ import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { showToast } from "@opencode-ai/ui/toast"
-import { createMemo, Match, onCleanup, onMount, Switch } from "solid-js"
+import { createEffect, createMemo, createResource, Match, onCleanup, onMount, Switch } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { Link } from "@/components/link"
-import { useLanguage } from "@/context/language"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { useGlobalSync } from "@/context/global-sync"
-import { usePlatform } from "@/context/platform"
-import { DialogSelectModel } from "./dialog-select-model"
-import { DialogSelectProvider } from "./dialog-select-provider"
+import { useLanguage } from "@/context/language"
+import { useProviders } from "@/hooks/use-providers"
 
 export function DialogConnectProvider(props: { provider: string }) {
   const dialog = useDialog()
   const globalSync = useGlobalSync()
   const globalSDK = useGlobalSDK()
-  const platform = usePlatform()
   const language = useLanguage()
+  const providers = useProviders()
+
+  const all = () => {
+    void import("./dialog-select-provider").then((x) => {
+      dialog.show(() => <x.DialogSelectProvider />)
+    })
+  }
 
   const alive = { value: true }
   const timer = { current: undefined as ReturnType<typeof setTimeout> | undefined }
@@ -36,26 +40,41 @@ export function DialogConnectProvider(props: { provider: string }) {
     timer.current = undefined
   })
 
-  const provider = createMemo(() => globalSync.data.provider.all.find((x) => x.id === props.provider)!)
-  const methods = createMemo(
+  const provider = createMemo(
     () =>
-      globalSync.data.provider_auth[props.provider] ?? [
-        {
-          type: "api",
-          label: language.t("provider.connect.method.apiKey"),
-        },
-      ],
+      providers.all().find((x) => x.id === props.provider) ??
+      globalSync.data.provider.all.find((x) => x.id === props.provider)!,
   )
+  const fallback = createMemo<ProviderAuthMethod[]>(() => [
+    {
+      type: "api" as const,
+      label: language.t("provider.connect.method.apiKey"),
+    },
+  ])
+  const [auth] = createResource(
+    () => props.provider,
+    async () => {
+      const cached = globalSync.data.provider_auth[props.provider]
+      if (cached) return cached
+      const res = await globalSDK.client.provider.auth()
+      if (!alive.value) return fallback()
+      globalSync.set("provider_auth", res.data ?? {})
+      return res.data?.[props.provider] ?? fallback()
+    },
+  )
+  const loading = createMemo(() => auth.loading && !globalSync.data.provider_auth[props.provider])
+  const methods = createMemo(() => auth.latest ?? globalSync.data.provider_auth[props.provider] ?? fallback())
   const [store, setStore] = createStore({
     methodIndex: undefined as undefined | number,
     authorization: undefined as undefined | ProviderAuthAuthorization,
-    state: "pending" as undefined | "pending" | "complete" | "error",
+    state: "pending" as undefined | "pending" | "complete" | "error" | "prompt",
     error: undefined as string | undefined,
   })
 
   type Action =
     | { type: "method.select"; index: number }
     | { type: "method.reset" }
+    | { type: "auth.prompt" }
     | { type: "auth.pending" }
     | { type: "auth.complete"; authorization: ProviderAuthAuthorization }
     | { type: "auth.error"; error: string }
@@ -77,6 +96,11 @@ export function DialogConnectProvider(props: { provider: string }) {
           draft.error = undefined
           return
         }
+        if (action.type === "auth.prompt") {
+          draft.state = "prompt"
+          draft.error = undefined
+          return
+        }
         if (action.type === "auth.pending") {
           draft.state = "pending"
           draft.error = undefined
@@ -120,7 +144,7 @@ export function DialogConnectProvider(props: { provider: string }) {
     return fallback
   }
 
-  async function selectMethod(index: number) {
+  async function selectMethod(index: number, inputs?: Record<string, string>) {
     if (timer.current !== undefined) {
       clearTimeout(timer.current)
       timer.current = undefined
@@ -130,6 +154,10 @@ export function DialogConnectProvider(props: { provider: string }) {
     dispatch({ type: "method.select", index })
 
     if (method.type === "oauth") {
+      if (method.prompts?.length && !inputs) {
+        dispatch({ type: "auth.prompt" })
+        return
+      }
       dispatch({ type: "auth.pending" })
       const start = Date.now()
       await globalSDK.client.provider.oauth
@@ -137,6 +165,7 @@ export function DialogConnectProvider(props: { provider: string }) {
           {
             providerID: props.provider,
             method: index,
+            inputs,
           },
           { throwOnError: true },
         )
@@ -163,6 +192,126 @@ export function DialogConnectProvider(props: { provider: string }) {
     }
   }
 
+  function OAuthPromptsView() {
+    const [formStore, setFormStore] = createStore({
+      value: {} as Record<string, string>,
+      index: 0,
+    })
+
+    const prompts = createMemo<NonNullable<ProviderAuthMethod["prompts"]>>(() => {
+      const value = method()
+      if (value?.type !== "oauth") return []
+      return value.prompts ?? []
+    })
+    const matches = (prompt: NonNullable<ReturnType<typeof prompts>[number]>, value: Record<string, string>) => {
+      if (!prompt.when) return true
+      const actual = value[prompt.when.key]
+      if (actual === undefined) return false
+      return prompt.when.op === "eq" ? actual === prompt.when.value : actual !== prompt.when.value
+    }
+    const current = createMemo(() => {
+      const all = prompts()
+      const index = all.findIndex((prompt, index) => index >= formStore.index && matches(prompt, formStore.value))
+      if (index === -1) return
+      return {
+        index,
+        prompt: all[index],
+      }
+    })
+    const valid = createMemo(() => {
+      const item = current()
+      if (!item || item.prompt.type !== "text") return false
+      const value = formStore.value[item.prompt.key] ?? ""
+      return value.trim().length > 0
+    })
+
+    async function next(index: number, value: Record<string, string>) {
+      if (store.methodIndex === undefined) return
+      const next = prompts().findIndex((prompt, i) => i > index && matches(prompt, value))
+      if (next !== -1) {
+        setFormStore("index", next)
+        return
+      }
+      await selectMethod(store.methodIndex, value)
+    }
+
+    async function handleSubmit(e: SubmitEvent) {
+      e.preventDefault()
+      const item = current()
+      if (!item || item.prompt.type !== "text") return
+      if (!valid()) return
+      await next(item.index, formStore.value)
+    }
+
+    const item = () => current()
+    const text = createMemo(() => {
+      const prompt = item()?.prompt
+      if (!prompt || prompt.type !== "text") return
+      return prompt
+    })
+    const select = createMemo(() => {
+      const prompt = item()?.prompt
+      if (!prompt || prompt.type !== "select") return
+      return prompt
+    })
+
+    return (
+      <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
+        <Switch>
+          <Match when={item()?.prompt.type === "text"}>
+            <TextField
+              type="text"
+              label={text()?.message ?? ""}
+              placeholder={text()?.placeholder}
+              value={text() ? (formStore.value[text()!.key] ?? "") : ""}
+              onChange={(value) => {
+                const prompt = text()
+                if (!prompt) return
+                setFormStore("value", prompt.key, value)
+              }}
+            />
+            <Button class="w-auto" type="submit" size="large" variant="primary" disabled={!valid()}>
+              {language.t("common.continue")}
+            </Button>
+          </Match>
+          <Match when={item()?.prompt.type === "select"}>
+            <div class="w-full flex flex-col gap-1.5">
+              <div class="text-14-regular text-text-base">{select()?.message}</div>
+              <div>
+                <List
+                  items={select()?.options ?? []}
+                  key={(x) => x.value}
+                  current={select()?.options.find((x) => x.value === formStore.value[select()!.key])}
+                  onSelect={(value) => {
+                    if (!value) return
+                    const prompt = select()
+                    if (!prompt) return
+                    const nextValue = {
+                      ...formStore.value,
+                      [prompt.key]: value.value,
+                    }
+                    setFormStore("value", prompt.key, value.value)
+                    void next(item()!.index, nextValue)
+                  }}
+                >
+                  {(option) => (
+                    <div class="w-full flex items-center gap-x-2">
+                      <div class="w-4 h-2 rounded-[1px] bg-input-base shadow-xs-border-base flex items-center justify-center">
+                        <div class="w-2.5 h-0.5 ml-0 bg-icon-strong-base hidden" data-slot="list-item-extra-icon" />
+                      </div>
+                      <span>{option.label}</span>
+                      <span class="text-14-regular text-text-weak">{option.hint}</span>
+                    </div>
+                  )}
+                </List>
+              </div>
+            </div>
+          </Match>
+        </Switch>
+      </form>
+    )
+  }
+
   let listRef: ListRef | undefined
   function handleKey(e: KeyboardEvent) {
     if (e.key === "Enter" && e.target instanceof HTMLInputElement) {
@@ -172,8 +321,12 @@ export function DialogConnectProvider(props: { provider: string }) {
     listRef?.onKeyDown(e)
   }
 
-  onMount(() => {
+  let auto = false
+  createEffect(() => {
+    if (auto) return
+    if (loading()) return
     if (methods().length === 1) {
+      auto = true
       selectMethod(0)
     }
   })
@@ -191,7 +344,7 @@ export function DialogConnectProvider(props: { provider: string }) {
 
   function goBack() {
     if (methods().length === 1) {
-      dialog.show(() => <DialogSelectProvider />)
+      all()
       return
     }
     if (store.authorization) {
@@ -202,7 +355,7 @@ export function DialogConnectProvider(props: { provider: string }) {
       dispatch({ type: "method.reset" })
       return
     }
-    dialog.show(() => <DialogSelectProvider />)
+    all()
   }
 
   function MethodSelection() {
@@ -301,7 +454,7 @@ export function DialogConnectProvider(props: { provider: string }) {
             error={formStore.error}
           />
           <Button class="w-auto" type="submit" size="large" variant="primary">
-            {language.t("common.submit")}
+            {language.t("common.continue")}
           </Button>
         </form>
       </div>
@@ -314,12 +467,6 @@ export function DialogConnectProvider(props: { provider: string }) {
       error: undefined as string | undefined,
     })
 
-    onMount(() => {
-      if (store.authorization?.method === "code" && store.authorization?.url) {
-        platform.openLink(store.authorization.url)
-      }
-    })
-
     async function handleSubmit(e: SubmitEvent) {
       e.preventDefault()
 
@@ -368,7 +515,7 @@ export function DialogConnectProvider(props: { provider: string }) {
             error={formStore.error}
           />
           <Button class="w-auto" type="submit" size="large" variant="primary">
-            {language.t("common.submit")}
+            {language.t("common.continue")}
           </Button>
         </form>
       </div>
@@ -386,10 +533,6 @@ export function DialogConnectProvider(props: { provider: string }) {
 
     onMount(() => {
       void (async () => {
-        if (store.authorization?.url) {
-          platform.openLink(store.authorization.url)
-        }
-
         const result = await globalSDK.client.provider.oauth
           .callback({
             providerID: props.provider,
@@ -459,6 +602,14 @@ export function DialogConnectProvider(props: { provider: string }) {
         <div class="px-2.5 pb-10 flex flex-col gap-6">
           <div onKeyDown={handleKey} tabIndex={0} autofocus={store.methodIndex === undefined ? true : undefined}>
             <Switch>
+              <Match when={loading()}>
+                <div class="text-14-regular text-text-base">
+                  <div class="flex items-center gap-x-2">
+                    <Spinner />
+                    <span>{language.t("provider.connect.status.inProgress")}</span>
+                  </div>
+                </div>
+              </Match>
               <Match when={store.methodIndex === undefined}>
                 <MethodSelection />
               </Match>
@@ -470,6 +621,9 @@ export function DialogConnectProvider(props: { provider: string }) {
                   </div>
                 </div>
               </Match>
+              <Match when={store.state === "prompt"}>
+                <OAuthPromptsView />
+              </Match>
               <Match when={store.state === "error"}>
                 <div class="text-14-regular text-text-base">
                   <div class="flex items-center gap-x-2">

packages/app/src/components/dialog-custom-provider-form.ts

@@ -34,7 +34,6 @@ export type FormState = {
   apiKey: string
   models: ModelRow[]
   headers: HeaderRow[]
-  saving: boolean
   err: {
     providerID?: string
     name?: string

packages/app/src/components/dialog-custom-provider.test.ts

@@ -16,7 +16,6 @@ describe("validateCustomProvider", () => {
           { row: "h0", key: " X-Test ", value: " enabled ", err: {} },
           { row: "h1", key: "", value: "", err: {} },
         ],
-        saving: false,
         err: {},
       },
       t,
@@ -60,7 +59,6 @@ describe("validateCustomProvider", () => {
           { row: "h0", key: "Authorization", value: "one", err: {} },
           { row: "h1", key: "authorization", value: "two", err: {} },
         ],
-        saving: false,
         err: {},
       },
       t,

packages/app/src/components/dialog-custom-provider.tsx

@@ -3,6 +3,7 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { useMutation } from "@tanstack/solid-query"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { showToast } from "@opencode-ai/ui/toast"
 import { batch, For } from "solid-js"
@@ -31,7 +32,6 @@ export function DialogCustomProvider(props: Props) {
     apiKey: "",
     models: [modelRow()],
     headers: [headerRow()],
-    saving: false,
     err: {},
   })
 
@@ -116,48 +116,49 @@ export function DialogCustomProvider(props: Props) {
     return output.result
   }
 
-  const save = async (e: SubmitEvent) => {
-    e.preventDefault()
-    if (form.saving) return
+  const saveMutation = useMutation(() => ({
+    mutationFn: async (result: NonNullable<ReturnType<typeof validate>>) => {
+      const disabledProviders = globalSync.data.config.disabled_providers ?? []
+      const nextDisabled = disabledProviders.filter((id) => id !== result.providerID)
 
-    const result = validate()
-    if (!result) return
-
-    setForm("saving", true)
-
-    const disabledProviders = globalSync.data.config.disabled_providers ?? []
-    const nextDisabled = disabledProviders.filter((id) => id !== result.providerID)
-
-    const auth = result.key
-      ? globalSDK.client.auth.set({
+      if (result.key) {
+        await globalSDK.client.auth.set({
           providerID: result.providerID,
           auth: {
             type: "api",
             key: result.key,
           },
         })
-      : Promise.resolve()
+      }
 
-    auth
-      .then(() =>
-        globalSync.updateConfig({ provider: { [result.providerID]: result.config }, disabled_providers: nextDisabled }),
-      )
-      .then(() => {
-        dialog.close()
-        showToast({
-          variant: "success",
-          icon: "circle-check",
-          title: language.t("provider.connect.toast.connected.title", { provider: result.name }),
-          description: language.t("provider.connect.toast.connected.description", { provider: result.name }),
-        })
+      await globalSync.updateConfig({
+        provider: { [result.providerID]: result.config },
+        disabled_providers: nextDisabled,
       })
-      .catch((err: unknown) => {
-        const message = err instanceof Error ? err.message : String(err)
-        showToast({ title: language.t("common.requestFailed"), description: message })
-      })
-      .finally(() => {
-        setForm("saving", false)
+      return result
+    },
+    onSuccess: (result) => {
+      dialog.close()
+      showToast({
+        variant: "success",
+        icon: "circle-check",
+        title: language.t("provider.connect.toast.connected.title", { provider: result.name }),
+        description: language.t("provider.connect.toast.connected.description", { provider: result.name }),
       })
+    },
+    onError: (err) => {
+      const message = err instanceof Error ? err.message : String(err)
+      showToast({ title: language.t("common.requestFailed"), description: message })
+    },
+  }))
+
+  const save = (e: SubmitEvent) => {
+    e.preventDefault()
+    if (saveMutation.isPending) return
+
+    const result = validate()
+    if (!result) return
+    saveMutation.mutate(result)
   }
 
   return (
@@ -312,8 +313,14 @@ export function DialogCustomProvider(props: Props) {
             </Button>
           </div>
 
-          <Button class="w-auto self-start" type="submit" size="large" variant="primary" disabled={form.saving}>
-            {form.saving ? language.t("common.saving") : language.t("common.submit")}
+          <Button
+            class="w-auto self-start"
+            type="submit"
+            size="large"
+            variant="primary"
+            disabled={saveMutation.isPending}
+          >
+            {saveMutation.isPending ? language.t("common.saving") : language.t("common.submit")}
           </Button>
         </form>
       </div>

packages/app/src/components/dialog-edit-project.tsx

@@ -2,6 +2,7 @@ import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { TextField } from "@opencode-ai/ui/text-field"
+import { useMutation } from "@tanstack/solid-query"
 import { Icon } from "@opencode-ai/ui/icon"
 import { createMemo, For, Show } from "solid-js"
 import { createStore } from "solid-js/store"
@@ -28,7 +29,6 @@ export function DialogEditProject(props: { project: LocalProject }) {
     color: props.project.icon?.color || "pink",
     iconUrl: props.project.icon?.override || "",
     startup: props.project.commands?.start ?? "",
-    saving: false,
     dragOver: false,
     iconHover: false,
   })
@@ -71,38 +71,37 @@ export function DialogEditProject(props: { project: LocalProject }) {
     setStore("iconUrl", "")
   }
 
-  async function handleSubmit(e: SubmitEvent) {
-    e.preventDefault()
+  const saveMutation = useMutation(() => ({
+    mutationFn: async () => {
+      const name = store.name.trim() === folderName() ? "" : store.name.trim()
+      const start = store.startup.trim()
 
-    await Promise.resolve()
-      .then(async () => {
-        setStore("saving", true)
-        const name = store.name.trim() === folderName() ? "" : store.name.trim()
-        const start = store.startup.trim()
-
-        if (props.project.id && props.project.id !== "global") {
-          await globalSDK.client.project.update({
-            projectID: props.project.id,
-            directory: props.project.worktree,
-            name,
-            icon: { color: store.color, override: store.iconUrl },
-            commands: { start },
-          })
-          globalSync.project.icon(props.project.worktree, store.iconUrl || undefined)
-          dialog.close()
-          return
-        }
-
-        globalSync.project.meta(props.project.worktree, {
+      if (props.project.id && props.project.id !== "global") {
+        await globalSDK.client.project.update({
+          projectID: props.project.id,
+          directory: props.project.worktree,
           name,
-          icon: { color: store.color, override: store.iconUrl || undefined },
-          commands: { start: start || undefined },
+          icon: { color: store.color, override: store.iconUrl },
+          commands: { start },
         })
+        globalSync.project.icon(props.project.worktree, store.iconUrl || undefined)
         dialog.close()
+        return
+      }
+
+      globalSync.project.meta(props.project.worktree, {
+        name,
+        icon: { color: store.color, override: store.iconUrl || undefined },
+        commands: { start: start || undefined },
       })
-      .finally(() => {
-        setStore("saving", false)
-      })
+      dialog.close()
+    },
+  }))
+
+  function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    if (saveMutation.isPending) return
+    saveMutation.mutate()
   }
 
   return (
@@ -246,8 +245,8 @@ export function DialogEditProject(props: { project: LocalProject }) {
           <Button type="button" variant="ghost" size="large" onClick={() => dialog.close()}>
             {language.t("common.cancel")}
           </Button>
-          <Button type="submit" variant="primary" size="large" disabled={store.saving}>
-            {store.saving ? language.t("common.saving") : language.t("common.save")}
+          <Button type="submit" variant="primary" size="large" disabled={saveMutation.isPending}>
+            {saveMutation.isPending ? language.t("common.saving") : language.t("common.save")}
           </Button>
         </div>
       </form>

packages/app/src/components/dialog-fork.tsx

@@ -66,6 +66,7 @@ export const DialogFork: Component = () => {
       directory: sdk.directory,
       attachmentName: language.t("common.attachment"),
     })
+    const dir = base64Encode(sdk.directory)
 
     sdk.client.session
       .fork({ sessionID, messageID: item.id })
@@ -75,10 +76,8 @@ export const DialogFork: Component = () => {
           return
         }
         dialog.close()
-        navigate(`/${base64Encode(sdk.directory)}/session/${forked.data.id}`)
-        requestAnimationFrame(() => {
-          prompt.set(restored)
-        })
+        prompt.set(restored, undefined, { dir, id: forked.data.id })
+        navigate(`/${dir}/session/${forked.data.id}`)
       })
       .catch((err: unknown) => {
         const message = err instanceof Error ? err.message : String(err)

packages/app/src/components/dialog-select-mcp.tsx

@@ -1,9 +1,12 @@
-import { Component, createMemo, createSignal, Show } from "solid-js"
+import { useMutation } from "@tanstack/solid-query"
+import { Component, createEffect, createMemo, on, Show } from "solid-js"
+import { createStore } from "solid-js/store"
 import { useSync } from "@/context/sync"
 import { useSDK } from "@/context/sdk"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { Switch } from "@opencode-ai/ui/switch"
+import { showToast } from "@opencode-ai/ui/toast"
 import { useLanguage } from "@/context/language"
 
 const statusLabels = {
@@ -17,7 +20,48 @@ export const DialogSelectMcp: Component = () => {
   const sync = useSync()
   const sdk = useSDK()
   const language = useLanguage()
-  const [loading, setLoading] = createSignal<string | null>(null)
+  const [state, setState] = createStore({
+    done: false,
+    loading: false,
+  })
+
+  createEffect(
+    on(
+      () => sync.data.mcp_ready,
+      (ready, prev) => {
+        if (!ready && prev) setState("done", false)
+      },
+      { defer: true },
+    ),
+  )
+
+  createEffect(() => {
+    if (state.done || state.loading) return
+    if (sync.data.mcp_ready) {
+      setState("done", true)
+      return
+    }
+
+    setState("loading", true)
+    void sdk.client.mcp
+      .status()
+      .then((result) => {
+        sync.set("mcp", result.data ?? {})
+        sync.set("mcp_ready", true)
+        setState("done", true)
+      })
+      .catch((err) => {
+        setState("done", true)
+        showToast({
+          variant: "error",
+          title: language.t("common.requestFailed"),
+          description: err instanceof Error ? err.message : String(err),
+        })
+      })
+      .finally(() => {
+        setState("loading", false)
+      })
+  })
 
   const items = createMemo(() =>
     Object.entries(sync.data.mcp ?? {})
@@ -25,10 +69,8 @@ export const DialogSelectMcp: Component = () => {
       .sort((a, b) => a.name.localeCompare(b.name)),
   )
 
-  const toggle = async (name: string) => {
-    if (loading()) return
-    setLoading(name)
-    try {
+  const toggle = useMutation(() => ({
+    mutationFn: async (name: string) => {
       const status = sync.data.mcp[name]
       if (status?.status === "connected") {
         await sdk.client.mcp.disconnect({ name })
@@ -38,10 +80,8 @@ export const DialogSelectMcp: Component = () => {
 
       const result = await sdk.client.mcp.status()
       if (result.data) sync.set("mcp", result.data)
-    } finally {
-      setLoading(null)
-    }
-  }
+    },
+  }))
 
   const enabledCount = createMemo(() => items().filter((i) => i.status === "connected").length)
   const totalCount = createMemo(() => items().length)
@@ -59,7 +99,8 @@ export const DialogSelectMcp: Component = () => {
         filterKeys={["name", "status"]}
         sortBy={(a, b) => a.name.localeCompare(b.name)}
         onSelect={(x) => {
-          if (x) toggle(x.name)
+          if (!x || toggle.isPending) return
+          toggle.mutate(x.name)
         }}
       >
         {(i) => {
@@ -83,7 +124,7 @@ export const DialogSelectMcp: Component = () => {
                   <Show when={statusLabel()}>
                     <span class="text-11-regular text-text-weaker">{statusLabel()}</span>
                   </Show>
-                  <Show when={loading() === i.name}>
+                  <Show when={toggle.isPending && toggle.variables === i.name}>
                     <span class="text-11-regular text-text-weak">{language.t("common.loading.ellipsis")}</span>
                   </Show>
                 </div>
@@ -92,7 +133,14 @@ export const DialogSelectMcp: Component = () => {
                 </Show>
               </div>
               <div onClick={(e) => e.stopPropagation()}>
-                <Switch checked={enabled()} disabled={loading() === i.name} onChange={() => toggle(i.name)} />
+                <Switch
+                  checked={enabled()}
+                  disabled={toggle.isPending && toggle.variables === i.name}
+                  onChange={() => {
+                    if (toggle.isPending) return
+                    toggle.mutate(i.name)
+                  }}
+                />
               </div>
             </div>
           )

packages/app/src/components/dialog-select-model-unpaid.tsx

@@ -8,17 +8,29 @@ import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { type Component, Show } from "solid-js"
 import { useLocal } from "@/context/local"
 import { popularProviders, useProviders } from "@/hooks/use-providers"
-import { DialogConnectProvider } from "./dialog-connect-provider"
-import { DialogSelectProvider } from "./dialog-select-provider"
 import { ModelTooltip } from "./model-tooltip"
 import { useLanguage } from "@/context/language"
 
-export const DialogSelectModelUnpaid: Component = () => {
-  const local = useLocal()
+type ModelState = ReturnType<typeof useLocal>["model"]
+
+export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props) => {
+  const model = props.model ?? useLocal().model
   const dialog = useDialog()
   const providers = useProviders()
   const language = useLanguage()
 
+  const connect = (provider: string) => {
+    void import("./dialog-connect-provider").then((x) => {
+      dialog.show(() => <x.DialogConnectProvider provider={provider} />)
+    })
+  }
+
+  const all = () => {
+    void import("./dialog-select-provider").then((x) => {
+      dialog.show(() => <x.DialogSelectProvider />)
+    })
+  }
+
   let listRef: ListRef | undefined
   const handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === "Escape") return
@@ -35,8 +47,8 @@ export const DialogSelectModelUnpaid: Component = () => {
         <List
           class="[&_[data-slot=list-scroll]]:overflow-visible"
           ref={(ref) => (listRef = ref)}
-          items={local.model.list}
-          current={local.model.current()}
+          items={model.list}
+          current={model.current()}
           key={(x) => `${x.provider.id}:${x.id}`}
           itemWrapper={(item, node) => (
             <Tooltip
@@ -55,7 +67,7 @@ export const DialogSelectModelUnpaid: Component = () => {
             </Tooltip>
           )}
           onSelect={(x) => {
-            local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
+            model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
               recent: true,
             })
             dialog.close()
@@ -89,7 +101,7 @@ export const DialogSelectModelUnpaid: Component = () => {
                 }}
                 onSelect={(x) => {
                   if (!x) return
-                  dialog.show(() => <DialogConnectProvider provider={x.id} />)
+                  connect(x.id)
                 }}
               >
                 {(i) => (
@@ -120,9 +132,7 @@ export const DialogSelectModelUnpaid: Component = () => {
                 variant="ghost"
                 class="w-full justify-start px-[11px] py-3.5 gap-4.5 text-14-medium"
                 icon="dot-grid"
-                onClick={() => {
-                  dialog.show(() => <DialogSelectProvider />)
-                }}
+                onClick={all}
               >
                 {language.t("dialog.provider.viewAll")}
               </Button>

packages/app/src/components/dialog-select-model.tsx

@@ -10,27 +10,28 @@ import { Tag } from "@opencode-ai/ui/tag"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { DialogSelectProvider } from "./dialog-select-provider"
-import { DialogManageModels } from "./dialog-manage-models"
 import { ModelTooltip } from "./model-tooltip"
 import { useLanguage } from "@/context/language"
 
 const isFree = (provider: string, cost: { input: number } | undefined) =>
   provider === "opencode" && (!cost || cost.input === 0)
 
+type ModelState = ReturnType<typeof useLocal>["model"]
+
 const ModelList: Component<{
   provider?: string
   class?: string
   onSelect: () => void
   action?: JSX.Element
+  model?: ModelState
 }> = (props) => {
-  const local = useLocal()
+  const model = props.model ?? useLocal().model
   const language = useLanguage()
 
   const models = createMemo(() =>
-    local.model
+    model
       .list()
-      .filter((m) => local.model.visible({ modelID: m.id, providerID: m.provider.id }))
+      .filter((m) => model.visible({ modelID: m.id, providerID: m.provider.id }))
       .filter((m) => (props.provider ? m.provider.id === props.provider : true)),
   )
 
@@ -41,7 +42,7 @@ const ModelList: Component<{
       emptyMessage={language.t("dialog.model.empty")}
       key={(x) => `${x.provider.id}:${x.id}`}
       items={models}
-      current={local.model.current()}
+      current={model.current()}
       filterKeys={["provider.name", "name", "id"]}
       sortBy={(a, b) => a.name.localeCompare(b.name)}
       groupBy={(x) => x.provider.name}
@@ -63,7 +64,7 @@ const ModelList: Component<{
         </Tooltip>
       )}
       onSelect={(x) => {
-        local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
+        model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
           recent: true,
         })
         props.onSelect()
@@ -85,30 +86,42 @@ const ModelList: Component<{
 }
 
 type ModelSelectorTriggerProps = Omit<ComponentProps<typeof Kobalte.Trigger>, "as" | "ref">
+type Dismiss = "escape" | "outside" | "select" | "manage" | "provider"
 
 export function ModelSelectorPopover(props: {
   provider?: string
+  model?: ModelState
   children?: JSX.Element
   triggerAs?: ValidComponent
   triggerProps?: ModelSelectorTriggerProps
+  onClose?: (cause: "escape" | "select") => void
 }) {
   const [store, setStore] = createStore<{
     open: boolean
-    dismiss: "escape" | "outside" | null
+    dismiss: Dismiss | null
   }>({
     open: false,
     dismiss: null,
   })
   const dialog = useDialog()
 
-  const handleManage = () => {
+  const close = (dismiss: Dismiss) => {
+    setStore("dismiss", dismiss)
     setStore("open", false)
-    dialog.show(() => <DialogManageModels />)
+  }
+
+  const handleManage = () => {
+    close("manage")
+    void import("./dialog-manage-models").then((x) => {
+      dialog.show(() => <x.DialogManageModels />)
+    })
   }
 
   const handleConnectProvider = () => {
-    setStore("open", false)
-    dialog.show(() => <DialogSelectProvider />)
+    close("provider")
+    void import("./dialog-select-provider").then((x) => {
+      dialog.show(() => <x.DialogSelectProvider />)
+    })
   }
   const language = useLanguage()
 
@@ -130,28 +143,27 @@ export function ModelSelectorPopover(props: {
         <Kobalte.Content
           class="w-72 h-80 flex flex-col p-2 rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
           onEscapeKeyDown={(event) => {
-            setStore("dismiss", "escape")
-            setStore("open", false)
+            close("escape")
             event.preventDefault()
             event.stopPropagation()
           }}
-          onPointerDownOutside={() => {
-            setStore("dismiss", "outside")
-            setStore("open", false)
-          }}
-          onFocusOutside={() => {
-            setStore("dismiss", "outside")
-            setStore("open", false)
-          }}
+          onPointerDownOutside={() => close("outside")}
+          onFocusOutside={() => close("outside")}
           onCloseAutoFocus={(event) => {
-            if (store.dismiss === "outside") event.preventDefault()
+            const dismiss = store.dismiss
+            if (dismiss === "outside") event.preventDefault()
+            if (dismiss === "escape" || dismiss === "select") {
+              event.preventDefault()
+              props.onClose?.(dismiss)
+            }
             setStore("dismiss", null)
           }}
         >
           <Kobalte.Title class="sr-only">{language.t("dialog.model.select.title")}</Kobalte.Title>
           <ModelList
             provider={props.provider}
-            onSelect={() => setStore("open", false)}
+            model={props.model}
+            onSelect={() => close("select")}
             class="p-1"
             action={
               <div class="flex items-center gap-1">
@@ -184,30 +196,33 @@ export function ModelSelectorPopover(props: {
   )
 }
 
-export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
+export const DialogSelectModel: Component<{ provider?: string; model?: ModelState }> = (props) => {
   const dialog = useDialog()
   const language = useLanguage()
 
+  const provider = () => {
+    void import("./dialog-select-provider").then((x) => {
+      dialog.show(() => <x.DialogSelectProvider />)
+    })
+  }
+
+  const manage = () => {
+    void import("./dialog-manage-models").then((x) => {
+      dialog.show(() => <x.DialogManageModels />)
+    })
+  }
+
   return (
     <Dialog
       title={language.t("dialog.model.select.title")}
       action={
-        <Button
-          class="h-7 -my-1 text-14-medium"
-          icon="plus-small"
-          tabIndex={-1}
-          onClick={() => dialog.show(() => <DialogSelectProvider />)}
-        >
+        <Button class="h-7 -my-1 text-14-medium" icon="plus-small" tabIndex={-1} onClick={provider}>
           {language.t("command.provider.connect")}
         </Button>
       }
     >
-      <ModelList provider={props.provider} onSelect={() => dialog.close()} />
-      <Button
-        variant="ghost"
-        class="ml-3 mt-5 mb-6 text-text-base self-start"
-        onClick={() => dialog.show(() => <DialogManageModels />)}
-      >
+      <ModelList provider={props.provider} model={props.model} onSelect={() => dialog.close()} />
+      <Button variant="ghost" class="ml-3 mt-5 mb-6 text-text-base self-start" onClick={manage}>
         {language.t("dialog.model.manage")}
       </Button>
     </Dialog>

packages/app/src/components/dialog-select-server.tsx

@@ -6,6 +6,7 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { List } from "@opencode-ai/ui/list"
 import { TextField } from "@opencode-ai/ui/text-field"
+import { useMutation } from "@tanstack/solid-query"
 import { showToast } from "@opencode-ai/ui/toast"
 import { useNavigate } from "@solidjs/router"
 import { createEffect, createMemo, createResource, onCleanup, Show } from "solid-js"
@@ -186,7 +187,6 @@ export function DialogSelectServer() {
       name: "",
       username: DEFAULT_USERNAME,
       password: "",
-      adding: false,
       error: "",
       showForm: false,
       status: undefined as boolean | undefined,
@@ -198,7 +198,6 @@ export function DialogSelectServer() {
       username: "",
       password: "",
       error: "",
-      busy: false,
       status: undefined as boolean | undefined,
     },
   })
@@ -209,7 +208,6 @@ export function DialogSelectServer() {
       name: "",
       username: DEFAULT_USERNAME,
       password: "",
-      adding: false,
       error: "",
       showForm: false,
       status: undefined,
@@ -224,10 +222,78 @@ export function DialogSelectServer() {
       password: "",
       error: "",
       status: undefined,
-      busy: false,
     })
   }
 
+  const addMutation = useMutation(() => ({
+    mutationFn: async (value: string) => {
+      const normalized = normalizeServerUrl(value)
+      if (!normalized) {
+        resetAdd()
+        return
+      }
+
+      const conn: ServerConnection.Http = {
+        type: "http",
+        http: { url: normalized },
+      }
+      if (store.addServer.name.trim()) conn.displayName = store.addServer.name.trim()
+      if (store.addServer.password) conn.http.password = store.addServer.password
+      if (store.addServer.password && store.addServer.username) conn.http.username = store.addServer.username
+      const result = await checkServerHealth(conn.http)
+      if (!result.healthy) {
+        setStore("addServer", { error: language.t("dialog.server.add.error") })
+        return
+      }
+
+      resetAdd()
+      await select(conn, true)
+    },
+  }))
+
+  const editMutation = useMutation(() => ({
+    mutationFn: async (input: { original: ServerConnection.Any; value: string }) => {
+      if (input.original.type !== "http") return
+      const normalized = normalizeServerUrl(input.value)
+      if (!normalized) {
+        resetEdit()
+        return
+      }
+
+      const name = store.editServer.name.trim() || undefined
+      const username = store.editServer.username || undefined
+      const password = store.editServer.password || undefined
+      const existingName = input.original.displayName
+      if (
+        normalized === input.original.http.url &&
+        name === existingName &&
+        username === input.original.http.username &&
+        password === input.original.http.password
+      ) {
+        resetEdit()
+        return
+      }
+
+      const conn: ServerConnection.Http = {
+        type: "http",
+        displayName: name,
+        http: { url: normalized, username, password },
+      }
+      const result = await checkServerHealth(conn.http)
+      if (!result.healthy) {
+        setStore("editServer", { error: language.t("dialog.server.add.error") })
+        return
+      }
+      if (normalized === input.original.http.url) {
+        server.add(conn)
+      } else {
+        replaceServer(input.original, conn)
+      }
+
+      resetEdit()
+    },
+  }))
+
   const replaceServer = (original: ServerConnection.Http, next: ServerConnection.Http) => {
     const active = server.key
     const newConn = server.add(next)
@@ -291,12 +357,12 @@ export function DialogSelectServer() {
       navigate("/")
       return
     }
-    server.setActive(ServerConnection.key(conn))
     navigate("/")
+    queueMicrotask(() => server.setActive(ServerConnection.key(conn)))
   }
 
   const handleAddChange = (value: string) => {
-    if (store.addServer.adding) return
+    if (addMutation.isPending) return
     setStore("addServer", { url: value, error: "" })
     void previewStatus(value, store.addServer.username, store.addServer.password, (next) =>
       setStore("addServer", { status: next }),
@@ -304,12 +370,12 @@ export function DialogSelectServer() {
   }
 
   const handleAddNameChange = (value: string) => {
-    if (store.addServer.adding) return
+    if (addMutation.isPending) return
     setStore("addServer", { name: value, error: "" })
   }
 
   const handleAddUsernameChange = (value: string) => {
-    if (store.addServer.adding) return
+    if (addMutation.isPending) return
     setStore("addServer", { username: value, error: "" })
     void previewStatus(store.addServer.url, value, store.addServer.password, (next) =>
       setStore("addServer", { status: next }),
@@ -317,7 +383,7 @@ export function DialogSelectServer() {
   }
 
   const handleAddPasswordChange = (value: string) => {
-    if (store.addServer.adding) return
+    if (addMutation.isPending) return
     setStore("addServer", { password: value, error: "" })
     void previewStatus(store.addServer.url, store.addServer.username, value, (next) =>
       setStore("addServer", { status: next }),
@@ -325,7 +391,7 @@ export function DialogSelectServer() {
   }
 
   const handleEditChange = (value: string) => {
-    if (store.editServer.busy) return
+    if (editMutation.isPending) return
     setStore("editServer", { value, error: "" })
     void previewStatus(value, store.editServer.username, store.editServer.password, (next) =>
       setStore("editServer", { status: next }),
@@ -333,12 +399,12 @@ export function DialogSelectServer() {
   }
 
   const handleEditNameChange = (value: string) => {
-    if (store.editServer.busy) return
+    if (editMutation.isPending) return
     setStore("editServer", { name: value, error: "" })
   }
 
   const handleEditUsernameChange = (value: string) => {
-    if (store.editServer.busy) return
+    if (editMutation.isPending) return
     setStore("editServer", { username: value, error: "" })
     void previewStatus(store.editServer.value, value, store.editServer.password, (next) =>
       setStore("editServer", { status: next }),
@@ -346,85 +412,13 @@ export function DialogSelectServer() {
   }
 
   const handleEditPasswordChange = (value: string) => {
-    if (store.editServer.busy) return
+    if (editMutation.isPending) return
     setStore("editServer", { password: value, error: "" })
     void previewStatus(store.editServer.value, store.editServer.username, value, (next) =>
       setStore("editServer", { status: next }),
     )
   }
 
-  async function handleAdd(value: string) {
-    if (store.addServer.adding) return
-    const normalized = normalizeServerUrl(value)
-    if (!normalized) {
-      resetAdd()
-      return
-    }
-
-    setStore("addServer", { adding: true, error: "" })
-
-    const conn: ServerConnection.Http = {
-      type: "http",
-      http: { url: normalized },
-    }
-    if (store.addServer.name.trim()) conn.displayName = store.addServer.name.trim()
-    if (store.addServer.password) conn.http.password = store.addServer.password
-    if (store.addServer.password && store.addServer.username) conn.http.username = store.addServer.username
-    const result = await checkServerHealth(conn.http)
-    setStore("addServer", { adding: false })
-    if (!result.healthy) {
-      setStore("addServer", { error: language.t("dialog.server.add.error") })
-      return
-    }
-
-    resetAdd()
-    await select(conn, true)
-  }
-
-  async function handleEdit(original: ServerConnection.Any, value: string) {
-    if (store.editServer.busy || original.type !== "http") return
-    const normalized = normalizeServerUrl(value)
-    if (!normalized) {
-      resetEdit()
-      return
-    }
-
-    const name = store.editServer.name.trim() || undefined
-    const username = store.editServer.username || undefined
-    const password = store.editServer.password || undefined
-    const existingName = original.displayName
-    if (
-      normalized === original.http.url &&
-      name === existingName &&
-      username === original.http.username &&
-      password === original.http.password
-    ) {
-      resetEdit()
-      return
-    }
-
-    setStore("editServer", { busy: true, error: "" })
-
-    const conn: ServerConnection.Http = {
-      type: "http",
-      displayName: name,
-      http: { url: normalized, username, password },
-    }
-    const result = await checkServerHealth(conn.http)
-    setStore("editServer", { busy: false })
-    if (!result.healthy) {
-      setStore("editServer", { error: language.t("dialog.server.add.error") })
-      return
-    }
-    if (normalized === original.http.url) {
-      server.add(conn)
-    } else {
-      replaceServer(original, conn)
-    }
-
-    resetEdit()
-  }
-
   const mode = createMemo<"list" | "add" | "edit">(() => {
     if (store.editServer.id) return "edit"
     if (store.addServer.showForm) return "add"
@@ -464,23 +458,26 @@ export function DialogSelectServer() {
       password: conn.http.password ?? "",
       error: "",
       status: store.status[ServerConnection.key(conn)]?.healthy,
-      busy: false,
     })
   }
 
   const submitForm = () => {
     if (mode() === "add") {
-      void handleAdd(store.addServer.url)
+      if (addMutation.isPending) return
+      setStore("addServer", { error: "" })
+      addMutation.mutate(store.addServer.url)
       return
     }
     const original = editing()
     if (!original) return
-    void handleEdit(original, store.editServer.value)
+    if (editMutation.isPending) return
+    setStore("editServer", { error: "" })
+    editMutation.mutate({ original, value: store.editServer.value })
   }
 
   const isFormMode = createMemo(() => mode() !== "list")
   const isAddMode = createMemo(() => mode() === "add")
-  const formBusy = createMemo(() => (isAddMode() ? store.addServer.adding : store.editServer.busy))
+  const formBusy = createMemo(() => (isAddMode() ? addMutation.isPending : editMutation.isPending))
 
   const formTitle = createMemo(() => {
     if (!isFormMode()) return language.t("dialog.server.title")

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

@@ -1,8 +1,7 @@
 import { useFilteredList } from "@opencode-ai/ui/hooks"
 import { useSpring } from "@opencode-ai/ui/motion-spring"
-import { createEffect, on, Component, Show, onCleanup, Switch, Match, createMemo, createSignal } from "solid-js"
+import { createEffect, on, Component, Show, onCleanup, createMemo, createSignal } from "solid-js"
 import { createStore } from "solid-js/store"
-import { createFocusSignal } from "@solid-primitives/active-element"
 import { useLocal } from "@/context/local"
 import { selectionFromLines, type SelectedLineRange, useFile } from "@/context/file"
 import {
@@ -28,7 +27,6 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Select } from "@opencode-ai/ui/select"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ModelSelectorPopover } from "@/components/dialog-select-model"
-import { DialogSelectModelUnpaid } from "@/components/dialog-select-model-unpaid"
 import { useProviders } from "@/hooks/use-providers"
 import { useCommand } from "@/context/command"
 import { Persist, persisted } from "@/utils/persist"
@@ -37,6 +35,7 @@ import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 import { useSessionLayout } from "@/pages/session/session-layout"
 import { createSessionTabs } from "@/pages/session/helpers"
+import { promptEnabled, promptProbe } from "@/testing/prompt"
 import { createTextFragment, getCursorPosition, setCursorPosition, setRangeEdge } from "./prompt-input/editor-dom"
 import { createPromptAttachments } from "./prompt-input/attachments"
 import { ACCEPTED_FILE_TYPES } from "./prompt-input/files"
@@ -121,7 +120,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   let slashPopoverRef!: HTMLDivElement
 
   const mirror = { input: false }
-  const inset = 52
+  const inset = 56
   const space = `${inset}px`
 
   const scrollCursorIntoView = () => {
@@ -281,6 +280,31 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     if (store.mode === "shell") return 0
     return prompt.context.items().filter((item) => !!item.comment?.trim()).length
   })
+  const blank = createMemo(() => {
+    const text = prompt
+      .current()
+      .map((part) => ("content" in part ? part.content : ""))
+      .join("")
+    return text.trim().length === 0 && imageAttachments().length === 0 && commentCount() === 0
+  })
+  const stopping = createMemo(() => working() && blank())
+  const tip = () => {
+    if (stopping()) {
+      return (
+        <div class="flex items-center gap-2">
+          <span>{language.t("prompt.action.stop")}</span>
+          <span class="text-icon-base text-12-medium text-[10px]!">{language.t("common.key.esc")}</span>
+        </div>
+      )
+    }
+
+    return (
+      <div class="flex items-center gap-2">
+        <span>{language.t("prompt.action.send")}</span>
+        <Icon name="enter" size="small" class="text-icon-base" />
+      </div>
+    )
+  }
 
   const contextItems = createMemo(() => {
     const items = prompt.context.items()
@@ -411,7 +435,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     }
   }
 
-  const isFocused = createFocusSignal(() => editorRef)
   const escBlur = () => platform.platform === "desktop" && platform.os === "macos"
 
   const pick = () => fileInputRef?.click()
@@ -487,6 +510,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     return getCursorPosition(editorRef)
   }
 
+  const restoreFocus = () => {
+    requestAnimationFrame(() => {
+      const cursor = prompt.cursor() ?? promptLength(prompt.current())
+      editorRef.focus()
+      setCursorPosition(editorRef, cursor)
+      queueScroll()
+    })
+  }
+
   const renderEditorWithCursor = (parts: Prompt) => {
     const cursor = currentCursor()
     renderEditor(parts)
@@ -556,6 +588,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       const open = recent()
       const seen = new Set(open)
       const pinned: AtOption[] = open.map((path) => ({ type: "file", path, display: path, recent: true }))
+      if (!query.trim()) return [...agents, ...pinned]
       const paths = await files.searchFilesAndDirectories(query)
       const fileOptions: AtOption[] = paths
         .filter((path) => !seen.has(path))
@@ -606,18 +639,20 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
   const handleSlashSelect = (cmd: SlashCommand | undefined) => {
     if (!cmd) return
+    promptProbe.select(cmd.id)
     closePopover()
+    const images = imageAttachments()
 
     if (cmd.type === "custom") {
       const text = `/${cmd.trigger} `
       setEditorText(text)
-      prompt.set([{ type: "text", content: text, start: 0, end: text.length }], text.length)
+      prompt.set([{ type: "text", content: text, start: 0, end: text.length }, ...images], text.length)
       focusEditorEnd()
       return
     }
 
     clearEditor()
-    prompt.set([{ type: "text", content: "", start: 0, end: 0 }], 0)
+    prompt.set([...DEFAULT_PROMPT, ...images], 0)
     command.trigger(cmd.id, "slash")
   }
 
@@ -694,6 +729,20 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     })
   })
 
+  if (promptEnabled()) {
+    createEffect(() => {
+      promptProbe.set({
+        popover: store.popover,
+        slash: {
+          active: slashActive() ?? null,
+          ids: slashFlat().map((cmd) => cmd.id),
+        },
+      })
+    })
+
+    onCleanup(() => promptProbe.clear())
+  }
+
   const selectPopoverActive = () => {
     if (store.popover === "at") {
       const items = atFlat()
@@ -1012,9 +1061,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     return true
   }
 
-  const { addAttachment, removeAttachment, handlePaste } = createPromptAttachments({
+  const { addAttachments, removeAttachment, handlePaste } = createPromptAttachments({
     editor: () => editorRef,
-    isFocused,
     isDialogActive: () => !!dialog.active,
     setDraggingType: (type) => setStore("draggingType", type),
     focusEditor: () => {
@@ -1200,6 +1248,20 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
     // Note: Shift+Enter is handled earlier, before IME check
     if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault()
+      if (event.repeat) return
+      if (
+        working() &&
+        prompt
+          .current()
+          .map((part) => ("content" in part ? part.content : ""))
+          .join("")
+          .trim().length === 0 &&
+        imageAttachments().length === 0 &&
+        commentCount() === 0
+      ) {
+        return
+      }
       handleSubmit(event)
     }
   }
@@ -1260,11 +1322,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           onMouseDown={(e) => {
             const target = e.target
             if (!(target instanceof HTMLElement)) return
-            if (
-              target.closest(
-                '[data-action="prompt-attach"], [data-action="prompt-submit"], [data-action="prompt-permissions"]',
-              )
-            ) {
+            if (target.closest('[data-action="prompt-attach"], [data-action="prompt-submit"]')) {
               return
             }
             editorRef?.focus()
@@ -1288,6 +1346,9 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               autocapitalize={store.mode === "normal" ? "sentences" : "off"}
               autocorrect={store.mode === "normal" ? "on" : "off"}
               spellcheck={store.mode === "normal"}
+              inputMode="text"
+              // @ts-expect-error
+              autocomplete="off"
               onInput={handleInput}
               onPaste={handlePaste}
               onCompositionStart={handleCompositionStart}
@@ -1328,18 +1389,37 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             <input
               ref={fileInputRef}
               type="file"
+              multiple
               accept={ACCEPTED_FILE_TYPES.join(",")}
               class="hidden"
               onChange={(e) => {
-                const file = e.currentTarget.files?.[0]
-                if (file) void addAttachment(file)
+                const list = e.currentTarget.files
+                if (list) void addAttachments(Array.from(list))
                 e.currentTarget.value = ""
               }}
             />
 
+            <div class="flex items-center gap-1 pointer-events-auto">
+              <Tooltip placement="top" inactive={!working() && blank()} value={tip()}>
+                <IconButton
+                  data-action="prompt-submit"
+                  type="submit"
+                  disabled={store.mode !== "normal" || (!working() && blank())}
+                  tabIndex={store.mode === "normal" ? undefined : -1}
+                  icon={stopping() ? "stop" : "arrow-up"}
+                  variant="primary"
+                  class="size-8"
+                  style={buttons()}
+                  aria-label={stopping() ? language.t("prompt.action.stop") : language.t("prompt.action.send")}
+                />
+              </Tooltip>
+            </div>
+          </div>
+
+          <div class="pointer-events-none absolute bottom-2 left-2">
             <div
               aria-hidden={store.mode !== "normal"}
-              class="flex items-center gap-1"
+              class="pointer-events-auto"
               style={{
                 "pointer-events": buttonsSpring() > 0.5 ? "auto" : "none",
               }}
@@ -1363,81 +1443,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                   <Icon name="plus" class="size-4.5" />
                 </Button>
               </TooltipKeybind>
-
-              <Tooltip
-                placement="top"
-                inactive={!prompt.dirty() && !working()}
-                value={
-                  <Switch>
-                    <Match when={working()}>
-                      <div class="flex items-center gap-2">
-                        <span>{language.t("prompt.action.stop")}</span>
-                        <span class="text-icon-base text-12-medium text-[10px]!">{language.t("common.key.esc")}</span>
-                      </div>
-                    </Match>
-                    <Match when={true}>
-                      <div class="flex items-center gap-2">
-                        <span>{language.t("prompt.action.send")}</span>
-                        <Icon name="enter" size="small" class="text-icon-base" />
-                      </div>
-                    </Match>
-                  </Switch>
-                }
-              >
-                <IconButton
-                  data-action="prompt-submit"
-                  type="submit"
-                  disabled={store.mode !== "normal" || (!prompt.dirty() && !working() && commentCount() === 0)}
-                  tabIndex={store.mode === "normal" ? undefined : -1}
-                  icon={working() ? "stop" : "arrow-up"}
-                  variant="primary"
-                  class="size-8"
-                  style={buttons()}
-                  aria-label={working() ? language.t("prompt.action.stop") : language.t("prompt.action.send")}
-                />
-              </Tooltip>
-            </div>
-          </div>
-
-          <div class="pointer-events-none absolute bottom-2 left-2">
-            <div class="pointer-events-auto">
-              <TooltipKeybind
-                placement="top"
-                gutter={8}
-                title={language.t(
-                  accepting() ? "command.permissions.autoaccept.disable" : "command.permissions.autoaccept.enable",
-                )}
-                keybind={command.keybind("permissions.autoaccept")}
-              >
-                <Button
-                  data-action="prompt-permissions"
-                  variant="ghost"
-                  onClick={() => {
-                    if (!params.id) {
-                      permission.toggleAutoAcceptDirectory(sdk.directory)
-                      return
-                    }
-                    permission.toggleAutoAccept(params.id, sdk.directory)
-                  }}
-                  classList={{
-                    "size-6 flex items-center justify-center": true,
-                    "text-text-base": !accepting(),
-                    "hover:bg-surface-success-base": accepting(),
-                  }}
-                  aria-label={
-                    accepting()
-                      ? language.t("command.permissions.autoaccept.disable")
-                      : language.t("command.permissions.autoaccept.enable")
-                  }
-                  aria-pressed={accepting()}
-                >
-                  <Icon
-                    name="chevron-double-right"
-                    size="small"
-                    classList={{ "text-icon-success-base": accepting() }}
-                  />
-                </Button>
-              </TooltipKeybind>
             </div>
           </div>
         </div>
@@ -1457,102 +1462,126 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 <div class="size-4 shrink-0" />
               </div>
               <div class="flex items-center gap-1.5 min-w-0 flex-1">
-                <TooltipKeybind
-                  placement="top"
-                  gutter={4}
-                  title={language.t("command.agent.cycle")}
-                  keybind={command.keybind("agent.cycle")}
-                >
-                  <Select
-                    size="normal"
-                    options={agentNames()}
-                    current={local.agent.current()?.name ?? ""}
-                    onSelect={local.agent.set}
-                    class="capitalize max-w-[160px]"
-                    valueClass="truncate text-13-regular"
-                    triggerStyle={control()}
-                    variant="ghost"
-                  />
-                </TooltipKeybind>
-                <Show
-                  when={providers.paid().length > 0}
-                  fallback={
-                    <TooltipKeybind
-                      placement="top"
-                      gutter={4}
-                      title={language.t("command.model.choose")}
-                      keybind={command.keybind("model.choose")}
-                    >
-                      <Button
-                        as="div"
-                        variant="ghost"
-                        size="normal"
-                        class="min-w-0 max-w-[320px] text-13-regular group"
-                        style={control()}
-                        onClick={() => dialog.show(() => <DialogSelectModelUnpaid />)}
-                      >
-                        <Show when={local.model.current()?.provider?.id}>
-                          <ProviderIcon
-                            id={local.model.current()!.provider.id}
-                            class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
-                            style={{ "will-change": "opacity", transform: "translateZ(0)" }}
-                          />
-                        </Show>
-                        <span class="truncate">
-                          {local.model.current()?.name ?? language.t("dialog.model.select.title")}
-                        </span>
-                        <Icon name="chevron-down" size="small" class="shrink-0" />
-                      </Button>
-                    </TooltipKeybind>
-                  }
-                >
+                <div data-component="prompt-agent-control">
                   <TooltipKeybind
                     placement="top"
                     gutter={4}
-                    title={language.t("command.model.choose")}
-                    keybind={command.keybind("model.choose")}
+                    title={language.t("command.agent.cycle")}
+                    keybind={command.keybind("agent.cycle")}
                   >
-                    <ModelSelectorPopover
-                      triggerAs={Button}
-                      triggerProps={{
-                        variant: "ghost",
-                        size: "normal",
-                        style: control(),
-                        class: "min-w-0 max-w-[320px] text-13-regular group",
+                    <Select
+                      size="normal"
+                      options={agentNames()}
+                      current={local.agent.current()?.name ?? ""}
+                      onSelect={(value) => {
+                        local.agent.set(value)
+                        restoreFocus()
                       }}
-                    >
-                      <Show when={local.model.current()?.provider?.id}>
-                        <ProviderIcon
-                          id={local.model.current()!.provider.id}
-                          class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
-                          style={{ "will-change": "opacity", transform: "translateZ(0)" }}
-                        />
-                      </Show>
-                      <span class="truncate">
-                        {local.model.current()?.name ?? language.t("dialog.model.select.title")}
-                      </span>
-                      <Icon name="chevron-down" size="small" class="shrink-0" />
-                    </ModelSelectorPopover>
+                      class="capitalize max-w-[160px] text-text-base"
+                      valueClass="truncate text-13-regular text-text-base"
+                      triggerStyle={control()}
+                      triggerProps={{ "data-action": "prompt-agent" }}
+                      variant="ghost"
+                    />
                   </TooltipKeybind>
+                </div>
+                <Show when={store.mode !== "shell"}>
+                  <div data-component="prompt-model-control">
+                    <Show
+                      when={providers.paid().length > 0}
+                      fallback={
+                        <TooltipKeybind
+                          placement="top"
+                          gutter={4}
+                          title={language.t("command.model.choose")}
+                          keybind={command.keybind("model.choose")}
+                        >
+                          <Button
+                            data-action="prompt-model"
+                            as="div"
+                            variant="ghost"
+                            size="normal"
+                            class="min-w-0 max-w-[320px] text-13-regular text-text-base group"
+                            style={control()}
+                            onClick={() => {
+                              void import("@/components/dialog-select-model-unpaid").then((x) => {
+                                dialog.show(() => <x.DialogSelectModelUnpaid model={local.model} />)
+                              })
+                            }}
+                          >
+                            <Show when={local.model.current()?.provider?.id}>
+                              <ProviderIcon
+                                id={local.model.current()?.provider?.id ?? ""}
+                                class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
+                                style={{ "will-change": "opacity", transform: "translateZ(0)" }}
+                              />
+                            </Show>
+                            <span class="truncate">
+                              {local.model.current()?.name ?? language.t("dialog.model.select.title")}
+                            </span>
+                            <Icon name="chevron-down" size="small" class="shrink-0" />
+                          </Button>
+                        </TooltipKeybind>
+                      }
+                    >
+                      <TooltipKeybind
+                        placement="top"
+                        gutter={4}
+                        title={language.t("command.model.choose")}
+                        keybind={command.keybind("model.choose")}
+                      >
+                        <ModelSelectorPopover
+                          model={local.model}
+                          triggerAs={Button}
+                          triggerProps={{
+                            variant: "ghost",
+                            size: "normal",
+                            style: control(),
+                            class: "min-w-0 max-w-[320px] text-13-regular text-text-base group",
+                            "data-action": "prompt-model",
+                          }}
+                          onClose={restoreFocus}
+                        >
+                          <Show when={local.model.current()?.provider?.id}>
+                            <ProviderIcon
+                              id={local.model.current()?.provider?.id ?? ""}
+                              class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
+                              style={{ "will-change": "opacity", transform: "translateZ(0)" }}
+                            />
+                          </Show>
+                          <span class="truncate">
+                            {local.model.current()?.name ?? language.t("dialog.model.select.title")}
+                          </span>
+                          <Icon name="chevron-down" size="small" class="shrink-0" />
+                        </ModelSelectorPopover>
+                      </TooltipKeybind>
+                    </Show>
+                  </div>
+                  <div data-component="prompt-variant-control">
+                    <TooltipKeybind
+                      placement="top"
+                      gutter={4}
+                      title={language.t("command.model.variant.cycle")}
+                      keybind={command.keybind("model.variant.cycle")}
+                    >
+                      <Select
+                        size="normal"
+                        options={variants()}
+                        current={local.model.variant.current() ?? "default"}
+                        label={(x) => (x === "default" ? language.t("common.default") : x)}
+                        onSelect={(value) => {
+                          local.model.variant.set(value === "default" ? undefined : value)
+                          restoreFocus()
+                        }}
+                        class="capitalize max-w-[160px] text-text-base"
+                        valueClass="truncate text-13-regular text-text-base"
+                        triggerStyle={control()}
+                        triggerProps={{ "data-action": "prompt-model-variant" }}
+                        variant="ghost"
+                      />
+                    </TooltipKeybind>
+                  </div>
                 </Show>
-                <TooltipKeybind
-                  placement="top"
-                  gutter={4}
-                  title={language.t("command.model.variant.cycle")}
-                  keybind={command.keybind("model.variant.cycle")}
-                >
-                  <Select
-                    size="normal"
-                    options={variants()}
-                    current={local.model.variant.current() ?? "default"}
-                    label={(x) => (x === "default" ? language.t("common.default") : x)}
-                    onSelect={(x) => local.model.variant.set(x === "default" ? undefined : x)}
-                    class="capitalize max-w-[160px]"
-                    valueClass="truncate text-13-regular"
-                    triggerStyle={control()}
-                    variant="ghost"
-                  />
-                </TooltipKeybind>
               </div>
             </div>
           </div>

packages/app/src/components/prompt-input/attachments.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import { attachmentMime } from "./files"
+import { pasteMode } from "./paste"
 
 describe("attachmentMime", () => {
   test("keeps PDFs when the browser reports the mime", async () => {
@@ -22,3 +23,22 @@ describe("attachmentMime", () => {
     expect(await attachmentMime(file)).toBeUndefined()
   })
 })
+
+describe("pasteMode", () => {
+  test("uses native paste for short single-line text", () => {
+    expect(pasteMode("hello world")).toBe("native")
+  })
+
+  test("uses manual paste for multiline text", () => {
+    expect(
+      pasteMode(`{
+  "ok": true
+}`),
+    ).toBe("manual")
+    expect(pasteMode("a\r\nb")).toBe("manual")
+  })
+
+  test("uses manual paste for large text", () => {
+    expect(pasteMode("x".repeat(8000))).toBe("manual")
+  })
+})

packages/app/src/components/prompt-input/attachments.ts

@@ -1,12 +1,12 @@
-import { onCleanup, onMount } from "solid-js"
+import { onMount } from "solid-js"
+import { makeEventListener } from "@solid-primitives/event-listener"
 import { showToast } from "@opencode-ai/ui/toast"
 import { usePrompt, type ContentPart, type ImageAttachmentPart } from "@/context/prompt"
 import { useLanguage } from "@/context/language"
 import { uuid } from "@/utils/uuid"
 import { getCursorPosition } from "./editor-dom"
 import { attachmentMime } from "./files"
-const LARGE_PASTE_CHARS = 8000
-const LARGE_PASTE_BREAKS = 120
+import { normalizePaste, pasteMode } from "./paste"
 
 function dataUrl(file: File, mime: string) {
   return new Promise<string>((resolve) => {
@@ -25,20 +25,8 @@ function dataUrl(file: File, mime: string) {
   })
 }
 
-function largePaste(text: string) {
-  if (text.length >= LARGE_PASTE_CHARS) return true
-  let breaks = 0
-  for (const char of text) {
-    if (char !== "\n") continue
-    breaks += 1
-    if (breaks >= LARGE_PASTE_BREAKS) return true
-  }
-  return false
-}
-
 type PromptAttachmentsInput = {
   editor: () => HTMLDivElement | undefined
-  isFocused: () => boolean
   isDialogActive: () => boolean
   setDraggingType: (type: "image" | "@mention" | null) => void
   focusEditor: () => void
@@ -84,6 +72,18 @@ export function createPromptAttachments(input: PromptAttachmentsInput) {
 
   const addAttachment = (file: File) => add(file)
 
+  const addAttachments = async (files: File[], toast = true) => {
+    let found = false
+
+    for (const file of files) {
+      const ok = await add(file, false)
+      if (ok) found = true
+    }
+
+    if (!found && files.length > 0 && toast) warn()
+    return found
+  }
+
   const removeAttachment = (id: string) => {
     const current = prompt.current()
     const next = current.filter((part) => part.type !== "image" || part.id !== id)
@@ -91,25 +91,20 @@ export function createPromptAttachments(input: PromptAttachmentsInput) {
   }
 
   const handlePaste = async (event: ClipboardEvent) => {
-    if (!input.isFocused()) return
     const clipboardData = event.clipboardData
     if (!clipboardData) return
 
     event.preventDefault()
     event.stopPropagation()
 
-    const items = Array.from(clipboardData.items)
-    const fileItems = items.filter((item) => item.kind === "file")
+    const files = Array.from(clipboardData.items).flatMap((item) => {
+      if (item.kind !== "file") return []
+      const file = item.getAsFile()
+      return file ? [file] : []
+    })
 
-    if (fileItems.length > 0) {
-      let found = false
-      for (const item of fileItems) {
-        const file = item.getAsFile()
-        if (!file) continue
-        const ok = await add(file, false)
-        if (ok) found = true
-      }
-      if (!found) warn()
+    if (files.length > 0) {
+      await addAttachments(files)
       return
     }
 
@@ -126,16 +121,23 @@ export function createPromptAttachments(input: PromptAttachmentsInput) {
 
     if (!plainText) return
 
-    if (largePaste(plainText)) {
-      if (input.addPart({ type: "text", content: plainText, start: 0, end: 0 })) return
+    const text = normalizePaste(plainText)
+
+    const put = () => {
+      if (input.addPart({ type: "text", content: text, start: 0, end: 0 })) return true
       input.focusEditor()
-      if (input.addPart({ type: "text", content: plainText, start: 0, end: 0 })) return
+      return input.addPart({ type: "text", content: text, start: 0, end: 0 })
     }
 
-    const inserted = typeof document.execCommand === "function" && document.execCommand("insertText", false, plainText)
+    if (pasteMode(text) === "manual") {
+      put()
+      return
+    }
+
+    const inserted = typeof document.execCommand === "function" && document.execCommand("insertText", false, text)
     if (inserted) return
 
-    input.addPart({ type: "text", content: plainText, start: 0, end: 0 })
+    put()
   }
 
   const handleGlobalDragOver = (event: DragEvent) => {
@@ -176,28 +178,18 @@ export function createPromptAttachments(input: PromptAttachmentsInput) {
     const dropped = event.dataTransfer?.files
     if (!dropped) return
 
-    let found = false
-    for (const file of Array.from(dropped)) {
-      const ok = await add(file, false)
-      if (ok) found = true
-    }
-    if (!found && dropped.length > 0) warn()
+    await addAttachments(Array.from(dropped))
   }
 
   onMount(() => {
-    document.addEventListener("dragover", handleGlobalDragOver)
-    document.addEventListener("dragleave", handleGlobalDragLeave)
-    document.addEventListener("drop", handleGlobalDrop)
-  })
-
-  onCleanup(() => {
-    document.removeEventListener("dragover", handleGlobalDragOver)
-    document.removeEventListener("dragleave", handleGlobalDragLeave)
-    document.removeEventListener("drop", handleGlobalDrop)
+    makeEventListener(document, "dragover", handleGlobalDragOver)
+    makeEventListener(document, "dragleave", handleGlobalDragLeave)
+    makeEventListener(document, "drop", handleGlobalDrop)
   })
 
   return {
     addAttachment,
+    addAttachments,
     removeAttachment,
     handlePaste,
   }

packages/app/src/components/prompt-input/build-request-parts.test.ts

@@ -49,6 +49,32 @@ describe("buildRequestParts", () => {
     expect(result.optimisticParts.every((part) => part.sessionID === "ses_1" && part.messageID === "msg_1")).toBe(true)
   })
 
+  test("keeps multiple uploaded attachments in order", () => {
+    const result = buildRequestParts({
+      prompt: [{ type: "text", content: "check these", start: 0, end: 11 }],
+      context: [],
+      images: [
+        { type: "image", id: "img_1", filename: "a.png", mime: "image/png", dataUrl: "data:image/png;base64,AAA" },
+        {
+          type: "image",
+          id: "img_2",
+          filename: "b.pdf",
+          mime: "application/pdf",
+          dataUrl: "data:application/pdf;base64,BBB",
+        },
+      ],
+      text: "check these",
+      messageID: "msg_multi",
+      sessionID: "ses_multi",
+      sessionDirectory: "/repo",
+    })
+
+    const files = result.requestParts.filter((part) => part.type === "file" && part.url.startsWith("data:"))
+
+    expect(files).toHaveLength(2)
+    expect(files.map((part) => (part.type === "file" ? part.filename : ""))).toEqual(["a.png", "b.pdf"])
+  })
+
   test("deduplicates context files when prompt already includes same path", () => {
     const prompt: Prompt = [{ type: "file", path: "src/foo.ts", content: "@src/foo.ts", start: 0, end: 11 }]
 
@@ -74,6 +100,30 @@ describe("buildRequestParts", () => {
     expect(synthetic).toHaveLength(1)
   })
 
+  test("adds file parts for @mentions inside comment text", () => {
+    const result = buildRequestParts({
+      prompt: [{ type: "text", content: "look", start: 0, end: 4 }],
+      context: [
+        {
+          key: "ctx:comment-mention",
+          type: "file",
+          path: "src/review.ts",
+          comment: "Compare with @src/shared.ts and @src/review.ts.",
+        },
+      ],
+      images: [],
+      text: "look",
+      messageID: "msg_comment_mentions",
+      sessionID: "ses_comment_mentions",
+      sessionDirectory: "/repo",
+    })
+
+    const files = result.requestParts.filter((part) => part.type === "file")
+    expect(files).toHaveLength(2)
+    expect(files.some((part) => part.type === "file" && part.url === "file:///repo/src/review.ts")).toBe(true)
+    expect(files.some((part) => part.type === "file" && part.url === "file:///repo/src/shared.ts")).toBe(true)
+  })
+
   test("handles Windows paths correctly (simulated on macOS)", () => {
     const prompt: Prompt = [{ type: "file", path: "src\\foo.ts", content: "@src\\foo.ts", start: 0, end: 11 }]
 

packages/app/src/components/prompt-input/build-request-parts.ts

@@ -39,6 +39,16 @@ const absolute = (directory: string, path: string) => {
 const fileQuery = (selection: FileSelection | undefined) =>
   selection ? `?start=${selection.startLine}&end=${selection.endLine}` : ""
 
+const mention = /(^|[\s([{"'])@(\S+)/g
+
+const parseCommentMentions = (comment: string) => {
+  return Array.from(comment.matchAll(mention)).flatMap((match) => {
+    const path = (match[2] ?? "").replace(/[.,!?;:)}\]"']+$/, "")
+    if (!path) return []
+    return [path]
+  })
+}
+
 const isFileAttachment = (part: Prompt[number]): part is FileAttachmentPart => part.type === "file"
 const isAgentAttachment = (part: Prompt[number]): part is AgentPart => part.type === "agent"
 
@@ -138,6 +148,21 @@ export function buildRequestParts(input: BuildRequestPartsInput) {
 
     if (!comment) return [filePart]
 
+    const mentions = parseCommentMentions(comment).flatMap((path) => {
+      const url = `file://${encodeFilePath(absolute(input.sessionDirectory, path))}`
+      if (used.has(url)) return []
+      used.add(url)
+      return [
+        {
+          id: Identifier.ascending("part"),
+          type: "file",
+          mime: "text/plain",
+          url,
+          filename: getFilename(path),
+        } satisfies PromptRequestPart,
+      ]
+    })
+
     return [
       {
         id: Identifier.ascending("part"),
@@ -153,6 +178,7 @@ export function buildRequestParts(input: BuildRequestPartsInput) {
         }),
       } satisfies PromptRequestPart,
       filePart,
+      ...mentions,
     ]
   })
 

packages/app/src/components/prompt-input/files.ts

@@ -1,4 +1,6 @@
-export const ACCEPTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"]
+import { ACCEPTED_FILE_TYPES, ACCEPTED_IMAGE_TYPES } from "@/constants/file-picker"
+
+export { ACCEPTED_FILE_TYPES }
 
 const IMAGE_MIMES = new Set(ACCEPTED_IMAGE_TYPES)
 const IMAGE_EXTS = new Map([
@@ -18,61 +20,6 @@ const TEXT_MIMES = new Set([
   "application/yaml",
 ])
 
-export const ACCEPTED_FILE_TYPES = [
-  ...ACCEPTED_IMAGE_TYPES,
-  "application/pdf",
-  "text/*",
-  "application/json",
-  "application/ld+json",
-  "application/toml",
-  "application/x-toml",
-  "application/x-yaml",
-  "application/xml",
-  "application/yaml",
-  ".c",
-  ".cc",
-  ".cjs",
-  ".conf",
-  ".cpp",
-  ".css",
-  ".csv",
-  ".cts",
-  ".env",
-  ".go",
-  ".gql",
-  ".graphql",
-  ".h",
-  ".hh",
-  ".hpp",
-  ".htm",
-  ".html",
-  ".ini",
-  ".java",
-  ".js",
-  ".json",
-  ".jsx",
-  ".log",
-  ".md",
-  ".mdx",
-  ".mjs",
-  ".mts",
-  ".py",
-  ".rb",
-  ".rs",
-  ".sass",
-  ".scss",
-  ".sh",
-  ".sql",
-  ".toml",
-  ".ts",
-  ".tsx",
-  ".txt",
-  ".xml",
-  ".yaml",
-  ".yml",
-  ".zsh",
-]
-
 const SAMPLE = 4096
 
 function kind(type: string) {

packages/app/src/components/prompt-input/history.test.ts

@@ -126,7 +126,7 @@ describe("prompt-input history", () => {
   test("canNavigateHistoryAtCursor only allows prompt boundaries", () => {
     const value = "a\nb\nc"
 
-    expect(canNavigateHistoryAtCursor("up", value, 0)).toBe(true)
+    expect(canNavigateHistoryAtCursor("up", value, 0)).toBe(false)
     expect(canNavigateHistoryAtCursor("down", value, 0)).toBe(false)
 
     expect(canNavigateHistoryAtCursor("up", value, 2)).toBe(false)
@@ -135,11 +135,14 @@ describe("prompt-input history", () => {
     expect(canNavigateHistoryAtCursor("up", value, 5)).toBe(false)
     expect(canNavigateHistoryAtCursor("down", value, 5)).toBe(true)
 
-    expect(canNavigateHistoryAtCursor("up", "abc", 0)).toBe(true)
+    expect(canNavigateHistoryAtCursor("up", "abc", 0)).toBe(false)
     expect(canNavigateHistoryAtCursor("down", "abc", 3)).toBe(true)
     expect(canNavigateHistoryAtCursor("up", "abc", 1)).toBe(false)
     expect(canNavigateHistoryAtCursor("down", "abc", 1)).toBe(false)
 
+    expect(canNavigateHistoryAtCursor("up", "", 0)).toBe(true)
+    expect(canNavigateHistoryAtCursor("down", "", 0)).toBe(true)
+
     expect(canNavigateHistoryAtCursor("up", "abc", 0, true)).toBe(true)
     expect(canNavigateHistoryAtCursor("up", "abc", 3, true)).toBe(true)
     expect(canNavigateHistoryAtCursor("down", "abc", 0, true)).toBe(true)

packages/app/src/components/prompt-input/history.ts

@@ -27,7 +27,7 @@ export function canNavigateHistoryAtCursor(direction: "up" | "down", text: strin
   const atStart = position === 0
   const atEnd = position === text.length
   if (inHistory) return atStart || atEnd
-  if (direction === "up") return position === 0
+  if (direction === "up") return position === 0 && text.length === 0
   return position === text.length
 }
 

packages/app/src/components/prompt-input/image-attachments.tsx

@@ -1,5 +1,6 @@
 import { Component, For, Show } from "solid-js"
 import { Icon } from "@opencode-ai/ui/icon"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import type { ImageAttachmentPart } from "@/context/prompt"
 
 type PromptImageAttachmentsProps = {
@@ -22,34 +23,36 @@ export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (p
       <div class="flex flex-wrap gap-2 px-3 pt-3">
         <For each={props.attachments}>
           {(attachment) => (
-            <div class="relative group">
-              <Show
-                when={attachment.mime.startsWith("image/")}
-                fallback={
-                  <div class={fallbackClass}>
-                    <Icon name="folder" class="size-6 text-text-weak" />
-                  </div>
-                }
-              >
-                <img
-                  src={attachment.dataUrl}
-                  alt={attachment.filename}
-                  class={imageClass}
-                  onClick={() => props.onOpen(attachment)}
-                />
-              </Show>
-              <button
-                type="button"
-                onClick={() => props.onRemove(attachment.id)}
-                class={removeClass}
-                aria-label={props.removeLabel}
-              >
-                <Icon name="close" class="size-3 text-text-weak" />
-              </button>
-              <div class={nameClass}>
-                <span class="text-10-regular text-white truncate block">{attachment.filename}</span>
+            <Tooltip value={attachment.filename} placement="top" contentClass="break-all">
+              <div class="relative group">
+                <Show
+                  when={attachment.mime.startsWith("image/")}
+                  fallback={
+                    <div class={fallbackClass}>
+                      <Icon name="folder" class="size-6 text-text-weak" />
+                    </div>
+                  }
+                >
+                  <img
+                    src={attachment.dataUrl}
+                    alt={attachment.filename}
+                    class={imageClass}
+                    onClick={() => props.onOpen(attachment)}
+                  />
+                </Show>
+                <button
+                  type="button"
+                  onClick={() => props.onRemove(attachment.id)}
+                  class={removeClass}
+                  aria-label={props.removeLabel}
+                >
+                  <Icon name="close" class="size-3 text-text-weak" />
+                </button>
+                <div class={nameClass}>
+                  <span class="text-10-regular text-white truncate block">{attachment.filename}</span>
+                </div>
               </div>
-            </div>
+            </Tooltip>
           )}
         </For>
       </div>

packages/app/src/components/prompt-input/paste.ts

@@ -0,0 +1,24 @@
+const LARGE_PASTE_CHARS = 8000
+const LARGE_PASTE_BREAKS = 120
+
+function largePaste(text: string) {
+  if (text.length >= LARGE_PASTE_CHARS) return true
+  let breaks = 0
+  for (const char of text) {
+    if (char !== "\n") continue
+    breaks += 1
+    if (breaks >= LARGE_PASTE_BREAKS) return true
+  }
+  return false
+}
+
+export function normalizePaste(text: string) {
+  if (!text.includes("\r")) return text
+  return text.replace(/\r\n?/g, "\n")
+}
+
+export function pasteMode(text: string) {
+  if (largePaste(text)) return "manual"
+  if (text.includes("\n") || text.includes("\r")) return "manual"
+  return "native"
+}

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

@@ -17,6 +17,7 @@ const optimistic: Array<{
 }> = []
 const optimisticSeeded: boolean[] = []
 const storedSessions: Record<string, Array<{ id: string; title?: string }>> = {}
+const promoted: Array<{ directory: string; sessionID: string }> = []
 const sentShell: string[] = []
 const syncedDirectories: string[] = []
 
@@ -86,6 +87,11 @@ beforeAll(async () => {
       agent: {
         current: () => ({ name: "agent" }),
       },
+      session: {
+        promote(directory: string, sessionID: string) {
+          promoted.push({ directory, sessionID })
+        },
+      },
     }),
   }))
 
@@ -140,7 +146,7 @@ beforeAll(async () => {
           add: (value: {
             directory?: string
             sessionID?: string
-            message: { agent: string; model: { providerID: string; modelID: string }; variant?: string }
+            message: { agent: string; model: { providerID: string; modelID: string; variant?: string } }
           }) => {
             optimistic.push(value)
             optimisticSeeded.push(
@@ -201,6 +207,7 @@ beforeEach(() => {
   enabledAutoAccept.length = 0
   optimistic.length = 0
   optimisticSeeded.length = 0
+  promoted.length = 0
   params = {}
   sentShell.length = 0
   syncedDirectories.length = 0
@@ -240,6 +247,11 @@ describe("prompt submit worktree selection", () => {
     expect(createdSessions).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
     expect(sentShell).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
     expect(syncedDirectories).toEqual(["/repo/worktree-a", "/repo/worktree-a", "/repo/worktree-b", "/repo/worktree-b"])
+    expect(promoted).toEqual([
+      { directory: "/repo/worktree-a", sessionID: "session-1" },
+      { directory: "/repo/worktree-b", sessionID: "session-2" },
+    ])
+    expect(syncedDirectories).toEqual(["/repo/worktree-a", "/repo/worktree-a", "/repo/worktree-b", "/repo/worktree-b"])
   })
 
   test("applies auto-accept to newly created sessions", async () => {
@@ -298,8 +310,7 @@ describe("prompt submit worktree selection", () => {
     expect(optimistic[0]).toMatchObject({
       message: {
         agent: "agent",
-        model: { providerID: "provider", modelID: "model" },
-        variant: "high",
+        model: { providerID: "provider", modelID: "model", variant: "high" },
       },
     })
   })

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

@@ -13,6 +13,7 @@ import { usePermission } from "@/context/permission"
 import { type ContextItem, type ImageAttachmentPart, type Prompt, usePrompt } from "@/context/prompt"
 import { useSDK } from "@/context/sdk"
 import { useSync } from "@/context/sync"
+import { promptProbe } from "@/testing/prompt"
 import { Identifier } from "@/utils/id"
 import { Worktree as WorktreeState } from "@/utils/worktree"
 import { buildRequestParts } from "./build-request-parts"
@@ -120,8 +121,7 @@ export async function sendFollowupDraft(input: FollowupSendInput) {
     role: "user",
     time: { created: Date.now() },
     agent: input.draft.agent,
-    model: input.draft.model,
-    variant: input.draft.variant,
+    model: { ...input.draft.model, variant: input.draft.variant },
   }
 
   const add = () =>
@@ -296,6 +296,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
 
     const currentModel = local.model.current()
     const currentAgent = local.agent.current()
+    const variant = local.model.variant.current()
     if (!currentModel || !currentAgent) {
       showToast({
         title: language.t("prompt.toast.modelAgentRequired.title"),
@@ -306,6 +307,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
 
     input.addToHistory(currentPrompt, mode)
     input.resetHistoryNavigation()
+    promptProbe.start()
 
     const projectDirectory = sdk.directory
     const isNewSession = !params.id
@@ -370,6 +372,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
         seed(sessionDirectory, created)
         session = created
         if (shouldAutoAccept) permission.enableAutoAccept(session.id, sessionDirectory)
+        local.session.promote(sessionDirectory, session.id)
         layout.handoff.setTabs(base64Encode(sessionDirectory), session.id)
         navigate(`/${base64Encode(sessionDirectory)}/session/${session.id}`)
       }
@@ -387,7 +390,6 @@ export function createPromptSubmit(input: PromptSubmitInput) {
       providerID: currentModel.provider.id,
     }
     const agent = currentAgent.name
-    const variant = local.model.variant.current()
     const context = prompt.context.items().slice()
     const draft: FollowupDraft = {
       sessionID: session.id,
@@ -425,6 +427,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
       return
     }
 
+    promptProbe.submit({ sessionID: session.id, directory: sessionDirectory })
     input.onSubmit?.()
 
     if (mode === "shell") {

packages/app/src/components/server/server-row.tsx

@@ -1,11 +1,11 @@
 import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
 import {
   children,
   createEffect,
   createMemo,
   createSignal,
   type JSXElement,
-  onCleanup,
   onMount,
   type ParentProps,
   Show,
@@ -46,12 +46,9 @@ export function ServerRow(props: ServerRowProps) {
   })
 
   onMount(() => {
-    check()
     if (typeof ResizeObserver !== "function") return
-    const observer = new ResizeObserver(check)
-    if (nameRef) observer.observe(nameRef)
-    if (versionRef) observer.observe(versionRef)
-    onCleanup(() => observer.disconnect())
+    createResizeObserver([nameRef, versionRef], check)
+    check()
   })
 
   const tooltipValue = () => (

packages/app/src/components/session-context-usage.tsx

@@ -7,6 +7,7 @@ import { useFile } from "@/context/file"
 import { useLayout } from "@/context/layout"
 import { useSync } from "@/context/sync"
 import { useLanguage } from "@/context/language"
+import { useProviders } from "@/hooks/use-providers"
 import { getSessionContextMetrics } from "@/components/session/session-context-metrics"
 import { useSessionLayout } from "@/pages/session/session-layout"
 import { createSessionTabs } from "@/pages/session/helpers"
@@ -32,6 +33,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
   const file = useFile()
   const layout = useLayout()
   const language = useLanguage()
+  const providers = useProviders()
   const { params, tabs, view } = useSessionLayout()
 
   const variant = createMemo(() => props.variant ?? "button")
@@ -50,7 +52,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
       }),
   )
 
-  const metrics = createMemo(() => getSessionContextMetrics(messages(), sync.data.provider.all))
+  const metrics = createMemo(() => getSessionContextMetrics(messages(), providers.all()))
   const context = createMemo(() => metrics().context)
   const cost = createMemo(() => {
     return usd().format(metrics().totalCost)