fix(plugin): reuse active server for client requests

Temporarily route plugin SDK calls through the active listener so they reuse its instance store instead of initializing plugins again through the default app. Keep the in-process fallback for commands without a listener. This is intentionally a narrow bridge until v2 owns plugin clients in the correct shared server runtime.
test(core): add suite to CI
2026-10-22 15:08:39 +08:00 · 2026-06-14 13:28:48 -04:00 · 2026-06-14 09:14:14 -04:00 · 2026-06-14 14:44:50 +02:00 · 2026-06-14 11:25:37 +00:00 · 2026-06-14 13:24:10 +02:00
1175 changed files with 38878 additions and 71733 deletions
@@ -1,5 +0,0 @@
---
-"@opencode-ai/http-recorder": minor
---
-
-Publish the initial beta of the Effect HTTP and WebSocket record/replay library.
@@ -1,11 +0,0 @@
-{
-  "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
-  "changelog": "@changesets/cli/changelog",
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "public",
-  "baseBranch": "dev",
-  "updateInternalDependencies": "patch",
-  "ignore": []
-}
@@ -1,5 +1,3 @@
 # web + desktop packages
-packages/app/      @adamdotdevin
-packages/tauri/    @adamdotdevin
-packages/desktop/src-tauri/  @brendonovich
-packages/desktop/  @adamdotdevin
+packages/app/      @Hona @Brendonovich
+packages/desktop/  @Hona @Brendonovich
@@ -1,53 +0,0 @@
-name: http-recorder release
-
-on:
-  push:
-    branches:
-      - dev
-    paths:
-      - ".changeset/**"
-      - "packages/http-recorder/**"
-      - ".github/workflows/http-recorder-release.yml"
-
-concurrency: http-recorder-release
-
-permissions:
-  contents: write
-  id-token: write
-  pull-requests: write
-
-jobs:
-  release:
-    if: github.repository == 'anomalyco/opencode'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
-        with:
-          fetch-depth: 0
-
-      - uses: ./.github/actions/setup-bun
-
-      - name: Setup git committer
-        id: committer
-        uses: ./.github/actions/setup-git-committer
-        with:
-          opencode-app-id: ${{ vars.OPENCODE_APP_ID }}
-          opencode-app-secret: ${{ secrets.OPENCODE_APP_SECRET }}
-
-      - name: Verify package
-        run: |
-          bun run --cwd packages/http-recorder build
-          bun run --cwd packages/http-recorder test
-          bun run --cwd packages/http-recorder typecheck
-          bun run --cwd packages/http-recorder verify:package
-
-      - name: Version or publish beta
-        uses: changesets/action@3841a0683d3cfa6dae0f9bb335290003010fe3f0 # v1.9.0
-        with:
-          version: bun run version:http-recorder
-          publish: bun run release:http-recorder
-          commit: "chore(http-recorder): release beta"
-          title: "chore(http-recorder): release beta"
-        env:
-          GITHUB_TOKEN: ${{ steps.committer.outputs.token }}
-          NPM_CONFIG_PROVENANCE: true
@@ -65,7 +65,7 @@ jobs:

      - name: Run unit tests
        timeout-minutes: 20
-        run: bun turbo test:ci --log-order=stream --log-prefix=task
+        run: bun turbo test --output-logs=errors-only --log-order=grouped --log-prefix=task
        env:
          OPENCODE_EXPERIMENTAL_DISABLE_FILEWATCHER: ${{ runner.os == 'Windows' && 'true' || 'false' }}

@@ -74,26 +74,6 @@ jobs:
        working-directory: packages/opencode
        run: bun run test:httpapi

-      - name: Publish unit reports
-        if: always()
-        uses: mikepenz/action-junit-report@bccf2e31636835cf0874589931c4116687171386 # v6.4.0
-        with:
-          report_paths: packages/*/.artifacts/unit/junit.xml
-          check_name: "unit results (${{ matrix.settings.name }})"
-          detailed_summary: true
-          include_time_in_summary: true
-          fail_on_failure: false
-
-      - name: Upload unit artifacts
-        if: always()
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
-        with:
-          name: unit-${{ matrix.settings.name }}-${{ github.run_attempt }}
-          include-hidden-files: true
-          if-no-files-found: ignore
-          retention-days: 7
-          path: packages/*/.artifacts/unit/junit.xml
-
  e2e:
    name: e2e (${{ matrix.settings.name }})
    strategy:
@@ -151,7 +131,6 @@ jobs:
        run: bun --cwd packages/app test:e2e:local
        env:
          CI: true
-          PLAYWRIGHT_JUNIT_OUTPUT: e2e/junit-${{ matrix.settings.name }}.xml
        timeout-minutes: 30

      - name: Upload Playwright artifacts
@@ -162,6 +141,5 @@ jobs:
          if-no-files-found: ignore
          retention-days: 7
          path: |
-            packages/app/e2e/junit-*.xml
            packages/app/e2e/test-results
            packages/app/e2e/playwright-report
@@ -1,7 +1,7 @@
 ---
 mode: primary
 hidden: true
-model: opencode/gpt-5.4-nano
+model: opencode/gpt-5.4-mini
 color: "#44BA81"
 tools:
  "*": false
@@ -2,8 +2,15 @@
  "$schema": "https://opencode.ai/config.json",
  "provider": {},
  "permission": {},
-  "reference": {
-    "effect": "github.com/Effect-TS/effect-smol",
+  "references": {
+    "effect": {
+      "repository": "github.com/Effect-TS/effect-smol",
+      "description": "Use for Effect v4 and effect-smol implementation details",
+    },
+    "opencode-local": {
+      "path": "~/.local/share/opencode",
+      "description": "Contains opencode logs and data",
+    },
  },
  "mcp": {},
  "tools": {
@@ -2,6 +2,12 @@
 - The default branch in this repo is `dev`.
 - Local `main` ref may not exist; use `dev` or `origin/dev` for diffs.

+## Branch Names
+
+Use a short branch name of at most three words, separated by hyphens. Do not use slashes or type prefixes such as `feat/` or `fix/`.
+
+Examples: `session-recovery`, `fix-scroll-state`, `regenerate-sdk`.
+
 ## Commits and PR Titles

 Use conventional commit-style messages and PR titles: `type(scope): summary`.
@@ -52,6 +52,9 @@ _Avoid_: Request body, wire options
 **Generation Controls**:
 Provider-neutral sampling and output controls, partitioned from provider semantics and compatibility wire fields when model metadata enters the Catalog.

+**PTY Environment**:
+The host-supplied environment overlay applied by the server when creating a PTY, observed for the request Location and resolved PTY working directory.
+
 ## Relationships

 - A **System Context** is an opaque carrier composed from zero or more **Context Sources**.
@@ -99,6 +102,8 @@ Provider-neutral sampling and output controls, partitioned from provider semanti
 - A model/provider switch always starts a new **Context Epoch** while preserving chronological conversation history.
 - **Model Request Options** remain provider-semantic through Catalog resolution. The Session runner maps them into the LLM package's provider-option namespace; the selected protocol adapter alone owns provider wire encoding.
 - **Generation Controls**, protocol-semantic **Model Request Options**, and compatibility request body fields are separate Catalog domains. A shared ingestion adapter partitions legacy and models.dev AI-SDK-shaped options before routing.
+- The **PTY Environment** is a server concern rather than a Core PTY concern. PTY creation merges caller values, then the host overlay, then Core-forced terminal invariants such as `TERM` and `OPENCODE_TERMINAL`.
+- A **PTY Environment** adapter observes plugins in the request Location while passing the resolved PTY working directory to the hook; standalone servers use an empty adapter.
 - A **Mid-Conversation System Message** lowers to the provider's native chronological instruction role when supported and to a wrapped chronological fallback otherwise.
 - When the effective aggregate instruction set changes, its **Mid-Conversation System Message** includes the complete current ordered set and supersedes the prior aggregate value; when no ambient instructions remain, the message states that previously loaded instructions no longer apply.
 - Ambient project instruction discovery honors `OPENCODE_DISABLE_PROJECT_CONFIG`; global instructions remain eligible.
@@ -2,7 +2,7 @@
 exact = true
 # Only install newly resolved package versions published at least 3 days ago.
 minimumReleaseAge = 259200
-minimumReleaseAgeExcludes = ["@ai-sdk/amazon-bedrock", "@opentui/core", "@opentui/core-darwin-arm64", "@opentui/core-darwin-x64", "@opentui/core-linux-arm64", "@opentui/core-linux-arm64-musl", "@opentui/core-linux-x64", "@opentui/core-linux-x64-musl", "@opentui/core-win32-arm64", "@opentui/core-win32-x64", "@opentui/keymap", "@opentui/solid", "gitlab-ai-provider", "@ff-labs/fff-node", "@ff-labs/fff-bun", "@ff-labs/fff-bin-darwin-arm64", "@ff-labs/fff-bin-darwin-x64", "@ff-labs/fff-bin-linux-arm64-gnu", "@ff-labs/fff-bin-linux-arm64-musl", "@ff-labs/fff-bin-linux-x64-gnu", "@ff-labs/fff-bin-linux-x64-musl", "@ff-labs/fff-bin-win32-arm64", "@ff-labs/fff-bin-win32-x64"]
+minimumReleaseAgeExcludes = ["@ai-sdk/amazon-bedrock", "@ai-sdk/anthropic", "@opentui/core", "@opentui/core-darwin-arm64", "@opentui/core-darwin-x64", "@opentui/core-linux-arm64", "@opentui/core-linux-arm64-musl", "@opentui/core-linux-x64", "@opentui/core-linux-x64-musl", "@opentui/core-win32-arm64", "@opentui/core-win32-x64", "@opentui/keymap", "@opentui/solid", "opentui-spinner", "gitlab-ai-provider", "opencode-gitlab-auth", "@ff-labs/fff-node", "@ff-labs/fff-bun", "@ff-labs/fff-bin-darwin-arm64", "@ff-labs/fff-bin-darwin-x64", "@ff-labs/fff-bin-linux-arm64-gnu", "@ff-labs/fff-bin-linux-arm64-musl", "@ff-labs/fff-bin-linux-x64-gnu", "@ff-labs/fff-bin-linux-x64-musl", "@ff-labs/fff-bin-win32-arm64", "@ff-labs/fff-bin-win32-x64", "app-builder-lib", "dmg-builder", "electron-builder", "electron-publish"]

 [test]
 root = "./do-not-run-tests-from-root"
@@ -165,7 +165,7 @@ export const app = new sst.cloudflare.x.SolidStart("Stats", {
  domain: `stats.${domain}`,
  link: [database, EMAILOCTOPUS_API_KEY],
  environment: {
-    PUBLIC_URL: `https://${domain}/stats`,
+    PUBLIC_URL: `https://${domain}/data`,
  },
 })

@@ -1,8 +1,8 @@
 {
  "nodeModules": {
-    "x86_64-linux": "sha256-5DhbOm/gs2mfjmNYdZHkr0ZopgSC2HcGN9/r1noGqhc=",
-    "aarch64-linux": "sha256-0dIKcqKmhrPhRpabnfM20wnqt/AkoCWDMgG9cQZ8P3o=",
-    "aarch64-darwin": "sha256-Sx3G63vORj69u2AOMDfpk6NU7fMgxsbYBh3jnGohNXI=",
-    "x86_64-darwin": "sha256-4g2ydNayqNqWlBeQt90rUI6bY5dMvXP4OmQ6QWaJbuI="
+    "x86_64-linux": "sha256-Y+8gz+NfFSb4dysjho4CCaQpx012vvajnptfd3cdh/k=",
+    "aarch64-linux": "sha256-dfkEJ57XvxCM4huM5Ij7tSy+JUPKYmBMZDGZKZ5xSXA=",
+    "aarch64-darwin": "sha256-CJ8dvzGzJp5sgaNJYHwxRc1xK9bWA8zyTmDFi4wTI3o=",
+    "x86_64-darwin": "sha256-7/kwFObujL4z4544Q0D2LN/SxT8sHnJyVrzmBXbJajA="
  }
 }
@@ -13,9 +13,6 @@
    "dev:stats": "bun sst shell --stage=production -- bun run --cwd packages/stats/app dev",
    "dev:storybook": "bun --cwd packages/storybook storybook",
    "lint": "oxlint",
-    "changeset": "changeset",
-    "version:http-recorder": "changeset version",
-    "release:http-recorder": "bun ./packages/http-recorder/script/publish.ts",
    "typecheck": "bun turbo typecheck",
    "upgrade-opentui": "bun run script/upgrade-opentui.ts",
    "postinstall": "bun run --cwd packages/core fix-node-pty",
@@ -42,9 +39,9 @@
      "@octokit/rest": "22.0.0",
      "@hono/standard-validator": "0.2.0",
      "@hono/zod-validator": "0.4.2",
-      "@opentui/core": "0.3.2",
-      "@opentui/keymap": "0.3.2",
-      "@opentui/solid": "0.3.2",
+      "@opentui/core": "0.3.4",
+      "@opentui/keymap": "0.3.4",
+      "@opentui/solid": "0.3.4",
      "ulid": "3.0.1",
      "@kobalte/core": "0.13.11",
      "@types/luxon": "3.7.1",
@@ -55,7 +52,7 @@
      "@cloudflare/workers-types": "4.20251008.0",
      "@openauthjs/openauth": "0.0.0-20250322224806",
      "@pierre/diffs": "1.1.0-beta.18",
-      "opentui-spinner": "0.0.6",
+      "opentui-spinner": "0.0.7",
      "@solid-primitives/storage": "4.3.3",
      "@tailwindcss/vite": "4.1.11",
      "diff": "8.0.2",
@@ -96,7 +93,6 @@
  },
  "devDependencies": {
    "@actions/artifact": "5.0.1",
-    "@changesets/cli": "2.31.0",
    "@tsconfig/bun": "catalog:",
    "@types/mime-types": "3.0.1",
    "@typescript/native-preview": "catalog:",
@@ -144,7 +140,8 @@
    "@types/node": "catalog:"
  },
  "patchedDependencies": {
-    "@npmcli/agent@4.0.0": "patches/@npmcli%2Fagent@4.0.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",
    "@standard-community/standard-openapi@0.2.9": "patches/@standard-community%2Fstandard-openapi@0.2.9.patch",
    "solid-js@1.9.10": "patches/solid-js@1.9.10.patch",
@@ -152,6 +149,7 @@
    "@ai-sdk/xai@3.0.82": "patches/@ai-sdk%2Fxai@3.0.82.patch",
    "gcp-metadata@8.1.2": "patches/gcp-metadata@8.1.2.patch",
    "pacote@21.5.0": "patches/pacote@21.5.0.patch",
-    "@ai-sdk/google@3.0.73": "patches/@ai-sdk%2Fgoogle@3.0.73.patch"
+    "@ai-sdk/google@3.0.73": "patches/@ai-sdk%2Fgoogle@3.0.73.patch",
+    "@modelcontextprotocol/sdk@1.29.0": "patches/@modelcontextprotocol%2Fsdk@1.29.0.patch"
  }
 }
@@ -1,11 +1,12 @@
 {
  "name": "@opencode-ai/app",
-  "version": "1.16.2",
+  "version": "1.17.6",
  "description": "",
  "type": "module",
  "exports": {
    ".": "./src/index.ts",
    "./desktop-menu": "./src/desktop-menu.ts",
+    "./updater": "./src/updater.ts",
    "./wsl/types": "./src/wsl/types.ts",
    "./vite": "./vite.js",
    "./index.css": "./src/index.css"
@@ -17,8 +18,7 @@
    "build": "vite build",
    "serve": "vite preview",
    "test": "bun run test:unit",
-    "test:ci": "mkdir -p .artifacts/unit && bun test --preload ./happydom.ts ./src --reporter=junit --reporter-outfile=.artifacts/unit/junit.xml",
-    "test:unit": "bun test --preload ./happydom.ts ./src",
+    "test:unit": "bun test --only-failures --preload ./happydom.ts ./src",
    "test:unit:watch": "bun test --watch --preload ./happydom.ts ./src",
    "test:e2e": "playwright test",
    "test:e2e:local": "playwright test",
@@ -7,12 +7,6 @@ const serverPort = process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"
 const command = `bun run dev -- --host 0.0.0.0 --port ${port}`
 const reuse = !process.env.CI
 const workers = Number(process.env.PLAYWRIGHT_WORKERS ?? (process.env.CI ? 5 : 0)) || undefined
-const reporter = [["html", { outputFolder: "e2e/playwright-report", open: "never" }], ["line"]] as const
-
-if (process.env.PLAYWRIGHT_JUNIT_OUTPUT) {
-  reporter.push(["junit", { outputFile: process.env.PLAYWRIGHT_JUNIT_OUTPUT }])
-}
-
 export default defineConfig({
  testDir: "./e2e",
  outputDir: "./e2e/test-results",
@@ -24,7 +18,7 @@ export default defineConfig({
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers,
-  reporter,
+  reporter: [["html", { outputFolder: "e2e/playwright-report", open: "never" }], ["line"]],
  webServer: {
    command,
    url: baseURL,
@@ -9,7 +9,7 @@ import { Font } from "@opencode-ai/ui/font"
 import { Splash } from "@opencode-ai/ui/logo"
 import { ThemeProvider } from "@opencode-ai/ui/theme/context"
 import { MetaProvider } from "@solidjs/meta"
-import { type BaseRouterProps, Navigate, Route, Router } from "@solidjs/router"
+import { type BaseRouterProps, Navigate, Route, Router, useParams, useSearchParams } from "@solidjs/router"
 import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
 import { Effect } from "effect"
 import {
@@ -43,25 +43,123 @@ import { PromptProvider } from "@/context/prompt"
 import { ServerConnection, ServerProvider, serverName, useServer } from "@/context/server"
 import { SettingsProvider, useSettings } from "@/context/settings"
 import { TerminalProvider } from "@/context/terminal"
-import { TabsProvider } from "@/context/tabs"
+import { TabsProvider, useTabs, type DraftTab } from "@/context/tabs"
+import { SDKProvider, useSDK } from "@/context/sdk"
 import { WslServersProvider } from "@/wsl/context"
-import DirectoryLayout from "@/pages/directory-layout"
+import DirectoryLayout, { DirectoryDataProvider } from "@/pages/directory-layout"
 import Layout from "@/pages/layout"
 import { ErrorPage } from "./pages/error"
 import { useCheckServerHealth } from "./utils/server-health"

 const HomeRoute = lazy(() => import("@/pages/home"))
 const Session = lazy(() => import("@/pages/session"))
+const NewSession = lazy(() => import("@/pages/new-session"))

 const SessionRoute = Object.assign(
-  () => (
-    <SessionProviders>
-      <Session />
-    </SessionProviders>
-  ),
+  () => {
+    const settings = useSettings()
+    const params = useParams()
+    const [search] = useSearchParams<{ draftId?: string; prompt?: string }>()
+    const sdk = useSDK()
+    const server = useServer()
+    const tabs = useTabs()
+
+    // When the new layout is enabled, the legacy new-session route (/:dir/session with no id)
+    // is replaced by a draft at /new-session?draftId=…
+    createEffect(() => {
+      if (!settings.general.newLayoutDesigns()) return
+      if (params.id || search.draftId) return
+      if (!tabs.ready() || !sdk().directory) return
+      tabs.newDraft({ server: server.key, directory: sdk().directory }, search.prompt)
+    })
+
+    return (
+      <SessionProviders>
+        <Session />
+      </SessionProviders>
+    )
+  },
  { preload: Session.preload },
 )

+// Wraps the non-draft routes. They are gated on (and keyed to) the globally selected
+// server via ServerKey, then provide the server-scoped shell (Permission/Layout/
+// Notification/Models + the visual Layout) for that server.
+function SelectedServerLayout(props: ParentProps) {
+  return (
+    <ServerKey>
+      <ServerSDKProvider>
+        <ServerSyncProvider>
+          <ServerScopedShell>{props.children}</ServerScopedShell>
+        </ServerSyncProvider>
+      </ServerSDKProvider>
+    </ServerKey>
+  )
+}
+
+// Wraps /new-session. It resolves the draft's target server and provides the
+// server-scoped shell for that server — without ServerKey, so the page never depends
+// on the globally "selected" server.
+function DraftServerLayout(props: ParentProps) {
+  const server = useServer()
+  const tabs = useTabs()
+  const [search] = useSearchParams<{ draftId?: string }>()
+  const conn = createMemo(() => {
+    const id = search.draftId
+    if (!id) return undefined
+    const draft = tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === id)
+    if (!draft) return undefined
+    return server.list.find((c) => ServerConnection.key(c) === draft.server)
+  })
+
+  return (
+    <ServerSDKProvider server={conn}>
+      <ServerSyncProvider server={conn}>
+        <ServerScopedShell>{props.children}</ServerScopedShell>
+      </ServerSyncProvider>
+    </ServerSDKProvider>
+  )
+}
+
+function DraftRoute() {
+  const [search] = useSearchParams<{ draftId?: string }>()
+  const tabs = useTabs()
+  return (
+    <Show when={tabs.ready()}>
+      <Show when={search.draftId} keyed fallback={<Navigate href="/" />}>
+        {(draftID) => <ResolvedDraftRoute draftID={draftID} />}
+      </Show>
+    </Show>
+  )
+}
+
+function ResolvedDraftRoute(props: { draftID: string }) {
+  const tabs = useTabs()
+  const draft = createMemo(() =>
+    tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === props.draftID),
+  )
+
+  // Key on the directory so retargeting the draft's project re-instantiates the
+  // directory-scoped providers while keeping the same draft id. The draft's target
+  // server is provided by DraftServerLayout, so changing only the server updates the
+  // SDK/sync hooks without remounting the composer.
+  const directory = () => draft()?.directory
+
+  return (
+    <Show when={directory()} keyed>
+      {(dir) => (
+        <SDKProvider directory={dir}>
+          <DirectoryDataProvider directory={dir} draftID={props.draftID}>
+            <DraftProviders>
+              <NewSession />
+            </DraftProviders>
+          </DirectoryDataProvider>
+        </SDKProvider>
+      )}
+    </Show>
+  )
+}
+
 function UiI18nBridge(props: ParentProps) {
  const language = useLanguage()
  return <I18nProvider value={{ locale: language.intl, t: language.t }}>{props.children}</I18nProvider>
@@ -70,7 +168,6 @@ function UiI18nBridge(props: ParentProps) {
 declare global {
  interface Window {
    __OPENCODE__?: {
-      updaterEnabled?: boolean
      deepLinks?: string[]
    }
    api?: {
@@ -109,27 +206,36 @@ function BodyDesignClass() {
  return null
 }

-function AppShellProviders(props: ParentProps) {
+// Server-agnostic providers shared across every route. These live in the shared
+// shell (router root) so they stay mounted regardless of the active server/route.
+function SharedProviders(props: ParentProps) {
  return (
    <SettingsProvider>
      <BodyDesignClass />
-      <PermissionProvider>
-        <LayoutProvider>
-          <NotificationProvider>
-            <ModelsProvider>
-              <CommandProvider>
-                <HighlightsProvider>
-                  <Layout>{props.children}</Layout>
-                </HighlightsProvider>
-              </CommandProvider>
-            </ModelsProvider>
-          </NotificationProvider>
-        </LayoutProvider>
-      </PermissionProvider>
+      <CommandProvider>
+        <HighlightsProvider>{props.children}</HighlightsProvider>
+      </CommandProvider>
    </SettingsProvider>
  )
 }

+// Server-scoped providers plus the visual Layout (tabs/sidebar). These live inside
+// each per-route server layout so they resolve to that route's server (selected vs
+// draft). The Layout remounts when crossing between those groups.
+function ServerScopedShell(props: ParentProps) {
+  return (
+    <PermissionProvider>
+      <LayoutProvider>
+        <NotificationProvider>
+          <ModelsProvider>
+            <Layout>{props.children}</Layout>
+          </ModelsProvider>
+        </NotificationProvider>
+      </LayoutProvider>
+    </PermissionProvider>
+  )
+}
+
 function SessionProviders(props: ParentProps) {
  return (
    <TerminalProvider>
@@ -142,14 +248,15 @@ function SessionProviders(props: ParentProps) {
  )
 }

-function RouterRoot(props: ParentProps<{ appChildren?: JSX.Element }>) {
+// The draft page only renders the prompt composer, so it drops TerminalProvider.
+// FileProvider and CommentsProvider stay because PromptInput uses file search and comment context.
+function DraftProviders(props: ParentProps) {
  return (
-    <AppShellProviders>
-      {/*<Suspense fallback={<Loading />}>*/}
-      {props.appChildren}
-      {props.children}
-      {/*</Suspense>*/}
-    </AppShellProviders>
+    <FileProvider>
+      <PromptProvider>
+        <CommentsProvider>{props.children}</CommentsProvider>
+      </PromptProvider>
+    </FileProvider>
  )
 }

@@ -311,6 +418,20 @@ export function AppInterface(props: {
  router?: Component<BaseRouterProps>
  disableHealthCheck?: boolean
 }) {
+  // The shared shell holds only server-agnostic providers (QueryClient + Settings/
+  // Command/Highlights) and stays mounted across every route. The server-scoped
+  // providers and the visual Layout live in the per-route layouts below, so they
+  // resolve to that route's server (selected for most routes, the draft's server for
+  // /new-session). appChildren is server-agnostic, so it renders here once.
+  const ServerShell = (shellProps: ParentProps) => (
+    <QueryProvider>
+      <SharedProviders>
+        {props.children}
+        {shellProps.children}
+      </SharedProviders>
+    </QueryProvider>
+  )
+
  return (
    <ServerProvider
      defaultServer={props.defaultServer}
@@ -323,22 +444,19 @@ export function AppInterface(props: {
            component={props.router ?? Router}
            root={(routerProps) => (
              <TabsProvider>
-                <ServerKey>
-                  <QueryProvider>
-                    <ServerSDKProvider>
-                      <ServerSyncProvider>
-                        <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>
-                      </ServerSyncProvider>
-                    </ServerSDKProvider>
-                  </QueryProvider>
-                </ServerKey>
+                <ServerShell>{routerProps.children}</ServerShell>
              </TabsProvider>
            )}
          >
-            <Route path="/" component={HomeRoute} />
-            <Route path="/:dir" component={DirectoryLayout}>
-              <Route path="/" component={() => <Navigate href="session" />} />
-              <Route path="/session/:id?" component={SessionRoute} />
+            <Route component={SelectedServerLayout}>
+              <Route path="/" component={HomeRoute} />
+              <Route path="/:dir" component={DirectoryLayout}>
+                <Route path="/" component={() => <Navigate href="session" />} />
+                <Route path="/session/:id?" component={SessionRoute} />
+              </Route>
+            </Route>
+            <Route component={DraftServerLayout}>
+              <Route path="/new-session" component={DraftRoute} />
            </Route>
          </Dynamic>
        </ConnectionGate>
@@ -41,7 +41,7 @@ export function DialogConnectProvider(props: { provider: string }) {
  })

  const provider = createMemo(
-    () => providers.all().get(props.provider) ?? serverSync.data.provider.all.get(props.provider)!,
+    () => providers.all().get(props.provider) ?? serverSync().data.provider.all.get(props.provider)!,
  )
  const fallback = createMemo<ProviderAuthMethod[]>(() => [
    {
@@ -52,16 +52,16 @@ export function DialogConnectProvider(props: { provider: string }) {
  const [auth] = createResource(
    () => props.provider,
    async () => {
-      const cached = serverSync.data.provider_auth[props.provider]
+      const cached = serverSync().data.provider_auth[props.provider]
      if (cached) return cached
-      const res = await serverSDK.client.provider.auth()
+      const res = await serverSDK().client.provider.auth()
      if (!alive.value) return fallback()
-      serverSync.set("provider_auth", res.data ?? {})
+      serverSync().set("provider_auth", res.data ?? {})
      return res.data?.[props.provider] ?? fallback()
    },
  )
-  const loading = createMemo(() => auth.loading && !serverSync.data.provider_auth[props.provider])
-  const methods = createMemo(() => auth.latest ?? serverSync.data.provider_auth[props.provider] ?? fallback())
+  const loading = createMemo(() => auth.loading && !serverSync().data.provider_auth[props.provider])
+  const methods = createMemo(() => auth.latest ?? serverSync().data.provider_auth[props.provider] ?? fallback())
  const [store, setStore] = createStore({
    methodIndex: undefined as undefined | number,
    authorization: undefined as undefined | ProviderAuthAuthorization,
@@ -158,8 +158,8 @@ export function DialogConnectProvider(props: { provider: string }) {
      }
      dispatch({ type: "auth.pending" })
      const start = Date.now()
-      await serverSDK.client.provider.oauth
-        .authorize(
+      await serverSDK()
+        .client.provider.oauth.authorize(
          {
            providerID: props.provider,
            method: index,
@@ -331,7 +331,7 @@ export function DialogConnectProvider(props: { provider: string }) {
  })

  async function complete() {
-    await serverSDK.client.global.dispose()
+    await serverSDK().client.global.dispose()
    dialog.close()
    showToast({
      variant: "success",
@@ -409,7 +409,7 @@ export function DialogConnectProvider(props: { provider: string }) {
      }

      setFormStore("error", undefined)
-      await serverSDK.client.auth.set({
+      await serverSDK().client.auth.set({
        providerID: props.provider,
        auth: {
          type: "api",
@@ -480,8 +480,8 @@ export function DialogConnectProvider(props: { provider: string }) {
      }

      setFormStore("error", undefined)
-      const result = await serverSDK.client.provider.oauth
-        .callback({
+      const result = await serverSDK()
+        .client.provider.oauth.callback({
          providerID: props.provider,
          method: store.methodIndex,
          code,
@@ -533,8 +533,8 @@ export function DialogConnectProvider(props: { provider: string }) {

    onMount(() => {
      void (async () => {
-        const result = await serverSDK.client.provider.oauth
-          .callback({
+        const result = await serverSDK()
+          .client.provider.oauth.callback({
            providerID: props.provider,
            method: store.methodIndex,
          })
@@ -105,8 +105,8 @@ export function DialogCustomProvider(props: Props) {
    const output = validateCustomProvider({
      form,
      t: language.t,
-      disabledProviders: serverSync.data.config.disabled_providers ?? [],
-      existingProviderIDs: new Set(serverSync.data.provider.all.keys()),
+      disabledProviders: serverSync().data.config.disabled_providers ?? [],
+      existingProviderIDs: new Set(serverSync().data.provider.all.keys()),
    })
    batch(() => {
      setForm("err", output.err)
@@ -118,11 +118,11 @@ export function DialogCustomProvider(props: Props) {

  const saveMutation = useMutation(() => ({
    mutationFn: async (result: NonNullable<ReturnType<typeof validate>>) => {
-      const disabledProviders = serverSync.data.config.disabled_providers ?? []
+      const disabledProviders = serverSync().data.config.disabled_providers ?? []
      const nextDisabled = disabledProviders.filter((id) => id !== result.providerID)

      if (result.key) {
-        await serverSDK.client.auth.set({
+        await serverSDK().client.auth.set({
          providerID: result.providerID,
          auth: {
            type: "api",
@@ -131,7 +131,7 @@ export function DialogCustomProvider(props: Props) {
        })
      }

-      await serverSync.updateConfig({
+      await serverSync().updateConfig({
        provider: { [result.providerID]: result.config },
        disabled_providers: nextDisabled,
      })
@@ -35,13 +35,13 @@ export const DialogFork: Component = () => {
    const sessionID = params.id
    if (!sessionID) return []

-    const msgs = sync.data.message[sessionID] ?? []
+    const msgs = sync().data.message[sessionID] ?? []
    const result: ForkableMessage[] = []

    for (const message of msgs) {
      if (message.role !== "user") continue

-      const parts = sync.data.part[message.id] ?? []
+      const parts = sync().data.part[message.id] ?? []
      const textPart = parts.find((x): x is SDKTextPart => x.type === "text" && !x.synthetic && !x.ignored)
      if (!textPart) continue

@@ -61,15 +61,15 @@ export const DialogFork: Component = () => {
    const sessionID = params.id
    if (!sessionID) return

-    const parts = sync.data.part[item.id] ?? []
+    const parts = sync().data.part[item.id] ?? []
    const restored = extractPromptFromParts(parts, {
-      directory: sdk.directory,
+      directory: sdk().directory,
      attachmentName: language.t("common.attachment"),
    })
-    const dir = base64Encode(sdk.directory)
+    const dir = base64Encode(sdk().directory)

-    sdk.client.session
-      .fork({ sessionID, messageID: item.id })
+    sdk()
+      .client.session.fork({ sessionID, messageID: item.id })
      .then((forked) => {
        if (!forked.data) {
          showToast({ title: language.t("common.requestFailed") })
@@ -9,7 +9,7 @@ import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
 import { useNavigate } from "@solidjs/router"
 import { createMemo, createSignal, Match, onCleanup, Show, Switch } from "solid-js"
 import { formatKeybind, useCommand, type CommandOption } from "@/context/command"
-import { useServerSDK } from "@/context/server-sdk"
+import { useServerSDK, type ServerSDK } from "@/context/server-sdk"
 import { useServerSync } from "@/context/server-sync"
 import { useLayout } from "@/context/layout"
 import { useFile } from "@/context/file"
@@ -175,7 +175,7 @@ function createFileEntries(props: {
 function createSessionEntries(props: {
  workspaces: () => string[]
  label: (directory: string) => string
-  serverSDK: ReturnType<typeof useServerSDK>
+  serverSDK: ServerSDK
  language: ReturnType<typeof useLanguage>
 }) {
  const state: {
@@ -261,11 +261,7 @@ function createSessionEntries(props: {
  return { sessions }
 }

-export function DialogSelectFile(props: {
-  mode?: DialogSelectFileMode
-  onOpenFile?: (path: string) => void
-  onSelectFile?: (path: string) => void
-}) {
+export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFile?: (path: string) => void }) {
  const command = useCommand()
  const language = useLanguage()
  const layout = useLayout()
@@ -296,21 +292,21 @@ export function DialogSelectFile(props: {
    if (directory && !dirs.includes(directory)) return [...dirs, directory]
    return dirs
  })
-  const homedir = createMemo(() => serverSync.data.path.home)
+  const homedir = createMemo(() => serverSync().data.path.home)
  const label = (directory: string) => {
    const current = project()
    const kind =
      current && directory === current.worktree
        ? language.t("workspace.type.local")
        : language.t("workspace.type.sandbox")
-    const [store] = serverSync.child(directory, { bootstrap: false })
+    const [store] = serverSync().child(directory, { bootstrap: false })
    const home = homedir()
    const path = home ? directory.replace(home, "~") : directory
    const name = store.vcs?.branch ?? getFilename(directory)
    return `${kind} : ${name || path}`
  }

-  const { sessions } = createSessionEntries({ workspaces, label, serverSDK, language })
+  const { sessions } = createSessionEntries({ workspaces, label, serverSDK: serverSDK(), language })

  const items = async (text: string) => {
    const query = text.trim()
@@ -379,10 +375,6 @@ export function DialogSelectFile(props: {
    }

    if (!item.path) return
-    if (props.onSelectFile) {
-      props.onSelectFile(item.path)
-      return
-    }
    open(item.path)
  }

@@ -407,6 +399,7 @@ export function DialogSelectFile(props: {
        items={items}
        key={(item) => item.id}
        filterKeys={["title", "description", "category"]}
+        skipFilter={(item) => item.type === "file"}
        groupBy={grouped() ? (item) => item.category : () => ""}
        onMove={handleMove}
        onSelect={handleSelect}
@@ -1,13 +1,10 @@
-import { useMutation, useQueryClient } from "@tanstack/solid-query"
 import { Component, createMemo, Show } from "solid-js"
 import { useSync } from "@/context/sync"
-import { useSDK } from "@/context/sdk"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { Switch } from "@opencode-ai/ui/switch"
 import { useLanguage } from "@/context/language"
-import { useQueryOptions } from "@/context/server-sync"
-import { pathKey } from "@/utils/path-key"
+import { useMcpToggle } from "@/context/mcp"

 const statusLabels = {
  connected: "mcp.status.connected",
@@ -19,32 +16,15 @@ const statusLabels = {

 export const DialogSelectMcp: Component = () => {
  const sync = useSync()
-  const sdk = useSDK()
  const language = useLanguage()
-  const queryClient = useQueryClient()
-  const queryOptions = useQueryOptions()

  const items = createMemo(() =>
-    Object.entries(sync.data.mcp ?? {})
+    Object.entries(sync().data.mcp ?? {})
      .map(([name, status]) => ({ name, status: status.status }))
      .sort((a, b) => a.name.localeCompare(b.name)),
  )

-  const toggle = useMutation(() => ({
-    mutationFn: async (name: string) => {
-      const status = sync.data.mcp[name]
-      if (status?.status === "connected") {
-        await sdk.client.mcp.disconnect({ name })
-        return
-      }
-      if (status?.status === "needs_auth") {
-        await sdk.client.mcp.auth.authenticate({ name })
-        return
-      }
-      await sdk.client.mcp.connect({ name })
-    },
-    onSuccess: () => queryClient.refetchQueries(queryOptions.mcp(pathKey(sync.directory))),
-  }))
+  const toggle = useMcpToggle()

  const enabledCount = createMemo(() => items().filter((i) => i.status === "connected").length)
  const totalCount = createMemo(() => items().length)
@@ -68,7 +48,7 @@ export const DialogSelectMcp: Component = () => {
        }}
      >
        {(i) => {
-          const mcpStatus = () => sync.data.mcp[i.name]
+          const mcpStatus = () => sync().data.mcp[i.name]
          const status = () => mcpStatus()?.status
          const statusLabel = () => {
            const key = status() ? statusLabels[status() as keyof typeof statusLabels] : undefined
@@ -509,11 +509,16 @@ export function useServerManagementController(options: { onSelect?: () => void;
    resetEdit()
  })

-  async function handleRemove(url: ServerConnection.Key) {
-    tabs.removeServer(url)
-    server.remove(url)
-    if ((await platform.getDefaultServer?.()) === url) {
-      void platform.setDefaultServer?.(null)
+  async function handleRemove(key: ServerConnection.Key) {
+    try {
+      if (key.startsWith("wsl:")) await platform.wslServers?.removeServer(key)
+      tabs.removeServer(key)
+      server.remove(key)
+      if ((await platform.getDefaultServer?.()) === key) {
+        await setDefault(null)
+      }
+    } catch (err) {
+      showRequestError(language, err)
    }
  }

@@ -0,0 +1,7 @@
+import { ServerConnection } from "@/context/server"
+import type { Platform } from "@/context/platform"
+
+export function directoryPickerKind(platform: Platform["platform"], server: ServerConnection.Any) {
+  if (platform === "desktop" && ServerConnection.local(server)) return "native" as const
+  return "server" as const
+}
@@ -0,0 +1,21 @@
+import { describe, expect, test } from "bun:test"
+import { directoryPickerKind } from "./directory-picker-policy"
+
+const local = {
+  type: "sidecar",
+  variant: "base",
+  http: { url: "http://localhost:4096" },
+} as const
+const remote = {
+  type: "ssh",
+  host: "example.test",
+  http: { url: "http://localhost:4096" },
+} as const
+
+describe("directoryPickerKind", () => {
+  test("uses the native picker only for local desktop projects", () => {
+    expect(directoryPickerKind("desktop", local)).toBe("native")
+    expect(directoryPickerKind("desktop", remote)).toBe("server")
+    expect(directoryPickerKind("web", local)).toBe("server")
+  })
+})
@@ -0,0 +1,29 @@
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { ServerConnection } from "@/context/server"
+import { usePlatform } from "@/context/platform"
+import { DialogSelectDirectory } from "./dialog-select-directory"
+import { directoryPickerKind } from "./directory-picker-policy"
+
+type DirectoryPickerInput = {
+  server: ServerConnection.Any
+  title?: string
+  multiple?: boolean
+  onSelect: (result: string | string[] | null) => void
+}
+
+export function useDirectoryPicker() {
+  const platform = usePlatform()
+  const dialog = useDialog()
+
+  return (input: DirectoryPickerInput) => {
+    if (directoryPickerKind(platform.platform, input.server) === "native" && platform.platform === "desktop") {
+      void platform.openDirectoryPickerDialog({ title: input.title, multiple: input.multiple }).then(input.onSelect)
+      return
+    }
+
+    dialog.show(
+      () => <DialogSelectDirectory {...input} />,
+      () => input.onSelect(null),
+    )
+  }
+}
@@ -8,6 +8,8 @@ beforeAll(async () => {
  mock.module("@solidjs/router", () => ({
    useNavigate: () => () => undefined,
    useParams: () => ({}),
+    useLocation: () => ({}),
+    useSearchParams: () => [{}, () => undefined],
  }))
  mock.module("@/context/file", () => ({
    useFile: () => ({
@@ -0,0 +1,54 @@
+import { Icon } from "@opencode-ai/ui/v2/icon"
+import { Popover } from "@opencode-ai/ui/popover"
+import { createSignal, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+
+export function HelpButton() {
+  if (import.meta.env.VITE_OPENCODE_CHANNEL !== "dev") return null
+
+  const [state, setState] = /* persisted(Persist.global("help-button"), */ createStore({ dismissed: false }) /* ) */
+  const [shown, setShown] = createSignal(false)
+
+  return (
+    <Show when={!state.dismissed}>
+      <div class="fixed bottom-4 right-4 z-50">
+        <Popover
+          open={shown()}
+          onOpenChange={setShown}
+          triggerAs="button"
+          triggerProps={{
+            type: "button",
+            "aria-label": "Help",
+            class:
+              "size-7 rounded-full bg-background-base shadow-[var(--shadow-lg-border-base)] flex items-center justify-center text-text-base hover:text-text-strong transition-colors",
+          }}
+          trigger={<span aria-hidden="true">?</span>}
+          class="[&_[data-slot=popover-body]]:p-0 w-[320px] max-w-[calc(100vw-40px)] bg-transparent border-0 shadow-none rounded-xl"
+          gutter={8}
+          placement="top-end"
+        >
+          <Show when={shown()}>
+            <div class="relative flex flex-col gap-1 w-[320px] p-4 rounded-xl bg-background-strong shadow-[var(--shadow-lg-border-base)]">
+              <button
+                type="button"
+                aria-label="Close"
+                class="absolute top-3.5 right-3.5 size-6 rounded-md flex items-center justify-center text-text-base hover:text-text-strong hover:bg-surface-raised-base-hover transition-colors"
+                onClick={() => {
+                  setShown(false)
+                  setState("dismissed", true)
+                }}
+              >
+                <Icon name="xmark-small" />
+              </button>
+              <span class="text-14-regular text-text-strong">Lorem ipsum dolor sit amet</span>
+              <p class="text-12-regular text-text-weak">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+              </p>
+            </div>
+          </Show>
+        </Popover>
+      </div>
+    </Show>
+  )
+}
@@ -31,9 +31,10 @@ import {
  FileAttachmentPart,
 } from "@/context/prompt"
 import { useLayout } from "@/context/layout"
-import { useNavigate } from "@solidjs/router"
+import { useNavigate, useSearchParams } from "@solidjs/router"
 import { useSDK } from "@/context/sdk"
 import { useServer } from "@/context/server"
+import { useTabs } from "@/context/tabs"
 import { useSync } from "@/context/sync"
 import { useComments } from "@/context/comments"
 import { Button } from "@opencode-ai/ui/button"
@@ -52,12 +53,11 @@ import { usePermission } from "@/context/permission"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 import { useSettings } from "@/context/settings"
-import { serverAttachmentFile } from "./prompt-input/server-attachment"
 import { useSessionLayout } from "@/pages/session/session-layout"
 import { createSessionTabs } from "@/pages/session/helpers"
 import { createTextFragment, getCursorPosition, setCursorPosition, setRangeEdge } from "./prompt-input/editor-dom"
 import { createPromptAttachments } from "./prompt-input/attachments"
-import { ACCEPTED_FILE_TYPES } from "./prompt-input/files"
+import { ACCEPTED_FILE_TYPES, pickAttachmentFiles } from "./prompt-input/files"
 import {
  canNavigateHistoryAtCursor,
  navigatePromptHistory,
@@ -73,6 +73,8 @@ import { PromptContextItems } from "./prompt-input/context-items"
 import { PromptImageAttachments } from "./prompt-input/image-attachments"
 import { PromptDragOverlay } from "./prompt-input/drag-overlay"
 import { promptPlaceholder } from "./prompt-input/placeholder"
+import { useDirectoryPicker } from "./directory-picker"
+import { showToast } from "@/utils/toast"
 import { ImagePreview } from "@opencode-ai/ui/image-preview"
 import { useQueries } from "@tanstack/solid-query"
 import { useQueryOptions } from "@/context/server-sync"
@@ -140,7 +142,10 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  const permission = usePermission()
  const language = useLanguage()
  const platform = usePlatform()
+  const pickDirectory = useDirectoryPicker()
  const settings = useSettings()
+  const tabsStore = useTabs()
+  const [search] = useSearchParams<{ draftId?: string }>()
  const { params, tabs, view } = useSessionLayout()
  let editorRef!: HTMLDivElement
  let fileInputRef: HTMLInputElement | undefined
@@ -202,7 +207,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
    const sessionID = params.id
    if (!sessionID) return false

-    const diffs = sync.data.session_diff[sessionID]
+    const diffs = sync().data.session_diff[sessionID]
    if (!diffs) return false
    return diffs.some((diff) => diff.file === path)
  }
@@ -264,8 +269,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {

    return paths
  })
-  const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
-  const working = createMemo(() => sync.data.session_working(params.id ?? ""))
+  const info = createMemo(() => (params.id ? sync().session.get(params.id) : undefined))
+  const working = createMemo(() => sync().data.session_working(params.id ?? ""))
  const imageAttachments = createMemo(() =>
    prompt.current().filter((part): part is ImageAttachmentPart => part.type === "image"),
  )
@@ -344,7 +349,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  const hasUserPrompt = createMemo(() => {
    const sessionID = params.id
    if (!sessionID) return false
-    const messages = sync.data.message[sessionID]
+    const messages = sync().data.message[sessionID]
    if (!messages) return false
    return messages.some((m) => m.role === "user")
  })
@@ -467,23 +472,18 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  const escBlur = () => platform.platform === "desktop" && platform.os === "macos"

  const pick = () => {
-    if (server.isLocal()) {
-      fileInputRef?.click()
-      return
-    }
-    void import("@/components/dialog-select-file").then((module) =>
-      dialog.show(() => (
-        <module.DialogSelectFile
-          mode="files"
-          onSelectFile={(path) => {
-            void sdk.client.v2.fs
-              .read({ path })
-              .then((response) => response.data?.data)
-              .then((data) => data && addAttachments([serverAttachmentFile(path, data)]))
-          }}
-        />
-      )),
-    )
+    pickAttachmentFiles({
+      picker: platform.openAttachmentPickerDialog,
+      directory: () => sdk().directory,
+      fallback: () => fileInputRef?.click(),
+      onFile: addAttachment,
+      onError: (error) =>
+        showToast({
+          variant: "error",
+          title: language.t("common.requestFailed"),
+          description: error instanceof Error ? error.message : String(error),
+        }),
+    })
  }

  const setMode = (mode: "normal" | "shell") => {
@@ -603,8 +603,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  }

  const agentList = createMemo(() =>
-    sync.data.agent
-      .filter((agent) => !agent.hidden && agent.mode !== "primary")
+    sync()
+      .data.agent.filter((agent) => !agent.hidden && agent.mode !== "primary")
      .map((agent): AtOption => ({ type: "agent", name: agent.name, display: agent.name })),
  )
  const agentNames = createMemo(() => local.agent.list().map((agent) => agent.name))
@@ -644,6 +644,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
    },
    key: atKey,
    filterKeys: ["display"],
+    skipFilter: (item) => item.type === "file" && !item.recent,
    groupBy: (item) => {
      if (item.type === "agent") return "agent"
      if (item.recent) return "recent"
@@ -672,7 +673,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
        type: "builtin" as const,
      }))

-    const custom = sync.data.command.map((cmd) => ({
+    const custom = sync().data.command.map((cmd) => ({
      id: `custom.${cmd.name}`,
      trigger: cmd.name,
      title: cmd.name,
@@ -1094,7 +1095,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
    return true
  }

-  const { addAttachments, removeAttachment, handlePaste } = createPromptAttachments({
+  const { addAttachment, addAttachments, removeAttachment, handlePaste } = createPromptAttachments({
    editor: () => editorRef,
    isDialogActive: () => !!dialog.active,
    setDraggingType: (type) => setStore("draggingType", type),
@@ -1126,8 +1127,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  const showVariantControl = createMemo(() => local.model.variant.list().length > 0)
  const accepting = createMemo(() => {
    const id = params.id
-    if (!id) return permission.isAutoAcceptingDirectory(sdk.directory)
-    return permission.isAutoAccepting(id, sdk.directory)
+    if (!id) return permission.isAutoAcceptingDirectory(sdk().directory)
+    return permission.isAutoAccepting(id, sdk().directory)
  })

  const { abort, handleSubmit } = createPromptSubmit({
@@ -1318,9 +1319,9 @@ export const PromptInput: Component<PromptInputProps> = (props) => {

  const [agentsQuery, globalProvidersQuery, providersQuery] = useQueries(() => ({
    queries: [
-      queryOptions.agents(pathKey(sdk.directory)),
-      queryOptions.providers(null),
-      queryOptions.providers(pathKey(sdk.directory)),
+      queryOptions().agents(pathKey(sdk().directory)),
+      queryOptions().providers(null),
+      queryOptions().providers(pathKey(sdk().directory)),
    ],
  }))

@@ -1365,13 +1366,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
      (project) => pathKey(project.worktree) === key || project.sandboxes?.some((sandbox) => pathKey(sandbox) === key),
    )
  }
-  const selectedProject = createMemo(() => projectForDirectory(sdk.directory))
+  const selectedProject = createMemo(() => projectForDirectory(sdk().directory))
  const projectResults = createMemo(() => {
    const search = picker.projectSearch.trim().toLowerCase()
    if (!search) return projects()
    return projects().filter((project) => displayName(project).toLowerCase().includes(search))
  })
-  const showAgentControl = createMemo(() => settings.general.showCustomAgents() && agentNames().length > 0)
+  const showAgentControl = createMemo(() => settings.visibility.customAgents() && agentNames().length > 0)
  const selectProject = (worktree: string) => {
    setPicker({
      projectOpen: false,
@@ -1383,9 +1384,19 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
    }
    layout.projects.open(worktree)
    server.projects.touch(worktree)
+
+    // On the draft route, retarget the existing draft in place so we keep the same
+    // draft id (and its tab/prompt) instead of spawning a new draft for the new directory.
+    const draftID = search.draftId
+    if (draftID) {
+      tabsStore.updateDraft(draftID, { server: server.key, directory: worktree })
+      restoreFocus()
+      return
+    }
+
    navigate(`/${base64Encode(worktree)}/session`)
  }
-  const addProject = async () => {
+  const addProject = () => {
    const conn = server.current
    if (!conn) return
    const select = (result: string | string[] | null) => {
@@ -1393,15 +1404,10 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
      if (!directory) return
      selectProject(directory)
    }
-    if (platform.openDirectoryPickerDialog && server.isLocal()) {
-      select(await platform.openDirectoryPickerDialog({ title: language.t("command.project.open") }))
-      return
-    }
-    void import("@/components/dialog-select-directory").then((x) => {
-      dialog.show(
-        () => <x.DialogSelectDirectory onSelect={select} server={conn} />,
-        () => select(null),
-      )
+    pickDirectory({
+      server: conn,
+      title: language.t("command.project.open"),
+      onSelect: select,
    })
  }

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { attachmentMime } from "./files"
+import { attachmentMime, pickAttachmentFiles } from "./files"
 import { pasteMode } from "./paste"

 describe("attachmentMime", () => {
@@ -24,6 +24,70 @@ describe("attachmentMime", () => {
  })
 })

+describe("pickAttachmentFiles", () => {
+  test("reads the current project directory for every native picker invocation", async () => {
+    const paths: string[] = []
+    const files: File[] = []
+    const file = new File(["hello"], "hello.txt", { type: "text/plain" })
+    let directory = "C:\\Projects\\LoremIpsum"
+    const picker = async (options?: { defaultPath?: string }, onFile?: (file: File) => Promise<unknown>) => {
+      paths.push(options?.defaultPath ?? "")
+      await onFile?.(file)
+    }
+
+    pickAttachmentFiles({
+      picker,
+      directory: () => directory,
+      fallback: () => undefined,
+      onFile: async (selected) => files.push(selected),
+      onError: () => undefined,
+    })
+    await Promise.resolve()
+    directory = "C:\\Projects\\DolorSit"
+    pickAttachmentFiles({
+      picker,
+      directory: () => directory,
+      fallback: () => undefined,
+      onFile: async (selected) => files.push(selected),
+      onError: () => undefined,
+    })
+    await Promise.resolve()
+    expect(files).toEqual([file, file])
+    expect(paths).toEqual(["C:\\Projects\\LoremIpsum", "C:\\Projects\\DolorSit"])
+  })
+
+  test("uses the browser file input when no native picker exists", async () => {
+    let fallback = 0
+    pickAttachmentFiles({
+      directory: () => "/projects/consectetur-adipiscing",
+      fallback: () => {
+        fallback += 1
+      },
+      onFile: async () => undefined,
+      onError: () => undefined,
+    })
+    expect(fallback).toBe(1)
+  })
+
+  test("reports native picker failures without rejecting", async () => {
+    const error = new Error("picker unavailable")
+    const errors: unknown[] = []
+    const handled = Promise.withResolvers<void>()
+    pickAttachmentFiles({
+      picker: async () => Promise.reject(error),
+      directory: () => "C:\\Projects\\LoremIpsum",
+      fallback: () => undefined,
+      onFile: async () => undefined,
+      onError: (cause) => {
+        errors.push(cause)
+        handled.resolve()
+      },
+    })
+    await handled.promise
+    expect(errors).toEqual([error])
+  })
+})
+
 describe("pasteMode", () => {
  test("uses native paste for short single-line text", () => {
    expect(pasteMode("hello world")).toBe("native")
@@ -2,6 +2,38 @@ import { ACCEPTED_FILE_TYPES, ACCEPTED_IMAGE_TYPES } from "@/constants/file-pick

 export { ACCEPTED_FILE_TYPES }

+type AttachmentPicker = (
+  options: {
+    defaultPath?: string
+    multiple?: boolean
+    accept?: string[]
+  },
+  onFile: (file: File) => Promise<unknown>,
+) => Promise<void>
+
+export function pickAttachmentFiles(input: {
+  picker?: AttachmentPicker
+  directory: () => string
+  fallback: () => void
+  onFile: (file: File) => Promise<unknown>
+  onError: (error: unknown) => void
+}) {
+  if (!input.picker) {
+    input.fallback()
+    return
+  }
+  void input
+    .picker(
+      {
+        defaultPath: input.directory(),
+        multiple: true,
+        accept: ACCEPTED_FILE_TYPES,
+      },
+      input.onFile,
+    )
+    .catch(input.onError)
+}
+
 const IMAGE_MIMES = new Set(ACCEPTED_IMAGE_TYPES)
 const IMAGE_EXTS = new Map([
  ["gif", "image/gif"],
@@ -1,25 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { serverAttachmentFile } from "./server-attachment"
-
-describe("serverAttachmentFile", () => {
-  test("creates a file from server text content", async () => {
-    const file = serverAttachmentFile("docs/readme.txt", { type: "text", content: "hello", mime: "text/plain" })
-
-    expect(file.name).toBe("readme.txt")
-    expect(file.type).toBe("text/plain")
-    expect(await file.text()).toBe("hello")
-  })
-
-  test("creates a file from server base64 content", async () => {
-    const file = serverAttachmentFile("images/pixel.png", {
-      type: "binary",
-      content: "aGVsbG8=",
-      encoding: "base64",
-      mime: "image/png",
-    })
-
-    expect(file.name).toBe("pixel.png")
-    expect(file.type).toBe("image/png")
-    expect(await file.text()).toBe("hello")
-  })
-})
@@ -1,8 +0,0 @@
-import { getFilename } from "@opencode-ai/core/util/path"
-import type { FileSystemBinaryContent, FileSystemTextContent } from "@opencode-ai/sdk/v2"
-
-export function serverAttachmentFile(path: string, data: FileSystemTextContent | FileSystemBinaryContent) {
-  const content =
-    data.type === "text" ? data.content : Uint8Array.from(atob(data.content), (char) => char.charCodeAt(0))
-  return new File([content], getFilename(path), { type: data.mime })
-}
@@ -61,6 +61,8 @@ beforeAll(async () => {
  mock.module("@solidjs/router", () => ({
    useNavigate: () => () => undefined,
    useParams: () => params,
+    useLocation: () => ({}),
+    useSearchParams: () => [{}, () => undefined],
  }))

  mock.module("@opencode-ai/sdk/v2/client", () => ({
@@ -103,6 +105,16 @@ beforeAll(async () => {
    }),
  }))

+  mock.module("@/context/server", () => ({
+    useServer: () => ({ key: "server-key" }),
+  }))
+
+  mock.module("@/context/tabs", () => ({
+    useTabs: () => ({
+      promoteDraft: () => undefined,
+    }),
+  }))
+
  mock.module("@/context/prompt", () => ({
    usePrompt: () => ({
      current: () => promptValue,
@@ -135,12 +147,12 @@ beforeAll(async () => {
          return clientFor(opts.directory)
        },
      }
-      return sdk
+      return () => sdk
    },
  }))

  mock.module("@/context/sync", () => ({
-    useSync: () => ({
+    useSync: () => () => ({
      data: { command: [] },
      session: {
        optimistic: {
@@ -164,7 +176,7 @@ beforeAll(async () => {
  }))

  mock.module("@/context/server-sync", () => ({
-    useServerSync: () => ({
+    useServerSync: () => () => ({
      child: (directory: string) => {
        syncedDirectories.push(directory)
        storedSessions[directory] ??= []
@@ -2,17 +2,19 @@ import type { Message, Session } from "@opencode-ai/sdk/v2/client"
 import { showToast } from "@/utils/toast"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 import { Binary } from "@opencode-ai/core/util/binary"
-import { useNavigate, useParams } from "@solidjs/router"
+import { useNavigate, useParams, useSearchParams } from "@solidjs/router"
 import { batch, type Accessor } from "solid-js"
 import type { FileSelection } from "@/context/file"
-import { useServerSync } from "@/context/server-sync"
+import { useServer } from "@/context/server"
+import { useTabs } from "@/context/tabs"
+import { useServerSync, type ServerSync } from "@/context/server-sync"
 import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
 import { useLocal } from "@/context/local"
 import { usePermission } from "@/context/permission"
 import { type ContextItem, type ImageAttachmentPart, type Prompt, usePrompt } from "@/context/prompt"
-import { useSDK } from "@/context/sdk"
-import { useSync } from "@/context/sync"
+import { useSDK, type DirectorySDK } from "@/context/sdk"
+import { useSync, type DirectorySync } from "@/context/sync"
 import { Identifier } from "@/utils/id"
 import { Worktree as WorktreeState } from "@/utils/worktree"
 import { buildRequestParts } from "./build-request-parts"
@@ -38,9 +40,9 @@ export type FollowupDraft = {
 }

 type FollowupSendInput = {
-  client: ReturnType<typeof useSDK>["client"]
-  serverSync: ReturnType<typeof useServerSync>
-  sync: ReturnType<typeof useSync>
+  client: DirectorySDK["client"]
+  serverSync: ServerSync
+  sync: DirectorySync
  draft: FollowupDraft
  messageID?: string
  optimisticBusy?: boolean
@@ -213,7 +215,10 @@ export function createPromptSubmit(input: PromptSubmitInput) {
  const layout = useLayout()
  const language = useLanguage()
  const params = useParams()
-  const pendingKey = (sessionID: string) => ScopedKey.from(sdk.scope, sessionID)
+  const [search] = useSearchParams<{ draftId?: string }>()
+  const server = useServer()
+  const tabs = useTabs()
+  const pendingKey = (sessionID: string) => ScopedKey.from(sdk().scope, sessionID)

  const errorMessage = (err: unknown) => {
    if (err && typeof err === "object" && "data" in err) {
@@ -228,8 +233,8 @@ export function createPromptSubmit(input: PromptSubmitInput) {
    const sessionID = params.id
    if (!sessionID) return Promise.resolve()

-    serverSync.todo.set(sessionID, [])
-    const [, setStore] = serverSync.child(sdk.directory)
+    serverSync().todo.set(sessionID, [])
+    const [, setStore] = serverSync().child(sdk().directory)
    setStore("todo", sessionID, [])

    input.onAbort?.()
@@ -242,8 +247,8 @@ export function createPromptSubmit(input: PromptSubmitInput) {
      pending.delete(key)
      return Promise.resolve()
    }
-    return sdk.client.session
-      .abort({
+    return sdk()
+      .client.session.abort({
        sessionID,
      })
      .catch(() => {})
@@ -276,7 +281,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
  }

  const seed = (dir: string, info: Session) => {
-    const [, setStore] = serverSync.child(dir)
+    const [, setStore] = serverSync().child(dir)
    setStore("session", (list: Session[]) => {
      const result = Binary.search(list, info.id, (item) => item.id)
      const next = [...list]
@@ -316,13 +321,13 @@ export function createPromptSubmit(input: PromptSubmitInput) {
    input.addToHistory(currentPrompt, mode)
    input.resetHistoryNavigation()

-    const projectDirectory = sdk.directory
+    const projectDirectory = sdk().directory
    const isNewSession = !params.id
    const shouldAutoAccept = isNewSession && input.autoAccept()
    const worktreeSelection = input.newSessionWorktree?.() || "main"

    let sessionDirectory = projectDirectory
-    let client = sdk.client
+    let client = sdk().client

    if (isNewSession) {
      if (worktreeSelection === "create") {
@@ -344,7 +349,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
          })
          return
        }
-        WorktreeState.pending(sdk.scope, createdWorktree.directory)
+        WorktreeState.pending(sdk().scope, createdWorktree.directory)
        sessionDirectory = createdWorktree.directory
      }

@@ -353,11 +358,11 @@ export function createPromptSubmit(input: PromptSubmitInput) {
      }

      if (sessionDirectory !== projectDirectory) {
-        client = sdk.createClient({
+        client = sdk().createClient({
          directory: sessionDirectory,
          throwOnError: true,
        })
-        serverSync.child(sessionDirectory)
+        serverSync().child(sessionDirectory)
      }

      input.onNewSessionWorktreeReset?.()
@@ -381,7 +386,14 @@ export function createPromptSubmit(input: PromptSubmitInput) {
        if (shouldAutoAccept) permission.enableAutoAccept(session.id, sessionDirectory)
        local.session.promote(sessionDirectory, session.id)
        layout.handoff.setTabs(base64Encode(sessionDirectory), session.id)
-        navigate(`/${base64Encode(sessionDirectory)}/session/${session.id}`)
+        const draftID = search.draftId
+        if (draftID)
+          tabs.promoteDraft(draftID, {
+            server: server.key,
+            dirBase64: base64Encode(sessionDirectory),
+            sessionId: session.id,
+          })
+        else navigate(`/${base64Encode(sessionDirectory)}/session/${session.id}`)
      }
    }
    if (!session) {
@@ -458,7 +470,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
    if (text.startsWith("/")) {
      const [cmdName, ...args] = text.split(" ")
      const commandName = cmdName.slice(1)
-      const customCommand = sync.data.command.find((c) => c.name === commandName)
+      const customCommand = sync().data.command.find((c) => c.name === commandName)
      if (customCommand) {
        clearInput()
        client.session
@@ -492,7 +504,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
    const messageID = Identifier.ascending("message")

    const removeOptimisticMessage = () => {
-      sync.session.optimistic.remove({
+      sync().session.optimistic.remove({
        directory: sessionDirectory,
        sessionID: session.id,
        messageID,
@@ -503,17 +515,17 @@ export function createPromptSubmit(input: PromptSubmitInput) {
    clearInput()

    const waitForWorktree = async () => {
-      const worktree = WorktreeState.get(sdk.scope, sessionDirectory)
+      const worktree = WorktreeState.get(sdk().scope, sessionDirectory)
      if (!worktree || worktree.status !== "pending") return true

      if (sessionDirectory === projectDirectory) {
-        sync.set("session_status", session.id, { type: "busy" })
+        sync().set("session_status", session.id, { type: "busy" })
      }

      const controller = new AbortController()
      const cleanup = () => {
        if (sessionDirectory === projectDirectory) {
-          sync.set("session_status", session.id, { type: "idle" })
+          sync().set("session_status", session.id, { type: "idle" })
        }
        removeOptimisticMessage()
        restoreCommentItems(commentItems)
@@ -547,12 +559,14 @@ export function createPromptSubmit(input: PromptSubmitInput) {
        }, timeoutMs)
      })

-      const result = await Promise.race([WorktreeState.wait(sdk.scope, sessionDirectory), abortWait, timeout]).finally(
-        () => {
-          if (timer.id === undefined) return
-          clearTimeout(timer.id)
-        },
-      )
+      const result = await Promise.race([
+        WorktreeState.wait(sdk().scope, sessionDirectory),
+        abortWait,
+        timeout,
+      ]).finally(() => {
+        if (timer.id === undefined) return
+        clearTimeout(timer.id)
+      })
      pending.delete(pendingKey(session.id))
      if (controller.signal.aborted) return false
      if (result.status === "failed") throw new Error(result.message)
@@ -561,8 +575,8 @@ export function createPromptSubmit(input: PromptSubmitInput) {

    void sendFollowupDraft({
      client,
-      sync,
-      serverSync,
+      sync: sync(),
+      serverSync: serverSync(),
      draft,
      messageID,
      optimisticBusy: sessionDirectory === projectDirectory,
@@ -570,7 +584,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
    }).catch((err) => {
      pending.delete(pendingKey(session.id))
      if (sessionDirectory === projectDirectory) {
-        sync.set("session_status", session.id, { type: "idle" })
+        sync().set("session_status", session.id, { type: "idle" })
      }
      showToast({
        title: language.t("prompt.toast.promptSendFailed.title"),
@@ -42,7 +42,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
    pathFromTab: file.pathFromTab,
    normalizeTab: (tab) => (tab.startsWith("file://") ? file.tab(tab) : tab),
  })
-  const messages = createMemo(() => (params.id ? (sync.data.message[params.id] ?? []) : []))
+  const messages = createMemo(() => (params.id ? (sync().data.message[params.id] ?? []) : []))

  const usd = createMemo(
    () =>
@@ -96,13 +96,13 @@ export function SessionContextTab() {
  const providers = useProviders()
  const { params, view } = useSessionLayout()

-  const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
+  const info = createMemo(() => (params.id ? sync().session.get(params.id) : undefined))

  const messages = createMemo(
    () => {
      const id = params.id
      if (!id) return emptyMessages
-      return (sync.data.message[id] ?? []) as Message[]
+      return (sync().data.message[id] ?? []) as Message[]
    },
    emptyMessages,
    { equals: same },
@@ -180,7 +180,7 @@ export function SessionContextTab() {
        if (!c?.input) return []
        return estimateSessionContextBreakdown({
          messages: messages(),
-          parts: sync.data.part as Record<string, Part[] | undefined>,
+          parts: sync().data.part as Record<string, Part[] | undefined>,
          input: c.input,
          systemPrompt: systemPrompt(),
        })
@@ -221,7 +221,7 @@ export function SessionContextTab() {
  let scroll: HTMLDivElement | undefined
  let frame: number | undefined
  let pending: { x: number; y: number } | undefined
-  const getParts = (id: string) => (sync.data.part[id] ?? []) as Part[]
+  const getParts = (id: string) => (sync().data.part[id] ?? []) as Part[]

  const restoreScroll = () => {
    const el = scroll
@@ -155,11 +155,9 @@ export function SessionHeader() {
  })
  const hotkey = createMemo(() => command.keybind("file.open"))
  const os = createMemo(() => detectOS(platform))
-  const isDesktopV2 = createMemo(() => platform.platform === "desktop" && settings.general.newLayoutDesigns())
-  const search = createMemo(() => (isDesktopV2() ? settings.general.showSearch() : true))
-  const tree = createMemo(() => (isDesktopV2() ? settings.general.showFileTree() : true))
-  const term = createMemo(() => (isDesktopV2() ? settings.general.showTerminal() : true))
-  const status = createMemo(() => (isDesktopV2() ? settings.general.showStatus() : true))
+  const isV2 = settings.general.newLayoutDesigns
+  const search = settings.visibility.search
+  const status = settings.visibility.status

  const [exists, setExists] = createStore<Partial<Record<OpenApp, boolean>>>({
    finder: true,
@@ -231,7 +229,7 @@ export function SessionHeader() {
  )
  const opening = createMemo(() => openRequest.app !== undefined)
  const tint = createMemo(() =>
-    messageAgentColor(params.id ? sync.data.message[params.id] : undefined, sync.data.agent),
+    messageAgentColor(params.id ? sync().data.message[params.id] : undefined, sync().data.agent),
  )
  const v2ActionsState = createMemo<SessionHeaderV2ActionsState>(() => ({
    statusVisible: status(),
@@ -322,7 +320,7 @@ export function SessionHeader() {
        {(mount) => (
          <Portal mount={mount()}>
            <Show
-              when={isDesktopV2}
+              when={isV2}
              fallback={
                <div class="flex items-center gap-2">
                  <Show when={projectDirectory()}>
@@ -444,23 +442,21 @@ export function SessionHeader() {
                        <StatusPopover />
                      </Tooltip>
                    </Show>
-                    <Show when={term()}>
-                      <TooltipKeybind
-                        title={language.t("command.terminal.toggle")}
-                        keybind={command.keybind("terminal.toggle")}
+                    <TooltipKeybind
+                      title={language.t("command.terminal.toggle")}
+                      keybind={command.keybind("terminal.toggle")}
+                    >
+                      <Button
+                        variant="ghost"
+                        class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border shrink-0"
+                        onClick={toggleTerminal}
+                        aria-label={language.t("command.terminal.toggle")}
+                        aria-expanded={view().terminal.opened()}
+                        aria-controls="terminal-panel"
                      >
-                        <Button
-                          variant="ghost"
-                          class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border shrink-0"
-                          onClick={toggleTerminal}
-                          aria-label={language.t("command.terminal.toggle")}
-                          aria-expanded={view().terminal.opened()}
-                          aria-controls="terminal-panel"
-                        >
-                          <Icon size="small" name={view().terminal.opened() ? "terminal-active" : "terminal"} />
-                        </Button>
-                      </TooltipKeybind>
-                    </Show>
+                        <Icon size="small" name={view().terminal.opened() ? "terminal-active" : "terminal"} />
+                      </Button>
+                    </TooltipKeybind>

                    <div class="hidden md:flex items-center gap-1 shrink-0">
                      <TooltipKeybind
@@ -479,32 +475,30 @@ export function SessionHeader() {
                        </Button>
                      </TooltipKeybind>

-                      <Show when={tree()}>
-                        <TooltipKeybind
-                          title={language.t("command.fileTree.toggle")}
-                          keybind={command.keybind("fileTree.toggle")}
+                      <TooltipKeybind
+                        title={language.t("command.fileTree.toggle")}
+                        keybind={command.keybind("fileTree.toggle")}
+                      >
+                        <Button
+                          variant="ghost"
+                          class="titlebar-icon w-8 h-6 p-0 box-border"
+                          onClick={() => layout.fileTree.toggle()}
+                          aria-label={language.t("command.fileTree.toggle")}
+                          aria-expanded={layout.fileTree.opened()}
+                          aria-controls="file-tree-panel"
                        >
-                          <Button
-                            variant="ghost"
-                            class="titlebar-icon w-8 h-6 p-0 box-border"
-                            onClick={() => layout.fileTree.toggle()}
-                            aria-label={language.t("command.fileTree.toggle")}
-                            aria-expanded={layout.fileTree.opened()}
-                            aria-controls="file-tree-panel"
-                          >
-                            <div class="relative flex items-center justify-center size-4">
-                              <Icon
-                                size="small"
-                                name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"}
-                                classList={{
-                                  "text-icon-strong": layout.fileTree.opened(),
-                                  "text-icon-weak": !layout.fileTree.opened(),
-                                }}
-                              />
-                            </div>
-                          </Button>
-                        </TooltipKeybind>
-                      </Show>
+                          <div class="relative flex items-center justify-center size-4">
+                            <Icon
+                              size="small"
+                              name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"}
+                              classList={{
+                                "text-icon-strong": layout.fileTree.opened(),
+                                "text-icon-weak": !layout.fileTree.opened(),
+                              }}
+                            />
+                          </div>
+                        </Button>
+                      </TooltipKeybind>
                    </div>
                  </div>
                </div>
@@ -20,24 +20,24 @@ export function NewSessionView(props: NewSessionViewProps) {
  const sdk = useSDK()
  const language = useLanguage()

-  const sandboxes = createMemo(() => sync.project?.sandboxes ?? [])
+  const sandboxes = createMemo(() => sync().project?.sandboxes ?? [])
  const options = createMemo(() => [MAIN_WORKTREE, ...sandboxes(), CREATE_WORKTREE])
  const current = createMemo(() => {
    const selection = props.worktree
    if (options().includes(selection)) return selection
    return MAIN_WORKTREE
  })
-  const projectRoot = createMemo(() => sync.project?.worktree ?? sdk.directory)
+  const projectRoot = createMemo(() => sync().project?.worktree ?? sdk().directory)
  const isWorktree = createMemo(() => {
-    const project = sync.project
+    const project = sync().project
    if (!project) return false
-    return sdk.directory !== project.worktree
+    return sdk().directory !== project.worktree
  })

  const label = (value: string) => {
    if (value === MAIN_WORKTREE) {
      if (isWorktree()) return language.t("session.new.worktree.main")
-      const branch = sync.data.vcs?.branch
+      const branch = sync().data.vcs?.branch
      if (branch) return language.t("session.new.worktree.mainWithBranch", { branch })
      return language.t("session.new.worktree.main")
    }
@@ -69,7 +69,7 @@ export function NewSessionView(props: NewSessionViewProps) {
                {label(current())}
              </div>
            </div>
-            <Show when={sync.project}>
+            <Show when={sync().project}>
              {(project) => (
                <div class="flex items-start justify-center gap-3 min-h-5">
                  <div class="text-12-medium text-text-weak leading-5 min-w-0 max-w-160 break-words text-center">
@@ -1,5 +1,4 @@
 import { Component, Show, createMemo, createResource, onMount, type JSX } from "solid-js"
-import { createStore } from "solid-js/store"
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Select } from "@opencode-ai/ui/select"
@@ -8,13 +7,13 @@ import { TextField } from "@opencode-ai/ui/text-field"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { showToast } from "@/utils/toast"
 import { useParams } from "@solidjs/router"
 import { useLanguage } from "@/context/language"
 import { usePermission } from "@/context/permission"
 import { usePlatform, type DisplayBackend } from "@/context/platform"
 import { useServerSync } from "@/context/server-sync"
 import { useServerSDK } from "@/context/server-sdk"
+import { useUpdaterAction } from "./updater-action"
 import {
  monoDefault,
  monoFontFamily,
@@ -91,9 +90,7 @@ export const SettingsGeneral: Component = () => {
  const params = useParams()
  const settings = useSettings()

-  const [store, setStore] = createStore({
-    checking: false,
-  })
+  const updater = useUpdaterAction()

  const linux = createMemo(() => platform.platform === "desktop" && platform.os === "linux")
  const dir = createMemo(() => decode64(params.dir))
@@ -123,58 +120,6 @@ export const SettingsGeneral: Component = () => {
  }
  const desktop = createMemo(() => platform.platform === "desktop")

-  const check = () => {
-    if (!platform.checkUpdate) return
-    setStore("checking", true)
-
-    void platform
-      .checkUpdate()
-      .then((result) => {
-        if (!result.updateAvailable) {
-          showToast({
-            variant: "success",
-            icon: "circle-check",
-            title: language.t("settings.updates.toast.latest.title"),
-            description: language.t("settings.updates.toast.latest.description", { version: platform.version ?? "" }),
-          })
-          return
-        }
-
-        const actions = platform.updateAndRestart
-          ? [
-              {
-                label: language.t("toast.update.action.installRestart"),
-                onClick: async () => {
-                  await platform.updateAndRestart!()
-                },
-              },
-              {
-                label: language.t("toast.update.action.notYet"),
-                onClick: "dismiss" as const,
-              },
-            ]
-          : [
-              {
-                label: language.t("toast.update.action.notYet"),
-                onClick: "dismiss" as const,
-              },
-            ]
-
-        showToast({
-          persistent: true,
-          icon: "download",
-          title: language.t("toast.update.title"),
-          description: language.t("toast.update.description", { version: result.version ?? "" }),
-          actions,
-        })
-      })
-      .catch((err: unknown) => {
-        const message = err instanceof Error ? err.message : String(err)
-        showToast({ title: language.t("common.requestFailed"), description: message })
-      })
-      .finally(() => setStore("checking", false))
-  }
-
  const themeOptions = createMemo<ThemeOption[]>(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))

  const serverSync = useServerSync()
@@ -182,8 +127,8 @@ export const SettingsGeneral: Component = () => {

  const [shells] = createResource(
    () =>
-      serverSdk.client.pty
-        .shells()
+      serverSdk()
+        .client.pty.shells()
        .then((res) => res.data ?? [])
        .catch(() => [] as ShellOption[]),
    { initialValue: [] as ShellOption[] },
@@ -206,11 +151,11 @@ export const SettingsGeneral: Component = () => {
  })

  const autoOption = { id: "auto", value: "", label: language.t("settings.general.row.shell.autoDefault") }
-  const currentShell = createMemo(() => serverSync.data.config.shell ?? "")
+  const currentShell = createMemo(() => serverSync().data.config.shell ?? "")

  const shellOptions = createMemo<ShellSelectOption[]>(() => {
    const list = shells.latest
-    const current = serverSync.data.config.shell
+    const current = serverSync().data.config.shell

    const nameCounts = new Map<string, number>()
    for (const s of list) {
@@ -345,7 +290,7 @@ export const SettingsGeneral: Component = () => {
            onSelect={(option) => {
              if (!option) return
              if (option.value === currentShell()) return
-              serverSync.updateConfig({ shell: option.value })
+              serverSync().updateConfig({ shell: option.value })
            }}
            variant="secondary"
            size="small"
@@ -723,19 +668,6 @@ export const SettingsGeneral: Component = () => {
      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.updates")}</h3>

      <SettingsList>
-        <SettingsRow
-          title={language.t("settings.updates.row.startup.title")}
-          description={language.t("settings.updates.row.startup.description")}
-        >
-          <div data-action="settings-updates-startup">
-            <Switch
-              checked={settings.updates.startup()}
-              disabled={!platform.checkUpdate}
-              onChange={(checked) => settings.updates.setStartup(checked)}
-            />
-          </div>
-        </SettingsRow>
-
        <SettingsRow
          title={language.t("settings.general.row.releaseNotes.title")}
          description={language.t("settings.general.row.releaseNotes.description")}
@@ -752,10 +684,8 @@ export const SettingsGeneral: Component = () => {
          title={language.t("settings.updates.row.check.title")}
          description={language.t("settings.updates.row.check.description")}
        >
-          <Button size="small" variant="secondary" disabled={store.checking || !platform.checkUpdate} onClick={check}>
-            {store.checking
-              ? language.t("settings.updates.action.checking")
-              : language.t("settings.updates.action.checkNow")}
+          <Button size="small" variant="secondary" disabled={!updater.action().run} onClick={updater.run}>
+            {language.t(updater.action().label)}
          </Button>
        </SettingsRow>
      </SettingsList>
@@ -83,7 +83,7 @@ const SettingsProvidersContent: Component = () => {
  const note = (id: string) => PROVIDER_NOTES.find((item) => item.match(id))?.key

  const isConfigCustom = (providerID: string) => {
-    const provider = serverSync.data.config.provider?.[providerID]
+    const provider = serverSync().data.config.provider?.[providerID]
    if (!provider) return false
    if (provider.npm !== "@ai-sdk/openai-compatible") return false
    if (!provider.models || Object.keys(provider.models).length === 0) return false
@@ -91,11 +91,11 @@ const SettingsProvidersContent: Component = () => {
  }

  const disableProvider = async (providerID: string, name: string) => {
-    const before = serverSync.data.config.disabled_providers ?? []
+    const before = serverSync().data.config.disabled_providers ?? []
    const next = before.includes(providerID) ? before : [...before, providerID]
-    serverSync.set("config", "disabled_providers", next)
+    serverSync().set("config", "disabled_providers", next)

-    await serverSync
+    await serverSync()
      .updateConfig({ disabled_providers: next })
      .then(() => {
        showToast({
@@ -106,7 +106,7 @@ const SettingsProvidersContent: Component = () => {
        })
      })
      .catch((err: unknown) => {
-        serverSync.set("config", "disabled_providers", before)
+        serverSync().set("config", "disabled_providers", before)
        const message = err instanceof Error ? err.message : String(err)
        showToast({ title: language.t("common.requestFailed"), description: message })
      })
@@ -114,14 +114,16 @@ const SettingsProvidersContent: Component = () => {

  const disconnect = async (providerID: string, name: string) => {
    if (isConfigCustom(providerID)) {
-      await serverSDK.client.auth.remove({ providerID }).catch(() => undefined)
+      await serverSDK()
+        .client.auth.remove({ providerID })
+        .catch(() => undefined)
      await disableProvider(providerID, name)
      return
    }
-    await serverSDK.client.auth
-      .remove({ providerID })
+    await serverSDK()
+      .client.auth.remove({ providerID })
      .then(async () => {
-        await serverSDK.client.global.dispose()
+        await serverSDK().client.global.dispose()
        showToast({
          variant: "success",
          icon: "circle-check",
@@ -30,7 +30,7 @@ function SettingsServerDataProviders(props: ParentProps<{ server: ServerConnecti

  return (
    <QueryClientProvider client={serverCtx().queryClient}>
-      <ServerSDKProvider server={props.server}>
+      <ServerSDKProvider server={() => props.server}>
        <ServerSyncProvider>
          <ModelsProvider>{props.children}</ModelsProvider>
        </ServerSyncProvider>
@@ -1,20 +1,17 @@
 import { Component, Show, createMemo, createResource, onMount } from "solid-js"
-import { createStore } from "solid-js/store"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Icon } from "@opencode-ai/ui/icon"
 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 { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { showToast } from "@/utils/toast"
 import { useParams } from "@solidjs/router"
 import { useLanguage } from "@/context/language"
 import { usePermission } from "@/context/permission"
-import { usePlatform, type DisplayBackend } from "@/context/platform"
+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,
@@ -93,11 +90,8 @@ export const SettingsGeneralV2: Component = () => {
  const params = useParams()
  const settings = useSettings()

-  const [store, setStore] = createStore({
-    checking: false,
-  })
+  const updater = useUpdaterAction()

-  const linux = createMemo(() => platform.platform === "desktop" && platform.os === "linux")
  const dir = createMemo(() => decode64(params.dir))
  const accepting = createMemo(() => {
    const value = dir()
@@ -125,58 +119,6 @@ export const SettingsGeneralV2: Component = () => {
  }
  const desktop = createMemo(() => platform.platform === "desktop")

-  const check = () => {
-    if (!platform.checkUpdate) return
-    setStore("checking", true)
-
-    void platform
-      .checkUpdate()
-      .then((result) => {
-        if (!result.updateAvailable) {
-          showToast({
-            variant: "success",
-            icon: "circle-check",
-            title: language.t("settings.updates.toast.latest.title"),
-            description: language.t("settings.updates.toast.latest.description", { version: platform.version ?? "" }),
-          })
-          return
-        }
-
-        const actions = platform.updateAndRestart
-          ? [
-              {
-                label: language.t("toast.update.action.installRestart"),
-                onClick: async () => {
-                  await platform.updateAndRestart!()
-                },
-              },
-              {
-                label: language.t("toast.update.action.notYet"),
-                onClick: "dismiss" as const,
-              },
-            ]
-          : [
-              {
-                label: language.t("toast.update.action.notYet"),
-                onClick: "dismiss" as const,
-              },
-            ]
-
-        showToast({
-          persistent: true,
-          icon: "download",
-          title: language.t("toast.update.title"),
-          description: language.t("toast.update.description", { version: result.version ?? "" }),
-          actions,
-        })
-      })
-      .catch((err: unknown) => {
-        const message = err instanceof Error ? err.message : String(err)
-        showToast({ title: language.t("common.requestFailed"), description: message })
-      })
-      .finally(() => setStore("checking", false))
-  }
-
  const themeOptions = createMemo<ThemeOption[]>(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))

  const serverSync = useServerSync()
@@ -184,19 +126,13 @@ export const SettingsGeneralV2: Component = () => {

  const [shells] = createResource(
    () =>
-      serverSdk.client.pty
-        .shells()
+      serverSdk()
+        .client.pty.shells()
        .then((res) => res.data ?? [])
        .catch(() => [] as ShellOption[]),
    { initialValue: [] as ShellOption[] },
  )

-  const [displayBackend, { refetch: refetchDisplayBackend }] = createResource(
-    () => (linux() && platform.getDisplayBackend ? true : false),
-    () => Promise.resolve(platform.getDisplayBackend?.() ?? null).catch(() => null as DisplayBackend | null),
-    { initialValue: null as DisplayBackend | null },
-  )
-
  const [pinchZoom, { mutate: setPinchZoom }] = createResource(
    () => (desktop() && platform.getPinchZoomEnabled ? true : false),
    () => Promise.resolve(platform.getPinchZoomEnabled?.() ?? false).catch(() => false),
@@ -208,11 +144,11 @@ export const SettingsGeneralV2: Component = () => {
  })

  const autoOption = { id: "auto", value: "", label: language.t("settings.general.row.shell.autoDefault") }
-  const currentShell = createMemo(() => serverSync.data.config.shell ?? "")
+  const currentShell = createMemo(() => serverSync().data.config.shell ?? "")

  const shellOptions = createMemo<ShellSelectOption[]>(() => {
    const list = shells.latest
-    const current = serverSync.data.config.shell
+    const current = serverSync().data.config.shell

    const nameCounts = new Map<string, number>()
    for (const s of list) {
@@ -241,14 +177,6 @@ export const SettingsGeneralV2: Component = () => {
    return options
  })

-  const onDisplayBackendChange = (checked: boolean) => {
-    const update = platform.setDisplayBackend?.(checked ? "wayland" : "auto")
-    if (!update) return
-    void update.finally(() => {
-      void refetchDisplayBackend()
-    })
-  }
-
  const onPinchZoomChange = (checked: boolean) => {
    setPinchZoom(checked)
    const update = platform.setPinchZoomEnabled?.(checked)
@@ -347,7 +275,7 @@ export const SettingsGeneralV2: Component = () => {
            onSelect={(option) => {
              if (!option) return
              if (option.value === currentShell()) return
-              serverSync.updateConfig({ shell: option.value })
+              serverSync().updateConfig({ shell: option.value })
            }}
          />
        </SettingsRowV2>
@@ -438,18 +366,6 @@ export const SettingsGeneralV2: Component = () => {
          </div>
        </SettingsRowV2>

-        <SettingsRowV2
-          title={language.t("settings.general.row.showNavigation.title")}
-          description={language.t("settings.general.row.showNavigation.description")}
-        >
-          <div data-action="settings-show-navigation">
-            <Switch
-              checked={settings.general.showNavigation()}
-              onChange={(checked) => settings.general.setShowNavigation(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
        <SettingsRowV2
          title={language.t("settings.general.row.showSearch.title")}
          description={language.t("settings.general.row.showSearch.description")}
@@ -462,18 +378,6 @@ export const SettingsGeneralV2: Component = () => {
          </div>
        </SettingsRowV2>

-        <SettingsRowV2
-          title={language.t("settings.general.row.showTerminal.title")}
-          description={language.t("settings.general.row.showTerminal.description")}
-        >
-          <div data-action="settings-show-terminal">
-            <Switch
-              checked={settings.general.showTerminal()}
-              onChange={(checked) => settings.general.setShowTerminal(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
        <SettingsRowV2
          title={language.t("settings.general.row.showStatus.title")}
          description={language.t("settings.general.row.showStatus.description")}
@@ -740,19 +644,6 @@ export const SettingsGeneralV2: Component = () => {
      <h3 class="settings-v2-section-title">{language.t("settings.general.section.updates")}</h3>

      <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.updates.row.startup.title")}
-          description={language.t("settings.updates.row.startup.description")}
-        >
-          <div data-action="settings-updates-startup">
-            <Switch
-              checked={settings.updates.startup()}
-              disabled={!platform.checkUpdate}
-              onChange={(checked) => settings.updates.setStartup(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
        <SettingsRowV2
          title={language.t("settings.general.row.releaseNotes.title")}
          description={language.t("settings.general.row.releaseNotes.description")}
@@ -769,16 +660,15 @@ 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={store.checking || !platform.checkUpdate} onClick={check}>
-            {store.checking
-              ? language.t("settings.updates.action.checking")
-              : language.t("settings.updates.action.checkNow")}
+          <ButtonV2 size="normal" variant="neutral" disabled={!updater.action().run} onClick={updater.run}>
+            {language.t(updater.action().label)}
          </ButtonV2>
        </SettingsRowV2>
      </SettingsListV2>
    </div>
  )

+  // We can probably remove this, right?
  const DisplaySection = () => (
    <Show when={desktop()}>
      <div class="settings-v2-section">
@@ -793,26 +683,6 @@ export const SettingsGeneralV2: Component = () => {
              <Switch checked={pinchZoom.latest} onChange={onPinchZoomChange} />
            </div>
          </SettingsRowV2>
-
-          <Show when={linux()}>
-            <SettingsRowV2
-              title={
-                <div class="flex items-center gap-2">
-                  <span>{language.t("settings.general.row.wayland.title")}</span>
-                  <Tooltip value={language.t("settings.general.row.wayland.tooltip")} placement="top">
-                    <span class="text-text-weak">
-                      <Icon name="help" size="small" />
-                    </span>
-                  </Tooltip>
-                </div>
-              }
-              description={language.t("settings.general.row.wayland.description")}
-            >
-              <div data-action="settings-wayland">
-                <Switch checked={displayBackend.latest === "wayland"} onChange={onDisplayBackendChange} />
-              </div>
-            </SettingsRowV2>
-          </Show>
        </SettingsListV2>
      </div>
    </Show>
@@ -833,13 +703,13 @@ export const SettingsGeneralV2: Component = () => {

        <SoundsSection />

-        <UpdatesSection />
+        <Show when={desktop()}>
+          <UpdatesSection />
+        </Show>

        <DisplaySection />

-        <Show when={desktop()}>
-          <AdvancedSection />
-        </Show>
+        <AdvancedSection />
      </div>
    </>
  )
@@ -77,7 +77,7 @@ export const SettingsProvidersV2: Component = () => {
  const note = (id: string) => PROVIDER_NOTES.find((item) => item.match(id))?.key

  const isConfigCustom = (providerID: string) => {
-    const provider = serverSync.data.config.provider?.[providerID]
+    const provider = serverSync().data.config.provider?.[providerID]
    if (!provider) return false
    if (provider.npm !== "@ai-sdk/openai-compatible") return false
    if (!provider.models || Object.keys(provider.models).length === 0) return false
@@ -85,11 +85,11 @@ export const SettingsProvidersV2: Component = () => {
  }

  const disableProvider = async (providerID: string, name: string) => {
-    const before = serverSync.data.config.disabled_providers ?? []
+    const before = serverSync().data.config.disabled_providers ?? []
    const next = before.includes(providerID) ? before : [...before, providerID]
-    serverSync.set("config", "disabled_providers", next)
+    serverSync().set("config", "disabled_providers", next)

-    await serverSync
+    await serverSync()
      .updateConfig({ disabled_providers: next })
      .then(() => {
        showToast({
@@ -100,7 +100,7 @@ export const SettingsProvidersV2: Component = () => {
        })
      })
      .catch((err: unknown) => {
-        serverSync.set("config", "disabled_providers", before)
+        serverSync().set("config", "disabled_providers", before)
        const message = err instanceof Error ? err.message : String(err)
        showToast({ title: language.t("common.requestFailed"), description: message })
      })
@@ -108,14 +108,16 @@ export const SettingsProvidersV2: Component = () => {

  const disconnect = async (providerID: string, name: string) => {
    if (isConfigCustom(providerID)) {
-      await serverSdk.client.auth.remove({ providerID }).catch(() => undefined)
+      await serverSdk()
+        .client.auth.remove({ providerID })
+        .catch(() => undefined)
      await disableProvider(providerID, name)
      return
    }
-    await serverSdk.client.auth
-      .remove({ providerID })
+    await serverSdk()
+      .client.auth.remove({ providerID })
      .then(async () => {
-        await serverSdk.client.global.dispose()
+        await serverSdk().client.global.dispose()
        showToast({
          variant: "success",
          icon: "circle-check",
@@ -3,7 +3,6 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Switch } from "@opencode-ai/ui/switch"
 import { Tabs } from "@opencode-ai/ui/tabs"
-import { useMutation, useQueryClient } from "@tanstack/solid-query"
 import { showToast } from "@/utils/toast"
 import { useNavigate } from "@solidjs/router"
 import { type Accessor, createEffect, createMemo, For, type JSXElement, onCleanup, Show } from "solid-js"
@@ -11,14 +10,12 @@ import { createStore } from "solid-js/store"
 import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
-import { useSDK } from "@/context/sdk"
 import { ServerConnection, useServer } from "@/context/server"
 import { useSync } from "@/context/sync"
 import { type ServerHealth } from "@/utils/server-health"
-import { useQueryOptions } from "@/context/server-sync"
-import { pathKey } from "@/utils/path-key"
 import { useGlobal } from "@/context/global"
 import { useSettings } from "@/context/settings"
+import { useMcpToggle } from "@/context/mcp"

 const pluginEmptyMessage = (value: string, file: string): JSXElement => {
  const parts = value.split(file)
@@ -99,37 +96,6 @@ const useDefaultServerKey = (
  }
 }

-const useMcpToggleMutation = () => {
-  const sync = useSync()
-  const sdk = useSDK()
-  const language = useLanguage()
-  const queryClient = useQueryClient()
-  const queryOptions = useQueryOptions()
-
-  return useMutation(() => ({
-    mutationFn: async (name: string) => {
-      const status = sync.data.mcp[name]
-      if (status?.status === "connected") {
-        await sdk.client.mcp.disconnect({ name })
-        return
-      }
-      if (status?.status === "needs_auth") {
-        await sdk.client.mcp.auth.authenticate({ name })
-        return
-      }
-      await sdk.client.mcp.connect({ name })
-    },
-    onSuccess: () => queryClient.refetchQueries(queryOptions.mcp(pathKey(sync.directory))),
-    onError: (err) => {
-      showToast({
-        variant: "error",
-        title: language.t("common.requestFailed"),
-        description: err instanceof Error ? err.message : String(err),
-      })
-    },
-  }))
-}
-
 type ServerStatusState = {
  servers: () => ServerStatusItem[]
  defaultKey: () => ServerConnection.Key | undefined
@@ -311,15 +277,15 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
    dialogRun += 1
  })
  const sortedServers = createMemo(() => listServersByHealth(global.servers.list(), server.key, global.servers.health))
-  const toggleMcp = useMcpToggleMutation()
+  const toggleMcp = useMcpToggle()
  const defaultServer = useDefaultServerKey(platform.getDefaultServer)
-  const mcpNames = createMemo(() => Object.keys(sync.data.mcp ?? {}).sort((a, b) => a.localeCompare(b)))
-  const mcpStatus = (name: string) => sync.data.mcp?.[name]?.status
+  const mcpNames = createMemo(() => Object.keys(sync().data.mcp ?? {}).sort((a, b) => a.localeCompare(b)))
+  const mcpStatus = (name: string) => sync().data.mcp?.[name]?.status
  const mcpConnected = createMemo(() => mcpNames().filter((name) => mcpStatus(name) === "connected").length)
-  const lspItems = createMemo(() => sync.data.lsp ?? [])
+  const lspItems = createMemo(() => sync().data.lsp ?? [])
  const lspCount = createMemo(() => lspItems().length)
  const plugins = createMemo(() =>
-    (sync.data.config.plugin ?? []).map((item) => (typeof item === "string" ? item : item[0])),
+    (sync().data.config.plugin ?? []).map((item) => (typeof item === "string" ? item : item[0])),
  )
  const pluginCount = createMemo(() => plugins().length)
  const pluginEmpty = createMemo(() => pluginEmptyMessage(language.t("dialog.plugins.empty"), "opencode.json"))
@@ -18,9 +18,9 @@ export function StatusPopover() {
  const global = useGlobal()
  const sync = useSync()
  const [shown, setShown] = createSignal(false)
-  const ready = createMemo(() => global.servers.health[server.key]?.healthy === false || sync.data.mcp_ready)
+  const ready = createMemo(() => global.servers.health[server.key]?.healthy === false || sync().data.mcp_ready)
  const mcpIssue = createMemo(() => {
-    const mcp = Object.values(sync.data.mcp ?? {})
+    const mcp = Object.values(sync().data.mcp ?? {})
    const failed = mcp.some((item) => item.status === "failed" || item.status === "needs_client_registration")
    const warn = mcp.some((item) => item.status === "needs_auth")
    if (failed) return "critical" as const
@@ -86,9 +86,9 @@ function DirectoryStatusPopover() {
  const sync = useSync()
  const [shown, setShown] = createSignal(false)
  const serverHealth = () => global.servers.health[server.key]?.healthy
-  const ready = createMemo(() => serverHealth() === false || sync.data.mcp_ready)
+  const ready = createMemo(() => serverHealth() === false || sync().data.mcp_ready)
  const mcpIssue = createMemo(() => {
-    const mcp = Object.values(sync.data.mcp ?? {})
+    const mcp = Object.values(sync().data.mcp ?? {})
    const failed = mcp.some((item) => item.status === "failed" || item.status === "needs_client_registration")
    const warn = mcp.some((item) => item.status === "needs_auth")
    if (failed) return "critical" as const
@@ -161,9 +161,9 @@ export const Terminal = (props: TerminalProps) => {
  const theme = useTheme()
  const language = useLanguage()
  const server = useServer()
-  const directory = sdk.directory
-  const client = sdk.client
-  const url = sdk.url
+  const directory = sdk().directory
+  const client = sdk().client
+  const url = sdk().url
  const auth = server.current?.http
  const username = auth?.username ?? "opencode"
  const password = auth?.password ?? ""
@@ -0,0 +1,46 @@
+@keyframes titlebar-tab-fade-left {
+  from {
+    visibility: hidden;
+  }
+  to {
+    visibility: visible;
+  }
+}
+
+@keyframes titlebar-tab-fade-right {
+  from {
+    visibility: visible;
+  }
+  to {
+    visibility: hidden;
+  }
+}
+
+/* The narrow ranges preserve the binary thresholds of scrollLeft > 0 and
+   remaining scroll distance > 1px. Hidden defaults make an inactive timeline
+   (no overflow) a no-op. Unsupported browsers also degrade to no fades. */
+[data-slot="titlebar-tabs"] {
+  timeline-scope: --titlebar-tabs-scroll;
+
+  [data-slot^="titlebar-tabs-fade-"] {
+    visibility: hidden;
+  }
+}
+
+@supports (animation-timeline: --titlebar-tabs-scroll) and (timeline-scope: --titlebar-tabs-scroll) {
+  [data-slot="titlebar-tabs-scroll"] {
+    scroll-timeline: --titlebar-tabs-scroll x;
+  }
+
+  [data-slot="titlebar-tabs-fade-left"] {
+    animation: titlebar-tab-fade-left linear both;
+    animation-timeline: --titlebar-tabs-scroll;
+    animation-range: 0 0.1px;
+  }
+
+  [data-slot="titlebar-tabs-fade-right"] {
+    animation: titlebar-tab-fade-right linear both;
+    animation-timeline: --titlebar-tabs-scroll;
+    animation-range: calc(100% - 1.1px) calc(100% - 1px);
+  }
+}
@@ -34,11 +34,13 @@ import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { displayName, getProjectAvatarSource, projectForSession } from "@/pages/layout/helpers"
 import { useSessionTabAvatarState } from "@/pages/layout/project-avatar-state"
 import { makeEventListener } from "@solid-primitives/event-listener"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { readSessionTabsRemovedDetail, SESSION_TABS_REMOVED_EVENT } from "@/components/titlebar-session-events"
 import { useGlobal } from "@/context/global"
 import { decode64 } from "@/utils/base64"
 import { ServerConnection, useServer } from "@/context/server"
 import { tabHref, useTabs, type Tab } from "@/context/tabs"
+import "./titlebar.css"

 type TauriDesktopWindow = {
  startDragging?: () => Promise<void>
@@ -280,7 +282,8 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {

            const matchRoute = (route: LayoutRoute) => {
              if (route.type === "home") return
-              if (route.type === "dir-new-sesssion") {
+              if (route.type === "draft") {
+                return tabsStore.find((item) => item.type === "draft" && item.draftID === route.draftID)
              }
              if (route.type === "session") {
                const main = tabsStore.find(
@@ -288,7 +291,7 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                    item.type === "session" && item.server === route.server && item.sessionId === route.sessionId,
                )
                if (main) return main
-                const sync = serverSync.createDirSyncContext(route.dir)
+                const sync = serverSync().createDirSyncContext(route.dir)
                const session = sync.session.get(route.sessionId)
                if (session?.parentID) {
                  const parentID = session.parentID
@@ -309,7 +312,7 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
              if (tab) return

              if (route.type === "session") {
-                const sync = serverSync.createDirSyncContext(route.dir)
+                const sync = serverSync().createDirSyncContext(route.dir)
                const session = sync.session.get(route.sessionId)
                if (!session) return
                const sessionId = session.parentID ?? session.id
@@ -434,70 +437,107 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                  state={!!homeMatch() ? "pressed" : undefined}
                />

-                <div
-                  class="flex min-w-0 flex-row items-center gap-1.5 overflow-x-auto no-scrollbar [app-region:no-drag]"
-                  ref={tabScrollRef}
-                >
-                  <div class="flex min-w-0 flex-row items-center gap-1.5">
-                    <For each={tabsStore}>
-                      {(tab, i) => {
-                        let ref!: HTMLDivElement
+                <div data-slot="titlebar-tabs" class="relative min-w-0">
+                  <div
+                    data-slot="titlebar-tabs-scroll"
+                    class="flex min-w-0 flex-row items-center gap-1.5 overflow-x-auto no-scrollbar [app-region:no-drag]"
+                    ref={(el) => {
+                      tabScrollRef = el
+                      createResizeObserver(el, refreshTabsAreOverflowing)
+                    }}
+                  >
+                    <div
+                      class="flex min-w-0 flex-row items-center gap-1.5"
+                      ref={(el) => createResizeObserver(el, refreshTabsAreOverflowing)}
+                    >
+                      <For each={tabsStore}>
+                        {(tab, i) => {
+                          let ref!: HTMLDivElement

-                        onMount(() => {
-                          refreshTabsAreOverflowing()
-                        })
-
-                        return (
-                          <>
-                            {i() !== 0 && (
+                          const divider = () =>
+                            i() !== 0 && (
                              <div class="w-[1.5px] h-3 shrink-0 rounded-full bg-[var(--v2-background-bg-layer-02)]" />
-                            )}
-                            <TabNavItem
-                              ref={ref}
-                              href={tabHref(tab)}
-                              server={tab.server}
-                              directory={decode64(tab.dirBase64)!}
-                              sessionId={tab.sessionId}
-                              onNavigate={() => {
-                                navigateTab(tab)
+                            )

-                                ref.scrollIntoView({ behavior: "instant" })
-                              }}
-                              onClose={() => tabsStoreActions.removeTab(i())}
-                              active={currentTab() === tab}
-                              activeServer={tab.server === server.key}
-                              forceTruncate={tabsAreOverflowing()}
-                            />
-                          </>
-                        )
-                      }}
-                    </For>
-                    <Show when={creating() && params.dir}>
-                      {(_) => {
-                        let ref!: HTMLDivElement
+                          if (tab.type === "draft") {
+                            return (
+                              <>
+                                {divider()}
+                                <DraftTabItem
+                                  ref={ref}
+                                  href={tabHref(tab)}
+                                  title={language.t("command.session.new")}
+                                  active={currentTab() === tab}
+                                  onNavigate={() => {
+                                    navigateTab(tab)
+                                    ref.scrollIntoView({ behavior: "instant" })
+                                  }}
+                                  onClose={() => tabsStoreActions.removeTab(i())}
+                                />
+                              </>
+                            )
+                          }

-                        onMount(() => {
-                          ref.scrollIntoView({ behavior: "instant" })
-                        })
+                          return (
+                            <>
+                              {divider()}
+                              <TabNavItem
+                                ref={ref}
+                                href={tabHref(tab)}
+                                server={tab.server}
+                                directory={decode64(tab.dirBase64)!}
+                                sessionId={tab.sessionId}
+                                onNavigate={() => {
+                                  navigateTab(tab)

-                        return (
-                          <>
-                            <div class="w-[1.5px] h-3 shrink-0 rounded-full bg-[var(--v2-background-bg-layer-02)]" />
-                            <NewSessionTabItem
-                              ref={ref}
-                              href={`/${params.dir}/session`}
-                              title={language.t("command.session.new")}
-                              onClose={() => {
-                                const tab = tabsStore.at(-1)
-                                if (tab) navigateTab(tab)
-                                else navigate("/")
-                              }}
-                            />
-                          </>
-                        )
-                      }}
-                    </Show>
+                                  ref.scrollIntoView({ behavior: "instant" })
+                                }}
+                                onClose={() => tabsStoreActions.removeTab(i())}
+                                active={currentTab() === tab}
+                                activeServer={tab.server === server.key}
+                                forceTruncate={tabsAreOverflowing()}
+                              />
+                            </>
+                          )
+                        }}
+                      </For>
+                      <Show when={creating() && params.dir}>
+                        {(_) => {
+                          let ref!: HTMLDivElement
+
+                          onMount(() => {
+                            ref.scrollIntoView({ behavior: "instant" })
+                          })
+
+                          return (
+                            <>
+                              <div class="w-[1.5px] h-3 shrink-0 rounded-full bg-[var(--v2-background-bg-layer-02)]" />
+                              <NewSessionTabItem
+                                ref={ref}
+                                href={`/${params.dir}/session`}
+                                title={language.t("command.session.new")}
+                                onClose={() => {
+                                  const tab = tabsStore.at(-1)
+                                  if (tab) navigateTab(tab)
+                                  else navigate("/")
+                                }}
+                              />
+                            </>
+                          )
+                        }}
+                      </Show>
+                    </div>
                  </div>
+                  <div
+                    data-slot="titlebar-tabs-fade-left"
+                    aria-hidden="true"
+                    class="pointer-events-none absolute inset-y-0 left-0 z-10 w-6 bg-[linear-gradient(to_right,var(--v2-background-bg-deep),transparent)]"
+                  />
+                  <div
+                    data-slot="titlebar-tabs-fade-right"
+                    aria-hidden="true"
+                    class="pointer-events-none absolute inset-y-0 right-0 z-10 w-6 bg-[linear-gradient(to_left,var(--v2-background-bg-deep),transparent)]"
+                  />
                </div>
                <Show when={!(creating() && params.dir)}>
                  <IconButtonV2
@@ -782,7 +822,6 @@ function TabNavItem(props: {
    >
      <Show when={session.latest}>
        {(session) => {
-          console.log({ session: session() })
          const project = createMemo(() => projectForSession(session(), serverCtx()?.projects.list() ?? []))

          return (
@@ -851,6 +890,59 @@ function ProjectTabAvatar(props: {
  )
 }

+function DraftTabItem(props: {
+  ref?: HTMLDivElement
+  href: string
+  title: string
+  active?: boolean
+  onNavigate: () => void
+  onClose: () => void
+}) {
+  const closeTab = (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    props.onClose()
+  }
+  return (
+    <div
+      ref={props.ref}
+      data-active={props.active}
+      class="group relative shrink-0 flex h-7 max-w-60 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] bg-[var(--tab-bg)] pl-1.5 pr-8 whitespace-nowrap [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-overlay-simple-overlay-pressed)] focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-[var(--v2-border-border-focus)]"
+      onMouseDown={(event) => {
+        if (event.button !== 1) return
+        closeTab(event)
+      }}
+    >
+      <a
+        href={props.href}
+        onClick={(event) => {
+          event.preventDefault()
+          props.onNavigate()
+        }}
+        class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 overflow-hidden text-[13px] font-medium leading-5 text-v2-text-text-faint group-data-[active='true']:text-[var(--v2-text-text-base)]"
+      >
+        <span class="flex size-4 shrink-0 rotate-90 items-center justify-center">
+          <IconV2 name="edit" />
+        </span>
+        <span class="truncate leading-5">{props.title}</span>
+      </a>
+      <div class="absolute right-0 inset-y-0 flex w-7 items-center justify-center">
+        <IconButtonV2
+          size="small"
+          variant="ghost-muted"
+          onMouseDown={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+          }}
+          onClick={closeTab}
+          icon={<IconV2 name="xmark-small" />}
+          aria-label="Close tab"
+        />
+      </div>
+    </div>
+  )
+}
+
 function NewSessionTabItem(props: { ref?: HTMLDivElement; href: string; title: string; onClose: () => void }) {
  const closeTab = (event: MouseEvent) => {
    event.preventDefault()
@@ -0,0 +1,26 @@
+import { describe, expect, test } from "bun:test"
+import { updaterAction } from "./updater-action"
+
+describe("updaterAction", () => {
+  test("disables update actions when the platform has no updater", () => {
+    expect(updaterAction(undefined)).toEqual({ label: "settings.updates.action.checkNow" })
+  })
+
+  test("projects updater transitions into one settings action", () => {
+    expect(updaterAction({ status: "idle" })).toEqual({
+      label: "settings.updates.action.checkNow",
+      run: "check",
+    })
+    expect(updaterAction({ status: "checking" })).toEqual({ label: "settings.updates.action.checking" })
+    expect(updaterAction({ status: "downloading", version: "2.0.0" })).toEqual({
+      label: "settings.updates.action.downloading",
+    })
+    expect(updaterAction({ status: "ready", version: "2.0.0" })).toEqual({
+      label: "toast.update.action.installRestart",
+      run: "install",
+    })
+    expect(updaterAction({ status: "installing", version: "2.0.0" })).toEqual({
+      label: "settings.updates.action.installing",
+    })
+  })
+})
@@ -0,0 +1,51 @@
+import { createMemo } from "solid-js"
+import type { UpdaterState } from "@/updater"
+import { usePlatform } from "@/context/platform"
+import { useLanguage } from "@/context/language"
+import { showToast } from "@/utils/toast"
+
+export function updaterAction(state: UpdaterState | undefined) {
+  if (!state) return { label: "settings.updates.action.checkNow" as const }
+  switch (state.status) {
+    case "checking":
+      return { label: "settings.updates.action.checking" as const }
+    case "downloading":
+      return { label: "settings.updates.action.downloading" as const }
+    case "ready":
+      return { label: "toast.update.action.installRestart" as const, run: "install" as const }
+    case "installing":
+      return { label: "settings.updates.action.installing" as const }
+    case "disabled":
+      return { label: "settings.updates.action.checkNow" as const }
+    default:
+      return { label: "settings.updates.action.checkNow" as const, run: "check" as const }
+  }
+}
+
+export function useUpdaterAction() {
+  const platform = usePlatform()
+  const language = useLanguage()
+  const action = createMemo(() => updaterAction(platform.updater?.state()))
+
+  return {
+    action,
+    async run() {
+      const run = action().run
+      if (run === "install") return platform.updater?.install()
+      if (run !== "check") return
+
+      const state = await platform.updater?.check()
+      if (state?.status === "up-to-date") {
+        showToast({
+          variant: "success",
+          icon: "circle-check",
+          title: language.t("settings.updates.toast.latest.title"),
+          description: language.t("settings.updates.toast.latest.description", { version: platform.version ?? "" }),
+        })
+      }
+      if (state?.status === "error") {
+        showToast({ title: language.t("common.requestFailed"), description: state.message })
+      }
+    },
+  }
+}
@@ -8,6 +8,8 @@ beforeAll(async () => {
  mock.module("@solidjs/router", () => ({
    useNavigate: () => () => undefined,
    useParams: () => ({}),
+    useLocation: () => ({}),
+    useSearchParams: () => [{}, () => undefined],
  }))
  mock.module("@opencode-ai/ui/context", () => ({
    createSimpleContext: () => ({
@@ -208,7 +208,7 @@ export const { use: useComments, provider: CommentsProvider } = createSimpleCont
        const decoded = decodeSessionKey(key)
        return createRoot((dispose) => ({
          value: createCommentSession(
-            serverSDK.scope,
+            serverSDK().scope,
            decoded.dir,
            decoded.id === WORKSPACE_KEY ? undefined : decoded.id,
          ),
@@ -11,7 +11,7 @@ import {
 import type { Message, Part } from "@opencode-ai/sdk/v2/client"
 import { SESSION_CACHE_LIMIT, dropSessionCaches, pickSessionCacheEvictions } from "./global-sync/session-cache"
 import { diffs as list, message as clean } from "@/utils/diffs"
-import { createServerSdkContext, useServerSDK } from "./server-sdk"
+import { type createServerSdkContext } from "./server-sdk"
 import { type createServerSyncContextInner } from "./server-sync"

 const SKIP_PARTS = new Set(["patch", "step-start", "step-finish"])
@@ -174,7 +174,7 @@ function setOptimisticRemove(setStore: (...args: unknown[]) => void, input: Opti
 export const createDirSyncContext = (
  directory: string,
  serverSync: ReturnType<typeof createServerSyncContextInner>,
-  serverSDK: ReturnType<typeof createServerSdkContext> = useServerSDK(),
+  serverSDK: ReturnType<typeof createServerSdkContext>,
 ) => {
  const client = serverSDK.createClient({ directory, throwOnError: true })

@@ -609,6 +609,9 @@ export const createDirSyncContext = (
        )
      },
    },
+    mcp: {
+      toggle: (name: string) => serverSync.mcp.toggle(directory, name),
+    },
    absolute,
    get directory() {
      return current()[0].path.directory
@@ -62,10 +62,10 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
    const language = useLanguage()
    const layout = useLayout()

-    const scope = createMemo(() => sdk.directory)
+    const scope = createMemo(() => sdk().directory)
    const path = createPathHelpers(scope)
    const tabs = layout.tabs(() =>
-      SessionStateKey.from(serverSDK.scope, SessionRouteKey.fromRoute(params.dir, params.id)),
+      SessionStateKey.from(serverSDK().scope, SessionRouteKey.fromRoute(params.dir, params.id)),
    )

    const inflight = new Map<string, Promise<void>>()
@@ -78,7 +78,10 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
    const tree = createFileTreeStore({
      scope,
      normalizeDir: path.normalizeDir,
-      list: (dir) => sdk.client.file.list({ path: dir }).then((x) => x.data ?? []),
+      list: (dir) =>
+        sdk()
+          .client.file.list({ path: dir })
+          .then((x) => x.data ?? []),
      onError: (message) => {
        showToast({
          variant: "error",
@@ -112,7 +115,7 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
      })
    })

-    const viewCache = createFileViewCache(serverSDK.scope)
+    const viewCache = createFileViewCache(serverSDK().scope)
    const view = createMemo(() => viewCache.load(scope(), params.id))

    const ensure = (file: string) => {
@@ -176,8 +179,8 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({

      setLoading(file)

-      const promise = sdk.client.file
-        .read({ path: file })
+      const promise = sdk()
+        .client.file.read({ path: file })
        .then((x) => {
          if (scope() !== directory) return
          const content = x.data
@@ -200,12 +203,14 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
    }

    const search = (query: string, dirs: "true" | "false") =>
-      sdk.client.find.files({ query, dirs }).then(
-        (x) => (x.data ?? []).map(path.normalize),
-        () => [],
-      )
+      sdk()
+        .client.find.files({ query, dirs })
+        .then(
+          (x) => (x.data ?? []).map(path.normalize),
+          () => [],
+        )

-    const stop = sdk.event.listen((e) => {
+    const stop = sdk().event.listen((e) => {
      invalidateFromWatcher(e.details, {
        normalize: path.normalize,
        hasFile: (file) => Boolean(store.file[file]),
@@ -0,0 +1,34 @@
+import { describe, expect, test } from "bun:test"
+import { toggleMcp } from "./mcp"
+
+describe("toggleMcp", () => {
+  test("runs the status action before refreshing the owning query", async () => {
+    const calls: string[] = []
+    const input = (status: "connected" | "needs_auth" | "disabled") => ({
+      status,
+      connect: async () => {
+        calls.push("connect")
+      },
+      disconnect: async () => {
+        calls.push("disconnect")
+      },
+      authenticate: async () => {
+        calls.push("authenticate")
+      },
+      refresh: async () => {
+        calls.push("refresh")
+      },
+    })
+
+    await toggleMcp(input("connected"))
+    expect(calls).toEqual(["disconnect", "refresh"])
+
+    calls.length = 0
+    await toggleMcp(input("needs_auth"))
+    expect(calls).toEqual(["authenticate", "refresh"])
+
+    calls.length = 0
+    await toggleMcp(input("disabled"))
+    expect(calls).toEqual(["connect", "refresh"])
+  })
+})
@@ -0,0 +1,18 @@
+import type { McpStatus } from "@opencode-ai/sdk/v2/client"
+
+export async function toggleMcp(input: {
+  status: McpStatus["status"]
+  connect: () => Promise<void>
+  disconnect: () => Promise<void>
+  authenticate: () => Promise<void>
+  refresh: () => Promise<void>
+}) {
+  await {
+    connected: input.disconnect,
+    needs_auth: input.authenticate,
+    disabled: input.connect,
+    failed: input.connect,
+    needs_client_registration: input.connect,
+  }[input.status]()
+  await input.refresh()
+}
@@ -77,6 +77,7 @@ export type ReviewDiffStyle = "unified" | "split"

 export type LayoutRoute =
  | { type: "home" }
+  | { type: "draft"; draftID: string; server?: ServerConnection.Key }
  | { type: "dir-new-sesssion"; dir: string; dirBase64: string; server?: ServerConnection.Key }
  | { type: "session"; dir: string; dirBase64: string; sessionId: string; server?: ServerConnection.Key }

@@ -120,10 +121,16 @@ const normalizeStoredSessionTabs = (key: string, tabs: SessionTabs) => {
  }
 }

-const currentRoute = (pathname: string): LayoutRoute => {
+const currentRoute = (pathname: string, search: string): LayoutRoute => {
  const parts = pathname.split("/").filter(Boolean)
  if (parts.length === 0) return { type: "home" }

+  if (parts[0] === "new-session") {
+    const draftID = new URLSearchParams(search).get("draftId")
+    if (!draftID) return { type: "home" }
+    return { type: "draft", draftID }
+  }
+
  const dirBase64 = parts[0]
  const dir = decode64(dirBase64)
  if (!dir) return { type: "home" }
@@ -145,7 +152,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
    const platform = usePlatform()
    const location = useLocation()
    const route = createMemo(() => {
-      const value = currentRoute(location.pathname)
+      const value = currentRoute(location.pathname, location.search)
      if (value.type === "home") return value
      return { ...value, server: server.key }
    })
@@ -239,7 +246,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
      }
    }

-    const target = Persist.serverGlobal(serverSdk.scope, "layout", ["layout.v6"])
+    const target = Persist.serverGlobal(serverSdk().scope, "layout", ["layout.v6"])
    const [store, setStore, _, ready] = persisted(
      { ...target, migrate },
      createStore({
@@ -402,11 +409,11 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
    }

    function enrich(project: { worktree: string; expanded: boolean }) {
-      const [childStore] = serverSync.child(project.worktree, { bootstrap: false })
+      const [childStore] = serverSync().child(project.worktree, { bootstrap: false })
      const projectID = childStore.project
      const metadata = projectID
-        ? serverSync.data.project.find((x) => x.id === projectID)
-        : serverSync.data.project.find((x) => x.worktree === project.worktree)
+        ? serverSync().data.project.find((x) => x.id === projectID)
+        : serverSync().data.project.find((x) => x.worktree === project.worktree)

      // Preserve local icon override from per-workspace localStorage cache (childStore.icon).
      // Without this, different subdirectories of the same git repo would share the same
@@ -420,7 +427,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(

    const roots = createMemo(() => {
      const map = new Map<string, string>()
-      for (const project of serverSync.data.project) {
+      for (const project of serverSync().data.project) {
        const sandboxes = project.sandboxes ?? []
        for (const sandbox of sandboxes) {
          map.set(sandbox, project.worktree)
@@ -486,12 +493,12 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
    createEffect(() => {
      const projects = enriched()
      if (projects.length === 0) return
-      if (!serverSync.ready) return
+      if (!serverSync().ready) return

      for (const project of projects) {
        if (!project.id) continue
        if (project.id === "global") continue
-        serverSync.project.icon(project.worktree, project.icon?.override)
+        serverSync().project.icon(project.worktree, project.icon?.override)
      }
    })

@@ -525,12 +532,12 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
        colorRequested.set(worktree, color)

        if (project.id === "global") {
-          serverSync.project.meta(worktree, { icon: { color } })
+          serverSync().project.meta(worktree, { icon: { color } })
          continue
        }

-        void serverSdk.client.project
-          .update({ projectID: project.id, directory: worktree, icon: { color } })
+        void serverSdk()
+          .client.project.update({ projectID: project.id, directory: worktree, icon: { color } })
          .catch(() => {
            if (colorRequested.get(worktree) === color) colorRequested.delete(worktree)
          })
@@ -547,7 +554,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
          sessionTimer = undefined
          void Promise.all(
            server.projects.list().map((project) => {
-              return serverSync.project.loadSessions(project.worktree)
+              return serverSync().project.loadSessions(project.worktree)
            }),
          )
        }, 0)
@@ -577,7 +584,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
        open(directory: string) {
          const root = rootFor(directory)
          if (server.projects.list().find((x) => x.worktree === root)) return
-          void serverSync.project.loadSessions(root)
+          void serverSync().project.loadSessions(root)
          server.projects.open(root)
        },
        close(directory: string) {
@@ -64,12 +64,12 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
    const models = useModels()

    const id = createMemo(() => params.id || undefined)
-    const list = createMemo(() => sync.data.agent.filter((item) => item.mode !== "subagent" && !item.hidden))
+    const list = createMemo(() => sync().data.agent.filter((item) => item.mode !== "subagent" && !item.hidden))
    const connected = createMemo(() => new Set(providers.connected().map((item) => item.id)))

    const [saved, setSaved] = persisted(
      {
-        ...Persist.serverWorkspace(serverSDK.scope, sdk.directory, "model-selection", ["model-selection.v1"]),
+        ...Persist.serverWorkspace(serverSDK().scope, sdk().directory, "model-selection", ["model-selection.v1"]),
        migrate,
      },
      createStore<Saved>({
@@ -124,14 +124,14 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
    const scope = createMemo<State | undefined>(() => {
      const session = id()
      if (!session) return store.draft
-      return saved.session[session] ?? handoff.get(handoffKey(serverSDK.scope, sdk.directory, session))
+      return saved.session[session] ?? handoff.get(handoffKey(serverSDK().scope, sdk().directory, session))
    })

    createEffect(() => {
      const session = id()
      if (!session) return

-      const key = handoffKey(serverSDK.scope, sdk.directory, session)
+      const key = handoffKey(serverSDK().scope, sdk().directory, session)
      const next = handoff.get(key)
      if (!next) return
      if (saved.session[session] !== undefined) {
@@ -144,8 +144,9 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
    })

    const configuredModel = () => {
-      if (!sync.data.config.model) return
-      const [providerID, modelID] = sync.data.config.model.split("/")
+      const configured = sync().data.config.model
+      if (!configured) return
+      const [providerID, modelID] = configured.split("/")
      const model = { providerID, modelID }
      if (validModel(model)) return model
    }
@@ -363,7 +364,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
    }

    const result = {
-      slug: createMemo(() => base64Encode(sdk.directory)),
+      slug: createMemo(() => base64Encode(sdk().directory)),
      model,
      agent,
      session: {
@@ -374,13 +375,13 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
          const next = clone(snapshot())
          if (!next) return

-          if (dir === sdk.directory) {
+          if (dir === sdk().directory) {
            setSaved("session", session, next)
            setStore("draft", undefined)
            return
          }

-          handoff.set(handoffKey(serverSDK.scope, dir, session), next)
+          handoff.set(handoffKey(serverSDK().scope, dir, session), next)
          setStore("draft", undefined)
        },
        restore(msg: { sessionID: string; agent: string; model: ModelKey }) {
@@ -388,7 +389,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
          if (!session) return
          if (msg.sessionID !== session) return
          if (saved.session[session] !== undefined) return
-          if (handoff.has(handoffKey(serverSDK.scope, sdk.directory, session))) return
+          if (handoff.has(handoffKey(serverSDK().scope, sdk().directory, session))) return

          setSaved("session", session, {
            agent: msg.agent,
@@ -0,0 +1,19 @@
+import { useMutation } from "@tanstack/solid-query"
+import { useLanguage } from "@/context/language"
+import { useSync } from "@/context/sync"
+import { showToast } from "@/utils/toast"
+
+export function useMcpToggle() {
+  const sync = useSync()
+  const language = useLanguage()
+
+  return useMutation(() => ({
+    mutationFn: sync().mcp.toggle,
+    onError: (error) =>
+      showToast({
+        variant: "error",
+        title: language.t("common.requestFailed"),
+        description: error instanceof Error ? error.message : String(error),
+      }),
+  }))
+}
@@ -125,7 +125,7 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
    const currentSession = createMemo(() => params.id)

    const [store, setStore, _, ready] = persisted(
-      Persist.serverGlobal(serverSDK.scope, "notification", ["notification.v1"]),
+      Persist.serverGlobal(serverSDK().scope, "notification", ["notification.v1"]),
      createStore({
        list: [] as Notification[],
      }),
@@ -208,11 +208,11 @@ export const { use: useNotification, provider: NotificationProvider } = createSi

    const lookup = async (directory: string, sessionID?: string) => {
      if (!sessionID) return undefined
-      const [syncStore] = serverSync.child(directory, { bootstrap: false })
+      const [syncStore] = serverSync().child(directory, { bootstrap: false })
      const match = Binary.search(syncStore.session, sessionID, (s) => s.id)
      if (match.found) return syncStore.session[match.index]
-      return serverSDK.client.session
-        .get({ directory, sessionID })
+      return serverSDK()
+        .client.session.get({ directory, sessionID })
        .then((x) => x.data)
        .catch(() => undefined)
    }
@@ -286,7 +286,7 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
      })
    }

-    const unsub = serverSDK.event.listen((e) => {
+    const unsub = serverSDK().event.listen((e) => {
      const event = e.details
      if (event.type !== "session.idle" && event.type !== "session.error") return

@@ -55,13 +55,13 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
    const permissionsEnabled = createMemo(() => {
      const directory = decode64(params.dir)
      if (!directory) return false
-      const [store] = serverSync.child(directory)
+      const [store] = serverSync().child(directory)
      return hasPermissionPromptRules(store.config.permission)
    })

    const [store, setStore, _, ready] = persisted(
      {
-        ...Persist.serverGlobal(serverSDK.scope, "permission", ["permission.v3"]),
+        ...Persist.serverGlobal(serverSDK().scope, "permission", ["permission.v3"]),
        migrate(value) {
          if (!value || typeof value !== "object" || Array.isArray(value)) return value

@@ -87,7 +87,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
      if (!ready()) return
      const directory = decode64(params.dir)
      if (!directory) return
-      const [childStore] = serverSync.child(directory)
+      const [childStore] = serverSync().child(directory)
      const perm = childStore.config.permission
      if (typeof perm === "string" && perm === "allow") {
        const key = directoryAcceptKey(directory)
@@ -119,9 +119,11 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
    }

    const respond: PermissionRespondFn = (input) => {
-      serverSDK.client.permission.respond(input).catch(() => {
-        responded.delete(input.permissionID)
-      })
+      serverSDK()
+        .client.permission.respond(input)
+        .catch(() => {
+          responded.delete(input.permissionID)
+        })
    }

    function respondOnce(permission: PermissionRequest, directory?: string) {
@@ -140,7 +142,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
    }

    function isAutoAccepting(sessionID: string, directory?: string) {
-      const session = directory ? serverSync.child(directory, { bootstrap: false })[0].session : []
+      const session = directory ? serverSync().child(directory, { bootstrap: false })[0].session : []
      return autoRespondsPermission(store.autoAccept, session, { sessionID }, directory)
    }

@@ -149,7 +151,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
    }

    function shouldAutoRespond(permission: PermissionRequest, directory?: string) {
-      const session = directory ? serverSync.child(directory, { bootstrap: false })[0].session : []
+      const session = directory ? serverSync().child(directory, { bootstrap: false })[0].session : []
      return autoRespondsPermission(store.autoAccept, session, permission, directory)
    }

@@ -160,7 +162,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
      return next
    }

-    const unsubscribe = serverSDK.event.listen((e) => {
+    const unsubscribe = serverSDK().event.listen((e) => {
      const event = e.details
      if (event?.type !== "permission.asked") return

@@ -179,8 +181,8 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
        }),
      )

-      serverSDK.client.permission
-        .list({ directory })
+      serverSDK()
+        .client.permission.list({ directory })
        .then((x) => {
          if (!isAutoAcceptingDirectory(directory)) return
          for (const perm of x.data ?? []) {
@@ -211,8 +213,8 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
        }),
      )

-      serverSDK.client.permission
-        .list({ directory })
+      serverSDK()
+        .client.permission.list({ directory })
        .then((x) => {
          if (enableVersion.get(key) !== version) return
          if (!isAutoAccepting(sessionID, directory)) return
@@ -269,7 +271,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
      },
      permissionsEnabled,
      isPermissionAllowAll(directory: string) {
-        const [childStore] = serverSync.child(directory)
+        const [childStore] = serverSync().child(directory)
        const perm = childStore.config.permission
        return typeof perm === "string" && perm === "allow"
      },
@@ -4,12 +4,18 @@ import type { Accessor } from "solid-js"
 import type { DesktopMenuAction } from "../desktop-menu"
 import { ServerConnection } from "./server"
 import type { WslServersPlatform } from "../wsl/types"
+import type { UpdaterPlatform } from "../updater"

 type PickerPaths = string | string[] | null
 type OpenDirectoryPickerOptions = { title?: string; multiple?: boolean }
-type OpenFilePickerOptions = { title?: string; multiple?: boolean; accept?: string[]; extensions?: string[] }
+type OpenAttachmentPickerOptions = {
+  title?: string
+  multiple?: boolean
+  accept?: string[]
+  extensions?: string[]
+  defaultPath?: string
+}
 type SaveFilePickerOptions = { title?: string; defaultPath?: string }
-type UpdateInfo = { updateAvailable: boolean; version?: string }
 type PlatformName = "web" | "desktop"
 type DesktopOS = "macos" | "windows" | "linux"

@@ -21,13 +27,7 @@ export type FatalRendererErrorLog = {
  os?: DesktopOS
 }

-export type Platform = {
-  /** Platform discriminator */
-  platform: PlatformName
-
-  /** Desktop OS (Tauri only) */
-  os?: DesktopOS
-
+type PlatformBase = {
  /** App version */
  version?: string

@@ -49,23 +49,20 @@ export type Platform = {
  /** Send a system notification (optional deep link) */
  notify(title: string, description?: string, href?: string): Promise<void>

-  /** Open directory picker dialog (native on Tauri, server-backed on web) */
-  openDirectoryPickerDialog?(opts?: OpenDirectoryPickerOptions): Promise<PickerPaths>
+  /** Open a native attachment picker and read selected files sequentially (desktop only) */
+  openAttachmentPickerDialog?(
+    opts: OpenAttachmentPickerOptions,
+    onFile: (file: File) => Promise<unknown>,
+  ): Promise<void>

-  /** Open native file picker dialog (Tauri only) */
-  openFilePickerDialog?(opts?: OpenFilePickerOptions): Promise<PickerPaths>
-
-  /** Save file picker dialog (Tauri only) */
+  /** Open a native save file picker dialog (desktop only) */
  saveFilePickerDialog?(opts?: SaveFilePickerOptions): Promise<string | null>

  /** Storage mechanism, defaults to localStorage */
  storage?: (name?: string) => SyncStorage | AsyncStorage

-  /** Check for a downloadable desktop update */
-  checkUpdate?(): Promise<UpdateInfo>
-
-  /** Install the downloaded update using the platform restart flow */
-  updateAndRestart?(): Promise<void>
+  /** Application-global desktop updater */
+  updater?: UpdaterPlatform

  /** Fetch override */
  fetch?: typeof fetch
@@ -113,6 +110,16 @@ export type Platform = {
  recordFatalRendererError?(error: FatalRendererErrorLog): Promise<void>
 }

+export type Platform = PlatformBase &
+  (
+    | { platform: "web"; os?: never }
+    | {
+        platform: "desktop"
+        os?: DesktopOS
+        openDirectoryPickerDialog(opts?: OpenDirectoryPickerOptions): Promise<PickerPaths>
+      }
+  )
+
 export type DisplayBackend = "auto" | "wayland"

 export const { use: usePlatform, provider: PlatformProvider } = createSimpleContext({
@@ -1,6 +1,6 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { checksum } from "@opencode-ai/core/util/encode"
-import { useParams } from "@solidjs/router"
+import { useParams, useSearchParams } from "@solidjs/router"
 import { batch, createMemo, createRoot, getOwner, onCleanup } from "solid-js"
 import { createStore, type SetStoreFunction } from "solid-js/store"
 import type { FileSelection } from "@/context/file"
@@ -153,9 +153,11 @@ const MAX_PROMPT_SESSIONS = 20

 type PromptSession = ReturnType<typeof createPromptSession>

-type Scope = {
-  dir: string
-  id?: string
+type Scope = { draftID: string } | { dir: string; id?: string }
+
+function scopeKey(scope: Scope) {
+  if ("draftID" in scope) return `draft:${scope.draftID}`
+  return `${scope.dir}:${scope.id ?? WORKSPACE_KEY}`
 }

 type PromptCacheEntry = {
@@ -163,11 +165,15 @@ type PromptCacheEntry = {
  dispose: VoidFunction
 }

-function createPromptSession(scope: ServerScope, dir: string, id: string | undefined) {
-  const legacy = `${dir}/prompt${id ? "/" + id : ""}.v2`
+function promptTarget(serverScope: ServerScope, scope: Scope) {
+  if ("draftID" in scope) return Persist.draft(scope.draftID, "prompt")
+  const legacy = `${scope.dir}/prompt${scope.id ? "/" + scope.id : ""}.v2`
+  return Persist.serverScoped(serverScope, scope.dir, scope.id, "prompt", [legacy])
+}

+function createPromptSession(serverScope: ServerScope, scope: Scope) {
  const [store, setStore, _, ready] = persisted(
-    Persist.serverScoped(scope, dir, id, "prompt", [legacy]),
+    promptTarget(serverScope, scope),
    createStore<{
      prompt: Prompt
      cursor?: number
@@ -231,6 +237,7 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
  gate: false,
  init: () => {
    const params = useParams()
+    const [search] = useSearchParams<{ draftId?: string }>()
    const serverSDK = useServerSDK()
    const cache = new Map<string, PromptCacheEntry>()

@@ -254,8 +261,8 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
    }

    const owner = getOwner()
-    const load = (dir: string, id: string | undefined) => {
-      const key = `${dir}:${id ?? WORKSPACE_KEY}`
+    const load = (scope: Scope) => {
+      const key = scopeKey(scope)
      const existing = cache.get(key)
      if (existing) {
        cache.delete(key)
@@ -265,7 +272,7 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(

      const entry = createRoot(
        (dispose) => ({
-          value: createPromptSession(serverSDK.scope, dir, id),
+          value: createPromptSession(serverSDK().scope, scope),
          dispose,
        }),
        owner,
@@ -276,8 +283,10 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
      return entry.value
    }

-    const session = createMemo(() => load(params.dir!, params.id))
-    const pick = (scope?: Scope) => (scope ? load(scope.dir, scope.id) : session())
+    const session = createMemo(() =>
+      load(search.draftId ? { draftID: search.draftId } : { dir: params.dir!, id: params.id }),
+    )
+    const pick = (scope?: Scope) => (scope ? load(scope) : session())

    return {
      ready: () => session().ready,
@@ -1,11 +1,17 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { useServerSDK } from "./server-sdk"
+import { type Accessor, createMemo } from "solid-js"
+import { type ServerSDK, useServerSDK } from "./server-sdk"
+
+export type DirectorySDK = ReturnType<ServerSDK["createDirSdkContext"]>

 export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
  name: "SDK",
-  init: (props: { directory: string }) => {
+  // Resolves the directory-scoped SDK reactively from the (possibly changing) server.
+  init: (props: { directory: string | Accessor<string> }) => {
    const serverSDK = useServerSDK()
-
-    return serverSDK.createDirSdkContext(props.directory)
+    return createMemo(() => {
+      const directory = typeof props.directory === "function" ? props.directory() : props.directory
+      return serverSDK().createDirSdkContext(directory)
+    })
  },
 })
@@ -2,7 +2,7 @@ import type { Event } from "@opencode-ai/sdk/v2/client"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { createGlobalEmitter } from "@solid-primitives/event-bus"
 import { makeEventListener } from "@solid-primitives/event-listener"
-import { batch, onCleanup, onMount } from "solid-js"
+import { type Accessor, batch, createMemo, onCleanup, onMount } from "solid-js"
 import { createSdkForServer } from "@/utils/server"
 import { useLanguage } from "./language"
 import { usePlatform } from "./platform"
@@ -21,7 +21,7 @@ export function resumeStreamAfterPageShow(event: PageTransitionEvent, start: ()
  start()
 }

-export function createServerSdkContext(server: ServerConnection.Any, scope: ServerScope) {
+function createServerSdkContextBase(server: ServerConnection.Any, scope: ServerScope) {
  const platform = usePlatform()
  const abort = new AbortController()

@@ -261,21 +261,31 @@ export function createServerSdkContext(server: ServerConnection.Any, scope: Serv
  }
 }

-export type ServerSDK = ReturnType<typeof createServerSdkContext>
+type ServerSDKBase = ReturnType<typeof createServerSdkContextBase>
+export type ServerSDK = ServerSDKBase & {
+  createDirSdkContext: (directory: string) => ReturnType<typeof createDirSdkContext>
+}
+
+export function createServerSdkContext(server: ServerConnection.Any, scope: ServerScope): ServerSDK {
+  const sdk = createServerSdkContextBase(server, scope)
+  return Object.assign(sdk, {
+    createDirSdkContext: createRefCountMap((dir) => createDirSdkContext(dir, sdk)),
+  })
+}

 export const { use: useServerSDK, provider: ServerSDKProvider } = createSimpleContext({
  name: "ServerSDK",
-  init: (props: { server?: ServerConnection.Any }) => {
+  // Returns an accessor so the resolved server can change reactively (e.g. a
+  // /new-session draft retargeting its server) without re-instantiating the subtree.
+  init: (props: { server?: Accessor<ServerConnection.Any | undefined> }) => {
    const global = useGlobal()
    const language = useLanguage()
    const server = useServer()

-    const conn = props.server ?? server.current
-    if (!conn) throw new Error(language.t("error.serverSDK.noServerAvailable"))
-
-    const ctx = global.createServerCtx(conn)
-    return Object.assign(ctx.sdk, {
-      createDirSdkContext: createRefCountMap((dir) => createDirSdkContext(dir, ctx.sdk)),
+    return createMemo<ServerSDK>(() => {
+      const conn = props.server?.() ?? server.current
+      if (!conn) throw new Error(language.t("error.serverSDK.noServerAvailable"))
+      return global.createServerCtx(conn).sdk
    })
  },
 })
@@ -284,7 +294,7 @@ type SDKEventMap = {
  [key in Event["type"]]: Extract<Event, { type: key }>
 }

-function createDirSdkContext(directory: string, serverSDK: ServerSDK) {
+function createDirSdkContext(directory: string, serverSDK: ServerSDKBase) {
  const client = serverSDK.createClient({
    directory,
    throwOnError: true,
@@ -1,11 +1,11 @@
 import type { Config, OpencodeClient, Path, Project, ProviderAuthResponse, Todo } from "@opencode-ai/sdk/v2/client"
 import { showToast } from "@/utils/toast"
 import { getFilename } from "@opencode-ai/core/util/path"
-import { batch, getOwner, onCleanup, onMount, untrack } from "solid-js"
+import { type Accessor, batch, createMemo, getOwner, onCleanup, onMount, untrack } from "solid-js"
 import { createStore, produce, reconcile } from "solid-js/store"
 import { useLanguage } from "@/context/language"
 import type { InitError } from "../pages/error"
-import { ServerSDK, useServerSDK } from "./server-sdk"
+import { ServerSDK } from "./server-sdk"
 import {
  bootstrapDirectory,
  bootstrapGlobal,
@@ -36,6 +36,7 @@ import { ServerConnection, useServer } from "./server"
 import { retry } from "@opencode-ai/core/util/retry"
 import type { ServerScope } from "@/utils/server-scope"
 import { persisted } from "@/utils/persist"
+import { toggleMcp } from "./global-sync/mcp"

 type GlobalStore = {
  ready: boolean
@@ -83,8 +84,7 @@ function makeQueryOptionsApi(
 }
 export type QueryOptionsApi = ReturnType<typeof makeQueryOptionsApi>

-export function createServerSyncContextInner(_serverSDK?: ServerSDK) {
-  const serverSDK: ServerSDK = _serverSDK ?? useServerSDK()
+export function createServerSyncContextInner(serverSDK: ServerSDK) {
  const language = useLanguage()
  const owner = getOwner()
  if (!owner) throw new Error("ServerSync must be created within owner")
@@ -481,36 +481,62 @@ export function createServerSyncContextInner(_serverSDK?: ServerSDK) {
    todo: {
      set: setSessionTodo,
    },
+    mcp: {
+      toggle: async (directory: string, name: string) => {
+        const key = directoryKey(directory)
+        const sdk = sdkFor(key)
+        const status = children.child(key, { bootstrap: false })[0].mcp[name].status
+        await toggleMcp({
+          status,
+          connect: async () => {
+            await sdk.mcp.connect({ name })
+          },
+          disconnect: async () => {
+            await sdk.mcp.disconnect({ name })
+          },
+          authenticate: async () => {
+            await sdk.mcp.auth.authenticate({ name })
+          },
+          refresh: async () => {
+            await queryClient.refetchQueries(queryOptionsApi.mcp(key))
+          },
+        })
+      },
+    },
  }
 }

-export function createServerSyncContext(_serverSDK?: ServerSDK) {
-  const inner = createServerSyncContextInner(_serverSDK)
+export function createServerSyncContext(serverSDK: ServerSDK) {
+  const inner = createServerSyncContextInner(serverSDK)
  return Object.assign(inner, {
    createDirSyncContext: createRefCountMap(
-      (dir) => createDirSyncContext(dir, inner, _serverSDK),
+      (dir) => createDirSyncContext(dir, inner, serverSDK),
      (dir) => inner.disableMcp(dir),
      directoryKey,
    ),
  })
 }

+export type ServerSync = ReturnType<typeof createServerSyncContext>
+
 export const { use: useServerSync, provider: ServerSyncProvider } = createSimpleContext({
  name: "ServerSync",
-  gate: false,
-  init: (props: { server?: ServerConnection.Any }) => {
+  // Returns an accessor so the resolved server can change reactively without
+  // re-instantiating the subtree (mirrors useServerSDK).
+  init: (props: { server?: Accessor<ServerConnection.Any | undefined> }) => {
    const global = useGlobal()
    const language = useLanguage()
    const server = useServer()

-    const conn = props.server ?? server.current
-    if (!conn) throw new Error(language.t("error.serverSDK.noServerAvailable"))
-    const ctx = global.createServerCtx(conn)
-
-    return ctx.sync
+    return createMemo<ServerSync>(() => {
+      const conn = props.server?.() ?? server.current
+      if (!conn) throw new Error(language.t("error.serverSDK.noServerAvailable"))
+      return global.createServerCtx(conn).sync
+    })
  },
 })

 export function useQueryOptions() {
-  return useServerSync().queryOptions
+  const sync = useServerSync()
+  return createMemo(() => sync().queryOptions)
 }
@@ -35,9 +35,6 @@ export interface Settings {
    showCustomAgents: boolean
    newLayoutDesigns?: boolean
  }
-  updates: {
-    startup: boolean
-  }
  appearance: {
    fontSize: number
    mono: string
@@ -122,9 +119,6 @@ const defaultSettings: Settings = {
    showSessionProgressBar: true,
    showCustomAgents: false,
  },
-  updates: {
-    startup: true,
-  },
  appearance: {
    fontSize: 14,
    mono: "",
@@ -159,6 +153,15 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
  gate: false,
  init: () => {
    const [store, setStore, _, ready] = persisted("settings.v3", createStore<Settings>(defaultSettings))
+    const showFileTree = withFallback(() => store.general?.showFileTree, defaultSettings.general.showFileTree)
+    const showSearch = withFallback(() => store.general?.showSearch, defaultSettings.general.showSearch)
+    const showStatus = withFallback(() => store.general?.showStatus, defaultSettings.general.showStatus)
+    const showCustomAgents = withFallback(
+      () => store.general?.showCustomAgents,
+      defaultSettings.general.showCustomAgents,
+    )
+    const newLayoutDesigns = withFallback(() => store.general?.newLayoutDesigns, newLayoutDesignsDefault)
+    const visible = (preference: () => boolean) => createMemo(() => !newLayoutDesigns() || preference())

    createEffect(() => {
      if (typeof document === "undefined") return
@@ -193,7 +196,7 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
        setFollowup(value: "queue" | "steer") {
          setStore("general", "followup", value === "queue" ? "steer" : value)
        },
-        showFileTree: withFallback(() => store.general?.showFileTree, defaultSettings.general.showFileTree),
+        showFileTree,
        setShowFileTree(value: boolean) {
          setStore("general", "showFileTree", value)
        },
@@ -201,11 +204,11 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
        setShowNavigation(value: boolean) {
          setStore("general", "showNavigation", value)
        },
-        showSearch: withFallback(() => store.general?.showSearch, defaultSettings.general.showSearch),
+        showSearch,
        setShowSearch(value: boolean) {
          setStore("general", "showSearch", value)
        },
-        showStatus: withFallback(() => store.general?.showStatus, defaultSettings.general.showStatus),
+        showStatus,
        setShowStatus(value: boolean) {
          setStore("general", "showStatus", value)
        },
@@ -241,20 +244,20 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
        setShowSessionProgressBar(value: boolean) {
          setStore("general", "showSessionProgressBar", value)
        },
-        showCustomAgents: withFallback(() => store.general?.showCustomAgents, defaultSettings.general.showCustomAgents),
+        showCustomAgents,
        setShowCustomAgents(value: boolean) {
          setStore("general", "showCustomAgents", value)
        },
-        newLayoutDesigns: withFallback(() => store.general?.newLayoutDesigns, newLayoutDesignsDefault),
+        newLayoutDesigns,
        setNewLayoutDesigns(value: boolean) {
          setStore("general", "newLayoutDesigns", value)
        },
      },
-      updates: {
-        startup: withFallback(() => store.updates?.startup, defaultSettings.updates.startup),
-        setStartup(value: boolean) {
-          setStore("updates", "startup", value)
-        },
+      visibility: {
+        fileTree: visible(showFileTree),
+        search: visible(showSearch),
+        status: visible(showStatus),
+        customAgents: visible(showCustomAgents),
      },
      appearance: {
        fontSize: withFallback(() => store.appearance?.fontSize, defaultSettings.appearance.fontSize),
@@ -1,4 +1,5 @@
 import { Binary } from "@opencode-ai/core/util/binary"
+import { createMemo } from "solid-js"
 import { useServerSync } from "./server-sync"
 import { useSDK } from "./sdk"
 import type { Message, Part } from "@opencode-ai/sdk/v2/client"
@@ -112,5 +113,7 @@ export const useSync = () => {
  const serverSync = useServerSync()
  const sdk = useSDK()

-  return serverSync.createDirSyncContext(sdk.directory)
+  return createMemo(() => serverSync().createDirSyncContext(sdk().directory))
 }
+
+export type DirectorySync = ReturnType<ReturnType<typeof useSync>>
@@ -2,10 +2,12 @@ import type { Session } from "@opencode-ai/sdk/v2/client"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 import { createStore, produce } from "solid-js/store"
-import { Persist, persisted } from "@/utils/persist"
+import { Persist, persisted, removePersisted, draftPersistedKeys } from "@/utils/persist"
 import { ServerConnection, useServer } from "./server"
 import { createEffect, startTransition } from "solid-js"
-import { useNavigate, useParams } from "@solidjs/router"
+import { useLocation, useNavigate, useParams } from "@solidjs/router"
+import { usePlatform } from "./platform"
+import { uuid } from "@/utils/uuid"
 import { SessionTabsRemovedDetail } from "@/components/titlebar-session-events"

 export type SessionTab = {
@@ -15,10 +17,22 @@ export type SessionTab = {
  sessionId: string
 }

-export type Tab = SessionTab
+export type DraftTab = {
+  type: "draft"
+  draftID: string
+  server: ServerConnection.Key
+  directory: string
+  worktree?: string
+}

-export const tabHref = (tab: Tab) => `/${tab.dirBase64}/session/${tab.sessionId}`
-export const tabKey = (tab: Tab) => `${tab.server}\n${tabHref(tab)}`
+export type Tab = SessionTab | DraftTab
+
+export const draftHref = (draftID: string) => `/new-session?draftId=${encodeURIComponent(draftID)}`
+
+export const tabHref = (tab: Tab) =>
+  tab.type === "draft" ? draftHref(tab.draftID) : `/${tab.dirBase64}/session/${tab.sessionId}`
+
+export const tabKey = (tab: Tab) => (tab.type === "draft" ? `draft:${tab.draftID}` : `${tab.server}\n${tabHref(tab)}`)

 export function sessionHasOpenTab(tabs: Tab[], server: ServerConnection.Key, session: Session) {
  const dirBase64 = base64Encode(session.directory)
@@ -33,6 +47,7 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
  gate: false,
  init: () => {
    const server = useServer()
+    const platform = usePlatform()
    const fallback = server.key
    const [store, setStore, _, ready] = persisted(
      {
@@ -50,9 +65,14 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({

    const params = useParams()
    const navigate = useNavigate()
+    const location = useLocation()

    const closing = new Set<string>()

+    const removeDraftPersisted = (draftID: string) => {
+      for (const key of draftPersistedKeys()) removePersisted(Persist.draft(draftID, key), platform)
+    }
+
    createEffect(() => {
      if (!ready()) return
      const servers = new Set(server.list.map(ServerConnection.key))
@@ -83,10 +103,48 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
          }),
        )
      },
+      draft(draftID: string) {
+        const tab = store.find((item) => item.type === "draft" && item.draftID === draftID)
+        if (!tab || tab.type !== "draft") throw new Error(`Draft not found: ${draftID}`)
+        return tab
+      },
+      newDraft(draft: Omit<DraftTab, "type" | "draftID">, prompt?: string) {
+        const draftID = uuid()
+        setStore(
+          produce((tabs) => {
+            tabs.push({ type: "draft", draftID, ...draft })
+          }),
+        )
+        navigate(prompt ? `${draftHref(draftID)}&prompt=${encodeURIComponent(prompt)}` : draftHref(draftID))
+      },
+      updateDraft(draftID: string, draft: Partial<Omit<DraftTab, "type" | "draftID">>) {
+        setStore(
+          (tab) => tab.type === "draft" && tab.draftID === draftID,
+          produce((tab) => Object.assign(tab, draft)),
+        )
+      },
+      promoteDraft(draftID: string, session: Omit<SessionTab, "type">) {
+        // We're viewing this draft when /new-session?draftId=… points at it. Promoting
+        // replaces the draft tab with a session tab, so the draft route would stop resolving
+        // and fall back home. Navigate to the new session first so we leave /new-session
+        // before the draft is removed from the store.
+        const active = location.pathname === "/new-session" && location.query.draftId === draftID
+        startTransition(() => {
+          setStore(
+            produce((tabs) => {
+              const index = tabs.findIndex((tab) => tab.type === "draft" && tab.draftID === draftID)
+              if (index !== -1) tabs[index] = { type: "session", ...session }
+            }),
+          )
+          if (active) navigateTab({ type: "session", ...session })
+        })
+        removeDraftPersisted(draftID)
+      },
      removeTab: (index: number) => {
        const tab = store[index]
        if (!tab) return
        const key = tabKey(tab)
+        const draftID = tab.type === "draft" ? tab.draftID : undefined
        const nextTab = store[index + 1] ?? store[index - 1]
        closing.add(key)
        void startTransition(() => {
@@ -98,9 +156,12 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
          if (nextTab) navigateTab(nextTab)
          else navigate("/")
        }).finally(() => closing.delete(key))
+        if (draftID) removeDraftPersisted(draftID)
      },
      removeServer(key: ServerConnection.Key) {
+        const drafts = store.flatMap((tab) => (tab.type === "draft" && tab.server === key ? [tab.draftID] : []))
        setStore((tabs) => tabs.filter((tab) => tab.server !== key))
+        for (const draftID of drafts) removeDraftPersisted(draftID)
        if (server.key === key) navigate("/")
      },
      removeSessions: (input: SessionTabsRemovedDetail) => {
@@ -110,7 +171,12 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
              const sessionIDs = new Set(input.sessionIDs)
              const currentHref =
                params.dir && params.id
-                  ? tabHref({ type: "session", server: server.key, dirBase64: params.dir, sessionId: params.id })
+                  ? tabHref({
+                      type: "session",
+                      server: server.key,
+                      dirBase64: params.dir,
+                      sessionId: params.id,
+                    })
                  : undefined
              const currentIndex = currentHref
                ? tabs.findIndex(
@@ -9,6 +9,8 @@ beforeAll(async () => {
  mock.module("@solidjs/router", () => ({
    useNavigate: () => () => undefined,
    useParams: () => ({}),
+    useLocation: () => ({}),
+    useSearchParams: () => [{}, () => undefined],
  }))
  mock.module("@opencode-ai/ui/context", () => ({
    createSimpleContext: () => ({
@@ -2,7 +2,7 @@ import { createStore, produce } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { batch, createEffect, createMemo, createRoot, on, onCleanup } from "solid-js"
 import { useParams } from "@solidjs/router"
-import { useSDK } from "./sdk"
+import { useSDK, type DirectorySDK } from "./sdk"
 import type { Platform } from "./platform"
 import { useServer } from "./server"
 import { defaultTitle, titleNumber } from "./terminal-title"
@@ -143,7 +143,7 @@ export function clearWorkspaceTerminals(
 }

 function createWorkspaceTerminalSession(
-  sdk: ReturnType<typeof useSDK>,
+  sdk: DirectorySDK,
  dir: string,
  scope: ServerScopeValue,
  legacySessionID?: string,
@@ -202,7 +202,7 @@ function createWorkspaceTerminalSession(
  })
  onCleanup(unsub)

-  const update = (client: ReturnType<typeof useSDK>["client"], pty: Partial<LocalPTY> & { id: string }) => {
+  const update = (client: DirectorySDK["client"], pty: Partial<LocalPTY> & { id: string }) => {
    const index = store.all.findIndex((x) => x.id === pty.id)
    const previous = index >= 0 ? store.all[index] : undefined
    if (index >= 0) {
@@ -223,7 +223,7 @@ function createWorkspaceTerminalSession(
      })
  }

-  const clone = async (client: ReturnType<typeof useSDK>["client"], id: string) => {
+  const clone = async (client: DirectorySDK["client"], id: string) => {
    const index = store.all.findIndex((x) => x.id === id)
    const pty = store.all[index]
    if (!pty) return
@@ -412,7 +412,7 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont
      }

      const entry = createRoot((dispose) => ({
-        value: createWorkspaceTerminalSession(sdk, dir, serverScope, legacySessionID),
+        value: createWorkspaceTerminalSession(sdk(), dir, serverScope, legacySessionID),
        dispose,
      }))

@@ -22,10 +22,10 @@ export function useProviders() {
  const dir = createMemo(() => decode64(params.dir) ?? "")
  const providers = () => {
    if (dir()) {
-      const [projectStore] = serverSync.child(dir())
+      const [projectStore] = serverSync().child(dir())
      if (projectStore.provider_ready) return projectStore.provider
    }
-    return serverSync.data.provider
+    return serverSync().data.provider
  }
  return {
    all: () => providers().all,
@@ -825,17 +825,17 @@ export const dict = {
  "settings.general.row.followup.option.queue": "Queue",
  "settings.general.row.followup.option.steer": "Steer",
  "settings.general.row.showFileTree.title": "File tree",
-  "settings.general.row.showFileTree.description": "Show the file tree panel in desktop sessions",
+  "settings.general.row.showFileTree.description": "Show the file tree panel in sessions",
  "settings.general.row.showNavigation.title": "Navigation controls",
  "settings.general.row.showNavigation.description": "Show the back and forward buttons in the desktop title bar",
  "settings.general.row.showSearch.title": "Command palette",
-  "settings.general.row.showSearch.description": "Show the search and command palette button in the desktop title bar",
+  "settings.general.row.showSearch.description": "Show the search and command palette button in the title bar",
  "settings.general.row.showTerminal.title": "Terminal",
  "settings.general.row.showTerminal.description": "Show the terminal button in the desktop title bar",
  "settings.general.row.showStatus.title": "Server status",
-  "settings.general.row.showStatus.description": "Show the server status button in the desktop title bar",
+  "settings.general.row.showStatus.description": "Show the server status button in the title bar",
  "settings.general.row.showCustomAgents.title": "Custom agents",
-  "settings.general.row.showCustomAgents.description": "Show the agent picker in the v2 desktop composer",
+  "settings.general.row.showCustomAgents.description": "Show the agent picker in the composer",
  "settings.general.row.reasoningSummaries.title": "Show reasoning summaries",
  "settings.general.row.reasoningSummaries.description": "Display model reasoning summaries in the timeline",
  "settings.general.row.shellToolPartsExpanded.title": "Expand shell tool parts",
@@ -866,6 +866,8 @@ export const dict = {
  "settings.updates.row.check.description": "Manually check for updates and install if available",
  "settings.updates.action.checkNow": "Check now",
  "settings.updates.action.checking": "Checking...",
+  "settings.updates.action.downloading": "Downloading...",
+  "settings.updates.action.installing": "Installing...",
  "settings.updates.toast.latest.title": "You're up to date",
  "settings.updates.toast.latest.description": "You're running the latest version of OpenCode.",
  "sound.option.none": "None",
@@ -759,16 +759,15 @@ export const dict = {
  "settings.general.row.followup.option.queue": "Черга",
  "settings.general.row.followup.option.steer": "Керування",
  "settings.general.row.showFileTree.title": "Дерево файлів",
-  "settings.general.row.showFileTree.description": "Показувати панель дерева файлів у сесіях на робочому столі",
+  "settings.general.row.showFileTree.description": "Показувати панель дерева файлів у сесіях",
  "settings.general.row.showNavigation.title": "Елементи навігації",
  "settings.general.row.showNavigation.description": "Показувати кнопки назад і вперед у заголовку робочого столу",
  "settings.general.row.showSearch.title": "Палітра команд",
-  "settings.general.row.showSearch.description":
-    "Показувати кнопку пошуку та палітри команд у заголовку робочого столу",
+  "settings.general.row.showSearch.description": "Показувати кнопку пошуку та палітри команд у заголовку",
  "settings.general.row.showTerminal.title": "Термінал",
  "settings.general.row.showTerminal.description": "Показувати кнопку термінала в заголовку робочого столу",
  "settings.general.row.showStatus.title": "Статус сервера",
-  "settings.general.row.showStatus.description": "Показувати кнопку статусу сервера в заголовку робочого столу",
+  "settings.general.row.showStatus.description": "Показувати кнопку статусу сервера в заголовку",
  "settings.general.row.reasoningSummaries.title": "Показувати підсумки мислення",
  "settings.general.row.reasoningSummaries.description": "Відображати підсумки мислення моделі на часовій шкалі",
  "settings.general.row.shellToolPartsExpanded.title": "Розгортати частини інструменту оболонки",
@@ -4,6 +4,7 @@ export { useCommand } from "./context/command"
 export { loadLocaleDict, normalizeLocale, type Locale } from "./context/language"
 export { useWslServers } from "./wsl/context"
 export { type DisplayBackend, type FatalRendererErrorLog, type Platform, PlatformProvider } from "./context/platform"
+export { type UpdaterPlatform, type UpdaterState } from "./updater"
 export {
  type WslDistroProbe,
  type WslInstalledDistro,
@@ -10,7 +10,7 @@ import { useSync } from "@/context/sync"
 import { decode64 } from "@/utils/base64"
 import { Schema } from "effect"

-function DirectoryDataProvider(props: ParentProps<{ directory: string }>) {
+export function DirectoryDataProvider(props: ParentProps<{ directory: string; draftID?: string }>) {
  const location = useLocation()
  const navigate = useNavigate()
  const params = useParams()
@@ -18,7 +18,9 @@ function DirectoryDataProvider(props: ParentProps<{ directory: string }>) {
  const slug = createMemo(() => base64Encode(props.directory))

  createEffect(() => {
-    const next = sync.data.path.directory
+    // A draft lives at /new-session?draftId=… and has no directory segment to normalize.
+    if (props.draftID) return
+    const next = sync().data.path.directory
    if (!next || next === props.directory) return
    const path = location.pathname.slice(slug().length + 1)
    navigate(`/${base64Encode(next)}${path}${location.search}${location.hash}`, { replace: true })
@@ -26,12 +28,15 @@ function DirectoryDataProvider(props: ParentProps<{ directory: string }>) {

  createResource(
    () => params.id,
-    (id) => sync.session.sync(id).catch(() => {}),
+    (id) =>
+      sync()
+        .session.sync(id)
+        .catch(() => {}),
  )

  return (
    <DataProvider
-      data={sync.data}
+      data={sync().data}
      directory={props.directory}
      onNavigateToSession={(sessionID: string) => navigate(`/${slug()}/session/${sessionID}`)}
      onSessionHref={(sessionID: string) => `/${slug()}/session/${sessionID}`}
@@ -225,8 +225,6 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
  const formattedError = () => formatError(props.error, language.t)
  let recordedFatalError: Promise<void> | undefined
  const [store, setStore] = createStore({
-    checking: false,
-    version: undefined as string | undefined,
    actionError: undefined as string | undefined,
  })

@@ -247,32 +245,25 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
  })

  async function checkForUpdates() {
-    if (!platform.checkUpdate) return
-    setStore("checking", true)
-    await platform
-      .checkUpdate()
-      .then((result) => {
-        setStore("actionError", undefined)
-        if (result.updateAvailable && result.version) setStore("version", result.version)
-      })
-      .catch((err) => {
-        setStore("actionError", formatError(err, language.t))
-      })
-      .finally(() => {
-        setStore("checking", false)
-      })
+    const state = await platform.updater?.check()
+    setStore("actionError", state?.status === "error" ? state.message : undefined)
  }

  async function installUpdate() {
-    if (!platform.updateAndRestart) return
-    await platform
-      .updateAndRestart()
+    await platform.updater
+      ?.install()
      .then(() => setStore("actionError", undefined))
      .catch((err) => {
        setStore("actionError", formatError(err, language.t))
      })
  }

+  const updateVersion = () => {
+    const state = platform.updater?.state()
+    if (state?.status !== "ready") return
+    return state.version
+  }
+
  async function exportDebugLogs() {
    const exportLogs = platform.exportDebugLogs
    if (!exportLogs) return
@@ -327,20 +318,27 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
              )
            }}
          </Show>
-          <Show when={platform.checkUpdate}>
+          <Show when={platform.updater}>
            <Show
-              when={store.version}
+              when={updateVersion()}
              fallback={
-                <Button size="large" variant="ghost" onClick={checkForUpdates} disabled={store.checking}>
-                  {store.checking
+                <Button
+                  size="large"
+                  variant="ghost"
+                  onClick={checkForUpdates}
+                  disabled={["checking", "downloading", "installing"].includes(platform.updater?.state().status ?? "")}
+                >
+                  {platform.updater?.state().status === "checking"
                    ? language.t("error.page.action.checking")
                    : language.t("error.page.action.checkUpdates")}
                </Button>
              }
            >
-              <Button size="large" onClick={installUpdate}>
-                {language.t("error.page.action.updateTo", { version: store.version ?? "" })}
-              </Button>
+              {(version) => (
+                <Button size="large" onClick={installUpdate}>
+                  {language.t("error.page.action.updateTo", { version: version() })}
+                </Button>
+              )}
            </Show>
          </Show>
        </div>
@@ -6,6 +6,7 @@ import { useQuery } from "@tanstack/solid-query"
 import { Button } from "@opencode-ai/ui/button"
 import { Logo } from "@opencode-ai/ui/logo"
 import { Spinner } from "@opencode-ai/ui/spinner"
+import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
@@ -18,12 +19,12 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { usePlatform } from "@/context/platform"
 import { DateTime } from "luxon"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { DialogSelectDirectory } from "@/components/dialog-select-directory"
+import { useDirectoryPicker } from "@/components/directory-picker"
 import { DialogSelectServer, useServerManagementController } from "@/components/dialog-select-server"
 import { DialogServerV2 } from "@/components/settings-v2/dialog-server-v2"
 import { ServerConnection, useServer } from "@/context/server"
 import { sessionHasOpenTab, useTabs } from "@/context/tabs"
-import { useServerSync } from "@/context/server-sync"
+import { useServerSync, type ServerSync } from "@/context/server-sync"
 import { useLanguage } from "@/context/language"
 import { useNotification } from "@/context/notification"
 import {
@@ -53,7 +54,7 @@ const HOME_ROW_LAYOUT =
 const HOME_ROW_BASE = `${HOME_ROW_LAYOUT} border-0`
 const HOME_ROW = `${HOME_ROW_BASE} [font-weight:530] text-v2-text-text-muted hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover`
 const HOME_PROJECT_NAV_LABEL = "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
-const HOME_PROJECT_NAV_ROW = `${HOME_ROW_LAYOUT} h-7 gap-2 px-1.5 [font-weight:440] text-v2-text-text-muted 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)] data-[selected]:bg-v2-background-bg-layer-02 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-02 focus-visible:bg-v2-background-bg-layer-01 focus-visible:text-v2-text-text-base focus-visible:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)]`
+const HOME_PROJECT_NAV_ROW = `${HOME_ROW_LAYOUT} h-7 gap-2 px-1.5 [font-weight:440] text-v2-text-text-muted 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)] 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 focus-visible:bg-v2-background-bg-layer-01 focus-visible:text-v2-text-text-base focus-visible:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)]`
 const HOME_SECTION_LABEL = "text-v2-text-text-muted [font-weight:440]"

 type HomeSessionRecord = {
@@ -79,7 +80,7 @@ const HOME_SEARCH_RESULT_META =
 let pendingHomeNavigation: { server: ServerConnection.Key; href: string } | undefined

 function buildHomeSessionRecords(input: {
-  sync: Pick<ReturnType<typeof useServerSync>, "child">
+  sync: Pick<ServerSync, "child">
  projectDirectories: () => string[]
  projects: () => LocalProject[]
  projectByID: () => Map<string, LocalProject>
@@ -125,6 +126,7 @@ function HomeDesign() {
  const sync = useServerSync()
  const layout = useLayout()
  const platform = usePlatform()
+  const pickDirectory = useDirectoryPicker()
  const dialog = useDialog()
  const navigate = useNavigate()
  const server = useServer()
@@ -147,7 +149,7 @@ function HomeDesign() {
    if (!conn) return
    return global.createServerCtx(conn)
  })
-  const focusedSync = () => focusedServerCtx()?.sync ?? sync
+  const focusedSync = () => focusedServerCtx()?.sync ?? sync()
  const projects = createMemo(() => focusedServerCtx()?.projects.list() ?? layout.projects.list())
  const selectedProject = createMemo(() => projects().find((project) => project.worktree === state.selection.directory))
  const newSessionProject = createMemo(
@@ -314,26 +316,19 @@ function HomeDesign() {
    navigateOnServer(conn, `/${base64Encode(session.directory)}/session/${session.id}`)
  }

-  async function chooseProject(conn: ServerConnection.Any) {
+  function chooseProject(conn: ServerConnection.Any) {
    function resolve(result: string | string[] | null) {
      addProjects(conn, homeProjectDirectories(result))
    }

    const server = global.createServerCtx(conn)

-    if (platform.openDirectoryPickerDialog && server.isLocal) {
-      const result = await platform.openDirectoryPickerDialog?.({
-        title: language.t("command.project.open"),
-        multiple: true,
-      })
-      resolve(result)
-      return
-    }
-
-    dialog.show(
-      () => <DialogSelectDirectory multiple={true} onSelect={resolve} server={conn} />,
-      () => resolve(null),
-    )
+    pickDirectory({
+      server: conn,
+      title: language.t("command.project.open"),
+      multiple: true,
+      onSelect: resolve,
+    })
  }

  function openSettings() {
@@ -390,7 +385,7 @@ function HomeDesign() {
            onClose={closeSearch}
            onSelect={selectSearchSession}
          />
-          <div class="mt-3 min-h-0 flex-1 overflow-y-auto">
+          <ScrollView class="mt-3 min-h-0 flex-1">
            <div class="pt-3 flex flex-col gap-6">
              <Show
                when={!sessionLoad.isLoading}
@@ -432,7 +427,7 @@ function HomeDesign() {
                </Show>
              </Show>
            </div>
-          </div>
+          </ScrollView>
        </section>
      </div>
    </div>
@@ -890,7 +885,7 @@ function HomeSessionSearch(props: {
        <label
          class="relative z-20 flex h-9 w-full items-center gap-2 rounded-[6px] py-1 pl-3 pr-2 text-v2-icon-icon-muted transition-[background-color,box-shadow] duration-[120ms] ease-in-out"
          classList={{
-            "bg-v2-background-bg-deep focus-within:bg-v2-background-bg-base focus-within:shadow-[0_0_0_0.5px_var(--v2-border-border-focus),var(--v2-elevation-raised)]":
+            "bg-v2-background-bg-layer-03 focus-within:bg-v2-background-bg-layer-03 focus-within:shadow-[0_0_0_0.5px_var(--v2-border-border-focus),var(--v2-elevation-raised)]":
              !props.open,
            "bg-transparent shadow-[0_0_0_0.5px_var(--v2-border-border-focus)]": props.open,
          }}
@@ -1101,15 +1096,16 @@ function groupSessions(records: HomeSessionRecord[], language: ReturnType<typeof
 function LegacyHome() {
  const sync = useServerSync()
  const platform = usePlatform()
+  const pickDirectory = useDirectoryPicker()
  const dialog = useDialog()
  const navigate = useNavigate()
  const global = useGlobal()
  const server = useServer()
  const language = useLanguage()
-  const homedir = createMemo(() => sync.data.path.home)
+  const homedir = createMemo(() => sync().data.path.home)
  const recent = createMemo(() => {
-    return sync.data.project
-      .slice()
+    return sync()
+      .data.project.slice()
      .sort((a, b) => (b.time.updated ?? b.time.created) - (a.time.updated ?? a.time.created))
      .slice(0, 5)
  })
@@ -1128,7 +1124,7 @@ function LegacyHome() {
    navigate(`/${base64Encode(directory)}`)
  }

-  async function chooseProject() {
+  function chooseProject() {
    const s = server.current
    if (!s) return

@@ -1142,18 +1138,12 @@ function LegacyHome() {
      }
    }

-    if (platform.openDirectoryPickerDialog && server.isLocal()) {
-      const result = await platform.openDirectoryPickerDialog?.({
-        title: language.t("command.project.open"),
-        multiple: true,
-      })
-      resolve(result)
-    } else {
-      dialog.show(
-        () => <DialogSelectDirectory multiple={true} onSelect={resolve} server={s} />,
-        () => resolve(null),
-      )
-    }
+    pickDirectory({
+      server: s,
+      title: language.t("command.project.open"),
+      multiple: true,
+      onSelect: resolve,
+    })
  }

  return (
@@ -1174,7 +1164,7 @@ function LegacyHome() {
        {server.name}
      </Button>
      <Switch>
-        <Match when={sync.data.project.length > 0}>
+        <Match when={sync().data.project.length > 0}>
          <div class="mt-20 w-full flex flex-col gap-4">
            <div class="flex gap-2 items-center justify-between pl-3">
              <div class="text-14-medium text-text-strong">{language.t("home.recentProjects")}</div>
@@ -1201,7 +1191,7 @@ function LegacyHome() {
            </ul>
          </div>
        </Match>
-        <Match when={!sync.ready}>
+        <Match when={!sync().ready}>
          <div class="mt-30 mx-auto flex flex-col items-center gap-3">
            <div class="text-12-regular text-text-weak">{language.t("common.loading")}</div>
            <Button class="px-3" onClick={chooseProject}>
@@ -14,7 +14,6 @@ import {
 } from "solid-js"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { useLocation, useNavigate, useParams } from "@solidjs/router"
-import { useQuery } from "@tanstack/solid-query"
 import { useLayout, LocalProject } from "@/context/layout"
 import { useServerSync } from "@/context/server-sync"
 import { Persist, persisted } from "@/utils/persist"
@@ -64,7 +63,9 @@ import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
 import { useCommand, type CommandOption } from "@/context/command"
 import { ConstrainDragXAxis, getDraggableId } from "@/utils/solid-dnd"
 import { DebugBar } from "@/components/debug-bar"
+import { HelpButton } from "@/components/help-button"
 import { Titlebar, type TitlebarUpdate } from "@/components/titlebar"
+import { useDirectoryPicker } from "@/components/directory-picker"
 import { ServerConnection, useServer } from "@/context/server"
 import { useLanguage, type Locale } from "@/context/language"
 import { pathKey } from "@/utils/path-key"
@@ -90,12 +91,11 @@ import {
 } from "./layout/sidebar-workspace"
 import { ProjectDragOverlay, SortableProject, type ProjectSidebarContext } from "./layout/sidebar-project"
 import { SidebarContent } from "./layout/sidebar-shell"
-import { runUpdateAndRestart } from "./layout/update"

 export default function Layout(props: ParentProps) {
  const serverSDK = useServerSDK()
  const [store, setStore, , ready] = persisted(
-    Persist.serverGlobal(serverSDK.scope, "layout.page", ["layout.page.v1"]),
+    Persist.serverGlobal(serverSDK().scope, "layout.page", ["layout.page.v1"]),
    createStore({
      lastProjectSession: {} as { [directory: string]: { directory: string; id: string; at: number } },
      activeProject: undefined as string | undefined,
@@ -119,6 +119,7 @@ export default function Layout(props: ParentProps) {
  const layout = useLayout()
  const layoutReady = createMemo(() => layout.ready())
  const platform = usePlatform()
+  const pickDirectory = useDirectoryPicker()
  const settings = useSettings()
  const server = useServer()
  const notification = useNotification()
@@ -139,7 +140,7 @@ export default function Layout(props: ParentProps) {
    if (!slug) return { slug, dir: "" }
    const dir = decode64(slug)
    if (!dir) return { slug, dir: "" }
-    const store = serverSync.peek(dir, { bootstrap: false })
+    const store = serverSync().peek(dir, { bootstrap: false })
    return {
      slug,
      store,
@@ -168,28 +169,15 @@ export default function Layout(props: ParentProps) {
    peeked: false,
  })

-  const [update, setUpdate] = createStore({
-    installing: false,
-  })
-  const updateQuery = useQuery(() => ({
-    queryKey: ["desktop", "update"] as const,
-    enabled: () =>
-      !!platform.checkUpdate && !!platform.updateAndRestart && settings.ready() && settings.updates.startup(),
-    queryFn: () => platform.checkUpdate?.() ?? Promise.resolve({ updateAvailable: false, version: undefined }),
-    refetchInterval: (query) => (query.state.data?.updateAvailable ? false : 10 * 60 * 1000),
-  }))
  const updateVersion = () => {
-    if (!settings.ready()) return
-    if (!settings.updates.startup()) return
-    if (!updateQuery.data?.updateAvailable) return
-    return updateQuery.data.version ?? ""
-  }
-  const installUpdate = () => {
-    runUpdateAndRestart(platform.updateAndRestart, (installing) => setUpdate("installing", installing))
+    const state = platform.updater?.state()
+    if (state?.status !== "ready") return
+    return state.version
  }
+  const installUpdate = () => void platform.updater?.install()
  const titlebarUpdate: TitlebarUpdate = {
    version: updateVersion,
-    installing: () => update.installing,
+    installing: () => platform.updater?.state().status === "installing",
    install: installUpdate,
  }

@@ -225,7 +213,7 @@ export default function Layout(props: ParentProps) {
    active: () => state.hoverProject,
    el: () => state.nav?.querySelector<HTMLElement>("[data-component='sidebar-rail']") ?? state.nav,
    onActivate: (directory) => {
-      serverSync.child(directory)
+      serverSync().child(directory)
      setState("hoverProject", directory)
    },
  })
@@ -409,17 +397,17 @@ export default function Layout(props: ParentProps) {
        alertedAtBySession.delete(sessionKey)
      }

-      const unsub = serverSDK.event.listen((e) => {
+      const unsub = serverSDK().event.listen((e) => {
        if (e.details?.type === "worktree.ready") {
          setBusy(e.name, false)
-          WorktreeState.ready(serverSDK.scope, e.name)
+          WorktreeState.ready(serverSDK().scope, e.name)
          return
        }

        if (e.details?.type === "worktree.failed") {
          setBusy(e.name, false)
          WorktreeState.failed(
-            serverSDK.scope,
+            serverSDK().scope,
            e.name,
            e.details.properties?.message ?? language.t("common.requestFailed"),
          )
@@ -447,7 +435,7 @@ export default function Layout(props: ParentProps) {
        const props = e.details.properties
        if (e.details.type === "permission.asked" && permission.autoResponds(e.details.properties, directory)) return

-        const [store] = serverSync.child(directory, { bootstrap: false })
+        const [store] = serverSync().child(directory, { bootstrap: false })
        const session = store.session.find((s) => s.id === props.sessionID)
        const sessionKey = `${directory}:${props.sessionID}`

@@ -510,7 +498,7 @@ export default function Layout(props: ParentProps) {
        if (!currentDir() || !currentSession) return
        const sessionKey = `${currentDir()}:${currentSession}`
        dismissSessionAlert(sessionKey)
-        const [store] = serverSync.child(currentDir(), { bootstrap: false })
+        const [store] = serverSync().child(currentDir(), { bootstrap: false })
        const childSessions = store.session.filter((s) => s.parentID === currentSession)
        for (const child of childSessions) {
          dismissSessionAlert(`${currentDir()}:${child.id}`)
@@ -548,11 +536,11 @@ export default function Layout(props: ParentProps) {
    const direct = projects.find((p) => pathKey(p.worktree) === key)
    if (direct) return direct

-    const [child] = serverSync.child(directory, { bootstrap: false })
+    const [child] = serverSync().child(directory, { bootstrap: false })
    const id = child.project
    if (!id) return

-    const meta = serverSync.data.project.find((p) => p.id === id)
+    const meta = serverSync().data.project.find((p) => p.id === id)
    const root = meta?.worktree
    if (!root) return

@@ -643,7 +631,7 @@ export default function Layout(props: ParentProps) {

    const result: Session[] = []
    for (const dir of dirs) {
-      const [dirStore] = serverSync.child(dir, { bootstrap: true })
+      const [dirStore] = serverSync().child(dir, { bootstrap: true })
      const dirSessions = sortedRootSessions(dirStore, now)
      result.push(...dirSessions)
    }
@@ -695,10 +683,10 @@ export default function Layout(props: ParentProps) {

  createEffect(() => {
    route()
-    serverSDK.url
+    serverSDK().url

    prefetchToken.value += 1
-    clearSessionPrefetchInflight(serverSDK.scope)
+    clearSessionPrefetchInflight(serverSDK().scope)
    prefetchQueues.clear()
  })

@@ -742,17 +730,17 @@ export default function Layout(props: ParentProps) {
  }

  async function prefetchMessages(directory: string, sessionID: string, token: number) {
-    const [store, setStore] = serverSync.child(directory, { bootstrap: false })
+    const [store, setStore] = serverSync().child(directory, { bootstrap: false })

    return runSessionPrefetch({
-      scope: serverSDK.scope,
+      scope: serverSDK().scope,
      directory,
      sessionID,
      task: (rev) =>
-        retry(() => serverSDK.client.session.messages({ directory, sessionID, limit: prefetchChunk }))
+        retry(() => serverSDK().client.session.messages({ directory, sessionID, limit: prefetchChunk }))
          .then((messages) => {
            if (prefetchToken.value !== token) return
-            if (!isSessionPrefetchCurrent(serverSDK.scope, directory, sessionID, rev)) return
+            if (!isSessionPrefetchCurrent(serverSDK().scope, directory, sessionID, rev)) return

            const items = (messages.data ?? []).filter((x) => !!x?.info?.id)
            const next = items.map((x) => x.info).filter((m): m is Message => !!m?.id)
@@ -767,9 +755,9 @@ export default function Layout(props: ParentProps) {
            }

            if (stale.length > 0) {
-              clearSessionPrefetch(serverSDK.scope, directory, stale)
+              clearSessionPrefetch(serverSDK().scope, directory, stale)
              for (const id of stale) {
-                serverSync.todo.set(id, undefined)
+                serverSync().todo.set(id, undefined)
              }
            }

@@ -779,7 +767,7 @@ export default function Layout(props: ParentProps) {
              sorted,
            )

-            if (!isSessionPrefetchCurrent(serverSDK.scope, directory, sessionID, rev)) return
+            if (!isSessionPrefetchCurrent(serverSDK().scope, directory, sessionID, rev)) return

            batch(() => {
              if (stale.length > 0) {
@@ -791,7 +779,7 @@ export default function Layout(props: ParentProps) {
              }

              setStore("message", sessionID, reconcile(merged, { key: "id" }))
-              setSessionPrefetch({ scope: serverSDK.scope, directory, sessionID, ...meta })
+              setSessionPrefetch({ scope: serverSDK().scope, directory, sessionID, ...meta })

              for (const message of items) {
                const currentParts = store.part[message.info.id] ?? []
@@ -834,9 +822,9 @@ export default function Layout(props: ParentProps) {
    const directory = session.directory
    if (!directory) return

-    const [store] = serverSync.child(directory, { bootstrap: false })
+    const [store] = serverSync().child(directory, { bootstrap: false })
    const cached = untrack(() => {
-      const info = getSessionPrefetch(serverSDK.scope, directory, session.id)
+      const info = getSessionPrefetch(serverSDK().scope, directory, session.id)
      return shouldSkipSessionPrefetch({
        message: store.message[session.id] !== undefined,
        info,
@@ -939,7 +927,7 @@ export default function Layout(props: ParentProps) {
    if (!target) return

    // warm up child store to prevent flicker
-    serverSync.child(target.worktree)
+    serverSync().child(target.worktree)
    void openProject(target.worktree)
  }

@@ -948,7 +936,7 @@ export default function Layout(props: ParentProps) {
    const target = projects[index]
    if (!target) return

-    serverSync.child(target.worktree)
+    serverSync().child(target.worktree)
    void openProject(target.worktree)
  }

@@ -977,12 +965,12 @@ export default function Layout(props: ParentProps) {
  }

  async function archiveSession(session: Session) {
-    const [store, setStore] = serverSync.child(session.directory)
+    const [store, setStore] = serverSync().child(session.directory)
    const sessions = store.session ?? []
    const index = sessions.findIndex((s) => s.id === session.id)
    const nextSession = sessions[index + 1] ?? sessions[index - 1]

-    await serverSDK.client.session.update({
+    await serverSDK().client.session.update({
      directory: session.directory,
      sessionID: session.id,
      time: { archived: Date.now() },
@@ -1253,11 +1241,11 @@ export default function Layout(props: ParentProps) {
    )
    if (known) return known[0]

-    const [child] = serverSync.child(directory, { bootstrap: false })
+    const [child] = serverSync().child(directory, { bootstrap: false })
    const id = child.project
    if (!id) return directory

-    const meta = serverSync.data.project.find((item) => item.id === id)
+    const meta = serverSync().data.project.find((item) => item.id === id)
    return meta?.worktree ?? directory
  }

@@ -1305,8 +1293,8 @@ export default function Layout(props: ParentProps) {
    }
    const refreshDirs = async (target?: string) => {
      if (!target || target === root || canOpen(target)) return canOpen(target)
-      const listed = await serverSDK.client.worktree
-        .list({ directory: root })
+      const listed = await serverSDK()
+        .client.worktree.list({ directory: root })
        .then((x) => x.data ?? [])
        .catch(() => [] as string[])
      dirs = effectiveWorkspaceOrder(root, [root, ...listed], store.workspaceOrder[root])
@@ -1314,14 +1302,14 @@ export default function Layout(props: ParentProps) {
    }
    const openSession = async (target: { directory: string; id: string }) => {
      if (!canOpen(target.directory)) return false
-      const [data] = serverSync.child(target.directory, { bootstrap: false })
+      const [data] = serverSync().child(target.directory, { bootstrap: false })
      if (data.session.some((item) => item.id === target.id)) {
        setStore("lastProjectSession", root, { directory: target.directory, id: target.id, at: Date.now() })
        navigateWithSidebarReset(`/${base64Encode(target.directory)}/session/${target.id}`)
        return true
      }
-      const resolved = await serverSDK.client.session
-        .get({ sessionID: target.id })
+      const resolved = await serverSDK()
+        .client.session.get({ sessionID: target.id })
        .then((x) => x.data)
        .catch(() => undefined)
      if (!resolved?.directory) return false
@@ -1340,7 +1328,7 @@ export default function Layout(props: ParentProps) {
    }

    const latest = latestRootSession(
-      dirs.map((item) => serverSync.child(item, { bootstrap: false })[0]),
+      dirs.map((item) => serverSync().child(item, { bootstrap: false })[0]),
      Date.now(),
    )
    if (latest && (await openSession(latest))) {
@@ -1351,8 +1339,8 @@ export default function Layout(props: ParentProps) {
      await Promise.all(
        dirs.map(async (item) => ({
          path: { directory: item },
-          session: await serverSDK.client.session
-            .list({ directory: item })
+          session: await serverSDK()
+            .client.session.list({ directory: item })
            .then((x) => x.data ?? [])
            .catch(() => []),
        })),
@@ -1414,11 +1402,11 @@ export default function Layout(props: ParentProps) {
    const name = next === getFilename(project.worktree) ? "" : next

    if (project.id && project.id !== "global") {
-      await serverSDK.client.project.update({ projectID: project.id, directory: project.worktree, name })
+      await serverSDK().client.project.update({ projectID: project.id, directory: project.worktree, name })
      return
    }

-    serverSync.project.meta(project.worktree, { name })
+    serverSync().project.meta(project.worktree, { name })
  }

  const renameWorkspace = (directory: string, next: string, projectId?: string, branch?: string) => {
@@ -1472,7 +1460,7 @@ export default function Layout(props: ParentProps) {
    })
  }

-  async function chooseProject() {
+  function chooseProject() {
    const conn = server.current
    if (!conn) return
    function resolve(result: string | string[] | null) {
@@ -1486,22 +1474,12 @@ export default function Layout(props: ParentProps) {
      }
    }

-    if (platform.openDirectoryPickerDialog && server.isLocal()) {
-      const result = await platform.openDirectoryPickerDialog?.({
-        title: language.t("command.project.open"),
-        multiple: true,
-      })
-      resolve(result)
-    } else {
-      const run = ++dialogRun
-      void import("@/components/dialog-select-directory").then((x) => {
-        if (dialogDead || dialogRun !== run) return
-        dialog.show(
-          () => <x.DialogSelectDirectory multiple={true} onSelect={resolve} server={conn} />,
-          () => resolve(null),
-        )
-      })
-    }
+    pickDirectory({
+      server: conn,
+      title: language.t("command.project.open"),
+      multiple: true,
+      onSelect: resolve,
+    })
  }

  const deleteWorkspace = async (root: string, directory: string, leaveDeletedWorkspace = false) => {
@@ -1517,8 +1495,8 @@ export default function Layout(props: ParentProps) {

    setBusy(directory, true)

-    const result = await serverSDK.client.worktree
-      .remove({ directory: root, worktreeRemoveInput: { directory } })
+    const result = await serverSDK()
+      .client.worktree.remove({ directory: root, worktreeRemoveInput: { directory } })
      .then((x) => x.data)
      .catch((err) => {
        showToast({
@@ -1536,7 +1514,7 @@ export default function Layout(props: ParentProps) {
      clearLastProjectSession(root)
    }

-    serverSync.set(
+    serverSync().set(
      "project",
      produce((draft) => {
        const project = draft.find((item) => item.worktree === root)
@@ -1575,8 +1553,8 @@ export default function Layout(props: ParentProps) {
    })
    const dismiss = () => toaster.dismiss(progress)

-    const sessions: Session[] = await serverSDK.client.session
-      .list({ directory })
+    const sessions: Session[] = await serverSDK()
+      .client.session.list({ directory })
      .then((x) => x.data ?? [])
      .catch(() => [])

@@ -1584,12 +1562,14 @@ export default function Layout(props: ParentProps) {
      directory,
      sessions.map((s) => s.id),
      platform,
-      serverSDK.scope,
+      serverSDK().scope,
    )
-    await serverSDK.client.instance.dispose({ directory }).catch(() => undefined)
+    await serverSDK()
+      .client.instance.dispose({ directory })
+      .catch(() => undefined)

-    const result = await serverSDK.client.worktree
-      .reset({ directory: root, worktreeResetInput: { directory } })
+    const result = await serverSDK()
+      .client.worktree.reset({ directory: root, worktreeResetInput: { directory } })
      .then((x) => x.data)
      .catch((err) => {
        showToast({
@@ -1610,8 +1590,8 @@ export default function Layout(props: ParentProps) {
      sessions
        .filter((session) => session.time.archived === undefined)
        .map((session) =>
-          serverSDK.client.session
-            .update({
+          serverSDK()
+            .client.session.update({
              sessionID: session.id,
              directory: session.directory,
              time: { archived: archivedAt },
@@ -1651,8 +1631,8 @@ export default function Layout(props: ParentProps) {
    })

    onMount(() => {
-      serverSDK.client.vcs
-        .status({ directory: props.directory })
+      serverSDK()
+        .client.vcs.status({ directory: props.directory })
        .then((x) => {
          const files = x.data ?? []
          const dirty = files.length > 0
@@ -1710,8 +1690,8 @@ export default function Layout(props: ParentProps) {
    })

    const refresh = async () => {
-      const sessions = await serverSDK.client.session
-        .list({ directory: props.directory })
+      const sessions = await serverSDK()
+        .client.session.list({ directory: props.directory })
        .then((x) => x.data ?? [])
        .catch(() => [])
      const active = sessions.filter((session) => session.time.archived === undefined)
@@ -1719,8 +1699,8 @@ export default function Layout(props: ParentProps) {
    }

    onMount(() => {
-      serverSDK.client.vcs
-        .status({ directory: props.directory })
+      serverSDK()
+        .client.vcs.status({ directory: props.directory })
        .then((x) => {
          const files = x.data ?? []
          const dirty = files.length > 0
@@ -1853,7 +1833,7 @@ export default function Layout(props: ParentProps) {
        const next = new Set(dirs)
        for (const directory of next) {
          if (loadedSessionDirs.has(directory)) continue
-          void serverSync.project.loadSessions(directory)
+          void serverSync().project.loadSessions(directory)
        }

        loadedSessionDirs.clear()
@@ -1898,7 +1878,7 @@ export default function Layout(props: ParentProps) {
      directory && pathKey(directory) !== pathKey(local) && !dirs.some((item) => pathKey(item) === pathKey(directory))
        ? directory
        : undefined
-    const pending = extra ? WorktreeState.get(serverSDK.scope, extra)?.status === "pending" : false
+    const pending = extra ? WorktreeState.get(serverSDK().scope, extra)?.status === "pending" : false

    const ordered = effectiveWorkspaceOrder(local, dirs, store.workspaceOrder[project.worktree])
    if (pending && extra) return [local, extra, ...ordered.filter((item) => item !== local)]
@@ -1950,8 +1930,8 @@ export default function Layout(props: ParentProps) {

  const createWorkspace = async (project: LocalProject) => {
    clearSidebarHoverState()
-    const created = await serverSDK.client.worktree
-      .create({ directory: project.worktree })
+    const created = await serverSDK()
+      .client.worktree.create({ directory: project.worktree })
      .then((x) => x.data)
      .catch((err) => {
        showToast({
@@ -1970,7 +1950,7 @@ export default function Layout(props: ParentProps) {
    const root = pathKey(local)

    setBusy(created.directory, true)
-    WorktreeState.pending(serverSDK.scope, created.directory)
+    WorktreeState.pending(serverSDK().scope, created.directory)
    setStore("workspaceExpanded", key, true)
    if (key !== created.directory) {
      setStore("workspaceExpanded", created.directory, true)
@@ -1984,7 +1964,7 @@ export default function Layout(props: ParentProps) {
      return [created.directory, ...next]
    })

-    serverSync.child(created.directory)
+    serverSync().child(created.directory)
    navigateWithSidebarReset(`/${base64Encode(created.directory)}/session`)
  }

@@ -2089,7 +2069,7 @@ export default function Layout(props: ParentProps) {
      if (!item) return false
      return item.vcs === "git" || layout.sidebar.workspaces(item.worktree)()
    })
-    const homedir = createMemo(() => serverSync.data.path.home)
+    const homedir = createMemo(() => serverSync().data.path.home)

    return (
      <div
@@ -2387,6 +2367,7 @@ export default function Layout(props: ParentProps) {
            </Show>
          </main>
          {import.meta.env.DEV && <DebugBar />}
+          <HelpButton />
          <ToastRegion v2={newDesign()} />
        </div>
      }
@@ -2540,6 +2521,7 @@ export default function Layout(props: ParentProps) {
          </div>
          {import.meta.env.DEV && <DebugBar />}
        </div>
+        <HelpButton />
        <ToastRegion v2={newDesign()} />
      </div>
    </Show>
@@ -14,7 +14,7 @@ export function useSessionTabAvatarState(
  const permission = usePermission()
  const hasPermissions = createMemo(() => {
    if (!active()) return false
-    const [store] = globalSync.child(directory(), { bootstrap: false })
+    const [store] = globalSync().child(directory(), { bootstrap: false })
    return !!sessionPermissionRequest(store.session, store.permission, sessionId(), (item) => {
      return !permission.autoResponds(item, directory())
    })
@@ -23,7 +23,7 @@ export function useSessionTabAvatarState(
  const loading = createMemo(() => {
    if (!active()) return false
    if (hasPermissions()) return false
-    const [store] = globalSync.child(directory(), { bootstrap: false })
+    const [store] = globalSync().child(directory(), { bootstrap: false })
    return store.session_working(sessionId())
  })
  return { unread, loading }
@@ -33,7 +33,7 @@ export const ProjectIcon = (props: {
  const hasError = createMemo(() => dirs().some((directory) => notification.project.unseenHasError(directory)))
  const hasPermissions = createMemo(() =>
    dirs().some((directory) => {
-      const [store] = serverSync.child(directory, { bootstrap: false })
+      const [store] = serverSync().child(directory, { bootstrap: false })
      return hasProjectPermissions(store.permission, (item) => !permission.autoResponds(item, directory))
    }),
  )
@@ -149,7 +149,7 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
  const serverSync = useServerSync()
  const unseenCount = createMemo(() => notification.session.unseenCount(props.session.id))
  const hasError = createMemo(() => notification.session.unseenHasError(props.session.id))
-  const [sessionStore] = serverSync.child(props.session.directory)
+  const [sessionStore] = serverSync().child(props.session.directory)
  const hasPermissions = createMemo(() => {
    return !!sessionPermissionRequest(sessionStore.session, sessionStore.permission, props.session.id, (item) => {
      return !permission.autoResponds(item, props.session.directory)
@@ -294,23 +294,23 @@ export const SortableProject = (props: {
  const hoverOpen = () => isHoverProject() && preview() && !selected() && !state.menu

  const label = (directory: string) => {
-    const [data] = serverSync.child(directory, { bootstrap: false })
+    const [data] = serverSync().child(directory, { bootstrap: false })
    const kind =
      directory === props.project.worktree ? language.t("workspace.type.local") : language.t("workspace.type.sandbox")
    const name = props.ctx.workspaceLabel(directory, data.vcs?.branch, props.project.id)
    return `${kind} : ${name}`
  }

-  const projectStore = createMemo(() => serverSync.child(props.project.worktree, { bootstrap: false })[0])
+  const projectStore = createMemo(() => serverSync().child(props.project.worktree, { bootstrap: false })[0])
  const isWorking = createMemo(() =>
    dirs().some((directory) => {
-      const [store] = serverSync.child(directory, { bootstrap: false })
+      const [store] = serverSync().child(directory, { bootstrap: false })
      return Object.keys(store.session_status).some((id) => store.session_working(id))
    }),
  )
  const projectSessions = createMemo(() => sortedRootSessions(projectStore(), props.sortNow()))
  const workspaceSessions = (directory: string) => {
-    const [data] = serverSync.child(directory, { bootstrap: false })
+    const [data] = serverSync().child(directory, { bootstrap: false })
    return sortedRootSessions(data, props.sortNow())
  }
  const tile = () => (
@@ -68,7 +68,7 @@ export const WorkspaceDragOverlay = (props: {
    const directory = props.activeWorkspace()
    if (!directory) return

-    const [workspaceStore] = serverSync.child(directory, { bootstrap: false })
+    const [workspaceStore] = serverSync().child(directory, { bootstrap: false })
    const kind =
      directory === project.worktree ? language.t("workspace.type.local") : language.t("workspace.type.sandbox")
    const name = props.workspaceLabel(directory, workspaceStore.vcs?.branch, project.id)
@@ -303,7 +303,7 @@ export const SortableWorkspace = (props: {
  const queryOptions = useQueryOptions()
  const language = useLanguage()
  const sortable = createSortable(props.directory)
-  const [workspaceStore, setWorkspaceStore] = serverSync.child(props.directory, { bootstrap: false })
+  const [workspaceStore, setWorkspaceStore] = serverSync().child(props.directory, { bootstrap: false })
  const [menu, setMenu] = createStore({
    open: false,
    pendingRename: false,
@@ -321,14 +321,14 @@ export const SortableWorkspace = (props: {
  const boot = createMemo(() => open() || active())
  const count = createMemo(() => sessions()?.length ?? 0)
  const hasMore = createMemo(() => workspaceStore.sessionTotal > count())
-  const fetching = useIsFetching(() => queryOptions.sessions(pathKey(props.directory)))
+  const fetching = useIsFetching(() => queryOptions().sessions(pathKey(props.directory)))
  const busy = createMemo(() => props.ctx.isBusy(props.directory))
  const loading = () => fetching() > 0 && count() === 0
  const touch = createMediaQuery("(hover: none)")
  const showNew = createMemo(() => !loading() && (touch() || count() === 0 || (active() && !params.id)))
  const loadMore = async () => {
    setWorkspaceStore("limit", (limit) => (limit ?? 0) + 5)
-    await serverSync.project.loadSessions(props.directory)
+    await serverSync().project.loadSessions(props.directory)
  }

  const workspaceEditActive = createMemo(() => props.ctx.editorOpen(`workspace:${props.directory}`))
@@ -357,7 +357,7 @@ export const SortableWorkspace = (props: {

  createEffect(() => {
    if (!boot()) return
-    serverSync.child(props.directory, { bootstrap: true })
+    serverSync().child(props.directory, { bootstrap: true })
  })

  return (
@@ -450,18 +450,18 @@ export const LocalWorkspace = (props: {
  const queryOptions = useQueryOptions()
  const language = useLanguage()
  const workspace = createMemo(() => {
-    const [store, setStore] = serverSync.child(props.project.worktree)
+    const [store, setStore] = serverSync().child(props.project.worktree)
    return { store, setStore }
  })
  const slug = createMemo(() => base64Encode(props.project.worktree))
  const sessions = createMemo(() => sortedRootSessions(workspace().store, props.sortNow()))
  const count = createMemo(() => sessions()?.length ?? 0)
-  const fetching = useIsFetching(() => queryOptions.sessions(pathKey(props.project.worktree)))
+  const fetching = useIsFetching(() => queryOptions().sessions(pathKey(props.project.worktree)))
  const hasMore = createMemo(() => workspace().store.sessionTotal > count())
  const loading = () => fetching() > 0 && count() === 0
  const loadMore = async () => {
    workspace().setStore("limit", (limit) => (limit ?? 0) + 5)
-    await serverSync.project.loadSessions(props.project.worktree)
+    await serverSync().project.loadSessions(props.project.worktree)
  }

  return (
@@ -1,19 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { runUpdateAndRestart } from "./update"
-
-describe("runUpdateAndRestart", () => {
-  test("clears the installing state when restart resolves without exiting", async () => {
-    const states: boolean[] = []
-    await new Promise<void>((resolve) => {
-      runUpdateAndRestart(
-        async () => {},
-        (installing) => {
-          states.push(installing)
-          if (states.length === 2) resolve()
-        },
-      )
-    })
-
-    expect(states).toEqual([true, false])
-  })
-})
@@ -1,10 +0,0 @@
-export function runUpdateAndRestart(
-  updateAndRestart: (() => Promise<void>) | undefined,
-  setInstalling: (installing: boolean) => void,
-) {
-  if (!updateAndRestart) return
-  setInstalling(true)
-  void updateAndRestart()
-    .catch(() => undefined)
-    .finally(() => setInstalling(false))
-}
@@ -0,0 +1,78 @@
+import { createEffect, createMemo, onMount, untrack } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useSearchParams } from "@solidjs/router"
+import { NewSessionDesignView } from "@/components/session"
+import { useComments } from "@/context/comments"
+import { usePrompt } from "@/context/prompt"
+import { useSDK } from "@/context/sdk"
+import { useSync } from "@/context/sync"
+import { createSessionComposerState, SessionComposerRegion } from "@/pages/session/composer"
+
+/**
+ * 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).
+ */
+export default function NewSessionPage() {
+  const prompt = usePrompt()
+  const sdk = useSDK()
+  const sync = useSync()
+  const comments = useComments()
+  const [searchParams, setSearchParams] = useSearchParams<{ prompt?: string }>()
+
+  let inputRef: HTMLDivElement | undefined
+
+  const composer = createSessionComposerState()
+
+  const [store, setStore] = createStore({
+    worktree: "main",
+  })
+
+  const newSessionWorktree = createMemo(() => {
+    if (store.worktree === "create") return "create"
+    const project = sync().project
+    if (project && sdk().directory !== project.worktree) return sdk().directory
+    return "main"
+  })
+
+  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 })
+    })
+  })
+
+  onMount(() => {
+    requestAnimationFrame(() => inputRef?.focus())
+  })
+
+  return (
+    <div class="relative size-full overflow-hidden flex flex-col">
+      <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 bg-background-stronger flex-1">
+          <div class="flex-1 min-h-0 overflow-hidden rounded-[10px]">
+            <NewSessionDesignView>
+              <SessionComposerRegion
+                state={composer}
+                ready
+                centered={false}
+                placement="inline"
+                inputRef={(el) => {
+                  inputRef = el
+                }}
+                newSessionWorktree={newSessionWorktree()}
+                onNewSessionWorktreeReset={() => setStore("worktree", "main")}
+                onSubmit={() => comments.clear()}
+                onResponseSubmit={() => {}}
+                setPromptDockRef={() => {}}
+              />
+            </NewSessionDesignView>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -31,13 +31,14 @@ import { Button } from "@opencode-ai/ui/button"
 import { showToast } from "@/utils/toast"
 import { checksum } from "@opencode-ai/core/util/encode"
 import { useLocation, useSearchParams } from "@solidjs/router"
-import { NewSessionDesignView, NewSessionView, SessionHeader } from "@/components/session"
+import { NewSessionView, SessionHeader } from "@/components/session"
 import { useComments } from "@/context/comments"
 import { getSessionPrefetch, SESSION_PREFETCH_TTL } from "@/context/global-sync/session-prefetch"
 import { useServerSync } from "@/context/server-sync"
 import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
 import { usePrompt } from "@/context/prompt"
+import { usePlatform } from "@/context/platform"
 import { useSDK } from "@/context/sdk"
 import { useServerSDK } from "@/context/server-sdk"
 import { useSettings } from "@/context/settings"
@@ -51,6 +52,7 @@ import {
  createSizing,
  focusTerminalById,
  shouldFocusTerminalOnKeyDown,
+  shouldShowFileTree,
 } from "@/pages/session/helpers"
 import { MessageTimeline } from "@/pages/session/message-timeline"
 import { type DiffStyle, SessionReviewTab, type SessionReviewTabProps } from "@/pages/session/review-tab"
@@ -61,7 +63,6 @@ import { SessionSidePanel } from "@/pages/session/session-side-panel"
 import { TerminalPanel } from "@/pages/session/terminal-panel"
 import { useSessionCommands } from "@/pages/session/use-session-commands"
 import { useSessionHashScroll } from "@/pages/session/use-session-hash-scroll"
-import { shouldUseV2NewSessionPage } from "@/pages/session/new-session-layout"
 import { Identifier } from "@/utils/id"
 import { diffs as list } from "@/utils/diffs"
 import { Persist, persisted } from "@/utils/persist"
@@ -194,6 +195,7 @@ export default function Page() {
  const sdk = useSDK()
  const serverSDK = useServerSDK()
  const settings = useSettings()
+  const platform = usePlatform()
  const prompt = usePrompt()
  const comments = useComments()
  const terminal = useTerminal()
@@ -268,10 +270,15 @@ export default function Page() {

  const isDesktop = createMediaQuery("(min-width: 768px)")
  const size = createSizing()
-  const isV2NewSessionPage = () =>
-    shouldUseV2NewSessionPage({ newLayoutDesigns: newSessionDesign(), sessionID: params.id })
-  const desktopReviewOpen = createMemo(() => isDesktop() && view().reviewPanel.opened() && !isV2NewSessionPage())
-  const desktopFileTreeOpen = createMemo(() => isDesktop() && layout.fileTree.opened() && !isV2NewSessionPage())
+  const desktopReviewOpen = createMemo(() => isDesktop() && view().reviewPanel.opened())
+  const desktopFileTreeOpen = createMemo(
+    () =>
+      isDesktop() &&
+      shouldShowFileTree({
+        visible: settings.visibility.fileTree(),
+        opened: layout.fileTree.opened(),
+      }),
+  )
  const desktopSidePanelOpen = createMemo(() => desktopReviewOpen() || desktopFileTreeOpen())
  const sessionPanelWidth = createMemo(() => {
    if (!desktopSidePanelOpen()) return "100%"
@@ -301,10 +308,10 @@ export default function Page() {
    if (!view().reviewPanel.opened()) view().reviewPanel.open()
  }

-  const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
+  const info = createMemo(() => (params.id ? sync().session.get(params.id) : undefined))
  const isChildSession = createMemo(() => !!info()?.parentID)
-  const diffs = createMemo(() => (params.id ? list(sync.data.session_diff[params.id]) : []))
-  const canReview = createMemo(() => !!sync.project)
+  const diffs = createMemo(() => (params.id ? list(sync().data.session_diff[params.id]) : []))
+  const canReview = createMemo(() => !!sync().project)
  const reviewTab = createMemo(() => isDesktop())
  const tabState = createSessionTabs({
    tabs,
@@ -316,21 +323,21 @@ export default function Page() {
  const activeTab = tabState.activeTab
  const activeFileTab = tabState.activeFileTab
  const revertMessageID = createMemo(() => info()?.revert?.messageID)
-  const messages = createMemo(() => (params.id ? (sync.data.message[params.id] ?? []) : []))
+  const messages = createMemo(() => (params.id ? (sync().data.message[params.id] ?? []) : []))
  const messagesReady = createMemo(() => {
    const id = params.id
    if (!id) return true
-    return sync.data.message[id] !== undefined
+    return sync().data.message[id] !== undefined
  })
  const historyMore = createMemo(() => {
    const id = params.id
    if (!id) return false
-    return sync.session.history.more(id)
+    return sync().session.history.more(id)
  })
  const historyLoading = createMemo(() => {
    const id = params.id
    if (!id) return false
-    return sync.session.history.loading(id)
+    return sync().session.history.loading(id)
  })
  const userMessages = createMemo(
    () => messages().filter((m) => m.role === "user") as UserMessage[],
@@ -390,7 +397,7 @@ export default function Page() {
  })

  const [followup, setFollowup] = persisted(
-    Persist.serverWorkspace(serverSDK.scope, sdk.directory, "followup", ["followup.v1"]),
+    Persist.serverWorkspace(serverSDK().scope, sdk().directory, "followup", ["followup.v1"]),
    createStore<{
      items: Record<string, FollowupItem[] | undefined>
      failed: Record<string, string | undefined>
@@ -437,16 +444,16 @@ export default function Page() {
  }, desktopReviewOpen())

  const turnDiffs = createMemo(() => list(lastUserMessage()?.summary?.diffs))
-  const nogit = createMemo(() => !!sync.project && sync.project.vcs !== "git")
+  const nogit = createMemo(() => {
+    const project = sync().project
+    return !!project && project.vcs !== "git"
+  })
  const changesOptions = createMemo<ChangeMode[]>(() => {
    const list: ChangeMode[] = []
-    if (sync.project?.vcs === "git") list.push("git")
-    if (
-      sync.project?.vcs === "git" &&
-      sync.data.vcs?.branch &&
-      sync.data.vcs?.default_branch &&
-      sync.data.vcs.branch !== sync.data.vcs.default_branch
-    ) {
+    const project = sync().project
+    const vcs = sync().data.vcs
+    if (project?.vcs === "git") list.push("git")
+    if (project?.vcs === "git" && vcs?.branch && vcs?.default_branch && vcs.branch !== vcs.default_branch) {
      list.push("branch")
    }
    list.push("turn")
@@ -462,19 +469,20 @@ export default function Page() {
    if (store.changes === "git" || store.changes === "branch") return store.changes
  })
  const vcsKey = createMemo(
-    () => ["session-vcs", sdk.directory, sync.data.vcs?.branch ?? "", sync.data.vcs?.default_branch ?? ""] as const,
+    () =>
+      ["session-vcs", sdk().directory, sync().data.vcs?.branch ?? "", sync().data.vcs?.default_branch ?? ""] as const,
  )
  const vcsQuery = createQuery(() => {
    const mode = vcsMode()
-    const enabled = wantsReview() && sync.project?.vcs === "git"
+    const enabled = wantsReview() && sync().project?.vcs === "git"

    return {
      queryKey: [...vcsKey(), mode] as const,
      enabled,
      queryFn: mode
        ? () =>
-            sdk.client.vcs
-              .diff({ mode })
+            sdk()
+              .client.vcs.diff({ mode })
              .then((result) => list(result.data))
              .catch((error) => {
                console.debug("[session-review] failed to load vcs diff", { mode, error })
@@ -499,8 +507,8 @@ export default function Page() {

  const newSessionWorktree = createMemo(() => {
    if (store.newSessionWorktree === "create") return "create"
-    const project = sync.project
-    if (project && sdk.directory !== project.worktree) return sdk.directory
+    const project = sync().project
+    if (project && sdk().directory !== project.worktree) return sdk().directory
    return "main"
  })

@@ -562,11 +570,11 @@ export default function Page() {
  }

  function upsert(next: Project) {
-    const list = serverSync.data.project
-    sync.set("project", next.id)
+    const list = serverSync().data.project
+    sync().set("project", next.id)
    const idx = list.findIndex((item) => item.id === next.id)
    if (idx >= 0) {
-      serverSync.set(
+      serverSync().set(
        "project",
        list.map((item, i) => (i === idx ? { ...item, ...next } : item)),
      )
@@ -574,14 +582,14 @@ export default function Page() {
    }
    const at = list.findIndex((item) => item.id > next.id)
    if (at >= 0) {
-      serverSync.set("project", [...list.slice(0, at), next, ...list.slice(at)])
+      serverSync().set("project", [...list.slice(0, at), next, ...list.slice(at)])
      return
    }
-    serverSync.set("project", [...list, next])
+    serverSync().set("project", [...list, next])
  }

  const gitMutation = useMutation(() => ({
-    mutationFn: () => sdk.client.project.initGit(),
+    mutationFn: () => sdk().client.project.initGit(),
    onSuccess: (x) => {
      if (!x.data) return
      upsert(x.data)
@@ -625,7 +633,7 @@ export default function Page() {
  const hasScrollGesture = () => Date.now() - ui.scrollGesture < scrollGestureWindowMs

  const [sessionSync] = createResource(
-    () => [sdk.directory, params.id] as const,
+    () => [sdk().directory, params.id] as const,
    ([directory, id]) => {
      if (refreshFrame !== undefined) cancelAnimationFrame(refreshFrame)
      if (refreshTimer !== undefined) window.clearTimeout(refreshTimer)
@@ -633,11 +641,11 @@ export default function Page() {
      refreshTimer = undefined
      if (!id) return

-      const cached = untrack(() => sync.data.message[id] !== undefined)
+      const cached = untrack(() => sync().data.message[id] !== undefined)
      const stale = !cached
        ? false
        : (() => {
-            const info = getSessionPrefetch(serverSDK.scope, directory, id)
+            const info = getSessionPrefetch(serverSDK().scope, directory, id)
            if (!info) return true
            return Date.now() - info.at > SESSION_PREFETCH_TTL
          })()
@@ -648,12 +656,12 @@ export default function Page() {
          refreshTimer = undefined
          if (params.id !== id) return
          untrack(() => {
-            if (stale) void sync.session.sync(id, { force: true })
+            if (stale) void sync().session.sync(id, { force: true })
          })
        }, 0)
      })

-      return sync.session.sync(id)
+      return sync().session.sync(id)
    },
  )

@@ -662,9 +670,9 @@ export default function Page() {
      () => {
        const id = params.id
        return [
-          sdk.directory,
+          sdk().directory,
          id,
-          id ? (sync.data.session_status[id]?.type ?? "idle") : "idle",
+          id ? (sync().data.session_status[id]?.type ?? "idle") : "idle",
          id ? composer.blocked() : false,
        ] as const
      },
@@ -675,15 +683,17 @@ export default function Page() {
        todoTimer = undefined
        if (!id) return
        if (status === "idle" && !blocked) return
-        const cached = untrack(() => sync.data.todo[id] !== undefined || serverSync.data.session_todo[id] !== undefined)
+        const cached = untrack(
+          () => sync().data.todo[id] !== undefined || serverSync().data.session_todo[id] !== undefined,
+        )

        todoFrame = requestAnimationFrame(() => {
          todoFrame = undefined
          todoTimer = window.setTimeout(() => {
            todoTimer = undefined
-            if (sdk.directory !== dir || params.id !== id) return
+            if (sdk().directory !== dir || params.id !== id) return
            untrack(() => {
-              void sync.session.todo(id, cached ? { force: true } : undefined)
+              void sync().session.todo(id, cached ? { force: true } : undefined)
            })
          }, 0)
        })
@@ -716,7 +726,7 @@ export default function Page() {
    ),
  )

-  const stopVcs = sdk.event.listen((evt) => {
+  const stopVcs = sdk().event.listen((evt) => {
    if (evt.details.type !== "file.watcher.updated") return
    const props =
      typeof evt.details.properties === "object" && evt.details.properties
@@ -859,7 +869,7 @@ export default function Page() {

  createEffect(
    on(
-      () => sync.data.session_status[params.id ?? ""]?.type,
+      () => sync().data.session_status[params.id ?? ""]?.type,
      (next, prev) => {
        if (next !== "idle" || prev === undefined || prev === "idle") return
        refreshVcs()
@@ -1130,10 +1140,10 @@ export default function Page() {
    if (!id) return

    if (!wantsReview()) return
-    if (sync.data.session_diff[id] !== undefined) return
-    if (sync.status === "loading") return
+    if (sync().data.session_diff[id] !== undefined) return
+    if (sync().status === "loading") return

-    void sync.session.diff(id)
+    void sync().session.diff(id)
  })

  createEffect(
@@ -1148,14 +1158,14 @@ export default function Page() {

        const id = params.id
        if (!id) return
-        if (!untrack(() => sync.data.session_diff[id] !== undefined)) return
+        if (!untrack(() => sync().data.session_diff[id] !== undefined)) return

        diffFrame = requestAnimationFrame(() => {
          diffFrame = undefined
          diffTimer = window.setTimeout(() => {
            diffTimer = undefined
            if (sessionKey() !== key) return
-            void sync.session.diff(id, { force: true })
+            void sync().session.diff(id, { force: true })
          }, 0)
        })
      },
@@ -1165,10 +1175,10 @@ export default function Page() {

  let treeDir: string | undefined
  createEffect(() => {
-    const dir = sdk.directory
+    const dir = sdk().directory
    if (!isDesktop()) return
    if (!layout.fileTree.opened()) return
-    if (sync.status === "loading") return
+    if (sync().status === "loading") return

    fileTreeTab()
    const refresh = treeDir !== dir
@@ -1178,7 +1188,7 @@ export default function Page() {

  createEffect(
    on(
-      () => sdk.directory,
+      () => sdk().directory,
      () => {
        const tab = activeFileTab()
        if (!tab) return
@@ -1278,7 +1288,7 @@ export default function Page() {
    visibleUserMessages,
    historyMore,
    historyLoading,
-    loadMore: (sessionID) => sync.session.history.loadMore(sessionID),
+    loadMore: (sessionID) => sync().session.history.loadMore(sessionID),
    userScrolled: autoScroll.userScrolled,
    scroller: () => scroller,
  })
@@ -1322,8 +1332,8 @@ export default function Page() {
  )

  const draft = (id: string) =>
-    extractPromptFromParts(sync.data.part[id] ?? [], {
-      directory: sdk.directory,
+    extractPromptFromParts(sync().data.part[id] ?? [], {
+      directory: sdk().directory,
      attachmentName: language.t("common.attachment"),
    })

@@ -1346,7 +1356,7 @@ export default function Page() {
  }

  const merge = (next: NonNullable<ReturnType<typeof info>>) =>
-    sync.set("session", (list) => {
+    sync().set("session", (list) => {
      const idx = list.findIndex((item) => item.id === next.id)
      if (idx < 0) return list
      const out = list.slice()
@@ -1355,7 +1365,7 @@ export default function Page() {
    })

  const roll = (sessionID: string, next: NonNullable<ReturnType<typeof info>>["revert"]) =>
-    sync.set("session", (list) => {
+    sync().set("session", (list) => {
      const idx = list.findIndex((item) => item.id === sessionID)
      if (idx < 0) return list
      const out = list.slice()
@@ -1363,7 +1373,7 @@ export default function Page() {
      return out
    })

-  const busy = (sessionID: string) => sync.data.session_working(sessionID)
+  const busy = (sessionID: string) => sync().data.session_working(sessionID)

  const queuedFollowups = createMemo(() => {
    const id = params.id
@@ -1386,11 +1396,11 @@ export default function Page() {
      setFollowup("failed", input.sessionID, undefined)

      const ok = await sendFollowupDraft({
-        client: sdk.client,
-        sync,
-        serverSync,
+        client: sdk().client,
+        sync: sync(),
+        serverSync: serverSync(),
        draft: item,
-        optimisticBusy: item.sessionDirectory === sdk.directory,
+        optimisticBusy: item.sessionDirectory === sdk().directory,
      }).catch((err) => {
        setFollowup("failed", input.sessionID, input.id)
        fail(err)
@@ -1448,7 +1458,7 @@ export default function Page() {
  const followupDock = createMemo(() => queuedFollowups().map((item) => ({ id: item.id, text: followupText(item) })))

  const sendFollowup = (sessionID: string, id: string, opts?: { manual?: boolean }) => {
-    if (sync.session.get(sessionID)?.parentID) return Promise.resolve()
+    if (sync().session.get(sessionID)?.parentID) return Promise.resolve()
    const item = (followup.items[sessionID] ?? []).find((entry) => entry.id === id)
    if (!item) return Promise.resolve()
    if (followupBusy(sessionID)) return Promise.resolve()
@@ -1480,7 +1490,11 @@ export default function Page() {
  }

  const halt = (sessionID: string) =>
-    busy(sessionID) ? sdk.client.session.abort({ sessionID }).catch(() => {}) : Promise.resolve()
+    busy(sessionID)
+      ? sdk()
+          .client.session.abort({ sessionID })
+          .catch(() => {})
+      : Promise.resolve()

  const revertMutation = useMutation(() => ({
    mutationFn: async (input: { sessionID: string; messageID: string }) => {
@@ -1492,7 +1506,7 @@ export default function Page() {
        prompt.set(value)
      })
      await halt(input.sessionID)
-        .then(() => sdk.client.session.revert(input))
+        .then(() => sdk().client.session.revert(input))
        .then((result) => {
          if (result.data) merge(result.data)
        })
@@ -1525,9 +1539,9 @@ export default function Page() {
      })

      const task = !next
-        ? halt(sessionID).then(() => sdk.client.session.unrevert({ sessionID }))
+        ? halt(sessionID).then(() => sdk().client.session.unrevert({ sessionID }))
        : halt(sessionID).then(() =>
-            sdk.client.session.revert({
+            sdk().client.session.revert({
              sessionID,
              messageID: next.id,
            }),
@@ -1615,7 +1629,7 @@ export default function Page() {
    visibleUserMessages,
    historyMore,
    historyLoading,
-    loadMore: (sessionID) => sync.session.history.loadMore(sessionID),
+    loadMore: (sessionID) => sync().session.history.loadMore(sessionID),
    currentMessageId: () => store.messageId,
    pendingMessage: () => ui.pendingMessage,
    setPendingMessage: (value) => setUi("pendingMessage", value),
@@ -1745,81 +1759,80 @@ export default function Page() {

        <div
          classList={{
-            "@container relative shrink-0 flex flex-col min-h-0 h-full bg-background-stronger flex-1 md:flex-none": true,
+            "@container relative shrink-0 flex flex-col min-h-0 h-full flex-1 md:flex-none transition-[width]": true,
            "duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
              !size.active() && !ui.reviewSnap,
-            "transition-[width]": !isV2NewSessionPage(),
-            "rounded-[10px] shadow-[var(--v2-elevation-raised)]": settings.general.newLayoutDesigns() && !!params.id,
          }}
          style={{
            width: sessionPanelWidth(),
          }}
        >
          <div
-            class="flex-1 min-h-0 overflow-hidden"
            classList={{
-              "rounded-[10px]": settings.general.newLayoutDesigns(),
+              "flex-1 min-h-0 flex flex-col bg-background-stronger": true,
+              "rounded-[10px] overflow-hidden": settings.general.newLayoutDesigns(),
+              "shadow-[var(--v2-elevation-raised)]": settings.general.newLayoutDesigns() && !!params.id,
            }}
          >
-            <Switch>
-              <Match when={params.id && mobileChanges()}>
-                <div class="relative h-full overflow-hidden">
-                  {reviewContent({
-                    diffStyle: "unified",
-                    classes: {
-                      root: "pb-8",
-                      header: "px-4",
-                      container: "px-4",
-                    },
-                    loadingClass: "px-4 py-4 text-text-weak",
-                    emptyClass: "h-full pb-64 -mt-4 flex flex-col items-center justify-center text-center gap-6",
-                  })}
-                </div>
-              </Match>
-              <Match when={params.id}>
-                <Show when={messagesReady()}>
-                  <MessageTimeline
-                    actions={actions}
-                    scroll={ui.scroll}
-                    onResumeScroll={resumeScroll}
-                    setScrollRef={setScrollRef}
-                    onScheduleScrollState={scheduleScrollState}
-                    onAutoScrollHandleScroll={autoScroll.handleScroll}
-                    onMarkScrollGesture={markScrollGesture}
-                    hasScrollGesture={hasScrollGesture}
-                    onUserScroll={markUserScroll}
-                    onHistoryScroll={historyLoader.onScrollerScroll}
-                    onAutoScrollInteraction={autoScroll.handleInteraction}
-                    shouldAnchorBottom={() =>
-                      !location.hash && !store.messageId && !ui.pendingMessage && !autoScroll.userScrolled()
-                    }
-                    centered={centered()}
-                    setContentRef={(el) => {
-                      content = el
-                      autoScroll.contentRef(el)
+            <div class="flex-1 min-h-0 overflow-hidden">
+              <Switch>
+                <Match when={params.id && mobileChanges()}>
+                  <div class="relative h-full overflow-hidden">
+                    {reviewContent({
+                      diffStyle: "unified",
+                      classes: {
+                        root: "pb-8",
+                        header: "px-4",
+                        container: "px-4",
+                      },
+                      loadingClass: "px-4 py-4 text-text-weak",
+                      emptyClass: "h-full pb-64 -mt-4 flex flex-col items-center justify-center text-center gap-6",
+                    })}
+                  </div>
+                </Match>
+                <Match when={params.id}>
+                  <Show when={messagesReady()}>
+                    <MessageTimeline
+                      actions={actions}
+                      scroll={ui.scroll}
+                      onResumeScroll={resumeScroll}
+                      setScrollRef={setScrollRef}
+                      onScheduleScrollState={scheduleScrollState}
+                      onAutoScrollHandleScroll={autoScroll.handleScroll}
+                      onMarkScrollGesture={markScrollGesture}
+                      hasScrollGesture={hasScrollGesture}
+                      onUserScroll={markUserScroll}
+                      onHistoryScroll={historyLoader.onScrollerScroll}
+                      onAutoScrollInteraction={autoScroll.handleInteraction}
+                      shouldAnchorBottom={() =>
+                        !location.hash && !store.messageId && !ui.pendingMessage && !autoScroll.userScrolled()
+                      }
+                      centered={centered()}
+                      setContentRef={(el) => {
+                        content = el
+                        autoScroll.contentRef(el)

-                      const root = scroller
-                      if (root) scheduleScrollState(root)
-                    }}
-                    historyShift={historyLoader.shift()}
-                    userMessages={historyLoader.userMessages()}
-                    anchor={anchor}
-                    setRevealMessage={(fn) => {
-                      revealMessage = fn
-                    }}
-                  />
-                </Show>
-              </Match>
-              <Match when={true}>
-                <Show when={newSessionDesign()} fallback={<NewSessionView worktree={newSessionWorktree()} />}>
-                  <NewSessionDesignView>{composerRegion("inline")}</NewSessionDesignView>
-                </Show>
-              </Match>
-            </Switch>
+                        const root = scroller
+                        if (root) scheduleScrollState(root)
+                      }}
+                      historyShift={historyLoader.shift()}
+                      userMessages={historyLoader.userMessages()}
+                      anchor={anchor}
+                      setRevealMessage={(fn) => {
+                        revealMessage = fn
+                      }}
+                    />
+                  </Show>
+                </Match>
+                <Match when={true}>
+                  <NewSessionView worktree={newSessionWorktree()} />
+                </Match>
+              </Switch>
+            </div>
+
+            <Show when={params.id || !newSessionDesign()}>{composerRegion("dock")}</Show>
          </div>

-          <Show when={params.id || !newSessionDesign()}>{composerRegion("dock")}</Show>
-
          <Show when={desktopReviewOpen()}>
            <div onPointerDown={() => size.start()}>
              <ResizeHandle
@@ -57,7 +57,7 @@ export function SessionComposerRegion(props: {
  const view = layout.view(route.sessionKey)

  const handoffPrompt = createMemo(() => getSessionHandoff(route.sessionKey())?.prompt)
-  const info = createMemo(() => (route.params.id ? sync.session.get(route.params.id) : undefined))
+  const info = createMemo(() => (route.params.id ? sync().session.get(route.params.id) : undefined))
  const parentID = createMemo(() => info()?.parentID)
  const child = createMemo(() => !!parentID())
  const showComposer = createMemo(() => !props.state.blocked() || child())
@@ -32,12 +32,12 @@ export function createSessionComposerState(options?: { closeMs?: number | (() =>
  const permission = usePermission()

  const questionRequest = createMemo((): QuestionRequest | undefined => {
-    return sessionQuestionRequest(sync.data.session, sync.data.question, params.id)
+    return sessionQuestionRequest(sync().data.session, sync().data.question, params.id)
  })

  const permissionRequest = createMemo((): PermissionRequest | undefined => {
-    return sessionPermissionRequest(sync.data.session, sync.data.permission, params.id, (item) => {
-      return !permission.autoResponds(item, sdk.directory)
+    return sessionPermissionRequest(sync().data.session, sync().data.permission, params.id, (item) => {
+      return !permission.autoResponds(item, sdk().directory)
    })
  })

@@ -50,14 +50,14 @@ export function createSessionComposerState(options?: { closeMs?: number | (() =>
  const todos = createMemo((): Todo[] => {
    const id = params.id
    if (!id) return []
-    return serverSync.data.session_todo[id] ?? []
+    return serverSync().data.session_todo[id] ?? []
  })

  const done = createMemo(
    () => todos().length > 0 && todos().every((todo) => todo.status === "completed" || todo.status === "cancelled"),
  )

-  const live = createMemo(() => sync.data.session_working(params.id ?? "") || blocked())
+  const live = createMemo(() => sync().data.session_working(params.id ?? "") || blocked())

  const [store, setStore] = createStore({
    responding: undefined as string | undefined,
@@ -78,8 +78,8 @@ export function createSessionComposerState(options?: { closeMs?: number | (() =>
    if (store.responding === perm.id) return

    setStore("responding", perm.id)
-    sdk.client.permission
-      .respond({ sessionID: perm.sessionID, permissionID: perm.id, response })
+    sdk()
+      .client.permission.respond({ sessionID: perm.sessionID, permissionID: perm.id, response })
      .catch((err: unknown) => {
        const description = err instanceof Error ? err.message : String(err)
        showToast({ title: language.t("common.requestFailed"), description })
@@ -111,8 +111,8 @@ export function createSessionComposerState(options?: { closeMs?: number | (() =>
  const clear = () => {
    const id = params.id
    if (!id) return
-    serverSync.todo.set(id, [])
-    sync.set("todo", id, [])
+    serverSync().todo.set(id, [])
+    sync().set("todo", id, [])
  }

  createEffect(
@@ -64,7 +64,7 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
  const sdk = useSDK()
  const serverSDK = useServerSDK()
  const language = useLanguage()
-  const cacheKey = ScopedKey.from(serverSDK.scope, props.request.id)
+  const cacheKey = ScopedKey.from(serverSDK().scope, props.request.id)

  const questions = createMemo(() => props.request.questions)
  const total = createMemo(() => questions().length)
@@ -209,7 +209,7 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
  }

  const replyMutation = useMutation(() => ({
-    mutationFn: (answers: QuestionAnswer[]) => sdk.client.question.reply({ requestID: props.request.id, answers }),
+    mutationFn: (answers: QuestionAnswer[]) => sdk().client.question.reply({ requestID: props.request.id, answers }),
    onMutate: () => {
      props.onSubmit()
    },
@@ -221,7 +221,7 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
  }))

  const rejectMutation = useMutation(() => ({
-    mutationFn: () => sdk.client.question.reject({ requestID: props.request.id }),
+    mutationFn: () => sdk().client.question.reject({ requestID: props.request.id }),
    onMutate: () => {
      props.onSubmit()
    },
@@ -8,8 +8,16 @@ import {
  focusTerminalById,
  getTabReorderIndex,
  shouldFocusTerminalOnKeyDown,
+  shouldShowFileTree,
 } from "./helpers"

+describe("shouldShowFileTree", () => {
+  test("does not reserve space for a disabled file tree", () => {
+    expect(shouldShowFileTree({ visible: false, opened: true })).toBe(false)
+    expect(shouldShowFileTree({ visible: true, opened: true })).toBe(true)
+  })
+})
+
 describe("createOpenReviewFile", () => {
  test("opens and loads selected review file", () => {
    const calls: string[] = []
@@ -20,6 +20,10 @@ type TabsInput = {

 export const getSessionKey = (dir: string | undefined, id: string | undefined) => `${dir ?? ""}${id ? `/${id}` : ""}`

+export function shouldShowFileTree(input: { visible: boolean; opened: boolean }) {
+  return input.opened && input.visible
+}
+
 export const createSessionTabs = (input: TabsInput) => {
  const review = input.review ?? (() => false)
  const hasReview = input.hasReview ?? (() => false)
@@ -300,7 +300,7 @@ export function MessageTimeline(props: {
  const sessionMessages = createMemo(() => {
    const id = sessionID()
    if (!id) return emptyMessages
-    return sync.data.message[id] ?? emptyMessages
+    return sync().data.message[id] ?? emptyMessages
  })
  const messageByID = createMemo(() => new Map(sessionMessages().map((message) => [message.id, message] as const)))
  const assistantMessagesByParent = createMemo(() => {
@@ -324,10 +324,10 @@ export function MessageTimeline(props: {
  const sessionStatus = createMemo(() => {
    const id = sessionID()
    if (!id) return idle
-    return sync.data.session_status[id] ?? idle
+    return sync().data.session_status[id] ?? idle
  })
  const working = createMemo(() => sessionStatus().type !== "idle")
-  const tint = createMemo(() => messageAgentColor(sessionMessages(), sync.data.agent))
+  const tint = createMemo(() => messageAgentColor(sessionMessages(), sync().data.agent))

  const [timeoutDone, setTimeoutDone] = createSignal(true)

@@ -366,25 +366,25 @@ export function MessageTimeline(props: {
  const info = createMemo(() => {
    const id = sessionID()
    if (!id) return
-    return sync.session.get(id)
+    return sync().session.get(id)
  })
  const titleValue = createMemo(() => info()?.title)
  const titleLabel = createMemo(() => sessionTitle(titleValue()))
  const shareUrl = createMemo(() => info()?.share?.url)
-  const shareEnabled = createMemo(() => sync.data.config.share !== "disabled")
+  const shareEnabled = createMemo(() => sync().data.config.share !== "disabled")
  const parentID = createMemo(() => info()?.parentID)
  const parent = createMemo(() => {
    const id = parentID()
    if (!id) return
-    return sync.session.get(id)
+    return sync().session.get(id)
  })
  const parentMessages = createMemo(() => {
    const id = parentID()
    if (!id) return emptyMessages
-    return sync.data.message[id] ?? emptyMessages
+    return sync().data.message[id] ?? emptyMessages
  })
  const parentTitle = createMemo(() => sessionTitle(parent()?.title) ?? language.t("command.session.new"))
-  const getMsgParts = (msgId: string) => sync.data.part[msgId] ?? emptyParts
+  const getMsgParts = (msgId: string) => sync().data.part[msgId] ?? emptyParts
  const childTaskDescription = createMemo(() => {
    const id = sessionID()
    if (!id) return
@@ -730,14 +730,14 @@ export function MessageTimeline(props: {
  }

  const shareMutation = useMutation(() => ({
-    mutationFn: (id: string) => serverSDK.client.session.share({ sessionID: id, directory: sdk.directory }),
+    mutationFn: (id: string) => serverSDK().client.session.share({ sessionID: id, directory: sdk().directory }),
    onError: (err) => {
      console.error("Failed to share session", err)
    },
  }))

  const unshareMutation = useMutation(() => ({
-    mutationFn: (id: string) => serverSDK.client.session.unshare({ sessionID: id, directory: sdk.directory }),
+    mutationFn: (id: string) => serverSDK().client.session.unshare({ sessionID: id, directory: sdk().directory }),
    onError: (err) => {
      console.error("Failed to unshare session", err)
    },
@@ -745,9 +745,9 @@ export function MessageTimeline(props: {

  const titleMutation = useMutation(() => ({
    mutationFn: (input: { id: string; title: string }) =>
-      sdk.client.session.update({ sessionID: input.id, title: input.title }),
+      sdk().client.session.update({ sessionID: input.id, title: input.title }),
    onSuccess: (_, input) => {
-      sync.set(
+      sync().set(
        produce((draft) => {
          const index = draft.session.findIndex((s) => s.id === input.id)
          if (index !== -1) draft.session[index].title = input.title
@@ -797,8 +797,8 @@ export function MessageTimeline(props: {
      () => [parentID(), childTaskDescription()] as const,
      ([id, description]) => {
        if (!id || description) return
-        if (sync.data.message[id] !== undefined) return
-        void sync.session.sync(id)
+        if (sync().data.message[id] !== undefined) return
+        void sync().session.sync(id)
      },
      { defer: true },
    ),
@@ -846,25 +846,25 @@ export function MessageTimeline(props: {
  }

  const archiveSession = async (sessionID: string) => {
-    const session = sync.session.get(sessionID)
+    const session = sync().session.get(sessionID)
    if (!session) return

-    const sessions = sync.data.session ?? []
+    const sessions = sync().data.session ?? []
    const index = sessions.findIndex((s) => s.id === sessionID)
    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])

-    await sdk.client.session
-      .update({ sessionID, time: { archived: Date.now() } })
+    await sdk()
+      .client.session.update({ sessionID, time: { archived: Date.now() } })
      .then(() => {
-        sync.set(
+        sync().set(
          produce((draft) => {
            const index = draft.session.findIndex((s) => s.id === sessionID)
            if (index !== -1) draft.session.splice(index, 1)
          }),
        )
-        sync.session.evict(sessionID)
+        sync().session.evict(sessionID)
        navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)
-        notifySessionTabsRemoved({ directory: sdk.directory, sessionIDs: [sessionID] })
+        notifySessionTabsRemoved({ directory: sdk().directory, sessionIDs: [sessionID] })
      })
      .catch((err) => {
        showToast({
@@ -875,15 +875,15 @@ export function MessageTimeline(props: {
  }

  const deleteSession = async (sessionID: string) => {
-    const session = sync.session.get(sessionID)
+    const session = sync().session.get(sessionID)
    if (!session) return false

-    const sessions = (sync.data.session ?? []).filter((s) => !s.parentID && !s.time?.archived)
+    const sessions = (sync().data.session ?? []).filter((s) => !s.parentID && !s.time?.archived)
    const index = sessions.findIndex((s) => s.id === sessionID)
    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])

-    const result = await sdk.client.session
-      .delete({ sessionID })
+    const result = await sdk()
+      .client.session.delete({ sessionID })
      .then((x) => x.data)
      .catch((err) => {
        showToast({
@@ -897,7 +897,7 @@ export function MessageTimeline(props: {

    const removed = new Set<string>([sessionID])
    const byParent = new Map<string, string[]>()
-    for (const item of sync.data.session) {
+    for (const item of sync().data.session) {
      const parentID = item.parentID
      if (!parentID) continue
      const existing = byParent.get(parentID)
@@ -925,16 +925,16 @@ export function MessageTimeline(props: {

    navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)

-    sync.set(
+    sync().set(
      produce((draft) => {
        draft.session = draft.session.filter((s) => !removed.has(s.id))
      }),
    )

    for (const id of removed) {
-      sync.session.evict(id)
+      sync().session.evict(id)
    }
-    notifySessionTabsRemoved({ directory: sdk.directory, sessionIDs: [...removed] })
+    notifySessionTabsRemoved({ directory: sdk().directory, sessionIDs: [...removed] })
    return true
  }

@@ -946,7 +946,7 @@ export function MessageTimeline(props: {

  function DialogDeleteSession(props: { sessionID: string }) {
    const name = createMemo(
-      () => sessionTitle(sync.session.get(props.sessionID)?.title) ?? language.t("command.session.new"),
+      () => sessionTitle(sync().session.get(props.sessionID)?.title) ?? language.t("command.session.new"),
    )
    const handleDelete = async () => {
      await deleteSession(props.sessionID)
@@ -1,14 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { shouldUseV2NewSessionPage } from "./new-session-layout"
-
-describe("shouldUseV2NewSessionPage", () => {
-  test("keeps disabled pages on the legacy layout", () => {
-    expect(shouldUseV2NewSessionPage({ newLayoutDesigns: false, sessionID: "ses_123" })).toBe(false)
-    expect(shouldUseV2NewSessionPage({ newLayoutDesigns: false })).toBe(false)
-  })
-
-  test("uses the v2 layout only for enabled new-session pages", () => {
-    expect(shouldUseV2NewSessionPage({ newLayoutDesigns: true })).toBe(true)
-    expect(shouldUseV2NewSessionPage({ newLayoutDesigns: true, sessionID: "ses_123" })).toBe(false)
-  })
-})
@@ -1,6 +1,2 @@
 /** Inline new-session content width — keep in sync with session composer `placement === "inline"`. */
 export const NEW_SESSION_CONTENT_WIDTH = "w-full max-w-[720px] px-0"
-
-export function shouldUseV2NewSessionPage(input: { newLayoutDesigns: boolean; sessionID?: string }) {
-  return input.newLayoutDesigns && !input.sessionID
-}
@@ -53,8 +53,8 @@ export function SessionReviewTab(props: SessionReviewTabProps) {
  const layout = useLayout()

  const readFile = async (path: string) => {
-    return sdk.client.file
-      .read({ path })
+    return sdk()
+      .client.file.read({ path })
      .then((x) => x.data)
      .catch((error) => {
        console.debug("[session-review] failed to read file", { path, error })
@@ -19,12 +19,17 @@ import { useCommand } from "@/context/command"
 import { useFile, type SelectedLineRange } from "@/context/file"
 import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
-import { usePlatform } from "@/context/platform"
 import { useSettings } from "@/context/settings"
 import { useSync } from "@/context/sync"
 import { createFileTabListSync } from "@/pages/session/file-tab-scroll"
 import { FileTabContent } from "@/pages/session/file-tabs"
-import { createOpenSessionFileTab, createSessionTabs, getTabReorderIndex, type Sizing } from "@/pages/session/helpers"
+import {
+  createOpenSessionFileTab,
+  createSessionTabs,
+  getTabReorderIndex,
+  shouldShowFileTree,
+  type Sizing,
+} from "@/pages/session/helpers"
 import { setSessionHandoff } from "@/pages/session/handoff"
 import { useSessionLayout } from "@/pages/session/session-layout"

@@ -48,7 +53,6 @@ export function SessionSidePanel(props: {
  size: Sizing
 }) {
  const layout = useLayout()
-  const platform = usePlatform()
  const settings = useSettings()
  const sync = useSync()
  const file = useFile()
@@ -58,11 +62,17 @@ export function SessionSidePanel(props: {
  const { sessionKey, tabs, view, params } = useSessionLayout()

  const isDesktop = createMediaQuery("(min-width: 768px)")
-  const desktopV2 = () => platform.platform === "desktop" && settings.general.newLayoutDesigns()
-  const shown = createMemo(() => (desktopV2() ? settings.general.showFileTree() : true))
+  const shown = settings.visibility.fileTree

  const reviewOpen = createMemo(() => isDesktop() && view().reviewPanel.opened())
-  const fileOpen = createMemo(() => isDesktop() && shown() && layout.fileTree.opened())
+  const fileOpen = createMemo(
+    () =>
+      isDesktop() &&
+      shouldShowFileTree({
+        visible: shown(),
+        opened: layout.fileTree.opened(),
+      }),
+  )
  const open = createMemo(() => reviewOpen() || fileOpen())
  const reviewTab = createMemo(() => isDesktop())
  const panelWidth = createMemo(() => {
@@ -14,6 +14,7 @@ import { Terminal } from "@/components/terminal"
 import { useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
+import { useSettings } from "@/context/settings"
 import { useTerminal } from "@/context/terminal"
 import { terminalTabLabel } from "@/pages/session/terminal-label"
 import { createSizing, focusTerminalById } from "@/pages/session/helpers"
@@ -26,6 +27,7 @@ export function TerminalPanel() {
  const terminal = useTerminal()
  const language = useLanguage()
  const command = useCommand()
+  const settings = useSettings()
  const { params, workspaceKey, view } = useSessionLayout()

  const opened = createMemo(() => view().terminal.opened())
@@ -198,35 +200,38 @@ export function TerminalPanel() {
      aria-label={language.t("terminal.title")}
      aria-hidden={!opened()}
      inert={!opened()}
-      class="relative w-full shrink-0 overflow-hidden bg-background-stronger"
+      class="relative w-full shrink-0 bg-background-stronger"
      classList={{
-        "border-t border-border-weak-base": opened(),
        "transition-[height] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[height] motion-reduce:transition-none":
          !size.active(),
      }}
      style={{ height: opened() ? `${pane()}px` : "0px" }}
    >
+      <div class="hidden md:block" onPointerDown={() => size.start()}>
+        <ResizeHandle
+          classList={{
+            "-top-1": settings.general.newLayoutDesigns(),
+          }}
+          direction="vertical"
+          size={pane()}
+          min={100}
+          max={max()}
+          collapseThreshold={50}
+          onResize={(next) => {
+            size.touch()
+            layout.terminal.resize(next)
+          }}
+          onCollapse={close}
+        />
+      </div>
      <div
-        class="absolute inset-x-0 top-0 flex flex-col"
+        class="absolute inset-x-0 top-0 flex flex-col overflow-hidden"
        classList={{
+          "border-t border-border-weak-base": opened(),
          "pointer-events-none": !opened(),
        }}
        style={{ height: `${pane()}px` }}
      >
-        <div class="hidden md:block" onPointerDown={() => size.start()}>
-          <ResizeHandle
-            direction="vertical"
-            size={pane()}
-            min={100}
-            max={max()}
-            collapseThreshold={50}
-            onResize={(next) => {
-              size.touch()
-              layout.terminal.resize(next)
-            }}
-            onCollapse={close}
-          />
-        </div>
        <Show
          when={terminal.ready()}
          fallback={
@@ -51,7 +51,7 @@ export function useUsageExceededDialogs() {
  )

  onCleanup(
-    sdk.event.on("session.status", (evt) => {
+    sdk().event.on("session.status", (evt) => {
      if (evt.properties.sessionID !== params.id) return
      if (evt.properties.status.type !== "retry") return
      const { action } = evt.properties.status
--- a/Show More
+++ b/Show More