release: v1.17.6

fix(core): ignore unavailable project copy roots (#32234 )
fix(tui): handle move directory errors (#32226 )
2026-08-03 08:46:15 -04:00 · 2026-06-13 22:38:57 +00:00 · 2026-06-13 18:10:59 -04:00 · 2026-06-13 15:57:14 -05:00 · 2026-06-13 15:29:38 -05:00 · 2026-06-13 19:59:03 +00:00
1420 changed files with 90407 additions and 62822 deletions
@@ -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
@@ -56,14 +56,24 @@ jobs:
          BUILD_LOG=$(mktemp)
          trap 'rm -f "$BUILD_LOG"' EXIT

-          # Build with fakeHash to trigger hash mismatch and reveal correct hash
-          nix build ".#packages.${SYSTEM}.node_modules_updater" --no-link 2>&1 | tee "$BUILD_LOG" || true
+          HASH=""
+          MAX_ATTEMPTS=3
+          for ((ATTEMPT = 1; ATTEMPT <= MAX_ATTEMPTS; ATTEMPT++)); do
+            # Build with fakeHash to trigger hash mismatch and reveal correct hash
+            nix build ".#packages.${SYSTEM}.node_modules_updater" --no-link 2>&1 | tee "$BUILD_LOG" || true

-          # Extract hash from build log with portability
-          HASH="$(nix run --inputs-from . nixpkgs#gnugrep -- -oP 'got:\s*\Ksha256-[A-Za-z0-9+/=]+' "$BUILD_LOG" | tail -n1 || true)"
+            HASH="$(nix run --inputs-from . nixpkgs#gnugrep -- -oP 'got:\s*\Ksha256-[A-Za-z0-9+/=]+' "$BUILD_LOG" | tail -n1 || true)"
+
+            [ -n "$HASH" ] && break
+
+            if [ "$ATTEMPT" -lt "$MAX_ATTEMPTS" ]; then
+              echo "::warning::Attempt ${ATTEMPT}/${MAX_ATTEMPTS} produced no hash for ${SYSTEM}; retrying in $((ATTEMPT * 10))s"
+              sleep $((ATTEMPT * 10))
+            fi
+          done

          if [ -z "$HASH" ]; then
-            echo "::error::Failed to compute hash for ${SYSTEM}"
+            echo "::error::Failed to compute hash for ${SYSTEM} after ${MAX_ATTEMPTS} attempts"
            cat "$BUILD_LOG"
            exit 1
          fi
@@ -90,6 +90,7 @@ jobs:
        id: build
        run: |
          ./packages/opencode/script/build.ts ${{ (github.ref_name == 'beta' && '--sourcemaps') || '' }}
+          ./packages/cli/script/build.ts ${{ (github.ref_name == 'beta' && '--sourcemaps') || '' }}
        env:
          OPENCODE_VERSION: ${{ needs.version.outputs.version }}
          OPENCODE_RELEASE: ${{ needs.version.outputs.release }}
@@ -107,6 +108,12 @@ jobs:
        with:
          name: opencode-cli-windows
          path: packages/opencode/dist/opencode-windows*
+
+      - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: opencode-preview-cli
+          path: packages/cli/dist/cli-*
+
    outputs:
      version: ${{ needs.version.outputs.version }}

@@ -327,9 +334,9 @@ jobs:
          VITE_SENTRY_ENVIRONMENT: ${{ (github.ref_name == 'beta' && 'beta') || 'production' }}
          VITE_SENTRY_RELEASE: desktop@${{ needs.version.outputs.version }}

-      - name: Package and publish
+      - name: Package
        if: needs.version.outputs.release
-        run: npx electron-builder ${{ matrix.settings.platform_flag }} --publish always --config electron-builder.config.ts
+        run: npx electron-builder ${{ matrix.settings.platform_flag }} --publish never --config electron-builder.config.ts
        working-directory: packages/desktop
        timeout-minutes: 60
        env:
@@ -349,11 +356,9 @@ jobs:
        env:
          OPENCODE_CHANNEL: ${{ (github.ref_name == 'beta' && 'beta') || 'prod' }}

-      - name: Create and upload macOS .app.tar.gz
+      - name: Create macOS .app.tar.gz
        if: runner.os == 'macOS' && needs.version.outputs.release
        working-directory: packages/desktop/dist
-        env:
-          GH_TOKEN: ${{ steps.committer.outputs.token }}
        run: |
          if [[ "${{ matrix.settings.target }}" == "x86_64-apple-darwin" ]]; then
            APP_DIR="mac"
@@ -371,7 +376,6 @@ jobs:
            exit 1
          fi
          tar -czf "$OUT_NAME" -C "$(dirname "$APP_PATH")" "$(basename "$APP_PATH")"
-          gh release upload "v${{ needs.version.outputs.version }}" "$OUT_NAME" --clobber --repo "${{ needs.version.outputs.repo }}"

      - name: Verify signed Windows Electron artifacts
        if: runner.os == 'Windows'
@@ -446,12 +450,24 @@ jobs:
          name: opencode-cli-signed-windows
          path: packages/opencode/dist

+      - uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
+        with:
+          name: opencode-preview-cli
+          path: packages/cli/dist
+
      - uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
        if: needs.version.outputs.release
        with:
          pattern: latest-yml-*
          path: /tmp/latest-yml

+      - uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
+        if: needs.version.outputs.release
+        with:
+          pattern: opencode-desktop-*
+          path: /tmp/desktop
+          merge-multiple: true
+
      - name: Setup git committer
        id: committer
        uses: ./.github/actions/setup-git-committer
@@ -478,6 +494,19 @@ jobs:
          git config --global user.name "opencode"
          ssh-keyscan -H aur.archlinux.org >> ~/.ssh/known_hosts || true

+      - name: Upload desktop release assets
+        if: needs.version.outputs.release
+        env:
+          GH_TOKEN: ${{ steps.committer.outputs.token }}
+        run: |
+          shopt -s nullglob
+          files=(/tmp/desktop/*.{exe,blockmap,dmg,zip,AppImage,deb,rpm} /tmp/desktop/*.app.tar.gz)
+          if (( ${#files[@]} == 0 )); then
+            echo "No desktop release assets found"
+            exit 1
+          fi
+          gh release upload "v${{ needs.version.outputs.version }}" "${files[@]}" --clobber --repo "${{ needs.version.outputs.repo }}"
+
      - run: ./script/publish.ts
        env:
          OPENCODE_VERSION: ${{ needs.version.outputs.version }}
@@ -1,35 +0,0 @@
-name: "sync-zed-extension"
-
-on:
-  workflow_dispatch:
-  release:
-    types: [published]
-
-jobs:
-  zed:
-    name: Release Zed Extension
-    runs-on: blacksmith-4vcpu-ubuntu-2404
-    steps:
-      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
-        with:
-          fetch-depth: 0
-
-      - uses: ./.github/actions/setup-bun
-
-      - name: Get version tag
-        id: get_tag
-        run: |
-          if [ "${{ github.event_name }}" = "release" ]; then
-            TAG="${{ github.event.release.tag_name }}"
-          else
-            TAG=$(git tag --list 'v[0-9]*.*' --sort=-version:refname | head -n 1)
-          fi
-          echo "tag=${TAG}" >> $GITHUB_OUTPUT
-          echo "Using tag: ${TAG}"
-
-      - name: Sync Zed extension
-        run: |
-          ./script/sync-zed.ts ${{ steps.get_tag.outputs.tag }}
-        env:
-          ZED_EXTENSIONS_PAT: ${{ secrets.ZED_EXTENSIONS_PAT }}
-          ZED_PR_PAT: ${{ secrets.ZED_PR_PAT }}
@@ -64,7 +64,8 @@ jobs:
            turbo-${{ runner.os }}-

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

@@ -73,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:
@@ -150,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
@@ -161,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
@@ -15,6 +15,8 @@ ts-dist
 .turbo
 **/.serena
 .serena/
+**/.omo
+.omo/
 /result
 refs
 Session.vim
@@ -1,7 +1,7 @@
 ---
 mode: primary
 hidden: true
-model: opencode/gpt-5.4-nano
+model: opencode/gpt-5.4-mini
 color: "#44BA81"
 tools:
  "*": false
@@ -1,6 +1,6 @@
 ---
 description: translate English to other languages
-model: opencode/claude-opus-4-7
+model: opencode/claude-opus-4-8
 ---

 run git diff and translate changed english doc and UI copy files to other international languages. Translate all languages in parallel to save time.
@@ -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`.
@@ -138,3 +144,15 @@ const table = sqliteTable("session", {
 ## Type Checking

 - Always run `bun typecheck` from package directories (e.g., `packages/opencode`), never `tsc` directly.
+
+## V2 Session Core
+
+- Keep durable prompt admission separate from model execution. `SessionV2.prompt(...)` admits one durable `session_input` row before scheduling advisory `SessionExecution.wake(sessionID)` unless `resume: false` requests admit-only behavior. The serialized runner promotes admitted inputs into visible user messages at safe boundaries.
+- Reusing a Session ID adopts the existing Session. Reusing a prompt message ID reconciles an exact retry only when Session, prompt, and delivery mode match; conflicting reuse fails. Historical projected prompts lazily synthesize promoted inbox records during exact retry.
+- Keep `SessionExecution` process-global and Session-ID based. Its local implementation owns the process-local Session coordinator and discovers placement through `SessionStore` plus `LocationServiceMap.get(session.location)` only when a drain starts; no layer should take a Session ID. V2 interruption targets the active process-local ownership chain for that Session; idle or missing interruption is a no-op.
+- Keep `SessionRunner`, model resolution, tool registry, permissions, and filesystem Location-scoped. Omitted `Location.workspaceID` means implicit-local placement; explicit workspace identity remains reserved for future placement semantics.
+- Preserve one explicit `llm.stream(request)` call per provider turn and reload projected history before durable continuation. Do not bridge through legacy `SessionPrompt.loop(...)` or delegate orchestration to an in-memory tool loop.
+- Keep local Session drains process-local until clustering is implemented. `SessionRunCoordinator` joins explicit same-Session resumes, coalesces prompt wakeups, and allows different Sessions to run concurrently. Advisory wakes drain eligible durable inbox rows only; post-crash activity recovery requires a separate explicit design before it may retry provider work.
+- Keep delivery vocabulary explicit. Prompts steer by default and coalesce into the active activity at the next safe provider-turn boundary. Explicit `queue` inputs open FIFO future activities one at a time after the active activity settles.
+- Keep EventV2 replay owner claims separate from clustered Session execution ownership.
+- Keep the System Context algebra, registry, and built-ins in `src/system-context`; keep Context Source producers with their observed domains, and keep Session History selection plus Context Epoch persistence Session-owned.
@@ -0,0 +1,124 @@
+# OpenCode Session Runtime
+
+OpenCode sessions preserve durable conversational history while assembling the runtime context an agent needs to act correctly in its current environment.
+
+## Language
+
+**System Context**:
+The structured collection of contextual facts presented to the model as initial instructions and chronological updates.
+_Avoid_: System prompt
+
+**Session History**:
+The projected chronological conversation selected for a provider turn after applying the active compaction and **Context Epoch** cutoffs.
+_Avoid_: Session Context
+
+**Context Source**:
+One independently observed typed value within the **System Context**, represented by a stable key, JSON codec, infallible loader, pure baseline/update renderers, and an optional removal renderer for dynamic sources.
+_Avoid_: Prompt fragment
+
+**System Context Registry**:
+The Location-scoped registry of ordered, scoped producers that contribute to the current **System Context**.
+
+**Mid-Conversation System Message**:
+A durable chronological instruction that tells the model the newly effective state of a changed **Context Source**.
+_Avoid_: System update, system notification, raw text diff
+
+**Context Epoch**:
+The span during which one effective agent's initially rendered **System Context** remains immutable, ending at compaction or another baseline-replacing transition.
+
+**Baseline System Context**:
+The full **System Context** rendered at the start of a **Context Epoch**.
+_Avoid_: Live system prompt
+
+**Context Snapshot**:
+The overwriteable model-hidden JSON state used to compare each **Context Source** with the value last admitted to a provider turn.
+
+**Unavailable Context**:
+An expected temporary inability to observe a **Context Source** value; the runtime retains its prior effective state and emits no update, or omits it until first successfully loaded.
+
+**Safe Provider-Turn Boundary**:
+The point immediately before a provider call, after durable input promotion and any required tool settlement, where context changes may be admitted chronologically.
+
+**Model Tool Output**:
+The bounded projection of a Core-executed tool result persisted in Session history and replayed to the model. A tool may shape this projection semantically, but the Tool Registry enforces the final size limit.
+
+**Managed Tool Output File**:
+A temporary file created under OpenCode's shared tool-output directory to retain complete output that was too large for Session history.
+
+**Model Request Options**:
+Provider-semantic model settings selected from the Catalog and active Session variant before the LLM protocol adapter encodes them for a provider request.
+_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.
+
+## Relationships
+
+- A **System Context** is an opaque carrier composed from zero or more **Context Sources**.
+- **Session History** contains projected conversational messages and admitted **Mid-Conversation System Messages**; the active **Baseline System Context** remains separate provider-request state.
+- The **System Context Registry** uses stable-keyed scoped contributions to assemble the current **System Context**; contributor removal naturally removes its sources at the next **Safe Provider-Turn Boundary**.
+- A changed **Context Source** may produce one **Mid-Conversation System Message** containing its newly effective state.
+- A **Mid-Conversation System Message** persists the exact combined rendered text sent to the model.
+- The current **Context Snapshot** advances atomically with the corresponding durable **Mid-Conversation System Message**.
+- A **Context Snapshot** stores one codec-encoded JSON value and, for removable dynamic sources, a pre-rendered removal message per stable **Context Source** key.
+- Changes from multiple **Context Sources** admitted at one safe boundary combine into one **Mid-Conversation System Message**.
+- Context changes are sampled and admitted lazily at a **Safe Provider-Turn Boundary**, never pushed asynchronously when their source changes.
+- At a **Safe Provider-Turn Boundary**, newly promoted user input or settled tool results precede any combined **Mid-Conversation System Message**.
+- The first provider turn renders the latest complete **Baseline System Context** and initializes its **Context Snapshot** without emitting a redundant **Mid-Conversation System Message**; unavailable initial context blocks the turn instead of persisting an incomplete baseline.
+- Initial **System Context** preparation precedes the first durable input promotion so an unavailable baseline leaves that input pending and retryable; ordinary reconciliation remains after promotion.
+- Compaction starts a new **Context Epoch** with a freshly rendered **Baseline System Context** and **Context Snapshot**; prior **Mid-Conversation System Messages** remain durable audit history but leave projected model history.
+- A newly registered core or plugin-defined **Context Source** absent from the current snapshot emits its baseline rendering once at the next **Safe Provider-Turn Boundary**.
+- **Context Source** keys are stable and namespaced; duplicate keys fail composition. `SystemContext.combine(...)` preserves caller order; the **System Context Registry** evaluates producers concurrently and combines them in stable contribution-key order so rendered context remains deterministic.
+- Each **Context Source** loader returns one coherent typed value. `SystemContext.make(...)` hides that value type so differently typed sources compose uniformly. Its codec compares and stores that value; its pure renderers produce model-visible baseline, update, and removal text only when needed.
+- `SystemContext.initialize(...)` observes a composed **System Context** once and produces a fresh **Baseline System Context** with its **Context Snapshot**.
+- `SystemContext.reconcile(...)` observes a composed **System Context** once and returns exactly one next action: unchanged, updated, replacement ready, or replacement blocked.
+- `SystemContext.replace(...)` represents an explicit baseline-replacing transition such as compaction or model/provider switch; it either produces a fresh generation or reports that replacement is blocked by unavailable admitted context.
+- Context Epoch preparation retries until stable after optimistic revision mismatches so concurrent replacement requests cannot terminate an otherwise valid safe-boundary run.
+- **Unavailable Context** uses stale-while-revalidate semantics and is distinct from a successfully loaded absence, which may emit removal text.
+- Ordinary **Context Source** loaders return values directly; loaders that intentionally use stale-while-revalidate may explicitly return **Unavailable Context**.
+- Nested project instruction discovery after successful reads remains a follow-up; when implemented, discovered instructions must be admitted durably at the next **Safe Provider-Turn Boundary**.
+- Location-scoped services naturally re-resolve effective context when a moved session next runs in its destination location.
+- Moving a Session clears its active **Context Epoch**, so the destination must initialize a complete baseline before another prompt can promote.
+- Context Epoch initialization is fenced against the authoritative Session Location, so an old-Location runner cannot recreate source context after a concurrent move.
+- Instruction discovery, source identity, persistence, and file loading belong to the instruction service; the **System Context** abstraction only composes effectful producers and renders loaded values.
+- The first instruction-service slice observes global and upward project `AGENTS.md` files as one ordered aggregate **Context Source** at each **Safe Provider-Turn Boundary**.
+- Built-in and instruction context producers register through the **System Context Registry** with stable contribution keys. Plugin-defined context registration and hot-reload lifecycle remain a follow-up built on the same scoped registry seam.
+- Selected-agent available-skill guidance is a **Context Source** composed with Location-wide registry sources immediately before Context Epoch admission. It lists only names and descriptions permitted for that agent; skill bodies and locations are exposed only through the permission-checked `skill` tool.
+- Switching the selected agent requests **Context Epoch** replacement. A switch admitted after the current **Safe Provider-Turn Boundary** applies to the next provider turn while leaving the already-prepared baseline durable. Epoch creation is fenced against the authoritative effective agent, and retries re-observe the current agent.
+- A cross-agent replacement must complete before another provider turn; unavailable admitted context blocks that replacement instead of exposing the previous agent's privileged baseline.
+- Local tool authorization and pending permission requests retain the effective agent of the provider turn that issued the call; a later agent switch cannot change that call's policy.
+- Context source changes never wake idle sessions; the next naturally scheduled **Safe Provider-Turn Boundary** loads and compares current values lazily.
+- Once admitted, a **Mid-Conversation System Message** remains durable even if the following provider attempt fails and is replayed unchanged on retry.
+- **Mid-Conversation System Messages** remain durable Session-message history; normal user-facing transcript surfaces may hide them.
+- The date **Context Source** initially preserves host-local calendar-date behavior; a configured user timezone may replace that default later.
+- A **Context Epoch** begins with one immutable **Baseline System Context**.
+- A **Context Epoch** durably records the effective agent that owns its **Baseline System Context**.
+- A **Baseline System Context** is stored durably and reused verbatim across process restarts within its **Context Epoch**.
+- A **Baseline System Context** durably preserves the exact joined text used for the active provider-cache prefix.
+- Compaction or a model/provider switch starts a new **Context Epoch** because the baseline can be replaced without preserving the prior provider cache.
+- 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.
+- 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.
+- Oversized textual **Model Tool Output** retains a bounded preview in Session history while its complete text moves to managed tool-output storage. Arbitrary structured-result size is a separate concern.
+- One tool settlement receives one aggregate textual limit, using the configured maximum lines or UTF-8 bytes, whichever is reached first. The limit is provider-independent; token pressure belongs to context assembly and compaction.
+- Generic truncation preserves the beginning and end of textual output. Tools may apply a more meaningful strategy before the Tool Registry enforces the final limit.
+- A truncated **Model Tool Output** identifies its complete text both in the bounded model-visible preview and as a typed managed output path. Managed output paths do not modify the tool's validated structured result.
+- A **Managed Tool Output File** is temporary and may expire after its retention period. The bounded **Model Tool Output**, not the file, is the durable replayable record.
+- Failure to retain a **Managed Tool Output File** does not change a successful tool operation into a failed one. The Session records an explicitly lossy bounded output without a path, while operators receive diagnostics for the storage failure.
+- Once a tool operation succeeds, bounding its **Model Tool Output** and publishing its one durable settlement form an interruption-safe completion region. Raw oversized success is never published before a later correction.
+- When a structured-only result would exceed the **Model Tool Output** limit, its validated structured value remains unchanged for Session consumers while model replay uses a bounded textual JSON preview and optional managed output path.
+- Existing tool-managed output paths survive generic bounding. A fallback file retains exactly the complete projected text received by the Tool Registry and never claims to reconstruct output already discarded by tool-specific shaping.
+- **Managed Tool Output Files** use globally unique names in one shared flat directory. Their absolute paths are readable and searchable by ordinary tools; other absolute paths remain outside Location-scoped filesystem authority.
+- Provider-executed tool results remain provider-native transcript facts outside generic Tool Registry bounding. Their context control requires provider-aware pruning or compaction because some providers require exact structured round-trip payloads.
+
+## Example dialogue
+
+> **Dev:** "The date changed while the session was active. Should the **Mid-Conversation System Message** say what the old date was?"
+> **Domain expert:** "No. Emit the newly effective date so the agent can act on the current **System Context**."
+
+## Flagged ambiguities
+
+- Legacy `experimental.chat.system.transform` can mutate the assembled baseline system prompt arbitrarily, but V2 plugins do not yet expose an equivalent hook. Decide separately whether to port it, replace dynamic uses with plugin-defined **Context Sources**, or narrow its semantics.
@@ -2,7 +2,7 @@
 exact = true
 # Only install newly resolved package versions published at least 3 days ago.
 minimumReleaseAge = 259200
-minimumReleaseAgeExcludes = ["@opentui/core", "@opentui/core-darwin-arm64", "@opentui/core-darwin-x64", "@opentui/core-linux-arm64", "@opentui/core-linux-x64", "@opentui/core-win32-arm64", "@opentui/core-win32-x64", "@opentui/keymap", "@opentui/solid", "gitlab-ai-provider"]
+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-rQ8kz/fChREJWnwY2Jp2zp06TYesyd3hia44hdo8l+s=",
-    "aarch64-linux": "sha256-t5WKzAN8NRO/4g2l+4V5SatK/LO3ZPBfmKjJFf/MsD4=",
-    "aarch64-darwin": "sha256-QbNaxGNiKdJ0/mKaTUk392qsOvlRYVi5mTuMmFByEic=",
-    "x86_64-darwin": "sha256-lewm6WvqxphR+rvXz9e7ZKvgu98MH3cxosvQkz3mLuA="
+    "x86_64-linux": "sha256-Y+8gz+NfFSb4dysjho4CCaQpx012vvajnptfd3cdh/k=",
+    "aarch64-linux": "sha256-dfkEJ57XvxCM4huM5Ij7tSy+JUPKYmBMZDGZKZ5xSXA=",
+    "aarch64-darwin": "sha256-CJ8dvzGzJp5sgaNJYHwxRc1xK9bWA8zyTmDFi4wTI3o=",
+    "x86_64-darwin": "sha256-7/kwFObujL4z4544Q0D2LN/SxT8sHnJyVrzmBXbJajA="
  }
 }
@@ -37,10 +37,11 @@
      "@types/bun": "1.3.13",
      "@types/cross-spawn": "6.0.6",
      "@octokit/rest": "22.0.0",
+      "@hono/standard-validator": "0.2.0",
      "@hono/zod-validator": "0.4.2",
-      "@opentui/core": "0.3.1",
-      "@opentui/keymap": "0.3.1",
-      "@opentui/solid": "0.3.1",
+      "@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",
@@ -51,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",
@@ -139,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",
@@ -147,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"
  }
 }
@@ -0,0 +1,87 @@
+import { expect, test, type Page } from "@playwright/test"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectAppVisible } from "../utils/waits"
+
+const directory = "C:/OpenCode/PromptThinkingLevelRegression"
+const projectID = "proj_prompt_thinking_level_regression"
+const sessionID = "ses_prompt_thinking_level_regression"
+
+test("shows the V2 thinking level control while relevant", async ({ page }) => {
+  await mockOpenCodeServer(page, {
+    directory,
+    project: {
+      id: projectID,
+      worktree: directory,
+      vcs: "git",
+      name: "prompt-thinking-level-regression",
+      time: { created: 1700000000000, updated: 1700000000000 },
+      sandboxes: [],
+    },
+    provider: {
+      all: [
+        {
+          id: "opencode",
+          name: "OpenCode",
+          models: {
+            "thinking-model": {
+              id: "thinking-model",
+              name: "Thinking Model",
+              limit: { context: 200_000 },
+              variants: { high: {} },
+            },
+          },
+        },
+      ],
+      connected: ["opencode"],
+      default: { providerID: "opencode", modelID: "thinking-model" },
+    },
+    sessions: [
+      {
+        id: sessionID,
+        slug: "prompt-thinking-level-regression",
+        projectID,
+        directory,
+        title: "Prompt thinking level regression",
+        version: "dev",
+        time: { created: 1700000000000, updated: 1700000000000 },
+      },
+    ],
+    pageMessages: () => ({ items: [] }),
+  })
+  await page.addInitScript(() => {
+    localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
+  })
+
+  await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
+  const composer = page.locator('[data-component="session-composer"]')
+  const input = composer.locator('[data-component="prompt-input"]')
+  const control = composer.locator('[data-component="prompt-variant-control"]')
+  await expectAppVisible(composer)
+
+  await idleComposer(page)
+  await expect(control).toBeHidden()
+
+  await composer.hover()
+  await expect(control).toBeVisible()
+
+  await control.locator('[data-action="prompt-model-variant"]').click()
+  const high = page.getByRole("option", { name: "high" })
+  await expect(high).toBeVisible()
+  await page.mouse.move(0, 0)
+  await expect(control).toBeVisible()
+  await expect(high).toBeVisible()
+  await high.click()
+
+  await idleComposer(page)
+  await input.focus()
+  await expect(control).toBeVisible()
+
+  await idleComposer(page)
+  await expect(control).toBeVisible()
+})
+
+async function idleComposer(page: Page) {
+  await page.mouse.move(0, 0)
+  await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur())
+}
@@ -1,6 +1,7 @@
-import { expect, test } from "@playwright/test"
+import { test } from "@playwright/test"
 import { fixture, pageMessages } from "../smoke/session-timeline.fixture"
 import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectAppVisible } from "../utils/waits"

 test("shows loaded sessions before the directory path request resolves", async ({ page }) => {
  await mockOpenCodeServer(page, {
@@ -33,7 +34,7 @@ test("shows loaded sessions before the directory path request resolves", async (

  await page.goto("/")
  try {
-    await expect(page.getByText(fixture.expected.sourceTitle).first()).toBeVisible({ timeout: 5_000 })
+    await expectAppVisible(page.getByText(fixture.expected.sourceTitle).first())
  } finally {
    releasePath()
  }
@@ -1,5 +1,6 @@
 import { expect, test, type Locator, type Page } from "@playwright/test"
 import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectAppVisible, expectSessionTitle } from "../utils/waits"

 const directory = "C:/OpenCode/TimelineStateRegression"
 const projectID = "proj_timeline_state_regression"
@@ -106,10 +107,10 @@ test.describe("regression: session timeline local row state", () => {
    await configurePage(page)

    await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
-    await expect(page.getByRole("heading", { name: title })).toBeVisible()
+    await expectSessionTitle(page, title)

    const wrapper = page.locator(`[data-timeline-part-id="${editPartID}"]`).first()
-    await expect(wrapper).toBeVisible()
+    await expectAppVisible(wrapper)
    await expectExpanded(wrapper, true)

    await wrapper.evaluate((element) => {
@@ -142,11 +143,11 @@ test.describe("regression: session timeline local row state", () => {
    await configurePage(page)

    await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
-    await expect(page.getByRole("heading", { name: title })).toBeVisible()
+    await expectSessionTitle(page, title)

    const wrapper = page.locator(`[data-timeline-part-id="${editPartID}"]`).first()
-    await expect(wrapper).toBeVisible()
-    await expect(wrapper.locator('[data-component="file"][data-mode="diff"]').first()).toBeVisible()
+    await expectAppVisible(wrapper)
+    await expectAppVisible(wrapper.locator('[data-component="file"][data-mode="diff"]').first())
    await markDiffProbe(page)

    events.push({
@@ -1,5 +1,6 @@
 import { expect, test, type Page } from "@playwright/test"
 import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectAppVisible, expectSessionTitle } from "../utils/waits"

 const directory = "C:/OpenCode/ContextResizeRegression"
 const projectID = "proj_context_resize_regression"
@@ -23,9 +24,9 @@ test.describe("regression: session timeline context group resize", () => {
    await configurePage(page)

    await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
-    await expect(page.getByRole("heading", { name: title })).toBeVisible()
-    await expect(page.locator(`[data-timeline-part-ids="${contextIDs.join(",")}"]`).first()).toBeVisible()
-    await expect(page.locator(`[data-timeline-part-id="${followingTextID}"]`).first()).toBeVisible()
+    await expectSessionTitle(page, title)
+    await expectAppVisible(page.locator(`[data-timeline-part-ids="${contextIDs.join(",")}"]`).first())
+    await expectAppVisible(page.locator(`[data-timeline-part-id="${followingTextID}"]`).first())
    await settle(page)

    const samples = await sampleExpansion(page)
@@ -3,6 +3,7 @@ import { base64Encode } from "@opencode-ai/core/util/encode"
 import { fixture, pageMessages } from "./session-timeline.fixture"
 import { trackPageErrors, expectNoSmokeErrors } from "../utils/errors"
 import { mockOpenCodeServer } from "../utils/mock-server"
+import { APP_READY_TIMEOUT, expectAppVisible, expectSessionTitle } from "../utils/waits"

 const forbiddenText = ["Load details", "Show earlier steps"]

@@ -411,18 +412,21 @@ function expectCompleteScroll(

 async function selectHomeProject(page: Page, projectName: string) {
  await page.goto("/")
-  await page
+  const row = page
    .locator('[data-component="home-project-row"]')
    .filter({ hasText: new RegExp(projectName, "i") })
-    .click()
+    .first()
+  await expectAppVisible(row)
+  await row.click()
+  await expect(row).toHaveAttribute("data-selected", "", { timeout: APP_READY_TIMEOUT })
  await expect(page).toHaveURL(/\/$/)
 }

 async function navigateToSession(page: Page, directory: string, sessionId: string, expectedTitle: string) {
  await page.goto(`/${base64Encode(directory)}/session/${sessionId}`)
-  await expect(page.getByRole("heading", { name: expectedTitle })).toBeVisible()
+  await expectSessionTitle(page, expectedTitle)
 }

 async function expectSessionReady(page: Page) {
-  await expect(page.getByRole("textbox", { name: /Ask anything/i })).toBeVisible()
+  await expectAppVisible(page.getByRole("textbox", { name: /Ask anything/i }))
 }
@@ -0,0 +1,11 @@
+import { expect, type Locator, type Page } from "@playwright/test"
+
+export const APP_READY_TIMEOUT = 30_000
+
+export async function expectAppVisible(locator: Locator) {
+  await expect(locator).toBeVisible({ timeout: APP_READY_TIMEOUT })
+}
+
+export async function expectSessionTitle(page: Page, title: string) {
+  await expectAppVisible(page.getByRole("heading", { name: title }))
+}
@@ -1,11 +1,13 @@
 {
  "name": "@opencode-ai/app",
-  "version": "1.15.13",
+  "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"
  },
@@ -16,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 {
@@ -25,7 +25,6 @@ import {
  onCleanup,
  type ParentProps,
  Show,
-  Suspense,
 } from "solid-js"
 import { Dynamic } from "solid-js/web"
 import { CommandProvider } from "@/context/command"
@@ -44,23 +43,88 @@ 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 DirectoryLayout from "@/pages/directory-layout"
+import { TabsProvider, useTabs, type DraftTab } from "@/context/tabs"
+import { SDKProvider, useSDK } from "@/context/sdk"
+import { WslServersProvider } from "@/wsl/context"
+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 },
 )

+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 server = useServer()
+  const tabs = useTabs()
+  const draft = createMemo(() =>
+    tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === props.draftID),
+  )
+
+  createEffect(() => {
+    const current = draft()
+    if (current && current.server !== server.key) server.setActive(current.server)
+  })
+
+  // Key on the directory so retargeting the draft's project re-instantiates the
+  // SDK/data providers for the new directory while keeping the same draft id.
+  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>
@@ -69,9 +133,7 @@ function UiI18nBridge(props: ParentProps) {
 declare global {
  interface Window {
    __OPENCODE__?: {
-      updaterEnabled?: boolean
      deepLinks?: string[]
-      wsl?: boolean
    }
    api?: {
      setTitlebar?: (theme: { mode: "light" | "dark" }) => Promise<void>
@@ -142,6 +204,18 @@ function SessionProviders(props: ParentProps) {
  )
 }

+// 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 (
+    <FileProvider>
+      <PromptProvider>
+        <CommentsProvider>{props.children}</CommentsProvider>
+      </PromptProvider>
+    </FileProvider>
+  )
+}
+
 function RouterRoot(props: ParentProps<{ appChildren?: JSX.Element }>) {
  return (
    <AppShellProviders>
@@ -171,11 +245,13 @@ export function AppBaseProviders(props: ParentProps<{ locale?: Locale }>) {
              }}
            >
              <QueryProvider>
-                <DialogProvider>
-                  <MarkedProvider>
-                    <FileComponentProvider component={File}>{props.children}</FileComponentProvider>
-                  </MarkedProvider>
-                </DialogProvider>
+                <WslServersProvider>
+                  <DialogProvider>
+                    <MarkedProvider>
+                      <FileComponentProvider component={File}>{props.children}</FileComponentProvider>
+                    </MarkedProvider>
+                  </DialogProvider>
+                </WslServersProvider>
              </QueryProvider>
            </ErrorBoundary>
          </UiI18nBridge>
@@ -211,26 +287,21 @@ function ConnectionGate(props: ParentProps<{ disableHealthCheck?: boolean }>) {
          Effect.runPromise,
        ),
  )
+  const checking = createMemo(
+    () => checkMode() === "blocking" && ["unresolved", "pending"].includes(startupHealthCheck.state),
+  )

  return (
-    <Suspense
+    <Show
+      when={!checking()}
      fallback={
        <div class="h-dvh w-screen flex flex-col items-center justify-center bg-background-base">
          <Splash class="w-16 h-20 opacity-50 animate-pulse" />
        </div>
      }
    >
-      {/*<Show
-        when={checkMode() === "blocking" ? !startupHealthCheck.loading : startupHealthCheck.state !== "pending"}
-        fallback={
-          <div class="h-dvh w-screen flex flex-col items-center justify-center bg-background-base">
-            <Splash class="w-16 h-20 opacity-50 animate-pulse" />
-          </div>
-        }
-      >*/}
-      {checkMode() === "blocking" ? startupHealthCheck() : startupHealthCheck.latest}
      <Show
-        when={startupHealthCheck()}
+        when={startupHealthCheck.latest}
        fallback={
          <ConnectionError
            onRetry={() => {
@@ -246,8 +317,7 @@ function ConnectionGate(props: ParentProps<{ disableHealthCheck?: boolean }>) {
      >
        {props.children}
      </Show>
-      {/*</Show>*/}
-    </Suspense>
+    </Show>
  )
 }

@@ -310,32 +380,42 @@ function ServerKey(props: ParentProps) {
 export function AppInterface(props: {
  children?: JSX.Element
  defaultServer: ServerConnection.Key
+  canonicalLocalServer?: ServerConnection.Key
  servers?: Array<ServerConnection.Any>
  router?: Component<BaseRouterProps>
  disableHealthCheck?: boolean
 }) {
  return (
-    <ServerProvider defaultServer={props.defaultServer} servers={props.servers}>
-      <GlobalProvider defaultServer={props.defaultServer} servers={props.servers}>
+    <ServerProvider
+      defaultServer={props.defaultServer}
+      canonicalLocalServer={props.canonicalLocalServer}
+      servers={props.servers}
+    >
+      <GlobalProvider>
        <ConnectionGate disableHealthCheck={props.disableHealthCheck}>
-          <ServerKey>
-            <QueryProvider>
-              <ServerSDKProvider>
-                <ServerSyncProvider>
-                  <Dynamic
-                    component={props.router ?? Router}
-                    root={(routerProps) => <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>}
-                  >
-                    <Route path="/" component={HomeRoute} />
-                    <Route path="/:dir" component={DirectoryLayout}>
-                      <Route path="/" component={() => <Navigate href="session" />} />
-                      <Route path="/session/:id?" component={SessionRoute} />
-                    </Route>
-                  </Dynamic>
-                </ServerSyncProvider>
-              </ServerSDKProvider>
-            </QueryProvider>
-          </ServerKey>
+          <Dynamic
+            component={props.router ?? Router}
+            root={(routerProps) => (
+              <TabsProvider>
+                <ServerKey>
+                  <QueryProvider>
+                    <ServerSDKProvider>
+                      <ServerSyncProvider>
+                        <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>
+                      </ServerSyncProvider>
+                    </ServerSDKProvider>
+                  </QueryProvider>
+                </ServerKey>
+              </TabsProvider>
+            )}
+          >
+            <Route path="/" component={HomeRoute} />
+            <Route path="/new-session" component={DraftRoute} />
+            <Route path="/:dir" component={DirectoryLayout}>
+              <Route path="/" component={() => <Navigate href="session" />} />
+              <Route path="/session/:id?" component={SessionRoute} />
+            </Route>
+          </Dynamic>
        </ConnectionGate>
      </GlobalProvider>
    </ServerProvider>
@@ -6,21 +6,23 @@ import { useMutation } from "@tanstack/solid-query"
 import { Icon } from "@opencode-ai/ui/icon"
 import { createMemo, For, Show } from "solid-js"
 import { createStore } from "solid-js/store"
-import { useServerSDK } from "@/context/server-sdk"
-import { useServerSync } from "@/context/server-sync"
 import { type LocalProject, getAvatarColors } from "@/context/layout"
 import { getFilename } from "@opencode-ai/core/util/path"
 import { Avatar } from "@opencode-ai/ui/avatar"
 import { useLanguage } from "@/context/language"
 import { getProjectAvatarSource } from "@/pages/layout/helpers"
+import { ServerConnection } from "@/context/server"
+import { useGlobal } from "@/context/global"

 const AVATAR_COLOR_KEYS = ["pink", "mint", "orange", "purple", "cyan", "lime"] as const

-export function DialogEditProject(props: { project: LocalProject }) {
+export function DialogEditProject(props: { project: LocalProject; server: ServerConnection.Any }) {
  const dialog = useDialog()
-  const serverSDK = useServerSDK()
-  const serverSync = useServerSync()
+  const global = useGlobal()
  const language = useLanguage()
+  const serverCtx = createMemo(() => global.createServerCtx(props.server))
+  const serverSDK = () => serverCtx().sdk
+  const serverSync = () => serverCtx().sync

  const folderName = createMemo(() => getFilename(props.project.worktree))
  const defaultName = createMemo(() => props.project.name || folderName())
@@ -78,19 +80,19 @@ export function DialogEditProject(props: { project: LocalProject }) {
      const start = store.startup.trim()

      if (props.project.id && props.project.id !== "global") {
-        await serverSDK.client.project.update({
+        await serverSDK().client.project.update({
          projectID: props.project.id,
          directory: props.project.worktree,
          name,
          icon: { color: store.color || "", override: store.iconOverride || "" },
          commands: { start },
        })
-        serverSync.project.icon(props.project.worktree, store.iconOverride || undefined)
+        serverSync().project.icon(props.project.worktree, store.iconOverride || undefined)
        dialog.close()
        return
      }

-      serverSync.project.meta(props.project.worktree, {
+      serverSync().project.meta(props.project.worktree, {
        name,
        icon: { color: store.color || undefined, override: store.iconOverride || undefined },
        commands: { start: start || undefined },
@@ -399,6 +399,7 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
        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,10 +16,7 @@ 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 ?? {})
@@ -30,21 +24,7 @@ export const DialogSelectMcp: Component = () => {
      .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)
@@ -18,6 +18,7 @@ import { usePlatform } from "@/context/platform"
 import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
 import { type ServerHealth, useCheckServerHealth } from "@/utils/server-health"
 import { useSettings } from "@/context/settings"
+import { useTabs } from "@/context/tabs"

 const DEFAULT_USERNAME = "opencode"

@@ -188,9 +189,10 @@ export function DialogSelectServer() {
  )
 }

-export function useServerManagementController(options: { onSelect?: () => void } = {}) {
+export function useServerManagementController(options: { onSelect?: () => void; navigateOnAdd?: boolean } = {}) {
  const navigate = useNavigate()
  const server = useServer()
+  const tabs = useTabs()
  const global = useGlobal()
  const platform = usePlatform()
  const language = useLanguage()
@@ -263,6 +265,11 @@ export function useServerManagementController(options: { onSelect?: () => void }
      }

      resetAdd()
+      if (options.navigateOnAdd === false) {
+        server.add(conn)
+        options.onSelect?.()
+        return
+      }
      await select(conn, true)
    },
  }))
@@ -311,12 +318,14 @@ export function useServerManagementController(options: { onSelect?: () => void }
  }))

  const replaceServer = (original: ServerConnection.Http, next: ServerConnection.Http) => {
+    const originalKey = ServerConnection.key(original)
    const active = server.key
+    tabs.removeServer(originalKey)
    const newConn = server.add(next)
    if (!newConn) return
-    const nextActive = active === ServerConnection.key(original) ? ServerConnection.key(newConn) : active
+    const nextActive = active === originalKey ? ServerConnection.key(newConn) : active
    if (nextActive) server.setActive(nextActive)
-    server.remove(ServerConnection.key(original))
+    server.remove(originalKey)
  }

  const items = createMemo(() => {
@@ -500,10 +509,16 @@ export function useServerManagementController(options: { onSelect?: () => void }
    resetEdit()
  })

-  async function handleRemove(url: ServerConnection.Key) {
-    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"
@@ -56,7 +57,7 @@ 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,
@@ -72,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"
@@ -139,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
@@ -277,6 +283,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
    draggingType: "image" | "@mention" | null
    mode: "normal" | "shell"
    applyingHistory: boolean
+    variantOpen: boolean
  }>({
    popover: null,
    historyIndex: -1,
@@ -285,6 +292,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
    draggingType: null,
    mode: "normal",
    applyingHistory: false,
+    variantOpen: false,
  })
  const [picker, setPicker] = createStore({
    projectOpen: false,
@@ -463,7 +471,20 @@ export const PromptInput: Component<PromptInputProps> = (props) => {

  const escBlur = () => platform.platform === "desktop" && platform.os === "macos"

-  const pick = () => fileInputRef?.click()
+  const pick = () => {
+    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") => {
    setStore("mode", mode)
@@ -623,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"
@@ -1073,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),
@@ -1101,6 +1123,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  )

  const variants = createMemo(() => ["default", ...local.model.variant.list()])
+  // Check provider variants directly: `variants` also includes the UI-only default option.
+  const showVariantControl = createMemo(() => local.model.variant.list().length > 0)
  const accepting = createMemo(() => {
    const id = params.id
    if (!id) return permission.isAutoAcceptingDirectory(sdk.directory)
@@ -1348,7 +1372,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
    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,
@@ -1360,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) => {
@@ -1370,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,
    })
  }

@@ -1571,6 +1600,39 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                    <ComposerPickerTrigger state={newProjectTriggerState()} />
                  </Show>
                  <ComposerModelControl state={modelControlState()} />
+                  <Show when={store.mode !== "shell" && showVariantControl()}>
+                    <div
+                      data-component="prompt-variant-control"
+                      classList={{
+                        "hidden group-hover/prompt-input:block group-focus-within/prompt-input:block":
+                          !local.model.variant.current() && !store.variantOpen,
+                      }}
+                    >
+                      <TooltipKeybind
+                        placement="top"
+                        gutter={4}
+                        title={language.t("command.model.variant.cycle")}
+                        keybind={command.keybind("model.variant.cycle")}
+                      >
+                        <Select
+                          size="normal"
+                          options={variants()}
+                          current={local.model.variant.current() ?? "default"}
+                          label={(x) => (x === "default" ? language.t("common.default") : x)}
+                          onOpenChange={(open) => setStore("variantOpen", open)}
+                          onSelect={(value) => {
+                            local.model.variant.set(value === "default" ? undefined : value)
+                            restoreFocus()
+                          }}
+                          class="capitalize max-w-[160px] justify-start text-v2-text-text-faint"
+                          valueClass="truncate text-[13px] font-[440] leading-5 text-v2-text-text-faint"
+                          triggerStyle={control()}
+                          triggerProps={{ "data-action": "prompt-model-variant" }}
+                          variant="ghost"
+                        />
+                      </TooltipKeybind>
+                    </div>
+                  </Show>
                </div>
                <Tooltip placement="top" inactive={!working() && blank()} value={tip()}>
                  <IconButton
@@ -1890,7 +1952,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                            </TooltipKeybind>
                          </Show>
                        </div>
-                        <Show when={variants().length > 2}>
+                        <Show when={showVariantControl()}>
                          <div
                            data-component="prompt-variant-control"
                            style={providersShouldFadeIn() ? { animation: "fade-in 0.3s" } : undefined}
@@ -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"],
@@ -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,
@@ -127,6 +139,7 @@ beforeAll(async () => {
  mock.module("@/context/sdk", () => ({
    useSDK: () => {
      const sdk = {
+        scope: "local",
        directory: "/repo/main",
        client: rootClient,
        url: "http://localhost:4096",
@@ -2,9 +2,11 @@ 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 { useServer } from "@/context/server"
+import { useTabs } from "@/context/tabs"
 import { useServerSync } from "@/context/server-sync"
 import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
@@ -18,6 +20,7 @@ import { Worktree as WorktreeState } from "@/utils/worktree"
 import { buildRequestParts } from "./build-request-parts"
 import { setCursorPosition } from "./editor-dom"
 import { formatServerError } from "@/utils/server-errors"
+import { ScopedKey } from "@/utils/server-scope"

 type PendingPrompt = {
  abort: AbortController
@@ -212,6 +215,10 @@ export function createPromptSubmit(input: PromptSubmitInput) {
  const layout = useLayout()
  const language = useLanguage()
  const params = useParams()
+  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) {
@@ -232,11 +239,12 @@ export function createPromptSubmit(input: PromptSubmitInput) {

    input.onAbort?.()

-    const queued = pending.get(sessionID)
+    const key = pendingKey(sessionID)
+    const queued = pending.get(key)
    if (queued) {
      queued.abort.abort()
      queued.cleanup()
-      pending.delete(sessionID)
+      pending.delete(key)
      return Promise.resolve()
    }
    return sdk.client.session
@@ -341,7 +349,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
          })
          return
        }
-        WorktreeState.pending(createdWorktree.directory)
+        WorktreeState.pending(sdk.scope, createdWorktree.directory)
        sessionDirectory = createdWorktree.directory
      }

@@ -378,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) {
@@ -500,7 +515,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
    clearInput()

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

      if (sessionDirectory === projectDirectory) {
@@ -517,7 +532,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
        restoreInput()
      }

-      pending.set(session.id, { abort: controller, cleanup })
+      pending.set(pendingKey(session.id), { abort: controller, cleanup })

      const abortWait = new Promise<Awaited<ReturnType<typeof WorktreeState.wait>>>((resolve) => {
        if (controller.signal.aborted) {
@@ -544,11 +559,13 @@ export function createPromptSubmit(input: PromptSubmitInput) {
        }, timeoutMs)
      })

-      const result = await Promise.race([WorktreeState.wait(sessionDirectory), abortWait, timeout]).finally(() => {
-        if (timer.id === undefined) return
-        clearTimeout(timer.id)
-      })
-      pending.delete(session.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)
      return true
@@ -563,7 +580,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
      optimisticBusy: sessionDirectory === projectDirectory,
      before: waitForWorktree,
    }).catch((err) => {
-      pending.delete(session.id)
+      pending.delete(pendingKey(session.id))
      if (sessionDirectory === projectDirectory) {
        sync.set("session_status", session.id, { type: "idle" })
      }
@@ -0,0 +1,59 @@
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { type Component, Show } from "solid-js"
+import { useServerManagementController } from "@/components/dialog-select-server"
+import { useLanguage } from "@/context/language"
+import { ServerConnection } from "@/context/server"
+
+export const ServerRowMenu: Component<{
+  server: ServerConnection.Any
+  controller: ReturnType<typeof useServerManagementController>
+  onEdit: (server: ServerConnection.Http) => void
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}> = (props) => {
+  const language = useLanguage()
+  const key = ServerConnection.key(props.server)
+  const builtin = ServerConnection.builtin(props.server)
+  const isDefault = () => props.controller.defaultKey() === key
+
+  return (
+    <MenuV2 gutter={4} modal={false} placement="bottom-end" open={props.open} onOpenChange={props.onOpenChange}>
+      <MenuV2.Trigger
+        as={IconButtonV2}
+        variant="ghost-muted"
+        size="small"
+        icon={<IconV2 name="outline-dots" />}
+        aria-label={language.t("common.moreOptions")}
+      />
+      <MenuV2.Portal>
+        <MenuV2.Content>
+          <MenuV2.Group>
+            <MenuV2.GroupLabel>{language.t("settings.section.server")}</MenuV2.GroupLabel>
+            <MenuV2.Item
+              disabled={builtin || props.server.type !== "http"}
+              onSelect={() => props.onEdit(props.server as ServerConnection.Http)}
+            >
+              {language.t("dialog.server.menu.edit")}
+            </MenuV2.Item>
+            <Show when={props.controller.canDefault() && !isDefault()}>
+              <MenuV2.Item onSelect={() => props.controller.setDefault(key)}>
+                {language.t("dialog.server.menu.default")}
+              </MenuV2.Item>
+            </Show>
+            <Show when={props.controller.canDefault() && isDefault()}>
+              <MenuV2.Item onSelect={() => props.controller.setDefault(null)}>
+                {language.t("dialog.server.menu.defaultRemove")}
+              </MenuV2.Item>
+            </Show>
+            <MenuV2.Separator />
+            <MenuV2.Item disabled={builtin} onSelect={() => props.controller.handleRemove(key)}>
+              {language.t("dialog.server.menu.delete")}
+            </MenuV2.Item>
+          </MenuV2.Group>
+        </MenuV2.Content>
+      </MenuV2.Portal>
+    </MenuV2>
+  )
+}
@@ -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,
@@ -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>
@@ -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,66 +120,14 @@ 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()
-  const globalSdk = useServerSDK()
+  const serverSdk = useServerSDK()

  const [shells] = createResource(
    () =>
-      globalSdk.client.pty
+      serverSdk.client.pty
        .shells()
        .then((res) => res.data ?? [])
        .catch(() => [] as ShellOption[]),
@@ -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>
@@ -0,0 +1,129 @@
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Dialog, DialogFooter } from "@opencode-ai/ui/v2/dialog-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { type Component, Show, createEffect, createSignal, onCleanup, onMount } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { type ServerConnection } from "@/context/server"
+import { useServerManagementController } from "../dialog-select-server"
+import "./settings-v2.css"
+
+export const DialogServerV2: Component<{
+  mode: "add" | "edit"
+  server?: ServerConnection.Http
+}> = (props) => {
+  const dialog = useDialog()
+  const language = useLanguage()
+  const controller = useServerManagementController({
+    onSelect: () => dialog.close(),
+    navigateOnAdd: false,
+  })
+  const [opened, setOpened] = createSignal(false)
+
+  onMount(() => {
+    if (props.mode === "add") controller.startAdd()
+    if (props.mode === "edit" && props.server) controller.startEdit(props.server)
+    setOpened(true)
+  })
+
+  onCleanup(() => {
+    controller.resetForm()
+  })
+
+  createEffect(() => {
+    if (!opened()) return
+    if (controller.isFormMode()) return
+    dialog.close()
+  })
+
+  const keyDown = (event: KeyboardEvent) => {
+    if (event.key !== "Enter" || event.isComposing) return
+    event.preventDefault()
+    controller.submitForm()
+  }
+
+  const title = () =>
+    props.mode === "add" ? language.t("dialog.server.add.title") : language.t("dialog.server.edit.title")
+
+  const submitLabel = () => {
+    if (controller.formBusy()) return language.t("dialog.server.add.checking")
+    if (props.mode === "add") return language.t("dialog.server.add.button")
+    return language.t("common.save")
+  }
+
+  return (
+    <Dialog title={title()} fit class="settings-v2-server-dialog">
+      <div class="flex w-full min-w-0 flex-1 flex-col px-4">
+        <div class="flex w-full min-w-0 flex-col gap-6">
+          <div class="flex w-full min-w-0 flex-col gap-2">
+            <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.url")}</label>
+            <TextInputV2
+              type="text"
+              appearance="large"
+              class="!w-full self-stretch"
+              value={controller.formValue()}
+              placeholder={language.t("dialog.server.add.placeholder")}
+              invalid={!!controller.formError()}
+              disabled={controller.formBusy()}
+              autofocus
+              onInput={(event) => controller.handleFormChange()(event.currentTarget.value)}
+              onKeyDown={keyDown}
+            />
+            <Show when={controller.formError()}>
+              <span class="settings-v2-server-dialog-error">{controller.formError()}</span>
+            </Show>
+          </div>
+          <div class="flex w-full min-w-0 flex-col gap-2">
+            <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.name")}</label>
+            <TextInputV2
+              type="text"
+              appearance="large"
+              class="!w-full self-stretch"
+              value={controller.formName()}
+              placeholder={language.t("dialog.server.add.namePlaceholder")}
+              disabled={controller.formBusy()}
+              onInput={(event) => controller.handleFormNameChange()(event.currentTarget.value)}
+              onKeyDown={keyDown}
+            />
+          </div>
+          <div class="grid w-full min-w-0 grid-cols-2 gap-4">
+            <div class="flex min-w-0 flex-col gap-2">
+              <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.username")}</label>
+              <TextInputV2
+                type="text"
+                appearance="large"
+                class="!w-full self-stretch"
+                value={controller.formUsername()}
+                placeholder={language.t("dialog.server.add.usernamePlaceholder")}
+                disabled={controller.formBusy()}
+                onInput={(event) => controller.handleFormUsernameChange()(event.currentTarget.value)}
+                onKeyDown={keyDown}
+              />
+            </div>
+            <div class="flex min-w-0 flex-col gap-2">
+              <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.password")}</label>
+              <TextInputV2
+                type="password"
+                appearance="large"
+                class="!w-full self-stretch"
+                value={controller.formPassword()}
+                placeholder={language.t("dialog.server.add.passwordPlaceholder")}
+                disabled={controller.formBusy()}
+                onInput={(event) => controller.handleFormPasswordChange()(event.currentTarget.value)}
+                onKeyDown={keyDown}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <DialogFooter>
+        <ButtonV2 variant="neutral" disabled={controller.formBusy()} onClick={() => dialog.close()}>
+          {language.t("common.cancel")}
+        </ButtonV2>
+        <ButtonV2 variant="contrast" disabled={controller.formBusy()} onClick={controller.submitForm}>
+          {submitLabel()}
+        </ButtonV2>
+      </DialogFooter>
+    </Dialog>
+  )
+}
@@ -9,21 +9,15 @@ import { SettingsKeybinds } from "../settings-keybinds"
 import { SettingsProvidersV2 } from "./providers"
 import { SettingsModelsV2 } from "./models"
 import "./settings-v2.css"
-import { SettingsServers } from "../settings-servers"
+import { SettingsServersV2 } from "./servers"

 export const DialogSettings: Component = () => {
  const language = useLanguage()
  const platform = usePlatform()

  return (
-    <Dialog size="x-large" class="settings-v2-dialog" data-component="settings-v2-dialog">
-      <TabsV2
-        orientation="vertical"
-        variant="settings"
-        defaultValue="general"
-        class="settings-v2"
-        data-component="settings-v2"
-      >
+    <Dialog size="x-large" variant="settings" class="settings-v2-dialog">
+      <TabsV2 orientation="vertical" variant="settings" defaultValue="general" class="settings-v2">
        <TabsV2.List>
          <div class="flex flex-col justify-between h-full w-full">
            <div class="flex flex-col gap-3 w-full">
@@ -39,16 +33,16 @@ export const DialogSettings: Component = () => {
                      <Icon name="keyboard" />
                      {language.t("settings.tab.shortcuts")}
                    </TabsV2.Trigger>
-                    <TabsV2.Trigger value="servers">
-                      <Icon name="server" />
-                      {language.t("status.popover.tab.servers")}
-                    </TabsV2.Trigger>
                  </div>
                </div>

                <div class="flex flex-col gap-1.5">
                  <TabsV2.SectionTitle>{language.t("settings.section.server")}</TabsV2.SectionTitle>
                  <div class="flex flex-col gap-1.5 w-full">
+                    <TabsV2.Trigger value="servers">
+                      <Icon name="server" />
+                      {language.t("status.popover.tab.servers")}
+                    </TabsV2.Trigger>
                    <TabsV2.Trigger value="providers">
                      <Icon name="providers" />
                      {language.t("settings.providers.title")}
@@ -74,7 +68,7 @@ export const DialogSettings: Component = () => {
          <SettingsKeybinds v2 />
        </TabsV2.Content>
        <TabsV2.Content value="servers" class="settings-v2-panel">
-          <SettingsServers />
+          <SettingsServersV2 />
        </TabsV2.Content>
        <TabsV2.Content value="providers" class="settings-v2-panel">
          <SettingsProvidersV2 />
@@ -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,78 +119,20 @@ 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 globalSync = useServerSync()
-  const globalSdk = useServerSDK()
+  const serverSync = useServerSync()
+  const serverSdk = useServerSDK()

  const [shells] = createResource(
    () =>
-      globalSdk.client.pty
+      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(() => globalSync.data.config.shell ?? "")
+  const currentShell = createMemo(() => serverSync.data.config.shell ?? "")

  const shellOptions = createMemo<ShellSelectOption[]>(() => {
    const list = shells.latest
-    const current = globalSync.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
-              globalSync.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>
    </>
  )
@@ -33,8 +33,8 @@ const PROVIDER_ICON_SIZE = 16
 export const SettingsProvidersV2: Component = () => {
  const dialog = useDialog()
  const language = useLanguage()
-  const globalSDK = useServerSDK()
-  const globalSync = useServerSync()
+  const serverSdk = useServerSDK()
+  const serverSync = useServerSync()
  const providers = useProviders()

  const connected = createMemo(() => {
@@ -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 = globalSync.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 = globalSync.data.config.disabled_providers ?? []
+    const before = serverSync.data.config.disabled_providers ?? []
    const next = before.includes(providerID) ? before : [...before, providerID]
-    globalSync.set("config", "disabled_providers", next)
+    serverSync.set("config", "disabled_providers", next)

-    await globalSync
+    await serverSync
      .updateConfig({ disabled_providers: next })
      .then(() => {
        showToast({
@@ -100,7 +100,7 @@ export const SettingsProvidersV2: Component = () => {
        })
      })
      .catch((err: unknown) => {
-        globalSync.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,14 @@ export const SettingsProvidersV2: Component = () => {

  const disconnect = async (providerID: string, name: string) => {
    if (isConfigCustom(providerID)) {
-      await globalSDK.client.auth.remove({ providerID }).catch(() => undefined)
+      await serverSdk.client.auth.remove({ providerID }).catch(() => undefined)
      await disableProvider(providerID, name)
      return
    }
-    await globalSDK.client.auth
+    await serverSdk.client.auth
      .remove({ providerID })
      .then(async () => {
-        await globalSDK.client.global.dispose()
+        await serverSdk.client.global.dispose()
        showToast({
          variant: "success",
          icon: "circle-check",
@@ -0,0 +1,143 @@
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Tag } from "@opencode-ai/ui/v2/badge-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import fuzzysort from "fuzzysort"
+import { type Component, For, Show, createMemo } from "solid-js"
+import { createStore } from "solid-js/store"
+import { ServerRowMenu } from "@/components/server/server-row-menu"
+import { ServerHealthIndicator } from "@/components/server/server-row"
+import { useLanguage } from "@/context/language"
+import { ServerConnection, serverName } from "@/context/server"
+import { useServerManagementController } from "../dialog-select-server"
+import { DialogServerV2 } from "./dialog-server-v2"
+import { SettingsListV2 } from "./parts/list"
+import { isWslServer, useFilteredWslServers, WslAddServerButton, WslServerSettings } from "@/wsl/settings"
+import "./settings-v2.css"
+
+export const SettingsServersV2: Component = () => {
+  const dialog = useDialog()
+  const language = useLanguage()
+  const controller = useServerManagementController()
+  const [store, setStore] = createStore({ filter: "" })
+  const wslServers = useFilteredWslServers(() => store.filter)
+
+  const showSearch = createMemo(
+    () => controller.sortedItems().filter((item) => !isWslServer(item)).length + wslServers().length > 1,
+  )
+
+  const filtered = createMemo(() => {
+    const items = controller.sortedItems().filter((item) => !isWslServer(item))
+    const query = store.filter.trim()
+    if (!query) return items
+    return fuzzysort
+      .go(query, items, {
+        keys: [(item) => serverName(item), (item) => item.http.url],
+      })
+      .map((result) => result.obj)
+  })
+
+  const openAdd = () => {
+    dialog.push(() => <DialogServerV2 mode="add" />)
+  }
+
+  const openEdit = (server: ServerConnection.Http) => {
+    dialog.push(() => <DialogServerV2 mode="edit" server={server} />)
+  }
+
+  return (
+    <>
+      <div
+        class="settings-v2-tab-header settings-v2-servers-header"
+        classList={{ "settings-v2-tab-header--stacked": showSearch() }}
+      >
+        <div class="settings-v2-tab-header-row">
+          <h2 class="settings-v2-tab-title">{language.t("status.popover.tab.servers")}</h2>
+          <ButtonV2 variant="ghost-muted" icon="plus" onClick={openAdd}>
+            {language.t("dialog.server.add.button")}
+          </ButtonV2>
+          <WslAddServerButton />
+        </div>
+        <Show when={showSearch()}>
+          <div class="settings-v2-tab-search">
+            <TextInputV2
+              type="search"
+              appearance="base"
+              value={store.filter}
+              onInput={(event) => setStore("filter", event.currentTarget.value)}
+              placeholder={language.t("dialog.server.search.placeholder")}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              aria-label={language.t("dialog.server.search.placeholder")}
+            />
+            <Show when={store.filter}>
+              <IconButtonV2
+                type="button"
+                variant="ghost-muted"
+                size="small"
+                class="settings-v2-tab-search-clear"
+                icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
+                onClick={() => setStore("filter", "")}
+              />
+            </Show>
+          </div>
+        </Show>
+      </div>
+
+      <div class="settings-v2-tab-body settings-v2-servers">
+        <Show
+          when={filtered().length > 0 || wslServers().length > 0}
+          fallback={
+            <div class="settings-v2-servers-status">
+              <span>{store.filter ? language.t("palette.empty") : language.t("dialog.server.empty")}</span>
+              <Show when={store.filter}>
+                <span class="settings-v2-servers-status-filter">&quot;{store.filter}&quot;</span>
+              </Show>
+            </div>
+          }
+        >
+          <SettingsListV2>
+            <WslServerSettings controller={controller} servers={wslServers} />
+            <For each={filtered()}>
+              {(item) => {
+                const key = ServerConnection.key(item)
+                const health = () => controller.status()[key]
+                const isDefault = () => controller.defaultKey() === key
+                return (
+                  <div class="settings-v2-servers-row">
+                    <div class="settings-v2-servers-lead">
+                      <ServerHealthIndicator health={health()} />
+                      <div class="settings-v2-servers-copy">
+                        <span class="settings-v2-servers-name">{serverName(item)}</span>
+                        <span class="settings-v2-servers-meta">
+                          <Show when={health()?.version}>v{health()?.version}</Show>
+                          <Show when={health()?.version && item.type === "http"}> • </Show>
+                          <Show
+                            when={item.type === "http" && item.http.username}
+                            fallback={<Show when={item.type === "http"}>{language.t("server.row.noUsername")}</Show>}
+                          >
+                            {item.http.username}
+                          </Show>
+                        </span>
+                      </div>
+                    </div>
+                    <div class="settings-v2-servers-actions">
+                      <Show when={controller.canDefault() && isDefault()}>
+                        <Tag>{language.t("dialog.server.status.default")}</Tag>
+                      </Show>
+                      <ServerRowMenu server={item} controller={controller} onEdit={openEdit} />
+                    </div>
+                  </div>
+                )
+              }}
+            </For>
+          </SettingsListV2>
+        </Show>
+      </div>
+    </>
+  )
+}
@@ -1,11 +1,15 @@
@import "@opencode-ai/ui/v2/text-input-v2.css";
@import "@opencode-ai/ui/v2/button-v2.css";

-[data-component="settings-v2"] {
+[data-component="tabs-v2"][data-variant="settings"] {
  height: 100%;
 }

-[data-component="settings-v2-dialog"] [data-slot="dialog-body"] {
+[data-component="dialog-v2"][data-variant="settings"] [data-slot="dialog-container"] {
+  background: var(--v2-background-bg-base);
+}
+
+[data-component="dialog-v2"][data-variant="settings"] [data-slot="dialog-body"] {
  padding: 0;
  overflow: hidden;
 }
@@ -81,10 +85,6 @@
  box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
 }

-[data-slot="dialog-container"]:has(.settings-v2-dialog) {
-  box-shadow: var(--v2-elevation-overlay);
-}
-
 [data-component="settings-v2-row"] {
  display: flex;
  flex-wrap: wrap;
@@ -153,12 +153,12 @@
  width: 100%;
 }

-[data-component="settings-v2-dialog"] [data-component="select-v2-root"] {
+[data-component="dialog-v2"][data-variant="settings"] [data-component="select-v2-root"] {
  width: fit-content;
  max-width: 100%;
 }

-[data-component="settings-v2-dialog"] [data-component="button-v2"] {
+[data-component="dialog-v2"][data-variant="settings"] [data-component="button-v2"] {
  width: fit-content;
  max-width: 100%;
 }
@@ -511,3 +511,144 @@
 .settings-v2-shortcuts-status-filter {
  color: var(--v2-text-text-base);
 }
+
+.settings-v2-tab-body.settings-v2-servers {
+  gap: 0;
+}
+
+.settings-v2-tab-header.settings-v2-servers-header {
+  padding-bottom: 24px;
+}
+
+.settings-v2-servers-header .settings-v2-tab-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.settings-v2-tab-header.settings-v2-servers-header.settings-v2-tab-header--stacked {
+  gap: 24px;
+  padding-bottom: 24px;
+}
+
+.settings-v2-servers [data-component="settings-v2-list"] {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 20px;
+  border-radius: 6px;
+}
+
+.settings-v2-servers-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.settings-v2-servers-row:not(:last-child) {
+  padding-bottom: 16px;
+  margin-bottom: 16px;
+  border-bottom: 0.5px solid var(--v2-border-border-base);
+}
+
+.settings-v2-servers-actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.settings-v2-servers-lead {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.settings-v2-servers-copy {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.settings-v2-servers-name {
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 1;
+  color: var(--v2-text-text-base);
+}
+
+.settings-v2-servers-meta {
+  font-size: 11px;
+  font-weight: 440;
+  line-height: 1;
+  color: var(--v2-text-text-muted);
+}
+
+.settings-v2-servers-status {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding-block: 48px;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 1;
+  color: var(--v2-text-text-muted);
+  text-align: center;
+}
+
+.settings-v2-servers-status-filter {
+  color: var(--v2-text-text-base);
+}
+
+[data-component="dialog-v2"].settings-v2-server-dialog [data-slot="dialog-container"] {
+  width: 480px;
+  max-width: calc(100vw - 32px);
+  height: auto;
+  border-radius: 8px;
+  align-items: stretch;
+}
+
+[data-component="dialog-v2"].settings-v2-server-dialog [data-slot="dialog-content"] {
+  align-items: stretch;
+  width: 100%;
+}
+
+[data-component="dialog-v2"].settings-v2-server-dialog [data-slot="dialog-header"] {
+  align-items: center;
+  padding: 24px 24px 0;
+}
+
+[data-component="dialog-v2"].settings-v2-server-dialog [data-slot="dialog-body"] {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+[data-component="dialog-v2"].settings-v2-server-dialog [data-slot="dialog-footer"] {
+  padding: 24px;
+}
+
+.settings-v2-server-dialog-label {
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 1;
+  color: var(--v2-text-text-base);
+}
+
+.settings-v2-server-dialog-error {
+  font-size: 11px;
+  font-weight: 440;
+  line-height: 1;
+  color: var(--v2-state-fg-danger);
+}
@@ -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,16 +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 { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
+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"
-
-const pollMs = 10_000
+import { useMcpToggle } from "@/context/mcp"

 const pluginEmptyMessage = (value: string, file: string): JSXElement => {
  const parts = value.split(file)
@@ -60,7 +55,7 @@ const useDefaultServerKey = (
  get: (() => string | Promise<string | null | undefined> | null | undefined) | undefined,
 ) => {
  const [state, setState] = createStore({
-    url: undefined as string | undefined,
+    key: undefined as ServerConnection.Key | undefined,
    tick: 0,
  })

@@ -69,7 +64,7 @@ const useDefaultServerKey = (
    let dead = false
    const result = get?.()
    if (!result) {
-      setState("url", undefined)
+      setState("key", undefined)
      onCleanup(() => {
        dead = true
      })
@@ -79,7 +74,7 @@ const useDefaultServerKey = (
    if (result instanceof Promise) {
      void result.then((next) => {
        if (dead) return
-        setState("url", next ? normalizeServerUrl(next) : undefined)
+        setState("key", next ?? undefined)
      })
      onCleanup(() => {
        dead = true
@@ -87,7 +82,7 @@ const useDefaultServerKey = (
      return
    }

-    setState("url", normalizeServerUrl(result))
+    setState("key", ServerConnection.Key.make(result))
    onCleanup(() => {
      dead = true
    })
@@ -95,45 +90,12 @@ const useDefaultServerKey = (

  return {
    key: () => {
-      const u = state.url
-      if (!u) return
-      return ServerConnection.key({ type: "http", http: { url: u } })
+      return state.key
    },
    refresh: () => setState("tick", (value) => value + 1),
  }
 }

-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
@@ -160,7 +122,6 @@ export function StatusPopoverServerBody() {
  const dialog = useDialog()
  const language = useLanguage()
  const navigate = useNavigate()
-
  let dialogRun = 0
  let dialogDead = false
  onCleanup(() => {
@@ -316,7 +277,7 @@ 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
@@ -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);
+  }
+}
@@ -1,5 +1,17 @@
-import { createEffect, createMemo, For, mapArray, Match, Show, startTransition, Switch, untrack } from "solid-js"
-import { createStore, produce } from "solid-js/store"
+import {
+  createEffect,
+  createMemo,
+  createResource,
+  createSignal,
+  For,
+  Match,
+  onMount,
+  Show,
+  startTransition,
+  Switch,
+  untrack,
+} from "solid-js"
+import { createStore } from "solid-js/store"
 import { useLocation, useMatch, useNavigate, useParams } from "@solidjs/router"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Icon } from "@opencode-ai/ui/icon"
@@ -9,7 +21,7 @@ import { useTheme } from "@opencode-ai/ui/theme/context"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"

-import { getProjectAvatarVariant, useLayout, type LocalProject } from "@/context/layout"
+import { getProjectAvatarVariant, LayoutRoute, useLayout, type LocalProject } from "@/context/layout"
 import { usePlatform } from "@/context/platform"
 import { useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
@@ -17,18 +29,18 @@ import { useSettings } from "@/context/settings"
 import { WindowsAppMenu } from "./windows-app-menu"
 import { applyPath, backPath, forwardPath } from "./titlebar-history"
 import { useServerSync } from "@/context/server-sync"
-import { decodeDirectory } from "@/pages/directory-layout"
-import { iife } from "@opencode-ai/core/util/iife"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 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 {
-  readSessionTabsRemovedDetail,
-  SESSION_TABS_REMOVED_EVENT,
-  type SessionTabsRemovedDetail,
-} from "@/components/titlebar-session-events"
+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>
@@ -56,8 +68,6 @@ const v2TitlebarHeight = 36
 const minTitlebarZoom = 0.25
 const windowsControlsBaseWidth = 138 // 3 native Windows caption buttons at 46px each.

-const makeSessionHref = (b64Dir: string, sessionId: string) => `/${b64Dir}/session/${sessionId}`
-
 export type TitlebarUpdate = {
  version: () => string | undefined
  installing: () => boolean
@@ -71,6 +81,7 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
  const language = useLanguage()
  const settings = useSettings()
  const theme = useTheme()
+  const server = useServer()
  const navigate = useNavigate()
  const location = useLocation()
  const params = useParams()
@@ -243,6 +254,7 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
            const serverSync = useServerSync()
            const navigate = useNavigate()
            const homeMatch = useMatch(() => "/")
+            const layout = useLayout()

            const newSessionHref = () => {
              if (params.dir) return `/${params.dir}/session`
@@ -253,77 +265,64 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
              return `/${base64Encode(project.worktree)}/session`
            }

-            type Tab = { dir: string; sessionId: string; href: string }
-
-            const [tabsStore, tabsStoreActions] = iife(() => {
-              const [store, setStore] = createStore<Tab[]>(
-                iife(() => {
-                  if (!params.dir || !params.id) return []
-                  return [
-                    {
-                      dir: decodeDirectory(params.dir) ?? "",
-                      sessionId: params.id,
-                      href: makeSessionHref(params.dir, params.id),
-                    },
-                  ]
-                }),
-              )
-
-              const actions = {
-                addTab: (tab: Tab) => {
-                  setStore(
-                    produce((tabs) => {
-                      if (tabs.some((t) => t.href === tab.href)) return
-
-                      tabs.push(tab)
-                    }),
-                  )
-                },
-                removeTab: (href: string) => {
-                  void startTransition(() => {
-                    setStore(
-                      produce((tabs) => {
-                        const index = tabs.findIndex((t) => t.href === href)
-                        if (index === -1) return
-                        tabs.splice(index, 1)
-                        const nextTab = tabs[index] ?? tabs[tabs.length - 1]
-                        if (nextTab) navigate(nextTab.href)
-                        else navigate("/")
-                      }),
-                    )
-                  })
-                },
-                removeSessions: (input: SessionTabsRemovedDetail) => {
-                  void startTransition(() => {
-                    setStore(
-                      produce((tabs) => {
-                        const sessionIDs = new Set(input.sessionIDs)
-                        const currentHref = params.dir && params.id ? makeSessionHref(params.dir, params.id) : undefined
-                        const currentIndex = currentHref ? tabs.findIndex((tab) => tab.href === currentHref) : -1
-                        const removedCurrent =
-                          currentIndex !== -1 &&
-                          tabs[currentIndex]?.dir === input.directory &&
-                          sessionIDs.has(tabs[currentIndex]?.sessionId ?? "")
-
-                        for (let i = tabs.length - 1; i >= 0; i--) {
-                          const tab = tabs[i]
-                          if (!tab) continue
-                          if (tab.dir !== input.directory) continue
-                          if (!sessionIDs.has(tab.sessionId)) continue
-                          tabs.splice(i, 1)
-                        }
-
-                        if (!removedCurrent) return
-                        const nextTab = tabs[currentIndex] ?? tabs[tabs.length - 1]
-                        if (nextTab) navigate(nextTab.href)
-                        else navigate("/")
-                      }),
-                    )
-                  })
-                },
+            const tabs = useTabs()
+            const tabsStore = tabs.store
+            const tabsStoreActions = tabs
+            const navigateTab = (tab: Tab) => {
+              const href = tabHref(tab)
+              if (tab.server === server.key) {
+                navigate(href)
+                return
              }
+              void startTransition(() => {
+                server.setActive(tab.server)
+                navigate(href)
+              })
+            }

-              return [store, actions]
+            const matchRoute = (route: LayoutRoute) => {
+              if (route.type === "home") return
+              if (route.type === "draft") {
+                return tabsStore.find((item) => item.type === "draft" && item.draftID === route.draftID)
+              }
+              if (route.type === "session") {
+                const main = tabsStore.find(
+                  (item) =>
+                    item.type === "session" && item.server === route.server && item.sessionId === route.sessionId,
+                )
+                if (main) return main
+                const sync = serverSync.createDirSyncContext(route.dir)
+                const session = sync.session.get(route.sessionId)
+                if (session?.parentID) {
+                  const parentID = session.parentID
+                  const parent = tabsStore.find(
+                    (item) => item.type === "session" && item.server === route.server && item.sessionId === parentID,
+                  )
+                  if (parent) return parent
+                }
+              }
+            }
+
+            const currentTab = () => matchRoute(layout.route())
+
+            createEffect(() => {
+              const route = layout.route()
+              if (!tabs.ready()) return
+              const tab = currentTab()
+              if (tab) return
+
+              if (route.type === "session") {
+                const sync = serverSync.createDirSyncContext(route.dir)
+                const session = sync.session.get(route.sessionId)
+                if (!session) return
+                const sessionId = session.parentID ?? session.id
+                const next = {
+                  server: route.server ?? server.key,
+                  dirBase64: route.dirBase64,
+                  sessionId,
+                }
+                tabsStoreActions.addSessionTab(next)
+              }
            })

            makeEventListener(window, SESSION_TABS_REMOVED_EVENT, (event) => {
@@ -332,49 +331,12 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
              tabsStoreActions.removeSessions(detail)
            })

-            createEffect(() => {
-              const params = useParams()
-              if (!(params.dir && params.id)) return
-
-              tabsStoreActions.addTab({
-                dir: decodeDirectory(params.dir) ?? "",
-                sessionId: params.id,
-                href: makeSessionHref(params.dir, params.id),
-              })
-            })
-
-            const projects = createMemo(() => layout.projects.list())
-            const projectByID = createMemo(
-              () => new Map(projects().flatMap((project) => (project.id ? [[project.id, project] as const] : []))),
-            )
-
-            const currentSessionTab = () => {
-              if (!params.dir || !params.id) return
-              const href = makeSessionHref(params.dir, params.id)
-              return tabsStore.find((tab) => tab.href === href)
-            }
-
-            const closeCurrentSessionTab = () => {
-              const tab = currentSessionTab()
-              if (!tab) return false
-              tabsStoreActions.removeTab(tab.href)
-              return true
-            }
-
-            const closeNewSessionTab = () => {
-              if (!(params.dir && !params.id)) return false
-              const last = tabsStore[tabsStore.length - 1]
-              if (last) navigate(last.href)
-              else navigate("/")
-              return true
-            }
-
            const openNewTab = () => navigate(newSessionHref())

-            const closeActiveTab = () => closeCurrentSessionTab() || closeNewSessionTab()
+            command.register("tabs", () => {
+              const current = currentTab()

-            command.register(() => {
-              const commands = [
+              return [
                {
                  id: "tab.new",
                  category: "tab",
@@ -383,13 +345,15 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                  hidden: true,
                  onSelect: openNewTab,
                },
-                {
+                current && {
                  id: "tab.close",
                  category: "tab",
                  title: language.t("command.tab.close"),
                  keybind: "mod+w",
                  hidden: true,
-                  onSelect: closeActiveTab,
+                  onSelect: () => {
+                    tabsStoreActions.removeTab(tabsStore.findIndex((tab) => current === tab))
+                  },
                },
                {
                  id: `tab.prev`,
@@ -398,14 +362,14 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                  keybind: `mod+option+ArrowLeft`,
                  hidden: true,
                  onSelect: () => {
-                    let index = tabsStore.findIndex((tab) => tab.href === currentSessionTab()?.href)
+                    let index = tabsStore.findIndex((tab) => tab === currentTab())
                    if (index === -1) return

                    index -= 1
                    if (index === -1) index = tabsStore.length - 1

                    const next = tabsStore[index]
-                    if (next) navigate(next.href)
+                    if (next) navigateTab(next)
                  },
                },
                {
@@ -415,14 +379,14 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                  keybind: `mod+option+ArrowRight`,
                  hidden: true,
                  onSelect: () => {
-                    let index = tabsStore.findIndex((tab) => tab.href === currentSessionTab()?.href)
+                    let index = tabsStore.findIndex((tab) => tab === currentTab())
                    if (index === -1) return

                    index += 1
                    if (index === tabsStore.length) index = 0

                    const next = tabsStore[index]
-                    if (next) navigate(next.href)
+                    if (next) navigateTab(next)
                  },
                },
                ...Array.from({ length: 9 }, (_, i) => {
@@ -437,31 +401,23 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                    hidden: true,
                    onSelect: () => {
                      const tab = tabsStore[index]
-                      if (tab) navigate(tab.href)
+                      if (tab) navigateTab(tab)
                    },
                  }
                }),
-              ]
-
-              return commands
+              ].filter((v) => v !== undefined)
            })

-            const tabsEnriched = iife(() => {
-              const base = mapArray(
-                () => tabsStore,
-                (tab) => {
-                  const sync = serverSync.createDirSyncContext(tab.dir)
-                  const session = sync.session.get(tab.sessionId)
-                  return session ? { ...tab, info: session } : null
-                },
-              )
+            const [tabsAreOverflowing, setTabsAreOverflowing] = createSignal(false)
+            let tabScrollRef!: HTMLDivElement

-              return () => base().flatMap((s) => (s ? [s] : []))
-            })
+            function refreshTabsAreOverflowing() {
+              setTabsAreOverflowing(tabScrollRef.scrollWidth > tabScrollRef.clientWidth)
+            }

            return (
              <div
-                class="h-full flex-1 flex flex-row items-center gap-1.5 pr-3 pt-2"
+                class="h-full flex-1 overflow-hidden flex flex-row items-center gap-1.5 pr-3 pt-2"
                classList={{
                  "pl-2": mac(),
                  "pl-4": !mac(),
@@ -476,54 +432,126 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                  size="large"
                  as="a"
                  href="/"
-                  class="!w-9"
+                  class="!w-9 shrink-0"
                  icon={<IconV2 name="grid-plus" />}
                  state={!!homeMatch() ? "pressed" : undefined}
                />

-                <div class="flex min-w-0 flex-1 flex-row items-center gap-1.5 overflow-hidden">
-                  <div class="flex min-w-0 flex-row items-center gap-1.5 overflow-hidden">
-                    <For each={tabsEnriched()}>
-                      {(tab, i) => (
-                        <>
-                          {i() !== 0 && (
-                            <div class="w-[1.5px] h-3 shrink-0 rounded-full bg-[var(--v2-background-bg-layer-02)]" />
-                          )}
-                          <TabNavItem
-                            href={tab.href}
-                            title={tab.info.title}
-                            project={projectForSession(tab.info, projects(), projectByID())}
-                            directory={tab.dir}
-                            sessionId={tab.info.id}
-                            onClose={() => tabsStoreActions.removeTab(tab.href)}
-                          />
-                        </>
-                      )}
-                    </For>
-                  </div>
-                  <Show
-                    when={creating() && params.dir}
-                    fallback={
-                      <IconButtonV2
-                        type="button"
-                        variant="ghost-muted"
-                        size="large"
-                        class="shrink-0"
-                        icon={<IconV2 name="plus" />}
-                        as="a"
-                        href={newSessionHref()}
-                        aria-label={language.t("command.session.new")}
-                      />
-                    }
+                <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)
+                    }}
                  >
-                    <NewSessionTabItem
-                      href={`/${params.dir}/session`}
-                      title={language.t("command.session.new")}
-                      onClose={() => navigate(tabsEnriched().at(-1)?.href ?? "/")}
-                    />
-                  </Show>
-                  <div class="min-w-0 flex-1" />
+                    <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
+
+                          const divider = () =>
+                            i() !== 0 && (
+                              <div class="w-[1.5px] h-3 shrink-0 rounded-full bg-[var(--v2-background-bg-layer-02)]" />
+                            )
+
+                          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())}
+                                />
+                              </>
+                            )
+                          }
+
+                          return (
+                            <>
+                              {divider()}
+                              <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
+
+                          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
+                    type="button"
+                    variant="ghost-muted"
+                    size="large"
+                    class="shrink-0"
+                    icon={<IconV2 name="plus" />}
+                    as="a"
+                    href={newSessionHref()}
+                    aria-label={language.t("command.session.new")}
+                  />
+                </Show>
+                <div class="flex-1" />
                <TitlebarV2Right state={v2RightState()} />
                <Show when={windows() && !electronWindows()}>
                  <div data-tauri-decorum-tb class="flex flex-row" />
@@ -707,7 +735,9 @@ type TitlebarV2RightState = {
 function TitlebarV2Right(props: { state: TitlebarV2RightState }) {
  return (
    <div class="relative z-20 flex shrink-0 items-center justify-end gap-0 overflow-visible">
-      <TitlebarUpdateIconButton state={props.state.update} />
+      <Show when={props.state.update.visible}>
+        <TitlebarUpdateIconButton state={props.state.update} />
+      </Show>
      <div id="opencode-titlebar-right" class="flex shrink-0 items-center justify-end gap-0" />
    </div>
  )
@@ -743,41 +773,84 @@ function TitlebarUpdateIconButton(props: { state: TitlebarUpdatePillState }) {
 }

 function TabNavItem(props: {
+  ref?: HTMLDivElement
  href: string
-  title: string
-  project?: LocalProject
+  server: ServerConnection.Key
  directory: string
-  sessionId: string
+  sessionId?: string
  hideClose?: boolean
  onClose: () => void
+  onNavigate: () => void
+  active?: boolean
+  activeServer: boolean
+  forceTruncate?: boolean
 }) {
-  const match = useMatch(() => props.href)
-  const isActive = () => !!match()
  const closeTab = (event: MouseEvent) => {
    event.preventDefault()
    event.stopPropagation()
    props.onClose()
  }
+  const global = useGlobal()
+  const serverCtx = createMemo(() => {
+    const conn = global.servers.list().find((item) => ServerConnection.key(item) === props.server)
+    if (conn) return global.createServerCtx(conn)
+  })
+  const dirSyncCtx = createMemo(() => serverCtx()?.sync.createDirSyncContext(props.directory))
+
+  const [session] = createResource(
+    () => {
+      const ctx = dirSyncCtx()
+      if (!ctx || !props.sessionId) return
+      return [props.sessionId, ctx] as const
+    },
+    async ([sessionId, dirSyncCtx]) => {
+      await dirSyncCtx.session.sync(sessionId).catch(() => {})
+      return dirSyncCtx.session.get(sessionId)
+    },
+    { initialValue: props.sessionId ? dirSyncCtx()?.session.get(props.sessionId) : undefined },
+  )
+
  return (
    <div
+      ref={props.ref}
      class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
-      data-active={isActive()}
+      data-active={props.active}
      onMouseDown={(event) => {
        if (event.button !== 1) return
        closeTab(event)
      }}
    >
-      <a
-        href={props.href}
-        class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base"
-      >
-        <span data-slot="project-avatar-slot">
-          <ProjectTabAvatar project={props.project} directory={props.directory} sessionId={props.sessionId} />
-        </span>
-        <span class="min-w-0 flex-1">{props.title}</span>
-      </a>
+      <Show when={session.latest}>
+        {(session) => {
+          const project = createMemo(() => projectForSession(session(), serverCtx()?.projects.list() ?? []))

-      <div class="absolute not-group-hover:not-group-data-[active=true]:left-52 group-hover:right-0 group-data-[active=true]:right-0 inset-y-0 flex flex-row items-center pr-1 py-1 w-8 pl-2">
+          return (
+            <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 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base"
+            >
+              <span data-slot="project-avatar-slot">
+                <ProjectTabAvatar
+                  project={project()}
+                  directory={props.directory}
+                  sessionId={session().id}
+                  activeServer={props.activeServer}
+                />
+              </span>
+              <span class="min-w-0 flex-1">{session().title}</span>
+            </a>
+          )
+        }}
+      </Show>
+
+      <div
+        class="absolute not-group-hover:not-group-data-[active=true]:not-data-[truncate=true]:left-52 group-hover:right-0 group-data-[active=true]:right-0 data-[truncate=true]:right-0 inset-y-0 flex flex-row items-center pr-1 py-1 w-8 pl-2"
+        data-truncate={props.forceTruncate}
+      >
        <div
          class="absolute inset-0 rounded-r-[6px] bg-(image:--inactive-bg) group-hover:bg-(image:--active-bg) group-data-[active=true]:bg-(image:--active-bg)"
          style={{
@@ -797,10 +870,15 @@ function TabNavItem(props: {
  )
 }

-function ProjectTabAvatar(props: { project?: LocalProject; directory: string; sessionId: string }) {
+function ProjectTabAvatar(props: {
+  project?: LocalProject
+  directory: string
+  sessionId: string
+  activeServer: boolean
+}) {
  const directory = () => props.directory
  const sessionId = () => props.sessionId
-  const state = useSessionTabAvatarState(directory, sessionId)
+  const state = useSessionTabAvatarState(directory, sessionId, () => props.activeServer)
  return (
    <ProjectAvatar
      fallback={displayName(props.project ?? { worktree: props.directory })}
@@ -812,7 +890,14 @@ function ProjectTabAvatar(props: { project?: LocalProject; directory: string; se
  )
 }

-function NewSessionTabItem(props: { href: string; title: string; onClose: () => void }) {
+function DraftTabItem(props: {
+  ref?: HTMLDivElement
+  href: string
+  title: string
+  active?: boolean
+  onNavigate: () => void
+  onClose: () => void
+}) {
  const closeTab = (event: MouseEvent) => {
    event.preventDefault()
    event.stopPropagation()
@@ -820,7 +905,54 @@ function NewSessionTabItem(props: { href: string; title: string; onClose: () =>
  }
  return (
    <div
-      class="group relative flex h-7 max-w-60 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] bg-[var(--v2-overlay-simple-overlay-pressed)] pl-1.5 pr-8 whitespace-nowrap focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-[var(--v2-border-border-focus)]"
+      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()
+    event.stopPropagation()
+    props.onClose()
+  }
+  return (
+    <div
+      ref={props.ref}
+      class="group relative shrink-0 flex h-7 max-w-60 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] bg-[var(--v2-overlay-simple-overlay-pressed)] pl-1.5 pr-8 whitespace-nowrap 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)
@@ -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: () => ({
@@ -3,6 +3,8 @@ import { createStore, reconcile, type SetStoreFunction, type Store } from "solid
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useParams } from "@solidjs/router"
 import { Persist, persisted } from "@/utils/persist"
+import { useServerSDK } from "./server-sdk"
+import type { ServerScope } from "@/utils/server-scope"
 import { createScopedCache } from "@/utils/scoped-cache"
 import { uuid } from "@/utils/uuid"
 import type { SelectedLineRange } from "@/context/file"
@@ -166,11 +168,11 @@ export function createCommentSessionForTest(comments: Record<string, LineComment
  return createCommentSessionState(store, setStore)
 }

-function createCommentSession(dir: string, id: string | undefined) {
+function createCommentSession(scope: ServerScope, dir: string, id: string | undefined) {
  const legacy = `${dir}/comments${id ? "/" + id : ""}.v1`

  const [store, setStore, _, ready] = persisted(
-    Persist.scoped(dir, id, "comments", [legacy]),
+    Persist.serverScoped(scope, dir, id, "comments", [legacy]),
    createStore<CommentStore>({
      comments: {},
    }),
@@ -200,11 +202,16 @@ export const { use: useComments, provider: CommentsProvider } = createSimpleCont
  gate: false,
  init: () => {
    const params = useParams()
+    const serverSDK = useServerSDK()
    const cache = createScopedCache(
      (key) => {
        const decoded = decodeSessionKey(key)
        return createRoot((dispose) => ({
-          value: createCommentSession(decoded.dir, decoded.id === WORKSPACE_KEY ? undefined : decoded.id),
+          value: createCommentSession(
+            serverSDK.scope,
+            decoded.dir,
+            decoded.id === WORKSPACE_KEY ? undefined : decoded.id,
+          ),
          dispose,
        }))
      },
@@ -8,11 +8,11 @@ import {
  getSessionPrefetchPromise,
  setSessionPrefetch,
 } from "./global-sync/session-prefetch"
-import { createServerSyncContext } from "./server-sync"
 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 { useServerSDK } from "./server-sdk"
+import { createServerSdkContext, useServerSDK } from "./server-sdk"
+import { type createServerSyncContextInner } from "./server-sync"

 const SKIP_PARTS = new Set(["patch", "step-start", "step-finish"])

@@ -171,8 +171,11 @@ function setOptimisticRemove(setStore: (...args: unknown[]) => void, input: Opti
  })
 }

-export const createDirSyncContext = (directory: string, serverSync: ReturnType<typeof createServerSyncContext>) => {
-  const serverSDK = useServerSDK()
+export const createDirSyncContext = (
+  directory: string,
+  serverSync: ReturnType<typeof createServerSyncContextInner>,
+  serverSDK: ReturnType<typeof createServerSdkContext> = useServerSDK(),
+) => {
  const client = serverSDK.createClient({ directory, throwOnError: true })

  type Child = ReturnType<(typeof serverSync)["child"]>
@@ -273,7 +276,7 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t

  const evict = (directory: string, setStore: Setter, sessionIDs: string[]) => {
    if (sessionIDs.length === 0) return
-    clearSessionPrefetch(directory, sessionIDs)
+    clearSessionPrefetch(serverSDK.scope, directory, sessionIDs)
    for (const sessionID of sessionIDs) {
      serverSync.todo.set(sessionID, undefined)
    }
@@ -345,6 +348,7 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t
          setMeta("cursor", key, next.cursor)
          setMeta("complete", key, next.complete)
          setSessionPrefetch({
+            scope: serverSDK.scope,
            directory: input.directory,
            sessionID: input.sessionID,
            limit: message.length,
@@ -435,7 +439,7 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t

        touch(directory, setStore, sessionID)

-        const seeded = getSessionPrefetch(directory, sessionID)
+        const seeded = getSessionPrefetch(serverSDK.scope, directory, sessionID)
        if (seeded && store.message[sessionID] !== undefined && meta.limit[key] === undefined) {
          batch(() => {
            setMeta("limit", key, seeded.limit)
@@ -446,10 +450,10 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t
        }

        return runInflight(inflight, key, async () => {
-          const pending = getSessionPrefetchPromise(directory, sessionID)
+          const pending = getSessionPrefetchPromise(serverSDK.scope, directory, sessionID)
          if (pending) {
            await pending
-            const seeded = getSessionPrefetch(directory, sessionID)
+            const seeded = getSessionPrefetch(serverSDK.scope, directory, sessionID)
            if (seeded && store.message[sessionID] !== undefined && meta.limit[key] === undefined) {
              batch(() => {
                setMeta("limit", key, seeded.limit)
@@ -605,6 +609,9 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t
        )
      },
    },
+    mcp: {
+      toggle: (name: string) => serverSync.mcp.toggle(directory, name),
+    },
    absolute,
    get directory() {
      return current()[0].path.directory
@@ -21,6 +21,8 @@ import {
  touchFileContent,
 } from "./file/content-cache"
 import { createFileViewCache } from "./file/view-cache"
+import { useServerSDK } from "./server-sdk"
+import { SessionRouteKey, SessionStateKey } from "@/utils/server-scope"
 import { createFileTreeStore } from "./file/tree-store"
 import { invalidateFromWatcher } from "./file/watcher"
 import {
@@ -56,12 +58,15 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
    const sdk = useSDK()
    useSync()
    const params = useParams()
+    const serverSDK = useServerSDK()
    const language = useLanguage()
    const layout = useLayout()

    const scope = createMemo(() => sdk.directory)
    const path = createPathHelpers(scope)
-    const tabs = layout.tabs(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
+    const tabs = layout.tabs(() =>
+      SessionStateKey.from(serverSDK.scope, SessionRouteKey.fromRoute(params.dir, params.id)),
+    )

    const inflight = new Map<string, Promise<void>>()
    const [store, setStore] = createStore<{
@@ -107,7 +112,7 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
      })
    })

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

    const ensure = (file: string) => {
@@ -3,6 +3,7 @@ import { createStore, produce } from "solid-js/store"
 import { Persist, persisted } from "@/utils/persist"
 import { createScopedCache } from "@/utils/scoped-cache"
 import type { FileViewState, SelectedLineRange } from "./types"
+import type { ServerScope } from "@/utils/server-scope"

 const WORKSPACE_KEY = "__workspace__"
 const MAX_FILE_VIEW_SESSIONS = 20
@@ -33,11 +34,11 @@ function equalSelectedLines(a: SelectedLineRange | null | undefined, b: Selected
  )
 }

-function createViewSession(dir: string, id: string | undefined) {
+function createViewSession(scope: ServerScope, dir: string, id: string | undefined) {
  const legacyViewKey = `${dir}/file${id ? "/" + id : ""}.v1`

  const [view, setView, _, ready] = persisted(
-    Persist.scoped(dir, id, "file-view", [legacyViewKey]),
+    Persist.serverScoped(scope, dir, id, "file-view", [legacyViewKey]),
    createStore<{
      file: Record<string, FileViewState>
    }>({
@@ -119,14 +120,14 @@ function createViewSession(dir: string, id: string | undefined) {
  }
 }

-export function createFileViewCache() {
+export function createFileViewCache(scope: ServerScope) {
  const cache = createScopedCache(
    (key) => {
      const split = key.lastIndexOf("\n")
      const dir = split >= 0 ? key.slice(0, split) : key
      const id = split >= 0 ? key.slice(split + 1) : WORKSPACE_KEY
      return createRoot((dispose) => ({
-        value: createViewSession(dir, id === WORKSPACE_KEY ? undefined : id),
+        value: createViewSession(scope, dir, id === WORKSPACE_KEY ? undefined : id),
        dispose,
      }))
    },
@@ -3,8 +3,9 @@ import { createStore } from "solid-js/store"
 import { QueryClient } from "@tanstack/solid-query"
 import type { Config, OpencodeClient, Project } from "@opencode-ai/sdk/v2/client"
 import type { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
-import { bootstrapDirectory } from "./bootstrap"
+import { bootstrapDirectory, loadPathQuery, loadProvidersQuery } from "./bootstrap"
 import type { State, VcsCache } from "./types"
+import { ServerScope } from "@/utils/server-scope"

 const provider = { all: new Map(), connected: [], default: {} } satisfies NormalizedProviderListResponse

@@ -45,6 +46,7 @@ describe("bootstrapDirectory", () => {

    await bootstrapDirectory({
      directory: "/project",
+      scope: ServerScope.local,
      mcp: false,
      global: {
        config: {} satisfies Config,
@@ -89,3 +91,18 @@ describe("bootstrapDirectory", () => {
    expect(mcpReads).toEqual([])
  })
 })
+
+describe("query keys", () => {
+  test("partitions identical directories by server scope", () => {
+    const client = {} as OpencodeClient
+    const remote = "https://debian.example" as typeof ServerScope.local
+
+    expect([...loadPathQuery(ServerScope.local, "/repo", client).queryKey]).toEqual(["local", "/repo", "path"])
+    expect([...loadPathQuery(remote, "/repo", client).queryKey]).toEqual(["https://debian.example", "/repo", "path"])
+    expect([...loadProvidersQuery(remote, null, client).queryKey]).toEqual([
+      "https://debian.example",
+      null,
+      "providers",
+    ])
+  })
+})
@@ -20,6 +20,7 @@ import { formatServerError } from "@/utils/server-errors"
 import { QueryClient, queryOptions } from "@tanstack/solid-query"
 import { loadMcpQuery } from "../server-sync"
 import { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
+import { ScopedKey, type ServerScope } from "@/utils/server-scope"

 type GlobalStore = {
  ready: boolean
@@ -59,8 +60,8 @@ function errors(list: PromiseSettledResult<unknown>[]) {

 const providerRev = new Map<string, number>()

-export function clearProviderRev(directory: string) {
-  providerRev.delete(directory)
+export function clearProviderRev(scope: ServerScope, directory: string) {
+  providerRev.delete(ScopedKey.from(scope, directory))
 }

 function runAll(list: Array<() => Promise<unknown>>) {
@@ -83,15 +84,15 @@ function showErrors(input: {
  })
 }

-export const loadGlobalConfigQuery = (sdk: OpencodeClient) =>
+export const loadGlobalConfigQuery = (scope: ServerScope, sdk: OpencodeClient) =>
  queryOptions({
-    queryKey: ["config"],
+    queryKey: [scope, "config"],
    queryFn: () => retry(() => sdk.global.config.get().then((x) => x.data!)),
  })

-export const loadProjectsQuery = (sdk: OpencodeClient) =>
+export const loadProjectsQuery = (scope: ServerScope, sdk: OpencodeClient) =>
  queryOptions({
-    queryKey: ["project"],
+    queryKey: [scope, "project"],
    queryFn: () =>
      retry(() =>
        sdk.project.list().then((x) => {
@@ -106,6 +107,7 @@ export const loadProjectsQuery = (sdk: OpencodeClient) =>

 export async function bootstrapGlobal(input: {
  serverSDK: OpencodeClient
+  scope: ServerScope
  requestFailedTitle: string
  translate: (key: string, vars?: Record<string, string | number>) => string
  formatMoreCount: (count: number) => string
@@ -113,12 +115,12 @@ export async function bootstrapGlobal(input: {
  queryClient: QueryClient
 }) {
  const slow = [
-    () => input.queryClient.fetchQuery(loadGlobalConfigQuery(input.serverSDK)),
-    () => input.queryClient.fetchQuery(loadProvidersQuery(null, input.serverSDK)),
-    () => input.queryClient.fetchQuery(loadPathQuery(null, input.serverSDK)),
+    () => input.queryClient.fetchQuery(loadGlobalConfigQuery(input.scope, input.serverSDK)),
+    () => input.queryClient.fetchQuery(loadProvidersQuery(input.scope, null, input.serverSDK)),
+    () => input.queryClient.fetchQuery(loadPathQuery(input.scope, null, input.serverSDK)),
    () =>
      input.queryClient
-        .fetchQuery(loadProjectsQuery(input.serverSDK))
+        .fetchQuery(loadProjectsQuery(input.scope, input.serverSDK))
        .then((data) => input.setGlobalStore("project", data)),
  ]
  await runAll(slow)
@@ -178,26 +180,27 @@ function warmSessions(input: {
  ).then(() => undefined)
 }

-export const loadProvidersQuery = (directory: string | null, sdk: OpencodeClient) =>
+export const loadProvidersQuery = (scope: ServerScope, directory: string | null, sdk: OpencodeClient) =>
  queryOptions({
-    queryKey: [directory, "providers"],
+    queryKey: [scope, directory, "providers"],
    queryFn: () => retry(() => sdk.provider.list().then((x) => normalizeProviderList(x.data!))),
  })

-export const loadAgentsQuery = (directory: string | null, sdk: OpencodeClient) =>
+export const loadAgentsQuery = (scope: ServerScope, directory: string | null, sdk: OpencodeClient) =>
  queryOptions({
-    queryKey: [directory, "agents"],
+    queryKey: [scope, directory, "agents"],
    queryFn: () => retry(() => sdk.app.agents().then((x) => normalizeAgentList(x.data))),
  })

-export const loadPathQuery = (directory: string | null, sdk: OpencodeClient) =>
+export const loadPathQuery = (scope: ServerScope, directory: string | null, sdk: OpencodeClient) =>
  queryOptions<Path>({
-    queryKey: [directory, "path"],
+    queryKey: [scope, directory, "path"],
    queryFn: () => retry(() => sdk.path.get().then((x) => x.data!)),
  })

 export async function bootstrapDirectory(input: {
  directory: string
+  scope: ServerScope
  mcp: boolean
  sdk: OpencodeClient
  store: Store<State>
@@ -223,14 +226,15 @@ export async function bootstrapDirectory(input: {
  }
  if (loading) input.setStore("status", "partial")

-  const rev = (providerRev.get(input.directory) ?? 0) + 1
-  providerRev.set(input.directory, rev)
+  const revKey = ScopedKey.from(input.scope, input.directory)
+  const rev = (providerRev.get(revKey) ?? 0) + 1
+  providerRev.set(revKey, rev)
  ;(async () => {
    const slow = [
      () => Promise.resolve(input.loadSessions(input.directory)),
      () =>
        input.queryClient
-          .ensureQueryData(loadAgentsQuery(input.directory, input.sdk))
+          .ensureQueryData(loadAgentsQuery(input.scope, input.directory, input.sdk))
          .then((data) => input.setStore("agent", data)),
      () =>
        retry(() => input.sdk.config.get().then((x) => input.setStore("config", reconcile(x.data!, { merge: false })))),
@@ -239,7 +243,7 @@ export async function bootstrapDirectory(input: {
        (() => retry(() => input.sdk.project.current()).then((x) => input.setStore("project", x.data!.id))),
      !seededPath &&
        (() =>
-          input.queryClient.ensureQueryData(loadPathQuery(input.directory, input.sdk)).then((data) => {
+          input.queryClient.ensureQueryData(loadPathQuery(input.scope, input.directory, input.sdk)).then((data) => {
            const next = projectID(data.directory ?? input.directory, input.global.project)
            if (next) input.setStore("project", next)
          })),
@@ -305,9 +309,9 @@ export async function bootstrapDirectory(input: {
          }),
        ),
      () => Promise.resolve(input.loadSessions(input.directory)),
-      input.mcp && (() => input.queryClient.fetchQuery(loadMcpQuery(input.directory, input.sdk))),
+      input.mcp && (() => input.queryClient.fetchQuery(loadMcpQuery(input.scope, input.directory, input.sdk))),
      () =>
-        input.queryClient.fetchQuery(loadProvidersQuery(input.directory, input.sdk)).catch((err) => {
+        input.queryClient.fetchQuery(loadProvidersQuery(input.scope, input.directory, input.sdk)).catch((err) => {
          const project = getFilename(input.directory)
          showToast({
            variant: "error",
@@ -4,9 +4,16 @@ import { createStore } from "solid-js/store"
 import type { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
 import type { State } from "./types"
 import type { QueryOptionsApi } from "../server-sync"
+import { ServerScope } from "@/utils/server-scope"

 let createChildStoreManager: typeof import("./child-store").createChildStoreManager
 const querySingles: Array<() => { queryKey?: unknown[]; enabled?: boolean }> = []
+const persist: typeof import("@/utils/persist").persisted = (_target, store) => [
+  store[0],
+  store[1],
+  null,
+  Object.assign(() => true, { promise: undefined }),
+]

 const child = () => createStore({} as State)
 const provider = { all: new Map(), connected: [], default: {} } satisfies NormalizedProviderListResponse
@@ -42,12 +49,6 @@ function createOwner(callback: (owner: Owner) => void) {
 }

 beforeAll(async () => {
-  mock.module("@/utils/persist", () => ({
-    Persist: {
-      workspace: (...parts: string[]) => parts.join(":"),
-    },
-    persisted: (_target: string, store: unknown[]) => [store[0], store[1], null, () => true],
-  }))
  mock.module("@tanstack/solid-query", () => ({
    useQuery: (options: () => { queryKey?: unknown[]; enabled?: boolean }) => {
      querySingles.push(options)
@@ -80,6 +81,8 @@ describe("createChildStoreManager", () => {

    const manager = createChildStoreManager({
      owner,
+      scope: ServerScope.local,
+      persist,
      isBooting: () => false,
      isLoadingSessions: () => false,
      onBootstrap() {},
@@ -109,6 +112,8 @@ describe("createChildStoreManager", () => {
    const dispose = createOwner((owner) => {
      manager = createChildStoreManager({
        owner,
+        scope: ServerScope.local,
+        persist,
        isBooting: () => false,
        isLoadingSessions: () => false,
        onBootstrap(directory) {
@@ -128,6 +133,7 @@ describe("createChildStoreManager", () => {
      const [store] = manager.child("/project")

      expect(store.status).toBe("loading")
+      expect(store.limit).toBe(5)
      expect(bootstraps).toEqual(["/project"])
    } finally {
      dispose()
@@ -140,6 +146,8 @@ describe("createChildStoreManager", () => {
    const dispose = createOwner((owner) => {
      manager = createChildStoreManager({
        owner,
+        scope: ServerScope.local,
+        persist,
        isBooting: () => false,
        isLoadingSessions: () => false,
        onBootstrap() {},
@@ -171,6 +179,8 @@ describe("createChildStoreManager", () => {
    const dispose = createOwner((owner) => {
      manager = createChildStoreManager({
        owner,
+        scope: ServerScope.local,
+        persist,
        isBooting: () => false,
        isLoadingSessions: () => false,
        onBootstrap() {},
@@ -18,9 +18,12 @@ import { useQuery } from "@tanstack/solid-query"
 import { QueryOptionsApi } from "../server-sync"
 import { directoryKey, type DirectoryKey } from "./utils"
 import { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
+import type { ServerScope } from "@/utils/server-scope"

 export function createChildStoreManager(input: {
  owner: Owner
+  scope: ServerScope
+  persist: typeof persisted
  isBooting: (directory: string) => boolean
  isLoadingSessions: (directory: string) => boolean
  onBootstrap: (directory: string) => void
@@ -147,8 +150,8 @@ export function createChildStoreManager(input: {
    if (!key) console.error("No directory provided")
    if (!children[key]) {
      const vcs = runWithOwner(input.owner, () =>
-        persisted(
-          Persist.workspace(directory, "vcs", ["vcs.v1"]),
+        input.persist(
+          Persist.serverWorkspace(input.scope, directory, "vcs", ["vcs.v1"]),
          createStore({ value: undefined as VcsInfo | undefined }),
        ),
      )
@@ -157,8 +160,8 @@ export function createChildStoreManager(input: {
      vcsCache.set(key, { store: vcsStore, setStore: vcs[1], ready: vcs[3] })

      const meta = runWithOwner(input.owner, () =>
-        persisted(
-          Persist.workspace(directory, "project", ["project.v1"]),
+        input.persist(
+          Persist.serverWorkspace(input.scope, directory, "project", ["project.v1"]),
          createStore({ value: undefined as ProjectMeta | undefined }),
        ),
      )
@@ -166,8 +169,8 @@ export function createChildStoreManager(input: {
      metaCache.set(key, { store: meta[0], setStore: meta[1], ready: meta[3] })

      const icon = runWithOwner(input.owner, () =>
-        persisted(
-          Persist.workspace(directory, "icon", ["icon.v1"]),
+        input.persist(
+          Persist.serverWorkspace(input.scope, directory, "icon", ["icon.v1"]),
          createStore({ value: undefined as string | undefined }),
        ),
      )
@@ -134,6 +134,27 @@ describe("applyGlobalEvent", () => {
 })

 describe("applyDirectoryEvent", () => {
+  test("preserves a Home-specific retained session limit", () => {
+    const [store, setStore] = createStore(
+      baseState({
+        limit: 1,
+        session: [rootSession({ id: "a" }), rootSession({ id: "b" }), rootSession({ id: "c" })],
+      }),
+    )
+
+    applyDirectoryEvent({
+      event: { type: "session.created", properties: { info: rootSession({ id: "d" }) } },
+      store,
+      setStore,
+      push() {},
+      directory: "/tmp",
+      loadLsp() {},
+      retainedLimit: 3,
+    })
+
+    expect(store.session).toHaveLength(3)
+  })
+
  test("inserts root sessions in sorted order and updates sessionTotal", () => {
    const [store, setStore] = createStore(
      baseState({
@@ -99,8 +99,10 @@ export function applyDirectoryEvent(input: {
  loadLsp: () => void
  vcsCache?: VcsCache
  setSessionTodo?: (sessionID: string, todos: Todo[] | undefined) => void
+  retainedLimit?: number
 }) {
  const event = input.event
+  const limit = Math.max(input.store.limit, input.retainedLimit ?? 0)
  switch (event.type) {
    case "server.instance.disposed": {
      input.push(input.directory)
@@ -115,7 +117,7 @@ export function applyDirectoryEvent(input: {
      }
      const next = input.store.session.slice()
      next.splice(result.index, 0, info)
-      const trimmed = trimSessions(next, { limit: input.store.limit, permission: input.store.permission })
+      const trimmed = trimSessions(next, { limit, permission: input.store.permission })
      input.setStore("session", reconcile(trimmed, { key: "id" }))
      cleanupDroppedSessionCaches(input.store, input.setStore, trimmed, input.setSessionTodo)
      if (!info.parentID) input.setStore("sessionTotal", (value) => value + 1)
@@ -145,7 +147,7 @@ export function applyDirectoryEvent(input: {
      }
      const next = input.store.session.slice()
      next.splice(result.index, 0, info)
-      const trimmed = trimSessions(next, { limit: input.store.limit, permission: input.store.permission })
+      const trimmed = trimSessions(next, { limit, permission: input.store.permission })
      input.setStore("session", reconcile(trimmed, { key: "id" }))
      cleanupDroppedSessionCaches(input.store, input.setStore, trimmed, input.setSessionTodo)
      break
@@ -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()
+}
@@ -7,14 +7,18 @@ import {
  setSessionPrefetch,
  shouldSkipSessionPrefetch,
 } from "./session-prefetch"
+import { ServerScope } from "@/utils/server-scope"
+
+const scope = ServerScope.local

 describe("session prefetch", () => {
  test("stores and clears message metadata by directory", () => {
-    clearSessionPrefetch("/tmp/a", ["ses_1"])
-    clearSessionPrefetch("/tmp/b", ["ses_1"])
+    clearSessionPrefetch(scope, "/tmp/a", ["ses_1"])
+    clearSessionPrefetch(scope, "/tmp/b", ["ses_1"])

    setSessionPrefetch({
      directory: "/tmp/a",
+      scope,
      sessionID: "ses_1",
      limit: 200,
      cursor: "abc",
@@ -22,21 +26,27 @@ describe("session prefetch", () => {
      at: 123,
    })

-    expect(getSessionPrefetch("/tmp/a", "ses_1")).toEqual({ limit: 200, cursor: "abc", complete: false, at: 123 })
-    expect(getSessionPrefetch("/tmp/b", "ses_1")).toBeUndefined()
+    expect(getSessionPrefetch(scope, "/tmp/a", "ses_1")).toEqual({
+      limit: 200,
+      cursor: "abc",
+      complete: false,
+      at: 123,
+    })
+    expect(getSessionPrefetch(scope, "/tmp/b", "ses_1")).toBeUndefined()

-    clearSessionPrefetch("/tmp/a", ["ses_1"])
+    clearSessionPrefetch(scope, "/tmp/a", ["ses_1"])

-    expect(getSessionPrefetch("/tmp/a", "ses_1")).toBeUndefined()
+    expect(getSessionPrefetch(scope, "/tmp/a", "ses_1")).toBeUndefined()
  })

  test("dedupes inflight work", async () => {
-    clearSessionPrefetch("/tmp/c", ["ses_2"])
+    clearSessionPrefetch(scope, "/tmp/c", ["ses_2"])

    let calls = 0
    const run = () =>
      runSessionPrefetch({
        directory: "/tmp/c",
+        scope,
        sessionID: "ses_2",
        task: async () => {
          calls += 1
@@ -52,15 +62,48 @@ describe("session prefetch", () => {
  })

  test("clears a whole directory", () => {
-    setSessionPrefetch({ directory: "/tmp/d", sessionID: "ses_1", limit: 10, cursor: "a", complete: true, at: 1 })
-    setSessionPrefetch({ directory: "/tmp/d", sessionID: "ses_2", limit: 20, cursor: "b", complete: false, at: 2 })
-    setSessionPrefetch({ directory: "/tmp/e", sessionID: "ses_1", limit: 30, cursor: "c", complete: true, at: 3 })
+    setSessionPrefetch({
+      scope,
+      directory: "/tmp/d",
+      sessionID: "ses_1",
+      limit: 10,
+      cursor: "a",
+      complete: true,
+      at: 1,
+    })
+    setSessionPrefetch({
+      scope,
+      directory: "/tmp/d",
+      sessionID: "ses_2",
+      limit: 20,
+      cursor: "b",
+      complete: false,
+      at: 2,
+    })
+    setSessionPrefetch({
+      scope,
+      directory: "/tmp/e",
+      sessionID: "ses_1",
+      limit: 30,
+      cursor: "c",
+      complete: true,
+      at: 3,
+    })

-    clearSessionPrefetchDirectory("/tmp/d")
+    clearSessionPrefetchDirectory(scope, "/tmp/d")

-    expect(getSessionPrefetch("/tmp/d", "ses_1")).toBeUndefined()
-    expect(getSessionPrefetch("/tmp/d", "ses_2")).toBeUndefined()
-    expect(getSessionPrefetch("/tmp/e", "ses_1")).toEqual({ limit: 30, cursor: "c", complete: true, at: 3 })
+    expect(getSessionPrefetch(scope, "/tmp/d", "ses_1")).toBeUndefined()
+    expect(getSessionPrefetch(scope, "/tmp/d", "ses_2")).toBeUndefined()
+    expect(getSessionPrefetch(scope, "/tmp/e", "ses_1")).toEqual({ limit: 30, cursor: "c", complete: true, at: 3 })
+  })
+
+  test("isolates identical directories and sessions by server scope", () => {
+    const remote = "https://debian.example" as ServerScope
+    setSessionPrefetch({ scope, directory: "/repo", sessionID: "ses_1", limit: 10, complete: true, at: 1 })
+    setSessionPrefetch({ scope: remote, directory: "/repo", sessionID: "ses_1", limit: 20, complete: true, at: 2 })
+
+    expect(getSessionPrefetch(scope, "/repo", "ses_1")?.limit).toBe(10)
+    expect(getSessionPrefetch(remote, "/repo", "ses_1")?.limit).toBe(20)
  })

  test("refreshes stale first-page prefetched history", () => {
@@ -1,4 +1,6 @@
-const key = (directory: string, sessionID: string) => `${directory}\n${sessionID}`
+import { ScopedKey, type ServerScope } from "@/utils/server-scope"
+
+const key = (scope: ServerScope, directory: string, sessionID: string) => ScopedKey.from(scope, directory, sessionID)

 export const SESSION_PREFETCH_TTL = 15_000

@@ -27,28 +29,32 @@ const rev = new Map<string, number>()

 const version = (id: string) => rev.get(id) ?? 0

-export function getSessionPrefetch(directory: string, sessionID: string) {
-  return cache.get(key(directory, sessionID))
+export function getSessionPrefetch(scope: ServerScope, directory: string, sessionID: string) {
+  return cache.get(key(scope, directory, sessionID))
 }

-export function getSessionPrefetchPromise(directory: string, sessionID: string) {
-  return inflight.get(key(directory, sessionID))
+export function getSessionPrefetchPromise(scope: ServerScope, directory: string, sessionID: string) {
+  return inflight.get(key(scope, directory, sessionID))
 }

-export function clearSessionPrefetchInflight() {
-  inflight.clear()
+export function clearSessionPrefetchInflight(scope: ServerScope) {
+  const prefix = ScopedKey.prefix(scope)
+  for (const id of inflight.keys()) {
+    if (id.startsWith(prefix)) inflight.delete(id)
+  }
 }

-export function isSessionPrefetchCurrent(directory: string, sessionID: string, value: number) {
-  return version(key(directory, sessionID)) === value
+export function isSessionPrefetchCurrent(scope: ServerScope, directory: string, sessionID: string, value: number) {
+  return version(key(scope, directory, sessionID)) === value
 }

 export function runSessionPrefetch(input: {
  directory: string
+  scope: ServerScope
  sessionID: string
  task: (value: number) => Promise<Meta | undefined>
 }) {
-  const id = key(input.directory, input.sessionID)
+  const id = key(input.scope, input.directory, input.sessionID)
  const pending = inflight.get(id)
  if (pending) return pending

@@ -64,13 +70,14 @@ export function runSessionPrefetch(input: {

 export function setSessionPrefetch(input: {
  directory: string
+  scope: ServerScope
  sessionID: string
  limit: number
  cursor?: string
  complete: boolean
  at?: number
 }) {
-  cache.set(key(input.directory, input.sessionID), {
+  cache.set(key(input.scope, input.directory, input.sessionID), {
    limit: input.limit,
    cursor: input.cursor,
    complete: input.complete,
@@ -78,18 +85,18 @@ export function setSessionPrefetch(input: {
  })
 }

-export function clearSessionPrefetch(directory: string, sessionIDs: Iterable<string>) {
+export function clearSessionPrefetch(scope: ServerScope, directory: string, sessionIDs: Iterable<string>) {
  for (const sessionID of sessionIDs) {
    if (!sessionID) continue
-    const id = key(directory, sessionID)
+    const id = key(scope, directory, sessionID)
    rev.set(id, version(id) + 1)
    cache.delete(id)
    inflight.delete(id)
  }
 }

-export function clearSessionPrefetchDirectory(directory: string) {
-  const prefix = `${directory}\n`
+export function clearSessionPrefetchDirectory(scope: ServerScope, directory: string) {
+  const prefix = ScopedKey.prefix(scope, directory)
  const keys = new Set([...cache.keys(), ...inflight.keys()])
  for (const id of keys) {
    if (!id.startsWith(prefix)) continue
@@ -1,17 +1,17 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { createEffect, createMemo, createRoot } from "solid-js"
 import { createStore } from "solid-js/store"
-import { ServerConnection, useServer } from "./server"
+import { createServerProjects, ServerConnection, useServer } from "./server"
 import { useServerHealth } from "@/utils/server-health"
-import { QueryClient } from "@tanstack/solid-query"
 import { createServerSdkContext } from "./server-sdk"
 import { createServerSyncContext } from "./server-sync"
 import { getOwner } from "solid-js/web"
-import { Persist, persisted } from "@/utils/persist"
+import { QueryClient } from "@tanstack/solid-query"
+import type { ServerScope } from "@/utils/server-scope"

 export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext({
  name: "Global",
-  init: (props: { defaultServer: ServerConnection.Key; servers?: Array<ServerConnection.Any> }) => {
+  init: () => {
    const server = useServer()
    const serverHealth = useServerHealth(
      () => server.list,
@@ -23,8 +23,6 @@ export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext(
      },
    })

-    const serversAndProjects = createServersAndProjectStore()
-
    const settingsServer = createMemo(() => {
      const list = server.list
      return list.find((conn) => ServerConnection.key(conn) === store.settings.serverKey) ?? list[0]
@@ -43,18 +41,25 @@ export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext(

    const owner = getOwner()

+    const ensureServerCtx = (conn: ServerConnection.Any) => {
+      const key = ServerConnection.key(conn)
+      const existing = serverCtxs.get(key)
+      if (existing) return existing.serverCtx
+      const root = createRoot((dispose) => {
+        const serverCtx = createServerCtx(conn, server.scope(key), server.projects.forServer(key))
+        return { dispose, serverCtx }
+      }, owner as any)
+      serverCtxs.set(key, root)
+      return root.serverCtx
+    }
+
    createMemo(() => {
      for (const conn of server.list) {
-        const key = ServerConnection.key(conn)
-        if (!serverCtxs.has(key)) {
-          const root = createRoot((dispose) => {
-            const serverCtx = createServerCtx(conn, serversAndProjects)
-            return { dispose, serverCtx }
-          }, owner as any)
-          serverCtxs.set(key, root)
-        }
+        ensureServerCtx(conn)
      }
+    })

+    createEffect(() => {
      for (const [key] of serverCtxs) {
        if (!server.list.find((conn) => ServerConnection.key(conn) === key)) {
          const { dispose } = serverCtxs.get(key)!
@@ -64,14 +69,9 @@ export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext(
      }
    })

-    const allServers = createMemo(
-      (): Array<ServerConnection.Any> =>
-        resolveServerList({ stored: serversAndProjects.store.list, props: props.servers }),
-    )
-
    return {
      servers: {
-        list: allServers,
+        list: () => server.list,
        health: serverHealth,
      },
      settings: {
@@ -86,33 +86,16 @@ export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext(
        },
      },
      createServerCtx(conn: ServerConnection.Any) {
-        const key = ServerConnection.key(conn)
-        const ctx = serverCtxs.get(key)
-        if (!ctx) return createServerCtx(conn, serversAndProjects)
-        return ctx.serverCtx
+        return ensureServerCtx(conn)
      },
    }
  },
 })

-type StoredProject = { worktree: string; expanded: boolean }
-type StoredServer = string | ServerConnection.HttpBase | ServerConnection.Http
-
-const createServersAndProjectStore = () => {
-  const [store, setStore, _, ready] = persisted(
-    Persist.global("server", ["server.v3"]),
-    createStore({
-      list: [] as StoredServer[],
-      projects: {} as Record<string, StoredProject[]>,
-      lastProject: {} as Record<string, string>,
-    }),
-  )
-  return { store, setStore, ready }
-}
-
 function createServerCtx(
  conn: ServerConnection.Any,
-  { store, setStore }: ReturnType<typeof createServersAndProjectStore>,
+  scope: ServerScope,
+  projects: ReturnType<typeof createServerProjects>,
 ) {
  const queryClient = new QueryClient({
    defaultOptions: {
@@ -123,13 +106,9 @@ function createServerCtx(
      },
    },
  })
-
-  const sdk = createServerSdkContext(conn)
+  const sdk = createServerSdkContext(conn, scope)
  const sync = createServerSyncContext(sdk)

-  const key = ServerConnection.key(conn)
-  const storeKey = projectsKey(key)
-
  function enrich(project: { worktree: string; expanded: boolean }) {
    const [childStore] = sync.child(project.worktree, { bootstrap: false })
    const projectID = childStore.project
@@ -147,7 +126,7 @@ function createServerCtx(
    return base
  }

-  const projectsList = createMemo(() => (store.projects[storeKey] ?? []).map(enrich))
+  const projectsList = createMemo(() => projects.list().map(enrich))

  const isLocal =
    (conn?.type === "sidecar" && conn.variant === "base") || (conn?.type === "http" && isLocalHost(conn.http.url))
@@ -158,45 +137,8 @@ function createServerCtx(
    sync,
    isLocal,
    projects: {
+      ...projects,
      list: projectsList,
-      open(directory: string) {
-        const current = store.projects[storeKey] ?? []
-        if (current.find((x) => x.worktree === directory)) return
-        setStore("projects", storeKey, [{ worktree: directory, expanded: true }, ...current])
-      },
-      close(directory: string) {
-        const current = store.projects[storeKey] ?? []
-        setStore(
-          "projects",
-          storeKey,
-          current.filter((x) => x.worktree !== directory),
-        )
-      },
-      expand(directory: string) {
-        const current = store.projects[storeKey] ?? []
-        const index = current.findIndex((x) => x.worktree === directory)
-        if (index !== -1) setStore("projects", storeKey, index, "expanded", true)
-      },
-      collapse(directory: string) {
-        const current = store.projects[storeKey] ?? []
-        const index = current.findIndex((x) => x.worktree === directory)
-        if (index !== -1) setStore("projects", storeKey, index, "expanded", false)
-      },
-      move(directory: string, toIndex: number) {
-        const current = store.projects[storeKey] ?? []
-        const fromIndex = current.findIndex((x) => x.worktree === directory)
-        if (fromIndex === -1 || fromIndex === toIndex) return
-        const result = [...current]
-        const [item] = result.splice(fromIndex, 1)
-        result.splice(toIndex, 0, item)
-        setStore("projects", storeKey, result)
-      },
-      last() {
-        return store.lastProject[storeKey]
-      },
-      touch(directory: string) {
-        setStore("lastProject", storeKey, directory)
-      },
    },
  }
 }
@@ -207,42 +149,3 @@ function isLocalHost(url: string) {
  const host = url.replace(/^https?:\/\//, "").split(":")[0]
  if (host === "localhost" || host === "127.0.0.1") return "local"
 }
-
-function projectsKey(key: ServerConnection.Key) {
-  if (key === "sidecar") return "local"
-  if (isLocalHost(key)) return "local"
-  return key
-}
-
-export function resolveServerList(input: {
-  props?: Array<ServerConnection.Any>
-  stored: StoredServer[]
-}): Array<ServerConnection.Any> {
-  const deduped = new Map<ServerConnection.Key, ServerConnection.Any>(
-    input.props?.map((v) => [ServerConnection.key(v), v]) ?? [],
-  )
-
-  for (const value of input.stored) {
-    const conn: ServerConnection.Http =
-      typeof value === "string"
-        ? {
-            type: "http" as const,
-            http: { url: value },
-          }
-        : "http" in value
-          ? value
-          : { type: "http", http: value }
-    const key = ServerConnection.key(conn)
-
-    const existing = deduped.get(key)
-    if (existing)
-      deduped.set(key, {
-        ...existing,
-        ...conn,
-        http: { ...existing.http, ...conn.http },
-      })
-    else deduped.set(key, conn)
-  }
-
-  return [...deduped.values()]
-}
@@ -198,6 +198,7 @@ if (warm !== "en") void loadDict(warm)

 export const { use: useLanguage, provider: LanguageProvider } = createSimpleContext({
  name: "Language",
+  gate: false,
  init: (props: { locale?: Locale }) => {
    const initial = props.locale ?? readStoredLocale() ?? detectLocale()
    const [store, setStore, _, ready] = persisted(
@@ -0,0 +1,38 @@
+import type { Accessor } from "solid-js"
+
+export function ensureSessionKey(key: string, touch: (key: string) => void, seed: (key: string) => void) {
+  touch(key)
+  seed(key)
+  return key
+}
+
+export function createSessionKeyReader(sessionKey: string | Accessor<string>, ensure: (key: string) => void) {
+  const key = typeof sessionKey === "function" ? sessionKey : () => sessionKey
+  return () => {
+    const value = key()
+    ensure(value)
+    return value
+  }
+}
+
+export function pruneSessionKeys(input: {
+  keep?: string
+  max: number
+  used: Map<string, number>
+  view: string[]
+  tabs: string[]
+}) {
+  if (!input.keep) return []
+
+  const keys = new Set<string>([...input.view, ...input.tabs])
+  if (keys.size <= input.max) return []
+
+  const score = (key: string) => {
+    if (key === input.keep) return Number.MAX_SAFE_INTEGER
+    return input.used.get(key) ?? 0
+  }
+
+  return Array.from(keys)
+    .sort((a, b) => score(b) - score(a))
+    .slice(input.max)
+}
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import { createRoot, createSignal } from "solid-js"
-import { createSessionKeyReader, ensureSessionKey, pruneSessionKeys } from "./layout"
+import { createSessionKeyReader, ensureSessionKey, pruneSessionKeys } from "./layout-helpers"

 describe("layout session-key helpers", () => {
  test("couples touch and scroll seed in order", () => {
@@ -1,10 +1,11 @@
 import { createStore, produce } from "solid-js/store"
 import { batch, createEffect, createMemo, onCleanup, onMount, type Accessor } from "solid-js"
+import { useLocation } from "@solidjs/router"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { useServerSync } from "./server-sync"
 import { useServerSDK } from "./server-sdk"
-import { useServer } from "./server"
+import { ServerConnection, useServer } from "./server"
 import { usePlatform } from "./platform"
 import { Project } from "@opencode-ai/sdk/v2"
 import { Persist, persisted, removePersisted } from "@/utils/persist"
@@ -13,6 +14,10 @@ import { same } from "@/utils/same"
 import { createScrollPersistence, type SessionScroll } from "./layout-scroll"
 import { createPathHelpers } from "./file/path"
 import type { ProjectAvatarVariant } from "@opencode-ai/ui/v2/project-avatar-v2"
+import { migrateLegacySessionStateKeys, ServerScope, SessionStateKey } from "@/utils/server-scope"
+import { createSessionKeyReader, ensureSessionKey, pruneSessionKeys } from "./layout-helpers"
+
+export { createSessionKeyReader, ensureSessionKey, pruneSessionKeys }

 export type { ProjectAvatarVariant }

@@ -60,6 +65,7 @@ type SessionView = {
 }

 type TabHandoff = {
+  scope: ServerScope
  dir: string
  id: string
  at: number
@@ -69,42 +75,11 @@ export type LocalProject = Partial<Project> & { worktree: string; expanded: bool

 export type ReviewDiffStyle = "unified" | "split"

-export function ensureSessionKey(key: string, touch: (key: string) => void, seed: (key: string) => void) {
-  touch(key)
-  seed(key)
-  return key
-}
-
-export function createSessionKeyReader(sessionKey: string | Accessor<string>, ensure: (key: string) => void) {
-  const key = typeof sessionKey === "function" ? sessionKey : () => sessionKey
-  return () => {
-    const value = key()
-    ensure(value)
-    return value
-  }
-}
-
-export function pruneSessionKeys(input: {
-  keep?: string
-  max: number
-  used: Map<string, number>
-  view: string[]
-  tabs: string[]
-}) {
-  if (!input.keep) return []
-
-  const keys = new Set<string>([...input.view, ...input.tabs])
-  if (keys.size <= input.max) return []
-
-  const score = (key: string) => {
-    if (key === input.keep) return Number.MAX_SAFE_INTEGER
-    return input.used.get(key) ?? 0
-  }
-
-  return Array.from(keys)
-    .sort((a, b) => score(b) - score(a))
-    .slice(input.max)
-}
+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 }

 function nextSessionTabsForOpen(current: SessionTabs | undefined, tab: string): SessionTabs {
  const all = current?.all ?? []
@@ -115,7 +90,7 @@ function nextSessionTabsForOpen(current: SessionTabs | undefined, tab: string):
 }

 const sessionPath = (key: string) => {
-  const dir = key.split("/")[0]
+  const dir = SessionStateKey.route(key).split("/")[0]
  if (!dir) return
  const root = decode64(dir)
  if (!root) return
@@ -146,13 +121,41 @@ const normalizeStoredSessionTabs = (key: string, tabs: SessionTabs) => {
  }
 }

+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" }
+
+  if (parts[1] !== "session") return { type: "home" }
+
+  const id = parts[2]
+  if (id) return { type: "session", dir, dirBase64, sessionId: id }
+  return { type: "dir-new-sesssion", dir, dirBase64 }
+}
+
 export const { use: useLayout, provider: LayoutProvider } = createSimpleContext({
  name: "Layout",
+  gate: false,
  init: () => {
-    const globalSdk = useServerSDK()
+    const serverSdk = useServerSDK()
    const serverSync = useServerSync()
    const server = useServer()
    const platform = usePlatform()
+    const location = useLocation()
+    const route = createMemo(() => {
+      const value = currentRoute(location.pathname, location.search)
+      if (value.type === "home") return value
+      return { ...value, server: server.key }
+    })

    const isRecord = (value: unknown): value is Record<string, unknown> =>
      typeof value === "object" && value !== null && !Array.isArray(value)
@@ -197,7 +200,8 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
        }
      })()

-      const sessionTabs = value.sessionTabs
+      const sessionTabs = migrateLegacySessionStateKeys(value.sessionTabs)
+      const sessionView = migrateLegacySessionStateKeys(value.sessionView)
      const migratedSessionTabs = (() => {
        if (!isRecord(sessionTabs)) return sessionTabs

@@ -226,7 +230,8 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
        migratedSidebar === sidebar &&
        migratedReview === review &&
        migratedFileTree === fileTree &&
-        migratedSessionTabs === sessionTabs
+        migratedSessionTabs === value.sessionTabs &&
+        sessionView === value.sessionView
      ) {
        return value
      }
@@ -237,10 +242,11 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
        review: migratedReview,
        fileTree: migratedFileTree,
        sessionTabs: migratedSessionTabs,
+        sessionView,
      }
    }

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

    const dropSessionState = (keys: string[]) => {
      for (const key of keys) {
-        const parts = key.split("/")
+        const scope = SessionStateKey.scope(key)
+        const parts = SessionStateKey.route(key).split("/")
        const dir = parts[0]
        const session = parts[1]
        if (!dir) continue

        for (const entry of SESSION_STATE_KEYS) {
-          const target = session ? Persist.session(dir, session, entry.key) : Persist.workspace(dir, entry.key)
+          const target = session
+            ? Persist.serverSession(scope, dir, session, entry.key)
+            : Persist.serverWorkspace(scope, dir, entry.key)
          void removePersisted(target, platform)

+          if (scope !== ServerScope.local) continue
          const legacyKey = `${dir}/${entry.legacy}${session ? "/" + session : ""}.${entry.version}`
          void removePersisted({ key: legacyKey }, platform)
        }
@@ -526,7 +536,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
          continue
        }

-        void globalSdk.client.project
+        void serverSdk.client.project
          .update({ projectID: project.id, directory: worktree, icon: { color } })
          .catch(() => {
            if (colorRequested.get(worktree) === color) colorRequested.delete(worktree)
@@ -557,11 +567,12 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
    })

    return {
+      route,
      ready,
      handoff: {
        tabs: createMemo(() => store.handoff?.tabs),
        setTabs(dir: string, id: string) {
-          setStore("handoff", "tabs", { dir, id, at: Date.now() })
+          setStore("handoff", "tabs", { scope: server.scope(), dir, id, at: Date.now() })
        },
        clearTabs() {
          if (!store.handoff?.tabs) return
@@ -9,6 +9,8 @@ import { Persist, persisted } from "@/utils/persist"
 import { cycleModelVariant, getConfiguredAgentVariant, resolveModelVariant } from "./model-variant"
 import { useSDK } from "./sdk"
 import { useSync } from "./sync"
+import { useServerSDK } from "./server-sdk"
+import { ScopedKey, type ServerScope } from "@/utils/server-scope"

 export type ModelKey = { providerID: string; modelID: string; variant?: string }

@@ -25,7 +27,7 @@ type Saved = {
 const WORKSPACE_KEY = "__workspace__"
 const handoff = new Map<string, State>()

-const handoffKey = (dir: string, id: string) => `${dir}\n${id}`
+const handoffKey = (scope: ServerScope, dir: string, id: string) => ScopedKey.from(scope, dir, id)

 const migrate = (value: unknown) => {
  if (!value || typeof value !== "object") return { session: {} }
@@ -57,6 +59,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
    const params = useParams()
    const sdk = useSDK()
    const sync = useSync()
+    const serverSDK = useServerSDK()
    const providers = useProviders()
    const models = useModels()

@@ -66,7 +69,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({

    const [saved, setSaved] = persisted(
      {
-        ...Persist.workspace(sdk.directory, "model-selection", ["model-selection.v1"]),
+        ...Persist.serverWorkspace(serverSDK.scope, sdk.directory, "model-selection", ["model-selection.v1"]),
        migrate,
      },
      createStore<Saved>({
@@ -121,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(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(sdk.directory, session)
+      const key = handoffKey(serverSDK.scope, sdk.directory, session)
      const next = handoff.get(key)
      if (!next) return
      if (saved.session[session] !== undefined) {
@@ -377,7 +380,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
            return
          }

-          handoff.set(handoffKey(dir, session), next)
+          handoff.set(handoffKey(serverSDK.scope, dir, session), next)
          setStore("draft", undefined)
        },
        restore(msg: { sessionID: string; agent: string; model: ModelKey }) {
@@ -385,7 +388,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(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),
+      }),
+  }))
+}
@@ -24,6 +24,7 @@ function modelKey(model: ModelKey) {

 export const { use: useModels, provider: ModelsProvider } = createSimpleContext({
  name: "Models",
+  gate: false,
  init: () => {
    const providers = useProviders()

@@ -107,6 +107,7 @@ function buildNotificationIndex(list: Notification[]) {

 export const { use: useNotification, provider: NotificationProvider } = createSimpleContext({
  name: "Notification",
+  gate: false,
  init: () => {
    const params = useParams()
    const serverSDK = useServerSDK()
@@ -124,7 +125,7 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
    const currentSession = createMemo(() => params.id)

    const [store, setStore, _, ready] = persisted(
-      Persist.global("notification", ["notification.v1"]),
+      Persist.serverGlobal(serverSDK.scope, "notification", ["notification.v1"]),
      createStore({
        list: [] as Notification[],
      }),
@@ -46,6 +46,7 @@ function hasPermissionPromptRules(permission: unknown) {

 export const { use: usePermission, provider: PermissionProvider } = createSimpleContext({
  name: "Permission",
+  gate: false,
  init: () => {
    const params = useParams()
    const serverSDK = useServerSDK()
@@ -60,7 +61,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple

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

@@ -3,12 +3,19 @@ import type { AsyncStorage, SyncStorage } from "@solid-primitives/storage"
 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"

@@ -20,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

@@ -48,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
@@ -75,11 +73,8 @@ export type Platform = {
  /** Set the default server URL to use on app startup (platform-specific) */
  setDefaultServer?(url: ServerConnection.Key | null): Promise<void> | void

-  /** Get the configured WSL integration (desktop only) */
-  getWslEnabled?(): Promise<boolean>
-
-  /** Set the configured WSL integration (desktop only) */
-  setWslEnabled?(config: boolean): Promise<void> | void
+  /** Manage WSL sidecar servers (Electron on Windows only) */
+  wslServers?: WslServersPlatform

  /** Get the preferred display backend (desktop only) */
  getDisplayBackend?(): Promise<DisplayBackend | null> | DisplayBackend | null
@@ -115,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,10 +1,12 @@
 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"
 import { Persist, persisted } from "@/utils/persist"
+import { useServerSDK } from "./server-sdk"
+import type { ServerScope } from "@/utils/server-scope"

 interface PartBase {
  content: string
@@ -151,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 = {
@@ -161,11 +165,15 @@ type PromptCacheEntry = {
  dispose: VoidFunction
 }

-function createPromptSession(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.scoped(dir, id, "prompt", [legacy]),
+    promptTarget(serverScope, scope),
    createStore<{
      prompt: Prompt
      cursor?: number
@@ -229,6 +237,8 @@ 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>()

    const disposeAll = () => {
@@ -251,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)
@@ -262,7 +272,7 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(

      const entry = createRoot(
        (dispose) => ({
-          value: createPromptSession(dir, id),
+          value: createPromptSession(serverSDK.scope, scope),
          dispose,
        }),
        owner,
@@ -273,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,
@@ -0,0 +1,14 @@
+import { describe, expect, test } from "bun:test"
+import { resumeStreamAfterPageShow } from "./server-sdk"
+
+describe("resumeStreamAfterPageShow", () => {
+  test("restarts a stream only after a back-forward cache restore", () => {
+    let starts = 0
+    const start = () => starts++
+
+    resumeStreamAfterPageShow({ persisted: false } as PageTransitionEvent, start)
+    resumeStreamAfterPageShow({ persisted: true } as PageTransitionEvent, start)
+
+    expect(starts).toBe(1)
+  })
+})
@@ -9,11 +9,19 @@ import { usePlatform } from "./platform"
 import { ServerConnection, useServer } from "./server"
 import { createRefCountMap } from "@/utils/refcount"
 import { useGlobal } from "./global"
+import { ServerScope } from "@/utils/server-scope"

 const isAbortError = (error: unknown) =>
  error !== null && typeof error === "object" && "name" in error && error.name === "AbortError"

-export function createServerSdkContext(server: ServerConnection.Any) {
+const isStreamClosed = (error: unknown, signal?: AbortSignal) => isAbortError(error) || signal?.aborted === true
+
+export function resumeStreamAfterPageShow(event: PageTransitionEvent, start: () => unknown) {
+  if (!event.persisted) return
+  start()
+}
+
+export function createServerSdkContext(server: ServerConnection.Any, scope: ServerScope) {
  const platform = usePlatform()
  const abort = new AbortController()

@@ -96,11 +104,10 @@ export function createServerSdkContext(server: ServerConnection.Any) {

  let streamErrorLogged = false
  const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms))
-  const aborted = isAbortError
-
  let attempt: AbortController | undefined
  let run: Promise<void> | undefined
  let started = false
+  let generation = 0
  const HEARTBEAT_TIMEOUT_MS = 15_000
  let lastEventAt = Date.now()
  let heartbeat: ReturnType<typeof setTimeout> | undefined
@@ -120,9 +127,12 @@ export function createServerSdkContext(server: ServerConnection.Any) {
  const start = () => {
    if (started) return run
    started = true
-    run = (async () => {
+    const active = ++generation
+    const previous = run
+    const current = (async () => {
+      if (previous) await previous
      // oxlint-disable-next-line no-unmodified-loop-condition -- `started` is set to false by stop() which also aborts; both flags are checked to allow graceful exit
-      while (!abort.signal.aborted && started) {
+      while (!abort.signal.aborted && started && generation === active) {
        attempt = new AbortController()
        lastEventAt = Date.now()
        const onAbort = () => {
@@ -133,7 +143,7 @@ export function createServerSdkContext(server: ServerConnection.Any) {
          const events = await eventSdk.global.event({
            signal: attempt.signal,
            onSseError: (error) => {
-              if (aborted(error)) return
+              if (isStreamClosed(error, attempt?.signal)) return
              if (streamErrorLogged) return
              streamErrorLogged = true
              console.error("[global-sdk] event stream error", {
@@ -176,7 +186,7 @@ export function createServerSdkContext(server: ServerConnection.Any) {
            await wait(0)
          }
        } catch (error) {
-          if (!aborted(error) && !streamErrorLogged) {
+          if (!isStreamClosed(error, attempt?.signal) && !streamErrorLogged) {
            streamErrorLogged = true
            console.error("[global-sdk] event stream failed", {
              url: server.http.url,
@@ -190,23 +200,28 @@ export function createServerSdkContext(server: ServerConnection.Any) {
          clearHeartbeat()
        }

-        if (abort.signal.aborted || !started) return
+        if (abort.signal.aborted || !started || generation !== active) return
        await wait(RECONNECT_DELAY_MS)
      }
    })().finally(() => {
+      if (run !== current) return
      run = undefined
      flush()
    })
+    run = current
    return run
  }

  const stop = () => {
    started = false
+    generation++
    attempt?.abort()
    clearHeartbeat()
  }

  onMount(() => {
+    makeEventListener(window, "pagehide", stop)
+    makeEventListener(window, "pageshow", (event) => resumeStreamAfterPageShow(event, start))
    makeEventListener(document, "visibilitychange", () => {
      if (document.visibilityState !== "visible") return
      if (!started) return
@@ -228,6 +243,7 @@ export function createServerSdkContext(server: ServerConnection.Any) {
  })

  return {
+    scope,
    url: server.http.url,
    client: sdk,
    event: {
@@ -282,6 +298,7 @@ function createDirSdkContext(directory: string, serverSDK: ServerSDK) {
  onCleanup(unsub)

  return {
+    scope: serverSDK.scope,
    directory,
    client,
    event: emitter,
@@ -1,17 +1,7 @@
 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,
-  createContext,
-  createEffect,
-  getOwner,
-  onCleanup,
-  onMount,
-  type ParentProps,
-  untrack,
-  useContext,
-} from "solid-js"
+import { batch, 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"
@@ -44,6 +34,9 @@ import { createRefCountMap } from "@/utils/refcount"
 import { useGlobal } from "./global"
 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
@@ -59,34 +52,39 @@ type GlobalStore = {
  reload: undefined | "pending" | "complete"
 }

-export const loadMcpQuery = (directory: string, sdk: OpencodeClient) =>
+export const loadMcpQuery = (scope: ServerScope, directory: string, sdk: OpencodeClient) =>
  queryOptions({
-    queryKey: [directory, "mcp"] as const,
+    queryKey: [scope, directory, "mcp"] as const,
    queryFn: () => sdk.mcp.status().then((r) => r.data ?? {}),
  })

-export const loadLspQuery = (directory: string, sdk: OpencodeClient) =>
+export const loadLspQuery = (scope: ServerScope, directory: string, sdk: OpencodeClient) =>
  queryOptions({
-    queryKey: [directory, "lsp"] as const,
+    queryKey: [scope, directory, "lsp"] as const,
    queryFn: () => sdk.lsp.status().then((r) => r.data ?? []),
  })

-function makeQueryOptionsApi(serverSDK: () => OpencodeClient, sdkFor: (dir: PathKey) => OpencodeClient) {
+function makeQueryOptionsApi(
+  scope: ServerScope,
+  serverSDK: () => OpencodeClient,
+  sdkFor: (dir: PathKey) => OpencodeClient,
+) {
  return {
-    globalConfig: () => loadGlobalConfigQuery(serverSDK()),
-    projects: () => loadProjectsQuery(serverSDK()),
+    globalConfig: () => loadGlobalConfigQuery(scope, serverSDK()),
+    projects: () => loadProjectsQuery(scope, serverSDK()),
    providers: (directory: PathKey | null) =>
-      loadProvidersQuery(directory, directory === null ? serverSDK() : sdkFor(directory)),
-    path: (directory: PathKey | null) => loadPathQuery(directory, directory === null ? serverSDK() : sdkFor(directory)),
-    agents: (directory: PathKey) => loadAgentsQuery(directory, sdkFor(directory)),
-    mcp: (directory: PathKey) => loadMcpQuery(directory, sdkFor(directory)),
-    lsp: (directory: PathKey) => loadLspQuery(directory, sdkFor(directory)),
-    sessions: (directory: PathKey) => ({ queryKey: [directory, "loadSessions"] as const }),
+      loadProvidersQuery(scope, directory, directory === null ? serverSDK() : sdkFor(directory)),
+    path: (directory: PathKey | null) =>
+      loadPathQuery(scope, directory, directory === null ? serverSDK() : sdkFor(directory)),
+    agents: (directory: PathKey) => loadAgentsQuery(scope, directory, sdkFor(directory)),
+    mcp: (directory: PathKey) => loadMcpQuery(scope, directory, sdkFor(directory)),
+    lsp: (directory: PathKey) => loadLspQuery(scope, directory, sdkFor(directory)),
+    sessions: (directory: PathKey) => ({ queryKey: [scope, directory, "loadSessions"] as const }),
  }
 }
 export type QueryOptionsApi = ReturnType<typeof makeQueryOptionsApi>

-export function createServerSyncContext(_serverSDK?: ServerSDK) {
+export function createServerSyncContextInner(_serverSDK?: ServerSDK) {
  const serverSDK: ServerSDK = _serverSDK ?? useServerSDK()
  const language = useLanguage()
  const owner = getOwner()
@@ -109,7 +107,7 @@ export function createServerSyncContext(_serverSDK?: ServerSDK) {
    return sdk
  }

-  const queryOptionsApi = makeQueryOptionsApi(() => serverSDK.client, sdkFor)
+  const queryOptionsApi = makeQueryOptionsApi(serverSDK.scope, () => serverSDK.client, sdkFor)

  const [configQuery, providerQuery, pathQuery] = useQueries(() => ({
    queries: [queryOptionsApi.globalConfig(), queryOptionsApi.providers(null), queryOptionsApi.path(null)],
@@ -166,10 +164,11 @@ export function createServerSyncContext(_serverSDK?: ServerSDK) {
  }) as typeof setGlobalStore

  const bootstrap = useQuery(() => ({
-    queryKey: ["bootstrap"],
+    queryKey: [serverSDK.scope, "bootstrap"],
    queryFn: async () => {
      await bootstrapGlobal({
        serverSDK: serverSDK.client,
+        scope: serverSDK.scope,
        requestFailedTitle: language.t("common.requestFailed"),
        translate: language.t,
        formatMoreCount: (count) => language.t("common.moreCountSuffix", { count }),
@@ -208,12 +207,14 @@ export function createServerSyncContext(_serverSDK?: ServerSDK) {
  const queue = createRefreshQueue({
    paused,
    key: directoryKey,
-    bootstrap: () => queryClient.fetchQuery({ queryKey: ["bootstrap"] }),
+    bootstrap: () => queryClient.fetchQuery({ queryKey: [serverSDK.scope, "bootstrap"] }),
    bootstrapInstance,
  })

  const children = createChildStoreManager({
    owner,
+    scope: serverSDK.scope,
+    persist: persisted,
    isBooting: (directory) => booting.has(directory),
    isLoadingSessions: (directory) => sessionLoads.has(directory),
    onBootstrap: (directory) => {
@@ -237,8 +238,8 @@ export function createServerSyncContext(_serverSDK?: ServerSDK) {
      queue.clear(key)
      sessionMeta.delete(key)
      sdkCache.delete(key)
-      clearProviderRev(key)
-      clearSessionPrefetchDirectory(key)
+      clearProviderRev(serverSDK.scope, key)
+      clearSessionPrefetchDirectory(serverSDK.scope, key)
    },
    translate: language.t,
    queryOptions: queryOptionsApi,
@@ -247,17 +248,21 @@ export function createServerSyncContext(_serverSDK?: ServerSDK) {
    },
  })

-  async function loadSessions(directory: string) {
+  async function loadSessions(directory: string, options?: { limit?: number }) {
    const key = directoryKey(directory)
    const pending = sessionLoads.get(key)
-    if (pending) return pending
+    if (pending) {
+      await pending
+      return loadSessions(directory, options)
+    }

    children.pin(key)
    const [store, setStore] = children.child(directory, { bootstrap: false })
    const meta = sessionMeta.get(key)
-    if (meta && meta.limit >= store.limit) {
+    const retainedLimit = Math.max(store.limit, options?.limit ?? 0, meta?.limit ?? 0)
+    if (meta && meta.limit >= retainedLimit) {
      const next = trimSessions(store.session, {
-        limit: store.limit,
+        limit: retainedLimit,
        permission: store.permission,
      })
      if (next.length !== store.session.length) {
@@ -268,7 +273,7 @@ export function createServerSyncContext(_serverSDK?: ServerSDK) {
      return
    }

-    const limit = Math.max(store.limit + SESSION_RECENT_LIMIT, SESSION_RECENT_LIMIT)
+    const limit = Math.max(retainedLimit + SESSION_RECENT_LIMIT, SESSION_RECENT_LIMIT)
    const promise = queryClient
      .fetchQuery({
        ...queryOptionsApi.sessions(key),
@@ -283,7 +288,7 @@ export function createServerSyncContext(_serverSDK?: ServerSDK) {
                .filter((s) => !!s?.id)
                .filter((s) => !s.time?.archived)
                .sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
-              const limit = store.limit
+              const limit = Math.max(store.limit, options?.limit ?? 0, sessionMeta.get(key)?.limit ?? 0)
              const childSessions = store.session.filter((s) => !!s.parentID)
              const sessions = trimSessions([...nonArchived, ...childSessions], {
                limit,
@@ -338,6 +343,7 @@ export function createServerSyncContext(_serverSDK?: ServerSDK) {
      const sdk = sdkFor(directory)
      await bootstrapDirectory({
        directory,
+        scope: serverSDK.scope,
        mcp: children.mcp(key),
        global: {
          config: globalStore.config,
@@ -399,6 +405,7 @@ export function createServerSyncContext(_serverSDK?: ServerSDK) {
      setStore,
      push: queue.push,
      setSessionTodo,
+      retainedLimit: sessionMeta.get(key)?.limit,
      vcsCache: children.vcsCache.get(key),
      loadLsp: () => {
        void queryClient.fetchQuery(queryOptionsApi.lsp(key))
@@ -449,8 +456,10 @@ export function createServerSyncContext(_serverSDK?: ServerSDK) {
      bootstrap.refetch()
      // Invalidate all provider queries so newly configured custom providers
      // appear immediately in the available provider list across all directories.
-      queryClient.invalidateQueries({ queryKey: [null, "providers"] })
-      queryClient.invalidateQueries({ predicate: (query) => query.queryKey[1] === "providers" })
+      queryClient.invalidateQueries({ queryKey: [serverSDK.scope, null, "providers"] })
+      queryClient.invalidateQueries({
+        predicate: (query) => query.queryKey[0] === serverSDK.scope && query.queryKey[2] === "providers",
+      })
    },
  }))

@@ -473,11 +482,45 @@ export function createServerSyncContext(_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)
+  return Object.assign(inner, {
+    createDirSyncContext: createRefCountMap(
+      (dir) => createDirSyncContext(dir, inner, _serverSDK),
+      (dir) => inner.disableMcp(dir),
+      directoryKey,
+    ),
+  })
+}
+
 export const { use: useServerSync, provider: ServerSyncProvider } = createSimpleContext({
  name: "ServerSync",
+  gate: false,
  init: (props: { server?: ServerConnection.Any }) => {
    const global = useGlobal()
    const language = useLanguage()
@@ -487,13 +530,7 @@ export const { use: useServerSync, provider: ServerSyncProvider } = createSimple
    if (!conn) throw new Error(language.t("error.serverSDK.noServerAvailable"))
    const ctx = global.createServerCtx(conn)

-    return Object.assign(ctx.sync, {
-      createDirSyncContext: createRefCountMap(
-        (dir) => createDirSyncContext(dir, ctx.sync),
-        (dir) => ctx.sync.disableMcp(dir),
-        directoryKey,
-      ),
-    })
+    return ctx.sync
  },
 })

@@ -1,5 +1,14 @@
 import { describe, expect, test } from "bun:test"
-import { resolveServerList, ServerConnection } from "./server"
+import { createRoot, createSignal } from "solid-js"
+import { createStore } from "solid-js/store"
+import {
+  createServerProjects,
+  migrateCanonicalLocalServerState,
+  nextServerAfterRemoval,
+  resolveServerList,
+  ServerConnection,
+} from "./server"
+import { ServerScope } from "@/utils/server-scope"

 describe("resolveServerList", () => {
  test("lets startup auth_token credentials override a persisted same-url server", () => {
@@ -51,3 +60,104 @@ describe("resolveServerList", () => {
    expect(list[0]?.type === "http" ? list[0].authToken : true).toBeUndefined()
  })
 })
+
+test("treats WSL sidecars as remote server connections", () => {
+  expect(
+    ServerConnection.local({
+      type: "sidecar",
+      variant: "wsl",
+      distro: "Debian",
+      http: { url: "http://127.0.0.1:4097" },
+    }),
+  ).toBe(false)
+  expect(ServerConnection.local({ type: "sidecar", variant: "base", http: { url: "http://127.0.0.1:4096" } })).toBe(
+    true,
+  )
+  expect(ServerConnection.local({ type: "http", http: { url: "http://localhost:4096" } })).toBe(true)
+  expect(ServerConnection.local({ type: "http", http: { url: "https://server.example.test" } })).toBe(false)
+})
+
+test("active server removal falls back across built-in and persisted servers", () => {
+  const local = { type: "sidecar", variant: "base", http: { url: "http://127.0.0.1:4096" } } as const
+  const debian = {
+    type: "sidecar",
+    variant: "wsl",
+    distro: "Debian",
+    http: { url: "http://127.0.0.1:4097" },
+  } as const
+
+  expect(
+    nextServerAfterRemoval(
+      [local, debian],
+      ServerConnection.Key.make("wsl:Debian"),
+      ServerConnection.Key.make("sidecar"),
+    ),
+  ).toBe(ServerConnection.Key.make("sidecar"))
+})
+
+describe("createServerProjects", () => {
+  test("keeps active and explicit server buckets in one reactive store", () => {
+    createRoot((dispose) => {
+      const [scope] = createSignal(ServerScope.local)
+      const [store, setStore] = createStore({ projects: {}, lastProject: {} })
+      const active = createServerProjects({ scope, store, setStore })
+      const remote = createServerProjects({ scope: () => "https://debian.example" as ServerScope, store, setStore })
+
+      remote.open("/repo")
+      expect(remote.list()).toEqual([{ worktree: "/repo", expanded: true }])
+      expect(active.list()).toEqual([])
+
+      const adopted = createServerProjects({ scope: () => "https://debian.example" as ServerScope, store, setStore })
+      expect(adopted.list()).toEqual([{ worktree: "/repo", expanded: true }])
+
+      adopted.close("/repo")
+      expect(remote.list()).toEqual([])
+      dispose()
+    })
+  })
+})
+
+describe("migrateCanonicalLocalServerState", () => {
+  test("moves an existing canonical web bucket into local scope", () => {
+    expect(
+      migrateCanonicalLocalServerState(
+        {
+          list: [],
+          projects: { "https://opencode.example.com": [{ worktree: "/remote", expanded: true }] },
+          lastProject: { "https://opencode.example.com": "/remote" },
+        },
+        ServerConnection.Key.make("https://opencode.example.com"),
+      ),
+    ).toEqual({
+      list: [],
+      projects: { local: [{ worktree: "/remote", expanded: true }] },
+      lastProject: { local: "/remote" },
+    })
+  })
+
+  test("preserves existing local state while merging a canonical web bucket", () => {
+    expect(
+      migrateCanonicalLocalServerState(
+        {
+          projects: {
+            local: [{ worktree: "/local", expanded: false }],
+            "https://opencode.example.com": [
+              { worktree: "/local", expanded: true },
+              { worktree: "/remote", expanded: true },
+            ],
+          },
+          lastProject: { local: "/local", "https://opencode.example.com": "/remote" },
+        },
+        ServerConnection.Key.make("https://opencode.example.com"),
+      ),
+    ).toEqual({
+      projects: {
+        local: [
+          { worktree: "/local", expanded: false },
+          { worktree: "/remote", expanded: true },
+        ],
+      },
+      lastProject: { local: "/local" },
+    })
+  })
+})
@@ -1,10 +1,12 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { type Accessor, batch, createMemo } from "solid-js"
-import { createStore } from "solid-js/store"
+import { createStore, type SetStoreFunction, type Store } from "solid-js/store"
 import { Persist, persisted } from "@/utils/persist"
+import { ServerScope } from "@/utils/server-scope"

 type StoredProject = { worktree: string; expanded: boolean }
 type StoredServer = string | ServerConnection.HttpBase | ServerConnection.Http
+type ServerProjectState = { projects: Record<string, StoredProject[]>; lastProject: Record<string, string> }
 const HEALTH_POLL_INTERVAL_MS = 10_000

 export function normalizeServerUrl(input: string) {
@@ -20,18 +22,95 @@ export function serverName(conn?: ServerConnection.Any, ignoreDisplayName = fals
  return conn.http.url.replace(/^https?:\/\//, "").replace(/\/+$/, "")
 }

-function projectsKey(key: ServerConnection.Key) {
-  if (!key) return ""
-  if (key === "sidecar") return "local"
-  if (isLocalHost(key)) return "local"
-  return key
-}
-
 function isLocalHost(url: string) {
  const host = url.replace(/^https?:\/\//, "").split(":")[0]
  if (host === "localhost" || host === "127.0.0.1") return "local"
 }

+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value)
+}
+
+export function migrateCanonicalLocalServerState(value: unknown, canonicalLocalServer?: ServerConnection.Key) {
+  if (!canonicalLocalServer || canonicalLocalServer === "local") return value
+  if (!isRecord(value)) return value
+  const projects = isRecord(value.projects) ? value.projects : undefined
+  const lastProject = isRecord(value.lastProject) ? value.lastProject : undefined
+  const previousProjects = projects?.[canonicalLocalServer]
+  const previousLastProject = lastProject?.[canonicalLocalServer]
+  if (!Array.isArray(previousProjects) && typeof previousLastProject !== "string") return value
+
+  const next = { ...value }
+  if (projects && Array.isArray(previousProjects)) {
+    const local = Array.isArray(projects.local) ? projects.local : []
+    const worktrees = new Set(
+      local.flatMap((project) => (isRecord(project) && typeof project.worktree === "string" ? [project.worktree] : [])),
+    )
+    const migrated = previousProjects.filter((project) => {
+      if (!isRecord(project) || typeof project.worktree !== "string") return true
+      if (worktrees.has(project.worktree)) return false
+      worktrees.add(project.worktree)
+      return true
+    })
+    const nextProjects: Record<string, unknown> = { ...projects, local: [...local, ...migrated] }
+    delete nextProjects[canonicalLocalServer]
+    next.projects = nextProjects
+  }
+  if (lastProject && typeof previousLastProject === "string") {
+    const nextLastProject = { ...lastProject }
+    if (typeof nextLastProject.local !== "string") nextLastProject.local = previousLastProject
+    delete nextLastProject[canonicalLocalServer]
+    next.lastProject = nextLastProject
+  }
+  return next
+}
+
+export function createServerProjects<T extends ServerProjectState>(input: {
+  scope: Accessor<ServerScope>
+  store: Store<T>
+  setStore: SetStoreFunction<T>
+}) {
+  const setStore = input.setStore as unknown as SetStoreFunction<ServerProjectState>
+  const current = () => input.store.projects[input.scope()] ?? []
+  return {
+    list: current,
+    open(directory: string) {
+      const scope = input.scope()
+      if (current().some((project) => project.worktree === directory)) return
+      setStore("projects", scope, [{ worktree: directory, expanded: true }, ...current()])
+    },
+    close(directory: string) {
+      setStore(
+        "projects",
+        input.scope(),
+        current().filter((project) => project.worktree !== directory),
+      )
+    },
+    expand(directory: string) {
+      const index = current().findIndex((project) => project.worktree === directory)
+      if (index !== -1) setStore("projects", input.scope(), index, "expanded", true)
+    },
+    collapse(directory: string) {
+      const index = current().findIndex((project) => project.worktree === directory)
+      if (index !== -1) setStore("projects", input.scope(), index, "expanded", false)
+    },
+    move(directory: string, toIndex: number) {
+      const fromIndex = current().findIndex((project) => project.worktree === directory)
+      if (fromIndex === -1 || fromIndex === toIndex) return
+      const next = [...current()]
+      const [item] = next.splice(fromIndex, 1)
+      next.splice(toIndex, 0, item)
+      setStore("projects", input.scope(), next)
+    },
+    last() {
+      return input.store.lastProject[input.scope()]
+    },
+    touch(directory: string) {
+      setStore("lastProject", input.scope(), directory)
+    },
+  }
+}
+
 export function resolveServerList(input: {
  props?: Array<ServerConnection.Any>
  stored: StoredServer[]
@@ -66,7 +145,7 @@ export function resolveServerList(input: {
 }

 export namespace ServerConnection {
-  type Base = { displayName?: string }
+  type Base = { displayName?: string; label?: string }

  export type HttpBase = {
    url: string
@@ -123,13 +202,35 @@ export namespace ServerConnection {

  export type Key = string & { _brand: "Key" }
  export const Key = { make: (v: string) => v as Key }
+
+  export const builtin = (conn: Any) => conn.type === "sidecar" && conn.variant === "base"
+  export const local = (conn?: Any) =>
+    !!conn && (builtin(conn) || (conn.type === "http" && isLocalHost(conn.http.url) === "local"))
+}
+
+export function nextServerAfterRemoval(
+  servers: ServerConnection.Any[],
+  removed: ServerConnection.Key,
+  fallback: ServerConnection.Key,
+) {
+  const remaining = servers.filter((server) => ServerConnection.key(server) !== removed)
+  const next = remaining.find((server) => ServerConnection.key(server) === fallback) ?? remaining[0]
+  return next ? ServerConnection.key(next) : fallback
 }

 export const { use: useServer, provider: ServerProvider } = createSimpleContext({
  name: "Server",
-  init: (props: { defaultServer: ServerConnection.Key; servers?: Array<ServerConnection.Any> }) => {
+  gate: true,
+  init: (props: {
+    defaultServer: ServerConnection.Key
+    canonicalLocalServer?: ServerConnection.Key
+    servers?: Array<ServerConnection.Any>
+  }) => {
    const [store, setStore, _, ready] = persisted(
-      Persist.global("server", ["server.v3"]),
+      {
+        ...Persist.global("server", ["server.v3"]),
+        migrate: (value) => migrateCanonicalLocalServerState(value, props.canonicalLocalServer),
+      },
      createStore({
        list: [] as StoredServer[],
        projects: {} as Record<string, StoredProject[]>,
@@ -168,27 +269,30 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
    }

    function remove(key: ServerConnection.Key) {
+      const next = nextServerAfterRemoval(allServers(), key, props.defaultServer)
      const list = store.list.filter((x) => url(x) !== key)
      batch(() => {
        setStore("list", list)
-        if (state.active === key) {
-          const next = list[0]
-          setState("active", next ? ServerConnection.Key.make(url(next)) : props.defaultServer)
-        }
+        if (state.active === key) setState("active", next)
      })
    }

    const isReady = createMemo(() => ready() && !!state.active)

-    const origin = createMemo(() => projectsKey(state.active))
-    const projectsList = createMemo(() => store.projects[origin()] ?? [])
+    const scope = (key = state.active) => ServerScope.fromServerKey(key, props.canonicalLocalServer)
+    const projects = createServerProjects({ scope, store, setStore })
+    const projectStores = new Map<ServerConnection.Key, ReturnType<typeof createServerProjects>>()
+    const projectsForServer = (key: ServerConnection.Key) => {
+      const existing = projectStores.get(key)
+      if (existing) return existing
+      const next = createServerProjects({ scope: () => scope(key), store, setStore })
+      projectStores.set(key, next)
+      return next
+    }
    const current: Accessor<ServerConnection.Any | undefined> = createMemo(
      () => allServers().find((s) => ServerConnection.key(s) === state.active) ?? allServers()[0],
    )
-    const isLocal = createMemo(() => {
-      const c = current()
-      return (c?.type === "sidecar" && c.variant === "base") || (c?.type === "http" && isLocalHost(c.http.url))
-    })
+    const isLocal = createMemo(() => ServerConnection.local(current()))

    return {
      ready: isReady,
@@ -208,60 +312,10 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
      setActive,
      add,
      remove,
+      scope,
      projects: {
-        list: projectsList,
-        open(directory: string) {
-          const key = origin()
-          if (!key) return
-          const current = store.projects[key] ?? []
-          if (current.find((x) => x.worktree === directory)) return
-          setStore("projects", key, [{ worktree: directory, expanded: true }, ...current])
-        },
-        close(directory: string) {
-          const key = origin()
-          if (!key) return
-          const current = store.projects[key] ?? []
-          setStore(
-            "projects",
-            key,
-            current.filter((x) => x.worktree !== directory),
-          )
-        },
-        expand(directory: string) {
-          const key = origin()
-          if (!key) return
-          const current = store.projects[key] ?? []
-          const index = current.findIndex((x) => x.worktree === directory)
-          if (index !== -1) setStore("projects", key, index, "expanded", true)
-        },
-        collapse(directory: string) {
-          const key = origin()
-          if (!key) return
-          const current = store.projects[key] ?? []
-          const index = current.findIndex((x) => x.worktree === directory)
-          if (index !== -1) setStore("projects", key, index, "expanded", false)
-        },
-        move(directory: string, toIndex: number) {
-          const key = origin()
-          if (!key) return
-          const current = store.projects[key] ?? []
-          const fromIndex = current.findIndex((x) => x.worktree === directory)
-          if (fromIndex === -1 || fromIndex === toIndex) return
-          const result = [...current]
-          const [item] = result.splice(fromIndex, 1)
-          result.splice(toIndex, 0, item)
-          setStore("projects", key, result)
-        },
-        last() {
-          const key = origin()
-          if (!key) return
-          return store.lastProject[key]
-        },
-        touch(directory: string) {
-          const key = origin()
-          if (!key) return
-          setStore("lastProject", key, directory)
-        },
+        ...projects,
+        forServer: projectsForServer,
      },
    }
  },
@@ -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: "",
@@ -156,12 +150,18 @@ function withFallback<T>(read: () => T | undefined, fallback: T) {

 export const { use: useSettings, provider: SettingsProvider } = createSimpleContext({
  name: "Settings",
+  gate: false,
  init: () => {
    const [store, setStore, _, ready] = persisted("settings.v3", createStore<Settings>(defaultSettings))
-
-    createEffect(() => {
-      console.log("settings", { ready: ready() })
-    })
+    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
@@ -196,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)
        },
@@ -204,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)
        },
@@ -244,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),
@@ -0,0 +1,216 @@
+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, removePersisted, draftPersistedKeys } from "@/utils/persist"
+import { ServerConnection, useServer } from "./server"
+import { createEffect, startTransition } from "solid-js"
+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 = {
+  type: "session"
+  server: ServerConnection.Key
+  dirBase64: string
+  sessionId: string
+}
+
+export type DraftTab = {
+  type: "draft"
+  draftID: string
+  server: ServerConnection.Key
+  directory: string
+  worktree?: string
+}
+
+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)
+  return tabs.some(
+    (tab) =>
+      tab.type === "session" && tab.server === server && tab.dirBase64 === dirBase64 && tab.sessionId === session.id,
+  )
+}
+
+export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
+  name: "Tabs",
+  gate: false,
+  init: () => {
+    const server = useServer()
+    const platform = usePlatform()
+    const fallback = server.key
+    const [store, setStore, _, ready] = persisted(
+      {
+        ...Persist.global("tabs"),
+        migrate: (value: unknown) => {
+          if (!Array.isArray(value)) return value
+          return value.map((tab) => {
+            if (!tab || typeof tab !== "object" || "server" in tab) return tab
+            return { ...tab, server: fallback }
+          })
+        },
+      },
+      createStore<Tab[]>([]),
+    )
+
+    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))
+      if (store.every((tab) => servers.has(tab.server))) return
+      setStore((tabs) => tabs.filter((tab) => servers.has(tab.server)))
+    })
+
+    const navigateTab = (tab: Tab) => {
+      const href = tabHref(tab)
+      if (tab.server === server.key) {
+        navigate(href)
+        return
+      }
+      void startTransition(() => {
+        server.setActive(tab.server)
+        navigate(href)
+      })
+    }
+
+    const actions = {
+      addSessionTab: (tab: Omit<SessionTab, "type">) => {
+        const next = { type: "session" as const, ...tab }
+        if (closing.has(tabKey(next))) return
+        setStore(
+          produce((tabs) => {
+            if (tabs.some((item) => tabKey(item) === tabKey(next))) return
+            tabs.push(next)
+          }),
+        )
+      },
+      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(() => {
+          setStore(
+            produce((tabs) => {
+              tabs.splice(index, 1)
+            }),
+          )
+          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) => {
+        void startTransition(() => {
+          setStore(
+            produce((tabs) => {
+              const sessionIDs = new Set(input.sessionIDs)
+              const currentHref =
+                params.dir && params.id
+                  ? tabHref({
+                      type: "session",
+                      server: server.key,
+                      dirBase64: params.dir,
+                      sessionId: params.id,
+                    })
+                  : undefined
+              const currentIndex = currentHref
+                ? tabs.findIndex(
+                    (tab) => tab.type === "session" && tab.server === server.key && tabHref(tab) === currentHref,
+                  )
+                : -1
+              const currentTab = tabs[currentIndex]
+              const removedCurrent =
+                currentTab?.type === "session" &&
+                currentTab.server === server.key &&
+                atob(currentTab.dirBase64) === input.directory &&
+                sessionIDs.has(currentTab.sessionId)
+
+              for (let i = tabs.length - 1; i >= 0; i--) {
+                const tab = tabs[i]
+                if (!tab || tab.type !== "session") continue
+                if (tab.server !== server.key) continue
+                if (atob(tab.dirBase64) !== input.directory) continue
+                if (!sessionIDs.has(tab.sessionId)) continue
+                tabs.splice(i, 1)
+              }
+
+              if (!removedCurrent) return
+              const nextTab =
+                tabs.slice(currentIndex).find((tab) => tab.type === "session") ??
+                tabs.slice(0, currentIndex).findLast((tab) => tab.type === "session")
+              if (nextTab) navigateTab(nextTab)
+              else navigate("/")
+            }),
+          )
+        })
+      },
+    }
+
+    return { ...actions, store, ready }
+  },
+})
@@ -1,9 +1,7 @@
 import { beforeAll, describe, expect, mock, test } from "bun:test"
+import { ServerScope } from "@/utils/server-scope"

-type ServerKey = Parameters<typeof import("./terminal").getTerminalServerScope>[1]
-
-let getWorkspaceTerminalCacheKey: (dir: string, scope?: string) => string
-let getTerminalServerScope: typeof import("./terminal").getTerminalServerScope
+let getWorkspaceTerminalCacheKey: typeof import("./terminal").getWorkspaceTerminalCacheKey
 let getLegacyTerminalStorageKeys: (dir: string, legacySessionID?: string) => string[]
 let migrateTerminalState: (value: unknown) => unknown

@@ -11,6 +9,8 @@ beforeAll(async () => {
  mock.module("@solidjs/router", () => ({
    useNavigate: () => () => undefined,
    useParams: () => ({}),
+    useLocation: () => ({}),
+    useSearchParams: () => [{}, () => undefined],
  }))
  mock.module("@opencode-ai/ui/context", () => ({
    createSimpleContext: () => ({
@@ -20,53 +20,19 @@ beforeAll(async () => {
  }))
  const mod = await import("./terminal")
  getWorkspaceTerminalCacheKey = mod.getWorkspaceTerminalCacheKey
-  getTerminalServerScope = mod.getTerminalServerScope
  getLegacyTerminalStorageKeys = mod.getLegacyTerminalStorageKeys
  migrateTerminalState = mod.migrateTerminalState
 })

 describe("getWorkspaceTerminalCacheKey", () => {
  test("uses workspace-only directory cache key", () => {
-    expect(getWorkspaceTerminalCacheKey("/repo")).toBe("/repo:__workspace__")
+    expect(String(getWorkspaceTerminalCacheKey("/repo"))).toBe("local\u0000/repo\u0000__workspace__")
  })

  test("can include a server scope", () => {
-    expect(getWorkspaceTerminalCacheKey("/repo", "wsl:Debian")).toBe("wsl:Debian:/repo:__workspace__")
-  })
-})
-
-describe("getTerminalServerScope", () => {
-  test("preserves local server keys", () => {
-    expect(
-      getTerminalServerScope(
-        { type: "sidecar", variant: "base", http: { url: "http://127.0.0.1:4096" } },
-        "sidecar" as ServerKey,
-      ),
-    ).toBeUndefined()
-    expect(
-      getTerminalServerScope(
-        { type: "http", http: { url: "http://localhost:4096" } },
-        "http://localhost:4096" as ServerKey,
-      ),
-    ).toBeUndefined()
-    expect(
-      getTerminalServerScope({ type: "http", http: { url: "http://[::1]:4096" } }, "http://[::1]:4096" as ServerKey),
-    ).toBeUndefined()
-  })
-
-  test("scopes non-local server keys", () => {
-    expect(
-      getTerminalServerScope(
-        { type: "sidecar", variant: "wsl", distro: "Debian", http: { url: "http://127.0.0.1:4096" } },
-        "wsl:Debian" as ServerKey,
-      ),
-    ).toBe("wsl:Debian" as ServerKey)
-    expect(
-      getTerminalServerScope(
-        { type: "http", http: { url: "https://example.com" } },
-        "https://example.com" as ServerKey,
-      ),
-    ).toBe("https://example.com" as ServerKey)
+    expect(String(getWorkspaceTerminalCacheKey("/repo", "ssh:debian" as ServerScope))).toBe(
+      "ssh:debian\u0000/repo\u0000__workspace__",
+    )
  })
 })

@@ -4,9 +4,10 @@ import { batch, createEffect, createMemo, createRoot, on, onCleanup } from "soli
 import { useParams } from "@solidjs/router"
 import { useSDK } from "./sdk"
 import type { Platform } from "./platform"
-import { ServerConnection, useServer } from "./server"
+import { useServer } from "./server"
 import { defaultTitle, titleNumber } from "./terminal-title"
 import { Persist, persisted, removePersisted } from "@/utils/persist"
+import { ScopedKey, ServerScope, type ServerScope as ServerScopeValue } from "@/utils/server-scope"

 export type LocalPTY = {
  id: string
@@ -83,29 +84,8 @@ export function migrateTerminalState(value: unknown) {
  }
 }

-export function getWorkspaceTerminalCacheKey(dir: string, scope?: string) {
-  if (scope) return `${scope}:${dir}:${WORKSPACE_KEY}`
-  return `${dir}:${WORKSPACE_KEY}`
-}
-
-export function getTerminalServerScope(conn: ServerConnection.Any | undefined, key: ServerConnection.Key) {
-  if (!conn) return
-  if (conn.type === "sidecar" && conn.variant === "base") return
-  if (conn.type === "http") {
-    try {
-      const url = new URL(conn.http.url)
-      if (
-        url.hostname === "localhost" ||
-        url.hostname === "127.0.0.1" ||
-        url.hostname === "::1" ||
-        url.hostname === "[::1]"
-      )
-        return
-    } catch {
-      return key
-    }
-  }
-  return key
+export function getWorkspaceTerminalCacheKey(dir: string, scope: ServerScopeValue = ServerScope.local) {
+  return ScopedKey.from(scope, dir, WORKSPACE_KEY)
 }

 export function getLegacyTerminalStorageKeys(dir: string, legacySessionID?: string) {
@@ -132,16 +112,25 @@ const trimTerminal = (pty: LocalPTY) => {
  }
 }

-export function clearWorkspaceTerminals(dir: string, sessionIDs?: string[], platform?: Platform, scope?: string) {
+function terminalPersistTarget(scope: ServerScopeValue, dir: string, legacy?: string[]) {
+  return Persist.serverWorkspace(scope, dir, "terminal", legacy)
+}
+
+export function clearWorkspaceTerminals(
+  dir: string,
+  sessionIDs?: string[],
+  platform?: Platform,
+  scope: ServerScopeValue = ServerScope.local,
+) {
  const key = getWorkspaceTerminalCacheKey(dir, scope)
  for (const cache of caches) {
    const entry = cache.get(key)
    entry?.value.clear()
  }

-  void removePersisted(Persist.workspace(dir, scope ? `terminal:${scope}` : "terminal"), platform)
+  void removePersisted(terminalPersistTarget(scope, dir), platform)

-  if (scope) return
+  if (scope !== ServerScope.local) return
  const legacy = new Set(getLegacyTerminalStorageKeys(dir))
  for (const id of sessionIDs ?? []) {
    for (const key of getLegacyTerminalStorageKeys(dir, id)) {
@@ -156,14 +145,14 @@ export function clearWorkspaceTerminals(dir: string, sessionIDs?: string[], plat
 function createWorkspaceTerminalSession(
  sdk: ReturnType<typeof useSDK>,
  dir: string,
+  scope: ServerScopeValue,
  legacySessionID?: string,
-  scope?: string,
 ) {
-  const legacy = scope ? [] : getLegacyTerminalStorageKeys(dir, legacySessionID)
+  const legacy = scope === ServerScope.local ? getLegacyTerminalStorageKeys(dir, legacySessionID) : []

  const [store, setStore, _, ready] = persisted(
    {
-      ...Persist.workspace(dir, scope ? `terminal:${scope}` : "terminal", legacy),
+      ...terminalPersistTarget(scope, dir, legacy),
      migrate: migrateTerminalState,
    },
    createStore<{
@@ -388,9 +377,7 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont
    const server = useServer()
    const params = useParams()
    const cache = new Map<string, TerminalCacheEntry>()
-    const scope = createMemo(() => {
-      return getTerminalServerScope(server.current, server.key)
-    })
+    const scope = server.scope()

    caches.add(cache)
    onCleanup(() => caches.delete(cache))
@@ -414,7 +401,7 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont
      }
    }

-    const loadWorkspace = (dir: string, legacySessionID: string | undefined, serverScope: string | undefined) => {
+    const loadWorkspace = (dir: string, legacySessionID: string | undefined, serverScope: ServerScopeValue) => {
      // Terminals are workspace-scoped so tabs persist while switching sessions in the same directory.
      const key = getWorkspaceTerminalCacheKey(dir, serverScope)
      const existing = cache.get(key)
@@ -425,7 +412,7 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont
      }

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

@@ -434,11 +421,11 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont
      return entry.value
    }

-    const workspace = createMemo(() => loadWorkspace(params.dir!, params.id, scope()))
+    const workspace = createMemo(() => loadWorkspace(params.dir!, params.id, scope))

    createEffect(
      on(
-        () => ({ dir: params.dir, id: params.id, scope: scope() }),
+        () => ({ dir: params.dir, id: params.id, scope }),
        (next, prev) => {
          if (!prev?.dir) return
          if (next.dir === prev.dir && next.id === prev.id && next.scope === prev.scope) return
@@ -170,6 +170,7 @@ if (root instanceof HTMLElement) {
        <AppBaseProviders>
          <AppInterface
            defaultServer={ServerConnection.Key.make(getDefaultUrl())}
+            canonicalLocalServer={ServerConnection.key(server)}
            servers={[server]}
            disableHealthCheck
          />
@@ -349,6 +349,59 @@ export const dict = {
  "dialog.server.menu.delete": "Delete",
  "dialog.server.current": "Current Server",
  "dialog.server.status.default": "Default",
+  "wsl.server.add": "Add WSL server",
+  "wsl.server.addShort": "Add WSL",
+  "wsl.server.label": "WSL",
+  "wsl.server.menu.label": "WSL server",
+  "wsl.server.retryStart": "Retry start",
+  "wsl.server.updating": "Updating...",
+  "wsl.onboarding.step.distro": "Choose distro",
+  "wsl.onboarding.step.opencode": "OpenCode",
+  "wsl.onboarding.checkingRuntime": "Checking WSL...",
+  "wsl.onboarding.restartRequired": "Windows needs a restart to finish installing WSL.",
+  "wsl.onboarding.ready": "WSL is ready.",
+  "wsl.onboarding.required": "WSL is required to continue.",
+  "wsl.onboarding.checkingDistros": "Checking distros...",
+  "wsl.onboarding.installingDistro": "Installing {{distro}}...",
+  "wsl.onboarding.checkingDistro": "Checking {{distro}}...",
+  "wsl.onboarding.listingDistros": "Listing distros...",
+  "wsl.onboarding.distroReady": "{{distro}} is ready.",
+  "wsl.onboarding.distroNotInstalled": "{{distro}} is not installed yet.",
+  "wsl.onboarding.openDistroOnce": "Open {{distro}} once to finish setup.",
+  "wsl.onboarding.finishingDistro": "Finishing setup for {{distro}}.",
+  "wsl.onboarding.pickDistro": "Pick a distro or install one below.",
+  "wsl.onboarding.checkingOpencode": "Checking OpenCode...",
+  "wsl.onboarding.checkingOpencodeIn": "Checking OpenCode in {{distro}}...",
+  "wsl.onboarding.updatingOpencode": "Updating OpenCode...",
+  "wsl.onboarding.updatingOpencodeIn": "Updating OpenCode in {{distro}}...",
+  "wsl.onboarding.updateOpencodeIn": "Update OpenCode in {{distro}}.",
+  "wsl.onboarding.updateOpencode": "Update OpenCode",
+  "wsl.onboarding.opencodeReadyIn": "OpenCode is ready in {{distro}}.",
+  "wsl.onboarding.opencodeReady": "OpenCode is ready.",
+  "wsl.onboarding.installOpencodeIn": "Install OpenCode in {{distro}}.",
+  "wsl.onboarding.installOpencode": "Install OpenCode",
+  "wsl.onboarding.chooseDistroFirst": "Choose a distro first.",
+  "wsl.onboarding.loadFailed": "Failed to load WSL state.",
+  "wsl.onboarding.loading": "Loading...",
+  "wsl.onboarding.installWsl": "Install WSL",
+  "wsl.onboarding.windowsRestartRequired": "Restart Windows to finish installing WSL, then reopen OpenCode.",
+  "wsl.onboarding.next": "Next",
+  "wsl.onboarding.refresh": "Refresh",
+  "wsl.onboarding.allDistrosAdded": "All installed distros are already added.",
+  "wsl.onboarding.noDistros": "No distros detected yet.",
+  "wsl.onboarding.install": "Install",
+  "wsl.onboarding.installing": "Installing...",
+  "wsl.onboarding.installDistro": "Install distro",
+  "wsl.onboarding.wsl2Required": "WSL 2 is required.",
+  "wsl.onboarding.toolsRequired": "This distro needs bash and curl.",
+  "wsl.onboarding.openTerminal": "Open terminal",
+  "wsl.onboarding.path": "Path: {{path}}",
+  "wsl.onboarding.notFound": "not found",
+  "wsl.onboarding.version": "Version: {{version}}",
+  "wsl.onboarding.unknown": "unknown",
+  "wsl.onboarding.desktopVersion": "desktop {{version}}",
+  "wsl.onboarding.versionMismatch": "Installed version does not match the desktop app version.",
+  "wsl.onboarding.adding": "Adding...",
  "server.row.noUsername": "no username",

  "dialog.project.edit.title": "Edit project",
@@ -467,6 +520,7 @@ export const dict = {

  "error.page.title": "Something went wrong",
  "error.page.description": "An error occurred while loading the application.",
+  "error.page.description.localServerStartup": "An error occurred while starting the local server.",
  "error.page.details.label": "Error Details",
  "error.page.action.restart": "Restart",
  "error.page.action.report": "Report Error",
@@ -771,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",
@@ -812,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": "Розгортати частини інструменту оболонки",
@@ -2,6 +2,22 @@ export { AppBaseProviders, AppInterface } from "./app"
 export { ACCEPTED_FILE_EXTENSIONS, ACCEPTED_FILE_TYPES, filePickerFilters } from "./constants/file-picker"
 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,
+  type WslJob,
+  type WslOnlineDistro,
+  type WslOpencodeCheck,
+  type WslRuntimeCheck,
+  type WslServerConfig,
+  type WslServerItem,
+  type WslServerRuntime,
+  type WslServersEvent,
+  type WslServersPlatform,
+  type WslServersState,
+} from "./wsl/types"
 export { ServerConnection } from "./context/server"
 export { handleNotificationClick } from "./utils/notification-click"
@@ -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,6 +18,8 @@ function DirectoryDataProvider(props: ParentProps<{ directory: string }>) {
  const slug = createMemo(() => base64Encode(props.directory))

  createEffect(() => {
+    // 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)
@@ -26,7 +28,7 @@ function DirectoryDataProvider(props: ParentProps<{ directory: string }>) {

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

  return (
@@ -0,0 +1,17 @@
+import { describe, expect, test } from "bun:test"
+import { errorDescriptionKey } from "./error-description"
+
+describe("error description", () => {
+  test("describes local server startup errors", () => {
+    expect(errorDescriptionKey(Object.assign(new Error("migration failed"), { localServerStartup: true }))).toBe(
+      "error.page.description.localServerStartup",
+    )
+  })
+
+  test("uses the generic description for other errors", () => {
+    expect(errorDescriptionKey(new Error("unknown"))).toBe("error.page.description")
+    expect(errorDescriptionKey(Object.assign(new Error("unknown"), { localServerStartup: false }))).toBe(
+      "error.page.description",
+    )
+  })
+})
@@ -0,0 +1,11 @@
+export function errorDescriptionKey(error: unknown) {
+  if (
+    typeof error === "object" &&
+    error !== null &&
+    "localServerStartup" in error &&
+    error.localServerStartup === true
+  ) {
+    return "error.page.description.localServerStartup" as const
+  }
+  return "error.page.description" as const
+}
@@ -7,6 +7,7 @@ import { createStore } from "solid-js/store"
 import { usePlatform } from "@/context/platform"
 import { useLanguage } from "@/context/language"
 import { Icon } from "@opencode-ai/ui/icon"
+import { errorDescriptionKey } from "./error-description"

 export type InitError = {
  name: string
@@ -224,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,
  })

@@ -246,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
@@ -289,7 +281,7 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
        <Logo class="w-58.5 opacity-12 shrink-0" />
        <div class="flex flex-col items-center gap-2 text-center">
          <h1 class="text-lg font-medium text-text-strong">{language.t("error.page.title")}</h1>
-          <p class="text-sm text-text-weak">{language.t("error.page.description")}</p>
+          <p class="text-sm text-text-weak">{language.t(errorDescriptionKey(props.error))}</p>
        </div>
        <TextField
          value={formattedError()}
@@ -326,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>
@@ -1,17 +1,17 @@
 import type { Session } from "@opencode-ai/sdk/v2/client"
-import { createEffect, createMemo, For, Match, on, onCleanup, onMount, Show, Switch } from "solid-js"
+import { batch, createEffect, createMemo, For, Match, on, onCleanup, onMount, Show, Switch } from "solid-js"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { createStore } from "solid-js/store"
 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"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
-import { TabStateIndicator } from "@opencode-ai/ui/v2/tab-state-indicator"
 import { getProjectAvatarVariant, useLayout, type LocalProject } from "@/context/layout"
 import { useNavigate } from "@solidjs/router"
 import { base64Encode } from "@opencode-ai/core/util/encode"
@@ -19,30 +19,42 @@ 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 { DialogSelectServer } from "@/components/dialog-select-server"
+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 { useLanguage } from "@/context/language"
 import { useNotification } from "@/context/notification"
-import { usePermission } from "@/context/permission"
-import { displayName, getProjectAvatarSource, projectForSession, sortedRootSessions } from "@/pages/layout/helpers"
+import {
+  closeHomeProject,
+  displayName,
+  getProjectAvatarSource,
+  homeProjectDirectories,
+  homeProjectNavigation,
+  type HomeProjectSelection,
+  projectForSession,
+  sortedRootSessions,
+  toggleHomeProjectSelection,
+} from "@/pages/layout/helpers"
+import { useSessionTabAvatarState } from "@/pages/layout/project-avatar-state"
 import { sessionTitle } from "@/utils/session-title"
 import { pathKey } from "@/utils/path-key"
-import { messageAgentColor } from "@/utils/agent"
-import { sessionPermissionRequest } from "@/pages/session/composer/session-request-tree"
 import { useGlobal } from "@/context/global"
 import { useCommand } from "@/context/command"
 import { useSettings } from "@/context/settings"
+import { ServerRowMenu } from "@/components/server/server-row-menu"
 import { ServerHealthIndicator } from "@/components/server/server-row"
+import { type ServerHealth } from "@/utils/server-health"

-const HOME_SESSION_LIMIT = 15
+const HOME_SESSION_LIMIT = 64
 const HOME_ROW_LAYOUT =
  "flex min-w-0 w-full shrink-0 cursor-default items-center rounded-[6px] bg-transparent text-left transition-[background-color,color,box-shadow] duration-[120ms] ease-in-out focus-visible:outline-none"
 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 = {
@@ -65,8 +77,10 @@ const HOME_SEARCH_RESULT_TITLE =
 const HOME_SEARCH_RESULT_META =
  "min-w-0 flex-[1_1_auto] overflow-hidden text-ellipsis whitespace-nowrap text-[13px] leading-4 tracking-[-0.04px] text-v2-text-text-muted [font-weight:440]"

+let pendingHomeNavigation: { server: ServerConnection.Key; href: string } | undefined
+
 function buildHomeSessionRecords(input: {
-  sync: ReturnType<typeof useServerSync>
+  sync: Pick<ReturnType<typeof useServerSync>, "child">
  projectDirectories: () => string[]
  projects: () => LocalProject[]
  projectByID: () => Map<string, LocalProject>
@@ -112,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()
@@ -122,12 +137,27 @@ function HomeDesign() {
  let focusSessionSearch: (() => void) | undefined
  const [state, setState] = createStore({
    search: "",
-    project: undefined as string | undefined,
+    selection: { server: server.key } as HomeProjectSelection,
    searchFocused: false,
  })

-  const projects = createMemo(() => layout.projects.list())
-  const selectedProject = createMemo(() => projects().find((project) => project.worktree === state.project))
+  const focusedServer = createMemo(
+    () => global.servers.list().find((conn) => ServerConnection.key(conn) === state.selection.server) ?? server.current,
+  )
+  const focusedServerCtx = createMemo(() => {
+    const conn = focusedServer()
+    if (!conn) return
+    return global.createServerCtx(conn)
+  })
+  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(
+    () =>
+      selectedProject() ??
+      projects().find((project) => project.worktree === focusedServerCtx()?.projects.last()) ??
+      projects()[0],
+  )
  const directories = (project: LocalProject) => [project.worktree, ...(project.sandboxes ?? [])]
  const projectDirectories = createMemo(() => {
    const project = selectedProject()
@@ -136,9 +166,13 @@ function HomeDesign() {
  })
  const search = createMemo(() => state.search.trim())
  const sessionLoad = useQuery(() => ({
-    queryKey: ["home", "sessions", ...projectDirectories()] as const,
+    queryKey: ["home", "sessions", state.selection.server, ...projectDirectories()] as const,
    queryFn: async () => {
-      await Promise.all(projectDirectories().map((directory) => sync.project.loadSessions(directory)))
+      await Promise.all(
+        projectDirectories().map((directory) =>
+          focusedSync().project.loadSessions(directory, { limit: HOME_SESSION_LIMIT }),
+        ),
+      )
      return null
    },
  }))
@@ -148,7 +182,7 @@ function HomeDesign() {
  )
  const allRecords = createMemo(() =>
    buildHomeSessionRecords({
-      sync,
+      sync: focusedSync(),
      projectDirectories,
      projects,
      projectByID,
@@ -163,6 +197,13 @@ function HomeDesign() {
  const searchOpen = createMemo(() => state.searchFocused && search().length > 0)
  const groups = createMemo(() => groupSessions(records(), language))

+  function setSelection(next: HomeProjectSelection) {
+    batch(() => {
+      if (state.selection.server !== next.server) setState("selection", "server", next.server)
+      if (state.selection.directory !== next.directory) setState("selection", "directory", next.directory)
+    })
+  }
+
  function closeSearch() {
    setState("search", "")
    setState("searchFocused", false)
@@ -183,47 +224,82 @@ function HomeDesign() {
    },
  ])

-  function selectProject(directory: string) {
-    if (!projects().some((project) => project.worktree === directory)) return
-    setState("project", state.project === directory ? undefined : directory)
+  createEffect(() => {
+    const list = global.servers.list()
+    if (list.some((conn) => ServerConnection.key(conn) === state.selection.server)) return
+    const conn = list.find((conn) => ServerConnection.key(conn) === server.key) ?? list[0]
+    if (conn) setSelection({ server: ServerConnection.key(conn) })
+  })
+
+  createEffect(() => {
+    const pending = pendingHomeNavigation
+    if (!pending || pending.server !== server.key) return
+    pendingHomeNavigation = undefined
+    navigate(pending.href)
+  })
+
+  function focusServer(conn: ServerConnection.Any) {
+    setSelection({ server: ServerConnection.key(conn) })
  }

-  function addProject(conn: ServerConnection.Any, directory: string) {
-    const server = global.createServerCtx(conn)
-    server.projects.open(directory)
-    server.projects.touch(directory)
-    setState("project", directory)
+  function selectProject(conn: ServerConnection.Any, directory: string) {
+    const key = ServerConnection.key(conn)
+    if (
+      !global
+        .createServerCtx(conn)
+        .projects.list()
+        .some((project) => project.worktree === directory)
+    )
+      return
+    setSelection(toggleHomeProjectSelection(state.selection, key, directory))
+  }
+
+  function addProjects(conn: ServerConnection.Any, directories: string[]) {
+    const directory = directories[0]
+    if (!directory) return
+    const ctx = global.createServerCtx(conn)
+    directories.forEach(ctx.projects.open)
+    ctx.projects.touch(directory)
+    setSelection({ server: ServerConnection.key(conn), directory })
  }

  function openNewSession() {
-    const project = selectedProject()
-    if (!project) {
-      const conn = server.current
-      if (conn) void chooseProject(conn)
+    const conn = focusedServer()
+    const project = newSessionProject()
+    if (!conn || !project) return
+    openProjectNewSession(conn, project.worktree)
+  }
+
+  function navigateOnServer(conn: ServerConnection.Any, href: string) {
+    const next = homeProjectNavigation(server.key, ServerConnection.key(conn), href)
+    if (!next.server) {
+      navigate(next.href)
      return
    }
-    layout.projects.open(project.worktree)
-    server.projects.touch(project.worktree)
-    navigate(`/${base64Encode(project.worktree)}/session`)
+    pendingHomeNavigation = next
+    server.setActive(next.server)
  }

-  function openProjectNewSession(directory: string) {
-    layout.projects.open(directory)
-    server.projects.touch(directory)
-    navigate(`/${base64Encode(directory)}/session`)
+  function openProjectNewSession(conn: ServerConnection.Any, directory: string) {
+    const ctx = global.createServerCtx(conn)
+    ctx.projects.open(directory)
+    ctx.projects.touch(directory)
+    navigateOnServer(conn, `/${base64Encode(directory)}/session`)
  }

-  function editProject(project: LocalProject) {
+  function editProject(conn: ServerConnection.Any, project: LocalProject) {
    void import("@/components/dialog-edit-project").then((x) => {
-      dialog.show(() => <x.DialogEditProject project={project} />)
+      dialog.show(() => <x.DialogEditProject server={conn} project={project} />)
    })
  }

-  function unseenCount(project: LocalProject) {
+  function unseenCount(conn: ServerConnection.Any, project: LocalProject) {
+    if (ServerConnection.key(conn) !== server.key) return 0
    return directories(project).reduce((total, directory) => total + notification.project.unseenCount(directory), 0)
  }

-  function clearNotifications(project: LocalProject) {
+  function clearNotifications(conn: ServerConnection.Any, project: LocalProject) {
+    if (ServerConnection.key(conn) !== server.key) return
    directories(project)
      .filter((directory) => notification.project.unseenCount(directory) > 0)
      .forEach((directory) => notification.project.markViewed(directory))
@@ -231,36 +307,28 @@ function HomeDesign() {

  function openSession(session: Session) {
    const project = projectForSession(session, projects(), projectByID())
-    layout.projects.open(project?.worktree ?? session.directory)
-    server.projects.touch(project?.worktree ?? session.directory)
-    navigate(`/${base64Encode(session.directory)}/session/${session.id}`)
+    const conn = focusedServer()
+    if (!conn) return
+    const directory = project?.worktree ?? session.directory
+    const ctx = global.createServerCtx(conn)
+    ctx.projects.open(directory)
+    ctx.projects.touch(directory)
+    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) {
-      if (Array.isArray(result)) {
-        result.forEach((r) => addProject(conn, r))
-        if (result[0]) setState("project", result[0])
-        return
-      }
-      if (result) addProject(conn, result)
+      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() {
@@ -270,18 +338,24 @@ function HomeDesign() {
  }

  return (
-    <div class="rounded-[10px] shadow-[var(--v2-elevation-raised)] m-2 bg-background-base self-stretch flex-1">
+    <div class="rounded-[10px] shadow-[var(--v2-elevation-raised)] m-2 min-h-0 lg:overflow-hidden bg-v2-background-bg-base self-stretch flex-1">
      <div class="mx-auto grid w-full h-full max-w-[1080px] gap-8 px-6 pb-16 lg:grid-cols-[280px_minmax(0,720px)]">
        <HomeProjectColumn
          projects={projects()}
-          selected={selectedProject()?.worktree}
+          selected={state.selection}
+          focusServer={focusServer}
          selectProject={selectProject}
          openNewSession={openProjectNewSession}
          chooseProject={(conn) => void chooseProject(conn)}
          editProject={editProject}
-          closeProject={(directory) => {
-            layout.projects.close(directory)
-            if (state.project === directory) setState("project", undefined)
+          closeProject={(conn, directory) => {
+            const next = closeHomeProject(
+              state.selection,
+              ServerConnection.key(conn),
+              global.createServerCtx(conn).projects,
+              directory,
+            )
+            if (next) setSelection(next)
          }}
          clearNotifications={clearNotifications}
          unseenCount={unseenCount}
@@ -290,13 +364,18 @@ function HomeDesign() {
          language={language}
        />

-        <section class="min-w-0 flex-1 flex flex-col pt-12" aria-label={language.t("sidebar.project.recentSessions")}>
+        <section
+          class="min-h-0 min-w-0 flex-1 flex flex-col pt-12"
+          aria-label={language.t("sidebar.project.recentSessions")}
+        >
          <HomeSessionSearch
            value={state.search}
            placeholder={language.t("home.sessions.search.placeholder")}
            open={searchOpen()}
            loading={sessionLoad.isLoading}
            results={searchResults()}
+            server={state.selection.server}
+            activeServer={state.selection.server === server.key}
            noResultsLabel={language.t("home.sessions.search.noResults", { query: search() })}
            bindFocus={(focus) => {
              focusSessionSearch = focus
@@ -306,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}
@@ -316,7 +395,10 @@ function HomeDesign() {
                  when={groups().length > 0}
                  fallback={
                    <div class="flex min-w-0 flex-col gap-4">
-                      <HomeSessionGroupHeader title={language.t("home.sessions.empty")} onNewSession={openNewSession} />
+                      <HomeSessionGroupHeader
+                        title={language.t("home.sessions.empty")}
+                        onNewSession={newSessionProject() ? openNewSession : undefined}
+                      />
                    </div>
                  }
                >
@@ -325,11 +407,18 @@ function HomeDesign() {
                      <div class="flex min-w-0 flex-col gap-4">
                        <HomeSessionGroupHeader
                          title={group.title}
-                          onNewSession={index() === 0 ? openNewSession : undefined}
+                          onNewSession={index() === 0 && newSessionProject() ? openNewSession : undefined}
                        />
                        <div class="flex min-w-0 flex-col gap-px">
                          <For each={group.sessions}>
-                            {(record) => <HomeSessionRow record={record} openSession={openSession} />}
+                            {(record) => (
+                              <HomeSessionRow
+                                record={record}
+                                server={state.selection.server}
+                                activeServer={state.selection.server === server.key}
+                                openSession={openSession}
+                              />
+                            )}
                          </For>
                        </div>
                      </div>
@@ -338,7 +427,7 @@ function HomeDesign() {
                </Show>
              </Show>
            </div>
-          </div>
+          </ScrollView>
        </section>
      </div>
    </div>
@@ -347,19 +436,22 @@ function HomeDesign() {

 function HomeProjectColumn(props: {
  projects: LocalProject[]
-  selected?: string
-  selectProject: (directory: string) => void
-  openNewSession: (directory: string) => void
+  selected: HomeProjectSelection
+  focusServer: (server: ServerConnection.Any) => void
+  selectProject: (server: ServerConnection.Any, directory: string) => void
+  openNewSession: (server: ServerConnection.Any, directory: string) => void
  chooseProject: (server: ServerConnection.Any) => void
-  editProject: (project: LocalProject) => void
-  closeProject: (directory: string) => void
-  clearNotifications: (project: LocalProject) => void
-  unseenCount: (project: LocalProject) => number
+  editProject: (server: ServerConnection.Any, project: LocalProject) => void
+  closeProject: (server: ServerConnection.Any, directory: string) => void
+  clearNotifications: (server: ServerConnection.Any, project: LocalProject) => void
+  unseenCount: (server: ServerConnection.Any, project: LocalProject) => number
  openSettings: () => void
  openHelp: () => void
  language: ReturnType<typeof useLanguage>
 }) {
  const global = useGlobal()
+  const dialog = useDialog()
+  const controller = useServerManagementController({ navigateOnAdd: false })
  return (
    <aside class="flex min-w-0 flex-col lg:pt-[52px] mt-14 gap-4" aria-label={props.language.t("home.projects")}>
      <div class="flex h-7 min-w-0 items-center justify-between pl-1.5">
@@ -378,48 +470,36 @@ function HomeProjectColumn(props: {
      </div>
      <Show
        when={global.servers.list().length > 1}
-        fallback={<HomeProjectList {...props} chooseProject={() => props.chooseProject(global.servers.list()[0]!)} />}
+        fallback={<HomeProjectList {...props} server={global.servers.list()[0]!} />}
      >
        <For each={global.servers.list()}>
          {(item) => {
            const key = ServerConnection.key(item)
            const healthy = () => !!global.servers.health[key]?.healthy
-            const [state, setState] = createStore({ open: true })
            const serverCtx = global.createServerCtx(item)
            return (
              <div class="flex max-h-[min(572px,calc(100vh_-_300px))] min-w-0 flex-col gap-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-                <button
-                  type="button"
-                  class={`${HOME_PROJECT_NAV_ROW} disabled:opacity-60`}
-                  disabled={!healthy()}
-                  onClick={() => setState("open", !state.open)}
-                >
-                  <div class="flex size-4 shrink-0 items-center justify-center">
-                    <ServerHealthIndicator health={global.servers.health[key]} />
-                  </div>
-                  <span class={HOME_PROJECT_NAV_LABEL}>{item.displayName ?? new URL(item.http.url).host}</span>
-                  <Show when={healthy()}>
-                    <IconV2
-                      name="outline-chevron-down"
-                      class="shrink-0 text-v2-icon-icon-muted data-[open=false]:-rotate-90"
-                      data-open={state.open}
-                    />
-                  </Show>
-                </button>
-                <Show when={healthy() && state.open}>
+                <HomeServerRow
+                  server={item}
+                  selected={props.selected.server === key && !props.selected.directory}
+                  healthy={healthy()}
+                  health={global.servers.health[key]}
+                  controller={controller}
+                  focusServer={props.focusServer}
+                  chooseProject={props.chooseProject}
+                  openEdit={(server) => dialog.show(() => <DialogServerV2 mode="edit" server={server} />)}
+                  language={props.language}
+                />
+                <Show when={healthy()}>
                  <div class="mx-3 h-px bg-v2-border-border-base" />
-                  <HomeProjectList
-                    {...props}
-                    projects={serverCtx.projects.list()}
-                    chooseProject={() => props.chooseProject(item)}
-                  />
+                  <HomeProjectList {...props} server={item} projects={serverCtx.projects.list()} />
                </Show>
              </div>
            )
          }}
        </For>
      </Show>
-      <div class="flex min-w-0 flex-col gap-1">
+      <div class="mt-4 flex min-w-0 flex-col gap-1">
        <button
          type="button"
          class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
@@ -441,62 +521,112 @@ function HomeProjectColumn(props: {
  )
 }

+function HomeServerRow(props: {
+  server: ServerConnection.Any
+  selected: boolean
+  healthy: boolean
+  health: ServerHealth | undefined
+  controller: ReturnType<typeof useServerManagementController>
+  focusServer: (server: ServerConnection.Any) => void
+  chooseProject: (server: ServerConnection.Any) => void
+  openEdit: (server: ServerConnection.Http) => void
+  language: ReturnType<typeof useLanguage>
+}) {
+  const [state, setState] = createStore({ menuOpen: false })
+  return (
+    <div class="group/server relative flex h-7 min-w-0 items-center rounded-[6px]">
+      <button
+        type="button"
+        class={`${HOME_PROJECT_NAV_ROW} pr-16 disabled:opacity-60`}
+        data-selected={props.selected ? "" : undefined}
+        disabled={!props.healthy}
+        onClick={() => props.focusServer(props.server)}
+      >
+        <div class="flex size-4 shrink-0 items-center justify-center">
+          <ServerHealthIndicator health={props.health} />
+        </div>
+        <span class="flex min-w-0 items-center gap-1">
+          <span class={HOME_PROJECT_NAV_LABEL}>{props.server.displayName ?? new URL(props.server.http.url).host}</span>
+          <Show when={props.server.label}>
+            {(label) => (
+              <span class="shrink-0 rounded-[3px] border border-v2-border-border-base px-1 py-0.5 text-[9px] leading-none text-v2-text-text-muted">
+                {label()}
+              </span>
+            )}
+          </Show>
+        </span>
+      </button>
+      <div
+        class="absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-0.5 opacity-0 transition-opacity group-hover/server:opacity-100 focus-within:opacity-100 data-[menu=true]:opacity-100"
+        data-menu={state.menuOpen}
+      >
+        <ServerRowMenu
+          server={props.server}
+          controller={props.controller}
+          onEdit={props.openEdit}
+          open={state.menuOpen}
+          onOpenChange={(open) => setState("menuOpen", open)}
+        />
+        <IconButtonV2
+          data-action="home-add-project"
+          variant="ghost-muted"
+          size="small"
+          icon={<IconV2 name="folder-add-left" />}
+          aria-label={props.language.t("home.project.add")}
+          onClick={() => props.chooseProject(props.server)}
+        />
+      </div>
+    </div>
+  )
+}
+
 function HomeProjectList(props: {
+  server: ServerConnection.Any
  projects: LocalProject[]
-  selected?: string
-  selectProject: (directory: string) => void
-  openNewSession: (directory: string) => void
-  chooseProject: () => void
-  editProject: (project: LocalProject) => void
-  closeProject: (directory: string) => void
-  clearNotifications: (project: LocalProject) => void
-  unseenCount: (project: LocalProject) => number
+  selected: HomeProjectSelection
+  selectProject: (server: ServerConnection.Any, directory: string) => void
+  openNewSession: (server: ServerConnection.Any, directory: string) => void
+  editProject: (server: ServerConnection.Any, project: LocalProject) => void
+  closeProject: (server: ServerConnection.Any, directory: string) => void
+  clearNotifications: (server: ServerConnection.Any, project: LocalProject) => void
+  unseenCount: (server: ServerConnection.Any, project: LocalProject) => number
  language: ReturnType<typeof useLanguage>
 }) {
  return (
-    <Show
-      when={props.projects.length > 0}
-      fallback={
-        <button
-          type="button"
-          class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
-          onClick={props.chooseProject}
-        >
-          <IconV2 name="folder-add-left" size="small" />
-          <span>{props.language.t("home.project.add")}</span>
-        </button>
-      }
-    >
-      <div class="flex min-w-0 flex-col gap-1">
-        <For each={props.projects}>
-          {(project) => (
-            <HomeProjectRow
-              project={project}
-              selected={props.selected === project.worktree}
-              unseenCount={props.unseenCount(project)}
-              selectProject={props.selectProject}
-              openNewSession={props.openNewSession}
-              editProject={props.editProject}
-              closeProject={props.closeProject}
-              clearNotifications={props.clearNotifications}
-              language={props.language}
-            />
-          )}
-        </For>
-      </div>
-    </Show>
+    <div class="flex min-w-0 flex-col gap-1">
+      <For each={props.projects}>
+        {(project) => (
+          <HomeProjectRow
+            project={project}
+            server={props.server}
+            selected={
+              props.selected.server === ServerConnection.key(props.server) &&
+              props.selected.directory === project.worktree
+            }
+            unseenCount={props.unseenCount(props.server, project)}
+            selectProject={props.selectProject}
+            openNewSession={props.openNewSession}
+            editProject={props.editProject}
+            closeProject={props.closeProject}
+            clearNotifications={props.clearNotifications}
+            language={props.language}
+          />
+        )}
+      </For>
+    </div>
  )
 }

 function HomeProjectRow(props: {
  project: LocalProject
+  server: ServerConnection.Any
  selected: boolean
  unseenCount: number
-  selectProject: (directory: string) => void
-  openNewSession: (directory: string) => void
-  editProject: (project: LocalProject) => void
-  closeProject: (directory: string) => void
-  clearNotifications: (project: LocalProject) => void
+  selectProject: (server: ServerConnection.Any, directory: string) => void
+  openNewSession: (server: ServerConnection.Any, directory: string) => void
+  editProject: (server: ServerConnection.Any, project: LocalProject) => void
+  closeProject: (server: ServerConnection.Any, directory: string) => void
+  clearNotifications: (server: ServerConnection.Any, project: LocalProject) => void
  language: ReturnType<typeof useLanguage>
 }) {
  const [state, setState] = createStore({ menuOpen: false })
@@ -508,7 +638,7 @@ function HomeProjectRow(props: {
        class={`${HOME_PROJECT_NAV_ROW} pr-16`}
        data-selected={props.selected ? "" : undefined}
        aria-current={props.selected ? "page" : undefined}
-        onClick={() => props.selectProject(props.project.worktree)}
+        onClick={() => props.selectProject(props.server, props.project.worktree)}
      >
        <HomeProjectAvatar project={props.project} />
        <span class={HOME_PROJECT_NAV_LABEL}>{displayName(props.project)}</span>
@@ -523,7 +653,7 @@ function HomeProjectRow(props: {
          size="small"
          icon={<IconV2 name="edit" />}
          aria-label={props.language.t("command.session.new")}
-          onClick={() => props.openNewSession(props.project.worktree)}
+          onClick={() => props.openNewSession(props.server, props.project.worktree)}
        />
        <MenuV2
          gutter={4}
@@ -542,17 +672,20 @@ function HomeProjectRow(props: {
          />
          <MenuV2.Portal>
            <MenuV2.Content>
-              <MenuV2.Item onSelect={() => props.openNewSession(props.project.worktree)}>
+              <MenuV2.Item onSelect={() => props.openNewSession(props.server, props.project.worktree)}>
                {props.language.t("command.session.new")}
              </MenuV2.Item>
-              <MenuV2.Item onSelect={() => props.editProject(props.project)}>
+              <MenuV2.Item onSelect={() => props.editProject(props.server, props.project)}>
                {props.language.t("common.edit")}
              </MenuV2.Item>
-              <MenuV2.Item disabled={props.unseenCount === 0} onSelect={() => props.clearNotifications(props.project)}>
+              <MenuV2.Item
+                disabled={props.unseenCount === 0}
+                onSelect={() => props.clearNotifications(props.server, props.project)}
+              >
                {props.language.t("sidebar.project.clearNotifications")}
              </MenuV2.Item>
              <MenuV2.Separator />
-              <MenuV2.Item onSelect={() => props.closeProject(props.project.worktree)}>
+              <MenuV2.Item onSelect={() => props.closeProject(props.server, props.project.worktree)}>
                {props.language.t("common.close")}
              </MenuV2.Item>
            </MenuV2.Content>
@@ -574,12 +707,51 @@ function HomeProjectAvatar(props: { project: LocalProject }) {
  )
 }

+function HomeSessionAvatar(props: { project: LocalProject; session: Session; activeServer: boolean }) {
+  const directory = () => props.session.directory
+  const sessionId = () => props.session.id
+  const state = useSessionTabAvatarState(directory, sessionId, () => props.activeServer)
+  return (
+    <ProjectAvatar
+      fallback={displayName(props.project)}
+      src={getProjectAvatarSource(props.project.id, props.project.icon)}
+      variant={getProjectAvatarVariant(props.project.icon?.color)}
+      unread={state.unread()}
+      loading={state.loading()}
+    />
+  )
+}
+
+function HomeSessionLeading(props: {
+  project: LocalProject
+  session: Session
+  server: ServerConnection.Key
+  activeServer: boolean
+}) {
+  const tabs = useTabs()
+  const hasOpenTab = createMemo(() => sessionHasOpenTab(tabs.store, props.server, props.session))
+  return (
+    <div class="relative shrink-0">
+      <Show when={hasOpenTab()}>
+        <span
+          aria-hidden="true"
+          class="pointer-events-none absolute top-1/2 h-[7px] w-[3px] -translate-y-1/2 rounded-[2px] bg-v2-background-bg-layer-04"
+          style={{ right: "calc(100% + 12px)" }}
+        />
+      </Show>
+      <HomeSessionAvatar project={props.project} session={props.session} activeServer={props.activeServer} />
+    </div>
+  )
+}
+
 function HomeSessionSearch(props: {
  value: string
  placeholder: string
  open: boolean
  loading: boolean
  results: HomeSessionRecord[]
+  server: ServerConnection.Key
+  activeServer: boolean
  noResultsLabel: string
  bindFocus: (focus: () => void) => void
  onInput: (value: string) => void
@@ -694,6 +866,8 @@ function HomeSessionSearch(props: {
                          {(record) => (
                            <HomeSessionSearchResultRow
                              record={record}
+                              server={props.server}
+                              activeServer={props.activeServer}
                              selected={store.active === homeSessionSearchKey(record)}
                              onHighlight={() => setStore("active", homeSessionSearchKey(record))}
                              onSelect={(session) => props.onSelect(session)}
@@ -711,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,
          }}
@@ -778,29 +952,13 @@ function HomeSessionSearch(props: {

 function HomeSessionSearchResultRow(props: {
  record: HomeSessionRecord
+  server: ServerConnection.Key
+  activeServer: boolean
  selected: boolean
  onHighlight: () => void
  onSelect: (session: Session) => void
 }) {
-  const globalSync = useServerSync()
-  const notification = useNotification()
-  const permission = usePermission()
-  const [sessionStore] = globalSync.child(props.record.session.directory, { bootstrap: false })
  const title = createMemo(() => sessionTitle(props.record.session.title) || props.record.session.id)
-  const unseenCount = createMemo(() => notification.session.unseenCount(props.record.session.id))
-  const hasError = createMemo(() => notification.session.unseenHasError(props.record.session.id))
-  const hasPermissions = createMemo(
-    () =>
-      !!sessionPermissionRequest(sessionStore.session, sessionStore.permission, props.record.session.id, (item) => {
-        return !permission.autoResponds(item, props.record.session.directory)
-      }),
-  )
-  const isWorking = createMemo(() => {
-    if (hasPermissions()) return false
-    return sessionStore.session_working(props.record.session.id)
-  })
-  const tint = createMemo(() => messageAgentColor(sessionStore.message[props.record.session.id], sessionStore.agent))
-  const showStatus = createMemo(() => isWorking() || hasPermissions() || hasError() || unseenCount() > 0)

  const key = () => homeSessionSearchKey(props.record)

@@ -819,34 +977,12 @@ function HomeSessionSearchResultRow(props: {
      onMouseEnter={() => props.onHighlight()}
      onClick={() => props.onSelect(props.record.session)}
    >
-      <Show
-        when={showStatus()}
-        fallback={
-          <div class="flex size-4 shrink-0 items-center justify-center">
-            <TabStateIndicator />
-          </div>
-        }
-      >
-        <div
-          class="flex size-4 shrink-0 items-center justify-center"
-          style={{ color: tint() ?? "var(--icon-interactive-base)" }}
-        >
-          <Switch>
-            <Match when={isWorking()}>
-              <Spinner class="size-[15px]" />
-            </Match>
-            <Match when={hasPermissions()}>
-              <div class="size-1.5 rounded-full bg-surface-warning-strong" />
-            </Match>
-            <Match when={hasError()}>
-              <div class="size-1.5 rounded-full bg-text-diff-delete-base" />
-            </Match>
-            <Match when={unseenCount() > 0}>
-              <div class="size-1.5 rounded-full bg-text-interactive-base" />
-            </Match>
-          </Switch>
-        </div>
-      </Show>
+      <HomeSessionLeading
+        project={props.record.project}
+        session={props.record.session}
+        server={props.server}
+        activeServer={props.activeServer}
+      />
      <div class="flex min-w-0 flex-1 items-center gap-1.5">
        <span
          class={`${HOME_SEARCH_RESULT_TITLE} ${props.record.projectName ? "max-w-[min(70%,480px)] flex-[0_1_auto]" : "flex-[1_1_auto]"}`}
@@ -884,26 +1020,13 @@ function HomeSessionGroupHeader(props: { title: string; onNewSession?: () => voi
  )
 }

-function HomeSessionRow(props: { record: HomeSessionRecord; openSession: (session: Session) => void }) {
-  const globalSync = useServerSync()
-  const notification = useNotification()
-  const permission = usePermission()
-  const [sessionStore] = globalSync.child(props.record.session.directory, { bootstrap: false })
+function HomeSessionRow(props: {
+  record: HomeSessionRecord
+  server: ServerConnection.Key
+  activeServer: boolean
+  openSession: (session: Session) => void
+}) {
  const title = createMemo(() => sessionTitle(props.record.session.title) || props.record.session.id)
-  const unseenCount = createMemo(() => notification.session.unseenCount(props.record.session.id))
-  const hasError = createMemo(() => notification.session.unseenHasError(props.record.session.id))
-  const hasPermissions = createMemo(
-    () =>
-      !!sessionPermissionRequest(sessionStore.session, sessionStore.permission, props.record.session.id, (item) => {
-        return !permission.autoResponds(item, props.record.session.directory)
-      }),
-  )
-  const isWorking = createMemo(() => {
-    if (hasPermissions()) return false
-    return sessionStore.session_working(props.record.session.id)
-  })
-  const tint = createMemo(() => messageAgentColor(sessionStore.message[props.record.session.id], sessionStore.agent))
-  const showStatus = createMemo(() => isWorking() || hasPermissions() || hasError() || unseenCount() > 0)

  return (
    <button
@@ -912,34 +1035,12 @@ function HomeSessionRow(props: { record: HomeSessionRecord; openSession: (sessio
      class={`${HOME_ROW} h-10 gap-2 px-6 py-3 pl-4`}
      onClick={() => props.openSession(props.record.session)}
    >
-      <Show
-        when={showStatus()}
-        fallback={
-          <div class="flex size-4 shrink-0 items-center justify-center">
-            <TabStateIndicator />
-          </div>
-        }
-      >
-        <div
-          class="flex size-4 shrink-0 items-center justify-center"
-          style={{ color: tint() ?? "var(--icon-interactive-base)" }}
-        >
-          <Switch>
-            <Match when={isWorking()}>
-              <Spinner class="size-[15px]" />
-            </Match>
-            <Match when={hasPermissions()}>
-              <div class="size-1.5 rounded-full bg-surface-warning-strong" />
-            </Match>
-            <Match when={hasError()}>
-              <div class="size-1.5 rounded-full bg-text-diff-delete-base" />
-            </Match>
-            <Match when={unseenCount() > 0}>
-              <div class="size-1.5 rounded-full bg-text-interactive-base" />
-            </Match>
-          </Switch>
-        </div>
-      </Show>
+      <HomeSessionLeading
+        project={props.record.project}
+        session={props.record.session}
+        server={props.server}
+        activeServer={props.activeServer}
+      />
      <span
        class={`min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-v2-text-text-base [font-weight:530] ${props.record.projectName ? "max-w-[min(70%,480px)] flex-[0_1_auto]" : "flex-[1_1_auto]"}`}
      >
@@ -995,6 +1096,7 @@ 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()
@@ -1022,7 +1124,7 @@ function LegacyHome() {
    navigate(`/${base64Encode(directory)}`)
  }

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

@@ -1036,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 (
@@ -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"
@@ -37,7 +36,7 @@ import { useProviders } from "@/hooks/use-providers"
 import { toaster } from "@opencode-ai/ui/toast"
 import { setV2Toast, showToast, ToastRegion } from "@/utils/toast"
 import { useServerSDK } from "@/context/server-sdk"
-import { clearWorkspaceTerminals, getTerminalServerScope } from "@/context/terminal"
+import { clearWorkspaceTerminals } from "@/context/terminal"
 import { dropSessionCaches, pickSessionCacheEvictions } from "@/context/global-sync/session-cache"
 import {
  clearSessionPrefetchInflight,
@@ -57,14 +56,17 @@ import { createAim } from "@/utils/aim"
 import { setNavigate } from "@/utils/notification-click"
 import { Worktree as WorktreeState } from "@/utils/worktree"
 import { setSessionHandoff } from "@/pages/session/handoff"
+import { SessionRouteKey, SessionStateKey } from "@/utils/server-scope"

 import { useDialog } from "@opencode-ai/ui/context/dialog"
 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 { useServer } from "@/context/server"
+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"
 import {
@@ -91,8 +93,9 @@ import { ProjectDragOverlay, SortableProject, type ProjectSidebarContext } from
 import { SidebarContent } from "./layout/sidebar-shell"

 export default function Layout(props: ParentProps) {
+  const serverSDK = useServerSDK()
  const [store, setStore, , ready] = persisted(
-    Persist.global("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,
@@ -112,11 +115,11 @@ export default function Layout(props: ParentProps) {
  let dialogDead = false

  const params = useParams()
-  const serverSDK = useServerSDK()
  const serverSync = useServerSync()
  const layout = useLayout()
  const layoutReady = createMemo(() => layout.ready())
  const platform = usePlatform()
+  const pickDirectory = useDirectoryPicker()
  const settings = useSettings()
  const server = useServer()
  const notification = useNotification()
@@ -166,32 +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 = () => {
-    if (!platform.updateAndRestart) return
-    setUpdate("installing", true)
-    void platform.updateAndRestart().catch(() => {
-      setUpdate("installing", false)
-    })
+    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,
  }

@@ -414,13 +400,17 @@ export default function Layout(props: ParentProps) {
      const unsub = serverSDK.event.listen((e) => {
        if (e.details?.type === "worktree.ready") {
          setBusy(e.name, false)
-          WorktreeState.ready(e.name)
+          WorktreeState.ready(serverSDK.scope, e.name)
          return
        }

        if (e.details?.type === "worktree.failed") {
          setBusy(e.name, false)
-          WorktreeState.failed(e.name, e.details.properties?.message ?? language.t("common.requestFailed"))
+          WorktreeState.failed(
+            serverSDK.scope,
+            e.name,
+            e.details.properties?.message ?? language.t("common.requestFailed"),
+          )
          return
        }

@@ -696,7 +686,7 @@ export default function Layout(props: ParentProps) {
    serverSDK.url

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

@@ -743,13 +733,14 @@ export default function Layout(props: ParentProps) {
    const [store, setStore] = serverSync.child(directory, { bootstrap: false })

    return runSessionPrefetch({
+      scope: serverSDK.scope,
      directory,
      sessionID,
      task: (rev) =>
        retry(() => serverSDK.client.session.messages({ directory, sessionID, limit: prefetchChunk }))
          .then((messages) => {
            if (prefetchToken.value !== token) return
-            if (!isSessionPrefetchCurrent(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)
@@ -764,7 +755,7 @@ export default function Layout(props: ParentProps) {
            }

            if (stale.length > 0) {
-              clearSessionPrefetch(directory, stale)
+              clearSessionPrefetch(serverSDK.scope, directory, stale)
              for (const id of stale) {
                serverSync.todo.set(id, undefined)
              }
@@ -776,7 +767,7 @@ export default function Layout(props: ParentProps) {
              sorted,
            )

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

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

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

              for (const message of items) {
                const currentParts = store.part[message.info.id] ?? []
@@ -833,7 +824,7 @@ export default function Layout(props: ParentProps) {

    const [store] = serverSync.child(directory, { bootstrap: false })
    const cached = untrack(() => {
-      const info = getSessionPrefetch(directory, session.id)
+      const info = getSessionPrefetch(serverSDK.scope, directory, session.id)
      return shouldSkipSessionPrefetch({
        message: store.message[session.id] !== undefined,
        info,
@@ -1384,7 +1375,9 @@ export default function Layout(props: ParentProps) {
      void openProject(link.directory, false)
      const slug = base64Encode(link.directory)
      if (link.prompt) {
-        setSessionHandoff(slug, { prompt: link.prompt })
+        setSessionHandoff(SessionStateKey.from(server.scope(), SessionRouteKey.fromLegacy(slug)), {
+          prompt: link.prompt,
+        })
      }
      const href = link.prompt ? `/${slug}/session?prompt=${encodeURIComponent(link.prompt)}` : `/${slug}/session`
      navigateWithSidebarReset(href)
@@ -1459,15 +1452,15 @@ export default function Layout(props: ParentProps) {
    layout.sidebar.toggleWorkspaces(project.worktree)
  }

-  const showEditProjectDialog = (project: LocalProject) => {
+  const showEditProjectDialog = (conn: ServerConnection.Any, project: LocalProject) => {
    const run = ++dialogRun
    void import("@/components/dialog-edit-project").then((x) => {
      if (dialogDead || dialogRun !== run) return
-      dialog.show(() => <x.DialogEditProject project={project} />)
+      dialog.show(() => <x.DialogEditProject server={conn} project={project} />)
    })
  }

-  async function chooseProject() {
+  function chooseProject() {
    const conn = server.current
    if (!conn) return
    function resolve(result: string | string[] | null) {
@@ -1481,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) => {
@@ -1579,7 +1562,7 @@ export default function Layout(props: ParentProps) {
      directory,
      sessions.map((s) => s.id),
      platform,
-      getTerminalServerScope(server.current, server.key),
+      serverSDK.scope,
    )
    await serverSDK.client.instance.dispose({ directory }).catch(() => undefined)

@@ -1893,7 +1876,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(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)]
@@ -1965,7 +1948,7 @@ export default function Layout(props: ParentProps) {
    const root = pathKey(local)

    setBusy(created.directory, true)
-    WorktreeState.pending(created.directory)
+    WorktreeState.pending(serverSDK.scope, created.directory)
    setStore("workspaceExpanded", key, true)
    if (key !== created.directory) {
      setStore("workspaceExpanded", created.directory, true)
@@ -2026,7 +2009,7 @@ export default function Layout(props: ParentProps) {
    navigateToProject,
    openSidebar: () => layout.sidebar.open(),
    closeProject,
-    showEditProjectDialog,
+    showEditProjectDialog: (proj) => showEditProjectDialog(server.current!, proj),
    toggleProjectWorkspaces,
    workspacesEnabled: (project) => project.vcs === "git" && layout.sidebar.workspaces(project.worktree)(),
    workspaceIds,
@@ -2173,7 +2156,7 @@ export default function Layout(props: ParentProps) {
                      <DropdownMenu.Content class="mt-1">
                        <DropdownMenu.Item
                          onSelect={() => {
-                            showEditProjectDialog(project)
+                            showEditProjectDialog(server.current!, project)
                          }}
                        >
                          <DropdownMenu.ItemLabel>{language.t("common.edit")}</DropdownMenu.ItemLabel>
@@ -2382,6 +2365,7 @@ export default function Layout(props: ParentProps) {
            </Show>
          </main>
          {import.meta.env.DEV && <DebugBar />}
+          <HelpButton />
          <ToastRegion v2={newDesign()} />
        </div>
      }
@@ -2535,6 +2519,7 @@ export default function Layout(props: ParentProps) {
          </div>
          {import.meta.env.DEV && <DebugBar />}
        </div>
+        <HelpButton />
        <ToastRegion v2={newDesign()} />
      </div>
    </Show>
@@ -9,13 +9,21 @@ import {
 import { type Session } from "@opencode-ai/sdk/v2/client"
 import {
  childSessionOnPath,
+  closeHomeProject,
  displayName,
  effectiveWorkspaceOrder,
  errorMessage,
  hasProjectPermissions,
+  homeProjectNavigation,
+  homeProjectDirectories,
+  homeSessionServerStatus,
  latestRootSession,
+  toggleHomeProjectSelection,
 } from "./helpers"
 import { pathKey } from "@/utils/path-key"
+import { ServerConnection } from "@/context/server"
+
+const serverKey = ServerConnection.Key.make

 const session = (input: Partial<Session> & Pick<Session, "id" | "directory">) =>
  ({
@@ -215,6 +223,94 @@ describe("layout workspace helpers", () => {
  test("formats fallback project display name", () => {
    expect(displayName({ worktree: "/tmp/app" })).toBe("app")
    expect(displayName({ worktree: "/tmp/app", name: "My App" })).toBe("My App")
+    expect(displayName({ worktree: "/" })).toBe("/")
+  })
+
+  test("scopes home project selection by server", () => {
+    expect(
+      toggleHomeProjectSelection(undefined, serverKey("https://debian.example"), "/home/luke/repos/amazon"),
+    ).toEqual({
+      server: serverKey("https://debian.example"),
+      directory: "/home/luke/repos/amazon",
+    })
+    expect(
+      toggleHomeProjectSelection(
+        { server: serverKey("https://windows.example"), directory: "/home/luke/repos/amazon" },
+        serverKey("https://debian.example"),
+        "/home/luke/repos/amazon",
+      ),
+    ).toEqual({ server: serverKey("https://debian.example"), directory: "/home/luke/repos/amazon" })
+    expect(
+      toggleHomeProjectSelection(
+        { server: serverKey("https://debian.example"), directory: "/home/luke/repos/amazon" },
+        serverKey("https://debian.example"),
+        "/home/luke/repos/amazon",
+      ),
+    ).toEqual({ server: serverKey("https://debian.example") })
+  })
+
+  test("closes a home project through its server context", () => {
+    const closed: string[] = []
+
+    expect(
+      closeHomeProject(
+        { server: serverKey("https://windows.example"), directory: "/shared" },
+        serverKey("https://debian.example"),
+        { close: (directory) => closed.push(directory) },
+        "/shared",
+      ),
+    ).toEqual({ server: serverKey("https://windows.example"), directory: "/shared" })
+    expect(closed).toEqual(["/shared"])
+    expect(
+      closeHomeProject(
+        { server: serverKey("https://debian.example"), directory: "/shared" },
+        serverKey("https://debian.example"),
+        { close: (directory) => closed.push(directory) },
+        "/shared",
+      ),
+    ).toEqual({ server: serverKey("https://debian.example") })
+  })
+
+  test("defers home project navigation until its server is active", () => {
+    expect(
+      homeProjectNavigation(serverKey("sidecar"), serverKey("https://debian.example"), "/YW1hem9u/session"),
+    ).toEqual({
+      server: serverKey("https://debian.example"),
+      href: "/YW1hem9u/session",
+    })
+    expect(
+      homeProjectNavigation(
+        serverKey("https://debian.example"),
+        serverKey("https://debian.example"),
+        "/YW1hem9u/session",
+      ),
+    ).toEqual({
+      href: "/YW1hem9u/session",
+    })
+  })
+
+  test("preserves picker order when adding multiple projects", () => {
+    expect(homeProjectDirectories(["/first", "/second"])).toEqual(["/first", "/second"])
+    expect(homeProjectDirectories("/only")).toEqual(["/only"])
+    expect(homeProjectDirectories(null)).toEqual([])
+  })
+
+  test("hides status derived from an inactive server", () => {
+    let reads = 0
+    const status = () => {
+      reads++
+      return { working: true, tint: "red" }
+    }
+    expect(homeSessionServerStatus(false, status)).toEqual({
+      working: false,
+      tint: undefined,
+    })
+    expect(reads).toBe(0)
+    expect(homeSessionServerStatus(true, status)).toEqual({
+      working: true,
+      tint: "red",
+    })
+    expect(reads).toBe(1)
  })

  test("extracts api error message and fallback", () => {
--- a/Show More
+++ b/Show More