make provider.npm and provider.api optional in model config

Add 5 new unit tests that verify the retry mechanism for structured
output validation:
- Multiple validation failures trigger multiple onError calls
- Success after failures correctly calls onSuccess
- Error messages guide model to fix issues and retry
- Simulates retry state tracking matching prompt.ts logic
- Simulates successful retry after initial failures

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.github/workflows/pr-management.yml

@@ -60,11 +60,9 @@ jobs:
         run: |
           COMMENT=$(bun script/duplicate-pr.ts -f pr_info.txt "Check the attached file for PR details and search for duplicates")
 
-          if [ "$COMMENT" != "No duplicate PRs found" ]; then
-            gh pr comment "$PR_NUMBER" --body "_The following comment was made by an LLM, it may be inaccurate:_
+          gh pr comment "$PR_NUMBER" --body "_The following comment was made by an LLM, it may be inaccurate:_
 
           $COMMENT"
-          fi
 
   add-contributor-label:
     runs-on: ubuntu-latest

.github/workflows/sign-cli.yml

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

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

@@ -1,7 +0,0 @@
-github-policies:
-  runners:
-    allowed_groups:
-      - "blacksmith runners 01kbd5v56sg8tz7rea39b7ygpt"
-  build:
-    disallow_reruns: false
-  branch_rulesets:

bun.lock

@@ -23,7 +23,7 @@
     },
     "packages/app": {
       "name": "@opencode-ai/app",
-      "version": "1.1.64",
+      "version": "1.1.59",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -73,7 +73,7 @@
     },
     "packages/console/app": {
       "name": "@opencode-ai/console-app",
-      "version": "1.1.64",
+      "version": "1.1.59",
       "dependencies": {
         "@cloudflare/vite-plugin": "1.15.2",
         "@ibm/plex": "6.4.1",
@@ -107,7 +107,7 @@
     },
     "packages/console/core": {
       "name": "@opencode-ai/console-core",
-      "version": "1.1.64",
+      "version": "1.1.59",
       "dependencies": {
         "@aws-sdk/client-sts": "3.782.0",
         "@jsx-email/render": "1.1.1",
@@ -134,7 +134,7 @@
     },
     "packages/console/function": {
       "name": "@opencode-ai/console-function",
-      "version": "1.1.64",
+      "version": "1.1.59",
       "dependencies": {
         "@ai-sdk/anthropic": "2.0.0",
         "@ai-sdk/openai": "2.0.2",
@@ -158,7 +158,7 @@
     },
     "packages/console/mail": {
       "name": "@opencode-ai/console-mail",
-      "version": "1.1.64",
+      "version": "1.1.59",
       "dependencies": {
         "@jsx-email/all": "2.2.3",
         "@jsx-email/cli": "1.4.3",
@@ -182,7 +182,7 @@
     },
     "packages/desktop": {
       "name": "@opencode-ai/desktop",
-      "version": "1.1.64",
+      "version": "1.1.59",
       "dependencies": {
         "@opencode-ai/app": "workspace:*",
         "@opencode-ai/ui": "workspace:*",
@@ -215,7 +215,7 @@
     },
     "packages/enterprise": {
       "name": "@opencode-ai/enterprise",
-      "version": "1.1.64",
+      "version": "1.1.59",
       "dependencies": {
         "@opencode-ai/ui": "workspace:*",
         "@opencode-ai/util": "workspace:*",
@@ -244,7 +244,7 @@
     },
     "packages/function": {
       "name": "@opencode-ai/function",
-      "version": "1.1.64",
+      "version": "1.1.59",
       "dependencies": {
         "@octokit/auth-app": "8.0.1",
         "@octokit/rest": "catalog:",
@@ -260,7 +260,7 @@
     },
     "packages/opencode": {
       "name": "opencode",
-      "version": "1.1.64",
+      "version": "1.1.59",
       "bin": {
         "opencode": "./bin/opencode",
       },
@@ -366,7 +366,7 @@
     },
     "packages/plugin": {
       "name": "@opencode-ai/plugin",
-      "version": "1.1.64",
+      "version": "1.1.59",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "zod": "catalog:",
@@ -386,7 +386,7 @@
     },
     "packages/sdk/js": {
       "name": "@opencode-ai/sdk",
-      "version": "1.1.64",
+      "version": "1.1.59",
       "devDependencies": {
         "@hey-api/openapi-ts": "0.90.10",
         "@tsconfig/node22": "catalog:",
@@ -397,7 +397,7 @@
     },
     "packages/slack": {
       "name": "@opencode-ai/slack",
-      "version": "1.1.64",
+      "version": "1.1.59",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "@slack/bolt": "^3.17.1",
@@ -410,7 +410,7 @@
     },
     "packages/ui": {
       "name": "@opencode-ai/ui",
-      "version": "1.1.64",
+      "version": "1.1.59",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -452,7 +452,7 @@
     },
     "packages/util": {
       "name": "@opencode-ai/util",
-      "version": "1.1.64",
+      "version": "1.1.59",
       "dependencies": {
         "zod": "catalog:",
       },
@@ -463,7 +463,7 @@
     },
     "packages/web": {
       "name": "@opencode-ai/web",
-      "version": "1.1.64",
+      "version": "1.1.59",
       "dependencies": {
         "@astrojs/cloudflare": "12.6.3",
         "@astrojs/markdown-remark": "6.3.1",
@@ -513,7 +513,7 @@
     "@kobalte/core": "0.13.11",
     "@octokit/rest": "22.0.0",
     "@openauthjs/openauth": "0.0.0-20250322224806",
-    "@pierre/diffs": "1.1.0-beta.13",
+    "@pierre/diffs": "1.0.2",
     "@playwright/test": "1.51.0",
     "@solid-primitives/storage": "4.3.3",
     "@solidjs/meta": "0.29.4",
@@ -1409,7 +1409,7 @@
 
     "@petamoriken/float16": ["@petamoriken/float16@3.9.3", "", {}, "sha512-8awtpHXCx/bNpFt4mt2xdkgtgVvKqty8VbjHI/WWWQuEw+KLzFot3f4+LkQY9YmOtq7A5GdOnqoIC8Pdygjk2g=="],
 
-    "@pierre/diffs": ["@pierre/diffs@1.1.0-beta.13", "", { "dependencies": { "@shikijs/transformers": "^3.0.0", "diff": "8.0.3", "hast-util-to-html": "9.0.5", "lru_map": "0.4.1", "shiki": "^3.0.0" }, "peerDependencies": { "react": "^18.3.1 || ^19.0.0", "react-dom": "^18.3.1 || ^19.0.0" } }, "sha512-D35rxDu5V7XHX5aVGU6PF12GhscL+I+9QYgxK/i3h0d2XSirAxDdVNm49aYwlOhgmdvL0NbS1IHxPswVB5yJvw=="],
+    "@pierre/diffs": ["@pierre/diffs@1.0.2", "", { "dependencies": { "@shikijs/core": "^3.0.0", "@shikijs/engine-javascript": "3.19.0", "@shikijs/transformers": "3.19.0", "diff": "8.0.2", "hast-util-to-html": "9.0.5", "lru_map": "0.4.1", "shiki": "3.19.0" }, "peerDependencies": { "react": "^18.3.1 || ^19.0.0", "react-dom": "^18.3.1 || ^19.0.0" } }, "sha512-RkFSDD5X/U+8QjyilPViYGJfmJNWXR17zTL8zw48+DcVC1Ujbh6I1edyuRnFfgRzpft05x2DSCkz2cjoIAxPvQ=="],
 
     "@pinojs/redact": ["@pinojs/redact@0.4.0", "", {}, "sha512-k2ENnmBugE/rzQfEcdWHcCY+/FM3VLzH9cYEsbdsoqrvzAKRhUZeRNhAZvB8OitQJ1TBed3yqWtdjzS6wJKBwg=="],
 
@@ -4387,9 +4387,13 @@
 
     "@oslojs/jwt/@oslojs/encoding": ["@oslojs/encoding@0.4.1", "", {}, "sha512-hkjo6MuIK/kQR5CrGNdAPZhS01ZCXuWDRJ187zh6qqF2+yMHZpD9fAYpX8q2bOO6Ryhl3XpCT6kUX76N8hhm4Q=="],
 
-    "@pierre/diffs/@shikijs/transformers": ["@shikijs/transformers@3.20.0", "", { "dependencies": { "@shikijs/core": "3.20.0", "@shikijs/types": "3.20.0" } }, "sha512-PrHHMRr3Q5W1qB/42kJW6laqFyWdhrPF2hNR9qjOm1xcSiAO3hAHo7HaVyHE6pMyevmy3i51O8kuGGXC78uK3g=="],
+    "@pierre/diffs/@shikijs/core": ["@shikijs/core@3.20.0", "", { "dependencies": { "@shikijs/types": "3.20.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-f2ED7HYV4JEk827mtMDwe/yQ25pRiXZmtHjWF8uzZKuKiEsJR7Ce1nuQ+HhV9FzDcbIo4ObBCD9GPTzNuy9S1g=="],
 
-    "@pierre/diffs/diff": ["diff@8.0.3", "", {}, "sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ=="],
+    "@pierre/diffs/@shikijs/engine-javascript": ["@shikijs/engine-javascript@3.19.0", "", { "dependencies": { "@shikijs/types": "3.19.0", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.4" } }, "sha512-ZfWJNm2VMhKkQIKT9qXbs76RRcT0SF/CAvEz0+RkpUDAoDaCx0uFdCGzSRiD9gSlhm6AHkjdieOBJMaO2eC1rQ=="],
+
+    "@pierre/diffs/@shikijs/transformers": ["@shikijs/transformers@3.19.0", "", { "dependencies": { "@shikijs/core": "3.19.0", "@shikijs/types": "3.19.0" } }, "sha512-e6vwrsyw+wx4OkcrDbL+FVCxwx8jgKiCoXzakVur++mIWVcgpzIi8vxf4/b4dVTYrV/nUx5RjinMf4tq8YV8Fw=="],
+
+    "@pierre/diffs/shiki": ["shiki@3.19.0", "", { "dependencies": { "@shikijs/core": "3.19.0", "@shikijs/engine-javascript": "3.19.0", "@shikijs/engine-oniguruma": "3.19.0", "@shikijs/langs": "3.19.0", "@shikijs/themes": "3.19.0", "@shikijs/types": "3.19.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-77VJr3OR/VUZzPiStyRhADmO2jApMM0V2b1qf0RpfWya8Zr1PeZev5AEpPGAAKWdiYUtcZGBE4F5QvJml1PvWA=="],
 
     "@poppinss/dumper/supports-color": ["supports-color@10.2.2", "", {}, "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g=="],
 
@@ -4969,9 +4973,23 @@
 
     "@opentui/solid/@babel/core/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
-    "@pierre/diffs/@shikijs/transformers/@shikijs/core": ["@shikijs/core@3.20.0", "", { "dependencies": { "@shikijs/types": "3.20.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-f2ED7HYV4JEk827mtMDwe/yQ25pRiXZmtHjWF8uzZKuKiEsJR7Ce1nuQ+HhV9FzDcbIo4ObBCD9GPTzNuy9S1g=="],
+    "@pierre/diffs/@shikijs/core/@shikijs/types": ["@shikijs/types@3.20.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-lhYAATn10nkZcBQ0BlzSbJA3wcmL5MXUUF8d2Zzon6saZDlToKaiRX60n2+ZaHJCmXEcZRWNzn+k9vplr8Jhsw=="],
 
-    "@pierre/diffs/@shikijs/transformers/@shikijs/types": ["@shikijs/types@3.20.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-lhYAATn10nkZcBQ0BlzSbJA3wcmL5MXUUF8d2Zzon6saZDlToKaiRX60n2+ZaHJCmXEcZRWNzn+k9vplr8Jhsw=="],
+    "@pierre/diffs/@shikijs/engine-javascript/@shikijs/types": ["@shikijs/types@3.19.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-Z2hdeEQlzuntf/BZpFG8a+Fsw9UVXdML7w0o3TgSXV3yNESGon+bs9ITkQb3Ki7zxoXOOu5oJWqZ2uto06V9iQ=="],
+
+    "@pierre/diffs/@shikijs/transformers/@shikijs/core": ["@shikijs/core@3.19.0", "", { "dependencies": { "@shikijs/types": "3.19.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-L7SrRibU7ZoYi1/TrZsJOFAnnHyLTE1SwHG1yNWjZIVCqjOEmCSuK2ZO9thnRbJG6TOkPp+Z963JmpCNw5nzvA=="],
+
+    "@pierre/diffs/@shikijs/transformers/@shikijs/types": ["@shikijs/types@3.19.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-Z2hdeEQlzuntf/BZpFG8a+Fsw9UVXdML7w0o3TgSXV3yNESGon+bs9ITkQb3Ki7zxoXOOu5oJWqZ2uto06V9iQ=="],
+
+    "@pierre/diffs/shiki/@shikijs/core": ["@shikijs/core@3.19.0", "", { "dependencies": { "@shikijs/types": "3.19.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-L7SrRibU7ZoYi1/TrZsJOFAnnHyLTE1SwHG1yNWjZIVCqjOEmCSuK2ZO9thnRbJG6TOkPp+Z963JmpCNw5nzvA=="],
+
+    "@pierre/diffs/shiki/@shikijs/engine-oniguruma": ["@shikijs/engine-oniguruma@3.19.0", "", { "dependencies": { "@shikijs/types": "3.19.0", "@shikijs/vscode-textmate": "^10.0.2" } }, "sha512-1hRxtYIJfJSZeM5ivbUXv9hcJP3PWRo5prG/V2sWwiubUKTa+7P62d2qxCW8jiVFX4pgRHhnHNp+qeR7Xl+6kg=="],
+
+    "@pierre/diffs/shiki/@shikijs/langs": ["@shikijs/langs@3.19.0", "", { "dependencies": { "@shikijs/types": "3.19.0" } }, "sha512-dBMFzzg1QiXqCVQ5ONc0z2ebyoi5BKz+MtfByLm0o5/nbUu3Iz8uaTCa5uzGiscQKm7lVShfZHU1+OG3t5hgwg=="],
+
+    "@pierre/diffs/shiki/@shikijs/themes": ["@shikijs/themes@3.19.0", "", { "dependencies": { "@shikijs/types": "3.19.0" } }, "sha512-H36qw+oh91Y0s6OlFfdSuQ0Ld+5CgB/VE6gNPK+Hk4VRbVG/XQgkjnt4KzfnnoO6tZPtKJKHPjwebOCfjd6F8A=="],
+
+    "@pierre/diffs/shiki/@shikijs/types": ["@shikijs/types@3.19.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-Z2hdeEQlzuntf/BZpFG8a+Fsw9UVXdML7w0o3TgSXV3yNESGon+bs9ITkQb3Ki7zxoXOOu5oJWqZ2uto06V9iQ=="],
 
     "@slack/web-api/form-data/mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
 

install

@@ -130,7 +130,7 @@ else
     needs_baseline=false
     if [ "$arch" = "x64" ]; then
       if [ "$os" = "linux" ]; then
-        if ! grep -qwi avx2 /proc/cpuinfo 2>/dev/null; then
+        if ! grep -qi avx2 /proc/cpuinfo 2>/dev/null; then
           needs_baseline=true
         fi
       fi
@@ -141,20 +141,6 @@ else
           needs_baseline=true
         fi
       fi
-
-      if [ "$os" = "windows" ]; then
-        ps="(Add-Type -MemberDefinition \"[DllImport(\"\"kernel32.dll\"\")] public static extern bool IsProcessorFeaturePresent(int ProcessorFeature);\" -Name Kernel32 -Namespace Win32 -PassThru)::IsProcessorFeaturePresent(40)"
-        out=""
-        if command -v powershell.exe >/dev/null 2>&1; then
-          out=$(powershell.exe -NoProfile -NonInteractive -Command "$ps" 2>/dev/null || true)
-        elif command -v pwsh >/dev/null 2>&1; then
-          out=$(pwsh -NoProfile -NonInteractive -Command "$ps" 2>/dev/null || true)
-        fi
-        out=$(echo "$out" | tr -d '\r' | tr '[:upper:]' '[:lower:]' | tr -d '[:space:]')
-        if [ "$out" != "true" ] && [ "$out" != "1" ]; then
-          needs_baseline=true
-        fi
-      fi
     fi
 
     target="$os-$arch"

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-XIf7b6yALzH1/MkGGrsmq2DeXIC9vgD9a7D/dxhi6iU=",
-    "aarch64-linux": "sha256-mKDCs6QhIelWc3E17zOufaSDTovtjO/Xyh3JtlWl01s=",
-    "aarch64-darwin": "sha256-wC7bbbIyZ62uMxTr9FElTbEBMrfz0S/ndqwZZ3V9EOA=",
-    "x86_64-darwin": "sha256-/7Nn65m5Zhvzz0TKsG9nWd2v5WDHQNi3UzCfuAR8SLo="
+    "x86_64-linux": "sha256-pp2gb4nxiIT3VltB6Xli2wZPH32JfnMsI+BbihyU1+E=",
+    "aarch64-linux": "sha256-hJwxhBICZz/pbIxQsF/sIpZTlFIgLpcAyF44O8wxMdU=",
+    "aarch64-darwin": "sha256-DPONXP52XOg/ApdSnLp32a+K5XCOnDGhbTUto2Rme0g=",
+    "x86_64-darwin": "sha256-KX1h5LRJSgthpbOPqWlbM/sPf8cvQrdRJvxtrz/FzBQ="
   }
 }

package.json

@@ -35,7 +35,7 @@
       "@tsconfig/bun": "1.0.9",
       "@cloudflare/workers-types": "4.20251008.0",
       "@openauthjs/openauth": "0.0.0-20250322224806",
-      "@pierre/diffs": "1.1.0-beta.13",
+      "@pierre/diffs": "1.0.2",
       "@solid-primitives/storage": "4.3.3",
       "@tailwindcss/vite": "4.1.11",
       "diff": "8.0.2",

packages/app/e2e/files/file-open.spec.ts

@@ -1,28 +1,15 @@
 import { test, expect } from "../fixtures"
-import { promptSelector } from "../selectors"
+import { openPalette, clickListItem } from "../actions"
 
 test("can open a file tab from the search palette", async ({ page, gotoSession }) => {
   await gotoSession()
 
-  await page.locator(promptSelector).click()
-  await page.keyboard.type("/open")
-
-  const command = page.locator('[data-slash-id="file.open"]').first()
-  await expect(command).toBeVisible()
-  await page.keyboard.press("Enter")
-
-  const dialog = page
-    .getByRole("dialog")
-    .filter({ has: page.getByPlaceholder(/search files/i) })
-    .first()
-  await expect(dialog).toBeVisible()
+  const dialog = await openPalette(page)
 
   const input = dialog.getByRole("textbox").first()
   await input.fill("package.json")
 
-  const item = dialog.locator('[data-slot="list-item"][data-key^="file:"]').first()
-  await expect(item).toBeVisible({ timeout: 30_000 })
-  await item.click()
+  await clickListItem(dialog, { keyStartsWith: "file:" })
 
   await expect(dialog).toHaveCount(0)
 

packages/app/e2e/files/file-viewer.spec.ts

@@ -1,41 +1,18 @@
 import { test, expect } from "../fixtures"
-import { promptSelector } from "../selectors"
+import { openPalette, clickListItem } from "../actions"
 
 test("smoke file viewer renders real file content", async ({ page, gotoSession }) => {
   await gotoSession()
 
-  await page.locator(promptSelector).click()
-  await page.keyboard.type("/open")
+  const sep = process.platform === "win32" ? "\\" : "/"
+  const file = ["packages", "app", "package.json"].join(sep)
 
-  const command = page.locator('[data-slash-id="file.open"]').first()
-  await expect(command).toBeVisible()
-  await page.keyboard.press("Enter")
-
-  const dialog = page
-    .getByRole("dialog")
-    .filter({ has: page.getByPlaceholder(/search files/i) })
-    .first()
-  await expect(dialog).toBeVisible()
+  const dialog = await openPalette(page)
 
   const input = dialog.getByRole("textbox").first()
-  await input.fill("package.json")
+  await input.fill(file)
 
-  const items = dialog.locator('[data-slot="list-item"][data-key^="file:"]')
-  let index = -1
-  await expect
-    .poll(
-      async () => {
-        const keys = await items.evaluateAll((nodes) => nodes.map((node) => node.getAttribute("data-key") ?? ""))
-        index = keys.findIndex((key) => /packages[\\/]+app[\\/]+package\.json$/i.test(key.replace(/^file:/, "")))
-        return index >= 0
-      },
-      { timeout: 30_000 },
-    )
-    .toBe(true)
-
-  const item = items.nth(index)
-  await expect(item).toBeVisible()
-  await item.click()
+  await clickListItem(dialog, { text: /packages.*app.*package.json/ })
 
   await expect(dialog).toHaveCount(0)
 
@@ -45,5 +22,5 @@ test("smoke file viewer renders real file content", async ({ page, gotoSession }
 
   const code = page.locator('[data-component="code"]').first()
   await expect(code).toBeVisible()
-  await expect(code.getByText(/"name"\s*:\s*"@opencode-ai\/app"/)).toBeVisible()
+  await expect(code.getByText("@opencode-ai/app")).toBeVisible()
 })

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

@@ -69,19 +69,15 @@ async function createSessionFromWorkspace(page: Page, slug: string, text: string
 
   const prompt = page.locator(promptSelector)
   await expect(prompt).toBeVisible()
-  await expect(prompt).toBeEditable()
   await prompt.click()
-  await expect(prompt).toBeFocused()
-  await prompt.fill(text)
-  await expect.poll(async () => ((await prompt.textContent()) ?? "").trim()).toContain(text)
-  await prompt.press("Enter")
+  await page.keyboard.type(text)
+  await page.keyboard.press("Enter")
 
   await expect.poll(() => slugFromUrl(page.url())).toBe(slug)
-  await expect.poll(() => sessionIDFromUrl(page.url()) ?? "", { timeout: 30_000 }).not.toBe("")
+  await expect(page).toHaveURL(new RegExp(`/${slug}/session/[^/?#]+`), { timeout: 30_000 })
 
   const sessionID = sessionIDFromUrl(page.url())
   if (!sessionID) throw new Error(`Failed to parse session id from url: ${page.url()}`)
-  await expect(page).toHaveURL(new RegExp(`/${slug}/session/${sessionID}(?:[/?#]|$)`))
   return sessionID
 }
 

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

@@ -11,12 +11,18 @@ import {
   cleanupTestProject,
   clickMenuItem,
   confirmDialog,
+  openProjectMenu,
   openSidebar,
   openWorkspaceMenu,
   setWorkspacesEnabled,
 } from "../actions"
-import { dropdownMenuContentSelector, inlineInputSelector, workspaceItemSelector } from "../selectors"
-import { createSdk, dirSlug } from "../utils"
+import {
+  inlineInputSelector,
+  projectSwitchSelector,
+  projectWorkspacesToggleSelector,
+  workspaceItemSelector,
+} from "../selectors"
+import { dirSlug } from "../utils"
 
 function slugFromUrl(url: string) {
   return /\/([^/]+)\/session(?:\/|$)/.exec(url)?.[1] ?? ""
@@ -137,35 +143,26 @@ test("non-git projects keep workspace mode disabled", async ({ page, withProject
   await fs.writeFile(path.join(nonGit, "README.md"), "# e2e nongit\n")
 
   try {
-    await withProject(async () => {
-      await page.goto(`/${nonGitSlug}/session`)
+    await withProject(
+      async () => {
+        await openSidebar(page)
 
-      await expect.poll(() => slugFromUrl(page.url()), { timeout: 30_000 }).not.toBe("")
+        const nonGitButton = page.locator(projectSwitchSelector(nonGitSlug)).first()
+        await expect(nonGitButton).toBeVisible()
+        await nonGitButton.click()
+        await expect(page).toHaveURL(new RegExp(`/${nonGitSlug}/session`))
 
-      const activeDir = base64Decode(slugFromUrl(page.url()))
-      expect(path.basename(activeDir)).toContain("opencode-e2e-project-nongit-")
+        const menu = await openProjectMenu(page, nonGitSlug)
+        const toggle = menu.locator(projectWorkspacesToggleSelector(nonGitSlug)).first()
 
-      await openSidebar(page)
-      await expect(page.getByRole("button", { name: "New workspace" })).toHaveCount(0)
+        await expect(toggle).toBeVisible()
+        await expect(toggle).toBeDisabled()
 
-      const trigger = page.locator('[data-action="project-menu"]').first()
-      const hasMenu = await trigger
-        .isVisible()
-        .then((x) => x)
-        .catch(() => false)
-      if (!hasMenu) return
-
-      await trigger.click({ force: true })
-
-      const menu = page.locator(dropdownMenuContentSelector).first()
-      await expect(menu).toBeVisible()
-
-      const toggle = menu.locator('[data-action="project-workspaces-toggle"]').first()
-
-      await expect(toggle).toBeVisible()
-      await expect(toggle).toBeDisabled()
-      await expect(menu.getByRole("menuitem", { name: "New workspace" })).toHaveCount(0)
-    })
+        await expect(menu.getByRole("menuitem", { name: "New workspace" })).toHaveCount(0)
+        await expect(page.getByRole("button", { name: "New workspace" })).toHaveCount(0)
+      },
+      { extra: [nonGit] },
+    )
   } finally {
     await cleanupTestProject(nonGit)
   }
@@ -259,45 +256,14 @@ test("can delete a workspace", async ({ page, withProject }) => {
   await page.setViewportSize({ width: 1400, height: 800 })
 
   await withProject(async (project) => {
-    const sdk = createSdk(project.directory)
-    const { rootSlug, slug, directory } = await setupWorkspaceTest(page, project)
-
-    await expect
-      .poll(
-        async () => {
-          const worktrees = await sdk.worktree
-            .list()
-            .then((r) => r.data ?? [])
-            .catch(() => [] as string[])
-          return worktrees.includes(directory)
-        },
-        { timeout: 30_000 },
-      )
-      .toBe(true)
+    const { rootSlug, slug } = await setupWorkspaceTest(page, project)
 
     const menu = await openWorkspaceMenu(page, slug)
     await clickMenuItem(menu, /^Delete$/i, { force: true })
     await confirmDialog(page, /^Delete workspace$/i)
 
     await expect(page).toHaveURL(new RegExp(`/${rootSlug}/session`))
-
-    await expect
-      .poll(
-        async () => {
-          const worktrees = await sdk.worktree
-            .list()
-            .then((r) => r.data ?? [])
-            .catch(() => [] as string[])
-          return worktrees.includes(directory)
-        },
-        { timeout: 60_000 },
-      )
-      .toBe(false)
-
-    await project.gotoSession()
-
-    await openSidebar(page)
-    await expect(page.locator(workspaceItemSelector(slug))).toHaveCount(0, { timeout: 60_000 })
+    await expect(page.locator(workspaceItemSelector(slug))).toHaveCount(0)
     await expect(page.locator(workspaceItemSelector(rootSlug)).first()).toBeVisible()
   })
 })

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

@@ -1,95 +1,40 @@
 import { test, expect } from "../fixtures"
-import type { Page } from "@playwright/test"
 import { promptSelector } from "../selectors"
 import { withSession } from "../actions"
 
-function contextButton(page: Page) {
-  return page
-    .locator('[data-component="button"]')
-    .filter({ has: page.locator('[data-component="progress-circle"]').first() })
-    .first()
-}
-
-async function seedContextSession(input: { sessionID: string; sdk: Parameters<typeof withSession>[0] }) {
-  await input.sdk.session.promptAsync({
-    sessionID: input.sessionID,
-    noReply: true,
-    parts: [
-      {
-        type: "text",
-        text: "seed context",
-      },
-    ],
-  })
-
-  await expect
-    .poll(async () => {
-      const messages = await input.sdk.session
-        .messages({ sessionID: input.sessionID, limit: 1 })
-        .then((r) => r.data ?? [])
-      return messages.length
-    })
-    .toBeGreaterThan(0)
-}
-
 test("context panel can be opened from the prompt", async ({ page, sdk, gotoSession }) => {
   const title = `e2e smoke context ${Date.now()}`
 
   await withSession(sdk, title, async (session) => {
-    await seedContextSession({ sessionID: session.id, sdk })
+    await sdk.session.promptAsync({
+      sessionID: session.id,
+      noReply: true,
+      parts: [
+        {
+          type: "text",
+          text: "seed context",
+        },
+      ],
+    })
+
+    await expect
+      .poll(async () => {
+        const messages = await sdk.session.messages({ sessionID: session.id, limit: 1 }).then((r) => r.data ?? [])
+        return messages.length
+      })
+      .toBeGreaterThan(0)
 
     await gotoSession(session.id)
 
-    const trigger = contextButton(page)
-    await expect(trigger).toBeVisible()
-    await trigger.click()
+    const contextButton = page
+      .locator('[data-component="button"]')
+      .filter({ has: page.locator('[data-component="progress-circle"]').first() })
+      .first()
+
+    await expect(contextButton).toBeVisible()
+    await contextButton.click()
 
     const tabs = page.locator('[data-component="tabs"][data-variant="normal"]')
     await expect(tabs.getByRole("tab", { name: "Context" })).toBeVisible()
   })
 })
-
-test("context panel can be closed from the context tab close action", async ({ page, sdk, gotoSession }) => {
-  await withSession(sdk, `e2e context toggle ${Date.now()}`, async (session) => {
-    await seedContextSession({ sessionID: session.id, sdk })
-    await gotoSession(session.id)
-
-    await page.locator(promptSelector).click()
-
-    const trigger = contextButton(page)
-    await expect(trigger).toBeVisible()
-    await trigger.click()
-
-    const tabs = page.locator('[data-component="tabs"][data-variant="normal"]')
-    const context = tabs.getByRole("tab", { name: "Context" })
-    await expect(context).toBeVisible()
-
-    await page.getByRole("button", { name: "Close tab" }).first().click()
-    await expect(context).toHaveCount(0)
-  })
-})
-
-test("context panel can open file picker from context actions", async ({ page, sdk, gotoSession }) => {
-  await withSession(sdk, `e2e context tabs ${Date.now()}`, async (session) => {
-    await seedContextSession({ sessionID: session.id, sdk })
-    await gotoSession(session.id)
-
-    await page.locator(promptSelector).click()
-
-    const trigger = contextButton(page)
-    await expect(trigger).toBeVisible()
-    await trigger.click()
-
-    await expect(page.getByRole("tab", { name: "Context" })).toBeVisible()
-    await page.getByRole("button", { name: "Open file" }).first().click()
-
-    const dialog = page
-      .getByRole("dialog")
-      .filter({ has: page.getByPlaceholder(/search files/i) })
-      .first()
-    await expect(dialog).toBeVisible()
-
-    await page.keyboard.press("Escape")
-    await expect(dialog).toHaveCount(0)
-  })
-})

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

@@ -44,6 +44,9 @@ test("can send a prompt and receive a reply", async ({ page, sdk, gotoSession })
       )
 
       .toContain(token)
+
+    const reply = page.locator('[data-slot="session-turn-summary-section"]').filter({ hasText: token }).first()
+    await expect(reply).toBeVisible({ timeout: 90_000 })
   } finally {
     page.off("pageerror", onPageError)
     await sdk.session.delete({ sessionID }).catch(() => undefined)

packages/app/e2e/selectors.ts

@@ -10,11 +10,8 @@ export const settingsNotificationsAgentSelector = '[data-action="settings-notifi
 export const settingsNotificationsPermissionsSelector = '[data-action="settings-notifications-permissions"]'
 export const settingsNotificationsErrorsSelector = '[data-action="settings-notifications-errors"]'
 export const settingsSoundsAgentSelector = '[data-action="settings-sounds-agent"]'
-export const settingsSoundsAgentEnabledSelector = '[data-action="settings-sounds-agent-enabled"]'
 export const settingsSoundsPermissionsSelector = '[data-action="settings-sounds-permissions"]'
-export const settingsSoundsPermissionsEnabledSelector = '[data-action="settings-sounds-permissions-enabled"]'
 export const settingsSoundsErrorsSelector = '[data-action="settings-sounds-errors"]'
-export const settingsSoundsErrorsEnabledSelector = '[data-action="settings-sounds-errors-enabled"]'
 export const settingsUpdatesStartupSelector = '[data-action="settings-updates-startup"]'
 export const settingsReleaseNotesSelector = '[data-action="settings-release-notes"]'
 

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

@@ -10,26 +10,21 @@ async function seedConversation(input: {
   sessionID: string
   token: string
 }) {
-  const messages = async () =>
-    await input.sdk.session.messages({ sessionID: input.sessionID, limit: 100 }).then((r) => r.data ?? [])
-  const seeded = await messages()
-  const userIDs = new Set(seeded.filter((m) => m.info.role === "user").map((m) => m.info.id))
-
   const prompt = input.page.locator(promptSelector)
   await expect(prompt).toBeVisible()
-  await input.sdk.session.promptAsync({
-    sessionID: input.sessionID,
-    noReply: true,
-    parts: [{ type: "text", text: input.token }],
-  })
+  await prompt.click()
+  await input.page.keyboard.type(`Reply with exactly: ${input.token}`)
+  await input.page.keyboard.press("Enter")
 
   let userMessageID: string | undefined
   await expect
     .poll(
       async () => {
-        const users = (await messages()).filter(
+        const messages = await input.sdk.session
+          .messages({ sessionID: input.sessionID, limit: 50 })
+          .then((r) => r.data ?? [])
+        const users = messages.filter(
           (m) =>
-            !userIDs.has(m.info.id) &&
             m.info.role === "user" &&
             m.parts.filter((p) => p.type === "text").some((p) => p.text.includes(input.token)),
         )
@@ -38,14 +33,21 @@ async function seedConversation(input: {
         const user = users[users.length - 1]
         if (!user) return false
         userMessageID = user.info.id
-        return true
+
+        const assistantText = messages
+          .filter((m) => m.info.role === "assistant")
+          .flatMap((m) => m.parts)
+          .filter((p) => p.type === "text")
+          .map((p) => p.text)
+          .join("\n")
+
+        return assistantText.includes(input.token)
       },
-      { timeout: 90_000, intervals: [250, 500, 1_000] },
+      { timeout: 90_000 },
     )
     .toBe(true)
 
   if (!userMessageID) throw new Error("Expected a user message id")
-  await expect(input.page.locator(`[data-message-id="${userMessageID}"]`).first()).toBeVisible({ timeout: 30_000 })
   return { prompt, userMessageID }
 }
 

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

@@ -34,34 +34,21 @@ async function seedMessage(sdk: Sdk, sessionID: string) {
 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}`
+  const newTitle = `e2e renamed ${stamp}`
 
   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 input = page.locator(".session-scroller").locator(inlineInputSelector).first()
     await expect(input).toBeVisible()
-    await expect(input).toBeFocused()
-    await input.fill(renamedTitle)
-    await expect(input).toHaveValue(renamedTitle)
+    await input.fill(newTitle)
     await input.press("Enter")
 
-    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()).toContainText(newTitle)
   })
 })
 
@@ -129,14 +116,8 @@ test("session can be shared and unshared via header button", async ({ page, sdk,
     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()
-
-    await expect(shared.popoverBody.getByRole("button", { name: "Unpublish" }).first()).toBeVisible({
-      timeout: 30_000,
-    })
+    const { rightSection, popoverBody } = await openSharePopover(page)
+    await popoverBody.getByRole("button", { name: "Publish" }).first().click()
 
     await expect
       .poll(
@@ -148,14 +129,14 @@ test("session can be shared and unshared via header button", async ({ page, sdk,
       )
       .not.toBeUndefined()
 
-    const unpublish = shared.popoverBody.getByRole("button", { name: "Unpublish" }).first()
+    const copyButton = rightSection.locator('button[aria-label="Copy link"]').first()
+    await expect(copyButton).toBeVisible({ timeout: 30_000 })
+
+    const sharedPopover = await openSharePopover(page)
+    const unpublish = sharedPopover.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
       .poll(
         async () => {
@@ -166,8 +147,10 @@ test("session can be shared and unshared via header button", async ({ page, sdk,
       )
       .toBeUndefined()
 
-    const unshared = await openSharePopover(page)
-    await expect(unshared.popoverBody.getByRole("button", { name: "Publish" }).first()).toBeVisible({
+    await expect(copyButton).not.toBeVisible({ timeout: 30_000 })
+
+    const unsharedPopover = await openSharePopover(page)
+    await expect(unsharedPopover.popoverBody.getByRole("button", { name: "Publish" }).first()).toBeVisible({
       timeout: 30_000,
     })
   })

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

@@ -9,7 +9,6 @@ import {
   settingsNotificationsPermissionsSelector,
   settingsReleaseNotesSelector,
   settingsSoundsAgentSelector,
-  settingsSoundsAgentEnabledSelector,
   settingsSoundsErrorsSelector,
   settingsSoundsPermissionsSelector,
   settingsThemeSelector,
@@ -336,30 +335,6 @@ test("changing sound agent selection persists in localStorage", async ({ page, g
   expect(stored?.sounds?.agent).not.toBe("staplebops-01")
 })
 
-test("disabling agent sound disables sound selection", async ({ page, gotoSession }) => {
-  await gotoSession()
-
-  const dialog = await openSettings(page)
-  const select = dialog.locator(settingsSoundsAgentSelector)
-  const switchContainer = dialog.locator(settingsSoundsAgentEnabledSelector)
-  const trigger = select.locator('[data-slot="select-select-trigger"]')
-  await expect(select).toBeVisible()
-  await expect(switchContainer).toBeVisible()
-  await expect(trigger).toBeEnabled()
-
-  await switchContainer.locator('[data-slot="switch-control"]').click()
-  await page.waitForTimeout(100)
-
-  await expect(trigger).toBeDisabled()
-
-  const stored = await page.evaluate((key) => {
-    const raw = localStorage.getItem(key)
-    return raw ? JSON.parse(raw) : null
-  }, settingsKey)
-
-  expect(stored?.sounds?.agentEnabled).toBe(false)
-})
-
 test("changing permissions and errors sounds updates localStorage", async ({ page, gotoSession }) => {
   await gotoSession()
 

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/app",
-  "version": "1.1.64",
+  "version": "1.1.59",
   "description": "",
   "type": "module",
   "exports": {

packages/app/src/app.tsx

@@ -1,5 +1,5 @@
 import "@/index.css"
-import { ErrorBoundary, Suspense, lazy, type JSX, type ParentProps } from "solid-js"
+import { ErrorBoundary, Show, lazy, type ParentProps } from "solid-js"
 import { Router, Route, Navigate } from "@solidjs/router"
 import { MetaProvider } from "@solidjs/meta"
 import { Font } from "@opencode-ai/ui/font"
@@ -30,26 +30,12 @@ import { HighlightsProvider } from "@/context/highlights"
 import Layout from "@/pages/layout"
 import DirectoryLayout from "@/pages/directory-layout"
 import { ErrorPage } from "./pages/error"
+import { Suspense, JSX } from "solid-js"
+
 const Home = lazy(() => import("@/pages/home"))
 const Session = lazy(() => import("@/pages/session"))
 const Loading = () => <div class="size-full" />
 
-const HomeRoute = () => (
-  <Suspense fallback={<Loading />}>
-    <Home />
-  </Suspense>
-)
-
-const SessionRoute = () => (
-  <SessionProviders>
-    <Suspense fallback={<Loading />}>
-      <Session />
-    </Suspense>
-  </SessionProviders>
-)
-
-const SessionIndexRoute = () => <Navigate href="session" />
-
 function UiI18nBridge(props: ParentProps) {
   const language = useLanguage()
   return <I18nProvider value={{ locale: language.locale, t: language.t }}>{props.children}</I18nProvider>
@@ -66,71 +52,6 @@ function MarkedProviderWithNativeParser(props: ParentProps) {
   return <MarkedProvider nativeParser={platform.parseMarkdown}>{props.children}</MarkedProvider>
 }
 
-function AppShellProviders(props: ParentProps) {
-  return (
-    <SettingsProvider>
-      <PermissionProvider>
-        <LayoutProvider>
-          <NotificationProvider>
-            <ModelsProvider>
-              <CommandProvider>
-                <HighlightsProvider>
-                  <Layout>{props.children}</Layout>
-                </HighlightsProvider>
-              </CommandProvider>
-            </ModelsProvider>
-          </NotificationProvider>
-        </LayoutProvider>
-      </PermissionProvider>
-    </SettingsProvider>
-  )
-}
-
-function SessionProviders(props: ParentProps) {
-  return (
-    <TerminalProvider>
-      <FileProvider>
-        <PromptProvider>
-          <CommentsProvider>{props.children}</CommentsProvider>
-        </PromptProvider>
-      </FileProvider>
-    </TerminalProvider>
-  )
-}
-
-function RouterRoot(props: ParentProps<{ appChildren?: JSX.Element }>) {
-  return (
-    <AppShellProviders>
-      {props.appChildren}
-      {props.children}
-    </AppShellProviders>
-  )
-}
-
-const getStoredDefaultServerUrl = (platform: ReturnType<typeof usePlatform>) => {
-  if (platform.platform !== "web") return
-  const result = platform.getDefaultServerUrl?.()
-  if (result instanceof Promise) return
-  if (!result) return
-  return normalizeServerUrl(result)
-}
-
-const resolveDefaultServerUrl = (props: {
-  defaultUrl?: string
-  storedDefaultServerUrl?: string
-  hostname: string
-  origin: string
-  isDev: boolean
-  devHost?: string
-  devPort?: string
-}) => {
-  if (props.defaultUrl) return props.defaultUrl
-  if (props.storedDefaultServerUrl) return props.storedDefaultServerUrl
-  if (props.hostname.includes("opencode.ai")) return "http://localhost:4096"
-  if (props.isDev) return `http://${props.devHost ?? "localhost"}:${props.devPort ?? "4096"}`
-  return props.origin
-}
-
 export function AppBaseProviders(props: ParentProps) {
   return (
     <MetaProvider>
@@ -156,35 +77,89 @@ export function AppBaseProviders(props: ParentProps) {
 
 function ServerKey(props: ParentProps) {
   const server = useServer()
-  if (!server.url) return null
-  return props.children
+  return (
+    <Show when={server.url} keyed>
+      {props.children}
+    </Show>
+  )
 }
 
 export function AppInterface(props: { defaultUrl?: string; children?: JSX.Element; isSidecar?: boolean }) {
   const platform = usePlatform()
-  const storedDefaultServerUrl = getStoredDefaultServerUrl(platform)
-  const defaultServerUrl = resolveDefaultServerUrl({
-    defaultUrl: props.defaultUrl,
-    storedDefaultServerUrl,
-    hostname: location.hostname,
-    origin: window.location.origin,
-    isDev: import.meta.env.DEV,
-    devHost: import.meta.env.VITE_OPENCODE_SERVER_HOST,
-    devPort: import.meta.env.VITE_OPENCODE_SERVER_PORT,
-  })
+
+  const stored = (() => {
+    if (platform.platform !== "web") return
+    const result = platform.getDefaultServerUrl?.()
+    if (result instanceof Promise) return
+    if (!result) return
+    return normalizeServerUrl(result)
+  })()
+
+  const defaultServerUrl = () => {
+    if (props.defaultUrl) return props.defaultUrl
+    if (stored) return stored
+    if (location.hostname.includes("opencode.ai")) return "http://localhost:4096"
+    if (import.meta.env.DEV)
+      return `http://${import.meta.env.VITE_OPENCODE_SERVER_HOST ?? "localhost"}:${import.meta.env.VITE_OPENCODE_SERVER_PORT ?? "4096"}`
+
+    return window.location.origin
+  }
 
   return (
-    <ServerProvider defaultUrl={defaultServerUrl} isSidecar={props.isSidecar}>
+    <ServerProvider defaultUrl={defaultServerUrl()} isSidecar={props.isSidecar}>
       <ServerKey>
         <GlobalSDKProvider>
           <GlobalSyncProvider>
             <Router
-              root={(routerProps) => <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>}
+              root={(routerProps) => (
+                <SettingsProvider>
+                  <PermissionProvider>
+                    <LayoutProvider>
+                      <NotificationProvider>
+                        <ModelsProvider>
+                          <CommandProvider>
+                            <HighlightsProvider>
+                              <Layout>
+                                {props.children}
+                                {routerProps.children}
+                              </Layout>
+                            </HighlightsProvider>
+                          </CommandProvider>
+                        </ModelsProvider>
+                      </NotificationProvider>
+                    </LayoutProvider>
+                  </PermissionProvider>
+                </SettingsProvider>
+              )}
             >
-              <Route path="/" component={HomeRoute} />
+              <Route
+                path="/"
+                component={() => (
+                  <Suspense fallback={<Loading />}>
+                    <Home />
+                  </Suspense>
+                )}
+              />
               <Route path="/:dir" component={DirectoryLayout}>
-                <Route path="/" component={SessionIndexRoute} />
-                <Route path="/session/:id?" component={SessionRoute} />
+                <Route path="/" component={() => <Navigate href="session" />} />
+                <Route
+                  path="/session/:id?"
+                  component={(p) => (
+                    <Show when={p.params.id ?? "new"}>
+                      <TerminalProvider>
+                        <FileProvider>
+                          <PromptProvider>
+                            <CommentsProvider>
+                              <Suspense fallback={<Loading />}>
+                                <Session />
+                              </Suspense>
+                            </CommentsProvider>
+                          </PromptProvider>
+                        </FileProvider>
+                      </TerminalProvider>
+                    </Show>
+                  )}
+                />
               </Route>
             </Router>
           </GlobalSyncProvider>

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

@@ -10,6 +10,7 @@ import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { showToast } from "@opencode-ai/ui/toast"
+import { iife } from "@opencode-ai/util/iife"
 import { createMemo, Match, onCleanup, onMount, Switch } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { Link } from "@/components/link"
@@ -54,47 +55,6 @@ export function DialogConnectProvider(props: { provider: string }) {
     error: undefined as string | undefined,
   })
 
-  type Action =
-    | { type: "method.select"; index: number }
-    | { type: "method.reset" }
-    | { type: "auth.pending" }
-    | { type: "auth.complete"; authorization: ProviderAuthAuthorization }
-    | { type: "auth.error"; error: string }
-
-  function dispatch(action: Action) {
-    setStore(
-      produce((draft) => {
-        if (action.type === "method.select") {
-          draft.methodIndex = action.index
-          draft.authorization = undefined
-          draft.state = undefined
-          draft.error = undefined
-          return
-        }
-        if (action.type === "method.reset") {
-          draft.methodIndex = undefined
-          draft.authorization = undefined
-          draft.state = undefined
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.pending") {
-          draft.state = "pending"
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.complete") {
-          draft.state = "complete"
-          draft.authorization = action.authorization
-          draft.error = undefined
-          return
-        }
-        draft.state = "error"
-        draft.error = action.error
-      }),
-    )
-  }
-
   const method = createMemo(() => (store.methodIndex !== undefined ? methods().at(store.methodIndex!) : undefined))
 
   const methodLabel = (value?: { type?: string; label?: string }) => {
@@ -103,24 +63,6 @@ export function DialogConnectProvider(props: { provider: string }) {
     return value.label ?? ""
   }
 
-  function formatError(value: unknown, fallback: string): string {
-    if (value && typeof value === "object" && "data" in value) {
-      const data = (value as { data?: { message?: unknown } }).data
-      if (typeof data?.message === "string" && data.message) return data.message
-    }
-    if (value && typeof value === "object" && "error" in value) {
-      const nested = formatError((value as { error?: unknown }).error, "")
-      if (nested) return nested
-    }
-    if (value && typeof value === "object" && "message" in value) {
-      const message = (value as { message?: unknown }).message
-      if (typeof message === "string" && message) return message
-    }
-    if (value instanceof Error && value.message) return value.message
-    if (typeof value === "string" && value) return value
-    return fallback
-  }
-
   async function selectMethod(index: number) {
     if (timer.current !== undefined) {
       clearTimeout(timer.current)
@@ -128,10 +70,17 @@ export function DialogConnectProvider(props: { provider: string }) {
     }
 
     const method = methods()[index]
-    dispatch({ type: "method.select", index })
+    setStore(
+      produce((draft) => {
+        draft.methodIndex = index
+        draft.authorization = undefined
+        draft.state = undefined
+        draft.error = undefined
+      }),
+    )
 
     if (method.type === "oauth") {
-      dispatch({ type: "auth.pending" })
+      setStore("state", "pending")
       const start = Date.now()
       await globalSDK.client.provider.oauth
         .authorize(
@@ -151,15 +100,18 @@ export function DialogConnectProvider(props: { provider: string }) {
             timer.current = setTimeout(() => {
               timer.current = undefined
               if (!alive.value) return
-              dispatch({ type: "auth.complete", authorization: x.data! })
+              setStore("state", "complete")
+              setStore("authorization", x.data!)
             }, delay)
             return
           }
-          dispatch({ type: "auth.complete", authorization: x.data! })
+          setStore("state", "complete")
+          setStore("authorization", x.data!)
         })
         .catch((e) => {
           if (!alive.value) return
-          dispatch({ type: "auth.error", error: formatError(e, language.t("common.requestFailed")) })
+          setStore("state", "error")
+          setStore("error", String(e))
         })
     }
   }
@@ -177,6 +129,10 @@ export function DialogConnectProvider(props: { provider: string }) {
     if (methods().length === 1) {
       selectMethod(0)
     }
+    document.addEventListener("keydown", handleKey)
+    onCleanup(() => {
+      document.removeEventListener("keydown", handleKey)
+    })
   })
 
   async function complete() {
@@ -196,243 +152,17 @@ export function DialogConnectProvider(props: { provider: string }) {
       return
     }
     if (store.authorization) {
-      dispatch({ type: "method.reset" })
+      setStore("authorization", undefined)
+      setStore("methodIndex", undefined)
       return
     }
-    if (store.methodIndex !== undefined) {
-      dispatch({ type: "method.reset" })
+    if (store.methodIndex) {
+      setStore("methodIndex", undefined)
       return
     }
     dialog.show(() => <DialogSelectProvider />)
   }
 
-  function MethodSelection() {
-    return (
-      <>
-        <div class="text-14-regular text-text-base">
-          {language.t("provider.connect.selectMethod", { provider: provider().name })}
-        </div>
-        <div>
-          <List
-            ref={(ref) => {
-              listRef = ref
-            }}
-            items={methods}
-            key={(m) => m?.label}
-            onSelect={async (selected, index) => {
-              if (!selected) return
-              selectMethod(index)
-            }}
-          >
-            {(i) => (
-              <div class="w-full flex items-center gap-x-2">
-                <div class="w-4 h-2 rounded-[1px] bg-input-base shadow-xs-border-base flex items-center justify-center">
-                  <div class="w-2.5 h-0.5 ml-0 bg-icon-strong-base hidden" data-slot="list-item-extra-icon" />
-                </div>
-                <span>{methodLabel(i)}</span>
-              </div>
-            )}
-          </List>
-        </div>
-      </>
-    )
-  }
-
-  function ApiAuthView() {
-    const [formStore, setFormStore] = createStore({
-      value: "",
-      error: undefined as string | undefined,
-    })
-
-    async function handleSubmit(e: SubmitEvent) {
-      e.preventDefault()
-
-      const form = e.currentTarget as HTMLFormElement
-      const formData = new FormData(form)
-      const apiKey = formData.get("apiKey") as string
-
-      if (!apiKey?.trim()) {
-        setFormStore("error", language.t("provider.connect.apiKey.required"))
-        return
-      }
-
-      setFormStore("error", undefined)
-      await globalSDK.client.auth.set({
-        providerID: props.provider,
-        auth: {
-          type: "api",
-          key: apiKey,
-        },
-      })
-      await complete()
-    }
-
-    return (
-      <div class="flex flex-col gap-6">
-        <Switch>
-          <Match when={provider().id === "opencode"}>
-            <div class="flex flex-col gap-4">
-              <div class="text-14-regular text-text-base">{language.t("provider.connect.opencodeZen.line1")}</div>
-              <div class="text-14-regular text-text-base">{language.t("provider.connect.opencodeZen.line2")}</div>
-              <div class="text-14-regular text-text-base">
-                {language.t("provider.connect.opencodeZen.visit.prefix")}
-                <Link href="https://opencode.ai/zen" tabIndex={-1}>
-                  {language.t("provider.connect.opencodeZen.visit.link")}
-                </Link>
-                {language.t("provider.connect.opencodeZen.visit.suffix")}
-              </div>
-            </div>
-          </Match>
-          <Match when={true}>
-            <div class="text-14-regular text-text-base">
-              {language.t("provider.connect.apiKey.description", { provider: provider().name })}
-            </div>
-          </Match>
-        </Switch>
-        <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
-          <TextField
-            autofocus
-            type="text"
-            label={language.t("provider.connect.apiKey.label", { provider: provider().name })}
-            placeholder={language.t("provider.connect.apiKey.placeholder")}
-            name="apiKey"
-            value={formStore.value}
-            onChange={(v) => setFormStore("value", v)}
-            validationState={formStore.error ? "invalid" : undefined}
-            error={formStore.error}
-          />
-          <Button class="w-auto" type="submit" size="large" variant="primary">
-            {language.t("common.submit")}
-          </Button>
-        </form>
-      </div>
-    )
-  }
-
-  function OAuthCodeView() {
-    const [formStore, setFormStore] = createStore({
-      value: "",
-      error: undefined as string | undefined,
-    })
-
-    onMount(() => {
-      if (store.authorization?.method === "code" && store.authorization?.url) {
-        platform.openLink(store.authorization.url)
-      }
-    })
-
-    async function handleSubmit(e: SubmitEvent) {
-      e.preventDefault()
-
-      const form = e.currentTarget as HTMLFormElement
-      const formData = new FormData(form)
-      const code = formData.get("code") as string
-
-      if (!code?.trim()) {
-        setFormStore("error", language.t("provider.connect.oauth.code.required"))
-        return
-      }
-
-      setFormStore("error", undefined)
-      const result = await globalSDK.client.provider.oauth
-        .callback({
-          providerID: props.provider,
-          method: store.methodIndex,
-          code,
-        })
-        .then((value) => (value.error ? { ok: false as const, error: value.error } : { ok: true as const }))
-        .catch((error) => ({ ok: false as const, error }))
-      if (result.ok) {
-        await complete()
-        return
-      }
-      setFormStore("error", formatError(result.error, language.t("provider.connect.oauth.code.invalid")))
-    }
-
-    return (
-      <div class="flex flex-col gap-6">
-        <div class="text-14-regular text-text-base">
-          {language.t("provider.connect.oauth.code.visit.prefix")}
-          <Link href={store.authorization!.url}>{language.t("provider.connect.oauth.code.visit.link")}</Link>
-          {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
-        </div>
-        <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
-          <TextField
-            autofocus
-            type="text"
-            label={language.t("provider.connect.oauth.code.label", { method: method()?.label ?? "" })}
-            placeholder={language.t("provider.connect.oauth.code.placeholder")}
-            name="code"
-            value={formStore.value}
-            onChange={(v) => setFormStore("value", v)}
-            validationState={formStore.error ? "invalid" : undefined}
-            error={formStore.error}
-          />
-          <Button class="w-auto" type="submit" size="large" variant="primary">
-            {language.t("common.submit")}
-          </Button>
-        </form>
-      </div>
-    )
-  }
-
-  function OAuthAutoView() {
-    const code = createMemo(() => {
-      const instructions = store.authorization?.instructions
-      if (instructions?.includes(":")) {
-        return instructions.split(":")[1]?.trim()
-      }
-      return instructions
-    })
-
-    onMount(() => {
-      void (async () => {
-        if (store.authorization?.url) {
-          platform.openLink(store.authorization.url)
-        }
-
-        const result = await globalSDK.client.provider.oauth
-          .callback({
-            providerID: props.provider,
-            method: store.methodIndex,
-          })
-          .then((value) => (value.error ? { ok: false as const, error: value.error } : { ok: true as const }))
-          .catch((error) => ({ ok: false as const, error }))
-
-        if (!alive.value) return
-
-        if (!result.ok) {
-          const message = formatError(result.error, language.t("common.requestFailed"))
-          dispatch({ type: "auth.error", error: message })
-          return
-        }
-
-        await complete()
-      })()
-    })
-
-    return (
-      <div class="flex flex-col gap-6">
-        <div class="text-14-regular text-text-base">
-          {language.t("provider.connect.oauth.auto.visit.prefix")}
-          <Link href={store.authorization!.url}>{language.t("provider.connect.oauth.auto.visit.link")}</Link>
-          {language.t("provider.connect.oauth.auto.visit.suffix", { provider: provider().name })}
-        </div>
-        <TextField
-          label={language.t("provider.connect.oauth.auto.confirmationCode")}
-          class="font-mono"
-          value={code()}
-          readOnly
-          copyable
-        />
-        <div class="text-14-regular text-text-base flex items-center gap-4">
-          <Spinner />
-          <span>{language.t("provider.connect.status.waiting")}</span>
-        </div>
-      </div>
-    )
-  }
-
   return (
     <Dialog
       title={
@@ -458,42 +188,267 @@ export function DialogConnectProvider(props: { provider: string }) {
           </div>
         </div>
         <div class="px-2.5 pb-10 flex flex-col gap-6">
-          <div onKeyDown={handleKey} tabIndex={0} autofocus={store.methodIndex === undefined ? true : undefined}>
-            <Switch>
-              <Match when={store.methodIndex === undefined}>
-                <MethodSelection />
-              </Match>
-              <Match when={store.state === "pending"}>
-                <div class="text-14-regular text-text-base">
-                  <div class="flex items-center gap-x-2">
-                    <Spinner />
-                    <span>{language.t("provider.connect.status.inProgress")}</span>
-                  </div>
+          <Switch>
+            <Match when={store.methodIndex === undefined}>
+              <div class="text-14-regular text-text-base">
+                {language.t("provider.connect.selectMethod", { provider: provider().name })}
+              </div>
+              <div class="">
+                <List
+                  ref={(ref) => {
+                    listRef = ref
+                  }}
+                  items={methods}
+                  key={(m) => m?.label}
+                  onSelect={async (method, index) => {
+                    if (!method) return
+                    selectMethod(index)
+                  }}
+                >
+                  {(i) => (
+                    <div class="w-full flex items-center gap-x-2">
+                      <div class="w-4 h-2 rounded-[1px] bg-input-base shadow-xs-border-base flex items-center justify-center">
+                        <div class="w-2.5 h-0.5 ml-0 bg-icon-strong-base hidden" data-slot="list-item-extra-icon" />
+                      </div>
+                      <span>{methodLabel(i)}</span>
+                    </div>
+                  )}
+                </List>
+              </div>
+            </Match>
+            <Match when={store.state === "pending"}>
+              <div class="text-14-regular text-text-base">
+                <div class="flex items-center gap-x-2">
+                  <Spinner />
+                  <span>{language.t("provider.connect.status.inProgress")}</span>
                 </div>
-              </Match>
-              <Match when={store.state === "error"}>
-                <div class="text-14-regular text-text-base">
-                  <div class="flex items-center gap-x-2">
-                    <Icon name="circle-ban-sign" class="text-icon-critical-base" />
-                    <span>{language.t("provider.connect.status.failed", { error: store.error ?? "" })}</span>
-                  </div>
+              </div>
+            </Match>
+            <Match when={store.state === "error"}>
+              <div class="text-14-regular text-text-base">
+                <div class="flex items-center gap-x-2">
+                  <Icon name="circle-ban-sign" class="text-icon-critical-base" />
+                  <span>{language.t("provider.connect.status.failed", { error: store.error ?? "" })}</span>
                 </div>
-              </Match>
-              <Match when={method()?.type === "api"}>
-                <ApiAuthView />
-              </Match>
-              <Match when={method()?.type === "oauth"}>
-                <Switch>
-                  <Match when={store.authorization?.method === "code"}>
-                    <OAuthCodeView />
-                  </Match>
-                  <Match when={store.authorization?.method === "auto"}>
-                    <OAuthAutoView />
-                  </Match>
-                </Switch>
-              </Match>
-            </Switch>
-          </div>
+              </div>
+            </Match>
+            <Match when={method()?.type === "api"}>
+              {iife(() => {
+                const [formStore, setFormStore] = createStore({
+                  value: "",
+                  error: undefined as string | undefined,
+                })
+
+                async function handleSubmit(e: SubmitEvent) {
+                  e.preventDefault()
+
+                  const form = e.currentTarget as HTMLFormElement
+                  const formData = new FormData(form)
+                  const apiKey = formData.get("apiKey") as string
+
+                  if (!apiKey?.trim()) {
+                    setFormStore("error", language.t("provider.connect.apiKey.required"))
+                    return
+                  }
+
+                  setFormStore("error", undefined)
+                  await globalSDK.client.auth.set({
+                    providerID: props.provider,
+                    auth: {
+                      type: "api",
+                      key: apiKey,
+                    },
+                  })
+                  await complete()
+                }
+
+                return (
+                  <div class="flex flex-col gap-6">
+                    <Switch>
+                      <Match when={provider().id === "opencode"}>
+                        <div class="flex flex-col gap-4">
+                          <div class="text-14-regular text-text-base">
+                            {language.t("provider.connect.opencodeZen.line1")}
+                          </div>
+                          <div class="text-14-regular text-text-base">
+                            {language.t("provider.connect.opencodeZen.line2")}
+                          </div>
+                          <div class="text-14-regular text-text-base">
+                            {language.t("provider.connect.opencodeZen.visit.prefix")}
+                            <Link href="https://opencode.ai/zen" tabIndex={-1}>
+                              {language.t("provider.connect.opencodeZen.visit.link")}
+                            </Link>
+                            {language.t("provider.connect.opencodeZen.visit.suffix")}
+                          </div>
+                        </div>
+                      </Match>
+                      <Match when={true}>
+                        <div class="text-14-regular text-text-base">
+                          {language.t("provider.connect.apiKey.description", { provider: provider().name })}
+                        </div>
+                      </Match>
+                    </Switch>
+                    <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
+                      <TextField
+                        autofocus
+                        type="text"
+                        label={language.t("provider.connect.apiKey.label", { provider: provider().name })}
+                        placeholder={language.t("provider.connect.apiKey.placeholder")}
+                        name="apiKey"
+                        value={formStore.value}
+                        onChange={setFormStore.bind(null, "value")}
+                        validationState={formStore.error ? "invalid" : undefined}
+                        error={formStore.error}
+                      />
+                      <Button class="w-auto" type="submit" size="large" variant="primary">
+                        {language.t("common.submit")}
+                      </Button>
+                    </form>
+                  </div>
+                )
+              })}
+            </Match>
+            <Match when={method()?.type === "oauth"}>
+              <Switch>
+                <Match when={store.authorization?.method === "code"}>
+                  {iife(() => {
+                    const [formStore, setFormStore] = createStore({
+                      value: "",
+                      error: undefined as string | undefined,
+                    })
+
+                    onMount(() => {
+                      if (store.authorization?.method === "code" && store.authorization?.url) {
+                        platform.openLink(store.authorization.url)
+                      }
+                    })
+
+                    async function handleSubmit(e: SubmitEvent) {
+                      e.preventDefault()
+
+                      const form = e.currentTarget as HTMLFormElement
+                      const formData = new FormData(form)
+                      const code = formData.get("code") as string
+
+                      if (!code?.trim()) {
+                        setFormStore("error", language.t("provider.connect.oauth.code.required"))
+                        return
+                      }
+
+                      setFormStore("error", undefined)
+                      const result = await globalSDK.client.provider.oauth
+                        .callback({
+                          providerID: props.provider,
+                          method: store.methodIndex,
+                          code,
+                        })
+                        .then((value) =>
+                          value.error ? { ok: false as const, error: value.error } : { ok: true as const },
+                        )
+                        .catch((error) => ({ ok: false as const, error }))
+                      if (result.ok) {
+                        await complete()
+                        return
+                      }
+                      const message = result.error instanceof Error ? result.error.message : String(result.error)
+                      setFormStore("error", message || language.t("provider.connect.oauth.code.invalid"))
+                    }
+
+                    return (
+                      <div class="flex flex-col gap-6">
+                        <div class="text-14-regular text-text-base">
+                          {language.t("provider.connect.oauth.code.visit.prefix")}
+                          <Link href={store.authorization!.url}>
+                            {language.t("provider.connect.oauth.code.visit.link")}
+                          </Link>
+                          {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
+                        </div>
+                        <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
+                          <TextField
+                            autofocus
+                            type="text"
+                            label={language.t("provider.connect.oauth.code.label", { method: method()?.label ?? "" })}
+                            placeholder={language.t("provider.connect.oauth.code.placeholder")}
+                            name="code"
+                            value={formStore.value}
+                            onChange={setFormStore.bind(null, "value")}
+                            validationState={formStore.error ? "invalid" : undefined}
+                            error={formStore.error}
+                          />
+                          <Button class="w-auto" type="submit" size="large" variant="primary">
+                            {language.t("common.submit")}
+                          </Button>
+                        </form>
+                      </div>
+                    )
+                  })}
+                </Match>
+                <Match when={store.authorization?.method === "auto"}>
+                  {iife(() => {
+                    const code = createMemo(() => {
+                      const instructions = store.authorization?.instructions
+                      if (instructions?.includes(":")) {
+                        return instructions?.split(":")[1]?.trim()
+                      }
+                      return instructions
+                    })
+
+                    onMount(() => {
+                      void (async () => {
+                        if (store.authorization?.url) {
+                          platform.openLink(store.authorization.url)
+                        }
+
+                        const result = await globalSDK.client.provider.oauth
+                          .callback({
+                            providerID: props.provider,
+                            method: store.methodIndex,
+                          })
+                          .then((value) =>
+                            value.error ? { ok: false as const, error: value.error } : { ok: true as const },
+                          )
+                          .catch((error) => ({ ok: false as const, error }))
+
+                        if (!alive.value) return
+
+                        if (!result.ok) {
+                          const message = result.error instanceof Error ? result.error.message : String(result.error)
+                          setStore("state", "error")
+                          setStore("error", message)
+                          return
+                        }
+
+                        await complete()
+                      })()
+                    })
+
+                    return (
+                      <div class="flex flex-col gap-6">
+                        <div class="text-14-regular text-text-base">
+                          {language.t("provider.connect.oauth.auto.visit.prefix")}
+                          <Link href={store.authorization!.url}>
+                            {language.t("provider.connect.oauth.auto.visit.link")}
+                          </Link>
+                          {language.t("provider.connect.oauth.auto.visit.suffix", { provider: provider().name })}
+                        </div>
+                        <TextField
+                          label={language.t("provider.connect.oauth.auto.confirmationCode")}
+                          class="font-mono"
+                          value={code()}
+                          readOnly
+                          copyable
+                        />
+                        <div class="text-14-regular text-text-base flex items-center gap-4">
+                          <Spinner />
+                          <span>{language.t("provider.connect.status.waiting")}</span>
+                        </div>
+                      </div>
+                    )
+                  })}
+                </Match>
+              </Switch>
+            </Match>
+          </Switch>
         </div>
       </div>
     </Dialog>

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

@@ -6,7 +6,7 @@ import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { showToast } from "@opencode-ai/ui/toast"
 import { For } from "solid-js"
-import { createStore } from "solid-js/store"
+import { createStore, produce } from "solid-js/store"
 import { Link } from "@/components/link"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { useGlobalSync } from "@/context/global-sync"
@@ -16,147 +16,6 @@ import { DialogSelectProvider } from "./dialog-select-provider"
 const PROVIDER_ID = /^[a-z0-9][a-z0-9-_]*$/
 const OPENAI_COMPATIBLE = "@ai-sdk/openai-compatible"
 
-type Translator = ReturnType<typeof useLanguage>["t"]
-
-type ModelRow = {
-  id: string
-  name: string
-}
-
-type HeaderRow = {
-  key: string
-  value: string
-}
-
-type FormState = {
-  providerID: string
-  name: string
-  baseURL: string
-  apiKey: string
-  models: ModelRow[]
-  headers: HeaderRow[]
-  saving: boolean
-}
-
-type FormErrors = {
-  providerID: string | undefined
-  name: string | undefined
-  baseURL: string | undefined
-  models: Array<{ id?: string; name?: string }>
-  headers: Array<{ key?: string; value?: string }>
-}
-
-type ValidateArgs = {
-  form: FormState
-  t: Translator
-  disabledProviders: string[]
-  existingProviderIDs: Set<string>
-}
-
-function validateCustomProvider(input: ValidateArgs) {
-  const providerID = input.form.providerID.trim()
-  const name = input.form.name.trim()
-  const baseURL = input.form.baseURL.trim()
-  const apiKey = input.form.apiKey.trim()
-
-  const env = apiKey.match(/^\{env:([^}]+)\}$/)?.[1]?.trim()
-  const key = apiKey && !env ? apiKey : undefined
-
-  const idError = !providerID
-    ? input.t("provider.custom.error.providerID.required")
-    : !PROVIDER_ID.test(providerID)
-      ? input.t("provider.custom.error.providerID.format")
-      : undefined
-
-  const nameError = !name ? input.t("provider.custom.error.name.required") : undefined
-  const urlError = !baseURL
-    ? input.t("provider.custom.error.baseURL.required")
-    : !/^https?:\/\//.test(baseURL)
-      ? input.t("provider.custom.error.baseURL.format")
-      : undefined
-
-  const disabled = input.disabledProviders.includes(providerID)
-  const existsError = idError
-    ? undefined
-    : input.existingProviderIDs.has(providerID) && !disabled
-      ? input.t("provider.custom.error.providerID.exists")
-      : undefined
-
-  const seenModels = new Set<string>()
-  const modelErrors = input.form.models.map((m) => {
-    const id = m.id.trim()
-    const modelIdError = !id
-      ? input.t("provider.custom.error.required")
-      : seenModels.has(id)
-        ? input.t("provider.custom.error.duplicate")
-        : (() => {
-            seenModels.add(id)
-            return undefined
-          })()
-    const modelNameError = !m.name.trim() ? input.t("provider.custom.error.required") : undefined
-    return { id: modelIdError, name: modelNameError }
-  })
-  const modelsValid = modelErrors.every((m) => !m.id && !m.name)
-  const models = Object.fromEntries(input.form.models.map((m) => [m.id.trim(), { name: m.name.trim() }]))
-
-  const seenHeaders = new Set<string>()
-  const headerErrors = input.form.headers.map((h) => {
-    const key = h.key.trim()
-    const value = h.value.trim()
-
-    if (!key && !value) return {}
-    const keyError = !key
-      ? input.t("provider.custom.error.required")
-      : seenHeaders.has(key.toLowerCase())
-        ? input.t("provider.custom.error.duplicate")
-        : (() => {
-            seenHeaders.add(key.toLowerCase())
-            return undefined
-          })()
-    const valueError = !value ? input.t("provider.custom.error.required") : undefined
-    return { key: keyError, value: valueError }
-  })
-  const headersValid = headerErrors.every((h) => !h.key && !h.value)
-  const headers = Object.fromEntries(
-    input.form.headers
-      .map((h) => ({ key: h.key.trim(), value: h.value.trim() }))
-      .filter((h) => !!h.key && !!h.value)
-      .map((h) => [h.key, h.value]),
-  )
-
-  const errors: FormErrors = {
-    providerID: idError ?? existsError,
-    name: nameError,
-    baseURL: urlError,
-    models: modelErrors,
-    headers: headerErrors,
-  }
-
-  const ok = !idError && !existsError && !nameError && !urlError && modelsValid && headersValid
-  if (!ok) return { errors }
-
-  const options = {
-    baseURL,
-    ...(Object.keys(headers).length ? { headers } : {}),
-  }
-
-  return {
-    errors,
-    result: {
-      providerID,
-      name,
-      key,
-      config: {
-        npm: OPENAI_COMPATIBLE,
-        name,
-        ...(env ? { env: [env] } : {}),
-        options,
-        models,
-      },
-    },
-  }
-}
-
 type Props = {
   back?: "providers" | "close"
 }
@@ -167,7 +26,7 @@ export function DialogCustomProvider(props: Props) {
   const globalSDK = useGlobalSDK()
   const language = useLanguage()
 
-  const [form, setForm] = createStore<FormState>({
+  const [form, setForm] = createStore({
     providerID: "",
     name: "",
     baseURL: "",
@@ -177,12 +36,12 @@ export function DialogCustomProvider(props: Props) {
     saving: false,
   })
 
-  const [errors, setErrors] = createStore<FormErrors>({
-    providerID: undefined,
-    name: undefined,
-    baseURL: undefined,
-    models: [{}],
-    headers: [{}],
+  const [errors, setErrors] = createStore({
+    providerID: undefined as string | undefined,
+    name: undefined as string | undefined,
+    baseURL: undefined as string | undefined,
+    models: [{} as { id?: string; name?: string }],
+    headers: [{} as { key?: string; value?: string }],
   })
 
   const goBack = () => {
@@ -194,36 +53,169 @@ export function DialogCustomProvider(props: Props) {
   }
 
   const addModel = () => {
-    setForm("models", (v) => [...v, { id: "", name: "" }])
-    setErrors("models", (v) => [...v, {}])
+    setForm(
+      "models",
+      produce((draft) => {
+        draft.push({ id: "", name: "" })
+      }),
+    )
+    setErrors(
+      "models",
+      produce((draft) => {
+        draft.push({})
+      }),
+    )
   }
 
   const removeModel = (index: number) => {
     if (form.models.length <= 1) return
-    setForm("models", (v) => v.filter((_, i) => i !== index))
-    setErrors("models", (v) => v.filter((_, i) => i !== index))
+    setForm(
+      "models",
+      produce((draft) => {
+        draft.splice(index, 1)
+      }),
+    )
+    setErrors(
+      "models",
+      produce((draft) => {
+        draft.splice(index, 1)
+      }),
+    )
   }
 
   const addHeader = () => {
-    setForm("headers", (v) => [...v, { key: "", value: "" }])
-    setErrors("headers", (v) => [...v, {}])
+    setForm(
+      "headers",
+      produce((draft) => {
+        draft.push({ key: "", value: "" })
+      }),
+    )
+    setErrors(
+      "headers",
+      produce((draft) => {
+        draft.push({})
+      }),
+    )
   }
 
   const removeHeader = (index: number) => {
     if (form.headers.length <= 1) return
-    setForm("headers", (v) => v.filter((_, i) => i !== index))
-    setErrors("headers", (v) => v.filter((_, i) => i !== index))
+    setForm(
+      "headers",
+      produce((draft) => {
+        draft.splice(index, 1)
+      }),
+    )
+    setErrors(
+      "headers",
+      produce((draft) => {
+        draft.splice(index, 1)
+      }),
+    )
   }
 
   const validate = () => {
-    const output = validateCustomProvider({
-      form,
-      t: language.t,
-      disabledProviders: globalSync.data.config.disabled_providers ?? [],
-      existingProviderIDs: new Set(globalSync.data.provider.all.map((p) => p.id)),
+    const providerID = form.providerID.trim()
+    const name = form.name.trim()
+    const baseURL = form.baseURL.trim()
+    const apiKey = form.apiKey.trim()
+
+    const env = apiKey.match(/^\{env:([^}]+)\}$/)?.[1]?.trim()
+    const key = apiKey && !env ? apiKey : undefined
+
+    const idError = !providerID
+      ? language.t("provider.custom.error.providerID.required")
+      : !PROVIDER_ID.test(providerID)
+        ? language.t("provider.custom.error.providerID.format")
+        : undefined
+
+    const nameError = !name ? language.t("provider.custom.error.name.required") : undefined
+    const urlError = !baseURL
+      ? language.t("provider.custom.error.baseURL.required")
+      : !/^https?:\/\//.test(baseURL)
+        ? language.t("provider.custom.error.baseURL.format")
+        : undefined
+
+    const disabled = (globalSync.data.config.disabled_providers ?? []).includes(providerID)
+    const existingProvider = globalSync.data.provider.all.find((p) => p.id === providerID)
+    const existsError = idError
+      ? undefined
+      : existingProvider && !disabled
+        ? language.t("provider.custom.error.providerID.exists")
+        : undefined
+
+    const seenModels = new Set<string>()
+    const modelErrors = form.models.map((m) => {
+      const id = m.id.trim()
+      const modelIdError = !id
+        ? language.t("provider.custom.error.required")
+        : seenModels.has(id)
+          ? language.t("provider.custom.error.duplicate")
+          : (() => {
+              seenModels.add(id)
+              return undefined
+            })()
+      const modelNameError = !m.name.trim() ? language.t("provider.custom.error.required") : undefined
+      return { id: modelIdError, name: modelNameError }
     })
-    setErrors(output.errors)
-    return output.result
+    const modelsValid = modelErrors.every((m) => !m.id && !m.name)
+    const models = Object.fromEntries(form.models.map((m) => [m.id.trim(), { name: m.name.trim() }]))
+
+    const seenHeaders = new Set<string>()
+    const headerErrors = form.headers.map((h) => {
+      const key = h.key.trim()
+      const value = h.value.trim()
+
+      if (!key && !value) return {}
+      const keyError = !key
+        ? language.t("provider.custom.error.required")
+        : seenHeaders.has(key.toLowerCase())
+          ? language.t("provider.custom.error.duplicate")
+          : (() => {
+              seenHeaders.add(key.toLowerCase())
+              return undefined
+            })()
+      const valueError = !value ? language.t("provider.custom.error.required") : undefined
+      return { key: keyError, value: valueError }
+    })
+    const headersValid = headerErrors.every((h) => !h.key && !h.value)
+    const headers = Object.fromEntries(
+      form.headers
+        .map((h) => ({ key: h.key.trim(), value: h.value.trim() }))
+        .filter((h) => !!h.key && !!h.value)
+        .map((h) => [h.key, h.value]),
+    )
+
+    setErrors(
+      produce((draft) => {
+        draft.providerID = idError ?? existsError
+        draft.name = nameError
+        draft.baseURL = urlError
+        draft.models = modelErrors
+        draft.headers = headerErrors
+      }),
+    )
+
+    const ok = !idError && !existsError && !nameError && !urlError && modelsValid && headersValid
+    if (!ok) return
+
+    const options = {
+      baseURL,
+      ...(Object.keys(headers).length ? { headers } : {}),
+    }
+
+    return {
+      providerID,
+      name,
+      key,
+      config: {
+        npm: OPENAI_COMPATIBLE,
+        name,
+        ...(env ? { env: [env] } : {}),
+        options,
+        models,
+      },
+    }
   }
 
   const save = async (e: SubmitEvent) => {
@@ -305,7 +297,7 @@ export function DialogCustomProvider(props: Props) {
               placeholder={language.t("provider.custom.field.providerID.placeholder")}
               description={language.t("provider.custom.field.providerID.description")}
               value={form.providerID}
-              onChange={(v) => setForm("providerID", v)}
+              onChange={setForm.bind(null, "providerID")}
               validationState={errors.providerID ? "invalid" : undefined}
               error={errors.providerID}
             />
@@ -313,7 +305,7 @@ export function DialogCustomProvider(props: Props) {
               label={language.t("provider.custom.field.name.label")}
               placeholder={language.t("provider.custom.field.name.placeholder")}
               value={form.name}
-              onChange={(v) => setForm("name", v)}
+              onChange={setForm.bind(null, "name")}
               validationState={errors.name ? "invalid" : undefined}
               error={errors.name}
             />
@@ -321,7 +313,7 @@ export function DialogCustomProvider(props: Props) {
               label={language.t("provider.custom.field.baseURL.label")}
               placeholder={language.t("provider.custom.field.baseURL.placeholder")}
               value={form.baseURL}
-              onChange={(v) => setForm("baseURL", v)}
+              onChange={setForm.bind(null, "baseURL")}
               validationState={errors.baseURL ? "invalid" : undefined}
               error={errors.baseURL}
             />
@@ -330,7 +322,7 @@ export function DialogCustomProvider(props: Props) {
               placeholder={language.t("provider.custom.field.apiKey.placeholder")}
               description={language.t("provider.custom.field.apiKey.description")}
               value={form.apiKey}
-              onChange={(v) => setForm("apiKey", v)}
+              onChange={setForm.bind(null, "apiKey")}
             />
           </div>
 

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

@@ -33,8 +33,6 @@ export function DialogEditProject(props: { project: LocalProject }) {
     iconHover: false,
   })
 
-  let iconInput: HTMLInputElement | undefined
-
   function handleFileSelect(file: File) {
     if (!file.type.startsWith("image/")) return
     const reader = new FileReader()
@@ -74,35 +72,31 @@ export function DialogEditProject(props: { project: LocalProject }) {
   async function handleSubmit(e: SubmitEvent) {
     e.preventDefault()
 
-    await Promise.resolve()
-      .then(async () => {
-        setStore("saving", true)
-        const name = store.name.trim() === folderName() ? "" : store.name.trim()
-        const start = store.startup.trim()
+    setStore("saving", true)
+    const name = store.name.trim() === folderName() ? "" : store.name.trim()
+    const start = store.startup.trim()
 
-        if (props.project.id && props.project.id !== "global") {
-          await globalSDK.client.project.update({
-            projectID: props.project.id,
-            directory: props.project.worktree,
-            name,
-            icon: { color: store.color, override: store.iconUrl },
-            commands: { start },
-          })
-          globalSync.project.icon(props.project.worktree, store.iconUrl || undefined)
-          dialog.close()
-          return
-        }
+    if (props.project.id && props.project.id !== "global") {
+      await globalSDK.client.project.update({
+        projectID: props.project.id,
+        directory: props.project.worktree,
+        name,
+        icon: { color: store.color, override: store.iconUrl },
+        commands: { start },
+      })
+      globalSync.project.icon(props.project.worktree, store.iconUrl || undefined)
+      setStore("saving", false)
+      dialog.close()
+      return
+    }
 
-        globalSync.project.meta(props.project.worktree, {
-          name,
-          icon: { color: store.color, override: store.iconUrl || undefined },
-          commands: { start: start || undefined },
-        })
-        dialog.close()
-      })
-      .finally(() => {
-        setStore("saving", false)
-      })
+    globalSync.project.meta(props.project.worktree, {
+      name,
+      icon: { color: store.color, override: store.iconUrl || undefined },
+      commands: { start: start || undefined },
+    })
+    setStore("saving", false)
+    dialog.close()
   }
 
   return (
@@ -140,7 +134,7 @@ export function DialogEditProject(props: { project: LocalProject }) {
                     if (store.iconUrl && store.iconHover) {
                       clearIcon()
                     } else {
-                      iconInput?.click()
+                      document.getElementById("icon-upload")?.click()
                     }
                   }}
                 >
@@ -182,16 +176,7 @@ export function DialogEditProject(props: { project: LocalProject }) {
                   <Icon name="trash" size="large" class="text-icon-on-interactive-base drop-shadow-sm" />
                 </div>
               </div>
-              <input
-                id="icon-upload"
-                ref={(el) => {
-                  iconInput = el
-                }}
-                type="file"
-                accept="image/*"
-                class="hidden"
-                onChange={handleInputChange}
-              />
+              <input id="icon-upload" type="file" accept="image/*" class="hidden" onChange={handleInputChange} />
               <div class="flex flex-col gap-1.5 text-12-regular text-text-weak self-center">
                 <span>{language.t("dialog.project.edit.icon.hint")}</span>
                 <span>{language.t("dialog.project.edit.icon.recommended")}</span>

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

@@ -6,7 +6,6 @@ import { usePrompt } from "@/context/prompt"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
-import { showToast } from "@opencode-ai/ui/toast"
 import { extractPromptFromParts } from "@/utils/prompt"
 import type { TextPart as SDKTextPart } from "@opencode-ai/sdk/v2/client"
 import { base64Encode } from "@opencode-ai/util/encode"
@@ -67,23 +66,15 @@ export const DialogFork: Component = () => {
       attachmentName: language.t("common.attachment"),
     })
 
-    sdk.client.session
-      .fork({ sessionID, messageID: item.id })
-      .then((forked) => {
-        if (!forked.data) {
-          showToast({ title: language.t("common.requestFailed") })
-          return
-        }
-        dialog.close()
-        navigate(`/${base64Encode(sdk.directory)}/session/${forked.data.id}`)
-        requestAnimationFrame(() => {
-          prompt.set(restored)
-        })
-      })
-      .catch((err: unknown) => {
-        const message = err instanceof Error ? err.message : String(err)
-        showToast({ title: language.t("common.requestFailed"), description: message })
+    dialog.close()
+
+    sdk.client.session.fork({ sessionID, messageID: item.id }).then((forked) => {
+      if (!forked.data) return
+      navigate(`/${base64Encode(sdk.directory)}/session/${forked.data.id}`)
+      requestAnimationFrame(() => {
+        prompt.set(restored)
       })
+    })
   }
 
   return (

packages/app/src/components/dialog-manage-models.tsx

@@ -17,7 +17,6 @@ export const DialogManageModels: Component = () => {
   const handleConnectProvider = () => {
     dialog.show(() => <DialogSelectProvider />)
   }
-  const providerRank = (id: string) => popularProviders.indexOf(id)
 
   return (
     <Dialog
@@ -38,18 +37,19 @@ export const DialogManageModels: Component = () => {
         sortBy={(a, b) => a.name.localeCompare(b.name)}
         groupBy={(x) => x.provider.name}
         sortGroupsBy={(a, b) => {
-          const aRank = providerRank(a.items[0].provider.id)
-          const bRank = providerRank(b.items[0].provider.id)
-          const aPopular = aRank >= 0
-          const bPopular = bRank >= 0
-          if (aPopular && !bPopular) return -1
-          if (!aPopular && bPopular) return 1
-          return aRank - bRank
+          const aProvider = a.items[0].provider.id
+          const bProvider = b.items[0].provider.id
+          if (popularProviders.includes(aProvider) && !popularProviders.includes(bProvider)) return -1
+          if (!popularProviders.includes(aProvider) && popularProviders.includes(bProvider)) return 1
+          return popularProviders.indexOf(aProvider) - popularProviders.indexOf(bProvider)
         }}
         onSelect={(x) => {
           if (!x) return
-          const key = { modelID: x.id, providerID: x.provider.id }
-          local.model.setVisibility(key, !local.model.visible(key))
+          const visible = local.model.visible({
+            modelID: x.id,
+            providerID: x.provider.id,
+          })
+          local.model.setVisibility({ modelID: x.id, providerID: x.provider.id }, !visible)
         }}
       >
         {(i) => (
@@ -57,7 +57,12 @@ export const DialogManageModels: Component = () => {
             <span>{i.name}</span>
             <div onClick={(e) => e.stopPropagation()}>
               <Switch
-                checked={!!local.model.visible({ modelID: i.id, providerID: i.provider.id })}
+                checked={
+                  !!local.model.visible({
+                    modelID: i.id,
+                    providerID: i.provider.id,
+                  })
+                }
                 onChange={(checked) => {
                   local.model.setVisibility({ modelID: i.id, providerID: i.provider.id }, checked)
                 }}

packages/app/src/components/dialog-release-notes.tsx

@@ -1,4 +1,4 @@
-import { createSignal } from "solid-js"
+import { createSignal, createEffect, onMount, onCleanup } from "solid-js"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -40,6 +40,8 @@ export function DialogReleaseNotes(props: { highlights: Highlight[] }) {
     handleClose()
   }
 
+  let focusTrap: HTMLDivElement | undefined
+
   function handleKeyDown(e: KeyboardEvent) {
     if (e.key === "Escape") {
       e.preventDefault()
@@ -58,13 +60,27 @@ export function DialogReleaseNotes(props: { highlights: Highlight[] }) {
     }
   }
 
+  onMount(() => {
+    focusTrap?.focus()
+    document.addEventListener("keydown", handleKeyDown)
+    onCleanup(() => document.removeEventListener("keydown", handleKeyDown))
+  })
+
+  // Refocus the trap when index changes to ensure escape always works
+  createEffect(() => {
+    index() // track index
+    focusTrap?.focus()
+  })
+
   return (
     <Dialog
       size="large"
       fit
       class="w-[min(calc(100vw-40px),720px)] h-[min(calc(100vh-40px),400px)] -mt-20 min-h-0 overflow-hidden"
     >
-      <div class="flex flex-1 min-w-0 min-h-0" tabIndex={0} autofocus onKeyDown={handleKeyDown}>
+      {/* Hidden element to capture initial focus and handle escape */}
+      <div ref={focusTrap} tabindex="0" class="absolute opacity-0 pointer-events-none" />
+      <div class="flex flex-1 min-w-0 min-h-0">
         {/* Left side - Text content */}
         <div class="flex flex-col flex-1 min-w-0 p-8">
           {/* Top section - feature content (fixed position from top) */}

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

@@ -2,13 +2,13 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { List } from "@opencode-ai/ui/list"
-import type { ListRef } from "@opencode-ai/ui/list"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
 import fuzzysort from "fuzzysort"
 import { createMemo, createResource, createSignal } from "solid-js"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { useGlobalSync } from "@/context/global-sync"
 import { useLanguage } from "@/context/language"
+import type { ListRef } from "@opencode-ai/ui/list"
 
 interface DialogSelectDirectoryProps {
   title?: string
@@ -21,131 +21,157 @@ type Row = {
   search: string
 }
 
-function cleanInput(value: string) {
-  const first = (value ?? "").split(/\r?\n/)[0] ?? ""
-  return first.replace(/[\u0000-\u001F\u007F]/g, "").trim()
-}
+export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
+  const sync = useGlobalSync()
+  const sdk = useGlobalSDK()
+  const dialog = useDialog()
+  const language = useLanguage()
 
-function normalizePath(input: string) {
-  const v = input.replaceAll("\\", "/")
-  if (v.startsWith("//") && !v.startsWith("///")) return "//" + v.slice(2).replace(/\/+/g, "/")
-  return v.replace(/\/+/g, "/")
-}
+  const [filter, setFilter] = createSignal("")
 
-function normalizeDriveRoot(input: string) {
-  const v = normalizePath(input)
-  if (/^[A-Za-z]:$/.test(v)) return v + "/"
-  return v
-}
+  let list: ListRef | undefined
 
-function trimTrailing(input: string) {
-  const v = normalizeDriveRoot(input)
-  if (v === "/") return v
-  if (v === "//") return v
-  if (/^[A-Za-z]:\/$/.test(v)) return v
-  return v.replace(/\/+$/, "")
-}
+  const missingBase = createMemo(() => !(sync.data.path.home || sync.data.path.directory))
 
-function joinPath(base: string | undefined, rel: string) {
-  const b = trimTrailing(base ?? "")
-  const r = trimTrailing(rel).replace(/^\/+/, "")
-  if (!b) return r
-  if (!r) return b
-  if (b.endsWith("/")) return b + r
-  return b + "/" + r
-}
+  const [fallbackPath] = createResource(
+    () => (missingBase() ? true : undefined),
+    async () => {
+      return sdk.client.path
+        .get()
+        .then((x) => x.data)
+        .catch(() => undefined)
+    },
+    { initialValue: undefined },
+  )
 
-function rootOf(input: string) {
-  const v = normalizeDriveRoot(input)
-  if (v.startsWith("//")) return "//"
-  if (v.startsWith("/")) return "/"
-  if (/^[A-Za-z]:\//.test(v)) return v.slice(0, 3)
-  return ""
-}
+  const home = createMemo(() => sync.data.path.home || fallbackPath()?.home || "")
 
-function parentOf(input: string) {
-  const v = trimTrailing(input)
-  if (v === "/") return v
-  if (v === "//") return v
-  if (/^[A-Za-z]:\/$/.test(v)) return v
+  const start = createMemo(
+    () => sync.data.path.home || sync.data.path.directory || fallbackPath()?.home || fallbackPath()?.directory,
+  )
 
-  const i = v.lastIndexOf("/")
-  if (i <= 0) return "/"
-  if (i === 2 && /^[A-Za-z]:/.test(v)) return v.slice(0, 3)
-  return v.slice(0, i)
-}
+  const cache = new Map<string, Promise<Array<{ name: string; absolute: string }>>>()
 
-function modeOf(input: string) {
-  const raw = normalizeDriveRoot(input.trim())
-  if (!raw) return "relative" as const
-  if (raw.startsWith("~")) return "tilde" as const
-  if (rootOf(raw)) return "absolute" as const
-  return "relative" as const
-}
-
-function tildeOf(absolute: string, home: string) {
-  const full = trimTrailing(absolute)
-  if (!home) return ""
-
-  const hn = trimTrailing(home)
-  const lc = full.toLowerCase()
-  const hc = hn.toLowerCase()
-  if (lc === hc) return "~"
-  if (lc.startsWith(hc + "/")) return "~" + full.slice(hn.length)
-  return ""
-}
-
-function displayPath(path: string, input: string, home: string) {
-  const full = trimTrailing(path)
-  if (modeOf(input) === "absolute") return full
-  return tildeOf(full, home) || full
-}
-
-function toRow(absolute: string, home: string): Row {
-  const full = trimTrailing(absolute)
-  const tilde = tildeOf(full, home)
-  const withSlash = (value: string) => {
-    if (!value) return ""
-    if (value.endsWith("/")) return value
-    return value + "/"
+  const clean = (value: string) => {
+    const first = (value ?? "").split(/\r?\n/)[0] ?? ""
+    return first.replace(/[\u0000-\u001F\u007F]/g, "").trim()
   }
 
-  const search = Array.from(
-    new Set([full, withSlash(full), tilde, withSlash(tilde), getFilename(full)].filter(Boolean)),
-  ).join("\n")
-  return { absolute: full, search }
-}
+  function normalize(input: string) {
+    const v = input.replaceAll("\\", "/")
+    if (v.startsWith("//") && !v.startsWith("///")) return "//" + v.slice(2).replace(/\/+/g, "/")
+    return v.replace(/\/+/g, "/")
+  }
 
-function useDirectorySearch(args: {
-  sdk: ReturnType<typeof useGlobalSDK>
-  start: () => string | undefined
-  home: () => string
-}) {
-  const cache = new Map<string, Promise<Array<{ name: string; absolute: string }>>>()
-  let current = 0
+  function normalizeDriveRoot(input: string) {
+    const v = normalize(input)
+    if (/^[A-Za-z]:$/.test(v)) return v + "/"
+    return v
+  }
 
-  const scoped = (value: string) => {
-    const base = args.start()
+  function trimTrailing(input: string) {
+    const v = normalizeDriveRoot(input)
+    if (v === "/") return v
+    if (v === "//") return v
+    if (/^[A-Za-z]:\/$/.test(v)) return v
+    return v.replace(/\/+$/, "")
+  }
+
+  function join(base: string | undefined, rel: string) {
+    const b = trimTrailing(base ?? "")
+    const r = trimTrailing(rel).replace(/^\/+/, "")
+    if (!b) return r
+    if (!r) return b
+    if (b.endsWith("/")) return b + r
+    return b + "/" + r
+  }
+
+  function rootOf(input: string) {
+    const v = normalizeDriveRoot(input)
+    if (v.startsWith("//")) return "//"
+    if (v.startsWith("/")) return "/"
+    if (/^[A-Za-z]:\//.test(v)) return v.slice(0, 3)
+    return ""
+  }
+
+  function parentOf(input: string) {
+    const v = trimTrailing(input)
+    if (v === "/") return v
+    if (v === "//") return v
+    if (/^[A-Za-z]:\/$/.test(v)) return v
+
+    const i = v.lastIndexOf("/")
+    if (i <= 0) return "/"
+    if (i === 2 && /^[A-Za-z]:/.test(v)) return v.slice(0, 3)
+    return v.slice(0, i)
+  }
+
+  function modeOf(input: string) {
+    const raw = normalizeDriveRoot(input.trim())
+    if (!raw) return "relative" as const
+    if (raw.startsWith("~")) return "tilde" as const
+    if (rootOf(raw)) return "absolute" as const
+    return "relative" as const
+  }
+
+  function display(path: string, input: string) {
+    const full = trimTrailing(path)
+    if (modeOf(input) === "absolute") return full
+
+    return tildeOf(full) || full
+  }
+
+  function tildeOf(absolute: string) {
+    const full = trimTrailing(absolute)
+    const h = home()
+    if (!h) return ""
+
+    const hn = trimTrailing(h)
+    const lc = full.toLowerCase()
+    const hc = hn.toLowerCase()
+    if (lc === hc) return "~"
+    if (lc.startsWith(hc + "/")) return "~" + full.slice(hn.length)
+    return ""
+  }
+
+  function row(absolute: string): Row {
+    const full = trimTrailing(absolute)
+    const tilde = tildeOf(full)
+
+    const withSlash = (value: string) => {
+      if (!value) return ""
+      if (value.endsWith("/")) return value
+      return value + "/"
+    }
+
+    const search = Array.from(
+      new Set([full, withSlash(full), tilde, withSlash(tilde), getFilename(full)].filter(Boolean)),
+    ).join("\n")
+    return { absolute: full, search }
+  }
+
+  function scoped(value: string) {
+    const base = start()
     if (!base) return
 
     const raw = normalizeDriveRoot(value)
     if (!raw) return { directory: trimTrailing(base), path: "" }
 
-    const h = args.home()
-    if (raw === "~") return { directory: trimTrailing(h || base), path: "" }
-    if (raw.startsWith("~/")) return { directory: trimTrailing(h || base), path: raw.slice(2) }
+    const h = home()
+    if (raw === "~") return { directory: trimTrailing(h ?? base), path: "" }
+    if (raw.startsWith("~/")) return { directory: trimTrailing(h ?? base), path: raw.slice(2) }
 
     const root = rootOf(raw)
     if (root) return { directory: trimTrailing(root), path: raw.slice(root.length) }
     return { directory: trimTrailing(base), path: raw }
   }
 
-  const dirs = async (dir: string) => {
+  async function dirs(dir: string) {
     const key = trimTrailing(dir)
     const existing = cache.get(key)
     if (existing) return existing
 
-    const request = args.sdk.client.file
+    const request = sdk.client.file
       .list({ directory: key, path: "" })
       .then((x) => x.data ?? [])
       .catch(() => [])
@@ -162,34 +188,32 @@ function useDirectorySearch(args: {
     return request
   }
 
-  const match = async (dir: string, query: string, limit: number) => {
+  async function match(dir: string, query: string, limit: number) {
     const items = await dirs(dir)
     if (!query) return items.slice(0, limit).map((x) => x.absolute)
     return fuzzysort.go(query, items, { key: "name", limit }).map((x) => x.obj.absolute)
   }
 
-  return async (filter: string) => {
-    const token = ++current
-    const active = () => token === current
-
-    const value = cleanInput(filter)
+  const directories = async (filter: string) => {
+    const value = clean(filter)
     const scopedInput = scoped(value)
     if (!scopedInput) return [] as string[]
 
     const raw = normalizeDriveRoot(value)
     const isPath = raw.startsWith("~") || !!rootOf(raw) || raw.includes("/")
+
     const query = normalizeDriveRoot(scopedInput.path)
 
     const find = () =>
-      args.sdk.client.find
+      sdk.client.find
         .files({ directory: scopedInput.directory, query, type: "directory", limit: 50 })
         .then((x) => x.data ?? [])
         .catch(() => [])
 
     if (!isPath) {
       const results = await find()
-      if (!active()) return []
-      return results.map((rel) => joinPath(scopedInput.directory, rel)).slice(0, 50)
+
+      return results.map((rel) => join(scopedInput.directory, rel)).slice(0, 50)
     }
 
     const segments = query.replace(/^\/+/, "").split("/")
@@ -200,20 +224,17 @@ function useDirectorySearch(args: {
     const branch = 4
     let paths = [scopedInput.directory]
     for (const part of head) {
-      if (!active()) return []
       if (part === "..") {
         paths = paths.map(parentOf)
         continue
       }
 
       const next = (await Promise.all(paths.map((p) => match(p, part, branch)))).flat()
-      if (!active()) return []
       paths = Array.from(new Set(next)).slice(0, cap)
       if (paths.length === 0) return [] as string[]
     }
 
     const out = (await Promise.all(paths.map((p) => match(p, tail, 50)))).flat()
-    if (!active()) return []
     const deduped = Array.from(new Set(out))
     const base = raw.startsWith("~") ? trimTrailing(scopedInput.directory) : ""
     const expand = !raw.endsWith("/")
@@ -228,47 +249,13 @@ function useDirectorySearch(args: {
     if (!target) return deduped.slice(0, 50)
 
     const children = await match(target, "", 30)
-    if (!active()) return []
     const items = Array.from(new Set([...deduped, ...children]))
     return (base ? Array.from(new Set([base, ...items])) : items).slice(0, 50)
   }
-}
-
-export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
-  const sync = useGlobalSync()
-  const sdk = useGlobalSDK()
-  const dialog = useDialog()
-  const language = useLanguage()
-
-  const [filter, setFilter] = createSignal("")
-  let list: ListRef | undefined
-
-  const missingBase = createMemo(() => !(sync.data.path.home || sync.data.path.directory))
-  const [fallbackPath] = createResource(
-    () => (missingBase() ? true : undefined),
-    async () => {
-      return sdk.client.path
-        .get()
-        .then((x) => x.data)
-        .catch(() => undefined)
-    },
-    { initialValue: undefined },
-  )
-
-  const home = createMemo(() => sync.data.path.home || fallbackPath()?.home || "")
-  const start = createMemo(
-    () => sync.data.path.home || sync.data.path.directory || fallbackPath()?.home || fallbackPath()?.directory,
-  )
-
-  const directories = useDirectorySearch({
-    sdk,
-    home,
-    start,
-  })
 
   const items = async (value: string) => {
     const results = await directories(value)
-    return results.map((absolute) => toRow(absolute, home()))
+    return results.map(row)
   }
 
   function resolve(absolute: string) {
@@ -286,7 +273,7 @@ export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
         key={(x) => x.absolute}
         filterKeys={["search"]}
         ref={(r) => (list = r)}
-        onFilter={(value) => setFilter(cleanInput(value))}
+        onFilter={(value) => setFilter(clean(value))}
         onKeyEvent={(e, item) => {
           if (e.key !== "Tab") return
           if (e.shiftKey) return
@@ -295,7 +282,7 @@ export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
           e.preventDefault()
           e.stopPropagation()
 
-          const value = displayPath(item.absolute, filter(), home())
+          const value = display(item.absolute, filter())
           list?.setFilter(value.endsWith("/") ? value : value + "/")
         }}
         onSelect={(path) => {
@@ -304,7 +291,7 @@ export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
         }}
       >
         {(item) => {
-          const path = displayPath(item.absolute, filter(), home())
+          const path = display(item.absolute, filter())
           if (path === "~") {
             return (
               <div class="w-full flex items-center justify-between rounded-md">

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

@@ -36,223 +36,6 @@ type Entry = {
 
 type DialogSelectFileMode = "all" | "files"
 
-const ENTRY_LIMIT = 5
-const COMMON_COMMAND_IDS = [
-  "session.new",
-  "workspace.new",
-  "session.previous",
-  "session.next",
-  "terminal.toggle",
-  "review.toggle",
-] as const
-
-const uniqueEntries = (items: Entry[]) => {
-  const seen = new Set<string>()
-  const out: Entry[] = []
-  for (const item of items) {
-    if (seen.has(item.id)) continue
-    seen.add(item.id)
-    out.push(item)
-  }
-  return out
-}
-
-const createCommandEntry = (option: CommandOption, category: string): Entry => ({
-  id: "command:" + option.id,
-  type: "command",
-  title: option.title,
-  description: option.description,
-  keybind: option.keybind,
-  category,
-  option,
-})
-
-const createFileEntry = (path: string, category: string): Entry => ({
-  id: "file:" + path,
-  type: "file",
-  title: path,
-  category,
-  path,
-})
-
-const createSessionEntry = (
-  input: {
-    directory: string
-    id: string
-    title: string
-    description: string
-    archived?: number
-    updated?: number
-  },
-  category: string,
-): Entry => ({
-  id: `session:${input.directory}:${input.id}`,
-  type: "session",
-  title: input.title,
-  description: input.description,
-  category,
-  directory: input.directory,
-  sessionID: input.id,
-  archived: input.archived,
-  updated: input.updated,
-})
-
-function createCommandEntries(props: {
-  filesOnly: () => boolean
-  command: ReturnType<typeof useCommand>
-  language: ReturnType<typeof useLanguage>
-}) {
-  const allowed = createMemo(() => {
-    if (props.filesOnly()) return []
-    return props.command.options.filter(
-      (option) => !option.disabled && !option.id.startsWith("suggested.") && option.id !== "file.open",
-    )
-  })
-
-  const list = createMemo(() => {
-    const category = props.language.t("palette.group.commands")
-    return allowed().map((option) => createCommandEntry(option, category))
-  })
-
-  const picks = createMemo(() => {
-    const all = allowed()
-    const order = new Map<string, number>(COMMON_COMMAND_IDS.map((id, index) => [id, index]))
-    const picked = all.filter((option) => order.has(option.id))
-    const base = picked.length ? picked : all.slice(0, ENTRY_LIMIT)
-    const sorted = picked.length ? [...base].sort((a, b) => (order.get(a.id) ?? 0) - (order.get(b.id) ?? 0)) : base
-    const category = props.language.t("palette.group.commands")
-    return sorted.map((option) => createCommandEntry(option, category))
-  })
-
-  return { allowed, list, picks }
-}
-
-function createFileEntries(props: {
-  file: ReturnType<typeof useFile>
-  tabs: () => ReturnType<ReturnType<typeof useLayout>["tabs"]>
-  language: ReturnType<typeof useLanguage>
-}) {
-  const recent = createMemo(() => {
-    const all = props.tabs().all()
-    const active = props.tabs().active()
-    const order = active ? [active, ...all.filter((item) => item !== active)] : all
-    const seen = new Set<string>()
-    const category = props.language.t("palette.group.files")
-    const items: Entry[] = []
-
-    for (const item of order) {
-      const path = props.file.pathFromTab(item)
-      if (!path) continue
-      if (seen.has(path)) continue
-      seen.add(path)
-      items.push(createFileEntry(path, category))
-    }
-
-    return items.slice(0, ENTRY_LIMIT)
-  })
-
-  const root = createMemo(() => {
-    const category = props.language.t("palette.group.files")
-    const nodes = props.file.tree.children("")
-    const paths = nodes
-      .filter((node) => node.type === "file")
-      .map((node) => node.path)
-      .sort((a, b) => a.localeCompare(b))
-    return paths.slice(0, ENTRY_LIMIT).map((path) => createFileEntry(path, category))
-  })
-
-  return { recent, root }
-}
-
-function createSessionEntries(props: {
-  workspaces: () => string[]
-  label: (directory: string) => string
-  globalSDK: ReturnType<typeof useGlobalSDK>
-  language: ReturnType<typeof useLanguage>
-}) {
-  const state: {
-    token: number
-    inflight: Promise<Entry[]> | undefined
-    cached: Entry[] | undefined
-  } = {
-    token: 0,
-    inflight: undefined,
-    cached: undefined,
-  }
-
-  const sessions = (text: string) => {
-    const query = text.trim()
-    if (!query) {
-      state.token += 1
-      state.inflight = undefined
-      state.cached = undefined
-      return [] as Entry[]
-    }
-
-    if (state.cached) return state.cached
-    if (state.inflight) return state.inflight
-
-    const current = state.token
-    const dirs = props.workspaces()
-    if (dirs.length === 0) return [] as Entry[]
-
-    state.inflight = Promise.all(
-      dirs.map((directory) => {
-        const description = props.label(directory)
-        return props.globalSDK.client.session
-          .list({ directory, roots: true })
-          .then((x) =>
-            (x.data ?? [])
-              .filter((s) => !!s?.id)
-              .map((s) => ({
-                id: s.id,
-                title: s.title ?? props.language.t("command.session.new"),
-                description,
-                directory,
-                archived: s.time?.archived,
-                updated: s.time?.updated,
-              })),
-          )
-          .catch(
-            () =>
-              [] as {
-                id: string
-                title: string
-                description: string
-                directory: string
-                archived?: number
-                updated?: number
-              }[],
-          )
-      }),
-    )
-      .then((results) => {
-        if (state.token !== current) return [] as Entry[]
-        const seen = new Set<string>()
-        const category = props.language.t("command.category.session")
-        const next = results
-          .flat()
-          .filter((item) => {
-            const key = `${item.directory}:${item.id}`
-            if (seen.has(key)) return false
-            seen.add(key)
-            return true
-          })
-          .map((item) => createSessionEntry(item, category))
-        state.cached = next
-        return next
-      })
-      .catch(() => [] as Entry[])
-      .finally(() => {
-        state.inflight = undefined
-      })
-
-    return state.inflight
-  }
-
-  return { sessions }
-}
-
 export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFile?: (path: string) => void }) {
   const command = useCommand()
   const language = useLanguage()
@@ -269,8 +52,40 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
   const view = createMemo(() => layout.view(sessionKey))
   const state = { cleanup: undefined as (() => void) | void, committed: false }
   const [grouped, setGrouped] = createSignal(false)
-  const commandEntries = createCommandEntries({ filesOnly, command, language })
-  const fileEntries = createFileEntries({ file, tabs, language })
+  const common = [
+    "session.new",
+    "workspace.new",
+    "session.previous",
+    "session.next",
+    "terminal.toggle",
+    "review.toggle",
+  ]
+  const limit = 5
+
+  const allowed = createMemo(() => {
+    if (filesOnly()) return []
+    return command.options.filter(
+      (option) => !option.disabled && !option.id.startsWith("suggested.") && option.id !== "file.open",
+    )
+  })
+
+  const commandItem = (option: CommandOption): Entry => ({
+    id: "command:" + option.id,
+    type: "command",
+    title: option.title,
+    description: option.description,
+    keybind: option.keybind,
+    category: language.t("palette.group.commands"),
+    option,
+  })
+
+  const fileItem = (path: string): Entry => ({
+    id: "file:" + path,
+    type: "file",
+    title: path,
+    category: language.t("palette.group.files"),
+    path,
+  })
 
   const projectDirectory = createMemo(() => decode64(params.dir) ?? "")
   const project = createMemo(() => {
@@ -301,7 +116,136 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
     return `${kind} : ${name || path}`
   }
 
-  const { sessions } = createSessionEntries({ workspaces, label, globalSDK, language })
+  const sessionItem = (input: {
+    directory: string
+    id: string
+    title: string
+    description: string
+    archived?: number
+    updated?: number
+  }): Entry => ({
+    id: `session:${input.directory}:${input.id}`,
+    type: "session",
+    title: input.title,
+    description: input.description,
+    category: language.t("command.category.session"),
+    directory: input.directory,
+    sessionID: input.id,
+    archived: input.archived,
+    updated: input.updated,
+  })
+
+  const list = createMemo(() => allowed().map(commandItem))
+
+  const picks = createMemo(() => {
+    const all = allowed()
+    const order = new Map(common.map((id, index) => [id, index]))
+    const picked = all.filter((option) => order.has(option.id))
+    const base = picked.length ? picked : all.slice(0, limit)
+    const sorted = picked.length ? [...base].sort((a, b) => (order.get(a.id) ?? 0) - (order.get(b.id) ?? 0)) : base
+    return sorted.map(commandItem)
+  })
+
+  const recent = createMemo(() => {
+    const all = tabs().all()
+    const active = tabs().active()
+    const order = active ? [active, ...all.filter((item) => item !== active)] : all
+    const seen = new Set<string>()
+    const items: Entry[] = []
+
+    for (const item of order) {
+      const path = file.pathFromTab(item)
+      if (!path) continue
+      if (seen.has(path)) continue
+      seen.add(path)
+      items.push(fileItem(path))
+    }
+
+    return items.slice(0, limit)
+  })
+
+  const root = createMemo(() => {
+    const nodes = file.tree.children("")
+    const paths = nodes
+      .filter((node) => node.type === "file")
+      .map((node) => node.path)
+      .sort((a, b) => a.localeCompare(b))
+    return paths.slice(0, limit).map(fileItem)
+  })
+
+  const unique = (items: Entry[]) => {
+    const seen = new Set<string>()
+    const out: Entry[] = []
+    for (const item of items) {
+      if (seen.has(item.id)) continue
+      seen.add(item.id)
+      out.push(item)
+    }
+    return out
+  }
+
+  const sessionToken = { value: 0 }
+  let sessionInflight: Promise<Entry[]> | undefined
+  let sessionAll: Entry[] | undefined
+
+  const sessions = (text: string) => {
+    const query = text.trim()
+    if (!query) {
+      sessionToken.value += 1
+      sessionInflight = undefined
+      sessionAll = undefined
+      return [] as Entry[]
+    }
+
+    if (sessionAll) return sessionAll
+    if (sessionInflight) return sessionInflight
+
+    const current = sessionToken.value
+    const dirs = workspaces()
+    if (dirs.length === 0) return [] as Entry[]
+
+    sessionInflight = Promise.all(
+      dirs.map((directory) => {
+        const description = label(directory)
+        return globalSDK.client.session
+          .list({ directory, roots: true })
+          .then((x) =>
+            (x.data ?? [])
+              .filter((s) => !!s?.id)
+              .map((s) => ({
+                id: s.id,
+                title: s.title ?? language.t("command.session.new"),
+                description,
+                directory,
+                archived: s.time?.archived,
+                updated: s.time?.updated,
+              })),
+          )
+          .catch(() => [] as { id: string; title: string; description: string; directory: string; archived?: number }[])
+      }),
+    )
+      .then((results) => {
+        if (sessionToken.value !== current) return [] as Entry[]
+        const seen = new Set<string>()
+        const next = results
+          .flat()
+          .filter((item) => {
+            const key = `${item.directory}:${item.id}`
+            if (seen.has(key)) return false
+            seen.add(key)
+            return true
+          })
+          .map(sessionItem)
+        sessionAll = next
+        return next
+      })
+      .catch(() => [] as Entry[])
+      .finally(() => {
+        sessionInflight = undefined
+      })
+
+    return sessionInflight
+  }
 
   const items = async (text: string) => {
     const query = text.trim()
@@ -310,7 +254,7 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
     if (!query && filesOnly()) {
       const loaded = file.tree.state("")?.loaded
       const pending = loaded ? Promise.resolve() : file.tree.list("")
-      const next = uniqueEntries([...fileEntries.recent(), ...fileEntries.root()])
+      const next = unique([...recent(), ...root()])
 
       if (loaded || next.length > 0) {
         void pending
@@ -318,21 +262,19 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
       }
 
       await pending
-      return uniqueEntries([...fileEntries.recent(), ...fileEntries.root()])
+      return unique([...recent(), ...root()])
     }
 
-    if (!query) return [...commandEntries.picks(), ...fileEntries.recent()]
+    if (!query) return [...picks(), ...recent()]
 
     if (filesOnly()) {
       const files = await file.searchFiles(query)
-      const category = language.t("palette.group.files")
-      return files.map((path) => createFileEntry(path, category))
+      return files.map(fileItem)
     }
 
     const [files, nextSessions] = await Promise.all([file.searchFiles(query), Promise.resolve(sessions(query))])
-    const category = language.t("palette.group.files")
-    const entries = files.map((path) => createFileEntry(path, category))
-    return [...commandEntries.list(), ...nextSessions, ...entries]
+    const entries = files.map(fileItem)
+    return [...list(), ...nextSessions, ...entries]
   }
 
   const handleMove = (item: Entry | undefined) => {
@@ -347,9 +289,9 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
     tabs().open(value)
     file.load(path)
     if (!view().reviewPanel.opened()) view().reviewPanel.open()
+    layout.fileTree.open()
     layout.fileTree.setTab("all")
     props.onOpenFile?.(path)
-    tabs().setActive(value)
   }
 
   const handleSelect = (item: Entry | undefined) => {

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

@@ -6,13 +6,6 @@ import { List } from "@opencode-ai/ui/list"
 import { Switch } from "@opencode-ai/ui/switch"
 import { useLanguage } from "@/context/language"
 
-const statusLabels = {
-  connected: "mcp.status.connected",
-  failed: "mcp.status.failed",
-  needs_auth: "mcp.status.needs_auth",
-  disabled: "mcp.status.disabled",
-} as const
-
 export const DialogSelectMcp: Component = () => {
   const sync = useSync()
   const sdk = useSDK()
@@ -28,19 +21,15 @@ export const DialogSelectMcp: Component = () => {
   const toggle = async (name: string) => {
     if (loading()) return
     setLoading(name)
-    try {
-      const status = sync.data.mcp[name]
-      if (status?.status === "connected") {
-        await sdk.client.mcp.disconnect({ name })
-      } else {
-        await sdk.client.mcp.connect({ name })
-      }
-
-      const result = await sdk.client.mcp.status()
-      if (result.data) sync.set("mcp", result.data)
-    } finally {
-      setLoading(null)
+    const status = sync.data.mcp[name]
+    if (status?.status === "connected") {
+      await sdk.client.mcp.disconnect({ name })
+    } else {
+      await sdk.client.mcp.connect({ name })
     }
+    const result = await sdk.client.mcp.status()
+    if (result.data) sync.set("mcp", result.data)
+    setLoading(null)
   }
 
   const enabledCount = createMemo(() => items().filter((i) => i.status === "connected").length)
@@ -65,11 +54,6 @@ export const DialogSelectMcp: Component = () => {
         {(i) => {
           const mcpStatus = () => sync.data.mcp[i.name]
           const status = () => mcpStatus()?.status
-          const statusLabel = () => {
-            const key = status() ? statusLabels[status() as keyof typeof statusLabels] : undefined
-            if (!key) return
-            return language.t(key)
-          }
           const error = () => {
             const s = mcpStatus()
             return s?.status === "failed" ? s.error : undefined
@@ -80,8 +64,17 @@ export const DialogSelectMcp: Component = () => {
               <div class="flex flex-col gap-0.5 min-w-0">
                 <div class="flex items-center gap-2">
                   <span class="truncate">{i.name}</span>
-                  <Show when={statusLabel()}>
-                    <span class="text-11-regular text-text-weaker">{statusLabel()}</span>
+                  <Show when={status() === "connected"}>
+                    <span class="text-11-regular text-text-weaker">{language.t("mcp.status.connected")}</span>
+                  </Show>
+                  <Show when={status() === "failed"}>
+                    <span class="text-11-regular text-text-weaker">{language.t("mcp.status.failed")}</span>
+                  </Show>
+                  <Show when={status() === "needs_auth"}>
+                    <span class="text-11-regular text-text-weaker">{language.t("mcp.status.needs_auth")}</span>
+                  </Show>
+                  <Show when={status() === "disabled"}>
+                    <span class="text-11-regular text-text-weaker">{language.t("mcp.status.disabled")}</span>
                   </Show>
                   <Show when={loading() === i.name}>
                     <span class="text-11-regular text-text-weak">{language.t("common.loading.ellipsis")}</span>

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

@@ -6,7 +6,7 @@ import { List, type ListRef } from "@opencode-ai/ui/list"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { Tag } from "@opencode-ai/ui/tag"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { type Component, Show } from "solid-js"
+import { type Component, onCleanup, onMount, Show } from "solid-js"
 import { useLocal } from "@/context/local"
 import { popularProviders, useProviders } from "@/hooks/use-providers"
 import { DialogConnectProvider } from "./dialog-connect-provider"
@@ -21,17 +21,24 @@ export const DialogSelectModelUnpaid: Component = () => {
   const language = useLanguage()
 
   let listRef: ListRef | undefined
-  const handleKeyDown = (e: KeyboardEvent) => {
+  const handleKey = (e: KeyboardEvent) => {
     if (e.key === "Escape") return
     listRef?.onKeyDown(e)
   }
 
+  onMount(() => {
+    document.addEventListener("keydown", handleKey)
+    onCleanup(() => {
+      document.removeEventListener("keydown", handleKey)
+    })
+  })
+
   return (
     <Dialog
       title={language.t("dialog.model.select.title")}
       class="overflow-y-auto [&_[data-slot=dialog-body]]:overflow-visible [&_[data-slot=dialog-body]]:flex-none"
     >
-      <div class="flex flex-col gap-3 px-2.5" onKeyDown={handleKeyDown}>
+      <div class="flex flex-col gap-3 px-2.5">
         <div class="text-14-medium text-text-base px-2.5">{language.t("dialog.model.unpaid.freeModels.title")}</div>
         <List
           class="[&_[data-slot=list-scroll]]:overflow-visible"

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

@@ -1,5 +1,5 @@
 import { Popover as Kobalte } from "@kobalte/core/popover"
-import { Component, ComponentProps, createMemo, JSX, Show, ValidComponent } from "solid-js"
+import { Component, ComponentProps, createEffect, createMemo, JSX, onCleanup, Show, ValidComponent } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLocal } from "@/context/local"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -15,9 +15,6 @@ import { DialogManageModels } from "./dialog-manage-models"
 import { ModelTooltip } from "./model-tooltip"
 import { useLanguage } from "@/context/language"
 
-const isFree = (provider: string, cost: { input: number } | undefined) =>
-  provider === "opencode" && (!cost || cost.input === 0)
-
 const ModelList: Component<{
   provider?: string
   class?: string
@@ -57,7 +54,13 @@ const ModelList: Component<{
           class="w-full"
           placement="right-start"
           gutter={12}
-          value={<ModelTooltip model={item} latest={item.latest} free={isFree(item.provider.id, item.cost)} />}
+          value={
+            <ModelTooltip
+              model={item}
+              latest={item.latest}
+              free={item.provider.id === "opencode" && (!item.cost || item.cost.input === 0)}
+            />
+          }
         >
           {node}
         </Tooltip>
@@ -72,7 +75,7 @@ const ModelList: Component<{
       {(i) => (
         <div class="w-full flex items-center gap-x-2 text-13-regular">
           <span class="truncate">{i.name}</span>
-          <Show when={isFree(i.provider.id, i.cost)}>
+          <Show when={i.provider.id === "opencode" && (!i.cost || i.cost?.input === 0)}>
             <Tag>{language.t("model.tag.free")}</Tag>
           </Show>
           <Show when={i.latest}>
@@ -95,9 +98,13 @@ export function ModelSelectorPopover(props: {
   const [store, setStore] = createStore<{
     open: boolean
     dismiss: "escape" | "outside" | null
+    trigger?: HTMLElement
+    content?: HTMLElement
   }>({
     open: false,
     dismiss: null,
+    trigger: undefined,
+    content: undefined,
   })
   const dialog = useDialog()
 
@@ -112,6 +119,54 @@ export function ModelSelectorPopover(props: {
   }
   const language = useLanguage()
 
+  createEffect(() => {
+    if (!store.open) return
+
+    const inside = (node: Node | null | undefined) => {
+      if (!node) return false
+      const el = store.content
+      if (el && el.contains(node)) return true
+      const anchor = store.trigger
+      if (anchor && anchor.contains(node)) return true
+      return false
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return
+      setStore("dismiss", "escape")
+      setStore("open", false)
+      event.preventDefault()
+      event.stopPropagation()
+    }
+
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target
+      if (!(target instanceof Node)) return
+      if (inside(target)) return
+      setStore("dismiss", "outside")
+      setStore("open", false)
+    }
+
+    const onFocusIn = (event: FocusEvent) => {
+      if (!store.content) return
+      const target = event.target
+      if (!(target instanceof Node)) return
+      if (inside(target)) return
+      setStore("dismiss", "outside")
+      setStore("open", false)
+    }
+
+    window.addEventListener("keydown", onKeyDown, true)
+    window.addEventListener("pointerdown", onPointerDown, true)
+    window.addEventListener("focusin", onFocusIn, true)
+
+    onCleanup(() => {
+      window.removeEventListener("keydown", onKeyDown, true)
+      window.removeEventListener("pointerdown", onPointerDown, true)
+      window.removeEventListener("focusin", onFocusIn, true)
+    })
+  })
+
   return (
     <Kobalte
       open={store.open}
@@ -123,11 +178,12 @@ export function ModelSelectorPopover(props: {
       placement="top-start"
       gutter={8}
     >
-      <Kobalte.Trigger as={props.triggerAs ?? "div"} {...props.triggerProps}>
+      <Kobalte.Trigger ref={(el) => setStore("trigger", el)} as={props.triggerAs ?? "div"} {...props.triggerProps}>
         {props.children}
       </Kobalte.Trigger>
       <Kobalte.Portal>
         <Kobalte.Content
+          ref={(el) => setStore("content", el)}
           class="w-72 h-80 flex flex-col p-2 rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
           onEscapeKeyDown={(event) => {
             setStore("dismiss", "escape")

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

@@ -24,12 +24,6 @@ export const DialogSelectProvider: Component = () => {
 
   const popularGroup = () => language.t("dialog.provider.group.popular")
   const otherGroup = () => language.t("dialog.provider.group.other")
-  const customLabel = () => language.t("settings.providers.tag.custom")
-  const note = (id: string) => {
-    if (id === "anthropic") return language.t("dialog.provider.anthropic.note")
-    if (id === "openai") return language.t("dialog.provider.openai.note")
-    if (id.startsWith("github-copilot")) return language.t("dialog.provider.copilot.note")
-  }
 
   return (
     <Dialog title={language.t("command.provider.connect")} transition>
@@ -40,7 +34,7 @@ export const DialogSelectProvider: Component = () => {
         key={(x) => x?.id}
         items={() => {
           language.locale()
-          return [{ id: CUSTOM_ID, name: customLabel() }, ...providers.all()]
+          return [{ id: CUSTOM_ID, name: "Custom provider" }, ...providers.all()]
         }}
         filterKeys={["id", "name"]}
         groupBy={(x) => (popularProviders.includes(x.id) ? popularGroup() : otherGroup())}
@@ -76,7 +70,15 @@ export const DialogSelectProvider: Component = () => {
             <Show when={i.id === "opencode"}>
               <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
             </Show>
-            <Show when={note(i.id)}>{(value) => <div class="text-14-regular text-text-weak">{value()}</div>}</Show>
+            <Show when={i.id === "anthropic"}>
+              <div class="text-14-regular text-text-weak">{language.t("dialog.provider.anthropic.note")}</div>
+            </Show>
+            <Show when={i.id === "openai"}>
+              <div class="text-14-regular text-text-weak">{language.t("dialog.provider.openai.note")}</div>
+            </Show>
+            <Show when={i.id.startsWith("github-copilot")}>
+              <div class="text-14-regular text-text-weak">{language.t("dialog.provider.copilot.note")}</div>
+            </Show>
           </div>
         )}
       </List>

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

@@ -38,64 +38,6 @@ interface EditRowProps {
   onBlur: () => void
 }
 
-function showRequestError(language: ReturnType<typeof useLanguage>, err: unknown) {
-  showToast({
-    variant: "error",
-    title: language.t("common.requestFailed"),
-    description: err instanceof Error ? err.message : String(err),
-  })
-}
-
-function useDefaultServer(platform: ReturnType<typeof usePlatform>, language: ReturnType<typeof useLanguage>) {
-  const [defaultUrl, defaultUrlActions] = createResource(
-    async () => {
-      try {
-        const url = await platform.getDefaultServerUrl?.()
-        if (!url) return null
-        return normalizeServerUrl(url) ?? null
-      } catch (err) {
-        showRequestError(language, err)
-        return null
-      }
-    },
-    { initialValue: null },
-  )
-
-  const canDefault = createMemo(() => !!platform.getDefaultServerUrl && !!platform.setDefaultServerUrl)
-  const setDefault = async (url: string | null) => {
-    try {
-      await platform.setDefaultServerUrl?.(url)
-      defaultUrlActions.mutate(url)
-    } catch (err) {
-      showRequestError(language, err)
-    }
-  }
-
-  return { defaultUrl, canDefault, setDefault }
-}
-
-function useServerPreview(fetcher: typeof fetch) {
-  const looksComplete = (value: string) => {
-    const normalized = normalizeServerUrl(value)
-    if (!normalized) return false
-    const host = normalized.replace(/^https?:\/\//, "").split("/")[0]
-    if (!host) return false
-    if (host.includes("localhost") || host.startsWith("127.0.0.1")) return true
-    return host.includes(".") || host.includes(":")
-  }
-
-  const previewStatus = async (value: string, setStatus: (value: boolean | undefined) => void) => {
-    setStatus(undefined)
-    if (!looksComplete(value)) return
-    const normalized = normalizeServerUrl(value)
-    if (!normalized) return
-    const result = await checkServerHealth(normalized, fetcher)
-    setStatus(result.healthy)
-  }
-
-  return { previewStatus }
-}
-
 function AddRow(props: AddRowProps) {
   return (
     <div class="flex items-center px-4 min-h-14 py-3 min-w-0 flex-1">
@@ -173,10 +115,6 @@ export function DialogSelectServer() {
   const platform = usePlatform()
   const globalSDK = useGlobalSDK()
   const language = useLanguage()
-  const fetcher = platform.fetch ?? globalThis.fetch
-  const { defaultUrl, canDefault, setDefault } = useDefaultServer(platform, language)
-  const { previewStatus } = useServerPreview(fetcher)
-  let listRoot: HTMLDivElement | undefined
   const [store, setStore] = createStore({
     status: {} as Record<string, ServerHealth | undefined>,
     addServer: {
@@ -194,6 +132,43 @@ export function DialogSelectServer() {
       status: undefined as boolean | undefined,
     },
   })
+  const [defaultUrl, defaultUrlActions] = createResource(
+    async () => {
+      try {
+        const url = await platform.getDefaultServerUrl?.()
+        if (!url) return null
+        return normalizeServerUrl(url) ?? null
+      } catch (err) {
+        showToast({
+          variant: "error",
+          title: language.t("common.requestFailed"),
+          description: err instanceof Error ? err.message : String(err),
+        })
+        return null
+      }
+    },
+    { initialValue: null },
+  )
+  const canDefault = createMemo(() => !!platform.getDefaultServerUrl && !!platform.setDefaultServerUrl)
+  const fetcher = platform.fetch ?? globalThis.fetch
+
+  const looksComplete = (value: string) => {
+    const normalized = normalizeServerUrl(value)
+    if (!normalized) return false
+    const host = normalized.replace(/^https?:\/\//, "").split("/")[0]
+    if (!host) return false
+    if (host.includes("localhost") || host.startsWith("127.0.0.1")) return true
+    return host.includes(".") || host.includes(":")
+  }
+
+  const previewStatus = async (value: string, setStatus: (value: boolean | undefined) => void) => {
+    setStatus(undefined)
+    if (!looksComplete(value)) return
+    const normalized = normalizeServerUrl(value)
+    if (!normalized) return
+    const result = await checkServerHealth(normalized, fetcher)
+    setStatus(result.healthy)
+  }
 
   const resetAdd = () => {
     setStore("addServer", {
@@ -288,7 +263,7 @@ export function DialogSelectServer() {
   }
 
   const scrollListToBottom = () => {
-    const scroll = listRoot?.querySelector<HTMLDivElement>('[data-slot="list-scroll"]')
+    const scroll = document.querySelector<HTMLDivElement>('[data-component="list"] [data-slot="list-scroll"]')
     if (!scroll) return
     requestAnimationFrame(() => {
       scroll.scrollTop = scroll.scrollHeight
@@ -388,134 +363,158 @@ export function DialogSelectServer() {
   return (
     <Dialog title={language.t("dialog.server.title")}>
       <div class="flex flex-col gap-2">
-        <div ref={(el) => (listRoot = el)}>
-          <List
-            search={{ placeholder: language.t("dialog.server.search.placeholder"), autofocus: false }}
-            noInitialSelection
-            emptyMessage={language.t("dialog.server.empty")}
-            items={sortedItems}
-            key={(x) => x}
-            onSelect={(x) => {
-              if (x) select(x)
-            }}
-            onFilter={(value) => {
-              if (value && store.addServer.showForm && !store.addServer.adding) {
-                resetAdd()
-              }
-            }}
-            divider={true}
-            class="px-5 [&_[data-slot=list-search-wrapper]]:w-full [&_[data-slot=list-scroll]]:max-h-[300px] [&_[data-slot=list-scroll]]:overflow-y-auto [&_[data-slot=list-items]]:bg-surface-raised-base [&_[data-slot=list-items]]:rounded-md [&_[data-slot=list-item]]:h-14 [&_[data-slot=list-item]]:p-3 [&_[data-slot=list-item]]:!bg-transparent [&_[data-slot=list-item-add]]:px-0"
-            add={
-              store.addServer.showForm
-                ? {
-                    render: () => (
-                      <AddRow
-                        value={store.addServer.url}
-                        placeholder={language.t("dialog.server.add.placeholder")}
-                        adding={store.addServer.adding}
-                        error={store.addServer.error}
-                        status={store.addServer.status}
-                        onChange={handleAddChange}
-                        onKeyDown={handleAddKey}
-                        onBlur={blurAdd}
-                      />
-                    ),
-                  }
-                : undefined
+        <List
+          search={{ placeholder: language.t("dialog.server.search.placeholder"), autofocus: false }}
+          noInitialSelection
+          emptyMessage={language.t("dialog.server.empty")}
+          items={sortedItems}
+          key={(x) => x}
+          onSelect={(x) => {
+            if (x) select(x)
+          }}
+          onFilter={(value) => {
+            if (value && store.addServer.showForm && !store.addServer.adding) {
+              resetAdd()
             }
-          >
-            {(i) => {
-              return (
-                <div class="flex items-center gap-3 min-w-0 flex-1 group/item">
-                  <Show
-                    when={store.editServer.id !== i}
-                    fallback={
-                      <EditRow
-                        value={store.editServer.value}
-                        placeholder={language.t("dialog.server.add.placeholder")}
-                        busy={store.editServer.busy}
-                        error={store.editServer.error}
-                        status={store.editServer.status}
-                        onChange={handleEditChange}
-                        onKeyDown={(event) => handleEditKey(event, i)}
-                        onBlur={() => handleEdit(i, store.editServer.value)}
-                      />
-                    }
-                  >
-                    <ServerRow
-                      url={i}
-                      status={store.status[i]}
-                      dimmed={store.status[i]?.healthy === false}
-                      class="flex items-center gap-3 px-4 min-w-0 flex-1"
-                      badge={
-                        <Show when={defaultUrl() === i}>
-                          <span class="text-text-weak bg-surface-base text-14-regular px-1.5 rounded-xs">
-                            {language.t("dialog.server.status.default")}
-                          </span>
-                        </Show>
-                      }
+          }}
+          divider={true}
+          class="px-5 [&_[data-slot=list-search-wrapper]]:w-full [&_[data-slot=list-scroll]]:max-h-[300px] [&_[data-slot=list-scroll]]:overflow-y-auto [&_[data-slot=list-items]]:bg-surface-raised-base [&_[data-slot=list-items]]:rounded-md [&_[data-slot=list-item]]:h-14 [&_[data-slot=list-item]]:p-3 [&_[data-slot=list-item]]:!bg-transparent [&_[data-slot=list-item-add]]:px-0"
+          add={
+            store.addServer.showForm
+              ? {
+                  render: () => (
+                    <AddRow
+                      value={store.addServer.url}
+                      placeholder={language.t("dialog.server.add.placeholder")}
+                      adding={store.addServer.adding}
+                      error={store.addServer.error}
+                      status={store.addServer.status}
+                      onChange={handleAddChange}
+                      onKeyDown={handleAddKey}
+                      onBlur={blurAdd}
                     />
-                  </Show>
-                  <Show when={store.editServer.id !== i}>
-                    <div class="flex items-center justify-center gap-5 pl-4">
-                      <Show when={current() === i}>
-                        <p class="text-text-weak text-12-regular">{language.t("dialog.server.current")}</p>
+                  ),
+                }
+              : undefined
+          }
+        >
+          {(i) => {
+            return (
+              <div class="flex items-center gap-3 min-w-0 flex-1 group/item">
+                <Show
+                  when={store.editServer.id !== i}
+                  fallback={
+                    <EditRow
+                      value={store.editServer.value}
+                      placeholder={language.t("dialog.server.add.placeholder")}
+                      busy={store.editServer.busy}
+                      error={store.editServer.error}
+                      status={store.editServer.status}
+                      onChange={handleEditChange}
+                      onKeyDown={(event) => handleEditKey(event, i)}
+                      onBlur={() => handleEdit(i, store.editServer.value)}
+                    />
+                  }
+                >
+                  <ServerRow
+                    url={i}
+                    status={store.status[i]}
+                    dimmed={store.status[i]?.healthy === false}
+                    class="flex items-center gap-3 px-4 min-w-0 flex-1"
+                    badge={
+                      <Show when={defaultUrl() === i}>
+                        <span class="text-text-weak bg-surface-base text-14-regular px-1.5 rounded-xs">
+                          {language.t("dialog.server.status.default")}
+                        </span>
                       </Show>
+                    }
+                  />
+                </Show>
+                <Show when={store.editServer.id !== i}>
+                  <div class="flex items-center justify-center gap-5 pl-4">
+                    <Show when={current() === i}>
+                      <p class="text-text-weak text-12-regular">{language.t("dialog.server.current")}</p>
+                    </Show>
 
-                      <DropdownMenu>
-                        <DropdownMenu.Trigger
-                          as={IconButton}
-                          icon="dot-grid"
-                          variant="ghost"
-                          class="shrink-0 size-8 hover:bg-surface-base-hover data-[expanded]:bg-surface-base-active"
-                          onClick={(e: MouseEvent) => e.stopPropagation()}
-                          onPointerDown={(e: PointerEvent) => e.stopPropagation()}
-                        />
-                        <DropdownMenu.Portal>
-                          <DropdownMenu.Content class="mt-1">
+                    <DropdownMenu>
+                      <DropdownMenu.Trigger
+                        as={IconButton}
+                        icon="dot-grid"
+                        variant="ghost"
+                        class="shrink-0 size-8 hover:bg-surface-base-hover data-[expanded]:bg-surface-base-active"
+                        onClick={(e: MouseEvent) => e.stopPropagation()}
+                        onPointerDown={(e: PointerEvent) => e.stopPropagation()}
+                      />
+                      <DropdownMenu.Portal>
+                        <DropdownMenu.Content class="mt-1">
+                          <DropdownMenu.Item
+                            onSelect={() => {
+                              setStore("editServer", {
+                                id: i,
+                                value: i,
+                                error: "",
+                                status: store.status[i]?.healthy,
+                              })
+                            }}
+                          >
+                            <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.edit")}</DropdownMenu.ItemLabel>
+                          </DropdownMenu.Item>
+                          <Show when={canDefault() && defaultUrl() !== i}>
                             <DropdownMenu.Item
-                              onSelect={() => {
-                                setStore("editServer", {
-                                  id: i,
-                                  value: i,
-                                  error: "",
-                                  status: store.status[i]?.healthy,
-                                })
+                              onSelect={async () => {
+                                try {
+                                  await platform.setDefaultServerUrl?.(i)
+                                  defaultUrlActions.mutate(i)
+                                } catch (err) {
+                                  showToast({
+                                    variant: "error",
+                                    title: language.t("common.requestFailed"),
+                                    description: err instanceof Error ? err.message : String(err),
+                                  })
+                                }
                               }}
                             >
-                              <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.edit")}</DropdownMenu.ItemLabel>
+                              <DropdownMenu.ItemLabel>
+                                {language.t("dialog.server.menu.default")}
+                              </DropdownMenu.ItemLabel>
                             </DropdownMenu.Item>
-                            <Show when={canDefault() && defaultUrl() !== i}>
-                              <DropdownMenu.Item onSelect={() => setDefault(i)}>
-                                <DropdownMenu.ItemLabel>
-                                  {language.t("dialog.server.menu.default")}
-                                </DropdownMenu.ItemLabel>
-                              </DropdownMenu.Item>
-                            </Show>
-                            <Show when={canDefault() && defaultUrl() === i}>
-                              <DropdownMenu.Item onSelect={() => setDefault(null)}>
-                                <DropdownMenu.ItemLabel>
-                                  {language.t("dialog.server.menu.defaultRemove")}
-                                </DropdownMenu.ItemLabel>
-                              </DropdownMenu.Item>
-                            </Show>
-                            <DropdownMenu.Separator />
+                          </Show>
+                          <Show when={canDefault() && defaultUrl() === i}>
                             <DropdownMenu.Item
-                              onSelect={() => handleRemove(i)}
-                              class="text-text-on-critical-base hover:bg-surface-critical-weak"
+                              onSelect={async () => {
+                                try {
+                                  await platform.setDefaultServerUrl?.(null)
+                                  defaultUrlActions.mutate(null)
+                                } catch (err) {
+                                  showToast({
+                                    variant: "error",
+                                    title: language.t("common.requestFailed"),
+                                    description: err instanceof Error ? err.message : String(err),
+                                  })
+                                }
+                              }}
                             >
-                              <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.delete")}</DropdownMenu.ItemLabel>
+                              <DropdownMenu.ItemLabel>
+                                {language.t("dialog.server.menu.defaultRemove")}
+                              </DropdownMenu.ItemLabel>
                             </DropdownMenu.Item>
-                          </DropdownMenu.Content>
-                        </DropdownMenu.Portal>
-                      </DropdownMenu>
-                    </div>
-                  </Show>
-                </div>
-              )
-            }}
-          </List>
-        </div>
+                          </Show>
+                          <DropdownMenu.Separator />
+                          <DropdownMenu.Item
+                            onSelect={() => handleRemove(i)}
+                            class="text-text-on-critical-base hover:bg-surface-critical-weak"
+                          >
+                            <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.delete")}</DropdownMenu.ItemLabel>
+                          </DropdownMenu.Item>
+                        </DropdownMenu.Content>
+                      </DropdownMenu.Portal>
+                    </DropdownMenu>
+                  </div>
+                </Show>
+              </div>
+            )
+          }}
+        </List>
 
         <div class="px-5 pb-5">
           <Button

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

@@ -67,6 +67,15 @@ export const DialogSettings: Component = () => {
         <Tabs.Content value="models" class="no-scrollbar">
           <SettingsModels />
         </Tabs.Content>
+        {/* <Tabs.Content value="agents" class="no-scrollbar"> */}
+        {/*   <SettingsAgents /> */}
+        {/* </Tabs.Content> */}
+        {/* <Tabs.Content value="commands" class="no-scrollbar"> */}
+        {/*   <SettingsCommands /> */}
+        {/* </Tabs.Content> */}
+        {/* <Tabs.Content value="mcp" class="no-scrollbar"> */}
+        {/*   <SettingsMcp /> */}
+        {/* </Tabs.Content> */}
       </Tabs>
     </Dialog>
   )

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

@@ -15,7 +15,6 @@ import {
   Switch,
   untrack,
   type ComponentProps,
-  type JSXElement,
   type ParentProps,
 } from "solid-js"
 import { Dynamic } from "solid-js/web"
@@ -60,189 +59,6 @@ export function dirsToExpand(input: {
   return [...input.filter.dirs].filter((dir) => !input.expanded(dir))
 }
 
-const kindLabel = (kind: Kind) => {
-  if (kind === "add") return "A"
-  if (kind === "del") return "D"
-  return "M"
-}
-
-const kindTextColor = (kind: Kind) => {
-  if (kind === "add") return "color: var(--icon-diff-add-base)"
-  if (kind === "del") return "color: var(--icon-diff-delete-base)"
-  return "color: var(--icon-warning-active)"
-}
-
-const kindDotColor = (kind: Kind) => {
-  if (kind === "add") return "background-color: var(--icon-diff-add-base)"
-  if (kind === "del") return "background-color: var(--icon-diff-delete-base)"
-  return "background-color: var(--icon-warning-active)"
-}
-
-const visibleKind = (node: FileNode, kinds?: ReadonlyMap<string, Kind>, marks?: Set<string>) => {
-  const kind = kinds?.get(node.path)
-  if (!kind) return
-  if (!marks?.has(node.path)) return
-  return kind
-}
-
-const buildDragImage = (target: HTMLElement) => {
-  const icon = target.querySelector('[data-component="file-icon"]') ?? target.querySelector("svg")
-  const text = target.querySelector("span")
-  if (!icon || !text) return
-
-  const image = document.createElement("div")
-  image.className =
-    "flex items-center gap-x-2 px-2 py-1 bg-surface-raised-base rounded-md border border-border-base text-12-regular text-text-strong"
-  image.style.position = "absolute"
-  image.style.top = "-1000px"
-  image.innerHTML = (icon as SVGElement).outerHTML + (text as HTMLSpanElement).outerHTML
-  return image
-}
-
-const withFileDragImage = (event: DragEvent) => {
-  const image = buildDragImage(event.currentTarget as HTMLElement)
-  if (!image) return
-  document.body.appendChild(image)
-  event.dataTransfer?.setDragImage(image, 0, 12)
-  setTimeout(() => document.body.removeChild(image), 0)
-}
-
-const FileTreeNode = (
-  p: ParentProps &
-    ComponentProps<"div"> &
-    ComponentProps<"button"> & {
-      node: FileNode
-      level: number
-      active?: string
-      nodeClass?: string
-      draggable: boolean
-      kinds?: ReadonlyMap<string, Kind>
-      marks?: Set<string>
-      as?: "div" | "button"
-    },
-) => {
-  const [local, rest] = splitProps(p, [
-    "node",
-    "level",
-    "active",
-    "nodeClass",
-    "draggable",
-    "kinds",
-    "marks",
-    "as",
-    "children",
-    "class",
-    "classList",
-  ])
-  const kind = () => visibleKind(local.node, local.kinds, local.marks)
-  const active = () => !!kind() && !local.node.ignored
-  const color = () => {
-    const value = kind()
-    if (!value) return
-    return kindTextColor(value)
-  }
-
-  return (
-    <Dynamic
-      component={local.as ?? "div"}
-      classList={{
-        "w-full min-w-0 h-6 flex items-center justify-start gap-x-1.5 rounded-md px-1.5 py-0 text-left hover:bg-surface-raised-base-hover active:bg-surface-base-active transition-colors cursor-pointer": true,
-        "bg-surface-base-active": local.node.path === local.active,
-        ...(local.classList ?? {}),
-        [local.class ?? ""]: !!local.class,
-        [local.nodeClass ?? ""]: !!local.nodeClass,
-      }}
-      style={`padding-left: ${Math.max(0, 8 + local.level * 12 - (local.node.type === "file" ? 24 : 4))}px`}
-      draggable={local.draggable}
-      onDragStart={(event: DragEvent) => {
-        if (!local.draggable) return
-        event.dataTransfer?.setData("text/plain", `file:${local.node.path}`)
-        event.dataTransfer?.setData("text/uri-list", pathToFileUrl(local.node.path))
-        if (event.dataTransfer) event.dataTransfer.effectAllowed = "copy"
-        withFileDragImage(event)
-      }}
-      {...rest}
-    >
-      {local.children}
-      <span
-        classList={{
-          "flex-1 min-w-0 text-12-medium whitespace-nowrap truncate": true,
-          "text-text-weaker": local.node.ignored,
-          "text-text-weak": !local.node.ignored && !active(),
-        }}
-        style={active() ? color() : undefined}
-      >
-        {local.node.name}
-      </span>
-      {(() => {
-        const value = kind()
-        if (!value) return null
-        if (local.node.type === "file") {
-          return (
-            <span class="shrink-0 w-4 text-center text-12-medium" style={kindTextColor(value)}>
-              {kindLabel(value)}
-            </span>
-          )
-        }
-        return <div class="shrink-0 size-1.5 mr-1.5 rounded-full" style={kindDotColor(value)} />
-      })()}
-    </Dynamic>
-  )
-}
-
-const FileTreeNodeTooltip = (props: { enabled: boolean; node: FileNode; kind?: Kind; children: JSXElement }) => {
-  if (!props.enabled) return props.children
-
-  const parts = props.node.path.split("/")
-  const leaf = parts[parts.length - 1] ?? props.node.path
-  const head = parts.slice(0, -1).join("/")
-  const prefix = head ? `${head}/` : ""
-  const label =
-    props.kind === "add"
-      ? "Additions"
-      : props.kind === "del"
-        ? "Deletions"
-        : props.kind === "mix"
-          ? "Modifications"
-          : undefined
-
-  return (
-    <Tooltip
-      openDelay={2000}
-      placement="bottom-start"
-      class="w-full"
-      contentStyle={{ "max-width": "480px", width: "fit-content" }}
-      value={
-        <div class="flex items-center min-w-0 whitespace-nowrap text-12-regular">
-          <span
-            class="min-w-0 truncate text-text-invert-base"
-            style={{ direction: "rtl", "unicode-bidi": "plaintext" }}
-          >
-            {prefix}
-          </span>
-          <span class="shrink-0 text-text-invert-strong">{leaf}</span>
-          <Show when={label}>
-            {(text) => (
-              <>
-                <span class="mx-1 font-bold text-text-invert-strong">•</span>
-                <span class="shrink-0 text-text-invert-strong">{text()}</span>
-              </>
-            )}
-          </Show>
-          <Show when={props.node.type === "directory" && props.node.ignored}>
-            <>
-              <span class="mx-1 font-bold text-text-invert-strong">•</span>
-              <span class="shrink-0 text-text-invert-strong">Ignored</span>
-            </>
-          </Show>
-        </div>
-      }
-    >
-      {props.children}
-    </Tooltip>
-  )
-}
-
 export default function FileTree(props: {
   path: string
   class?: string
@@ -414,13 +230,178 @@ export default function FileTree(props: {
     return out
   })
 
+  const Node = (
+    p: ParentProps &
+      ComponentProps<"div"> &
+      ComponentProps<"button"> & {
+        node: FileNode
+        as?: "div" | "button"
+      },
+  ) => {
+    const [local, rest] = splitProps(p, ["node", "as", "children", "class", "classList"])
+    return (
+      <Dynamic
+        component={local.as ?? "div"}
+        classList={{
+          "w-full min-w-0 h-6 flex items-center justify-start gap-x-1.5 rounded-md px-1.5 py-0 text-left hover:bg-surface-raised-base-hover active:bg-surface-base-active transition-colors cursor-pointer": true,
+          "bg-surface-base-active": local.node.path === props.active,
+          ...(local.classList ?? {}),
+          [local.class ?? ""]: !!local.class,
+          [props.nodeClass ?? ""]: !!props.nodeClass,
+        }}
+        style={`padding-left: ${Math.max(0, 8 + level * 12 - (local.node.type === "file" ? 24 : 4))}px`}
+        draggable={draggable()}
+        onDragStart={(e: DragEvent) => {
+          if (!draggable()) return
+          e.dataTransfer?.setData("text/plain", `file:${local.node.path}`)
+          e.dataTransfer?.setData("text/uri-list", pathToFileUrl(local.node.path))
+          if (e.dataTransfer) e.dataTransfer.effectAllowed = "copy"
+
+          const dragImage = document.createElement("div")
+          dragImage.className =
+            "flex items-center gap-x-2 px-2 py-1 bg-surface-raised-base rounded-md border border-border-base text-12-regular text-text-strong"
+          dragImage.style.position = "absolute"
+          dragImage.style.top = "-1000px"
+
+          const icon =
+            (e.currentTarget as HTMLElement).querySelector('[data-component="file-icon"]') ??
+            (e.currentTarget as HTMLElement).querySelector("svg")
+          const text = (e.currentTarget as HTMLElement).querySelector("span")
+          if (icon && text) {
+            dragImage.innerHTML = (icon as SVGElement).outerHTML + (text as HTMLSpanElement).outerHTML
+          }
+
+          document.body.appendChild(dragImage)
+          e.dataTransfer?.setDragImage(dragImage, 0, 12)
+          setTimeout(() => document.body.removeChild(dragImage), 0)
+        }}
+        {...rest}
+      >
+        {local.children}
+        {(() => {
+          const kind = kinds()?.get(local.node.path)
+          const marked = marks()?.has(local.node.path) ?? false
+          const active = !!kind && marked && !local.node.ignored
+          const color =
+            kind === "add"
+              ? "color: var(--icon-diff-add-base)"
+              : kind === "del"
+                ? "color: var(--icon-diff-delete-base)"
+                : kind === "mix"
+                  ? "color: var(--icon-warning-active)"
+                  : undefined
+          return (
+            <span
+              classList={{
+                "flex-1 min-w-0 text-12-medium whitespace-nowrap truncate": true,
+                "text-text-weaker": local.node.ignored,
+                "text-text-weak": !local.node.ignored && !active,
+              }}
+              style={active ? color : undefined}
+            >
+              {local.node.name}
+            </span>
+          )
+        })()}
+        {(() => {
+          const kind = kinds()?.get(local.node.path)
+          if (!kind) return null
+          if (!marks()?.has(local.node.path)) return null
+
+          if (local.node.type === "file") {
+            const text = kind === "add" ? "A" : kind === "del" ? "D" : "M"
+            const color =
+              kind === "add"
+                ? "color: var(--icon-diff-add-base)"
+                : kind === "del"
+                  ? "color: var(--icon-diff-delete-base)"
+                  : "color: var(--icon-warning-active)"
+
+            return (
+              <span class="shrink-0 w-4 text-center text-12-medium" style={color}>
+                {text}
+              </span>
+            )
+          }
+
+          if (local.node.type === "directory") {
+            const color =
+              kind === "add"
+                ? "background-color: var(--icon-diff-add-base)"
+                : kind === "del"
+                  ? "background-color: var(--icon-diff-delete-base)"
+                  : "background-color: var(--icon-warning-active)"
+
+            return <div class="shrink-0 size-1.5 mr-1.5 rounded-full" style={color} />
+          }
+
+          return null
+        })()}
+      </Dynamic>
+    )
+  }
+
   return (
     <div class={`flex flex-col gap-0.5 ${props.class ?? ""}`}>
       <For each={nodes()}>
         {(node) => {
           const expanded = () => file.tree.state(node.path)?.expanded ?? false
           const deep = () => deeps().get(node.path) ?? -1
-          const kind = () => visibleKind(node, kinds(), marks())
+          const Wrapper = (p: ParentProps) => {
+            if (!tooltip()) return p.children
+
+            const parts = node.path.split("/")
+            const leaf = parts[parts.length - 1] ?? node.path
+            const head = parts.slice(0, -1).join("/")
+            const prefix = head ? `${head}/` : ""
+
+            const kind = () => kinds()?.get(node.path)
+            const label = () => {
+              const k = kind()
+              if (!k) return
+              if (k === "add") return "Additions"
+              if (k === "del") return "Deletions"
+              return "Modifications"
+            }
+
+            const ignored = () => node.type === "directory" && node.ignored
+
+            return (
+              <Tooltip
+                openDelay={2000}
+                placement="bottom-start"
+                class="w-full"
+                contentStyle={{ "max-width": "480px", width: "fit-content" }}
+                value={
+                  <div class="flex items-center min-w-0 whitespace-nowrap text-12-regular">
+                    <span
+                      class="min-w-0 truncate text-text-invert-base"
+                      style={{ direction: "rtl", "unicode-bidi": "plaintext" }}
+                    >
+                      {prefix}
+                    </span>
+                    <span class="shrink-0 text-text-invert-strong">{leaf}</span>
+                    <Show when={label()}>
+                      {(t: () => string) => (
+                        <>
+                          <span class="mx-1 font-bold text-text-invert-strong">•</span>
+                          <span class="shrink-0 text-text-invert-strong">{t()}</span>
+                        </>
+                      )}
+                    </Show>
+                    <Show when={ignored()}>
+                      <>
+                        <span class="mx-1 font-bold text-text-invert-strong">•</span>
+                        <span class="shrink-0 text-text-invert-strong">Ignored</span>
+                      </>
+                    </Show>
+                  </div>
+                }
+              >
+                {p.children}
+              </Tooltip>
+            )
+          }
 
           return (
             <Switch>
@@ -434,21 +415,13 @@ export default function FileTree(props: {
                   onOpenChange={(open) => (open ? file.tree.expand(node.path) : file.tree.collapse(node.path))}
                 >
                   <Collapsible.Trigger>
-                    <FileTreeNodeTooltip enabled={tooltip()} node={node} kind={kind()}>
-                      <FileTreeNode
-                        node={node}
-                        level={level}
-                        active={props.active}
-                        nodeClass={props.nodeClass}
-                        draggable={draggable()}
-                        kinds={kinds()}
-                        marks={marks()}
-                      >
+                    <Wrapper>
+                      <Node node={node}>
                         <div class="size-4 flex items-center justify-center text-icon-weak">
                           <Icon name={expanded() ? "chevron-down" : "chevron-right"} size="small" />
                         </div>
-                      </FileTreeNode>
-                    </FileTreeNodeTooltip>
+                      </Node>
+                    </Wrapper>
                   </Collapsible.Trigger>
                   <Collapsible.Content class="relative pt-0.5">
                     <div
@@ -478,23 +451,12 @@ export default function FileTree(props: {
                 </Collapsible>
               </Match>
               <Match when={node.type === "file"}>
-                <FileTreeNodeTooltip enabled={tooltip()} node={node} kind={kind()}>
-                  <FileTreeNode
-                    node={node}
-                    level={level}
-                    active={props.active}
-                    nodeClass={props.nodeClass}
-                    draggable={draggable()}
-                    kinds={kinds()}
-                    marks={marks()}
-                    as="button"
-                    type="button"
-                    onClick={() => props.onFileClick?.(node)}
-                  >
+                <Wrapper>
+                  <Node node={node} as="button" type="button" onClick={() => props.onFileClick?.(node)}>
                     <div class="w-4 shrink-0" />
                     <FileIcon node={node} class="text-icon-weak size-4" />
-                  </FileTreeNode>
-                </FileTreeNodeTooltip>
+                  </Node>
+                </Wrapper>
               </Match>
             </Switch>
           )

packages/app/src/components/link.tsx

@@ -1,26 +1,17 @@
 import { ComponentProps, splitProps } from "solid-js"
 import { usePlatform } from "@/context/platform"
 
-export interface LinkProps extends Omit<ComponentProps<"a">, "href"> {
+export interface LinkProps extends ComponentProps<"button"> {
   href: string
 }
 
 export function Link(props: LinkProps) {
   const platform = usePlatform()
-  const [local, rest] = splitProps(props, ["href", "children", "class"])
+  const [local, rest] = splitProps(props, ["href", "children"])
 
   return (
-    <a
-      href={local.href}
-      class={`text-text-strong underline ${local.class ?? ""}`}
-      onClick={(event) => {
-        if (!local.href) return
-        event.preventDefault()
-        platform.openLink(local.href)
-      }}
-      {...rest}
-    >
+    <button class="text-text-strong underline" onClick={() => platform.openLink(local.href)} {...rest}>
       {local.children}
-    </a>
+    </button>
   )
 }

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

@@ -158,13 +158,14 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     const wantsReview = item.commentOrigin === "review" || (item.commentOrigin !== "file" && commentInReview(item.path))
     if (wantsReview) {
       if (!view().reviewPanel.opened()) view().reviewPanel.open()
+      layout.fileTree.open()
       layout.fileTree.setTab("changes")
-      tabs().setActive("review")
       requestAnimationFrame(() => comments.setFocus(focus))
       return
     }
 
     if (!view().reviewPanel.opened()) view().reviewPanel.open()
+    layout.fileTree.open()
     layout.fileTree.setTab("all")
     const tab = files.tab(item.path)
     tabs().open(tab)
@@ -276,47 +277,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
   const isFocused = createFocusSignal(() => editorRef)
 
-  const closePopover = () => setStore("popover", null)
-
-  const resetHistoryNavigation = (force = false) => {
-    if (!force && (store.historyIndex < 0 || store.applyingHistory)) return
-    setStore("historyIndex", -1)
-    setStore("savedPrompt", null)
-  }
-
-  const clearEditor = () => {
-    editorRef.innerHTML = ""
-  }
-
-  const setEditorText = (text: string) => {
-    clearEditor()
-    editorRef.textContent = text
-  }
-
-  const focusEditorEnd = () => {
-    requestAnimationFrame(() => {
-      editorRef.focus()
-      const range = document.createRange()
-      const selection = window.getSelection()
-      range.selectNodeContents(editorRef)
-      range.collapse(false)
-      selection?.removeAllRanges()
-      selection?.addRange(range)
-    })
-  }
-
-  const currentCursor = () => {
-    const selection = window.getSelection()
-    if (!selection || selection.rangeCount === 0 || !editorRef.contains(selection.anchorNode)) return null
-    return getCursorPosition(editorRef)
-  }
-
-  const renderEditorWithCursor = (parts: Prompt) => {
-    const cursor = currentCursor()
-    renderEditor(parts)
-    if (cursor !== null) setCursorPosition(editorRef, cursor)
-  }
-
   createEffect(() => {
     params.id
     if (params.id) return
@@ -330,7 +290,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   const isImeComposing = (event: KeyboardEvent) => event.isComposing || composing() || event.keyCode === 229
 
   createEffect(() => {
-    if (!isFocused()) closePopover()
+    if (!isFocused()) setStore("popover", null)
   })
 
   // Safety: reset composing state on focus change to prevent stuck state
@@ -344,7 +304,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       .filter((agent) => !agent.hidden && agent.mode !== "primary")
       .map((agent): AtOption => ({ type: "agent", name: agent.name, display: agent.name })),
   )
-  const agentNames = createMemo(() => local.agent.list().map((agent) => agent.name))
 
   const handleAtSelect = (option: AtOption | undefined) => {
     if (!option) return
@@ -422,17 +381,26 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
   const handleSlashSelect = (cmd: SlashCommand | undefined) => {
     if (!cmd) return
-    closePopover()
+    setStore("popover", null)
 
     if (cmd.type === "custom") {
       const text = `/${cmd.trigger} `
-      setEditorText(text)
+      editorRef.innerHTML = ""
+      editorRef.textContent = text
       prompt.set([{ type: "text", content: text, start: 0, end: text.length }], text.length)
-      focusEditorEnd()
+      requestAnimationFrame(() => {
+        editorRef.focus()
+        const range = document.createRange()
+        const sel = window.getSelection()
+        range.selectNodeContents(editorRef)
+        range.collapse(false)
+        sel?.removeAllRanges()
+        sel?.addRange(range)
+      })
       return
     }
 
-    clearEditor()
+    editorRef.innerHTML = ""
     prompt.set([{ type: "text", content: "", start: 0, end: 0 }], 0)
     command.trigger(cmd.id, "slash")
   }
@@ -486,7 +454,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     })
 
   const renderEditor = (parts: Prompt) => {
-    clearEditor()
+    editorRef.innerHTML = ""
     for (const part of parts) {
       if (part.type === "text") {
         editorRef.appendChild(createTextFragment(part.content))
@@ -546,14 +514,34 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           mirror.input = false
           if (isNormalizedEditor()) return
 
-          renderEditorWithCursor(inputParts)
+          const selection = window.getSelection()
+          let cursorPosition: number | null = null
+          if (selection && selection.rangeCount > 0 && editorRef.contains(selection.anchorNode)) {
+            cursorPosition = getCursorPosition(editorRef)
+          }
+
+          renderEditor(inputParts)
+
+          if (cursorPosition !== null) {
+            setCursorPosition(editorRef, cursorPosition)
+          }
           return
         }
 
         const domParts = parseFromDOM()
         if (isNormalizedEditor() && isPromptEqual(inputParts, domParts)) return
 
-        renderEditorWithCursor(inputParts)
+        const selection = window.getSelection()
+        let cursorPosition: number | null = null
+        if (selection && selection.rangeCount > 0 && editorRef.contains(selection.anchorNode)) {
+          cursorPosition = getCursorPosition(editorRef)
+        }
+
+        renderEditor(inputParts)
+
+        if (cursorPosition !== null) {
+          setCursorPosition(editorRef, cursorPosition)
+        }
       },
     ),
   )
@@ -648,8 +636,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     const shouldReset = trimmed.length === 0 && !hasNonText && images.length === 0
 
     if (shouldReset) {
-      closePopover()
-      resetHistoryNavigation()
+      setStore("popover", null)
+      if (store.historyIndex >= 0 && !store.applyingHistory) {
+        setStore("historyIndex", -1)
+        setStore("savedPrompt", null)
+      }
       if (prompt.dirty()) {
         mirror.input = true
         prompt.set(DEFAULT_PROMPT, 0)
@@ -671,13 +662,16 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         slashOnInput(slashMatch[1])
         setStore("popover", "slash")
       } else {
-        closePopover()
+        setStore("popover", null)
       }
     } else {
-      closePopover()
+      setStore("popover", null)
     }
 
-    resetHistoryNavigation()
+    if (store.historyIndex >= 0 && !store.applyingHistory) {
+      setStore("historyIndex", -1)
+      setStore("savedPrompt", null)
+    }
 
     mirror.input = true
     prompt.set([...rawParts, ...images], cursorPosition)
@@ -738,7 +732,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     }
 
     handleInput()
-    closePopover()
+    setStore("popover", null)
   }
 
   const addToHistory = (prompt: Prompt, mode: "normal" | "shell") => {
@@ -788,7 +782,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     promptLength,
     addToHistory,
     resetHistoryNavigation: () => {
-      resetHistoryNavigation(true)
+      setStore("historyIndex", -1)
+      setStore("savedPrompt", null)
     },
     setMode: (mode) => setStore("mode", mode),
     setPopover: (popover) => setStore("popover", popover),
@@ -877,7 +872,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
     if (ctrl && event.code === "KeyG") {
       if (store.popover) {
-        closePopover()
+        setStore("popover", null)
         event.preventDefault()
         return
       }
@@ -928,7 +923,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     }
     if (event.key === "Escape") {
       if (store.popover) {
-        closePopover()
+        setStore("popover", null)
       } else if (working()) {
         abort()
       }
@@ -1038,7 +1033,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                   keybind={command.keybind("agent.cycle")}
                 >
                   <Select
-                    options={agentNames()}
+                    options={local.agent.list().map((agent) => agent.name)}
                     current={local.agent.current()?.name ?? ""}
                     onSelect={local.agent.set}
                     class={`capitalize ${local.model.variant.list().length > 0 ? "max-w-full" : "max-w-[120px]"}`}

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

@@ -89,9 +89,6 @@ export function createPromptAttachments(input: PromptAttachmentsInput) {
     }
 
     if (!plainText) return
-    const inserted = typeof document.execCommand === "function" && document.execCommand("insertText", false, plainText)
-    if (inserted) return
-
     input.addPart({ type: "text", content: plainText, start: 0, end: 0 })
   }
 

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

@@ -20,68 +20,61 @@ export const PromptContextItems: Component<ContextItemsProps> = (props) => {
     <Show when={props.items.length > 0}>
       <div class="flex flex-nowrap items-start gap-2 p-2 overflow-x-auto no-scrollbar">
         <For each={props.items}>
-          {(item) => {
-            const directory = getDirectory(item.path)
-            const filename = getFilename(item.path)
-            const label = getFilenameTruncated(item.path, 14)
-            const selected = props.active(item)
-
-            return (
-              <Tooltip
-                value={
-                  <span class="flex max-w-[300px]">
-                    <span class="text-text-invert-base truncate-start [unicode-bidi:plaintext] min-w-0">
-                      {directory}
-                    </span>
-                    <span class="shrink-0">{filename}</span>
+          {(item) => (
+            <Tooltip
+              value={
+                <span class="flex max-w-[300px]">
+                  <span class="text-text-invert-base truncate-start [unicode-bidi:plaintext] min-w-0">
+                    {getDirectory(item.path)}
                   </span>
-                }
-                placement="top"
-                openDelay={2000}
+                  <span class="shrink-0">{getFilename(item.path)}</span>
+                </span>
+              }
+              placement="top"
+              openDelay={2000}
+            >
+              <div
+                classList={{
+                  "group shrink-0 flex flex-col rounded-[6px] pl-2 pr-1 py-1 max-w-[200px] h-12 transition-all transition-transform shadow-xs-border hover:shadow-xs-border-hover": true,
+                  "cursor-pointer hover:bg-surface-interactive-weak": !!item.commentID && !props.active(item),
+                  "cursor-pointer bg-surface-interactive-hover hover:bg-surface-interactive-hover shadow-xs-border-hover":
+                    props.active(item),
+                  "bg-background-stronger": !props.active(item),
+                }}
+                onClick={() => props.openComment(item)}
               >
-                <div
-                  classList={{
-                    "group shrink-0 flex flex-col rounded-[6px] pl-2 pr-1 py-1 max-w-[200px] h-12 transition-all transition-transform shadow-xs-border hover:shadow-xs-border-hover": true,
-                    "cursor-pointer hover:bg-surface-interactive-weak": !!item.commentID && !selected,
-                    "cursor-pointer bg-surface-interactive-hover hover:bg-surface-interactive-hover shadow-xs-border-hover":
-                      selected,
-                    "bg-background-stronger": !selected,
-                  }}
-                  onClick={() => props.openComment(item)}
-                >
-                  <div class="flex items-center gap-1.5">
-                    <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-3.5" />
-                    <div class="flex items-center text-11-regular min-w-0 font-medium">
-                      <span class="text-text-strong whitespace-nowrap">{label}</span>
-                      <Show when={item.selection}>
-                        {(sel) => (
-                          <span class="text-text-weak whitespace-nowrap shrink-0">
-                            {sel().startLine === sel().endLine
-                              ? `:${sel().startLine}`
-                              : `:${sel().startLine}-${sel().endLine}`}
-                          </span>
-                        )}
-                      </Show>
-                    </div>
-                    <IconButton
-                      type="button"
-                      icon="close-small"
-                      variant="ghost"
-                      class="ml-auto size-3.5 text-text-weak hover:text-text-strong transition-all"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        props.remove(item)
-                      }}
-                      aria-label={props.t("prompt.context.removeFile")}
-                    />
+                <div class="flex items-center gap-1.5">
+                  <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-3.5" />
+                  <div class="flex items-center text-11-regular min-w-0 font-medium">
+                    <span class="text-text-strong whitespace-nowrap">{getFilenameTruncated(item.path, 14)}</span>
+                    <Show when={item.selection}>
+                      {(sel) => (
+                        <span class="text-text-weak whitespace-nowrap shrink-0">
+                          {sel().startLine === sel().endLine
+                            ? `:${sel().startLine}`
+                            : `:${sel().startLine}-${sel().endLine}`}
+                        </span>
+                      )}
+                    </Show>
                   </div>
-                  <Show when={item.comment}>
-                    {(comment) => <div class="text-12-regular text-text-strong ml-5 pr-1 truncate">{comment()}</div>}
-                  </Show>
+                  <IconButton
+                    type="button"
+                    icon="close-small"
+                    variant="ghost"
+                    class="ml-auto size-3.5 text-text-weak hover:text-text-strong transition-all"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      props.remove(item)
+                    }}
+                    aria-label={props.t("prompt.context.removeFile")}
+                  />
                 </div>
-              </Tooltip>
-            )
-          }}
+                <Show when={item.comment}>
+                  {(comment) => <div class="text-12-regular text-text-strong ml-5 pr-1 truncate">{comment()}</div>}
+                </Show>
+              </div>
+            </Tooltip>
+          )}
         </For>
       </div>
     </Show>

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

@@ -6,17 +6,12 @@ type PromptDragOverlayProps = {
   label: string
 }
 
-const kindToIcon = {
-  image: "photo",
-  "@mention": "link",
-} as const
-
 export const PromptDragOverlay: Component<PromptDragOverlayProps> = (props) => {
   return (
     <Show when={props.type !== null}>
       <div class="absolute inset-0 z-10 flex items-center justify-center bg-surface-raised-stronger-non-alpha/90 pointer-events-none">
         <div class="flex flex-col items-center gap-2 text-text-weak">
-          <Icon name={props.type ? kindToIcon[props.type] : kindToIcon.image} class="size-8" />
+          <Icon name={props.type === "@mention" ? "link" : "photo"} class="size-8" />
           <span class="text-14-regular">{props.label}</span>
         </div>
       </div>

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

@@ -9,13 +9,6 @@ type PromptImageAttachmentsProps = {
   removeLabel: string
 }
 
-const fallbackClass = "size-16 rounded-md bg-surface-base flex items-center justify-center border border-border-base"
-const imageClass =
-  "size-16 rounded-md object-cover border border-border-base hover:border-border-strong-base transition-colors"
-const removeClass =
-  "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-surface-raised-stronger-non-alpha border border-border-base flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-surface-raised-base-hover"
-const nameClass = "absolute bottom-0 left-0 right-0 px-1 py-0.5 bg-black/50 rounded-b-md"
-
 export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (props) => {
   return (
     <Show when={props.attachments.length > 0}>
@@ -26,7 +19,7 @@ export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (p
               <Show
                 when={attachment.mime.startsWith("image/")}
                 fallback={
-                  <div class={fallbackClass}>
+                  <div class="size-16 rounded-md bg-surface-base flex items-center justify-center border border-border-base">
                     <Icon name="folder" class="size-6 text-text-weak" />
                   </div>
                 }
@@ -34,19 +27,19 @@ export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (p
                 <img
                   src={attachment.dataUrl}
                   alt={attachment.filename}
-                  class={imageClass}
+                  class="size-16 rounded-md object-cover border border-border-base hover:border-border-strong-base transition-colors"
                   onClick={() => props.onOpen(attachment)}
                 />
               </Show>
               <button
                 type="button"
                 onClick={() => props.onRemove(attachment.id)}
-                class={removeClass}
+                class="absolute -top-1.5 -right-1.5 size-5 rounded-full bg-surface-raised-stronger-non-alpha border border-border-base flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-surface-raised-base-hover"
                 aria-label={props.removeLabel}
               >
                 <Icon name="close" class="size-3 text-text-weak" />
               </button>
-              <div class={nameClass}>
+              <div class="absolute bottom-0 left-0 right-0 px-1 py-0.5 bg-black/50 rounded-b-md">
                 <span class="text-10-regular text-white truncate block">{attachment.filename}</span>
               </div>
             </div>

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

@@ -52,44 +52,47 @@ export const PromptPopover: Component<PromptPopoverProps> = (props) => {
               fallback={<div class="text-text-weak px-2 py-1">{props.t("prompt.popover.emptyResults")}</div>}
             >
               <For each={props.atFlat.slice(0, 10)}>
-                {(item) => {
-                  const key = props.atKey(item)
-
-                  if (item.type === "agent") {
-                    return (
-                      <button
-                        class="w-full flex items-center gap-x-2 rounded-md px-2 py-0.5"
-                        classList={{ "bg-surface-raised-base-hover": props.atActive === key }}
-                        onClick={() => props.onAtSelect(item)}
-                        onMouseEnter={() => props.setAtActive(key)}
-                      >
-                        <Icon name="brain" size="small" class="text-icon-info-active shrink-0" />
-                        <span class="text-14-regular text-text-strong whitespace-nowrap">@{item.name}</span>
-                      </button>
-                    )
-                  }
-
-                  const isDirectory = item.path.endsWith("/")
-                  const directory = isDirectory ? item.path : getDirectory(item.path)
-                  const filename = isDirectory ? "" : getFilename(item.path)
-
-                  return (
-                    <button
-                      class="w-full flex items-center gap-x-2 rounded-md px-2 py-0.5"
-                      classList={{ "bg-surface-raised-base-hover": props.atActive === key }}
-                      onClick={() => props.onAtSelect(item)}
-                      onMouseEnter={() => props.setAtActive(key)}
+                {(item) => (
+                  <button
+                    classList={{
+                      "w-full flex items-center gap-x-2 rounded-md px-2 py-0.5": true,
+                      "bg-surface-raised-base-hover": props.atActive === props.atKey(item),
+                    }}
+                    onClick={() => props.onAtSelect(item)}
+                    onMouseEnter={() => props.setAtActive(props.atKey(item))}
+                  >
+                    <Show
+                      when={item.type === "agent"}
+                      fallback={
+                        <>
+                          <FileIcon
+                            node={{ path: item.type === "file" ? item.path : "", type: "file" }}
+                            class="shrink-0 size-4"
+                          />
+                          <div class="flex items-center text-14-regular min-w-0">
+                            <span class="text-text-weak whitespace-nowrap truncate min-w-0">
+                              {item.type === "file"
+                                ? item.path.endsWith("/")
+                                  ? item.path
+                                  : getDirectory(item.path)
+                                : ""}
+                            </span>
+                            <Show when={item.type === "file" && !item.path.endsWith("/")}>
+                              <span class="text-text-strong whitespace-nowrap">
+                                {item.type === "file" ? getFilename(item.path) : ""}
+                              </span>
+                            </Show>
+                          </div>
+                        </>
+                      }
                     >
-                      <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-4" />
-                      <div class="flex items-center text-14-regular min-w-0">
-                        <span class="text-text-weak whitespace-nowrap truncate min-w-0">{directory}</span>
-                        <Show when={!isDirectory}>
-                          <span class="text-text-strong whitespace-nowrap">{filename}</span>
-                        </Show>
-                      </div>
-                    </button>
-                  )
-                }}
+                      <Icon name="brain" size="small" class="text-icon-info-active shrink-0" />
+                      <span class="text-14-regular text-text-strong whitespace-nowrap">
+                        @{item.type === "agent" ? item.name : ""}
+                      </span>
+                    </Show>
+                  </button>
+                )}
               </For>
             </Show>
           </Match>

packages/app/src/components/question-dock.tsx

@@ -38,45 +38,43 @@ export const QuestionDock: Component<{ request: QuestionRequest }> = (props) =>
     showToast({ title: language.t("common.requestFailed"), description: message })
   }
 
-  const reply = async (answers: QuestionAnswer[]) => {
+  const reply = (answers: QuestionAnswer[]) => {
     if (store.sending) return
 
     setStore("sending", true)
-    try {
-      await sdk.client.question.reply({ requestID: props.request.id, answers })
-    } catch (err) {
-      fail(err)
-    } finally {
-      setStore("sending", false)
-    }
+    sdk.client.question
+      .reply({ requestID: props.request.id, answers })
+      .catch(fail)
+      .finally(() => setStore("sending", false))
   }
 
-  const reject = async () => {
+  const reject = () => {
     if (store.sending) return
 
     setStore("sending", true)
-    try {
-      await sdk.client.question.reject({ requestID: props.request.id })
-    } catch (err) {
-      fail(err)
-    } finally {
-      setStore("sending", false)
-    }
+    sdk.client.question
+      .reject({ requestID: props.request.id })
+      .catch(fail)
+      .finally(() => setStore("sending", false))
   }
 
   const submit = () => {
-    void reply(questions().map((_, i) => store.answers[i] ?? []))
+    reply(questions().map((_, i) => store.answers[i] ?? []))
   }
 
   const pick = (answer: string, custom: boolean = false) => {
-    setStore("answers", store.tab, [answer])
+    const answers = [...store.answers]
+    answers[store.tab] = [answer]
+    setStore("answers", answers)
 
     if (custom) {
-      setStore("custom", store.tab, answer)
+      const inputs = [...store.custom]
+      inputs[store.tab] = answer
+      setStore("custom", inputs)
     }
 
     if (single()) {
-      void reply([[answer]])
+      reply([[answer]])
       return
     }
 
@@ -84,10 +82,15 @@ export const QuestionDock: Component<{ request: QuestionRequest }> = (props) =>
   }
 
   const toggle = (answer: string) => {
-    setStore("answers", store.tab, (current = []) => {
-      if (current.includes(answer)) return current.filter((item) => item !== answer)
-      return [...current, answer]
-    })
+    const existing = store.answers[store.tab] ?? []
+    const next = [...existing]
+    const index = next.indexOf(answer)
+    if (index === -1) next.push(answer)
+    if (index !== -1) next.splice(index, 1)
+
+    const answers = [...store.answers]
+    answers[store.tab] = next
+    setStore("answers", answers)
   }
 
   const selectTab = (index: number) => {
@@ -123,10 +126,13 @@ export const QuestionDock: Component<{ request: QuestionRequest }> = (props) =>
     }
 
     if (multi()) {
-      setStore("answers", store.tab, (current = []) => {
-        if (current.includes(value)) return current
-        return [...current, value]
-      })
+      const existing = store.answers[store.tab] ?? []
+      const next = [...existing]
+      if (!next.includes(value)) next.push(value)
+
+      const answers = [...store.answers]
+      answers[store.tab] = next
+      setStore("answers", answers)
       setStore("editing", false)
       return
     }
@@ -219,7 +225,9 @@ export const QuestionDock: Component<{ request: QuestionRequest }> = (props) =>
                   value={input()}
                   disabled={store.sending}
                   onInput={(e) => {
-                    setStore("custom", store.tab, e.currentTarget.value)
+                    const inputs = [...store.custom]
+                    inputs[store.tab] = e.currentTarget.value
+                    setStore("custom", inputs)
                   }}
                 />
                 <Button type="submit" variant="primary" size="small" disabled={store.sending}>

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

@@ -1,5 +1,5 @@
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { JSXElement, ParentProps, Show, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
+import { JSXElement, ParentProps, Show, createEffect, createSignal, onCleanup, onMount } from "solid-js"
 import { serverDisplayName } from "@/context/server"
 import type { ServerHealth } from "@/utils/server-health"
 
@@ -17,7 +17,6 @@ export function ServerRow(props: ServerRowProps) {
   const [truncated, setTruncated] = createSignal(false)
   let nameRef: HTMLSpanElement | undefined
   let versionRef: HTMLSpanElement | undefined
-  const name = createMemo(() => serverDisplayName(props.url))
 
   const check = () => {
     const nameTruncated = nameRef ? nameRef.scrollWidth > nameRef.clientWidth : false
@@ -26,24 +25,25 @@ export function ServerRow(props: ServerRowProps) {
   }
 
   createEffect(() => {
-    name()
     props.url
     props.status?.version
-    queueMicrotask(check)
+    if (typeof requestAnimationFrame === "function") {
+      requestAnimationFrame(check)
+      return
+    }
+    check()
   })
 
   onMount(() => {
     check()
-    if (typeof ResizeObserver !== "function") return
-    const observer = new ResizeObserver(check)
-    if (nameRef) observer.observe(nameRef)
-    if (versionRef) observer.observe(versionRef)
-    onCleanup(() => observer.disconnect())
+    if (typeof window === "undefined") return
+    window.addEventListener("resize", check)
+    onCleanup(() => window.removeEventListener("resize", check))
   })
 
   const tooltipValue = () => (
     <span class="flex items-center gap-2">
-      <span>{name()}</span>
+      <span>{serverDisplayName(props.url)}</span>
       <Show when={props.status?.version}>
         <span class="text-text-invert-base">{props.status?.version}</span>
       </Show>
@@ -62,7 +62,7 @@ export function ServerRow(props: ServerRowProps) {
           }}
         />
         <span ref={nameRef} class={props.nameClass ?? "truncate"}>
-          {name()}
+          {serverDisplayName(props.url)}
         </span>
         <Show when={props.status?.version}>
           <span ref={versionRef} class={props.versionClass ?? "text-text-weak text-14-regular truncate"}>

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

@@ -13,17 +13,6 @@ interface SessionContextUsageProps {
   variant?: "button" | "indicator"
 }
 
-function openSessionContext(args: {
-  view: ReturnType<ReturnType<typeof useLayout>["view"]>
-  layout: ReturnType<typeof useLayout>
-  tabs: ReturnType<ReturnType<typeof useLayout>["tabs"]>
-}) {
-  if (!args.view.reviewPanel.opened()) args.view.reviewPanel.open()
-  if (args.layout.fileTree.opened() && args.layout.fileTree.tab() !== "all") args.layout.fileTree.setTab("all")
-  args.tabs.open("context")
-  args.tabs.setActive("context")
-}
-
 export function SessionContextUsage(props: SessionContextUsageProps) {
   const sync = useSync()
   const params = useParams()
@@ -52,11 +41,11 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
 
   const openContext = () => {
     if (!params.id) return
-    openSessionContext({
-      view: view(),
-      layout,
-      tabs: tabs(),
-    })
+    if (!view().reviewPanel.opened()) view().reviewPanel.open()
+    layout.fileTree.open()
+    layout.fileTree.setTab("all")
+    tabs().open("context")
+    tabs().setActive("context")
   }
 
   const circle = () => (

packages/app/src/components/session/session-context-breakdown.test.ts

@@ -1,61 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import type { Message, Part } from "@opencode-ai/sdk/v2/client"
-import { estimateSessionContextBreakdown } from "./session-context-breakdown"
-
-const user = (id: string) => {
-  return {
-    id,
-    role: "user",
-    time: { created: 1 },
-  } as unknown as Message
-}
-
-const assistant = (id: string) => {
-  return {
-    id,
-    role: "assistant",
-    time: { created: 1 },
-  } as unknown as Message
-}
-
-describe("estimateSessionContextBreakdown", () => {
-  test("estimates tokens and keeps remaining tokens as other", () => {
-    const messages = [user("u1"), assistant("a1")]
-    const parts = {
-      u1: [{ type: "text", text: "hello world" }] as unknown as Part[],
-      a1: [{ type: "text", text: "assistant response" }] as unknown as Part[],
-    }
-
-    const output = estimateSessionContextBreakdown({
-      messages,
-      parts,
-      input: 20,
-      systemPrompt: "system prompt",
-    })
-
-    const map = Object.fromEntries(output.map((segment) => [segment.key, segment.tokens]))
-    expect(map.system).toBe(4)
-    expect(map.user).toBe(3)
-    expect(map.assistant).toBe(5)
-    expect(map.other).toBe(8)
-  })
-
-  test("scales segments when estimates exceed input", () => {
-    const messages = [user("u1"), assistant("a1")]
-    const parts = {
-      u1: [{ type: "text", text: "x".repeat(400) }] as unknown as Part[],
-      a1: [{ type: "text", text: "y".repeat(400) }] as unknown as Part[],
-    }
-
-    const output = estimateSessionContextBreakdown({
-      messages,
-      parts,
-      input: 10,
-      systemPrompt: "z".repeat(200),
-    })
-
-    const total = output.reduce((sum, segment) => sum + segment.tokens, 0)
-    expect(total).toBeLessThanOrEqual(10)
-    expect(output.every((segment) => segment.width <= 100)).toBeTrue()
-  })
-})

packages/app/src/components/session/session-context-breakdown.ts

@@ -1,132 +0,0 @@
-import type { Message, Part } from "@opencode-ai/sdk/v2/client"
-
-export type SessionContextBreakdownKey = "system" | "user" | "assistant" | "tool" | "other"
-
-export type SessionContextBreakdownSegment = {
-  key: SessionContextBreakdownKey
-  tokens: number
-  width: number
-  percent: number
-}
-
-const estimateTokens = (chars: number) => Math.ceil(chars / 4)
-const toPercent = (tokens: number, input: number) => (tokens / input) * 100
-const toPercentLabel = (tokens: number, input: number) => Math.round(toPercent(tokens, input) * 10) / 10
-
-const charsFromUserPart = (part: Part) => {
-  if (part.type === "text") return part.text.length
-  if (part.type === "file") return part.source?.text.value.length ?? 0
-  if (part.type === "agent") return part.source?.value.length ?? 0
-  return 0
-}
-
-const charsFromAssistantPart = (part: Part) => {
-  if (part.type === "text") return { assistant: part.text.length, tool: 0 }
-  if (part.type === "reasoning") return { assistant: part.text.length, tool: 0 }
-  if (part.type !== "tool") return { assistant: 0, tool: 0 }
-
-  const input = Object.keys(part.state.input).length * 16
-  if (part.state.status === "pending") return { assistant: 0, tool: input + part.state.raw.length }
-  if (part.state.status === "completed") return { assistant: 0, tool: input + part.state.output.length }
-  if (part.state.status === "error") return { assistant: 0, tool: input + part.state.error.length }
-  return { assistant: 0, tool: input }
-}
-
-const build = (
-  tokens: { system: number; user: number; assistant: number; tool: number; other: number },
-  input: number,
-) => {
-  return [
-    {
-      key: "system",
-      tokens: tokens.system,
-    },
-    {
-      key: "user",
-      tokens: tokens.user,
-    },
-    {
-      key: "assistant",
-      tokens: tokens.assistant,
-    },
-    {
-      key: "tool",
-      tokens: tokens.tool,
-    },
-    {
-      key: "other",
-      tokens: tokens.other,
-    },
-  ]
-    .filter((x) => x.tokens > 0)
-    .map((x) => ({
-      key: x.key,
-      tokens: x.tokens,
-      width: toPercent(x.tokens, input),
-      percent: toPercentLabel(x.tokens, input),
-    })) as SessionContextBreakdownSegment[]
-}
-
-export function estimateSessionContextBreakdown(args: {
-  messages: Message[]
-  parts: Record<string, Part[] | undefined>
-  input: number
-  systemPrompt?: string
-}) {
-  if (!args.input) return []
-
-  const counts = args.messages.reduce(
-    (acc, msg) => {
-      const parts = args.parts[msg.id] ?? []
-      if (msg.role === "user") {
-        const user = parts.reduce((sum, part) => sum + charsFromUserPart(part), 0)
-        return { ...acc, user: acc.user + user }
-      }
-
-      if (msg.role !== "assistant") return acc
-      const assistant = parts.reduce(
-        (sum, part) => {
-          const next = charsFromAssistantPart(part)
-          return {
-            assistant: sum.assistant + next.assistant,
-            tool: sum.tool + next.tool,
-          }
-        },
-        { assistant: 0, tool: 0 },
-      )
-      return {
-        ...acc,
-        assistant: acc.assistant + assistant.assistant,
-        tool: acc.tool + assistant.tool,
-      }
-    },
-    {
-      system: args.systemPrompt?.length ?? 0,
-      user: 0,
-      assistant: 0,
-      tool: 0,
-    },
-  )
-
-  const tokens = {
-    system: estimateTokens(counts.system),
-    user: estimateTokens(counts.user),
-    assistant: estimateTokens(counts.assistant),
-    tool: estimateTokens(counts.tool),
-  }
-  const estimated = tokens.system + tokens.user + tokens.assistant + tokens.tool
-
-  if (estimated <= args.input) {
-    return build({ ...tokens, other: args.input - estimated }, args.input)
-  }
-
-  const scale = args.input / estimated
-  const scaled = {
-    system: Math.floor(tokens.system * scale),
-    user: Math.floor(tokens.user * scale),
-    assistant: Math.floor(tokens.assistant * scale),
-    tool: Math.floor(tokens.tool * scale),
-  }
-  const total = scaled.system + scaled.user + scaled.assistant + scaled.tool
-  return build({ ...scaled, other: Math.max(0, args.input - total) }, args.input)
-}

packages/app/src/components/session/session-context-format.ts

@@ -1,20 +0,0 @@
-import { DateTime } from "luxon"
-
-export function createSessionContextFormatter(locale: string) {
-  return {
-    number(value: number | null | undefined) {
-      if (value === undefined) return "—"
-      if (value === null) return "—"
-      return value.toLocaleString(locale)
-    },
-    percent(value: number | null | undefined) {
-      if (value === undefined) return "—"
-      if (value === null) return "—"
-      return value.toLocaleString(locale) + "%"
-    },
-    time(value: number | undefined) {
-      if (!value) return "—"
-      return DateTime.fromMillis(value).setLocale(locale).toLocaleString(DateTime.DATETIME_MED)
-    },
-  }
-}

packages/app/src/components/session/session-context-metrics.test.ts

@@ -91,11 +91,4 @@ describe("getSessionContextMetrics", () => {
     expect(two.context?.message.id).toBe("a2")
     expect(two.totalCost).toBe(1)
   })
-
-  test("returns empty metrics when inputs are undefined", () => {
-    const metrics = getSessionContextMetrics(undefined, undefined)
-
-    expect(metrics.totalCost).toBe(0)
-    expect(metrics.context).toBeUndefined()
-  })
 })

packages/app/src/components/session/session-context-metrics.ts

@@ -47,7 +47,7 @@ const lastAssistantWithTokens = (messages: Message[]) => {
   }
 }
 
-const build = (messages: Message[] = [], providers: Provider[] = []): Metrics => {
+const build = (messages: Message[], providers: Provider[]): Metrics => {
   const totalCost = messages.reduce((sum, msg) => sum + (msg.role === "assistant" ? msg.cost : 0), 0)
   const message = lastAssistantWithTokens(messages)
   if (!message) return { totalCost, context: undefined }
@@ -77,6 +77,6 @@ const build = (messages: Message[] = [], providers: Provider[] = []): Metrics =>
   }
 }
 
-export function getSessionContextMetrics(messages: Message[] = [], providers: Provider[] = []) {
+export function getSessionContextMetrics(messages: Message[], providers: Provider[]) {
   return build(messages, providers)
 }

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

@@ -1,6 +1,7 @@
 import { createMemo, createEffect, on, onCleanup, For, Show } from "solid-js"
 import type { JSX } from "solid-js"
 import { useParams } from "@solidjs/router"
+import { DateTime } from "luxon"
 import { useSync } from "@/context/sync"
 import { useLayout } from "@/context/layout"
 import { checksum } from "@opencode-ai/util/encode"
@@ -13,8 +14,6 @@ import { Markdown } from "@opencode-ai/ui/markdown"
 import type { Message, Part, UserMessage } from "@opencode-ai/sdk/v2/client"
 import { useLanguage } from "@/context/language"
 import { getSessionContextMetrics } from "./session-context-metrics"
-import { estimateSessionContextBreakdown, type SessionContextBreakdownKey } from "./session-context-breakdown"
-import { createSessionContextFormatter } from "./session-context-format"
 
 interface SessionContextTabProps {
   messages: () => Message[]
@@ -23,74 +22,6 @@ interface SessionContextTabProps {
   info: () => ReturnType<ReturnType<typeof useSync>["session"]["get"]>
 }
 
-const BREAKDOWN_COLOR: Record<SessionContextBreakdownKey, string> = {
-  system: "var(--syntax-info)",
-  user: "var(--syntax-success)",
-  assistant: "var(--syntax-property)",
-  tool: "var(--syntax-warning)",
-  other: "var(--syntax-comment)",
-}
-
-function Stat(props: { label: string; value: JSX.Element }) {
-  return (
-    <div class="flex flex-col gap-1">
-      <div class="text-12-regular text-text-weak">{props.label}</div>
-      <div class="text-12-medium text-text-strong">{props.value}</div>
-    </div>
-  )
-}
-
-function RawMessageContent(props: { message: Message; getParts: (id: string) => Part[]; onRendered: () => void }) {
-  const file = createMemo(() => {
-    const parts = props.getParts(props.message.id)
-    const contents = JSON.stringify({ message: props.message, parts }, null, 2)
-    return {
-      name: `${props.message.role}-${props.message.id}.json`,
-      contents,
-      cacheKey: checksum(contents),
-    }
-  })
-
-  return (
-    <Code
-      file={file()}
-      overflow="wrap"
-      class="select-text"
-      onRendered={() => requestAnimationFrame(props.onRendered)}
-    />
-  )
-}
-
-function RawMessage(props: {
-  message: Message
-  getParts: (id: string) => Part[]
-  onRendered: () => void
-  time: (value: number | undefined) => string
-}) {
-  return (
-    <Accordion.Item value={props.message.id}>
-      <StickyAccordionHeader>
-        <Accordion.Trigger>
-          <div class="flex items-center justify-between gap-2 w-full">
-            <div class="min-w-0 truncate">
-              {props.message.role} <span class="text-text-base">• {props.message.id}</span>
-            </div>
-            <div class="flex items-center gap-3">
-              <div class="shrink-0 text-12-regular text-text-weak">{props.time(props.message.time.created)}</div>
-              <Icon name="chevron-grabber-vertical" size="small" class="shrink-0 text-text-weak" />
-            </div>
-          </div>
-        </Accordion.Trigger>
-      </StickyAccordionHeader>
-      <Accordion.Content class="bg-background-base">
-        <div class="p-3">
-          <RawMessageContent message={props.message} getParts={props.getParts} onRendered={props.onRendered} />
-        </div>
-      </Accordion.Content>
-    </Accordion.Item>
-  )
-}
-
 export function SessionContextTab(props: SessionContextTabProps) {
   const params = useParams()
   const sync = useSync()
@@ -106,7 +37,6 @@ export function SessionContextTab(props: SessionContextTabProps) {
 
   const metrics = createMemo(() => getSessionContextMetrics(props.messages(), sync.data.provider.all))
   const ctx = createMemo(() => metrics().context)
-  const formatter = createMemo(() => createSessionContextFormatter(language.locale()))
 
   const cost = createMemo(() => {
     return usd().format(metrics().totalCost)
@@ -132,6 +62,23 @@ export function SessionContextTab(props: SessionContextTabProps) {
     return trimmed
   })
 
+  const number = (value: number | null | undefined) => {
+    if (value === undefined) return "—"
+    if (value === null) return "—"
+    return value.toLocaleString(language.locale())
+  }
+
+  const percent = (value: number | null | undefined) => {
+    if (value === undefined) return "—"
+    if (value === null) return "—"
+    return value.toLocaleString(language.locale()) + "%"
+  }
+
+  const time = (value: number | undefined) => {
+    if (!value) return "—"
+    return DateTime.fromMillis(value).setLocale(language.locale()).toLocaleString(DateTime.DATETIME_MED)
+  }
+
   const providerLabel = createMemo(() => {
     const c = ctx()
     if (!c) return "—"
@@ -149,51 +96,197 @@ export function SessionContextTab(props: SessionContextTabProps) {
       () => [ctx()?.message.id, ctx()?.input, props.messages().length, systemPrompt()],
       () => {
         const c = ctx()
-        if (!c?.input) return []
-        return estimateSessionContextBreakdown({
-          messages: props.messages(),
-          parts: sync.data.part as Record<string, Part[] | undefined>,
-          input: c.input,
-          systemPrompt: systemPrompt(),
-        })
+        if (!c) return []
+        const input = c.input
+        if (!input) return []
+
+        const out = {
+          system: systemPrompt()?.length ?? 0,
+          user: 0,
+          assistant: 0,
+          tool: 0,
+        }
+
+        for (const msg of props.messages()) {
+          const parts = (sync.data.part[msg.id] ?? []) as Part[]
+
+          if (msg.role === "user") {
+            for (const part of parts) {
+              if (part.type === "text") out.user += part.text.length
+              if (part.type === "file") out.user += part.source?.text.value.length ?? 0
+              if (part.type === "agent") out.user += part.source?.value.length ?? 0
+            }
+            continue
+          }
+
+          if (msg.role === "assistant") {
+            for (const part of parts) {
+              if (part.type === "text") out.assistant += part.text.length
+              if (part.type === "reasoning") out.assistant += part.text.length
+              if (part.type === "tool") {
+                out.tool += Object.keys(part.state.input).length * 16
+                if (part.state.status === "pending") out.tool += part.state.raw.length
+                if (part.state.status === "completed") out.tool += part.state.output.length
+                if (part.state.status === "error") out.tool += part.state.error.length
+              }
+            }
+          }
+        }
+
+        const estimateTokens = (chars: number) => Math.ceil(chars / 4)
+        const system = estimateTokens(out.system)
+        const user = estimateTokens(out.user)
+        const assistant = estimateTokens(out.assistant)
+        const tool = estimateTokens(out.tool)
+        const estimated = system + user + assistant + tool
+
+        const pct = (tokens: number) => (tokens / input) * 100
+        const pctLabel = (tokens: number) => (Math.round(pct(tokens) * 10) / 10).toString() + "%"
+
+        const build = (tokens: { system: number; user: number; assistant: number; tool: number; other: number }) => {
+          return [
+            {
+              key: "system",
+              label: language.t("context.breakdown.system"),
+              tokens: tokens.system,
+              width: pct(tokens.system),
+              percent: pctLabel(tokens.system),
+              color: "var(--syntax-info)",
+            },
+            {
+              key: "user",
+              label: language.t("context.breakdown.user"),
+              tokens: tokens.user,
+              width: pct(tokens.user),
+              percent: pctLabel(tokens.user),
+              color: "var(--syntax-success)",
+            },
+            {
+              key: "assistant",
+              label: language.t("context.breakdown.assistant"),
+              tokens: tokens.assistant,
+              width: pct(tokens.assistant),
+              percent: pctLabel(tokens.assistant),
+              color: "var(--syntax-property)",
+            },
+            {
+              key: "tool",
+              label: language.t("context.breakdown.tool"),
+              tokens: tokens.tool,
+              width: pct(tokens.tool),
+              percent: pctLabel(tokens.tool),
+              color: "var(--syntax-warning)",
+            },
+            {
+              key: "other",
+              label: language.t("context.breakdown.other"),
+              tokens: tokens.other,
+              width: pct(tokens.other),
+              percent: pctLabel(tokens.other),
+              color: "var(--syntax-comment)",
+            },
+          ].filter((x) => x.tokens > 0)
+        }
+
+        if (estimated <= input) {
+          return build({ system, user, assistant, tool, other: input - estimated })
+        }
+
+        const scale = input / estimated
+        const scaled = {
+          system: Math.floor(system * scale),
+          user: Math.floor(user * scale),
+          assistant: Math.floor(assistant * scale),
+          tool: Math.floor(tool * scale),
+        }
+        const scaledTotal = scaled.system + scaled.user + scaled.assistant + scaled.tool
+        return build({ ...scaled, other: Math.max(0, input - scaledTotal) })
       },
     ),
   )
 
-  const breakdownLabel = (key: SessionContextBreakdownKey) => {
-    if (key === "system") return language.t("context.breakdown.system")
-    if (key === "user") return language.t("context.breakdown.user")
-    if (key === "assistant") return language.t("context.breakdown.assistant")
-    if (key === "tool") return language.t("context.breakdown.tool")
-    return language.t("context.breakdown.other")
+  function Stat(statProps: { label: string; value: JSX.Element }) {
+    return (
+      <div class="flex flex-col gap-1">
+        <div class="text-12-regular text-text-weak">{statProps.label}</div>
+        <div class="text-12-medium text-text-strong">{statProps.value}</div>
+      </div>
+    )
   }
 
-  const stats = [
-    { label: "context.stats.session", value: () => props.info()?.title ?? params.id ?? "—" },
-    { label: "context.stats.messages", value: () => counts().all.toLocaleString(language.locale()) },
-    { label: "context.stats.provider", value: providerLabel },
-    { label: "context.stats.model", value: modelLabel },
-    { label: "context.stats.limit", value: () => formatter().number(ctx()?.limit) },
-    { label: "context.stats.totalTokens", value: () => formatter().number(ctx()?.total) },
-    { label: "context.stats.usage", value: () => formatter().percent(ctx()?.usage) },
-    { label: "context.stats.inputTokens", value: () => formatter().number(ctx()?.input) },
-    { label: "context.stats.outputTokens", value: () => formatter().number(ctx()?.output) },
-    { label: "context.stats.reasoningTokens", value: () => formatter().number(ctx()?.reasoning) },
-    {
-      label: "context.stats.cacheTokens",
-      value: () => `${formatter().number(ctx()?.cacheRead)} / ${formatter().number(ctx()?.cacheWrite)}`,
-    },
-    { label: "context.stats.userMessages", value: () => counts().user.toLocaleString(language.locale()) },
-    { label: "context.stats.assistantMessages", value: () => counts().assistant.toLocaleString(language.locale()) },
-    { label: "context.stats.totalCost", value: cost },
-    { label: "context.stats.sessionCreated", value: () => formatter().time(props.info()?.time.created) },
-    { label: "context.stats.lastActivity", value: () => formatter().time(ctx()?.message.time.created) },
-  ] satisfies { label: string; value: () => JSX.Element }[]
+  const stats = createMemo(() => {
+    const c = ctx()
+    const count = counts()
+    return [
+      { label: language.t("context.stats.session"), value: props.info()?.title ?? params.id ?? "—" },
+      { label: language.t("context.stats.messages"), value: count.all.toLocaleString(language.locale()) },
+      { label: language.t("context.stats.provider"), value: providerLabel() },
+      { label: language.t("context.stats.model"), value: modelLabel() },
+      { label: language.t("context.stats.limit"), value: number(c?.limit) },
+      { label: language.t("context.stats.totalTokens"), value: number(c?.total) },
+      { label: language.t("context.stats.usage"), value: percent(c?.usage) },
+      { label: language.t("context.stats.inputTokens"), value: number(c?.input) },
+      { label: language.t("context.stats.outputTokens"), value: number(c?.output) },
+      { label: language.t("context.stats.reasoningTokens"), value: number(c?.reasoning) },
+      {
+        label: language.t("context.stats.cacheTokens"),
+        value: `${number(c?.cacheRead)} / ${number(c?.cacheWrite)}`,
+      },
+      { label: language.t("context.stats.userMessages"), value: count.user.toLocaleString(language.locale()) },
+      {
+        label: language.t("context.stats.assistantMessages"),
+        value: count.assistant.toLocaleString(language.locale()),
+      },
+      { label: language.t("context.stats.totalCost"), value: cost() },
+      { label: language.t("context.stats.sessionCreated"), value: time(props.info()?.time.created) },
+      { label: language.t("context.stats.lastActivity"), value: time(c?.message.time.created) },
+    ] satisfies { label: string; value: JSX.Element }[]
+  })
+
+  function RawMessageContent(msgProps: { message: Message }) {
+    const file = createMemo(() => {
+      const parts = (sync.data.part[msgProps.message.id] ?? []) as Part[]
+      const contents = JSON.stringify({ message: msgProps.message, parts }, null, 2)
+      return {
+        name: `${msgProps.message.role}-${msgProps.message.id}.json`,
+        contents,
+        cacheKey: checksum(contents),
+      }
+    })
+
+    return (
+      <Code file={file()} overflow="wrap" class="select-text" onRendered={() => requestAnimationFrame(restoreScroll)} />
+    )
+  }
+
+  function RawMessage(msgProps: { message: Message }) {
+    return (
+      <Accordion.Item value={msgProps.message.id}>
+        <StickyAccordionHeader>
+          <Accordion.Trigger>
+            <div class="flex items-center justify-between gap-2 w-full">
+              <div class="min-w-0 truncate">
+                {msgProps.message.role} <span class="text-text-base">• {msgProps.message.id}</span>
+              </div>
+              <div class="flex items-center gap-3">
+                <div class="shrink-0 text-12-regular text-text-weak">{time(msgProps.message.time.created)}</div>
+                <Icon name="chevron-grabber-vertical" size="small" class="shrink-0 text-text-weak" />
+              </div>
+            </div>
+          </Accordion.Trigger>
+        </StickyAccordionHeader>
+        <Accordion.Content class="bg-background-base">
+          <div class="p-3">
+            <RawMessageContent message={msgProps.message} />
+          </div>
+        </Accordion.Content>
+      </Accordion.Item>
+    )
+  }
 
   let scroll: HTMLDivElement | undefined
   let frame: number | undefined
   let pending: { x: number; y: number } | undefined
-  const getParts = (id: string) => (sync.data.part[id] ?? []) as Part[]
 
   const restoreScroll = () => {
     const el = scroll
@@ -250,9 +343,7 @@ export function SessionContextTab(props: SessionContextTabProps) {
     >
       <div class="px-6 pt-4 flex flex-col gap-10">
         <div class="grid grid-cols-1 @[32rem]:grid-cols-2 gap-4">
-          <For each={stats}>
-            {(stat) => <Stat label={language.t(stat.label as Parameters<typeof language.t>[0])} value={stat.value()} />}
-          </For>
+          <For each={stats()}>{(stat) => <Stat label={stat.label} value={stat.value} />}</For>
         </div>
 
         <Show when={breakdown().length > 0}>
@@ -265,7 +356,7 @@ export function SessionContextTab(props: SessionContextTabProps) {
                     class="h-full"
                     style={{
                       width: `${segment.width}%`,
-                      "background-color": BREAKDOWN_COLOR[segment.key],
+                      "background-color": segment.color,
                     }}
                   />
                 )}
@@ -275,9 +366,9 @@ export function SessionContextTab(props: SessionContextTabProps) {
               <For each={breakdown()}>
                 {(segment) => (
                   <div class="flex items-center gap-1 text-11-regular text-text-weak">
-                    <div class="size-2 rounded-sm" style={{ "background-color": BREAKDOWN_COLOR[segment.key] }} />
-                    <div>{breakdownLabel(segment.key)}</div>
-                    <div class="text-text-weaker">{segment.percent.toLocaleString(language.locale())}%</div>
+                    <div class="size-2 rounded-sm" style={{ "background-color": segment.color }} />
+                    <div>{segment.label}</div>
+                    <div class="text-text-weaker">{segment.percent}</div>
                   </div>
                 )}
               </For>
@@ -300,11 +391,7 @@ export function SessionContextTab(props: SessionContextTabProps) {
         <div class="flex flex-col gap-2">
           <div class="text-12-regular text-text-weak">{language.t("context.rawMessages.title")}</div>
           <Accordion multiple>
-            <For each={props.messages()}>
-              {(message) => (
-                <RawMessage message={message} getParts={getParts} onRendered={restoreScroll} time={formatter().time} />
-              )}
-            </For>
+            <For each={props.messages()}>{(message) => <RawMessage message={message} />}</For>
           </Accordion>
         </div>
       </div>

packages/app/src/components/session/session-header.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, For, onCleanup, Show } from "solid-js"
+import { createEffect, createMemo, onCleanup, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Portal } from "solid-js/web"
 import { useParams } from "@solidjs/router"
@@ -25,164 +25,6 @@ import { Keybind } from "@opencode-ai/ui/keybind"
 import { showToast } from "@opencode-ai/ui/toast"
 import { StatusPopover } from "../status-popover"
 
-const OPEN_APPS = [
-  "vscode",
-  "cursor",
-  "zed",
-  "textmate",
-  "antigravity",
-  "finder",
-  "terminal",
-  "iterm2",
-  "ghostty",
-  "xcode",
-  "android-studio",
-  "powershell",
-  "sublime-text",
-] as const
-
-type OpenApp = (typeof OPEN_APPS)[number]
-type OS = "macos" | "windows" | "linux" | "unknown"
-
-const MAC_APPS = [
-  { id: "vscode", label: "VS Code", icon: "vscode", openWith: "Visual Studio Code" },
-  { id: "cursor", label: "Cursor", icon: "cursor", openWith: "Cursor" },
-  { id: "zed", label: "Zed", icon: "zed", openWith: "Zed" },
-  { id: "textmate", label: "TextMate", icon: "textmate", openWith: "TextMate" },
-  { id: "antigravity", label: "Antigravity", icon: "antigravity", openWith: "Antigravity" },
-  { id: "terminal", label: "Terminal", icon: "terminal", openWith: "Terminal" },
-  { id: "iterm2", label: "iTerm2", icon: "iterm2", openWith: "iTerm" },
-  { id: "ghostty", label: "Ghostty", icon: "ghostty", openWith: "Ghostty" },
-  { id: "xcode", label: "Xcode", icon: "xcode", openWith: "Xcode" },
-  { id: "android-studio", label: "Android Studio", icon: "android-studio", openWith: "Android Studio" },
-  { id: "sublime-text", label: "Sublime Text", icon: "sublime-text", openWith: "Sublime Text" },
-] as const
-
-const WINDOWS_APPS = [
-  { id: "vscode", label: "VS Code", icon: "vscode", openWith: "code" },
-  { id: "cursor", label: "Cursor", icon: "cursor", openWith: "cursor" },
-  { id: "zed", label: "Zed", icon: "zed", openWith: "zed" },
-  { id: "powershell", label: "PowerShell", icon: "powershell", openWith: "powershell" },
-  { id: "sublime-text", label: "Sublime Text", icon: "sublime-text", openWith: "Sublime Text" },
-] as const
-
-const LINUX_APPS = [
-  { id: "vscode", label: "VS Code", icon: "vscode", openWith: "code" },
-  { id: "cursor", label: "Cursor", icon: "cursor", openWith: "cursor" },
-  { id: "zed", label: "Zed", icon: "zed", openWith: "zed" },
-  { id: "sublime-text", label: "Sublime Text", icon: "sublime-text", openWith: "Sublime Text" },
-] as const
-
-type OpenOption = (typeof MAC_APPS)[number] | (typeof WINDOWS_APPS)[number] | (typeof LINUX_APPS)[number]
-type OpenIcon = OpenApp | "file-explorer"
-const OPEN_ICON_BASE = new Set<OpenIcon>(["finder", "vscode", "cursor", "zed"])
-
-const openIconSize = (id: OpenIcon) => (OPEN_ICON_BASE.has(id) ? "size-4" : "size-[19px]")
-
-const detectOS = (platform: ReturnType<typeof usePlatform>): OS => {
-  if (platform.platform === "desktop" && platform.os) return platform.os
-  if (typeof navigator !== "object") return "unknown"
-  const value = navigator.platform || navigator.userAgent
-  if (/Mac/i.test(value)) return "macos"
-  if (/Win/i.test(value)) return "windows"
-  if (/Linux/i.test(value)) return "linux"
-  return "unknown"
-}
-
-const showRequestError = (language: ReturnType<typeof useLanguage>, err: unknown) => {
-  showToast({
-    variant: "error",
-    title: language.t("common.requestFailed"),
-    description: err instanceof Error ? err.message : String(err),
-  })
-}
-
-function useSessionShare(args: {
-  globalSDK: ReturnType<typeof useGlobalSDK>
-  currentSession: () =>
-    | {
-        id: string
-        share?: {
-          url?: string
-        }
-      }
-    | undefined
-  projectDirectory: () => string
-  platform: ReturnType<typeof usePlatform>
-}) {
-  const [state, setState] = createStore({
-    share: false,
-    unshare: false,
-    copied: false,
-    timer: undefined as number | undefined,
-  })
-  const shareUrl = createMemo(() => args.currentSession()?.share?.url)
-
-  createEffect(() => {
-    const url = shareUrl()
-    if (url) return
-    if (state.timer) window.clearTimeout(state.timer)
-    setState({ copied: false, timer: undefined })
-  })
-
-  onCleanup(() => {
-    if (state.timer) window.clearTimeout(state.timer)
-  })
-
-  const shareSession = () => {
-    const session = args.currentSession()
-    if (!session || state.share) return
-    setState("share", true)
-    args.globalSDK.client.session
-      .share({ sessionID: session.id, directory: args.projectDirectory() })
-      .catch((error) => {
-        console.error("Failed to share session", error)
-      })
-      .finally(() => {
-        setState("share", false)
-      })
-  }
-
-  const unshareSession = () => {
-    const session = args.currentSession()
-    if (!session || state.unshare) return
-    setState("unshare", true)
-    args.globalSDK.client.session
-      .unshare({ sessionID: session.id, directory: args.projectDirectory() })
-      .catch((error) => {
-        console.error("Failed to unshare session", error)
-      })
-      .finally(() => {
-        setState("unshare", false)
-      })
-  }
-
-  const copyLink = (onError: (error: unknown) => void) => {
-    const url = shareUrl()
-    if (!url) return
-    navigator.clipboard
-      .writeText(url)
-      .then(() => {
-        if (state.timer) window.clearTimeout(state.timer)
-        setState("copied", true)
-        const timer = window.setTimeout(() => {
-          setState("copied", false)
-          setState("timer", undefined)
-        }, 3000)
-        setState("timer", timer)
-      })
-      .catch(onError)
-  }
-
-  const viewShare = () => {
-    const url = shareUrl()
-    if (!url) return
-    args.platform.openLink(url)
-  }
-
-  return { state, shareUrl, shareSession, unshareSession, copyLink, viewShare }
-}
-
 export function SessionHeader() {
   const globalSDK = useGlobalSDK()
   const layout = useLayout()
@@ -211,7 +53,62 @@ export function SessionHeader() {
   const showShare = createMemo(() => shareEnabled() && !!currentSession())
   const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
   const view = createMemo(() => layout.view(sessionKey))
-  const os = createMemo(() => detectOS(platform))
+
+  const OPEN_APPS = [
+    "vscode",
+    "cursor",
+    "zed",
+    "textmate",
+    "antigravity",
+    "finder",
+    "terminal",
+    "iterm2",
+    "ghostty",
+    "xcode",
+    "android-studio",
+    "powershell",
+    "sublime-text",
+  ] as const
+  type OpenApp = (typeof OPEN_APPS)[number]
+
+  const MAC_APPS = [
+    { id: "vscode", label: "VS Code", icon: "vscode", openWith: "Visual Studio Code" },
+    { id: "cursor", label: "Cursor", icon: "cursor", openWith: "Cursor" },
+    { id: "zed", label: "Zed", icon: "zed", openWith: "Zed" },
+    { id: "textmate", label: "TextMate", icon: "textmate", openWith: "TextMate" },
+    { id: "antigravity", label: "Antigravity", icon: "antigravity", openWith: "Antigravity" },
+    { id: "terminal", label: "Terminal", icon: "terminal", openWith: "Terminal" },
+    { id: "iterm2", label: "iTerm2", icon: "iterm2", openWith: "iTerm" },
+    { id: "ghostty", label: "Ghostty", icon: "ghostty", openWith: "Ghostty" },
+    { id: "xcode", label: "Xcode", icon: "xcode", openWith: "Xcode" },
+    { id: "android-studio", label: "Android Studio", icon: "android-studio", openWith: "Android Studio" },
+    { id: "sublime-text", label: "Sublime Text", icon: "sublime-text", openWith: "Sublime Text" },
+  ] as const
+
+  const WINDOWS_APPS = [
+    { id: "vscode", label: "VS Code", icon: "vscode", openWith: "code" },
+    { id: "cursor", label: "Cursor", icon: "cursor", openWith: "cursor" },
+    { id: "zed", label: "Zed", icon: "zed", openWith: "zed" },
+    { id: "powershell", label: "PowerShell", icon: "powershell", openWith: "powershell" },
+    { id: "sublime-text", label: "Sublime Text", icon: "sublime-text", openWith: "Sublime Text" },
+  ] as const
+
+  const LINUX_APPS = [
+    { id: "vscode", label: "VS Code", icon: "vscode", openWith: "code" },
+    { id: "cursor", label: "Cursor", icon: "cursor", openWith: "cursor" },
+    { id: "zed", label: "Zed", icon: "zed", openWith: "zed" },
+    { id: "sublime-text", label: "Sublime Text", icon: "sublime-text", openWith: "Sublime Text" },
+  ] as const
+
+  const os = createMemo<"macos" | "windows" | "linux" | "unknown">(() => {
+    if (platform.platform === "desktop" && platform.os) return platform.os
+    if (typeof navigator !== "object") return "unknown"
+    const value = navigator.platform || navigator.userAgent
+    if (/Mac/i.test(value)) return "macos"
+    if (/Win/i.test(value)) return "windows"
+    if (/Linux/i.test(value)) return "linux"
+    return "unknown"
+  })
 
   const [exists, setExists] = createStore<Partial<Record<OpenApp, boolean>>>({ finder: true })
 
@@ -257,6 +154,10 @@ export function SessionHeader() {
     ] as const
   })
 
+  type OpenIcon = OpenApp | "file-explorer"
+  const base = new Set<OpenIcon>(["finder", "vscode", "cursor", "zed"])
+  const size = (id: OpenIcon) => (base.has(id) ? "size-4" : "size-[19px]")
+
   const checksReady = createMemo(() => {
     if (platform.platform !== "desktop") return true
     if (!platform.checkAppExists) return true
@@ -285,7 +186,13 @@ export function SessionHeader() {
 
     const item = options().find((o) => o.id === app)
     const openWith = item && "openWith" in item ? item.openWith : undefined
-    Promise.resolve(platform.openPath?.(directory, openWith)).catch((err: unknown) => showRequestError(language, err))
+    Promise.resolve(platform.openPath?.(directory, openWith)).catch((err: unknown) => {
+      showToast({
+        variant: "error",
+        title: language.t("common.requestFailed"),
+        description: err instanceof Error ? err.message : String(err),
+      })
+    })
   }
 
   const copyPath = () => {
@@ -301,24 +208,93 @@ export function SessionHeader() {
           description: directory,
         })
       })
-      .catch((err: unknown) => showRequestError(language, err))
+      .catch((err: unknown) => {
+        showToast({
+          variant: "error",
+          title: language.t("common.requestFailed"),
+          description: err instanceof Error ? err.message : String(err),
+        })
+      })
   }
 
-  const share = useSessionShare({
-    globalSDK,
-    currentSession,
-    projectDirectory,
-    platform,
+  const [state, setState] = createStore({
+    share: false,
+    unshare: false,
+    copied: false,
+    timer: undefined as number | undefined,
+  })
+  const shareUrl = createMemo(() => currentSession()?.share?.url)
+
+  createEffect(() => {
+    const url = shareUrl()
+    if (url) return
+    if (state.timer) window.clearTimeout(state.timer)
+    setState({ copied: false, timer: undefined })
   })
 
-  const leftMount = createMemo(
-    () => document.getElementById("opencode-titlebar-left") ?? document.getElementById("opencode-titlebar-center"),
-  )
+  onCleanup(() => {
+    if (state.timer) window.clearTimeout(state.timer)
+  })
+
+  function shareSession() {
+    const session = currentSession()
+    if (!session || state.share) return
+    setState("share", true)
+    globalSDK.client.session
+      .share({ sessionID: session.id, directory: projectDirectory() })
+      .catch((error) => {
+        console.error("Failed to share session", error)
+      })
+      .finally(() => {
+        setState("share", false)
+      })
+  }
+
+  function unshareSession() {
+    const session = currentSession()
+    if (!session || state.unshare) return
+    setState("unshare", true)
+    globalSDK.client.session
+      .unshare({ sessionID: session.id, directory: projectDirectory() })
+      .catch((error) => {
+        console.error("Failed to unshare session", error)
+      })
+      .finally(() => {
+        setState("unshare", false)
+      })
+  }
+
+  function copyLink() {
+    const url = shareUrl()
+    if (!url) return
+    navigator.clipboard
+      .writeText(url)
+      .then(() => {
+        if (state.timer) window.clearTimeout(state.timer)
+        setState("copied", true)
+        const timer = window.setTimeout(() => {
+          setState("copied", false)
+          setState("timer", undefined)
+        }, 3000)
+        setState("timer", timer)
+      })
+      .catch((error) => {
+        console.error("Failed to copy share link", error)
+      })
+  }
+
+  function viewShare() {
+    const url = shareUrl()
+    if (!url) return
+    platform.openLink(url)
+  }
+
+  const centerMount = createMemo(() => document.getElementById("opencode-titlebar-center"))
   const rightMount = createMemo(() => document.getElementById("opencode-titlebar-right"))
 
   return (
     <>
-      <Show when={leftMount()}>
+      <Show when={centerMount()}>
         {(mount) => (
           <Portal mount={mount()}>
             <button
@@ -406,25 +382,23 @@ export function SessionHeader() {
                                     setPrefs("app", value as OpenApp)
                                   }}
                                 >
-                                  <For each={options()}>
-                                    {(o) => (
-                                      <DropdownMenu.RadioItem
-                                        value={o.id}
-                                        onSelect={() => {
-                                          setMenu("open", false)
-                                          openDir(o.id)
-                                        }}
-                                      >
-                                        <div class="flex size-5 shrink-0 items-center justify-center">
-                                          <AppIcon id={o.icon} class={openIconSize(o.icon)} />
-                                        </div>
-                                        <DropdownMenu.ItemLabel>{o.label}</DropdownMenu.ItemLabel>
-                                        <DropdownMenu.ItemIndicator>
-                                          <Icon name="check-small" size="small" class="text-icon-weak" />
-                                        </DropdownMenu.ItemIndicator>
-                                      </DropdownMenu.RadioItem>
-                                    )}
-                                  </For>
+                                  {options().map((o) => (
+                                    <DropdownMenu.RadioItem
+                                      value={o.id}
+                                      onSelect={() => {
+                                        setMenu("open", false)
+                                        openDir(o.id)
+                                      }}
+                                    >
+                                      <div class="flex size-5 shrink-0 items-center justify-center">
+                                        <AppIcon id={o.icon} class={size(o.icon)} />
+                                      </div>
+                                      <DropdownMenu.ItemLabel>{o.label}</DropdownMenu.ItemLabel>
+                                      <DropdownMenu.ItemIndicator>
+                                        <Icon name="check-small" size="small" class="text-icon-weak" />
+                                      </DropdownMenu.ItemIndicator>
+                                    </DropdownMenu.RadioItem>
+                                  ))}
                                 </DropdownMenu.RadioGroup>
                               </DropdownMenu.Group>
                               <DropdownMenu.Separator />
@@ -454,7 +428,7 @@ export function SessionHeader() {
                   <Popover
                     title={language.t("session.share.popover.title")}
                     description={
-                      share.shareUrl()
+                      shareUrl()
                         ? language.t("session.share.popover.description.shared")
                         : language.t("session.share.popover.description.unshared")
                     }
@@ -467,24 +441,24 @@ export function SessionHeader() {
                       variant: "ghost",
                       class:
                         "rounded-md h-[24px] px-3 border border-border-base bg-surface-panel shadow-none data-[expanded]:bg-surface-raised-base-active",
-                      classList: { "rounded-r-none": share.shareUrl() !== undefined },
+                      classList: { "rounded-r-none": shareUrl() !== undefined },
                       style: { scale: 1 },
                     }}
                     trigger={language.t("session.share.action.share")}
                   >
                     <div class="flex flex-col gap-2">
                       <Show
-                        when={share.shareUrl()}
+                        when={shareUrl()}
                         fallback={
                           <div class="flex">
                             <Button
                               size="large"
                               variant="primary"
                               class="w-1/2"
-                              onClick={share.shareSession}
-                              disabled={share.state.share}
+                              onClick={shareSession}
+                              disabled={state.share}
                             >
-                              {share.state.share
+                              {state.share
                                 ? language.t("session.share.action.publishing")
                                 : language.t("session.share.action.publish")}
                             </Button>
@@ -493,7 +467,7 @@ export function SessionHeader() {
                       >
                         <div class="flex flex-col gap-2">
                           <TextField
-                            value={share.shareUrl() ?? ""}
+                            value={shareUrl() ?? ""}
                             readOnly
                             copyable
                             copyKind="link"
@@ -505,10 +479,10 @@ export function SessionHeader() {
                               size="large"
                               variant="secondary"
                               class="w-full shadow-none border border-border-weak-base"
-                              onClick={share.unshareSession}
-                              disabled={share.state.unshare}
+                              onClick={unshareSession}
+                              disabled={state.unshare}
                             >
-                              {share.state.unshare
+                              {state.unshare
                                 ? language.t("session.share.action.unpublishing")
                                 : language.t("session.share.action.unpublish")}
                             </Button>
@@ -516,8 +490,8 @@ export function SessionHeader() {
                               size="large"
                               variant="primary"
                               class="w-full"
-                              onClick={share.viewShare}
-                              disabled={share.state.unshare}
+                              onClick={viewShare}
+                              disabled={state.unshare}
                             >
                               {language.t("session.share.action.view")}
                             </Button>
@@ -526,10 +500,10 @@ export function SessionHeader() {
                       </Show>
                     </div>
                   </Popover>
-                  <Show when={share.shareUrl()} fallback={<div aria-hidden="true" />}>
+                  <Show when={shareUrl()} fallback={<div aria-hidden="true" />}>
                     <Tooltip
                       value={
-                        share.state.copied
+                        state.copied
                           ? language.t("session.share.copy.copied")
                           : language.t("session.share.copy.copyLink")
                       }
@@ -537,13 +511,13 @@ export function SessionHeader() {
                       gutter={8}
                     >
                       <IconButton
-                        icon={share.state.copied ? "check" : "link"}
+                        icon={state.copied ? "check" : "link"}
                         variant="ghost"
                         class="rounded-l-none h-[24px] border border-border-base bg-surface-panel shadow-none"
-                        onClick={() => share.copyLink((error) => showRequestError(language, error))}
-                        disabled={share.state.unshare}
+                        onClick={copyLink}
+                        disabled={state.unshare}
                         aria-label={
-                          share.state.copied
+                          state.copied
                             ? language.t("session.share.copy.copied")
                             : language.t("session.share.copy.copyLink")
                         }
@@ -552,7 +526,7 @@ export function SessionHeader() {
                   </Show>
                 </div>
               </Show>
-              <div class="hidden lg:flex items-center gap-3 ml-2 shrink-0">
+              <div class="hidden md:flex items-center gap-3 ml-2 shrink-0">
                 <TooltipKeybind
                   title={language.t("command.terminal.toggle")}
                   keybind={command.keybind("terminal.toggle")}
@@ -585,7 +559,7 @@ export function SessionHeader() {
                   </Button>
                 </TooltipKeybind>
               </div>
-              <div class="hidden lg:block shrink-0">
+              <div class="hidden md:block shrink-0">
                 <TooltipKeybind title={language.t("command.review.toggle")} keybind={command.keybind("review.toggle")}>
                   <Button
                     variant="ghost"
@@ -615,7 +589,7 @@ export function SessionHeader() {
                   </Button>
                 </TooltipKeybind>
               </div>
-              <div class="hidden lg:block shrink-0">
+              <div class="hidden md:block shrink-0">
                 <TooltipKeybind
                   title={language.t("command.fileTree.toggle")}
                   keybind={command.keybind("fileTree.toggle")}

packages/app/src/components/session/session-new-view.tsx

@@ -8,8 +8,6 @@ import { getDirectory, getFilename } from "@opencode-ai/util/path"
 
 const MAIN_WORKTREE = "main"
 const CREATE_WORKTREE = "create"
-const ROOT_CLASS =
-  "size-full flex flex-col justify-end items-start gap-4 flex-[1_0_0] self-stretch max-w-200 mx-auto 2xl:max-w-[1000px] px-6 pb-[calc(var(--prompt-height,11.25rem)+64px)]"
 
 interface NewSessionViewProps {
   worktree: string
@@ -49,7 +47,7 @@ export function NewSessionView(props: NewSessionViewProps) {
   }
 
   return (
-    <div class={ROOT_CLASS}>
+    <div class="size-full flex flex-col justify-end items-start gap-4 flex-[1_0_0] self-stretch max-w-200 mx-auto 2xl:max-w-[1000px] px-6 pb-[calc(var(--prompt-height,11.25rem)+64px)]">
       <div class="text-20-medium text-text-weaker">{language.t("command.session.new")}</div>
       <div class="flex justify-center items-center gap-3">
         <Icon name="folder" size="small" />

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

@@ -31,12 +31,8 @@ export function SortableTab(props: { tab: string; onTabClose: (tab: string) => v
   const command = useCommand()
   const sortable = createSortable(props.tab)
   const path = createMemo(() => file.pathFromTab(props.tab))
-  const content = createMemo(() => {
-    const value = path()
-    if (!value) return
-    return <FileVisual path={value} />
-  })
   return (
+    // @ts-ignore
     <div use:sortable classList={{ "h-full": true, "opacity-0": sortable.isActiveDraggable }}>
       <div class="relative h-full">
         <Tabs.Trigger
@@ -59,7 +55,7 @@ export function SortableTab(props: { tab: string; onTabClose: (tab: string) => v
           hideCloseButton
           onMiddleClick={() => props.onTabClose(props.tab)}
         >
-          <Show when={content()}>{(value) => value()}</Show>
+          <Show when={path()}>{(p) => <FileVisual path={p()} />}</Show>
         </Tabs.Trigger>
       </div>
     </div>

packages/app/src/components/session/session-sortable-terminal-tab.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from "solid-js"
-import { Show, createEffect, onCleanup } from "solid-js"
+import { Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { createSortable } from "@thisbeyond/solid-dnd"
 import { IconButton } from "@opencode-ai/ui/icon-button"
@@ -20,8 +20,6 @@ export function SortableTerminalTab(props: { terminal: LocalPTY; onClose?: () =>
     menuPosition: { x: 0, y: 0 },
     blurEnabled: false,
   })
-  let input: HTMLInputElement | undefined
-  let blurFrame: number | undefined
 
   const isDefaultTitle = () => {
     const number = props.terminal.titleNumber
@@ -79,6 +77,13 @@ export function SortableTerminalTab(props: { terminal: LocalPTY; onClose?: () =>
     setStore("blurEnabled", false)
     setStore("title", props.terminal.title)
     setStore("editing", true)
+    setTimeout(() => {
+      const input = document.getElementById(`terminal-title-input-${props.terminal.id}`) as HTMLInputElement
+      if (!input) return
+      input.focus()
+      input.select()
+      setTimeout(() => setStore("blurEnabled", true), 100)
+    }, 10)
   }
 
   const save = () => {
@@ -109,25 +114,9 @@ export function SortableTerminalTab(props: { terminal: LocalPTY; onClose?: () =>
     setStore("menuOpen", true)
   }
 
-  createEffect(() => {
-    if (!store.editing) return
-    if (!input) return
-    input.focus()
-    input.select()
-    if (blurFrame !== undefined) cancelAnimationFrame(blurFrame)
-    blurFrame = requestAnimationFrame(() => {
-      blurFrame = undefined
-      setStore("blurEnabled", true)
-    })
-  })
-
-  onCleanup(() => {
-    if (blurFrame === undefined) return
-    cancelAnimationFrame(blurFrame)
-  })
-
   return (
     <div
+      // @ts-ignore
       use:sortable
       class="outline-none focus:outline-none focus-visible:outline-none"
       classList={{
@@ -164,7 +153,7 @@ export function SortableTerminalTab(props: { terminal: LocalPTY; onClose?: () =>
         <Show when={store.editing}>
           <div class="absolute inset-0 flex items-center px-3 bg-muted z-10 pointer-events-auto">
             <input
-              ref={input}
+              id={`terminal-title-input-${props.terminal.id}`}
               type="text"
               value={store.title}
               onInput={(e) => setStore("title", e.currentTarget.value)}

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

@@ -2,7 +2,6 @@ import { Component } from "solid-js"
 import { useLanguage } from "@/context/language"
 
 export const SettingsAgents: Component = () => {
-  // TODO: Replace this placeholder with full agents settings controls.
   const language = useLanguage()
 
   return (

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

@@ -2,7 +2,6 @@ import { Component } from "solid-js"
 import { useLanguage } from "@/context/language"
 
 export const SettingsCommands: Component = () => {
-  // TODO: Replace this placeholder with full commands settings controls.
   const language = useLanguage()
 
   return (

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

@@ -1,4 +1,4 @@
-import { Component, Show, createMemo, createResource, type JSX } from "solid-js"
+import { Component, Show, createEffect, createMemo, createResource, type JSX } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
@@ -133,288 +133,6 @@ export const SettingsGeneral: Component = () => {
 
   const soundOptions = [...SOUND_OPTIONS]
 
-  const soundSelectProps = (current: () => string, set: (id: string) => void) => ({
-    options: soundOptions,
-    current: soundOptions.find((o) => o.id === current()),
-    value: (o: (typeof soundOptions)[number]) => o.id,
-    label: (o: (typeof soundOptions)[number]) => language.t(o.label),
-    onHighlight: (option: (typeof soundOptions)[number] | undefined) => {
-      if (!option) return
-      playDemoSound(option.src)
-    },
-    onSelect: (option: (typeof soundOptions)[number] | undefined) => {
-      if (!option) return
-      set(option.id)
-      playDemoSound(option.src)
-    },
-    variant: "secondary" as const,
-    size: "small" as const,
-    triggerVariant: "settings" as const,
-  })
-
-  const AppearanceSection = () => (
-    <div class="flex flex-col gap-1">
-      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.appearance")}</h3>
-
-      <div class="bg-surface-raised-base px-4 rounded-lg">
-        <SettingsRow
-          title={language.t("settings.general.row.language.title")}
-          description={language.t("settings.general.row.language.description")}
-        >
-          <Select
-            data-action="settings-language"
-            options={languageOptions()}
-            current={languageOptions().find((o) => o.value === language.locale())}
-            value={(o) => o.value}
-            label={(o) => o.label}
-            onSelect={(option) => option && language.setLocale(option.value)}
-            variant="secondary"
-            size="small"
-            triggerVariant="settings"
-          />
-        </SettingsRow>
-
-        <SettingsRow
-          title={language.t("settings.general.row.appearance.title")}
-          description={language.t("settings.general.row.appearance.description")}
-        >
-          <Select
-            data-action="settings-color-scheme"
-            options={colorSchemeOptions()}
-            current={colorSchemeOptions().find((o) => o.value === theme.colorScheme())}
-            value={(o) => o.value}
-            label={(o) => o.label}
-            onSelect={(option) => option && theme.setColorScheme(option.value)}
-            onHighlight={(option) => {
-              if (!option) return
-              theme.previewColorScheme(option.value)
-              return () => theme.cancelPreview()
-            }}
-            variant="secondary"
-            size="small"
-            triggerVariant="settings"
-          />
-        </SettingsRow>
-
-        <SettingsRow
-          title={language.t("settings.general.row.theme.title")}
-          description={
-            <>
-              {language.t("settings.general.row.theme.description")}{" "}
-              <Link href="https://opencode.ai/docs/themes/">{language.t("common.learnMore")}</Link>
-            </>
-          }
-        >
-          <Select
-            data-action="settings-theme"
-            options={themeOptions()}
-            current={themeOptions().find((o) => o.id === theme.themeId())}
-            value={(o) => o.id}
-            label={(o) => o.name}
-            onSelect={(option) => {
-              if (!option) return
-              theme.setTheme(option.id)
-            }}
-            onHighlight={(option) => {
-              if (!option) return
-              theme.previewTheme(option.id)
-              return () => theme.cancelPreview()
-            }}
-            variant="secondary"
-            size="small"
-            triggerVariant="settings"
-          />
-        </SettingsRow>
-
-        <SettingsRow
-          title={language.t("settings.general.row.font.title")}
-          description={language.t("settings.general.row.font.description")}
-        >
-          <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)}
-            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>
-      </div>
-    </div>
-  )
-
-  const NotificationsSection = () => (
-    <div class="flex flex-col gap-1">
-      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.notifications")}</h3>
-
-      <div class="bg-surface-raised-base px-4 rounded-lg">
-        <SettingsRow
-          title={language.t("settings.general.notifications.agent.title")}
-          description={language.t("settings.general.notifications.agent.description")}
-        >
-          <div data-action="settings-notifications-agent">
-            <Switch
-              checked={settings.notifications.agent()}
-              onChange={(checked) => settings.notifications.setAgent(checked)}
-            />
-          </div>
-        </SettingsRow>
-
-        <SettingsRow
-          title={language.t("settings.general.notifications.permissions.title")}
-          description={language.t("settings.general.notifications.permissions.description")}
-        >
-          <div data-action="settings-notifications-permissions">
-            <Switch
-              checked={settings.notifications.permissions()}
-              onChange={(checked) => settings.notifications.setPermissions(checked)}
-            />
-          </div>
-        </SettingsRow>
-
-        <SettingsRow
-          title={language.t("settings.general.notifications.errors.title")}
-          description={language.t("settings.general.notifications.errors.description")}
-        >
-          <div data-action="settings-notifications-errors">
-            <Switch
-              checked={settings.notifications.errors()}
-              onChange={(checked) => settings.notifications.setErrors(checked)}
-            />
-          </div>
-        </SettingsRow>
-      </div>
-    </div>
-  )
-
-  const SoundsSection = () => (
-    <div class="flex flex-col gap-1">
-      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.sounds")}</h3>
-
-      <div class="bg-surface-raised-base px-4 rounded-lg">
-        <SettingsRow
-          title={language.t("settings.general.sounds.agent.title")}
-          description={language.t("settings.general.sounds.agent.description")}
-        >
-          <div class="flex items-center gap-2">
-            <div data-action="settings-sounds-agent-enabled">
-              <Switch
-                checked={settings.sounds.agentEnabled()}
-                onChange={(checked) => settings.sounds.setAgentEnabled(checked)}
-              />
-            </div>
-            <Select
-              disabled={!settings.sounds.agentEnabled()}
-              data-action="settings-sounds-agent"
-              {...soundSelectProps(
-                () => settings.sounds.agent(),
-                (id) => settings.sounds.setAgent(id),
-              )}
-            />
-          </div>
-        </SettingsRow>
-
-        <SettingsRow
-          title={language.t("settings.general.sounds.permissions.title")}
-          description={language.t("settings.general.sounds.permissions.description")}
-        >
-          <div class="flex items-center gap-2">
-            <div data-action="settings-sounds-permissions-enabled">
-              <Switch
-                checked={settings.sounds.permissionsEnabled()}
-                onChange={(checked) => settings.sounds.setPermissionsEnabled(checked)}
-              />
-            </div>
-            <Select
-              disabled={!settings.sounds.permissionsEnabled()}
-              data-action="settings-sounds-permissions"
-              {...soundSelectProps(
-                () => settings.sounds.permissions(),
-                (id) => settings.sounds.setPermissions(id),
-              )}
-            />
-          </div>
-        </SettingsRow>
-
-        <SettingsRow
-          title={language.t("settings.general.sounds.errors.title")}
-          description={language.t("settings.general.sounds.errors.description")}
-        >
-          <div class="flex items-center gap-2">
-            <div data-action="settings-sounds-errors-enabled">
-              <Switch
-                checked={settings.sounds.errorsEnabled()}
-                onChange={(checked) => settings.sounds.setErrorsEnabled(checked)}
-              />
-            </div>
-            <Select
-              disabled={!settings.sounds.errorsEnabled()}
-              data-action="settings-sounds-errors"
-              {...soundSelectProps(
-                () => settings.sounds.errors(),
-                (id) => settings.sounds.setErrors(id),
-              )}
-            />
-          </div>
-        </SettingsRow>
-      </div>
-    </div>
-  )
-
-  const UpdatesSection = () => (
-    <div class="flex flex-col gap-1">
-      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.updates")}</h3>
-
-      <div class="bg-surface-raised-base px-4 rounded-lg">
-        <SettingsRow
-          title={language.t("settings.updates.row.startup.title")}
-          description={language.t("settings.updates.row.startup.description")}
-        >
-          <div data-action="settings-updates-startup">
-            <Switch
-              checked={settings.updates.startup()}
-              disabled={!platform.checkUpdate}
-              onChange={(checked) => settings.updates.setStartup(checked)}
-            />
-          </div>
-        </SettingsRow>
-
-        <SettingsRow
-          title={language.t("settings.general.row.releaseNotes.title")}
-          description={language.t("settings.general.row.releaseNotes.description")}
-        >
-          <div data-action="settings-release-notes">
-            <Switch
-              checked={settings.general.releaseNotes()}
-              onChange={(checked) => settings.general.setReleaseNotes(checked)}
-            />
-          </div>
-        </SettingsRow>
-
-        <SettingsRow
-          title={language.t("settings.updates.row.check.title")}
-          description={language.t("settings.updates.row.check.description")}
-        >
-          <Button size="small" variant="secondary" disabled={store.checking || !platform.checkUpdate} onClick={check}>
-            {store.checking
-              ? language.t("settings.updates.action.checking")
-              : language.t("settings.updates.action.checkNow")}
-          </Button>
-        </SettingsRow>
-      </div>
-    </div>
-  )
-
   return (
     <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
       <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
@@ -424,11 +142,230 @@ export const SettingsGeneral: Component = () => {
       </div>
 
       <div class="flex flex-col gap-8 w-full">
-        <AppearanceSection />
+        {/* Appearance Section */}
+        <div class="flex flex-col gap-1">
+          <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.appearance")}</h3>
 
-        <NotificationsSection />
+          <div class="bg-surface-raised-base px-4 rounded-lg">
+            <SettingsRow
+              title={language.t("settings.general.row.language.title")}
+              description={language.t("settings.general.row.language.description")}
+            >
+              <Select
+                data-action="settings-language"
+                options={languageOptions()}
+                current={languageOptions().find((o) => o.value === language.locale())}
+                value={(o) => o.value}
+                label={(o) => o.label}
+                onSelect={(option) => option && language.setLocale(option.value)}
+                variant="secondary"
+                size="small"
+                triggerVariant="settings"
+              />
+            </SettingsRow>
 
-        <SoundsSection />
+            <SettingsRow
+              title={language.t("settings.general.row.appearance.title")}
+              description={language.t("settings.general.row.appearance.description")}
+            >
+              <Select
+                data-action="settings-color-scheme"
+                options={colorSchemeOptions()}
+                current={colorSchemeOptions().find((o) => o.value === theme.colorScheme())}
+                value={(o) => o.value}
+                label={(o) => o.label}
+                onSelect={(option) => option && theme.setColorScheme(option.value)}
+                onHighlight={(option) => {
+                  if (!option) return
+                  theme.previewColorScheme(option.value)
+                  return () => theme.cancelPreview()
+                }}
+                variant="secondary"
+                size="small"
+                triggerVariant="settings"
+              />
+            </SettingsRow>
+
+            <SettingsRow
+              title={language.t("settings.general.row.theme.title")}
+              description={
+                <>
+                  {language.t("settings.general.row.theme.description")}{" "}
+                  <Link href="https://opencode.ai/docs/themes/">{language.t("common.learnMore")}</Link>
+                </>
+              }
+            >
+              <Select
+                data-action="settings-theme"
+                options={themeOptions()}
+                current={themeOptions().find((o) => o.id === theme.themeId())}
+                value={(o) => o.id}
+                label={(o) => o.name}
+                onSelect={(option) => {
+                  if (!option) return
+                  theme.setTheme(option.id)
+                }}
+                onHighlight={(option) => {
+                  if (!option) return
+                  theme.previewTheme(option.id)
+                  return () => theme.cancelPreview()
+                }}
+                variant="secondary"
+                size="small"
+                triggerVariant="settings"
+              />
+            </SettingsRow>
+
+            <SettingsRow
+              title={language.t("settings.general.row.font.title")}
+              description={language.t("settings.general.row.font.description")}
+            >
+              <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)}
+                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>
+          </div>
+        </div>
+
+        {/* System notifications Section */}
+        <div class="flex flex-col gap-1">
+          <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.notifications")}</h3>
+
+          <div class="bg-surface-raised-base px-4 rounded-lg">
+            <SettingsRow
+              title={language.t("settings.general.notifications.agent.title")}
+              description={language.t("settings.general.notifications.agent.description")}
+            >
+              <div data-action="settings-notifications-agent">
+                <Switch
+                  checked={settings.notifications.agent()}
+                  onChange={(checked) => settings.notifications.setAgent(checked)}
+                />
+              </div>
+            </SettingsRow>
+
+            <SettingsRow
+              title={language.t("settings.general.notifications.permissions.title")}
+              description={language.t("settings.general.notifications.permissions.description")}
+            >
+              <div data-action="settings-notifications-permissions">
+                <Switch
+                  checked={settings.notifications.permissions()}
+                  onChange={(checked) => settings.notifications.setPermissions(checked)}
+                />
+              </div>
+            </SettingsRow>
+
+            <SettingsRow
+              title={language.t("settings.general.notifications.errors.title")}
+              description={language.t("settings.general.notifications.errors.description")}
+            >
+              <div data-action="settings-notifications-errors">
+                <Switch
+                  checked={settings.notifications.errors()}
+                  onChange={(checked) => settings.notifications.setErrors(checked)}
+                />
+              </div>
+            </SettingsRow>
+          </div>
+        </div>
+
+        {/* Sound effects Section */}
+        <div class="flex flex-col gap-1">
+          <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.sounds")}</h3>
+
+          <div class="bg-surface-raised-base px-4 rounded-lg">
+            <SettingsRow
+              title={language.t("settings.general.sounds.agent.title")}
+              description={language.t("settings.general.sounds.agent.description")}
+            >
+              <Select
+                data-action="settings-sounds-agent"
+                options={soundOptions}
+                current={soundOptions.find((o) => o.id === settings.sounds.agent())}
+                value={(o) => o.id}
+                label={(o) => language.t(o.label)}
+                onHighlight={(option) => {
+                  if (!option) return
+                  playDemoSound(option.src)
+                }}
+                onSelect={(option) => {
+                  if (!option) return
+                  settings.sounds.setAgent(option.id)
+                  playDemoSound(option.src)
+                }}
+                variant="secondary"
+                size="small"
+                triggerVariant="settings"
+              />
+            </SettingsRow>
+
+            <SettingsRow
+              title={language.t("settings.general.sounds.permissions.title")}
+              description={language.t("settings.general.sounds.permissions.description")}
+            >
+              <Select
+                data-action="settings-sounds-permissions"
+                options={soundOptions}
+                current={soundOptions.find((o) => o.id === settings.sounds.permissions())}
+                value={(o) => o.id}
+                label={(o) => language.t(o.label)}
+                onHighlight={(option) => {
+                  if (!option) return
+                  playDemoSound(option.src)
+                }}
+                onSelect={(option) => {
+                  if (!option) return
+                  settings.sounds.setPermissions(option.id)
+                  playDemoSound(option.src)
+                }}
+                variant="secondary"
+                size="small"
+                triggerVariant="settings"
+              />
+            </SettingsRow>
+
+            <SettingsRow
+              title={language.t("settings.general.sounds.errors.title")}
+              description={language.t("settings.general.sounds.errors.description")}
+            >
+              <Select
+                data-action="settings-sounds-errors"
+                options={soundOptions}
+                current={soundOptions.find((o) => o.id === settings.sounds.errors())}
+                value={(o) => o.id}
+                label={(o) => language.t(o.label)}
+                onHighlight={(option) => {
+                  if (!option) return
+                  playDemoSound(option.src)
+                }}
+                onSelect={(option) => {
+                  if (!option) return
+                  settings.sounds.setErrors(option.id)
+                  playDemoSound(option.src)
+                }}
+                variant="secondary"
+                size="small"
+                triggerVariant="settings"
+              />
+            </SettingsRow>
+          </div>
+        </div>
 
         <Show when={platform.platform === "desktop" && platform.os === "windows" && platform.getWslEnabled}>
           {(_) => {
@@ -458,7 +395,53 @@ export const SettingsGeneral: Component = () => {
           }}
         </Show>
 
-        <UpdatesSection />
+        {/* Updates Section */}
+        <div class="flex flex-col gap-1">
+          <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.updates")}</h3>
+
+          <div class="bg-surface-raised-base px-4 rounded-lg">
+            <SettingsRow
+              title={language.t("settings.updates.row.startup.title")}
+              description={language.t("settings.updates.row.startup.description")}
+            >
+              <div data-action="settings-updates-startup">
+                <Switch
+                  checked={settings.updates.startup()}
+                  disabled={!platform.checkUpdate}
+                  onChange={(checked) => settings.updates.setStartup(checked)}
+                />
+              </div>
+            </SettingsRow>
+
+            <SettingsRow
+              title={language.t("settings.general.row.releaseNotes.title")}
+              description={language.t("settings.general.row.releaseNotes.description")}
+            >
+              <div data-action="settings-release-notes">
+                <Switch
+                  checked={settings.general.releaseNotes()}
+                  onChange={(checked) => settings.general.setReleaseNotes(checked)}
+                />
+              </div>
+            </SettingsRow>
+
+            <SettingsRow
+              title={language.t("settings.updates.row.check.title")}
+              description={language.t("settings.updates.row.check.description")}
+            >
+              <Button
+                size="small"
+                variant="secondary"
+                disabled={store.checking || !platform.checkUpdate}
+                onClick={check}
+              >
+                {store.checking
+                  ? language.t("settings.updates.action.checking")
+                  : language.t("settings.updates.action.checkNow")}
+              </Button>
+            </SettingsRow>
+          </div>
+        </div>
 
         <Show when={linux()}>
           {(_) => {

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

@@ -21,9 +21,6 @@ type KeybindMeta = {
   group: KeybindGroup
 }
 
-type KeybindMap = Record<string, string | undefined>
-type CommandContext = ReturnType<typeof useCommand>
-
 const GROUPS: KeybindGroup[] = ["General", "Session", "Navigation", "Model and agent", "Terminal", "Prompt"]
 
 type GroupKey =
@@ -110,150 +107,6 @@ function signatures(config: string | undefined) {
   return sigs
 }
 
-function keybinds(value: unknown): KeybindMap {
-  if (!value || typeof value !== "object" || Array.isArray(value)) return {}
-  return value as KeybindMap
-}
-
-function listFor(command: CommandContext, map: KeybindMap, palette: string) {
-  const out = new Map<string, KeybindMeta>()
-  out.set(PALETTE_ID, { title: palette, group: "General" })
-
-  for (const opt of command.catalog) {
-    if (opt.id.startsWith("suggested.")) continue
-    out.set(opt.id, { title: opt.title, group: groupFor(opt.id) })
-  }
-
-  for (const opt of command.options) {
-    if (opt.id.startsWith("suggested.")) continue
-    out.set(opt.id, { title: opt.title, group: groupFor(opt.id) })
-  }
-
-  for (const [id, value] of Object.entries(map)) {
-    if (typeof value !== "string") continue
-    if (out.has(id)) continue
-    out.set(id, { title: id, group: groupFor(id) })
-  }
-
-  return out
-}
-
-function groupedFor(list: Map<string, KeybindMeta>) {
-  const out = new Map<KeybindGroup, string[]>()
-  for (const group of GROUPS) out.set(group, [])
-
-  for (const [id, item] of list) {
-    const ids = out.get(item.group)
-    if (!ids) continue
-    ids.push(id)
-  }
-
-  for (const group of GROUPS) {
-    const ids = out.get(group)
-    if (!ids) continue
-    ids.sort((a, b) => (list.get(a)?.title ?? "").localeCompare(list.get(b)?.title ?? ""))
-  }
-
-  return out
-}
-
-function filteredFor(
-  query: string,
-  list: Map<string, KeybindMeta>,
-  grouped: Map<KeybindGroup, string[]>,
-  keybind: (id: string) => string,
-) {
-  const value = query.toLowerCase().trim()
-  if (!value) return grouped
-
-  const out = new Map<KeybindGroup, string[]>()
-  for (const group of GROUPS) out.set(group, [])
-
-  const items = Array.from(list.entries()).map(([id, meta]) => ({
-    id,
-    title: meta.title,
-    group: meta.group,
-    keybind: keybind(id),
-  }))
-
-  const results = fuzzysort.go(value, items, {
-    keys: ["title", "keybind"],
-    threshold: -10000,
-  })
-
-  for (const result of results) {
-    const ids = out.get(result.obj.group)
-    if (!ids) continue
-    ids.push(result.obj.id)
-  }
-
-  return out
-}
-
-function useKeyCapture(input: {
-  active: () => string | null
-  stop: () => void
-  set: (id: string, keybind: string) => void
-  used: () => Map<string, { id: string; title: string }[]>
-  language: ReturnType<typeof useLanguage>
-}) {
-  onMount(() => {
-    const handle = (event: KeyboardEvent) => {
-      const id = input.active()
-      if (!id) return
-
-      event.preventDefault()
-      event.stopPropagation()
-      event.stopImmediatePropagation()
-
-      if (event.key === "Escape") {
-        input.stop()
-        return
-      }
-
-      const clear =
-        (event.key === "Backspace" || event.key === "Delete") &&
-        !event.ctrlKey &&
-        !event.metaKey &&
-        !event.altKey &&
-        !event.shiftKey
-      if (clear) {
-        input.set(id, "none")
-        input.stop()
-        return
-      }
-
-      const next = recordKeybind(event)
-      if (!next) return
-
-      const conflicts = new Map<string, string>()
-      for (const sig of signatures(next)) {
-        for (const item of input.used().get(sig) ?? []) {
-          if (item.id === id) continue
-          conflicts.set(item.id, item.title)
-        }
-      }
-
-      if (conflicts.size > 0) {
-        showToast({
-          title: input.language.t("settings.shortcuts.conflict.title"),
-          description: input.language.t("settings.shortcuts.conflict.description", {
-            keybind: formatKeybind(next),
-            titles: [...conflicts.values()].join(", "),
-          }),
-        })
-        return
-      }
-
-      input.set(id, next)
-      input.stop()
-    }
-
-    document.addEventListener("keydown", handle, true)
-    onCleanup(() => document.removeEventListener("keydown", handle, true))
-  })
-}
-
 export const SettingsKeybinds: Component = () => {
   const command = useCommand()
   const language = useLanguage()
@@ -282,9 +135,11 @@ export const SettingsKeybinds: Component = () => {
     command.keybinds(false)
   }
 
-  const map = createMemo(() => keybinds(settings.current.keybinds))
-
-  const hasOverrides = createMemo(() => Object.values(map()).some((x) => typeof x === "string"))
+  const hasOverrides = createMemo(() => {
+    const keybinds = settings.current.keybinds as Record<string, string | undefined> | undefined
+    if (!keybinds) return false
+    return Object.values(keybinds).some((x) => typeof x === "string")
+  })
 
   const resetAll = () => {
     stop()
@@ -297,15 +152,88 @@ export const SettingsKeybinds: Component = () => {
 
   const list = createMemo(() => {
     language.locale()
-    return listFor(command, map(), language.t("command.palette"))
+    const out = new Map<string, KeybindMeta>()
+    out.set(PALETTE_ID, { title: language.t("command.palette"), group: "General" })
+
+    for (const opt of command.catalog) {
+      if (opt.id.startsWith("suggested.")) continue
+      out.set(opt.id, { title: opt.title, group: groupFor(opt.id) })
+    }
+
+    for (const opt of command.options) {
+      if (opt.id.startsWith("suggested.")) continue
+      out.set(opt.id, { title: opt.title, group: groupFor(opt.id) })
+    }
+
+    const keybinds = settings.current.keybinds as Record<string, string | undefined> | undefined
+    if (keybinds) {
+      for (const [id, value] of Object.entries(keybinds)) {
+        if (typeof value !== "string") continue
+        if (out.has(id)) continue
+        out.set(id, { title: id, group: groupFor(id) })
+      }
+    }
+
+    return out
   })
 
   const title = (id: string) => list().get(id)?.title ?? ""
 
-  const grouped = createMemo(() => groupedFor(list()))
+  const grouped = createMemo(() => {
+    const map = list()
+    const out = new Map<KeybindGroup, string[]>()
+
+    for (const group of GROUPS) out.set(group, [])
+
+    for (const [id, item] of map) {
+      const ids = out.get(item.group)
+      if (!ids) continue
+      ids.push(id)
+    }
+
+    for (const group of GROUPS) {
+      const ids = out.get(group)
+      if (!ids) continue
+
+      ids.sort((a, b) => {
+        const at = map.get(a)?.title ?? ""
+        const bt = map.get(b)?.title ?? ""
+        return at.localeCompare(bt)
+      })
+    }
+
+    return out
+  })
 
   const filtered = createMemo(() => {
-    return filteredFor(store.filter, list(), grouped(), (id) => command.keybind(id) || "")
+    const query = store.filter.toLowerCase().trim()
+    if (!query) return grouped()
+
+    const map = list()
+    const out = new Map<KeybindGroup, string[]>()
+
+    for (const group of GROUPS) out.set(group, [])
+
+    const items = Array.from(map.entries()).map(([id, meta]) => ({
+      id,
+      title: meta.title,
+      group: meta.group,
+      keybind: command.keybind(id) || "",
+    }))
+
+    const results = fuzzysort.go(query, items, {
+      keys: ["title", "keybind"],
+      threshold: -10000,
+    })
+
+    for (const result of results) {
+      const item = result.obj
+      const ids = out.get(item.group)
+      if (!ids) continue
+      ids.push(item.id)
+    }
+
+    return out
   })
 
   const hasResults = createMemo(() => {
@@ -354,14 +282,69 @@ export const SettingsKeybinds: Component = () => {
     return map
   })
 
-  const setKeybind = (id: string, keybind: string) => settings.keybinds.set(id, keybind)
+  const setKeybind = (id: string, keybind: string) => {
+    settings.keybinds.set(id, keybind)
+  }
 
-  useKeyCapture({
-    active: () => store.active,
-    stop,
-    set: setKeybind,
-    used,
-    language,
+  onMount(() => {
+    const handle = (event: KeyboardEvent) => {
+      const id = store.active
+      if (!id) return
+
+      event.preventDefault()
+      event.stopPropagation()
+      event.stopImmediatePropagation()
+
+      if (event.key === "Escape") {
+        stop()
+        return
+      }
+
+      const clear =
+        (event.key === "Backspace" || event.key === "Delete") &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        !event.altKey &&
+        !event.shiftKey
+      if (clear) {
+        setKeybind(id, "none")
+        stop()
+        return
+      }
+
+      const next = recordKeybind(event)
+      if (!next) return
+
+      const map = used()
+      const conflicts = new Map<string, string>()
+
+      for (const sig of signatures(next)) {
+        const list = map.get(sig) ?? []
+        for (const item of list) {
+          if (item.id === id) continue
+          conflicts.set(item.id, item.title)
+        }
+      }
+
+      if (conflicts.size > 0) {
+        showToast({
+          title: language.t("settings.shortcuts.conflict.title"),
+          description: language.t("settings.shortcuts.conflict.description", {
+            keybind: formatKeybind(next),
+            titles: [...conflicts.values()].join(", "),
+          }),
+        })
+        return
+      }
+
+      setKeybind(id, next)
+      stop()
+    }
+
+    document.addEventListener("keydown", handle, true)
+    onCleanup(() => {
+      document.removeEventListener("keydown", handle, true)
+    })
   })
 
   onCleanup(() => {

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

@@ -2,7 +2,6 @@ import { Component } from "solid-js"
 import { useLanguage } from "@/context/language"
 
 export const SettingsMcp: Component = () => {
-  // TODO: Replace this placeholder with full MCP settings controls.
   const language = useLanguage()
 
   return (

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

@@ -12,25 +12,6 @@ import { popularProviders } from "@/hooks/use-providers"
 
 type ModelItem = ReturnType<ReturnType<typeof useModels>["list"]>[number]
 
-const ListLoadingState: Component<{ label: string }> = (props) => {
-  return (
-    <div class="flex flex-col items-center justify-center py-12 text-center">
-      <span class="text-14-regular text-text-weak">{props.label}</span>
-    </div>
-  )
-}
-
-const ListEmptyState: Component<{ message: string; filter: string }> = (props) => {
-  return (
-    <div class="flex flex-col items-center justify-center py-12 text-center">
-      <span class="text-14-regular text-text-weak">{props.message}</span>
-      <Show when={props.filter}>
-        <span class="text-14-regular text-text-strong mt-1">&quot;{props.filter}&quot;</span>
-      </Show>
-    </div>
-  )
-}
-
 export const SettingsModels: Component = () => {
   const language = useLanguage()
   const models = useModels()
@@ -87,12 +68,24 @@ export const SettingsModels: Component = () => {
         <Show
           when={!list.grouped.loading}
           fallback={
-            <ListLoadingState label={`${language.t("common.loading")}${language.t("common.loading.ellipsis")}`} />
+            <div class="flex flex-col items-center justify-center py-12 text-center">
+              <span class="text-14-regular text-text-weak">
+                {language.t("common.loading")}
+                {language.t("common.loading.ellipsis")}
+              </span>
+            </div>
           }
         >
           <Show
             when={list.flat().length > 0}
-            fallback={<ListEmptyState message={language.t("dialog.model.empty")} filter={list.filter()} />}
+            fallback={
+              <div class="flex flex-col items-center justify-center py-12 text-center">
+                <span class="text-14-regular text-text-weak">{language.t("dialog.model.empty")}</span>
+                <Show when={list.filter()}>
+                  <span class="text-14-regular text-text-strong mt-1">&quot;{list.filter()}&quot;</span>
+                </Show>
+              </div>
+            }
           >
             <For each={list.grouped.latest}>
               {(group) => (

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

@@ -165,14 +165,12 @@ export const SettingsPermissions: Component = () => {
     const nextValue =
       existing && typeof existing === "object" && !Array.isArray(existing) ? { ...existing, "*": action } : action
 
-    const rollback = (err: unknown) => {
+    globalSync.set("config", "permission", { ...map, [id]: nextValue })
+    globalSync.updateConfig({ permission: { [id]: nextValue } }).catch((err: unknown) => {
       globalSync.set("config", "permission", before)
       const message = err instanceof Error ? err.message : String(err)
       showToast({ title: language.t("settings.permissions.toast.updateFailed.title"), description: message })
-    }
-
-    globalSync.set("config", "permission", { ...map, [id]: nextValue })
-    globalSync.updateConfig({ permission: { [id]: nextValue } }).catch(rollback)
+    })
   }
 
   return (

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

@@ -14,17 +14,7 @@ import { DialogSelectProvider } from "./dialog-select-provider"
 import { DialogCustomProvider } from "./dialog-custom-provider"
 
 type ProviderSource = "env" | "api" | "config" | "custom"
-type ProviderItem = ReturnType<ReturnType<typeof useProviders>["connected"]>[number]
-
-const PROVIDER_NOTES = [
-  { match: (id: string) => id === "opencode", key: "dialog.provider.opencode.note" },
-  { match: (id: string) => id === "anthropic", key: "dialog.provider.anthropic.note" },
-  { match: (id: string) => id.startsWith("github-copilot"), key: "dialog.provider.copilot.note" },
-  { match: (id: string) => id === "openai", key: "dialog.provider.openai.note" },
-  { match: (id: string) => id === "google", key: "dialog.provider.google.note" },
-  { match: (id: string) => id === "openrouter", key: "dialog.provider.openrouter.note" },
-  { match: (id: string) => id === "vercel", key: "dialog.provider.vercel.note" },
-] as const
+type ProviderMeta = { source?: ProviderSource }
 
 export const SettingsProviders: Component = () => {
   const dialog = useDialog()
@@ -54,28 +44,22 @@ export const SettingsProviders: Component = () => {
     return items
   })
 
-  const source = (item: ProviderItem): ProviderSource | undefined => {
-    if (!("source" in item)) return
-    const value = item.source
-    if (value === "env" || value === "api" || value === "config" || value === "custom") return value
-    return
-  }
+  const source = (item: unknown) => (item as ProviderMeta).source
 
-  const type = (item: ProviderItem) => {
+  const type = (item: unknown) => {
     const current = source(item)
     if (current === "env") return language.t("settings.providers.tag.environment")
     if (current === "api") return language.t("provider.connect.method.apiKey")
     if (current === "config") {
-      if (isConfigCustom(item.id)) return language.t("settings.providers.tag.custom")
+      const id = (item as { id?: string }).id
+      if (id && isConfigCustom(id)) return language.t("settings.providers.tag.custom")
       return language.t("settings.providers.tag.config")
     }
     if (current === "custom") return language.t("settings.providers.tag.custom")
     return language.t("settings.providers.tag.other")
   }
 
-  const canDisconnect = (item: ProviderItem) => source(item) !== "env"
-
-  const note = (id: string) => PROVIDER_NOTES.find((item) => item.match(id))?.key
+  const canDisconnect = (item: unknown) => source(item) !== "env"
 
   const isConfigCustom = (providerID: string) => {
     const provider = globalSync.data.config.provider?.[providerID]
@@ -191,8 +175,40 @@ export const SettingsProviders: Component = () => {
                         <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
                       </Show>
                     </div>
-                    <Show when={note(item.id)}>
-                      {(key) => <span class="text-12-regular text-text-weak pl-8">{language.t(key())}</span>}
+                    <Show when={item.id === "opencode"}>
+                      <span class="text-12-regular text-text-weak pl-8">
+                        {language.t("dialog.provider.opencode.note")}
+                      </span>
+                    </Show>
+                    <Show when={item.id === "anthropic"}>
+                      <span class="text-12-regular text-text-weak pl-8">
+                        {language.t("dialog.provider.anthropic.note")}
+                      </span>
+                    </Show>
+                    <Show when={item.id.startsWith("github-copilot")}>
+                      <span class="text-12-regular text-text-weak pl-8">
+                        {language.t("dialog.provider.copilot.note")}
+                      </span>
+                    </Show>
+                    <Show when={item.id === "openai"}>
+                      <span class="text-12-regular text-text-weak pl-8">
+                        {language.t("dialog.provider.openai.note")}
+                      </span>
+                    </Show>
+                    <Show when={item.id === "google"}>
+                      <span class="text-12-regular text-text-weak pl-8">
+                        {language.t("dialog.provider.google.note")}
+                      </span>
+                    </Show>
+                    <Show when={item.id === "openrouter"}>
+                      <span class="text-12-regular text-text-weak pl-8">
+                        {language.t("dialog.provider.openrouter.note")}
+                      </span>
+                    </Show>
+                    <Show when={item.id === "vercel"}>
+                      <span class="text-12-regular text-text-weak pl-8">
+                        {language.t("dialog.provider.vercel.note")}
+                      </span>
                     </Show>
                   </div>
                   <Button

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

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createSignal, For, onCleanup, Show, type Accessor, type JSXElement } from "solid-js"
+import { createEffect, createMemo, For, onCleanup, Show } from "solid-js"
 import { createStore, reconcile } from "solid-js/store"
 import { useNavigate } from "@solidjs/router"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -7,151 +7,16 @@ import { Tabs } from "@opencode-ai/ui/tabs"
 import { Button } from "@opencode-ai/ui/button"
 import { Switch } from "@opencode-ai/ui/switch"
 import { Icon } from "@opencode-ai/ui/icon"
-import { showToast } from "@opencode-ai/ui/toast"
 import { useSync } from "@/context/sync"
 import { useSDK } from "@/context/sdk"
 import { normalizeServerUrl, useServer } from "@/context/server"
 import { usePlatform } from "@/context/platform"
 import { useLanguage } from "@/context/language"
 import { DialogSelectServer } from "./dialog-select-server"
+import { showToast } from "@opencode-ai/ui/toast"
 import { ServerRow } from "@/components/server/server-row"
 import { checkServerHealth, 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: string[],
-  active: string | undefined,
-  status: Record<string, 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 (a === active) return -1
-    if (b === active) return 1
-    const diff = rank(status[a]) - rank(status[b])
-    if (diff !== 0) return diff
-    return (order.get(a) ?? 0) - (order.get(b) ?? 0)
-  })
-}
-
-const useServerHealth = (servers: Accessor<string[]>, fetcher: typeof fetch) => {
-  const [status, setStatus] = createStore({} as Record<string, ServerHealth | undefined>)
-
-  createEffect(() => {
-    const list = servers()
-    let dead = false
-
-    const refresh = async () => {
-      const results: Record<string, ServerHealth> = {}
-      await Promise.all(
-        list.map(async (url) => {
-          results[url] = await checkServerHealth(url, fetcher)
-        }),
-      )
-      if (dead) return
-      setStatus(reconcile(results))
-    }
-
-    void refresh()
-    const id = setInterval(() => void refresh(), pollMs)
-    onCleanup(() => {
-      dead = true
-      clearInterval(id)
-    })
-  })
-
-  return status
-}
-
-const useDefaultServerUrl = (
-  get: (() => string | Promise<string | null | undefined> | null | undefined) | undefined,
-) => {
-  const [url, setUrl] = createSignal<string | undefined>()
-  const [tick, setTick] = createSignal(0)
-
-  createEffect(() => {
-    tick()
-    let dead = false
-    const result = get?.()
-    if (!result) {
-      setUrl(undefined)
-      onCleanup(() => {
-        dead = true
-      })
-      return
-    }
-
-    if (result instanceof Promise) {
-      void result.then((next) => {
-        if (dead) return
-        setUrl(next ? normalizeServerUrl(next) : undefined)
-      })
-      onCleanup(() => {
-        dead = true
-      })
-      return
-    }
-
-    setUrl(normalizeServerUrl(result))
-    onCleanup(() => {
-      dead = true
-    })
-  })
-
-  return { url, refresh: () => setTick((value) => value + 1) }
-}
-
-const useMcpToggle = (input: {
-  sync: ReturnType<typeof useSync>
-  sdk: ReturnType<typeof useSDK>
-  language: ReturnType<typeof useLanguage>
-}) => {
-  const [loading, setLoading] = createSignal<string | null>(null)
-
-  const toggle = async (name: string) => {
-    if (loading()) return
-    setLoading(name)
-
-    try {
-      const status = input.sync.data.mcp[name]
-      await (status?.status === "connected"
-        ? input.sdk.client.mcp.disconnect({ name })
-        : input.sdk.client.mcp.connect({ name }))
-      const result = await input.sdk.client.mcp.status()
-      if (result.data) input.sync.set("mcp", result.data)
-    } catch (err) {
-      showToast({
-        variant: "error",
-        title: input.language.t("common.requestFailed"),
-        description: err instanceof Error ? err.message : String(err),
-      })
-    } finally {
-      setLoading(null)
-    }
-  }
-
-  return { loading, toggle }
-}
-
 export function StatusPopover() {
   const sync = useSync()
   const sdk = useSDK()
@@ -161,35 +26,115 @@ export function StatusPopover() {
   const language = useLanguage()
   const navigate = useNavigate()
 
+  const [store, setStore] = createStore({
+    status: {} as Record<string, ServerHealth | undefined>,
+    loading: null as string | null,
+    defaultServerUrl: undefined as string | undefined,
+  })
   const fetcher = platform.fetch ?? globalThis.fetch
+
   const servers = createMemo(() => {
     const current = server.url
     const list = server.list
     if (!current) return list
     if (!list.includes(current)) return [current, ...list]
-    return [current, ...list.filter((item) => item !== current)]
+    return [current, ...list.filter((x) => x !== current)]
   })
-  const health = useServerHealth(servers, fetcher)
-  const sortedServers = createMemo(() => listServersByHealth(servers(), server.url, health))
-  const mcp = useMcpToggle({ sync, sdk, language })
-  const defaultServer = useDefaultServerUrl(platform.getDefaultServerUrl)
-  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 sortedServers = createMemo(() => {
+    const list = servers()
+    if (!list.length) return list
+    const active = server.url
+    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 (a === active) return -1
+      if (b === active) return 1
+      const diff = rank(store.status[a]) - rank(store.status[b])
+      if (diff !== 0) return diff
+      return (order.get(a) ?? 0) - (order.get(b) ?? 0)
+    })
+  })
+
+  async function refreshHealth() {
+    const results: Record<string, ServerHealth> = {}
+    await Promise.all(
+      servers().map(async (url) => {
+        results[url] = await checkServerHealth(url, fetcher)
+      }),
+    )
+    setStore("status", reconcile(results))
+  }
+
+  createEffect(() => {
+    servers()
+    refreshHealth()
+    const interval = setInterval(refreshHealth, 10_000)
+    onCleanup(() => clearInterval(interval))
+  })
+
+  const mcpItems = createMemo(() =>
+    Object.entries(sync.data.mcp ?? {})
+      .map(([name, status]) => ({ name, status: status.status }))
+      .sort((a, b) => a.name.localeCompare(b.name)),
+  )
+
+  const mcpConnected = createMemo(() => mcpItems().filter((i) => i.status === "connected").length)
+
+  const toggleMcp = async (name: string) => {
+    if (store.loading) return
+    setStore("loading", name)
+
+    try {
+      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)
+    } catch (err) {
+      showToast({
+        variant: "error",
+        title: language.t("common.requestFailed"),
+        description: err instanceof Error ? err.message : String(err),
+      })
+    } finally {
+      setStore("loading", null)
+    }
+  }
+
   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 anyMcpIssue = mcpNames().some((name) => {
-      const status = mcpStatus(name)
-      return status !== "connected" && status !== "disabled"
-    })
+    const anyMcpIssue = mcpItems().some((m) => m.status !== "connected" && m.status !== "disabled")
     return serverHealthy && !anyMcpIssue
   })
 
+  const serverCount = createMemo(() => sortedServers().length)
+
+  const refreshDefaultServerUrl = () => {
+    const result = platform.getDefaultServerUrl?.()
+    if (!result) {
+      setStore("defaultServerUrl", undefined)
+      return
+    }
+    if (result instanceof Promise) {
+      result.then((url) => setStore("defaultServerUrl", url ? normalizeServerUrl(url) : undefined))
+      return
+    }
+    setStore("defaultServerUrl", normalizeServerUrl(result))
+  }
+
+  createEffect(() => {
+    refreshDefaultServerUrl()
+  })
+
   return (
     <Popover
       triggerAs={Button}
@@ -228,7 +173,7 @@ export function StatusPopover() {
         >
           <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} ` : ""}
+              {serverCount() > 0 ? `${serverCount()} ` : ""}
               {language.t("status.popover.tab.servers")}
             </Tabs.Trigger>
             <Tabs.Trigger value="mcp" data-slot="tab" class="text-12-regular">
@@ -250,7 +195,11 @@ export function StatusPopover() {
               <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
                 <For each={sortedServers()}>
                   {(url) => {
-                    const isBlocked = () => health[url]?.healthy === false
+                    const isActive = () => url === server.url
+                    const isDefault = () => url === store.defaultServerUrl
+                    const status = () => store.status[url]
+                    const isBlocked = () => status()?.healthy === false
+
                     return (
                       <button
                         type="button"
@@ -268,13 +217,13 @@ export function StatusPopover() {
                       >
                         <ServerRow
                           url={url}
-                          status={health[url]}
+                          status={status()}
                           dimmed={isBlocked()}
                           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={url === defaultServer.url()}>
+                            <Show when={isDefault()}>
                               <span class="text-11-regular text-text-base bg-surface-base px-1.5 py-0.5 rounded-md">
                                 {language.t("common.default")}
                               </span>
@@ -282,7 +231,7 @@ export function StatusPopover() {
                           }
                         >
                           <div class="flex-1" />
-                          <Show when={url === server.url}>
+                          <Show when={isActive()}>
                             <Icon name="check" size="small" class="text-icon-weak shrink-0" />
                           </Show>
                         </ServerRow>
@@ -294,7 +243,7 @@ export function StatusPopover() {
                 <Button
                   variant="secondary"
                   class="mt-3 self-start h-8 px-3 py-1.5"
-                  onClick={() => dialog.show(() => <DialogSelectServer />, defaultServer.refresh)}
+                  onClick={() => dialog.show(() => <DialogSelectServer />, refreshDefaultServerUrl)}
                 >
                   {language.t("status.popover.action.manageServers")}
                 </Button>
@@ -306,40 +255,39 @@ export function StatusPopover() {
             <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}
+                  when={mcpItems().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"
+                  <For each={mcpItems()}>
+                    {(item) => {
+                      const enabled = () => item.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={() => mcp.toggle(name)}
-                          disabled={mcp.loading() === name}
+                          onClick={() => toggleMcp(item.name)}
+                          disabled={store.loading === item.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-success-base": item.status === "connected",
+                              "bg-icon-critical-base": item.status === "failed",
+                              "bg-border-weak-base": item.status === "disabled",
                               "bg-icon-warning-base":
-                                status() === "needs_auth" || status() === "needs_client_registration",
+                                item.status === "needs_auth" || item.status === "needs_client_registration",
                             }}
                           />
-                          <span class="text-14-regular text-text-base truncate flex-1">{name}</span>
+                          <span class="text-14-regular text-text-base truncate flex-1">{item.name}</span>
                           <div onClick={(event) => event.stopPropagation()}>
                             <Switch
                               checked={enabled()}
-                              disabled={mcp.loading() === name}
-                              onChange={() => mcp.toggle(name)}
+                              disabled={store.loading === item.name}
+                              onChange={() => toggleMcp(item.name)}
                             />
                           </div>
                         </button>
@@ -386,7 +334,23 @@ export function StatusPopover() {
               <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>}
+                  fallback={
+                    <div class="text-14-regular text-text-base text-center my-auto">
+                      {(() => {
+                        const value = language.t("dialog.plugins.empty")
+                        const file = "opencode.json"
+                        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)}
+                          </>
+                        )
+                      })()}
+                    </div>
+                  }
                 >
                   <For each={plugins()}>
                     {(plugin) => (

packages/app/src/components/terminal.tsx

@@ -10,7 +10,6 @@ import { resolveThemeVariant, useTheme, withAlpha, type HexColor } from "@openco
 import { useLanguage } from "@/context/language"
 import { showToast } from "@opencode-ai/ui/toast"
 import { disposeIfDisposable, getHoveredLinkText, setOptionIfSupported } from "@/utils/runtime-adapters"
-import { terminalWriter } from "@/utils/terminal-writer"
 
 const TOGGLE_TERMINAL_ID = "terminal.toggle"
 const DEFAULT_TOGGLE_TERMINAL_KEYBIND = "ctrl+`"
@@ -57,91 +56,6 @@ const DEFAULT_TERMINAL_COLORS: Record<"light" | "dark", TerminalColors> = {
   },
 }
 
-const debugTerminal = (...values: unknown[]) => {
-  if (!import.meta.env.DEV) return
-  console.debug("[terminal]", ...values)
-}
-
-const useTerminalUiBindings = (input: {
-  container: HTMLDivElement
-  term: Term
-  cleanups: VoidFunction[]
-  handlePointerDown: () => void
-  handleLinkClick: (event: MouseEvent) => void
-}) => {
-  const handleCopy = (event: ClipboardEvent) => {
-    const selection = input.term.getSelection()
-    if (!selection) return
-
-    const clipboard = event.clipboardData
-    if (!clipboard) return
-
-    event.preventDefault()
-    clipboard.setData("text/plain", selection)
-  }
-
-  const handlePaste = (event: ClipboardEvent) => {
-    const clipboard = event.clipboardData
-    const text = clipboard?.getData("text/plain") ?? clipboard?.getData("text") ?? ""
-    if (!text) return
-
-    event.preventDefault()
-    event.stopPropagation()
-    input.term.paste(text)
-  }
-
-  const handleTextareaFocus = () => {
-    input.term.options.cursorBlink = true
-  }
-  const handleTextareaBlur = () => {
-    input.term.options.cursorBlink = false
-  }
-
-  input.container.addEventListener("copy", handleCopy, true)
-  input.cleanups.push(() => input.container.removeEventListener("copy", handleCopy, true))
-
-  input.container.addEventListener("paste", handlePaste, true)
-  input.cleanups.push(() => input.container.removeEventListener("paste", handlePaste, true))
-
-  input.container.addEventListener("pointerdown", input.handlePointerDown)
-  input.cleanups.push(() => input.container.removeEventListener("pointerdown", input.handlePointerDown))
-
-  input.container.addEventListener("click", input.handleLinkClick, { capture: true })
-  input.cleanups.push(() => input.container.removeEventListener("click", input.handleLinkClick, { capture: true }))
-
-  input.term.textarea?.addEventListener("focus", handleTextareaFocus)
-  input.term.textarea?.addEventListener("blur", handleTextareaBlur)
-  input.cleanups.push(() => input.term.textarea?.removeEventListener("focus", handleTextareaFocus))
-  input.cleanups.push(() => input.term.textarea?.removeEventListener("blur", handleTextareaBlur))
-}
-
-const persistTerminal = (input: {
-  term: Term | undefined
-  addon: SerializeAddon | undefined
-  cursor: number
-  pty: LocalPTY
-  onCleanup?: (pty: LocalPTY) => void
-}) => {
-  if (!input.addon || !input.onCleanup || !input.term) return
-  const buffer = (() => {
-    try {
-      return input.addon.serialize()
-    } catch {
-      debugTerminal("failed to serialize terminal buffer")
-      return ""
-    }
-  })()
-
-  input.onCleanup({
-    ...input.pty,
-    buffer,
-    cursor: input.cursor,
-    rows: input.term.rows,
-    cols: input.term.cols,
-    scrollY: input.term.getViewportY(),
-  })
-}
-
 export const Terminal = (props: TerminalProps) => {
   const platform = usePlatform()
   const sdk = useSDK()
@@ -156,12 +70,13 @@ export const Terminal = (props: TerminalProps) => {
   let serializeAddon: SerializeAddon
   let fitAddon: FitAddon
   let handleResize: () => void
+  let handleTextareaFocus: () => void
+  let handleTextareaBlur: () => void
   let disposed = false
   const cleanups: VoidFunction[] = []
   const start =
     typeof local.pty.cursor === "number" && Number.isSafeInteger(local.pty.cursor) ? local.pty.cursor : undefined
   let cursor = start ?? 0
-  let output: ReturnType<typeof terminalWriter> | undefined
 
   const cleanup = () => {
     if (!cleanups.length) return
@@ -169,23 +84,12 @@ export const Terminal = (props: TerminalProps) => {
     for (const fn of fns) {
       try {
         fn()
-      } catch (err) {
-        debugTerminal("cleanup failed", err)
+      } catch {
+        // ignore
       }
     }
   }
 
-  const pushSize = (cols: number, rows: number) => {
-    return sdk.client.pty
-      .update({
-        ptyID: local.pty.id,
-        size: { cols, rows },
-      })
-      .catch((err) => {
-        debugTerminal("failed to sync terminal size", err)
-      })
-  }
-
   const getTerminalColors = (): TerminalColors => {
     const mode = theme.mode() === "dark" ? "dark" : "light"
     const fallback = DEFAULT_TERMINAL_COLORS[mode]
@@ -302,7 +206,7 @@ export const Terminal = (props: TerminalProps) => {
         fontSize: 14,
         fontFamily: monoFontFamily(settings.appearance.font()),
         allowTransparency: false,
-        convertEol: false,
+        convertEol: true,
         theme: terminalColors(),
         scrollback: 10_000,
         ghostty: g,
@@ -314,7 +218,27 @@ export const Terminal = (props: TerminalProps) => {
       }
       ghostty = g
       term = t
-      output = terminalWriter((data) => t.write(data))
+
+      const handleCopy = (event: ClipboardEvent) => {
+        const selection = t.getSelection()
+        if (!selection) return
+
+        const clipboard = event.clipboardData
+        if (!clipboard) return
+
+        event.preventDefault()
+        clipboard.setData("text/plain", selection)
+      }
+
+      const handlePaste = (event: ClipboardEvent) => {
+        const clipboard = event.clipboardData
+        const text = clipboard?.getData("text/plain") ?? clipboard?.getData("text") ?? ""
+        if (!text) return
+
+        event.preventDefault()
+        event.stopPropagation()
+        t.paste(text)
+      }
 
       t.attachCustomKeyEventHandler((event) => {
         const key = event.key.toLowerCase()
@@ -331,6 +255,12 @@ export const Terminal = (props: TerminalProps) => {
         return matchKeybind(keybinds, event)
       })
 
+      container.addEventListener("copy", handleCopy, true)
+      cleanups.push(() => container.removeEventListener("copy", handleCopy, true))
+
+      container.addEventListener("paste", handlePaste, true)
+      cleanups.push(() => container.removeEventListener("paste", handlePaste, true))
+
       const fit = new mod.FitAddon()
       const serializer = new SerializeAddon()
       cleanups.push(() => disposeIfDisposable(fit))
@@ -340,7 +270,24 @@ export const Terminal = (props: TerminalProps) => {
       serializeAddon = serializer
 
       t.open(container)
-      useTerminalUiBindings({ container, term: t, cleanups, handlePointerDown, handleLinkClick })
+
+      container.addEventListener("pointerdown", handlePointerDown)
+      cleanups.push(() => container.removeEventListener("pointerdown", handlePointerDown))
+
+      container.addEventListener("click", handleLinkClick, { capture: true })
+      cleanups.push(() => container.removeEventListener("click", handleLinkClick, { capture: true }))
+
+      handleTextareaFocus = () => {
+        t.options.cursorBlink = true
+      }
+      handleTextareaBlur = () => {
+        t.options.cursorBlink = false
+      }
+
+      t.textarea?.addEventListener("focus", handleTextareaFocus)
+      t.textarea?.addEventListener("blur", handleTextareaBlur)
+      cleanups.push(() => t.textarea?.removeEventListener("focus", handleTextareaFocus))
+      cleanups.push(() => t.textarea?.removeEventListener("blur", handleTextareaBlur))
 
       focusTerminal()
 
@@ -369,7 +316,15 @@ export const Terminal = (props: TerminalProps) => {
 
       const onResize = t.onResize(async (size) => {
         if (socket.readyState === WebSocket.OPEN) {
-          await pushSize(size.cols, size.rows)
+          await sdk.client.pty
+            .update({
+              ptyID: local.pty.id,
+              size: {
+                cols: size.cols,
+                rows: size.rows,
+              },
+            })
+            .catch(() => {})
         }
       })
       cleanups.push(() => disposeIfDisposable(onResize))
@@ -391,7 +346,15 @@ export const Terminal = (props: TerminalProps) => {
 
       const handleOpen = () => {
         local.onConnect?.()
-        void pushSize(t.cols, t.rows)
+        sdk.client.pty
+          .update({
+            ptyID: local.pty.id,
+            size: {
+              cols: t.cols,
+              rows: t.rows,
+            },
+          })
+          .catch(() => {})
       }
       socket.addEventListener("open", handleOpen)
       cleanups.push(() => socket.removeEventListener("open", handleOpen))
@@ -411,15 +374,15 @@ export const Terminal = (props: TerminalProps) => {
             if (typeof next === "number" && Number.isSafeInteger(next) && next >= 0) {
               cursor = next
             }
-          } catch (err) {
-            debugTerminal("invalid websocket control frame", err)
+          } catch {
+            // ignore
           }
           return
         }
 
         const data = typeof event.data === "string" ? event.data : ""
         if (!data) return
-        output?.push(data)
+        t.write(data)
         cursor += data.length
       }
       socket.addEventListener("message", handleMessage)
@@ -462,8 +425,25 @@ export const Terminal = (props: TerminalProps) => {
 
   onCleanup(() => {
     disposed = true
-    output?.flush()
-    persistTerminal({ term, addon: serializeAddon, cursor, pty: local.pty, onCleanup: props.onCleanup })
+    const t = term
+    if (serializeAddon && props.onCleanup && t) {
+      const buffer = (() => {
+        try {
+          return serializeAddon.serialize()
+        } catch {
+          return ""
+        }
+      })()
+      props.onCleanup({
+        ...local.pty,
+        buffer,
+        cursor,
+        rows: t.rows,
+        cols: t.cols,
+        scrollY: t.getViewportY(),
+      })
+    }
+
     cleanup()
   })
 

packages/app/src/components/titlebar.tsx

@@ -13,28 +13,6 @@ import { useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { applyPath, backPath, forwardPath } from "./titlebar-history"
 
-type TauriDesktopWindow = {
-  startDragging?: () => Promise<void>
-  toggleMaximize?: () => Promise<void>
-}
-
-type TauriThemeWindow = {
-  setTheme?: (theme?: "light" | "dark" | null) => Promise<void>
-}
-
-type TauriApi = {
-  window?: {
-    getCurrentWindow?: () => TauriDesktopWindow
-  }
-  webviewWindow?: {
-    getCurrentWebviewWindow?: () => TauriThemeWindow
-  }
-}
-
-const tauriApi = () => (window as unknown as { __TAURI__?: TauriApi }).__TAURI__
-const currentDesktopWindow = () => tauriApi()?.window?.getCurrentWindow?.()
-const currentThemeWindow = () => tauriApi()?.webviewWindow?.getCurrentWebviewWindow?.()
-
 export function Titlebar() {
   const layout = useLayout()
   const platform = usePlatform()
@@ -104,7 +82,22 @@ export function Titlebar() {
 
   const getWin = () => {
     if (platform.platform !== "desktop") return
-    return currentDesktopWindow()
+
+    const tauri = (
+      window as unknown as {
+        __TAURI__?: {
+          window?: {
+            getCurrentWindow?: () => {
+              startDragging?: () => Promise<void>
+              toggleMaximize?: () => Promise<void>
+            }
+          }
+        }
+      }
+    ).__TAURI__
+    if (!tauri?.window?.getCurrentWindow) return
+
+    return tauri.window.getCurrentWindow()
   }
 
   createEffect(() => {
@@ -113,8 +106,13 @@ export function Titlebar() {
     const scheme = theme.colorScheme()
     const value = scheme === "system" ? null : scheme
 
-    const win = currentThemeWindow()
-    if (!win?.setTheme) return
+    const tauri = (window as unknown as { __TAURI__?: { webviewWindow?: { getCurrentWebviewWindow?: () => unknown } } })
+      .__TAURI__
+    const get = tauri?.webviewWindow?.getCurrentWebviewWindow
+    if (!get) return
+
+    const win = get() as { setTheme?: (theme?: "light" | "dark" | null) => Promise<void> }
+    if (!win.setTheme) return
 
     void win.setTheme(value).catch(() => undefined)
   })

packages/app/src/context/command.tsx

@@ -11,7 +11,6 @@ const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(na
 const PALETTE_ID = "command.palette"
 const DEFAULT_PALETTE_KEYBIND = "mod+shift+p"
 const SUGGESTED_PREFIX = "suggested."
-const EDITABLE_KEYBIND_IDS = new Set(["terminal.toggle", "terminal.new"])
 
 function actionId(id: string) {
   if (!id.startsWith(SUGGESTED_PREFIX)) return id
@@ -34,11 +33,6 @@ function signatureFromEvent(event: KeyboardEvent) {
   return signature(normalizeKey(event.key), event.ctrlKey, event.metaKey, event.shiftKey, event.altKey)
 }
 
-function isAllowedEditableKeybind(id: string | undefined) {
-  if (!id) return false
-  return EDITABLE_KEYBIND_IDS.has(actionId(id))
-}
-
 export type KeybindConfig = string
 
 export interface Keybind {
@@ -62,8 +56,6 @@ export interface CommandOption {
   onHighlight?: () => (() => void) | void
 }
 
-type CommandSource = "palette" | "keybind" | "slash"
-
 export type CommandCatalogItem = {
   title: string
   description?: string
@@ -177,14 +169,6 @@ export function formatKeybind(config: string): string {
   return IS_MAC ? parts.join("") : parts.join("+")
 }
 
-function isEditableTarget(target: EventTarget | null) {
-  if (!(target instanceof HTMLElement)) return false
-  if (target.isContentEditable) return true
-  if (target.closest("[contenteditable='true']")) return true
-  if (target.closest("input, textarea, select")) return true
-  return false
-}
-
 export const { use: useCommand, provider: CommandProvider } = createSimpleContext({
   name: "Command",
   init: () => {
@@ -291,18 +275,13 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
       return map
     })
 
-    const optionMap = createMemo(() => {
-      const map = new Map<string, CommandOption>()
+    const run = (id: string, source?: "palette" | "keybind" | "slash") => {
       for (const option of options()) {
-        map.set(option.id, option)
-        map.set(actionId(option.id), option)
+        if (option.id === id || option.id === "suggested." + id) {
+          option.onSelect?.(source)
+          return
+        }
       }
-      return map
-    })
-
-    const run = (id: string, source?: CommandSource) => {
-      const option = optionMap().get(id)
-      option?.onSelect?.(source)
     }
 
     const showPalette = () => {
@@ -313,18 +292,14 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
       if (suspended() || dialog.active) return
 
       const sig = signatureFromEvent(event)
-      const isPalette = palette().has(sig)
-      const option = keymap().get(sig)
-      const modified = event.ctrlKey || event.metaKey || event.altKey
 
-      if (isEditableTarget(event.target) && !isPalette && !isAllowedEditableKeybind(option?.id) && !modified) return
-
-      if (isPalette) {
+      if (palette().has(sig)) {
         event.preventDefault()
         showPalette()
         return
       }
 
+      const option = keymap().get(sig)
       if (!option) return
       event.preventDefault()
       option.onSelect?.("keybind")
@@ -357,7 +332,7 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
 
     return {
       register,
-      trigger(id: string, source?: CommandSource) {
+      trigger(id: string, source?: "palette" | "keybind" | "slash") {
         run(id, source)
       },
       keybind(id: string) {
@@ -376,7 +351,7 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
       },
       show: showPalette,
       keybinds(enabled: boolean) {
-        setStore("suspendCount", (count) => Math.max(0, count + (enabled ? -1 : 1)))
+        setStore("suspendCount", (count) => count + (enabled ? -1 : 1))
       },
       suspended,
       get catalog() {

packages/app/src/context/comments.test.ts

@@ -109,45 +109,4 @@ describe("comments session indexing", () => {
       dispose()
     })
   })
-
-  test("remove keeps focus when same comment id exists in another file", () => {
-    createRoot((dispose) => {
-      const comments = createCommentSessionForTest({
-        "a.ts": [line("a.ts", "shared", 10)],
-        "b.ts": [line("b.ts", "shared", 20)],
-      })
-
-      comments.setFocus({ file: "b.ts", id: "shared" })
-      comments.remove("a.ts", "shared")
-
-      expect(comments.focus()).toEqual({ file: "b.ts", id: "shared" })
-      expect(comments.list("a.ts")).toEqual([])
-      expect(comments.list("b.ts").map((item) => item.id)).toEqual(["shared"])
-
-      dispose()
-    })
-  })
-
-  test("setFocus and setActive updater callbacks receive current state", () => {
-    createRoot((dispose) => {
-      const comments = createCommentSessionForTest()
-
-      comments.setFocus({ file: "a.ts", id: "a1" })
-      comments.setFocus((current) => {
-        expect(current).toEqual({ file: "a.ts", id: "a1" })
-        return { file: "b.ts", id: "b1" }
-      })
-
-      comments.setActive({ file: "c.ts", id: "c1" })
-      comments.setActive((current) => {
-        expect(current).toEqual({ file: "c.ts", id: "c1" })
-        return null
-      })
-
-      expect(comments.focus()).toEqual({ file: "b.ts", id: "b1" })
-      expect(comments.active()).toBeNull()
-
-      dispose()
-    })
-  })
 })

packages/app/src/context/comments.tsx

@@ -1,4 +1,4 @@
-import { batch, createMemo, createRoot, onCleanup } from "solid-js"
+import { batch, createEffect, createMemo, createRoot, onCleanup } from "solid-js"
 import { createStore, reconcile, type SetStoreFunction, type Store } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useParams } from "@solidjs/router"
@@ -20,19 +20,6 @@ type CommentFocus = { file: string; id: string }
 const WORKSPACE_KEY = "__workspace__"
 const MAX_COMMENT_SESSIONS = 20
 
-function sessionKey(dir: string, id: string | undefined) {
-  return `${dir}\n${id ?? WORKSPACE_KEY}`
-}
-
-function decodeSessionKey(key: string) {
-  const split = key.lastIndexOf("\n")
-  if (split < 0) return { dir: key, id: WORKSPACE_KEY }
-  return {
-    dir: key.slice(0, split),
-    id: key.slice(split + 1),
-  }
-}
-
 type CommentStore = {
   comments: Record<string, LineComment[]>
 }
@@ -44,24 +31,24 @@ function aggregate(comments: Record<string, LineComment[]>) {
     .sort((a, b) => a.time - b.time)
 }
 
+function insert(items: LineComment[], next: LineComment) {
+  const index = items.findIndex((item) => item.time > next.time)
+  if (index < 0) return [...items, next]
+  return [...items.slice(0, index), next, ...items.slice(index)]
+}
+
 function createCommentSessionState(store: Store<CommentStore>, setStore: SetStoreFunction<CommentStore>) {
   const [state, setState] = createStore({
     focus: null as CommentFocus | null,
     active: null as CommentFocus | null,
+    all: aggregate(store.comments),
   })
 
-  const all = () => aggregate(store.comments)
-
-  const setRef = (
-    key: "focus" | "active",
-    value: CommentFocus | null | ((value: CommentFocus | null) => CommentFocus | null),
-  ) => setState(key, value)
-
   const setFocus = (value: CommentFocus | null | ((value: CommentFocus | null) => CommentFocus | null)) =>
-    setRef("focus", value)
+    setState("focus", value)
 
   const setActive = (value: CommentFocus | null | ((value: CommentFocus | null) => CommentFocus | null)) =>
-    setRef("active", value)
+    setState("active", value)
 
   const list = (file: string) => store.comments[file] ?? []
 
@@ -74,6 +61,7 @@ function createCommentSessionState(store: Store<CommentStore>, setStore: SetStor
 
     batch(() => {
       setStore("comments", input.file, (items) => [...(items ?? []), next])
+      setState("all", (items) => insert(items, next))
       setFocus({ file: input.file, id: next.id })
     })
 
@@ -83,13 +71,15 @@ function createCommentSessionState(store: Store<CommentStore>, setStore: SetStor
   const remove = (file: string, id: string) => {
     batch(() => {
       setStore("comments", file, (items) => (items ?? []).filter((item) => item.id !== id))
-      setFocus((current) => (current?.file === file && current.id === id ? null : current))
+      setState("all", (items) => items.filter((item) => !(item.file === file && item.id === id)))
+      setFocus((current) => (current?.id === id ? null : current))
     })
   }
 
   const clear = () => {
     batch(() => {
       setStore("comments", reconcile({}))
+      setState("all", [])
       setFocus(null)
       setActive(null)
     })
@@ -97,16 +87,17 @@ function createCommentSessionState(store: Store<CommentStore>, setStore: SetStor
 
   return {
     list,
-    all,
+    all: () => state.all,
     add,
     remove,
     clear,
     focus: () => state.focus,
     setFocus,
-    clearFocus: () => setRef("focus", null),
+    clearFocus: () => setFocus(null),
     active: () => state.active,
     setActive,
-    clearActive: () => setRef("active", null),
+    clearActive: () => setActive(null),
+    reindex: () => setState("all", aggregate(store.comments)),
   }
 }
 
@@ -126,6 +117,11 @@ function createCommentSession(dir: string, id: string | undefined) {
   )
   const session = createCommentSessionState(store, setStore)
 
+  createEffect(() => {
+    if (!ready()) return
+    session.reindex()
+  })
+
   return {
     ready,
     list: session.list,
@@ -149,9 +145,11 @@ export const { use: useComments, provider: CommentsProvider } = createSimpleCont
     const params = useParams()
     const cache = createScopedCache(
       (key) => {
-        const decoded = decodeSessionKey(key)
+        const split = key.lastIndexOf("\n")
+        const dir = split >= 0 ? key.slice(0, split) : key
+        const id = split >= 0 ? key.slice(split + 1) : WORKSPACE_KEY
         return createRoot((dispose) => ({
-          value: createCommentSession(decoded.dir, decoded.id === WORKSPACE_KEY ? undefined : decoded.id),
+          value: createCommentSession(dir, id === WORKSPACE_KEY ? undefined : id),
           dispose,
         }))
       },
@@ -164,7 +162,7 @@ export const { use: useComments, provider: CommentsProvider } = createSimpleCont
     onCleanup(() => cache.clear())
 
     const load = (dir: string, id: string | undefined) => {
-      const key = sessionKey(dir, id)
+      const key = `${dir}\n${id ?? WORKSPACE_KEY}`
       return cache.get(key).value
     }
 

packages/app/src/context/file.tsx

@@ -43,12 +43,6 @@ export {
   touchFileContent,
 }
 
-function errorMessage(error: unknown) {
-  if (error instanceof Error && error.message) return error.message
-  if (typeof error === "string" && error) return error
-  return "Unknown error"
-}
-
 export const { use: useFile, provider: FileProvider } = createSimpleContext({
   name: "File",
   gate: false,
@@ -116,45 +110,6 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
       setStore("file", file, { path: file, name: getFilename(file) })
     }
 
-    const setLoading = (file: string) => {
-      setStore(
-        "file",
-        file,
-        produce((draft) => {
-          draft.loading = true
-          draft.error = undefined
-        }),
-      )
-    }
-
-    const setLoaded = (file: string, content: FileState["content"]) => {
-      setStore(
-        "file",
-        file,
-        produce((draft) => {
-          draft.loaded = true
-          draft.loading = false
-          draft.content = content
-        }),
-      )
-    }
-
-    const setLoadError = (file: string, message: string) => {
-      setStore(
-        "file",
-        file,
-        produce((draft) => {
-          draft.loading = false
-          draft.error = message
-        }),
-      )
-      showToast({
-        variant: "error",
-        title: language.t("toast.file.loadFailed.title"),
-        description: message,
-      })
-    }
-
     const load = (input: string, options?: { force?: boolean }) => {
       const file = path.normalize(input)
       if (!file) return Promise.resolve()
@@ -169,14 +124,29 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
       const pending = inflight.get(key)
       if (pending) return pending
 
-      setLoading(file)
+      setStore(
+        "file",
+        file,
+        produce((draft) => {
+          draft.loading = true
+          draft.error = undefined
+        }),
+      )
 
       const promise = sdk.client.file
         .read({ path: file })
         .then((x) => {
           if (scope() !== directory) return
           const content = x.data
-          setLoaded(file, content)
+          setStore(
+            "file",
+            file,
+            produce((draft) => {
+              draft.loaded = true
+              draft.loading = false
+              draft.content = content
+            }),
+          )
 
           if (!content) return
           touchFileContent(file, approxBytes(content))
@@ -184,7 +154,19 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
         })
         .catch((e) => {
           if (scope() !== directory) return
-          setLoadError(file, errorMessage(e))
+          setStore(
+            "file",
+            file,
+            produce((draft) => {
+              draft.loading = false
+              draft.error = e.message
+            }),
+          )
+          showToast({
+            variant: "error",
+            title: language.t("toast.file.loadFailed.title"),
+            description: e.message,
+          })
         })
         .finally(() => {
           inflight.delete(key)
@@ -229,16 +211,21 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
       return state
     }
 
-    function withPath(input: string, action: (file: string) => unknown) {
-      return action(path.normalize(input))
+    const scrollTop = (input: string) => view().scrollTop(path.normalize(input))
+    const scrollLeft = (input: string) => view().scrollLeft(path.normalize(input))
+    const selectedLines = (input: string) => view().selectedLines(path.normalize(input))
+
+    const setScrollTop = (input: string, top: number) => {
+      view().setScrollTop(path.normalize(input), top)
+    }
+
+    const setScrollLeft = (input: string, left: number) => {
+      view().setScrollLeft(path.normalize(input), left)
+    }
+
+    const setSelectedLines = (input: string, range: SelectedLineRange | null) => {
+      view().setSelectedLines(path.normalize(input), range)
     }
-    const scrollTop = (input: string) => withPath(input, (file) => view().scrollTop(file))
-    const scrollLeft = (input: string) => withPath(input, (file) => view().scrollLeft(file))
-    const selectedLines = (input: string) => withPath(input, (file) => view().selectedLines(file))
-    const setScrollTop = (input: string, top: number) => withPath(input, (file) => view().setScrollTop(file, top))
-    const setScrollLeft = (input: string, left: number) => withPath(input, (file) => view().setScrollLeft(file, left))
-    const setSelectedLines = (input: string, range: SelectedLineRange | null) =>
-      withPath(input, (file) => view().setSelectedLines(file, range))
 
     onCleanup(() => {
       stop()

packages/app/src/context/file/view-cache.ts

@@ -23,16 +23,6 @@ function normalizeSelectedLines(range: SelectedLineRange): SelectedLineRange {
   }
 }
 
-function equalSelectedLines(a: SelectedLineRange | null | undefined, b: SelectedLineRange | null | undefined) {
-  if (!a && !b) return true
-  if (!a || !b) return false
-  const left = normalizeSelectedLines(a)
-  const right = normalizeSelectedLines(b)
-  return (
-    left.start === right.start && left.end === right.end && left.side === right.side && left.endSide === right.endSide
-  )
-}
-
 function createViewSession(dir: string, id: string | undefined) {
   const legacyViewKey = `${dir}/file${id ? "/" + id : ""}.v1`
 
@@ -75,36 +65,36 @@ function createViewSession(dir: string, id: string | undefined) {
   const selectedLines = (path: string) => view.file[path]?.selectedLines
 
   const setScrollTop = (path: string, top: number) => {
-    setView(
-      produce((draft) => {
-        const file = draft.file[path] ?? (draft.file[path] = {})
-        if (file.scrollTop === top) return
-        file.scrollTop = top
-      }),
-    )
+    setView("file", path, (current) => {
+      if (current?.scrollTop === top) return current
+      return {
+        ...(current ?? {}),
+        scrollTop: top,
+      }
+    })
     pruneView(path)
   }
 
   const setScrollLeft = (path: string, left: number) => {
-    setView(
-      produce((draft) => {
-        const file = draft.file[path] ?? (draft.file[path] = {})
-        if (file.scrollLeft === left) return
-        file.scrollLeft = left
-      }),
-    )
+    setView("file", path, (current) => {
+      if (current?.scrollLeft === left) return current
+      return {
+        ...(current ?? {}),
+        scrollLeft: left,
+      }
+    })
     pruneView(path)
   }
 
   const setSelectedLines = (path: string, range: SelectedLineRange | null) => {
     const next = range ? normalizeSelectedLines(range) : null
-    setView(
-      produce((draft) => {
-        const file = draft.file[path] ?? (draft.file[path] = {})
-        if (equalSelectedLines(file.selectedLines, next)) return
-        file.selectedLines = next
-      }),
-    )
+    setView("file", path, (current) => {
+      if (current?.selectedLines === next) return current
+      return {
+        ...(current ?? {}),
+        selectedLines: next,
+      }
+    })
     pruneView(path)
   }
 

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

@@ -12,43 +12,28 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
     const platform = usePlatform()
     const abort = new AbortController()
 
-    const password = typeof window === "undefined" ? undefined : window.__OPENCODE__?.serverPassword
-
     const auth = (() => {
+      if (typeof window === "undefined") return
+      const password = window.__OPENCODE__?.serverPassword
       if (!password) return
-      if (!server.isLocal()) return
       return {
         Authorization: `Basic ${btoa(`opencode:${password}`)}`,
       }
     })()
 
-    const eventFetch = (() => {
-      if (!platform.fetch) return
-      try {
-        const url = new URL(server.url)
-        const loopback = url.hostname === "localhost" || url.hostname === "127.0.0.1" || url.hostname === "::1"
-        if (url.protocol === "http:" && !loopback) return platform.fetch
-      } catch {
-        return
-      }
-    })()
-
     const eventSdk = createOpencodeClient({
       baseUrl: server.url,
       signal: abort.signal,
-      fetch: eventFetch,
-      headers: eventFetch ? undefined : auth,
+      headers: auth,
     })
     const emitter = createGlobalEmitter<{
       [key: string]: Event
     }>()
 
     type Queued = { directory: string; payload: Event }
-    const FLUSH_FRAME_MS = 16
-    const STREAM_YIELD_MS = 8
 
-    let queue: Queued[] = []
-    let buffer: Queued[] = []
+    let queue: Array<Queued | undefined> = []
+    let buffer: Array<Queued | undefined> = []
     const coalesced = new Map<string, number>()
     let timer: ReturnType<typeof setTimeout> | undefined
     let last = 0
@@ -77,6 +62,7 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
       last = Date.now()
       batch(() => {
         for (const event of events) {
+          if (!event) continue
           emitter.emit(event.directory, event.payload)
         }
       })
@@ -87,23 +73,11 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
     const schedule = () => {
       if (timer) return
       const elapsed = Date.now() - last
-      timer = setTimeout(flush, Math.max(0, FLUSH_FRAME_MS - elapsed))
+      timer = setTimeout(flush, Math.max(0, 16 - elapsed))
     }
 
-    let streamErrorLogged = false
-
     void (async () => {
-      const events = await eventSdk.global.event({
-        onSseError: (error) => {
-          if (streamErrorLogged) return
-          streamErrorLogged = true
-          console.error("[global-sdk] event stream error", {
-            url: server.url,
-            fetch: eventFetch ? "platform" : "webview",
-            error,
-          })
-        },
-      })
+      const events = await eventSdk.global.event()
       let yielded = Date.now()
       for await (const event of events.stream) {
         const directory = event.directory ?? "global"
@@ -112,29 +86,20 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
         if (k) {
           const i = coalesced.get(k)
           if (i !== undefined) {
-            queue[i] = { directory, payload }
-            continue
+            queue[i] = undefined
           }
           coalesced.set(k, queue.length)
         }
         queue.push({ directory, payload })
         schedule()
 
-        if (Date.now() - yielded < STREAM_YIELD_MS) continue
+        if (Date.now() - yielded < 8) continue
         yielded = Date.now()
         await new Promise<void>((resolve) => setTimeout(resolve, 0))
       }
     })()
       .finally(flush)
-      .catch((error) => {
-        if (streamErrorLogged) return
-        streamErrorLogged = true
-        console.error("[global-sdk] event stream failed", {
-          url: server.url,
-          fetch: eventFetch ? "platform" : "webview",
-          error,
-        })
-      })
+      .catch(() => undefined)
 
     onCleanup(() => {
       abort.abort()

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

@@ -47,20 +47,6 @@ type GlobalStore = {
   reload: undefined | "pending" | "complete"
 }
 
-function errorMessage(error: unknown) {
-  if (error instanceof Error && error.message) return error.message
-  if (typeof error === "string" && error) return error
-  return "Unknown error"
-}
-
-function setDevStats(value: {
-  activeDirectoryStores: number
-  evictions: number
-  loadSessionsFullFetchFallback: number
-}) {
-  ;(globalThis as { __OPENCODE_GLOBAL_SYNC_STATS?: typeof value }).__OPENCODE_GLOBAL_SYNC_STATS = value
-}
-
 function createGlobalSync() {
   const globalSDK = useGlobalSDK()
   const platform = usePlatform()
@@ -95,11 +81,19 @@ function createGlobalSync() {
 
   const updateStats = (activeDirectoryStores: number) => {
     if (!import.meta.env.DEV) return
-    setDevStats({
+    ;(
+      globalThis as {
+        __OPENCODE_GLOBAL_SYNC_STATS?: {
+          activeDirectoryStores: number
+          evictions: number
+          loadSessionsFullFetchFallback: number
+        }
+      }
+    ).__OPENCODE_GLOBAL_SYNC_STATS = {
       activeDirectoryStores,
       evictions: stats.evictions,
       loadSessionsFullFetchFallback: stats.loadSessionsFallback,
-    })
+    }
   }
 
   const paused = () => untrack(() => globalStore.reload) !== undefined
@@ -210,10 +204,7 @@ function createGlobalSync() {
       .catch((err) => {
         console.error("Failed to load sessions", err)
         const project = getFilename(directory)
-        showToast({
-          title: language.t("toast.session.listFailed.title", { project }),
-          description: errorMessage(err),
-        })
+        showToast({ title: language.t("toast.session.listFailed.title", { project }), description: err.message })
       })
 
     sessionLoads.set(directory, promise)
@@ -316,28 +307,12 @@ function createGlobalSync() {
     void bootstrap()
   })
 
-  const projectApi = {
-    loadSessions,
-    meta(directory: string, patch: ProjectMeta) {
-      children.projectMeta(directory, patch)
-    },
-    icon(directory: string, value: string | undefined) {
-      children.projectIcon(directory, value)
-    },
+  function projectMeta(directory: string, patch: ProjectMeta) {
+    children.projectMeta(directory, patch)
   }
 
-  const updateConfig = async (config: Config) => {
-    setGlobalStore("reload", "pending")
-    return globalSDK.client.global.config
-      .update({ config })
-      .then(bootstrap)
-      .then(() => {
-        setGlobalStore("reload", "complete")
-      })
-      .catch((error) => {
-        setGlobalStore("reload", undefined)
-        throw error
-      })
+  function projectIcon(directory: string, value: string | undefined) {
+    children.projectIcon(directory, value)
   }
 
   return {
@@ -351,8 +326,19 @@ function createGlobalSync() {
     },
     child: children.child,
     bootstrap,
-    updateConfig,
-    project: projectApi,
+    updateConfig: (config: Config) => {
+      setGlobalStore("reload", "pending")
+      return globalSDK.client.global.config.update({ config }).finally(() => {
+        setTimeout(() => {
+          setGlobalStore("reload", "complete")
+        }, 1000)
+      })
+    },
+    project: {
+      loadSessions,
+      meta: projectMeta,
+      icon: projectIcon,
+    },
   }
 }
 

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

@@ -1,39 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { createRoot, getOwner } from "solid-js"
-import { createStore } from "solid-js/store"
-import type { State } from "./types"
-import { createChildStoreManager } from "./child-store"
-
-const child = () => createStore({} as State)
-
-describe("createChildStoreManager", () => {
-  test("does not evict the active directory during mark", () => {
-    const owner = createRoot((dispose) => {
-      const current = getOwner()
-      dispose()
-      return current
-    })
-    if (!owner) throw new Error("owner required")
-
-    const manager = createChildStoreManager({
-      owner,
-      markStats() {},
-      incrementEvictions() {},
-      isBooting: () => false,
-      isLoadingSessions: () => false,
-      onBootstrap() {},
-      onDispose() {},
-    })
-
-    Array.from({ length: 30 }, (_, index) => `/pinned-${index}`).forEach((directory) => {
-      manager.children[directory] = child()
-      manager.pin(directory)
-    })
-
-    const directory = "/active"
-    manager.children[directory] = child()
-    manager.mark(directory)
-
-    expect(manager.children[directory]).toBeDefined()
-  })
-})

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

@@ -36,7 +36,7 @@ export function createChildStoreManager(input: {
   const mark = (directory: string) => {
     if (!directory) return
     lifecycle.set(directory, { lastAccessAt: Date.now() })
-    runEviction(directory)
+    runEviction()
   }
 
   const pin = (directory: string) => {
@@ -106,7 +106,7 @@ export function createChildStoreManager(input: {
     return true
   }
 
-  function runEviction(skip?: string) {
+  function runEviction() {
     const stores = Object.keys(children)
     if (stores.length === 0) return
     const list = pickDirectoriesToEvict({
@@ -116,7 +116,7 @@ export function createChildStoreManager(input: {
       max: MAX_DIR_STORES,
       ttl: DIR_IDLE_TTL_MS,
       now: Date.now(),
-    }).filter((directory) => directory !== skip)
+    })
     if (list.length === 0) return
     for (const directory of list) {
       if (!disposeDirectory(directory)) continue

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

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

packages/app/src/context/highlights.tsx

@@ -119,7 +119,9 @@ function sliceHighlights(input: { releases: ParsedRelease[]; current?: string; p
   const highlights = releases.slice(start, end).flatMap((release) => release.highlights)
   const seen = new Set<string>()
   const unique = highlights.filter((highlight) => {
-    const key = dedupeKey(highlight)
+    const key = [highlight.title, highlight.description, highlight.media?.type ?? "", highlight.media?.src ?? ""].join(
+      "\n",
+    )
     if (seen.has(key)) return false
     seen.add(key)
     return true
@@ -127,16 +129,6 @@ function sliceHighlights(input: { releases: ParsedRelease[]; current?: string; p
   return unique.slice(0, 5)
 }
 
-function dedupeKey(highlight: Highlight) {
-  return [highlight.title, highlight.description, highlight.media?.type ?? "", highlight.media?.src ?? ""].join("\n")
-}
-
-function loadReleaseHighlights(value: unknown, current?: string, previous?: string) {
-  const releases = parseChangelog(value)
-  if (!releases?.length) return []
-  return sliceHighlights({ releases, current, previous })
-}
-
 export const { use: useHighlights, provider: HighlightsProvider } = createSimpleContext({
   name: "Highlights",
   gate: false,
@@ -148,57 +140,14 @@ export const { use: useHighlights, provider: HighlightsProvider } = createSimple
 
     const [from, setFrom] = createSignal<string | undefined>(undefined)
     const [to, setTo] = createSignal<string | undefined>(undefined)
+    const [timer, setTimer] = createSignal<ReturnType<typeof setTimeout> | undefined>(undefined)
     const state = { started: false }
-    let timer: ReturnType<typeof setTimeout> | undefined
-
-    const clearTimer = () => {
-      if (timer === undefined) return
-      clearTimeout(timer)
-      timer = undefined
-    }
 
     const markSeen = () => {
       if (!platform.version) return
       setStore("version", platform.version)
     }
 
-    const start = (previous: string) => {
-      if (!settings.general.releaseNotes()) {
-        markSeen()
-        return
-      }
-
-      const fetcher = platform.fetch ?? fetch
-      const controller = new AbortController()
-      onCleanup(() => {
-        controller.abort()
-        clearTimer()
-      })
-
-      fetcher(CHANGELOG_URL, {
-        signal: controller.signal,
-        headers: { Accept: "application/json" },
-      })
-        .then((response) => (response.ok ? (response.json() as Promise<unknown>) : undefined))
-        .then((json) => {
-          if (!json) return
-          const highlights = loadReleaseHighlights(json, platform.version, previous)
-          if (controller.signal.aborted) return
-
-          if (highlights.length === 0) {
-            markSeen()
-            return
-          }
-
-          timer = setTimeout(() => {
-            timer = undefined
-            markSeen()
-            dialog.show(() => <DialogReleaseNotes highlights={highlights} />)
-          }, 500)
-        })
-        .catch(() => undefined)
-    }
-
     createEffect(() => {
       if (state.started) return
       if (!ready()) return
@@ -216,7 +165,51 @@ export const { use: useHighlights, provider: HighlightsProvider } = createSimple
 
       setFrom(previous)
       setTo(platform.version)
-      start(previous)
+
+      if (!settings.general.releaseNotes()) {
+        markSeen()
+        return
+      }
+
+      const fetcher = platform.fetch ?? fetch
+      const controller = new AbortController()
+      onCleanup(() => {
+        controller.abort()
+        const id = timer()
+        if (id === undefined) return
+        clearTimeout(id)
+      })
+
+      fetcher(CHANGELOG_URL, {
+        signal: controller.signal,
+        headers: { Accept: "application/json" },
+      })
+        .then((response) => (response.ok ? (response.json() as Promise<unknown>) : undefined))
+        .then((json) => {
+          if (!json) return
+          const releases = parseChangelog(json)
+          if (!releases) return
+          if (releases.length === 0) return
+          const highlights = sliceHighlights({
+            releases,
+            current: platform.version,
+            previous,
+          })
+
+          if (controller.signal.aborted) return
+
+          if (highlights.length === 0) {
+            markSeen()
+            return
+          }
+
+          const timer = setTimeout(() => {
+            markSeen()
+            dialog.show(() => <DialogReleaseNotes highlights={highlights} />)
+          }, 500)
+          setTimer(timer)
+        })
+        .catch(() => undefined)
     })
 
     return {

packages/app/src/context/language.tsx

@@ -76,66 +76,6 @@ const LOCALES: readonly Locale[] = [
   "th",
 ]
 
-const LABEL_KEY: Record<Locale, keyof Dictionary> = {
-  en: "language.en",
-  zh: "language.zh",
-  zht: "language.zht",
-  ko: "language.ko",
-  de: "language.de",
-  es: "language.es",
-  fr: "language.fr",
-  da: "language.da",
-  ja: "language.ja",
-  pl: "language.pl",
-  ru: "language.ru",
-  ar: "language.ar",
-  no: "language.no",
-  br: "language.br",
-  th: "language.th",
-  bs: "language.bs",
-}
-
-const base = i18n.flatten({ ...en, ...uiEn })
-const DICT: Record<Locale, Dictionary> = {
-  en: base,
-  zh: { ...base, ...i18n.flatten({ ...zh, ...uiZh }) },
-  zht: { ...base, ...i18n.flatten({ ...zht, ...uiZht }) },
-  ko: { ...base, ...i18n.flatten({ ...ko, ...uiKo }) },
-  de: { ...base, ...i18n.flatten({ ...de, ...uiDe }) },
-  es: { ...base, ...i18n.flatten({ ...es, ...uiEs }) },
-  fr: { ...base, ...i18n.flatten({ ...fr, ...uiFr }) },
-  da: { ...base, ...i18n.flatten({ ...da, ...uiDa }) },
-  ja: { ...base, ...i18n.flatten({ ...ja, ...uiJa }) },
-  pl: { ...base, ...i18n.flatten({ ...pl, ...uiPl }) },
-  ru: { ...base, ...i18n.flatten({ ...ru, ...uiRu }) },
-  ar: { ...base, ...i18n.flatten({ ...ar, ...uiAr }) },
-  no: { ...base, ...i18n.flatten({ ...no, ...uiNo }) },
-  br: { ...base, ...i18n.flatten({ ...br, ...uiBr }) },
-  th: { ...base, ...i18n.flatten({ ...th, ...uiTh }) },
-  bs: { ...base, ...i18n.flatten({ ...bs, ...uiBs }) },
-}
-
-const localeMatchers: Array<{ locale: Locale; match: (language: string) => boolean }> = [
-  { locale: "zht", match: (language) => language.startsWith("zh") && language.includes("hant") },
-  { locale: "zh", match: (language) => language.startsWith("zh") },
-  { locale: "ko", match: (language) => language.startsWith("ko") },
-  { locale: "de", match: (language) => language.startsWith("de") },
-  { locale: "es", match: (language) => language.startsWith("es") },
-  { locale: "fr", match: (language) => language.startsWith("fr") },
-  { locale: "da", match: (language) => language.startsWith("da") },
-  { locale: "ja", match: (language) => language.startsWith("ja") },
-  { locale: "pl", match: (language) => language.startsWith("pl") },
-  { locale: "ru", match: (language) => language.startsWith("ru") },
-  { locale: "ar", match: (language) => language.startsWith("ar") },
-  {
-    locale: "no",
-    match: (language) => language.startsWith("no") || language.startsWith("nb") || language.startsWith("nn"),
-  },
-  { locale: "br", match: (language) => language.startsWith("pt") },
-  { locale: "th", match: (language) => language.startsWith("th") },
-  { locale: "bs", match: (language) => language.startsWith("bs") },
-]
-
 type ParityKey = "command.session.previous.unseen" | "command.session.next.unseen"
 const PARITY_CHECK: Record<Exclude<Locale, "en">, Record<ParityKey, string>> = {
   zh,
@@ -162,9 +102,28 @@ function detectLocale(): Locale {
   const languages = navigator.languages?.length ? navigator.languages : [navigator.language]
   for (const language of languages) {
     if (!language) continue
-    const normalized = language.toLowerCase()
-    const match = localeMatchers.find((entry) => entry.match(normalized))
-    if (match) return match.locale
+    if (language.toLowerCase().startsWith("zh")) {
+      if (language.toLowerCase().includes("hant")) return "zht"
+      return "zh"
+    }
+    if (language.toLowerCase().startsWith("ko")) return "ko"
+    if (language.toLowerCase().startsWith("de")) return "de"
+    if (language.toLowerCase().startsWith("es")) return "es"
+    if (language.toLowerCase().startsWith("fr")) return "fr"
+    if (language.toLowerCase().startsWith("da")) return "da"
+    if (language.toLowerCase().startsWith("ja")) return "ja"
+    if (language.toLowerCase().startsWith("pl")) return "pl"
+    if (language.toLowerCase().startsWith("ru")) return "ru"
+    if (language.toLowerCase().startsWith("ar")) return "ar"
+    if (
+      language.toLowerCase().startsWith("no") ||
+      language.toLowerCase().startsWith("nb") ||
+      language.toLowerCase().startsWith("nn")
+    )
+      return "no"
+    if (language.toLowerCase().startsWith("pt")) return "br"
+    if (language.toLowerCase().startsWith("th")) return "th"
+    if (language.toLowerCase().startsWith("bs")) return "bs"
   }
 
   return "en"
@@ -180,9 +139,24 @@ export const { use: useLanguage, provider: LanguageProvider } = createSimpleCont
       }),
     )
 
-    const locale = createMemo<Locale>(() =>
-      LOCALES.includes(store.locale as Locale) ? (store.locale as Locale) : "en",
-    )
+    const locale = createMemo<Locale>(() => {
+      if (store.locale === "zh") return "zh"
+      if (store.locale === "zht") return "zht"
+      if (store.locale === "ko") return "ko"
+      if (store.locale === "de") return "de"
+      if (store.locale === "es") return "es"
+      if (store.locale === "fr") return "fr"
+      if (store.locale === "da") return "da"
+      if (store.locale === "ja") return "ja"
+      if (store.locale === "pl") return "pl"
+      if (store.locale === "ru") return "ru"
+      if (store.locale === "ar") return "ar"
+      if (store.locale === "no") return "no"
+      if (store.locale === "br") return "br"
+      if (store.locale === "th") return "th"
+      if (store.locale === "bs") return "bs"
+      return "en"
+    })
 
     createEffect(() => {
       const current = locale()
@@ -190,11 +164,48 @@ export const { use: useLanguage, provider: LanguageProvider } = createSimpleCont
       setStore("locale", current)
     })
 
-    const dict = createMemo<Dictionary>(() => DICT[locale()])
+    const base = i18n.flatten({ ...en, ...uiEn })
+    const dict = createMemo<Dictionary>(() => {
+      if (locale() === "en") return base
+      if (locale() === "zh") return { ...base, ...i18n.flatten({ ...zh, ...uiZh }) }
+      if (locale() === "zht") return { ...base, ...i18n.flatten({ ...zht, ...uiZht }) }
+      if (locale() === "de") return { ...base, ...i18n.flatten({ ...de, ...uiDe }) }
+      if (locale() === "es") return { ...base, ...i18n.flatten({ ...es, ...uiEs }) }
+      if (locale() === "fr") return { ...base, ...i18n.flatten({ ...fr, ...uiFr }) }
+      if (locale() === "da") return { ...base, ...i18n.flatten({ ...da, ...uiDa }) }
+      if (locale() === "ja") return { ...base, ...i18n.flatten({ ...ja, ...uiJa }) }
+      if (locale() === "pl") return { ...base, ...i18n.flatten({ ...pl, ...uiPl }) }
+      if (locale() === "ru") return { ...base, ...i18n.flatten({ ...ru, ...uiRu }) }
+      if (locale() === "ar") return { ...base, ...i18n.flatten({ ...ar, ...uiAr }) }
+      if (locale() === "no") return { ...base, ...i18n.flatten({ ...no, ...uiNo }) }
+      if (locale() === "br") return { ...base, ...i18n.flatten({ ...br, ...uiBr }) }
+      if (locale() === "th") return { ...base, ...i18n.flatten({ ...th, ...uiTh }) }
+      if (locale() === "bs") return { ...base, ...i18n.flatten({ ...bs, ...uiBs }) }
+      return { ...base, ...i18n.flatten({ ...ko, ...uiKo }) }
+    })
 
     const t = i18n.translator(dict, i18n.resolveTemplate)
 
-    const label = (value: Locale) => t(LABEL_KEY[value])
+    const labelKey: Record<Locale, keyof Dictionary> = {
+      en: "language.en",
+      zh: "language.zh",
+      zht: "language.zht",
+      ko: "language.ko",
+      de: "language.de",
+      es: "language.es",
+      fr: "language.fr",
+      da: "language.da",
+      ja: "language.ja",
+      pl: "language.pl",
+      ru: "language.ru",
+      ar: "language.ar",
+      no: "language.no",
+      br: "language.br",
+      th: "language.th",
+      bs: "language.bs",
+    }
+
+    const label = (value: Locale) => t(labelKey[value])
 
     createEffect(() => {
       if (typeof document !== "object") return

packages/app/src/context/layout.tsx

@@ -11,9 +11,6 @@ import { same } from "@/utils/same"
 import { createScrollPersistence, type SessionScroll } from "./layout-scroll"
 
 const AVATAR_COLOR_KEYS = ["pink", "mint", "orange", "purple", "cyan", "lime"] as const
-const DEFAULT_PANEL_WIDTH = 344
-const DEFAULT_SESSION_WIDTH = 600
-const DEFAULT_TERMINAL_HEIGHT = 280
 export type AvatarColorKey = (typeof AVATAR_COLOR_KEYS)[number]
 
 export function getAvatarColors(key?: string) {
@@ -88,14 +85,6 @@ export function pruneSessionKeys(input: {
     .slice(input.max)
 }
 
-function nextSessionTabsForOpen(current: SessionTabs | undefined, tab: string): SessionTabs {
-  const all = current?.all ?? []
-  if (tab === "review") return { all: all.filter((x) => x !== "review"), active: tab }
-  if (tab === "context") return { all: [tab, ...all.filter((x) => x !== tab)], active: tab }
-  if (!all.includes(tab)) return { all: [...all, tab], active: tab }
-  return { all, active: tab }
-}
-
 export const { use: useLayout, provider: LayoutProvider } = createSimpleContext({
   name: "Layout",
   init: () => {
@@ -127,11 +116,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_PANEL_WIDTH
+        const width = typeof fileTree.width === "number" ? fileTree.width : 344
         return {
           ...fileTree,
           opened: true,
-          width: width === 260 ? DEFAULT_PANEL_WIDTH : width,
+          width: width === 260 ? 344 : width,
           tab: "changes",
         }
       })()
@@ -162,12 +151,12 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       createStore({
         sidebar: {
           opened: false,
-          width: DEFAULT_PANEL_WIDTH,
+          width: 344,
           workspaces: {} as Record<string, boolean>,
           workspacesDefault: false,
         },
         terminal: {
-          height: DEFAULT_TERMINAL_HEIGHT,
+          height: 280,
           opened: false,
         },
         review: {
@@ -176,11 +165,11 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         },
         fileTree: {
           opened: true,
-          width: DEFAULT_PANEL_WIDTH,
+          width: 344,
           tab: "changes" as "changes" | "all",
         },
         session: {
-          width: DEFAULT_SESSION_WIDTH,
+          width: 600,
         },
         mobileSidebar: {
           opened: false,
@@ -195,11 +184,8 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
 
     const MAX_SESSION_KEYS = 50
     const PENDING_MESSAGE_TTL_MS = 2 * 60 * 1000
-    const usage = {
-      active: undefined as string | undefined,
-      pruned: false,
-      used: new Map<string, number>(),
-    }
+    const meta = { active: undefined as string | undefined, pruned: false }
+    const used = new Map<string, number>()
 
     const SESSION_STATE_KEYS = [
       { key: "prompt", legacy: "prompt", version: "v2" },
@@ -228,7 +214,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       const drop = pruneSessionKeys({
         keep,
         max: MAX_SESSION_KEYS,
-        used: usage.used,
+        used,
         view: Object.keys(store.sessionView),
         tabs: Object.keys(store.sessionTabs),
       })
@@ -247,18 +233,18 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       dropSessionState(drop)
 
       for (const key of drop) {
-        usage.used.delete(key)
+        used.delete(key)
       }
     }
 
     function touch(sessionKey: string) {
-      usage.active = sessionKey
-      usage.used.set(sessionKey, Date.now())
+      meta.active = sessionKey
+      used.set(sessionKey, Date.now())
 
       if (!ready()) return
-      if (usage.pruned) return
+      if (meta.pruned) return
 
-      usage.pruned = true
+      meta.pruned = true
       prune(sessionKey)
     }
 
@@ -267,7 +253,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       getSnapshot: (sessionKey) => store.sessionView[sessionKey]?.scroll,
       onFlush: (sessionKey, next) => {
         const current = store.sessionView[sessionKey]
-        const keep = usage.active ?? sessionKey
+        const keep = meta.active ?? sessionKey
         if (!current) {
           setStore("sessionView", sessionKey, { scroll: next })
           prune(keep)
@@ -283,10 +269,10 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
 
     createEffect(() => {
       if (!ready()) return
-      if (usage.pruned) return
-      const active = usage.active
+      if (meta.pruned) return
+      const active = meta.active
       if (!active) return
-      usage.pruned = true
+      meta.pruned = true
       prune(active)
     })
 
@@ -560,32 +546,32 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       },
       fileTree: {
         opened: createMemo(() => store.fileTree?.opened ?? true),
-        width: createMemo(() => store.fileTree?.width ?? DEFAULT_PANEL_WIDTH),
+        width: createMemo(() => store.fileTree?.width ?? 344),
         tab: createMemo(() => store.fileTree?.tab ?? "changes"),
         setTab(tab: "changes" | "all") {
           if (!store.fileTree) {
-            setStore("fileTree", { opened: true, width: DEFAULT_PANEL_WIDTH, tab })
+            setStore("fileTree", { opened: true, width: 344, tab })
             return
           }
           setStore("fileTree", "tab", tab)
         },
         open() {
           if (!store.fileTree) {
-            setStore("fileTree", { opened: true, width: DEFAULT_PANEL_WIDTH, tab: "changes" })
+            setStore("fileTree", { opened: true, width: 344, tab: "changes" })
             return
           }
           setStore("fileTree", "opened", true)
         },
         close() {
           if (!store.fileTree) {
-            setStore("fileTree", { opened: false, width: DEFAULT_PANEL_WIDTH, tab: "changes" })
+            setStore("fileTree", { opened: false, width: 344, tab: "changes" })
             return
           }
           setStore("fileTree", "opened", false)
         },
         toggle() {
           if (!store.fileTree) {
-            setStore("fileTree", { opened: true, width: DEFAULT_PANEL_WIDTH, tab: "changes" })
+            setStore("fileTree", { opened: true, width: 344, tab: "changes" })
             return
           }
           setStore("fileTree", "opened", (x) => !x)
@@ -599,7 +585,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         },
       },
       session: {
-        width: createMemo(() => store.session?.width ?? DEFAULT_SESSION_WIDTH),
+        width: createMemo(() => store.session?.width ?? 600),
         resize(width: number) {
           if (!store.session) {
             setStore("session", { width })
@@ -631,7 +617,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
               pendingMessage: messageID,
               pendingMessageAt: at,
             })
-            prune(usage.active ?? sessionKey)
+            prune(meta.active ?? sessionKey)
             return
           }
 
@@ -672,7 +658,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         function setTerminalOpened(next: boolean) {
           const current = store.terminal
           if (!current) {
-            setStore("terminal", { height: DEFAULT_TERMINAL_HEIGHT, opened: next })
+            setStore("terminal", { height: 280, opened: next })
             return
           }
 
@@ -769,8 +755,43 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           },
           async open(tab: string) {
             const session = key()
-            const next = nextSessionTabsForOpen(store.sessionTabs[session], tab)
-            setStore("sessionTabs", session, next)
+            const current = store.sessionTabs[session] ?? { all: [] }
+
+            if (tab === "review") {
+              if (!store.sessionTabs[session]) {
+                setStore("sessionTabs", session, { all: current.all.filter((x) => x !== "review"), active: tab })
+                return
+              }
+              setStore("sessionTabs", session, "active", tab)
+              return
+            }
+
+            if (tab === "context") {
+              const all = [tab, ...current.all.filter((x) => x !== tab)]
+              if (!store.sessionTabs[session]) {
+                setStore("sessionTabs", session, { all, active: tab })
+                return
+              }
+              setStore("sessionTabs", session, "all", all)
+              setStore("sessionTabs", session, "active", tab)
+              return
+            }
+
+            if (!current.all.includes(tab)) {
+              if (!store.sessionTabs[session]) {
+                setStore("sessionTabs", session, { all: [tab], active: tab })
+                return
+              }
+              setStore("sessionTabs", session, "all", [...current.all, tab])
+              setStore("sessionTabs", session, "active", tab)
+              return
+            }
+
+            if (!store.sessionTabs[session]) {
+              setStore("sessionTabs", session, { all: current.all, active: tab })
+              return
+            }
+            setStore("sessionTabs", session, "active", tab)
           },
           close(tab: string) {
             const session = key()

packages/app/src/context/local.tsx

@@ -16,11 +16,16 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
     const sdk = useSDK()
     const sync = useSync()
     const providers = useProviders()
-    const connected = createMemo(() => new Set(providers.connected().map((provider) => provider.id)))
 
     function isModelValid(model: ModelKey) {
       const provider = providers.all().find((x) => x.id === model.providerID)
-      return !!provider?.models[model.modelID] && connected().has(model.providerID)
+      return (
+        !!provider?.models[model.modelID] &&
+        providers
+          .connected()
+          .map((p) => p.id)
+          .includes(model.providerID)
+      )
     }
 
     function getFirstValidModel(...modelFns: (() => ModelKey | undefined)[]) {
@@ -31,8 +36,6 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
       }
     }
 
-    let setModel: (model: ModelKey | undefined, options?: { recent?: boolean }) => void = () => undefined
-
     const agent = (() => {
       const list = createMemo(() => sync.data.agent.filter((x) => x.mode !== "subagent" && !x.hidden))
       const [store, setStore] = createStore<{
@@ -72,7 +75,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
           if (!value) return
           setStore("current", value.name)
           if (value.model)
-            setModel({
+            model.set({
               providerID: value.model.providerID,
               modelID: value.model.modelID,
             })
@@ -89,37 +92,38 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         model: {},
       })
 
-      const resolveConfigured = () => {
-        if (!sync.data.config.model) return
-        const [providerID, modelID] = sync.data.config.model.split("/")
-        const key = { providerID, modelID }
-        if (isModelValid(key)) return key
-      }
-
-      const resolveRecent = () => {
-        for (const item of models.recent.list()) {
-          if (isModelValid(item)) return item
+      const fallbackModel = createMemo<ModelKey | undefined>(() => {
+        if (sync.data.config.model) {
+          const [providerID, modelID] = sync.data.config.model.split("/")
+          if (isModelValid({ providerID, modelID })) {
+            return {
+              providerID,
+              modelID,
+            }
+          }
+        }
+
+        for (const item of models.recent.list()) {
+          if (isModelValid(item)) {
+            return item
+          }
         }
-      }
 
-      const resolveDefault = () => {
         const defaults = providers.default()
-        for (const provider of providers.connected()) {
-          const configured = defaults[provider.id]
+        for (const p of providers.connected()) {
+          const configured = defaults[p.id]
           if (configured) {
-            const key = { providerID: provider.id, modelID: configured }
+            const key = { providerID: p.id, modelID: configured }
             if (isModelValid(key)) return key
           }
 
-          const first = Object.values(provider.models)[0]
+          const first = Object.values(p.models)[0]
           if (!first) continue
-          const key = { providerID: provider.id, modelID: first.id }
+          const key = { providerID: p.id, modelID: first.id }
           if (isModelValid(key)) return key
         }
-      }
 
-      const fallbackModel = createMemo<ModelKey | undefined>(() => {
-        return resolveConfigured() ?? resolveRecent() ?? resolveDefault()
+        return undefined
       })
 
       const current = createMemo(() => {
@@ -159,25 +163,21 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         })
       }
 
-      const set = (model: ModelKey | undefined, options?: { recent?: boolean }) => {
-        batch(() => {
-          const currentAgent = agent.current()
-          const next = model ?? fallbackModel()
-          if (currentAgent) setEphemeral("model", currentAgent.name, next)
-          if (model) models.setVisibility(model, true)
-          if (options?.recent && model) models.recent.push(model)
-        })
-      }
-
-      setModel = set
-
       return {
         ready: models.ready,
         current,
         recent,
         list: models.list,
         cycle,
-        set,
+        set(model: ModelKey | undefined, options?: { recent?: boolean }) {
+          batch(() => {
+            const currentAgent = agent.current()
+            const next = model ?? fallbackModel()
+            if (currentAgent) setEphemeral("model", currentAgent.name, next)
+            if (model) models.setVisibility(model, true)
+            if (options?.recent && model) models.recent.push(model)
+          })
+        },
         visible(model: ModelKey) {
           return models.visible(model)
         },

packages/app/src/context/models.tsx

@@ -16,12 +16,6 @@ type Store = {
   variant?: Record<string, string | undefined>
 }
 
-const RECENT_LIMIT = 5
-
-function modelKey(model: ModelKey) {
-  return `${model.providerID}:${model.modelID}`
-}
-
 export const { use: useModels, provider: ModelsProvider } = createSimpleContext({
   name: "Models",
   init: () => {
@@ -45,27 +39,10 @@ export const { use: useModels, provider: ModelsProvider } = createSimpleContext(
       ),
     )
 
-    const release = createMemo(
-      () =>
-        new Map(
-          available().map((model) => {
-            const parsed = DateTime.fromISO(model.release_date)
-            return [modelKey({ providerID: model.provider.id, modelID: model.id }), parsed] as const
-          }),
-        ),
-    )
-
     const latest = createMemo(() =>
       pipe(
         available(),
-        filter(
-          (x) =>
-            Math.abs(
-              (release().get(modelKey({ providerID: x.provider.id, modelID: x.id })) ?? DateTime.invalid("invalid"))
-                .diffNow()
-                .as("months"),
-            ) < 6,
-        ),
+        filter((x) => Math.abs(DateTime.fromISO(x.release_date).diffNow().as("months")) < 6),
         groupBy((x) => x.provider.id),
         mapValues((models) =>
           pipe(
@@ -84,7 +61,7 @@ export const { use: useModels, provider: ModelsProvider } = createSimpleContext(
       ),
     )
 
-    const latestSet = createMemo(() => new Set(latest().map((x) => modelKey(x))))
+    const latestSet = createMemo(() => new Set(latest().map((x) => `${x.providerID}:${x.modelID}`)))
 
     const visibility = createMemo(() => {
       const map = new Map<string, Visibility>()
@@ -105,20 +82,20 @@ export const { use: useModels, provider: ModelsProvider } = createSimpleContext(
     function update(model: ModelKey, state: Visibility) {
       const index = store.user.findIndex((x) => x.modelID === model.modelID && x.providerID === model.providerID)
       if (index >= 0) {
-        setStore("user", index, (current) => ({ ...current, visibility: state }))
+        setStore("user", index, { visibility: state })
         return
       }
       setStore("user", store.user.length, { ...model, visibility: state })
     }
 
     const visible = (model: ModelKey) => {
-      const key = modelKey(model)
+      const key = `${model.providerID}:${model.modelID}`
       const state = visibility().get(key)
       if (state === "hide") return false
       if (state === "show") return true
       if (latestSet().has(key)) return true
-      const date = release().get(key)
-      if (!date?.isValid) return true
+      const m = find(model)
+      if (!m?.release_date || !DateTime.fromISO(m.release_date).isValid) return true
       return false
     }
 
@@ -127,8 +104,8 @@ export const { use: useModels, provider: ModelsProvider } = createSimpleContext(
     }
 
     const push = (model: ModelKey) => {
-      const uniq = uniqueBy([model, ...store.recent], (x) => `${x.providerID}:${x.modelID}`)
-      if (uniq.length > RECENT_LIMIT) uniq.pop()
+      const uniq = uniqueBy([model, ...store.recent], (x) => x.providerID + x.modelID)
+      if (uniq.length > 5) uniq.pop()
       setStore("recent", uniq)
     }
 

packages/app/src/context/notification.tsx

@@ -1,5 +1,5 @@
-import { createStore, reconcile } from "solid-js/store"
-import { batch, createEffect, createMemo, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { createEffect, createMemo, onCleanup } from "solid-js"
 import { useParams } from "@solidjs/router"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useGlobalSDK } from "./global-sdk"
@@ -13,11 +13,12 @@ import { decode64 } from "@/utils/base64"
 import { EventSessionError } from "@opencode-ai/sdk/v2"
 import { Persist, persisted } from "@/utils/persist"
 import { playSound, soundSrc } from "@/utils/sound"
+import { buildNotificationIndex } from "./notification-index"
 
 type NotificationBase = {
   directory?: string
   session?: string
-  metadata?: unknown
+  metadata?: any
   time: number
   viewed: boolean
 }
@@ -33,21 +34,6 @@ type ErrorNotification = NotificationBase & {
 
 export type Notification = TurnCompleteNotification | ErrorNotification
 
-type NotificationIndex = {
-  session: {
-    all: Record<string, Notification[]>
-    unseen: Record<string, Notification[]>
-    unseenCount: Record<string, number>
-    unseenHasError: Record<string, boolean>
-  }
-  project: {
-    all: Record<string, Notification[]>
-    unseen: Record<string, Notification[]>
-    unseenCount: Record<string, number>
-    unseenHasError: Record<string, boolean>
-  }
-}
-
 const MAX_NOTIFICATIONS = 500
 const NOTIFICATION_TTL_MS = 1000 * 60 * 60 * 24 * 30
 
@@ -58,53 +44,6 @@ function pruneNotifications(list: Notification[]) {
   return pruned.slice(pruned.length - MAX_NOTIFICATIONS)
 }
 
-function createNotificationIndex(): NotificationIndex {
-  return {
-    session: {
-      all: {},
-      unseen: {},
-      unseenCount: {},
-      unseenHasError: {},
-    },
-    project: {
-      all: {},
-      unseen: {},
-      unseenCount: {},
-      unseenHasError: {},
-    },
-  }
-}
-
-function buildNotificationIndex(list: Notification[]) {
-  const index = createNotificationIndex()
-
-  list.forEach((notification) => {
-    if (notification.session) {
-      const all = index.session.all[notification.session] ?? []
-      index.session.all[notification.session] = [...all, notification]
-      if (!notification.viewed) {
-        const unseen = index.session.unseen[notification.session] ?? []
-        index.session.unseen[notification.session] = [...unseen, notification]
-        index.session.unseenCount[notification.session] = unseen.length + 1
-        if (notification.type === "error") index.session.unseenHasError[notification.session] = true
-      }
-    }
-
-    if (notification.directory) {
-      const all = index.project.all[notification.directory] ?? []
-      index.project.all[notification.directory] = [...all, notification]
-      if (!notification.viewed) {
-        const unseen = index.project.unseen[notification.directory] ?? []
-        index.project.unseen[notification.directory] = [...unseen, notification]
-        index.project.unseenCount[notification.directory] = unseen.length + 1
-        if (notification.type === "error") index.project.unseenHasError[notification.directory] = true
-      }
-    }
-  })
-
-  return index
-}
-
 export const { use: useNotification, provider: NotificationProvider } = createSimpleContext({
   name: "Notification",
   init: () => {
@@ -129,173 +68,105 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
         list: [] as Notification[],
       }),
     )
-    const [index, setIndex] = createStore<NotificationIndex>(buildNotificationIndex(store.list))
 
     const meta = { pruned: false, disposed: false }
 
-    const updateUnseen = (scope: "session" | "project", key: string, unseen: Notification[]) => {
-      setIndex(scope, "unseen", key, unseen)
-      setIndex(scope, "unseenCount", key, unseen.length)
-      setIndex(
-        scope,
-        "unseenHasError",
-        key,
-        unseen.some((notification) => notification.type === "error"),
-      )
-    }
-
-    const appendToIndex = (notification: Notification) => {
-      if (notification.session) {
-        setIndex("session", "all", notification.session, (all = []) => [...all, notification])
-        if (!notification.viewed) {
-          setIndex("session", "unseen", notification.session, (unseen = []) => [...unseen, notification])
-          setIndex("session", "unseenCount", notification.session, (count = 0) => count + 1)
-          if (notification.type === "error") setIndex("session", "unseenHasError", notification.session, true)
-        }
-      }
-
-      if (notification.directory) {
-        setIndex("project", "all", notification.directory, (all = []) => [...all, notification])
-        if (!notification.viewed) {
-          setIndex("project", "unseen", notification.directory, (unseen = []) => [...unseen, notification])
-          setIndex("project", "unseenCount", notification.directory, (count = 0) => count + 1)
-          if (notification.type === "error") setIndex("project", "unseenHasError", notification.directory, true)
-        }
-      }
-    }
-
-    const removeFromIndex = (notification: Notification) => {
-      if (notification.session) {
-        setIndex("session", "all", notification.session, (all = []) => all.filter((n) => n !== notification))
-        if (!notification.viewed) {
-          const unseen = (index.session.unseen[notification.session] ?? empty).filter((n) => n !== notification)
-          updateUnseen("session", notification.session, unseen)
-        }
-      }
-
-      if (notification.directory) {
-        setIndex("project", "all", notification.directory, (all = []) => all.filter((n) => n !== notification))
-        if (!notification.viewed) {
-          const unseen = (index.project.unseen[notification.directory] ?? empty).filter((n) => n !== notification)
-          updateUnseen("project", notification.directory, unseen)
-        }
-      }
-    }
-
     createEffect(() => {
       if (!ready()) return
       if (meta.pruned) return
       meta.pruned = true
-      const list = pruneNotifications(store.list)
-      batch(() => {
-        setStore("list", list)
-        setIndex(reconcile(buildNotificationIndex(list), { merge: false }))
-      })
+      setStore("list", pruneNotifications(store.list))
     })
 
     const append = (notification: Notification) => {
-      const list = pruneNotifications([...store.list, notification])
-      const keep = new Set(list)
-      const removed = store.list.filter((n) => !keep.has(n))
-
-      batch(() => {
-        if (keep.has(notification)) appendToIndex(notification)
-        removed.forEach((n) => removeFromIndex(n))
-        setStore("list", list)
-      })
+      setStore("list", (list) => pruneNotifications([...list, notification]))
     }
 
-    const lookup = async (directory: string, sessionID?: string) => {
-      if (!sessionID) return undefined
+    const index = createMemo(() => buildNotificationIndex(store.list))
+
+    const lookup = (directory: string, sessionID?: string) => {
+      if (!sessionID) return Promise.resolve(undefined)
       const [syncStore] = globalSync.child(directory, { bootstrap: false })
       const match = Binary.search(syncStore.session, sessionID, (s) => s.id)
-      if (match.found) return syncStore.session[match.index]
+      if (match.found) return Promise.resolve(syncStore.session[match.index])
       return globalSDK.client.session
         .get({ directory, sessionID })
         .then((x) => x.data)
         .catch(() => undefined)
     }
 
-    const viewedInCurrentSession = (directory: string, sessionID?: string) => {
-      const activeDirectory = currentDirectory()
-      const activeSession = currentSession()
-      if (!activeDirectory) return false
-      if (!activeSession) return false
-      if (!sessionID) return false
-      if (directory !== activeDirectory) return false
-      return sessionID === activeSession
-    }
-
-    const handleSessionIdle = (directory: string, event: { properties: { sessionID?: string } }, time: number) => {
-      const sessionID = event.properties.sessionID
-      void lookup(directory, sessionID).then((session) => {
-        if (meta.disposed) return
-        if (!session) return
-        if (session.parentID) return
-
-        if (settings.sounds.agentEnabled()) {
-          playSound(soundSrc(settings.sounds.agent()))
-        }
-
-        append({
-          directory,
-          time,
-          viewed: viewedInCurrentSession(directory, sessionID),
-          type: "turn-complete",
-          session: sessionID,
-        })
-
-        const href = `/${base64Encode(directory)}/session/${sessionID}`
-        if (settings.notifications.agent()) {
-          void platform.notify(language.t("notification.session.responseReady.title"), session.title ?? sessionID, href)
-        }
-      })
-    }
-
-    const handleSessionError = (
-      directory: string,
-      event: { properties: { sessionID?: string; error?: EventSessionError["properties"]["error"] } },
-      time: number,
-    ) => {
-      const sessionID = event.properties.sessionID
-      void lookup(directory, sessionID).then((session) => {
-        if (meta.disposed) return
-        if (session?.parentID) return
-
-        if (settings.sounds.errorsEnabled()) {
-          playSound(soundSrc(settings.sounds.errors()))
-        }
-
-        const error = "error" in event.properties ? event.properties.error : undefined
-        append({
-          directory,
-          time,
-          viewed: viewedInCurrentSession(directory, sessionID),
-          type: "error",
-          session: sessionID ?? "global",
-          error,
-        })
-        const description =
-          session?.title ??
-          (typeof error === "string" ? error : language.t("notification.session.error.fallbackDescription"))
-        const href = sessionID ? `/${base64Encode(directory)}/session/${sessionID}` : `/${base64Encode(directory)}`
-        if (settings.notifications.errors()) {
-          void platform.notify(language.t("notification.session.error.title"), description, href)
-        }
-      })
-    }
-
     const unsub = globalSDK.event.listen((e) => {
       const event = e.details
       if (event.type !== "session.idle" && event.type !== "session.error") return
 
       const directory = e.name
       const time = Date.now()
-      if (event.type === "session.idle") {
-        handleSessionIdle(directory, event, time)
-        return
+      const viewed = (sessionID?: string) => {
+        const activeDirectory = currentDirectory()
+        const activeSession = currentSession()
+        if (!activeDirectory) return false
+        if (!activeSession) return false
+        if (!sessionID) return false
+        if (directory !== activeDirectory) return false
+        return sessionID === activeSession
+      }
+      switch (event.type) {
+        case "session.idle": {
+          const sessionID = event.properties.sessionID
+          void lookup(directory, sessionID).then((session) => {
+            if (meta.disposed) return
+            if (!session) return
+            if (session.parentID) return
+
+            playSound(soundSrc(settings.sounds.agent()))
+
+            append({
+              directory,
+              time,
+              viewed: viewed(sessionID),
+              type: "turn-complete",
+              session: sessionID,
+            })
+
+            const href = `/${base64Encode(directory)}/session/${sessionID}`
+            if (settings.notifications.agent()) {
+              void platform.notify(
+                language.t("notification.session.responseReady.title"),
+                session.title ?? sessionID,
+                href,
+              )
+            }
+          })
+          break
+        }
+        case "session.error": {
+          const sessionID = event.properties.sessionID
+          void lookup(directory, sessionID).then((session) => {
+            if (meta.disposed) return
+            if (session?.parentID) return
+
+            playSound(soundSrc(settings.sounds.errors()))
+
+            const error = "error" in event.properties ? event.properties.error : undefined
+            append({
+              directory,
+              time,
+              viewed: viewed(sessionID),
+              type: "error",
+              session: sessionID ?? "global",
+              error,
+            })
+            const description =
+              session?.title ??
+              (typeof error === "string" ? error : language.t("notification.session.error.fallbackDescription"))
+            const href = sessionID ? `/${base64Encode(directory)}/session/${sessionID}` : `/${base64Encode(directory)}`
+            if (settings.notifications.errors()) {
+              void platform.notify(language.t("notification.session.error.title"), description, href)
+            }
+          })
+          break
+        }
       }
-      handleSessionError(directory, event, time)
     })
     onCleanup(() => {
       meta.disposed = true
@@ -306,66 +177,36 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
       ready,
       session: {
         all(session: string) {
-          return index.session.all[session] ?? empty
+          return index().session.all.get(session) ?? empty
         },
         unseen(session: string) {
-          return index.session.unseen[session] ?? empty
+          return index().session.unseen.get(session) ?? empty
         },
         unseenCount(session: string) {
-          return index.session.unseenCount[session] ?? 0
+          return index().session.unseenCount.get(session) ?? 0
         },
         unseenHasError(session: string) {
-          return index.session.unseenHasError[session] ?? false
+          return index().session.unseenHasError.get(session) ?? false
         },
         markViewed(session: string) {
-          const unseen = index.session.unseen[session] ?? empty
-          if (!unseen.length) return
-
-          const projects = [
-            ...new Set(unseen.flatMap((notification) => (notification.directory ? [notification.directory] : []))),
-          ]
-          batch(() => {
-            setStore("list", (n) => n.session === session && !n.viewed, "viewed", true)
-            updateUnseen("session", session, [])
-            projects.forEach((directory) => {
-              const next = (index.project.unseen[directory] ?? empty).filter(
-                (notification) => notification.session !== session,
-              )
-              updateUnseen("project", directory, next)
-            })
-          })
+          setStore("list", (n) => n.session === session, "viewed", true)
         },
       },
       project: {
         all(directory: string) {
-          return index.project.all[directory] ?? empty
+          return index().project.all.get(directory) ?? empty
         },
         unseen(directory: string) {
-          return index.project.unseen[directory] ?? empty
+          return index().project.unseen.get(directory) ?? empty
         },
         unseenCount(directory: string) {
-          return index.project.unseenCount[directory] ?? 0
+          return index().project.unseenCount.get(directory) ?? 0
         },
         unseenHasError(directory: string) {
-          return index.project.unseenHasError[directory] ?? false
+          return index().project.unseenHasError.get(directory) ?? false
         },
         markViewed(directory: string) {
-          const unseen = index.project.unseen[directory] ?? empty
-          if (!unseen.length) return
-
-          const sessions = [
-            ...new Set(unseen.flatMap((notification) => (notification.session ? [notification.session] : []))),
-          ]
-          batch(() => {
-            setStore("list", (n) => n.directory === directory && !n.viewed, "viewed", true)
-            updateUnseen("project", directory, [])
-            sessions.forEach((session) => {
-              const next = (index.session.unseen[session] ?? empty).filter(
-                (notification) => notification.directory !== directory,
-              )
-              updateUnseen("session", session, next)
-            })
-          })
+          setStore("list", (n) => n.directory === directory, "viewed", true)
         },
       },
     }

packages/app/src/context/permission.tsx

@@ -33,7 +33,7 @@ function isNonAllowRule(rule: unknown) {
   return false
 }
 
-function hasPermissionPromptRules(permission: unknown) {
+function hasAutoAcceptPermissionConfig(permission: unknown) {
   if (!permission) return false
   if (typeof permission === "string") return permission !== "allow"
   if (typeof permission !== "object") return false
@@ -57,7 +57,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
       const directory = decode64(params.dir)
       if (!directory) return false
       const [store] = globalSync.child(directory)
-      return hasPermissionPromptRules(store.config.permission)
+      return hasAutoAcceptPermissionConfig(store.config.permission)
     })
 
     const [store, setStore, _, ready] = persisted(
@@ -70,7 +70,6 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
     const MAX_RESPONDED = 1000
     const RESPONDED_TTL_MS = 60 * 60 * 1000
     const responded = new Map<string, number>()
-    const enableVersion = new Map<string, number>()
 
     function pruneResponded(now: number) {
       for (const [id, ts] of responded) {
@@ -115,13 +114,6 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
       return store.autoAcceptEdits[key] ?? store.autoAcceptEdits[sessionID] ?? false
     }
 
-    function bumpEnableVersion(sessionID: string, directory?: string) {
-      const key = acceptKey(sessionID, directory)
-      const next = (enableVersion.get(key) ?? 0) + 1
-      enableVersion.set(key, next)
-      return next
-    }
-
     const unsubscribe = globalSDK.event.listen((e) => {
       const event = e.details
       if (event?.type !== "permission.asked") return
@@ -136,7 +128,6 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
 
     function enable(sessionID: string, directory: string) {
       const key = acceptKey(sessionID, directory)
-      const version = bumpEnableVersion(sessionID, directory)
       setStore(
         produce((draft) => {
           draft.autoAcceptEdits[key] = true
@@ -147,8 +138,6 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
       globalSDK.client.permission
         .list({ directory })
         .then((x) => {
-          if (enableVersion.get(key) !== version) return
-          if (!isAutoAccepting(sessionID, directory)) return
           for (const perm of x.data ?? []) {
             if (!perm?.id) continue
             if (perm.sessionID !== sessionID) continue
@@ -160,7 +149,6 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
     }
 
     function disable(sessionID: string, directory?: string) {
-      bumpEnableVersion(sessionID, directory)
       const key = directory ? acceptKey(sessionID, directory) : undefined
       setStore(
         produce((draft) => {

packages/app/src/context/platform.tsx

@@ -2,12 +2,6 @@ import { createSimpleContext } from "@opencode-ai/ui/context"
 import { AsyncStorage, SyncStorage } from "@solid-primitives/storage"
 import type { Accessor } from "solid-js"
 
-type PickerPaths = string | string[] | null
-type OpenDirectoryPickerOptions = { title?: string; multiple?: boolean }
-type OpenFilePickerOptions = { title?: string; multiple?: boolean }
-type SaveFilePickerOptions = { title?: string; defaultPath?: string }
-type UpdateInfo = { updateAvailable: boolean; version?: string }
-
 export type Platform = {
   /** Platform discriminator */
   platform: "web" | "desktop"
@@ -37,19 +31,19 @@ export type Platform = {
   notify(title: string, description?: string, href?: string): Promise<void>
 
   /** Open directory picker dialog (native on Tauri, server-backed on web) */
-  openDirectoryPickerDialog?(opts?: OpenDirectoryPickerOptions): Promise<PickerPaths>
+  openDirectoryPickerDialog?(opts?: { title?: string; multiple?: boolean }): Promise<string | string[] | null>
 
   /** Open native file picker dialog (Tauri only) */
-  openFilePickerDialog?(opts?: OpenFilePickerOptions): Promise<PickerPaths>
+  openFilePickerDialog?(opts?: { title?: string; multiple?: boolean }): Promise<string | string[] | null>
 
   /** Save file picker dialog (Tauri only) */
-  saveFilePickerDialog?(opts?: SaveFilePickerOptions): Promise<string | null>
+  saveFilePickerDialog?(opts?: { title?: string; defaultPath?: string }): Promise<string | null>
 
   /** Storage mechanism, defaults to localStorage */
   storage?: (name?: string) => SyncStorage | AsyncStorage
 
   /** Check for updates (Tauri only) */
-  checkUpdate?(): Promise<UpdateInfo>
+  checkUpdate?(): Promise<{ updateAvailable: boolean; version?: string }>
 
   /** Install updates (Tauri only) */
   update?(): Promise<void>

packages/app/src/context/prompt.tsx

@@ -1,4 +1,4 @@
-import { createStore, type SetStoreFunction } from "solid-js/store"
+import { createStore } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { batch, createMemo, createRoot, onCleanup } from "solid-js"
 import { useParams } from "@solidjs/router"
@@ -60,23 +60,27 @@ function isSelectionEqual(a?: FileSelection, b?: FileSelection) {
   )
 }
 
-function isPartEqual(partA: ContentPart, partB: ContentPart) {
-  switch (partA.type) {
-    case "text":
-      return partB.type === "text" && partA.content === partB.content
-    case "file":
-      return partB.type === "file" && partA.path === partB.path && isSelectionEqual(partA.selection, partB.selection)
-    case "agent":
-      return partB.type === "agent" && partA.name === partB.name
-    case "image":
-      return partB.type === "image" && partA.id === partB.id
-  }
-}
-
 export function isPromptEqual(promptA: Prompt, promptB: Prompt): boolean {
   if (promptA.length !== promptB.length) return false
   for (let i = 0; i < promptA.length; i++) {
-    if (!isPartEqual(promptA[i], promptB[i])) return false
+    const partA = promptA[i]
+    const partB = promptB[i]
+    if (partA.type !== partB.type) return false
+    if (partA.type === "text" && partA.content !== (partB as TextPart).content) {
+      return false
+    }
+    if (partA.type === "file") {
+      const fileA = partA as FileAttachmentPart
+      const fileB = partB as FileAttachmentPart
+      if (fileA.path !== fileB.path) return false
+      if (!isSelectionEqual(fileA.selection, fileB.selection)) return false
+    }
+    if (partA.type === "agent" && partA.name !== (partB as AgentPart).name) {
+      return false
+    }
+    if (partA.type === "image" && partA.id !== (partB as ImageAttachmentPart).id) {
+      return false
+    }
   }
   return true
 }
@@ -100,48 +104,6 @@ function clonePrompt(prompt: Prompt): Prompt {
   return prompt.map(clonePart)
 }
 
-function contextItemKey(item: ContextItem) {
-  if (item.type !== "file") return item.type
-  const start = item.selection?.startLine
-  const end = item.selection?.endLine
-  const key = `${item.type}:${item.path}:${start}:${end}`
-
-  if (item.commentID) {
-    return `${key}:c=${item.commentID}`
-  }
-
-  const comment = item.comment?.trim()
-  if (!comment) return key
-  const digest = checksum(comment) ?? comment
-  return `${key}:c=${digest.slice(0, 8)}`
-}
-
-function createPromptActions(
-  setStore: SetStoreFunction<{
-    prompt: Prompt
-    cursor?: number
-    context: {
-      items: (ContextItem & { key: string })[]
-    }
-  }>,
-) {
-  return {
-    set(prompt: Prompt, cursorPosition?: number) {
-      const next = clonePrompt(prompt)
-      batch(() => {
-        setStore("prompt", next)
-        if (cursorPosition !== undefined) setStore("cursor", cursorPosition)
-      })
-    },
-    reset() {
-      batch(() => {
-        setStore("prompt", clonePrompt(DEFAULT_PROMPT))
-        setStore("cursor", 0)
-      })
-    },
-  }
-}
-
 const WORKSPACE_KEY = "__workspace__"
 const MAX_PROMPT_SESSIONS = 20
 
@@ -172,7 +134,21 @@ function createPromptSession(dir: string, id: string | undefined) {
     }),
   )
 
-  const actions = createPromptActions(setStore)
+  function keyForItem(item: ContextItem) {
+    if (item.type !== "file") return item.type
+    const start = item.selection?.startLine
+    const end = item.selection?.endLine
+    const key = `${item.type}:${item.path}:${start}:${end}`
+
+    if (item.commentID) {
+      return `${key}:c=${item.commentID}`
+    }
+
+    const comment = item.comment?.trim()
+    if (!comment) return key
+    const digest = checksum(comment) ?? comment
+    return `${key}:c=${digest.slice(0, 8)}`
+  }
 
   return {
     ready,
@@ -182,7 +158,7 @@ function createPromptSession(dir: string, id: string | undefined) {
     context: {
       items: createMemo(() => store.context.items),
       add(item: ContextItem) {
-        const key = contextItemKey(item)
+        const key = keyForItem(item)
         if (store.context.items.find((x) => x.key === key)) return
         setStore("context", "items", (items) => [...items, { key, ...item }])
       },
@@ -190,8 +166,19 @@ function createPromptSession(dir: string, id: string | undefined) {
         setStore("context", "items", (items) => items.filter((x) => x.key !== key))
       },
     },
-    set: actions.set,
-    reset: actions.reset,
+    set(prompt: Prompt, cursorPosition?: number) {
+      const next = clonePrompt(prompt)
+      batch(() => {
+        setStore("prompt", next)
+        if (cursorPosition !== undefined) setStore("cursor", cursorPosition)
+      })
+    },
+    reset() {
+      batch(() => {
+        setStore("prompt", clonePrompt(DEFAULT_PROMPT))
+        setStore("cursor", 0)
+      })
+    },
   }
 }
 

packages/app/src/context/sdk.tsx

@@ -5,10 +5,6 @@ import { createEffect, createMemo, onCleanup, type Accessor } from "solid-js"
 import { useGlobalSDK } from "./global-sdk"
 import { usePlatform } from "./platform"
 
-type SDKEventMap = {
-  [key in Event["type"]]: Extract<Event, { type: key }>
-}
-
 export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
   name: "SDK",
   init: (props: { directory: Accessor<string> }) => {
@@ -25,7 +21,9 @@ export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
       }),
     )
 
-    const emitter = createGlobalEmitter<SDKEventMap>()
+    const emitter = createGlobalEmitter<{
+      [key in Event["type"]]: Extract<Event, { type: key }>
+    }>()
 
     createEffect(() => {
       const unsub = globalSDK.event.on(directory(), (event) => {

packages/app/src/context/server.tsx

@@ -6,7 +6,6 @@ import { Persist, persisted } from "@/utils/persist"
 import { checkServerHealth } from "@/utils/server-health"
 
 type StoredProject = { worktree: string; expanded: boolean }
-const HEALTH_POLL_INTERVAL_MS = 10_000
 
 export function normalizeServerUrl(input: string) {
   const trimmed = input.trim()
@@ -49,38 +48,24 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
 
     const healthy = () => state.healthy
 
-    const defaultUrl = () => normalizeServerUrl(props.defaultUrl)
-
-    function reconcileStartup() {
-      const fallback = defaultUrl()
-      if (!fallback) return
-
-      const previousSidecarUrl = normalizeServerUrl(store.currentSidecarUrl)
-      const list = previousSidecarUrl ? store.list.filter((url) => url !== previousSidecarUrl) : store.list
-      if (!props.isSidecar) {
-        batch(() => {
-          setStore("list", list)
-          if (store.currentSidecarUrl) setStore("currentSidecarUrl", "")
-          setState("active", fallback)
-        })
-        return
-      }
-
-      const nextList = list.includes(fallback) ? list : [...list, fallback]
-      batch(() => {
-        setStore("list", nextList)
-        setStore("currentSidecarUrl", fallback)
-        setState("active", fallback)
-      })
+    function setActive(input: string) {
+      const url = normalizeServerUrl(input)
+      if (!url) return
+      setState("active", url)
     }
 
-    function updateServerList(url: string, remove = false) {
-      if (remove) {
-        const list = store.list.filter((x) => x !== url)
-        const next = state.active === url ? (list[0] ?? defaultUrl() ?? "") : state.active
+    function add(input: string) {
+      const url = normalizeServerUrl(input)
+      if (!url) return
+
+      const fallback = normalizeServerUrl(props.defaultUrl)
+      if (fallback && url === fallback) {
         batch(() => {
-          setStore("list", list)
-          setState("active", next)
+          if (!store.list.includes(url)) {
+            // Add the fallback url to the list if it's not already in the list
+            setStore("list", store.list.length, url)
+          }
+          setState("active", url)
         })
         return
       }
@@ -93,7 +78,51 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
       })
     }
 
-    function startHealthPolling(url: string) {
+    function remove(input: string) {
+      const url = normalizeServerUrl(input)
+      if (!url) return
+
+      const list = store.list.filter((x) => x !== url)
+      const next = state.active === url ? (list[0] ?? normalizeServerUrl(props.defaultUrl) ?? "") : state.active
+
+      batch(() => {
+        setStore("list", list)
+        setState("active", next)
+      })
+    }
+
+    createEffect(() => {
+      if (!ready()) return
+      if (state.active) return
+      const url = normalizeServerUrl(props.defaultUrl)
+      if (!url) return
+      batch(() => {
+        // Remove the previous startup sidecar url
+        if (store.currentSidecarUrl) {
+          remove(store.currentSidecarUrl)
+        }
+
+        // Add the new sidecar url
+        if (props.isSidecar && props.defaultUrl) {
+          add(props.defaultUrl)
+          setStore("currentSidecarUrl", props.defaultUrl)
+        }
+
+        setState("active", url)
+      })
+    })
+
+    const isReady = createMemo(() => ready() && !!state.active)
+
+    const fetcher = platform.fetch ?? globalThis.fetch
+    const check = (url: string) => checkServerHealth(url, fetcher).then((x) => x.healthy)
+
+    createEffect(() => {
+      const url = state.active
+      if (!url) return
+
+      setState("healthy", undefined)
+
       let alive = true
       let busy = false
 
@@ -111,48 +140,12 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
       }
 
       run()
-      const interval = setInterval(run, HEALTH_POLL_INTERVAL_MS)
-      return () => {
+      const interval = setInterval(run, 10_000)
+
+      onCleanup(() => {
         alive = false
         clearInterval(interval)
-      }
-    }
-
-    function setActive(input: string) {
-      const url = normalizeServerUrl(input)
-      if (!url) return
-      setState("active", url)
-    }
-
-    function add(input: string) {
-      const url = normalizeServerUrl(input)
-      if (!url) return
-      updateServerList(url)
-    }
-
-    function remove(input: string) {
-      const url = normalizeServerUrl(input)
-      if (!url) return
-      updateServerList(url, true)
-    }
-
-    createEffect(() => {
-      if (!ready()) return
-      if (state.active) return
-      reconcileStartup()
-    })
-
-    const isReady = createMemo(() => ready() && !!state.active)
-
-    const fetcher = platform.fetch ?? globalThis.fetch
-    const check = (url: string) => checkServerHealth(url, fetcher).then((x) => x.healthy)
-
-    createEffect(() => {
-      const url = state.active
-      if (!url) return
-
-      setState("healthy", undefined)
-      onCleanup(startHealthPolling(url))
+      })
     })
 
     const origin = createMemo(() => projectsKey(state.active))

packages/app/src/context/settings.tsx

@@ -10,11 +10,8 @@ export interface NotificationSettings {
 }
 
 export interface SoundSettings {
-  agentEnabled: boolean
   agent: string
-  permissionsEnabled: boolean
   permissions: string
-  errorsEnabled: boolean
   errors: string
 }
 
@@ -60,11 +57,8 @@ const defaultSettings: Settings = {
     errors: false,
   },
   sounds: {
-    agentEnabled: true,
     agent: "staplebops-01",
-    permissionsEnabled: true,
     permissions: "staplebops-02",
-    errorsEnabled: true,
     errors: "nope-03",
   },
 }
@@ -91,10 +85,6 @@ 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)
-}
-
 export const { use: useSettings, provider: SettingsProvider } = createSimpleContext({
   name: "Settings",
   init: () => {
@@ -111,27 +101,27 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         return store
       },
       general: {
-        autoSave: withFallback(() => store.general?.autoSave, defaultSettings.general.autoSave),
+        autoSave: createMemo(() => store.general?.autoSave ?? defaultSettings.general.autoSave),
         setAutoSave(value: boolean) {
           setStore("general", "autoSave", value)
         },
-        releaseNotes: withFallback(() => store.general?.releaseNotes, defaultSettings.general.releaseNotes),
+        releaseNotes: createMemo(() => store.general?.releaseNotes ?? defaultSettings.general.releaseNotes),
         setReleaseNotes(value: boolean) {
           setStore("general", "releaseNotes", value)
         },
       },
       updates: {
-        startup: withFallback(() => store.updates?.startup, defaultSettings.updates.startup),
+        startup: createMemo(() => store.updates?.startup ?? defaultSettings.updates.startup),
         setStartup(value: boolean) {
           setStore("updates", "startup", value)
         },
       },
       appearance: {
-        fontSize: withFallback(() => store.appearance?.fontSize, defaultSettings.appearance.fontSize),
+        fontSize: createMemo(() => store.appearance?.fontSize ?? defaultSettings.appearance.fontSize),
         setFontSize(value: number) {
           setStore("appearance", "fontSize", value)
         },
-        font: withFallback(() => store.appearance?.font, defaultSettings.appearance.font),
+        font: createMemo(() => store.appearance?.font ?? defaultSettings.appearance.font),
         setFont(value: string) {
           setStore("appearance", "font", value)
         },
@@ -142,62 +132,42 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
           setStore("keybinds", action, keybind)
         },
         reset(action: string) {
-          setStore("keybinds", (current) => {
-            if (!Object.prototype.hasOwnProperty.call(current, action)) return current
-            const next = { ...current }
-            delete next[action]
-            return next
-          })
+          setStore("keybinds", action, undefined!)
         },
         resetAll() {
           setStore("keybinds", reconcile({}))
         },
       },
       permissions: {
-        autoApprove: withFallback(() => store.permissions?.autoApprove, defaultSettings.permissions.autoApprove),
+        autoApprove: createMemo(() => store.permissions?.autoApprove ?? defaultSettings.permissions.autoApprove),
         setAutoApprove(value: boolean) {
           setStore("permissions", "autoApprove", value)
         },
       },
       notifications: {
-        agent: withFallback(() => store.notifications?.agent, defaultSettings.notifications.agent),
+        agent: createMemo(() => store.notifications?.agent ?? defaultSettings.notifications.agent),
         setAgent(value: boolean) {
           setStore("notifications", "agent", value)
         },
-        permissions: withFallback(() => store.notifications?.permissions, defaultSettings.notifications.permissions),
+        permissions: createMemo(() => store.notifications?.permissions ?? defaultSettings.notifications.permissions),
         setPermissions(value: boolean) {
           setStore("notifications", "permissions", value)
         },
-        errors: withFallback(() => store.notifications?.errors, defaultSettings.notifications.errors),
+        errors: createMemo(() => store.notifications?.errors ?? defaultSettings.notifications.errors),
         setErrors(value: boolean) {
           setStore("notifications", "errors", value)
         },
       },
       sounds: {
-        agentEnabled: withFallback(() => store.sounds?.agentEnabled, defaultSettings.sounds.agentEnabled),
-        setAgentEnabled(value: boolean) {
-          setStore("sounds", "agentEnabled", value)
-        },
-        agent: withFallback(() => store.sounds?.agent, defaultSettings.sounds.agent),
+        agent: createMemo(() => store.sounds?.agent ?? defaultSettings.sounds.agent),
         setAgent(value: string) {
           setStore("sounds", "agent", value)
         },
-        permissionsEnabled: withFallback(
-          () => store.sounds?.permissionsEnabled,
-          defaultSettings.sounds.permissionsEnabled,
-        ),
-        setPermissionsEnabled(value: boolean) {
-          setStore("sounds", "permissionsEnabled", value)
-        },
-        permissions: withFallback(() => store.sounds?.permissions, defaultSettings.sounds.permissions),
+        permissions: createMemo(() => store.sounds?.permissions ?? defaultSettings.sounds.permissions),
         setPermissions(value: string) {
           setStore("sounds", "permissions", value)
         },
-        errorsEnabled: withFallback(() => store.sounds?.errorsEnabled, defaultSettings.sounds.errorsEnabled),
-        setErrorsEnabled(value: boolean) {
-          setStore("sounds", "errorsEnabled", value)
-        },
-        errors: withFallback(() => store.sounds?.errors, defaultSettings.sounds.errors),
+        errors: createMemo(() => store.sounds?.errors ?? defaultSettings.sounds.errors),
         setErrors(value: string) {
           setStore("sounds", "errors", value)
         },

packages/app/src/context/sync.tsx

@@ -7,20 +7,6 @@ import { useGlobalSync } from "./global-sync"
 import { useSDK } from "./sdk"
 import type { Message, Part } from "@opencode-ai/sdk/v2/client"
 
-function sortParts(parts: Part[]) {
-  return parts.filter((part) => !!part?.id).sort((a, b) => cmp(a.id, b.id))
-}
-
-function runInflight(map: Map<string, Promise<void>>, key: string, task: () => Promise<void>) {
-  const pending = map.get(key)
-  if (pending) return pending
-  const promise = task().finally(() => {
-    map.delete(key)
-  })
-  map.set(key, promise)
-  return promise
-}
-
 const keyFor = (directory: string, id: string) => `${directory}\n${id}`
 
 const cmp = (a: string, b: string) => (a < b ? -1 : a > b ? 1 : 0)
@@ -50,7 +36,7 @@ export function applyOptimisticAdd(draft: OptimisticStore, input: OptimisticAddI
     const result = Binary.search(messages, input.message.id, (m) => m.id)
     messages.splice(result.index, 0, input.message)
   }
-  draft.part[input.message.id] = sortParts(input.parts)
+  draft.part[input.message.id] = input.parts.filter((part) => !!part?.id).sort((a, b) => cmp(a.id, b.id))
 }
 
 export function applyOptimisticRemove(draft: OptimisticStore, input: OptimisticRemoveInput) {
@@ -62,34 +48,6 @@ export function applyOptimisticRemove(draft: OptimisticStore, input: OptimisticR
   delete draft.part[input.messageID]
 }
 
-function setOptimisticAdd(setStore: (...args: unknown[]) => void, input: OptimisticAddInput) {
-  setStore("message", input.sessionID, (messages: Message[] | undefined) => {
-    if (!messages) return [input.message]
-    const result = Binary.search(messages, input.message.id, (m) => m.id)
-    const next = [...messages]
-    next.splice(result.index, 0, input.message)
-    return next
-  })
-  setStore("part", input.message.id, sortParts(input.parts))
-}
-
-function setOptimisticRemove(setStore: (...args: unknown[]) => void, input: OptimisticRemoveInput) {
-  setStore("message", input.sessionID, (messages: Message[] | undefined) => {
-    if (!messages) return messages
-    const result = Binary.search(messages, input.messageID, (m) => m.id)
-    if (!result.found) return messages
-    const next = [...messages]
-    next.splice(result.index, 1)
-    return next
-  })
-  setStore("part", (part: Record<string, Part[] | undefined>) => {
-    if (!(input.messageID in part)) return part
-    const next = { ...part }
-    delete next[input.messageID]
-    return next
-  })
-}
-
 export const { use: useSync, provider: SyncProvider } = createSimpleContext({
   name: "Sync",
   init: () => {
@@ -105,7 +63,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       return globalSync.child(directory)
     }
     const absolute = (path: string) => (current()[0].path.directory + "/" + path).replace("//", "/")
-    const messagePageSize = 400
+    const chunk = 400
     const inflight = new Map<string, Promise<void>>()
     const inflightDiff = new Map<string, Promise<void>>()
     const inflightTodo = new Map<string, Promise<void>>()
@@ -123,25 +81,8 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
     }
 
     const limitFor = (count: number) => {
-      if (count <= messagePageSize) return messagePageSize
-      return Math.ceil(count / messagePageSize) * messagePageSize
-    }
-
-    const fetchMessages = async (input: { client: typeof sdk.client; sessionID: string; limit: number }) => {
-      const messages = await retry(() =>
-        input.client.session.messages({ sessionID: input.sessionID, limit: input.limit }),
-      )
-      const items = (messages.data ?? []).filter((x) => !!x?.info?.id)
-      const session = items
-        .map((x) => x.info)
-        .filter((m) => !!m?.id)
-        .sort((a, b) => cmp(a.id, b.id))
-      const part = items.map((message) => ({ id: message.info.id, part: sortParts(message.parts) }))
-      return {
-        session,
-        part,
-        complete: session.length < input.limit,
-      }
+      if (count <= chunk) return chunk
+      return Math.ceil(count / chunk) * chunk
     }
 
     const loadMessages = async (input: {
@@ -155,15 +96,30 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       if (meta.loading[key]) return
 
       setMeta("loading", key, true)
-      await fetchMessages(input)
-        .then((next) => {
+      await retry(() => input.client.session.messages({ sessionID: input.sessionID, limit: input.limit }))
+        .then((messages) => {
+          const items = (messages.data ?? []).filter((x) => !!x?.info?.id)
+          const next = items
+            .map((x) => x.info)
+            .filter((m) => !!m?.id)
+            .sort((a, b) => cmp(a.id, b.id))
+
           batch(() => {
-            input.setStore("message", input.sessionID, reconcile(next.session, { key: "id" }))
-            for (const message of next.part) {
-              input.setStore("part", message.id, reconcile(message.part, { key: "id" }))
+            input.setStore("message", input.sessionID, reconcile(next, { key: "id" }))
+
+            for (const message of items) {
+              input.setStore(
+                "part",
+                message.info.id,
+                reconcile(
+                  message.parts.filter((p) => !!p?.id).sort((a, b) => cmp(a.id, b.id)),
+                  { key: "id" },
+                ),
+              )
             }
+
             setMeta("limit", key, input.limit)
-            setMeta("complete", key, next.complete)
+            setMeta("complete", key, next.length < input.limit)
           })
         })
         .finally(() => {
@@ -195,11 +151,19 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
         optimistic: {
           add(input: { directory?: string; sessionID: string; message: Message; parts: Part[] }) {
             const [, setStore] = target(input.directory)
-            setOptimisticAdd(setStore as (...args: unknown[]) => void, input)
+            setStore(
+              produce((draft) => {
+                applyOptimisticAdd(draft as OptimisticStore, input)
+              }),
+            )
           },
           remove(input: { directory?: string; sessionID: string; messageID: string }) {
             const [, setStore] = target(input.directory)
-            setOptimisticRemove(setStore as (...args: unknown[]) => void, input)
+            setStore(
+              produce((draft) => {
+                applyOptimisticRemove(draft as OptimisticStore, input)
+              }),
+            )
           },
         },
         addOptimisticMessage(input: {
@@ -218,11 +182,15 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             model: input.model,
           }
           const [, setStore] = target()
-          setOptimisticAdd(setStore as (...args: unknown[]) => void, {
-            sessionID: input.sessionID,
-            message,
-            parts: input.parts,
-          })
+          setStore(
+            produce((draft) => {
+              applyOptimisticAdd(draft as OptimisticStore, {
+                sessionID: input.sessionID,
+                message,
+                parts: input.parts,
+              })
+            }),
+          )
         },
         async sync(sessionID: string) {
           const directory = sdk.directory
@@ -237,9 +205,11 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           const hasMessages = store.message[sessionID] !== undefined
           const hydrated = meta.limit[key] !== undefined
           if (hasSession && hasMessages && hydrated) return
+          const pending = inflight.get(key)
+          if (pending) return pending
 
           const count = store.message[sessionID]?.length ?? 0
-          const limit = hydrated ? (meta.limit[key] ?? messagePageSize) : limitFor(count)
+          const limit = hydrated ? (meta.limit[key] ?? chunk) : limitFor(count)
 
           const sessionReq = hasSession
             ? Promise.resolve()
@@ -270,7 +240,14 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
                   limit,
                 })
 
-          return runInflight(inflight, key, () => Promise.all([sessionReq, messagesReq]).then(() => {}))
+          const promise = Promise.all([sessionReq, messagesReq])
+            .then(() => {})
+            .finally(() => {
+              inflight.delete(key)
+            })
+
+          inflight.set(key, promise)
+          return promise
         },
         async diff(sessionID: string) {
           const directory = sdk.directory
@@ -279,11 +256,19 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           if (store.session_diff[sessionID] !== undefined) return
 
           const key = keyFor(directory, sessionID)
-          return runInflight(inflightDiff, key, () =>
-            retry(() => client.session.diff({ sessionID })).then((diff) => {
+          const pending = inflightDiff.get(key)
+          if (pending) return pending
+
+          const promise = retry(() => client.session.diff({ sessionID }))
+            .then((diff) => {
               setStore("session_diff", sessionID, reconcile(diff.data ?? [], { key: "file" }))
-            }),
-          )
+            })
+            .finally(() => {
+              inflightDiff.delete(key)
+            })
+
+          inflightDiff.set(key, promise)
+          return promise
         },
         async todo(sessionID: string) {
           const directory = sdk.directory
@@ -292,11 +277,19 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           if (store.todo[sessionID] !== undefined) return
 
           const key = keyFor(directory, sessionID)
-          return runInflight(inflightTodo, key, () =>
-            retry(() => client.session.todo({ sessionID })).then((todo) => {
+          const pending = inflightTodo.get(key)
+          if (pending) return pending
+
+          const promise = retry(() => client.session.todo({ sessionID }))
+            .then((todo) => {
               setStore("todo", sessionID, reconcile(todo.data ?? [], { key: "id" }))
-            }),
-          )
+            })
+            .finally(() => {
+              inflightTodo.delete(key)
+            })
+
+          inflightTodo.set(key, promise)
+          return promise
         },
         history: {
           more(sessionID: string) {
@@ -311,7 +304,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             const key = keyFor(sdk.directory, sessionID)
             return meta.loading[key] ?? false
           },
-          async loadMore(sessionID: string, count = messagePageSize) {
+          async loadMore(sessionID: string, count = chunk) {
             const directory = sdk.directory
             const client = sdk.client
             const [, setStore] = globalSync.child(directory)
@@ -319,7 +312,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             if (meta.loading[key]) return
             if (meta.complete[key]) return
 
-            const currentLimit = meta.limit[key] ?? messagePageSize
+            const currentLimit = meta.limit[key] ?? chunk
             await loadMessages({
               directory,
               client,

packages/app/src/context/terminal.tsx

@@ -79,42 +79,19 @@ function createWorkspaceTerminalSession(sdk: ReturnType<typeof useSDK>, dir: str
     }),
   )
 
-  const pickNextTerminalNumber = () => {
-    const existingTitleNumbers = new Set(
-      store.all.flatMap((pty) => {
-        const direct = Number.isFinite(pty.titleNumber) && pty.titleNumber > 0 ? pty.titleNumber : undefined
-        if (direct !== undefined) return [direct]
-        const parsed = numberFromTitle(pty.title)
-        if (parsed === undefined) return []
-        return [parsed]
-      }),
-    )
-
-    return (
-      Array.from({ length: existingTitleNumbers.size + 1 }, (_, index) => index + 1).find(
-        (number) => !existingTitleNumbers.has(number),
-      ) ?? 1
-    )
-  }
-
-  const removeExited = (id: string) => {
-    const all = store.all
-    const index = all.findIndex((x) => x.id === id)
-    if (index === -1) return
-    const active = store.active === id ? (index === 0 ? all[1]?.id : all[0]?.id) : store.active
+  const unsub = sdk.event.on("pty.exited", (event: { properties: { id: string } }) => {
+    const id = event.properties.id
+    if (!store.all.some((x) => x.id === id)) return
     batch(() => {
-      setStore("active", active)
       setStore(
         "all",
-        produce((draft) => {
-          draft.splice(index, 1)
-        }),
+        store.all.filter((x) => x.id !== id),
       )
+      if (store.active === id) {
+        const remaining = store.all.filter((x) => x.id !== id)
+        setStore("active", remaining[0]?.id)
+      }
     })
-  }
-
-  const unsub = sdk.event.on("pty.exited", (event: { properties: { id: string } }) => {
-    removeExited(event.properties.id)
   })
   onCleanup(unsub)
 
@@ -140,7 +117,7 @@ function createWorkspaceTerminalSession(sdk: ReturnType<typeof useSDK>, dir: str
 
   return {
     ready,
-    all: createMemo(() => store.all),
+    all: createMemo(() => Object.values(store.all)),
     active: createMemo(() => store.active),
     clear() {
       batch(() => {
@@ -149,7 +126,20 @@ function createWorkspaceTerminalSession(sdk: ReturnType<typeof useSDK>, dir: str
       })
     },
     new() {
-      const nextNumber = pickNextTerminalNumber()
+      const existingTitleNumbers = new Set(
+        store.all.flatMap((pty) => {
+          const direct = Number.isFinite(pty.titleNumber) && pty.titleNumber > 0 ? pty.titleNumber : undefined
+          if (direct !== undefined) return [direct]
+          const parsed = numberFromTitle(pty.title)
+          if (parsed === undefined) return []
+          return [parsed]
+        }),
+      )
+
+      const nextNumber =
+        Array.from({ length: existingTitleNumbers.size + 1 }, (_, index) => index + 1).find(
+          (number) => !existingTitleNumbers.has(number),
+        ) ?? 1
 
       sdk.client.pty
         .create({ title: `Terminal ${nextNumber}` })
@@ -161,7 +151,10 @@ function createWorkspaceTerminalSession(sdk: ReturnType<typeof useSDK>, dir: str
             title: pty.data?.title ?? "Terminal",
             titleNumber: nextNumber,
           }
-          setStore("all", store.all.length, newTerminal)
+          setStore("all", (all) => {
+            const newAll = [...all, newTerminal]
+            return newAll
+          })
           setStore("active", id)
         })
         .catch((error: unknown) => {
@@ -170,9 +163,8 @@ function createWorkspaceTerminalSession(sdk: ReturnType<typeof useSDK>, dir: str
     },
     update(pty: Partial<LocalPTY> & { id: string }) {
       const index = store.all.findIndex((x) => x.id === pty.id)
-      const previous = index >= 0 ? store.all[index] : undefined
-      if (index >= 0) {
-        setStore("all", index, (item) => ({ ...item, ...pty }))
+      if (index !== -1) {
+        setStore("all", index, (existing) => ({ ...existing, ...pty }))
       }
       sdk.client.pty
         .update({
@@ -181,10 +173,6 @@ function createWorkspaceTerminalSession(sdk: ReturnType<typeof useSDK>, dir: str
           size: pty.cols && pty.rows ? { rows: pty.rows, cols: pty.cols } : undefined,
         })
         .catch((error: unknown) => {
-          if (previous) {
-            const currentIndex = store.all.findIndex((item) => item.id === pty.id)
-            if (currentIndex >= 0) setStore("all", currentIndex, previous)
-          }
           console.error("Failed to update terminal", error)
         })
     },
@@ -237,21 +225,15 @@ function createWorkspaceTerminalSession(sdk: ReturnType<typeof useSDK>, dir: str
       setStore("active", store.all[prevIndex]?.id)
     },
     async close(id: string) {
-      const index = store.all.findIndex((f) => f.id === id)
-      if (index !== -1) {
-        batch(() => {
-          if (store.active === id) {
-            const next = index > 0 ? store.all[index - 1]?.id : store.all[1]?.id
-            setStore("active", next)
-          }
-          setStore(
-            "all",
-            produce((all) => {
-              all.splice(index, 1)
-            }),
-          )
-        })
-      }
+      batch(() => {
+        const filtered = store.all.filter((x) => x.id !== id)
+        if (store.active === id) {
+          const index = store.all.findIndex((f) => f.id === id)
+          const next = index > 0 ? index - 1 : 0
+          setStore("active", filtered[next]?.id)
+        }
+        setStore("all", filtered)
+      })
 
       await sdk.client.pty.remove({ ptyID: id }).catch((error: unknown) => {
         console.error("Failed to close terminal", error)

packages/app/src/entry.tsx

@@ -8,117 +8,97 @@ import pkg from "../package.json"
 
 const DEFAULT_SERVER_URL_KEY = "opencode.settings.dat:defaultServerUrl"
 
-const getLocale = () => {
-  if (typeof navigator !== "object") return "en" as const
-  const languages = navigator.languages?.length ? navigator.languages : [navigator.language]
-  for (const language of languages) {
-    if (!language) continue
-    if (language.toLowerCase().startsWith("zh")) return "zh" as const
-  }
-  return "en" as const
-}
-
-const getRootNotFoundError = () => {
-  const key = "error.dev.rootNotFound" as const
-  const locale = getLocale()
-  return locale === "zh" ? (zh[key] ?? en[key]) : en[key]
-}
-
-const getStorage = (key: string) => {
-  if (typeof localStorage === "undefined") return null
-  try {
-    return localStorage.getItem(key)
-  } catch {
-    return null
-  }
-}
-
-const setStorage = (key: string, value: string | null) => {
-  if (typeof localStorage === "undefined") return
-  try {
-    if (value !== null) {
-      localStorage.setItem(key, value)
-      return
-    }
-    localStorage.removeItem(key)
-  } catch {
-    return
-  }
-}
-
-const readDefaultServerUrl = () => getStorage(DEFAULT_SERVER_URL_KEY)
-const writeDefaultServerUrl = (url: string | null) => setStorage(DEFAULT_SERVER_URL_KEY, url)
-
-const notify: Platform["notify"] = async (title, description, href) => {
-  if (!("Notification" in window)) return
-
-  const permission =
-    Notification.permission === "default"
-      ? await Notification.requestPermission().catch(() => "denied")
-      : Notification.permission
-
-  if (permission !== "granted") return
-
-  const inView = document.visibilityState === "visible" && document.hasFocus()
-  if (inView) return
-
-  const notification = new Notification(title, {
-    body: description ?? "",
-    icon: "https://opencode.ai/favicon-96x96-v3.png",
-  })
-
-  notification.onclick = () => {
-    window.focus()
-    if (href) {
-      window.history.pushState(null, "", href)
-      window.dispatchEvent(new PopStateEvent("popstate"))
-    }
-    notification.close()
-  }
-}
-
-const openLink: Platform["openLink"] = (url) => {
-  window.open(url, "_blank")
-}
-
-const back: Platform["back"] = () => {
-  window.history.back()
-}
-
-const forward: Platform["forward"] = () => {
-  window.history.forward()
-}
-
-const restart: Platform["restart"] = async () => {
-  window.location.reload()
-}
-
 const root = document.getElementById("root")
-if (!(root instanceof HTMLElement) && import.meta.env.DEV) {
-  throw new Error(getRootNotFoundError())
+if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
+  const locale = (() => {
+    if (typeof navigator !== "object") return "en" as const
+    const languages = navigator.languages?.length ? navigator.languages : [navigator.language]
+    for (const language of languages) {
+      if (!language) continue
+      if (language.toLowerCase().startsWith("zh")) return "zh" as const
+    }
+    return "en" as const
+  })()
+
+  const key = "error.dev.rootNotFound" as const
+  const message = locale === "zh" ? (zh[key] ?? en[key]) : en[key]
+  throw new Error(message)
 }
 
 const platform: Platform = {
   platform: "web",
   version: pkg.version,
-  openLink,
-  back,
-  forward,
-  restart,
-  notify,
-  getDefaultServerUrl: readDefaultServerUrl,
-  setDefaultServerUrl: writeDefaultServerUrl,
+  openLink(url: string) {
+    window.open(url, "_blank")
+  },
+  back() {
+    window.history.back()
+  },
+  forward() {
+    window.history.forward()
+  },
+  restart: async () => {
+    window.location.reload()
+  },
+  notify: async (title, description, href) => {
+    if (!("Notification" in window)) return
+
+    const permission =
+      Notification.permission === "default"
+        ? await Notification.requestPermission().catch(() => "denied")
+        : Notification.permission
+
+    if (permission !== "granted") return
+
+    const inView = document.visibilityState === "visible" && document.hasFocus()
+    if (inView) return
+
+    await Promise.resolve()
+      .then(() => {
+        const notification = new Notification(title, {
+          body: description ?? "",
+          icon: "https://opencode.ai/favicon-96x96-v3.png",
+        })
+        notification.onclick = () => {
+          window.focus()
+          if (href) {
+            window.history.pushState(null, "", href)
+            window.dispatchEvent(new PopStateEvent("popstate"))
+          }
+          notification.close()
+        }
+      })
+      .catch(() => undefined)
+  },
+  getDefaultServerUrl: () => {
+    if (typeof localStorage === "undefined") return null
+    try {
+      return localStorage.getItem(DEFAULT_SERVER_URL_KEY)
+    } catch {
+      return null
+    }
+  },
+  setDefaultServerUrl: (url) => {
+    if (typeof localStorage === "undefined") return
+    try {
+      if (url) {
+        localStorage.setItem(DEFAULT_SERVER_URL_KEY, url)
+        return
+      }
+      localStorage.removeItem(DEFAULT_SERVER_URL_KEY)
+    } catch {
+      return
+    }
+  },
 }
 
-if (root instanceof HTMLElement) {
-  render(
-    () => (
-      <PlatformProvider value={platform}>
-        <AppBaseProviders>
-          <AppInterface />
-        </AppBaseProviders>
-      </PlatformProvider>
-    ),
-    root,
-  )
-}
+render(
+  () => (
+    <PlatformProvider value={platform}>
+      <AppBaseProviders>
+        <AppInterface />
+      </AppBaseProviders>
+    </PlatformProvider>
+  ),
+  root!,
+)

packages/app/src/env.d.ts

@@ -1,5 +1,3 @@
-import "solid-js"
-
 interface ImportMetaEnv {
   readonly VITE_OPENCODE_SERVER_HOST: string
   readonly VITE_OPENCODE_SERVER_PORT: string
@@ -8,11 +6,3 @@ interface ImportMetaEnv {
 interface ImportMeta {
   readonly env: ImportMetaEnv
 }
-
-declare module "solid-js" {
-  namespace JSX {
-    interface Directives {
-      sortable: true
-    }
-  }
-}

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

@@ -4,7 +4,6 @@ import { useParams } from "@solidjs/router"
 import { createMemo } from "solid-js"
 
 export const popularProviders = ["opencode", "anthropic", "github-copilot", "openai", "google", "openrouter", "vercel"]
-const popularProviderSet = new Set(popularProviders)
 
 export function useProviders() {
   const globalSync = useGlobalSync()
@@ -17,12 +16,11 @@ export function useProviders() {
     }
     return globalSync.data.provider
   })
-  const connectedIDs = createMemo(() => new Set(providers().connected))
-  const connected = createMemo(() => providers().all.filter((p) => connectedIDs().has(p.id)))
+  const connected = createMemo(() => providers().all.filter((p) => providers().connected.includes(p.id)))
   const paid = createMemo(() =>
     connected().filter((p) => p.id !== "opencode" || Object.values(p.models).find((m) => m.cost?.input)),
   )
-  const popular = createMemo(() => providers().all.filter((p) => popularProviderSet.has(p.id)))
+  const popular = createMemo(() => providers().all.filter((p) => popularProviders.includes(p.id)))
   return {
     all: createMemo(() => providers().all),
     default: createMemo(() => providers().default),

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

@@ -1,47 +1,21 @@
 import { createEffect, createMemo, Show, type ParentProps } from "solid-js"
-import { createStore } from "solid-js/store"
 import { useNavigate, useParams } from "@solidjs/router"
 import { SDKProvider, useSDK } from "@/context/sdk"
 import { SyncProvider, useSync } from "@/context/sync"
 import { LocalProvider } from "@/context/local"
 
 import { DataProvider } from "@opencode-ai/ui/context"
+import { iife } from "@opencode-ai/util/iife"
 import type { QuestionAnswer } from "@opencode-ai/sdk/v2"
 import { decode64 } from "@/utils/base64"
 import { showToast } from "@opencode-ai/ui/toast"
 import { useLanguage } from "@/context/language"
 
-function DirectoryDataProvider(props: ParentProps<{ directory: string }>) {
-  const params = useParams()
-  const navigate = useNavigate()
-  const sync = useSync()
-  const sdk = useSDK()
-
-  return (
-    <DataProvider
-      data={sync.data}
-      directory={props.directory}
-      onPermissionRespond={(input: {
-        sessionID: string
-        permissionID: string
-        response: "once" | "always" | "reject"
-      }) => sdk.client.permission.respond(input)}
-      onQuestionReply={(input: { requestID: string; answers: QuestionAnswer[] }) => sdk.client.question.reply(input)}
-      onQuestionReject={(input: { requestID: string }) => sdk.client.question.reject(input)}
-      onNavigateToSession={(sessionID: string) => navigate(`/${params.dir}/session/${sessionID}`)}
-      onSessionHref={(sessionID: string) => `/${params.dir}/session/${sessionID}`}
-      onSyncSession={(sessionID: string) => sync.session.sync(sessionID)}
-    >
-      <LocalProvider>{props.children}</LocalProvider>
-    </DataProvider>
-  )
-}
-
 export default function Layout(props: ParentProps) {
   const params = useParams()
   const navigate = useNavigate()
   const language = useLanguage()
-  const [store, setStore] = createStore({ invalid: "" })
+  let invalid = ""
   const directory = createMemo(() => {
     return decode64(params.dir) ?? ""
   })
@@ -49,8 +23,8 @@ export default function Layout(props: ParentProps) {
   createEffect(() => {
     if (!params.dir) return
     if (directory()) return
-    if (store.invalid === params.dir) return
-    setStore("invalid", params.dir)
+    if (invalid === params.dir) return
+    invalid = params.dir
     showToast({
       variant: "error",
       title: language.t("common.requestFailed"),
@@ -62,7 +36,46 @@ export default function Layout(props: ParentProps) {
     <Show when={directory()}>
       <SDKProvider directory={directory}>
         <SyncProvider>
-          <DirectoryDataProvider directory={directory()}>{props.children}</DirectoryDataProvider>
+          {iife(() => {
+            const sync = useSync()
+            const sdk = useSDK()
+            const respond = (input: {
+              sessionID: string
+              permissionID: string
+              response: "once" | "always" | "reject"
+            }) => sdk.client.permission.respond(input)
+
+            const replyToQuestion = (input: { requestID: string; answers: QuestionAnswer[] }) =>
+              sdk.client.question.reply(input)
+
+            const rejectQuestion = (input: { requestID: string }) => sdk.client.question.reject(input)
+
+            const navigateToSession = (sessionID: string) => {
+              navigate(`/${params.dir}/session/${sessionID}`)
+            }
+
+            const sessionHref = (sessionID: string) => {
+              if (params.dir) return `/${params.dir}/session/${sessionID}`
+              return `/session/${sessionID}`
+            }
+
+            const syncSession = (sessionID: string) => sync.session.sync(sessionID)
+
+            return (
+              <DataProvider
+                data={sync.data}
+                directory={directory()}
+                onPermissionRespond={respond}
+                onQuestionReply={replyToQuestion}
+                onQuestionReject={rejectQuestion}
+                onNavigateToSession={navigateToSession}
+                onSessionHref={sessionHref}
+                onSyncSession={syncSession}
+              >
+                <LocalProvider>{props.children}</LocalProvider>
+              </DataProvider>
+            )
+          })}
         </SyncProvider>
       </SDKProvider>
     </Show>

packages/app/src/pages/error.tsx

@@ -13,17 +13,6 @@ export type InitError = {
 }
 
 type Translator = ReturnType<typeof useLanguage>["t"]
-const CHAIN_SEPARATOR = "\n" + "─".repeat(40) + "\n"
-
-function isIssue(value: unknown): value is { message: string; path: string[] } {
-  if (!value || typeof value !== "object") return false
-  if (!("message" in value) || !("path" in value)) return false
-  const message = (value as { message: unknown }).message
-  const path = (value as { path: unknown }).path
-  if (typeof message !== "string") return false
-  if (!Array.isArray(path)) return false
-  return path.every((part) => typeof part === "string")
-}
 
 function isInitError(error: unknown): error is InitError {
   return (
@@ -123,7 +112,9 @@ function formatInitError(error: InitError, t: Translator): string {
     }
     case "ConfigInvalidError": {
       const issues = Array.isArray(data.issues)
-        ? data.issues.filter(isIssue).map((issue) => "↳ " + issue.message + " " + issue.path.join("."))
+        ? data.issues.map(
+            (issue: { message: string; path: string[] }) => "↳ " + issue.message + " " + issue.path.join("."),
+          )
         : []
       const message = typeof data.message === "string" ? data.message : ""
       const path = typeof data.path === "string" ? data.path : safeJson(data.path)
@@ -148,14 +139,14 @@ function formatErrorChain(error: unknown, t: Translator, depth = 0, parentMessag
   if (isInitError(error)) {
     const message = formatInitError(error, t)
     if (depth > 0 && parentMessage === message) return ""
-    const indent = depth > 0 ? `\n${CHAIN_SEPARATOR}${t("error.chain.causedBy")}\n` : ""
+    const indent = depth > 0 ? `\n${"─".repeat(40)}\n${t("error.chain.causedBy")}\n` : ""
     return indent + `${error.name}\n${message}`
   }
 
   if (error instanceof Error) {
     const isDuplicate = depth > 0 && parentMessage === error.message
     const parts: string[] = []
-    const indent = depth > 0 ? `\n${CHAIN_SEPARATOR}${t("error.chain.causedBy")}\n` : ""
+    const indent = depth > 0 ? `\n${"─".repeat(40)}\n${t("error.chain.causedBy")}\n` : ""
 
     const header = `${error.name}${error.message ? `: ${error.message}` : ""}`
     const stack = error.stack?.trim()
@@ -199,11 +190,11 @@ function formatErrorChain(error: unknown, t: Translator, depth = 0, parentMessag
 
   if (typeof error === "string") {
     if (depth > 0 && parentMessage === error) return ""
-    const indent = depth > 0 ? `\n${CHAIN_SEPARATOR}${t("error.chain.causedBy")}\n` : ""
+    const indent = depth > 0 ? `\n${"─".repeat(40)}\n${t("error.chain.causedBy")}\n` : ""
     return indent + error
   }
 
-  const indent = depth > 0 ? `\n${CHAIN_SEPARATOR}${t("error.chain.causedBy")}\n` : ""
+  const indent = depth > 0 ? `\n${"─".repeat(40)}\n${t("error.chain.causedBy")}\n` : ""
   return indent + safeJson(error)
 }
 
@@ -221,35 +212,20 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
   const [store, setStore] = createStore({
     checking: false,
     version: undefined as string | undefined,
-    actionError: undefined as string | undefined,
   })
 
   async function checkForUpdates() {
     if (!platform.checkUpdate) return
     setStore("checking", true)
-    await platform
-      .checkUpdate()
-      .then((result) => {
-        setStore("actionError", undefined)
-        if (result.updateAvailable && result.version) setStore("version", result.version)
-      })
-      .catch((err) => {
-        setStore("actionError", formatError(err, language.t))
-      })
-      .finally(() => {
-        setStore("checking", false)
-      })
+    const result = await platform.checkUpdate()
+    setStore("checking", false)
+    if (result.updateAvailable && result.version) setStore("version", result.version)
   }
 
   async function installUpdate() {
     if (!platform.update || !platform.restart) return
-    await platform
-      .update()
-      .then(() => platform.restart!())
-      .then(() => setStore("actionError", undefined))
-      .catch((err) => {
-        setStore("actionError", formatError(err, language.t))
-      })
+    await platform.update()
+    await platform.restart()
   }
 
   return (
@@ -290,9 +266,6 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
             </Show>
           </Show>
         </div>
-        <Show when={store.actionError}>
-          {(message) => <p class="text-xs text-text-danger-base text-center max-w-2xl">{message()}</p>}
-        </Show>
         <div class="flex flex-col items-center gap-2">
           <div class="flex items-center justify-center gap-1">
             {language.t("error.page.report.prefix")}

packages/app/src/pages/home.tsx

@@ -30,13 +30,6 @@ export default function Home() {
       .slice(0, 5)
   })
 
-  const serverDotClass = createMemo(() => {
-    const healthy = server.healthy()
-    if (healthy === true) return "bg-icon-success-base"
-    if (healthy === false) return "bg-icon-critical-base"
-    return "bg-border-weak-base"
-  })
-
   function openProject(directory: string) {
     layout.projects.open(directory)
     server.projects.touch(directory)
@@ -80,7 +73,9 @@ export default function Home() {
         <div
           classList={{
             "size-2 rounded-full": true,
-            [serverDotClass()]: true,
+            "bg-icon-success-base": server.healthy() === true,
+            "bg-icon-critical-base": server.healthy() === false,
+            "bg-border-weak-base": server.healthy() === undefined,
           }}
         />
         {server.name}
@@ -120,7 +115,8 @@ export default function Home() {
               <div class="text-14-medium text-text-strong">{language.t("home.empty.title")}</div>
               <div class="text-12-regular text-text-weak">{language.t("home.empty.description")}</div>
             </div>
-            <Button class="px-3 mt-1" onClick={chooseProject}>
+            <div />
+            <Button class="px-3" onClick={chooseProject}>
               {language.t("command.project.open")}
             </Button>
           </div>

packages/app/src/pages/layout.tsx

@@ -2,7 +2,6 @@ import {
   batch,
   createEffect,
   createMemo,
-  createSignal,
   For,
   on,
   onCleanup,
@@ -125,7 +124,7 @@ export default function Layout(props: ParentProps) {
 
   const [state, setState] = createStore({
     autoselect: !initialDirectory,
-    busyWorkspaces: {} as Record<string, boolean>,
+    busyWorkspaces: new Set<string>(),
     hoverSession: undefined as string | undefined,
     hoverProject: undefined as string | undefined,
     scrollSessionKey: undefined as string | undefined,
@@ -135,28 +134,15 @@ export default function Layout(props: ParentProps) {
   const editor = createInlineEditorController()
   const setBusy = (directory: string, value: boolean) => {
     const key = workspaceKey(directory)
-    if (value) {
-      setState("busyWorkspaces", key, true)
-      return
-    }
-    setState(
-      "busyWorkspaces",
-      produce((draft) => {
-        delete draft[key]
-      }),
-    )
+    setState("busyWorkspaces", (prev) => {
+      const next = new Set(prev)
+      if (value) next.add(key)
+      else next.delete(key)
+      return next
+    })
   }
-  const isBusy = (directory: string) => !!state.busyWorkspaces[workspaceKey(directory)]
+  const isBusy = (directory: string) => state.busyWorkspaces.has(workspaceKey(directory))
   const navLeave = { current: undefined as number | undefined }
-  const [sortNow, setSortNow] = createSignal(Date.now())
-  let sortNowInterval: ReturnType<typeof setInterval> | undefined
-  const sortNowTimeout = setTimeout(
-    () => {
-      setSortNow(Date.now())
-      sortNowInterval = setInterval(() => setSortNow(Date.now()), 60_000)
-    },
-    60_000 - (Date.now() % 60_000),
-  )
 
   const aim = createAim({
     enabled: () => !layout.sidebar.opened(),
@@ -171,8 +157,6 @@ export default function Layout(props: ParentProps) {
 
   onCleanup(() => {
     if (navLeave.current !== undefined) clearTimeout(navLeave.current)
-    clearTimeout(sortNowTimeout)
-    if (sortNowInterval) clearInterval(sortNowInterval)
     aim.reset()
   })
 
@@ -223,18 +207,6 @@ export default function Layout(props: ParentProps) {
   const setEditor = editor.setEditor
   const InlineEditor = editor.InlineEditor
 
-  const clearSidebarHoverState = () => {
-    if (layout.sidebar.opened()) return
-    setState("hoverSession", undefined)
-    setState("hoverProject", undefined)
-  }
-
-  const navigateWithSidebarReset = (href: string) => {
-    clearSidebarHoverState()
-    navigate(href)
-    layout.mobileSidebar.hide()
-  }
-
   function cycleTheme(direction = 1) {
     const ids = availableThemeEntries().map(([id]) => id)
     if (ids.length === 0) return
@@ -280,169 +252,166 @@ export default function Layout(props: ParentProps) {
     setLocale(next)
   }
 
-  const useUpdatePolling = () =>
-    onMount(() => {
-      if (!platform.checkUpdate || !platform.update || !platform.restart) return
+  onMount(() => {
+    if (!platform.checkUpdate || !platform.update || !platform.restart) return
 
-      let toastId: number | undefined
-      let interval: ReturnType<typeof setInterval> | undefined
+    let toastId: number | undefined
+    let interval: ReturnType<typeof setInterval> | undefined
 
-      const pollUpdate = () =>
-        platform.checkUpdate!().then(({ updateAvailable, version }) => {
-          if (!updateAvailable) return
-          if (toastId !== undefined) return
-          toastId = showToast({
-            persistent: true,
-            icon: "download",
-            title: language.t("toast.update.title"),
-            description: language.t("toast.update.description", { version: version ?? "" }),
-            actions: [
-              {
-                label: language.t("toast.update.action.installRestart"),
-                onClick: async () => {
-                  await platform.update!()
-                  await platform.restart!()
-                },
-              },
-              {
-                label: language.t("toast.update.action.notYet"),
-                onClick: "dismiss",
-              },
-            ],
-          })
-        })
-
-      createEffect(() => {
-        if (!settings.ready()) return
-
-        if (!settings.updates.startup()) {
-          if (interval === undefined) return
-          clearInterval(interval)
-          interval = undefined
-          return
-        }
-
-        if (interval !== undefined) return
-        void pollUpdate()
-        interval = setInterval(pollUpdate, 10 * 60 * 1000)
-      })
-
-      onCleanup(() => {
-        if (interval === undefined) return
-        clearInterval(interval)
-      })
-    })
-
-  const useSDKNotificationToasts = () =>
-    onMount(() => {
-      const toastBySession = new Map<string, number>()
-      const alertedAtBySession = new Map<string, number>()
-      const cooldownMs = 5000
-
-      const dismissSessionAlert = (sessionKey: string) => {
-        const toastId = toastBySession.get(sessionKey)
-        if (toastId === undefined) return
-        toaster.dismiss(toastId)
-        toastBySession.delete(sessionKey)
-        alertedAtBySession.delete(sessionKey)
-      }
-
-      const unsub = globalSDK.event.listen((e) => {
-        if (e.details?.type === "worktree.ready") {
-          setBusy(e.name, false)
-          WorktreeState.ready(e.name)
-          return
-        }
-
-        if (e.details?.type === "worktree.failed") {
-          setBusy(e.name, false)
-          WorktreeState.failed(e.name, e.details.properties?.message ?? language.t("common.requestFailed"))
-          return
-        }
-
-        if (e.details?.type !== "permission.asked" && e.details?.type !== "question.asked") return
-        const title =
-          e.details.type === "permission.asked"
-            ? language.t("notification.permission.title")
-            : language.t("notification.question.title")
-        const icon = e.details.type === "permission.asked" ? ("checklist" as const) : ("bubble-5" as const)
-        const directory = e.name
-        const props = e.details.properties
-        if (e.details.type === "permission.asked" && permission.autoResponds(e.details.properties, directory)) return
-
-        const [store] = globalSync.child(directory, { bootstrap: false })
-        const session = store.session.find((s) => s.id === props.sessionID)
-        const sessionKey = `${directory}:${props.sessionID}`
-
-        const sessionTitle = session?.title ?? language.t("command.session.new")
-        const projectName = getFilename(directory)
-        const description =
-          e.details.type === "permission.asked"
-            ? language.t("notification.permission.description", { sessionTitle, projectName })
-            : language.t("notification.question.description", { sessionTitle, projectName })
-        const href = `/${base64Encode(directory)}/session/${props.sessionID}`
-
-        const now = Date.now()
-        const lastAlerted = alertedAtBySession.get(sessionKey) ?? 0
-        if (now - lastAlerted < cooldownMs) return
-        alertedAtBySession.set(sessionKey, now)
-
-        if (e.details.type === "permission.asked") {
-          if (settings.sounds.permissionsEnabled()) {
-            playSound(soundSrc(settings.sounds.permissions()))
-          }
-          if (settings.notifications.permissions()) {
-            void platform.notify(title, description, href)
-          }
-        }
-
-        if (e.details.type === "question.asked") {
-          if (settings.notifications.agent()) {
-            void platform.notify(title, description, href)
-          }
-        }
-
-        const currentSession = params.id
-        if (directory === currentDir() && props.sessionID === currentSession) return
-        if (directory === currentDir() && session?.parentID === currentSession) return
-
-        dismissSessionAlert(sessionKey)
-
-        const toastId = showToast({
+    async function pollUpdate() {
+      const { updateAvailable, version } = await platform.checkUpdate!()
+      if (updateAvailable && toastId === undefined) {
+        toastId = showToast({
           persistent: true,
-          icon,
-          title,
-          description,
+          icon: "download",
+          title: language.t("toast.update.title"),
+          description: language.t("toast.update.description", { version: version ?? "" }),
           actions: [
             {
-              label: language.t("notification.action.goToSession"),
-              onClick: () => navigate(href),
+              label: language.t("toast.update.action.installRestart"),
+              onClick: async () => {
+                await platform.update!()
+                await platform.restart!()
+              },
             },
             {
-              label: language.t("common.dismiss"),
+              label: language.t("toast.update.action.notYet"),
               onClick: "dismiss",
             },
           ],
         })
-        toastBySession.set(sessionKey, toastId)
-      })
-      onCleanup(unsub)
+      }
+    }
 
-      createEffect(() => {
-        const currentSession = params.id
-        if (!currentDir() || !currentSession) return
-        const sessionKey = `${currentDir()}:${currentSession}`
-        dismissSessionAlert(sessionKey)
-        const [store] = globalSync.child(currentDir(), { bootstrap: false })
-        const childSessions = store.session.filter((s) => s.parentID === currentSession)
-        for (const child of childSessions) {
-          dismissSessionAlert(`${currentDir()}:${child.id}`)
-        }
-      })
+    createEffect(() => {
+      if (!settings.ready()) return
+
+      if (!settings.updates.startup()) {
+        if (interval === undefined) return
+        clearInterval(interval)
+        interval = undefined
+        return
+      }
+
+      if (interval !== undefined) return
+      void pollUpdate()
+      interval = setInterval(pollUpdate, 10 * 60 * 1000)
     })
 
-  useUpdatePolling()
-  useSDKNotificationToasts()
+    onCleanup(() => {
+      if (interval === undefined) return
+      clearInterval(interval)
+    })
+  })
+
+  onMount(() => {
+    const toastBySession = new Map<string, number>()
+    const alertedAtBySession = new Map<string, number>()
+    const cooldownMs = 5000
+
+    const unsub = globalSDK.event.listen((e) => {
+      if (e.details?.type === "worktree.ready") {
+        setBusy(e.name, false)
+        WorktreeState.ready(e.name)
+        return
+      }
+
+      if (e.details?.type === "worktree.failed") {
+        setBusy(e.name, false)
+        WorktreeState.failed(e.name, e.details.properties?.message ?? language.t("common.requestFailed"))
+        return
+      }
+
+      if (e.details?.type !== "permission.asked" && e.details?.type !== "question.asked") return
+      const title =
+        e.details.type === "permission.asked"
+          ? language.t("notification.permission.title")
+          : language.t("notification.question.title")
+      const icon = e.details.type === "permission.asked" ? ("checklist" as const) : ("bubble-5" as const)
+      const directory = e.name
+      const props = e.details.properties
+      if (e.details.type === "permission.asked" && permission.autoResponds(e.details.properties, directory)) return
+
+      const [store] = globalSync.child(directory, { bootstrap: false })
+      const session = store.session.find((s) => s.id === props.sessionID)
+      const sessionKey = `${directory}:${props.sessionID}`
+
+      const sessionTitle = session?.title ?? language.t("command.session.new")
+      const projectName = getFilename(directory)
+      const description =
+        e.details.type === "permission.asked"
+          ? language.t("notification.permission.description", { sessionTitle, projectName })
+          : language.t("notification.question.description", { sessionTitle, projectName })
+      const href = `/${base64Encode(directory)}/session/${props.sessionID}`
+
+      const now = Date.now()
+      const lastAlerted = alertedAtBySession.get(sessionKey) ?? 0
+      if (now - lastAlerted < cooldownMs) return
+      alertedAtBySession.set(sessionKey, now)
+
+      if (e.details.type === "permission.asked") {
+        playSound(soundSrc(settings.sounds.permissions()))
+        if (settings.notifications.permissions()) {
+          void platform.notify(title, description, href)
+        }
+      }
+
+      if (e.details.type === "question.asked") {
+        if (settings.notifications.agent()) {
+          void platform.notify(title, description, href)
+        }
+      }
+
+      const currentSession = params.id
+      if (directory === currentDir() && props.sessionID === currentSession) return
+      if (directory === currentDir() && session?.parentID === currentSession) return
+
+      const existingToastId = toastBySession.get(sessionKey)
+      if (existingToastId !== undefined) toaster.dismiss(existingToastId)
+
+      const toastId = showToast({
+        persistent: true,
+        icon,
+        title,
+        description,
+        actions: [
+          {
+            label: language.t("notification.action.goToSession"),
+            onClick: () => navigate(href),
+          },
+          {
+            label: language.t("common.dismiss"),
+            onClick: "dismiss",
+          },
+        ],
+      })
+      toastBySession.set(sessionKey, toastId)
+    })
+    onCleanup(unsub)
+
+    createEffect(() => {
+      const currentSession = params.id
+      if (!currentDir() || !currentSession) return
+      const sessionKey = `${currentDir()}:${currentSession}`
+      const toastId = toastBySession.get(sessionKey)
+      if (toastId !== undefined) {
+        toaster.dismiss(toastId)
+        toastBySession.delete(sessionKey)
+        alertedAtBySession.delete(sessionKey)
+      }
+      const [store] = globalSync.child(currentDir(), { bootstrap: false })
+      const childSessions = store.session.filter((s) => s.parentID === currentSession)
+      for (const child of childSessions) {
+        const childKey = `${currentDir()}:${child.id}`
+        const childToastId = toastBySession.get(childKey)
+        if (childToastId !== undefined) {
+          toaster.dismiss(childToastId)
+          toastBySession.delete(childKey)
+          alertedAtBySession.delete(childKey)
+        }
+      }
+    })
+  })
 
   function scrollToSession(sessionId: string, sessionKey: string) {
     if (!scrollContainerRef) return
@@ -536,13 +505,10 @@ export default function Layout(props: ParentProps) {
 
   const setWorkspaceName = (directory: string, next: string, projectId?: string, branch?: string) => {
     const key = workspaceKey(directory)
-    setStore("workspaceName", key, next)
+    setStore("workspaceName", (prev) => ({ ...(prev ?? {}), [key]: next }))
     if (!projectId) return
     if (!branch) return
-    if (!store.workspaceBranchName[projectId]) {
-      setStore("workspaceBranchName", projectId, {})
-    }
-    setStore("workspaceBranchName", projectId, branch, next)
+    setStore("workspaceBranchName", projectId, (prev) => ({ ...(prev ?? {}), [branch]: next }))
   }
 
   const workspaceLabel = (directory: string, branch?: string, projectId?: string) =>
@@ -675,21 +641,6 @@ export default function Layout(props: ParentProps) {
     return created
   }
 
-  const mergeByID = <T extends { id: string }>(current: T[], incoming: T[]) => {
-    if (current.length === 0) {
-      return incoming.slice().sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
-    }
-
-    const map = new Map<string, T>()
-    for (const item of current) {
-      map.set(item.id, item)
-    }
-    for (const item of incoming) {
-      map.set(item.id, item)
-    }
-    return [...map.values()].sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
-  }
-
   async function prefetchMessages(directory: string, sessionID: string, token: number) {
     const [store, setStore] = globalSync.child(directory, { bootstrap: false })
 
@@ -698,24 +649,51 @@ export default function Layout(props: ParentProps) {
         if (prefetchToken.value !== token) return
 
         const items = (messages.data ?? []).filter((x) => !!x?.info?.id)
-        const next = items.map((x) => x.info).filter((m): m is Message => !!m?.id)
-        const sorted = mergeByID([], next)
+        const next = items
+          .map((x) => x.info)
+          .filter((m) => !!m?.id)
+          .slice()
+          .sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
 
         const current = store.message[sessionID] ?? []
-        const merged = mergeByID(
-          current.filter((item): item is Message => !!item?.id),
-          sorted,
-        )
+        const merged = (() => {
+          if (current.length === 0) return next
+
+          const map = new Map<string, Message>()
+          for (const item of current) {
+            if (!item?.id) continue
+            map.set(item.id, item)
+          }
+          for (const item of next) {
+            map.set(item.id, item)
+          }
+          return [...map.values()].sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
+        })()
 
         batch(() => {
           setStore("message", sessionID, reconcile(merged, { key: "id" }))
 
           for (const message of items) {
             const currentParts = store.part[message.info.id] ?? []
-            const mergedParts = mergeByID(
-              currentParts.filter((item): item is (typeof currentParts)[number] & { id: string } => !!item?.id),
-              message.parts.filter((item): item is (typeof message.parts)[number] & { id: string } => !!item?.id),
-            )
+            const mergedParts = (() => {
+              if (currentParts.length === 0) {
+                return message.parts
+                  .filter((p) => !!p?.id)
+                  .slice()
+                  .sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
+              }
+
+              const map = new Map<string, (typeof currentParts)[number]>()
+              for (const item of currentParts) {
+                if (!item?.id) continue
+                map.set(item.id, item)
+              }
+              for (const item of message.parts) {
+                if (!item?.id) continue
+                map.set(item.id, item)
+              }
+              return [...map.values()].sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
+            })()
 
             setStore("part", message.info.id, reconcile(mergedParts, { key: "id" }))
           }
@@ -1095,14 +1073,24 @@ export default function Layout(props: ParentProps) {
 
   function navigateToProject(directory: string | undefined) {
     if (!directory) return
+    if (!layout.sidebar.opened()) {
+      setState("hoverSession", undefined)
+      setState("hoverProject", undefined)
+    }
     server.projects.touch(directory)
     const lastSession = store.lastSession[directory]
-    navigateWithSidebarReset(`/${base64Encode(directory)}${lastSession ? `/session/${lastSession}` : ""}`)
+    navigate(`/${base64Encode(directory)}${lastSession ? `/session/${lastSession}` : ""}`)
+    layout.mobileSidebar.hide()
   }
 
   function navigateToSession(session: Session | undefined) {
     if (!session) return
-    navigateWithSidebarReset(`/${base64Encode(session.directory)}/session/${session.id}`)
+    if (!layout.sidebar.opened()) {
+      setState("hoverSession", undefined)
+      setState("hoverProject", undefined)
+    }
+    navigate(`/${base64Encode(session.directory)}/session/${session.id}`)
+    layout.mobileSidebar.hide()
   }
 
   function openProject(directory: string, navigate = true) {
@@ -1468,41 +1456,23 @@ export default function Layout(props: ParentProps) {
     document.documentElement.style.setProperty("--dialog-left-margin", `${sidebarWidth}px`)
   })
 
-  const loadedSessionDirs = new Set<string>()
-
   createEffect(() => {
     const project = currentProject()
-    const workspaces = workspaceSetting()
-    const next = new Set<string>()
-    if (!project) {
-      loadedSessionDirs.clear()
-      return
-    }
+    if (!project) return
 
-    if (workspaces) {
+    if (workspaceSetting()) {
       const activeDir = currentDir()
       const dirs = [project.worktree, ...(project.sandboxes ?? [])]
       for (const directory of dirs) {
         const expanded = store.workspaceExpanded[directory] ?? directory === project.worktree
         const active = directory === activeDir
         if (!expanded && !active) continue
-        next.add(directory)
+        globalSync.project.loadSessions(directory)
       }
+      return
     }
 
-    if (!workspaces) {
-      next.add(project.worktree)
-    }
-
-    for (const directory of next) {
-      if (loadedSessionDirs.has(directory)) continue
-      globalSync.project.loadSessions(directory)
-    }
-
-    loadedSessionDirs.clear()
-    for (const directory of next) {
-      loadedSessionDirs.add(directory)
-    }
+    globalSync.project.loadSessions(project.worktree)
   })
 
   function handleDragStart(event: unknown) {
@@ -1585,7 +1555,10 @@ export default function Layout(props: ParentProps) {
   }
 
   const createWorkspace = async (project: LocalProject) => {
-    clearSidebarHoverState()
+    if (!layout.sidebar.opened()) {
+      setState("hoverSession", undefined)
+      setState("hoverProject", undefined)
+    }
     const created = await globalSDK.client.worktree
       .create({ directory: project.worktree })
       .then((x) => x.data)
@@ -1622,7 +1595,8 @@ export default function Layout(props: ParentProps) {
     })
 
     globalSync.child(created.directory)
-    navigateWithSidebarReset(`/${base64Encode(created.directory)}/session`)
+    navigate(`/${base64Encode(created.directory)}/session`)
+    layout.mobileSidebar.hide()
   }
 
   const workspaceSidebarCtx: WorkspaceSidebarContext = {
@@ -1798,19 +1772,21 @@ export default function Layout(props: ParentProps) {
                             size="large"
                             icon="plus-small"
                             class="w-full"
-                            onClick={() => navigateWithSidebarReset(`/${base64Encode(p().worktree)}/session`)}
+                            onClick={() => {
+                              if (!layout.sidebar.opened()) {
+                                setState("hoverSession", undefined)
+                                setState("hoverProject", undefined)
+                              }
+                              navigate(`/${base64Encode(p().worktree)}/session`)
+                              layout.mobileSidebar.hide()
+                            }}
                           >
                             {language.t("command.session.new")}
                           </Button>
                         </TooltipKeybind>
                       </div>
                       <div class="flex-1 min-h-0">
-                        <LocalWorkspace
-                          ctx={workspaceSidebarCtx}
-                          project={p()}
-                          sortNow={sortNow}
-                          mobile={panelProps.mobile}
-                        />
+                        <LocalWorkspace ctx={workspaceSidebarCtx} project={p()} mobile={panelProps.mobile} />
                       </div>
                     </>
                   }
@@ -1849,7 +1825,6 @@ export default function Layout(props: ParentProps) {
                                   ctx={workspaceSidebarCtx}
                                   directory={directory}
                                   project={p()}
-                                  sortNow={sortNow}
                                   mobile={panelProps.mobile}
                                 />
                               )}
@@ -1935,9 +1910,7 @@ export default function Layout(props: ParentProps) {
               opened={() => layout.sidebar.opened()}
               aimMove={aim.move}
               projects={() => layout.projects.list()}
-              renderProject={(project) => (
-                <SortableProject ctx={projectSidebarCtx} project={project} sortNow={sortNow} />
-              )}
+              renderProject={(project) => <SortableProject ctx={projectSidebarCtx} project={project} />}
               handleDragStart={handleDragStart}
               handleDragEnd={handleDragEnd}
               handleDragOver={handleDragOver}
@@ -2000,9 +1973,7 @@ export default function Layout(props: ParentProps) {
               opened={() => layout.sidebar.opened()}
               aimMove={aim.move}
               projects={() => layout.projects.list()}
-              renderProject={(project) => (
-                <SortableProject ctx={projectSidebarCtx} project={project} sortNow={sortNow} mobile />
-              )}
+              renderProject={(project) => <SortableProject ctx={projectSidebarCtx} project={project} mobile />}
               handleDragStart={handleDragStart}
               handleDragEnd={handleDragEnd}
               handleDragOver={handleDragOver}

packages/app/src/pages/layout/inline-editor.tsx

@@ -1,9 +1,8 @@
 import { createStore } from "solid-js/store"
-import { onCleanup, Show, type Accessor } from "solid-js"
+import { Show, type Accessor } from "solid-js"
 import { InlineInput } from "@opencode-ai/ui/inline-input"
 
 export function createInlineEditorController() {
-  // This controller intentionally supports one active inline editor at a time.
   const [editor, setEditor] = createStore({
     active: "" as string,
     value: "",
@@ -48,13 +47,6 @@ export function createInlineEditorController() {
     stopPropagation?: boolean
     openOnDblClick?: boolean
   }) => {
-    let frame: number | undefined
-
-    onCleanup(() => {
-      if (frame === undefined) return
-      cancelAnimationFrame(frame)
-    })
-
     const isEditing = () => props.editing ?? editorOpen(props.id)
     const stopEvents = () => props.stopPropagation ?? false
     const allowDblClick = () => props.openOnDblClick ?? true
@@ -86,12 +78,7 @@ export function createInlineEditorController() {
       >
         <InlineInput
           ref={(el) => {
-            if (frame !== undefined) cancelAnimationFrame(frame)
-            frame = requestAnimationFrame(() => {
-              frame = undefined
-              if (!el.isConnected) return
-              el.focus()
-            })
+            requestAnimationFrame(() => el.focus())
           }}
           value={editorValue()}
           class={props.class}

packages/app/src/pages/layout/sidebar-items.tsx

@@ -13,7 +13,7 @@ import { MessageNav } from "@opencode-ai/ui/message-nav"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { getFilename } from "@opencode-ai/util/path"
-import { type Message, type Session, type TextPart, type UserMessage } from "@opencode-ai/sdk/v2/client"
+import { type Message, type Session, type TextPart } from "@opencode-ai/sdk/v2/client"
 import { For, Match, Show, Switch, createMemo, onCleanup, type Accessor, type JSX } from "solid-js"
 import { agentColor } from "@/utils/agent"
 
@@ -70,116 +70,6 @@ export type SessionItemProps = {
   archiveSession: (session: Session) => Promise<void>
 }
 
-const SessionRow = (props: {
-  session: Session
-  slug: string
-  mobile?: boolean
-  dense?: boolean
-  tint: Accessor<string | undefined>
-  isWorking: Accessor<boolean>
-  hasPermissions: Accessor<boolean>
-  hasError: Accessor<boolean>
-  unseenCount: Accessor<number>
-  setHoverSession: (id: string | undefined) => void
-  clearHoverProjectSoon: () => void
-  sidebarOpened: Accessor<boolean>
-  prefetchSession: (session: Session, priority?: "high" | "low") => void
-  scheduleHoverPrefetch: () => void
-  cancelHoverPrefetch: () => void
-}): JSX.Element => (
-  <A
-    href={`/${props.slug}/session/${props.session.id}`}
-    class={`flex items-center justify-between gap-3 min-w-0 text-left w-full focus:outline-none transition-[padding] ${props.mobile ? "pr-7" : ""} group-hover/session:pr-7 group-focus-within/session:pr-7 group-active/session:pr-7 ${props.dense ? "py-0.5" : "py-1"}`}
-    onPointerEnter={props.scheduleHoverPrefetch}
-    onPointerLeave={props.cancelHoverPrefetch}
-    onMouseEnter={props.scheduleHoverPrefetch}
-    onMouseLeave={props.cancelHoverPrefetch}
-    onFocus={() => props.prefetchSession(props.session, "high")}
-    onClick={() => {
-      props.setHoverSession(undefined)
-      if (props.sidebarOpened()) return
-      props.clearHoverProjectSoon()
-    }}
-  >
-    <div class="flex items-center gap-1 w-full">
-      <div
-        class="shrink-0 size-6 flex items-center justify-center"
-        style={{ color: props.tint() ?? "var(--icon-interactive-base)" }}
-      >
-        <Switch fallback={<Icon name="dash" size="small" class="text-icon-weak" />}>
-          <Match when={props.isWorking()}>
-            <Spinner class="size-[15px]" />
-          </Match>
-          <Match when={props.hasPermissions()}>
-            <div class="size-1.5 rounded-full bg-surface-warning-strong" />
-          </Match>
-          <Match when={props.hasError()}>
-            <div class="size-1.5 rounded-full bg-text-diff-delete-base" />
-          </Match>
-          <Match when={props.unseenCount() > 0}>
-            <div class="size-1.5 rounded-full bg-text-interactive-base" />
-          </Match>
-        </Switch>
-      </div>
-      <span class="text-14-regular text-text-strong grow-1 min-w-0 overflow-hidden text-ellipsis truncate">
-        {props.session.title}
-      </span>
-      <Show when={props.session.summary}>
-        {(summary) => (
-          <div class="group-hover/session:hidden group-active/session:hidden group-focus-within/session:hidden">
-            <DiffChanges changes={summary()} />
-          </div>
-        )}
-      </Show>
-    </div>
-  </A>
-)
-
-const SessionHoverPreview = (props: {
-  mobile?: boolean
-  nav: Accessor<HTMLElement | undefined>
-  hoverSession: Accessor<string | undefined>
-  session: Session
-  sidebarHovering: Accessor<boolean>
-  hoverReady: Accessor<boolean>
-  hoverMessages: Accessor<UserMessage[] | undefined>
-  language: ReturnType<typeof useLanguage>
-  isActive: Accessor<boolean>
-  slug: string
-  setHoverSession: (id: string | undefined) => void
-  messageLabel: (message: Message) => string | undefined
-  onMessageSelect: (message: Message) => void
-  trigger: JSX.Element
-}): JSX.Element => (
-  <HoverCard
-    openDelay={1000}
-    closeDelay={props.sidebarHovering() ? 600 : 0}
-    placement="right-start"
-    gutter={16}
-    shift={-2}
-    trigger={props.trigger}
-    mount={!props.mobile ? props.nav() : undefined}
-    open={props.hoverSession() === props.session.id}
-    onOpenChange={(open) => props.setHoverSession(open ? props.session.id : undefined)}
-  >
-    <Show
-      when={props.hoverReady()}
-      fallback={<div class="text-12-regular text-text-weak">{props.language.t("session.messages.loading")}</div>}
-    >
-      <div class="overflow-y-auto max-h-72 h-full">
-        <MessageNav
-          messages={props.hoverMessages() ?? []}
-          current={undefined}
-          getLabel={props.messageLabel}
-          onMessageSelect={props.onMessageSelect}
-          size="normal"
-          class="w-60"
-        />
-      </div>
-    </Show>
-  </HoverCard>
-)
-
 export const SessionItem = (props: SessionItemProps): JSX.Element => {
   const params = useParams()
   const navigate = useNavigate()
@@ -223,7 +113,7 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
   })
 
   const hoverMessages = createMemo(() =>
-    sessionStore.message[props.session.id]?.filter((message): message is UserMessage => message.role === "user"),
+    sessionStore.message[props.session.id]?.filter((message) => message.role === "user"),
   )
   const hoverReady = createMemo(() => sessionStore.message[props.session.id] !== undefined)
   const hoverAllowed = createMemo(() => !props.mobile && props.sidebarExpanded())
@@ -251,24 +141,54 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
     const text = parts.find((part): part is TextPart => part?.type === "text" && !part.synthetic && !part.ignored)
     return text?.text
   }
+
   const item = (
-    <SessionRow
-      session={props.session}
-      slug={props.slug}
-      mobile={props.mobile}
-      dense={props.dense}
-      tint={tint}
-      isWorking={isWorking}
-      hasPermissions={hasPermissions}
-      hasError={hasError}
-      unseenCount={unseenCount}
-      setHoverSession={props.setHoverSession}
-      clearHoverProjectSoon={props.clearHoverProjectSoon}
-      sidebarOpened={layout.sidebar.opened}
-      prefetchSession={props.prefetchSession}
-      scheduleHoverPrefetch={scheduleHoverPrefetch}
-      cancelHoverPrefetch={cancelHoverPrefetch}
-    />
+    <A
+      href={`/${props.slug}/session/${props.session.id}`}
+      class={`flex items-center justify-between gap-3 min-w-0 text-left w-full focus:outline-none transition-[padding] ${props.mobile ? "pr-7" : ""} group-hover/session:pr-7 group-focus-within/session:pr-7 group-active/session:pr-7 ${props.dense ? "py-0.5" : "py-1"}`}
+      onPointerEnter={scheduleHoverPrefetch}
+      onPointerLeave={cancelHoverPrefetch}
+      onMouseEnter={scheduleHoverPrefetch}
+      onMouseLeave={cancelHoverPrefetch}
+      onFocus={() => props.prefetchSession(props.session, "high")}
+      onClick={() => {
+        props.setHoverSession(undefined)
+        if (layout.sidebar.opened()) return
+        props.clearHoverProjectSoon()
+      }}
+    >
+      <div class="flex items-center gap-1 w-full">
+        <div
+          class="shrink-0 size-6 flex items-center justify-center"
+          style={{ color: tint() ?? "var(--icon-interactive-base)" }}
+        >
+          <Switch fallback={<Icon name="dash" size="small" class="text-icon-weak" />}>
+            <Match when={isWorking()}>
+              <Spinner class="size-[15px]" />
+            </Match>
+            <Match when={hasPermissions()}>
+              <div class="size-1.5 rounded-full bg-surface-warning-strong" />
+            </Match>
+            <Match when={hasError()}>
+              <div class="size-1.5 rounded-full bg-text-diff-delete-base" />
+            </Match>
+            <Match when={unseenCount() > 0}>
+              <div class="size-1.5 rounded-full bg-text-interactive-base" />
+            </Match>
+          </Switch>
+        </div>
+        <span class="text-14-regular text-text-strong grow-1 min-w-0 overflow-hidden text-ellipsis truncate">
+          {props.session.title}
+        </span>
+        <Show when={props.session.summary}>
+          {(summary) => (
+            <div class="group-hover/session:hidden group-active/session:hidden group-focus-within/session:hidden">
+              <DiffChanges changes={summary()} />
+            </div>
+          )}
+        </Show>
+      </div>
+    </A>
   )
 
   return (
@@ -285,30 +205,44 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
           </Tooltip>
         }
       >
-        <SessionHoverPreview
-          mobile={props.mobile}
-          nav={props.nav}
-          hoverSession={props.hoverSession}
-          session={props.session}
-          sidebarHovering={props.sidebarHovering}
-          hoverReady={hoverReady}
-          hoverMessages={hoverMessages}
-          language={language}
-          isActive={isActive}
-          slug={props.slug}
-          setHoverSession={props.setHoverSession}
-          messageLabel={messageLabel}
-          onMessageSelect={(message) => {
-            if (!isActive()) {
-              layout.pendingMessage.set(`${base64Encode(props.session.directory)}/${props.session.id}`, message.id)
-              navigate(`${props.slug}/session/${props.session.id}`)
-              return
-            }
-            window.history.replaceState(null, "", `#message-${message.id}`)
-            window.dispatchEvent(new HashChangeEvent("hashchange"))
-          }}
+        <HoverCard
+          openDelay={1000}
+          closeDelay={props.sidebarHovering() ? 600 : 0}
+          placement="right-start"
+          gutter={16}
+          shift={-2}
           trigger={item}
-        />
+          mount={!props.mobile ? props.nav() : undefined}
+          open={props.hoverSession() === props.session.id}
+          onOpenChange={(open) => props.setHoverSession(open ? props.session.id : undefined)}
+        >
+          <Show
+            when={hoverReady()}
+            fallback={<div class="text-12-regular text-text-weak">{language.t("session.messages.loading")}</div>}
+          >
+            <div class="overflow-y-auto max-h-72 h-full">
+              <MessageNav
+                messages={hoverMessages() ?? []}
+                current={undefined}
+                getLabel={messageLabel}
+                onMessageSelect={(message) => {
+                  if (!isActive()) {
+                    layout.pendingMessage.set(
+                      `${base64Encode(props.session.directory)}/${props.session.id}`,
+                      message.id,
+                    )
+                    navigate(`${props.slug}/session/${props.session.id}`)
+                    return
+                  }
+                  window.history.replaceState(null, "", `#message-${message.id}`)
+                  window.dispatchEvent(new HashChangeEvent("hashchange"))
+                }}
+                size="normal"
+                class="w-60"
+              />
+            </div>
+          </Show>
+        </HoverCard>
       </Show>
       <div
         class={`absolute ${props.dense ? "top-0.5 right-0.5" : "top-1 right-1"} flex items-center gap-0.5 transition-opacity`}

packages/app/src/pages/layout/sidebar-project.tsx

@@ -51,200 +51,10 @@ export const ProjectDragOverlay = (props: {
   )
 }
 
-const ProjectTile = (props: {
-  project: LocalProject
-  mobile?: boolean
-  nav: Accessor<HTMLElement | undefined>
-  sidebarHovering: Accessor<boolean>
-  selected: Accessor<boolean>
-  active: Accessor<boolean>
-  overlay: Accessor<boolean>
-  onProjectMouseEnter: (worktree: string, event: MouseEvent) => void
-  onProjectMouseLeave: (worktree: string) => void
-  onProjectFocus: (worktree: string) => void
-  navigateToProject: (directory: string) => void
-  showEditProjectDialog: (project: LocalProject) => void
-  toggleProjectWorkspaces: (project: LocalProject) => void
-  workspacesEnabled: (project: LocalProject) => boolean
-  closeProject: (directory: string) => void
-  setMenu: (value: boolean) => void
-  setOpen: (value: boolean) => void
-  language: ReturnType<typeof useLanguage>
-}): JSX.Element => (
-  <ContextMenu
-    modal={!props.sidebarHovering()}
-    onOpenChange={(value) => {
-      props.setMenu(value)
-      if (value) props.setOpen(false)
-    }}
-  >
-    <ContextMenu.Trigger
-      as="button"
-      type="button"
-      aria-label={displayName(props.project)}
-      data-action="project-switch"
-      data-project={base64Encode(props.project.worktree)}
-      classList={{
-        "flex items-center justify-center size-10 p-1 rounded-lg overflow-hidden transition-colors cursor-default": true,
-        "bg-transparent border-2 border-icon-strong-base hover:bg-surface-base-hover": props.selected(),
-        "bg-transparent border border-transparent hover:bg-surface-base-hover hover:border-border-weak-base":
-          !props.selected() && !props.active(),
-        "bg-surface-base-hover border border-border-weak-base": !props.selected() && props.active(),
-      }}
-      onMouseEnter={(event: MouseEvent) => {
-        if (!props.overlay()) return
-        props.onProjectMouseEnter(props.project.worktree, event)
-      }}
-      onMouseLeave={() => {
-        if (!props.overlay()) return
-        props.onProjectMouseLeave(props.project.worktree)
-      }}
-      onFocus={() => {
-        if (!props.overlay()) return
-        props.onProjectFocus(props.project.worktree)
-      }}
-      onClick={() => props.navigateToProject(props.project.worktree)}
-      onBlur={() => props.setOpen(false)}
-    >
-      <ProjectIcon project={props.project} notify />
-    </ContextMenu.Trigger>
-    <ContextMenu.Portal mount={!props.mobile ? props.nav() : undefined}>
-      <ContextMenu.Content>
-        <ContextMenu.Item onSelect={() => props.showEditProjectDialog(props.project)}>
-          <ContextMenu.ItemLabel>{props.language.t("common.edit")}</ContextMenu.ItemLabel>
-        </ContextMenu.Item>
-        <ContextMenu.Item
-          data-action="project-workspaces-toggle"
-          data-project={base64Encode(props.project.worktree)}
-          disabled={props.project.vcs !== "git" && !props.workspacesEnabled(props.project)}
-          onSelect={() => props.toggleProjectWorkspaces(props.project)}
-        >
-          <ContextMenu.ItemLabel>
-            {props.workspacesEnabled(props.project)
-              ? props.language.t("sidebar.workspaces.disable")
-              : props.language.t("sidebar.workspaces.enable")}
-          </ContextMenu.ItemLabel>
-        </ContextMenu.Item>
-        <ContextMenu.Separator />
-        <ContextMenu.Item
-          data-action="project-close-menu"
-          data-project={base64Encode(props.project.worktree)}
-          onSelect={() => props.closeProject(props.project.worktree)}
-        >
-          <ContextMenu.ItemLabel>{props.language.t("common.close")}</ContextMenu.ItemLabel>
-        </ContextMenu.Item>
-      </ContextMenu.Content>
-    </ContextMenu.Portal>
-  </ContextMenu>
-)
-
-const ProjectPreviewPanel = (props: {
-  project: LocalProject
-  mobile?: boolean
-  selected: Accessor<boolean>
-  workspaceEnabled: Accessor<boolean>
-  workspaces: Accessor<string[]>
-  label: (directory: string) => string
-  projectSessions: Accessor<ReturnType<typeof sortedRootSessions>>
-  projectChildren: Accessor<Map<string, string[]>>
-  workspaceSessions: (directory: string) => ReturnType<typeof sortedRootSessions>
-  workspaceChildren: (directory: string) => Map<string, string[]>
-  setOpen: (value: boolean) => void
-  ctx: ProjectSidebarContext
-  language: ReturnType<typeof useLanguage>
-}): JSX.Element => (
-  <div class="-m-3 p-2 flex flex-col w-72">
-    <div class="px-4 pt-2 pb-1 flex items-center gap-2">
-      <div class="text-14-medium text-text-strong truncate grow">{displayName(props.project)}</div>
-      <Tooltip value={props.language.t("common.close")} placement="top" gutter={6}>
-        <IconButton
-          icon="circle-x"
-          variant="ghost"
-          class="shrink-0"
-          data-action="project-close-hover"
-          data-project={base64Encode(props.project.worktree)}
-          aria-label={props.language.t("common.close")}
-          onClick={(event) => {
-            event.stopPropagation()
-            props.setOpen(false)
-            props.ctx.closeProject(props.project.worktree)
-          }}
-        />
-      </Tooltip>
-    </div>
-    <div class="px-4 pb-2 text-12-medium text-text-weak">{props.language.t("sidebar.project.recentSessions")}</div>
-    <div class="px-2 pb-2 flex flex-col gap-2">
-      <Show
-        when={props.workspaceEnabled()}
-        fallback={
-          <For each={props.projectSessions()}>
-            {(session) => (
-              <SessionItem
-                {...props.ctx.sessionProps}
-                session={session}
-                slug={base64Encode(props.project.worktree)}
-                dense
-                mobile={props.mobile}
-                popover={false}
-                children={props.projectChildren()}
-              />
-            )}
-          </For>
-        }
-      >
-        <For each={props.workspaces()}>
-          {(directory) => {
-            const sessions = createMemo(() => props.workspaceSessions(directory))
-            const children = createMemo(() => props.workspaceChildren(directory))
-            return (
-              <div class="flex flex-col gap-1">
-                <div class="px-2 py-0.5 flex items-center gap-1 min-w-0">
-                  <div class="shrink-0 size-6 flex items-center justify-center">
-                    <Icon name="branch" size="small" class="text-icon-base" />
-                  </div>
-                  <span class="truncate text-14-medium text-text-base">{props.label(directory)}</span>
-                </div>
-                <For each={sessions()}>
-                  {(session) => (
-                    <SessionItem
-                      {...props.ctx.sessionProps}
-                      session={session}
-                      slug={base64Encode(directory)}
-                      dense
-                      mobile={props.mobile}
-                      popover={false}
-                      children={children()}
-                    />
-                  )}
-                </For>
-              </div>
-            )
-          }}
-        </For>
-      </Show>
-    </div>
-    <div class="px-2 py-2 border-t border-border-weak-base">
-      <Button
-        variant="ghost"
-        class="flex w-full text-left justify-start text-text-base px-2 hover:bg-transparent active:bg-transparent"
-        onClick={() => {
-          props.ctx.openSidebar()
-          props.setOpen(false)
-          if (props.selected()) return
-          props.ctx.navigateToProject(props.project.worktree)
-        }}
-      >
-        {props.language.t("sidebar.project.viewAllSessions")}
-      </Button>
-    </div>
-  </div>
-)
-
 export const SortableProject = (props: {
   project: LocalProject
   mobile?: boolean
   ctx: ProjectSidebarContext
-  sortNow: Accessor<number>
 }): JSX.Element => {
   const globalSync = useGlobalSync()
   const language = useLanguage()
@@ -285,71 +95,187 @@ export const SortableProject = (props: {
   }
 
   const projectStore = createMemo(() => globalSync.child(props.project.worktree, { bootstrap: false })[0])
-  const projectSessions = createMemo(() => sortedRootSessions(projectStore(), props.sortNow()).slice(0, 2))
+  const projectSessions = createMemo(() => sortedRootSessions(projectStore(), Date.now()).slice(0, 2))
   const projectChildren = createMemo(() => childMapByParent(projectStore().session))
   const workspaceSessions = (directory: string) => {
     const [data] = globalSync.child(directory, { bootstrap: false })
-    return sortedRootSessions(data, props.sortNow()).slice(0, 2)
+    return sortedRootSessions(data, Date.now()).slice(0, 2)
   }
   const workspaceChildren = (directory: string) => {
     const [data] = globalSync.child(directory, { bootstrap: false })
     return childMapByParent(data.session)
   }
-  const tile = () => (
-    <ProjectTile
-      project={props.project}
-      mobile={props.mobile}
-      nav={props.ctx.nav}
-      sidebarHovering={props.ctx.sidebarHovering}
-      selected={selected}
-      active={active}
-      overlay={overlay}
-      onProjectMouseEnter={props.ctx.onProjectMouseEnter}
-      onProjectMouseLeave={props.ctx.onProjectMouseLeave}
-      onProjectFocus={props.ctx.onProjectFocus}
-      navigateToProject={props.ctx.navigateToProject}
-      showEditProjectDialog={props.ctx.showEditProjectDialog}
-      toggleProjectWorkspaces={props.ctx.toggleProjectWorkspaces}
-      workspacesEnabled={props.ctx.workspacesEnabled}
-      closeProject={props.ctx.closeProject}
-      setMenu={setMenu}
-      setOpen={setOpen}
-      language={language}
-    />
+
+  const Trigger = () => (
+    <ContextMenu
+      modal={!props.ctx.sidebarHovering()}
+      onOpenChange={(value) => {
+        setMenu(value)
+        if (value) setOpen(false)
+      }}
+    >
+      <ContextMenu.Trigger
+        as="button"
+        type="button"
+        aria-label={displayName(props.project)}
+        data-action="project-switch"
+        data-project={base64Encode(props.project.worktree)}
+        classList={{
+          "flex items-center justify-center size-10 p-1 rounded-lg overflow-hidden transition-colors cursor-default": true,
+          "bg-transparent border-2 border-icon-strong-base hover:bg-surface-base-hover": selected(),
+          "bg-transparent border border-transparent hover:bg-surface-base-hover hover:border-border-weak-base":
+            !selected() && !active(),
+          "bg-surface-base-hover border border-border-weak-base": !selected() && active(),
+        }}
+        onMouseEnter={(event: MouseEvent) => {
+          if (!overlay()) return
+          props.ctx.onProjectMouseEnter(props.project.worktree, event)
+        }}
+        onMouseLeave={() => {
+          if (!overlay()) return
+          props.ctx.onProjectMouseLeave(props.project.worktree)
+        }}
+        onFocus={() => {
+          if (!overlay()) return
+          props.ctx.onProjectFocus(props.project.worktree)
+        }}
+        onClick={() => props.ctx.navigateToProject(props.project.worktree)}
+        onBlur={() => setOpen(false)}
+      >
+        <ProjectIcon project={props.project} notify />
+      </ContextMenu.Trigger>
+      <ContextMenu.Portal mount={!props.mobile ? props.ctx.nav() : undefined}>
+        <ContextMenu.Content>
+          <ContextMenu.Item onSelect={() => props.ctx.showEditProjectDialog(props.project)}>
+            <ContextMenu.ItemLabel>{language.t("common.edit")}</ContextMenu.ItemLabel>
+          </ContextMenu.Item>
+          <ContextMenu.Item
+            data-action="project-workspaces-toggle"
+            data-project={base64Encode(props.project.worktree)}
+            disabled={props.project.vcs !== "git" && !props.ctx.workspacesEnabled(props.project)}
+            onSelect={() => props.ctx.toggleProjectWorkspaces(props.project)}
+          >
+            <ContextMenu.ItemLabel>
+              {props.ctx.workspacesEnabled(props.project)
+                ? language.t("sidebar.workspaces.disable")
+                : language.t("sidebar.workspaces.enable")}
+            </ContextMenu.ItemLabel>
+          </ContextMenu.Item>
+          <ContextMenu.Separator />
+          <ContextMenu.Item
+            data-action="project-close-menu"
+            data-project={base64Encode(props.project.worktree)}
+            onSelect={() => props.ctx.closeProject(props.project.worktree)}
+          >
+            <ContextMenu.ItemLabel>{language.t("common.close")}</ContextMenu.ItemLabel>
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu>
   )
 
   return (
     // @ts-ignore
     <div use:sortable classList={{ "opacity-30": sortable.isActiveDraggable }}>
-      <Show when={preview()} fallback={tile()}>
+      <Show when={preview()} fallback={<Trigger />}>
         <HoverCard
           open={open() && !menu()}
           openDelay={0}
           closeDelay={0}
           placement="right-start"
           gutter={6}
-          trigger={tile()}
+          trigger={<Trigger />}
           onOpenChange={(value) => {
             if (menu()) return
             setOpen(value)
             if (value) props.ctx.setHoverSession(undefined)
           }}
         >
-          <ProjectPreviewPanel
-            project={props.project}
-            mobile={props.mobile}
-            selected={selected}
-            workspaceEnabled={workspaceEnabled}
-            workspaces={workspaces}
-            label={label}
-            projectSessions={projectSessions}
-            projectChildren={projectChildren}
-            workspaceSessions={workspaceSessions}
-            workspaceChildren={workspaceChildren}
-            setOpen={setOpen}
-            ctx={props.ctx}
-            language={language}
-          />
+          <div class="-m-3 p-2 flex flex-col w-72">
+            <div class="px-4 pt-2 pb-1 flex items-center gap-2">
+              <div class="text-14-medium text-text-strong truncate grow">{displayName(props.project)}</div>
+              <Tooltip value={language.t("common.close")} placement="top" gutter={6}>
+                <IconButton
+                  icon="circle-x"
+                  variant="ghost"
+                  class="shrink-0"
+                  data-action="project-close-hover"
+                  data-project={base64Encode(props.project.worktree)}
+                  aria-label={language.t("common.close")}
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    setOpen(false)
+                    props.ctx.closeProject(props.project.worktree)
+                  }}
+                />
+              </Tooltip>
+            </div>
+            <div class="px-4 pb-2 text-12-medium text-text-weak">{language.t("sidebar.project.recentSessions")}</div>
+            <div class="px-2 pb-2 flex flex-col gap-2">
+              <Show
+                when={workspaceEnabled()}
+                fallback={
+                  <For each={projectSessions()}>
+                    {(session) => (
+                      <SessionItem
+                        {...props.ctx.sessionProps}
+                        session={session}
+                        slug={base64Encode(props.project.worktree)}
+                        dense
+                        mobile={props.mobile}
+                        popover={false}
+                        children={projectChildren()}
+                      />
+                    )}
+                  </For>
+                }
+              >
+                <For each={workspaces()}>
+                  {(directory) => {
+                    const sessions = createMemo(() => workspaceSessions(directory))
+                    const children = createMemo(() => workspaceChildren(directory))
+                    return (
+                      <div class="flex flex-col gap-1">
+                        <div class="px-2 py-0.5 flex items-center gap-1 min-w-0">
+                          <div class="shrink-0 size-6 flex items-center justify-center">
+                            <Icon name="branch" size="small" class="text-icon-base" />
+                          </div>
+                          <span class="truncate text-14-medium text-text-base">{label(directory)}</span>
+                        </div>
+                        <For each={sessions()}>
+                          {(session) => (
+                            <SessionItem
+                              {...props.ctx.sessionProps}
+                              session={session}
+                              slug={base64Encode(directory)}
+                              dense
+                              mobile={props.mobile}
+                              popover={false}
+                              children={children()}
+                            />
+                          )}
+                        </For>
+                      </div>
+                    )
+                  }}
+                </For>
+              </Show>
+            </div>
+            <div class="px-2 py-2 border-t border-border-weak-base">
+              <Button
+                variant="ghost"
+                class="flex w-full text-left justify-start text-text-base px-2 hover:bg-transparent active:bg-transparent"
+                onClick={() => {
+                  props.ctx.openSidebar()
+                  setOpen(false)
+                  if (selected()) return
+                  props.ctx.navigateToProject(props.project.worktree)
+                }}
+              >
+                {language.t("sidebar.project.viewAllSessions")}
+              </Button>
+            </div>
+          </div>
         </HoverCard>
       </Show>
     </div>

packages/app/src/pages/layout/sidebar-shell.tsx

@@ -34,7 +34,6 @@ export const SidebarContent = (props: {
   renderPanel: () => JSX.Element
 }): JSX.Element => {
   const expanded = createMemo(() => sidebarExpanded(props.mobile, props.opened()))
-  const placement = () => (props.mobile ? "bottom" : "right")
 
   return (
     <div class="flex h-full w-full overflow-hidden">
@@ -56,7 +55,7 @@ export const SidebarContent = (props: {
                 <For each={props.projects()}>{(project) => props.renderProject(project)}</For>
               </SortableProvider>
               <Tooltip
-                placement={placement()}
+                placement={props.mobile ? "bottom" : "right"}
                 value={
                   <div class="flex items-center gap-2">
                     <span>{props.openProjectLabel}</span>
@@ -79,7 +78,11 @@ export const SidebarContent = (props: {
           </DragDropProvider>
         </div>
         <div class="shrink-0 w-full pt-3 pb-3 flex flex-col items-center gap-2">
-          <TooltipKeybind placement={placement()} title={props.settingsLabel()} keybind={props.settingsKeybind() ?? ""}>
+          <TooltipKeybind
+            placement={props.mobile ? "bottom" : "right"}
+            title={props.settingsLabel()}
+            keybind={props.settingsKeybind() ?? ""}
+          >
             <IconButton
               icon="settings-gear"
               variant="ghost"
@@ -88,7 +91,7 @@ export const SidebarContent = (props: {
               aria-label={props.settingsLabel()}
             />
           </TooltipKeybind>
-          <Tooltip placement={placement()} value={props.helpLabel()}>
+          <Tooltip placement={props.mobile ? "bottom" : "right"} value={props.helpLabel()}>
             <IconButton
               icon="help"
               variant="ghost"