Merge branch 'dev' into brendan-cli-codesign

.github/VOUCHED.td

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

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

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

.github/workflows/publish.yml

@@ -67,7 +67,7 @@ jobs:
       tag: ${{ steps.version.outputs.tag }}
       repo: ${{ steps.version.outputs.repo }}
 
-  build-cli:
+  build-cli-linux-win:
     needs: version
     runs-on: blacksmith-4vcpu-ubuntu-2404
     if: github.repository == 'anomalyco/opencode'
@@ -94,41 +94,24 @@ jobs:
           OPENCODE_RELEASE: ${{ needs.version.outputs.release }}
           GH_REPO: ${{ needs.version.outputs.repo }}
           GH_TOKEN: ${{ steps.committer.outputs.token }}
+          OPENCODE_BUILD_OS: linux,win32
+          OPENCODE_SKIP_RELEASE_UPLOAD: "1"
 
       - uses: actions/upload-artifact@v4
         with:
-          name: opencode-cli
-          path: |
-            packages/opencode/dist/opencode-darwin*
-            packages/opencode/dist/opencode-linux*
+          name: opencode-cli-linux-win
+          path: packages/opencode/dist
 
-      - 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
+  build-cli-darwin:
+    needs: version
+    runs-on: macos-latest
     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
+          fetch-tags: true
+
+      - uses: ./.github/actions/setup-bun
 
       - name: Setup git committer
         id: committer
@@ -137,90 +120,50 @@ jobs:
           opencode-app-id: ${{ vars.OPENCODE_APP_ID }}
           opencode-app-secret: ${{ secrets.OPENCODE_APP_SECRET }}
 
-      - name: Azure login
-        uses: azure/login@v2
+      - uses: apple-actions/import-codesign-certs@v2
         with:
-          client-id: ${{ env.AZURE_CLIENT_ID }}
-          tenant-id: ${{ env.AZURE_TENANT_ID }}
-          subscription-id: ${{ env.AZURE_SUBSCRIPTION_ID }}
+          keychain: build
+          p12-file-base64: ${{ secrets.APPLE_CERTIFICATE }}
+          p12-password: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
 
-      - 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
+      - name: Resolve signing identity
         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"
-          )
+          CERT_INFO=$(security find-identity -v -p codesigning build.keychain | grep "Developer ID Application")
+          CERT_ID=$(echo "$CERT_INFO" | awk -F'"' '{print $2}')
+          if [ -z "$CERT_ID" ]; then
+            echo "Developer ID Application identity not found"
+            exit 1
+          fi
+          echo "CERT_ID=$CERT_ID" >> $GITHUB_ENV
 
-          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
+      - name: Build
+        id: build
         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
+          ./packages/opencode/script/build.ts
         env:
+          OPENCODE_VERSION: ${{ needs.version.outputs.version }}
+          OPENCODE_RELEASE: ${{ needs.version.outputs.release }}
+          GH_REPO: ${{ needs.version.outputs.repo }}
           GH_TOKEN: ${{ steps.committer.outputs.token }}
+          APPLE_SIGNING_IDENTITY: ${{ env.CERT_ID }}
+          OPENCODE_BUILD_OS: darwin
+          OPENCODE_SKIP_RELEASE_UPLOAD: "1"
+
+      - name: Verify darwin signatures
         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 }}"
+          for file in packages/opencode/dist/opencode-darwin-*/bin/opencode; do
+            codesign -vvv --verify "$file"
+          done
 
       - 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
+          name: opencode-cli-darwin
+          path: packages/opencode/dist
 
   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:
@@ -266,14 +209,6 @@ 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"
@@ -312,7 +247,6 @@ 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 }}
@@ -369,34 +303,10 @@ 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:
@@ -438,14 +348,6 @@ 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"
@@ -480,7 +382,6 @@ 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 }}
@@ -513,22 +414,6 @@ 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 }}
@@ -543,8 +428,8 @@ jobs:
   publish:
     needs:
       - version
-      - build-cli
-      - sign-cli-windows
+      - build-cli-darwin
+      - build-cli-linux-win
       - build-tauri
       - build-electron
     runs-on: blacksmith-4vcpu-ubuntu-2404
@@ -580,18 +465,9 @@ jobs:
 
       - uses: actions/download-artifact@v4
         with:
-          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
+          pattern: opencode-cli-*
           path: packages/opencode/dist
+          merge-multiple: true
 
       - uses: actions/download-artifact@v4
         if: needs.version.outputs.release

.github/workflows/sign-cli.yml

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

.gitignore

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

.opencode/agent/docs.md

@@ -0,0 +1,34 @@
+---
+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/command/changelog.md

@@ -1,46 +1,21 @@
 ---
-model: opencode/gpt-5.4
+model: opencode/kimi-k2.5
 ---
 
-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.
+create UPCOMING_CHANGELOG.md
 
-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.
+it should have sections
 
-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.
+```
+# TUI
 
-Rules:
+# Desktop
 
-- 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
+# Core
 
-**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**
+# Misc
+```
 
-<changelog_input>
+go through each PR merged since the last tag
 
-!`bun script/raw-changelog.ts $ARGUMENTS`
-
-</changelog_input>
+for each PR spawn a subagent to summarize what the PR was about. focus on user facing changes. if it was entirely internal or code related you can ignore it. also skip docs updates. each subagent should append its summary to UPCOMING_CHANGELOG.md into the appropriate section.

.opencode/plugins/smoke-theme.json

@@ -1,223 +0,0 @@
-{
-  "$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

@@ -1,891 +0,0 @@
-/** @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
-        hint?: JSX.Element
-        placeholders?: {
-          normal?: string[]
-          shell?: string[]
-        }
-      }) => JSX.Element
-      if (!("Prompt" in api.ui)) return null
-      const view = api.ui.Prompt
-      if (typeof view !== "function") return null
-      const Prompt = view as Prompt
-      const normal = [
-        `[SMOKE] route check for ${input.label}`,
-        "[SMOKE] confirm home_prompt slot override",
-        "[SMOKE] verify api.ui.Prompt rendering",
-      ]
-      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} placeholders={{ normal, shell }} />
-    },
-    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

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

.opencode/tui.json

@@ -1,18 +0,0 @@
-{
-  "$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

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

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-SQVfq41OQdGCgWuWqyqIN6aggL0r3Hzn2hJ9BwPJN+I=",
-    "aarch64-linux": "sha256-4w/1HhxsTzPFTHNf4JlnKle6Boz1gVTEedWG64T8E/M=",
-    "aarch64-darwin": "sha256-uMd+pU1u1yqP4OP/9461Tyy3zwwv/llr+rlllLjM98A=",
-    "x86_64-darwin": "sha256-BhIW3FPqKkM2vGfCrxXUvj5tarey33Q7dxCuaj5A+yU="
+    "x86_64-linux": "sha256-l3k/1fRIAQkj7zdVj2Ad3QZWeTOf1CuIM6vgMHRaK1s=",
+    "aarch64-linux": "sha256-iN3YtrKAUTK1GIwVMoVYkMXhtDZOiP7sSJ+Z8v4B5xw=",
+    "aarch64-darwin": "sha256-FFedoiPyfHGdzQnITz1SRV7xv2XoT9vzxIDp4EcVdkU=",
+    "x86_64-darwin": "sha256-0HiHkhJiN73UixUq5CC6YP6DkZzLar8lKnEL1aoiiHg="
   }
 }

nix/node_modules.nix

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

nix/opencode.nix

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

package.json

@@ -25,7 +25,7 @@
       "packages/slack"
     ],
     "catalog": {
-      "@effect/platform-node": "4.0.0-beta.43",
+      "@effect/platform-node": "4.0.0-beta.35",
       "@types/bun": "1.3.11",
       "@octokit/rest": "22.0.0",
       "@hono/zod-validator": "0.4.2",
@@ -45,15 +45,14 @@
       "dompurify": "3.3.1",
       "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.138",
+      "effect": "4.0.0-beta.35",
+      "ai": "5.0.124",
       "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",
@@ -104,7 +103,6 @@
     "protobufjs",
     "tree-sitter",
     "tree-sitter-bash",
-    "tree-sitter-powershell",
     "web-tree-sitter",
     "electron"
   ],
@@ -114,8 +112,8 @@
   },
   "patchedDependencies": {
     "@standard-community/standard-openapi@0.2.9": "patches/@standard-community%2Fstandard-openapi@0.2.9.patch",
-    "solid-js@1.9.10": "patches/solid-js@1.9.10.patch",
-    "@ai-sdk/provider-utils@4.0.21": "patches/@ai-sdk%2Fprovider-utils@4.0.21.patch",
-    "@ai-sdk/anthropic@3.0.64": "patches/@ai-sdk%2Fanthropic@3.0.64.patch"
+    "@openrouter/ai-sdk-provider@1.5.4": "patches/@openrouter%2Fai-sdk-provider@1.5.4.patch",
+    "@ai-sdk/xai@2.0.51": "patches/@ai-sdk%2Fxai@2.0.51.patch",
+    "solid-js@1.9.10": "patches/solid-js@1.9.10.patch"
   }
 }

packages/app/e2e/actions.ts

@@ -1,5 +1,5 @@
 import { base64Decode, base64Encode } from "@opencode-ai/util/encode"
-import { expect, type Locator, type Page, type Route } from "@playwright/test"
+import { expect, type Locator, type Page } from "@playwright/test"
 import fs from "node:fs/promises"
 import os from "node:os"
 import path from "node:path"
@@ -43,27 +43,6 @@ export async function defocus(page: Page) {
     .catch(() => undefined)
 }
 
-export async function withNoReplyPrompt<T>(page: Page, fn: () => Promise<T>) {
-  const url = "**/session/*/prompt_async"
-  const route = async (input: Route) => {
-    const body = input.request().postDataJSON()
-    await input.continue({
-      postData: JSON.stringify({ ...body, noReply: true }),
-      headers: {
-        ...input.request().headers(),
-        "content-type": "application/json",
-      },
-    })
-  }
-
-  await page.route(url, route)
-  try {
-    return await fn()
-  } finally {
-    await page.unroute(url, route)
-  }
-}
-
 async function terminalID(term: Locator) {
   const id = await term.getAttribute(terminalAttr)
   if (id) return id
@@ -333,11 +312,10 @@ export async function openSettings(page: Page) {
   return dialog
 }
 
-export async function seedProjects(page: Page, input: { directory: string; extra?: string[]; serverUrl?: string }) {
+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 defaultKey = "opencode.settings.dat:defaultServerUrl"
       const raw = localStorage.getItem(key)
       const parsed = (() => {
         if (!raw) return undefined
@@ -353,7 +331,6 @@ export async function seedProjects(page: Page, input: { directory: string; extra
       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 nextList = list.includes(args.serverUrl) ? list : [args.serverUrl, ...list]
 
       const add = (origin: string, directory: string) => {
         const current = nextProjects[origin]
@@ -379,18 +356,17 @@ export async function seedProjects(page: Page, input: { directory: string; extra
       localStorage.setItem(
         key,
         JSON.stringify({
-          list: nextList,
+          list,
           projects: nextProjects,
           lastProject,
         }),
       )
-      localStorage.setItem(defaultKey, args.serverUrl)
     },
-    { directory: input.directory, serverUrl: input.serverUrl ?? serverUrl, extra: input.extra ?? [] },
+    { directory: input.directory, serverUrl, extra: input.extra ?? [] },
   )
 }
 
-export async function createTestProject(input?: { serverUrl?: string }) {
+export async function createTestProject() {
   const root = await fs.mkdtemp(path.join(os.tmpdir(), "opencode-e2e-project-"))
   const id = `e2e-${path.basename(root)}`
 
@@ -405,7 +381,7 @@ export async function createTestProject(input?: { serverUrl?: string }) {
     stdio: "ignore",
   })
 
-  return resolveDirectory(root, input?.serverUrl)
+  return resolveDirectory(root)
 }
 
 export async function cleanupTestProject(directory: string) {
@@ -454,22 +430,22 @@ export async function waitSlug(page: Page, skip: string[] = []) {
   return next
 }
 
-export async function resolveSlug(slug: string, input?: { serverUrl?: string }) {
+export async function resolveSlug(slug: string) {
   const directory = base64Decode(slug)
   if (!directory) throw new Error(`Failed to decode workspace slug: ${slug}`)
-  const resolved = await resolveDirectory(directory, input?.serverUrl)
+  const resolved = await resolveDirectory(directory)
   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)
+export async function waitDir(page: Page, directory: string) {
+  const target = await resolveDirectory(directory)
   await expect
     .poll(
       async () => {
         await assertHealthy(page, "waitDir")
         const slug = slugFromUrl(page.url())
         if (!slug) return ""
-        return resolveSlug(slug, input)
+        return resolveSlug(slug)
           .then((item) => item.directory)
           .catch(() => "")
       },
@@ -479,25 +455,22 @@ export async function waitDir(page: Page, directory: string, input?: { serverUrl
   return { directory: target, slug: base64Encode(target) }
 }
 
-export async function waitSession(page: Page, input: { directory: string; sessionID?: string; serverUrl?: string }) {
-  const target = await resolveDirectory(input.directory, input.serverUrl)
+export async function waitSession(page: Page, input: { directory: string; sessionID?: string }) {
+  const target = await resolveDirectory(input.directory)
   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)
+        const resolved = await resolveSlug(slug).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 && current) return false
+        if (input.sessionID && sessionIDFromUrl(page.url()) !== input.sessionID) return false
 
         const state = await probeSession(page)
         if (input.sessionID && (!state || state.sessionID !== input.sessionID)) return false
-        if (!input.sessionID && state?.sessionID) return false
         if (state?.dir) {
-          const dir = await resolveDirectory(state.dir, input.serverUrl).catch(() => state.dir ?? "")
+          const dir = await resolveDirectory(state.dir).catch(() => state.dir ?? "")
           if (dir !== target) return false
         }
 
@@ -513,9 +486,9 @@ export async function waitSession(page: Page, input: { directory: string; sessio
   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)
+export async function waitSessionSaved(directory: string, sessionID: string, timeout = 30_000) {
+  const sdk = createSdk(directory)
+  const target = await resolveDirectory(directory)
 
   await expect
     .poll(
@@ -525,7 +498,7 @@ export async function waitSessionSaved(directory: string, sessionID: string, tim
           .then((x) => x.data)
           .catch(() => undefined)
         if (!data?.directory) return ""
-        return resolveDirectory(data.directory, serverUrl).catch(() => data.directory)
+        return resolveDirectory(data.directory).catch(() => data.directory)
       },
       { timeout },
     )
@@ -690,9 +663,8 @@ export async function cleanupSession(input: {
   sessionID: string
   directory?: string
   sdk?: ReturnType<typeof createSdk>
-  serverUrl?: string
 }) {
-  const sdk = input.sdk ?? (input.directory ? createSdk(input.directory, input.serverUrl) : undefined)
+  const sdk = input.sdk ?? (input.directory ? createSdk(input.directory) : 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)
@@ -1044,13 +1016,3 @@ 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/backend.ts

@@ -1,136 +0,0 @@
-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): 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",
-  } 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,9 +1,5 @@
 import { test as base, expect, type Page } from "@playwright/test"
-import { ManagedRuntime } from "effect"
 import type { E2EWindow } from "../src/testing/terminal"
-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,
@@ -15,132 +11,31 @@ import {
   waitSlug,
   waitSession,
 } from "./actions"
-import { openaiModel, withMockOpenAI } from "./prompt/mock"
 import { createSdk, dirSlug, getWorktree, 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> }>>
-}
-
 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",
-  }
-})()
-
-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 TestFixtures = {
-  llm: LLMFixture
   sdk: ReturnType<typeof createSdk>
   gotoSession: (sessionID?: string) => Promise<void>
-  withProject: <T>(callback: (project: ProjectHandle) => Promise<T>, options?: ProjectOptions) => Promise<T>
-  withBackendProject: <T>(callback: (project: ProjectHandle) => Promise<T>, options?: ProjectOptions) => Promise<T>
-  withMockProject: <T>(callback: (project: ProjectHandle) => Promise<T>, options?: ProjectOptions) => Promise<T>
+  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 = {
-  backend: {
-    url: string
-    sdk: (directory?: string) => ReturnType<typeof createSdk>
-  }
   directory: string
   slug: string
 }
 
 export const test = base.extend<TestFixtures, WorkerFixtures>({
-  backend: [
-    async ({}, use, workerInfo) => {
-      const handle = await startBackend(`w${workerInfo.workerIndex}`)
-      try {
-        await use({
-          url: handle.url,
-          sdk: (directory?: string) => createSdk(directory, handle.url),
-        })
-      } finally {
-        await handle.stop()
-      }
-    },
-    { scope: "worker" },
-  ],
-  llm: async ({}, use) => {
-    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)),
-        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()
-    }
-  },
   page: async ({ page }, use) => {
     let boundary: string | undefined
     setHealthPhase(page, "test")
@@ -190,93 +85,47 @@ export const test = base.extend<TestFixtures, WorkerFixtures>({
     await use(gotoSession)
   },
   withProject: async ({ page }, use) => {
-    await use((callback, options) => runProject(page, callback, options))
-  },
-  withBackendProject: async ({ page, backend }, use) => {
-    await use((callback, options) =>
-      runProject(page, callback, { ...options, serverUrl: backend.url, sdk: backend.sdk }),
-    )
-  },
-  withMockProject: async ({ page, llm, backend }, use) => {
-    await use((callback, options) =>
-      withMockOpenAI({
-        serverUrl: backend.url,
-        llmUrl: llm.url,
-        fn: () =>
-          runProject(page, callback, {
-            ...options,
-            model: options?.model ?? openaiModel,
-            serverUrl: backend.url,
-            sdk: backend.sdk,
-          }),
-      }),
-    )
+    await use(async (callback, options) => {
+      const root = await createTestProject()
+      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 waitSession(page, { directory: root, sessionID })
+        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()
+        const slug = await waitSlug(page)
+        return await callback({ directory: root, slug, gotoSession, trackSession, trackDirectory })
+      } finally {
+        setHealthPhase(page, "cleanup")
+        await Promise.allSettled(
+          Array.from(sessions, ([sessionID, directory]) => cleanupSession({ sessionID, directory })),
+        )
+        await Promise.allSettled(Array.from(dirs, (directory) => cleanupTestProject(directory)))
+        await cleanupTestProject(root)
+        setHealthPhase(page, "test")
+      }
+    })
   },
 })
 
-async function runProject<T>(
-  page: Page,
-  callback: (project: ProjectHandle) => Promise<T>,
-  options?: ProjectOptions & {
-    serverUrl?: string
-    sdk?: (directory?: string) => ReturnType<typeof createSdk>
-  },
-) {
-  const url = options?.serverUrl
-  const root = await createTestProject(url ? { serverUrl: url } : undefined)
-  const sdk = options?.sdk?.(root) ?? createSdk(root, url)
-  const sessions = new Map<string, string>()
-  const dirs = new Set<string>()
-  await options?.setup?.(root)
-  await seedStorage(page, {
-    directory: root,
-    extra: options?.extra,
-    model: options?.model,
-    serverUrl: url,
-  })
-
-  const gotoSession = async (sessionID?: string) => {
-    await page.goto(sessionPath(root, sessionID))
-    await waitSession(page, { directory: root, sessionID, serverUrl: url })
-    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 options?.beforeGoto?.({ directory: root, sdk })
-    await gotoSession()
-    const slug = await waitSlug(page)
-    return await callback({ directory: root, slug, gotoSession, trackSession, trackDirectory, sdk })
-  } finally {
-    setHealthPhase(page, "cleanup")
-    await Promise.allSettled(
-      Array.from(sessions, ([sessionID, directory]) => cleanupSession({ sessionID, directory, serverUrl: url })),
-    )
-    await Promise.allSettled(Array.from(dirs, (directory) => cleanupTestProject(directory)))
-    await cleanupTestProject(root)
-    setHealthPhase(page, "test")
-  }
-}
-
-async function seedStorage(
-  page: Page,
-  input: {
-    directory: string
-    extra?: string[]
-    model?: { providerID: string; modelID: string }
-    serverUrl?: string
-  },
-) {
+async function seedStorage(page: Page, input: { directory: string; extra?: string[] }) {
   await seedProjects(page, input)
-  await page.addInitScript((model: { providerID: string; modelID: string }) => {
+  await page.addInitScript(() => {
     const win = window as E2EWindow
     win.__opencode_e2e = {
       ...win.__opencode_e2e,
@@ -294,12 +143,12 @@ async function seedStorage(
     localStorage.setItem(
       "opencode.global.dat:model",
       JSON.stringify({
-        recent: [model],
+        recent: [{ providerID: "opencode", modelID: "big-pickle" }],
         user: [],
         variant: {},
       }),
     )
-  }, 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.fixme("smoke model selection updates prompt footer", async ({ page, gotoSession }) => {
+test("smoke model selection updates prompt footer", async ({ page, gotoSession }) => {
   await gotoSession()
 
   await page.locator(promptSelector).click()

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

@@ -10,7 +10,6 @@ import {
   waitSession,
   waitSessionSaved,
   waitSlug,
-  withNoReplyPrompt,
 } from "../actions"
 import { projectSwitchSelector, promptSelector, workspaceItemSelector, workspaceNewSessionSelector } from "../selectors"
 import { dirSlug, resolveDirectory } from "../utils"
@@ -82,10 +81,8 @@ test("switching back to a project opens the latest workspace session", async ({
         // Create a session by sending a prompt
         const prompt = page.locator(promptSelector)
         await expect(prompt).toBeVisible()
-        await withNoReplyPrompt(page, async () => {
-          await prompt.fill("test")
-          await page.keyboard.press("Enter")
-        })
+        await prompt.fill("test")
+        await page.keyboard.press("Enter")
 
         // Wait for the URL to update with the new session ID
         await expect.poll(() => sessionIDFromUrl(page.url()) ?? "", { timeout: 15_000 }).not.toBe("")

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

@@ -9,7 +9,6 @@ import {
   waitSession,
   waitSessionSaved,
   waitSlug,
-  withNoReplyPrompt,
 } from "../actions"
 import { promptSelector, workspaceItemSelector, workspaceNewSessionSelector } from "../selectors"
 import { createSdk } from "../utils"
@@ -59,10 +58,8 @@ async function createSessionFromWorkspace(
 
   const prompt = page.locator(promptSelector)
   await expect(prompt).toBeVisible()
-  await withNoReplyPrompt(page, async () => {
-    await prompt.fill(text)
-    await page.keyboard.press("Enter")
-  })
+  await prompt.fill(text)
+  await page.keyboard.press("Enter")
 
   await expect.poll(() => sessionIDFromUrl(page.url()) ?? "", { timeout: 15_000 }).not.toBe("")
   const sessionID = sessionIDFromUrl(page.url())

packages/app/e2e/prompt/mock.ts

@@ -1,56 +0,0 @@
-import { createSdk } from "../utils"
-
-export const openaiModel = { providerID: "openai", modelID: "gpt-5.3-chat-latest" }
-
-type Hit = { body: Record<string, unknown> }
-
-export function bodyText(hit: Hit) {
-  return JSON.stringify(hit.body)
-}
-
-export function titleMatch(hit: Hit) {
-  return bodyText(hit).includes("Generate a title for this conversation")
-}
-
-export function promptMatch(token: string) {
-  return (hit: Hit) => bodyText(hit).includes(token)
-}
-
-/**
- * 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)
-}
-
-export async function withMockOpenAI<T>(input: { serverUrl: string; llmUrl: string; fn: () => Promise<T> }) {
-  const sdk = createSdk(undefined, input.serverUrl)
-  const prev = await sdk.global.config.get().then((res) => res.data ?? {})
-
-  try {
-    await sdk.global.config.update({
-      config: {
-        ...prev,
-        model: `${openaiModel.providerID}/${openaiModel.modelID}`,
-        enabled_providers: ["openai"],
-        provider: {
-          ...prev.provider,
-          openai: {
-            ...prev.provider?.openai,
-            options: {
-              ...prev.provider?.openai?.options,
-              apiKey: "test-key",
-              baseURL: input.llmUrl,
-            },
-          },
-        },
-      },
-    })
-    return await input.fn()
-  } finally {
-    await sdk.global.config.update({ config: prev })
-  }
-}

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

@@ -1,52 +1,47 @@
 import { test, expect } from "../fixtures"
 import { promptSelector } from "../selectors"
-import { assistantText, sessionIDFromUrl, withSession } from "../actions"
-import { openaiModel, promptMatch, titleMatch, withMockOpenAI } from "./mock"
+import { cleanupSession, sessionIDFromUrl, 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,
-  llm,
-  backend,
-  withBackendProject,
-}) => {
+test("prompt succeeds when sync message endpoint is unreachable", async ({ page, sdk, gotoSession }) => {
   test.setTimeout(120_000)
 
   // Simulate Tailscale/VPN killing the long-lived sync connection
   await page.route("**/session/*/message", (route) => route.abort("connectionfailed"))
 
-  await withMockOpenAI({
-    serverUrl: backend.url,
-    llmUrl: llm.url,
-    fn: async () => {
-      const token = `E2E_ASYNC_${Date.now()}`
-      await llm.textMatch(titleMatch, "E2E Title")
-      await llm.textMatch(promptMatch(token), token)
+  await gotoSession()
 
-      await withBackendProject(
-        async (project) => {
-          await page.locator(promptSelector).click()
-          await page.keyboard.type(`Reply with exactly: ${token}`)
-          await page.keyboard.press("Enter")
+  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 expect(page).toHaveURL(/\/session\/[^/?#]+/, { timeout: 30_000 })
-          const sessionID = sessionIDFromUrl(page.url())!
-          project.trackSession(sessionID)
+  await expect(page).toHaveURL(/\/session\/[^/?#]+/, { timeout: 30_000 })
+  const sessionID = sessionIDFromUrl(page.url())!
 
-          await expect.poll(() => llm.calls()).toBeGreaterThanOrEqual(1)
-
-          await expect.poll(() => assistantText(project.sdk, sessionID), { timeout: 90_000 }).toContain(token)
-        },
-        {
-          model: openaiModel,
+  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 })
+  }
 })
 
 test("failed prompt send restores the composer input", async ({ page, sdk, gotoSession }) => {

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

@@ -1,13 +1,10 @@
 import type { ToolPart } from "@opencode-ai/sdk/v2/client"
 import type { Page } from "@playwright/test"
 import { test, expect } from "../fixtures"
-import { assistantText, sessionIDFromUrl } from "../actions"
+import { withSession } from "../actions"
 import { promptSelector } from "../selectors"
-import { createSdk } from "../utils"
-import { openaiModel, promptMatch, titleMatch, withMockOpenAI } from "./mock"
 
 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
@@ -16,15 +13,54 @@ 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: Sdk, sessionID: string, token: string) {
-  await expect.poll(() => assistantText(sdk, sessionID), { timeout: 90_000 }).toContain(token)
+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 shell(sdk: Sdk, sessionID: string, cmd: string, token: string) {
+async function shell(sdk: Parameters<typeof withSession>[0], sessionID: string, cmd: string, token: string) {
   await expect
     .poll(
       async () => {
@@ -43,133 +79,106 @@ async function shell(sdk: Sdk, sessionID: string, cmd: string, token: string) {
     .toContain(token)
 }
 
-test("prompt history restores unsent draft with arrow navigation", async ({
-  page,
-  llm,
-  backend,
-  withBackendProject,
-}) => {
+test("prompt history restores unsent draft with arrow navigation", async ({ page, sdk, gotoSession }) => {
   test.setTimeout(120_000)
 
-  await withMockOpenAI({
-    serverUrl: backend.url,
-    llmUrl: llm.url,
-    fn: async () => {
-      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 withSession(sdk, `e2e prompt history ${Date.now()}`, async (session) => {
+    await gotoSession(session.id)
 
-      await llm.textMatch(titleMatch, "E2E Title")
-      await llm.textMatch(promptMatch(firstToken), firstToken)
-      await llm.textMatch(promptMatch(secondToken), secondToken)
+    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 withBackendProject(
-        async (project) => {
-          const prompt = page.locator(promptSelector)
+    await prompt.click()
+    await page.keyboard.type(first)
+    await page.keyboard.press("Enter")
+    await wait(page, "")
+    await reply(sdk, session.id, firstToken)
 
-          await prompt.click()
-          await page.keyboard.type(first)
-          await page.keyboard.press("Enter")
-          await wait(page, "")
+    await prompt.click()
+    await page.keyboard.type(second)
+    await page.keyboard.press("Enter")
+    await wait(page, "")
+    await reply(sdk, session.id, secondToken)
 
-          await expect(page).toHaveURL(/\/session\/[^/?#]+/, { timeout: 30_000 })
-          const sessionID = sessionIDFromUrl(page.url())!
-          project.trackSession(sessionID)
-          await reply(project.sdk, sessionID, firstToken)
+    await prompt.click()
+    await page.keyboard.type(draft)
+    await wait(page, draft)
 
-          await prompt.click()
-          await page.keyboard.type(second)
-          await page.keyboard.press("Enter")
-          await wait(page, "")
-          await reply(project.sdk, sessionID, secondToken)
+    // Clear the draft before navigating history (ArrowUp only works when prompt is empty)
+    await prompt.fill("")
+    await wait(page, "")
 
-          await prompt.click()
-          await page.keyboard.type(draft)
-          await wait(page, draft)
+    await page.keyboard.press("ArrowUp")
+    await wait(page, second)
 
-          await prompt.fill("")
-          await wait(page, "")
+    await page.keyboard.press("ArrowUp")
+    await wait(page, first)
 
-          await page.keyboard.press("ArrowUp")
-          await wait(page, second)
+    await page.keyboard.press("ArrowDown")
+    await wait(page, second)
 
-          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, "")
-        },
-        {
-          model: openaiModel,
-        },
-      )
-    },
+    await page.keyboard.press("ArrowDown")
+    await wait(page, "")
   })
 })
 
-test.fixme("shell history stays separate from normal prompt history", async ({ page, sdk, gotoSession }) => {
+test("shell history stays separate from normal prompt history", async ({ page, sdk, gotoSession }) => {
   test.setTimeout(120_000)
 
-  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 withSession(sdk, `e2e shell history ${Date.now()}`, async (session) => {
+    await gotoSession(session.id)
 
-  await gotoSession()
+    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}`
 
-  const prompt = page.locator(promptSelector)
+    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)
 
-  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.type(second)
+    await page.keyboard.press("Enter")
+    await wait(page, "")
+    await shell(sdk, session.id, second, secondToken)
 
-  await expect(page).toHaveURL(/\/session\/[^/?#]+/, { timeout: 30_000 })
-  const sessionID = sessionIDFromUrl(page.url())!
-  await shell(sdk, sessionID, first, firstToken)
+    await prompt.click()
+    await page.keyboard.type("!")
+    await page.keyboard.press("ArrowUp")
+    await wait(page, second)
 
-  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("ArrowUp")
+    await wait(page, first)
 
-  await page.keyboard.press("Escape")
-  await wait(page, "")
+    await page.keyboard.press("ArrowDown")
+    await wait(page, second)
 
-  await prompt.click()
-  await page.keyboard.type("!")
-  await page.keyboard.press("ArrowUp")
-  await wait(page, second)
+    await page.keyboard.press("ArrowDown")
+    await wait(page, "")
 
-  await page.keyboard.press("ArrowUp")
-  await wait(page, first)
+    await page.keyboard.press("Escape")
+    await wait(page, "")
 
-  await page.keyboard.press("ArrowDown")
-  await wait(page, second)
+    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, "")
-
-  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)
+    await prompt.click()
+    await page.keyboard.press("ArrowUp")
+    await wait(page, normal)
+  })
 })

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

@@ -2,6 +2,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"
 
 const isBash = (part: unknown): part is ToolPart => {
   if (!part || typeof part !== "object") return false
@@ -10,12 +11,13 @@ const isBash = (part: unknown): part is ToolPart => {
   return "state" in part
 }
 
-test("shell mode runs a command in the project directory", async ({ page, withBackendProject }) => {
+test("shell mode runs a command in the project directory", async ({ page, withProject }) => {
   test.setTimeout(120_000)
 
-  await withBackendProject(async ({ directory, gotoSession, trackSession, sdk }) => {
+  await withProject(async ({ directory, gotoSession, trackSession }) => {
+    const sdk = createSdk(directory)
     const prompt = page.locator(promptSelector)
-    const cmd = process.platform === "win32" ? "dir" : "command ls"
+    const cmd = process.platform === "win32" ? "dir" : "ls"
 
     await gotoSession()
     await prompt.click()

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

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

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

@@ -1,9 +1,8 @@
 import { test, expect } from "../fixtures"
 import { promptSelector } from "../selectors"
-import { assistantText, sessionIDFromUrl } from "../actions"
-import { openaiModel, promptMatch, titleMatch, withMockOpenAI } from "./mock"
+import { cleanupSession, sessionIDFromUrl, withSession } from "../actions"
 
-test("can send a prompt and receive a reply", async ({ page, llm, backend, withBackendProject }) => {
+test("can send a prompt and receive a reply", async ({ page, sdk, gotoSession }) => {
   test.setTimeout(120_000)
 
   const pageErrors: string[] = []
@@ -12,44 +11,42 @@ test("can send a prompt and receive a reply", async ({ page, llm, backend, withB
   }
   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 withMockOpenAI({
-      serverUrl: backend.url,
-      llmUrl: llm.url,
-      fn: async () => {
-        const token = `E2E_OK_${Date.now()}`
+    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 },
+      )
 
-        await llm.textMatch(titleMatch, "E2E Title")
-        await llm.textMatch(promptMatch(token), token)
-
-        await withBackendProject(
-          async (project) => {
-            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
-            })()
-            project.trackSession(sessionID)
-
-            await expect.poll(() => llm.calls()).toBeGreaterThanOrEqual(1)
-
-            await expect.poll(() => assistantText(project.sdk, sessionID), { timeout: 30_000 }).toContain(token)
-          },
-          {
-            model: openaiModel,
-          },
-        )
-      },
-    })
+      .toContain(token)
   } finally {
     page.off("pageerror", onPageError)
+    await cleanupSession({ sdk, sessionID })
   }
 
   if (pageErrors.length > 0) {

packages/app/e2e/selectors.ts

@@ -19,8 +19,7 @@ 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 settingsCodeFontSelector = '[data-action="settings-code-font"]'
-export const settingsUIFontSelector = '[data-action="settings-ui-font"]'
+export const settingsFontSelector = '[data-action="settings-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"]'

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

@@ -1,9 +1,7 @@
 import { seedSessionTask, withSession } from "../actions"
 import { test, expect } from "../fixtures"
-import { inputMatch } from "../prompt/mock"
-import { promptSelector } from "../selectors"
 
-test("task tool child-session link does not trigger stale show errors", async ({ page, llm, withMockProject }) => {
+test("task tool child-session link does not trigger stale show errors", async ({ page, sdk, gotoSession }) => {
   test.setTimeout(120_000)
 
   const errs: string[] = []
@@ -12,37 +10,28 @@ test("task tool child-session link does not trigger stale show errors", async ({
   }
   page.on("pageerror", onError)
 
-  try {
-    await withMockProject(async ({ gotoSession, trackSession, sdk }) => {
-      await withSession(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(sdk, {
-          sessionID: session.id,
-          description: taskInput.description,
-          prompt: taskInput.prompt,
-        })
-        trackSession(child.sessionID)
-
-        await gotoSession(session.id)
-
-        const link = page
-          .locator("a.subagent-link")
-          .filter({ hasText: /open child session/i })
-          .first()
-        await expect(link).toBeVisible({ timeout: 30_000 })
-        await link.click()
-
-        await expect(page).toHaveURL(new RegExp(`/session/${child.sessionID}(?:[/?#]|$)`), { timeout: 30_000 })
-        await expect(page.locator(promptSelector)).toBeVisible({ timeout: 30_000 })
-        await expect.poll(() => errs, { timeout: 5_000 }).toEqual([])
-      })
+  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.",
     })
-  } finally {
-    page.off("pageerror", onError)
-  }
+
+    try {
+      await gotoSession(session.id)
+
+      const link = page
+        .locator("a.subagent-link")
+        .filter({ hasText: /open child session/i })
+        .first()
+      await expect(link).toBeVisible({ timeout: 30_000 })
+      await link.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)
+    }
+  })
 })

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

@@ -13,8 +13,6 @@ 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" }
@@ -23,13 +21,12 @@ async function withDockSession<T>(
   sdk: Sdk,
   title: string,
   fn: (session: { id: string; title: string }) => Promise<T>,
-  opts?: { permission?: PermissionRule[]; trackSession?: (sessionID: string) => void },
+  opts?: { permission?: PermissionRule[] },
 ) {
   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 {
@@ -37,17 +34,6 @@ 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>) {
@@ -107,7 +93,7 @@ async function todoDock(page: any, sessionID: string) {
 
   const write = async (driver: ComposerDriverState | undefined) => {
     await page.evaluate(
-      (input: { event: string; sessionID: string; driver: ComposerDriverState | undefined }) => {
+      (input) => {
         const win = window as ComposerWindow
         const composer = win.__opencode_e2e?.composer
         if (!composer?.enabled) throw new Error("Composer e2e driver is not enabled")
@@ -132,7 +118,7 @@ async function todoDock(page: any, sessionID: string) {
   }
 
   const read = () =>
-    page.evaluate((sessionID: string) => {
+    page.evaluate((sessionID) => {
       const win = window as ComposerWindow
       return win.__opencode_e2e?.composer?.sessions?.[sessionID]?.probe ?? null
     }, sessionID) as Promise<ComposerProbeState | null>
@@ -200,8 +186,6 @@ 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,
@@ -220,8 +204,7 @@ async function withMockPermission<T>(
 
   const reply = async (route: any) => {
     const url = new URL(route.request().url())
-    const parts = url.pathname.split("/").filter(Boolean)
-    const id = parts.at(-1) === "reply" ? parts.at(-2) : parts.at(-1)
+    const id = url.pathname.split("/").pop()
     pending = pending.filter((item) => item.id !== id)
     await route.fulfill({
       status: 200,
@@ -230,10 +213,8 @@ async function withMockPermission<T>(
     })
   }
 
-  await page.route(listUrl, list)
-  for (const item of replyUrls) {
-    await page.route(item, reply)
-  }
+  await page.route("**/permission", list)
+  await page.route("**/session/*/permissions/*", reply)
 
   const sessionList = opts?.child
     ? async (route: any) => {
@@ -261,418 +242,289 @@ async function withMockPermission<T>(
   try {
     return await fn(state)
   } finally {
-    await page.unroute(listUrl, list)
-    for (const item of replyUrls) {
-      await page.unroute(item, reply)
-    }
+    await page.unroute("**/permission", list)
+    await page.unroute("**/session/*/permissions/*", reply)
     if (sessionList) await page.unroute("**/session?*", sessionList)
   }
 }
 
-test("default dock shows prompt input", async ({ page, withBackendProject }) => {
-  await withBackendProject(async (project) => {
-    await withDockSession(
-      project.sdk,
-      "e2e composer dock default",
-      async (session) => {
-        await project.gotoSession(session.id)
+test("default dock shows prompt input", async ({ page, sdk, gotoSession }) => {
+  await withDockSession(sdk, "e2e composer dock default", async (session) => {
+    await 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(questionDockSelector)).toHaveCount(0)
+    await expect(page.locator(permissionDockSelector)).toHaveCount(0)
 
-        await page.locator(promptSelector).click()
-        await expect(page.locator(promptSelector)).toBeFocused()
-      },
-      { trackSession: project.trackSession },
-    )
+    await page.locator(promptSelector).click()
+    await expect(page.locator(promptSelector)).toBeFocused()
   })
 })
 
-test("auto-accept toggle works before first submit", async ({ page, withBackendProject }) => {
-  await withBackendProject(async ({ gotoSession }) => {
-    await gotoSession()
+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")
+  const button = page.locator('[data-action="prompt-permissions"]').first()
+  await expect(button).toBeVisible()
+  await expect(button).toHaveAttribute("aria-pressed", "false")
 
-    await setAutoAccept(page, true)
+  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)
+
+      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)
 
-test("blocked question flow unblocks after submit", async ({ page, llm, withMockProject }) => {
-  await withMockProject(async (project) => {
-    await withDockSession(
-      project.sdk,
-      "e2e composer dock question",
-      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)
-          await expectQuestionBlocked(page)
-
-          await dock.locator('[data-slot="question-option"]').first().click()
-          await dock.getByRole("button", { name: /submit/i }).click()
-
-          await expectQuestionOpen(page)
-        })
+        await clearPermissionDock(page, /allow once/i)
+        await state.resolved()
+        await page.goto(page.url())
+        await expectPermissionOpen(page)
       },
-      { trackSession: project.trackSession },
     )
   })
 })
 
-test("blocked question flow supports keyboard shortcuts", async ({ page, llm, withMockProject }) => {
-  await withMockProject(async (project) => {
-    await withDockSession(
-      project.sdk,
-      "e2e composer dock question keyboard",
-      async (session) => {
-        await withDockSeed(project.sdk, session.id, async () => {
-          await project.gotoSession(session.id)
+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 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)
-        })
+        await clearPermissionDock(page, /deny/i)
+        await state.resolved()
+        await page.goto(page.url())
+        await expectPermissionOpen(page)
       },
-      { trackSession: project.trackSession },
     )
   })
 })
 
-test("blocked question flow supports escape dismiss", async ({ page, llm, withMockProject }) => {
-  await withMockProject(async (project) => {
-    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)
-        })
+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" },
       },
-      { trackSession: project.trackSession },
-    )
-  })
-})
+      undefined,
+      async (state) => {
+        await page.goto(page.url())
+        await expectPermissionBlocked(page)
 
-test("blocked permission flow supports allow once", async ({ page, withBackendProject }) => {
-  await withBackendProject(async (project) => {
-    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_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)
-          },
-        )
+        await clearPermissionDock(page, /allow always/i)
+        await state.resolved()
+        await page.goto(page.url())
+        await expectPermissionOpen(page)
       },
-      { trackSession: project.trackSession },
-    )
-  })
-})
-
-test("blocked permission flow supports reject", async ({ page, withBackendProject }) => {
-  await withBackendProject(async (project) => {
-    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)
-
-            await clearPermissionDock(page, /deny/i)
-            await state.resolved()
-            await page.goto(page.url())
-            await expectPermissionOpen(page)
-          },
-        )
-      },
-      { trackSession: project.trackSession },
-    )
-  })
-})
-
-test("blocked permission flow supports allow always", async ({ page, withBackendProject }) => {
-  await withBackendProject(async (project) => {
-    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 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,
-  withMockProject,
+  sdk,
+  gotoSession,
 }) => {
-  const questions = [
-    {
-      header: "Child input",
-      question: "Pick one child option",
-      options: [
-        { label: "Continue", description: "Continue child" },
-        { label: "Stop", description: "Stop child" },
-      ],
-    },
-  ]
-  await withMockProject(async (project) => {
-    await withDockSession(
-      project.sdk,
-      "e2e composer dock child question parent",
-      async (session) => {
-        await project.gotoSession(session.id)
+  await withDockSession(sdk, "e2e composer dock child question parent", async (session) => {
+    await 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)
+    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(project.sdk, child.id, async () => {
-            await llm.toolMatch(inputMatch({ questions }), "question", { questions })
-            await seedSessionQuestion(project.sdk, {
-              sessionID: child.id,
-              questions,
-            })
+    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" },
+              ],
+            },
+          ],
+        })
 
-            const dock = page.locator(questionDockSelector)
-            await expectQuestionBlocked(page)
+        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 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 },
-    )
+        await expectQuestionOpen(page)
+      })
+    } finally {
+      await cleanupSession({ sdk, sessionID: child.id })
+    }
   })
 })
 
 test("child session permission request blocks parent dock and supports allow once", async ({
   page,
-  withBackendProject,
+  sdk,
+  gotoSession,
 }) => {
-  await withBackendProject(async (project) => {
-    await withDockSession(
-      project.sdk,
-      "e2e composer dock child permission parent",
-      async (session) => {
-        await project.gotoSession(session.id)
-        await setAutoAccept(page, false)
+  await withDockSession(sdk, "e2e composer dock child permission parent", async (session) => {
+    await 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)
+    const child = await 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")
 
-        try {
-          await withMockPermission(
-            page,
-            {
-              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)
+    try {
+      await withMockPermission(
+        page,
+        {
+          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 clearPermissionDock(page, /allow once/i)
-              await state.resolved()
-              await page.goto(page.url())
+          await clearPermissionDock(page, /allow once/i)
+          await state.resolved()
+          await page.goto(page.url())
 
-              await expectPermissionOpen(page)
-            },
-          )
-        } finally {
-          await cleanupSession({ sdk: project.sdk, sessionID: child.id })
-        }
-      },
-      { trackSession: project.trackSession },
-    )
+          await expectPermissionOpen(page)
+        },
+      )
+    } finally {
+      await cleanupSession({ sdk, sessionID: child.id })
+    }
   })
 })
 
-test("todo dock transitions and collapse behavior", async ({ page, withBackendProject }) => {
-  await withBackendProject(async (project) => {
-    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()
+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()
 
-        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"])
+    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.collapse()
+      await dock.expectCollapsed(["pending", "in_progress"])
 
-          await dock.expand()
-          await dock.expectOpen(["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 },
-    )
+      await dock.finish([
+        { content: "first task", status: "completed", priority: "high" },
+        { content: "second task", status: "cancelled", priority: "medium" },
+      ])
+      await dock.expectClosed()
+    } finally {
+      await dock.clear()
+    }
   })
 })
 
-test("keyboard focus stays off prompt while blocked", async ({ page, llm, withMockProject }) => {
-  const questions = [
-    {
-      header: "Need input",
-      question: "Pick one option",
-      options: [{ label: "Continue", description: "Continue now" }],
-    },
-  ]
-  await withMockProject(async (project) => {
-    await withDockSession(
-      project.sdk,
-      "e2e composer dock keyboard",
-      async (session) => {
-        await withDockSeed(project.sdk, session.id, async () => {
-          await project.gotoSession(session.id)
+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)
 
-          await llm.toolMatch(inputMatch({ questions }), "question", { questions })
-          await seedSessionQuestion(project.sdk, {
-            sessionID: session.id,
-            questions,
-          })
+      await seedSessionQuestion(sdk, {
+        sessionID: session.id,
+        questions: [
+          {
+            header: "Need input",
+            question: "Pick one option",
+            options: [{ label: "Continue", description: "Continue now" }],
+          },
+        ],
+      })
 
-          await expectQuestionBlocked(page)
+      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 },
-    )
+      await page.locator("main").click({ position: { x: 5, y: 5 } })
+      await page.keyboard.type("abc")
+      await expect(page.locator(promptSelector)).toHaveCount(0)
+    })
   })
 })

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

@@ -8,11 +8,11 @@ import {
   waitSession,
   waitSessionIdle,
   waitSlug,
-  withNoReplyPrompt,
 } from "../actions"
 import {
   promptAgentSelector,
   promptModelSelector,
+  promptSelector,
   promptVariantSelector,
   workspaceItemSelector,
   workspaceNewSessionSelector,
@@ -28,17 +28,7 @@ type Footer = {
 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 }>
+  model?: { providerID: string; modelID: string }
 }
 
 const escape = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
@@ -60,86 +50,6 @@ async function probe(page: Page): Promise<Probe | 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()),
@@ -172,15 +82,31 @@ async function waitModel(page: Page, value: string) {
 async function choose(page: Page, root: string, value: string) {
   const select = page.locator(root)
   await expect(select).toBeVisible()
-  await pickAgent(page, value)
+  await select.locator('[data-action], [data-slot="select-select-trigger"]').first().click()
+  const item = page
+    .locator('[data-slot="select-select-item"]')
+    .filter({ hasText: new RegExp(`^\\s*${escape(value)}\\s*$`) })
+    .first()
+  await expect(item).toBeVisible()
+  await item.click()
 }
 
 async function variantCount(page: Page) {
-  return (await probe(page))?.variants?.length ?? 0
+  const select = page.locator(promptVariantSelector)
+  await expect(select).toBeVisible()
+  await select.locator('[data-slot="select-select-trigger"]').click()
+  const count = await page.locator('[data-slot="select-select-item"]').count()
+  await page.keyboard.press("Escape")
+  return count
 }
 
 async function agents(page: Page) {
-  return ((await probe(page))?.agents ?? []).map((item) => item.name).filter(Boolean)
+  const select = page.locator(promptAgentSelector)
+  await expect(select).toBeVisible()
+  await select.locator('[data-action], [data-slot="select-select-trigger"]').first().click()
+  const labels = await page.locator('[data-slot="select-select-item-label"]').allTextContents()
+  await page.keyboard.press("Escape")
+  return labels.map((item) => item.trim()).filter(Boolean)
 }
 
 async function ensureVariant(page: Page, directory: string): Promise<Footer> {
@@ -206,23 +132,48 @@ async function ensureVariant(page: Page, directory: string): Promise<Footer> {
 
 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")
+  const select = page.locator(promptVariantSelector)
+  await expect(select).toBeVisible()
+  await select.locator('[data-slot="select-select-trigger"]').click()
 
-  await pickVariant(page, next)
-  return waitFooter(page, { agent: current.agent, model: current.model, variant: next })
+  const items = page.locator('[data-slot="select-select-item"]')
+  const count = await items.count()
+  if (count < 2) throw new Error("Current model has no alternate variant to select")
+
+  for (let i = 0; i < count; i++) {
+    const item = items.nth(i)
+    const next = await text(item.locator('[data-slot="select-select-item-label"]').first())
+    if (!next || next === current.variant) continue
+    await item.click()
+    return waitFooter(page, { agent: current.agent, model: current.model, variant: next })
+  }
+
+  throw new Error("Failed to choose a different variant")
 }
 
-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 chooseOtherModel(page: Page): Promise<Footer> {
+  const current = await read(page)
+  const button = page.locator(`${promptModelSelector} [data-action="prompt-model"]`)
+  await expect(button).toBeVisible()
+  await button.click()
+
+  const dialog = page.getByRole("dialog")
+  await expect(dialog).toBeVisible()
+  const items = dialog.locator('[data-slot="list-item"]')
+  const count = await items.count()
+  expect(count).toBeGreaterThan(1)
+
+  for (let i = 0; i < count; i++) {
+    const item = items.nth(i)
+    const selected = (await item.getAttribute("data-selected")) === "true"
+    if (selected) continue
+    await item.click()
+    await expect(dialog).toHaveCount(0)
+    await expect.poll(async () => (await read(page)).model !== current.model, { timeout: 30_000 }).toBe(true)
+    return read(page)
+  }
+
+  throw new Error("Failed to choose a different model")
 }
 
 async function goto(page: Page, directory: string, sessionID?: string) {
@@ -231,14 +182,11 @@ async function goto(page: Page, directory: string, sessionID?: string) {
 }
 
 async function submit(page: Page, value: string) {
-  const prompt = page.locator('[data-component="prompt-input"]')
+  const prompt = page.locator(promptSelector)
   await expect(prompt).toBeVisible()
-
-  await withNoReplyPrompt(page, async () => {
-    await prompt.click()
-    await prompt.fill(value)
-    await prompt.press("Enter")
-  })
+  await prompt.click()
+  await prompt.fill(value)
+  await prompt.press("Enter")
 
   await expect.poll(() => sessionIDFromUrl(page.url()) ?? "", { timeout: 30_000 }).not.toBe("")
   const id = sessionIDFromUrl(page.url())
@@ -301,14 +249,17 @@ async function newWorkspaceSession(page: Page, slug: string) {
   return waitSession(page, { directory: next.directory }).then((item) => item.directory)
 }
 
-test("session model restore per session without leaking into new sessions", async ({ page, withProject }) => {
+test("session model and variant restore per session without leaking into new sessions", async ({
+  page,
+  withProject,
+}) => {
   await page.setViewportSize({ width: 1440, height: 900 })
 
   await withProject(async ({ directory, gotoSession, trackSession }) => {
     await gotoSession()
 
-    const firstState = await chooseOtherModel(page)
-    const firstKey = await currentModel(page)
+    await ensureVariant(page, directory)
+    const firstState = await chooseDifferentVariant(page)
     const first = await submit(page, `session variant ${Date.now()}`)
     trackSession(first)
     await waitUser(directory, first)
@@ -318,10 +269,10 @@ test("session model restore per session without leaking into new sessions", asyn
     await waitFooter(page, firstState)
 
     await gotoSession()
-    const fresh = await read(page)
-    expect(fresh.model).not.toBe(firstState.model)
+    const fresh = await ensureVariant(page, directory)
+    expect(fresh.variant).not.toBe(firstState.variant)
 
-    const secondState = await chooseOtherModel(page, [firstKey])
+    const secondState = await chooseOtherModel(page)
     const second = await submit(page, `session model ${Date.now()}`)
     trackSession(second)
     await waitUser(directory, second)
@@ -343,8 +294,8 @@ test("session model restore across workspaces", async ({ page, withProject }) =>
   await withProject(async ({ directory: root, slug, gotoSession, trackDirectory, trackSession }) => {
     await gotoSession()
 
-    const firstState = await chooseOtherModel(page)
-    const firstKey = await currentModel(page)
+    await ensureVariant(page, root)
+    const firstState = await chooseDifferentVariant(page)
     const first = await submit(page, `root session ${Date.now()}`)
     trackSession(first, root)
     await waitUser(root, first)
@@ -356,8 +307,7 @@ test("session model restore across workspaces", async ({ page, withProject }) =>
     const oneDir = await newWorkspaceSession(page, one.slug)
     trackDirectory(oneDir)
 
-    const secondState = await chooseOtherModel(page, [firstKey])
-    const secondKey = await currentModel(page)
+    const secondState = await chooseOtherModel(page)
     const second = await submit(page, `workspace one ${Date.now()}`)
     trackSession(second, oneDir)
     await waitUser(oneDir, second)
@@ -366,7 +316,8 @@ test("session model restore across workspaces", async ({ page, withProject }) =>
     const twoDir = await newWorkspaceSession(page, two.slug)
     trackDirectory(twoDir)
 
-    const thirdState = await chooseOtherModel(page, [firstKey, secondKey])
+    await ensureVariant(page, twoDir)
+    const thirdState = await chooseDifferentVariant(page)
     const third = await submit(page, `workspace two ${Date.now()}`)
     trackSession(third, twoDir)
     await waitUser(twoDir, third)

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

@@ -1,6 +1,6 @@
 import { waitSessionIdle, withSession } from "../actions"
 import { test, expect } from "../fixtures"
-import { inputMatch } from "../prompt/mock"
+import { createSdk } from "../utils"
 
 const count = 14
 
@@ -40,14 +40,7 @@ function edit(file: string, prev: string, next: string) {
   )
 }
 
-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(inputMatch({ patchText }), "apply_patch", { patchText })
+async function patch(sdk: ReturnType<typeof createSdk>, sessionID: string, patchText: string) {
   await sdk.session.promptAsync({
     sessionID,
     agent: "build",
@@ -61,11 +54,6 @@ async function patchWithMock(
     parts: [{ type: "text", text: "Apply the provided patch exactly once." }],
   })
 
-  // Wait for the agent loop to actually start before checking idle.
-  // promptAsync is fire-and-forget — without this, waitSessionIdle can
-  // return immediately because the session status is still undefined.
-  await expect.poll(() => llm.calls().then((c) => c > callsBefore), { timeout: 30_000 }).toBe(true)
-
   await waitSessionIdle(sdk, sessionID, 120_000)
 }
 
@@ -245,7 +233,7 @@ async function fileOverflow(page: Parameters<typeof test>[0]["page"]) {
   }
 }
 
-test("review applies inline comment clicks without horizontal overflow", async ({ page, llm, withMockProject }) => {
+test("review applies inline comment clicks without horizontal overflow", async ({ page, withProject }) => {
   test.setTimeout(180_000)
 
   const tag = `review-comment-${Date.now()}`
@@ -254,15 +242,16 @@ test("review applies inline comment clicks without horizontal overflow", async (
 
   await page.setViewportSize({ width: 1280, height: 900 })
 
-  await withMockProject(async (project) => {
-    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 withProject(async (project) => {
+    const sdk = createSdk(project.directory)
+
+    await withSession(sdk, `e2e review comment ${tag}`, async (session) => {
+      await patch(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 ?? [])
+            const diff = await sdk.session.diff({ sessionID: session.id }).then((res) => res.data ?? [])
             return diff.length
           },
           { timeout: 60_000 },
@@ -293,7 +282,7 @@ test("review applies inline comment clicks without horizontal overflow", async (
   })
 })
 
-test("review file comments submit on click without clipping actions", async ({ page, llm, withMockProject }) => {
+test("review file comments submit on click without clipping actions", async ({ page, withProject }) => {
   test.setTimeout(180_000)
 
   const tag = `review-file-comment-${Date.now()}`
@@ -302,15 +291,16 @@ test("review file comments submit on click without clipping actions", async ({ p
 
   await page.setViewportSize({ width: 1280, height: 900 })
 
-  await withMockProject(async (project) => {
-    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 withProject(async (project) => {
+    const sdk = createSdk(project.directory)
+
+    await withSession(sdk, `e2e review file comment ${tag}`, async (session) => {
+      await patch(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 ?? [])
+            const diff = await sdk.session.diff({ sessionID: session.id }).then((res) => res.data ?? [])
             return diff.length
           },
           { timeout: 60_000 },
@@ -342,7 +332,8 @@ test("review file comments submit on click without clipping actions", async ({ p
   })
 })
 
-test.fixme("review keeps scroll position after a live diff update", async ({ page, llm, withMockProject }) => {
+test("review keeps scroll position after a live diff update", async ({ page, withProject }) => {
+  test.skip(Boolean(process.env.CI), "Flaky in CI for now.")
   test.setTimeout(180_000)
 
   const tag = `review-${Date.now()}`
@@ -352,15 +343,16 @@ test.fixme("review keeps scroll position after a live diff update", async ({ pag
 
   await page.setViewportSize({ width: 1600, height: 1000 })
 
-  await withMockProject(async (project) => {
-    await withSession(project.sdk, `e2e review ${tag}`, async (session) => {
-      project.trackSession(session.id)
-      await patchWithMock(llm, project.sdk, session.id, seed(list))
+  await withProject(async (project) => {
+    const sdk = createSdk(project.directory)
+
+    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)
+            const info = await sdk.session.get({ sessionID: session.id }).then((res) => res.data)
             return info?.summary?.files ?? 0
           },
           { timeout: 60_000 },
@@ -370,7 +362,7 @@ test.fixme("review keeps scroll position after a live diff update", async ({ pag
       await expect
         .poll(
           async () => {
-            const diff = await project.sdk.session.diff({ sessionID: session.id }).then((res) => res.data ?? [])
+            const diff = await sdk.session.diff({ sessionID: session.id }).then((res) => res.data ?? [])
             return diff.length
           },
           { timeout: 60_000 },
@@ -387,16 +379,15 @@ test.fixme("review keeps scroll position after a live diff update", async ({ pag
       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 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, "\\$&")),
-        })
+        .getByRole("heading", { level: 3, name: new RegExp(hit.file.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")) })
         .first()
       await expect(row).toBeVisible()
       await row.evaluate((el) => el.scrollIntoView({ block: "center" }))
@@ -405,12 +396,12 @@ test.fixme("review keeps scroll position after a live diff update", async ({ pag
       const prev = await spot(page, hit.file)
       if (!prev) throw new Error(`missing review row for ${hit.file}`)
 
-      await patchWithMock(llm, project.sdk, session.id, edit(hit.file, hit.mark, next))
+      await patch(sdk, session.id, edit(hit.file, hit.mark, next))
 
       await expect
         .poll(
           async () => {
-            const diff = await project.sdk.session.diff({ sessionID: session.id }).then((res) => res.data ?? [])
+            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 : ""
           },

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

@@ -49,16 +49,15 @@ async function seedConversation(input: {
   return { prompt, userMessageID }
 }
 
-test("slash undo sets revert and restores prior prompt", async ({ page, withBackendProject }) => {
+test("slash undo sets revert and restores prior prompt", async ({ page, withProject }) => {
   test.setTimeout(120_000)
 
   const token = `undo_${Date.now()}`
 
-  await withBackendProject(async (project) => {
-    const sdk = project.sdk
+  await withProject(async (project) => {
+    const sdk = createSdk(project.directory)
 
     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 })
@@ -82,16 +81,15 @@ test("slash undo sets revert and restores prior prompt", async ({ page, withBack
   })
 })
 
-test("slash redo clears revert and restores latest state", async ({ page, withBackendProject }) => {
+test("slash redo clears revert and restores latest state", async ({ page, withProject }) => {
   test.setTimeout(120_000)
 
   const token = `redo_${Date.now()}`
 
-  await withBackendProject(async (project) => {
-    const sdk = project.sdk
+  await withProject(async (project) => {
+    const sdk = createSdk(project.directory)
 
     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 })
@@ -130,17 +128,16 @@ test("slash redo clears revert and restores latest state", async ({ page, withBa
   })
 })
 
-test("slash undo/redo traverses multi-step revert stack", async ({ page, withBackendProject }) => {
+test("slash undo/redo traverses multi-step revert stack", async ({ page, withProject }) => {
   test.setTimeout(120_000)
 
   const firstToken = `undo_redo_first_${Date.now()}`
   const secondToken = `undo_redo_second_${Date.now()}`
 
-  await withBackendProject(async (project) => {
-    const sdk = project.sdk
+  await withProject(async (project) => {
+    const sdk = createSdk(project.directory)
 
     await withSession(sdk, `e2e undo redo stack ${Date.now()}`, async (session) => {
-      project.trackSession(session.id)
       await project.gotoSession(session.id)
 
       const first = await seedConversation({

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

@@ -31,156 +31,144 @@ async function seedMessage(sdk: Sdk, sessionID: string) {
     .toBeGreaterThan(0)
 }
 
-test("session can be renamed via header menu", async ({ page, withBackendProject }) => {
+test("session can be renamed via header menu", async ({ page, sdk, gotoSession }) => {
   const stamp = Date.now()
   const originalTitle = `e2e rename test ${stamp}`
   const renamedTitle = `e2e renamed ${stamp}`
 
-  await withBackendProject(async (project) => {
-    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)
+  await withSession(sdk, originalTitle, async (session) => {
+    await seedMessage(sdk, session.id)
+    await gotoSession(session.id)
+    await expect(page.getByRole("heading", { level: 1 }).first()).toHaveText(originalTitle)
 
-      const menu = await openSessionMoreMenu(page, session.id)
-      await clickMenuItem(menu, /rename/i)
+    const menu = await openSessionMoreMenu(page, session.id)
+    await clickMenuItem(menu, /rename/i)
 
-      const input = page.locator(".scroll-view__viewport").locator(inlineInputSelector).first()
-      await expect(input).toBeVisible()
-      await expect(input).toBeFocused()
-      await input.fill(renamedTitle)
-      await expect(input).toHaveValue(renamedTitle)
-      await input.press("Enter")
+    const input = page.locator(".scroll-view__viewport").locator(inlineInputSelector).first()
+    await expect(input).toBeVisible()
+    await expect(input).toBeFocused()
+    await input.fill(renamedTitle)
+    await expect(input).toHaveValue(renamedTitle)
+    await input.press("Enter")
 
-      await expect
-        .poll(
-          async () => {
-            const data = await project.sdk.session.get({ sessionID: session.id }).then((r) => r.data)
-            return data?.title
-          },
-          { timeout: 30_000 },
-        )
-        .toBe(renamedTitle)
+    await expect
+      .poll(
+        async () => {
+          const data = await sdk.session.get({ sessionID: session.id }).then((r) => r.data)
+          return data?.title
+        },
+        { timeout: 30_000 },
+      )
+      .toBe(renamedTitle)
 
-      await expect(page.getByRole("heading", { level: 1 }).first()).toHaveText(renamedTitle)
-    })
+    await expect(page.getByRole("heading", { level: 1 }).first()).toHaveText(renamedTitle)
   })
 })
 
-test("session can be archived via header menu", async ({ page, withBackendProject }) => {
+test("session can be archived via header menu", async ({ page, sdk, gotoSession }) => {
   const stamp = Date.now()
   const title = `e2e archive test ${stamp}`
 
-  await withBackendProject(async (project) => {
-    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 withSession(sdk, title, async (session) => {
+    await seedMessage(sdk, session.id)
+    await gotoSession(session.id)
+    const menu = await openSessionMoreMenu(page, session.id)
+    await clickMenuItem(menu, /archive/i)
 
-      await expect
-        .poll(
-          async () => {
-            const data = await project.sdk.session.get({ sessionID: session.id }).then((r) => r.data)
-            return data?.time?.archived
-          },
-          { timeout: 30_000 },
-        )
-        .not.toBeUndefined()
+    await expect
+      .poll(
+        async () => {
+          const data = await sdk.session.get({ sessionID: session.id }).then((r) => r.data)
+          return data?.time?.archived
+        },
+        { timeout: 30_000 },
+      )
+      .not.toBeUndefined()
 
-      await openSidebar(page)
-      await expect(page.locator(sessionItemSelector(session.id))).toHaveCount(0)
-    })
+    await openSidebar(page)
+    await expect(page.locator(sessionItemSelector(session.id))).toHaveCount(0)
   })
 })
 
-test("session can be deleted via header menu", async ({ page, withBackendProject }) => {
+test("session can be deleted via header menu", async ({ page, sdk, gotoSession }) => {
   const stamp = Date.now()
   const title = `e2e delete test ${stamp}`
 
-  await withBackendProject(async (project) => {
-    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)
+  await withSession(sdk, title, async (session) => {
+    await seedMessage(sdk, session.id)
+    await gotoSession(session.id)
+    const menu = await openSessionMoreMenu(page, session.id)
+    await clickMenuItem(menu, /delete/i)
+    await confirmDialog(page, /delete/i)
 
-      await expect
-        .poll(
-          async () => {
-            const data = await project.sdk.session
-              .get({ sessionID: session.id })
-              .then((r) => r.data)
-              .catch(() => undefined)
-            return data?.id
-          },
-          { timeout: 30_000 },
-        )
-        .toBeUndefined()
+    await expect
+      .poll(
+        async () => {
+          const data = await sdk.session
+            .get({ sessionID: session.id })
+            .then((r) => r.data)
+            .catch(() => undefined)
+          return data?.id
+        },
+        { timeout: 30_000 },
+      )
+      .toBeUndefined()
 
-      await openSidebar(page)
-      await expect(page.locator(sessionItemSelector(session.id))).toHaveCount(0)
-    })
+    await openSidebar(page)
+    await expect(page.locator(sessionItemSelector(session.id))).toHaveCount(0)
   })
 })
 
-test("session can be shared and unshared via header button", async ({ page, withBackendProject }) => {
+test("session can be shared and unshared via header button", async ({ page, sdk, gotoSession }) => {
   test.skip(shareDisabled, "Share is disabled in this environment (OPENCODE_DISABLE_SHARE).")
 
   const stamp = Date.now()
   const title = `e2e share test ${stamp}`
 
-  await withBackendProject(async (project) => {
-    await withSession(project.sdk, title, async (session) => {
-      project.trackSession(session.id)
-      await seedMessage(project.sdk, session.id)
-      await project.gotoSession(session.id)
+  await withSession(sdk, title, async (session) => {
+    await seedMessage(sdk, session.id)
+    await gotoSession(session.id)
 
-      const shared = await openSharePopover(page)
-      const publish = shared.popoverBody.getByRole("button", { name: "Publish" }).first()
-      await expect(publish).toBeVisible({ timeout: 30_000 })
-      await publish.click()
+    const shared = await openSharePopover(page)
+    const publish = shared.popoverBody.getByRole("button", { name: "Publish" }).first()
+    await expect(publish).toBeVisible({ timeout: 30_000 })
+    await publish.click()
 
-      await expect(shared.popoverBody.getByRole("button", { name: "Unpublish" }).first()).toBeVisible({
-        timeout: 30_000,
-      })
+    await expect(shared.popoverBody.getByRole("button", { name: "Unpublish" }).first()).toBeVisible({
+      timeout: 30_000,
+    })
 
-      await expect
-        .poll(
-          async () => {
-            const data = await project.sdk.session.get({ sessionID: session.id }).then((r) => r.data)
-            return data?.share?.url || undefined
-          },
-          { timeout: 30_000 },
-        )
-        .not.toBeUndefined()
+    await expect
+      .poll(
+        async () => {
+          const data = await sdk.session.get({ sessionID: session.id }).then((r) => r.data)
+          return data?.share?.url || undefined
+        },
+        { timeout: 30_000 },
+      )
+      .not.toBeUndefined()
 
-      const unpublish = shared.popoverBody.getByRole("button", { name: "Unpublish" }).first()
-      await expect(unpublish).toBeVisible({ timeout: 30_000 })
-      await unpublish.click()
+    const unpublish = shared.popoverBody.getByRole("button", { name: "Unpublish" }).first()
+    await expect(unpublish).toBeVisible({ timeout: 30_000 })
+    await unpublish.click()
 
-      await expect(shared.popoverBody.getByRole("button", { name: "Publish" }).first()).toBeVisible({
-        timeout: 30_000,
-      })
+    await expect(shared.popoverBody.getByRole("button", { name: "Publish" }).first()).toBeVisible({
+      timeout: 30_000,
+    })
 
-      await expect
-        .poll(
-          async () => {
-            const data = await project.sdk.session.get({ sessionID: session.id }).then((r) => r.data)
-            return data?.share?.url || undefined
-          },
-          { timeout: 30_000 },
-        )
-        .toBeUndefined()
+    await expect
+      .poll(
+        async () => {
+          const data = await sdk.session.get({ sessionID: session.id }).then((r) => r.data)
+          return data?.share?.url || undefined
+        },
+        { timeout: 30_000 },
+      )
+      .toBeUndefined()
 
-      const unshared = await openSharePopover(page)
-      await expect(unshared.popoverBody.getByRole("button", { name: "Publish" }).first()).toBeVisible({
-        timeout: 30_000,
-      })
+    const unshared = await openSharePopover(page)
+    await expect(unshared.popoverBody.getByRole("button", { name: "Publish" }).first()).toBeVisible({
+      timeout: 30_000,
     })
   })
 })

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

@@ -2,7 +2,7 @@ import { test, expect, settingsKey } from "../fixtures"
 import { closeDialog, openSettings } from "../actions"
 import {
   settingsColorSchemeSelector,
-  settingsCodeFontSelector,
+  settingsFontSelector,
   settingsLanguageSelectSelector,
   settingsNotificationsAgentSelector,
   settingsNotificationsErrorsSelector,
@@ -12,7 +12,6 @@ import {
   settingsSoundsErrorsSelector,
   settingsSoundsPermissionsSelector,
   settingsThemeSelector,
-  settingsUIFontSelector,
   settingsUpdatesStartupSelector,
 } from "../selectors"
 
@@ -153,199 +152,39 @@ test("legacy oc-1 theme migrates to oc-2", async ({ page, gotoSession }) => {
     .toBeNull()
 })
 
-test("typing a code font with spaces persists and updates CSS variable", async ({ page, gotoSession }) => {
+test("changing font persists in localStorage and updates CSS variable", async ({ page, gotoSession }) => {
   await gotoSession()
 
   const dialog = await openSettings(page)
-  const input = dialog.locator(settingsCodeFontSelector)
-  await expect(input).toBeVisible()
-  await expect(input).toHaveAttribute("placeholder", "System Mono")
+  const select = dialog.locator(settingsFontSelector)
+  await expect(select).toBeVisible()
 
-  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")
+  const initialFontFamily = await page.evaluate(() => {
+    return getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono")
+  })
+  expect(initialFontFamily).toContain("IBM Plex Mono")
 
-  const next = "Test Mono"
+  await select.locator('[data-slot="select-select-trigger"]').click()
 
-  await input.click()
-  await input.clear()
-  await input.pressSequentially(next)
-  await expect(input).toHaveValue(next)
+  const items = page.locator('[data-slot="select-select-item"]')
+  await items.nth(2).click()
 
-  await expect
-    .poll(async () => {
-      return await page.evaluate((key) => {
-        const raw = localStorage.getItem(key)
-        return raw ? JSON.parse(raw) : null
-      }, settingsKey)
-    })
-    .toMatchObject({
-      appearance: {
-        mono: next,
-      },
-    })
+  await page.waitForTimeout(100)
 
-  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)
+  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)
-  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 }) => {
+test("color scheme and font rehydrate after reload", async ({ page, gotoSession }) => {
   await gotoSession()
 
   const dialog = await openSettings(page)
@@ -356,35 +195,31 @@ test("color scheme, code font, and UI font rehydrate after reload", async ({ pag
   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 fontSelect = dialog.locator(settingsFontSelector)
+  await expect(fontSelect).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 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 mono = initialSettings?.appearance?.mono === "Reload Mono" ? "Reload Mono 2" : "Reload Mono"
-  const sans = initialSettings?.appearance?.sans === "Reload Sans" ? "Reload Sans 2" : "Reload Sans"
+  const currentFont =
+    (await fontSelect.locator('[data-slot="select-select-trigger-value"]').textContent())?.trim() ?? ""
+  await fontSelect.locator('[data-slot="select-select-trigger"]').click()
 
-  await code.click()
-  await code.clear()
-  await code.pressSequentially(mono)
-  await expect(code).toHaveValue(mono)
+  const fontItems = page.locator('[data-slot="select-select-item"]')
+  expect(await fontItems.count()).toBeGreaterThan(1)
 
-  await ui.click()
-  await ui.clear()
-  await ui.pressSequentially(sans)
-  await expect(ui).toHaveValue(sans)
+  if (currentFont) {
+    await fontItems.filter({ hasNotText: currentFont }).first().click()
+  }
+  if (!currentFont) {
+    await fontItems.nth(1).click()
+  }
 
   await expect
     .poll(async () => {
@@ -395,8 +230,7 @@ test("color scheme, code font, and UI font rehydrate after reload", async ({ pag
     })
     .toMatchObject({
       appearance: {
-        mono,
-        sans,
+        font: expect.any(String),
       },
     })
 
@@ -405,18 +239,11 @@ test("color scheme, code font, and UI font rehydrate after reload", async ({ pag
     return raw ? JSON.parse(raw) : null
   }, settingsKey)
 
-  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)
+  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)
 
   await closeDialog(page, dialog)
   await page.reload()
@@ -432,8 +259,7 @@ test("color scheme, code font, and UI font rehydrate after reload", async ({ pag
     })
     .toMatchObject({
       appearance: {
-        mono,
-        sans,
+        font: updatedSettings?.appearance?.font,
       },
     })
 
@@ -444,32 +270,17 @@ test("color scheme, code font, and UI font rehydrate after reload", async ({ pag
 
   await expect
     .poll(async () => {
-      return await page.evaluate(() =>
-        getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim(),
-      )
+      return await page.evaluate(() => {
+        return getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim()
+      })
     })
-    .toContain(mono)
+    .not.toBe(initialFontFamily)
 
-  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)
+  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)
 })
 
 test("toggling notification agent switch updates localStorage", async ({ page, gotoSession }) => {

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, baseUrl = serverUrl) {
-  return createOpencodeClient({ baseUrl, directory, throwOnError: true })
+export function createSdk(directory?: string) {
+  return createOpencodeClient({ baseUrl: serverUrl, directory, throwOnError: true })
 }
 
-export async function resolveDirectory(directory: string, baseUrl = serverUrl) {
-  return createSdk(directory, baseUrl)
+export async function resolveDirectory(directory: string) {
+  return createSdk(directory)
     .path.get()
     .then((x) => x.data?.directory ?? directory)
 }
 
-export async function getWorktree(baseUrl = serverUrl) {
-  const sdk = createSdk(undefined, baseUrl)
+export async function getWorktree() {
+  const sdk = createSdk()
   const result = await sdk.path.get()
   const data = result.data
-  if (!data?.worktree) throw new Error(`Failed to resolve a worktree from ${baseUrl}/path`)
+  if (!data?.worktree) throw new Error(`Failed to resolve a worktree from ${serverUrl}/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, interactive-widget=resizes-content" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <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.3.13",
+  "version": "1.3.2",
   "description": "",
   "type": "module",
   "exports": {
@@ -46,10 +46,9 @@
     "@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.5",
+    "@solid-primitives/resize-observer": "2.1.3",
     "@solid-primitives/scroll": "2.1.3",
     "@solid-primitives/storage": "catalog:",
     "@solid-primitives/timer": "1.4.4",

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: process.env.OPENCODE_E2E_MODEL ?? "opencode/gpt-5-nano",
+  OPENCODE_E2E_MODEL: "opencode/gpt-5-nano",
   OPENCODE_CLIENT: "app",
   OPENCODE_STRICT_CONFIG_DEPS: "true",
 } satisfies Record<string, string>

packages/app/src/app.tsx

@@ -37,6 +37,7 @@ 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"
@@ -47,14 +48,9 @@ import { ErrorPage } from "./pages/error"
 import { useCheckServerHealth } from "./utils/server-health"
 
 const HomeRoute = lazy(() => import("@/pages/home"))
-const loadSession = () => import("@/pages/session")
-const Session = lazy(loadSession)
+const Session = lazy(() => import("@/pages/session"))
 const Loading = () => <div class="size-full" />
 
-if (typeof location === "object" && /\/session(?:\/|$)/.test(location.pathname)) {
-  void loadSession()
-}
-
 const SessionRoute = () => (
   <SessionProviders>
     <Session />
@@ -81,6 +77,11 @@ 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>
@@ -143,9 +144,9 @@ export function AppBaseProviders(props: ParentProps<{ locale?: Locale }>) {
             <ErrorBoundary fallback={(error) => <ErrorPage error={error} />}>
               <QueryProvider>
                 <DialogProvider>
-                  <MarkedProvider>
+                  <MarkedProviderWithNativeParser>
                     <FileComponentProvider component={File}>{props.children}</FileComponentProvider>
-                  </MarkedProvider>
+                  </MarkedProviderWithNativeParser>
                 </DialogProvider>
               </QueryProvider>
             </ErrorBoundary>
@@ -183,7 +184,7 @@ function ConnectionGate(props: ParentProps<{ disableHealthCheck?: boolean }>) {
           }
         }).pipe(
           effectMinDuration(checkMode() === "blocking" ? "1.2 seconds" : 0),
-          Effect.timeoutOrElse({ duration: "10 seconds", orElse: () => Effect.succeed(false) }),
+          Effect.timeoutOrElse({ duration: "10 seconds", onTimeout: () => Effect.succeed(false) }),
           Effect.ensuring(Effect.sync(() => setCheckMode("background"))),
           Effect.runPromise,
         ),
@@ -283,11 +284,7 @@ export function AppInterface(props: {
   disableHealthCheck?: boolean
 }) {
   return (
-    <ServerProvider
-      defaultServer={props.defaultServer}
-      disableHealthCheck={props.disableHealthCheck}
-      servers={props.servers}
-    >
+    <ServerProvider defaultServer={props.defaultServer} servers={props.servers}>
       <ConnectionGate disableHealthCheck={props.disableHealthCheck}>
         <ServerKey>
           <GlobalSDKProvider>

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

@@ -1,7 +1,6 @@
 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"
 
@@ -350,12 +349,13 @@ export function DebugBar() {
 
     syncHeap()
     start()
-    makeEventListener(document, "visibilitychange", vis)
+    document.addEventListener("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()
     })
   })

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

@@ -15,20 +15,13 @@ import { Link } from "@/components/link"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { useGlobalSync } from "@/context/global-sync"
 import { useLanguage } from "@/context/language"
-import { useProviders } from "@/hooks/use-providers"
+import { DialogSelectProvider } from "./dialog-select-provider"
 
 export function DialogConnectProvider(props: { provider: string }) {
   const dialog = useDialog()
   const globalSync = useGlobalSync()
   const globalSDK = useGlobalSDK()
   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 }
@@ -40,11 +33,7 @@ export function DialogConnectProvider(props: { provider: string }) {
     timer.current = undefined
   })
 
-  const provider = createMemo(
-    () =>
-      providers.all().find((x) => x.id === props.provider) ??
-      globalSync.data.provider.all.find((x) => x.id === props.provider)!,
-  )
+  const provider = createMemo(() => globalSync.data.provider.all.find((x) => x.id === props.provider)!)
   const fallback = createMemo<ProviderAuthMethod[]>(() => [
     {
       type: "api" as const,
@@ -344,7 +333,7 @@ export function DialogConnectProvider(props: { provider: string }) {
 
   function goBack() {
     if (methods().length === 1) {
-      all()
+      dialog.show(() => <DialogSelectProvider />)
       return
     }
     if (store.authorization) {
@@ -355,7 +344,7 @@ export function DialogConnectProvider(props: { provider: string }) {
       dispatch({ type: "method.reset" })
       return
     }
-    all()
+    dialog.show(() => <DialogSelectProvider />)
   }
 
   function MethodSelection() {

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

@@ -1,12 +1,10 @@
 import { useMutation } from "@tanstack/solid-query"
-import { Component, createEffect, createMemo, on, Show } from "solid-js"
-import { createStore } from "solid-js/store"
+import { Component, createMemo, Show } from "solid-js"
 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 = {
@@ -20,48 +18,6 @@ export const DialogSelectMcp: Component = () => {
   const sync = useSync()
   const sdk = useSDK()
   const language = useLanguage()
-  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 ?? {})

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

@@ -8,6 +8,8 @@ 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"
 
@@ -19,18 +21,6 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
   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
@@ -101,7 +91,7 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
                 }}
                 onSelect={(x) => {
                   if (!x) return
-                  connect(x.id)
+                  dialog.show(() => <DialogConnectProvider provider={x.id} />)
                 }}
               >
                 {(i) => (
@@ -132,7 +122,9 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
                 variant="ghost"
                 class="w-full justify-start px-[11px] py-3.5 gap-4.5 text-14-medium"
                 icon="dot-grid"
-                onClick={all}
+                onClick={() => {
+                  dialog.show(() => <DialogSelectProvider />)
+                }}
               >
                 {language.t("dialog.provider.viewAll")}
               </Button>

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

@@ -10,6 +10,8 @@ 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"
 
@@ -105,16 +107,12 @@ export function ModelSelectorPopover(props: {
 
   const handleManage = () => {
     setStore("open", false)
-    void import("./dialog-manage-models").then((x) => {
-      dialog.show(() => <x.DialogManageModels />)
-    })
+    dialog.show(() => <DialogManageModels />)
   }
 
   const handleConnectProvider = () => {
     setStore("open", false)
-    void import("./dialog-select-provider").then((x) => {
-      dialog.show(() => <x.DialogSelectProvider />)
-    })
+    dialog.show(() => <DialogSelectProvider />)
   }
   const language = useLanguage()
 
@@ -195,29 +193,26 @@ export const DialogSelectModel: Component<{ provider?: string; model?: ModelStat
   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={provider}>
+        <Button
+          class="h-7 -my-1 text-14-medium"
+          icon="plus-small"
+          tabIndex={-1}
+          onClick={() => dialog.show(() => <DialogSelectProvider />)}
+        >
           {language.t("command.provider.connect")}
         </Button>
       }
     >
       <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}>
+      <Button
+        variant="ghost"
+        class="ml-3 mt-5 mb-6 text-text-base self-start"
+        onClick={() => dialog.show(() => <DialogManageModels />)}
+      >
         {language.t("dialog.model.manage")}
       </Button>
     </Dialog>

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

@@ -27,6 +27,7 @@ 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"
@@ -624,18 +625,17 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     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 }, ...images], text.length)
+      prompt.set([{ type: "text", content: text, start: 0, end: text.length }], text.length)
       focusEditorEnd()
       return
     }
 
     clearEditor()
-    prompt.set([...DEFAULT_PROMPT, ...images], 0)
+    prompt.set([{ type: "text", content: "", start: 0, end: 0 }], 0)
     command.trigger(cmd.id, "slash")
   }
 
@@ -1344,9 +1344,6 @@ 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}
@@ -1497,11 +1494,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                           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} />)
-                            })
-                          }}
+                          onClick={() => dialog.show(() => <DialogSelectModelUnpaid model={local.model} />)}
                         >
                           <Show when={local.model.current()?.provider?.id}>
                             <ProviderIcon

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

@@ -1,5 +1,4 @@
-import { onMount } from "solid-js"
-import { makeEventListener } from "@solid-primitives/event-listener"
+import { onCleanup, onMount } from "solid-js"
 import { showToast } from "@opencode-ai/ui/toast"
 import { usePrompt, type ContentPart, type ImageAttachmentPart } from "@/context/prompt"
 import { useLanguage } from "@/context/language"
@@ -182,9 +181,15 @@ export function createPromptAttachments(input: PromptAttachmentsInput) {
   }
 
   onMount(() => {
-    makeEventListener(document, "dragover", handleGlobalDragOver)
-    makeEventListener(document, "dragleave", handleGlobalDragLeave)
-    makeEventListener(document, "drop", handleGlobalDrop)
+    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)
   })
 
   return {

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

@@ -100,30 +100,6 @@ 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,16 +39,6 @@ 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"
 
@@ -148,21 +138,6 @@ 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"),
@@ -178,7 +153,6 @@ export function buildRequestParts(input: BuildRequestPartsInput) {
         }),
       } satisfies PromptRequestPart,
       filePart,
-      ...mentions,
     ]
   })
 

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,9 +46,12 @@ export function ServerRow(props: ServerRowProps) {
   })
 
   onMount(() => {
-    if (typeof ResizeObserver !== "function") return
-    createResizeObserver([nameRef, versionRef], check)
     check()
+    if (typeof ResizeObserver !== "function") return
+    const observer = new ResizeObserver(check)
+    if (nameRef) observer.observe(nameRef)
+    if (versionRef) observer.observe(versionRef)
+    onCleanup(() => observer.disconnect())
   })
 
   const tooltipValue = () => (

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

@@ -7,7 +7,6 @@ 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"
@@ -33,7 +32,6 @@ 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")
@@ -52,7 +50,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
       }),
   )
 
-  const metrics = createMemo(() => getSessionContextMetrics(messages(), providers.all()))
+  const metrics = createMemo(() => getSessionContextMetrics(messages(), sync.data.provider.all))
   const context = createMemo(() => metrics().context)
   const cost = createMemo(() => {
     return usd().format(metrics().totalCost)

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

@@ -12,7 +12,6 @@ import { Markdown } from "@opencode-ai/ui/markdown"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import type { Message, Part, UserMessage } from "@opencode-ai/sdk/v2/client"
 import { useLanguage } from "@/context/language"
-import { useProviders } from "@/hooks/use-providers"
 import { useSessionLayout } from "@/pages/session/session-layout"
 import { getSessionContextMetrics } from "./session-context-metrics"
 import { estimateSessionContextBreakdown, type SessionContextBreakdownKey } from "./session-context-breakdown"
@@ -93,7 +92,6 @@ const emptyUserMessages: UserMessage[] = []
 export function SessionContextTab() {
   const sync = useSync()
   const language = useLanguage()
-  const providers = useProviders()
   const { params, view } = useSessionLayout()
 
   const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
@@ -132,7 +130,7 @@ export function SessionContextTab() {
       }),
   )
 
-  const metrics = createMemo(() => getSessionContextMetrics(messages(), providers.all()))
+  const metrics = createMemo(() => getSessionContextMetrics(messages(), sync.data.provider.all))
   const ctx = createMemo(() => metrics().context)
   const formatter = createMemo(() => createSessionContextFormatter(language.intl()))
 

packages/app/src/components/settings-general.tsx

@@ -4,21 +4,12 @@ import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Select } from "@opencode-ai/ui/select"
 import { Switch } from "@opencode-ai/ui/switch"
-import { TextField } from "@opencode-ai/ui/text-field"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
 import { showToast } from "@opencode-ai/ui/toast"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
-import {
-  monoDefault,
-  monoFontFamily,
-  monoInput,
-  sansDefault,
-  sansFontFamily,
-  sansInput,
-  useSettings,
-} from "@/context/settings"
+import { useSettings, monoFontFamily } from "@/context/settings"
 import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
 import { Link } from "./link"
 import { SettingsList } from "./settings-list"
@@ -34,6 +25,13 @@ type ThemeOption = {
   name: string
 }
 
+let font: Promise<typeof import("@opencode-ai/ui/font-loader")> | undefined
+
+function loadFont() {
+  font ??= import("@opencode-ai/ui/font-loader")
+  return font
+}
+
 // To prevent audio from overlapping/playing very quickly when navigating the settings menus,
 // delay the playback by 100ms during quick selection changes and pause existing sounds.
 const stopDemoSound = () => {
@@ -151,10 +149,25 @@ export const SettingsGeneral: Component = () => {
     })),
   )
 
+  const fontOptions = [
+    { value: "ibm-plex-mono", label: "font.option.ibmPlexMono" },
+    { value: "cascadia-code", label: "font.option.cascadiaCode" },
+    { value: "fira-code", label: "font.option.firaCode" },
+    { value: "hack", label: "font.option.hack" },
+    { value: "inconsolata", label: "font.option.inconsolata" },
+    { value: "intel-one-mono", label: "font.option.intelOneMono" },
+    { value: "iosevka", label: "font.option.iosevka" },
+    { value: "jetbrains-mono", label: "font.option.jetbrainsMono" },
+    { value: "meslo-lgs", label: "font.option.mesloLgs" },
+    { value: "roboto-mono", label: "font.option.robotoMono" },
+    { value: "source-code-pro", label: "font.option.sourceCodePro" },
+    { value: "ubuntu-mono", label: "font.option.ubuntuMono" },
+    { value: "geist-mono", label: "font.option.geistMono" },
+  ] as const
+  const fontOptionsList = [...fontOptions]
+
   const noneSound = { id: "none", label: "sound.option.none" } as const
   const soundOptions = [noneSound, ...SOUND_OPTIONS]
-  const mono = () => monoInput(settings.appearance.font())
-  const sans = () => sansInput(settings.appearance.uiFont())
 
   const soundSelectProps = (
     enabled: () => boolean,
@@ -321,50 +334,31 @@ export const SettingsGeneral: Component = () => {
           />
         </SettingsRow>
 
-        <SettingsRow
-          title={language.t("settings.general.row.uiFont.title")}
-          description={language.t("settings.general.row.uiFont.description")}
-        >
-          <div class="w-full sm:w-[220px]">
-            <TextField
-              data-action="settings-ui-font"
-              label={language.t("settings.general.row.uiFont.title")}
-              hideLabel
-              type="text"
-              value={sans()}
-              onChange={(value) => settings.appearance.setUIFont(value)}
-              placeholder={sansDefault}
-              spellcheck={false}
-              autocorrect="off"
-              autocomplete="off"
-              autocapitalize="off"
-              class="text-12-regular"
-              style={{ "font-family": sansFontFamily(settings.appearance.uiFont()) }}
-            />
-          </div>
-        </SettingsRow>
-
         <SettingsRow
           title={language.t("settings.general.row.font.title")}
           description={language.t("settings.general.row.font.description")}
         >
-          <div class="w-full sm:w-[220px]">
-            <TextField
-              data-action="settings-code-font"
-              label={language.t("settings.general.row.font.title")}
-              hideLabel
-              type="text"
-              value={mono()}
-              onChange={(value) => settings.appearance.setFont(value)}
-              placeholder={monoDefault}
-              spellcheck={false}
-              autocorrect="off"
-              autocomplete="off"
-              autocapitalize="off"
-              class="text-12-regular"
-              style={{ "font-family": monoFontFamily(settings.appearance.font()) }}
-            />
-          </div>
+          <Select
+            data-action="settings-font"
+            options={fontOptionsList}
+            current={fontOptionsList.find((o) => o.value === settings.appearance.font())}
+            value={(o) => o.value}
+            label={(o) => language.t(o.label)}
+            onHighlight={(option) => {
+              void loadFont().then((x) => x.ensureMonoFont(option?.value))
+            }}
+            onSelect={(option) => option && settings.appearance.setFont(option.value)}
+            variant="secondary"
+            size="small"
+            triggerVariant="settings"
+            triggerStyle={{ "font-family": monoFontFamily(settings.appearance.font()), "min-width": "180px" }}
+          >
+            {(option) => (
+              <span style={{ "font-family": monoFontFamily(option?.value) }}>
+                {option ? language.t(option.label) : ""}
+              </span>
+            )}
+          </Select>
         </SettingsRow>
       </SettingsList>
     </div>

packages/app/src/components/settings-keybinds.tsx

@@ -1,6 +1,5 @@
 import { Component, For, Show, createMemo, onCleanup, onMount } from "solid-js"
 import { createStore } from "solid-js/store"
-import { makeEventListener } from "@solid-primitives/event-listener"
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
@@ -251,7 +250,8 @@ function useKeyCapture(input: {
       input.stop()
     }
 
-    makeEventListener(document, "keydown", handle, { capture: true })
+    document.addEventListener("keydown", handle, true)
+    onCleanup(() => document.removeEventListener("keydown", handle, true))
   })
 }
 

packages/app/src/components/status-popover-body.tsx

@@ -1,445 +0,0 @@
-import { Button } from "@opencode-ai/ui/button"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Switch } from "@opencode-ai/ui/switch"
-import { Tabs } from "@opencode-ai/ui/tabs"
-import { useMutation } from "@tanstack/solid-query"
-import { showToast } from "@opencode-ai/ui/toast"
-import { useNavigate } from "@solidjs/router"
-import { type Accessor, createEffect, createMemo, For, type JSXElement, onCleanup, Show } from "solid-js"
-import { createStore, reconcile } from "solid-js/store"
-import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
-import { useLanguage } from "@/context/language"
-import { usePlatform } from "@/context/platform"
-import { useSDK } from "@/context/sdk"
-import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
-import { useSync } from "@/context/sync"
-import { useCheckServerHealth, type ServerHealth } from "@/utils/server-health"
-
-const pollMs = 10_000
-
-const pluginEmptyMessage = (value: string, file: string): JSXElement => {
-  const parts = value.split(file)
-  if (parts.length === 1) return value
-  return (
-    <>
-      {parts[0]}
-      <code class="bg-surface-raised-base px-1.5 py-0.5 rounded-sm text-text-base">{file}</code>
-      {parts.slice(1).join(file)}
-    </>
-  )
-}
-
-const listServersByHealth = (
-  list: ServerConnection.Any[],
-  active: ServerConnection.Key | undefined,
-  status: Record<ServerConnection.Key, ServerHealth | undefined>,
-) => {
-  if (!list.length) return list
-  const order = new Map(list.map((url, index) => [url, index] as const))
-  const rank = (value?: ServerHealth) => {
-    if (value?.healthy === true) return 0
-    if (value?.healthy === false) return 2
-    return 1
-  }
-
-  return list.slice().sort((a, b) => {
-    if (ServerConnection.key(a) === active) return -1
-    if (ServerConnection.key(b) === active) return 1
-    const diff = rank(status[ServerConnection.key(a)]) - rank(status[ServerConnection.key(b)])
-    if (diff !== 0) return diff
-    return (order.get(a) ?? 0) - (order.get(b) ?? 0)
-  })
-}
-
-const useServerHealth = (servers: Accessor<ServerConnection.Any[]>, enabled: Accessor<boolean>) => {
-  const checkServerHealth = useCheckServerHealth()
-  const [status, setStatus] = createStore({} as Record<ServerConnection.Key, ServerHealth | undefined>)
-
-  createEffect(() => {
-    if (!enabled()) {
-      setStatus(reconcile({}))
-      return
-    }
-    const list = servers()
-    let dead = false
-
-    const refresh = async () => {
-      const results: Record<string, ServerHealth> = {}
-      await Promise.all(
-        list.map(async (conn) => {
-          results[ServerConnection.key(conn)] = await checkServerHealth(conn.http)
-        }),
-      )
-      if (dead) return
-      setStatus(reconcile(results))
-    }
-
-    void refresh()
-    const id = setInterval(() => void refresh(), pollMs)
-    onCleanup(() => {
-      dead = true
-      clearInterval(id)
-    })
-  })
-
-  return status
-}
-
-const useDefaultServerKey = (
-  get: (() => string | Promise<string | null | undefined> | null | undefined) | undefined,
-) => {
-  const [state, setState] = createStore({
-    url: undefined as string | undefined,
-    tick: 0,
-  })
-
-  createEffect(() => {
-    state.tick
-    let dead = false
-    const result = get?.()
-    if (!result) {
-      setState("url", undefined)
-      onCleanup(() => {
-        dead = true
-      })
-      return
-    }
-
-    if (result instanceof Promise) {
-      void result.then((next) => {
-        if (dead) return
-        setState("url", next ? normalizeServerUrl(next) : undefined)
-      })
-      onCleanup(() => {
-        dead = true
-      })
-      return
-    }
-
-    setState("url", normalizeServerUrl(result))
-    onCleanup(() => {
-      dead = true
-    })
-  })
-
-  return {
-    key: () => {
-      const u = state.url
-      if (!u) return
-      return ServerConnection.key({ type: "http", http: { url: u } })
-    },
-    refresh: () => setState("tick", (value) => value + 1),
-  }
-}
-
-const useMcpToggleMutation = () => {
-  const sync = useSync()
-  const sdk = useSDK()
-  const language = useLanguage()
-
-  return useMutation(() => ({
-    mutationFn: async (name: string) => {
-      const status = sync.data.mcp[name]
-      await (status?.status === "connected" ? sdk.client.mcp.disconnect({ name }) : sdk.client.mcp.connect({ name }))
-      const result = await sdk.client.mcp.status()
-      if (result.data) sync.set("mcp", result.data)
-    },
-    onError: (err) => {
-      showToast({
-        variant: "error",
-        title: language.t("common.requestFailed"),
-        description: err instanceof Error ? err.message : String(err),
-      })
-    },
-  }))
-}
-
-export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
-  const sync = useSync()
-  const server = useServer()
-  const platform = usePlatform()
-  const dialog = useDialog()
-  const language = useLanguage()
-  const navigate = useNavigate()
-  const sdk = useSDK()
-
-  const [load, setLoad] = createStore({
-    lspDone: false,
-    lspLoading: false,
-    mcpDone: false,
-    mcpLoading: false,
-  })
-
-  const fail = (err: unknown) => {
-    showToast({
-      variant: "error",
-      title: language.t("common.requestFailed"),
-      description: err instanceof Error ? err.message : String(err),
-    })
-  }
-
-  createEffect(() => {
-    if (!props.shown()) return
-
-    if (!sync.data.mcp_ready && !load.mcpDone && !load.mcpLoading) {
-      setLoad("mcpLoading", true)
-      void sdk.client.mcp
-        .status()
-        .then((result) => {
-          sync.set("mcp", result.data ?? {})
-          sync.set("mcp_ready", true)
-        })
-        .catch((err) => {
-          setLoad("mcpDone", true)
-          fail(err)
-        })
-        .finally(() => {
-          setLoad("mcpLoading", false)
-        })
-    }
-
-    if (!sync.data.lsp_ready && !load.lspDone && !load.lspLoading) {
-      setLoad("lspLoading", true)
-      void sdk.client.lsp
-        .status()
-        .then((result) => {
-          sync.set("lsp", result.data ?? [])
-          sync.set("lsp_ready", true)
-        })
-        .catch((err) => {
-          setLoad("lspDone", true)
-          fail(err)
-        })
-        .finally(() => {
-          setLoad("lspLoading", false)
-        })
-    }
-  })
-
-  let dialogRun = 0
-  let dialogDead = false
-  onCleanup(() => {
-    dialogDead = true
-    dialogRun += 1
-  })
-  const servers = createMemo(() => {
-    const current = server.current
-    const list = server.list
-    if (!current) return list
-    if (list.every((item) => ServerConnection.key(item) !== ServerConnection.key(current))) return [current, ...list]
-    return [current, ...list.filter((item) => ServerConnection.key(item) !== ServerConnection.key(current))]
-  })
-  const health = useServerHealth(servers, props.shown)
-  const sortedServers = createMemo(() => listServersByHealth(servers(), server.key, health))
-  const toggleMcp = useMcpToggleMutation()
-  const defaultServer = useDefaultServerKey(platform.getDefaultServer)
-  const mcpNames = createMemo(() => Object.keys(sync.data.mcp ?? {}).sort((a, b) => a.localeCompare(b)))
-  const mcpStatus = (name: string) => sync.data.mcp?.[name]?.status
-  const mcpConnected = createMemo(() => mcpNames().filter((name) => mcpStatus(name) === "connected").length)
-  const lspItems = createMemo(() => sync.data.lsp ?? [])
-  const lspCount = createMemo(() => lspItems().length)
-  const plugins = createMemo(() =>
-    (sync.data.config.plugin ?? []).map((item) => (typeof item === "string" ? item : item[0])),
-  )
-  const pluginCount = createMemo(() => plugins().length)
-  const pluginEmpty = createMemo(() => pluginEmptyMessage(language.t("dialog.plugins.empty"), "opencode.json"))
-
-  return (
-    <div class="flex items-center gap-1 w-[360px] rounded-xl shadow-[var(--shadow-lg-border-base)]">
-      <Tabs
-        aria-label={language.t("status.popover.ariaLabel")}
-        class="tabs bg-background-strong rounded-xl overflow-hidden"
-        data-component="tabs"
-        data-active="servers"
-        defaultValue="servers"
-        variant="alt"
-      >
-        <Tabs.List data-slot="tablist" class="bg-transparent border-b-0 px-4 pt-2 pb-0 gap-4 h-10">
-          <Tabs.Trigger value="servers" data-slot="tab" class="text-12-regular">
-            {sortedServers().length > 0 ? `${sortedServers().length} ` : ""}
-            {language.t("status.popover.tab.servers")}
-          </Tabs.Trigger>
-          <Tabs.Trigger value="mcp" data-slot="tab" class="text-12-regular">
-            {mcpConnected() > 0 ? `${mcpConnected()} ` : ""}
-            {language.t("status.popover.tab.mcp")}
-          </Tabs.Trigger>
-          <Tabs.Trigger value="lsp" data-slot="tab" class="text-12-regular">
-            {lspCount() > 0 ? `${lspCount()} ` : ""}
-            {language.t("status.popover.tab.lsp")}
-          </Tabs.Trigger>
-          <Tabs.Trigger value="plugins" data-slot="tab" class="text-12-regular">
-            {pluginCount() > 0 ? `${pluginCount()} ` : ""}
-            {language.t("status.popover.tab.plugins")}
-          </Tabs.Trigger>
-        </Tabs.List>
-
-        <Tabs.Content value="servers">
-          <div class="flex flex-col px-2 pb-2">
-            <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
-              <For each={sortedServers()}>
-                {(s) => {
-                  const key = ServerConnection.key(s)
-                  const blocked = () => health[key]?.healthy === false
-                  return (
-                    <button
-                      type="button"
-                      class="flex items-center gap-2 w-full h-8 pl-3 pr-1.5 py-1.5 rounded-md transition-colors text-left"
-                      classList={{
-                        "hover:bg-surface-raised-base-hover": !blocked(),
-                        "cursor-not-allowed": blocked(),
-                      }}
-                      aria-disabled={blocked()}
-                      onClick={() => {
-                        if (blocked()) return
-                        navigate("/")
-                        queueMicrotask(() => server.setActive(key))
-                      }}
-                    >
-                      <ServerHealthIndicator health={health[key]} />
-                      <ServerRow
-                        conn={s}
-                        dimmed={blocked()}
-                        status={health[key]}
-                        class="flex items-center gap-2 w-full min-w-0"
-                        nameClass="text-14-regular text-text-base truncate"
-                        versionClass="text-12-regular text-text-weak truncate"
-                        badge={
-                          <Show when={key === defaultServer.key()}>
-                            <span class="text-11-regular text-text-base bg-surface-base px-1.5 py-0.5 rounded-md">
-                              {language.t("common.default")}
-                            </span>
-                          </Show>
-                        }
-                      >
-                        <div class="flex-1" />
-                        <Show when={server.current && key === ServerConnection.key(server.current)}>
-                          <Icon name="check" size="small" class="text-icon-weak shrink-0" />
-                        </Show>
-                      </ServerRow>
-                    </button>
-                  )
-                }}
-              </For>
-
-              <Button
-                variant="secondary"
-                class="mt-3 self-start h-8 px-3 py-1.5"
-                onClick={() => {
-                  const run = ++dialogRun
-                  void import("./dialog-select-server").then((x) => {
-                    if (dialogDead || dialogRun !== run) return
-                    dialog.show(() => <x.DialogSelectServer />, defaultServer.refresh)
-                  })
-                }}
-              >
-                {language.t("status.popover.action.manageServers")}
-              </Button>
-            </div>
-          </div>
-        </Tabs.Content>
-
-        <Tabs.Content value="mcp">
-          <div class="flex flex-col px-2 pb-2">
-            <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
-              <Show
-                when={mcpNames().length > 0}
-                fallback={
-                  <div class="text-14-regular text-text-base text-center my-auto">{language.t("dialog.mcp.empty")}</div>
-                }
-              >
-                <For each={mcpNames()}>
-                  {(name) => {
-                    const status = () => mcpStatus(name)
-                    const enabled = () => status() === "connected"
-                    return (
-                      <button
-                        type="button"
-                        class="flex items-center gap-2 w-full h-8 pl-3 pr-2 py-1 rounded-md hover:bg-surface-raised-base-hover transition-colors text-left"
-                        onClick={() => {
-                          if (toggleMcp.isPending) return
-                          toggleMcp.mutate(name)
-                        }}
-                        disabled={toggleMcp.isPending && toggleMcp.variables === name}
-                      >
-                        <div
-                          classList={{
-                            "size-1.5 rounded-full shrink-0": true,
-                            "bg-icon-success-base": status() === "connected",
-                            "bg-icon-critical-base": status() === "failed",
-                            "bg-border-weak-base": status() === "disabled",
-                            "bg-icon-warning-base":
-                              status() === "needs_auth" || status() === "needs_client_registration",
-                          }}
-                        />
-                        <span class="text-14-regular text-text-base truncate flex-1">{name}</span>
-                        <div onClick={(event) => event.stopPropagation()}>
-                          <Switch
-                            checked={enabled()}
-                            disabled={toggleMcp.isPending && toggleMcp.variables === name}
-                            onChange={() => {
-                              if (toggleMcp.isPending) return
-                              toggleMcp.mutate(name)
-                            }}
-                          />
-                        </div>
-                      </button>
-                    )
-                  }}
-                </For>
-              </Show>
-            </div>
-          </div>
-        </Tabs.Content>
-
-        <Tabs.Content value="lsp">
-          <div class="flex flex-col px-2 pb-2">
-            <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
-              <Show
-                when={lspItems().length > 0}
-                fallback={
-                  <div class="text-14-regular text-text-base text-center my-auto">{language.t("dialog.lsp.empty")}</div>
-                }
-              >
-                <For each={lspItems()}>
-                  {(item) => (
-                    <div class="flex items-center gap-2 w-full px-2 py-1">
-                      <div
-                        classList={{
-                          "size-1.5 rounded-full shrink-0": true,
-                          "bg-icon-success-base": item.status === "connected",
-                          "bg-icon-critical-base": item.status === "error",
-                        }}
-                      />
-                      <span class="text-14-regular text-text-base truncate">{item.name || item.id}</span>
-                    </div>
-                  )}
-                </For>
-              </Show>
-            </div>
-          </div>
-        </Tabs.Content>
-
-        <Tabs.Content value="plugins">
-          <div class="flex flex-col px-2 pb-2">
-            <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
-              <Show
-                when={plugins().length > 0}
-                fallback={<div class="text-14-regular text-text-base text-center my-auto">{pluginEmpty()}</div>}
-              >
-                <For each={plugins()}>
-                  {(plugin) => (
-                    <div class="flex items-center gap-2 w-full px-2 py-1">
-                      <div class="size-1.5 rounded-full shrink-0 bg-icon-success-base" />
-                      <span class="text-14-regular text-text-base truncate">{plugin}</span>
-                    </div>
-                  )}
-                </For>
-              </Show>
-            </div>
-          </div>
-        </Tabs.Content>
-      </Tabs>
-    </div>
-  )
-}

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

@@ -1,24 +1,202 @@
 import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Popover } from "@opencode-ai/ui/popover"
-import { Suspense, createMemo, createSignal, lazy, Show } from "solid-js"
+import { Switch } from "@opencode-ai/ui/switch"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { useMutation } from "@tanstack/solid-query"
+import { showToast } from "@opencode-ai/ui/toast"
+import { useNavigate } from "@solidjs/router"
+import { type Accessor, createEffect, createMemo, createSignal, For, type JSXElement, onCleanup, Show } from "solid-js"
+import { createStore, reconcile } from "solid-js/store"
+import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
 import { useLanguage } from "@/context/language"
-import { useServer } from "@/context/server"
+import { usePlatform } from "@/context/platform"
+import { useSDK } from "@/context/sdk"
+import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
 import { useSync } from "@/context/sync"
+import { useCheckServerHealth, type ServerHealth } from "@/utils/server-health"
 
-const Body = lazy(() => import("./status-popover-body").then((x) => ({ default: x.StatusPopoverBody })))
+const pollMs = 10_000
+
+const pluginEmptyMessage = (value: string, file: string): JSXElement => {
+  const parts = value.split(file)
+  if (parts.length === 1) return value
+  return (
+    <>
+      {parts[0]}
+      <code class="bg-surface-raised-base px-1.5 py-0.5 rounded-sm text-text-base">{file}</code>
+      {parts.slice(1).join(file)}
+    </>
+  )
+}
+
+const listServersByHealth = (
+  list: ServerConnection.Any[],
+  active: ServerConnection.Key | undefined,
+  status: Record<ServerConnection.Key, ServerHealth | undefined>,
+) => {
+  if (!list.length) return list
+  const order = new Map(list.map((url, index) => [url, index] as const))
+  const rank = (value?: ServerHealth) => {
+    if (value?.healthy === true) return 0
+    if (value?.healthy === false) return 2
+    return 1
+  }
+
+  return list.slice().sort((a, b) => {
+    if (ServerConnection.key(a) === active) return -1
+    if (ServerConnection.key(b) === active) return 1
+    const diff = rank(status[ServerConnection.key(a)]) - rank(status[ServerConnection.key(b)])
+    if (diff !== 0) return diff
+    return (order.get(a) ?? 0) - (order.get(b) ?? 0)
+  })
+}
+
+const useServerHealth = (servers: Accessor<ServerConnection.Any[]>, enabled: Accessor<boolean>) => {
+  const checkServerHealth = useCheckServerHealth()
+  const [status, setStatus] = createStore({} as Record<ServerConnection.Key, ServerHealth | undefined>)
+
+  createEffect(() => {
+    if (!enabled()) {
+      setStatus(reconcile({}))
+      return
+    }
+    const list = servers()
+    let dead = false
+
+    const refresh = async () => {
+      const results: Record<string, ServerHealth> = {}
+      await Promise.all(
+        list.map(async (conn) => {
+          results[ServerConnection.key(conn)] = await checkServerHealth(conn.http)
+        }),
+      )
+      if (dead) return
+      setStatus(reconcile(results))
+    }
+
+    void refresh()
+    const id = setInterval(() => void refresh(), pollMs)
+    onCleanup(() => {
+      dead = true
+      clearInterval(id)
+    })
+  })
+
+  return status
+}
+
+const useDefaultServerKey = (
+  get: (() => string | Promise<string | null | undefined> | null | undefined) | undefined,
+) => {
+  const [state, setState] = createStore({
+    url: undefined as string | undefined,
+    tick: 0,
+  })
+
+  createEffect(() => {
+    state.tick
+    let dead = false
+    const result = get?.()
+    if (!result) {
+      setState("url", undefined)
+      onCleanup(() => {
+        dead = true
+      })
+      return
+    }
+
+    if (result instanceof Promise) {
+      void result.then((next) => {
+        if (dead) return
+        setState("url", next ? normalizeServerUrl(next) : undefined)
+      })
+      onCleanup(() => {
+        dead = true
+      })
+      return
+    }
+
+    setState("url", normalizeServerUrl(result))
+    onCleanup(() => {
+      dead = true
+    })
+  })
+
+  return {
+    key: () => {
+      const u = state.url
+      if (!u) return
+      return ServerConnection.key({ type: "http", http: { url: u } })
+    },
+    refresh: () => setState("tick", (value) => value + 1),
+  }
+}
+
+const useMcpToggleMutation = () => {
+  const sync = useSync()
+  const sdk = useSDK()
+  const language = useLanguage()
+
+  return useMutation(() => ({
+    mutationFn: async (name: string) => {
+      const status = sync.data.mcp[name]
+      await (status?.status === "connected" ? sdk.client.mcp.disconnect({ name }) : sdk.client.mcp.connect({ name }))
+      const result = await sdk.client.mcp.status()
+      if (result.data) sync.set("mcp", result.data)
+    },
+    onError: (err) => {
+      showToast({
+        variant: "error",
+        title: language.t("common.requestFailed"),
+        description: err instanceof Error ? err.message : String(err),
+      })
+    },
+  }))
+}
 
 export function StatusPopover() {
-  const language = useLanguage()
-  const server = useServer()
   const sync = useSync()
+  const server = useServer()
+  const platform = usePlatform()
+  const dialog = useDialog()
+  const language = useLanguage()
+  const navigate = useNavigate()
+
   const [shown, setShown] = createSignal(false)
-  const ready = createMemo(() => server.healthy() === false || sync.data.mcp_ready)
-  const healthy = createMemo(() => {
+  let dialogRun = 0
+  let dialogDead = false
+  onCleanup(() => {
+    dialogDead = true
+    dialogRun += 1
+  })
+  const servers = createMemo(() => {
+    const current = server.current
+    const list = server.list
+    if (!current) return list
+    if (list.every((item) => ServerConnection.key(item) !== ServerConnection.key(current))) return [current, ...list]
+    return [current, ...list.filter((item) => ServerConnection.key(item) !== ServerConnection.key(current))]
+  })
+  const health = useServerHealth(servers, shown)
+  const sortedServers = createMemo(() => listServersByHealth(servers(), server.key, health))
+  const toggleMcp = useMcpToggleMutation()
+  const defaultServer = useDefaultServerKey(platform.getDefaultServer)
+  const mcpNames = createMemo(() => Object.keys(sync.data.mcp ?? {}).sort((a, b) => a.localeCompare(b)))
+  const mcpStatus = (name: string) => sync.data.mcp?.[name]?.status
+  const mcpConnected = createMemo(() => mcpNames().filter((name) => mcpStatus(name) === "connected").length)
+  const lspItems = createMemo(() => sync.data.lsp ?? [])
+  const lspCount = createMemo(() => lspItems().length)
+  const plugins = createMemo(() => sync.data.config.plugin ?? [])
+  const pluginCount = createMemo(() => plugins().length)
+  const pluginEmpty = createMemo(() => pluginEmptyMessage(language.t("dialog.plugins.empty"), "opencode.json"))
+  const overallHealthy = createMemo(() => {
     const serverHealthy = server.healthy() === true
-    const mcp = Object.values(sync.data.mcp ?? {})
-    const issue = mcp.some((item) => item.status !== "connected" && item.status !== "disabled")
-    return serverHealthy && !issue
+    const anyMcpIssue = mcpNames().some((name) => {
+      const status = mcpStatus(name)
+      return status !== "connected" && status !== "disabled"
+    })
+    return serverHealthy && !anyMcpIssue
   })
 
   return (
@@ -40,9 +218,9 @@ export function StatusPopover() {
           <div
             classList={{
               "absolute -top-px -right-px size-1.5 rounded-full": true,
-              "bg-icon-success-base": ready() && healthy(),
-              "bg-icon-critical-base": server.healthy() === false || (ready() && !healthy()),
-              "bg-border-weak-base": server.healthy() === undefined || !ready(),
+              "bg-icon-success-base": overallHealthy(),
+              "bg-icon-critical-base": !overallHealthy() && server.healthy() !== undefined,
+              "bg-border-weak-base": server.healthy() === undefined,
             }}
           />
         </div>
@@ -52,15 +230,205 @@ export function StatusPopover() {
       placement="bottom-end"
       shift={-168}
     >
-      <Show when={shown()}>
-        <Suspense
-          fallback={
-            <div class="w-[360px] h-14 rounded-xl bg-background-strong shadow-[var(--shadow-lg-border-base)]" />
-          }
+      <div class="flex items-center gap-1 w-[360px] rounded-xl shadow-[var(--shadow-lg-border-base)]">
+        <Tabs
+          aria-label={language.t("status.popover.ariaLabel")}
+          class="tabs bg-background-strong rounded-xl overflow-hidden"
+          data-component="tabs"
+          data-active="servers"
+          defaultValue="servers"
+          variant="alt"
         >
-          <Body shown={shown} />
-        </Suspense>
-      </Show>
+          <Tabs.List data-slot="tablist" class="bg-transparent border-b-0 px-4 pt-2 pb-0 gap-4 h-10">
+            <Tabs.Trigger value="servers" data-slot="tab" class="text-12-regular">
+              {sortedServers().length > 0 ? `${sortedServers().length} ` : ""}
+              {language.t("status.popover.tab.servers")}
+            </Tabs.Trigger>
+            <Tabs.Trigger value="mcp" data-slot="tab" class="text-12-regular">
+              {mcpConnected() > 0 ? `${mcpConnected()} ` : ""}
+              {language.t("status.popover.tab.mcp")}
+            </Tabs.Trigger>
+            <Tabs.Trigger value="lsp" data-slot="tab" class="text-12-regular">
+              {lspCount() > 0 ? `${lspCount()} ` : ""}
+              {language.t("status.popover.tab.lsp")}
+            </Tabs.Trigger>
+            <Tabs.Trigger value="plugins" data-slot="tab" class="text-12-regular">
+              {pluginCount() > 0 ? `${pluginCount()} ` : ""}
+              {language.t("status.popover.tab.plugins")}
+            </Tabs.Trigger>
+          </Tabs.List>
+
+          <Tabs.Content value="servers">
+            <div class="flex flex-col px-2 pb-2">
+              <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
+                <For each={sortedServers()}>
+                  {(s) => {
+                    const key = ServerConnection.key(s)
+                    const isBlocked = () => health[key]?.healthy === false
+                    return (
+                      <button
+                        type="button"
+                        class="flex items-center gap-2 w-full h-8 pl-3 pr-1.5 py-1.5 rounded-md transition-colors text-left"
+                        classList={{
+                          "hover:bg-surface-raised-base-hover": !isBlocked(),
+                          "cursor-not-allowed": isBlocked(),
+                        }}
+                        aria-disabled={isBlocked()}
+                        onClick={() => {
+                          if (isBlocked()) return
+                          navigate("/")
+                          queueMicrotask(() => server.setActive(key))
+                        }}
+                      >
+                        <ServerHealthIndicator health={health[key]} />
+                        <ServerRow
+                          conn={s}
+                          dimmed={isBlocked()}
+                          status={health[key]}
+                          class="flex items-center gap-2 w-full min-w-0"
+                          nameClass="text-14-regular text-text-base truncate"
+                          versionClass="text-12-regular text-text-weak truncate"
+                          badge={
+                            <Show when={key === defaultServer.key()}>
+                              <span class="text-11-regular text-text-base bg-surface-base px-1.5 py-0.5 rounded-md">
+                                {language.t("common.default")}
+                              </span>
+                            </Show>
+                          }
+                        >
+                          <div class="flex-1" />
+                          <Show when={server.current && key === ServerConnection.key(server.current)}>
+                            <Icon name="check" size="small" class="text-icon-weak shrink-0" />
+                          </Show>
+                        </ServerRow>
+                      </button>
+                    )
+                  }}
+                </For>
+
+                <Button
+                  variant="secondary"
+                  class="mt-3 self-start h-8 px-3 py-1.5"
+                  onClick={() => {
+                    const run = ++dialogRun
+                    void import("./dialog-select-server").then((x) => {
+                      if (dialogDead || dialogRun !== run) return
+                      dialog.show(() => <x.DialogSelectServer />, defaultServer.refresh)
+                    })
+                  }}
+                >
+                  {language.t("status.popover.action.manageServers")}
+                </Button>
+              </div>
+            </div>
+          </Tabs.Content>
+
+          <Tabs.Content value="mcp">
+            <div class="flex flex-col px-2 pb-2">
+              <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
+                <Show
+                  when={mcpNames().length > 0}
+                  fallback={
+                    <div class="text-14-regular text-text-base text-center my-auto">
+                      {language.t("dialog.mcp.empty")}
+                    </div>
+                  }
+                >
+                  <For each={mcpNames()}>
+                    {(name) => {
+                      const status = () => mcpStatus(name)
+                      const enabled = () => status() === "connected"
+                      return (
+                        <button
+                          type="button"
+                          class="flex items-center gap-2 w-full h-8 pl-3 pr-2 py-1 rounded-md hover:bg-surface-raised-base-hover transition-colors text-left"
+                          onClick={() => {
+                            if (toggleMcp.isPending) return
+                            toggleMcp.mutate(name)
+                          }}
+                          disabled={toggleMcp.isPending && toggleMcp.variables === name}
+                        >
+                          <div
+                            classList={{
+                              "size-1.5 rounded-full shrink-0": true,
+                              "bg-icon-success-base": status() === "connected",
+                              "bg-icon-critical-base": status() === "failed",
+                              "bg-border-weak-base": status() === "disabled",
+                              "bg-icon-warning-base":
+                                status() === "needs_auth" || status() === "needs_client_registration",
+                            }}
+                          />
+                          <span class="text-14-regular text-text-base truncate flex-1">{name}</span>
+                          <div onClick={(event) => event.stopPropagation()}>
+                            <Switch
+                              checked={enabled()}
+                              disabled={toggleMcp.isPending && toggleMcp.variables === name}
+                              onChange={() => {
+                                if (toggleMcp.isPending) return
+                                toggleMcp.mutate(name)
+                              }}
+                            />
+                          </div>
+                        </button>
+                      )
+                    }}
+                  </For>
+                </Show>
+              </div>
+            </div>
+          </Tabs.Content>
+
+          <Tabs.Content value="lsp">
+            <div class="flex flex-col px-2 pb-2">
+              <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
+                <Show
+                  when={lspItems().length > 0}
+                  fallback={
+                    <div class="text-14-regular text-text-base text-center my-auto">
+                      {language.t("dialog.lsp.empty")}
+                    </div>
+                  }
+                >
+                  <For each={lspItems()}>
+                    {(item) => (
+                      <div class="flex items-center gap-2 w-full px-2 py-1">
+                        <div
+                          classList={{
+                            "size-1.5 rounded-full shrink-0": true,
+                            "bg-icon-success-base": item.status === "connected",
+                            "bg-icon-critical-base": item.status === "error",
+                          }}
+                        />
+                        <span class="text-14-regular text-text-base truncate">{item.name || item.id}</span>
+                      </div>
+                    )}
+                  </For>
+                </Show>
+              </div>
+            </div>
+          </Tabs.Content>
+
+          <Tabs.Content value="plugins">
+            <div class="flex flex-col px-2 pb-2">
+              <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
+                <Show
+                  when={plugins().length > 0}
+                  fallback={<div class="text-14-regular text-text-base text-center my-auto">{pluginEmpty()}</div>}
+                >
+                  <For each={plugins()}>
+                    {(plugin) => (
+                      <div class="flex items-center gap-2 w-full px-2 py-1">
+                        <div class="size-1.5 rounded-full shrink-0 bg-icon-success-base" />
+                        <span class="text-14-regular text-text-base truncate">{plugin}</span>
+                      </div>
+                    )}
+                  </For>
+                </Show>
+              </div>
+            </div>
+          </Tabs.Content>
+        </Tabs>
+      </div>
     </Popover>
   )
 }

packages/app/src/context/command.tsx

@@ -2,7 +2,6 @@ import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { type Accessor, createEffect, createMemo, onCleanup, onMount } from "solid-js"
 import { createStore } from "solid-js/store"
-import { makeEventListener } from "@solid-primitives/event-listener"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
 import { dict as en } from "@/i18n/en"
@@ -379,7 +378,11 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
     }
 
     onMount(() => {
-      makeEventListener(document, "keydown", handleKeyDown)
+      document.addEventListener("keydown", handleKeyDown)
+    })
+
+    onCleanup(() => {
+      document.removeEventListener("keydown", handleKeyDown)
     })
 
     function register(cb: () => CommandOption[]): void

packages/app/src/context/global-sdk.tsx

@@ -1,8 +1,7 @@
 import type { Event } from "@opencode-ai/sdk/v2/client"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { createGlobalEmitter } from "@solid-primitives/event-bus"
-import { makeEventListener } from "@solid-primitives/event-listener"
-import { batch, onCleanup, onMount } from "solid-js"
+import { batch, onCleanup } from "solid-js"
 import z from "zod"
 import { createSdkForServer } from "@/utils/server"
 import { useLanguage } from "./language"
@@ -106,8 +105,6 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
     const aborted = (error: unknown) => abortError.safeParse(error).success
 
     let attempt: AbortController | undefined
-    let run: Promise<void> | undefined
-    let started = false
     const HEARTBEAT_TIMEOUT_MS = 15_000
     let lastEventAt = Date.now()
     let heartbeat: ReturnType<typeof setTimeout> | undefined
@@ -124,100 +121,89 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
       heartbeat = undefined
     }
 
-    const start = () => {
-      if (started) return run
-      started = true
-      run = (async () => {
-        while (!abort.signal.aborted && started) {
-          attempt = new AbortController()
-          lastEventAt = Date.now()
-          const onAbort = () => {
-            attempt?.abort()
-          }
-          abort.signal.addEventListener("abort", onAbort)
-          try {
-            const events = await eventSdk.global.event({
-              signal: attempt.signal,
-              onSseError: (error) => {
-                if (aborted(error)) return
-                if (streamErrorLogged) return
-                streamErrorLogged = true
-                console.error("[global-sdk] event stream error", {
-                  url: currentServer.http.url,
-                  fetch: eventFetch ? "platform" : "webview",
-                  error,
-                })
-              },
-            })
-            let yielded = Date.now()
-            resetHeartbeat()
-            for await (const event of events.stream) {
-              resetHeartbeat()
-              streamErrorLogged = false
-              const directory = event.directory ?? "global"
-              const payload = event.payload
-              const k = key(directory, payload)
-              if (k) {
-                const i = coalesced.get(k)
-                if (i !== undefined) {
-                  queue[i] = { directory, payload }
-                  if (payload.type === "message.part.updated") {
-                    const part = payload.properties.part
-                    staleDeltas.add(deltaKey(directory, part.messageID, part.id))
-                  }
-                  continue
-                }
-                coalesced.set(k, queue.length)
-              }
-              queue.push({ directory, payload })
-              schedule()
-
-              if (Date.now() - yielded < STREAM_YIELD_MS) continue
-              yielded = Date.now()
-              await wait(0)
-            }
-          } catch (error) {
-            if (!aborted(error) && !streamErrorLogged) {
+    void (async () => {
+      while (!abort.signal.aborted) {
+        attempt = new AbortController()
+        lastEventAt = Date.now()
+        const onAbort = () => {
+          attempt?.abort()
+        }
+        abort.signal.addEventListener("abort", onAbort)
+        try {
+          const events = await eventSdk.global.event({
+            signal: attempt.signal,
+            onSseError: (error) => {
+              if (aborted(error)) return
+              if (streamErrorLogged) return
               streamErrorLogged = true
-              console.error("[global-sdk] event stream failed", {
+              console.error("[global-sdk] event stream error", {
                 url: currentServer.http.url,
                 fetch: eventFetch ? "platform" : "webview",
                 error,
               })
+            },
+          })
+          let yielded = Date.now()
+          resetHeartbeat()
+          for await (const event of events.stream) {
+            resetHeartbeat()
+            streamErrorLogged = false
+            const directory = event.directory ?? "global"
+            const payload = event.payload
+            const k = key(directory, payload)
+            if (k) {
+              const i = coalesced.get(k)
+              if (i !== undefined) {
+                queue[i] = { directory, payload }
+                if (payload.type === "message.part.updated") {
+                  const part = payload.properties.part
+                  staleDeltas.add(deltaKey(directory, part.messageID, part.id))
+                }
+                continue
+              }
+              coalesced.set(k, queue.length)
             }
-          } finally {
-            abort.signal.removeEventListener("abort", onAbort)
-            attempt = undefined
-            clearHeartbeat()
+            queue.push({ directory, payload })
+            schedule()
+
+            if (Date.now() - yielded < STREAM_YIELD_MS) continue
+            yielded = Date.now()
+            await wait(0)
           }
-
-          if (abort.signal.aborted || !started) return
-          await wait(RECONNECT_DELAY_MS)
+        } catch (error) {
+          if (!aborted(error) && !streamErrorLogged) {
+            streamErrorLogged = true
+            console.error("[global-sdk] event stream failed", {
+              url: currentServer.http.url,
+              fetch: eventFetch ? "platform" : "webview",
+              error,
+            })
+          }
+        } finally {
+          abort.signal.removeEventListener("abort", onAbort)
+          attempt = undefined
+          clearHeartbeat()
         }
-      })().finally(() => {
-        run = undefined
-        flush()
-      })
-      return run
-    }
 
-    const stop = () => {
-      started = false
+        if (abort.signal.aborted) return
+        await wait(RECONNECT_DELAY_MS)
+      }
+    })().finally(flush)
+
+    const onVisibility = () => {
+      if (typeof document === "undefined") return
+      if (document.visibilityState !== "visible") return
+      if (Date.now() - lastEventAt < HEARTBEAT_TIMEOUT_MS) return
       attempt?.abort()
-      clearHeartbeat()
     }
-
-    onMount(() => {
-      makeEventListener(document, "visibilitychange", () => {
-        if (document.visibilityState !== "visible") return
-        if (!started) return
-        if (Date.now() - lastEventAt < HEARTBEAT_TIMEOUT_MS) return
-        attempt?.abort()
-      })
-    })
+    if (typeof document !== "undefined") {
+      document.addEventListener("visibilitychange", onVisibility)
+    }
 
     onCleanup(() => {
-      stop()
+      if (typeof document !== "undefined") {
+        document.removeEventListener("visibilitychange", onVisibility)
+      }
       abort.abort()
       flush()
     })
@@ -231,11 +217,7 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
     return {
       url: currentServer.http.url,
       client: sdk,
-      event: {
-        on: emitter.on.bind(emitter),
-        listen: emitter.listen.bind(emitter),
-        start,
-      },
+      event: emitter,
       createClient(opts: Omit<Parameters<typeof createSdkForServer>[0], "server" | "fetch">) {
         const s = server.current
         if (!s) throw new Error(language.t("error.globalSDK.serverNotAvailable"))

packages/app/src/context/global-sync.tsx

@@ -15,7 +15,7 @@ import { useLanguage } from "@/context/language"
 import { Persist, persisted } from "@/utils/persist"
 import type { InitError } from "../pages/error"
 import { useGlobalSDK } from "./global-sdk"
-import { bootstrapDirectory, bootstrapGlobal, clearProviderRev } from "./global-sync/bootstrap"
+import { bootstrapDirectory, bootstrapGlobal } from "./global-sync/bootstrap"
 import { createChildStoreManager } from "./global-sync/child-store"
 import { applyDirectoryEvent, applyGlobalEvent, cleanupDroppedSessionCaches } from "./global-sync/event-reducer"
 import { createRefreshQueue } from "./global-sync/queue"
@@ -72,16 +72,10 @@ function createGlobalSync() {
   let projectWritten = false
   let bootedAt = 0
   let bootingRoot = false
-  let eventFrame: number | undefined
-  let eventTimer: ReturnType<typeof setTimeout> | undefined
 
   onCleanup(() => {
     active = false
   })
-  onCleanup(() => {
-    if (eventFrame !== undefined) cancelAnimationFrame(eventFrame)
-    if (eventTimer !== undefined) clearTimeout(eventTimer)
-  })
 
   const cacheProjects = () => {
     setProjectCache(
@@ -160,7 +154,6 @@ function createGlobalSync() {
       queue.clear(directory)
       sessionMeta.delete(directory)
       sdkCache.delete(directory)
-      clearProviderRev(directory)
       clearSessionPrefetchDirectory(directory)
     },
     translate: language.t,
@@ -259,7 +252,6 @@ function createGlobalSync() {
         directory,
         global: {
           config: globalStore.config,
-          path: globalStore.path,
           project: globalStore.project,
           provider: globalStore.provider,
         },
@@ -319,10 +311,7 @@ function createGlobalSync() {
       loadLsp: () => {
         sdkFor(directory)
           .lsp.status()
-          .then((x) => {
-            setStore("lsp", x.data ?? [])
-            setStore("lsp_ready", true)
-          })
+          .then((x) => setStore("lsp", x.data ?? []))
       },
     })
   })
@@ -354,20 +343,6 @@ function createGlobalSync() {
   }
 
   onMount(() => {
-    if (typeof requestAnimationFrame === "function") {
-      eventFrame = requestAnimationFrame(() => {
-        eventFrame = undefined
-        eventTimer = setTimeout(() => {
-          eventTimer = undefined
-          globalSDK.event.start()
-        }, 0)
-      })
-    } else {
-      eventTimer = setTimeout(() => {
-        eventTimer = undefined
-        globalSDK.event.start()
-      }, 0)
-    }
     void bootstrap()
   })
 

packages/app/src/context/global-sync/bootstrap.ts

@@ -7,7 +7,6 @@ import type {
   ProviderAuthResponse,
   ProviderListResponse,
   QuestionRequest,
-  Session,
   Todo,
 } from "@opencode-ai/sdk/v2/client"
 import { showToast } from "@opencode-ai/ui/toast"
@@ -43,10 +42,8 @@ function waitForPaint() {
     const timer = setTimeout(finish, 50)
     if (typeof requestAnimationFrame !== "function") return
     requestAnimationFrame(() => {
-      setTimeout(() => {
-        clearTimeout(timer)
-        finish()
-      }, 0)
+      clearTimeout(timer)
+      finish()
     })
   })
 }
@@ -55,12 +52,6 @@ function errors(list: PromiseSettledResult<unknown>[]) {
   return list.filter((item): item is PromiseRejectedResult => item.status === "rejected").map((item) => item.reason)
 }
 
-const providerRev = new Map<string, number>()
-
-export function clearProviderRev(directory: string) {
-  providerRev.delete(directory)
-}
-
 function runAll(list: Array<() => Promise<unknown>>) {
   return Promise.allSettled(list.map((item) => item()))
 }
@@ -89,6 +80,12 @@ export async function bootstrapGlobal(input: {
   setGlobalStore: SetStoreFunction<GlobalStore>
 }) {
   const fast = [
+    () =>
+      retry(() =>
+        input.globalSDK.path.get().then((x) => {
+          input.setGlobalStore("path", x.data!)
+        }),
+      ),
     () =>
       retry(() =>
         input.globalSDK.global.config.get().then((x) => {
@@ -104,12 +101,6 @@ export async function bootstrapGlobal(input: {
   ]
 
   const slow = [
-    () =>
-      retry(() =>
-        input.globalSDK.path.get().then((x) => {
-          input.setGlobalStore("path", x.data!)
-        }),
-      ),
     () =>
       retry(() =>
         input.globalSDK.project.list().then((x) => {
@@ -153,40 +144,6 @@ function projectID(directory: string, projects: Project[]) {
   return projects.find((project) => project.worktree === directory || project.sandboxes?.includes(directory))?.id
 }
 
-function mergeSession(setStore: SetStoreFunction<State>, session: Session) {
-  setStore("session", (list) => {
-    const next = list.slice()
-    const idx = next.findIndex((item) => item.id >= session.id)
-    if (idx === -1) return [...next, session]
-    if (next[idx]?.id === session.id) {
-      next[idx] = session
-      return next
-    }
-    next.splice(idx, 0, session)
-    return next
-  })
-}
-
-function warmSessions(input: {
-  ids: string[]
-  store: Store<State>
-  setStore: SetStoreFunction<State>
-  sdk: OpencodeClient
-}) {
-  const known = new Set(input.store.session.map((item) => item.id))
-  const ids = [...new Set(input.ids)].filter((id) => !!id && !known.has(id))
-  if (ids.length === 0) return Promise.resolve()
-  return Promise.all(
-    ids.map((sessionID) =>
-      retry(() => input.sdk.session.get({ sessionID })).then((x) => {
-        const session = x.data
-        if (!session?.id) return
-        mergeSession(input.setStore, session)
-      }),
-    ),
-  ).then(() => undefined)
-}
-
 export async function bootstrapDirectory(input: {
   directory: string
   sdk: OpencodeClient
@@ -197,121 +154,104 @@ export async function bootstrapDirectory(input: {
   translate: (key: string, vars?: Record<string, string | number>) => string
   global: {
     config: Config
-    path: Path
     project: Project[]
     provider: ProviderListResponse
   }
 }) {
   const loading = input.store.status !== "complete"
   const seededProject = projectID(input.directory, input.global.project)
-  const seededPath = input.global.path.directory === input.directory ? input.global.path : undefined
   if (seededProject) input.setStore("project", seededProject)
-  if (seededPath) input.setStore("path", seededPath)
   if (input.store.provider.all.length === 0 && input.global.provider.all.length > 0) {
     input.setStore("provider", input.global.provider)
   }
   if (Object.keys(input.store.config).length === 0 && Object.keys(input.global.config).length > 0) {
     input.setStore("config", input.global.config)
   }
-  if (loading || input.store.provider.all.length === 0) {
-    input.setStore("provider_ready", false)
-  }
-  input.setStore("mcp_ready", false)
-  input.setStore("mcp", {})
-  input.setStore("lsp_ready", false)
-  input.setStore("lsp", [])
   if (loading) input.setStore("status", "partial")
 
   const fast = [
-    () => retry(() => input.sdk.app.agents().then((x) => input.setStore("agent", normalizeAgentList(x.data)))),
-    () => retry(() => input.sdk.config.get().then((x) => input.setStore("config", x.data!))),
-    () => retry(() => input.sdk.session.status().then((x) => input.setStore("session_status", x.data!))),
-  ]
-
-  const slow = [
     () =>
       seededProject
         ? Promise.resolve()
         : retry(() => input.sdk.project.current()).then((x) => input.setStore("project", x.data!.id)),
+    () => retry(() => input.sdk.app.agents().then((x) => input.setStore("agent", normalizeAgentList(x.data)))),
+    () => retry(() => input.sdk.config.get().then((x) => input.setStore("config", x.data!))),
     () =>
-      seededPath
-        ? Promise.resolve()
-        : retry(() =>
-            input.sdk.path.get().then((x) => {
-              input.setStore("path", x.data!)
-              const next = projectID(x.data?.directory ?? input.directory, input.global.project)
-              if (next) input.setStore("project", next)
-            }),
-          ),
+      retry(() =>
+        input.sdk.path.get().then((x) => {
+          input.setStore("path", x.data!)
+          const next = projectID(x.data?.directory ?? input.directory, input.global.project)
+          if (next) input.setStore("project", next)
+        }),
+      ),
+    () => retry(() => input.sdk.session.status().then((x) => input.setStore("session_status", x.data!))),
     () =>
       retry(() =>
         input.sdk.vcs.get().then((x) => {
           const next = x.data ?? input.store.vcs
           input.setStore("vcs", next)
-          if (next?.branch) input.vcsCache.setStore("value", next)
+          if (next) input.vcsCache.setStore("value", next)
         }),
       ),
     () => retry(() => input.sdk.command.list().then((x) => input.setStore("command", x.data ?? []))),
     () =>
       retry(() =>
         input.sdk.permission.list().then((x) => {
-          const ids = (x.data ?? []).map((perm) => perm?.sessionID).filter((id): id is string => !!id)
           const grouped = groupBySession(
             (x.data ?? []).filter((perm): perm is PermissionRequest => !!perm?.id && !!perm.sessionID),
           )
-          return warmSessions({ ids, store: input.store, setStore: input.setStore, sdk: input.sdk }).then(() =>
-            batch(() => {
-              for (const sessionID of Object.keys(input.store.permission)) {
-                if (grouped[sessionID]) continue
-                input.setStore("permission", sessionID, [])
-              }
-              for (const [sessionID, permissions] of Object.entries(grouped)) {
-                input.setStore(
-                  "permission",
-                  sessionID,
-                  reconcile(
-                    permissions.filter((p) => !!p?.id).sort((a, b) => cmp(a.id, b.id)),
-                    { key: "id" },
-                  ),
-                )
-              }
-            }),
-          )
+          batch(() => {
+            for (const sessionID of Object.keys(input.store.permission)) {
+              if (grouped[sessionID]) continue
+              input.setStore("permission", sessionID, [])
+            }
+            for (const [sessionID, permissions] of Object.entries(grouped)) {
+              input.setStore(
+                "permission",
+                sessionID,
+                reconcile(
+                  permissions.filter((p) => !!p?.id).sort((a, b) => cmp(a.id, b.id)),
+                  { key: "id" },
+                ),
+              )
+            }
+          })
         }),
       ),
     () =>
       retry(() =>
         input.sdk.question.list().then((x) => {
-          const ids = (x.data ?? []).map((question) => question?.sessionID).filter((id): id is string => !!id)
           const grouped = groupBySession((x.data ?? []).filter((q): q is QuestionRequest => !!q?.id && !!q.sessionID))
-          return warmSessions({ ids, store: input.store, setStore: input.setStore, sdk: input.sdk }).then(() =>
-            batch(() => {
-              for (const sessionID of Object.keys(input.store.question)) {
-                if (grouped[sessionID]) continue
-                input.setStore("question", sessionID, [])
-              }
-              for (const [sessionID, questions] of Object.entries(grouped)) {
-                input.setStore(
-                  "question",
-                  sessionID,
-                  reconcile(
-                    questions.filter((q) => !!q?.id).sort((a, b) => cmp(a.id, b.id)),
-                    { key: "id" },
-                  ),
-                )
-              }
-            }),
-          )
+          batch(() => {
+            for (const sessionID of Object.keys(input.store.question)) {
+              if (grouped[sessionID]) continue
+              input.setStore("question", sessionID, [])
+            }
+            for (const [sessionID, questions] of Object.entries(grouped)) {
+              input.setStore(
+                "question",
+                sessionID,
+                reconcile(
+                  questions.filter((q) => !!q?.id).sort((a, b) => cmp(a.id, b.id)),
+                  { key: "id" },
+                ),
+              )
+            }
+          })
+        }),
+      ),
+  ]
+
+  const slow = [
+    () =>
+      retry(() =>
+        input.sdk.provider.list().then((x) => {
+          input.setStore("provider", normalizeProviderList(x.data!))
         }),
       ),
     () => Promise.resolve(input.loadSessions(input.directory)),
-    () =>
-      retry(() =>
-        input.sdk.mcp.status().then((x) => {
-          input.setStore("mcp", x.data!)
-          input.setStore("mcp_ready", true)
-        }),
-      ),
+    () => retry(() => input.sdk.mcp.status().then((x) => input.setStore("mcp", x.data!))),
+    () => retry(() => input.sdk.lsp.status().then((x) => input.setStore("lsp", x.data!))),
   ]
 
   const errs = errors(await runAll(fast))
@@ -338,23 +278,4 @@ export async function bootstrapDirectory(input: {
   }
 
   if (loading && errs.length === 0 && slowErrs.length === 0) input.setStore("status", "complete")
-
-  const rev = (providerRev.get(input.directory) ?? 0) + 1
-  providerRev.set(input.directory, rev)
-  void retry(() => input.sdk.provider.list())
-    .then((x) => {
-      if (providerRev.get(input.directory) !== rev) return
-      input.setStore("provider", normalizeProviderList(x.data!))
-      input.setStore("provider_ready", true)
-    })
-    .catch((err) => {
-      if (providerRev.get(input.directory) !== rev) return
-      console.error("Failed to refresh provider list", err)
-      const project = getFilename(input.directory)
-      showToast({
-        variant: "error",
-        title: input.translate("toast.project.reloadFailed.title", { project }),
-        description: formatServerError(err, input.translate),
-      })
-    })
 }

packages/app/src/context/global-sync/child-store.ts

@@ -160,7 +160,6 @@ export function createChildStoreManager(input: {
             project: "",
             projectMeta: initialMeta,
             icon: initialIcon,
-            provider_ready: false,
             provider: { all: [], connected: [], default: {} },
             config: {},
             path: { state: "", config: "", worktree: "", directory: "", home: "" },
@@ -174,9 +173,7 @@ export function createChildStoreManager(input: {
             todo: {},
             permission: {},
             question: {},
-            mcp_ready: false,
             mcp: {},
-            lsp_ready: false,
             lsp: [],
             vcs: vcsStore.value,
             limit: 5,

packages/app/src/context/global-sync/event-reducer.test.ts

@@ -494,8 +494,10 @@ describe("applyDirectoryEvent", () => {
   })
 
   test("updates vcs branch in store and cache", () => {
-    const [store, setStore] = createStore(baseState())
-    const [cacheStore, setCacheStore] = createStore({ value: undefined as State["vcs"] })
+    const [store, setStore] = createStore(baseState({ vcs: { branch: "main", default_branch: "main" } }))
+    const [cacheStore, setCacheStore] = createStore({
+      value: { branch: "main", default_branch: "main" } as State["vcs"],
+    })
 
     applyDirectoryEvent({
       event: { type: "vcs.branch.updated", properties: { branch: "feature/test" } },
@@ -511,8 +513,8 @@ describe("applyDirectoryEvent", () => {
       },
     })
 
-    expect(store.vcs).toEqual({ branch: "feature/test" })
-    expect(cacheStore.value).toEqual({ branch: "feature/test" })
+    expect(store.vcs).toEqual({ branch: "feature/test", default_branch: "main" })
+    expect(cacheStore.value).toEqual({ branch: "feature/test", default_branch: "main" })
   })
 
   test("routes disposal and lsp events to side-effect handlers", () => {

packages/app/src/context/global-sync/event-reducer.ts

@@ -271,9 +271,9 @@ export function applyDirectoryEvent(input: {
       break
     }
     case "vcs.branch.updated": {
-      const props = event.properties as { branch: string }
+      const props = event.properties as { branch?: string }
       if (input.store.vcs?.branch === props.branch) break
-      const next = { branch: props.branch }
+      const next = { ...input.store.vcs, branch: props.branch }
       input.setStore("vcs", next)
       if (input.vcsCache) input.vcsCache.setStore("value", next)
       break

packages/app/src/context/global-sync/types.ts

@@ -38,7 +38,6 @@ export type State = {
   project: string
   projectMeta: ProjectMeta | undefined
   icon: string | undefined
-  provider_ready: boolean
   provider: ProviderListResponse
   config: Config
   path: Path
@@ -59,11 +58,9 @@ export type State = {
   question: {
     [sessionID: string]: QuestionRequest[]
   }
-  mcp_ready: boolean
   mcp: {
     [name: string]: McpStatus
   }
-  lsp_ready: boolean
   lsp: LspStatus[]
   vcs: VcsInfo | undefined
   limit: number

packages/app/src/context/layout.tsx

@@ -1,7 +1,6 @@
 import { createStore, produce } from "solid-js/store"
 import { batch, createEffect, createMemo, onCleanup, onMount, type Accessor } from "solid-js"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { makeEventListener } from "@solid-primitives/event-listener"
 import { useGlobalSync } from "./global-sync"
 import { useGlobalSDK } from "./global-sdk"
 import { useServer } from "./server"
@@ -14,8 +13,7 @@ import { createScrollPersistence, type SessionScroll } from "./layout-scroll"
 import { createPathHelpers } from "./file/path"
 
 const AVATAR_COLOR_KEYS = ["pink", "mint", "orange", "purple", "cyan", "lime"] as const
-const DEFAULT_SIDEBAR_WIDTH = 344
-const DEFAULT_FILE_TREE_WIDTH = 200
+const DEFAULT_PANEL_WIDTH = 344
 const DEFAULT_SESSION_WIDTH = 600
 const DEFAULT_TERMINAL_HEIGHT = 280
 export type AvatarColorKey = (typeof AVATAR_COLOR_KEYS)[number]
@@ -163,11 +161,11 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         if (!isRecord(fileTree)) return fileTree
         if (fileTree.tab === "changes" || fileTree.tab === "all") return fileTree
 
-        const width = typeof fileTree.width === "number" ? fileTree.width : DEFAULT_FILE_TREE_WIDTH
+        const width = typeof fileTree.width === "number" ? fileTree.width : DEFAULT_PANEL_WIDTH
         return {
           ...fileTree,
           opened: true,
-          width: width === 260 ? DEFAULT_FILE_TREE_WIDTH : width,
+          width: width === 260 ? DEFAULT_PANEL_WIDTH : width,
           tab: "changes",
         }
       })()
@@ -232,7 +230,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       createStore({
         sidebar: {
           opened: false,
-          width: DEFAULT_SIDEBAR_WIDTH,
+          width: DEFAULT_PANEL_WIDTH,
           workspaces: {} as Record<string, boolean>,
           workspacesDefault: false,
         },
@@ -245,8 +243,8 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           panelOpened: true,
         },
         fileTree: {
-          opened: false,
-          width: DEFAULT_FILE_TREE_WIDTH,
+          opened: true,
+          width: DEFAULT_PANEL_WIDTH,
           tab: "changes" as "changes" | "all",
         },
         session: {
@@ -367,10 +365,12 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         flush()
       }
 
-      makeEventListener(window, "pagehide", flush)
-      makeEventListener(document, "visibilitychange", handleVisibility)
+      window.addEventListener("pagehide", flush)
+      document.addEventListener("visibilitychange", handleVisibility)
 
       onCleanup(() => {
+        window.removeEventListener("pagehide", flush)
+        document.removeEventListener("visibilitychange", handleVisibility)
         scroll.dispose()
       })
     })
@@ -543,26 +543,12 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       }
     })
 
-    let sessionFrame: number | undefined
-    let sessionTimer: number | undefined
-
     onMount(() => {
-      sessionFrame = requestAnimationFrame(() => {
-        sessionFrame = undefined
-        sessionTimer = window.setTimeout(() => {
-          sessionTimer = undefined
-          void Promise.all(
-            server.projects.list().map((project) => {
-              return globalSync.project.loadSessions(project.worktree)
-            }),
-          )
-        }, 0)
-      })
-    })
-
-    onCleanup(() => {
-      if (sessionFrame !== undefined) cancelAnimationFrame(sessionFrame)
-      if (sessionTimer !== undefined) window.clearTimeout(sessionTimer)
+      Promise.all(
+        server.projects.list().map((project) => {
+          return globalSync.project.loadSessions(project.worktree)
+        }),
+      )
     })
 
     return {
@@ -642,32 +628,32 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       },
       fileTree: {
         opened: createMemo(() => store.fileTree?.opened ?? true),
-        width: createMemo(() => store.fileTree?.width ?? DEFAULT_FILE_TREE_WIDTH),
+        width: createMemo(() => store.fileTree?.width ?? DEFAULT_PANEL_WIDTH),
         tab: createMemo(() => store.fileTree?.tab ?? "changes"),
         setTab(tab: "changes" | "all") {
           if (!store.fileTree) {
-            setStore("fileTree", { opened: true, width: DEFAULT_FILE_TREE_WIDTH, tab })
+            setStore("fileTree", { opened: true, width: DEFAULT_PANEL_WIDTH, tab })
             return
           }
           setStore("fileTree", "tab", tab)
         },
         open() {
           if (!store.fileTree) {
-            setStore("fileTree", { opened: true, width: DEFAULT_FILE_TREE_WIDTH, tab: "changes" })
+            setStore("fileTree", { opened: true, width: DEFAULT_PANEL_WIDTH, tab: "changes" })
             return
           }
           setStore("fileTree", "opened", true)
         },
         close() {
           if (!store.fileTree) {
-            setStore("fileTree", { opened: false, width: DEFAULT_FILE_TREE_WIDTH, tab: "changes" })
+            setStore("fileTree", { opened: false, width: DEFAULT_PANEL_WIDTH, tab: "changes" })
             return
           }
           setStore("fileTree", "opened", false)
         },
         toggle() {
           if (!store.fileTree) {
-            setStore("fileTree", { opened: true, width: DEFAULT_FILE_TREE_WIDTH, tab: "changes" })
+            setStore("fileTree", { opened: true, width: DEFAULT_PANEL_WIDTH, tab: "changes" })
             return
           }
           setStore("fileTree", "opened", (x) => !x)

packages/app/src/context/local.tsx

@@ -390,18 +390,10 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
     }
 
     if (modelEnabled()) {
-      const probe = Symbol("model-probe")
-
-      modelProbe.bind(probe, {
-        setAgent: agent.set,
-        setModel: model.set,
-        setVariant: model.variant.set,
-      })
-
       createEffect(() => {
         const agent = result.agent.current()
         const model = result.model.current()
-        modelProbe.set(probe, {
+        modelProbe.set({
           dir: sdk.directory,
           sessionID: id(),
           last: store.last,
@@ -419,20 +411,10 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
           pick: scope(),
           base: undefined,
           current: store.current,
-          variants: result.model.variant.list(),
-          models: result.model
-            .list()
-            .filter((item) => result.model.visible({ providerID: item.provider.id, modelID: item.id }))
-            .map((item) => ({
-              providerID: item.provider.id,
-              modelID: item.id,
-              name: item.name,
-            })),
-          agents: result.agent.list().map((item) => ({ name: item.name })),
         })
       })
 
-      onCleanup(() => modelProbe.clear(probe))
+      onCleanup(() => modelProbe.clear())
     }
 
     return result

packages/app/src/context/server.tsx

@@ -94,11 +94,7 @@ export namespace ServerConnection {
 
 export const { use: useServer, provider: ServerProvider } = createSimpleContext({
   name: "Server",
-  init: (props: {
-    defaultServer: ServerConnection.Key
-    disableHealthCheck?: boolean
-    servers?: Array<ServerConnection.Any>
-  }) => {
+  init: (props: { defaultServer: ServerConnection.Key; servers?: Array<ServerConnection.Any> }) => {
     const checkServerHealth = useCheckServerHealth()
 
     const [store, setStore, _, ready] = persisted(
@@ -206,10 +202,6 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
       const current_ = current()
       if (!current_) return
 
-      if (props.disableHealthCheck) {
-        setState("healthy", true)
-        return
-      }
       setState("healthy", undefined)
       onCleanup(startHealthPolling(current_))
     })

packages/app/src/context/settings.tsx

@@ -32,8 +32,7 @@ export interface Settings {
   }
   appearance: {
     fontSize: number
-    mono: string
-    sans: string
+    font: string
   }
   keybinds: Record<string, string>
   permissions: {
@@ -43,54 +42,13 @@ export interface Settings {
   sounds: SoundSettings
 }
 
-export const monoDefault = "System Mono"
-export const sansDefault = "System Sans"
-
-const monoFallback =
-  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
-const sansFallback = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
-
-const monoBase = monoFallback
-const sansBase = sansFallback
-
-function input(font: string | undefined) {
-  return font ?? ""
-}
-
-function family(font: string) {
-  if (/^[\w-]+$/.test(font)) return font
-  return `"${font.replaceAll("\\", "\\\\").replaceAll('"', '\\"')}"`
-}
-
-function stack(font: string | undefined, base: string) {
-  const value = font?.trim() ?? ""
-  if (!value) return base
-  return `${family(value)}, ${base}`
-}
-
-export function monoInput(font: string | undefined) {
-  return input(font)
-}
-
-export function sansInput(font: string | undefined) {
-  return input(font)
-}
-
-export function monoFontFamily(font: string | undefined) {
-  return stack(font, monoBase)
-}
-
-export function sansFontFamily(font: string | undefined) {
-  return stack(font, sansBase)
-}
-
 const defaultSettings: Settings = {
   general: {
     autoSave: true,
     releaseNotes: true,
     followup: "steer",
     showReasoningSummaries: false,
-    shellToolPartsExpanded: false,
+    shellToolPartsExpanded: true,
     editToolPartsExpanded: false,
   },
   updates: {
@@ -98,8 +56,7 @@ const defaultSettings: Settings = {
   },
   appearance: {
     fontSize: 14,
-    mono: "",
-    sans: "",
+    font: "ibm-plex-mono",
   },
   keybinds: {},
   permissions: {
@@ -120,10 +77,40 @@ const defaultSettings: Settings = {
   },
 }
 
+const monoFallback =
+  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+
+const monoFonts: Record<string, string> = {
+  "ibm-plex-mono": `"IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "cascadia-code": `"Cascadia Code Nerd Font", "Cascadia Code NF", "Cascadia Mono NF", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "fira-code": `"Fira Code Nerd Font", "FiraMono Nerd Font", "FiraMono Nerd Font Mono", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  hack: `"Hack Nerd Font", "Hack Nerd Font Mono", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  inconsolata: `"Inconsolata Nerd Font", "Inconsolata Nerd Font Mono","IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "intel-one-mono": `"Intel One Mono Nerd Font", "IntoneMono Nerd Font", "IntoneMono Nerd Font Mono", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  iosevka: `"Iosevka Nerd Font", "Iosevka Nerd Font Mono", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "jetbrains-mono": `"JetBrains Mono Nerd Font", "JetBrainsMono Nerd Font Mono", "JetBrainsMonoNL Nerd Font", "JetBrainsMonoNL Nerd Font Mono", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "meslo-lgs": `"Meslo LGS Nerd Font", "MesloLGS Nerd Font", "MesloLGM Nerd Font", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "roboto-mono": `"Roboto Mono Nerd Font", "RobotoMono Nerd Font", "RobotoMono Nerd Font Mono", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "source-code-pro": `"Source Code Pro Nerd Font", "SauceCodePro Nerd Font", "SauceCodePro Nerd Font Mono", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "ubuntu-mono": `"Ubuntu Mono Nerd Font", "UbuntuMono Nerd Font", "UbuntuMono Nerd Font Mono", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "geist-mono": `"GeistMono Nerd Font", "GeistMono Nerd Font Mono", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+}
+
+export function monoFontFamily(font: string | undefined) {
+  return monoFonts[font ?? defaultSettings.appearance.font] ?? monoFonts[defaultSettings.appearance.font]
+}
+
 function withFallback<T>(read: () => T | undefined, fallback: T) {
   return createMemo(() => read() ?? fallback)
 }
 
+let font: Promise<typeof import("@opencode-ai/ui/font-loader")> | undefined
+
+function loadFont() {
+  font ??= import("@opencode-ai/ui/font-loader")
+  return font
+}
+
 export const { use: useSettings, provider: SettingsProvider } = createSimpleContext({
   name: "Settings",
   init: () => {
@@ -131,9 +118,11 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
 
     createEffect(() => {
       if (typeof document === "undefined") return
-      const root = document.documentElement
-      root.style.setProperty("--font-family-mono", monoFontFamily(store.appearance?.mono))
-      root.style.setProperty("--font-family-sans", sansFontFamily(store.appearance?.sans))
+      const id = store.appearance?.font ?? defaultSettings.appearance.font
+      if (id !== defaultSettings.appearance.font) {
+        void loadFont().then((x) => x.ensureMonoFont(id))
+      }
+      document.documentElement.style.setProperty("--font-family-mono", monoFontFamily(id))
     })
 
     return {
@@ -187,13 +176,9 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setFontSize(value: number) {
           setStore("appearance", "fontSize", value)
         },
-        font: withFallback(() => store.appearance?.mono, defaultSettings.appearance.mono),
+        font: withFallback(() => store.appearance?.font, defaultSettings.appearance.font),
         setFont(value: string) {
-          setStore("appearance", "mono", value.trim() ? value : "")
-        },
-        uiFont: withFallback(() => store.appearance?.sans, defaultSettings.appearance.sans),
-        setUIFont(value: string) {
-          setStore("appearance", "sans", value.trim() ? value : "")
+          setStore("appearance", "font", value)
         },
       },
       keybinds: {

packages/app/src/hooks/use-providers.ts

@@ -22,7 +22,7 @@ export function useProviders() {
   const providers = () => {
     if (dir()) {
       const [projectStore] = globalSync.child(dir())
-      if (projectStore.provider_ready) return projectStore.provider
+      if (projectStore.provider.all.length > 0) return projectStore.provider
     }
     return globalSync.data.provider
   }

packages/app/src/i18n/ar.ts

@@ -564,10 +564,8 @@ export const dict = {
   "settings.general.row.colorScheme.description": "اختر ما إذا كان OpenCode يتبع سمة النظام أو الفاتح أو الداكن",
   "settings.general.row.theme.title": "السمة",
   "settings.general.row.theme.description": "تخصيص سمة OpenCode.",
-  "settings.general.row.font.title": "خط الكود",
-  "settings.general.row.font.description": "خصّص الخط المستخدم في كتل التعليمات البرمجية والطرفيات",
-  "settings.general.row.uiFont.title": "خط الواجهة",
-  "settings.general.row.uiFont.description": "خصّص الخط المستخدم في الواجهة بأكملها",
+  "settings.general.row.font.title": "الخط",
+  "settings.general.row.font.description": "تخصيص الخط الأحادي المستخدم في كتل التعليمات البرمجية",
   "settings.general.row.followup.title": "سلوك المتابعة",
   "settings.general.row.followup.description": "اختر ما إذا كانت طلبات المتابعة توجه فورًا أو تنتظر في قائمة انتظار",
   "settings.general.row.followup.option.queue": "قائمة انتظار",
@@ -594,6 +592,19 @@ export const dict = {
   "settings.updates.action.checking": "جارٍ التحقق...",
   "settings.updates.toast.latest.title": "أنت على آخر إصدار",
   "settings.updates.toast.latest.description": "أنت تستخدم أحدث إصدار من OpenCode.",
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
   "sound.option.none": "بلا",
   "sound.option.alert01": "تنبيه 01",
   "sound.option.alert02": "تنبيه 02",

packages/app/src/i18n/br.ts

@@ -571,10 +571,8 @@ export const dict = {
   "settings.general.row.colorScheme.description": "Escolha se o OpenCode segue o tema do sistema, claro ou escuro",
   "settings.general.row.theme.title": "Tema",
   "settings.general.row.theme.description": "Personalize como o OpenCode é tematizado.",
-  "settings.general.row.font.title": "Fonte de código",
-  "settings.general.row.font.description": "Personalize a fonte usada em blocos de código e terminais",
-  "settings.general.row.uiFont.title": "Fonte da interface",
-  "settings.general.row.uiFont.description": "Personalize a fonte usada em toda a interface",
+  "settings.general.row.font.title": "Fonte",
+  "settings.general.row.font.description": "Personalize a fonte monoespaçada usada em blocos de código",
   "settings.general.row.followup.title": "Comportamento de acompanhamento",
   "settings.general.row.followup.description":
     "Escolha se os prompts de acompanhamento orientam imediatamente ou esperam na fila",
@@ -602,6 +600,19 @@ export const dict = {
   "settings.updates.action.checking": "Verificando...",
   "settings.updates.toast.latest.title": "Você está atualizado",
   "settings.updates.toast.latest.description": "Você está usando a versão mais recente do OpenCode.",
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
   "sound.option.none": "Nenhum",
   "sound.option.alert01": "Alerta 01",
   "sound.option.alert02": "Alerta 02",

packages/app/src/i18n/bs.ts

@@ -636,10 +636,8 @@ export const dict = {
   "settings.general.row.colorScheme.description": "Odaberi da li OpenCode prati sistemsku, svijetlu ili tamnu temu",
   "settings.general.row.theme.title": "Tema",
   "settings.general.row.theme.description": "Prilagodi temu OpenCode-a.",
-  "settings.general.row.font.title": "Font za kod",
-  "settings.general.row.font.description": "Prilagodi font koji se koristi u blokovima koda i terminalima",
-  "settings.general.row.uiFont.title": "UI font",
-  "settings.general.row.uiFont.description": "Prilagodi font koji se koristi u cijelom interfejsu",
+  "settings.general.row.font.title": "Font",
+  "settings.general.row.font.description": "Prilagodi monospace font koji se koristi u blokovima koda",
   "settings.general.row.followup.title": "Ponašanje nadovezivanja",
   "settings.general.row.followup.description": "Odaberi da li upiti nadovezivanja usmjeravaju odmah ili čekaju u redu",
   "settings.general.row.followup.option.queue": "Red čekanja",
@@ -669,6 +667,19 @@ export const dict = {
   "settings.updates.action.checking": "Provjera...",
   "settings.updates.toast.latest.title": "Sve je ažurno",
   "settings.updates.toast.latest.description": "Koristiš najnoviju verziju OpenCode-a.",
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
   "sound.option.none": "Nijedan",
   "sound.option.alert01": "Upozorenje 01",
   "sound.option.alert02": "Upozorenje 02",

packages/app/src/i18n/da.ts

@@ -631,10 +631,8 @@ export const dict = {
   "settings.general.row.colorScheme.description": "Vælg om OpenCode følger systemets, lyst eller mørkt tema",
   "settings.general.row.theme.title": "Tema",
   "settings.general.row.theme.description": "Tilpas hvordan OpenCode er temabestemt.",
-  "settings.general.row.font.title": "Kode-skrifttype",
-  "settings.general.row.font.description": "Tilpas skrifttypen, der bruges i kodeblokke og terminaler",
-  "settings.general.row.uiFont.title": "UI-skrifttype",
-  "settings.general.row.uiFont.description": "Tilpas skrifttypen, der bruges i hele brugerfladen",
+  "settings.general.row.font.title": "Skrifttype",
+  "settings.general.row.font.description": "Tilpas mono-skrifttypen brugt i kodeblokke",
   "settings.general.row.followup.title": "Opfølgningsadfærd",
   "settings.general.row.followup.description": "Vælg om opfølgende forespørgsler skal styre straks eller vente i kø",
   "settings.general.row.followup.option.queue": "Kø",
@@ -664,6 +662,19 @@ export const dict = {
   "settings.updates.toast.latest.title": "Du er opdateret",
   "settings.updates.toast.latest.description": "Du kører den nyeste version af OpenCode.",
 
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
   "sound.option.none": "Ingen",
   "sound.option.alert01": "Alarm 01",
   "sound.option.alert02": "Alarm 02",

packages/app/src/i18n/de.ts

@@ -581,10 +581,8 @@ export const dict = {
     "Wählen Sie, ob OpenCode dem System-, hellen oder dunklen Thema folgt",
   "settings.general.row.theme.title": "Thema",
   "settings.general.row.theme.description": "Das Thema von OpenCode anpassen.",
-  "settings.general.row.font.title": "Code-Schriftart",
-  "settings.general.row.font.description": "Die in Codeblöcken und Terminals verwendete Schriftart anpassen",
-  "settings.general.row.uiFont.title": "UI-Schriftart",
-  "settings.general.row.uiFont.description": "Die im gesamten Interface verwendete Schriftart anpassen",
+  "settings.general.row.font.title": "Schriftart",
+  "settings.general.row.font.description": "Die in Codeblöcken verwendete Monospace-Schriftart anpassen",
   "settings.general.row.followup.title": "Verhalten bei Folgefragen",
   "settings.general.row.followup.description":
     "Wählen Sie, ob Folgefragen sofort steuern oder in einer Warteschlange warten",
@@ -613,6 +611,19 @@ export const dict = {
   "settings.updates.action.checking": "Wird geprüft...",
   "settings.updates.toast.latest.title": "Du bist auf dem neuesten Stand",
   "settings.updates.toast.latest.description": "Du verwendest die aktuelle Version von OpenCode.",
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
   "sound.option.none": "Keine",
   "sound.option.alert01": "Alarm 01",
   "sound.option.alert02": "Alarm 02",

packages/app/src/i18n/en.ts

@@ -535,6 +535,8 @@ export const dict = {
   "session.review.noVcs.createGit.action": "Create Git repository",
   "session.review.noSnapshot": "Snapshot tracking is disabled in config, so session changes are unavailable",
   "session.review.noChanges": "No changes",
+  "session.review.noUncommittedChanges": "No uncommitted changes yet",
+  "session.review.noBranchChanges": "No branch changes yet",
 
   "session.files.selectToOpen": "Select a file to open",
   "session.files.all": "All files",
@@ -729,10 +731,8 @@ export const dict = {
   "settings.general.row.colorScheme.description": "Choose whether OpenCode follows the system, light, or dark theme",
   "settings.general.row.theme.title": "Theme",
   "settings.general.row.theme.description": "Customise how OpenCode is themed.",
-  "settings.general.row.font.title": "Code Font",
-  "settings.general.row.font.description": "Customise the font used in code blocks and terminals",
-  "settings.general.row.uiFont.title": "UI Font",
-  "settings.general.row.uiFont.description": "Customise the font used throughout the interface",
+  "settings.general.row.font.title": "Font",
+  "settings.general.row.font.description": "Customise the mono font used in code blocks",
   "settings.general.row.followup.title": "Follow-up behavior",
   "settings.general.row.followup.description": "Choose whether follow-up prompts steer immediately or wait in a queue",
   "settings.general.row.followup.option.queue": "Queue",
@@ -762,6 +762,19 @@ export const dict = {
   "settings.updates.action.checking": "Checking...",
   "settings.updates.toast.latest.title": "You're up to date",
   "settings.updates.toast.latest.description": "You're running the latest version of OpenCode.",
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
   "sound.option.none": "None",
   "sound.option.alert01": "Alert 01",
   "sound.option.alert02": "Alert 02",

packages/app/src/i18n/es.ts

@@ -639,10 +639,8 @@ export const dict = {
   "settings.general.row.colorScheme.description": "Elige si OpenCode sigue el tema del sistema, claro u oscuro",
   "settings.general.row.theme.title": "Tema",
   "settings.general.row.theme.description": "Personaliza el tema de OpenCode.",
-  "settings.general.row.font.title": "Fuente de código",
-  "settings.general.row.font.description": "Personaliza la fuente usada en bloques de código y terminales",
-  "settings.general.row.uiFont.title": "Fuente de la interfaz",
-  "settings.general.row.uiFont.description": "Personaliza la fuente usada en toda la interfaz",
+  "settings.general.row.font.title": "Fuente",
+  "settings.general.row.font.description": "Personaliza la fuente monoespaciada usada en bloques de código",
   "settings.general.row.followup.title": "Comportamiento de seguimiento",
   "settings.general.row.followup.description":
     "Elige si los prompts de seguimiento se dirigen inmediatamente o esperan en una cola",
@@ -674,6 +672,19 @@ export const dict = {
   "settings.updates.action.checking": "Buscando...",
   "settings.updates.toast.latest.title": "Estás al día",
   "settings.updates.toast.latest.description": "Estás usando la última versión de OpenCode.",
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
   "sound.option.none": "Ninguno",
   "sound.option.alert01": "Alerta 01",
   "sound.option.alert02": "Alerta 02",

packages/app/src/i18n/fr.ts

@@ -578,10 +578,8 @@ export const dict = {
   "settings.general.row.colorScheme.description": "Choisissez si OpenCode suit le thème système, clair ou sombre",
   "settings.general.row.theme.title": "Thème",
   "settings.general.row.theme.description": "Personnaliser le thème d'OpenCode.",
-  "settings.general.row.font.title": "Police de code",
-  "settings.general.row.font.description": "Personnaliser la police utilisée dans les blocs de code et les terminaux",
-  "settings.general.row.uiFont.title": "Police de l'interface",
-  "settings.general.row.uiFont.description": "Personnaliser la police utilisée dans toute l'interface",
+  "settings.general.row.font.title": "Police",
+  "settings.general.row.font.description": "Personnaliser la police mono utilisée dans les blocs de code",
   "settings.general.row.followup.title": "Comportement de suivi",
   "settings.general.row.followup.description":
     "Choisissez si les messages de suivi dirigent immédiatement ou attendent dans une file d'attente",
@@ -610,6 +608,19 @@ export const dict = {
   "settings.updates.action.checking": "Vérification...",
   "settings.updates.toast.latest.title": "Vous êtes à jour",
   "settings.updates.toast.latest.description": "Vous utilisez la dernière version d'OpenCode.",
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
   "sound.option.none": "Aucun",
   "sound.option.alert01": "Alerte 01",
   "sound.option.alert02": "Alerte 02",

packages/app/src/i18n/ja.ts

@@ -568,10 +568,8 @@ export const dict = {
   "settings.general.row.colorScheme.description": "OpenCodeがシステム、ライト、またはダークテーマに従うかを選択します",
   "settings.general.row.theme.title": "テーマ",
   "settings.general.row.theme.description": "OpenCodeのテーマをカスタマイズします。",
-  "settings.general.row.font.title": "コードフォント",
-  "settings.general.row.font.description": "コードブロックとターミナルで使用するフォントをカスタマイズします",
-  "settings.general.row.uiFont.title": "UIフォント",
-  "settings.general.row.uiFont.description": "インターフェース全体で使用するフォントをカスタマイズします",
+  "settings.general.row.font.title": "フォント",
+  "settings.general.row.font.description": "コードブロックで使用する等幅フォントをカスタマイズします",
   "settings.general.row.followup.title": "フォローアップの動作",
   "settings.general.row.followup.description":
     "フォローアッププロンプトを即座に実行するか、キューで待機させるかを選択します",
@@ -599,6 +597,19 @@ export const dict = {
   "settings.updates.action.checking": "確認中...",
   "settings.updates.toast.latest.title": "最新です",
   "settings.updates.toast.latest.description": "OpenCode は最新バージョンです。",
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
   "sound.option.none": "なし",
   "sound.option.alert01": "アラート 01",
   "sound.option.alert02": "アラート 02",

packages/app/src/i18n/ko.ts

@@ -569,10 +569,8 @@ export const dict = {
   "settings.general.row.colorScheme.description": "OpenCode가 시스템, 라이트 또는 다크 테마를 따를지 선택하세요",
   "settings.general.row.theme.title": "테마",
   "settings.general.row.theme.description": "OpenCode 테마 사용자 지정",
-  "settings.general.row.font.title": "코드 글꼴",
-  "settings.general.row.font.description": "코드 블록과 터미널에 사용되는 글꼴을 사용자 지정",
-  "settings.general.row.uiFont.title": "UI 글꼴",
-  "settings.general.row.uiFont.description": "인터페이스 전반에 사용되는 글꼴을 사용자 지정",
+  "settings.general.row.font.title": "글꼴",
+  "settings.general.row.font.description": "코드 블록에 사용되는 고정폭 글꼴 사용자 지정",
   "settings.general.row.followup.title": "후속 조치 동작",
   "settings.general.row.followup.description": "후속 프롬프트를 즉시 실행할지 대기열에 넣을지 선택하세요",
   "settings.general.row.followup.option.queue": "대기열",
@@ -599,6 +597,19 @@ export const dict = {
   "settings.updates.action.checking": "확인 중...",
   "settings.updates.toast.latest.title": "최신 상태입니다",
   "settings.updates.toast.latest.description": "현재 최신 버전의 OpenCode를 사용 중입니다.",
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
   "sound.option.none": "없음",
   "sound.option.alert01": "알림 01",
   "sound.option.alert02": "알림 02",

packages/app/src/i18n/no.ts

@@ -639,10 +639,8 @@ export const dict = {
   "settings.general.row.colorScheme.description": "Velg om OpenCode skal følge systemets, lyst eller mørkt tema",
   "settings.general.row.theme.title": "Tema",
   "settings.general.row.theme.description": "Tilpass hvordan OpenCode er tematisert.",
-  "settings.general.row.font.title": "Kodefont",
-  "settings.general.row.font.description": "Tilpass skrifttypen som brukes i kodeblokker og terminaler",
-  "settings.general.row.uiFont.title": "UI-skrift",
-  "settings.general.row.uiFont.description": "Tilpass skrifttypen som brukes i hele grensesnittet",
+  "settings.general.row.font.title": "Skrift",
+  "settings.general.row.font.description": "Tilpass mono-skriften som brukes i kodeblokker",
   "settings.general.row.followup.title": "Oppfølgingsadferd",
   "settings.general.row.followup.description": "Velg om oppfølgingsspørsmål skal kjøres umiddelbart eller vente i kø",
   "settings.general.row.followup.option.queue": "Kø",
@@ -670,6 +668,19 @@ export const dict = {
   "settings.updates.action.checking": "Sjekker...",
   "settings.updates.toast.latest.title": "Du er oppdatert",
   "settings.updates.toast.latest.description": "Du bruker den nyeste versjonen av OpenCode.",
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
   "sound.option.none": "Ingen",
   "sound.option.alert01": "Varsel 01",
   "sound.option.alert02": "Varsel 02",

packages/app/src/i18n/pl.ts

@@ -570,10 +570,8 @@ export const dict = {
     "Wybierz, czy OpenCode ma używać motywu systemowego, jasnego czy ciemnego",
   "settings.general.row.theme.title": "Motyw",
   "settings.general.row.theme.description": "Dostosuj motyw OpenCode.",
-  "settings.general.row.font.title": "Czcionka kodu",
-  "settings.general.row.font.description": "Dostosuj czcionkę używaną w blokach kodu i terminalach",
-  "settings.general.row.uiFont.title": "Czcionka interfejsu",
-  "settings.general.row.uiFont.description": "Dostosuj czcionkę używaną w całym interfejsie",
+  "settings.general.row.font.title": "Czcionka",
+  "settings.general.row.font.description": "Dostosuj czcionkę mono używaną w blokach kodu",
   "settings.general.row.followup.title": "Zachowanie kontynuacji",
   "settings.general.row.followup.description": "Wybierz, czy kontynuacja ma być natychmiastowa, czy czekać w kolejce",
   "settings.general.row.followup.option.queue": "Kolejka",
@@ -600,6 +598,19 @@ export const dict = {
   "settings.updates.action.checking": "Sprawdzanie...",
   "settings.updates.toast.latest.title": "Masz najnowszą wersję",
   "settings.updates.toast.latest.description": "Korzystasz z najnowszej wersji OpenCode.",
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
   "sound.option.none": "Brak",
   "sound.option.alert01": "Alert 01",
   "sound.option.alert02": "Alert 02",

packages/app/src/i18n/ru.ts

@@ -636,10 +636,8 @@ export const dict = {
   "settings.general.row.colorScheme.description": "Выберите, следует ли OpenCode системной, светлой или тёмной теме",
   "settings.general.row.theme.title": "Тема",
   "settings.general.row.theme.description": "Настройте оформление OpenCode.",
-  "settings.general.row.font.title": "Шрифт кода",
-  "settings.general.row.font.description": "Настройте шрифт, используемый в блоках кода и терминалах",
-  "settings.general.row.uiFont.title": "Шрифт интерфейса",
-  "settings.general.row.uiFont.description": "Настройте шрифт, используемый во всем интерфейсе",
+  "settings.general.row.font.title": "Шрифт",
+  "settings.general.row.font.description": "Настройте моноширинный шрифт для блоков кода",
   "settings.general.row.followup.title": "Поведение уточняющих вопросов",
   "settings.general.row.followup.description":
     "Выберите, отправлять ли уточняющие вопросы сразу или помещать их в очередь",
@@ -670,6 +668,19 @@ export const dict = {
   "settings.updates.action.checking": "Проверка...",
   "settings.updates.toast.latest.title": "У вас последняя версия",
   "settings.updates.toast.latest.description": "Вы используете последнюю версию OpenCode.",
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
   "sound.option.none": "Нет",
   "sound.option.alert01": "Alert 01",
   "sound.option.alert02": "Alert 02",

packages/app/src/i18n/th.ts

@@ -630,10 +630,8 @@ export const dict = {
   "settings.general.row.colorScheme.description": "เลือกว่าจะให้ OpenCode ใช้ธีมตามระบบ สว่าง หรือมืด",
   "settings.general.row.theme.title": "ธีม",
   "settings.general.row.theme.description": "ปรับแต่งวิธีการที่ OpenCode มีธีม",
-  "settings.general.row.font.title": "ฟอนต์โค้ด",
-  "settings.general.row.font.description": "ปรับแต่งฟอนต์ที่ใช้ในบล็อกโค้ดและเทอร์มินัล",
-  "settings.general.row.uiFont.title": "ฟอนต์ UI",
-  "settings.general.row.uiFont.description": "ปรับแต่งฟอนต์ที่ใช้ทั่วทั้งอินเทอร์เฟซ",
+  "settings.general.row.font.title": "ฟอนต์",
+  "settings.general.row.font.description": "ปรับแต่งฟอนต์โมโนที่ใช้ในบล็อกโค้ด",
   "settings.general.row.followup.title": "พฤติกรรมการติดตามผล",
   "settings.general.row.followup.description": "เลือกว่าจะให้พร้อมท์ติดตามผลทำงานทันทีหรือรอในคิว",
   "settings.general.row.followup.option.queue": "คิว",
@@ -661,6 +659,19 @@ export const dict = {
   "settings.updates.toast.latest.title": "คุณเป็นเวอร์ชันล่าสุดแล้ว",
   "settings.updates.toast.latest.description": "คุณกำลังใช้งาน OpenCode เวอร์ชันล่าสุด",
 
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
   "sound.option.none": "ไม่มี",
   "sound.option.alert01": "เสียงเตือน 01",
   "sound.option.alert02": "เสียงเตือน 02",

packages/app/src/i18n/tr.ts

@@ -643,10 +643,8 @@ export const dict = {
     "OpenCode'un sistem, açık veya koyu temayı takip etip etmeyeceğini seçin",
   "settings.general.row.theme.title": "Tema",
   "settings.general.row.theme.description": "OpenCode'un temasını özelleştirin.",
-  "settings.general.row.font.title": "Kod Yazı Tipi",
-  "settings.general.row.font.description": "Kod bloklarında ve terminallerde kullanılan yazı tipini özelleştirin",
-  "settings.general.row.uiFont.title": "Arayüz Yazı Tipi",
-  "settings.general.row.uiFont.description": "Arayüz genelinde kullanılan yazı tipini özelleştirin",
+  "settings.general.row.font.title": "Yazı Tipi",
+  "settings.general.row.font.description": "Kod bloklarında kullanılan monospace yazı tipini özelleştirin",
   "settings.general.row.followup.title": "Takip davranışı",
   "settings.general.row.followup.description":
     "Takip komutlarının hemen yönlendirilmesini mi yoksa sırada beklemesini mi istediğinizi seçin",
@@ -679,6 +677,20 @@ export const dict = {
   "settings.updates.toast.latest.title": "Güncelsiniz",
   "settings.updates.toast.latest.description": "OpenCode'un en son sürümünü kullanıyorsunuz.",
 
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
+
   "sound.option.none": "Yok",
   "sound.option.alert01": "Uyarı 01",
   "sound.option.alert02": "Uyarı 02",

packages/app/src/i18n/zh.ts

@@ -630,10 +630,8 @@ export const dict = {
   "settings.general.row.colorScheme.description": "选择 OpenCode 跟随系统、浅色或深色主题",
   "settings.general.row.theme.title": "主题",
   "settings.general.row.theme.description": "自定义 OpenCode 的主题。",
-  "settings.general.row.font.title": "代码字体",
-  "settings.general.row.font.description": "自定义代码块和终端使用的字体",
-  "settings.general.row.uiFont.title": "界面字体",
-  "settings.general.row.uiFont.description": "自定义整个界面使用的字体",
+  "settings.general.row.font.title": "字体",
+  "settings.general.row.font.description": "自定义代码块使用的等宽字体",
   "settings.general.row.followup.title": "跟进消息行为",
   "settings.general.row.followup.description": "选择跟进提示是立即引导还是在队列中等待",
   "settings.general.row.followup.option.queue": "排队",
@@ -659,6 +657,20 @@ export const dict = {
   "settings.updates.toast.latest.title": "已是最新版本",
   "settings.updates.toast.latest.description": "你正在使用最新版本的 OpenCode。",
 
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
+
   "sound.option.none": "无",
   "sound.option.alert01": "警报 01",
   "sound.option.alert02": "警报 02",

packages/app/src/i18n/zht.ts

@@ -625,10 +625,8 @@ export const dict = {
   "settings.general.row.colorScheme.description": "選擇 OpenCode 要跟隨系統、淺色或深色主題",
   "settings.general.row.theme.title": "主題",
   "settings.general.row.theme.description": "自訂 OpenCode 的主題。",
-  "settings.general.row.font.title": "程式碼字型",
-  "settings.general.row.font.description": "自訂程式碼區塊和終端機使用的字型",
-  "settings.general.row.uiFont.title": "介面字型",
-  "settings.general.row.uiFont.description": "自訂整個介面使用的字型",
+  "settings.general.row.font.title": "字型",
+  "settings.general.row.font.description": "自訂程式碼區塊使用的等寬字型",
   "settings.general.row.followup.title": "後續追問行為",
   "settings.general.row.followup.description": "選擇後續追問提示是立即引導還是進入佇列等待",
   "settings.general.row.followup.option.queue": "佇列",
@@ -656,6 +654,19 @@ export const dict = {
   "settings.updates.toast.latest.title": "已是最新版本",
   "settings.updates.toast.latest.description": "你正在使用最新版本的 OpenCode。",
 
+  "font.option.ibmPlexMono": "IBM Plex Mono",
+  "font.option.cascadiaCode": "Cascadia Code",
+  "font.option.firaCode": "Fira Code",
+  "font.option.hack": "Hack",
+  "font.option.inconsolata": "Inconsolata",
+  "font.option.intelOneMono": "Intel One Mono",
+  "font.option.iosevka": "Iosevka",
+  "font.option.jetbrainsMono": "JetBrains Mono",
+  "font.option.mesloLgs": "Meslo LGS",
+  "font.option.robotoMono": "Roboto Mono",
+  "font.option.sourceCodePro": "Source Code Pro",
+  "font.option.ubuntuMono": "Ubuntu Mono",
+  "font.option.geistMono": "Geist Mono",
   "sound.option.none": "無",
   "sound.option.alert01": "警報 01",
   "sound.option.alert02": "警報 02",

packages/app/src/pages/directory-layout.tsx

@@ -12,7 +12,6 @@ import { decode64 } from "@/utils/base64"
 function DirectoryDataProvider(props: ParentProps<{ directory: string }>) {
   const location = useLocation()
   const navigate = useNavigate()
-  const params = useParams()
   const sync = useSync()
   const slug = createMemo(() => base64Encode(props.directory))
 
@@ -23,12 +22,6 @@ function DirectoryDataProvider(props: ParentProps<{ directory: string }>) {
     navigate(`/${base64Encode(next)}${path}${location.search}${location.hash}`, { replace: true })
   })
 
-  createEffect(() => {
-    const id = params.id
-    if (!id) return
-    void sync.session.sync(id)
-  })
-
   return (
     <DataProvider
       data={sync.data}

packages/app/src/pages/layout.tsx

@@ -12,7 +12,6 @@ import {
   untrack,
   type Accessor,
 } from "solid-js"
-import { makeEventListener } from "@solid-primitives/event-listener"
 import { useNavigate, useParams } from "@solidjs/router"
 import { useLayout, LocalProject } from "@/context/layout"
 import { useGlobalSync } from "@/context/global-sync"
@@ -216,11 +215,18 @@ export default function Layout(props: ParentProps) {
       if (document.visibilityState !== "hidden") return
       reset()
     }
-    makeEventListener(window, "pointerup", stop)
-    makeEventListener(window, "pointercancel", stop)
-    makeEventListener(window, "blur", stop)
-    makeEventListener(window, "blur", blur)
-    makeEventListener(document, "visibilitychange", hide)
+    window.addEventListener("pointerup", stop)
+    window.addEventListener("pointercancel", stop)
+    window.addEventListener("blur", stop)
+    window.addEventListener("blur", blur)
+    document.addEventListener("visibilitychange", hide)
+    onCleanup(() => {
+      window.removeEventListener("pointerup", stop)
+      window.removeEventListener("pointercancel", stop)
+      window.removeEventListener("blur", stop)
+      window.removeEventListener("blur", blur)
+      document.removeEventListener("visibilitychange", hide)
+    })
   })
 
   const sidebarHovering = createMemo(() => !layout.sidebar.opened() && state.hoverProject !== undefined)
@@ -1388,7 +1394,8 @@ export default function Layout(props: ParentProps) {
     }
 
     handleDeepLinks(drainPendingDeepLinks(window))
-    makeEventListener(window, deepLinkEvent, handler as EventListener)
+    window.addEventListener(deepLinkEvent, handler as EventListener)
+    onCleanup(() => window.removeEventListener(deepLinkEvent, handler as EventListener))
   })
 
   async function renameProject(project: LocalProject, next: string) {

packages/app/src/pages/session.tsx

@@ -1,4 +1,4 @@
-import type { Project, UserMessage } from "@opencode-ai/sdk/v2"
+import type { FileDiff, Project, UserMessage } from "@opencode-ai/sdk/v2"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useMutation } from "@tanstack/solid-query"
 import {
@@ -14,7 +14,6 @@ import {
   onMount,
   untrack,
 } from "solid-js"
-import { makeEventListener } from "@solid-primitives/event-listener"
 import { createMediaQuery } from "@solid-primitives/media"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { useLocal } from "@/context/local"
@@ -27,8 +26,8 @@ import { createAutoScroll } from "@opencode-ai/ui/hooks"
 import { previewSelectedLines } from "@opencode-ai/ui/pierre/selection-bridge"
 import { Button } from "@opencode-ai/ui/button"
 import { showToast } from "@opencode-ai/ui/toast"
-import { checksum } from "@opencode-ai/util/encode"
-import { useSearchParams } from "@solidjs/router"
+import { base64Encode, checksum } from "@opencode-ai/util/encode"
+import { useNavigate, useSearchParams } from "@solidjs/router"
 import { NewSessionView, SessionHeader } from "@/components/session"
 import { useComments } from "@/context/comments"
 import { getSessionPrefetch, SESSION_PREFETCH_TTL } from "@/context/global-sync/session-prefetch"
@@ -58,15 +57,15 @@ import { TerminalPanel } from "@/pages/session/terminal-panel"
 import { useSessionCommands } from "@/pages/session/use-session-commands"
 import { useSessionHashScroll } from "@/pages/session/use-session-hash-scroll"
 import { Identifier } from "@/utils/id"
-import { Persist, persisted } from "@/utils/persist"
 import { extractPromptFromParts } from "@/utils/prompt"
 import { same } from "@/utils/same"
 import { formatServerError } from "@/utils/server-errors"
 
 const emptyUserMessages: UserMessage[] = []
-type FollowupItem = FollowupDraft & { id: string }
-type FollowupEdit = Pick<FollowupItem, "id" | "prompt" | "context">
-const emptyFollowups: FollowupItem[] = []
+const emptyFollowups: (FollowupDraft & { id: string })[] = []
+
+type ChangeMode = "git" | "branch" | "session" | "turn"
+type VcsMode = "git" | "branch"
 
 type SessionHistoryWindowInput = {
   sessionID: () => string | undefined
@@ -321,6 +320,7 @@ export default function Page() {
   const sync = useSync()
   const dialog = useDialog()
   const language = useLanguage()
+  const navigate = useNavigate()
   const sdk = useSDK()
   const settings = useSettings()
   const prompt = usePrompt()
@@ -330,9 +330,10 @@ export default function Page() {
   const { params, sessionKey, tabs, view } = useSessionLayout()
 
   createEffect(() => {
-    if (!prompt.ready()) return
+    if (!untrack(() => prompt.ready())) return
+    prompt.ready()
     untrack(() => {
-      if (params.id) return
+      if (params.id || !prompt.ready()) return
       const text = searchParams.prompt
       if (!text) return
       prompt.set([{ type: "text", content: text, start: 0, end: text.length }], text.length)
@@ -426,15 +427,16 @@ export default function Page() {
 
   const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
   const diffs = createMemo(() => (params.id ? (sync.data.session_diff[params.id] ?? []) : []))
-  const reviewCount = createMemo(() => Math.max(info()?.summary?.files ?? 0, diffs().length))
-  const hasReview = createMemo(() => reviewCount() > 0)
+  const sessionCount = createMemo(() => Math.max(info()?.summary?.files ?? 0, diffs().length))
+  const hasSessionReview = createMemo(() => sessionCount() > 0)
+  const canReview = createMemo(() => !!params.id)
   const reviewTab = createMemo(() => isDesktop())
   const tabState = createSessionTabs({
     tabs,
     pathFromTab: file.pathFromTab,
     normalizeTab,
     review: reviewTab,
-    hasReview,
+    hasReview: canReview,
   })
   const contextOpen = tabState.contextOpen
   const openedTabs = tabState.openedTabs
@@ -457,6 +459,12 @@ export default function Page() {
     if (!id) return false
     return sync.session.history.loading(id)
   })
+  const diffsReady = createMemo(() => {
+    const id = params.id
+    if (!id) return true
+    if (!hasSessionReview()) return true
+    return sync.data.session_diff[id] !== undefined
+  })
 
   const userMessages = createMemo(
     () => messages().filter((m) => m.role === "user") as UserMessage[],
@@ -510,25 +518,31 @@ export default function Page() {
   const [store, setStore] = createStore({
     messageId: undefined as string | undefined,
     mobileTab: "session" as "session" | "changes",
-    changes: "session" as "session" | "turn",
+    changes: "git" as ChangeMode,
     newSessionWorktree: "main",
     deferRender: false,
   })
 
-  const [followup, setFollowup] = persisted(
-    Persist.workspace(sdk.directory, "followup", ["followup.v1"]),
-    createStore<{
-      items: Record<string, FollowupItem[] | undefined>
-      failed: Record<string, string | undefined>
-      paused: Record<string, boolean | undefined>
-      edit: Record<string, FollowupEdit | undefined>
-    }>({
-      items: {},
-      failed: {},
-      paused: {},
-      edit: {},
-    }),
-  )
+  const [vcs, setVcs] = createStore({
+    diff: {
+      git: [] as FileDiff[],
+      branch: [] as FileDiff[],
+    },
+    ready: {
+      git: false,
+      branch: false,
+    },
+  })
+
+  const [followup, setFollowup] = createStore({
+    items: {} as Record<string, (FollowupDraft & { id: string })[] | undefined>,
+    failed: {} as Record<string, string | undefined>,
+    paused: {} as Record<string, boolean | undefined>,
+    edit: {} as Record<
+      string,
+      { id: string; prompt: FollowupDraft["prompt"]; context: FollowupDraft["context"] } | undefined
+    >,
+  })
 
   createComputed((prev) => {
     const key = sessionKey()
@@ -544,10 +558,70 @@ export default function Page() {
   let reviewFrame: number | undefined
   let refreshFrame: number | undefined
   let refreshTimer: number | undefined
-  let todoFrame: number | undefined
-  let todoTimer: number | undefined
   let diffFrame: number | undefined
   let diffTimer: number | undefined
+  const vcsTask = new Map<VcsMode, Promise<void>>()
+  const vcsRun = new Map<VcsMode, number>()
+
+  const bumpVcs = (mode: VcsMode) => {
+    const next = (vcsRun.get(mode) ?? 0) + 1
+    vcsRun.set(mode, next)
+    return next
+  }
+
+  const resetVcs = (mode?: VcsMode) => {
+    const list = mode ? [mode] : (["git", "branch"] as const)
+    list.forEach((item) => {
+      bumpVcs(item)
+      vcsTask.delete(item)
+      setVcs("diff", item, [])
+      setVcs("ready", item, false)
+    })
+  }
+
+  const loadVcs = (mode: VcsMode, force = false) => {
+    if (sync.project?.vcs !== "git") return Promise.resolve()
+    if (!force && vcs.ready[mode]) return Promise.resolve()
+
+    if (force) {
+      if (vcsTask.has(mode)) bumpVcs(mode)
+      vcsTask.delete(mode)
+      setVcs("ready", mode, false)
+    }
+
+    const current = vcsTask.get(mode)
+    if (current) return current
+
+    const run = bumpVcs(mode)
+
+    const task = sdk.client.vcs
+      .diff({ mode })
+      .then((result) => {
+        if (vcsRun.get(mode) !== run) return
+        setVcs("diff", mode, result.data ?? [])
+        setVcs("ready", mode, true)
+      })
+      .catch((error) => {
+        if (vcsRun.get(mode) !== run) return
+        console.debug("[session-review] failed to load vcs diff", { mode, error })
+        setVcs("diff", mode, [])
+        setVcs("ready", mode, true)
+      })
+      .finally(() => {
+        if (vcsTask.get(mode) === task) vcsTask.delete(mode)
+      })
+
+    vcsTask.set(mode, task)
+    return task
+  }
+
+  const refreshVcs = () => {
+    resetVcs()
+    const mode = untrack(vcsMode)
+    if (!mode) return
+    if (!untrack(wantsReview)) return
+    void loadVcs(mode, true)
+  }
 
   createComputed((prev) => {
     const open = desktopReviewOpen()
@@ -563,7 +637,42 @@ export default function Page() {
   }, desktopReviewOpen())
 
   const turnDiffs = createMemo(() => lastUserMessage()?.summary?.diffs ?? [])
-  const reviewDiffs = createMemo(() => (store.changes === "session" ? diffs() : turnDiffs()))
+  const changesOptions = createMemo<ChangeMode[]>(() => {
+    const list: ChangeMode[] = []
+    if (sync.project?.vcs === "git") list.push("git")
+    if (
+      sync.project?.vcs === "git" &&
+      sync.data.vcs?.branch &&
+      sync.data.vcs?.default_branch &&
+      sync.data.vcs.branch !== sync.data.vcs.default_branch
+    ) {
+      list.push("branch")
+    }
+    list.push("session", "turn")
+    return list
+  })
+  const vcsMode = createMemo<VcsMode | undefined>(() => {
+    if (store.changes === "git" || store.changes === "branch") return store.changes
+  })
+  const reviewDiffs = createMemo(() => {
+    if (store.changes === "git") return vcs.diff.git
+    if (store.changes === "branch") return vcs.diff.branch
+    if (store.changes === "session") return diffs()
+    return turnDiffs()
+  })
+  const reviewCount = createMemo(() => {
+    if (store.changes === "git") return vcs.diff.git.length
+    if (store.changes === "branch") return vcs.diff.branch.length
+    if (store.changes === "session") return sessionCount()
+    return turnDiffs().length
+  })
+  const hasReview = createMemo(() => reviewCount() > 0)
+  const reviewReady = createMemo(() => {
+    if (store.changes === "git") return vcs.ready.git
+    if (store.changes === "branch") return vcs.ready.branch
+    if (store.changes === "session") return !hasSessionReview() || diffsReady()
+    return true
+  })
 
   const newSessionWorktree = createMemo(() => {
     if (store.newSessionWorktree === "create") return "create"
@@ -629,13 +738,7 @@ export default function Page() {
     scrollToMessage(msgs[targetIndex], "auto")
   }
 
-  const diffsReady = createMemo(() => {
-    const id = params.id
-    if (!id) return true
-    if (!hasReview()) return true
-    return sync.data.session_diff[id] !== undefined
-  })
-  const reviewEmptyKey = createMemo(() => {
+  const sessionEmptyKey = createMemo(() => {
     const project = sync.project
     if (project && !project.vcs) return "session.review.noVcs"
     if (sync.data.config.snapshot === false) return "session.review.noSnapshot"
@@ -720,6 +823,8 @@ export default function Page() {
             if (!info) return true
             return Date.now() - info.at > SESSION_PREFETCH_TTL
           })()
+      const todos = untrack(() => sync.data.todo[id] !== undefined || globalSync.data.session_todo[id] !== undefined)
+
       untrack(() => {
         void sync.session.sync(id)
       })
@@ -731,47 +836,13 @@ export default function Page() {
           if (params.id !== id) return
           untrack(() => {
             if (stale) void sync.session.sync(id, { force: true })
+            void sync.session.todo(id, todos ? { force: true } : undefined)
           })
         }, 0)
       })
     }),
   )
 
-  createEffect(
-    on(
-      () => {
-        const id = params.id
-        return [
-          sdk.directory,
-          id,
-          id ? (sync.data.session_status[id]?.type ?? "idle") : "idle",
-          id ? composer.blocked() : false,
-        ] as const
-      },
-      ([dir, id, status, blocked]) => {
-        if (todoFrame !== undefined) cancelAnimationFrame(todoFrame)
-        if (todoTimer !== undefined) window.clearTimeout(todoTimer)
-        todoFrame = undefined
-        todoTimer = undefined
-        if (!id) return
-        if (status === "idle" && !blocked) return
-        const cached = untrack(() => sync.data.todo[id] !== undefined || globalSync.data.session_todo[id] !== undefined)
-
-        todoFrame = requestAnimationFrame(() => {
-          todoFrame = undefined
-          todoTimer = window.setTimeout(() => {
-            todoTimer = undefined
-            if (sdk.directory !== dir || params.id !== id) return
-            untrack(() => {
-              void sync.session.todo(id, cached ? { force: true } : undefined)
-            })
-          }, 0)
-        })
-      },
-      { defer: true },
-    ),
-  )
-
   createEffect(
     on(
       () => visibleUserMessages().at(-1)?.id,
@@ -789,13 +860,46 @@ export default function Page() {
       sessionKey,
       () => {
         setStore("messageId", undefined)
-        setStore("changes", "session")
+        setStore("changes", "git")
         setUi("pendingMessage", undefined)
       },
       { defer: true },
     ),
   )
 
+  createEffect(
+    on(
+      () => sdk.directory,
+      () => {
+        resetVcs()
+      },
+      { defer: true },
+    ),
+  )
+
+  createEffect(
+    on(
+      () => [sync.data.vcs?.branch, sync.data.vcs?.default_branch] as const,
+      (next, prev) => {
+        if (prev === undefined || same(next, prev)) return
+        refreshVcs()
+      },
+      { defer: true },
+    ),
+  )
+
+  const stopVcs = sdk.event.listen((evt) => {
+    if (evt.details.type !== "file.watcher.updated") return
+    const props =
+      typeof evt.details.properties === "object" && evt.details.properties
+        ? (evt.details.properties as Record<string, unknown>)
+        : undefined
+    const file = typeof props?.file === "string" ? props.file : undefined
+    if (!file || file.startsWith(".git/")) return
+    refreshVcs()
+  })
+  onCleanup(stopVcs)
+
   createEffect(
     on(
       () => params.dir,
@@ -918,6 +1022,40 @@ export default function Page() {
   }
 
   const mobileChanges = createMemo(() => !isDesktop() && store.mobileTab === "changes")
+  const wantsReview = createMemo(() =>
+    isDesktop()
+      ? desktopFileTreeOpen() || (desktopReviewOpen() && activeTab() === "review")
+      : store.mobileTab === "changes",
+  )
+
+  createEffect(() => {
+    const list = changesOptions()
+    if (list.includes(store.changes)) return
+    const next = list[0]
+    if (!next) return
+    setStore("changes", next)
+  })
+
+  createEffect(() => {
+    const mode = vcsMode()
+    if (!mode) return
+    if (!wantsReview()) return
+    void loadVcs(mode)
+  })
+
+  createEffect(
+    on(
+      () => sync.data.session_status[params.id ?? ""]?.type,
+      (next, prev) => {
+        const mode = vcsMode()
+        if (!mode) return
+        if (!wantsReview()) return
+        if (next !== "idle" || prev === undefined || prev === "idle") return
+        void loadVcs(mode, true)
+      },
+      { defer: true },
+    ),
+  )
 
   const fileTreeTab = () => layout.fileTree.tab()
   const setFileTreeTab = (value: "changes" | "all") => layout.fileTree.setTab(value)
@@ -964,21 +1102,23 @@ export default function Page() {
     loadFile: file.load,
   })
 
-  const changesOptions = ["session", "turn"] as const
-  const changesOptionsList = [...changesOptions]
-
   const changesTitle = () => {
-    if (!hasReview()) {
+    if (!canReview()) {
       return null
     }
 
+    const label = (option: ChangeMode) => {
+      if (option === "git") return language.t("ui.sessionReview.title.git")
+      if (option === "branch") return language.t("ui.sessionReview.title.branch")
+      if (option === "session") return language.t("ui.sessionReview.title")
+      return language.t("ui.sessionReview.title.lastTurn")
+    }
+
     return (
       <Select
-        options={changesOptionsList}
+        options={changesOptions()}
         current={store.changes}
-        label={(option) =>
-          option === "session" ? language.t("ui.sessionReview.title") : language.t("ui.sessionReview.title.lastTurn")
-        }
+        label={label}
         onSelect={(option) => option && setStore("changes", option)}
         variant="ghost"
         size="small"
@@ -987,20 +1127,34 @@ export default function Page() {
     )
   }
 
-  const emptyTurn = () => (
+  const empty = (text: string) => (
     <div class="h-full pb-64 -mt-4 flex flex-col items-center justify-center text-center gap-6">
-      <div class="text-14-regular text-text-weak max-w-56">{language.t("session.review.noChanges")}</div>
+      <div class="text-14-regular text-text-weak max-w-56">{text}</div>
     </div>
   )
 
-  const reviewEmpty = (input: { loadingClass: string; emptyClass: string }) => {
-    if (store.changes === "turn") return emptyTurn()
+  const reviewEmptyText = createMemo(() => {
+    if (store.changes === "git") return language.t("session.review.noUncommittedChanges")
+    if (store.changes === "branch") return language.t("session.review.noBranchChanges")
+    if (store.changes === "turn") return language.t("session.review.noChanges")
+    return language.t(sessionEmptyKey())
+  })
 
-    if (hasReview() && !diffsReady()) {
+  const reviewEmpty = (input: { loadingClass: string; emptyClass: string }) => {
+    if (store.changes === "git" || store.changes === "branch") {
+      if (!reviewReady()) return <div class={input.loadingClass}>{language.t("session.review.loadingChanges")}</div>
+      return empty(reviewEmptyText())
+    }
+
+    if (store.changes === "turn") {
+      return empty(reviewEmptyText())
+    }
+
+    if (hasSessionReview() && !diffsReady()) {
       return <div class={input.loadingClass}>{language.t("session.review.loadingChanges")}</div>
     }
 
-    if (reviewEmptyKey() === "session.review.noVcs") {
+    if (sessionEmptyKey() === "session.review.noVcs") {
       return (
         <div class={input.emptyClass}>
           <div class="flex flex-col gap-3">
@@ -1020,7 +1174,7 @@ export default function Page() {
 
     return (
       <div class={input.emptyClass}>
-        <div class="text-14-regular text-text-weak max-w-56">{language.t(reviewEmptyKey())}</div>
+        <div class="text-14-regular text-text-weak max-w-56">{reviewEmptyText()}</div>
       </div>
     )
   }
@@ -1046,9 +1200,6 @@ export default function Page() {
         onLineCommentUpdate={updateCommentInContext}
         onLineCommentDelete={removeCommentFromContext}
         lineCommentActions={reviewCommentActions()}
-        commentMentions={{
-          items: file.searchFilesAndDirectories,
-        }}
         comments={comments.all()}
         focusedComment={comments.focus()}
         onFocusedCommentChange={comments.setFocus}
@@ -1127,7 +1278,7 @@ export default function Page() {
     const pending = tree.pendingDiff
     if (!pending) return
     if (!tree.reviewScroll) return
-    if (!diffsReady()) return
+    if (!reviewReady()) return
 
     const attempt = (count: number) => {
       if (tree.pendingDiff !== pending) return
@@ -1168,10 +1319,7 @@ export default function Page() {
     const id = params.id
     if (!id) return
 
-    const wants = isDesktop()
-      ? desktopFileTreeOpen() || (desktopReviewOpen() && activeTab() === "review")
-      : store.mobileTab === "changes"
-    if (!wants) return
+    if (!wantsReview()) return
     if (sync.data.session_diff[id] !== undefined) return
     if (sync.status === "loading") return
 
@@ -1180,13 +1328,7 @@ export default function Page() {
 
   createEffect(
     on(
-      () =>
-        [
-          sessionKey(),
-          isDesktop()
-            ? desktopFileTreeOpen() || (desktopReviewOpen() && activeTab() === "review")
-            : store.mobileTab === "changes",
-        ] as const,
+      () => [sessionKey(), wantsReview()] as const,
       ([key, wants]) => {
         if (diffFrame !== undefined) cancelAnimationFrame(diffFrame)
         if (diffTimer !== undefined) window.clearTimeout(diffTimer)
@@ -1600,6 +1742,26 @@ export default function Page() {
   const reverting = createMemo(() => revertMutation.isPending || restoreMutation.isPending)
   const restoring = createMemo(() => (restoreMutation.isPending ? restoreMutation.variables : undefined))
 
+  const fork = (input: { sessionID: string; messageID: string }) => {
+    const value = draft(input.messageID)
+    const dir = base64Encode(sdk.directory)
+    return sdk.client.session
+      .fork(input)
+      .then((result) => {
+        const next = result.data
+        if (!next) {
+          showToast({
+            variant: "error",
+            title: language.t("common.requestFailed"),
+          })
+          return
+        }
+        prompt.set(value, undefined, { dir, id: next.id })
+        navigate(`/${dir}/session/${next.id}`)
+      })
+      .catch(fail)
+  }
+
   const revert = (input: { sessionID: string; messageID: string }) => {
     if (reverting()) return
     return revertMutation.mutateAsync(input)
@@ -1618,7 +1780,7 @@ export default function Page() {
       .map((item) => ({ id: item.id, text: line(item.id) }))
   })
 
-  const actions = { revert }
+  const actions = { fork, revert }
 
   createEffect(() => {
     const sessionID = params.id
@@ -1678,25 +1840,15 @@ export default function Page() {
     consumePendingMessage: layout.pendingMessage.consume,
   })
 
-  createEffect(
-    on(
-      () => params.id,
-      (id) => {
-        if (!id) requestAnimationFrame(() => inputRef?.focus())
-      },
-    ),
-  )
-
   onMount(() => {
-    makeEventListener(document, "keydown", handleKeyDown)
+    document.addEventListener("keydown", handleKeyDown)
   })
 
   onCleanup(() => {
+    document.removeEventListener("keydown", handleKeyDown)
     if (reviewFrame !== undefined) cancelAnimationFrame(reviewFrame)
     if (refreshFrame !== undefined) cancelAnimationFrame(refreshFrame)
     if (refreshTimer !== undefined) window.clearTimeout(refreshTimer)
-    if (todoFrame !== undefined) cancelAnimationFrame(todoFrame)
-    if (todoTimer !== undefined) window.clearTimeout(todoTimer)
     if (diffFrame !== undefined) cancelAnimationFrame(diffFrame)
     if (diffTimer !== undefined) window.clearTimeout(diffTimer)
     if (scrollStateFrame !== undefined) cancelAnimationFrame(scrollStateFrame)
@@ -1862,6 +2014,12 @@ export default function Page() {
         </div>
 
         <SessionSidePanel
+          canReview={canReview}
+          diffs={reviewDiffs}
+          diffsReady={reviewReady}
+          empty={reviewEmptyText}
+          hasReview={hasReview}
+          reviewCount={reviewCount}
           reviewPanel={reviewPanel}
           activeDiff={tree.activeDiff}
           focusReviewDiff={focusReviewDiff}

packages/app/src/pages/session/composer/session-composer-region.tsx

@@ -13,7 +13,6 @@ import { SessionRevertDock } from "@/pages/session/composer/session-revert-dock"
 import type { SessionComposerState } from "@/pages/session/composer/session-composer-state"
 import { SessionTodoDock } from "@/pages/session/composer/session-todo-dock"
 import type { FollowupDraft } from "@/components/prompt-input/submit"
-import { createResizeObserver } from "@solid-primitives/resize-observer"
 
 export function SessionComposerRegion(props: {
   state: SessionComposerState
@@ -116,9 +115,13 @@ export function SessionComposerRegion(props: {
   createEffect(() => {
     const el = store.body
     if (!el) return
-    const update = () => setStore("height", el.getBoundingClientRect().height)
-    createResizeObserver(store.body, update)
+    const update = () => {
+      setStore("height", el.getBoundingClientRect().height)
+    }
     update()
+    const observer = new ResizeObserver(update)
+    observer.observe(el)
+    onCleanup(() => observer.disconnect())
   })
 
   return (

packages/app/src/pages/session/composer/session-composer-state.ts

@@ -1,6 +1,5 @@
 import { createEffect, createMemo, on, onCleanup, onMount } from "solid-js"
 import { createStore } from "solid-js/store"
-import { makeEventListener } from "@solid-primitives/event-listener"
 import type { PermissionRequest, QuestionRequest, Todo } from "@opencode-ai/sdk/v2"
 import { useParams } from "@solidjs/router"
 import { showToast } from "@opencode-ai/ui/toast"
@@ -87,7 +86,8 @@ export function createSessionComposerState(options?: { closeMs?: number | (() =>
       pull()
     }
 
-    makeEventListener(window, composerEvent, onEvent)
+    window.addEventListener(composerEvent, onEvent)
+    onCleanup(() => window.removeEventListener(composerEvent, onEvent))
   })
 
   const todos = createMemo((): Todo[] => {

packages/app/src/pages/session/composer/session-question-dock.tsx

@@ -8,56 +8,9 @@ import { showToast } from "@opencode-ai/ui/toast"
 import type { QuestionAnswer, QuestionRequest } from "@opencode-ai/sdk/v2"
 import { useLanguage } from "@/context/language"
 import { useSDK } from "@/context/sdk"
-import { makeEventListener } from "@solid-primitives/event-listener"
-import { createResizeObserver } from "@solid-primitives/resize-observer"
 
 const cache = new Map<string, { tab: number; answers: QuestionAnswer[]; custom: string[]; customOn: boolean[] }>()
 
-function Mark(props: { multi: boolean; picked: boolean; onClick?: (event: MouseEvent) => void }) {
-  return (
-    <span data-slot="question-option-check" aria-hidden="true" onClick={props.onClick}>
-      <span data-slot="question-option-box" data-type={props.multi ? "checkbox" : "radio"} data-picked={props.picked}>
-        <Show when={props.multi} fallback={<span data-slot="question-option-radio-dot" />}>
-          <Icon name="check-small" size="small" />
-        </Show>
-      </span>
-    </span>
-  )
-}
-
-function Option(props: {
-  multi: boolean
-  picked: boolean
-  label: string
-  description?: string
-  disabled: boolean
-  ref?: (el: HTMLButtonElement) => void
-  onFocus?: VoidFunction
-  onClick: VoidFunction
-}) {
-  return (
-    <button
-      type="button"
-      ref={props.ref}
-      data-slot="question-option"
-      data-picked={props.picked}
-      role={props.multi ? "checkbox" : "radio"}
-      aria-checked={props.picked}
-      disabled={props.disabled}
-      onFocus={props.onFocus}
-      onClick={props.onClick}
-    >
-      <Mark multi={props.multi} picked={props.picked} />
-      <span data-slot="question-option-main">
-        <span data-slot="option-label">{props.label}</span>
-        <Show when={props.description}>
-          <span data-slot="option-description">{props.description}</span>
-        </Show>
-      </span>
-    </button>
-  )
-}
-
 export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit: () => void }> = (props) => {
   const sdk = useSDK()
   const language = useLanguage()
@@ -72,30 +25,22 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
     custom: cached?.custom ?? ([] as string[]),
     customOn: cached?.customOn ?? ([] as boolean[]),
     editing: false,
-    focus: 0,
   })
 
   let root: HTMLDivElement | undefined
-  let customRef: HTMLButtonElement | undefined
-  let optsRef: HTMLButtonElement[] = []
   let replied = false
-  let focusFrame: number | undefined
 
   const question = createMemo(() => questions()[store.tab])
   const options = createMemo(() => question()?.options ?? [])
   const input = createMemo(() => store.custom[store.tab] ?? "")
   const on = createMemo(() => store.customOn[store.tab] === true)
   const multi = createMemo(() => question()?.multiple === true)
-  const count = createMemo(() => options().length + 1)
 
   const summary = createMemo(() => {
     const n = Math.min(store.tab + 1, total())
     return language.t("session.question.progress", { current: n, total: total() })
   })
 
-  const customLabel = () => language.t("ui.messagePart.option.typeOwnAnswer")
-  const customPlaceholder = () => language.t("ui.question.custom.placeholder")
-
   const last = createMemo(() => store.tab >= total() - 1)
 
   const customUpdate = (value: string, selected: boolean = on()) => {
@@ -140,29 +85,6 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
     root.style.setProperty("--question-prompt-max-height", `${max}px`)
   }
 
-  const clamp = (i: number) => Math.max(0, Math.min(count() - 1, i))
-
-  const pickFocus = (tab: number = store.tab) => {
-    const list = questions()[tab]?.options ?? []
-    if (store.customOn[tab] === true) return list.length
-    return Math.max(
-      0,
-      list.findIndex((item) => store.answers[tab]?.includes(item.label) ?? false),
-    )
-  }
-
-  const focus = (i: number) => {
-    const next = clamp(i)
-    setStore("focus", next)
-    if (store.editing) return
-    if (focusFrame !== undefined) cancelAnimationFrame(focusFrame)
-    focusFrame = requestAnimationFrame(() => {
-      focusFrame = undefined
-      const el = next === options().length ? customRef : optsRef[next]
-      el?.focus()
-    })
-  }
-
   onMount(() => {
     let raf: number | undefined
     const update = () => {
@@ -174,22 +96,22 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
     }
 
     update()
-
-    makeEventListener(window, "resize", update)
+    window.addEventListener("resize", update)
 
     const dock = root?.closest('[data-component="session-prompt-dock"]')
     const scroller = document.querySelector(".scroll-view__viewport")
-    createResizeObserver([dock, scroller], update)
+    const observer = new ResizeObserver(update)
+    if (dock instanceof HTMLElement) observer.observe(dock)
+    if (scroller instanceof HTMLElement) observer.observe(scroller)
 
     onCleanup(() => {
+      window.removeEventListener("resize", update)
+      observer.disconnect()
       if (raf !== undefined) cancelAnimationFrame(raf)
     })
-
-    focus(pickFocus())
   })
 
   onCleanup(() => {
-    if (focusFrame !== undefined) cancelAnimationFrame(focusFrame)
     if (replied) return
     cache.set(props.request.id, {
       tab: store.tab,
@@ -242,13 +164,6 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
 
   const submit = () => void reply(questions().map((_, i) => store.answers[i] ?? []))
 
-  const answered = (i: number) => {
-    if ((store.answers[i]?.length ?? 0) > 0) return true
-    return store.customOn[i] === true && (store.custom[i] ?? "").trim().length > 0
-  }
-
-  const picked = (answer: string) => store.answers[store.tab]?.includes(answer) ?? false
-
   const pick = (answer: string, custom: boolean = false) => {
     setStore("answers", store.tab, [answer])
     if (custom) setStore("custom", store.tab, answer)
@@ -265,7 +180,6 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
 
   const customToggle = () => {
     if (sending()) return
-    setStore("focus", options().length)
 
     if (!multi()) {
       setStore("customOn", store.tab, true)
@@ -285,68 +199,15 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
     const value = input().trim()
     if (value) setStore("answers", store.tab, (current = []) => current.filter((item) => item.trim() !== value))
     setStore("editing", false)
-    focus(options().length)
   }
 
   const customOpen = () => {
     if (sending()) return
-    setStore("focus", options().length)
     if (!on()) setStore("customOn", store.tab, true)
     setStore("editing", true)
     customUpdate(input(), true)
   }
 
-  const move = (step: number) => {
-    if (store.editing || sending()) return
-    focus(store.focus + step)
-  }
-
-  const nav = (event: KeyboardEvent) => {
-    if (event.defaultPrevented) return
-
-    if (event.key === "Escape") {
-      event.preventDefault()
-      void reject()
-      return
-    }
-
-    const mod = (event.metaKey || event.ctrlKey) && !event.altKey
-    if (mod && event.key === "Enter") {
-      if (event.repeat) return
-      event.preventDefault()
-      next()
-      return
-    }
-
-    const target =
-      event.target instanceof HTMLElement ? event.target.closest('[data-slot="question-options"]') : undefined
-    if (store.editing) return
-    if (!(target instanceof HTMLElement)) return
-    if (event.altKey || event.ctrlKey || event.metaKey) return
-
-    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
-      event.preventDefault()
-      move(1)
-      return
-    }
-
-    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
-      event.preventDefault()
-      move(-1)
-      return
-    }
-
-    if (event.key === "Home") {
-      event.preventDefault()
-      focus(0)
-      return
-    }
-
-    if (event.key !== "End") return
-    event.preventDefault()
-    focus(count() - 1)
-  }
-
   const selectOption = (optIndex: number) => {
     if (sending()) return
 
@@ -358,7 +219,6 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
     const opt = options()[optIndex]
     if (!opt) return
     if (multi()) {
-      setStore("editing", false)
       toggle(opt.label)
       return
     }
@@ -368,25 +228,6 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
   const commitCustom = () => {
     setStore("editing", false)
     customUpdate(input())
-    focus(options().length)
-  }
-
-  const resizeInput = (el: HTMLTextAreaElement) => {
-    el.style.height = "0px"
-    el.style.height = `${el.scrollHeight}px`
-  }
-
-  const focusCustom = (el: HTMLTextAreaElement) => {
-    setTimeout(() => {
-      el.focus()
-      resizeInput(el)
-    }, 0)
-  }
-
-  const toggleCustomMark = (event: MouseEvent) => {
-    event.preventDefault()
-    event.stopPropagation()
-    customToggle()
   }
 
   const next = () => {
@@ -398,33 +239,27 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
       return
     }
 
-    const tab = store.tab + 1
-    setStore("tab", tab)
+    setStore("tab", store.tab + 1)
     setStore("editing", false)
-    focus(pickFocus(tab))
   }
 
   const back = () => {
     if (sending()) return
     if (store.tab <= 0) return
-    const tab = store.tab - 1
-    setStore("tab", tab)
+    setStore("tab", store.tab - 1)
     setStore("editing", false)
-    focus(pickFocus(tab))
   }
 
   const jump = (tab: number) => {
     if (sending()) return
     setStore("tab", tab)
     setStore("editing", false)
-    focus(pickFocus(tab))
   }
 
   return (
     <DockPrompt
       kind="question"
       ref={(el) => (root = el)}
-      onKeyDown={nav}
       header={
         <>
           <div data-slot="question-header-title">{summary()}</div>
@@ -435,7 +270,10 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
                   type="button"
                   data-slot="question-progress-segment"
                   data-active={i() === store.tab}
-                  data-answered={answered(i())}
+                  data-answered={
+                    (store.answers[i()]?.length ?? 0) > 0 ||
+                    (store.customOn[i()] === true && (store.custom[i()] ?? "").trim().length > 0)
+                  }
                   disabled={sending()}
                   onClick={() => jump(i())}
                   aria-label={`${language.t("ui.tool.questions")} ${i() + 1}`}
@@ -447,7 +285,7 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
       }
       footer={
         <>
-          <Button variant="ghost" size="large" disabled={sending()} onClick={reject} aria-keyshortcuts="Escape">
+          <Button variant="ghost" size="large" disabled={sending()} onClick={reject}>
             {language.t("ui.common.dismiss")}
           </Button>
           <div data-slot="question-footer-actions">
@@ -456,13 +294,7 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
                 {language.t("ui.common.back")}
               </Button>
             </Show>
-            <Button
-              variant={last() ? "primary" : "secondary"}
-              size="large"
-              disabled={sending()}
-              onClick={next}
-              aria-keyshortcuts="Meta+Enter Control+Enter"
-            >
+            <Button variant={last() ? "primary" : "secondary"} size="large" disabled={sending()} onClick={next}>
               {last() ? language.t("ui.common.submit") : language.t("ui.common.next")}
             </Button>
           </div>
@@ -475,39 +307,69 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
       </Show>
       <div data-slot="question-options">
         <For each={options()}>
-          {(opt, i) => (
-            <Option
-              multi={multi()}
-              picked={picked(opt.label)}
-              label={opt.label}
-              description={opt.description}
-              disabled={sending()}
-              ref={(el) => (optsRef[i()] = el)}
-              onFocus={() => setStore("focus", i())}
-              onClick={() => selectOption(i())}
-            />
-          )}
+          {(opt, i) => {
+            const picked = () => store.answers[store.tab]?.includes(opt.label) ?? false
+            return (
+              <button
+                data-slot="question-option"
+                data-picked={picked()}
+                role={multi() ? "checkbox" : "radio"}
+                aria-checked={picked()}
+                disabled={sending()}
+                onClick={() => selectOption(i())}
+              >
+                <span data-slot="question-option-check" aria-hidden="true">
+                  <span
+                    data-slot="question-option-box"
+                    data-type={multi() ? "checkbox" : "radio"}
+                    data-picked={picked()}
+                  >
+                    <Show when={multi()} fallback={<span data-slot="question-option-radio-dot" />}>
+                      <Icon name="check-small" size="small" />
+                    </Show>
+                  </span>
+                </span>
+                <span data-slot="question-option-main">
+                  <span data-slot="option-label">{opt.label}</span>
+                  <Show when={opt.description}>
+                    <span data-slot="option-description">{opt.description}</span>
+                  </Show>
+                </span>
+              </button>
+            )
+          }}
         </For>
 
         <Show
           when={store.editing}
           fallback={
             <button
-              type="button"
-              ref={customRef}
               data-slot="question-option"
               data-custom="true"
               data-picked={on()}
               role={multi() ? "checkbox" : "radio"}
               aria-checked={on()}
               disabled={sending()}
-              onFocus={() => setStore("focus", options().length)}
               onClick={customOpen}
             >
-              <Mark multi={multi()} picked={on()} onClick={toggleCustomMark} />
+              <span
+                data-slot="question-option-check"
+                aria-hidden="true"
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  customToggle()
+                }}
+              >
+                <span data-slot="question-option-box" data-type={multi() ? "checkbox" : "radio"} data-picked={on()}>
+                  <Show when={multi()} fallback={<span data-slot="question-option-radio-dot" />}>
+                    <Icon name="check-small" size="small" />
+                  </Show>
+                </span>
+              </span>
               <span data-slot="question-option-main">
-                <span data-slot="option-label">{customLabel()}</span>
-                <span data-slot="option-description">{input() || customPlaceholder()}</span>
+                <span data-slot="option-label">{language.t("ui.messagePart.option.typeOwnAnswer")}</span>
+                <span data-slot="option-description">{input() || language.t("ui.question.custom.placeholder")}</span>
               </span>
             </button>
           }
@@ -532,13 +394,33 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
               commitCustom()
             }}
           >
-            <Mark multi={multi()} picked={on()} onClick={toggleCustomMark} />
+            <span
+              data-slot="question-option-check"
+              aria-hidden="true"
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                customToggle()
+              }}
+            >
+              <span data-slot="question-option-box" data-type={multi() ? "checkbox" : "radio"} data-picked={on()}>
+                <Show when={multi()} fallback={<span data-slot="question-option-radio-dot" />}>
+                  <Icon name="check-small" size="small" />
+                </Show>
+              </span>
+            </span>
             <span data-slot="question-option-main">
-              <span data-slot="option-label">{customLabel()}</span>
+              <span data-slot="option-label">{language.t("ui.messagePart.option.typeOwnAnswer")}</span>
               <textarea
-                ref={focusCustom}
+                ref={(el) =>
+                  setTimeout(() => {
+                    el.focus()
+                    el.style.height = "0px"
+                    el.style.height = `${el.scrollHeight}px`
+                  }, 0)
+                }
                 data-slot="question-custom-input"
-                placeholder={customPlaceholder()}
+                placeholder={language.t("ui.question.custom.placeholder")}
                 value={input()}
                 rows={1}
                 disabled={sending()}
@@ -546,17 +428,16 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
                   if (e.key === "Escape") {
                     e.preventDefault()
                     setStore("editing", false)
-                    focus(options().length)
                     return
                   }
-                  if ((e.metaKey || e.ctrlKey) && !e.altKey) return
                   if (e.key !== "Enter" || e.shiftKey) return
                   e.preventDefault()
                   commitCustom()
                 }}
                 onInput={(e) => {
                   customUpdate(e.currentTarget.value)
-                  resizeInput(e.currentTarget)
+                  e.currentTarget.style.height = "0px"
+                  e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`
                 }}
               />
             </span>

packages/app/src/pages/session/composer/session-todo-dock.tsx

@@ -6,7 +6,6 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { useSpring } from "@opencode-ai/ui/motion-spring"
 import { TextReveal } from "@opencode-ai/ui/text-reveal"
 import { TextStrikethrough } from "@opencode-ai/ui/text-strikethrough"
-import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { Index, createEffect, createMemo, on, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { composerEnabled, composerProbe } from "@/testing/session-composer"
@@ -92,7 +91,9 @@ export function SessionTodoDock(props: {
       setStore("height", el.getBoundingClientRect().height)
     }
     update()
-    createResizeObserver(el, update)
+    const observer = new ResizeObserver(update)
+    observer.observe(el)
+    onCleanup(() => observer.disconnect())
   })
 
   createEffect(() => {

packages/app/src/pages/session/file-tabs.tsx

@@ -1,7 +1,6 @@
-import { createEffect, createMemo, createSignal, Match, on, onCleanup, Switch } from "solid-js"
+import { createEffect, createMemo, Match, on, onCleanup, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Dynamic } from "solid-js/web"
-import { makeEventListener } from "@solid-primitives/event-listener"
 import type { FileSearchHandle } from "@opencode-ai/ui/file"
 import { useFileComponent } from "@opencode-ai/ui/context/file"
 import { cloneSelectedLineRange, previewSelectedLines } from "@opencode-ai/ui/pierre/selection-bridge"
@@ -53,124 +52,6 @@ function FileCommentMenu(props: {
   )
 }
 
-type ScrollPos = { x: number; y: number }
-
-function createScrollSync(input: { tab: () => string; view: ReturnType<typeof useSessionLayout>["view"] }) {
-  let scroll: HTMLDivElement | undefined
-  let scrollFrame: number | undefined
-  let restoreFrame: number | undefined
-  let pending: ScrollPos | undefined
-  const [code, setCode] = createSignal<HTMLElement[]>([])
-
-  const getCode = () => {
-    const el = scroll
-    if (!el) return []
-
-    const host = el.querySelector("diffs-container")
-    if (!(host instanceof HTMLElement)) return []
-
-    const root = host.shadowRoot
-    if (!root) return []
-
-    return Array.from(root.querySelectorAll("[data-code]")).filter(
-      (node): node is HTMLElement => node instanceof HTMLElement && node.clientWidth > 0,
-    )
-  }
-
-  const save = (next: ScrollPos) => {
-    pending = next
-    if (scrollFrame !== undefined) return
-
-    scrollFrame = requestAnimationFrame(() => {
-      scrollFrame = undefined
-
-      const out = pending
-      pending = undefined
-      if (!out) return
-
-      input.view().setScroll(input.tab(), out)
-    })
-  }
-
-  const onCodeScroll = (event: Event) => {
-    const el = scroll
-    if (!el) return
-
-    const target = event.currentTarget
-    if (!(target instanceof HTMLElement)) return
-
-    save({
-      x: target.scrollLeft,
-      y: el.scrollTop,
-    })
-  }
-
-  const sync = () => {
-    const next = getCode()
-    const current = code()
-    if (next.length === current.length && next.every((el, i) => el === current[i])) return
-    setCode(next)
-  }
-
-  const restore = () => {
-    const el = scroll
-    if (!el) return
-
-    const pos = input.view().scroll(input.tab())
-    if (!pos) return
-
-    sync()
-
-    if (code().length > 0) {
-      for (const item of code()) {
-        if (item.scrollLeft !== pos.x) item.scrollLeft = pos.x
-      }
-    }
-
-    if (el.scrollTop !== pos.y) el.scrollTop = pos.y
-    if (code().length > 0) return
-    if (el.scrollLeft !== pos.x) el.scrollLeft = pos.x
-  }
-
-  const queueRestore = () => {
-    if (restoreFrame !== undefined) return
-
-    restoreFrame = requestAnimationFrame(() => {
-      restoreFrame = undefined
-      restore()
-    })
-  }
-
-  const handleScroll = (event: Event & { currentTarget: HTMLDivElement }) => {
-    if (code().length === 0) sync()
-
-    save({
-      x: code()[0]?.scrollLeft ?? event.currentTarget.scrollLeft,
-      y: event.currentTarget.scrollTop,
-    })
-  }
-
-  createEffect(() => {
-    for (const item of code()) makeEventListener(item, "scroll", onCodeScroll)
-  })
-
-  const setViewport = (el: HTMLDivElement) => {
-    scroll = el
-    restore()
-  }
-
-  onCleanup(() => {
-    if (scrollFrame !== undefined) cancelAnimationFrame(scrollFrame)
-    if (restoreFrame !== undefined) cancelAnimationFrame(restoreFrame)
-  })
-
-  return {
-    handleScroll,
-    queueRestore,
-    setViewport,
-  }
-}
-
 export function FileTabContent(props: { tab: string }) {
   const file = useFile()
   const comments = useComments()
@@ -184,6 +65,11 @@ export function FileTabContent(props: { tab: string }) {
     normalizeTab: (tab) => (tab.startsWith("file://") ? file.tab(tab) : tab),
   }).activeFileTab
 
+  let scroll: HTMLDivElement | undefined
+  let scrollFrame: number | undefined
+  let restoreFrame: number | undefined
+  let pending: { x: number; y: number } | undefined
+  let codeScroll: HTMLElement[] = []
   let find: FileSearchHandle | null = null
 
   const search = {
@@ -206,10 +92,6 @@ export function FileTabContent(props: { tab: string }) {
     if (file.ready()) return (file.selectedLines(p) as SelectedLineRange | undefined) ?? null
     return (getSessionHandoff(sessionKey())?.files[p] as SelectedLineRange | undefined) ?? null
   })
-  const scrollSync = createScrollSync({
-    tab: () => props.tab,
-    view,
-  })
 
   const selectionPreview = (source: string, selection: FileSelection) => {
     return previewSelectedLines(source, {
@@ -218,12 +100,6 @@ export function FileTabContent(props: { tab: string }) {
     })
   }
 
-  const buildPreview = (filePath: string, selection: FileSelection) => {
-    const source = filePath === path() ? contents() : file.get(filePath)?.content?.content
-    if (!source) return undefined
-    return selectionPreview(source, selection)
-  }
-
   const addCommentToContext = (input: {
     file: string
     selection: SelectedLineRange
@@ -232,7 +108,14 @@ export function FileTabContent(props: { tab: string }) {
     origin?: "review" | "file"
   }) => {
     const selection = selectionFromLines(input.selection)
-    const preview = input.preview ?? buildPreview(input.file, selection)
+    const preview =
+      input.preview ??
+      (() => {
+        if (input.file === path()) return selectionPreview(contents(), selection)
+        const source = file.get(input.file)?.content?.content
+        if (!source) return undefined
+        return selectionPreview(source, selection)
+      })()
 
     const saved = comments.add({
       file: input.file,
@@ -257,7 +140,8 @@ export function FileTabContent(props: { tab: string }) {
     comment: string
   }) => {
     comments.update(input.file, input.id, input.comment)
-    const preview = input.file === path() ? buildPreview(input.file, selectionFromLines(input.selection)) : undefined
+    const preview =
+      input.file === path() ? selectionPreview(contents(), selectionFromLines(input.selection)) : undefined
     prompt.context.updateComment(input.file, input.id, {
       comment: input.comment,
       ...(preview ? { preview } : {}),
@@ -295,9 +179,6 @@ export function FileTabContent(props: { tab: string }) {
     comments: fileComments,
     label: language.t("ui.lineComment.submit"),
     draftKey: () => path() ?? props.tab,
-    mention: {
-      items: file.searchFilesAndDirectories,
-    },
     state: {
       opened: () => note.openedComment,
       setOpened: (id) => setNote("openedComment", id),
@@ -351,7 +232,8 @@ export function FileTabContent(props: { tab: string }) {
       find?.focus()
     }
 
-    makeEventListener(window, "keydown", onKeyDown, { capture: true })
+    window.addEventListener("keydown", onKeyDown, { capture: true })
+    onCleanup(() => window.removeEventListener("keydown", onKeyDown, { capture: true }))
   })
 
   createEffect(
@@ -378,6 +260,102 @@ export function FileTabContent(props: { tab: string }) {
     requestAnimationFrame(() => comments.clearFocus())
   })
 
+  const getCodeScroll = () => {
+    const el = scroll
+    if (!el) return []
+
+    const host = el.querySelector("diffs-container")
+    if (!(host instanceof HTMLElement)) return []
+
+    const root = host.shadowRoot
+    if (!root) return []
+
+    return Array.from(root.querySelectorAll("[data-code]")).filter(
+      (node): node is HTMLElement => node instanceof HTMLElement && node.clientWidth > 0,
+    )
+  }
+
+  const queueScrollUpdate = (next: { x: number; y: number }) => {
+    pending = next
+    if (scrollFrame !== undefined) return
+
+    scrollFrame = requestAnimationFrame(() => {
+      scrollFrame = undefined
+
+      const out = pending
+      pending = undefined
+      if (!out) return
+
+      view().setScroll(props.tab, out)
+    })
+  }
+
+  const handleCodeScroll = (event: Event) => {
+    const el = scroll
+    if (!el) return
+
+    const target = event.currentTarget
+    if (!(target instanceof HTMLElement)) return
+
+    queueScrollUpdate({
+      x: target.scrollLeft,
+      y: el.scrollTop,
+    })
+  }
+
+  const syncCodeScroll = () => {
+    const next = getCodeScroll()
+    if (next.length === codeScroll.length && next.every((el, i) => el === codeScroll[i])) return
+
+    for (const item of codeScroll) {
+      item.removeEventListener("scroll", handleCodeScroll)
+    }
+
+    codeScroll = next
+
+    for (const item of codeScroll) {
+      item.addEventListener("scroll", handleCodeScroll)
+    }
+  }
+
+  const restoreScroll = () => {
+    const el = scroll
+    if (!el) return
+
+    const s = view().scroll(props.tab)
+    if (!s) return
+
+    syncCodeScroll()
+
+    if (codeScroll.length > 0) {
+      for (const item of codeScroll) {
+        if (item.scrollLeft !== s.x) item.scrollLeft = s.x
+      }
+    }
+
+    if (el.scrollTop !== s.y) el.scrollTop = s.y
+    if (codeScroll.length > 0) return
+    if (el.scrollLeft !== s.x) el.scrollLeft = s.x
+  }
+
+  const queueRestore = () => {
+    if (restoreFrame !== undefined) return
+
+    restoreFrame = requestAnimationFrame(() => {
+      restoreFrame = undefined
+      restoreScroll()
+    })
+  }
+
+  const handleScroll = (event: Event & { currentTarget: HTMLDivElement }) => {
+    if (codeScroll.length === 0) syncCodeScroll()
+
+    queueScrollUpdate({
+      x: codeScroll[0]?.scrollLeft ?? event.currentTarget.scrollLeft,
+      y: event.currentTarget.scrollTop,
+    })
+  }
+
   const cancelCommenting = () => {
     const p = path()
     if (p) file.setSelectedLines(p, null)
@@ -397,7 +375,16 @@ export function FileTabContent(props: { tab: string }) {
     const restore = (loaded && !prev.loaded) || (ready && !prev.ready) || (active && loaded && !prev.active)
     prev = { loaded, ready, active }
     if (!restore) return
-    scrollSync.queueRestore()
+    queueRestore()
+  })
+
+  onCleanup(() => {
+    for (const item of codeScroll) {
+      item.removeEventListener("scroll", handleCodeScroll)
+    }
+
+    if (scrollFrame !== undefined) cancelAnimationFrame(scrollFrame)
+    if (restoreFrame !== undefined) cancelAnimationFrame(restoreFrame)
   })
 
   const renderFile = (source: string) => (
@@ -415,7 +402,7 @@ export function FileTabContent(props: { tab: string }) {
         selectedLines={activeSelection()}
         commentedLines={commentedLines()}
         onRendered={() => {
-          scrollSync.queueRestore()
+          queueRestore()
         }}
         annotations={commentsUi.annotations()}
         renderAnnotation={commentsUi.renderAnnotation}
@@ -433,7 +420,7 @@ export function FileTabContent(props: { tab: string }) {
           mode: "auto",
           path: path(),
           current: state()?.content,
-          onLoad: scrollSync.queueRestore,
+          onLoad: queueRestore,
           onError: (args: { kind: "image" | "audio" | "svg" }) => {
             if (args.kind !== "svg") return
             showToast({
@@ -448,7 +435,14 @@ export function FileTabContent(props: { tab: string }) {
 
   return (
     <Tabs.Content value={props.tab} class="mt-3 relative h-full">
-      <ScrollView class="h-full" viewportRef={scrollSync.setViewport} onScroll={scrollSync.handleScroll as any}>
+      <ScrollView
+        class="h-full"
+        viewportRef={(el: HTMLDivElement) => {
+          scroll = el
+          restoreScroll()
+        }}
+        onScroll={handleScroll as any}
+      >
         <Switch>
           <Match when={state()?.loaded}>{renderFile(contents())}</Match>
           <Match when={state()?.loading}>

packages/app/src/pages/session/helpers.ts

@@ -1,6 +1,5 @@
 import { batch, createMemo, onCleanup, onMount, type Accessor } from "solid-js"
 import { createStore } from "solid-js/store"
-import { makeEventListener } from "@solid-primitives/event-listener"
 import { same } from "@/utils/same"
 
 const emptyTabs: string[] = []
@@ -172,9 +171,14 @@ export const createSizing = () => {
   }
 
   onMount(() => {
-    makeEventListener(window, "pointerup", stop)
-    makeEventListener(window, "pointercancel", stop)
-    makeEventListener(window, "blur", stop)
+    window.addEventListener("pointerup", stop)
+    window.addEventListener("pointercancel", stop)
+    window.addEventListener("blur", stop)
+    onCleanup(() => {
+      window.removeEventListener("pointerup", stop)
+      window.removeEventListener("pointercancel", stop)
+      window.removeEventListener("blur", stop)
+    })
   })
 
   onCleanup(() => {

packages/app/src/pages/session/message-timeline.tsx

@@ -943,10 +943,7 @@ export function MessageTimeline(props: {
                         "min-w-0 w-full max-w-full": true,
                         "md:max-w-200 2xl:max-w-[1000px]": props.centered,
                       }}
-                      style={{
-                        "content-visibility": active() ? undefined : "auto",
-                        "contain-intrinsic-size": active() ? undefined : "auto 500px",
-                      }}
+                      style={{ "content-visibility": "auto", "contain-intrinsic-size": "auto 500px" }}
                     >
                       <Show when={commentCount() > 0}>
                         <div class="w-full px-4 md:px-5 pb-2">

packages/app/src/pages/session/review-tab.tsx

@@ -1,5 +1,4 @@
-import { createEffect, createSignal, onCleanup, type JSX } from "solid-js"
-import { makeEventListener } from "@solid-primitives/event-listener"
+import { createEffect, onCleanup, type JSX } from "solid-js"
 import type { FileDiff } from "@opencode-ai/sdk/v2"
 import { SessionReview } from "@opencode-ai/ui/session-review"
 import type {
@@ -31,9 +30,6 @@ export interface SessionReviewTabProps {
   onFocusedCommentChange?: (focus: { file: string; id: string } | null) => void
   focusedFile?: string
   onScrollRef?: (el: HTMLDivElement) => void
-  commentMentions?: {
-    items: (query: string) => string[] | Promise<string[]>
-  }
   classes?: {
     root?: string
     header?: string
@@ -124,6 +120,13 @@ export function SessionReviewTab(props: SessionReviewTabProps) {
 
   onCleanup(() => {
     if (restoreFrame !== undefined) cancelAnimationFrame(restoreFrame)
+    if (scroll) {
+      scroll.removeEventListener("wheel", handleInteraction, { capture: true })
+      scroll.removeEventListener("mousewheel", handleInteraction, { capture: true })
+      scroll.removeEventListener("pointerdown", handleInteraction, { capture: true })
+      scroll.removeEventListener("touchstart", handleInteraction, { capture: true })
+      scroll.removeEventListener("keydown", handleInteraction, { capture: true })
+    }
   })
 
   return (
@@ -132,11 +135,11 @@ export function SessionReviewTab(props: SessionReviewTabProps) {
       empty={props.empty}
       scrollRef={(el) => {
         scroll = el
-        makeEventListener(el, "wheel", handleInteraction, { passive: true, capture: true })
-        makeEventListener(el, "mousewheel", handleInteraction, { passive: true, capture: true })
-        makeEventListener(el, "pointerdown", handleInteraction, { passive: true, capture: true })
-        makeEventListener(el, "touchstart", handleInteraction, { passive: true, capture: true })
-        makeEventListener(el, "keydown", handleInteraction, { capture: true })
+        el.addEventListener("wheel", handleInteraction, { passive: true, capture: true })
+        el.addEventListener("mousewheel", handleInteraction, { passive: true, capture: true })
+        el.addEventListener("pointerdown", handleInteraction, { passive: true, capture: true })
+        el.addEventListener("touchstart", handleInteraction, { passive: true, capture: true })
+        el.addEventListener("keydown", handleInteraction, { passive: true, capture: true })
         props.onScrollRef?.(el)
         queueRestore()
       }}
@@ -159,7 +162,6 @@ export function SessionReviewTab(props: SessionReviewTabProps) {
       onLineCommentUpdate={props.onLineCommentUpdate}
       onLineCommentDelete={props.onLineCommentDelete}
       lineCommentActions={props.lineCommentActions}
-      lineCommentMention={props.commentMentions}
       comments={props.comments}
       focusedComment={props.focusedComment}
       onFocusedCommentChange={props.onFocusedCommentChange}