fix(console): recover delayed Go subscriptions

chore: update nix node_modules hashes
feat(app): fix composer attachment fades (#38547 )
2026-07-31 15:34:02 -04:00 · 2026-07-30 09:32:06 +00:00 · 2026-07-30 09:11:45 +00:00 · 2026-07-30 17:07:35 +08:00 · 2026-07-30 17:07:06 +08:00 · 2026-07-30 09:05:12 +00:00
158 changed files with 4463 additions and 1913 deletions
@@ -219,7 +219,6 @@ jobs:

  build-electron:
    needs:
-      - build-cli
      - version
    if: github.repository == 'anomalyco/opencode'
    continue-on-error: false
@@ -316,10 +315,7 @@ jobs:
        env:
          OPENCODE_VERSION: ${{ needs.version.outputs.version }}
          OPENCODE_CHANNEL: ${{ (github.ref_name == 'beta' && 'beta') || 'prod' }}
-          OPENCODE_CLI_ARTIFACT: ${{ (runner.os == 'Windows' && 'opencode-cli-windows') || 'opencode-cli' }}
          RUST_TARGET: ${{ matrix.settings.target }}
-          GH_TOKEN: ${{ github.token }}
-          GITHUB_RUN_ID: ${{ github.run_id }}

      - name: Build
        run: bun run build
@@ -29,7 +29,7 @@
    },
    "packages/app": {
      "name": "@opencode-ai/app",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@corvu/drawer": "catalog:",
        "@dnd-kit/abstract": "0.5.0",
@@ -96,7 +96,7 @@
    },
    "packages/cli": {
      "name": "@opencode-ai/cli",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "bin": {
        "lildax": "./bin/lildax.cjs",
      },
@@ -144,7 +144,7 @@
    },
    "packages/codemode": {
      "name": "@opencode-ai/codemode",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "acorn": "8.15.0",
        "effect": "catalog:",
@@ -158,7 +158,7 @@
    },
    "packages/console/app": {
      "name": "@opencode-ai/console-app",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@cloudflare/vite-plugin": "1.15.2",
        "@ibm/plex": "6.4.1",
@@ -194,7 +194,7 @@
    },
    "packages/console/core": {
      "name": "@opencode-ai/console-core",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@aws-sdk/client-sts": "3.782.0",
        "@jsx-email/render": "1.1.1",
@@ -221,7 +221,7 @@
    },
    "packages/console/function": {
      "name": "@opencode-ai/console-function",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@ai-sdk/anthropic": "3.0.82",
        "@ai-sdk/openai": "3.0.48",
@@ -243,7 +243,7 @@
    },
    "packages/console/mail": {
      "name": "@opencode-ai/console-mail",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@jsx-email/all": "2.2.3",
        "@jsx-email/cli": "1.4.3",
@@ -267,7 +267,7 @@
    },
    "packages/console/support": {
      "name": "@opencode-ai/console-support",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@cloudflare/vite-plugin": "1.15.2",
        "@opencode-ai/console-core": "workspace:*",
@@ -287,7 +287,7 @@
    },
    "packages/core": {
      "name": "@opencode-ai/core",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "bin": {
        "opencode": "./bin/opencode",
      },
@@ -339,7 +339,7 @@
        "drizzle-orm": "catalog:",
        "effect": "catalog:",
        "fuzzysort": "3.1.0",
-        "gitlab-ai-provider": "6.11.1",
+        "gitlab-ai-provider": "6.12.1",
        "glob": "13.0.5",
        "google-auth-library": "10.5.0",
        "gray-matter": "4.0.3",
@@ -381,7 +381,7 @@
    },
    "packages/desktop": {
      "name": "@opencode-ai/desktop",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@zip.js/zip.js": "2.7.62",
        "effect": "catalog:",
@@ -435,7 +435,7 @@
    },
    "packages/effect-drizzle-sqlite": {
      "name": "@opencode-ai/effect-drizzle-sqlite",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "drizzle-orm": "catalog:",
        "effect": "catalog:",
@@ -449,7 +449,7 @@
    },
    "packages/effect-sqlite-node": {
      "name": "@opencode-ai/effect-sqlite-node",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "effect": "catalog:",
      },
@@ -461,7 +461,7 @@
    },
    "packages/enterprise": {
      "name": "@opencode-ai/enterprise",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@hono/standard-validator": "catalog:",
        "@opencode-ai/core": "workspace:*",
@@ -493,7 +493,7 @@
    },
    "packages/function": {
      "name": "@opencode-ai/function",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@octokit/auth-app": "8.0.1",
        "@octokit/rest": "catalog:",
@@ -509,7 +509,7 @@
    },
    "packages/http-recorder": {
      "name": "@opencode-ai/http-recorder",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@effect/platform-node": "4.0.0-beta.83",
        "@effect/platform-node-shared": "4.0.0-beta.83",
@@ -540,7 +540,7 @@
    },
    "packages/llm": {
      "name": "@opencode-ai/llm",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@opencode-ai/schema": "workspace:*",
        "@smithy/eventstream-codec": "4.2.14",
@@ -559,7 +559,7 @@
    },
    "packages/opencode": {
      "name": "opencode",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "bin": {
        "opencode": "./bin/opencode",
      },
@@ -632,7 +632,7 @@
        "drizzle-orm": "catalog:",
        "effect": "catalog:",
        "fuzzysort": "3.1.0",
-        "gitlab-ai-provider": "6.11.1",
+        "gitlab-ai-provider": "6.12.1",
        "glob": "13.0.5",
        "google-auth-library": "10.5.0",
        "gray-matter": "4.0.3",
@@ -690,7 +690,7 @@
    },
    "packages/plugin": {
      "name": "@opencode-ai/plugin",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@ai-sdk/provider": "3.0.8",
        "@opencode-ai/sdk": "workspace:*",
@@ -766,7 +766,7 @@
    },
    "packages/sdk/js": {
      "name": "@opencode-ai/sdk",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "cross-spawn": "catalog:",
      },
@@ -781,7 +781,7 @@
    },
    "packages/server": {
      "name": "@opencode-ai/server",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@opencode-ai/core": "workspace:*",
        "@opencode-ai/protocol": "workspace:*",
@@ -796,7 +796,7 @@
    },
    "packages/session-ui": {
      "name": "@opencode-ai/session-ui",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@kobalte/core": "catalog:",
        "@opencode-ai/client": "file:../app/vendor/opencode-ai-client-1.17.13-v2.tgz",
@@ -841,7 +841,7 @@
    },
    "packages/slack": {
      "name": "@opencode-ai/slack",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@opencode-ai/sdk": "workspace:*",
        "@slack/bolt": "^3.17.1",
@@ -854,7 +854,7 @@
    },
    "packages/stats/app": {
      "name": "@opencode-ai/stats-app",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@ibm/plex": "6.4.1",
        "@kobalte/core": "catalog:",
@@ -888,7 +888,7 @@
    },
    "packages/stats/core": {
      "name": "@opencode-ai/stats-core",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@aws-sdk/client-athena": "3.933.0",
        "@planetscale/database": "1.19.0",
@@ -907,7 +907,7 @@
    },
    "packages/stats/server": {
      "name": "@opencode-ai/stats-server",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@aws-sdk/client-firehose": "3.933.0",
        "@effect/platform-node": "catalog:",
@@ -949,7 +949,7 @@
    },
    "packages/tui": {
      "name": "@opencode-ai/tui",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@opencode-ai/core": "workspace:*",
        "@opencode-ai/plugin": "workspace:*",
@@ -976,7 +976,7 @@
    },
    "packages/ui": {
      "name": "@opencode-ai/ui",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@kobalte/core": "catalog:",
        "@pierre/diffs": "catalog:",
@@ -1002,6 +1002,7 @@
        "remend": "catalog:",
        "shiki": "catalog:",
        "solid-list": "catalog:",
+        "solid-sonner": "catalog:",
        "strip-ansi": "7.1.2",
      },
      "devDependencies": {
@@ -1027,7 +1028,7 @@
    },
    "packages/web": {
      "name": "@opencode-ai/web",
-      "version": "1.18.6",
+      "version": "1.18.9",
      "dependencies": {
        "@astrojs/cloudflare": "12.6.3",
        "@astrojs/markdown-remark": "6.3.1",
@@ -1082,6 +1083,7 @@
    "solid-js@1.9.10": "patches/solid-js@1.9.10.patch",
    "@ai-sdk/google@3.0.73": "patches/@ai-sdk%2Fgoogle@3.0.73.patch",
    "pacote@21.5.0": "patches/pacote@21.5.0.patch",
+    "@dnd-kit/dom@0.5.0": "patches/@dnd-kit%2Fdom@0.5.0.patch",
  },
  "overrides": {
    "@opentui/core": "catalog:",
@@ -1145,6 +1147,7 @@
    "shiki": "4.2.0",
    "solid-js": "1.9.10",
    "solid-list": "0.3.0",
+    "solid-sonner": "0.3.1",
    "sst": "4.13.1",
    "tailwindcss": "4.1.11",
    "typescript": "5.8.2",
@@ -3854,7 +3857,7 @@

    "github-slugger": ["github-slugger@2.0.0", "", {}, "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="],

-    "gitlab-ai-provider": ["gitlab-ai-provider@6.11.1", "", { "dependencies": { "@anthropic-ai/sdk": "^0.71.0", "@anycable/core": "^0.9.2", "graphql-request": "^6.1.0", "isomorphic-ws": "^5.0.0", "openai": "^6.16.0", "socket.io-client": "^4.8.1", "vscode-jsonrpc": "^8.2.1", "zod": "^3.25.76" }, "peerDependencies": { "@ai-sdk/provider": ">=3.0.0", "@ai-sdk/provider-utils": ">=4.0.0" } }, "sha512-SJ6f5qa7P8md6lPrserryER3zerLkrezlnqqYQ2AbvDPpHLbwtbyk0FYJ5kNRcmbI80i/VMcsMBP0YIRdc3ucQ=="],
+    "gitlab-ai-provider": ["gitlab-ai-provider@6.12.1", "", { "dependencies": { "@anthropic-ai/sdk": "^0.71.0", "@anycable/core": "^0.9.2", "graphql-request": "^6.1.0", "isomorphic-ws": "^5.0.0", "openai": "^6.16.0", "socket.io-client": "^4.8.1", "vscode-jsonrpc": "^8.2.1", "zod": "^3.25.76" }, "peerDependencies": { "@ai-sdk/provider": ">=3.0.0", "@ai-sdk/provider-utils": ">=4.0.0" } }, "sha512-Qn5iHqvjG8yktI5MWaUgdRR94l7O4WtYW0CAbhsCh1Tj0Fei/DeprOYPVyf4Nht1Ix6U2PXSYM32QOHI6Z2TDw=="],

    "glob": ["glob@13.0.5", "", { "dependencies": { "minimatch": "^10.2.1", "minipass": "^7.1.2", "path-scurry": "^2.0.0" } }, "sha512-BzXxZg24Ibra1pbQ/zE7Kys4Ua1ks7Bn6pKLkVPZ9FZe4JQS6/Q7ef3LG1H+k7lUf5l4T3PLSyYyYJVYUvfgTw=="],

@@ -5126,6 +5129,8 @@

    "solid-refresh": ["solid-refresh@0.6.3", "", { "dependencies": { "@babel/generator": "^7.23.6", "@babel/helper-module-imports": "^7.22.15", "@babel/types": "^7.23.6" }, "peerDependencies": { "solid-js": "^1.3" } }, "sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA=="],

+    "solid-sonner": ["solid-sonner@0.3.1", "", { "peerDependencies": { "solid-js": "^1.6.0" } }, "sha512-F/+zi9yKJTHh5hX1UGJfkDvyC+F34Vi3jgy44NJwOKCgic1QtAon0b1iT9OsDO77RTgR+PCil+3Y5B8T2Owy1Q=="],
+
    "solid-stripe": ["solid-stripe@0.8.1", "", { "peerDependencies": { "@stripe/stripe-js": ">=1.44.1 <8.0.0", "solid-js": "^1.6.0" } }, "sha512-l2SkWoe51rsvk9u1ILBRWyCHODZebChSGMR6zHYJTivTRC0XWrRnNNKs5x1PYXsaIU71KYI6ov5CZB5cOtGLWw=="],

    "solid-transition-size": ["solid-transition-size@0.1.4", "", { "dependencies": { "@corvu/utils": "~0.3.2" }, "peerDependencies": { "solid-js": "^1.8" } }, "sha512-ocHVnbfy23CgfaH4cEUR/AFg0Y3CEL8Oh3n9Qv8OHFJgPh+zkmERKZQfi/xH5XvxDCizg8VjPrVUhiHB1Gza8g=="],
@@ -288,8 +288,12 @@ new sst.cloudflare.x.SolidStart("Console", {
    server: {
      placement: { region: "aws:us-east-2" },
      transform: {
-        worker: {
-          tailConsumers: [{ service: logProcessor.nodes.worker.scriptName }],
+        worker: (args) => {
+          args.compatibilityFlags = $resolve(args.compatibilityFlags).apply((flags) => [
+            ...(flags ?? []),
+            "global_fetch_strictly_public",
+          ])
+          args.tailConsumers = [{ service: logProcessor.nodes.worker.scriptName }]
        },
      },
    },
@@ -1,8 +1,8 @@
 {
  "nodeModules": {
-    "x86_64-linux": "sha256-2suqkFAUeT2YgppKqP14s0C+GE3TR3uNKOOD8vWEiAg=",
-    "aarch64-linux": "sha256-cJ/XYTodYmgs9ZFQhHQbfZPqxjIMmEvz062OsX6/6p4=",
-    "aarch64-darwin": "sha256-tKyqHeI6r1aHEk4vBS39+eA6wh9KcIwsa2ctcktKkEc=",
-    "x86_64-darwin": "sha256-1u7+dNjRcqKSvUTCEarVJ9fMrRUyg9y+4seZAm6Fmus="
+    "x86_64-linux": "sha256-fK6zAHJC3ut/KUdfqLPxVMH7Z1yv65YZ7qcHF45kPas=",
+    "aarch64-linux": "sha256-CSWZY/vVUCKzlwfisQQHqHjawUwL0BRc8Y9o2y/QZYA=",
+    "aarch64-darwin": "sha256-IyFm5NbnU63BaOO/F4/v1exz3VbvkY96yjg9iun+O9Q=",
+    "x86_64-darwin": "sha256-XnXFoUxqXmEx7AKx5YhaJuLY2NYMtI0ICafaenU5L6k="
  }
 }
@@ -90,6 +90,7 @@
      "@sentry/solid": "10.36.0",
      "@sentry/vite-plugin": "4.6.0",
      "solid-js": "1.9.10",
+      "solid-sonner": "0.3.1",
      "vite-plugin-solid": "2.11.10",
      "@lydell/node-pty": "1.2.0-beta.12"
    }
@@ -143,6 +144,7 @@
    "@types/node": "catalog:"
  },
  "patchedDependencies": {
+    "@dnd-kit/dom@0.5.0": "patches/@dnd-kit%2Fdom@0.5.0.patch",
    "@ff-labs/fff-bun@0.9.3": "patches/@ff-labs%2Ffff-bun@0.9.3.patch",
    "@npmcli/agent@4.0.2": "patches/@npmcli%2Fagent@4.0.2.patch",
    "@silvia-odwyer/photon-node@0.3.4": "patches/@silvia-odwyer%2Fphoton-node@0.3.4.patch",
@@ -0,0 +1,132 @@
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { expect, test } from "@playwright/test"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectSessionTitle } from "../utils/waits"
+
+const directory = "C:/OpenCode/OpenFileExpand"
+const projectID = "proj_open_file_expand"
+const sessionID = "ses_open_file_expand"
+const title = "Open file expand"
+const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
+
+test.use({ viewport: { width: 1440, height: 900 } })
+
+test("expands a folder whose path has a trailing Windows separator", async ({ page }) => {
+  await mockOpenCodeServer(page, {
+    directory,
+    project: {
+      id: projectID,
+      worktree: directory,
+      vcs: "git",
+      name: "open-file-expand",
+      time: { created: 1700000000000, updated: 1700000000000 },
+      sandboxes: [],
+    },
+    provider: {
+      all: [
+        {
+          id: "opencode",
+          name: "OpenCode",
+          models: { test: { id: "test", name: "Test", limit: { context: 200_000 } } },
+        },
+      ],
+      connected: ["opencode"],
+      default: { providerID: "opencode", modelID: "test" },
+    },
+    sessions: [
+      {
+        id: sessionID,
+        slug: sessionID,
+        projectID,
+        directory,
+        title,
+        version: "dev",
+        time: { created: 1700000000000, updated: 1700000000000 },
+      },
+    ],
+    vcsDiff: [],
+    fileList: (path) => {
+      if (path === "frontend\\" || path === "frontend") {
+        return [
+          {
+            name: "app.ts",
+            path: "frontend\\app.ts",
+            absolute: `${directory}/frontend/app.ts`,
+            type: "file" as const,
+            ignored: false,
+          },
+        ]
+      }
+      if (path) return []
+      return [
+        {
+          name: "frontend",
+          path: "frontend\\",
+          absolute: `${directory}/frontend`,
+          type: "directory" as const,
+          ignored: false,
+        },
+        {
+          name: "README.md",
+          path: "README.md",
+          absolute: `${directory}/README.md`,
+          type: "file" as const,
+          ignored: false,
+        },
+      ]
+    },
+    fileContent: (path) => ({ type: "text", content: `contents:${path}` }),
+    pageMessages: () => ({ items: [] }),
+  })
+
+  await page.addInitScript(
+    ({ directory, server, sessionID }) => {
+      localStorage.setItem(
+        "settings.v3",
+        JSON.stringify({ general: { newLayoutDesigns: true, shouldDisplayTabsToast: false } }),
+      )
+      localStorage.setItem(
+        "opencode.global.dat:server",
+        JSON.stringify({
+          projects: { local: [{ worktree: directory, expanded: true }] },
+          lastProject: { local: directory },
+        }),
+      )
+      localStorage.setItem(
+        "opencode.global.dat:layout",
+        JSON.stringify({ review: { diffStyle: "split", panelOpened: true } }),
+      )
+      localStorage.setItem(
+        "opencode.global.dat:review-panel-v2",
+        JSON.stringify({ sidebarOpened: true, sidebarWidth: 240, expandMode: "collapse" }),
+      )
+      localStorage.setItem(
+        "opencode.window.browser.dat:tabs",
+        JSON.stringify([{ type: "session", server, sessionId: sessionID }]),
+      )
+    },
+    { directory, server, sessionID },
+  )
+
+  await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)
+  await expectSessionTitle(page, title)
+
+  const panel = page.locator("#review-panel")
+  await panel.getByRole("button", { name: "Open file" }).click()
+  await expect(panel.getByRole("tab", { name: "Open file" })).toHaveAttribute("data-selected", "")
+
+  const sidebar = panel.locator('[data-component="session-review-v2-sidebar-root"]')
+  await expect(sidebar).toBeVisible()
+
+  const frontendRow = panel.locator('[data-slot="file-tree-v2-row"][data-path="frontend"]')
+  await expect(frontendRow).toBeVisible()
+  await expect(frontendRow).toHaveAttribute("aria-expanded", "false")
+  await frontendRow.click()
+  await expect(frontendRow).toHaveAttribute("aria-expanded", "true")
+
+  const appRow = panel.locator('[data-slot="file-tree-v2-row"][data-path="frontend/app.ts"]')
+  await expect(appRow).toBeVisible()
+  await appRow.click()
+  await expect(panel.getByRole("tab", { name: "app.ts" })).toHaveAttribute("data-selected", "")
+  await expect(panel.getByText("contents:frontend/app.ts", { exact: true })).toBeVisible()
+})
@@ -5,6 +5,8 @@ import { currentSession } from "../utils/mock-server"
 const server = "http://127.0.0.1:4096"
 const sessionA = session("ses_tab_a", "Tab A session")
 const sessionB = session("ses_tab_b", "Tab B session")
+const sessionC = session("ses_tab_c", "Tab C session")
+const unresolvedSessionID = "ses_tab_unresolved"

 test("pressing mouse down on a tab navigates before mouse up", async ({ page }) => {
  await mockServer(page)
@@ -40,6 +42,34 @@ test("pressing mouse down on a tab navigates before mouse up", async ({ page })
  await expect(page).toHaveURL(new RegExp(`${hrefB.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`))
 })

+test("keyboard navigation follows the visible tab order", async ({ page }) => {
+  await mockServer(page)
+  await page.addInitScript(
+    ({ server, sessionA, unresolved, sessionC }) => {
+      localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
+      localStorage.setItem(
+        "opencode.window.browser.dat:tabs",
+        JSON.stringify([
+          { type: "session", server, sessionId: sessionA },
+          { type: "session", server, sessionId: unresolved },
+          { type: "session", server, sessionId: sessionC },
+        ]),
+      )
+    },
+    { server, sessionA: sessionA.id, unresolved: unresolvedSessionID, sessionC: sessionC.id },
+  )
+
+  const hrefA = `/server/${base64Encode(server)}/session/${sessionA.id}`
+  const hrefC = `/server/${base64Encode(server)}/session/${sessionC.id}`
+  await page.goto(hrefA)
+  await expect(page.locator("[data-titlebar-tab-slot]:visible")).toHaveCount(2)
+  await expect(page.locator(`[data-titlebar-tab-slot]:has(a[href="${hrefC}"])`)).toBeVisible()
+
+  await page.keyboard.press("Control+Alt+ArrowRight")
+
+  await expect(page).toHaveURL(new RegExp(`${hrefC.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`))
+})
+
 function session(id: string, title: string) {
  return {
    id,
@@ -53,10 +83,12 @@ function session(id: string, title: string) {
 }

 async function mockServer(page: Page) {
-  const sessions = [sessionA, sessionB]
+  const sessions = [sessionA, sessionB, sessionC]
  await page.route("**/*", async (route) => {
    const url = new URL(route.request().url())
    if (url.origin !== server) return route.fallback()
+    if ([`/api/session/${unresolvedSessionID}`, `/session/${unresolvedSessionID}`].includes(url.pathname))
+      return new Promise(() => {})
    if (url.pathname === "/global/event" || url.pathname === "/event" || url.pathname === "/api/event")
      return sse(route)
    if (url.pathname === "/global/health") return json(route, { healthy: true })
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/app",
-  "version": "1.18.6",
+  "version": "1.18.9",
  "description": "",
  "type": "module",
  "exports": {
@@ -19,9 +19,9 @@
    "build": "vite build",
    "serve": "vite preview",
    "test": "bun run test:unit && bun run test:browser",
-    "test:unit": "bun test --only-failures --preload ./happydom.ts ./src",
+    "test:unit": "bun test --conditions=solid --only-failures --preload ./happydom.ts ./src",
    "test:browser": "bun test --conditions=browser --preload ./happydom.ts ./test-browser",
-    "test:unit:watch": "bun test --watch --preload ./happydom.ts ./src",
+    "test:unit:watch": "bun test --conditions=solid --watch --preload ./happydom.ts ./src",
    "test:e2e": "playwright test",
    "test:e2e:local": "playwright test",
    "test:e2e:ui": "playwright test --ui",
@@ -28,7 +28,6 @@ import {
  Switch,
 } from "solid-js"
 import { createStore, produce } from "solid-js/store"
-import { useQueryClient } from "@tanstack/solid-query"
 import { useParams } from "@solidjs/router"
 import { Link } from "@/components/link"
 import { useServerSDK } from "@/context/server-sdk"
@@ -38,7 +37,6 @@ import { useSettings } from "@/context/settings"
 import { popularProviders, useProviders } from "@/hooks/use-providers"
 import { CustomProviderForm } from "./dialog-custom-provider"
 import { decode64 } from "@/utils/base64"
-import { pathKey } from "@/utils/path-key"

 const CUSTOM_ID = "_custom"
 type ConnectMethod = Extract<IntegrationMethod, { type: "key" | "oauth" }>
@@ -386,7 +384,6 @@ function ProviderConnection(props: {
  const dialog = useDialog()
  const serverSync = useServerSync()
  const serverSDK = useServerSDK()
-  const queryClient = useQueryClient()
  const params = useParams()
  const language = useLanguage()
  const settings = useSettings()
@@ -707,9 +704,8 @@ function ProviderConnection(props: {
  })

  async function complete() {
-    const value = directory()
-    await queryClient
-      .refetchQueries(serverSync().queryOptions.providers(value ? pathKey(value) : null))
+    await serverSync()
+      .refreshProviders()
      .catch(() => undefined)
    dialog.close()
    showToast({
@@ -88,7 +88,7 @@ export const DialogSelectModelUnpaidV2: Component<{ model?: ModelState }> = (pro
                  class="w-full"
                  placement="right-start"
                  gutter={6}
-                  delay="intent"
+                  openDelay={0}
                  contentStyle={{ "font-family": "var(--v2-font-family-sans)" }}
                  value={
                    <ModelTooltip
@@ -1,15 +1,5 @@
 import { Popover as Kobalte } from "@kobalte/core/popover"
-import {
-  Component,
-  ComponentProps,
-  createEffect,
-  createMemo,
-  For,
-  JSX,
-  onCleanup,
-  Show,
-  ValidComponent,
-} from "solid-js"
+import { Component, ComponentProps, createEffect, createMemo, For, JSX, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLocal } from "@/context/local"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -29,6 +19,7 @@ import { ModelTooltip } from "./model-tooltip"
 import { useLanguage } from "@/context/language"
 import { decode64 } from "@/utils/base64"
 import { handleDocumentSearchKeydown } from "@/utils/search-keydown"
+import { createMenuDismissController } from "@/utils/menu-dismiss-controller"
 import { createEventListener } from "@solid-primitives/event-listener"
 import { matchesModelSearch } from "./dialog-select-model-search"

@@ -122,14 +113,13 @@ const ModelList: Component<{
 }

 type ModelSelectorTriggerProps = Omit<ComponentProps<typeof Kobalte.Trigger>, "as" | "ref">
+type ModelSelectorTrigger = (props: ModelSelectorTriggerProps) => JSX.Element
 type Dismiss = "escape" | "outside" | "select" | "manage" | "provider"

 export function ModelSelectorPopover(props: {
  provider?: string
  model?: ModelState
-  children?: JSX.Element
-  triggerAs?: ValidComponent
-  triggerProps?: ModelSelectorTriggerProps
+  trigger: ModelSelectorTrigger
  onClose?: (cause: "escape" | "select") => void
 }) {
  const [store, setStore] = createStore<{
@@ -174,9 +164,7 @@ export function ModelSelectorPopover(props: {
      placement="top-start"
      gutter={4}
    >
-      <Kobalte.Trigger as={props.triggerAs ?? "div"} {...props.triggerProps}>
-        {props.children}
-      </Kobalte.Trigger>
+      <Kobalte.Trigger as={props.trigger} />
      <Kobalte.Portal>
        <Kobalte.Content
          class="w-72 h-80 flex flex-col p-2 rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
@@ -237,66 +225,101 @@ export function ModelSelectorPopover(props: {
 export function ModelSelectorPopoverV2(props: {
  provider?: string
  model?: ModelState
-  children?: JSX.Element
-  triggerAs?: ValidComponent
-  triggerProps?: ModelSelectorTriggerProps
+  trigger: ModelSelectorTrigger
  onClose?: () => void
 }) {
-  const model = props.model ?? useLocal().model
-  const language = useLanguage()
  const dialog = useDialog()
-  const [store, setStore] = createStore({ open: false, search: "", active: "" })
-  let searchRef: HTMLInputElement | undefined
-  let contentRef: HTMLDivElement | undefined
-  let restoreTrigger = true
+  const controller = createModelSelectorController({
+    model: props.model,
+    provider: () => props.provider,
+    onSelect: () => props.onClose?.(),
+  })

+  return (
+    <ModelSelectorPopoverV2View
+      trigger={props.trigger}
+      models={controller.models}
+      groups={controller.groups}
+      current={controller.current}
+      select={controller.select}
+      onManage={() => {
+        void import("./dialog-manage-models").then((module) => {
+          void dialog.show(() => <module.DialogManageModelsV2 />)
+        })
+      }}
+      onClose={() => props.onClose?.()}
+    />
+  )
+}
+
+function createModelSelectorController(input: {
+  provider: () => string | undefined
+  model?: ModelState
+  onSelect: () => void
+}) {
+  const model = input.model ?? useLocal().model
  const allModels = createMemo(() =>
    model
      .list()
      .filter((item) => model.visible({ modelID: item.id, providerID: item.provider.id }))
-      .filter((item) => (props.provider ? item.provider.id === props.provider : true)),
+      .filter((item) => (input.provider() ? item.provider.id === input.provider() : true)),
  )
-  const models = createMemo(() => {
-    const search = store.search.trim()
-    const filtered = search
-      ? allModels().filter((item) => matchesModelSearch(search, [item.name, item.id, item.provider.name]))
-      : allModels()

-    return [...filtered].sort((a, b) => a.name.localeCompare(b.name))
-  })
-  const groups = createMemo(() => {
-    const byProvider = new Map<string, ModelItem[]>()
-    for (const item of models()) {
-      byProvider.set(item.provider.id, [...(byProvider.get(item.provider.id) ?? []), item])
-    }
-    return Array.from(byProvider, ([category, items]) => ({ category, items })).sort(sortModelGroups)
-  })
-  const keys = () => [...models().map(modelKey), manageKey]
-  const current = () => {
-    const value = model.current()
-    return value ? `${value.provider.id}:${value.id}` : undefined
+  return {
+    models: (search: string) => {
+      const query = search.trim()
+      const filtered = query
+        ? allModels().filter((item) => matchesModelSearch(query, [item.name, item.id, item.provider.name]))
+        : allModels()
+      return [...filtered].sort((a, b) => a.name.localeCompare(b.name))
+    },
+    groups: (models: ModelItem[]) => {
+      const byProvider = new Map<string, ModelItem[]>()
+      for (const item of models) {
+        byProvider.set(item.provider.id, [...(byProvider.get(item.provider.id) ?? []), item])
+      }
+      return Array.from(byProvider, ([category, items]) => ({ category, items })).sort(sortModelGroups)
+    },
+    current: () => {
+      const value = model.current()
+      return value ? modelKey(value) : undefined
+    },
+    select: (item: ModelItem) => {
+      model.set({ modelID: item.id, providerID: item.provider.id }, { recent: true })
+      input.onSelect()
+    },
  }
+}
+
+function ModelSelectorPopoverV2View(props: {
+  trigger: ModelSelectorTrigger
+  models: (search: string) => ModelItem[]
+  groups: (models: ModelItem[]) => { category: string; items: ModelItem[] }[]
+  current: () => string | undefined
+  select: (item: ModelItem) => void
+  onManage: () => void
+  onClose: () => void
+}) {
+  const language = useLanguage()
+  const [store, setStore] = createStore({ open: false, search: "", active: "" })
+  let searchRef: HTMLInputElement | undefined
+  let contentRef: HTMLDivElement | undefined
+  const dismiss = createMenuDismissController(() => contentRef)
+
+  const models = createMemo(() => props.models(store.search))
+  const groups = createMemo(() => props.groups(models()))
+  const keys = () => [...models().map(modelKey), manageKey]
  const initialActive = () => {
-    const selected = current()
+    const selected = props.current()
    const options = keys()
    if (selected && options.includes(selected)) return selected
    return options[0] ?? ""
  }
  const activeItem = () =>
    store.active ? contentRef?.querySelector<HTMLElement>(`[data-option-key="${CSS.escape(store.active)}"]`) : undefined
-  const afterClose = (callback: () => void) => {
-    const complete = () => {
-      if (contentRef?.isConnected) {
-        requestAnimationFrame(complete)
-        return
-      }
-      requestAnimationFrame(() => requestAnimationFrame(callback))
-    }
-    requestAnimationFrame(complete)
-  }
  const setOpen = (open: boolean) => {
    if (open) {
-      restoreTrigger = true
+      dismiss.allowTriggerRestore()
      setStore({ open: true, active: initialActive() })
      setTimeout(() =>
        requestAnimationFrame(() => {
@@ -308,23 +331,15 @@ export function ModelSelectorPopoverV2(props: {
    }
    setStore({ open: false, search: "", active: "" })
  }
-  const select = (item: ModelItem) => {
-    model.set({ modelID: item.id, providerID: item.provider.id }, { recent: true })
-    props.onClose?.()
-  }
  const selectModel = (item: ModelItem) => {
-    restoreTrigger = false
+    dismiss.preventTriggerRestore()
    setOpen(false)
-    afterClose(() => select(item))
+    dismiss.afterClose(() => props.select(item))
  }
  const manage = () => {
-    restoreTrigger = false
+    dismiss.preventTriggerRestore()
    setOpen(false)
-    afterClose(() => {
-      void import("./dialog-manage-models").then((x) => {
-        dialog.show(() => <x.DialogManageModelsV2 />)
-      })
-    })
+    dismiss.afterClose(props.onManage)
  }
  const selectActive = () => {
    const item = models().find((item) => modelKey(item) === store.active)
@@ -343,10 +358,7 @@ export function ModelSelectorPopoverV2(props: {
    queueMicrotask(() => activeItem()?.scrollIntoView({ block: "nearest" }))
  }
  const setSearch = (value: string) => {
-    const search = value.trim()
-    const first = [...allModels()]
-      .sort((a, b) => a.name.localeCompare(b.name))
-      .find((item) => matchesModelSearch(search, [item.name, item.id, item.provider.name]))
+    const first = props.models(value)[0]
    setStore({ search: value, active: first ? modelKey(first) : manageKey })
  }

@@ -362,18 +374,14 @@ export function ModelSelectorPopoverV2(props: {

  return (
    <MenuV2 open={store.open} modal={false} placement="top-start" gutter={6} onOpenChange={setOpen}>
-      <MenuV2.Trigger as={props.triggerAs ?? "div"} {...props.triggerProps}>
-        {props.children}
-      </MenuV2.Trigger>
+      <MenuV2.Trigger as={props.trigger} />
      <MenuV2.Portal>
        <MenuV2.Content
-          ref={(el: HTMLDivElement) => (contentRef = el)}
+          ref={(element: HTMLDivElement) => (contentRef = element)}
          class="w-[284px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 !p-0 shadow-[var(--v2-elevation-floating)] focus:outline-none"
-          onPointerDownOutside={() => (restoreTrigger = false)}
-          onFocusOutside={() => (restoreTrigger = false)}
-          onCloseAutoFocus={(event) => {
-            if (!restoreTrigger) event.preventDefault()
-          }}
+          onPointerDownOutside={dismiss.preventTriggerRestore}
+          onFocusOutside={dismiss.preventTriggerRestore}
+          onCloseAutoFocus={dismiss.onCloseAutoFocus}
        >
          <div class="flex flex-col p-0.5">
            <div class="flex h-7 items-center gap-2 rounded-sm pl-3 pr-2.5 text-v2-icon-icon-muted">
@@ -393,9 +401,9 @@ export function ModelSelectorPopoverV2(props: {
                  event.stopPropagation()
                  if (event.key === "Escape") {
                    event.preventDefault()
-                    restoreTrigger = false
+                    dismiss.preventTriggerRestore()
                    setOpen(false)
-                    afterClose(() => props.onClose?.())
+                    dismiss.afterClose(props.onClose)
                    return
                  }
                  if (event.altKey || event.metaKey) return
@@ -445,14 +453,14 @@ export function ModelSelectorPopoverV2(props: {
                      <MenuV2.GroupLabel class="gap-2 px-3">
                        <span class="min-w-0 truncate">{group.items[0].provider.name}</span>
                      </MenuV2.GroupLabel>
-                      <MenuV2.RadioGroup value={current()}>
+                      <MenuV2.RadioGroup value={props.current()}>
                        <For each={group.items}>
                          {(item) => (
                            <TooltipV2
                              class="w-full"
                              placement="right-start"
                              gutter={6}
-                              delay="intent"
+                              openDelay={0}
                              value={
                                <ModelTooltip
                                  model={item}
@@ -465,7 +473,7 @@ export function ModelSelectorPopoverV2(props: {
                              <MenuV2.RadioItem
                                value={modelKey(item)}
                                data-option-key={modelKey(item)}
-                                data-selected-model={current() === modelKey(item) ? true : undefined}
+                                data-selected-model={props.current() === modelKey(item) ? true : undefined}
                                class="scroll-my-6 w-full"
                                classList={{ "!bg-v2-overlay-simple-overlay-hover": store.active === modelKey(item) }}
                                onMouseEnter={() => {
@@ -5,7 +5,7 @@ import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { Icon } from "@opencode-ai/ui/v2/icon"
 import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
 import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
-import type { Prompt, ReferenceInfo } from "@opencode-ai/sdk/v2/client"
+import type { ReferenceInfo } from "@opencode-ai/sdk/v2/client"
 import { createEffect, createMemo, on, Show } from "solid-js"
 import { ModelSelectorPopoverV2 } from "@/components/dialog-select-model"
 import { DialogSelectModelUnpaidV2 } from "@/components/dialog-select-model-unpaid-v2"
@@ -37,11 +37,9 @@ export type PromptInputV2ComposerProps = {
  class?: string
  controller: PromptInputV2ComposerController
  borderUnderlay?: boolean
-  edit?: PromptInputProps["edit"]
-  onEditLoaded?: PromptInputProps["onEditLoaded"]
 }

-export type PromptInputV2ControllerProps = Omit<PromptInputProps, "class" | "edit" | "onEditLoaded" | "submission">
+export type PromptInputV2ControllerProps = Omit<PromptInputProps, "class" | "submission">
 export type PromptInputV2ComposerController = PromptInputV2Interaction & {
  readonly model: PromptInputProps["controls"]["model"]
 }
@@ -51,15 +49,13 @@ export function PromptInputV2Composer(props: PromptInputV2ComposerProps) {
  const command = useCommand()
  const language = useLanguage()

-  useCommands(props)
-  useEditHandler(props)
-
  return (
    <div class="flex flex-col gap-3">
      <PromptInputV2
        controller={props.controller}
        borderUnderlay={props.borderUnderlay}
        class={props.class}
+        variantControlVisible={!props.controller.model.loading}
        attachKeybind={command.keybindParts("file.attach")}
        attachShortcut={command.keybind("file.attach")}
        modelControl={
@@ -82,70 +78,6 @@ export function PromptInputV2Composer(props: PromptInputV2ComposerProps) {
  )
 }

-const useEditHandler = (props: PromptInputV2ComposerProps) => {
-  const prompt = usePrompt()
-
-  createEffect(
-    on(
-      () => props.edit?.id,
-      (id) => {
-        const edit = props.edit
-        if (!id || !edit) return
-        prompt.context.items().forEach((item) => prompt.context.remove(item.key))
-        edit.context.forEach((item) =>
-          prompt.context.add({
-            type: item.type,
-            path: item.path,
-            selection: item.selection,
-            comment: item.comment,
-            commentID: item.commentID,
-            commentOrigin: item.commentOrigin,
-            preview: item.preview,
-          }),
-        )
-        props.controller.dispatch({ type: "mode.normal" })
-        props.controller.resetHistory()
-        prompt.set(edit.prompt, promptLength(edit.prompt))
-        props.controller.restoreFocus()
-        props.onEditLoaded?.()
-      },
-      { defer: true },
-    ),
-  )
-}
-
-const useCommands = (props: PromptInputV2ComposerProps) => {
-  const command = useCommand()
-  const language = useLanguage()
-
-  command.register("prompt-input", () => [
-    {
-      id: "file.attach",
-      title: language.t("prompt.action.attachFile"),
-      category: language.t("command.category.file"),
-      keybind: "mod+u",
-      disabled: props.controller.state.mode !== "normal",
-      onSelect: () => props.controller.attach(),
-    },
-    {
-      id: "prompt.mode.shell",
-      title: language.t("command.prompt.mode.shell"),
-      category: language.t("command.category.session"),
-      keybind: "mod+shift+x",
-      disabled: props.controller.state.mode === "shell",
-      onSelect: () => props.controller.dispatch({ type: "mode.shell" }),
-    },
-    {
-      id: "prompt.mode.normal",
-      title: language.t("command.prompt.mode.normal"),
-      category: language.t("command.category.session"),
-      keybind: "mod+shift+e",
-      disabled: props.controller.state.mode === "normal",
-      onSelect: () => props.controller.dispatch({ type: "mode.normal" }),
-    },
-  ])
-}
-
 export function usePromptInputV2Controller(props: PromptInputV2ControllerProps): PromptInputV2ComposerController {
  const sdk = useSDK()
  const sync = useSync()
@@ -436,6 +368,7 @@ export function usePromptInputV2Controller(props: PromptInputV2ControllerProps):
          title: language.t("prompt.toast.pasteUnsupported.title"),
          description: language.t("prompt.toast.pasteUnsupported.description"),
        }),
+      duplicate: () => showToast({ title: language.t("prompt.toast.attachmentDuplicate.title") }),
      onError: (error) =>
        showToast({
          variant: "error",
@@ -472,6 +405,62 @@ export function usePromptInputV2Controller(props: PromptInputV2ControllerProps):
    },
  })
  Object.defineProperty(controller, "model", { get: () => props.controls.model })
+
+  command.register("prompt-input", () => [
+    {
+      id: "file.attach",
+      title: language.t("prompt.action.attachFile"),
+      category: language.t("command.category.file"),
+      keybind: "mod+u",
+      disabled: controller.state.mode !== "normal",
+      onSelect: () => controller.attach(),
+    },
+    {
+      id: "prompt.mode.shell",
+      title: language.t("command.prompt.mode.shell"),
+      category: language.t("command.category.session"),
+      keybind: "mod+shift+x",
+      disabled: controller.state.mode === "shell",
+      onSelect: () => controller.dispatch({ type: "mode.shell" }),
+    },
+    {
+      id: "prompt.mode.normal",
+      title: language.t("command.prompt.mode.normal"),
+      category: language.t("command.category.session"),
+      keybind: "mod+shift+e",
+      disabled: controller.state.mode === "normal",
+      onSelect: () => controller.dispatch({ type: "mode.normal" }),
+    },
+  ])
+
+  createEffect(
+    on(
+      () => props.edit?.id,
+      (id) => {
+        const edit = props.edit
+        if (!id || !edit) return
+        prompt.context.items().forEach((item) => prompt.context.remove(item.key))
+        edit.context.forEach((item) =>
+          prompt.context.add({
+            type: item.type,
+            path: item.path,
+            selection: item.selection,
+            comment: item.comment,
+            commentID: item.commentID,
+            commentOrigin: item.commentOrigin,
+            preview: item.preview,
+          }),
+        )
+        controller.dispatch({ type: "mode.normal" })
+        controller.resetHistory()
+        prompt.set(edit.prompt, promptLength(edit.prompt))
+        controller.restoreFocus()
+        props.onEditLoaded?.()
+      },
+      { defer: true },
+    ),
+  )
+
  return controller as PromptInputV2ComposerController
 }

@@ -535,20 +524,22 @@ function PromptInputV2ModelControl(props: {
        >
          <ModelSelectorPopoverV2
            model={props.model}
-            triggerAs={ButtonV2}
-            triggerProps={{
-              variant: "ghost-muted",
-              size: "normal",
-              style: { height: "28px" },
-              class: "min-w-0 max-w-[220px] justify-start ![font-weight:440] group",
-              classList: { "animate-in fade-in": shouldAnimate() },
-              "data-action": "prompt-model",
-              "data-control-type": "popover",
-            }}
+            trigger={(triggerProps) => (
+              <ButtonV2
+                {...triggerProps}
+                variant="ghost-muted"
+                size="normal"
+                style={{ height: "28px" }}
+                class="min-w-0 max-w-[220px] justify-start ![font-weight:440] group"
+                classList={{ "animate-in fade-in": shouldAnimate() }}
+                data-action="prompt-model"
+                data-control-type="popover"
+              >
+                {content()}
+              </ButtonV2>
+            )}
            onClose={props.onClose}
-          >
-            {content()}
-          </ModelSelectorPopoverV2>
+          />
        </Show>
      </TooltipV2>
    </Show>
@@ -1723,29 +1723,31 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                        >
                          <ModelSelectorPopover
                            model={props.controls.model.selection}
-                            triggerAs={Button}
-                            triggerProps={{
-                              variant: "ghost",
-                              size: "normal",
-                              style: control(),
-                              class: "min-w-0 max-w-[320px] text-13-regular text-text-base group",
-                              "data-action": "prompt-model",
-                            }}
+                            trigger={(triggerProps) => (
+                              <Button
+                                {...triggerProps}
+                                variant="ghost"
+                                size="normal"
+                                style={control()}
+                                class="min-w-0 max-w-[320px] text-13-regular text-text-base group"
+                                data-action="prompt-model"
+                              >
+                                <Show when={props.controls.model.selection.current()?.provider?.id}>
+                                  <ProviderIcon
+                                    id={props.controls.model.selection.current()?.provider?.id ?? ""}
+                                    class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
+                                    style={{ "will-change": "opacity", transform: "translateZ(0)" }}
+                                  />
+                                </Show>
+                                <span class="truncate">
+                                  {props.controls.model.selection.current()?.name ??
+                                    language.t("dialog.model.select.title")}
+                                </span>
+                                <Icon name="chevron-down" size="small" class="shrink-0" />
+                              </Button>
+                            )}
                            onClose={restoreFocus}
-                          >
-                            <Show when={props.controls.model.selection.current()?.provider?.id}>
-                              <ProviderIcon
-                                id={props.controls.model.selection.current()?.provider?.id ?? ""}
-                                class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
-                                style={{ "will-change": "opacity", transform: "translateZ(0)" }}
-                              />
-                            </Show>
-                            <span class="truncate">
-                              {props.controls.model.selection.current()?.name ??
-                                language.t("dialog.model.select.title")}
-                            </span>
-                            <Icon name="chevron-down" size="small" class="shrink-0" />
-                          </ModelSelectorPopover>
+                          />
                        </TooltipKeybind>
                      </Show>
                    </div>
@@ -47,7 +47,7 @@ export const PromptContextItems: Component<ContextItemsProps> = (props) => {
                  </span>
                }
                placement="top"
-                {...(!props.newLayoutDesigns ? { openDelay: 800 } : {})}
+                openDelay={800}
              >
                <div
                  classList={{
@@ -52,7 +52,12 @@ export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (p
            <For each={props.comments ?? []}>
              {(item) => (
                <div class="relative group shrink-0">
-                  <TooltipV2 value={item.comment} placement="top" contentClass="max-w-[300px] break-words">
+                  <TooltipV2
+                    value={item.comment}
+                    placement="top"
+                    openDelay={800}
+                    contentClass="max-w-[300px] break-words"
+                  >
                    <CommentCardV2
                      comment={item.comment ?? ""}
                      path={item.path}
@@ -18,6 +18,7 @@ import { useLanguage } from "@/context/language"
 import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
 import { pathKey } from "@/utils/path-key"
 import { handleDocumentSearchKeydown } from "@/utils/search-keydown"
+import { createMenuDismissController } from "@/utils/menu-dismiss-controller"

 export type PromptProject = {
  name?: string
@@ -197,8 +198,8 @@ export function PromptProjectSelector(props: {
 }) {
  const [triggerReady, setTriggerReady] = createSignal(false)
  let contentRef: HTMLDivElement | undefined
+  const dismiss = createMenuDismissController(() => contentRef)
  let triggerFrame: number | undefined
-  let restoreTrigger = true

  // Floating UI requires a connected anchor; route transitions can construct this trigger before adoption.
  const setTriggerRef = (element: HTMLButtonElement) => {
@@ -221,25 +222,15 @@ export function PromptProjectSelector(props: {
    props.controller.active()
      ? contentRef?.querySelector<HTMLElement>(`[data-option-key="${CSS.escape(props.controller.active())}"]`)
      : undefined
-  const afterClose = (callback: () => void) => {
-    const complete = () => {
-      if (contentRef?.isConnected) {
-        requestAnimationFrame(complete)
-        return
-      }
-      requestAnimationFrame(() => requestAnimationFrame(callback))
-    }
-    requestAnimationFrame(complete)
-  }
  const selectProject = (project: PromptProject) => {
-    restoreTrigger = false
+    dismiss.preventTriggerRestore()
    props.controller.setOpen(false)
-    afterClose(() => props.controller.select(project))
+    dismiss.afterClose(() => props.controller.select(project))
  }
  const selectAction = (server?: string) => {
-    restoreTrigger = false
+    dismiss.preventTriggerRestore()
    props.controller.setOpen(false)
-    afterClose(() => props.controller.add(server))
+    dismiss.afterClose(() => props.controller.add(server))
  }
  const selectActive = () => {
    const project = props.controller.activeProject()
@@ -267,7 +258,7 @@ export function PromptProjectSelector(props: {
    )
      .filter((element) => !contentRef?.contains(element) && !element.hasAttribute("data-focus-trap"))
      .findLast((element) => element.offsetParent !== null)
-    restoreTrigger = false
+    dismiss.preventTriggerRestore()
    target?.focus()
    queueMicrotask(() => {
      if (props.controller.open()) props.controller.setOpen(false)
@@ -291,7 +282,10 @@ export function PromptProjectSelector(props: {
      placement={props.placement ?? "bottom"}
      gutter={4}
      modal={false}
-      onOpenChange={(open) => props.controller.setOpen(open)}
+      onOpenChange={(open) => {
+        if (open) dismiss.allowTriggerRestore()
+        props.controller.setOpen(open)
+      }}
    >
      <DropdownMenu.Trigger as={ProjectTrigger} ref={setTriggerRef} controller={props.controller} />
      <DropdownMenu.Portal>
@@ -300,11 +294,9 @@ export function PromptProjectSelector(props: {
          id="prompt-project-menu"
          class="w-[243px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 p-0 shadow-[var(--v2-elevation-floating)] focus:outline-none [&[data-closed]]:!animate-none"
          onOpenAutoFocus={(event) => event.preventDefault()}
-          onPointerDownOutside={() => (restoreTrigger = false)}
-          onFocusOutside={() => (restoreTrigger = false)}
-          onCloseAutoFocus={(event) => {
-            if (!restoreTrigger) event.preventDefault()
-          }}
+          onPointerDownOutside={dismiss.preventTriggerRestore}
+          onFocusOutside={dismiss.preventTriggerRestore}
+          onCloseAutoFocus={dismiss.onCloseAutoFocus}
        >
          <div class="flex flex-col p-0.5">
            <div class="flex h-7 items-center gap-2 rounded-sm pl-3 pr-2.5 text-v2-icon-icon-muted">
@@ -4,4 +4,3 @@ export { SortableTab, FileVisual } from "./session-sortable-tab"
 export { SortableTabV2 } from "./session-sortable-tab-v2"
 export { SortableTerminalTab } from "./session-sortable-terminal-tab"
 export { NewSessionView } from "./session-new-view"
-export { NewSessionDesignView } from "./session-new-design-view"
@@ -1,16 +0,0 @@
-import type { JSX } from "solid-js"
-import { WordmarkV2 } from "@opencode-ai/ui/v2/wordmark-v2"
-import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
-
-export function NewSessionDesignView(props: { children: JSX.Element }) {
-  return (
-    <div data-component="session-new-design" class="relative size-full overflow-hidden bg-v2-background-bg-deep ">
-      <div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
-        <div class={NEW_SESSION_CONTENT_WIDTH}>
-          <WordmarkV2 class="h-auto w-full text-v2-background-bg-inverse" />
-          <div class="mt-8">{props.children}</div>
-        </div>
-      </div>
-    </div>
-  )
-}
@@ -30,6 +30,8 @@ type KeybindMeta = {

 type KeybindMap = Record<string, string | undefined>
 type CommandContext = ReturnType<typeof useCommand>
+type LanguageContext = ReturnType<typeof useLanguage>
+type SettingsContext = ReturnType<typeof useSettings>

 const GROUPS: KeybindGroup[] = ["General", "Session", "Navigation", "Model and agent", "Terminal", "Prompt"]

@@ -122,7 +124,7 @@ function keybinds(value: unknown): KeybindMap {
  return value as KeybindMap
 }

-function listFor(command: CommandContext, map: KeybindMap, palette: string) {
+function listFor(command: Pick<CommandContext, "catalog" | "options">, map: KeybindMap, palette: string) {
  const out = new Map<string, KeybindMeta>()
  out.set(PALETTE_ID, { title: palette, group: "General" })

@@ -262,7 +264,274 @@ function useKeyCapture(input: {
  })
 }

+export function createKeybindSettingsController(
+  input: {
+    command: Pick<CommandContext, "catalog" | "options" | "keybinds">
+    settings: {
+      current: { keybinds: unknown }
+      keybinds: Pick<SettingsContext["keybinds"], "get" | "set" | "resetAll">
+    }
+    target?: Document
+    notify?: (toast: { title: string; description: string }) => void
+  },
+  language: Pick<LanguageContext, "locale" | "t"> = useLanguage(),
+) {
+  const [store, setStore] = createStore({ active: null as string | null })
+  const overrides = createMemo(() => keybinds(input.settings.current.keybinds))
+  const list = createMemo(() => {
+    language.locale()
+    return listFor(input.command, overrides(), language.t("command.palette"))
+  })
+  const grouped = createMemo(() => groupedFor(list()))
+  const title = (id: string) => list().get(id)?.title ?? ""
+  const effective = (id: string) => {
+    if (id === PALETTE_ID) return input.settings.keybinds.get(id) ?? DEFAULT_PALETTE_KEYBIND
+
+    const custom = input.settings.keybinds.get(id)
+    if (typeof custom === "string") return custom
+
+    const live = input.command.options.find((item) => item.id === id)
+    if (live?.keybind) return live.keybind
+    return input.command.catalog.find((item) => item.id === id)?.keybind
+  }
+  const used = createMemo(() => {
+    const value = new Map<string, { id: string; title: string }[]>()
+
+    for (const id of list().keys()) {
+      for (const signature of signatures(effective(id))) {
+        const items = value.get(signature)
+        if (items) {
+          items.push({ id, title: title(id) })
+          continue
+        }
+        value.set(signature, [{ id, title: title(id) }])
+      }
+    }
+
+    return value
+  })
+  const stop = () => {
+    if (!store.active) return
+    setStore("active", null)
+    input.command.keybinds(true)
+  }
+  const toggle = (id: string) => {
+    if (store.active === id) {
+      stop()
+      return
+    }
+    if (store.active) stop()
+    setStore("active", id)
+    input.command.keybinds(false)
+  }
+  const notify = input.notify ?? ((toast: { title: string; description: string }) => showToast(toast))
+
+  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) {
+      input.settings.keybinds.set(id, "none")
+      stop()
+      return
+    }
+
+    const next = recordKeybind(event)
+    if (!next) return
+
+    const conflicts = new Map<string, string>()
+    for (const signature of signatures(next)) {
+      for (const item of used().get(signature) ?? []) {
+        if (item.id === id) continue
+        conflicts.set(item.id, item.title)
+      }
+    }
+
+    if (conflicts.size > 0) {
+      notify({
+        title: language.t("settings.shortcuts.conflict.title"),
+        description: language.t("settings.shortcuts.conflict.description", {
+          keybind: formatKeybind(next, language.t),
+          titles: [...conflicts.values()].join(", "),
+        }),
+      })
+      return
+    }
+
+    input.settings.keybinds.set(id, next)
+    stop()
+  }
+
+  const target = input.target ?? (typeof document === "object" ? document : undefined)
+  if (target) makeEventListener(target, "keydown", handle, { capture: true })
+
+  onCleanup(() => {
+    if (store.active) input.command.keybinds(true)
+  })
+
+  return {
+    catalog: {
+      groups: GROUPS,
+      filtered: (query: string) =>
+        filteredFor(query, list(), grouped(), (id) => formatKeybind(effective(id) ?? "", language.t)),
+      title,
+      keybind: (id: string) => formatKeybind(effective(id) ?? "", language.t),
+    },
+    capture: {
+      active: () => store.active,
+      toggle,
+    },
+    settings: {
+      hasOverrides: () => Object.values(overrides()).some((value) => typeof value === "string"),
+      reset: () => {
+        stop()
+        input.settings.keybinds.resetAll()
+        notify({
+          title: language.t("settings.shortcuts.reset.toast.title"),
+          description: language.t("settings.shortcuts.reset.toast.description"),
+        })
+      },
+    },
+  }
+}
+
+function SettingsKeybindsV2() {
+  const command = useCommand()
+  const settings = useSettings()
+  const controller = createKeybindSettingsController({
+    command,
+    settings,
+  })
+
+  return (
+    <SettingsKeybindsV2View
+      groups={controller.catalog.groups}
+      filtered={controller.catalog.filtered}
+      title={controller.catalog.title}
+      keybind={controller.catalog.keybind}
+      active={controller.capture.active}
+      onCapture={controller.capture.toggle}
+      hasOverrides={controller.settings.hasOverrides}
+      onReset={controller.settings.reset}
+    />
+  )
+}
+
+function SettingsKeybindsV2View(props: {
+  groups: KeybindGroup[]
+  filtered: (query: string) => Map<KeybindGroup, string[]>
+  title: (id: string) => string
+  keybind: (id: string) => string
+  active: () => string | null
+  onCapture: (id: string) => void
+  hasOverrides: () => boolean
+  onReset: () => void
+}) {
+  const language = useLanguage()
+  const [store, setStore] = createStore({ filter: "" })
+  const filtered = createMemo(() => props.filtered(store.filter))
+  const hasResults = createMemo(() => props.groups.some((group) => (filtered().get(group)?.length ?? 0) > 0))
+
+  return (
+    <>
+      <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
+        <div class="settings-v2-tab-header-row">
+          <h2 class="settings-v2-tab-title">{language.t("settings.shortcuts.title")}</h2>
+          <ButtonV2 variant="ghost" onClick={props.onReset} disabled={!props.hasOverrides()}>
+            {language.t("settings.shortcuts.reset.button")}
+          </ButtonV2>
+        </div>
+        <div class="settings-v2-tab-search">
+          <TextInputV2
+            type="search"
+            appearance="base"
+            value={store.filter}
+            onInput={(event) => setStore("filter", event.currentTarget.value)}
+            placeholder={language.t("settings.shortcuts.search.placeholder")}
+            spellcheck={false}
+            autocorrect="off"
+            autocomplete="off"
+            autocapitalize="off"
+            aria-label={language.t("settings.shortcuts.search.placeholder")}
+          />
+          <Show when={store.filter}>
+            <IconButtonV2
+              type="button"
+              variant="ghost-muted"
+              size="small"
+              class="settings-v2-tab-search-clear"
+              icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
+              onClick={() => setStore("filter", "")}
+            />
+          </Show>
+        </div>
+      </div>
+      <div class="settings-v2-tab-body">
+        <div class="settings-v2-shortcuts flex flex-col gap-8">
+          <For each={props.groups}>
+            {(group) => (
+              <Show when={(filtered().get(group) ?? []).length > 0}>
+                <div class="settings-v2-section">
+                  <h3 class="settings-v2-section-title">{language.t(groupKey[group])}</h3>
+                  <SettingsListV2>
+                    <For each={filtered().get(group) ?? []}>
+                      {(id) => (
+                        <div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
+                          <span>{props.title(id)}</span>
+                          <button
+                            type="button"
+                            data-keybind-id={id}
+                            classList={{
+                              "settings-v2-keybind-button": true,
+                              "settings-v2-keybind-button--active": props.active() === id,
+                            }}
+                            onClick={() => props.onCapture(id)}
+                          >
+                            <Show
+                              when={props.active() === id}
+                              fallback={props.keybind(id) || language.t("settings.shortcuts.unassigned")}
+                            >
+                              {language.t("settings.shortcuts.pressKeys")}
+                            </Show>
+                          </button>
+                        </div>
+                      )}
+                    </For>
+                  </SettingsListV2>
+                </div>
+              </Show>
+            )}
+          </For>
+          <Show when={store.filter && !hasResults()}>
+            <div class="settings-v2-shortcuts-status">
+              <span>{language.t("settings.shortcuts.search.empty")}</span>
+              <span class="settings-v2-shortcuts-status-filter">&quot;{store.filter}&quot;</span>
+            </div>
+          </Show>
+        </div>
+      </div>
+    </>
+  )
+}
+
 export const SettingsKeybinds: Component<{ v2?: boolean }> = (props) => {
+  if (props.v2) return <SettingsKeybindsV2 />
+
  const command = useCommand()
  const language = useLanguage()
  const settings = useSettings()
@@ -476,78 +745,37 @@ export const SettingsKeybinds: Component<{ v2?: boolean }> = (props) => {
  )

  return (
-    <Show
-      when={props.v2}
-      fallback={
-        <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-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
-            <div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
-              <div class="flex items-center justify-between gap-4">
-                <h2 class="text-16-medium text-text-strong">{language.t("settings.shortcuts.title")}</h2>
-                <Button size="small" variant="secondary" onClick={resetAll} disabled={!hasOverrides()}>
-                  {language.t("settings.shortcuts.reset.button")}
-                </Button>
-              </div>
-
-              <div class="flex items-center gap-2 px-3 h-9 rounded-lg bg-surface-base">
-                <Icon name="magnifying-glass" class="text-icon-weak-base flex-shrink-0" />
-                <TextField
-                  variant="ghost"
-                  type="text"
-                  value={store.filter}
-                  onChange={(v) => setStore("filter", v)}
-                  placeholder={language.t("settings.shortcuts.search.placeholder")}
-                  spellcheck={false}
-                  autocorrect="off"
-                  autocomplete="off"
-                  autocapitalize="off"
-                  class="flex-1"
-                />
-                <Show when={store.filter}>
-                  <IconButton icon="circle-x" variant="ghost" onClick={() => setStore("filter", "")} />
-                </Show>
-              </div>
-            </div>
-          </div>
-          {groups}
-        </div>
-      }
-    >
-      <>
-        <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
-          <div class="settings-v2-tab-header-row">
-            <h2 class="settings-v2-tab-title">{language.t("settings.shortcuts.title")}</h2>
-            <ButtonV2 variant="ghost" onClick={resetAll} disabled={!hasOverrides()}>
+    <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-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
+        <div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
+          <div class="flex items-center justify-between gap-4">
+            <h2 class="text-16-medium text-text-strong">{language.t("settings.shortcuts.title")}</h2>
+            <Button size="small" variant="secondary" onClick={resetAll} disabled={!hasOverrides()}>
              {language.t("settings.shortcuts.reset.button")}
-            </ButtonV2>
+            </Button>
          </div>
-          <div class="settings-v2-tab-search">
-            <TextInputV2
-              type="search"
-              appearance="base"
+
+          <div class="flex items-center gap-2 px-3 h-9 rounded-lg bg-surface-base">
+            <Icon name="magnifying-glass" class="text-icon-weak-base flex-shrink-0" />
+            <TextField
+              variant="ghost"
+              type="text"
              value={store.filter}
-              onInput={(event) => setStore("filter", event.currentTarget.value)}
+              onChange={(v) => setStore("filter", v)}
              placeholder={language.t("settings.shortcuts.search.placeholder")}
              spellcheck={false}
              autocorrect="off"
              autocomplete="off"
              autocapitalize="off"
-              aria-label={language.t("settings.shortcuts.search.placeholder")}
+              class="flex-1"
            />
            <Show when={store.filter}>
-              <IconButtonV2
-                type="button"
-                variant="ghost-muted"
-                size="small"
-                class="settings-v2-tab-search-clear"
-                icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
-                onClick={() => setStore("filter", "")}
-              />
+              <IconButton icon="circle-x" variant="ghost" onClick={() => setStore("filter", "")} />
            </Show>
          </div>
        </div>
-        <div class="settings-v2-tab-body">{groups}</div>
-      </>
-    </Show>
+      </div>
+      {groups}
+    </div>
  )
 }
@@ -0,0 +1,70 @@
+import { onCleanup } from "solid-js"
+
+export type ShellOption = {
+  path: string
+  name: string
+  acceptable: boolean
+}
+
+export type ShellSelectOption = {
+  id: string
+  value: string
+  name: string
+  terminalOnly: boolean
+}
+
+export function createShellOptions(input: { shells: ShellOption[]; current: string | undefined }) {
+  const counts = input.shells.reduce((result, shell) => {
+    result.set(shell.name, (result.get(shell.name) ?? 0) + 1)
+    return result
+  }, new Map<string, number>())
+  const options: ShellSelectOption[] = [
+    { id: "auto", value: "", name: "", terminalOnly: false },
+    ...input.shells.map((shell) => {
+      const ambiguous = (counts.get(shell.name) ?? 0) > 1
+      const name = ambiguous ? shell.path : shell.name
+      return {
+        id: shell.path,
+        value: ambiguous ? shell.path : shell.name,
+        name,
+        terminalOnly: !shell.acceptable,
+      }
+    }),
+  ]
+  if (input.current && !options.some((option) => option.value === input.current)) {
+    options.push({ id: input.current, value: input.current, name: input.current, terminalOnly: false })
+  }
+  return options
+}
+
+export function createSoundPreviewController(player: (id: string | undefined) => Promise<(() => void) | undefined>) {
+  let cleanup: (() => void) | undefined
+  let timeout: ReturnType<typeof setTimeout> | undefined
+  let run = 0
+
+  const stop = () => {
+    run += 1
+    cleanup?.()
+    clearTimeout(timeout)
+    cleanup = undefined
+    timeout = undefined
+  }
+  const play = (id: string | undefined) => {
+    stop()
+    if (!id) return
+    const current = ++run
+    timeout = setTimeout(() => {
+      timeout = undefined
+      void player(id).then((next) => {
+        if (run === current) {
+          cleanup = next
+          return
+        }
+        next?.()
+      })
+    }, 100)
+  }
+
+  onCleanup(stop)
+  return { play, stop }
+}
@@ -0,0 +1,53 @@
+import { describe, expect, test, vi } from "bun:test"
+import { createRoot } from "solid-js"
+import { createShellOptions, createSoundPreviewController } from "./general-controller-behavior"
+
+describe("settings v2 controllers", () => {
+  test("normalizes shell names and preserves an unavailable configured shell", () => {
+    expect(
+      createShellOptions({
+        shells: [
+          { path: "/bin/bash", name: "bash", acceptable: true },
+          { path: "/opt/bash", name: "bash", acceptable: false },
+          { path: "/bin/zsh", name: "zsh", acceptable: true },
+        ],
+        current: "fish",
+      }),
+    ).toEqual([
+      { id: "auto", value: "", name: "", terminalOnly: false },
+      { id: "/bin/bash", value: "/bin/bash", name: "/bin/bash", terminalOnly: false },
+      { id: "/opt/bash", value: "/opt/bash", name: "/opt/bash", terminalOnly: true },
+      { id: "/bin/zsh", value: "zsh", name: "zsh", terminalOnly: false },
+      { id: "fish", value: "fish", name: "fish", terminalOnly: false },
+    ])
+  })
+
+  test("debounces previews and stops owned audio on disposal", async () => {
+    vi.useFakeTimers()
+    try {
+      const played: string[] = []
+      const stopped: string[] = []
+      const owned = createRoot((dispose) => ({
+        dispose,
+        preview: createSoundPreviewController(async (id) => {
+          played.push(id ?? "")
+          return () => stopped.push(id ?? "")
+        }),
+      }))
+
+      owned.preview.play("first")
+      vi.advanceTimersByTime(99)
+      expect(played).toEqual([])
+
+      owned.preview.play("second")
+      vi.advanceTimersByTime(100)
+      await Promise.resolve()
+      expect(played).toEqual(["second"])
+
+      owned.dispose()
+      expect(stopped).toEqual(["second"])
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+})
@@ -0,0 +1,173 @@
+import { createMemo, createResource, onMount, type Accessor } from "solid-js"
+import type { ColorScheme } from "@opencode-ai/ui/theme/context"
+import { useTheme } from "@opencode-ai/ui/theme/context"
+import { usePermission } from "@/context/permission"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
+import {
+  monoDefault,
+  monoFontFamily,
+  monoInput,
+  sansDefault,
+  sansFontFamily,
+  sansInput,
+  terminalDefault,
+  terminalFontFamily,
+  terminalInput,
+  useSettings,
+} from "@/context/settings"
+import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
+import { createSoundPreviewController, type ShellOption } from "./general-controller-behavior"
+
+export { createShellOptions, createSoundPreviewController } from "./general-controller-behavior"
+export type { ShellOption, ShellSelectOption } from "./general-controller-behavior"
+
+export function createPermissionScopeController(sessionID: Accessor<string | undefined>) {
+  const permission = usePermission()
+  const serverSync = useServerSync()
+  const directory = createMemo(() => {
+    const id = sessionID()
+    if (!id) return undefined
+    return serverSync().session.lineage.peek(id)?.session.directory
+  })
+
+  return {
+    accepting: createMemo(() => {
+      const id = sessionID()
+      const dir = directory()
+      if (!id || !dir) return false
+      return permission.isAutoAccepting(id, dir)
+    }),
+    enabled: createMemo(() => !!directory()),
+    set: (checked: boolean) => {
+      const id = sessionID()
+      const dir = directory()
+      if (!id || !dir) return
+      if (checked) return permission.enableAutoAccept(id, dir)
+      permission.disableAutoAccept(id, dir)
+    },
+  }
+}
+
+export function createShellSettingsController() {
+  const serverSdk = useServerSDK()
+  const serverSync = useServerSync()
+  const [shells] = createResource(
+    async () => {
+      const sdk = serverSdk()
+      if ((await sdk.protocol) === "v1") return (await sdk.client.pty.shells()).data ?? []
+      return [] as ShellOption[]
+    },
+    { initialValue: [] as ShellOption[] },
+  )
+  const current = createMemo(() => serverSync().data.config.shell ?? "")
+
+  return {
+    shells: () => shells.latest,
+    current,
+    select: (value: string) => {
+      if (value === current()) return
+      void serverSync().updateConfig({ shell: value })
+    },
+  }
+}
+
+export function createAppearanceSettingsController() {
+  const settings = useSettings()
+  const theme = useTheme()
+  const themes = createMemo(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
+
+  onMount(() => void theme.loadThemes())
+
+  return {
+    scheme: {
+      current: theme.colorScheme,
+      select: (value: ColorScheme) => theme.setColorScheme(value),
+    },
+    theme: {
+      options: themes,
+      current: createMemo(() => themes().find((option) => option.id === theme.themeId())),
+      select: (option: { id: string } | null) => option && theme.setTheme(option.id),
+    },
+    fonts: {
+      ui: createMemo(() => ({
+        value: sansInput(settings.appearance.uiFont()),
+        family: sansFontFamily(settings.appearance.uiFont()),
+        placeholder: sansDefault,
+      })),
+      code: createMemo(() => ({
+        value: monoInput(settings.appearance.font()),
+        family: monoFontFamily(settings.appearance.font()),
+        placeholder: monoDefault,
+      })),
+      terminal: createMemo(() => ({
+        value: terminalInput(settings.appearance.terminalFont()),
+        family: terminalFontFamily(settings.appearance.terminalFont()),
+        placeholder: terminalDefault,
+      })),
+      setUI: (value: string) => settings.appearance.setUIFont(value),
+      setCode: (value: string) => settings.appearance.setFont(value),
+      setTerminal: (value: string) => settings.appearance.setTerminalFont(value),
+    },
+  }
+}
+
+const noneSound = { id: "none", label: "sound.option.none" } as const
+export const soundOptions = [noneSound, ...SOUND_OPTIONS]
+export type SoundSelectOption = (typeof soundOptions)[number]
+
+export function createSoundSettingsController() {
+  const settings = useSettings()
+  const preview = createSoundPreviewController(playSoundById)
+  const channel = (
+    enabled: Accessor<boolean>,
+    current: Accessor<string>,
+    setEnabled: (value: boolean) => void,
+    set: (id: string) => void,
+  ) => ({
+    current: createMemo(() =>
+      enabled() ? (soundOptions.find((option) => option.id === current()) ?? noneSound) : noneSound,
+    ),
+    highlight: (option: SoundSelectOption | undefined) => {
+      if (!option) return
+      preview.play(option.id === "none" ? undefined : option.id)
+    },
+    select: (option: SoundSelectOption | null) => {
+      if (!option) return
+      if (option.id === "none") {
+        setEnabled(false)
+        preview.stop()
+        return
+      }
+      setEnabled(true)
+      set(option.id)
+      preview.play(option.id)
+    },
+  })
+
+  return {
+    agent: channel(
+      settings.sounds.agentEnabled,
+      settings.sounds.agent,
+      (value) => settings.sounds.setAgentEnabled(value),
+      (id) => settings.sounds.setAgent(id),
+    ),
+    permissions: channel(
+      settings.sounds.permissionsEnabled,
+      settings.sounds.permissions,
+      (value) => settings.sounds.setPermissionsEnabled(value),
+      (id) => settings.sounds.setPermissions(id),
+    ),
+    errors: channel(
+      settings.sounds.errorsEnabled,
+      settings.sounds.errors,
+      (value) => settings.sounds.setErrorsEnabled(value),
+      (id) => settings.sounds.setErrors(id),
+    ),
+  }
+}
+
+export type PermissionScopeController = ReturnType<typeof createPermissionScopeController>
+export type ShellSettingsController = ReturnType<typeof createShellSettingsController>
+export type AppearanceSettingsController = ReturnType<typeof createAppearanceSettingsController>
+export type SoundSettingsController = ReturnType<typeof createSoundSettingsController>
@@ -1,182 +1,297 @@
-import { Component, Show, createMemo, createResource, onMount } from "solid-js"
+import { Component, Show, createMemo, createResource } from "solid-js"
 import { createMediaQuery } from "@solid-primitives/media"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
 import { Switch } from "@opencode-ai/ui/v2/switch-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
-import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLanguage } from "@/context/language"
-import { usePermission } from "@/context/permission"
 import { usePlatform } from "@/context/platform"
-import { useServerSync } from "@/context/server-sync"
-import { useServerSDK } from "@/context/server-sdk"
 import { useUpdaterAction } from "../updater-action"
-import {
-  monoDefault,
-  monoFontFamily,
-  monoInput,
-  sansDefault,
-  sansFontFamily,
-  sansInput,
-  terminalDefault,
-  terminalFontFamily,
-  terminalInput,
-  useSettings,
-} from "@/context/settings"
-import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
+import { useSettings } from "@/context/settings"
 import { Link } from "../link"
 import { SettingsListV2 } from "./parts/list"
 import { SettingsRowV2 } from "./parts/row"
 import { LayoutRetirementNotice, LayoutTransitionToggle } from "./interface-transition"
+import {
+  createAppearanceSettingsController,
+  createPermissionScopeController,
+  createShellOptions,
+  createShellSettingsController,
+  createSoundSettingsController,
+  soundOptions,
+  type AppearanceSettingsController,
+  type PermissionScopeController,
+  type ShellSettingsController,
+  type SoundSettingsController,
+} from "./general-controllers"
 import "./settings-v2.css"

-let demoSoundState = {
-  cleanup: undefined as (() => void) | undefined,
-  timeout: undefined as NodeJS.Timeout | undefined,
-  run: 0,
+const schemeOptions: ("system" | "light" | "dark")[] = ["system", "light", "dark"]
+const fontSettings = {
+  ui: {
+    action: "settings-ui-font",
+    title: "settings.general.row.uiFont.title",
+    description: "settings.general.row.uiFont.description",
+    font: "ui",
+    input: "setUI",
+  },
+  code: {
+    action: "settings-code-font",
+    title: "settings.general.row.font.title",
+    description: "settings.general.row.font.description",
+    font: "code",
+    input: "setCode",
+  },
+  terminal: {
+    action: "settings-terminal-font",
+    title: "settings.general.row.terminalFont.title",
+    description: "settings.general.row.terminalFont.description",
+    font: "terminal",
+    input: "setTerminal",
+  },
+} as const
+const soundSettings = {
+  agent: {
+    action: "settings-sounds-agent",
+    title: "settings.general.sounds.agent.title",
+    description: "settings.general.sounds.agent.description",
+  },
+  permissions: {
+    action: "settings-sounds-permissions",
+    title: "settings.general.sounds.permissions.title",
+    description: "settings.general.sounds.permissions.description",
+  },
+  errors: {
+    action: "settings-sounds-errors",
+    title: "settings.general.sounds.errors.title",
+    description: "settings.general.sounds.errors.description",
+  },
+} as const
+
+const PermissionScopeSetting: Component<{ controller: PermissionScopeController }> = (props) => {
+  const language = useLanguage()
+  return (
+    <SettingsRowV2
+      title={language.t("command.permissions.autoaccept.enable")}
+      description={language.t("toast.permissions.autoaccept.on.description")}
+    >
+      <div data-action="settings-auto-accept-permissions">
+        <Switch
+          checked={props.controller.accepting()}
+          disabled={!props.controller.enabled()}
+          onChange={props.controller.set}
+        />
+      </div>
+    </SettingsRowV2>
+  )
 }

-type ThemeOption = {
-  id: string
-  name: string
+const ShellSetting: Component<{ controller: ShellSettingsController }> = (props) => {
+  const language = useLanguage()
+  const options = createMemo(() =>
+    createShellOptions({
+      shells: props.controller.shells(),
+      current: props.controller.current(),
+    }),
+  )
+  return (
+    <SettingsRowV2
+      title={language.t("settings.general.row.shell.title")}
+      description={language.t("settings.general.row.shell.description")}
+    >
+      <SelectV2
+        appearance="inline"
+        data-action="settings-shell"
+        options={options()}
+        current={options().find((option) => option.value === props.controller.current()) ?? options()[0]}
+        placement="bottom-end"
+        gutter={6}
+        value={(option) => option.id}
+        label={(option) => {
+          if (option.id === "auto") return language.t("settings.general.row.shell.autoDefault")
+          if (!option.terminalOnly) return option.name
+          return `${option.name} (${language.t("settings.general.row.shell.terminalOnly")})`
+        }}
+        onSelect={(option) => option && props.controller.select(option.value)}
+      />
+    </SettingsRowV2>
+  )
 }

-type ShellOption = {
-  path: string
-  name: string
-  acceptable: boolean
+const AppearanceSection: Component<{ controller: AppearanceSettingsController }> = (props) => {
+  const language = useLanguage()
+  return (
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.appearance")}</h3>
+      <SettingsListV2>
+        <SettingsRowV2
+          title={language.t("settings.general.row.colorScheme.title")}
+          description={language.t("settings.general.row.colorScheme.description")}
+        >
+          <SelectV2
+            appearance="inline"
+            data-action="settings-color-scheme"
+            options={schemeOptions}
+            current={schemeOptions.find((option) => option === props.controller.scheme.current())}
+            placement="bottom-end"
+            gutter={6}
+            label={(option) => {
+              if (option === "system") return language.t("theme.scheme.system")
+              if (option === "light") return language.t("theme.scheme.light")
+              return language.t("theme.scheme.dark")
+            }}
+            onSelect={(option) => option && props.controller.scheme.select(option)}
+          />
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.row.theme.title")}
+          description={
+            <>
+              {language.t("settings.general.row.theme.description")}{" "}
+              <Link class="settings-v2-link" href="https://opencode.ai/docs/themes/">
+                {language.t("common.learnMore")}
+              </Link>
+            </>
+          }
+        >
+          <SelectV2
+            appearance="inline"
+            data-action="settings-theme"
+            options={props.controller.theme.options()}
+            current={props.controller.theme.current()}
+            placement="bottom-end"
+            gutter={6}
+            value={(option) => option.id}
+            label={(option) => option.name}
+            onSelect={props.controller.theme.select}
+          />
+        </SettingsRowV2>
+
+        <FontSetting kind="ui" fonts={props.controller.fonts} />
+        <FontSetting kind="code" fonts={props.controller.fonts} />
+        <FontSetting kind="terminal" fonts={props.controller.fonts} />
+      </SettingsListV2>
+    </div>
+  )
 }

-type ShellSelectOption = {
-  id: string
-  value: string
-  label: string
+const FontSetting: Component<{
+  kind: "ui" | "code" | "terminal"
+  fonts: AppearanceSettingsController["fonts"]
+}> = (props) => {
+  const language = useLanguage()
+  const config = () => fontSettings[props.kind]
+  return (
+    <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
+      <div class="w-full sm:w-[220px]">
+        <TextInputV2
+          data-action={config().action}
+          type="text"
+          appearance="base"
+          value={props.fonts[config().font]().value}
+          onInput={(event) => props.fonts[config().input](event.currentTarget.value)}
+          placeholder={props.fonts[config().font]().placeholder}
+          spellcheck={false}
+          autocorrect="off"
+          autocomplete="off"
+          autocapitalize="off"
+          aria-label={language.t(config().title)}
+          style={{ "font-family": props.fonts[config().font]().family }}
+        />
+      </div>
+    </SettingsRowV2>
+  )
 }

-// To prevent audio from overlapping/playing very quickly when navigating the settings menus,
-// delay the playback by 100ms during quick selection changes and pause existing sounds.
-const stopDemoSound = () => {
-  demoSoundState.run += 1
-  if (demoSoundState.cleanup) {
-    demoSoundState.cleanup()
-  }
-  clearTimeout(demoSoundState.timeout)
-  demoSoundState.cleanup = undefined
+const SoundsSection: Component<{ controller: SoundSettingsController }> = (props) => {
+  const language = useLanguage()
+  return (
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.sounds")}</h3>
+      <SettingsListV2>
+        <SoundSetting kind="agent" channel={props.controller.agent} />
+        <SoundSetting kind="permissions" channel={props.controller.permissions} />
+        <SoundSetting kind="errors" channel={props.controller.errors} />
+      </SettingsListV2>
+    </div>
+  )
 }

-const playDemoSound = (id: string | undefined) => {
-  stopDemoSound()
-  if (!id) return
+const SoundSetting: Component<{
+  kind: "agent" | "permissions" | "errors"
+  channel: SoundSettingsController["agent"]
+}> = (props) => {
+  const language = useLanguage()
+  const config = () => soundSettings[props.kind]
+  return (
+    <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
+      <SelectV2
+        appearance="inline"
+        data-action={config().action}
+        options={soundOptions}
+        current={props.channel.current()}
+        value={(option) => option.id}
+        label={(option) => language.t(option.label)}
+        onHighlight={props.channel.highlight}
+        onSelect={props.channel.select}
+        placement="bottom-end"
+        gutter={6}
+      />
+    </SettingsRowV2>
+  )
+}

-  const run = ++demoSoundState.run
-  demoSoundState.timeout = setTimeout(() => {
-    void playSoundById(id).then((cleanup) => {
-      if (demoSoundState.run !== run) {
-        cleanup?.()
-        return
-      }
-      demoSoundState.cleanup = cleanup
-    })
-  }, 100)
+const LanguageSetting = () => {
+  const language = useLanguage()
+  const options = createMemo(() =>
+    language.locales.map((locale) => ({
+      value: locale,
+      label: language.label(locale),
+    })),
+  )
+  return (
+    <SettingsRowV2
+      title={language.t("settings.general.row.language.title")}
+      description={language.t("settings.general.row.language.description")}
+    >
+      <SelectV2
+        appearance="inline"
+        data-action="settings-language"
+        options={options()}
+        placement="bottom-end"
+        gutter={6}
+        current={options().find((option) => option.value === language.locale())}
+        value={(option) => option.value}
+        label={(option) => option.label}
+        onSelect={(option) => option && language.setLocale(option.value)}
+      />
+    </SettingsRowV2>
+  )
 }

 export const SettingsGeneralV2: Component<{
  sessionID?: string
 }> = (props) => {
-  const theme = useTheme()
  const language = useLanguage()
-  const permission = usePermission()
  const platform = usePlatform()
  const dialog = useDialog()
  const settings = useSettings()
-  const serverSync = useServerSync()
-  const serverSdk = useServerSDK()
  const mobile = createMediaQuery("(max-width: 767px)")
-
  const updater = useUpdaterAction()
-
-  const dir = createMemo(() => {
-    if (!props.sessionID) return undefined
-    return serverSync().session.lineage.peek(props.sessionID)?.session.directory
-  })
-  const accepting = createMemo(() => {
-    const value = dir()
-    if (!value || !props.sessionID) return false
-    return permission.isAutoAccepting(props.sessionID, value)
-  })
-
-  const toggleAccept = (checked: boolean) => {
-    const value = dir()
-    if (!value || !props.sessionID) return
-
-    if (checked) {
-      permission.enableAutoAccept(props.sessionID, value)
-      return
-    }
-
-    permission.disableAutoAccept(props.sessionID, value)
-  }
+  const permissionScope = createPermissionScopeController(() => props.sessionID)
+  const shell = createShellSettingsController()
+  const appearance = createAppearanceSettingsController()
+  const sounds = createSoundSettingsController()
  const desktop = createMemo(() => platform.platform === "desktop")

-  const themeOptions = createMemo<ThemeOption[]>(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
-
-  const [shells] = createResource(
-    async () => {
-      const sdk = serverSdk()
-      if ((await sdk.protocol) === "v1") {
-        return (await sdk.client.pty.shells()).data ?? []
-      }
-      // return (await sdk.api.pty.shells()).data
-      return [] as ShellOption[]
-    },
-    { initialValue: [] as ShellOption[] },
-  )
-
  const [pinchZoom, { mutate: setPinchZoom }] = createResource(
-    () => (desktop() && platform.getPinchZoomEnabled ? true : false),
+    () => desktop() && "getPinchZoomEnabled" in platform,
    () => Promise.resolve(platform.getPinchZoomEnabled?.() ?? false).catch(() => false),
    { initialValue: false },
  )

-  onMount(() => {
-    void theme.loadThemes()
-  })
-
-  const autoOption = { id: "auto", value: "", label: language.t("settings.general.row.shell.autoDefault") }
-  const currentShell = createMemo(() => serverSync().data.config.shell ?? "")
-
-  const shellOptions = createMemo<ShellSelectOption[]>(() => {
-    const list = shells.latest
-    const current = serverSync().data.config.shell
-
-    const nameCounts = new Map<string, number>()
-    for (const s of list) {
-      nameCounts.set(s.name, (nameCounts.get(s.name) || 0) + 1)
-    }
-
-    const options = [
-      autoOption,
-      ...list.map((s) => {
-        const ambiguousName = (nameCounts.get(s.name) || 0) > 1
-        const text = ambiguousName ? s.path : s.name
-        const label = s.acceptable ? text : `${text} (${language.t("settings.general.row.shell.terminalOnly")})`
-        return {
-          id: s.path,
-          // Prefer name over path - "bash" is much cleaner than the explicit full route even when it may change due to PATH.
-          value: ambiguousName ? s.path : s.name,
-          label,
-        }
-      }),
-    ]
-
-    if (current && !options.some((o) => o.value === current)) {
-      options.push({ id: current, value: current, label: current })
-    }
-
-    return options
-  })
-
  const onPinchZoomChange = (checked: boolean) => {
    setPinchZoom(checked)
    const update = platform.setPinchZoomEnabled?.(checked)
@@ -184,52 +299,6 @@ export const SettingsGeneralV2: Component<{
    void update.catch(() => setPinchZoom(!checked))
  }

-  const colorSchemeOptions = createMemo((): { value: ColorScheme; label: string }[] => [
-    { value: "system", label: language.t("theme.scheme.system") },
-    { value: "light", label: language.t("theme.scheme.light") },
-    { value: "dark", label: language.t("theme.scheme.dark") },
-  ])
-
-  const languageOptions = createMemo(() =>
-    language.locales.map((locale) => ({
-      value: locale,
-      label: language.label(locale),
-    })),
-  )
-
-  const noneSound = { id: "none", label: "sound.option.none" } as const
-  const soundOptions = [noneSound, ...SOUND_OPTIONS]
-  const mono = () => monoInput(settings.appearance.font())
-  const sans = () => sansInput(settings.appearance.uiFont())
-  const terminal = () => terminalInput(settings.appearance.terminalFont())
-
-  const soundSelectProps = (
-    enabled: () => boolean,
-    current: () => string,
-    setEnabled: (value: boolean) => void,
-    set: (id: string) => void,
-  ) => ({
-    options: soundOptions,
-    current: enabled() ? (soundOptions.find((o) => o.id === current()) ?? noneSound) : noneSound,
-    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.id === "none" ? undefined : option.id)
-    },
-    onSelect: (option: (typeof soundOptions)[number] | null) => {
-      if (!option) return
-      if (option.id === "none") {
-        setEnabled(false)
-        stopDemoSound()
-        return
-      }
-      setEnabled(true)
-      set(option.id)
-      playDemoSound(option.id)
-    },
-  })
-
  const InterfaceSection = () => (
    <LayoutTransitionToggle
      title={language.t("settings.general.row.newInterface.title")}
@@ -251,59 +320,18 @@ export const SettingsGeneralV2: Component<{
      title={language.t("settings.general.row.newInterfaceNotice.title")}
      description={language.t("settings.general.row.newInterfaceNotice.description")}
      dismiss={language.t("settings.general.row.newInterfaceNotice.dismiss")}
-      onDismiss={settings.general.dismissNewInterfaceNotice}
+      onDismiss={() => settings.general.dismissNewInterfaceNotice()}
    />
  )

  const GeneralSection = () => (
    <div class="settings-v2-section">
      <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.general.row.language.title")}
-          description={language.t("settings.general.row.language.description")}
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-language"
-            options={languageOptions()}
-            placement="bottom-end"
-            gutter={6}
-            current={languageOptions().find((o) => o.value === language.locale())}
-            value={(o) => o.value}
-            label={(o) => o.label}
-            onSelect={(option) => option && language.setLocale(option.value)}
-          />
-        </SettingsRowV2>
+        <LanguageSetting />

-        <SettingsRowV2
-          title={language.t("command.permissions.autoaccept.enable")}
-          description={language.t("toast.permissions.autoaccept.on.description")}
-        >
-          <div data-action="settings-auto-accept-permissions">
-            <Switch checked={accepting()} disabled={!dir()} onChange={toggleAccept} />
-          </div>
-        </SettingsRowV2>
+        <PermissionScopeSetting controller={permissionScope} />

-        <SettingsRowV2
-          title={language.t("settings.general.row.shell.title")}
-          description={language.t("settings.general.row.shell.description")}
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-shell"
-            options={shellOptions()}
-            current={shellOptions().find((o) => o.value === currentShell()) ?? autoOption}
-            placement="bottom-end"
-            gutter={6}
-            value={(o) => o.id}
-            label={(o) => o.label}
-            onSelect={(option) => {
-              if (!option) return
-              if (option.value === currentShell()) return
-              serverSync().updateConfig({ shell: option.value })
-            }}
-          />
-        </SettingsRowV2>
+        <ShellSetting controller={shell} />

        <SettingsRowV2
          title={language.t("settings.general.row.reasoningSummaries.title")}
@@ -414,124 +442,6 @@ export const SettingsGeneralV2: Component<{
    </div>
  )

-  const AppearanceSection = () => (
-    <div class="settings-v2-section">
-      <h3 class="settings-v2-section-title">{language.t("settings.general.section.appearance")}</h3>
-
-      <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.general.row.colorScheme.title")}
-          description={language.t("settings.general.row.colorScheme.description")}
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-color-scheme"
-            options={colorSchemeOptions()}
-            current={colorSchemeOptions().find((o) => o.value === theme.colorScheme())}
-            placement="bottom-end"
-            gutter={6}
-            value={(o) => o.value}
-            label={(o) => o.label}
-            onSelect={(option) => option && theme.setColorScheme(option.value)}
-          />
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.theme.title")}
-          description={
-            <>
-              {language.t("settings.general.row.theme.description")}{" "}
-              <Link class="settings-v2-link" href="https://opencode.ai/docs/themes/">
-                {language.t("common.learnMore")}
-              </Link>
-            </>
-          }
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-theme"
-            options={themeOptions()}
-            current={themeOptions().find((o) => o.id === theme.themeId())}
-            placement="bottom-end"
-            gutter={6}
-            value={(o) => o.id}
-            label={(o) => o.name}
-            onSelect={(option) => {
-              if (!option) return
-              theme.setTheme(option.id)
-            }}
-          />
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.uiFont.title")}
-          description={language.t("settings.general.row.uiFont.description")}
-        >
-          <div class="w-full sm:w-[220px]">
-            <TextInputV2
-              data-action="settings-ui-font"
-              type="text"
-              appearance="base"
-              value={sans()}
-              onInput={(event) => settings.appearance.setUIFont(event.currentTarget.value)}
-              placeholder={sansDefault}
-              spellcheck={false}
-              autocorrect="off"
-              autocomplete="off"
-              autocapitalize="off"
-              aria-label={language.t("settings.general.row.uiFont.title")}
-              style={{ "font-family": sansFontFamily(settings.appearance.uiFont()) }}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.font.title")}
-          description={language.t("settings.general.row.font.description")}
-        >
-          <div class="w-full sm:w-[220px]">
-            <TextInputV2
-              data-action="settings-code-font"
-              type="text"
-              appearance="base"
-              value={mono()}
-              onInput={(event) => settings.appearance.setFont(event.currentTarget.value)}
-              placeholder={monoDefault}
-              spellcheck={false}
-              autocorrect="off"
-              autocomplete="off"
-              autocapitalize="off"
-              aria-label={language.t("settings.general.row.font.title")}
-              style={{ "font-family": monoFontFamily(settings.appearance.font()) }}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.terminalFont.title")}
-          description={language.t("settings.general.row.terminalFont.description")}
-        >
-          <div class="w-full sm:w-[220px]">
-            <TextInputV2
-              data-action="settings-terminal-font"
-              type="text"
-              appearance="base"
-              value={terminal()}
-              onInput={(event) => settings.appearance.setTerminalFont(event.currentTarget.value)}
-              placeholder={terminalDefault}
-              spellcheck={false}
-              autocorrect="off"
-              autocomplete="off"
-              autocapitalize="off"
-              aria-label={language.t("settings.general.row.terminalFont.title")}
-              style={{ "font-family": terminalFontFamily(settings.appearance.terminalFont()) }}
-            />
-          </div>
-        </SettingsRowV2>
-      </SettingsListV2>
-    </div>
-  )
-
  const NotificationsSection = () => (
    <div class="settings-v2-section">
      <h3 class="settings-v2-section-title">{language.t("settings.general.section.notifications")}</h3>
@@ -576,68 +486,6 @@ export const SettingsGeneralV2: Component<{
    </div>
  )

-  const SoundsSection = () => (
-    <div class="settings-v2-section">
-      <h3 class="settings-v2-section-title">{language.t("settings.general.section.sounds")}</h3>
-
-      <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.general.sounds.agent.title")}
-          description={language.t("settings.general.sounds.agent.description")}
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-sounds-agent"
-            {...soundSelectProps(
-              () => settings.sounds.agentEnabled(),
-              () => settings.sounds.agent(),
-              (value) => settings.sounds.setAgentEnabled(value),
-              (id) => settings.sounds.setAgent(id),
-            )}
-            placement="bottom-end"
-            gutter={6}
-          />
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.sounds.permissions.title")}
-          description={language.t("settings.general.sounds.permissions.description")}
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-sounds-permissions"
-            {...soundSelectProps(
-              () => settings.sounds.permissionsEnabled(),
-              () => settings.sounds.permissions(),
-              (value) => settings.sounds.setPermissionsEnabled(value),
-              (id) => settings.sounds.setPermissions(id),
-            )}
-            placement="bottom-end"
-            gutter={6}
-          />
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.sounds.errors.title")}
-          description={language.t("settings.general.sounds.errors.description")}
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-sounds-errors"
-            {...soundSelectProps(
-              () => settings.sounds.errorsEnabled(),
-              () => settings.sounds.errors(),
-              (value) => settings.sounds.setErrorsEnabled(value),
-              (id) => settings.sounds.setErrors(id),
-            )}
-            placement="bottom-end"
-            gutter={6}
-          />
-        </SettingsRowV2>
-      </SettingsListV2>
-    </div>
-  )
-
  const UpdatesSection = () => (
    <div class="settings-v2-section">
      <h3 class="settings-v2-section-title">{language.t("settings.general.section.updates")}</h3>
@@ -659,7 +507,7 @@ export const SettingsGeneralV2: Component<{
          title={language.t("settings.updates.row.check.title")}
          description={language.t("settings.updates.row.check.description")}
        >
-          <ButtonV2 size="normal" variant="neutral" disabled={!updater.action().run} onClick={updater.run}>
+          <ButtonV2 size="normal" variant="neutral" disabled={!updater.action().run} onClick={() => updater.run()}>
            {language.t(updater.action().label)}
          </ButtonV2>
        </SettingsRowV2>
@@ -704,11 +552,11 @@ export const SettingsGeneralV2: Component<{

        <GeneralSection />

-        <AppearanceSection />
+        <AppearanceSection controller={appearance} />

        <NotificationsSection />

-        <SoundsSection />
+        <SoundsSection controller={sounds} />

        <Show when={desktop()}>
          <UpdatesSection />
@@ -5,9 +5,12 @@ import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { type Component, For, Show } from "solid-js"
+import { createStore } from "solid-js/store"
 import { useLanguage } from "@/context/language"
 import { useModels } from "@/context/models"
+import { useServerSDK } from "@/context/server-sdk"
 import { popularProviders } from "@/hooks/use-providers"
+import { Persist, persisted } from "@/utils/persist"
 import { SettingsListV2 } from "./parts/list"
 import { SettingsRowV2 } from "./parts/row"
 import "./settings-v2.css"
@@ -19,6 +22,11 @@ const PROVIDER_ICON_SIZE = 16
 export const SettingsModelsV2: Component = () => {
  const language = useLanguage()
  const models = useModels()
+  const serverSdk = useServerSDK()
+  const [store, setStore] = persisted(
+    Persist.serverGlobal(serverSdk().scope, "settings-v2.models.providers"),
+    createStore({ collapsed: {} as Record<string, boolean> }),
+  )

  const list = useFilteredList<ModelItem>({
    items: (_filter) => models.list(),
@@ -94,41 +102,82 @@ export const SettingsModelsV2: Component = () => {
            }
          >
            <For each={list.grouped.latest}>
-              {(group) => (
-                <div class="settings-v2-section" data-component="settings-models-provider">
-                  <div class="settings-v2-models-group-header">
-                    <ProviderIcon
-                      id={group.category}
-                      width={PROVIDER_ICON_SIZE}
-                      height={PROVIDER_ICON_SIZE}
-                      class="settings-v2-models-provider-icon shrink-0"
-                    />
-                    <h3 class="settings-v2-section-title">{group.items[0].provider.name}</h3>
+              {(group) => {
+                const searching = () => list.filter().length > 0
+                const expanded = () => searching() || !store.collapsed[group.category]
+
+                return (
+                  <div
+                    class="settings-v2-section"
+                    data-component="settings-models-provider"
+                    data-expanded={expanded() ? "" : undefined}
+                  >
+                    <h3 class="settings-v2-models-group-header">
+                      <button
+                        type="button"
+                        class="settings-v2-models-group-trigger"
+                        aria-expanded={expanded()}
+                        disabled={searching()}
+                        onClick={() => setStore("collapsed", group.category, expanded())}
+                      >
+                        <span class="settings-v2-models-group-chevron">
+                          <Show
+                            when={expanded()}
+                            fallback={
+                              <svg width="5" height="6" viewBox="0 0 5 6" fill="none" aria-hidden="true">
+                                <path
+                                  d="M0.75194 5.31663C0.41861 5.51103 0 5.27063 0 4.88473V0.500754C0 0.114854 0.41861 -0.125577 0.75194 0.0688635L4.5096 2.26084C4.8404 2.45378 4.8404 2.93168 4.5096 3.12462L0.75194 5.31663Z"
+                                  fill="currentColor"
+                                />
+                              </svg>
+                            }
+                          >
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                              <path
+                                d="M5.37624 6.75194C5.18184 6.41861 5.42224 6 5.80814 6H10.1921C10.578 6 10.8184 6.41861 10.624 6.75194L8.43203 10.5096C8.23909 10.8404 7.76119 10.8404 7.56825 10.5096L5.37624 6.75194Z"
+                                fill="currentColor"
+                              />
+                            </svg>
+                          </Show>
+                        </span>
+                        <span class="settings-v2-models-group-label">
+                          <ProviderIcon
+                            id={group.category}
+                            width={PROVIDER_ICON_SIZE}
+                            height={PROVIDER_ICON_SIZE}
+                            class="settings-v2-models-provider-icon shrink-0"
+                          />
+                          <span class="settings-v2-section-title">{group.items[0].provider.name}</span>
+                        </span>
+                      </button>
+                    </h3>
+                    <Show when={expanded()}>
+                      <SettingsListV2>
+                        <For each={group.items}>
+                          {(item) => {
+                            const key = { providerID: item.provider.id, modelID: item.id }
+                            return (
+                              <SettingsRowV2 title={item.name} description="">
+                                <div>
+                                  <Switch
+                                    checked={models.visible(key)}
+                                    onChange={(checked) => {
+                                      models.setVisibility(key, checked)
+                                    }}
+                                    hideLabel
+                                  >
+                                    {item.name}
+                                  </Switch>
+                                </div>
+                              </SettingsRowV2>
+                            )
+                          }}
+                        </For>
+                      </SettingsListV2>
+                    </Show>
                  </div>
-                  <SettingsListV2>
-                    <For each={group.items}>
-                      {(item) => {
-                        const key = { providerID: item.provider.id, modelID: item.id }
-                        return (
-                          <SettingsRowV2 title={item.name} description="">
-                            <div>
-                              <Switch
-                                checked={models.visible(key)}
-                                onChange={(checked) => {
-                                  models.setVisibility(key, checked)
-                                }}
-                                hideLabel
-                              >
-                                {item.name}
-                              </Switch>
-                            </div>
-                          </SettingsRowV2>
-                        )
-                      }}
-                    </For>
-                  </SettingsListV2>
-                </div>
-              )}
+                )
+              }}
            </For>
          </Show>
        </Show>
@@ -373,14 +373,64 @@
 }

 .settings-v2-models {
-  gap: 24px;
+  gap: 12px;
+}
+
+.settings-v2-models .settings-v2-section {
+  gap: 12px;
+}
+
+.settings-v2-models .settings-v2-section[data-expanded] {
+  padding-bottom: 12px;
 }

 .settings-v2-models-group-header {
+  display: flex;
+  align-items: center;
+  height: 28px;
+}
+
+.settings-v2-models-group-trigger {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 28px;
+  padding: 4px 8px 4px 4px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--v2-text-text-base);
+}
+
+.settings-v2-models-group-trigger:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 2px;
+}
+
+@media (hover: hover) {
+  .settings-v2-models-group-trigger:not(:disabled):hover {
+    background-color: var(--v2-background-bg-layer-02);
+  }
+}
+
+.settings-v2-models-group-trigger:disabled {
+  cursor: default;
+}
+
+.settings-v2-models-group-chevron {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--v2-icon-icon-muted);
+}
+
+.settings-v2-models-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
-  padding-bottom: 8px;
 }

 .settings-v2-models .settings-v2-section-title {
@@ -394,6 +444,10 @@
  color: var(--v2-icon-icon-base);
 }

+.settings-v2-models [data-component="settings-v2-list"] {
+  padding-inline: 16px;
+}
+
 .settings-v2-models .settings-v2-section-title + [data-component="settings-v2-list"] {
  margin-top: 0;
 }
@@ -1,11 +1,21 @@
 import { describe, expect, test } from "bun:test"
-import { hasNonBlockingServiceIssue, serverStatusDotClass } from "./status-popover-indicator"
+import {
+  hasNonBlockingServiceIssue,
+  hasServiceNeedingAttention,
+  serverStatusDotClass,
+} from "./status-popover-indicator"

 describe("serverStatusDotClass", () => {
  test("uses the success token while the server and services are healthy", () => {
    expect(serverStatusDotClass({ ready: true, serverHealth: true, issue: false })).toBe("bg-icon-success-base")
  })

+  test("uses the session attention token when a service needs attention", () => {
+    expect(serverStatusDotClass({ ready: true, serverHealth: true, attention: true, issue: true })).toBe(
+      "bg-v2-background-bg-accent",
+    )
+  })
+
  test("uses the warning token for non-blocking issues while the server is online", () => {
    expect(serverStatusDotClass({ ready: true, serverHealth: true, issue: true })).toBe("bg-icon-warning-base")
  })
@@ -34,3 +44,15 @@ describe("hasNonBlockingServiceIssue", () => {
    expect(hasNonBlockingServiceIssue({ mcp: [], lsp: ["connected"] })).toBe(false)
  })
 })
+
+describe("hasServiceNeedingAttention", () => {
+  test("detects MCP states that need user attention", () => {
+    expect(hasServiceNeedingAttention({ mcp: ["needs_auth"] })).toBe(true)
+    expect(hasServiceNeedingAttention({ mcp: ["needs_client_registration"] })).toBe(true)
+  })
+
+  test("ignores states that do not need user attention", () => {
+    expect(hasServiceNeedingAttention({ mcp: ["failed"] })).toBe(false)
+    expect(hasServiceNeedingAttention({ mcp: ["connected", "pending", "disabled"] })).toBe(false)
+  })
+})
@@ -1,6 +1,10 @@
 import type { LspStatus } from "@opencode-ai/sdk/v2/client"
 import type { McpServer } from "@opencode-ai/client/promise"

+export function hasServiceNeedingAttention(input: { mcp: Array<McpServer["status"]["status"]> }) {
+  return input.mcp.some((status) => status === "needs_auth" || status === "needs_client_registration")
+}
+
 export function hasNonBlockingServiceIssue(input: {
  mcp: Array<McpServer["status"]["status"]>
  lsp: Array<LspStatus["status"]>
@@ -11,9 +15,15 @@ export function hasNonBlockingServiceIssue(input: {
  )
 }

-export function serverStatusDotClass(input: { ready: boolean; serverHealth: boolean | undefined; issue: boolean }) {
+export function serverStatusDotClass(input: {
+  ready: boolean
+  serverHealth: boolean | undefined
+  attention?: boolean
+  issue: boolean
+}) {
  if (input.serverHealth === false) return "bg-icon-critical-base"
  if (!input.ready || input.serverHealth === undefined) return "bg-border-weak-base"
+  if (input.attention) return "bg-v2-background-bg-accent"
  if (input.issue) return "bg-icon-warning-base"
  if (input.serverHealth === true) return "bg-icon-success-base"
  return "bg-border-weak-base"
@@ -9,7 +9,11 @@ import { ServerConnection, useServer } from "@/context/server"
 import { useServerSDK } from "@/context/server-sdk"
 import { useSync } from "@/context/sync"
 import { useGlobal } from "@/context/global"
-import { hasNonBlockingServiceIssue, serverStatusDotClass } from "./status-popover-indicator"
+import {
+  hasNonBlockingServiceIssue,
+  hasServiceNeedingAttention,
+  serverStatusDotClass,
+} from "./status-popover-indicator"

 const Body = lazy(() => import("./status-popover-body").then((x) => ({ default: x.StatusPopoverBody })))
 const ServerBody = lazy(() => import("./status-popover-body").then((x) => ({ default: x.StatusPopoverServerBody })))
@@ -22,6 +26,11 @@ export function StatusPopover() {
  const [shown, setShown] = createSignal(false)
  const serverHealth = () => global.servers.health[server.key]?.healthy
  const ready = createMemo(() => serverHealth() === false || (sync().data.mcp_ready && sync().data.lsp_ready))
+  const attention = createMemo(() =>
+    hasServiceNeedingAttention({
+      mcp: Object.values(sync().data.mcp ?? {}).map((item) => item.status),
+    }),
+  )
  const issue = createMemo(() =>
    hasNonBlockingServiceIssue({
      mcp: Object.values(sync().data.mcp ?? {}).map((item) => item.status),
@@ -49,6 +58,7 @@ export function StatusPopover() {
            class={`absolute -top-px -right-px size-1.5 rounded-full ${serverStatusDotClass({
              ready: ready(),
              serverHealth: serverHealth(),
+              attention: attention(),
              issue: issue(),
            })}`}
          />
@@ -85,6 +95,11 @@ function DirectoryStatusPopover() {
  const [shown, setShown] = createSignal(false)
  const serverHealth = () => global.servers.health[ServerConnection.key(server().server)]?.healthy
  const ready = createMemo(() => serverHealth() === false || (sync().data.mcp_ready && sync().data.lsp_ready))
+  const attention = createMemo(() =>
+    hasServiceNeedingAttention({
+      mcp: Object.values(sync().data.mcp ?? {}).map((item) => item.status),
+    }),
+  )
  const issue = createMemo(() =>
    hasNonBlockingServiceIssue({
      mcp: Object.values(sync().data.mcp ?? {}).map((item) => item.status),
@@ -95,6 +110,7 @@ function DirectoryStatusPopover() {
    shown: shown(),
    ready: ready(),
    serverHealth: serverHealth(),
+    attention: attention(),
    issue: issue(),
    label: language.t("status.popover.trigger"),
    onOpenChange: setShown,
@@ -118,6 +134,7 @@ function ServerStatusPopover() {
    shown: shown(),
    ready: serverHealth() !== undefined,
    serverHealth: serverHealth(),
+    attention: false,
    issue: false,
    label: language.t("status.popover.trigger"),
    onOpenChange: setShown,
@@ -135,6 +152,7 @@ type StatusPopoverState = {
  shown: boolean
  ready: boolean
  serverHealth: boolean | undefined
+  attention: boolean
  issue: boolean
  label: string
  onOpenChange: (value: boolean) => void
@@ -12,6 +12,6 @@ export function forwardTabRef(ref: Ref<HTMLDivElement> | undefined, element: HTM
  if (typeof ref === "function") ref(element)
 }

-export function canOpenTabRename(dragging: boolean | undefined, editing: boolean, committing: boolean) {
-  return !dragging && !editing && !committing
+export function canOpenTabRename(dragging: boolean | undefined, editing: boolean, pending: boolean) {
+  return !dragging && !editing && !pending
 }
@@ -9,53 +9,86 @@
  justify-content: center;
 }

+[data-titlebar-tab] {
+  --tab-base: var(--v2-background-bg-deep);
+  --tab-overlay: transparent;
+  background: linear-gradient(var(--tab-overlay), var(--tab-overlay)), var(--tab-base);
+}
+
+[data-titlebar-tab]:is(:hover, :has(> [data-slot="tab-link"]:focus-visible)):not([data-state="pressed"]):not(
+    [data-dragging="true"]
+  ):not([data-editing="true"]) {
+  --tab-base: var(--v2-background-bg-layer-02);
+  --tab-overlay: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-titlebar-tab]:is([data-state="pressed"], [data-dragging="true"], [data-editing="true"]) {
+  --tab-base: var(--v2-background-bg-layer-02);
+  --tab-overlay: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-titlebar-tab]:is(:hover, [data-state="pressed"]) [data-slot="tab-close"] {
+  background: linear-gradient(var(--tab-overlay), var(--tab-overlay)), var(--tab-base);
+}
+
 [data-titlebar-tab][data-editing="true"] [data-slot="tab-close"] {
  display: none;
 }

 [data-titlebar-tab-list] {
-  gap: 13.5px;
+  gap: 6px;
 }

 [data-titlebar-tab-slot] {
+  --tab-separator: var(--v2-background-bg-layer-03);
  position: relative;
 }

+[data-color-scheme="dark"] [data-titlebar-tab-slot] {
+  --tab-separator: var(--v2-background-bg-layer-02);
+}
+
 [data-titlebar-tab-slot]:not(:first-child):not([data-active="true"])::before {
  content: "";
  position: absolute;
  top: 8px;
-  left: -6.75px;
+  left: -3.75px;
  width: 1.5px;
  height: 12px;
  border-radius: 9999px;
-  background: var(--v2-background-bg-layer-02);
+  background: var(--tab-separator);
 }

 [data-titlebar-tab-slot][data-active="true"] + [data-titlebar-tab-slot]::before {
  display: none;
 }

-[data-titlebar-tab] [data-slot="tab-close"]::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  height: 28px;
-  width: 16px;
-  pointer-events: none;
-  background: linear-gradient(to right, transparent, var(--tab-bg));
+[data-titlebar-tab-slot]:not([data-active="true"]):has([data-titlebar-tab]:hover)::before,
+[data-titlebar-tab-slot]:not([data-active="true"]):has([data-titlebar-tab]:hover) + [data-titlebar-tab-slot]::before {
  display: none;
 }

-[data-titlebar-tab][data-title-overflow="true"]:not([data-editing="true"]) [data-slot="tab-close"]::before {
-  display: block;
-  right: 0;
+[data-titlebar-tab][data-title-overflow="true"]:not([data-editing="true"]) [data-slot="tab-link"] {
+  --tab-title-fade-offset: 4px;
+  -webkit-mask-image: linear-gradient(
+    to right,
+    black 0,
+    black calc(100% - var(--tab-title-fade-offset) - 16px),
+    transparent calc(100% - var(--tab-title-fade-offset)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    black 0,
+    black calc(100% - var(--tab-title-fade-offset) - 16px),
+    transparent calc(100% - var(--tab-title-fade-offset)),
+    transparent 100%
+  );
 }

-[data-titlebar-tab][data-title-overflow="true"]:hover:not([data-editing="true"]) [data-slot="tab-close"]::before,
-[data-titlebar-tab][data-title-overflow="true"][data-active="true"]:not([data-editing="true"])
-  [data-slot="tab-close"]::before {
-  right: 100%;
+[data-titlebar-tab][data-title-overflow="true"]:is(:hover, [data-active="true"]):not([data-editing="true"])
+  [data-slot="tab-link"] {
+  --tab-title-fade-offset: 24px;
 }

 [data-titlebar-tab][data-title-overflow="true"]:not(:hover):not([data-active="true"]):not([data-editing="true"])
@@ -1,14 +1,13 @@
 import { createEffect, createMemo, createSignal, onCleanup, Show, type Ref } from "solid-js"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
+import { createMutation } from "@tanstack/solid-query"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { useGlobal } from "@/context/global"
-import { useLanguage } from "@/context/language"
 import { ServerConnection, serverName } from "@/context/server"
 import { displayName, projectForSession } from "@/pages/layout/helpers"
 import { SessionTabAvatar } from "@/pages/layout/session-tab-avatar"
-import { showToast } from "@/utils/toast"
 import type { Session } from "@opencode-ai/sdk/v2"
 import { canOpenTabRename, forwardTabRef } from "./titlebar-tab-gesture"
 import { TabPreviewPopover } from "./titlebar-tab-popover"
@@ -23,8 +22,7 @@ export function TabNavItem(props: {
  server: ServerConnection.Key
  session: () => Session | undefined
  fallbackTitle?: string
-  onTitleChange?: (title: string) => void
-  onTitleChangeFailed?: (title: string) => void
+  onRename: (title: string) => Promise<void>
  onClose: () => void
  onNavigate: () => void
  active?: boolean
@@ -34,13 +32,12 @@ export function TabNavItem(props: {
  pressed?: boolean
  hidden?: boolean
 }) {
-  const language = useLanguage()
  const [editing, setEditing] = createSignal(false)
  const [titleOverflowing, setTitleOverflowing] = createSignal(false)
  let tabRoot!: HTMLDivElement
  let titleEl!: HTMLSpanElement
-  let committing = false
  let measureFrame: number | undefined
+  const rename = createMutation(() => ({ mutationFn: props.onRename }))

  const closeTab = (event: MouseEvent) => {
    event.preventDefault()
@@ -116,40 +113,20 @@ export function TabNavItem(props: {
    selection?.addRange(range)
  }

-  const rename = async (title: string) => {
-    const ctx = serverCtx()
-    const session = props.session()
-    if (!ctx || !session) return
-    await ctx.sdk.api.session.rename({ sessionID: session.id, title })
-  }
-
  const closeRename = async (save: boolean) => {
-    if (committing || !editing()) return
-    committing = true
+    if (rename.isPending || !editing()) return

    const original = props.session()?.title ?? ""
    const next = (titleEl.textContent ?? "").trim()

    titleEl.scrollLeft = 0
-    if (save && next && next !== original) props.onTitleChange?.(next)
    setEditing(false)

    if (!save || !next || next === original) {
-      committing = false
      return
    }

-    try {
-      await rename(next)
-    } catch (err) {
-      props.onTitleChangeFailed?.(original)
-      showToast({
-        title: language.t("common.requestFailed"),
-        description: err instanceof Error ? err.message : undefined,
-      })
-    }
-
-    committing = false
+    await rename.mutateAsync(next)
  }

  createEffect(() => {
@@ -163,7 +140,7 @@ export function TabNavItem(props: {
  const openRename = (event: MouseEvent) => {
    event.preventDefault()
    event.stopPropagation()
-    if (!canOpenTabRename(props.dragging, editing(), committing)) return
+    if (!canOpenTabRename(props.dragging, editing(), rename.isPending)) return
    const session = props.session()
    if (!session) return
    titleEl.textContent = session.title
@@ -203,11 +180,11 @@ export function TabNavItem(props: {
      data-slot="titlebar-tab-item"
      data-title-overflow={titleOverflowing()}
      data-editing={editing()}
-      class="group relative flex h-7 w-full min-w-0 select-none flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [container-type:inline-size] [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] has-[>a:focus-visible]:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[dragging='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[pressed='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[editing='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+      class="group relative flex h-7 w-full min-w-0 select-none flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] px-1.5 [container-type:inline-size]"
      classList={{ invisible: props.hidden }}
      data-active={props.active}
      data-dragging={props.dragging}
-      data-pressed={props.pressed}
+      data-state={props.active || props.pressed ? "pressed" : undefined}
      onMouseDown={(event) => {
        if (event.button !== MIDDLE_MOUSE_BUTTON) return
        event.preventDefault()
@@ -218,90 +195,88 @@ export function TabNavItem(props: {
        closeTab(event)
      }}
    >
-      <Show when={title() !== undefined}>
-        <a
-          data-slot="tab-link"
-          data-titlebar-tab-link
-          href={props.href}
-          draggable={false}
-          onDragStart={(event) => {
+      <a
+        data-slot="tab-link"
+        data-titlebar-tab-link
+        href={props.href}
+        draggable={false}
+        onDragStart={(event) => {
+          event.preventDefault()
+          event.stopPropagation()
+        }}
+        onMouseDown={(event) => {
+          // Navigate on mousedown to shave the press-release delay off tab switches.
+          if (event.button !== 0) return
+          if (editing()) return
+          if (props.suppressNavigation?.()) return
+          props.onNavigate()
+        }}
+        onClick={(event) => {
+          event.preventDefault()
+          // Mouse navigation already happened on mousedown; detail 0 means keyboard activation.
+          if (event.detail > 0) return
+          if (editing()) return
+          if (props.suppressNavigation?.()) return
+          props.onNavigate()
+        }}
+        class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base group-data-[editing='true']:text-v2-text-text-base [-webkit-user-drag:none]"
+      >
+        <span data-slot="project-avatar-slot" class="flex size-4 shrink-0 items-center justify-center">
+          <Show
+            when={props.session()}
+            fallback={
+              <span class="block size-4 rounded-[3px] border border-v2-border-border-muted" aria-hidden="true" />
+            }
+          >
+            {(session) => (
+              <SessionTabAvatar
+                project={project()}
+                directory={session().directory}
+                sessionId={session().id}
+                server={props.server}
+              />
+            )}
+          </Show>
+        </span>
+        <span
+          ref={(el) => {
+            titleEl = el
+            titleEl.textContent = title() ?? ""
+          }}
+          data-slot="tab-title"
+          data-titlebar-tab-title
+          class="min-w-0 flex-1 outline-none leading-4"
+          classList={{
+            "overflow-hidden text-clip whitespace-nowrap": !editing(),
+            "select-text": editing(),
+          }}
+          contenteditable={editing() ? true : undefined}
+          onDblClick={openRename}
+          onKeyDown={(event) => {
+            event.stopPropagation()
+            if (event.key === "Enter") {
+              event.preventDefault()
+              void closeRename(true)
+              return
+            }
+            if (event.key !== "Escape") return
            event.preventDefault()
+            titleEl.textContent = props.session()?.title ?? ""
+            void closeRename(false)
+          }}
+          onBlur={() => void closeRename(true)}
+          onPointerDown={(event) => {
+            if (!editing()) return
            event.stopPropagation()
          }}
-          onMouseDown={(event) => {
-            // Navigate on mousedown to shave the press-release delay off tab switches.
-            if (event.button !== 0) return
-            if (editing()) return
-            if (props.suppressNavigation?.()) return
-            props.onNavigate()
-          }}
          onClick={(event) => {
+            if (!editing()) return
            event.preventDefault()
-            // Mouse navigation already happened on mousedown; detail 0 means keyboard activation.
-            if (event.detail > 0) return
-            if (editing()) return
-            if (props.suppressNavigation?.()) return
-            props.onNavigate()
          }}
-          class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base group-data-[editing='true']:text-v2-text-text-base [-webkit-user-drag:none]"
-        >
-          <span data-slot="project-avatar-slot" class="flex size-4 shrink-0 items-center justify-center">
-            <Show
-              when={props.session()}
-              fallback={
-                <span class="block size-4 rounded-[3px] border border-v2-border-border-muted" aria-hidden="true" />
-              }
-            >
-              {(session) => (
-                <SessionTabAvatar
-                  project={project()}
-                  directory={session().directory}
-                  sessionId={session().id}
-                  server={props.server}
-                />
-              )}
-            </Show>
-          </span>
-          <span
-            ref={(el) => {
-              titleEl = el
-              titleEl.textContent = title() ?? ""
-            }}
-            data-slot="tab-title"
-            data-titlebar-tab-title
-            class="min-w-0 flex-1 outline-none leading-4"
-            classList={{
-              "overflow-hidden text-clip whitespace-nowrap": !editing(),
-              "select-text": editing(),
-            }}
-            contenteditable={editing() ? true : undefined}
-            onDblClick={openRename}
-            onKeyDown={(event) => {
-              event.stopPropagation()
-              if (event.key === "Enter") {
-                event.preventDefault()
-                void closeRename(true)
-                return
-              }
-              if (event.key !== "Escape") return
-              event.preventDefault()
-              titleEl.textContent = props.session()?.title ?? ""
-              void closeRename(false)
-            }}
-            onBlur={() => void closeRename(true)}
-            onPointerDown={(event) => {
-              if (!editing()) return
-              event.stopPropagation()
-            }}
-            onClick={(event) => {
-              if (!editing()) return
-              event.preventDefault()
-            }}
-          />
-        </a>
-      </Show>
+        />
+      </a>

-      <div data-slot="tab-close" class="group-hover:bg-[var(--tab-bg)] group-data-[active=true]:bg-[var(--tab-bg)]">
+      <div data-slot="tab-close">
        <IconButtonV2
          size="small"
          variant="ghost-muted"
@@ -359,8 +334,8 @@ export function DraftTabItem(props: {
      data-slot="titlebar-tab-item"
      data-active={props.active}
      data-dragging={props.dragging}
-      data-pressed={props.pressed}
-      class="group relative flex h-7 w-full min-w-0 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] bg-[var(--tab-bg)] px-1.5 [container-type:inline-size] whitespace-nowrap [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] has-[>a:focus-visible]:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[dragging='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[pressed='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[editing='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+      data-state={props.active || props.pressed ? "pressed" : undefined}
+      class="group relative flex h-7 w-full min-w-0 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] px-1.5 [container-type:inline-size] whitespace-nowrap"
      classList={{ invisible: props.hidden }}
      onMouseDown={(event) => {
        if (event.button !== MIDDLE_MOUSE_BUTTON) return
@@ -406,7 +381,7 @@ export function DraftTabItem(props: {
          {props.title}
        </span>
      </a>
-      <div data-slot="tab-close" class="group-hover:bg-[var(--tab-bg)] group-data-[active=true]:bg-[var(--tab-bg)]">
+      <div data-slot="tab-close">
        <IconButtonV2
          size="small"
          variant="ghost-muted"
@@ -0,0 +1,23 @@
+import { describe, expect, test } from "bun:test"
+import { adjacentTabKey, mergeVisibleTabOrder } from "./titlebar-tab-order"
+
+describe("adjacentTabKey", () => {
+  test("follows the visible left-to-right order", () => {
+    expect(adjacentTabKey(["c", "a", "b"], "c", 1)).toBe("a")
+    expect(adjacentTabKey(["c", "a", "b"], "a", -1)).toBe("c")
+  })
+
+  test("skips tabs omitted from the visible order", () => {
+    expect(adjacentTabKey(["a", "c"], "a", 1)).toBe("c")
+    expect(adjacentTabKey(["a", "c"], "c", 1)).toBe("a")
+  })
+})
+
+test("merges reordered visible tabs around hidden tabs", () => {
+  expect(mergeVisibleTabOrder(["a", "hidden", "b", "c"], ["a", "b", "c"], ["c", "a", "b"])).toEqual([
+    "c",
+    "hidden",
+    "a",
+    "b",
+  ])
+})
@@ -0,0 +1,12 @@
+export function adjacentTabKey(order: string[], current: string | undefined, offset: -1 | 1) {
+  if (!current || order.length === 0) return
+  const index = order.indexOf(current)
+  if (index === -1) return
+  return order[(index + offset + order.length) % order.length]
+}
+
+export function mergeVisibleTabOrder(all: string[], current: string[], next: string[]) {
+  const visible = new Set(current)
+  const reordered = next.values()
+  return all.map((key) => (visible.has(key) ? (reordered.next().value ?? key) : key))
+}
@@ -1,4 +1,5 @@
-import { createEffect, createMemo, createResource, createRoot, For, onCleanup, onMount } from "solid-js"
+import { createEffect, createMemo, createResource, createRoot, For, onCleanup, onMount, Show } from "solid-js"
+import { createStore } from "solid-js/store"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { DragDropProvider, PointerSensor } from "@dnd-kit/solid"
 import { isSortable, useSortable } from "@dnd-kit/solid/sortable"
@@ -15,7 +16,10 @@ import { useCommand } from "@/context/command"
 import { useTabs } from "@/context/tabs"
 import { createTabPromptState } from "@/context/prompt"
 import { base64Encode } from "@opencode-ai/core/util/encode"
+import { showToast } from "@/utils/toast"
 import { canStartTabDrag, isTabCloseTarget } from "./titlebar-tab-gesture"
+import { adjacentTabKey, mergeVisibleTabOrder } from "./titlebar-tab-order"
+import type { Session } from "@opencode-ai/sdk/v2"

 function SessionTabSlot(props: {
  tab: SessionTab
@@ -23,12 +27,12 @@ function SessionTabSlot(props: {
  index: () => number
  active: () => boolean
  forceTruncate: boolean
-  serverCtx: () => ServerCtx | undefined
+  session: () => Session | undefined
+  fallbackTitle?: string
+  onRename: (title: string) => Promise<void>
  onNavigate: (element: HTMLDivElement) => void
  onClose: () => void
 }) {
-  const tabs = useTabs()
-  const language = useLanguage()
  const sortable = useSortable({
    get id() {
      return props.id
@@ -38,6 +42,47 @@ function SessionTabSlot(props: {
    },
  })
  let ref!: HTMLDivElement
+
+  return (
+    <div
+      ref={sortable.ref}
+      data-titlebar-tab-slot
+      data-tab-key={props.id}
+      data-active={props.active()}
+      class="relative flex w-56 min-w-7 max-w-56 flex-shrink"
+    >
+      <TabNavItem
+        ref={(el) => {
+          ref = el
+        }}
+        href={tabHref(props.tab)}
+        server={props.tab.server}
+        session={props.session}
+        fallbackTitle={props.fallbackTitle}
+        onRename={props.onRename}
+        onNavigate={() => props.onNavigate(ref)}
+        onClose={props.onClose}
+        active={props.active()}
+        forceTruncate={props.forceTruncate}
+        dragging={sortable.isDragSource()}
+      />
+    </div>
+  )
+}
+
+function SessionTabEntry(props: {
+  tab: SessionTab
+  id: string
+  index: () => number
+  active: () => boolean
+  forceTruncate: boolean
+  serverCtx: () => ServerCtx | undefined
+  onVisibleChange: (visible: boolean) => void
+  onNavigate: (element: HTMLDivElement) => void
+  onClose: () => void
+}) {
+  const tabs = useTabs()
+  const language = useLanguage()
  const sdk = createMemo(() => props.serverCtx()?.sdk ?? null)
  const cachedSession = createMemo(() => props.serverCtx()?.sync.session.peek(props.tab.sessionId))
  const persisted = createMemo(() => tabs.info[props.id])
@@ -50,8 +95,30 @@ function SessionTabSlot(props: {
  )
  const session = createMemo(() => cachedSession() ?? loadedSession())
  const missingSession = createMemo(() => !!props.serverCtx() && !loadedSession.loading && !session())
+  const visible = createMemo(() => !!session() || missingSession() || !!persisted()?.title)
  let prefetched = false

+  const rename = async (title: string) => {
+    const value = session()
+    const ctx = props.serverCtx()
+    if (!value || !ctx) return
+
+    ctx.sync.session.remember({ ...value, title })
+    try {
+      await ctx.sdk.api.session.rename({ sessionID: value.id, title })
+    } catch (err) {
+      const current = session()
+      const currentCtx = props.serverCtx()
+      if (current && currentCtx) currentCtx.sync.session.remember({ ...current, title: value.title })
+      showToast({
+        title: language.t("common.requestFailed"),
+        description: err instanceof Error ? err.message : undefined,
+      })
+    }
+  }
+
+  createEffect(() => props.onVisibleChange(visible()))
+
  createEffect(() => {
    const ctx = props.serverCtx()
    const value = session()
@@ -83,39 +150,20 @@ function SessionTabSlot(props: {
  })

  return (
-    <div
-      ref={sortable.ref}
-      data-titlebar-tab-slot
-      data-tab-key={props.id}
-      data-active={props.active()}
-      class="relative flex w-56 min-w-7 max-w-56 flex-shrink"
-      classList={{ hidden: !session() && !missingSession() && !persisted()?.title }}
-    >
-      <TabNavItem
-        ref={(el) => {
-          ref = el
-        }}
-        href={tabHref(props.tab)}
-        server={props.tab.server}
+    <Show when={visible()}>
+      <SessionTabSlot
+        tab={props.tab}
+        id={props.id}
+        index={props.index}
+        active={props.active}
+        forceTruncate={props.forceTruncate}
        session={session}
        fallbackTitle={persisted()?.title ?? (missingSession() ? language.t("session.tab.unknown") : undefined)}
-        onTitleChange={(title) => {
-          const value = session()
-          const ctx = props.serverCtx()
-          if (value && ctx) ctx.sync.session.remember({ ...value, title })
-        }}
-        onTitleChangeFailed={(title) => {
-          const value = session()
-          const ctx = props.serverCtx()
-          if (value && ctx) ctx.sync.session.remember({ ...value, title })
-        }}
-        onNavigate={() => props.onNavigate(ref)}
+        onRename={rename}
+        onNavigate={props.onNavigate}
        onClose={props.onClose}
-        active={props.active()}
-        forceTruncate={props.forceTruncate}
-        dragging={sortable.isDragSource()}
      />
-    </div>
+    </Show>
  )
 }

@@ -172,11 +220,39 @@ export function TitlebarTabStrip(props: {
 }) {
  const global = useGlobal()
  const language = useLanguage()
+  const command = useCommand()
  let scrollRef!: HTMLDivElement
  let listRef!: HTMLDivElement
  let resizeFrame: number | undefined
+  const [visibility, setVisibility] = createStore<Record<string, boolean>>({})
+  const visibleTabs = createMemo(() => props.tabs.filter((tab) => tab.type === "draft" || visibility[tabKey(tab)]))
+  const visibleTabIds = () => visibleTabs().map(tabKey)

-  const tabIds = () => props.tabs.map(tabKey)
+  command.register("titlebar-tab-cycle", () => [
+    {
+      id: `tab.prev`,
+      category: "tab",
+      title: "",
+      keybind: `mod+option+ArrowLeft,ctrl+shift+tab`,
+      hidden: true,
+      onSelect: () => selectAdjacentTab(-1),
+    },
+    {
+      id: `tab.next`,
+      category: "tab",
+      title: "",
+      keybind: `mod+option+ArrowRight,ctrl+tab`,
+      hidden: true,
+      onSelect: () => selectAdjacentTab(1),
+    },
+  ])
+
+  function selectAdjacentTab(offset: -1 | 1) {
+    const current = props.currentTab()
+    const key = adjacentTabKey(visibleTabIds(), current ? tabKey(current) : undefined, offset)
+    const next = props.tabs.find((tab) => tabKey(tab) === key)
+    if (next) props.onNavigate(next)
+  }

  function refreshOverflow() {
    if (!scrollRef) return
@@ -204,7 +280,7 @@ export function TitlebarTabStrip(props: {

  createEffect(() => {
    props.tabs.length
-    tabIds()
+    visibleTabIds()
    refreshOverflow()
  })

@@ -240,22 +316,29 @@ export function TitlebarTabStrip(props: {
            props.onNavigate(tab, tabEl ?? undefined)
          }}
          onDragEnd={(event) => {
-            const current = tabIds()
+            const current = visibleTabIds()
            const source = event.operation.source
            if (event.canceled || !isSortable(source)) return

            const { initialIndex, index } = source
            if (initialIndex !== index) {
-              props.onReorder(arrayMove(current, source.initialIndex, source.index))
+              props.onReorder(
+                mergeVisibleTabOrder(
+                  props.tabs.map(tabKey),
+                  current,
+                  arrayMove(current, source.initialIndex, source.index),
+                ),
+              )
            }
          }}
        >
          <div data-titlebar-tab-list class="flex w-full min-w-0 flex-row items-center" ref={listRef}>
            <For each={props.tabs}>
-              {(tab, index) => {
+              {(tab) => {
                const id = tabKey(tab)
                let ref!: HTMLDivElement
-                useTabShortcut(index, () => props.onNavigate(tab, ref))
+                const visibleIndex = () => visibleTabs().findIndex((item) => tabKey(item) === id)
+                useTabShortcut(visibleIndex, () => props.onNavigate(tab, ref))
                const serverCtx = createMemo(() => {
                  if (tab.type !== "session") return
                  const conn = global.servers.list().find((item) => ServerConnection.key(item) === tab.server)
@@ -264,13 +347,14 @@ export function TitlebarTabStrip(props: {

                if (tab.type === "session") {
                  return (
-                    <SessionTabSlot
+                    <SessionTabEntry
                      tab={tab}
                      id={id}
-                      index={index}
+                      index={visibleIndex}
                      active={() => props.currentTab() === tab}
                      forceTruncate={props.forceTruncate}
                      serverCtx={serverCtx}
+                      onVisibleChange={(visible) => setVisibility(id, visible)}
                      onNavigate={(element) => {
                        ref = element
                        props.onNavigate(tab, element)
@@ -284,7 +368,7 @@ export function TitlebarTabStrip(props: {
                  <DraftTabSlot
                    tab={tab}
                    id={id}
-                    index={index}
+                    index={visibleIndex}
                    active={() => props.currentTab() === tab}
                    title={language.t("command.session.new")}
                    onNavigate={(element) => {
@@ -318,7 +402,7 @@ function useTabShortcut(index: () => number, onSelect: () => void) {

  command.register(() => {
    const number = index() + 1
-    if (number > 9) return []
+    if (number < 1 || number > 9) return []
    return [
      {
        id: `tab.${number}`,
@@ -338,40 +338,6 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                  keybind: "mod+shift+t",
                  onSelect: () => tabsStoreActions.reopenClosedTab(),
                },
-                {
-                  id: `tab.prev`,
-                  category: "tab",
-                  title: "",
-                  keybind: `mod+option+ArrowLeft,ctrl+shift+tab`,
-                  hidden: true,
-                  onSelect: () => {
-                    let index = tabsStore.findIndex((tab) => tab === currentTab())
-                    if (index === -1) return
-
-                    index -= 1
-                    if (index === -1) index = tabsStore.length - 1
-
-                    const next = tabsStore[index]
-                    if (next) tabs.select(next)
-                  },
-                },
-                {
-                  id: `tab.next`,
-                  category: "tab",
-                  title: "",
-                  keybind: `mod+option+ArrowRight,ctrl+tab`,
-                  hidden: true,
-                  onSelect: () => {
-                    let index = tabsStore.findIndex((tab) => tab === currentTab())
-                    if (index === -1) return
-
-                    index += 1
-                    if (index === tabsStore.length) index = 0
-
-                    const next = tabsStore[index]
-                    if (next) tabs.select(next)
-                  },
-                },
              ].filter((v) => v !== undefined)
            })

@@ -429,27 +395,25 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                  }}
                  onReorder={(keys) => tabsStoreActions.reorder(keys)}
                />
-                <Show when={!creating()}>
-                  <TooltipV2
-                    placement="bottom"
-                    value={
-                      <>
-                        {language.t("command.session.new")}
-                        <KeybindV2 keys={newTabTooltipKeybind(command)} variant="neutral" />
-                      </>
-                    }
-                  >
-                    <IconButtonV2
-                      type="button"
-                      variant="ghost-muted"
-                      size="large"
-                      class="shrink-0"
-                      icon={<IconV2 name="plus" />}
-                      onClick={openNewTab}
-                      aria-label={language.t("command.session.new")}
-                    />
-                  </TooltipV2>
-                </Show>
+                <TooltipV2
+                  placement="bottom"
+                  value={
+                    <>
+                      {language.t("command.session.new")}
+                      <KeybindV2 keys={newTabTooltipKeybind(command)} variant="neutral" />
+                    </>
+                  }
+                >
+                  <IconButtonV2
+                    type="button"
+                    variant="ghost-muted"
+                    size="large"
+                    class="shrink-0"
+                    icon={<IconV2 name="plus" />}
+                    onClick={openNewTab}
+                    aria-label={language.t("command.session.new")}
+                  />
+                </TooltipV2>
                <div class="flex-1" />
                <TitlebarV2Right state={v2RightState()} />
              </div>
@@ -21,6 +21,29 @@ describe("file path helpers", () => {
    expect(path.normalize("c:\\repo\\src\\app.ts")).toBe("src\\app.ts")
  })

+  test("normalizes Windows directory separators", () => {
+    const path = createPathHelpers(() => "C:\\repo")
+    expect(path.normalizeDir("frontend\\")).toBe("frontend")
+    expect(path.normalizeDir("frontend\\src\\")).toBe("frontend/src")
+    expect(path.normalizeDir("C:\\repo\\frontend\\")).toBe("frontend")
+  })
+
+  test("normalizes separators for Windows roots written with forward slashes", () => {
+    const path = createPathHelpers(() => "C:/repo")
+    expect(path.normalizeDir("frontend\\src\\")).toBe("frontend/src")
+  })
+
+  test("normalizes separators for Windows UNC roots", () => {
+    const path = createPathHelpers(() => "\\\\server\\share")
+    expect(path.normalizeDir("\\\\server\\share\\frontend\\")).toBe("frontend")
+  })
+
+  test("preserves backslashes in POSIX directory names", () => {
+    const path = createPathHelpers(() => "/repo")
+    expect(path.normalizeDir("literal\\name\\")).toBe("literal\\name\\")
+    expect(path.normalizeDir("literal\\name/")).toBe("literal\\name")
+  })
+
  test("keeps query/hash stripping behavior stable", () => {
    expect(stripQueryAndHash("a/b.ts#L12?x=1")).toBe("a/b.ts")
    expect(stripQueryAndHash("a/b.ts?x=1#L12")).toBe("a/b.ts")
@@ -140,7 +140,12 @@ export function createPathHelpers(scope: () => string) {
    return normalize(tabValue)
  }

-  const normalizeDir = (input: string) => normalize(input).replace(/\/+$/, "")
+  const normalizeDir = (input: string) => {
+    const path = normalize(input)
+    const root = scope()
+    const windows = /^[A-Za-z]:/.test(root) || root.startsWith("\\\\")
+    return (windows ? path.replace(/\\/g, "/") : path).replace(/\/+$/, "")
+  }

  return {
    normalize,
@@ -290,6 +290,10 @@ export function createServerSyncContextInner(serverSDK: ServerSDK) {

  const queryClient = useQueryClient()
  const homeSessions = createHomeSessionIndexCache(queryClient, ServerConnection.key(serverSDK.server))
+  const refreshProviders = () =>
+    queryClient.refetchQueries({
+      predicate: (query) => query.queryKey[0] === serverSDK.scope && query.queryKey[2] === "providers",
+    })

  let bootedAt = 0
  let bootingRoot = false
@@ -537,6 +541,7 @@ export function createServerSyncContextInner(serverSDK: ServerSDK) {
      homeSessions.apply(event)
    }
    homeSessions.refresh(event.type)
+    if (eventType === "integration.connection.updated") void refreshProviders()

    if (directory === "global") {
      if (eventType === "server.connected" && activeSessionsQuery.data === undefined && !activeSessionsQuery.isFetching)
@@ -678,6 +683,7 @@ export function createServerSyncContextInner(serverSDK: ServerSDK) {
    peek: children.peek,
    disableMcp: children.disableMcp,
    queryOptions: queryOptionsApi,
+    refreshProviders,
    // bootstrap,
    updateConfig: updateConfigMutation.mutateAsync,
    project: projectApi,
@@ -1,6 +1,7 @@
 import { describe, expect, test } from "bun:test"
 import {
  hasExistingWebState,
+  initialAgentVisibility,
  isAppUpgrade,
  layoutTransitionState,
  maximumSunsetTimeout,
@@ -11,6 +12,22 @@ import {
  shouldEnableNewLayout,
 } from "./settings"

+describe("agent visibility", () => {
+  test("shows the picker for existing profiles and hides it for first-time installs", () => {
+    expect(initialAgentVisibility(undefined, true)).toBe(true)
+    expect(initialAgentVisibility(undefined, false)).toBe(false)
+  })
+
+  test("shows the picker when updating from a recent release", () => {
+    expect(initialAgentVisibility(undefined, false, "1.18.8")).toBe(true)
+  })
+
+  test("preserves the preference after initialization", () => {
+    expect(initialAgentVisibility(true, true, "1.18.8")).toBeUndefined()
+    expect(initialAgentVisibility(true, false)).toBeUndefined()
+  })
+})
+
 describe("layout transition", () => {
  test("blank profiles default to the new layout", () => {
    expect(newLayoutDesignsDefault).toBe(true)
@@ -1,5 +1,5 @@
 import { createStore, reconcile } from "solid-js/store"
-import { createEffect, createMemo, createSignal, onCleanup } from "solid-js"
+import { batch, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { persisted } from "@/utils/persist"
 import { usePlatform } from "@/context/platform"
@@ -36,6 +36,7 @@ export interface Settings {
    mobileTitlebarPosition: "top" | "bottom"
    newLayoutDesigns?: boolean
    layoutTransitionEligible?: boolean
+    agentVisibilityInitialized?: boolean
    newInterfaceNoticeDismissed?: boolean
    shouldDisplayTabsToast?: boolean
  }
@@ -93,6 +94,11 @@ export function hasExistingWebState(settings: Promise<string> | string | null, p
  return settings !== null || previousVersion !== undefined
 }

+export function initialAgentVisibility(initialized: boolean | undefined, existing: boolean, previousVersion?: string) {
+  if (initialized === true) return
+  return existing || previousVersion !== undefined
+}
+
 export function shouldEnableNewLayout(previous: string | undefined, current: string | undefined) {
  if (!current) return false
  const currentComparison = compareVersions(current, newLayoutDesignsUpgradeCutoff)
@@ -271,6 +277,14 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
      )
    })
    const visible = (preference: () => boolean) => createMemo(() => !newLayoutDesigns() || preference())
+    const initializeAgentVisibility = (existing: boolean) => {
+      const initial = initialAgentVisibility(store.general?.agentVisibilityInitialized, existing, launchState.previous)
+      if (initial === undefined) return
+      batch(() => {
+        setStore("general", "showCustomAgents", initial)
+        setStore("general", "agentVisibilityInitialized", true)
+      })
+    }

    if (sunset && !oldInterfaceRetired()) {
      const timeout = { current: undefined as ReturnType<typeof setTimeout> | undefined }
@@ -299,8 +313,9 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont

    createEffect(() => {
      if (!ready() || !launchState.classified || platform.platform !== "web") return
-      if (layoutTransitionClassified()) return
-      setStore("general", "layoutTransitionEligible", hasExistingWebState(settingsInit, launchState.previous))
+      const existing = hasExistingWebState(settingsInit, launchState.previous)
+      if (!layoutTransitionClassified()) setStore("general", "layoutTransitionEligible", existing)
+      initializeAgentVisibility(existing)
    })

    createEffect(() => {
@@ -426,6 +441,7 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
          if (typeof current === "boolean") return
          setStore("general", "layoutTransitionEligible", eligible)
        },
+        initializeAgentVisibility,
        layoutTransitionAvailable: createMemo(() => ready() && layoutTransition().available),
        newInterfaceNoticeVisible: createMemo(() => ready() && layoutTransition().notice),
        dismissNewInterfaceNotice() {
@@ -277,6 +277,7 @@ export const dict = {
  "prompt.action.send": "إرسال",
  "prompt.action.stop": "توقف",
  "prompt.toast.pasteUnsupported.title": "مرفق غير مدعوم",
+  "prompt.toast.attachmentDuplicate.title": "تم تحميل هذا الملف بالفعل",
  "prompt.toast.pasteUnsupported.description": "يمكن إرفاق الصور أو ملفات PDF أو الملفات النصية فقط هنا.",
  "prompt.toast.modelAgentRequired.title": "حدد وكيلاً ونموذجاً",
  "prompt.toast.modelAgentRequired.description": "اختر وكيلاً ونموذجاً قبل إرسال الموجه.",
@@ -277,6 +277,7 @@ export const dict = {
  "prompt.action.send": "Enviar",
  "prompt.action.stop": "Parar",
  "prompt.toast.pasteUnsupported.title": "Anexo não suportado",
+  "prompt.toast.attachmentDuplicate.title": "Este arquivo já foi enviado",
  "prompt.toast.pasteUnsupported.description": "Apenas imagens, PDFs ou arquivos de texto podem ser anexados aqui.",
  "prompt.toast.modelAgentRequired.title": "Selecione um agente e modelo",
  "prompt.toast.modelAgentRequired.description": "Escolha um agente e modelo antes de enviar um prompt.",
@@ -298,6 +298,7 @@ export const dict = {
  "prompt.action.stop": "Zaustavi",

  "prompt.toast.pasteUnsupported.title": "Nepodržan prilog",
+  "prompt.toast.attachmentDuplicate.title": "Ova datoteka je već učitana",
  "prompt.toast.pasteUnsupported.description": "Ovdje se mogu priložiti samo slike, PDF-ovi ili tekstualne datoteke.",
  "prompt.toast.modelAgentRequired.title": "Odaberi agenta i model",
  "prompt.toast.modelAgentRequired.description": "Odaberi agenta i model prije slanja upita.",
@@ -296,6 +296,7 @@ export const dict = {
  "prompt.action.stop": "Stop",

  "prompt.toast.pasteUnsupported.title": "Ikke understøttet vedhæftning",
+  "prompt.toast.attachmentDuplicate.title": "Denne fil er allerede uploadet",
  "prompt.toast.pasteUnsupported.description": "Kun billeder, PDF'er eller tekstfiler kan vedhæftes her.",
  "prompt.toast.modelAgentRequired.title": "Vælg en agent og model",
  "prompt.toast.modelAgentRequired.description": "Vælg en agent og model før du sender en forespørgsel.",
@@ -282,6 +282,7 @@ export const dict = {
  "prompt.action.send": "Senden",
  "prompt.action.stop": "Stopp",
  "prompt.toast.pasteUnsupported.title": "Nicht unterstützter Anhang",
+  "prompt.toast.attachmentDuplicate.title": "Diese Datei wurde bereits hochgeladen",
  "prompt.toast.pasteUnsupported.description": "Hier können nur Bilder, PDFs oder Textdateien angehängt werden.",
  "prompt.toast.modelAgentRequired.title": "Wählen Sie einen Agenten und ein Modell",
  "prompt.toast.modelAgentRequired.description":
@@ -301,6 +301,7 @@ export const dict = {

  "prompt.toast.pasteUnsupported.title": "Unsupported attachment",
  "prompt.toast.pasteUnsupported.description": "Only images, PDFs, or text files can be attached here.",
+  "prompt.toast.attachmentDuplicate.title": "This file has already been uploaded",
  "prompt.toast.modelAgentRequired.title": "Select an agent and model",
  "prompt.toast.modelAgentRequired.description": "Choose an agent and model before sending a prompt.",
  "prompt.toast.worktreeCreateFailed.title": "Failed to create worktree",
@@ -297,6 +297,7 @@ export const dict = {
  "prompt.action.stop": "Detener",

  "prompt.toast.pasteUnsupported.title": "Adjunto no compatible",
+  "prompt.toast.attachmentDuplicate.title": "Este archivo ya se ha subido",
  "prompt.toast.pasteUnsupported.description": "Solo se pueden adjuntar imágenes, PDFs o archivos de texto aquí.",
  "prompt.toast.modelAgentRequired.title": "Selecciona un agente y modelo",
  "prompt.toast.modelAgentRequired.description": "Elige un agente y modelo antes de enviar un prompt.",
@@ -277,6 +277,7 @@ export const dict = {
  "prompt.action.send": "Envoyer",
  "prompt.action.stop": "Arrêter",
  "prompt.toast.pasteUnsupported.title": "Pièce jointe non prise en charge",
+  "prompt.toast.attachmentDuplicate.title": "Ce fichier a déjà été téléversé",
  "prompt.toast.pasteUnsupported.description":
    "Seules les images, les PDF ou les fichiers texte peuvent être joints ici.",
  "prompt.toast.modelAgentRequired.title": "Sélectionnez un agent et un modèle",
@@ -276,6 +276,7 @@ export const dict = {
  "prompt.action.send": "送信",
  "prompt.action.stop": "停止",
  "prompt.toast.pasteUnsupported.title": "サポートされていない添付ファイル",
+  "prompt.toast.attachmentDuplicate.title": "このファイルはすでにアップロードされています",
  "prompt.toast.pasteUnsupported.description": "画像、PDF、またはテキストファイルのみ添付できます。",
  "prompt.toast.modelAgentRequired.title": "エージェントとモデルを選択",
  "prompt.toast.modelAgentRequired.description": "プロンプトを送信する前にエージェントとモデルを選択してください。",
@@ -264,6 +264,7 @@ export const dict = {
  "prompt.action.send": "전송",
  "prompt.action.stop": "중지",
  "prompt.toast.pasteUnsupported.title": "지원되지 않는 첨부 파일",
+  "prompt.toast.attachmentDuplicate.title": "이 파일은 이미 업로드되었습니다",
  "prompt.toast.pasteUnsupported.description": "이미지, PDF 또는 텍스트 파일만 첨부할 수 있습니다.",
  "prompt.toast.modelAgentRequired.title": "에이전트 및 모델 선택",
  "prompt.toast.modelAgentRequired.description": "프롬프트를 보내기 전에 에이전트와 모델을 선택하세요.",
@@ -288,6 +288,7 @@ export const dict = {
  "prompt.action.stop": "Stopp",

  "prompt.toast.pasteUnsupported.title": "Ikke støttet vedlegg",
+  "prompt.toast.attachmentDuplicate.title": "Denne filen er allerede lastet opp",
  "prompt.toast.pasteUnsupported.description": "Kun bilder, PDF-er eller tekstfiler kan legges ved her.",
  "prompt.toast.modelAgentRequired.title": "Velg en agent og modell",
  "prompt.toast.modelAgentRequired.description": "Velg en agent og modell før du sender en forespørsel.",
@@ -278,6 +278,7 @@ export const dict = {
  "prompt.action.send": "Wyślij",
  "prompt.action.stop": "Zatrzymaj",
  "prompt.toast.pasteUnsupported.title": "Nieobsługiwany załącznik",
+  "prompt.toast.attachmentDuplicate.title": "Ten plik został już przesłany",
  "prompt.toast.pasteUnsupported.description": "Można tutaj załączać tylko obrazy, pliki PDF lub pliki tekstowe.",
  "prompt.toast.modelAgentRequired.title": "Wybierz agenta i model",
  "prompt.toast.modelAgentRequired.description": "Wybierz agenta i model przed wysłaniem zapytania.",
@@ -297,6 +297,7 @@ export const dict = {
  "prompt.action.stop": "Остановить",

  "prompt.toast.pasteUnsupported.title": "Неподдерживаемое вложение",
+  "prompt.toast.attachmentDuplicate.title": "Этот файл уже загружен",
  "prompt.toast.pasteUnsupported.description": "Здесь можно прикрепить только изображения, PDF или текстовые файлы.",
  "prompt.toast.modelAgentRequired.title": "Выберите агента и модель",
  "prompt.toast.modelAgentRequired.description": "Выберите агента и модель перед отправкой запроса.",
@@ -297,6 +297,7 @@ export const dict = {
  "prompt.action.stop": "หยุด",

  "prompt.toast.pasteUnsupported.title": "ไฟล์แนบที่ไม่รองรับ",
+  "prompt.toast.attachmentDuplicate.title": "ไฟล์นี้ถูกอัปโหลดแล้ว",
  "prompt.toast.pasteUnsupported.description": "แนบได้เฉพาะรูปภาพ, PDF หรือไฟล์ข้อความเท่านั้น",
  "prompt.toast.modelAgentRequired.title": "เลือกเอเจนต์และโมเดล",
  "prompt.toast.modelAgentRequired.description": "เลือกเอเจนต์และโมเดลก่อนส่งพร้อมท์",
@@ -302,6 +302,7 @@ export const dict = {
  "prompt.action.stop": "Durdur",

  "prompt.toast.pasteUnsupported.title": "Desteklenmeyen ek",
+  "prompt.toast.attachmentDuplicate.title": "Bu dosya zaten yüklendi",
  "prompt.toast.pasteUnsupported.description": "Buraya yalnızca resimler, PDF'ler veya metin dosyaları eklenebilir.",
  "prompt.toast.modelAgentRequired.title": "Bir ajan ve model seçin",
  "prompt.toast.modelAgentRequired.description": "Komut göndermeden önce bir ajan ve model seçin.",
@@ -299,6 +299,7 @@ export const dict = {
  "prompt.action.stop": "Зупинити",

  "prompt.toast.pasteUnsupported.title": "Непідтримуване вкладення",
+  "prompt.toast.attachmentDuplicate.title": "Цей файл уже завантажено",
  "prompt.toast.pasteUnsupported.description": "Сюди можна прикріплювати лише зображення, PDF або текстові файли.",
  "prompt.toast.modelAgentRequired.title": "Виберіть агента та модель",
  "prompt.toast.modelAgentRequired.description": "Виберіть агента та модель перед надсиланням запиту.",
@@ -316,6 +316,7 @@ export const dict = {
  "prompt.action.send": "发送",
  "prompt.action.stop": "停止",
  "prompt.toast.pasteUnsupported.title": "不支持的附件",
+  "prompt.toast.attachmentDuplicate.title": "此文件已上传",
  "prompt.toast.pasteUnsupported.description": "此处仅能附加图片、PDF 或文本文件。",
  "prompt.toast.modelAgentRequired.title": "请选择智能体和模型",
  "prompt.toast.modelAgentRequired.description": "发送提示前请先选择智能体和模型。",
@@ -297,6 +297,7 @@ export const dict = {
  "prompt.action.stop": "停止",

  "prompt.toast.pasteUnsupported.title": "不支援的附件",
+  "prompt.toast.attachmentDuplicate.title": "此檔案已上傳",
  "prompt.toast.pasteUnsupported.description": "此處僅能附加圖片、PDF 或文字檔案。",
  "prompt.toast.modelAgentRequired.title": "請選擇代理程式和模型",
  "prompt.toast.modelAgentRequired.description": "傳送提示前請先選擇代理程式和模型。",
@@ -360,25 +360,26 @@ function HomeProjectSlot(
    index: () => number
  },
 ) {
-  const project = createMemo(() => props.items.find((item) => item.worktree === props.worktree))
+  const initial = props.items.find((item) => item.worktree === props.worktree)
+  if (!initial) return
+  const project = createMemo<LocalProject>(
+    (previous) => props.items.find((item) => item.worktree === props.worktree) ?? previous,
+    initial,
+  )

  return (
-    <Show when={project()}>
-      {(item) => (
-        <HomeProjectRow
-          {...props}
-          project={item()}
-          server={props.server}
-          index={props.index}
-          serverSelected={props.selection().server === ServerConnection.key(props.server)}
-          selected={
-            props.selection().server === ServerConnection.key(props.server) &&
-            props.selection().directory === props.worktree
-          }
-          unseen={props.unseenCount(props.server, item())}
-        />
-      )}
-    </Show>
+    <HomeProjectRow
+      {...props}
+      project={project()}
+      server={props.server}
+      index={props.index}
+      serverSelected={props.selection().server === ServerConnection.key(props.server)}
+      selected={
+        props.selection().server === ServerConnection.key(props.server) &&
+        props.selection().directory === props.worktree
+      }
+      unseen={props.unseenCount(props.server, project())}
+    />
  )
 }

@@ -481,7 +482,6 @@ function HomeProjectRow(
        class="pr-16 disabled:opacity-60"
        classList={{
          "bg-v2-background-bg-layer-01 text-v2-text-text-base": sortable.isDragSource(),
-          "[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)]": sortable.isDragSource(),
        }}
        data-selected={props.selected ? "" : undefined}
        aria-current={props.selected ? "page" : undefined}
@@ -589,9 +589,9 @@ function HomeProjectNavButton(props: JSX.ButtonHTMLAttributes<HTMLButtonElement>
      class={`
        flex h-7 min-w-0 w-full shrink-0 cursor-default items-center gap-2 rounded-[6px] bg-transparent px-1.5 text-left
        text-v2-text-text-muted [font-weight:440] transition-[background-color,color,box-shadow] duration-[120ms] ease-in-out
-        hover:bg-v2-background-bg-layer-01 hover:text-v2-text-text-base hover:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)]
+        hover:bg-v2-background-bg-layer-01 hover:text-v2-text-text-base
        data-[selected]:bg-v2-background-bg-layer-03 data-[selected]:text-v2-text-text-base
-        data-[selected]:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)] data-[selected]:hover:bg-v2-background-bg-layer-03
+        data-[selected]:hover:bg-v2-background-bg-layer-03
        focus-visible:bg-v2-background-bg-layer-01 focus-visible:text-v2-text-text-base focus-visible:outline-none
        focus-visible:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)]
        ${local.class ?? ""}
@@ -1,5 +1,5 @@
 import type { Session } from "@opencode-ai/sdk/v2/client"
-import { type Accessor, createMemo, For, Show } from "solid-js"
+import { type Accessor, createMemo, For, Show, Suspense } from "solid-js"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
@@ -39,7 +39,6 @@ function isBackgroundOpen(event: MouseEvent) {
 export type HomeSessionsViewProps = {
  language: ReturnType<typeof useLanguage>
  groups: Accessor<HomeSessionGroup[]>
-  loading: Accessor<boolean>
  showProjectName: Accessor<boolean>
  server: Accessor<ServerConnection.Key>
  canCreateSession: Accessor<boolean>
@@ -81,20 +80,22 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
    >
      <div class="sticky top-0 z-30 shrink-0 bg-v2-background-bg-base pb-3 pt-6 lg:pt-12" onWheel={props.onWheel}>
        <HomeSessionSearch {...props} />
-        <Show when={props.groups().length > 0 && props.canCreateSession()}>
-          <div class="pointer-events-none absolute right-0 top-[84px] z-20 flex lg:top-[108px]">
-            <ButtonV2
-              data-action="home-new-session"
-              variant="ghost-muted"
-              size="normal"
-              icon="edit"
-              class="pointer-events-auto h-7 px-2 [font-weight:530]"
-              onClick={props.onCreateSession}
-            >
-              {props.language.t("command.session.new")}
-            </ButtonV2>
-          </div>
-        </Show>
+        <Suspense>
+          <Show when={props.groups().length > 0 && props.canCreateSession()}>
+            <div class="pointer-events-none absolute right-0 top-[84px] z-20 flex lg:top-[108px]">
+              <ButtonV2
+                data-action="home-new-session"
+                variant="ghost-muted"
+                size="normal"
+                icon="edit"
+                class="pointer-events-auto h-7 px-2 [font-weight:530]"
+                onClick={props.onCreateSession}
+              >
+                {props.language.t("command.session.new")}
+              </ButtonV2>
+            </div>
+          </Show>
+        </Suspense>
      </div>
      <div class="pointer-events-none sticky top-[84px] z-40 h-0 -mr-3 lg:top-[108px]">
        <div
@@ -104,8 +105,7 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
        />
      </div>
      <div class="-mr-3 min-h-[calc(100cqh-72px)] lg:min-h-[calc(100cqh-96px)]">
-        <Show
-          when={!props.loading()}
+        <Suspense
          fallback={
            <div class="pt-3">
              <HomeSessionSkeleton label={props.language.t("common.loading")} />
@@ -141,7 +141,7 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
              </For>
            </div>
          </Show>
-        </Show>
+        </Suspense>
      </div>
    </section>
  )
@@ -12,7 +12,6 @@ export function HomeSessions(props: {
    <HomeSessionsView
      language={props.sessions.copy.language}
      groups={props.sessions.data.groups}
-      loading={props.sessions.data.loading}
      showProjectName={props.sessions.session.showProjectName}
      server={props.sessions.session.server}
      canCreateSession={props.sessions.session.canCreate}
@@ -33,8 +33,7 @@ import { createStore, produce, reconcile } from "solid-js/store"
 import { DragDropProvider, DragDropSensors, DragOverlay, SortableProvider, closestCenter } from "@thisbeyond/solid-dnd"
 import type { DragEvent } from "@thisbeyond/solid-dnd"
 import { useProviders } from "@/hooks/use-providers"
-import { toaster } from "@opencode-ai/ui/toast"
-import { setV2Toast, showToast, ToastRegion } from "@/utils/toast"
+import { dismissToast, setV2Toast, showToast, ToastRegion } from "@/utils/toast"
 import { useServerSDK } from "@/context/server-sdk"
 import { normalizeProjectInfo } from "@/context/global-sync/utils"
 import { clearWorkspaceTerminals } from "@/context/terminal"
@@ -384,7 +383,7 @@ export default function LegacyLayout(props: ParentProps) {
      const dismissSessionAlert = (sessionKey: string) => {
        const toastId = toastBySession.get(sessionKey)
        if (toastId === undefined) return
-        toaster.dismiss(toastId)
+        dismissToast(toastId)
        toastBySession.delete(sessionKey)
        alertedAtBySession.delete(sessionKey)
      }
@@ -1459,7 +1458,7 @@ export default function LegacyLayout(props: ParentProps) {
      title: language.t("workspace.resetting.title"),
      description: language.t("workspace.resetting.description"),
    })
-    const dismiss = () => toaster.dismiss(progress)
+    const dismiss = () => dismissToast(progress)

    const sessions = await listAllSessions(serverSDK().api.session, { directory, order: "desc" }).catch(() => [])

@@ -2450,7 +2449,7 @@ function UpdateAvailableToast(props: {

  onCleanup(() => {
    if (toastId === undefined) return
-    toaster.dismiss(toastId)
+    dismissToast(toastId)
  })

  return null
@@ -1,281 +1,49 @@
-import { Show, createEffect, createMemo, createResource, createSignal, onCleanup, untrack } from "solid-js"
-import { createStore } from "solid-js/store"
-import { Portal } from "solid-js/web"
-import { useSearchParams } from "@solidjs/router"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
-import { NewSessionDesignView } from "@/components/session"
-import { PromptInputV2Composer, usePromptInputV2Controller } from "@/components/prompt-input-v2"
-import { StatusPopoverV2 } from "@/components/status-popover"
-import {
-  PromptProjectAddButton,
-  PromptProjectSelector,
-  createPromptProjectController,
-} from "@/components/prompt-project-selector"
-import { useComments } from "@/context/comments"
-import { usePrompt } from "@/context/prompt"
-import { useSDK } from "@/context/sdk"
-import { useSync } from "@/context/sync"
-import { useServerSync } from "@/context/server-sync"
-import { useLanguage } from "@/context/language"
-import { useSettings } from "@/context/settings"
-import { createPromptInputController, createPromptProjectControls } from "@/pages/session/composer"
-import { useSessionKey } from "@/pages/session/session-layout"
-import { useComposerCommands } from "@/pages/session/use-composer-commands"
-import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
-import { PromptGitStatus, PromptWorkspaceSelector } from "@/components/prompt-workspace-selector"
+import { createPromptProjectController } from "@/components/prompt-project-selector"
 import { useTitlebarRightMount } from "@/components/titlebar"
-import { useCommand } from "@/context/command"
-import { useProviders } from "@/hooks/use-providers"
-import { useSettingsCommand } from "@/components/settings-dialog"
-import { Persist, persisted } from "@/utils/persist"
-import createPresence from "solid-presence"
-import { useLocal } from "@/context/local"
-import { createPromptModelSelection } from "@/pages/session/composer/prompt-model-selection"
+import { useSettings } from "@/context/settings"
+import { createEffect, createResource } from "solid-js"
+import { createNewSessionDraftController } from "./new-session/new-session-draft-controller"
+import { NewSessionStatus, NewSessionView } from "./new-session/new-session-view"
+import { createNewSessionWorkspaceController } from "./new-session/new-session-workspace-controller"
+import { useNewSessionCommands } from "./new-session/use-new-session-commands"

-const workspaceBarEnabled = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
-const providerTipDismissalDuration = 30 * 24 * 60 * 60 * 1000
-const providerTipExitDuration = 250
-
-/**
- * The `/new-session` draft page. Unlike `session.tsx`, this only renders the prompt
- * composer for a brand-new session — no terminal, review pane, file tree, or message
- * timeline. Submitting promotes the draft into a real session (see prompt-input/submit).
- */
+/** The draft-only V2 session page. Submitting promotes the draft into a real session. */
 export default function NewSessionPage() {
-  const prompt = usePrompt()
-  const sdk = useSDK()
-  const sync = useSync()
-  const serverSync = useServerSync()
-  const comments = useComments()
-  const language = useLanguage()
  const settings = useSettings()
-  const dialog = useDialog()
-  const command = useCommand()
-  const providers = useProviders(() => sdk().directory)
-  const openProviders = () => {
-    void import("@/components/dialog-connect-provider").then(({ DialogConnectProvider }) => {
-      void dialog.show(() => <DialogConnectProvider directory={() => sdk().directory} />)
-    })
-  }
-  useSettingsCommand()
-  const route = useSessionKey()
-  const [searchParams, setSearchParams] = useSearchParams<{ draftId?: string; prompt?: string }>()
-  const local = useLocal()
-  const model = createPromptModelSelection({ agent: local.agent.current })
-
-  useComposerCommands({ model })
-
-  const inputController = createPromptInputController({
-    sessionKey: route.sessionKey,
-    sessionID: () => route.params.id,
-    queryOptions: serverSync().queryOptions,
-    model,
-  })
-  const projectControls = createPromptProjectControls()
-
-  const [store, setStore] = createStore<{ worktree?: string }>({})
  const rightMount = useTitlebarRightMount()
-
-  const showWorkspaceBar = createMemo(() => workspaceBarEnabled && sync().project?.vcs === "git")
-  const newSessionWorktree = createMemo(() => {
-    if (!showWorkspaceBar()) return "main"
-    if (store.worktree) return store.worktree
-    const project = sync().project
-    if (project && sdk().directory !== project.worktree) return sdk().directory
-    return "main"
+  const workspace = createNewSessionWorkspaceController()
+  const draft = createNewSessionDraftController({
+    worktree: workspace.selection.value,
+    resetWorktree: workspace.selection.reset,
  })
-  const projectRoot = createMemo(() => sync().project?.worktree ?? sdk().directory)
-  const localBranch = createMemo(() => serverSync().child(projectRoot())[0].vcs?.branch)
-  const selectedBranch = createMemo(() => {
-    const worktree = newSessionWorktree()
-    if (worktree === "main" || worktree === "create") return localBranch()
-    return serverSync().child(worktree)[0].vcs?.branch ?? localBranch()
+  const project = createPromptProjectController({
+    controls: draft.project.controls,
+    onDone: draft.input.restoreFocus,
  })
-  const promptInputV2Controller = usePromptInputV2Controller({
-    get controls() {
-      return inputController()
+  useNewSessionCommands({
+    restoreFocus: draft.input.restoreFocus,
+    project: {
+      empty: project.empty,
+      open: () => project.setOpen(true),
    },
-    get newSessionWorktree() {
-      return newSessionWorktree()
-    },
-    onNewSessionWorktreeReset: () => setStore("worktree", undefined),
-    onSubmit: () => comments.clear(),
  })
-  const projectController = createPromptProjectController({
-    controls: projectControls,
-    onDone: promptInputV2Controller.restoreFocus,
-  })
-
-  command.register("new-session", () => [
-    {
-      id: "command.palette",
-      title: language.t("command.palette"),
-      hidden: true,
-      onSelect: async () => {
-        const { DialogSelectFile } = await import("@/components/dialog-select-file")
-        void dialog.show(() => <DialogSelectFile />)
-      },
-    },
-    {
-      id: "input.focus",
-      title: language.t("command.input.focus"),
-      category: language.t("command.category.view"),
-      keybind: "ctrl+l",
-      onSelect: () => promptInputV2Controller.restoreFocus(),
-    },
-  ])
-
  createEffect(() => {
-    if (!prompt.ready()) return
-    untrack(() => {
-      const text = searchParams.prompt
-      if (!text) return
-      prompt.set([{ type: "text", content: text, start: 0, end: text.length }], text.length)
-      setSearchParams({ ...searchParams, prompt: undefined })
-    })
+    if (!draft.prompt.ready()) return
+    draft.input.restoreFocus()
  })
-
-  createEffect(() => {
-    if (!prompt.ready()) return
-    promptInputV2Controller.restoreFocus()
-  })
-
  const ready = Promise.resolve()
  const [suspendUntilPromptReady] = createResource(
-    () => prompt.ready.promise ?? ready,
+    () => draft.prompt.readyPromise() ?? ready,
    (promise) => promise.then(() => true),
  )

  return (
    <div class="relative size-full overflow-hidden flex flex-col">
      {suspendUntilPromptReady()}
-      <Show when={rightMount()}>
-        {(mount) => (
-          <Portal mount={mount()}>
-            <Show when={settings.visibility.status()}>
-              <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
-                <StatusPopoverV2 />
-              </Tooltip>
-            </Show>
-          </Portal>
-        )}
-      </Show>
+      <NewSessionStatus mount={rightMount} visible={settings.visibility.status} />
      <div class="flex-1 min-h-0 flex flex-col gap-2 p-2">
-        <div class="@container relative flex flex-col min-h-0 h-full flex-1">
-          <div class="flex-1 min-h-0 overflow-hidden rounded-[10px]">
-            <NewSessionDesignView>
-              <div class={NEW_SESSION_CONTENT_WIDTH}>
-                <div class="flex flex-col gap-8">
-                  <PromptInputV2Composer controller={promptInputV2Controller} />
-                  <Show when={projectController.empty()}>
-                    <PromptProjectAddButton controller={projectController} />
-                  </Show>
-                  <Show when={projectController.selected()}>
-                    <div class="flex min-h-7 min-w-0 flex-col items-center justify-center gap-0 text-v2-text-text-faint sm:flex-row">
-                      <PromptProjectSelector controller={projectController} placement="bottom" />
-                      <Show
-                        when={showWorkspaceBar()}
-                        fallback={<PromptGitStatus branch={selectedBranch()} noGit={sync().project?.vcs !== "git"} />}
-                      >
-                        <PromptWorkspaceSelector
-                          value={newSessionWorktree()}
-                          projectRoot={projectRoot()}
-                          workspaces={sync().project?.sandboxes ?? []}
-                          branch={selectedBranch()}
-                          onChange={(value) =>
-                            setStore(
-                              "worktree",
-                              value === "main" && sync().project?.worktree !== sdk().directory
-                                ? sync().project?.worktree
-                                : value,
-                            )
-                          }
-                          onDone={promptInputV2Controller.restoreFocus}
-                        />
-                      </Show>
-                    </div>
-                  </Show>
-                </div>
-                {/*</Show>*/}
-              </div>
-            </NewSessionDesignView>
-            <ProviderTip
-              ready={() => serverSync().child(sdk().directory)[0].provider_ready}
-              connected={() => providers.paid().length > 0}
-              openProviders={openProviders}
-            />
-          </div>
-        </div>
+        <NewSessionView input={draft.input} project={project} workspace={workspace} />
      </div>
    </div>
  )
 }
-
-function ProviderTip(props: { ready: () => boolean; connected: () => boolean; openProviders: () => void }) {
-  const language = useLanguage()
-  const [persistedState, setPersistedState, , persistedReady] = persisted(
-    Persist.global("new-session.provider-tip"),
-    createStore({ dismissedAt: 0 }),
-  )
-  const visible = createMemo(
-    () =>
-      props.ready() &&
-      persistedReady() &&
-      !props.connected() &&
-      Date.now() - persistedState.dismissedAt >= providerTipDismissalDuration,
-  )
-
-  function dismiss() {
-    setPersistedState("dismissedAt", Date.now())
-  }
-
-  const [ref, setRef] = createSignal<HTMLDivElement>()
-  const presence = createPresence({
-    show: () => visible(),
-    element: () => ref() ?? null,
-  })
-
-  return (
-    <Show when={presence.present()}>
-      <div class="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center px-10">
-        <div
-          ref={setRef}
-          data-component="provider-tip"
-          data-visible={visible()}
-          class="group/provider-tip pointer-events-auto relative flex h-6 max-w-full items-center transition-[opacity,transform] duration-[250ms] ease-[cubic-bezier(0.215,0.61,0.355,1)] motion-reduce:transition-none"
-          classList={{
-            "data-[visible=false]:animate-out fade-out slide-out-to-bottom-4": true,
-          }}
-        >
-          <button
-            type="button"
-            class="flex h-6 min-w-0 items-center rounded-[4px] pl-1.5 text-[13px] leading-none tracking-[-0.04px] text-v2-text-text-faint transition-[background-color,color] duration-150 ease-in-out hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-text-text-muted focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-text-text-muted focus-visible:outline-none"
-            onClick={props.openProviders}
-          >
-            <span class="truncate">{language.t("home.providerTip")}</span>
-            <span class="flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
-              <IconV2 name="chevron-down" size="small" class="-rotate-90" />
-            </span>
-          </button>
-          <TooltipV2
-            class="hover-reveal absolute left-full top-0 flex h-6 w-7 items-center justify-end delay-0 duration-0 group-hover/provider-tip:delay-[250ms] group-hover/provider-tip:duration-150 group-hover/provider-tip:opacity-100 focus-within:delay-0 focus-within:duration-0 focus-within:opacity-100"
-            placement="top"
-            value={language.t("common.dismiss")}
-          >
-            <button
-              type="button"
-              class="flex size-6 items-center justify-center rounded-[4px] text-v2-icon-icon-muted transition-[background-color,color] duration-150 ease-in-out hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-icon-icon-base focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-icon-icon-base focus-visible:outline-none"
-              aria-label={language.t("common.dismiss")}
-              onClick={dismiss}
-            >
-              <IconV2 name="xmark-small" />
-            </button>
-          </TooltipV2>
-        </div>
-      </div>
-    </Show>
-  )
-}
@@ -0,0 +1,64 @@
+import { useSearchParams } from "@solidjs/router"
+import { createEffect, untrack } from "solid-js"
+import { usePromptInputV2Controller } from "@/components/prompt-input-v2"
+import { useComments } from "@/context/comments"
+import { useLocal } from "@/context/local"
+import { usePrompt } from "@/context/prompt"
+import { useServerSync } from "@/context/server-sync"
+import { createPromptInputController, createPromptProjectControls } from "@/pages/session/composer"
+import { createPromptModelSelection } from "@/pages/session/composer/prompt-model-selection"
+import { useSessionKey } from "@/pages/session/session-layout"
+import { useComposerCommands } from "@/pages/session/use-composer-commands"
+
+export function createNewSessionDraftController(workspace: { worktree: () => string; resetWorktree: () => void }) {
+  const prompt = usePrompt()
+  const serverSync = useServerSync()
+  const comments = useComments()
+  const local = useLocal()
+  const route = useSessionKey()
+  const [searchParams, setSearchParams] = useSearchParams<{ draftId?: string; prompt?: string }>()
+  const model = createPromptModelSelection({ agent: () => local.agent.current() })
+
+  useComposerCommands({ model })
+
+  const controls = createPromptInputController({
+    sessionKey: route.sessionKey,
+    sessionID: () => route.params.id,
+    queryOptions: serverSync().queryOptions,
+    model,
+  })
+  const projectControls = createPromptProjectControls()
+  const input = usePromptInputV2Controller({
+    get controls() {
+      return controls()
+    },
+    get newSessionWorktree() {
+      return workspace.worktree()
+    },
+    onNewSessionWorktreeReset: workspace.resetWorktree,
+    onSubmit: comments.clear,
+  })
+
+  createEffect(() => {
+    if (!prompt.ready()) return
+    untrack(() => {
+      const text = searchParams.prompt
+      if (!text) return
+      prompt.set([{ type: "text", content: text, start: 0, end: text.length }], text.length)
+      setSearchParams({ ...searchParams, prompt: undefined })
+    })
+  })
+
+  return {
+    input,
+    prompt: {
+      ready: prompt.ready,
+      readyPromise: () => prompt.ready.promise,
+    },
+    project: {
+      controls: projectControls,
+    },
+  }
+}
+
+export type NewSessionDraftController = ReturnType<typeof createNewSessionDraftController>
@@ -0,0 +1,162 @@
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { WordmarkV2 } from "@opencode-ai/ui/v2/wordmark-v2"
+import { Show, createMemo, createSignal, type Accessor } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Portal } from "solid-js/web"
+import createPresence from "solid-presence"
+import { PromptInputV2Composer } from "@/components/prompt-input-v2"
+import { PromptGitStatus, PromptWorkspaceSelector } from "@/components/prompt-workspace-selector"
+import {
+  PromptProjectAddButton,
+  PromptProjectSelector,
+  type PromptProjectController,
+} from "@/components/prompt-project-selector"
+import { StatusPopoverV2 } from "@/components/status-popover"
+import { useLanguage } from "@/context/language"
+import { useSDK } from "@/context/sdk"
+import { useServerSync } from "@/context/server-sync"
+import { useProviders } from "@/hooks/use-providers"
+import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
+import { Persist, persisted } from "@/utils/persist"
+import type { NewSessionDraftController } from "./new-session-draft-controller"
+import type { NewSessionWorkspaceController } from "./new-session-workspace-controller"
+
+const providerTipDismissalDuration = 30 * 24 * 60 * 60 * 1000
+
+export function NewSessionView(props: {
+  input: NewSessionDraftController["input"]
+  project: PromptProjectController
+  workspace: NewSessionWorkspaceController
+}) {
+  return (
+    <div class="@container relative flex flex-col min-h-0 h-full flex-1">
+      <div
+        data-component="session-new-design"
+        class="relative flex-1 min-h-0 overflow-hidden rounded-[10px] bg-v2-background-bg-deep"
+      >
+        <div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
+          <div class={NEW_SESSION_CONTENT_WIDTH}>
+            <WordmarkV2 class="h-auto w-full text-v2-background-bg-inverse" />
+            <div class="mt-8 flex flex-col gap-8">
+              <PromptInputV2Composer controller={props.input} />
+              <Show when={props.project.empty()}>
+                <PromptProjectAddButton controller={props.project} />
+              </Show>
+              <Show when={props.project.selected()}>
+                <div class="flex min-h-7 min-w-0 flex-col items-center justify-center gap-0 text-v2-text-text-faint sm:flex-row">
+                  <PromptProjectSelector controller={props.project} placement="bottom" />
+                  <Show
+                    when={props.workspace.bar.visible()}
+                    fallback={
+                      <PromptGitStatus branch={props.workspace.bar.branch()} noGit={!props.workspace.project.git()} />
+                    }
+                  >
+                    <PromptWorkspaceSelector
+                      value={props.workspace.selection.value()}
+                      projectRoot={props.workspace.project.root()}
+                      workspaces={props.workspace.project.workspaces()}
+                      branch={props.workspace.bar.branch()}
+                      onChange={props.workspace.selection.set}
+                      onDone={props.input.restoreFocus}
+                    />
+                  </Show>
+                </div>
+              </Show>
+            </div>
+          </div>
+        </div>
+        <ProviderTip />
+      </div>
+    </div>
+  )
+}
+
+export function NewSessionStatus(props: { mount: Accessor<HTMLElement | null>; visible: Accessor<boolean> }) {
+  const language = useLanguage()
+
+  return (
+    <Show when={props.mount()}>
+      {(mount) => (
+        <Portal mount={mount()}>
+          <Show when={props.visible()}>
+            <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
+              <StatusPopoverV2 />
+            </Tooltip>
+          </Show>
+        </Portal>
+      )}
+    </Show>
+  )
+}
+
+function ProviderTip() {
+  const language = useLanguage()
+  const dialog = useDialog()
+  const sdk = useSDK()
+  const serverSync = useServerSync()
+  const providers = useProviders(() => sdk().directory)
+  const [persistedState, setPersistedState, , persistedReady] = persisted(
+    Persist.global("new-session.provider-tip"),
+    createStore({ dismissedAt: 0 }),
+  )
+  const visible = createMemo(
+    () =>
+      serverSync().child(sdk().directory)[0].provider_ready &&
+      persistedReady() &&
+      providers.paid().length === 0 &&
+      Date.now() - persistedState.dismissedAt >= providerTipDismissalDuration,
+  )
+  const [ref, setRef] = createSignal<HTMLDivElement>()
+  const presence = createPresence({
+    show: visible,
+    element: () => ref() ?? null,
+  })
+  const openProviders = () => {
+    void import("@/components/dialog-connect-provider").then(({ DialogConnectProvider }) => {
+      void dialog.show(() => <DialogConnectProvider directory={() => sdk().directory} />)
+    })
+  }
+
+  return (
+    <Show when={presence.present()}>
+      <div class="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center px-10">
+        <div
+          ref={setRef}
+          data-component="provider-tip"
+          data-visible={visible()}
+          class="group/provider-tip pointer-events-auto relative flex h-6 max-w-full items-center transition-[opacity,transform] duration-[250ms] ease-[cubic-bezier(0.215,0.61,0.355,1)] motion-reduce:transition-none"
+          classList={{ "data-[visible=false]:animate-out fade-out slide-out-to-bottom-4": true }}
+        >
+          <button
+            type="button"
+            class="flex h-6 min-w-0 items-center rounded-[4px] pl-1.5 text-[13px] leading-none tracking-[-0.04px] text-v2-text-text-faint transition-[background-color,color] duration-150 ease-in-out hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-text-text-muted focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-text-text-muted focus-visible:outline-none"
+            onClick={openProviders}
+          >
+            <span class="truncate">{language.t("home.providerTip")}</span>
+            <span class="flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
+              <IconV2 name="chevron-down" size="small" class="-rotate-90" />
+            </span>
+          </button>
+          <TooltipV2
+            class="hover-reveal absolute left-full top-0 flex h-6 w-7 items-center justify-end delay-0 duration-0 group-hover/provider-tip:delay-[250ms] group-hover/provider-tip:duration-150 group-hover/provider-tip:opacity-100 focus-within:delay-0 focus-within:duration-0 focus-within:opacity-100"
+            placement="top"
+            openDelay={1000}
+            value={language.t("common.dismiss")}
+          >
+            <button
+              type="button"
+              class="flex size-6 items-center justify-center rounded-[4px] text-v2-icon-icon-muted transition-[background-color,color] duration-150 ease-in-out hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-icon-icon-base focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-icon-icon-base focus-visible:outline-none"
+              aria-label={language.t("common.dismiss")}
+              onClick={() => setPersistedState("dismissedAt", Date.now())}
+            >
+              <IconV2 name="xmark-small" />
+            </button>
+          </TooltipV2>
+        </div>
+      </div>
+    </Show>
+  )
+}
@@ -0,0 +1,43 @@
+import { describe, expect, test } from "bun:test"
+import {
+  normalizeNewSessionWorktree,
+  resolveNewSessionBranch,
+  resolveNewSessionWorktree,
+} from "./new-session-workspace-controller"
+
+describe("new session workspace selection", () => {
+  test("uses main when the workspace bar is unavailable", () => {
+    expect(
+      resolveNewSessionWorktree({
+        enabled: false,
+        selected: "/project/feature",
+        directory: "/project/feature",
+        projectWorktree: "/project",
+      }),
+    ).toBe("main")
+  })
+
+  test("derives an existing worktree from the current directory", () => {
+    expect(
+      resolveNewSessionWorktree({ enabled: true, directory: "/project/feature", projectWorktree: "/project" }),
+    ).toBe("/project/feature")
+    expect(resolveNewSessionWorktree({ enabled: true, directory: "/project", projectWorktree: "/project" })).toBe(
+      "main",
+    )
+  })
+
+  test("normalizes main to the project root outside the main worktree", () => {
+    expect(normalizeNewSessionWorktree("main", "/project/feature", "/project")).toBe("/project")
+    expect(normalizeNewSessionWorktree("main", "/project", "/project")).toBe("main")
+  })
+
+  test("falls back to the local branch for main, create, and unknown worktrees", () => {
+    const branch = (worktree: string) => (worktree === "/project/feature" ? "feature" : undefined)
+    expect(resolveNewSessionBranch({ worktree: "main", local: "dev", worktreeBranch: branch })).toBe("dev")
+    expect(resolveNewSessionBranch({ worktree: "create", local: "dev", worktreeBranch: branch })).toBe("dev")
+    expect(resolveNewSessionBranch({ worktree: "/project/feature", local: "dev", worktreeBranch: branch })).toBe(
+      "feature",
+    )
+    expect(resolveNewSessionBranch({ worktree: "/missing", local: "dev", worktreeBranch: branch })).toBe("dev")
+  })
+})
@@ -0,0 +1,77 @@
+import { createMemo, createSignal } from "solid-js"
+import { useSDK } from "@/context/sdk"
+import { useServerSync } from "@/context/server-sync"
+import { useSync } from "@/context/sync"
+
+const workspaceBarEnabled = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
+
+export function resolveNewSessionWorktree(input: {
+  enabled: boolean
+  selected?: string
+  directory: string
+  projectWorktree?: string
+}) {
+  if (!input.enabled) return "main"
+  if (input.selected) return input.selected
+  if (input.projectWorktree && input.directory !== input.projectWorktree) return input.directory
+  return "main"
+}
+
+export function normalizeNewSessionWorktree(value: string, directory: string, projectWorktree?: string) {
+  if (value === "main" && projectWorktree !== directory) return projectWorktree
+  return value
+}
+
+export function resolveNewSessionBranch(input: {
+  worktree: string
+  local?: string
+  worktreeBranch: (worktree: string) => string | undefined
+}) {
+  if (input.worktree === "main" || input.worktree === "create") return input.local
+  return input.worktreeBranch(input.worktree) ?? input.local
+}
+
+export function createNewSessionWorkspaceController() {
+  const sdk = useSDK()
+  const sync = useSync()
+  const serverSync = useServerSync()
+  const [worktree, setWorktree] = createSignal<string>()
+  const visible = createMemo(() => workspaceBarEnabled && sync().project?.vcs === "git")
+  const value = createMemo(() =>
+    resolveNewSessionWorktree({
+      enabled: visible(),
+      selected: worktree(),
+      directory: sdk().directory,
+      projectWorktree: sync().project?.worktree,
+    }),
+  )
+  const projectRoot = createMemo(() => sync().project?.worktree ?? sdk().directory)
+  const localBranch = createMemo(() => serverSync().child(projectRoot())[0].vcs?.branch)
+  const branch = createMemo(() =>
+    resolveNewSessionBranch({
+      worktree: value(),
+      local: localBranch(),
+      worktreeBranch: (worktree) => serverSync().child(worktree)[0].vcs?.branch,
+    }),
+  )
+
+  return {
+    selection: {
+      value,
+      reset: () => setWorktree(),
+      set: (worktree: string) =>
+        setWorktree(normalizeNewSessionWorktree(worktree, sdk().directory, sync().project?.worktree)),
+    },
+    project: {
+      root: projectRoot,
+      workspaces: () => sync().project?.sandboxes ?? [],
+      git: () => sync().project?.vcs === "git",
+    },
+    bar: {
+      visible,
+      branch,
+    },
+  }
+}
+
+export type NewSessionWorkspaceController = ReturnType<typeof createNewSessionWorkspaceController>
@@ -0,0 +1,44 @@
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useSettingsCommand } from "@/components/settings-dialog"
+import { useCommand } from "@/context/command"
+import { useLanguage } from "@/context/language"
+
+export function useNewSessionCommands(input: {
+  restoreFocus: () => void
+  project: {
+    empty: () => boolean
+    open: () => void
+  }
+}) {
+  const command = useCommand()
+  const dialog = useDialog()
+  const language = useLanguage()
+
+  useSettingsCommand()
+  command.register("new-session", () => [
+    {
+      id: "command.palette",
+      title: language.t("command.palette"),
+      hidden: true,
+      onSelect: async () => {
+        const { DialogSelectFile } = await import("@/components/dialog-select-file")
+        void dialog.show(() => <DialogSelectFile />)
+      },
+    },
+    {
+      id: "input.focus",
+      title: language.t("command.input.focus"),
+      category: language.t("command.category.view"),
+      keybind: "ctrl+l",
+      onSelect: input.restoreFocus,
+    },
+    {
+      id: "project.select",
+      title: language.t("session.new.project.search"),
+      category: language.t("command.category.project"),
+      keybind: "mod+shift+o",
+      disabled: input.project.empty(),
+      onSelect: input.project.open,
+    },
+  ])
+}
@@ -6,6 +6,7 @@ import {
  batch,
  ErrorBoundary,
  onCleanup,
+  Suspense,
  Show,
  Match,
  Switch,
@@ -2217,6 +2218,10 @@ export default function Page() {
                        comments.clear()
                        resumeScroll()
                      },
+                      get edit() {
+                        return editingFollowup()
+                      },
+                      onEditLoaded: clearFollowupEdit,
                      shouldQueue: queueEnabled,
                      onQueue: queueFollowup,
                      onAbort: () => {
@@ -2225,14 +2230,7 @@ export default function Page() {
                        setFollowup("paused", id, true)
                      },
                    })
-                    return (
-                      <PromptInputV2Composer
-                        controller={controller}
-                        borderUnderlay
-                        edit={editingFollowup()}
-                        onEditLoaded={clearFollowupEdit}
-                      />
-                    )
+                    return <PromptInputV2Composer controller={controller} borderUnderlay />
                  }}
                </Show>
              }
@@ -2300,49 +2298,53 @@ export default function Page() {
        </div>

        <Show when={!newSessionDesign() && desktopSidePanelOpen()}>
-          <SessionSidePanel
-            canReview={canReview}
-            diffs={reviewDiffs}
-            diffsReady={reviewReady}
-            empty={reviewEmptyText}
-            hasReview={hasReview}
-            reviewHasFocusableContent={hasReview}
-            reviewCount={reviewCount}
-            reviewPanel={reviewPanel}
-            activeDiff={activeReviewFile()}
-            focusReviewDiff={focusReviewDiff}
-            reviewSnap={ui.reviewSnap}
-            size={size}
-          />
+          <Suspense>
+            <SessionSidePanel
+              canReview={canReview}
+              diffs={reviewDiffs}
+              diffsReady={reviewReady}
+              empty={reviewEmptyText}
+              hasReview={hasReview}
+              reviewHasFocusableContent={hasReview}
+              reviewCount={reviewCount}
+              reviewPanel={reviewPanel}
+              activeDiff={activeReviewFile()}
+              focusReviewDiff={focusReviewDiff}
+              reviewSnap={ui.reviewSnap}
+              size={size}
+            />
+          </Suspense>
        </Show>
        <Show when={newSessionDesign()}>
          <Show when={isDesktop() ? desktopV2PanelLayout().visible : terminalOpen()}>
            <div class="min-w-0 h-full flex flex-1 flex-col">
              <Show when={isDesktop() && (desktopV2ReviewOpen() || desktopFileTreeOpen())}>
                <div class="min-h-0 flex-1">
-                  <SessionSidePanel
-                    canReview={canReview}
-                    diffs={reviewDiffs}
-                    diffsReady={reviewReady}
-                    empty={reviewEmptyText}
-                    hasReview={hasReview}
-                    reviewHasFocusableContent={() => hasReview() || reviewV2State.sidebarOpened()}
-                    reviewCount={reviewCount}
-                    reviewPanel={reviewPanelV2}
-                    reviewSidebarToggle={(disabled) => (
-                      <SessionReviewV2SidebarToggle
-                        opened={reviewV2State.sidebarOpened()}
-                        disabled={disabled}
-                        onToggle={reviewV2State.toggleSidebar}
-                      />
-                    )}
-                    fileBrowserState={reviewV2State}
-                    activeDiff={activeReviewFile()}
-                    focusReviewDiff={focusReviewDiff}
-                    reviewSnap={ui.reviewSnap}
-                    size={size}
-                    stacked={desktopV2PanelLayout().stacked}
-                  />
+                  <Suspense>
+                    <SessionSidePanel
+                      canReview={canReview}
+                      diffs={reviewDiffs}
+                      diffsReady={reviewReady}
+                      empty={reviewEmptyText}
+                      hasReview={hasReview}
+                      reviewHasFocusableContent={() => hasReview() || reviewV2State.sidebarOpened()}
+                      reviewCount={reviewCount}
+                      reviewPanel={reviewPanelV2}
+                      reviewSidebarToggle={(disabled) => (
+                        <SessionReviewV2SidebarToggle
+                          opened={reviewV2State.sidebarOpened()}
+                          disabled={disabled}
+                          onToggle={reviewV2State.toggleSidebar}
+                        />
+                      )}
+                      fileBrowserState={reviewV2State}
+                      activeDiff={activeReviewFile()}
+                      focusReviewDiff={focusReviewDiff}
+                      reviewSnap={ui.reviewSnap}
+                      size={size}
+                      stacked={desktopV2PanelLayout().stacked}
+                    />
+                  </Suspense>
                </div>
              </Show>
              <Show when={desktopV2PanelLayout().stacked}>
@@ -0,0 +1,30 @@
+/** Coordinates focus restoration and actions that must run after menu content unmounts. */
+export function createMenuDismissController(content: () => HTMLElement | undefined) {
+  let restoreTrigger = true
+
+  return {
+    /** Allows the menu primitive to restore focus to its trigger when closing. */
+    allowTriggerRestore() {
+      restoreTrigger = true
+    },
+    /** Keeps focus at its current or next destination instead of returning it to the trigger. */
+    preventTriggerRestore() {
+      restoreTrigger = false
+    },
+    /** Applies the current restoration policy during the menu primitive's close-focus event. */
+    onCloseAutoFocus(event: Event) {
+      if (!restoreTrigger) event.preventDefault()
+    },
+    /** Runs an action after the menu unmounts and its focus-close work has settled. */
+    afterClose(callback: () => void) {
+      const complete = () => {
+        if (content()?.isConnected) {
+          requestAnimationFrame(complete)
+          return
+        }
+        requestAnimationFrame(() => requestAnimationFrame(callback))
+      }
+      requestAnimationFrame(complete)
+    },
+  }
+}
@@ -1,6 +1,12 @@
 import { Icon, type IconProps } from "@opencode-ai/ui/icon"
-import { Toast, showToast as showLegacyToast, type ToastOptions, type ToastVariant } from "@opencode-ai/ui/toast"
-import { ToastV2, showToastV2 } from "@opencode-ai/ui/v2/toast-v2"
+import {
+  Toast,
+  showToast as showLegacyToast,
+  toaster as legacyToaster,
+  type ToastOptions,
+  type ToastVariant,
+} from "@opencode-ai/ui/toast"
+import { ToastV2, showToastV2, toasterV2 } from "@opencode-ai/ui/v2/toast-v2"

 let v2 = false

@@ -27,6 +33,13 @@ export function showToast(options: ToastOptions | string) {
  })
 }

+// v1 and v2 ids come from separate registries, so dismissal has to use the same
+// implementation that issued the id.
+export function dismissToast(toastId: number) {
+  if (!v2) return legacyToaster.dismiss(toastId)
+  return toasterV2.dismiss(toastId)
+}
+
 function resolveIcon(icon: IconProps["name"] | undefined, variant: ToastVariant | undefined) {
  const name = icon ?? (variant === "success" ? "check" : undefined)
  if (!name) return
@@ -1,7 +1,10 @@
 import { describe, expect, test } from "bun:test"
 import { createRoot } from "solid-js"
+import { createStore } from "solid-js/store"
 import { createPromptAttachmentsCore } from "@/components/prompt-input/attachments"
 import { createPromptState } from "@/context/prompt"
+import { createPromptInputV2Attachments } from "../../session-ui/src/v2/components/prompt-input/attachments"
+import type { PromptInputV2Prompt } from "../../session-ui/src/v2/components/prompt-input/types"

 describe("prompt attachment session ownership", () => {
  test("adds an asynchronously read image to the session where the read started", async () => {
@@ -85,6 +88,88 @@ describe("prompt attachment session ownership", () => {
  })
 })

+test("rejects a duplicate native clipboard attachment in the V2 prompt store", async () => {
+  await createRoot(async (dispose) => {
+    const [state, setState] = createStore({ prompt: [] as PromptInputV2Prompt })
+    const duplicate = Promise.withResolvers<void>()
+    const files = [
+      new File(["hello"], "clipboard-1.txt", { type: "text/plain" }),
+      new File(["hello"], "clipboard-2.txt", { type: "text/plain" }),
+    ]
+    const attachments = createPromptInputV2Attachments({
+      capture: () => ({
+        current: () => state.prompt,
+        cursor: () => 0,
+        set: (prompt) => setState("prompt", prompt),
+      }),
+      editor: () => document.createElement("div"),
+      focusEditor: () => undefined,
+      addPart: () => false,
+      setDraggingType: () => undefined,
+      directory: () => "/",
+      isDialogActive: () => false,
+      warn: () => undefined,
+      duplicate: duplicate.resolve,
+      onError: () => undefined,
+      readClipboardImage: async () => files.shift() ?? null,
+    })
+    const event = {
+      clipboardData: { items: [], getData: () => "" },
+      preventDefault: () => undefined,
+      stopPropagation: () => undefined,
+    } as unknown as ClipboardEvent
+
+    await attachments.handlePaste(event)
+    await attachments.handlePaste(event)
+    await duplicate.promise
+
+    expect(state.prompt).toHaveLength(1)
+    dispose()
+  })
+})
+
+test("rejects desktop duplicates and keeps changed files in the V2 prompt store", async () => {
+  await createRoot(async (dispose) => {
+    const [state, setState] = createStore({ prompt: [] as PromptInputV2Prompt })
+    const duplicates: string[] = []
+    const attachments = createPromptInputV2Attachments({
+      capture: () => ({
+        current: () => state.prompt,
+        cursor: () => 0,
+        set: (prompt) => setState("prompt", prompt),
+      }),
+      editor: () => document.createElement("div"),
+      focusEditor: () => undefined,
+      addPart: () => false,
+      setDraggingType: () => undefined,
+      directory: () => "/",
+      isDialogActive: () => false,
+      warn: () => undefined,
+      duplicate: () => duplicates.push("duplicate"),
+      onError: () => undefined,
+      getPathForFile: (file) => (file.name === "browser.txt" ? "" : `/tmp/${file.name}`),
+    })
+    const first = new File(["first"], "a.txt", { type: "text/plain" })
+    const second = new File(["second"], "b.txt", { type: "text/plain" })
+
+    await attachments.addAttachments([first, second])
+    await attachments.addAttachments([first, second])
+    expect(state.prompt).toHaveLength(2)
+    expect(duplicates).toEqual(["duplicate", "duplicate"])
+
+    await attachments.addAttachments([new File(["edited"], "a.txt", { type: "text/plain" })])
+    expect(state.prompt).toHaveLength(3)
+
+    await attachments.addAttachments([
+      new File(["same"], "browser.txt", { type: "text/plain" }),
+      new File(["same"], "browser.txt", { type: "text/plain" }),
+    ])
+    expect(state.prompt).toHaveLength(4)
+    expect(duplicates).toHaveLength(3)
+    dispose()
+  })
+})
+
 function images(prompt: ReturnType<typeof createPromptState>) {
  return prompt.current().filter((part) => part.type === "image")
 }
@@ -0,0 +1,107 @@
+import { describe, expect, test } from "bun:test"
+import { createRoot } from "solid-js"
+import { createKeybindSettingsController } from "../src/components/settings-keybinds"
+
+function setup(overrides: Record<string, string> = {}) {
+  const changes: [string, string][] = []
+  const suppression: boolean[] = []
+  const notifications: { title: string; description?: string }[] = []
+  let resets = 0
+  let controller: ReturnType<typeof createKeybindSettingsController>
+
+  const dispose = createRoot((dispose) => {
+    controller = createKeybindSettingsController(
+      {
+        command: {
+          catalog: [
+            { id: "session.alpha", title: "Alpha", keybind: "mod+a" },
+            { id: "session.beta", title: "Beta", keybind: "mod+b" },
+          ],
+          options: [],
+          keybinds: (enabled) => suppression.push(enabled),
+        },
+        settings: {
+          current: { keybinds: overrides },
+          keybinds: {
+            get: (id) => overrides[id],
+            set: (id, value) => {
+              overrides[id] = value
+              changes.push([id, value])
+            },
+            resetAll: () => {
+              resets++
+            },
+          },
+        },
+        notify: (toast) => notifications.push(toast),
+      },
+      {
+        locale: () => "en",
+        t: (key, params) => {
+          if (params) return `${key}:${Object.values(params).join("|")}`
+          if (key === "common.key.alt") return "Alt"
+          return String(key)
+        },
+      },
+    )
+    return dispose
+  })
+
+  return {
+    controller: controller!,
+    changes,
+    suppression,
+    notifications,
+    resets: () => resets,
+    dispose,
+  }
+}
+
+function modKey(key: string) {
+  const mac = /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
+  return new KeyboardEvent("keydown", { key, ctrlKey: !mac, metaKey: mac, bubbles: true, cancelable: true })
+}
+
+describe("keybind settings controller", () => {
+  test("derives the catalog, effective bindings, and filtered groups", () => {
+    const state = setup({ "session.beta": "alt+k" })
+
+    expect(state.controller.catalog.title("session.alpha")).toBe("Alpha")
+    expect(state.controller.catalog.keybind("session.beta")).toBe("Alt+K")
+    expect(state.controller.catalog.filtered("alt k").get("Session")).toEqual(["session.beta"])
+    expect(state.controller.settings.hasOverrides()).toBe(true)
+
+    state.dispose()
+  })
+
+  test("captures bindings, rejects conflicts, and restores command handling", () => {
+    const state = setup()
+
+    state.controller.capture.toggle("session.beta")
+    document.dispatchEvent(modKey("a"))
+    expect(state.changes).toEqual([])
+    expect(state.notifications).toHaveLength(1)
+    expect(state.controller.capture.active()).toBe("session.beta")
+
+    document.dispatchEvent(modKey("x"))
+    expect(state.changes).toEqual([["session.beta", "mod+x"]])
+    expect(state.suppression).toEqual([false, true])
+    expect(state.controller.capture.active()).toBeNull()
+
+    state.controller.capture.toggle("session.alpha")
+    state.dispose()
+    expect(state.suppression).toEqual([false, true, false, true])
+    document.dispatchEvent(modKey("z"))
+    expect(state.changes).toEqual([["session.beta", "mod+x"]])
+  })
+
+  test("resets persisted overrides and reports success", () => {
+    const state = setup({ "session.alpha": "none" })
+
+    state.controller.settings.reset()
+    expect(state.resets()).toBe(1)
+    expect(state.notifications[0]?.title).toBe("settings.shortcuts.reset.toast.title")
+
+    state.dispose()
+  })
+})
@@ -0,0 +1,64 @@
+import { expect, test } from "bun:test"
+import { MetaProvider, Title } from "@solidjs/meta"
+import { MemoryRouter, Route, createMemoryHistory, useParams } from "@solidjs/router"
+import { createMemo } from "solid-js"
+import { createComponent, render } from "solid-js/web"
+
+test("route cleanup cannot invalidate an owner list being disposed", async () => {
+  const host = document.createElement("div")
+  document.body.append(host)
+  const history = createMemoryHistory()
+
+  const RepoPage = () => {
+    const params = useParams<{ id?: string }>()
+    const title = createMemo(() => params.id ?? "")
+    const button = document.createElement("button")
+    button.textContent = "Back"
+    button.addEventListener("click", () => history.set({ value: "/", scroll: false, replace: false }))
+    return [
+      createComponent(Title, {
+        get children() {
+          return title()
+        },
+      }),
+      button,
+    ]
+  }
+
+  const HomePage = () => {
+    const button = document.createElement("button")
+    button.textContent = "Go"
+    button.addEventListener("click", () => history.set({ value: "/project", scroll: false, replace: false }))
+    return button
+  }
+
+  const App = () =>
+    createComponent(MetaProvider, {
+      get children() {
+        return createComponent(MemoryRouter, {
+          history,
+          get children() {
+            return [
+              createComponent(Route, { path: "/", component: HomePage }),
+              createComponent(Route, { path: "/:id", component: RepoPage }),
+            ]
+          },
+        })
+      },
+    })
+
+  const dispose = render(() => createComponent(App, {}), host)
+  const go = host.querySelector("button")
+  expect(go?.textContent).toBe("Go")
+  go?.click()
+  await new Promise((resolve) => setTimeout(resolve, 0))
+
+  const back = host.querySelector("button")
+  expect(back?.textContent).toBe("Back")
+  back?.click()
+  await new Promise((resolve) => setTimeout(resolve, 0))
+
+  expect(host.querySelector("button")?.textContent).toBe("Go")
+  dispose()
+  host.remove()
+})
@@ -1,8 +1,46 @@
-import { describe, expect, test } from "bun:test"
+import { beforeEach, describe, expect, test } from "bun:test"
 import { createSignal, type JSX } from "solid-js"
 import { showToastV2, toasterV2 } from "@opencode-ai/ui/v2/toast-v2"

 describe("showToastV2", () => {
+  // The toast registry is module state, so each test starts from an empty stack.
+  beforeEach(() => {
+    toasterV2.dismiss()
+  })
+
+  test("coalesces exact active content", () => {
+    const first = showToastV2({ title: "Repeated error", description: "Try again" })
+    const second = showToastV2({ title: "Repeated error", description: "Try again" })
+    const different = showToastV2({ title: "Repeated error", description: "A different error" })
+
+    expect(second).toBe(first)
+    expect(different).not.toBe(first)
+
+    toasterV2.dismiss(first)
+    toasterV2.dismiss(different)
+  })
+
+  test("allows dismissed content to appear again", () => {
+    const first = showToastV2("Dismiss and retry")
+    toasterV2.dismiss(first)
+
+    const second = showToastV2("Dismiss and retry")
+    expect(second).not.toBe(first)
+
+    toasterV2.dismiss(second)
+  })
+
+  test("recreates matching content when it is not the topmost toast", () => {
+    const first = showToastV2("First toast")
+    const topmost = showToastV2("Topmost toast")
+    const repeated = showToastV2("First toast")
+
+    expect(repeated).not.toBe(first)
+
+    toasterV2.dismiss(topmost)
+    toasterV2.dismiss(repeated)
+  })
+
  test("creates no reactive computations at call time", () => {
    const [tick, setTick] = createSignal(0)
    let reads = 0
@@ -1,7 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/cli",
-  "version": "1.18.6",
+  "version": "1.18.9",
  "type": "module",
  "license": "MIT",
  "bin": {
@@ -1,7 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/codemode",
-  "version": "1.18.6",
+  "version": "1.18.9",
  "description": "Effect-native confined code execution over schema-described tools",
  "private": true,
  "type": "module",
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-app",
-  "version": "1.18.6",
+  "version": "1.18.9",
  "type": "module",
  "license": "MIT",
  "scripts": {
@@ -376,7 +376,6 @@
      align-items: center;
      gap: 16px;
      opacity: 0;
-      transition: opacity 0.2s ease;

      @media (max-width: 40rem) {
        position: static;
@@ -0,0 +1,40 @@
+import type { Stripe } from "stripe"
+
+export function liteCheckoutSubscriptionToProvision(
+  type: "checkout.session.completed" | "checkout.session.async_payment_succeeded",
+  session: Pick<Stripe.Checkout.Session, "mode" | "payment_status" | "subscription">,
+) {
+  if (session.mode !== "subscription") return
+  if (typeof session.subscription !== "string") return
+  if (type === "checkout.session.completed" && session.payment_status === "unpaid") return
+  return session.subscription
+}
+
+export function liteSubscriptionProvisioningData(
+  subscription: Pick<
+    Stripe.Subscription,
+    "id" | "status" | "customer" | "default_payment_method" | "metadata"
+  >,
+) {
+  if (subscription.metadata.type !== "lite") return
+  if (subscription.status !== "active" && subscription.status !== "trialing") return
+  if (typeof subscription.customer !== "string") throw new Error("Customer ID not found")
+
+  const workspaceID = subscription.metadata.workspaceID
+  const userID = subscription.metadata.userID
+  if (!workspaceID) throw new Error("Workspace ID not found")
+  if (!userID) throw new Error("User ID not found")
+
+  return {
+    subscriptionID: subscription.id,
+    customerID: subscription.customer,
+    workspaceID,
+    userID,
+    userEmail: subscription.metadata.userEmail || undefined,
+    coupon: subscription.metadata.coupon || undefined,
+    paymentMethodID:
+      typeof subscription.default_payment_method === "string"
+        ? subscription.default_payment_method
+        : subscription.default_payment_method?.id,
+  }
+}
@@ -10,6 +10,10 @@ import { Resource } from "@opencode-ai/console-resource"
 import { LiteData } from "@opencode-ai/console-core/lite.js"
 import { BlackData } from "@opencode-ai/console-core/black.js"
 import { Referral } from "@opencode-ai/console-core/referral.js"
+import {
+  liteCheckoutSubscriptionToProvision,
+  liteSubscriptionProvisioningData,
+} from "./lite-subscription.js"

 export async function POST(input: APIEvent) {
  const body = await Billing.stripe().webhooks.constructEventAsync(
@@ -20,6 +24,10 @@ export async function POST(input: APIEvent) {
  console.log(body.type, JSON.stringify(body, null, 2))

  return (async () => {
+    if (body.type === "checkout.session.completed" || body.type === "checkout.session.async_payment_succeeded") {
+      const subscriptionID = liteCheckoutSubscriptionToProvision(body.type, body.data.object)
+      if (subscriptionID) await provisionLiteSubscription(subscriptionID)
+    }
    if (body.type === "customer.updated") {
      // check default payment method changed
      const prevInvoiceSettings = body.data.previous_attributes?.invoice_settings ?? {}
@@ -105,85 +113,6 @@ export async function POST(input: APIEvent) {
        })
      })
    }
-    if (body.type === "customer.subscription.created") {
-      const type = body.data.object.metadata?.type
-      if (type === "lite") {
-        const workspaceID = body.data.object.metadata?.workspaceID
-        const userID = body.data.object.metadata?.userID
-        const userEmail = body.data.object.metadata?.userEmail
-        const coupon = body.data.object.metadata?.coupon
-        const customerID = body.data.object.customer as string
-        const invoiceID = body.data.object.latest_invoice as string
-        const subscriptionID = body.data.object.id as string
-        const paymentMethodID = body.data.object.default_payment_method as string
-
-        if (!workspaceID) throw new Error("Workspace ID not found")
-        if (!userID) throw new Error("User ID not found")
-        if (!customerID) throw new Error("Customer ID not found")
-        if (!invoiceID) throw new Error("Invoice ID not found")
-        if (!subscriptionID) throw new Error("Subscription ID not found")
-        if (!paymentMethodID) throw new Error("Payment method ID not found")
-
-        // get payment method for the payment intent
-        const paymentMethod = await Billing.stripe().paymentMethods.retrieve(paymentMethodID)
-        await Actor.provide("system", { workspaceID }, async () => {
-          // look up current billing
-          const billing = await Billing.get()
-          if (!billing) throw new Error(`Workspace with ID ${workspaceID} not found`)
-          if (billing.customerID && billing.customerID !== customerID) throw new Error("Customer ID mismatch")
-
-          // set customer metadata
-          if (!billing?.customerID) {
-            await Billing.stripe().customers.update(customerID, {
-              metadata: {
-                workspaceID,
-              },
-            })
-          }
-
-          await Database.transaction(async (tx) => {
-            await tx
-              .update(BillingTable)
-              .set({
-                customerID,
-                liteSubscriptionID: subscriptionID,
-                lite: {},
-                paymentMethodID: paymentMethod.id,
-                paymentMethodLast4: paymentMethod.card?.last4 ?? null,
-                paymentMethodType: paymentMethod.type,
-              })
-              .where(eq(BillingTable.workspaceID, workspaceID))
-
-            await tx.insert(LiteTable).values({
-              workspaceID,
-              id: Identifier.create("lite"),
-              userID: userID,
-            })
-
-            if (userEmail) {
-              if (coupon === LiteData.firstMonth50Coupon) {
-                await Billing.redeemCoupon(userEmail, "GO1MONTH50")
-              } else if (coupon === LiteData.firstMonth100Coupon) {
-                await Billing.redeemCoupon(userEmail, "GOFREEMONTH")
-              } else if (coupon === LiteData.threeMonths100Coupon) {
-                await Billing.redeemCoupon(userEmail, "GO3MONTHS100")
-              } else if (coupon === LiteData.sixMonths100Coupon) {
-                await Billing.redeemCoupon(userEmail, "GO6MONTHS100")
-              } else if (coupon === LiteData.twelveMonths100Coupon) {
-                await Billing.redeemCoupon(userEmail, "GO12MONTHS100")
-              }
-            }
-          })
-
-          await Referral.completeFromLiteSubscription({
-            workspaceID,
-            userID,
-          }).catch((error) => {
-            console.error("Referral sync failed", error)
-          })
-        })
-      }
-    }
    if (body.type === "customer.subscription.updated" && body.data.object.status === "incomplete_expired") {
      const subscriptionID = body.data.object.id
      if (!subscriptionID) throw new Error("Subscription ID not found")
@@ -221,6 +150,10 @@ export async function POST(input: APIEvent) {
        if (!invoiceID) throw new Error("Invoice ID not found")
        if (!subscriptionID) throw new Error("Subscription ID not found")

+        if (body.data.object.billing_reason === "subscription_create" && productID === LiteData.productID()) {
+          await provisionLiteSubscription(subscriptionID)
+        }
+
        // get coupon id from subscription
        const invoice = await Billing.stripe().invoices.retrieve(invoiceID, {
          expand: ["discounts", "payments"],
@@ -378,3 +311,92 @@ export async function POST(input: APIEvent) {
      return Response.json({ message: error.message }, { status: 500 })
    })
 }
+
+async function provisionLiteSubscription(subscriptionID: string) {
+  const stripe = Billing.stripe()
+  const subscription = liteSubscriptionProvisioningData(await stripe.subscriptions.retrieve(subscriptionID))
+  if (!subscription) return
+
+  await Actor.provide("system", { workspaceID: subscription.workspaceID }, async () => {
+    const billing = await Billing.get()
+    if (!billing) throw new Error(`Workspace with ID ${subscription.workspaceID} not found`)
+    if (billing.customerID && billing.customerID !== subscription.customerID) throw new Error("Customer ID mismatch")
+    if (billing.liteSubscriptionID === subscription.subscriptionID) return
+
+    const paymentMethod = subscription.paymentMethodID
+      ? await stripe.paymentMethods.retrieve(subscription.paymentMethodID)
+      : undefined
+
+    if (!billing.customerID) {
+      await stripe.customers.update(subscription.customerID, {
+        metadata: {
+          workspaceID: subscription.workspaceID,
+        },
+      })
+    }
+
+    const provisioned = await Database.transaction(async (tx) => {
+      const current = await tx
+        .select({
+          customerID: BillingTable.customerID,
+          liteSubscriptionID: BillingTable.liteSubscriptionID,
+        })
+        .from(BillingTable)
+        .where(eq(BillingTable.workspaceID, subscription.workspaceID))
+        .for("update")
+        .then((rows) => rows[0])
+      if (!current) throw new Error(`Workspace with ID ${subscription.workspaceID} not found`)
+      if (current.customerID && current.customerID !== subscription.customerID) throw new Error("Customer ID mismatch")
+      if (current.liteSubscriptionID === subscription.subscriptionID) return false
+      if (current.liteSubscriptionID) throw new Error("Workspace already has another Go subscription")
+
+      await tx
+        .update(BillingTable)
+        .set({
+          customerID: subscription.customerID,
+          liteSubscriptionID: subscription.subscriptionID,
+          lite: {},
+          ...(paymentMethod
+            ? {
+                paymentMethodID: paymentMethod.id,
+                paymentMethodLast4: paymentMethod.card?.last4 ?? null,
+                paymentMethodType: paymentMethod.type,
+              }
+            : {}),
+        })
+        .where(eq(BillingTable.workspaceID, subscription.workspaceID))
+
+      await tx
+        .insert(LiteTable)
+        .ignore()
+        .values({
+          workspaceID: subscription.workspaceID,
+          id: Identifier.create("lite"),
+          userID: subscription.userID,
+        })
+
+      if (subscription.userEmail) {
+        if (subscription.coupon === LiteData.firstMonth50Coupon) {
+          await Billing.redeemCoupon(subscription.userEmail, "GO1MONTH50")
+        } else if (subscription.coupon === LiteData.firstMonth100Coupon) {
+          await Billing.redeemCoupon(subscription.userEmail, "GOFREEMONTH")
+        } else if (subscription.coupon === LiteData.threeMonths100Coupon) {
+          await Billing.redeemCoupon(subscription.userEmail, "GO3MONTHS100")
+        } else if (subscription.coupon === LiteData.sixMonths100Coupon) {
+          await Billing.redeemCoupon(subscription.userEmail, "GO6MONTHS100")
+        } else if (subscription.coupon === LiteData.twelveMonths100Coupon) {
+          await Billing.redeemCoupon(subscription.userEmail, "GO12MONTHS100")
+        }
+      }
+      return true
+    })
+    if (!provisioned) return
+
+    await Referral.completeFromLiteSubscription({
+      workspaceID: subscription.workspaceID,
+      userID: subscription.userID,
+    }).catch((error) => {
+      console.error("Referral sync failed", error)
+    })
+  })
+}
@@ -0,0 +1,66 @@
+import { expect, test } from "bun:test"
+import {
+  liteCheckoutSubscriptionToProvision,
+  liteSubscriptionProvisioningData,
+} from "../src/routes/stripe/lite-subscription"
+
+test("waits for an unpaid Checkout Session's asynchronous payment", () => {
+  const session = {
+    mode: "subscription" as const,
+    payment_status: "unpaid" as const,
+    subscription: "sub_go",
+  }
+
+  expect(liteCheckoutSubscriptionToProvision("checkout.session.completed", session)).toBeUndefined()
+  expect(liteCheckoutSubscriptionToProvision("checkout.session.async_payment_succeeded", session)).toBe("sub_go")
+})
+
+test("provisions a paid Checkout Session immediately", () => {
+  expect(
+    liteCheckoutSubscriptionToProvision("checkout.session.completed", {
+      mode: "subscription",
+      payment_status: "paid",
+      subscription: "sub_go",
+    }),
+  ).toBe("sub_go")
+})
+
+test("provisions an active Go subscription without a default payment method", () => {
+  expect(
+    liteSubscriptionProvisioningData({
+      id: "sub_go",
+      status: "active",
+      customer: "cus_go",
+      default_payment_method: null,
+      metadata: {
+        type: "lite",
+        workspaceID: "wrk_go",
+        userID: "usr_go",
+      },
+    }),
+  ).toEqual({
+    subscriptionID: "sub_go",
+    customerID: "cus_go",
+    workspaceID: "wrk_go",
+    userID: "usr_go",
+    userEmail: undefined,
+    coupon: undefined,
+    paymentMethodID: undefined,
+  })
+})
+
+test("waits for an asynchronous Go subscription to become active", () => {
+  expect(
+    liteSubscriptionProvisioningData({
+      id: "sub_go",
+      status: "incomplete",
+      customer: "cus_go",
+      default_payment_method: null,
+      metadata: {
+        type: "lite",
+        workspaceID: "wrk_go",
+        userID: "usr_go",
+      },
+    }),
+  ).toBeUndefined()
+})
@@ -1,7 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/console-core",
-  "version": "1.18.6",
+  "version": "1.18.9",
  "private": true,
  "type": "module",
  "license": "MIT",
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-function",
-  "version": "1.18.6",
+  "version": "1.18.9",
  "$schema": "https://json.schemastore.org/package.json",
  "private": true,
  "type": "module",
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-mail",
-  "version": "1.18.6",
+  "version": "1.18.9",
  "dependencies": {
    "@jsx-email/all": "2.2.3",
    "@jsx-email/cli": "1.4.3",
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-support",
-  "version": "1.18.6",
+  "version": "1.18.9",
  "type": "module",
  "license": "MIT",
  "scripts": {
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
-  "version": "1.18.6",
+  "version": "1.18.9",
  "name": "@opencode-ai/core",
  "type": "module",
  "license": "MIT",
@@ -108,7 +108,7 @@
    "drizzle-orm": "catalog:",
    "effect": "catalog:",
    "fuzzysort": "3.1.0",
-    "gitlab-ai-provider": "6.11.1",
+    "gitlab-ai-provider": "6.12.1",
    "glob": "13.0.5",
    "google-auth-library": "10.5.0",
    "gray-matter": "4.0.3",
@@ -112,7 +112,7 @@ Every field is optional.
      "type": "local",
      "command": ["npx", "-y", "@playwright/mcp"],
      "enabled": true,
-      "env": {}
+      "environment": {}
    },
    "remote-thing": {
      "type": "remote",
@@ -371,7 +371,7 @@ Special object-shaped (not callbacks): `tool: { my_tool: { ... } }`,
      "type": "local",
      "command": ["npx", "-y", "@playwright/mcp"],
      "enabled": true,
-      "env": { "BROWSER": "chromium" }
+      "environment": { "BROWSER": "chromium" }
    },
    "github": {
      "type": "remote",
@@ -384,7 +384,8 @@ Special object-shaped (not callbacks): `tool: { my_tool: { ... } }`,
 }
 ```

-`command` is an array of strings. `type` is required. Use `enabled: false` to
+`command` is an array of strings. `environment` sets environment variables for
+a local MCP server. `type` is required. Use `enabled: false` to
 disable a server inherited from a parent config. String values such as header
 tokens support `{env:VAR}` interpolation (and `{file:path}`); the shell-style
 `${VAR}` is not substituted.
@@ -24,6 +24,8 @@ for (const channel of channels) {
    expect(config.extraMetadata?.desktopName).toBe(`${channel.appId}.desktop`)
    expect(config.linux?.executableName).toBe(channel.appId)
    expect(config.linux?.desktop?.entry?.StartupWMClass).toBe(channel.appId)
+    expect(config.deb?.fpm).toContainEqual(expect.stringContaining(`/usr/share/metainfo/${channel.appId}.metainfo.xml`))
+    expect(config.rpm?.fpm).toContainEqual(expect.stringContaining(`/usr/share/metainfo/${channel.appId}.metainfo.xml`))
  })
 }

@@ -37,8 +39,16 @@ test("keeps a hidden prod launcher for old Linux pins", async () => {
  if (previous === undefined) delete process.env.OPENCODE_CHANNEL
  else process.env.OPENCODE_CHANNEL = previous

-  expect(config.deb?.fpm?.[0]).toEndWith(`${legacyDesktopEntry}=/usr/share/applications/opencode-desktop.desktop`)
-  expect(config.rpm?.fpm?.[0]).toEndWith(`${legacyDesktopEntry}=/usr/share/applications/opencode-desktop.desktop`)
+  expect(
+    config.deb?.fpm?.some((entry) =>
+      entry.endsWith("opencode-desktop.desktop=/usr/share/applications/opencode-desktop.desktop"),
+    ),
+  ).toBe(true)
+  expect(
+    config.rpm?.fpm?.some((entry) =>
+      entry.endsWith("opencode-desktop.desktop=/usr/share/applications/opencode-desktop.desktop"),
+    ),
+  ).toBe(true)

  const desktop = await Bun.file(legacyDesktopEntry).text()
  expect(desktop).toContain("Exec=/opt/OpenCode/ai.opencode.desktop %U")
@@ -46,3 +56,36 @@ test("keeps a hidden prod launcher for old Linux pins", async () => {
  expect(desktop).toContain("StartupWMClass=ai.opencode.desktop")
  expect(desktop).toContain("NoDisplay=true")
 })
+
+test("bundles the CLI outside the dev app archive", async () => {
+  const previous = process.env.OPENCODE_CHANNEL
+  process.env.OPENCODE_CHANNEL = "dev"
+  const module = await import("./electron-builder.config.ts?cli-resource")
+  const config = module.default as Configuration
+  if (previous === undefined) delete process.env.OPENCODE_CHANNEL
+  else process.env.OPENCODE_CHANNEL = previous
+
+  expect(config.files).toContain("!resources/opencode-cli*")
+  expect(config.extraResources).toContainEqual({
+    from: "resources/",
+    to: "",
+    filter: ["opencode-cli*"],
+  })
+})
+
+for (const channel of ["beta", "prod"] as const) {
+  test(`does not bundle the CLI in ${channel} builds`, async () => {
+    const previous = process.env.OPENCODE_CHANNEL
+    process.env.OPENCODE_CHANNEL = channel
+    const module = await import(`./electron-builder.config.ts?no-cli-resource=${channel}`)
+    const config = module.default as Configuration
+    if (previous === undefined) delete process.env.OPENCODE_CHANNEL
+    else process.env.OPENCODE_CHANNEL = previous
+
+    expect(config.extraResources).not.toContainEqual({
+      from: "resources/",
+      to: "",
+      filter: ["opencode-cli*"],
+    })
+  })
+}
@@ -15,6 +15,9 @@ const signScript = path.join(rootDir, "script", "sign-windows.ps1")
 const legacyDesktopEntry = path.join(packageDir, "resources", "linux", "opencode-desktop.desktop")
 const legacyDesktopEntryFpm = `${legacyDesktopEntry}=/usr/share/applications/opencode-desktop.desktop`

+const metainfoFpm = (appId: string) =>
+  `${path.join(packageDir, "resources", `${appId}.metainfo.xml`)}=/usr/share/metainfo/${appId}.metainfo.xml`
+
 async function signWindows(configuration: { path: string }) {
  if (process.platform !== "win32") return
  if (process.env.GITHUB_ACTIONS !== "true") return
@@ -52,8 +55,17 @@ const getBase = (appId: string): Configuration => ({
  extraMetadata: {
    desktopName: `${appId}.desktop`,
  },
-  files: ["out/**/*", "resources/**/*"],
+  files: ["out/**/*", "resources/**/*", "!resources/opencode-cli*"],
  extraResources: [
+    ...(channel === "dev"
+      ? [
+          {
+            from: "resources/",
+            to: "",
+            filter: ["opencode-cli*"],
+          },
+        ]
+      : []),
    {
      from: "native/",
      to: "native/",
@@ -116,7 +128,8 @@ function getConfig() {
        ...base,
        appId,
        productName: "OpenCode Dev",
-        rpm: { packageName: "opencode-dev" },
+        deb: { fpm: [metainfoFpm(appId)] },
+        rpm: { packageName: "opencode-dev", fpm: [metainfoFpm(appId)] },
      }
    }
    case "beta": {
@@ -126,7 +139,8 @@ function getConfig() {
        productName: "OpenCode Beta",
        protocols: { name: "OpenCode Beta", schemes: ["opencode"] },
        publish: { provider: "github", owner: "anomalyco", repo: "opencode-beta", channel: "latest" },
-        rpm: { packageName: "opencode-beta" },
+        deb: { fpm: [metainfoFpm(appId)] },
+        rpm: { packageName: "opencode-beta", fpm: [metainfoFpm(appId)] },
      }
    }
    case "prod": {
@@ -136,8 +150,8 @@ function getConfig() {
        productName: "OpenCode",
        protocols: { name: "OpenCode", schemes: ["opencode"] },
        publish: { provider: "github", owner: "anomalyco", repo: "opencode", channel: "latest" },
-        deb: { fpm: [legacyDesktopEntryFpm] },
-        rpm: { packageName: "opencode", fpm: [legacyDesktopEntryFpm] },
+        deb: { fpm: [metainfoFpm(appId), legacyDesktopEntryFpm] },
+        rpm: { packageName: "opencode", fpm: [metainfoFpm(appId), legacyDesktopEntryFpm] },
      }
    }
  }
@@ -1,7 +1,7 @@
 {
  "name": "@opencode-ai/desktop",
  "private": true,
-  "version": "1.18.6",
+  "version": "1.18.9",
  "type": "module",
  "license": "MIT",
  "homepage": "https://opencode.ai",
@@ -1,10 +1,11 @@
 #!/usr/bin/env bun
 import { $ } from "bun"

-import { resolveChannel } from "./utils"
+import { downloadCliToResources, resolveChannel } from "./utils"

 const channel = resolveChannel()
 await $`bun ./scripts/copy-icons.ts ${channel}`
 await $`bun ./scripts/copy-metainfo.ts ${channel}`

 await $`cd ../opencode && bun script/build-node.ts`
+if (channel === "dev") await downloadCliToResources()
@@ -1,7 +1,9 @@
 import { $ } from "bun"
+import { downloadCliToResources } from "./utils"

 await $`bun run install-electron`

 await $`bun ./scripts/copy-icons.ts ${process.env.OPENCODE_CHANNEL ?? "dev"}`

 await $`cd ../opencode && bun script/build-node.ts`
+await downloadCliToResources()
@@ -1,4 +1,9 @@
 import { $ } from "bun"
+import { chmod, copyFile, mkdtemp, rm } from "node:fs/promises"
+import { tmpdir } from "node:os"
+import { join } from "node:path"
+
+const CLI_VERSION = "0.0.0-next-16350"

 export type Channel = "dev" | "beta" | "prod"

@@ -8,36 +13,42 @@ export function resolveChannel(): Channel {
  return "dev"
 }

-export const SIDECAR_BINARIES: Array<{ rustTarget: string; ocBinary: string; assetExt: string }> = [
+export const CLI_BINARIES: Array<{ rustTarget: string; package: string; os: string; cpu: string }> = [
  {
    rustTarget: "aarch64-apple-darwin",
-    ocBinary: "opencode-darwin-arm64",
-    assetExt: "zip",
+    package: "@opencode-ai/cli-darwin-arm64",
+    os: "darwin",
+    cpu: "arm64",
  },
  {
    rustTarget: "x86_64-apple-darwin",
-    ocBinary: "opencode-darwin-x64-baseline",
-    assetExt: "zip",
+    package: "@opencode-ai/cli-darwin-x64-baseline",
+    os: "darwin",
+    cpu: "x64",
  },
  {
    rustTarget: "aarch64-pc-windows-msvc",
-    ocBinary: "opencode-windows-arm64",
-    assetExt: "zip",
+    package: "@opencode-ai/cli-windows-arm64",
+    os: "win32",
+    cpu: "arm64",
  },
  {
    rustTarget: "x86_64-pc-windows-msvc",
-    ocBinary: "opencode-windows-x64-baseline",
-    assetExt: "zip",
+    package: "@opencode-ai/cli-windows-x64-baseline",
+    os: "win32",
+    cpu: "x64",
  },
  {
    rustTarget: "x86_64-unknown-linux-gnu",
-    ocBinary: "opencode-linux-x64-baseline",
-    assetExt: "tar.gz",
+    package: "@opencode-ai/cli-linux-x64-baseline",
+    os: "linux",
+    cpu: "x64",
  },
  {
    rustTarget: "aarch64-unknown-linux-gnu",
-    ocBinary: "opencode-linux-arm64",
-    assetExt: "tar.gz",
+    package: "@opencode-ai/cli-linux-arm64",
+    os: "linux",
+    cpu: "arm64",
  },
 ]

@@ -51,24 +62,33 @@ function nativeTarget() {
  throw new Error(`Unsupported platform: ${platform}/${arch}`)
 }

-export function getCurrentSidecar(target = RUST_TARGET ?? nativeTarget()) {
-  const binaryConfig = SIDECAR_BINARIES.find((b) => b.rustTarget === target)
-  if (!binaryConfig) throw new Error(`Sidecar configuration not available for Rust target '${target}'`)
+export function getCurrentCli(target = RUST_TARGET ?? nativeTarget()) {
+  const binaryConfig = CLI_BINARIES.find((item) => item.rustTarget === target)
+  if (!binaryConfig) throw new Error(`CLI configuration not available for target '${target}'`)

  return binaryConfig
 }

-export async function copyBinaryToSidecarFolder(source: string) {
-  const dir = `resources`
-  await $`mkdir -p ${dir}`
-  const dest = windowsify(`${dir}/opencode-cli`)
-  await $`cp ${source} ${dest}`
+export async function downloadCliToResources() {
+  const cli = getCurrentCli()
+  const directory = await mkdtemp(join(tmpdir(), "opencode-cli-"))
+  const dest = windowsify("resources/opencode-cli")
+  try {
+    await $`bun install --no-save --cwd ${directory} ${`${cli.package}@${CLI_VERSION}`} ${`--os=${cli.os}`} ${`--cpu=${cli.cpu}`}`
+    await copyFile(
+      join(directory, "node_modules", cli.package, "bin", cli.os === "win32" ? "opencode2.exe" : "opencode2"),
+      dest,
+    )
+  } finally {
+    await rm(directory, { recursive: true, force: true })
+  }
+  if (process.platform !== "win32") await chmod(dest, 0o755)
  if (process.platform === "win32" && process.env.GITHUB_ACTIONS === "true") {
    await $`pwsh -NoLogo -NoProfile -ExecutionPolicy Bypass -File ../../script/sign-windows.ps1 ${dest}`
  }
  if (process.platform === "darwin") await $`codesign --force --sign - ${dest}`

-  console.log(`Copied ${source} to ${dest}`)
+  console.log(`Copied ${cli.package} to ${dest}`)
 }

 export function windowsify(path: string) {
@@ -0,0 +1,125 @@
+import { execFile } from "node:child_process"
+import { existsSync } from "node:fs"
+import { chmod, copyFile, mkdir, rename, rm } from "node:fs/promises"
+import { dirname, join } from "node:path"
+import { fileURLToPath } from "node:url"
+import { promisify } from "node:util"
+import { app } from "electron"
+
+const execFileAsync = promisify(execFile)
+const root = dirname(fileURLToPath(import.meta.url))
+const stateHome = process.env.XDG_STATE_HOME
+const desktopStateNames = ["ai.opencode.desktop.dev", "ai.opencode.desktop.beta", "ai.opencode.desktop"]
+
+type Logger = {
+  log(message: string, meta?: Record<string, unknown>): void
+  error(message: string, meta?: Record<string, unknown>): void
+}
+
+export async function startBackgroundCli(logger: Logger, shellStateHome?: string) {
+  const bundled = app.isPackaged
+    ? join(process.resourcesPath, executableName())
+    : join(root, "../../resources", executableName())
+  logger.log("v2 CLI executable resolved", { bundled, packaged: app.isPackaged })
+  const version = await run(bundled, ["--version"], logger)
+  const binary = app.isPackaged ? await installCli(bundled, version, logger) : bundled
+
+  const candidates = [
+    ...new Set([stateHome, shellStateHome, ...desktopStateNames.map((name) => join(app.getPath("appData"), name))]),
+  ].filter((candidate) => candidate === undefined || existsSync(candidate))
+  const discovered = await Promise.all(
+    candidates.map(async (candidate) => ({
+      stateHome: candidate,
+      url: serviceUrl(await run(binary, ["service", "status"], logger, { stateHome: candidate })),
+    })),
+  )
+  const found = discovered.find((candidate) => candidate.url !== undefined)
+  logger.log("v2 CLI background instance checked", {
+    detected: Boolean(found),
+    ...endpoint(found?.url),
+  })
+
+  const daemonStateHome = found?.stateHome ?? stateHome
+  const url = await run(binary, ["service", "start"], logger, { stateHome: daemonStateHome })
+  const password = await run(binary, ["service", "get", "password"], logger, {
+    redact: true,
+    stateHome: daemonStateHome,
+  })
+  logger.log("v2 CLI background service ready", {
+    existing: Boolean(found),
+    username: "opencode",
+    ...endpoint(url),
+  })
+  return {
+    url,
+    username: "opencode",
+    password,
+  }
+}
+
+async function installCli(source: string, version: string, logger: Logger) {
+  const directory = join(app.getPath("userData"), "cli", version.replace(/[^a-zA-Z0-9._-]/g, "-"))
+  const destination = join(directory, executableName())
+  if (existsSync(destination)) {
+    logger.log("v2 CLI staged executable reused", { path: destination, version })
+    return destination
+  }
+
+  const temp = destination + `.${process.pid}.tmp`
+  await mkdir(directory, { recursive: true })
+  await copyFile(source, temp)
+  if (process.platform !== "win32") await chmod(temp, 0o755)
+  await rename(temp, destination).catch(async (error) => {
+    await rm(temp, { force: true })
+    throw error
+  })
+  logger.log("v2 CLI executable staged", { source, path: destination, version })
+  return destination
+}
+
+async function run(
+  binary: string,
+  args: string[],
+  logger: Logger,
+  options: { redact?: boolean; stateHome?: string } = {},
+) {
+  logger.log("v2 CLI command started", { binary, args })
+  const env = { ...process.env }
+  if (options.stateHome === undefined) delete env.XDG_STATE_HOME
+  else env.XDG_STATE_HOME = options.stateHome
+  return execFileAsync(binary, args, { env, windowsHide: true }).then(
+    (result) => {
+      const stdout = result.stdout.trim()
+      const stderr = result.stderr.trim()
+      logger.log("v2 CLI command completed", { args, stdout: options.redact ? "[redacted]" : stdout, stderr })
+      return stdout
+    },
+    (error: unknown) => {
+      const output = error as { stdout?: string; stderr?: string }
+      logger.error("v2 CLI command failed", {
+        args,
+        error: error instanceof Error ? error.message : String(error),
+        stdout: options.redact && output.stdout ? "[redacted]" : (output.stdout?.trim() ?? ""),
+        stderr: output.stderr?.trim() ?? "",
+      })
+      throw error
+    },
+  )
+}
+
+function serviceUrl(status: string) {
+  if (URL.canParse(status)) return status
+  if (!status.startsWith("running ")) return
+  const url = status.slice("running ".length).trim()
+  return URL.canParse(url) ? url : undefined
+}
+
+function endpoint(url: string | undefined) {
+  if (!url || !URL.canParse(url)) return {}
+  const parsed = new URL(url)
+  return { url, hostname: parsed.hostname, port: parsed.port }
+}
+
+function executableName() {
+  return process.platform === "win32" ? "opencode-cli.exe" : "opencode-cli"
+}
@@ -48,6 +48,7 @@ import { registerWslIpcHandlers } from "./wsl/ipc"
 import { spawnWslSidecar } from "./wsl/sidecar"
 import { migrate } from "./migrate"
 import { cleanupStoreFiles } from "./store-cleanup"
+import { startBackgroundCli } from "./background-cli"

 const APP_NAMES: Record<string, string> = {
  dev: "OpenCode Dev",
@@ -60,6 +61,7 @@ const APP_IDS: Record<string, string> = {
  prod: "ai.opencode.desktop",
 }
 const TEST_ONBOARDING = process.env.OPENCODE_TEST_ONBOARDING === "1"
+const SIDECAR_VERSION = process.env.OPENCODE_SIDECAR_V2 === "1" ? "v2" : "v1"
 const jsCallStackFeature = "DocumentPolicyIncludeJSCallStacksInCrashReports"

 let logger: ReturnType<typeof initLogging>
@@ -198,7 +200,7 @@ const main = Effect.gen(function* () {
    return
  }

-  preferAppEnv(app.getPath("userData"))
+  const shellEnv = preferAppEnv(app.getPath("userData"))

  app.on("second-instance", (_event: Event, argv: string[]) => {
    const urls = argv.filter((arg: string) => arg.startsWith("opencode://"))
@@ -312,39 +314,56 @@ const main = Effect.gen(function* () {
    ),
  )

-  const port = yield* Effect.gen(function* () {
-    const fromEnv = process.env.OPENCODE_PORT
-    if (fromEnv) {
-      const parsed = Number.parseInt(fromEnv, 10)
-      if (!Number.isNaN(parsed)) return parsed
-    }
-
-    const res = yield* Deferred.make<number, unknown>()
-    const server = createServer()
-    server.on("error", (e) => Deferred.failSync(res, () => e))
-    server.listen(0, "127.0.0.1", () => {
-      const address = server.address()
-      if (typeof address !== "object" || !address) {
-        server.close()
-        Deferred.failSync(res, () => new Error("Failed to get port"))
-        return
-      }
-      const port = address.port
-      server.close(() => Effect.runSync(Deferred.succeed(res, port)))
-    })
-
-    return yield* Deferred.await(res)
-  })
-  const hostname = "127.0.0.1"
-  const url = `http://${hostname}:${port}`
-  const password = randomUUID()
-
  const loadingTask = yield* Effect.gen(function* () {
-    logger.log("sidecar connection started", { url })
+    logger.log("sidecar connection started", { version: SIDECAR_VERSION })

    ensureLoopbackNoProxy()
    useEnvProxy()

+    if (SIDECAR_VERSION === "v2") {
+      logger.log("spawning v2 sidecar")
+      const sidecar = yield* Effect.promise(() => startBackgroundCli(logger, shellEnv?.XDG_STATE_HOME))
+      yield* Deferred.succeed(serverReady, {
+        url: sidecar.url,
+        username: sidecar.username,
+        password: sidecar.password,
+      })
+
+      if (process.platform === "win32") {
+        void wslServers.initialize().catch((error) => logger.error("wsl server initialization failed", error))
+      }
+
+      logger.log("loading task finished")
+      return
+    }
+
+    const port = yield* Effect.gen(function* () {
+      const fromEnv = process.env.OPENCODE_PORT
+      if (fromEnv) {
+        const parsed = Number.parseInt(fromEnv, 10)
+        if (!Number.isNaN(parsed)) return parsed
+      }
+
+      const res = yield* Deferred.make<number, unknown>()
+      const socket = createServer()
+      socket.on("error", (e) => Deferred.failSync(res, () => e))
+      socket.listen(0, "127.0.0.1", () => {
+        const address = socket.address()
+        if (typeof address !== "object" || !address) {
+          socket.close()
+          Deferred.failSync(res, () => new Error("Failed to get port"))
+          return
+        }
+        const port = address.port
+        socket.close(() => Effect.runSync(Deferred.succeed(res, port)))
+      })
+
+      return yield* Deferred.await(res)
+    })
+    const hostname = "127.0.0.1"
+    const url = `http://${hostname}:${port}`
+    const password = randomUUID()
+
    logger.log("spawning sidecar", { url })
    const { listener, health } = yield* Effect.promise(() =>
      spawnLocalServer(hostname, port, password, {
@@ -43,13 +43,15 @@ export function setDefaultServerUrl(url: string | null) {

 export function preferAppEnv(userDataPath: string) {
  const shell = process.platform === "win32" ? null : getUserShell()
+  const shellEnv = shell ? loadShellEnv(shell, getLogger()) : null
  Object.assign(process.env, {
-    ...(shell ? loadShellEnv(shell, getLogger()) : null),
+    ...shellEnv,
    OPENCODE_EXPERIMENTAL_ICON_DISCOVERY: "true",
    OPENCODE_EXPERIMENTAL_FILEWATCHER: "true",
    OPENCODE_CLIENT: "desktop",
    XDG_STATE_HOME: process.env.XDG_STATE_HOME ?? userDataPath,
  })
+  return shellEnv
 }

 export async function spawnLocalServer(
@@ -214,7 +216,6 @@ function createSidecarEnv(): Record<string, string> {
  )
  delete env.DEBUG
  if (process.platform === "linux") delete env.LD_PRELOAD
-  if (!app.isPackaged) env.OPENCODE_DISABLE_CHANNEL_DB = "1"
  return env
 }

@@ -17,6 +17,7 @@ export function DesktopFirstLaunchOnboarding(props: { initialUrl: string; onLoad
      )
      const existingInstall = await window.api.isOldLayoutEligible()
      settings.general.setOldLayoutEligible(existingInstall)
+      settings.general.initializeAgentVisibility(existingInstall)
      if (!server.isLocal()) return

      const pending = await window.api.isFirstLaunchOnboardingPending()
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
-  "version": "1.18.6",
+  "version": "1.18.9",
  "name": "@opencode-ai/effect-drizzle-sqlite",
  "type": "module",
  "license": "MIT",
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
-  "version": "1.18.6",
+  "version": "1.18.9",
  "name": "@opencode-ai/effect-sqlite-node",
  "type": "module",
  "license": "MIT",
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jack	6cc915bcf7	fix(console): recover delayed Go subscriptions	2026-07-30 09:32:06 +00:00
opencode-agent[bot]	c08350b83e	chore: update nix node_modules hashes	2026-07-30 09:11:45 +00:00
Aarav Sareen	c5cf416633	feat(app): fix composer attachment fades (#38547 )	2026-07-30 17:07:35 +08:00
Aarav Sareen	3dbce3dade	feat(app): adds fades to file tree (#38549 )	2026-07-30 17:07:06 +08:00
opencode-agent[bot]	a277557a5f	chore: generate	2026-07-30 09:05:12 +00:00
Aarav Sareen	005bf088c9	feat(app): fix file tree button bg (#38629 )	2026-07-30 17:03:23 +08:00
Aarav Sareen	eca5e68a5e	feat(app): disallow duplicate attachments (#39464 )	2026-07-30 17:02:15 +08:00
Aarav Sareen	5b11635d97	feat(app): always show new session button (#39520 ) Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>	2026-07-30 16:58:38 +08:00
Aarav Sareen	a9eda2e99e	feat(app): migrate to solid-sonner (#39519 ) Co-authored-by: Brendan Allan <git@brendonovich.dev>	2026-07-30 08:57:19 +00:00
Aarav Sareen	73009f0b09	feat(app): update arrow buttons in review tab top bar (#39469 ) Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>	2026-07-30 16:56:16 +08:00
Frank	f720490219	fix(console): add public fetch compatibility flag	2026-07-30 00:40:52 -04:00
Deven Navani	341c64cc97	feat: discover Modal models (#39066 )	2026-07-29 23:06:19 -05:00
opencode-agent[bot]	1e17856ba4	chore: update nix node_modules hashes	2026-07-29 18:06:26 +00:00
Lakshya Agarwal	a6f7fe739c	docs(ecosystem): add opencode-tavily plugin (#38709 )	2026-07-29 12:52:12 -05:00
Vladimir Glafirov	02f50a6e80	chore: bump gitlab-ai-provider to 6.12.1 (#39490 )	2026-07-29 12:45:40 -05:00
opencode-agent[bot]	7565e03536	chore: generate	2026-07-29 08:36:03 +00:00
usrnk1	035a5a1a67	feat(desktop): refine tab states (#39472 )	2026-07-29 08:34:37 +00:00
Brendan Allan	e8b0992788	fix(app): defer model variant selector (#39445 )	2026-07-29 05:16:30 +00:00
opencode-agent[bot]	8cbea4fbb7	chore: generate	2026-07-29 01:26:18 +00:00
Brendan Allan	f256a4c538	fix(app): preserve agent picker for existing users (#39300 )	2026-07-29 01:24:31 +00:00
opencode	a45c2b917e	sync release versions for v1.18.9	2026-07-28 18:14:59 +00:00
opencode-agent[bot]	f28d72d15e	chore: update nix node_modules hashes	2026-07-28 17:12:42 +00:00
opencode-agent[bot]	d8a9d8a76d	chore: generate	2026-07-28 16:55:30 +00:00
Aiden Cline	982a9044c5	fix(mcp): restore legacy SDK compatibility (#39373 )	2026-07-28 11:53:35 -05:00
opencode-agent[bot]	7edefb3347	chore(mcp): upgrade client to 2.0.0 (#39369 ) Co-authored-by: Aiden Cline <rekram1-node@users.noreply.github.com> Co-authored-by: Aiden Cline <aidenpcline@gmail.com>	2026-07-28 11:37:58 -05:00
usrnk1	017a5977d2	feat(desktop): remove v2 vertical menu borders (#39317 )	2026-07-28 19:50:58 +08:00
opencode-agent[bot]	7336cc5a7b	chore: update nix node_modules hashes	2026-07-28 11:21:16 +00:00
opencode-agent[bot]	e1587588c4	chore: generate	2026-07-28 11:09:22 +00:00
opencode-agent[bot]	be93cec9ba	fix(app): guard reentrant Solid cleanup (#39261 ) Co-authored-by: Jack <jack@anoma.ly>	2026-07-28 19:07:19 +08:00
Robin Andrew	7c898249a2	fix(desktop): patch @dnd-kit/solid to preserve core scroll plugins (#38119 ) Co-authored-by: Brendan Allan <git@brendonovich.dev> Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>	2026-07-28 19:05:57 +08:00
Brendan Allan	9e432a6785	feat(desktop): add opt-in v2 sidecar (#39286 )	2026-07-28 17:29:27 +08:00
Brendan Allan	1ead8d84a2	fix(app): localize home session suspense (#39285 )	2026-07-28 16:28:59 +08:00
Brendan Allan	8c81f9a40b	refactor(app): extract v2 settings controllers (#39228 )	2026-07-28 16:12:59 +08:00
usrnk1	95636bd3ca	feat(desktop): collapse model provider sections (#39283 )	2026-07-28 07:35:57 +00:00
opencode-agent[bot]	7dae9a1083	chore: generate	2026-07-28 07:03:56 +00:00
Brendan Allan	d46be565aa	refactor(app): thin new session composition (#39227 )	2026-07-28 15:02:26 +08:00
opencode	8021dbd80f	sync release versions for v1.18.8	2026-07-28 06:07:51 +00:00
opencode-agent[bot]	c8487bac54	chore: update nix node_modules hashes	2026-07-28 05:50:46 +00:00
Aiden Cline	484f00ebf4	fix(mcp): recover expired SDK sessions (#39265 )	2026-07-28 00:35:19 -05:00
Aiden Cline	c3be6c4965	fix(mcp): honor callback port in debug (#39259 )	2026-07-28 00:00:38 -05:00
opencode-agent[bot]	172d08cb98	chore: update nix node_modules hashes	2026-07-28 04:34:03 +00:00
opencode-agent[bot]	5e39051183	fix(provider): omit deprecated Gemini sampling defaults (#38924 ) Co-authored-by: Aiden Cline <rekram1-node@users.noreply.github.com>	2026-07-27 23:21:00 -05:00
opencode-agent[bot]	d50b9e8f9a	chore: generate	2026-07-28 04:20:55 +00:00
Aiden Cline	921b1c6a34	feat(mcp): upgrade client SDK to v2 (#39247 ) Co-authored-by: Matt Carey <mcarey@cloudflare.com>	2026-07-27 23:19:33 -05:00
Brendan Allan	9c8060d96d	refactor(app): extract keybind settings controller (#39226 )	2026-07-28 12:18:27 +08:00
Brendan Allan	87db7a7f0a	fix(app): follow visual tab order (#39241 )	2026-07-28 03:59:30 +00:00
opencode-agent[bot]	237e694df0	fix(app): expand Windows file tree folders (#39249 ) Co-authored-by: Luke Parker <10430890+Hona@users.noreply.github.com>	2026-07-28 03:56:40 +00:00
opencode-agent[bot]	3f9dad3fd0	chore: update nix node_modules hashes	2026-07-28 01:57:02 +00:00
opencode-agent[bot]	3cc70160de	chore: generate	2026-07-28 01:43:55 +00:00
Brendan Allan	b72d7b6fa2	refactor(app): separate model selector controller and view (#39084 )	2026-07-28 01:42:14 +00:00
Vladimir Glafirov	029f5aa3a0	chore: bump gitlab-ai-provider to 6.12.0 (#39096 )	2026-07-27 20:40:48 -05:00
Brendan Allan	284e97068c	fix(app): use blue for server status attention (#39217 )	2026-07-28 01:16:18 +00:00
opencode-agent[bot]	970c38257c	chore: generate	2026-07-28 01:11:56 +00:00
Brendan Allan	c39ad38424	fix(app): refresh global provider state (#39220 )	2026-07-28 01:09:45 +00:00
opencode-agent[bot]	91508f6c88	chore: generate	2026-07-28 00:26:37 +00:00
Andrei Dziahel	1274408b89	fix(desktop): install AppStream metainfo in Linux packages (#36872 ) Co-authored-by: adityachaudhary99 <adityaachaudhary2003@gmail.com>	2026-07-28 08:24:20 +08:00
Luke Parker	7ae1be5bf6	fix(desktop): use channel database in local runs (#39209 )	2026-07-28 10:23:43 +10:00
opencode-agent[bot]	40e4d730ca	fix(console): avoid Safari brand icon repaint (#39154 ) Co-authored-by: Jay <53023+jayair@users.noreply.github.com>	2026-07-27 15:57:55 -04:00
OpeOginni	8dc539b4ae	fix(core): correct MCP environment field in built-in skill (#39175 )	2026-07-27 14:52:16 -05:00
Brendan Allan	8e8d38c3cd	fix(app): prevent freeze when closing projects (#39158 )	2026-07-27 18:40:30 +00:00
Jack	a9bebd3653	docs(zen): add Kimi K3 (#39152 )	2026-07-28 01:04:04 +08:00
opencode-agent[bot]	78f5764319	fix(console): stabilize brand download icons in Safari (#39151 ) Co-authored-by: Jay <53023+jayair@users.noreply.github.com>	2026-07-27 12:58:19 -04:00
usrnk1	55b0211690	feat(desktop): use bg layer 4 for v2 switch (#39085 )	2026-07-27 22:23:54 +08:00
Brendan Allan	4f62295e44	fix(app): contain right panel suspense (#39080 )	2026-07-27 09:56:13 +00:00
Brendan Allan	e1c41941a9	refactor(app): extract tab rename adapter (#39079 )	2026-07-27 09:54:24 +00:00
opencode-agent[bot]	0b4edfc64c	chore: generate	2026-07-27 09:17:56 +00:00
Brendan Allan	4469cecc4e	refactor(app): move prompt effects into controller (#39073 )	2026-07-27 17:15:57 +08:00
Brendan Allan	b06768aa8e	feat(app): add project selector shortcut (#39074 )	2026-07-27 17:15:35 +08:00
opencode	bc2d3df05f	sync release versions for v1.18.7	2026-07-27 07:32:58 +00:00