feat(tui): dim placeholder tab titles

.github/TEAM_MEMBERS

@@ -10,7 +10,6 @@ kitlangton
 kommander
 ludvigrask
 MrMushrooooom
-neriousy
 nexxeln
 R44VC0RP
 rekram1-node

.github/workflows/deploy-lab-catalog.yml

@@ -1,49 +0,0 @@
-name: deploy-lab-catalog
-
-on:
-  push:
-    branches: [v2]
-    paths:
-      - ".github/workflows/deploy-lab-catalog.yml"
-      - "bun.lock"
-      - "package.json"
-      - "packages/drive/**"
-      - "packages/protocol/src/simulation.ts"
-      - "packages/simulation/**"
-      - "packages/lab/catalog/**"
-  workflow_dispatch:
-
-concurrency:
-  group: deploy-lab-catalog-${{ github.ref_name }}
-  cancel-in-progress: false
-
-permissions:
-  contents: read
-
-jobs:
-  deploy:
-    if: github.repository == 'anomalyco/opencode' && github.ref_name == 'v2'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
-
-      - uses: ./.github/actions/setup-bun
-
-      - name: Install ffmpeg
-        run: |
-          sudo apt-get update
-          sudo apt-get install --yes ffmpeg
-
-      - name: Validate
-        run: |
-          bun --cwd packages/protocol typecheck
-          bun --cwd packages/simulation typecheck
-          bun --cwd packages/drive run check
-          bun --cwd packages/drive run test
-          bun --cwd packages/lab/catalog run check
-
-      - name: Deploy
-        working-directory: packages/lab/catalog
-        run: bun run deploy
-        env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.github/workflows/publish.yml

@@ -6,6 +6,7 @@ on:
     branches:
       - ci
       - dev
+      - v2
       - beta
       - fix/npm-native-binary-install
       - snapshot-*

.github/workflows/test.yml

@@ -55,12 +55,6 @@ jobs:
           git config --global user.email "bot@opencode.ai"
           git config --global user.name "opencode"
 
-      - name: Install ffmpeg
-        if: runner.os == 'Linux'
-        run: |
-          sudo apt-get update
-          sudo apt-get install --yes ffmpeg
-
       - name: Cache Turbo
         uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
@@ -72,7 +66,7 @@ jobs:
 
       - name: Run unit tests
         timeout-minutes: 20
-        run: GITHUB_ACTIONS=false bun turbo test ${{ runner.os == 'Windows' && '--filter=!opencode-drive' || '' }}
+        run: GITHUB_ACTIONS=false bun turbo test
         env:
           OPENCODE_EXPERIMENTAL_DISABLE_FILEWATCHER: ${{ runner.os == 'Windows' && 'true' || 'false' }}
 

.opencode/skills/opencode-drive/SKILL.md

@@ -51,7 +51,7 @@ files. If the script is unsuccessful, automatically fix the script and run it ag
 Scripts use one typed definition object. `setup` runs before OpenCode starts,
 and `fs.writeFile` always writes inside the simulated project.
 
-You can read the full typed API here: https://raw.githubusercontent.com/anomalyco/opencode/v2/packages/drive/src/script/types.ts
+You can read the full typed API here: https://raw.githubusercontent.com/jlongster/opencode-drive/refs/heads/main/src/script/types.ts
 
 ```ts
 import { defineScript } from "opencode-drive"
@@ -83,7 +83,7 @@ itself (this is extremely rare, do not use this unless explicitly asked). In thi
 mode `ui` is typed as `null`; call `server.launch()` exactly
 once before launching clients. Each `clients.launch(name)` result provides the
 same UI methods as the automatic client. You can see an example of this API
-here: https://raw.githubusercontent.com/anomalyco/opencode/v2/packages/drive/examples/multiple-clients.ts
+here: https://raw.githubusercontent.com/jlongster/opencode-drive/refs/heads/main/examples/multiple-clients.ts
 
 Use the exported `wait(milliseconds)` utility for an unconditional delay.
 
@@ -114,8 +114,8 @@ completion are automatic.
 
 You can see some example scripts here:
 
-- https://raw.githubusercontent.com/anomalyco/opencode/v2/packages/drive/examples/simple.ts
-- https://raw.githubusercontent.com/anomalyco/opencode/v2/packages/drive/examples/serve.ts
+- https://raw.githubusercontent.com/jlongster/opencode-drive/refs/heads/main/examples/simple.ts
+- https://raw.githubusercontent.com/jlongster/opencode-drive/refs/heads/main/examples/serve.ts
 
 ## Prune
 

.opencode/tool/github-triage.ts

@@ -4,7 +4,7 @@ import { tool } from "@opencode-ai/plugin"
 const TEAM = {
   tui: ["kommander", "simonklee"],
   desktop_web: ["Hona", "Brendonovich"],
-  core: ["jlongster", "rekram1-node", "neriousy", "nexxeln", "kitlangton"],
+  core: ["jlongster", "rekram1-node", "nexxeln", "kitlangton"],
   inference: ["fwang", "MrMushrooooom", "starptech"],
   windows: ["Hona"],
 } as const

AGENTS.md

@@ -1,9 +1,8 @@
 - After changing the public Protocol or Server `HttpApi`, run `bun run generate` from `packages/client`. Do not edit `src/generated` or `src/generated-effect` directly.
 - Keep runtime dependencies directed from Schema to Core and Protocol, then from Core and Protocol to Server. Client runtime code may depend on Schema and Protocol but never Core or Server; `sdk-next` composes Client, Core, and Server.
 - Do not modify `packages/opencode` unless the user explicitly asks for V1 work. `packages/opencode` is the V1 implementation and is present for reference only. New implementation changes should land in the V2 package set: `packages/core`, `packages/cli`, `packages/server`, `packages/protocol`, `packages/schema`, and related generated client surfaces when required.
-- The default branch in this repo is `v2`.
-- Base all new branches and worktrees on `v2`, or `origin/v2` when the local `v2` ref is unavailable. Do not base them on `dev`.
-- Local `main` ref may not exist; use `v2` or `origin/v2` for diffs.
+- The default branch in this repo is `dev`.
+- Local `main` ref may not exist; use `dev` or `origin/dev` for diffs.
 
 ## Live V2 TUI Testing
 

package.json

@@ -33,7 +33,6 @@
     "packages": [
       "packages/*",
       "packages/console/*",
-      "packages/lab/*",
       "packages/stats/*",
       "packages/slack"
     ],
@@ -47,9 +46,9 @@
       "@octokit/rest": "22.0.0",
       "@hono/standard-validator": "0.2.0",
       "@hono/zod-validator": "0.4.2",
-      "@opentui/core": "0.5.2",
-      "@opentui/keymap": "0.5.2",
-      "@opentui/solid": "0.5.2",
+      "@opentui/core": "0.0.0-20260808-9ecf7c0a",
+      "@opentui/keymap": "0.0.0-20260808-9ecf7c0a",
+      "@opentui/solid": "0.0.0-20260808-9ecf7c0a",
       "@tanstack/solid-virtual": "3.13.32",
       "@shikijs/stream": "4.2.0",
       "@standard-schema/spec": "1.1.0",
@@ -121,8 +120,7 @@
     "prettier": "3.6.2",
     "semver": "^7.6.0",
     "sst": "catalog:",
-    "turbo": "2.10.2",
-    "vitest": "4.1.10"
+    "turbo": "2.10.2"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "3.933.0",
@@ -152,9 +150,9 @@
     "electron"
   ],
   "overrides": {
-    "@opentui/core": "catalog:",
-    "@opentui/keymap": "catalog:",
-    "@opentui/solid": "catalog:",
+    "@opentui/core": "0.0.0-20260808-9ecf7c0a",
+    "@opentui/keymap": "0.0.0-20260808-9ecf7c0a",
+    "@opentui/solid": "0.0.0-20260808-9ecf7c0a",
     "@types/bun": "catalog:",
     "@types/node": "catalog:",
     "effect": "catalog:"
@@ -174,7 +172,6 @@
     "@modelcontextprotocol/sdk@1.29.0": "patches/@modelcontextprotocol%2Fsdk@1.29.0.patch",
     "effect@4.0.0-beta.101": "patches/effect@4.0.0-beta.101.patch",
     "@tanstack/virtual-core@3.17.3": "patches/@tanstack%2Fvirtual-core@3.17.3.patch",
-    "@cloudflare/vitest-pool-workers@0.12.6": "patches/@cloudflare%2Fvitest-pool-workers@0.12.6.patch",
     "@ff-labs/fff-bun@0.10.1": "patches/@ff-labs%2Ffff-bun@0.10.1.patch"
   }
 }

packages/ai/src/protocols/anthropic-messages.ts

@@ -573,10 +573,7 @@ const lowerMessages = Effect.fn("AnthropicMessages.lowerMessages")(function* (
         cache_control: cacheControl(breakpoints, part.cache),
       })
     }
-    const previous = messages.at(-1)
-    if (previous?.role === "user" && previous.content.every((block) => block.type === "tool_result"))
-      messages[messages.length - 1] = { role: "user", content: [...previous.content, ...content] }
-    else messages.push({ role: "user", content })
+    messages.push({ role: "user", content })
   }
 
   return messages

packages/ai/src/route/executor.ts

@@ -1,4 +1,4 @@
-import { Cause, Context, Effect, Layer, Option, Schema, Stream } from "effect"
+import { Cause, Context, Effect, Layer, Option, Schema } from "effect"
 import {
   FetchHttpClient,
   Headers,
@@ -297,86 +297,44 @@ export const classifyHttpFailure = (input: {
   })
 }
 
-type HttpOperation = "request" | "read"
-
-const NativeTransportFailure = Schema.Struct({
-  message: Schema.String,
-  code: Schema.optionalKey(Schema.String),
-  cause: Schema.optionalKey(Schema.Unknown),
-})
-const decodeNativeTransportFailure = Schema.decodeUnknownOption(NativeTransportFailure)
-
-const nativeTransportFailure = (error: unknown) => {
-  const failure = Option.getOrUndefined(decodeNativeTransportFailure(error))
-  if (!failure) return undefined
-  if (failure.code !== undefined) return failure
-  const cause = Option.getOrUndefined(decodeNativeTransportFailure(failure.cause))
-  if (cause?.code !== undefined) return cause
-  return failure
-}
-
-const httpError = (input: {
-  readonly error: unknown
-  readonly request: HttpClientRequest.HttpClientRequest
-  readonly operation: HttpOperation
-  readonly redactedNames: ReadonlyArray<string | RegExp>
-}) => {
-  const request = HttpClientError.isHttpClientError(input.error) ? input.error.request : input.request
-  const transportError = (failure: { readonly message: string; readonly code?: string | undefined }) =>
+const toHttpError = (redactedNames: ReadonlyArray<string | RegExp>) => (error: unknown) => {
+  const transportError = (input: {
+    readonly message: string
+    readonly kind?: string | undefined
+    readonly request?: HttpClientRequest.HttpClientRequest | undefined
+  }) =>
     new AIError({
       module: "RequestExecutor",
-      method: input.operation,
+      method: "execute",
       reason: new TransportReason({
-        message: failure.message,
-        transport: "http",
-        operation: input.operation,
-        code: failure.code,
-        url: redactUrl(request.url),
-        http: new HttpContext({ request: requestDetails(request, input.redactedNames) }),
+        message: input.message,
+        kind: input.kind,
+        url: input.request ? redactUrl(input.request.url) : undefined,
+        http: input.request ? new HttpContext({ request: requestDetails(input.request, redactedNames) }) : undefined,
       }),
     })
 
-  const source =
-    HttpClientError.isHttpClientError(input.error) && "cause" in input.error.reason
-      ? input.error.reason.cause
-      : input.error
-  const native = nativeTransportFailure(source)
-  const code = native?.code
-  const raw = native?.message ?? (input.error instanceof Error ? input.error.message : undefined)
-  const detail = raw ? redactBody(raw, secretValues(request)) : undefined
-  const message = code && detail && !detail.includes(code) ? `${code}: ${detail}` : detail
-
-  if (Cause.isTimeoutError(input.error) || Cause.isTimeoutError(source))
-    return transportError({ message: message ?? "HTTP transport timed out", code: code ?? "Timeout" })
-  if (!HttpClientError.isHttpClientError(input.error))
-    return transportError({ message: message ?? "HTTP transport failed", code })
-  if (input.error.reason._tag === "TransportError") {
+  if (Cause.isTimeoutError(error)) {
+    return transportError({ message: error.message, kind: "Timeout" })
+  }
+  if (!HttpClientError.isHttpClientError(error)) {
+    return transportError({ message: error instanceof Error ? error.message : "HTTP transport failed" })
+  }
+  const request = "request" in error ? error.request : undefined
+  if (error.reason._tag === "TransportError") {
     return transportError({
-      message: message ?? input.error.reason.description ?? "HTTP transport failed",
-      code: code ?? input.error.reason._tag,
+      message: error.reason.description ?? "HTTP transport failed",
+      kind: error.reason._tag,
+      request,
     })
   }
   return transportError({
-    message: message ?? `HTTP transport failed: ${input.error.reason._tag}`,
-    code: code ?? input.error.reason._tag,
+    message: `HTTP transport failed: ${error.reason._tag}`,
+    kind: error.reason._tag,
+    request,
   })
 }
 
-export const stream = (
-  executor: Interface,
-  request: HttpClientRequest.HttpClientRequest,
-  middleware?: HttpMiddleware,
-): Stream.Stream<Uint8Array, AIError> =>
-  Stream.unwrap(
-    Effect.gen(function* () {
-      const redactedNames = yield* Headers.CurrentRedactedNames
-      const response = yield* executor.execute(request, middleware)
-      return response.stream.pipe(
-        Stream.mapError((error) => httpError({ error, request: response.request, operation: "read", redactedNames })),
-      )
-    }),
-  )
-
 export const layer: Layer.Layer<Service, never, HttpClient.HttpClient> = Layer.effect(
   Service,
   Effect.gen(function* () {
@@ -385,16 +343,15 @@ export const layer: Layer.Layer<Service, never, HttpClient.HttpClient> = Layer.e
       Effect.gen(function* () {
         const redactedNames = yield* Headers.CurrentRedactedNames
         if (!middleware)
-          return yield* http.execute(request).pipe(
-            Effect.mapError((error) => httpError({ error, request, operation: "request", redactedNames })),
-            Effect.flatMap(statusError(request, redactedNames)),
-          )
+          return yield* http
+            .execute(request)
+            .pipe(Effect.mapError(toHttpError(redactedNames)), Effect.flatMap(statusError(request, redactedNames)))
 
         const response = yield* middleware(request, (input) =>
           http
             .execute(input)
             .pipe(Effect.mapError((cause) => (cause instanceof Error ? cause : new Error(String(cause))))),
-        ).pipe(Effect.mapError((error) => httpError({ error, request, operation: "request", redactedNames })))
+        ).pipe(Effect.mapError(toHttpError(redactedNames)))
         return yield* statusError(response.request, redactedNames)(response)
       })
     return Service.of({

packages/ai/src/route/transport/http.ts

@@ -1,4 +1,4 @@
-import { Effect } from "effect"
+import { Effect, Stream } from "effect"
 import { Headers, HttpClientRequest } from "effect/unstable/http"
 import { Auth } from "../auth.js"
 import { render as renderEndpoint } from "../endpoint.js"
@@ -6,7 +6,6 @@ import { Framing } from "../framing.js"
 import type { HttpMiddleware, Transport, TransportPrepareInput } from "./index.js"
 import * as ProviderShared from "../../protocols/shared.js"
 import { mergeJsonRecords, type LLMRequest } from "../../schema/index.js"
-import { RequestExecutor } from "../executor.js"
 
 export type JsonRequestInput<Body> = TransportPrepareInput<Body>
 
@@ -87,8 +86,26 @@ export const httpJson = <Body, Frame>(input: HttpJsonInput<Body, Frame>): HttpJs
         middleware: prepareInput.middleware,
       }
     }),
-  frames: (prepared, _request, runtime) =>
-    prepared.framing.frame(RequestExecutor.stream(runtime.http, prepared.request, prepared.middleware)),
+  frames: (prepared, request, runtime) =>
+    Stream.unwrap(
+      runtime.http
+        .execute(prepared.request, prepared.middleware)
+        .pipe(
+          Effect.map((response) =>
+            prepared.framing.frame(
+              response.stream.pipe(
+                Stream.mapError((error) =>
+                  ProviderShared.eventError(
+                    `${request.model.provider}/${request.model.route.id}`,
+                    `Failed to read ${request.model.provider}/${request.model.route.id} stream`,
+                    ProviderShared.errorText(error),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+    ),
 })
 
 export const sseJson = {

packages/ai/src/route/transport/websocket.ts

@@ -1,6 +1,6 @@
 import { Cause, Context, Effect, Layer, Queue, Stream } from "effect"
 import { Headers } from "effect/unstable/http"
-import { AIError, TransportReason, type TransportOperation } from "../../schema/index.js"
+import { AIError, TransportReason } from "../../schema/index.js"
 import * as HttpTransport from "./http.js"
 import type { Transport } from "./index.js"
 
@@ -29,18 +29,12 @@ export class Service extends Context.Service<Service, Interface>()("@opencode/AI
 const transportError = (
   method: string,
   message: string,
-  input: { readonly operation: TransportOperation; readonly url?: string; readonly code?: string },
+  input: { readonly url?: string; readonly kind?: string } = {},
 ) =>
   new AIError({
     module: "WebSocketExecutor",
     method,
-    reason: new TransportReason({
-      message,
-      transport: "websocket",
-      operation: input.operation,
-      url: input.url,
-      code: input.code,
-    }),
+    reason: new TransportReason({ message, url: input.url, kind: input.kind }),
   })
 
 const eventMessage = (event: Event) => {
@@ -61,8 +55,7 @@ const waitOpen = (ws: globalThis.WebSocket, input: WebSocketRequest) => {
     return Effect.fail(
       transportError("open", `WebSocket closed before opening (state ${ws.readyState})`, {
         url: input.url,
-        operation: "request",
-        code: "closed",
+        kind: "open",
       }),
     )
   }
@@ -86,10 +79,7 @@ const waitOpen = (ws: globalThis.WebSocket, input: WebSocketRequest) => {
       cleanup()
       resume(
         Effect.fail(
-          transportError("open", `Failed to open WebSocket: ${eventMessage(event)}`, {
-            url: input.url,
-            operation: "request",
-          }),
+          transportError("open", `Failed to open WebSocket: ${eventMessage(event)}`, { url: input.url, kind: "open" }),
         ),
       )
     }
@@ -99,8 +89,7 @@ const waitOpen = (ws: globalThis.WebSocket, input: WebSocketRequest) => {
         Effect.fail(
           transportError("open", `WebSocket closed before opening with code ${event.code}`, {
             url: input.url,
-            operation: "request",
-            code: String(event.code),
+            kind: "open",
           }),
         ),
       )
@@ -129,8 +118,7 @@ const webSocketUrl = (value: string) =>
     catch: (error) =>
       transportError("prepare", error instanceof Error ? error.message : "Invalid WebSocket URL", {
         url: value,
-        operation: "request",
-        code: "invalid-url",
+        kind: "websocket",
       }),
   })
 
@@ -141,7 +129,7 @@ export const open = (input: WebSocketRequest) =>
     catch: (error) =>
       transportError("open", error instanceof Error ? error.message : "Failed to construct WebSocket", {
         url: input.url,
-        operation: "request",
+        kind: "open",
       }),
   }).pipe(Effect.flatMap((ws) => fromWebSocket(ws, input)))
 
@@ -162,10 +150,7 @@ export const fromWebSocket = (
       Queue.failCauseUnsafe(
         messages,
         Cause.fail(
-          transportError("message", "Unsupported WebSocket message payload", {
-            url: input.url,
-            operation: "read",
-          }),
+          transportError("message", "Unsupported WebSocket message payload", { url: input.url, kind: "message" }),
         ),
       )
     }
@@ -173,10 +158,7 @@ export const fromWebSocket = (
       Queue.failCauseUnsafe(
         messages,
         Cause.fail(
-          transportError("message", `WebSocket error: ${eventMessage(event)}`, {
-            url: input.url,
-            operation: "read",
-          }),
+          transportError("message", `WebSocket error: ${eventMessage(event)}`, { url: input.url, kind: "message" }),
         ),
       )
     }
@@ -185,11 +167,7 @@ export const fromWebSocket = (
       Queue.failCauseUnsafe(
         messages,
         Cause.fail(
-          transportError("message", `WebSocket closed with code ${event.code}`, {
-            url: input.url,
-            operation: "read",
-            code: String(event.code),
-          }),
+          transportError("message", `WebSocket closed with code ${event.code}`, { url: input.url, kind: "close" }),
         ),
       )
     }
@@ -210,7 +188,7 @@ export const fromWebSocket = (
           catch: (error) =>
             transportError("sendText", error instanceof Error ? error.message : "Failed to send WebSocket message", {
               url: input.url,
-              operation: "write",
+              kind: "write",
             }),
         }),
       messages: Stream.fromQueue(messages),
@@ -265,8 +243,7 @@ export const json = <Body, Message>(input: JsonInput<Body, Message>): JsonTransp
       return Stream.fail(
         transportError("json", "WebSocket JSON transport requires WebSocketExecutor.Service", {
           url: prepared.url,
-          operation: "request",
-          code: "unavailable",
+          kind: "websocket",
         }),
       )
     }

packages/ai/src/schema/errors.ts

@@ -92,18 +92,10 @@ export class ProviderInternalReason extends Schema.Class<ProviderInternalReason>
   http: Schema.optional(HttpContext),
 }) {}
 
-export const TransportType = Schema.Literals(["http", "websocket"])
-export type TransportType = typeof TransportType.Type
-
-export const TransportOperation = Schema.Literals(["request", "read", "write"])
-export type TransportOperation = typeof TransportOperation.Type
-
 export class TransportReason extends Schema.Class<TransportReason>("AI.Error.Transport")({
   _tag: Schema.tag("Transport"),
   message: Schema.String,
-  transport: TransportType,
-  operation: TransportOperation,
-  code: Schema.optional(Schema.String),
+  kind: Schema.optional(Schema.String),
   url: Schema.optional(Schema.String),
   http: Schema.optional(HttpContext),
 }) {}

packages/ai/test/executor.test.ts

@@ -1,10 +1,10 @@
 import { describe, expect } from "bun:test"
-import { Effect, Layer, Ref, Stream } from "effect"
-import { Headers, HttpClient, HttpClientError, HttpClientRequest, HttpClientResponse } from "effect/unstable/http"
+import { Effect, Layer, Ref } from "effect"
+import { Headers, HttpClient, HttpClientRequest, HttpClientResponse } from "effect/unstable/http"
 import { LLM, AIError } from "../src/index.js"
 import { LLMClient, RequestExecutor } from "../src/route.js"
 import * as OpenAIChat from "../src/protocols/openai-chat.js"
-import { dynamicResponse, systemError } from "./lib/http.js"
+import { dynamicResponse } from "./lib/http.js"
 import { deltaChunk } from "./lib/openai-chunks.js"
 import { sseRaw } from "./lib/sse.js"
 import { it } from "./lib/effect.js"
@@ -67,62 +67,6 @@ const expectAIError = (error: unknown) => {
 const errorHttp = (error: AIError) => ("http" in error.reason ? error.reason.http : undefined)
 
 describe("RequestExecutor", () => {
-  it.effect("parses response body failures at the executor seam", () =>
-    Effect.gen(function* () {
-      const executor = yield* RequestExecutor.Service
-      const error = yield* RequestExecutor.stream(executor, secretRequest).pipe(Stream.runDrain, Effect.flip)
-
-      expectAIError(error)
-      expect(error.reason).toMatchObject({
-        _tag: "Transport",
-        message: "ECONNRESET: disconnected <redacted> <redacted>",
-        transport: "http",
-        operation: "read",
-        code: "ECONNRESET",
-        url: "https://provider.test/v1/chat?api_key=%3Credacted%3E&debug=1",
-      })
-    }).pipe(
-      Effect.provide(
-        responsesLayer([
-          new Response(
-            new ReadableStream({
-              start(controller) {
-                controller.error(systemError("ECONNRESET", "disconnected query-secret-123 header-secret-456"))
-              },
-            }),
-          ),
-        ]),
-      ),
-    ),
-  )
-
-  it.effect("unwraps native transport failure causes", () =>
-    Effect.gen(function* () {
-      const executor = yield* RequestExecutor.Service
-      const error = yield* RequestExecutor.stream(executor, secretRequest).pipe(Stream.runDrain, Effect.flip)
-
-      expectAIError(error)
-      expect(error.reason).toMatchObject({
-        _tag: "Transport",
-        message: "ECONNRESET: socket closed",
-        operation: "read",
-        code: "ECONNRESET",
-      })
-    }).pipe(
-      Effect.provide(
-        responsesLayer([
-          new Response(
-            new ReadableStream({
-              pull(controller) {
-                controller.error(new TypeError("fetch failed", { cause: systemError("ECONNRESET", "socket closed") }))
-              },
-            }),
-          ),
-        ]),
-      ),
-    ),
-  )
-
   it.effect("preserves middleware error messages", () =>
     Effect.gen(function* () {
       const executor = yield* RequestExecutor.Service
@@ -135,48 +79,6 @@ describe("RequestExecutor", () => {
     }).pipe(Effect.provide(responsesLayer([]))),
   )
 
-  it.effect("reports the request sent by middleware", () =>
-    Effect.gen(function* () {
-      const executor = yield* RequestExecutor.Service
-      const error = yield* executor
-        .execute(request, (original, handler) =>
-          handler(
-            original.pipe(
-              HttpClientRequest.setUrl("https://proxy.test/v1/chat?api_key=proxy-secret"),
-              HttpClientRequest.setHeader("authorization", "Bearer proxy-secret"),
-            ),
-          ),
-        )
-        .pipe(Effect.flip)
-
-      expectAIError(error)
-      expect(error.reason).toMatchObject({
-        _tag: "Transport",
-        message: "ECONNRESET: proxy disconnected <redacted>",
-        url: "https://proxy.test/v1/chat?api_key=%3Credacted%3E",
-        http: {
-          request: {
-            url: "https://proxy.test/v1/chat?api_key=%3Credacted%3E",
-            headers: { authorization: "<redacted>" },
-          },
-        },
-      })
-    }).pipe(
-      Effect.provide(
-        dynamicResponse((input) =>
-          Effect.fail(
-            new HttpClientError.HttpClientError({
-              reason: new HttpClientError.TransportError({
-                request: input.request,
-                cause: systemError("ECONNRESET", "proxy disconnected proxy-secret"),
-              }),
-            }),
-          ),
-        ),
-      ),
-    ),
-  )
-
   it.effect("classifies context overflow responses", () =>
     Effect.gen(function* () {
       const executor = yield* RequestExecutor.Service

packages/ai/test/lib/http.ts

@@ -1,5 +1,5 @@
 import { Effect, Layer, Ref } from "effect"
-import { HttpClient, HttpClientError, HttpClientRequest, HttpClientResponse } from "effect/unstable/http"
+import { HttpClient, HttpClientRequest, HttpClientResponse } from "effect/unstable/http"
 import { LLMClient, RequestExecutor, WebSocketExecutor } from "../../src/route.js"
 import type { Service as LLMClientService } from "../../src/route/client.js"
 import type { Service as RequestExecutorService } from "../../src/route/executor.js"
@@ -14,9 +14,7 @@ export type HandlerInput = {
   ) => HttpClientResponse.HttpClientResponse
 }
 
-export type Handler = (
-  input: HandlerInput,
-) => Effect.Effect<HttpClientResponse.HttpClientResponse, HttpClientError.HttpClientError>
+export type Handler = (input: HandlerInput) => Effect.Effect<HttpClientResponse.HttpClientResponse>
 
 const handlerLayer = (handler: Handler): Layer.Layer<HttpClient.HttpClient> =>
   Layer.succeed(
@@ -36,12 +34,6 @@ const handlerLayer = (handler: Handler): Layer.Layer<HttpClient.HttpClient> =>
 
 export type RuntimeEnv = RequestExecutorService | WebSocketExecutorService | LLMClientService
 
-export interface SystemError extends Error {
-  readonly code: string
-}
-
-export const systemError = (code: string, message: string): SystemError => Object.assign(new Error(message), { code })
-
 export const runtimeLayer = (layer: Layer.Layer<HttpClient.HttpClient>): Layer.Layer<RuntimeEnv> => {
   const requestExecutorLayer = RequestExecutor.layer.pipe(Layer.provide(layer))
   const deps = Layer.mergeAll(requestExecutorLayer, WebSocketExecutor.layer)
@@ -71,20 +63,14 @@ export const dynamicResponse = (handler: Handler) => runtimeLayer(handlerLayer(h
  * Layer that emits the supplied SSE chunks and then aborts mid-stream. Used to
  * exercise transport errors that surface during parsing.
  */
-export const truncatedStream = (chunks: ReadonlyArray<string>, error: Error = new Error("connection reset")) =>
+export const truncatedStream = (chunks: ReadonlyArray<string>) =>
   dynamicResponse((input) =>
     Effect.sync(() => {
       const encoder = new TextEncoder()
-      let index = 0
       const stream = new ReadableStream({
-        pull(controller) {
-          const chunk = chunks[index]
-          if (chunk !== undefined) {
-            index++
-            controller.enqueue(encoder.encode(chunk))
-            return
-          }
-          controller.error(error)
+        start(controller) {
+          for (const chunk of chunks) controller.enqueue(encoder.encode(chunk))
+          controller.error(new Error("connection reset"))
         },
       })
       return input.respond(stream, { headers: SSE_HEADERS })

packages/ai/test/provider/anthropic-messages.test.ts

@@ -271,47 +271,6 @@ describe("Anthropic Messages route", () => {
     }),
   )
 
-  it.effect("batches parallel tool results into one Anthropic user message", () =>
-    Effect.gen(function* () {
-      const prepared = yield* compileRequest(
-        LLM.request({
-          model,
-          messages: [
-            Message.user("Check both cities."),
-            Message.assistant([
-              { type: "text", text: "I'll check both." },
-              ToolCallPart.make({ id: "call_paris", name: "weather", input: { city: "Paris" } }),
-              ToolCallPart.make({ id: "call_london", name: "weather", input: { city: "London" } }),
-            ]),
-            Message.tool({ id: "call_paris", name: "weather", result: { temperature: 22 } }),
-            Message.tool({ id: "call_london", name: "weather", result: { temperature: 18 } }),
-          ],
-          cache: "none",
-        }),
-      )
-
-      expect(prepared.body.messages).toMatchObject([
-        { role: "user", content: [{ type: "text", text: "Check both cities." }] },
-        {
-          role: "assistant",
-          content: [
-            { type: "text", text: "I'll check both." },
-            { type: "tool_use", id: "call_paris", name: "weather", input: { city: "Paris" } },
-            { type: "tool_use", id: "call_london", name: "weather", input: { city: "London" } },
-          ],
-        },
-        {
-          role: "user",
-          content: [
-            { type: "tool_result", tool_use_id: "call_paris", content: '{"temperature":22}' },
-            { type: "tool_result", tool_use_id: "call_london", content: '{"temperature":18}' },
-          ],
-        },
-      ])
-      expect(prepared.body.messages).toHaveLength(3)
-    }),
-  )
-
   it.effect("keeps tools and sends tool_choice none", () =>
     Effect.gen(function* () {
       const prepared = yield* compileRequest(
@@ -956,54 +915,6 @@ describe("Anthropic Messages route", () => {
     }),
   )
 
-  it.effect("assembles and persists multiple tool calls from one Anthropic response", () =>
-    Effect.gen(function* () {
-      const response = yield* LLMClient.generate(request).pipe(
-        Effect.provide(
-          fixedResponse(
-            sseEvents(
-              { type: "message_start", message: { usage: { input_tokens: 5 } } },
-              {
-                type: "content_block_start",
-                index: 0,
-                content_block: { type: "tool_use", id: "call_paris", name: "weather", input: {} },
-              },
-              {
-                type: "content_block_delta",
-                index: 0,
-                delta: { type: "input_json_delta", partial_json: '{"city":"Paris"}' },
-              },
-              { type: "content_block_stop", index: 0 },
-              {
-                type: "content_block_start",
-                index: 1,
-                content_block: { type: "tool_use", id: "call_london", name: "weather", input: {} },
-              },
-              {
-                type: "content_block_delta",
-                index: 1,
-                delta: { type: "input_json_delta", partial_json: '{"city":"London"}' },
-              },
-              { type: "content_block_stop", index: 1 },
-              { type: "message_delta", delta: { stop_reason: "tool_use" }, usage: { output_tokens: 2 } },
-              { type: "message_stop" },
-            ),
-          ),
-        ),
-      )
-
-      expect(response.toolCalls).toMatchObject([
-        { id: "call_paris", name: "weather", input: { city: "Paris" } },
-        { id: "call_london", name: "weather", input: { city: "London" } },
-      ])
-      expect(response.message.content).toMatchObject([
-        { type: "tool-call", id: "call_paris", name: "weather", input: { city: "Paris" } },
-        { type: "tool-call", id: "call_london", name: "weather", input: { city: "London" } },
-      ])
-      expect(response.finishReason).toEqual({ normalized: "tool-calls", raw: "tool_use" })
-    }),
-  )
-
   it.effect("keeps malformed server tool input terminal", () =>
     Effect.gen(function* () {
       const body = sseEvents(

packages/ai/test/provider/openai-chat.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect } from "bun:test"
-import { Effect, Ref, Schema, Stream } from "effect"
+import { Effect, Schema, Stream } from "effect"
 import { HttpClientRequest } from "effect/unstable/http"
 import {
   HttpOptions,
@@ -22,7 +22,7 @@ import { ProviderShared } from "../../src/protocols/shared.js"
 import { Auth, LLMClient } from "../../src/route.js"
 import { compileRequest } from "../../src/route/client.js"
 import { it } from "../lib/effect.js"
-import { dynamicResponse, fixedResponse, systemError, truncatedStream } from "../lib/http.js"
+import { dynamicResponse, fixedResponse, truncatedStream } from "../lib/http.js"
 import { deltaChunk, usageChunk } from "../lib/openai-chunks.js"
 import { sseEvents } from "../lib/sse.js"
 
@@ -1221,44 +1221,12 @@ describe("OpenAI Chat route", () => {
 
   it.effect("surfaces transport errors that occur mid-stream", () =>
     Effect.gen(function* () {
-      const layer = truncatedStream(
-        [`data: ${JSON.stringify(deltaChunk({ role: "assistant", content: "Hello" }))}\n\n`],
-        systemError("ECONNRESET", "socket closed unexpectedly"),
-      )
-      const events = yield* Ref.make<ReadonlyArray<LLMEvent>>([])
-      const error = yield* LLMClient.stream(request).pipe(
-        Stream.tap((event) => Ref.update(events, (current) => [...current, event])),
-        Stream.runDrain,
-        Effect.provide(layer),
-        Effect.flip,
-      )
+      const layer = truncatedStream([
+        `data: ${JSON.stringify(deltaChunk({ role: "assistant", content: "Hello" }))}\n\n`,
+      ])
+      const error = yield* LLMClient.generate(request).pipe(Effect.provide(layer), Effect.flip)
 
-      expect((yield* Ref.get(events)).some((event) => event.type === "text-delta")).toBeTrue()
-      expect(error.reason).toMatchObject({
-        _tag: "Transport",
-        message: "ECONNRESET: socket closed unexpectedly",
-        transport: "http",
-        operation: "read",
-        code: "ECONNRESET",
-        url: "https://api.openai.test/v1/chat/completions",
-      })
-    }),
-  )
-
-  it.effect("surfaces transport errors before the first stream frame", () =>
-    Effect.gen(function* () {
-      const error = yield* LLMClient.generate(request).pipe(
-        Effect.provide(truncatedStream([], systemError("ECONNRESET", "socket closed before output"))),
-        Effect.flip,
-      )
-
-      expect(error.reason).toMatchObject({
-        _tag: "Transport",
-        message: "ECONNRESET: socket closed before output",
-        transport: "http",
-        operation: "read",
-        code: "ECONNRESET",
-      })
+      expect(error.message).toContain("Failed to read openai/openai-chat stream")
     }),
   )
 

packages/app/e2e/smoke/session-timeline.spec.ts

@@ -189,12 +189,7 @@ test.describe("smoke: session timeline", () => {
                 .querySelector<HTMLElement>('[data-timeline-row="bottom-spacer"]')
                 ?.getBoundingClientRect()
               samples.push({ ids: visible, last: visible.includes(last), bottomError: bottom?.bottom - view.bottom })
-              if (
-                !firstPaint &&
-                visible.includes(last) &&
-                Math.abs((bottom?.bottom ?? Infinity) - view.bottom) <= 1 &&
-                !root.querySelector('[data-markdown-key="initial"]')
-              ) {
+              if (!firstPaint && visible.includes(last) && Math.abs((bottom?.bottom ?? Infinity) - view.bottom) <= 1) {
                 firstPaint = true
                 root.querySelectorAll<HTMLElement>("[data-timeline-key]").forEach((row) => {
                   const rect = row.getBoundingClientRect()
@@ -209,16 +204,10 @@ test.describe("smoke: session timeline", () => {
         }
         ;(
           window as Window & {
-            __sessionTabPaint?: {
-              samples: typeof samples
-              painted: () => boolean
-              removed: () => number
-              stop: () => void
-            }
+            __sessionTabPaint?: { samples: typeof samples; removed: () => number; stop: () => void }
           }
         ).__sessionTabPaint = {
           samples,
-          painted: () => firstPaint,
           removed: () => removedFirstPaintNodes,
           stop: () => {
             running = false
@@ -230,19 +219,17 @@ test.describe("smoke: session timeline", () => {
     )
 
     await switchTitlebarSession(page, fixture.targetID, fixture.expected.targetTitle)
-    await page.waitForFunction(() => {
-      const probe = (
-        window as Window & { __sessionTabPaint?: { samples: Array<{ ids: string[] }>; painted: () => boolean } }
-      ).__sessionTabPaint
-      return probe?.painted() && probe.samples.some((sample) => sample.ids.length > 0)
-    })
+    await page.waitForFunction(() =>
+      (
+        window as Window & { __sessionTabPaint?: { samples: Array<{ ids: string[] }> } }
+      ).__sessionTabPaint?.samples.some((sample) => sample.ids.length > 0),
+    )
     await page.waitForTimeout(200)
     const first = await page.evaluate(() => {
       const probe = (
         window as Window & {
           __sessionTabPaint?: {
             samples: Array<{ ids: string[]; last: boolean; bottomError?: number }>
-            painted: () => boolean
             removed: () => number
             stop: () => void
           }

packages/app/src/app.tsx

@@ -5,33 +5,44 @@ import { DialogProvider } from "@opencode-ai/ui/context/dialog"
 import { FileComponentProvider } from "@opencode-ai/ui/context/file"
 import { File } from "@opencode-ai/session-ui/file"
 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, useParams, useSearchParams } from "@solidjs/router"
 import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
+import { Effect } from "effect"
 import {
   type Component,
   createEffect,
   createMemo,
   createRenderEffect,
+  createResource,
+  createSignal,
   ErrorBoundary,
+  For,
   type JSX,
   lazy,
+  onCleanup,
   type ParentProps,
   Show,
 } from "solid-js"
 import { Dynamic } from "solid-js/web"
+import { makeEventListener } from "@solid-primitives/event-listener"
 import { CommandProvider, useCommand, type CommandOption } from "@/context/command"
 import { CommentsProvider } from "@/context/comments"
 import { FileProvider } from "@/context/file"
+import { ServerSDKProvider } from "@/context/server-sdk"
+import { ServerSyncProvider } from "@/context/server-sync"
 import { GlobalProvider, useGlobal } from "@/context/global"
 import { HighlightsProvider } from "@/context/highlights"
 import { LanguageProvider, type Locale, useLanguage } from "@/context/language"
 import { LayoutProvider } from "@/context/layout"
 import { ModelsProvider } from "@/context/models"
+import { NotificationProvider } from "@/context/notification"
+import { PermissionProvider } from "@/context/permission"
 import { usePlatform } from "@/context/platform"
 import { PromptProvider } from "@/context/prompt"
-import { ServerConnection, ServersProvider, useServers } from "@/context/servers"
+import { ServerConnection, ServerProvider, serverName, useServer } from "@/context/server"
 import { SettingsProvider } from "@/context/settings"
 import { TabsProvider, useTabs, type DraftTab } from "@/context/tabs"
 import { SDKProvider } from "@/context/sdk"
@@ -39,26 +50,26 @@ import { WslServersProvider } from "@/wsl/context"
 import { DirectoryDataProvider } from "@/pages/directory-layout"
 import Layout from "@/pages/layout"
 import { ErrorPage } from "./pages/error"
+import { useCheckServerHealth } from "./utils/server-health"
 import { legacySessionServer, requireServerKey, sessionHref } from "./utils/session-route"
 import { decode64 } from "@/utils/base64"
 
 import { TargetSessionRouteContent } from "@/pages/session"
 import { Home } from "@/pages/home"
-import { ServerProvider } from "./context/server"
 
 const NewSession = lazy(() => import("@/pages/new-session"))
 
 const DirectoryDraftRedirect = () => {
   const params = useParams()
   const [search] = useSearchParams<{ draftId?: string; prompt?: string }>()
-  const server = useServers()
+  const server = useServer()
   const tabs = useTabs()
 
   createEffect(() => {
     if (search.draftId || !tabs.ready()) return
     const directory = decode64(params.dir)
     if (!directory) return
-    tabs.newDraft({ server: ServerConnection.key(server.list[0])!, directory }, search.prompt)
+    tabs.newDraft({ server: server.key, directory }, search.prompt)
   })
 
   return null
@@ -75,13 +86,31 @@ function TargetServerRoute(props: ParentProps) {
   return (
     // Owns the server-identity remount. Session changes must not remount this subtree.
     <Show when={requireServerKey(params.serverKey)} keyed>
-      <Show when={conn()} keyed>
-        {(conn) => <ServerProvider conn={conn}>{props.children}</ServerProvider>}
-      </Show>
+      <ServerSDKProvider server={conn}>
+        <ServerSyncProvider server={conn}>{props.children}</ServerSyncProvider>
+      </ServerSDKProvider>
     </Show>
   )
 }
 
+const TargetSessionRoute = () => (
+  <TargetServerRoute>
+    <TargetSessionRouteContent />
+  </TargetServerRoute>
+)
+
+// Wraps the non-draft routes. They are gated on (and keyed to) the globally selected
+// server via ServerKey, then provide the server-scoped shell for that server.
+function SelectedServerProviders(props: ParentProps) {
+  return (
+    <ServerKey>
+      <ServerSDKProvider>
+        <ServerSyncProvider>{props.children}</ServerSyncProvider>
+      </ServerSDKProvider>
+    </ServerKey>
+  )
+}
+
 function DraftRoute() {
   const [search] = useSearchParams<{ draftId?: string }>()
   const tabs = useTabs()
@@ -101,24 +130,24 @@ function DraftRoute() {
 function ResolvedDraftRoute(props: { draft: DraftTab }) {
   const global = useGlobal()
   const conn = createMemo(() => global.servers.list().find((item) => ServerConnection.key(item) === props.draft.server))
+  const directory = () => props.draft.directory
+  const serverKey = () => props.draft.server
 
   return (
     <Show when={`${props.draft.server}\0${props.draft.directory}`} keyed>
-      <Show when={conn()} keyed>
-        {(conn) => (
-          <ServerProvider conn={conn}>
-            <ModelsProvider directory={props.draft.directory}>
-              <SDKProvider directory={props.draft.directory}>
-                <DirectoryDataProvider directory={props.draft.directory} server={props.draft.server}>
-                  <DraftProviders>
-                    <NewSession draftId={props.draft.draftID} />
-                  </DraftProviders>
-                </DirectoryDataProvider>
-              </SDKProvider>
-            </ModelsProvider>
-          </ServerProvider>
-        )}
-      </Show>
+      <ServerSDKProvider server={conn}>
+        <ServerSyncProvider server={conn}>
+          <ModelsProvider directory={directory}>
+            <SDKProvider directory={directory}>
+              <DirectoryDataProvider directory={directory} server={serverKey}>
+                <DraftProviders>
+                  <NewSession />
+                </DraftProviders>
+              </DirectoryDataProvider>
+            </SDKProvider>
+          </ModelsProvider>
+        </ServerSyncProvider>
+      </ServerSDKProvider>
     </Show>
   )
 }
@@ -151,8 +180,8 @@ function QueryProvider(props: ParentProps) {
     defaultOptions: {
       queries: {
         refetchOnReconnect: false,
-        refetchOnWindowFocus: false,
         refetchOnMount: false,
+        refetchOnWindowFocus: false,
       },
     },
   })
@@ -173,7 +202,15 @@ function BodyDesignClass() {
 // Server-agnostic providers shared across every route. These live in the shared
 // shell (router root) so they stay mounted regardless of the active server/route.
 function SharedProviders(props: ParentProps) {
-  return <></>
+  return (
+    <>
+      <BodyDesignClass />
+      <CommandProvider>
+        <DesktopCommands />
+        <HighlightsProvider>{props.children}</HighlightsProvider>
+      </CommandProvider>
+    </>
+  )
 }
 
 function DesktopCommands() {
@@ -199,14 +236,30 @@ function DesktopCommands() {
   return null
 }
 
-function AppLayout(props: ParentProps) {
+type ServerScopedShellProps = ParentProps<{
+  directory?: () => string | undefined
+  serverScoped?: JSX.Element
+}>
+
+function ServerScopedProviders(props: ServerScopedShellProps) {
   return (
     <LayoutProvider>
-      <Layout>{props.children}</Layout>
+      {props.serverScoped}
+      <ModelsProvider directory={props.directory}>{props.children}</ModelsProvider>
     </LayoutProvider>
   )
 }
 
+function AppLayout(props: ParentProps<{ serverScoped?: JSX.Element }>) {
+  return (
+    <SelectedServerProviders>
+      <ServerScopedProviders serverScoped={props.serverScoped}>
+        <Layout>{props.children}</Layout>
+      </ServerScopedProviders>
+    </SelectedServerProviders>
+  )
+}
+
 // 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) {
@@ -256,6 +309,133 @@ export function AppBaseProviders(
   )
 }
 
+function ConnectionGate(props: ParentProps<{ disableHealthCheck?: boolean; startup?: Promise<void> }>) {
+  const server = useServer()
+  const checkServerHealth = useCheckServerHealth()
+
+  const [checkMode, setCheckMode] = createSignal<"blocking" | "background">("blocking")
+
+  // performs repeated health check with a grace period for
+  // non-http connections, otherwise fails instantly
+  const [startupHealthCheck, healthCheckActions] = createResource(() =>
+    props.disableHealthCheck
+      ? true
+      : Effect.gen(function* () {
+          if (!server.current) return true
+          const { http, type } = server.current
+
+          while (true) {
+            const res = yield* Effect.promise(() => checkServerHealth(http))
+            if (res.healthy) return true
+            if (checkMode() === "background" || type === "http") return false
+          }
+        }).pipe(
+          Effect.timeoutOrElse({ duration: "10 seconds", orElse: () => Effect.succeed(false) }),
+          Effect.ensuring(Effect.sync(() => setCheckMode("background"))),
+          Effect.runPromise,
+        ),
+  )
+  const checking = createMemo(
+    () => checkMode() === "blocking" && ["unresolved", "pending"].includes(startupHealthCheck.state),
+  )
+  const [startup] = createResource(async () => {
+    if (!props.startup) return true
+    await props.startup.catch((error) => {
+      console.error("[startup] startup gate failed", error)
+    })
+    return true
+  })
+  const startupChecking = createMemo(
+    () => startupHealthCheck.latest === true && ["unresolved", "pending"].includes(startup.state),
+  )
+  const loading = createMemo(() => checking() || startupChecking())
+
+  return (
+    <>
+      <Show when={!checking()}>
+        <Show
+          when={startupHealthCheck.latest}
+          fallback={
+            <ConnectionError
+              onRetry={() => {
+                if (checkMode() === "background") void healthCheckActions.refetch()
+              }}
+              onServerSelected={(key) => {
+                setCheckMode("blocking")
+                server.setActive(key)
+                void healthCheckActions.refetch()
+              }}
+            />
+          }
+        >
+          {props.children}
+        </Show>
+      </Show>
+      <Show when={loading()}>
+        <div class="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-background-base">
+          <Splash class="w-16 h-20 opacity-50 animate-pulse" />
+        </div>
+      </Show>
+    </>
+  )
+}
+
+function ConnectionError(props: { onRetry?: () => void; onServerSelected?: (key: ServerConnection.Key) => void }) {
+  const language = useLanguage()
+  const server = useServer()
+  const others = () => server.list.filter((s) => ServerConnection.key(s) !== server.key)
+  const name = createMemo(() => server.name || server.key)
+  const serverToken = "\u0000server\u0000"
+  const unreachable = createMemo(() => language.t("app.server.unreachable", { server: serverToken }).split(serverToken))
+
+  const timer = setInterval(() => props.onRetry?.(), 1000)
+  onCleanup(() => clearInterval(timer))
+
+  return (
+    <div class="h-dvh w-screen flex flex-col items-center justify-center bg-background-base gap-6 p-6">
+      <div class="flex flex-col items-center max-w-md text-center">
+        <Splash class="w-12 h-15 mb-4" />
+        <p class="text-14-regular text-text-base">
+          {unreachable()[0]}
+          <span class="text-text-strong font-medium">{name()}</span>
+          {unreachable()[1]}
+        </p>
+        <p class="mt-1 text-12-regular text-text-weak">{language.t("app.server.retrying")}</p>
+      </div>
+      <Show when={others().length > 0}>
+        <div class="flex flex-col gap-2 w-full max-w-sm">
+          <span class="text-12-regular text-text-base text-center">{language.t("app.server.otherServers")}</span>
+          <div class="flex flex-col gap-1 bg-surface-base rounded-lg p-2">
+            <For each={others()}>
+              {(conn) => {
+                const key = ServerConnection.key(conn)
+                return (
+                  <button
+                    type="button"
+                    class="flex items-center gap-3 w-full px-3 py-2 rounded-md hover:bg-surface-raised-base-hover transition-colors text-left"
+                    onClick={() => props.onServerSelected?.(key)}
+                  >
+                    <span class="text-14-regular text-text-strong truncate">{serverName(conn)}</span>
+                  </button>
+                )
+              }}
+            </For>
+          </div>
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+function ServerKey(props: ParentProps) {
+  const server = useServer()
+  return (
+    <Show when={server.key} keyed>
+      {props.children}
+    </Show>
+  )
+}
+
 export function AppInterface(props: {
   children?: JSX.Element
   defaultServer: ServerConnection.Key
@@ -264,60 +444,67 @@ export function AppInterface(props: {
   router?: Component<BaseRouterProps>
   disableHealthCheck?: boolean
   startup?: Promise<void>
+  serverScoped?: JSX.Element
 }) {
   // The visual layout lives in the router root so it remains mounted across
   // route changes. Draft and session routes override only their server-bound data
   // providers beneath it.
-  const Root = (rootProps: ParentProps) => (
-    <SettingsProvider>
-      <GlobalProvider>
-        <TabsProvider>
-          <BodyDesignClass />
-          <CommandProvider>
-            <DesktopCommands />
-            <HighlightsProvider>
-              {props.children}
-              {rootProps.children}
-            </HighlightsProvider>
-          </CommandProvider>
-        </TabsProvider>
-      </GlobalProvider>
-    </SettingsProvider>
+  const ServerShell = (shellProps: ParentProps) => (
+    <QueryProvider>
+      <SharedProviders>
+        {props.children}
+        {shellProps.children}
+      </SharedProviders>
+    </QueryProvider>
   )
 
   return (
-    <ServersProvider
+    <ServerProvider
       defaultServer={props.defaultServer}
       canonicalLocalServer={props.canonicalLocalServer}
       servers={props.servers}
     >
-      <Dynamic component={props.router ?? Router} root={Root}>
-        {/* Proper Routes */}
-        <Route component={AppLayout}>
-          <Route path="/" component={Home} />
-          <Route
-            path="/server/:serverKey/session/:id"
-            component={() => (
-              <TargetServerRoute>
-                <TargetSessionRouteContent />
-              </TargetServerRoute>
-            )}
-          />
-          <Route path="/new-session" component={DraftRoute} />
-        </Route>
-        {/* Legacy Routes */}
-        <Route>
-          <Route path="/:dir" component={DirectoryDraftRedirect} />
-          <Route path="/:dir/session" component={DirectoryDraftRedirect} />
-          <Route path="/:dir/session/:id" component={LegacySessionRedirect} />
-        </Route>
-      </Dynamic>
-    </ServersProvider>
+      <GlobalProvider>
+        <SettingsProvider>
+          <ConnectionGate disableHealthCheck={props.disableHealthCheck} startup={props.startup}>
+            <Dynamic
+              component={props.router ?? Router}
+              root={(routerProps) => (
+                <TabsProvider>
+                  <PermissionProvider>
+                    <NotificationProvider>
+                      <ServerShell>
+                        <AppLayout serverScoped={props.serverScoped}>{routerProps.children}</AppLayout>
+                      </ServerShell>
+                    </NotificationProvider>
+                  </PermissionProvider>
+                </TabsProvider>
+              )}
+            >
+              <Routes />
+            </Dynamic>
+          </ConnectionGate>
+        </SettingsProvider>
+      </GlobalProvider>
+    </ServerProvider>
+  )
+}
+
+function Routes() {
+  return (
+    <>
+      <Route path="/" component={Home} />
+      <Route path="/:dir" component={DirectoryDraftRedirect} />
+      <Route path="/:dir/session" component={DirectoryDraftRedirect} />
+      <Route path="/:dir/session/:id" component={LegacySessionRedirect} />
+      <Route path="/server/:serverKey/session/:id" component={TargetSessionRoute} />
+      <Route path="/new-session" component={DraftRoute} />
+    </>
   )
 }
 
 function LegacySessionRedirect() {
-  const server = useServers()
+  const server = useServer()
   const tabs = useTabs()
   const params = useParams<{ id: string }>()
 
@@ -328,7 +515,7 @@ function LegacySessionRedirect() {
           legacySessionServer(
             tabs.store.filter((item) => item.type === "session"),
             params.id,
-            ServerConnection.key(server.list[0]!),
+            server.key,
           ),
           params.id,
         )}

packages/app/src/components/command-palette.ts

@@ -8,13 +8,12 @@ import { useFile } from "@/context/file"
 import { useGlobal } from "@/context/global"
 import { useLanguage } from "@/context/language"
 import { useLayout, type LocalProject } from "@/context/layout"
-import { ServerConnection } from "@/context/servers"
+import { ServerConnection } from "@/context/server"
 import { useServerSDK } from "@/context/server-sdk"
 import { useTabs } from "@/context/tabs"
 import { displayName, projectForSession } from "@/pages/layout/helpers"
 import { createSessionTabs } from "@/pages/session/helpers"
 import { useSessionLayout } from "@/pages/session/session-layout"
-import { useServer } from "@/context/server"
 
 export type CommandPaletteEntry = {
   id: string
@@ -84,7 +83,7 @@ export function createCommandPaletteModel(props: { filesOnly?: () => boolean; on
   const language = useLanguage()
   const file = useFile()
   const dialog = useDialog()
-  const serverSDK = useServerSDK()
+  const serverSDK = useServerSDK()()
   const serverCtx = global.ensureServerCtx(serverSDK.server)
   const appTabs = useTabs()
   const { tabs: sessionTabs } = useSessionLayout()

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

@@ -1,5 +1,5 @@
 import { useIsRouting, useLocation } from "@solidjs/router"
-import { batch, createEffect, onCleanup, onMount, Show } from "solid-js"
+import { batch, createEffect, onCleanup, onMount } from "solid-js"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
@@ -571,7 +571,7 @@ export function DebugBar(props: { inline?: boolean } = {}) {
           value={language.t(`debugBar.direction.${language.direction()}`)}
           onClick={() => language.setDirection(language.direction() === "rtl" ? "ltr" : "rtl")}
         />
-        <Show when={platform.setForceFocus}>
+        {platform.setForceFocus && (
           <ToggleCell
             active={state.focus}
             inline={props.inline}
@@ -580,7 +580,7 @@ export function DebugBar(props: { inline?: boolean } = {}) {
             value={language.t(state.focus ? "debugBar.focus.on" : "debugBar.focus.off")}
             onClick={() => void toggleFocus()}
           />
-        </Show>
+        )}
       </div>
     </aside>
   )

packages/app/src/components/dialog-command-palette-v2.tsx

@@ -10,7 +10,7 @@ import { createEffect, createMemo, createResource, createSignal, For, Match, onC
 import { commandPaletteOptions, formatKeybindParts, useCommand } from "@/context/command"
 import { useGlobal } from "@/context/global"
 import { useLanguage } from "@/context/language"
-import { ServerConnection } from "@/context/servers"
+import { ServerConnection } from "@/context/server"
 import { useTabs } from "@/context/tabs"
 import { SessionTabAvatar } from "@/pages/layout/session-tab-avatar"
 import { getRelativeTime } from "@/utils/time"

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

@@ -12,7 +12,7 @@ import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { DialogBody, DialogHeader, DialogTitle, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { showToast } from "@/utils/toast"
-import { type Component, createMemo, createUniqueId, For, Match, onMount, Show, Switch } from "solid-js"
+import { type Accessor, type Component, createMemo, createUniqueId, For, Match, onMount, Show, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useParams } from "@solidjs/router"
 import { ExternalLink } from "@/components/external-link"
@@ -40,7 +40,7 @@ export function useProviderConnectController(options: { onBack?: () => void } =
 }
 
 export const DialogConnectProvider: Component<{
-  directory?: string
+  directory?: Accessor<string | undefined>
   controller?: ReturnType<typeof useProviderConnectController>
 }> = (props) => {
   const fallback = useProviderConnectController()
@@ -136,11 +136,15 @@ export const DialogConnectProvider: Component<{
   )
 }
 
-function ProviderPicker(props: { directory?: string; onSelect: (provider: string) => void; onPrepare?: () => void }) {
+function ProviderPicker(props: {
+  directory?: Accessor<string | undefined>
+  onSelect: (provider: string) => void
+  onPrepare?: () => void
+}) {
   const settings = useSettings()
   if (settings.general.newLayoutDesigns())
     return <ProviderPickerV2 directory={props.directory} onSelect={props.onSelect} onPrepare={props.onPrepare} />
-  const providers = useProviders(() => props.directory)
+  const providers = useProviders(() => props.directory?.())
   const language = useLanguage()
   const popularGroup = () => language.t("dialog.provider.group.popular")
   const otherGroup = () => language.t("dialog.provider.group.other")
@@ -207,8 +211,12 @@ function ProviderPicker(props: { directory?: string; onSelect: (provider: string
   )
 }
 
-function ProviderPickerV2(props: { directory?: string; onSelect: (provider: string) => void; onPrepare?: () => void }) {
-  const providers = useProviders(() => props.directory)
+function ProviderPickerV2(props: {
+  directory?: Accessor<string | undefined>
+  onSelect: (provider: string) => void
+  onPrepare?: () => void
+}) {
+  const providers = useProviders(() => props.directory?.())
   const language = useLanguage()
   const [store, setStore] = createStore({
     filter: "",
@@ -356,7 +364,7 @@ function ProviderPickerV2(props: { directory?: string; onSelect: (provider: stri
 
 function ProviderConnection(props: {
   provider: string
-  directory?: string
+  directory?: Accessor<string | undefined>
   onBack: () => void
   setBack: (handler: () => void) => void
 }) {
@@ -366,11 +374,11 @@ function ProviderConnection(props: {
   const language = useLanguage()
   const settings = useSettings()
   const newLayout = settings.general.newLayoutDesigns
-  const providers = useProviders(() => props.directory)
-  const directory = () => props.directory ?? decode64(params.dir)
+  const providers = useProviders(() => props.directory?.())
+  const directory = () => props.directory?.() ?? decode64(params.dir)
 
   const provider = createMemo(
-    () => providers.all().get(props.provider) ?? serverSync.data.provider.all.get(props.provider)!,
+    () => providers.all().get(props.provider) ?? serverSync().data.provider.all.get(props.provider)!,
   )
   const controller = createProviderConnectionController({
     provider: () => props.provider,

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

@@ -116,8 +116,8 @@ export function CustomProviderForm(props: { autofocus?: boolean } = {}) {
     const output = validateCustomProvider({
       form,
       t: language.t,
-      disabledProviders: serverSync.data.config.disabled_providers ?? [],
-      existingProviderIDs: new Set(serverSync.data.provider.all.keys()),
+      disabledProviders: serverSync().data.config.disabled_providers ?? [],
+      existingProviderIDs: new Set(serverSync().data.provider.all.keys()),
     })
     batch(() => {
       setForm("err", output.err)

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

@@ -9,7 +9,7 @@ import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { For, Show } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { getProjectAvatarVariant, type LocalProject } from "@/context/layout"
-import { ServerConnection } from "@/context/servers"
+import { ServerConnection } from "@/context/server"
 import { getProjectAvatarSource } from "@/pages/layout/helpers"
 import { createEditProjectModel } from "./edit-project"
 

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

@@ -31,7 +31,7 @@ export const DialogManageModels: Component = () => {
   const directory = () => decode64(local.slug())
 
   const handleConnectProvider = () => {
-    void dialog.show(() => <DialogConnectProvider directory={directory()} />)
+    void dialog.show(() => <DialogConnectProvider directory={directory} />)
   }
   const providerRank = (id: string) => popularProviders.indexOf(id)
   const providerList = (providerID: string) => local.model.list().filter((x) => x.provider.id === providerID)
@@ -123,7 +123,7 @@ export const DialogManageModelsV2: Component = () => {
   const directory = () => decode64(local.slug())
 
   const handleConnectProvider = () => {
-    void dialog.show(() => <DialogConnectProvider directory={directory()} />)
+    void dialog.show(() => <DialogConnectProvider directory={directory} />)
   }
   const providerList = (providerID: string) => local.model.list().filter((x) => x.provider.id === providerID)
   const providerVisible = (providerID: string) =>

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

@@ -1,4 +1,4 @@
-import { createSignal, Index, Show } from "solid-js"
+import { createSignal } from "solid-js"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -83,71 +83,61 @@ export function DialogReleaseNotes(props: { highlights: Highlight[] }) {
           {/* Bottom section - buttons and indicators (fixed position) */}
           <div class="flex flex-col gap-12">
             <div class="flex flex-col items-start gap-3">
-              <Show
-                when={isLast()}
-                fallback={
-                  <Button variant="secondary" size="large" onClick={handleNext}>
-                    {language.t("dialog.releaseNotes.action.next")}
-                  </Button>
-                }
-              >
+              {isLast() ? (
                 <Button variant="primary" size="large" onClick={handleClose}>
                   {language.t("dialog.releaseNotes.action.getStarted")}
                 </Button>
-              </Show>
+              ) : (
+                <Button variant="secondary" size="large" onClick={handleNext}>
+                  {language.t("dialog.releaseNotes.action.next")}
+                </Button>
+              )}
 
               <Button variant="ghost" size="small" onClick={handleDisable}>
                 {language.t("dialog.releaseNotes.action.hideFuture")}
               </Button>
             </div>
 
-            <Show when={paged()}>
+            {paged() && (
               <div class="flex items-center gap-1.5 -my-2.5">
-                <Index each={props.highlights}>
-                  {(_, i) => (
-                    <button
-                      type="button"
-                      class="h-6 flex items-center cursor-pointer bg-transparent border-none p-0 transition-all duration-200"
+                {props.highlights.map((_, i) => (
+                  <button
+                    type="button"
+                    class="h-6 flex items-center cursor-pointer bg-transparent border-none p-0 transition-all duration-200"
+                    classList={{
+                      "w-8": i === index(),
+                      "w-3": i !== index(),
+                    }}
+                    onClick={() => setIndex(i)}
+                  >
+                    <div
+                      class="w-full h-0.5 rounded-[1px] transition-colors duration-200"
                       classList={{
-                        "w-8": i === index(),
-                        "w-3": i !== index(),
+                        "bg-icon-strong-base": i === index(),
+                        "bg-icon-weak-base": i !== index(),
                       }}
-                      onClick={() => setIndex(i)}
-                    >
-                      <div
-                        class="w-full h-0.5 rounded-[1px] transition-colors duration-200"
-                        classList={{
-                          "bg-icon-strong-base": i === index(),
-                          "bg-icon-weak-base": i !== index(),
-                        }}
-                      />
-                    </button>
-                  )}
-                </Index>
+                    />
+                  </button>
+                ))}
               </div>
-            </Show>
+            )}
           </div>
         </div>
 
         {/* Right side - Media content (edge to edge) */}
-        <Show when={feature()?.media}>
-          {(media) => (
-            <div class="flex-1 min-w-0 bg-surface-base overflow-hidden rounded-r-xl">
-              <Show
-                when={media().type === "image"}
-                fallback={
-                  <video src={media().src} autoplay loop muted playsinline class="w-full h-full object-cover" />
-                }
-              >
-                <img
-                  src={media().src}
-                  alt={media().alt ?? feature()?.title ?? language.t("dialog.releaseNotes.media.alt")}
-                  class="w-full h-full object-cover"
-                />
-              </Show>
-            </div>
-          )}
-        </Show>
+        {feature()?.media && (
+          <div class="flex-1 min-w-0 bg-surface-base overflow-hidden rounded-r-xl">
+            {feature()!.media!.type === "image" ? (
+              <img
+                src={feature()!.media!.src}
+                alt={feature()!.media!.alt ?? feature()?.title ?? language.t("dialog.releaseNotes.media.alt")}
+                class="w-full h-full object-cover"
+              />
+            ) : (
+              <video src={feature()!.media!.src} autoplay loop muted playsinline class="w-full h-full object-cover" />
+            )}
+          </div>
+        )}
       </div>
     </Dialog>
   )

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

@@ -7,7 +7,7 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { createEffect, createMemo, createResource, createSignal, For, onCleanup, onMount, Show } from "solid-js"
 import { useGlobal } from "@/context/global"
 import { useLanguage } from "@/context/language"
-import { ServerConnection } from "@/context/servers"
+import { ServerConnection } from "@/context/server"
 import type { Path } from "@/types"
 import {
   absoluteTreePath,

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

@@ -6,7 +6,7 @@ import type { ListRef } from "@opencode-ai/ui/list"
 import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
 import { createMemo, createResource, createSignal } from "solid-js"
 import { useLanguage } from "@/context/language"
-import { ServerConnection } from "@/context/servers"
+import { ServerConnection } from "@/context/server"
 import { useGlobal } from "@/context/global"
 import { cleanPickerInput, createDirectorySearch, displayPickerPath } from "./directory-picker-domain"
 import type { Path } from "@/types"

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

@@ -9,6 +9,7 @@ import { formatKeybind } from "@/context/command"
 import { useServerSDK } from "@/context/server-sdk"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
+import { useSettings } from "@/context/settings"
 import { useSessionLayout } from "@/pages/session/session-layout"
 import { decode64 } from "@/utils/base64"
 import { getRelativeTime } from "@/utils/time"
@@ -28,13 +29,14 @@ type DialogSelectFileMode = "all" | "files"
 
 export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFile?: (path: string) => void }) {
   const platform = usePlatform()
+  const settings = useSettings()
   const filesOnly = () => props.mode === "files"
 
-  if (!filesOnly()) {
+  if (!filesOnly() && settings.general.newLayoutDesigns()) {
     return <DialogCommandPaletteV2 onOpenFile={props.onOpenFile} />
   }
 
-  if (filesOnly() && platform.platform === "desktop") {
+  if (filesOnly() && platform.platform === "desktop" && settings.general.newLayoutDesigns()) {
     return <DialogSelectFileDesktopV2 onOpenFile={props.onOpenFile} />
   }
 
@@ -50,7 +52,7 @@ function DialogSelectFileDesktopV2(props: { onOpenFile?: (path: string) => void
 
   return (
     <DialogSelectFileV2
-      server={serverSDK.server}
+      server={serverSDK().server}
       mode="file"
       start={projectDirectory()}
       title={language.t("session.header.searchFiles")}

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

@@ -37,7 +37,7 @@ export const DialogSelectModelUnpaidV2: Component<{ model?: ModelState }> = (pro
     void import("./dialog-connect-provider").then((x) => {
       const controller = x.useProviderConnectController()
       controller.select(provider)
-      void dialog.show(() => <x.DialogConnectProvider controller={controller} directory={directory()} />)
+      void dialog.show(() => <x.DialogConnectProvider controller={controller} directory={directory} />)
     })
   }
 

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

@@ -26,7 +26,7 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
     void import("./dialog-connect-provider").then((x) => {
       const controller = x.useProviderConnectController()
       controller.select(provider)
-      void dialog.show(() => <x.DialogConnectProvider controller={controller} directory={directory()} />)
+      void dialog.show(() => <x.DialogConnectProvider controller={controller} directory={directory} />)
     })
   }
 

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

@@ -148,7 +148,7 @@ export function ModelSelectorPopover(props: {
   const handleConnectProvider = () => {
     close("provider")
     void import("./dialog-connect-provider").then((x) => {
-      void dialog.show(() => <x.DialogConnectProvider directory={directory()} />)
+      void dialog.show(() => <x.DialogConnectProvider directory={directory} />)
     })
   }
   const language = useLanguage()
@@ -240,7 +240,7 @@ export function ModelSelectorPopoverV2(props: {
       trigger={props.trigger}
       models={controller.models}
       groups={controller.groups}
-      current={controller.current()}
+      current={controller.current}
       select={controller.select}
       onManage={() => {
         void import("./dialog-manage-models").then((module) => {
@@ -295,7 +295,7 @@ function ModelSelectorPopoverV2View(props: {
   trigger: ModelSelectorTrigger
   models: (search: string) => ModelItem[]
   groups: (models: ModelItem[]) => { category: string; items: ModelItem[] }[]
-  current: string | undefined
+  current: () => string | undefined
   select: (item: ModelItem) => void
   onManage: () => void
   onClose: () => void
@@ -310,7 +310,7 @@ function ModelSelectorPopoverV2View(props: {
   const groups = createMemo(() => props.groups(models()))
   const keys = () => [...models().map(modelKey), manageKey]
   const initialActive = () => {
-    const selected = props.current
+    const selected = props.current()
     const options = keys()
     if (selected && options.includes(selected)) return selected
     return options[0] ?? ""
@@ -453,7 +453,7 @@ function ModelSelectorPopoverV2View(props: {
                       <MenuV2.GroupLabel class="gap-2 px-3">
                         <span class="min-w-0 truncate">{group.items[0].provider.name}</span>
                       </MenuV2.GroupLabel>
-                      <MenuV2.RadioGroup value={props.current}>
+                      <MenuV2.RadioGroup value={props.current()}>
                         <For each={group.items}>
                           {(item) => (
                             <TooltipV2
@@ -473,7 +473,7 @@ function ModelSelectorPopoverV2View(props: {
                               <MenuV2.RadioItem
                                 value={modelKey(item)}
                                 data-option-key={modelKey(item)}
-                                data-selected-model={props.current === modelKey(item) ? true : undefined}
+                                data-selected-model={props.current() === modelKey(item) ? true : undefined}
                                 class="scroll-my-6 w-full"
                                 classList={{ "!bg-v2-overlay-simple-overlay-hover": store.active === modelKey(item) }}
                                 onMouseEnter={() => {
@@ -529,7 +529,7 @@ export const DialogSelectModel: Component<{ provider?: string; model?: ModelStat
 
   const provider = () => {
     void import("./dialog-connect-provider").then((x) => {
-      void dialog.show(() => <x.DialogConnectProvider directory={directory()} />)
+      void dialog.show(() => <x.DialogConnectProvider directory={directory} />)
     })
   }
 

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

@@ -1,13 +1,17 @@
 import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { List } from "@opencode-ai/ui/list"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { Show } from "solid-js"
 import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
 import { useLanguage } from "@/context/language"
-import { ServerConnection } from "@/context/servers"
-import { ServerCollectionController } from "@/components/server/server-management-controller"
+import { ServerConnection } from "@/context/server"
+import { useSettings } from "@/context/settings"
+import { type ServerDomainController } from "@/components/server/server-management-controller"
 
 type ServerConnectionFormController = {
   state: {
@@ -113,11 +117,12 @@ function ServerForm(props: ServerFormProps) {
 }
 
 export function ServerConnectionList(props: {
-  domain: ServerCollectionController
+  domain: ServerDomainController
   onAdd: () => void
   onEdit: (server: ServerConnection.Http) => void
 }) {
   const language = useLanguage()
+  const settings = useSettings()
 
   return (
     <div class="flex flex-1 min-h-0 flex-col gap-4">
@@ -131,6 +136,9 @@ export function ServerConnectionList(props: {
         emptyMessage={language.t("dialog.server.empty")}
         items={props.domain.collection.items}
         key={(x) => x.http.url}
+        onSelect={(x) => {
+          if (x && !settings.general.newLayoutDesigns()) void props.domain.selection.select(x)
+        }}
         divider={true}
       >
         {(i) => {
@@ -155,6 +163,15 @@ export function ServerConnectionList(props: {
                 showCredentials
               />
               <div class="flex items-center justify-center gap-4 pl-4">
+                <Show
+                  when={
+                    props.domain.collection.current() &&
+                    ServerConnection.key(props.domain.collection.current()!) === key
+                  }
+                >
+                  <Icon name="check" class="h-6" />
+                </Show>
+
                 <Show when={i.type === "http"}>
                   <DropdownMenu>
                     <DropdownMenu.Trigger

packages/app/src/components/directory-picker-policy.ts

@@ -1,4 +1,4 @@
-import { ServerConnection } from "@/context/servers"
+import { ServerConnection } from "@/context/server"
 import type { Platform } from "@/context/platform"
 
 export function directoryPickerKind(platform: Platform["platform"], server: ServerConnection.Any) {

packages/app/src/components/directory-picker.tsx

@@ -1,5 +1,5 @@
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { ServerConnection } from "@/context/servers"
+import { ServerConnection } from "@/context/server"
 import { usePlatform } from "@/context/platform"
 import { useSettings } from "@/context/settings"
 import { lazy } from "solid-js"

packages/app/src/components/edit-project.ts

@@ -6,7 +6,7 @@ import { createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useGlobal } from "@/context/global"
 import { type LocalProject } from "@/context/layout"
-import { ServerConnection } from "@/context/servers"
+import { ServerConnection } from "@/context/server"
 
 export function createEditProjectModel(props: { project: LocalProject; server: ServerConnection.Any }) {
   const supported = !props.project.id || props.project.id === "global"

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

@@ -45,6 +45,7 @@ import { Select } from "@opencode-ai/ui/select"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ModelSelectorPopover, ModelSelectorPopoverV2 } from "@/components/dialog-select-model"
 import { DialogSelectModelUnpaid } from "@/components/dialog-select-model-unpaid"
+import { DialogSelectModelUnpaidV2 } from "@/components/dialog-select-model-unpaid-v2"
 import { useCommand } from "@/context/command"
 import { usePermission } from "@/context/permission"
 import { useLanguage } from "@/context/language"

packages/app/src/components/prompt-input/submit.test.ts

@@ -195,6 +195,14 @@ beforeAll(async () => {
     usePrompt: () => prompt,
   }))
 
+  mock.module("@/context/layout", () => ({
+    useLayout: () => ({
+      handoff: {
+        setTabs: () => undefined,
+      },
+    }),
+  }))
+
   mock.module("@/context/sdk", () => ({
     useSDK: () => {
       const sdk = {

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

@@ -8,6 +8,7 @@ import { batch, startTransition, type Accessor } from "solid-js"
 import { useTabs } from "@/context/tabs"
 import { useServerSync, type ServerSync } from "@/context/server-sync"
 import { useLanguage } from "@/context/language"
+import { useLayout } from "@/context/layout"
 import { useLocal, type ModelSelection } from "@/context/local"
 import { usePermission } from "@/context/permission"
 import { type ContextItem, type ImageAttachmentPart, type Prompt, type usePrompt } from "@/context/prompt"
@@ -257,6 +258,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
   const local = useLocal()
   const permission = usePermission()
   const prompt = input.prompt
+  const layout = useLayout()
   const language = useLanguage()
   const params = useParams()
   const [search] = useSearchParams<{ draftId?: string }>()
@@ -277,7 +279,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
     const sessionID = params.id
     if (!sessionID) return Promise.resolve()
 
-    serverSync.session.set("todo", sessionID, [])
+    serverSync().session.set("todo", sessionID, [])
 
     input.onAbort?.()
 
@@ -318,8 +320,8 @@ export function createPromptSubmit(input: PromptSubmitInput) {
   }
 
   const seed = (dir: string, info: SessionInfo) => {
-    serverSync.session.remember(info)
-    const [, setStore] = serverSync.child(dir)
+    serverSync().session.remember(info)
+    const [, setStore] = serverSync().child(dir)
     setStore("session", (list: SessionInfo[]) => {
       const result = Binary.search(list, info.id, (item) => item.id)
       const next = [...list]
@@ -368,6 +370,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
     input.resetHistoryNavigation()
 
     const projectDirectory = sdk().directory
+    const permissionState = permission.currentServerState()
     const isNewSession = !params.id
     const shouldAutoAccept = isNewSession && input.autoAccept()
     const worktreeSelection = input.newSessionWorktree?.() || "main"
@@ -399,7 +402,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
       }
 
       if (sessionDirectory !== projectDirectory) {
-        serverSync.child(sessionDirectory)
+        serverSync().child(sessionDirectory)
       }
 
       input.onNewSessionWorktreeReset?.()
@@ -425,12 +428,13 @@ export function createPromptSubmit(input: PromptSubmitInput) {
         session = created
         await startTransition(() => {
           if (!session) return
-          if (shouldAutoAccept) permission.enableAutoAccept(session.id, sessionDirectory)
+          if (shouldAutoAccept) permissionState.enableAutoAccept(session.id, sessionDirectory)
           local.session.promote(sessionDirectory, session.id, {
             agent: currentAgent.name,
             model: { providerID: currentModel.provider.id, modelID: currentModel.id },
             variant: variant ?? null,
           })
+          layout.handoff.setTabs(base64Encode(sessionDirectory), session.id)
           const draftID = search.draftId
           if (draftID) tabs.promoteDraft(draftID, { server: tabs.draft(draftID).server, sessionId: session.id })
           else navigate(`/${base64Encode(sessionDirectory)}/session/${session.id}`)
@@ -519,7 +523,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
       if (customCommand) {
         clearInput()
         const messageID = Identifier.ascending("message")
-        serverSync.session.set("session_status", session.id, { type: "busy" })
+        serverSync().session.set("session_status", session.id, { type: "busy" })
         sdk()
           .api.session.command({
             sessionID: session.id,
@@ -536,7 +540,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
             ),
           })
           .catch((err) => {
-            serverSync.session.set("session_status", session.id, { type: "idle" })
+            serverSync().session.set("session_status", session.id, { type: "idle" })
             showToast({
               title: language.t("prompt.toast.commandSendFailed.title"),
               description: formatServerError(err, language.t, language.t("common.requestFailed")),
@@ -622,7 +626,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
     void sendFollowupDraft({
       api: sdk().api.session,
       sync: sync(),
-      serverSync: serverSync,
+      serverSync: serverSync(),
       session: () => input.info() ?? session,
       draft,
       messageID,

packages/app/src/components/provider-connection-controller.ts

@@ -27,8 +27,8 @@ export function createProviderConnectionController(options: {
   const [integration] = createResource(
     () => ({ provider: options.provider(), directory: options.directory() }),
     (input) =>
-      serverSDK.api.integration
-        .get({ integrationID: input.provider, location: location() })
+      serverSDK()
+        .api.integration.get({ integrationID: input.provider, location: location() })
         .then((result) => result.data),
   )
   const methods = createMemo<ProviderConnectMethod[]>(() => {
@@ -120,14 +120,14 @@ export function createProviderConnectionController(options: {
     cancelPolling()
     const directory = options.directory()
     await queryClient
-      .refetchQueries(serverSync.queryOptions.providers(directory ? pathKey(directory) : null))
+      .refetchQueries(serverSync().queryOptions.providers(directory ? pathKey(directory) : null))
       .catch(() => undefined)
     if (polling.disposed) return
     options.onComplete()
   }
   const poll = async (authorization: Authorization, generation: number) => {
-    const result = await serverSDK.api.integration.oauth
-      .status({
+    const result = await serverSDK()
+      .api.integration.oauth.status({
         integrationID: options.provider(),
         attemptID: authorization.attemptID,
         location: location(),
@@ -175,8 +175,8 @@ export function createProviderConnectionController(options: {
       return
     }
     dispatch({ type: "auth.pending" })
-    const result = await serverSDK.api.integration.oauth
-      .connect({
+    const result = await serverSDK()
+      .api.integration.oauth.connect({
         integrationID: options.provider(),
         methodID: selected.id,
         ...(answer ? { answer } : {}),
@@ -197,7 +197,7 @@ export function createProviderConnectionController(options: {
     dispatch({ type: "method.reset" })
   }
   const connectKey = async (key: string) => {
-    await serverSDK.api.integration.connect.key({
+    await serverSDK().api.integration.connect.key({
       integrationID: options.provider(),
       location: location(),
       key,
@@ -208,8 +208,8 @@ export function createProviderConnectionController(options: {
   const completeCode = async (code: string) => {
     const authorization = store.authorization
     if (!authorization) return language.t("provider.connect.oauth.code.invalid")
-    const result = await serverSDK.api.integration.oauth
-      .complete({
+    const result = await serverSDK()
+      .api.integration.oauth.complete({
         integrationID: options.provider(),
         attemptID: authorization.attemptID,
         location: location(),

packages/app/src/components/server/server-management-controller.ts

@@ -3,7 +3,7 @@ import { createMemo, createResource } from "solid-js"
 import { useGlobal } from "@/context/global"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
-import { ServerConnection, useServers } from "@/context/servers"
+import { ServerConnection, useServer } from "@/context/server"
 import { useSettings } from "@/context/settings"
 import { useTabs } from "@/context/tabs"
 import { type ServerHealth } from "@/utils/server-health"
@@ -49,7 +49,7 @@ function useDefaultServer() {
 }
 
 export function useServerActionsController() {
-  const server = useServers()
+  const server = useServer()
   const tabs = useTabs()
   const platform = usePlatform()
   const language = useLanguage()
@@ -72,16 +72,28 @@ export function useServerActionsController() {
 export type ServerActionsController = ReturnType<typeof useServerActionsController>
 
 export function useServerCollectionController() {
-  const server = useServers()
+  const server = useServer()
   const global = useGlobal()
   const settings = useSettings()
   const actions = useServerActionsController()
 
-  const items = createMemo(() => server.list)
+  const items = createMemo(() => {
+    const current = server.current
+    const list = server.list
+    if (!current) return list
+    if (!list.includes(current)) return [current, ...list]
+    return [current, ...list.filter((item) => item !== current)]
+  })
+  const current = createMemo<ServerConnection.Any | undefined>(() =>
+    settings.general.newLayoutDesigns()
+      ? undefined
+      : (items().find((item) => ServerConnection.key(item) === server.key) ?? items()[0]),
+  )
   const sorted = createMemo(() => {
     const raw = items()
     const list = raw
     if (!list.length) return list
+    const active = current()
     const order = new Map(list.map((item, index) => [item, index] as const))
     const rank = (value?: ServerHealth) => {
       if (value?.healthy === true) return 0
@@ -89,6 +101,8 @@ export function useServerCollectionController() {
       return 1
     }
     return list.slice().sort((a, b) => {
+      if (a === active) return -1
+      if (b === active) return 1
       const diff =
         rank(global.servers.health[ServerConnection.key(a)]) - rank(global.servers.health[ServerConnection.key(b)])
       if (diff !== 0) return diff
@@ -99,6 +113,7 @@ export function useServerCollectionController() {
   return {
     collection: {
       items: sorted,
+      current,
       health: () => global.servers.health,
     },
     ...actions,
@@ -106,3 +121,21 @@ export function useServerCollectionController() {
 }
 
 export type ServerCollectionController = ReturnType<typeof useServerCollectionController>
+
+export function useServerDomainController(options: { onSelect?: () => void } = {}) {
+  const navigate = useNavigate()
+  const server = useServer()
+  const global = useGlobal()
+  const collection = useServerCollectionController()
+
+  const select = async (connection: ServerConnection.Any) => {
+    if (global.servers.health[ServerConnection.key(connection)]?.healthy === false) return
+    options.onSelect?.()
+    navigate("/")
+    queueMicrotask(() => server.setActive(ServerConnection.key(connection)))
+  }
+
+  return { ...collection, selection: { select } }
+}
+
+export type ServerDomainController = ReturnType<typeof useServerDomainController>

packages/app/src/components/server/server-management.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { ServerConnection } from "@/context/servers"
+import { ServerConnection } from "@/context/server"
 import { createServerHealthPreview, replaceServerConnection, type ServerFormValues } from "./server-management"
 
 function deferred<T>() {
@@ -65,17 +65,20 @@ describe("replaceServerConnection", () => {
     const calls: string[] = []
 
     replaceServerConnection(ServerConnection.key(original), next, {
+      active: () => ServerConnection.key(original),
       removeTabs: (key) => calls.push(`tabs:${key}`),
       add: (server) => {
         calls.push(`add:${ServerConnection.key(server)}`)
         return server
       },
+      setActive: (key) => calls.push(`active:${key}`),
       remove: (key) => calls.push(`remove:${key}`),
     })
 
     expect(calls).toEqual([
       "tabs:https://old.example.com",
       "add:https://new.example.com",
+      "active:https://new.example.com",
       "remove:https://old.example.com",
     ])
   })
@@ -84,8 +87,10 @@ describe("replaceServerConnection", () => {
     const removed: ServerConnection.Key[] = []
 
     replaceServerConnection(ServerConnection.key(original), next, {
+      active: () => ServerConnection.key(original),
       removeTabs: () => {},
       add: () => undefined,
+      setActive: () => {},
       remove: (key) => removed.push(key),
     })
 

packages/app/src/components/server/server-management.ts

@@ -1,4 +1,4 @@
-import { normalizeServerUrl, ServerConnection } from "@/context/servers"
+import { normalizeServerUrl, ServerConnection } from "@/context/server"
 import type { ServerHealth } from "@/utils/server-health"
 
 export type ServerFormValues = {
@@ -42,13 +42,18 @@ export function replaceServerConnection(
   originalKey: ServerConnection.Key,
   next: ServerConnection.Http,
   operations: {
+    active: () => ServerConnection.Key | undefined
     removeTabs: (key: ServerConnection.Key) => void
     add: (server: ServerConnection.Http) => ServerConnection.Any | undefined
+    setActive: (key: ServerConnection.Key) => void
     remove: (key: ServerConnection.Key) => void
   },
 ) {
+  const active = operations.active()
   operations.removeTabs(originalKey)
   const added = operations.add(next)
   if (!added) return
+  const nextActive = active === originalKey ? ServerConnection.key(added) : active
+  if (nextActive) operations.setActive(nextActive)
   operations.remove(originalKey)
 }

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

@@ -4,7 +4,7 @@ import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { type Component, Show } from "solid-js"
 import type { ServerActionsController } from "@/components/server/server-management-controller"
 import { useLanguage } from "@/context/language"
-import { ServerConnection } from "@/context/servers"
+import { ServerConnection } from "@/context/server"
 
 export const ServerRowMenu: Component<{
   server: ServerConnection.Any

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

@@ -11,7 +11,7 @@ import {
   Show,
 } from "solid-js"
 import { useLanguage } from "@/context/language"
-import { type ServerConnection, serverName } from "@/context/servers"
+import { type ServerConnection, serverName } from "@/context/server"
 import type { ServerHealth } from "@/utils/server-health"
 
 interface ServerRowProps extends ParentProps {
@@ -96,16 +96,13 @@ export function ServerRow(props: ServerRowProps) {
             {(conn) => (
               <div class="flex flex-row gap-3">
                 <span>
-                  <Show
-                    when={conn().http.username}
-                    fallback={<span class="text-text-weaker">{language.t("server.row.noUsername")}</span>}
-                  >
+                  {conn().http.username ? (
                     <span class="text-text-weak">{conn().http.username}</span>
-                  </Show>
+                  ) : (
+                    <span class="text-text-weaker">{language.t("server.row.noUsername")}</span>
+                  )}
                 </span>
-                <Show when={conn().http.password}>
-                  <span class="text-text-weak">••••••••</span>
-                </Show>
+                {conn().http.password && <span class="text-text-weak">••••••••</span>}
               </div>
             )}
           </Show>

packages/app/src/components/session/open-in-app.tsx

@@ -2,9 +2,9 @@ import { createEffect, createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
+import { useServer } from "@/context/server"
 import { Persist, persisted } from "@/utils/persist"
 import { showToast } from "@/utils/toast"
-import { useServer } from "@/context/server"
 
 export const OPEN_APPS = [
   "vscode",
@@ -169,7 +169,7 @@ export function useOpenInApp(input: { directory: () => string }) {
     app: undefined as OpenApp | undefined,
   })
 
-  const canOpen = createMemo(() => platform.platform === "desktop" && !!platform.openPath && server.isLocal)
+  const canOpen = createMemo(() => platform.platform === "desktop" && !!platform.openPath && server.isLocal())
   const current = createMemo(
     () =>
       options().find((o) => o.id === prefs.app) ??

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

@@ -1,12 +1,32 @@
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { createMemo, Show } from "solid-js"
+import { AppIcon } from "@opencode-ai/ui/app-icon"
+import { Button } from "@opencode-ai/ui/button"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Keybind } from "@opencode-ai/ui/keybind"
+import { Spinner } from "@opencode-ai/ui/spinner"
+import { showToast } from "@/utils/toast"
+import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
+import { getFilename } from "@opencode-ai/core/util/path"
+import { createEffect, createMemo, createSignal, For, onMount, Show } from "solid-js"
+import { createStore } from "solid-js/store"
 import { createMediaQuery } from "@solid-primitives/media"
 import { Portal } from "solid-js/web"
 import { useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
+import { useLayout } from "@/context/layout"
+import { usePlatform } from "@/context/platform"
+import { useServer } from "@/context/server"
 import { useSettings } from "@/context/settings"
+import { useSync } from "@/context/sync"
+import { useTerminal } from "@/context/terminal"
+import { focusTerminalById } from "@/pages/session/helpers"
 import { useSessionLayout } from "@/pages/session/session-layout"
-import { StatusPopoverV2 } from "../status-popover"
+import { messageAgentColor } from "@/utils/agent"
+import { decode64 } from "@/utils/base64"
+import { fileManagerApp } from "@/utils/file-manager"
+import { Persist, persisted } from "@/utils/persist"
+import { StatusPopover, StatusPopoverV2 } from "../status-popover"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
@@ -14,15 +34,206 @@ import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { reviewTooltipKeybind } from "../command-tooltip-keybind"
 import { useTitlebarRightMount } from "../titlebar"
 
+const OPEN_APPS = [
+  "vscode",
+  "cursor",
+  "zed",
+  "textmate",
+  "antigravity",
+  "finder",
+  "terminal",
+  "iterm2",
+  "ghostty",
+  "warp",
+  "xcode",
+  "android-studio",
+  "powershell",
+  "sublime-text",
+] as const
+
+type OpenApp = (typeof OPEN_APPS)[number]
+type OS = "macos" | "windows" | "linux" | "unknown"
+
+const MAC_APPS = [
+  {
+    id: "vscode",
+    label: "session.header.open.app.vscode",
+    icon: "vscode",
+    openWith: "Visual Studio Code",
+  },
+  { id: "cursor", label: "session.header.open.app.cursor", icon: "cursor", openWith: "Cursor" },
+  { id: "zed", label: "session.header.open.app.zed", icon: "zed", openWith: "Zed" },
+  { id: "textmate", label: "session.header.open.app.textmate", icon: "textmate", openWith: "TextMate" },
+  {
+    id: "antigravity",
+    label: "session.header.open.app.antigravity",
+    icon: "antigravity",
+    openWith: "Antigravity",
+  },
+  { id: "terminal", label: "session.header.open.app.terminal", icon: "terminal", openWith: "Terminal" },
+  { id: "iterm2", label: "session.header.open.app.iterm2", icon: "iterm2", openWith: "iTerm" },
+  { id: "ghostty", label: "session.header.open.app.ghostty", icon: "ghostty", openWith: "Ghostty" },
+  { id: "warp", label: "session.header.open.app.warp", icon: "warp", openWith: "Warp" },
+  { id: "xcode", label: "session.header.open.app.xcode", icon: "xcode", openWith: "Xcode" },
+  {
+    id: "android-studio",
+    label: "session.header.open.app.androidStudio",
+    icon: "android-studio",
+    openWith: "Android Studio",
+  },
+  {
+    id: "sublime-text",
+    label: "session.header.open.app.sublimeText",
+    icon: "sublime-text",
+    openWith: "Sublime Text",
+  },
+] as const
+
+const WINDOWS_APPS = [
+  { id: "vscode", label: "session.header.open.app.vscode", icon: "vscode", openWith: "code" },
+  { id: "cursor", label: "session.header.open.app.cursor", icon: "cursor", openWith: "cursor" },
+  { id: "zed", label: "session.header.open.app.zed", icon: "zed", openWith: "zed" },
+  {
+    id: "powershell",
+    label: "session.header.open.app.powershell",
+    icon: "powershell",
+    openWith: "powershell",
+  },
+  {
+    id: "sublime-text",
+    label: "session.header.open.app.sublimeText",
+    icon: "sublime-text",
+    openWith: "Sublime Text",
+  },
+] as const
+
+const LINUX_APPS = [
+  { id: "vscode", label: "session.header.open.app.vscode", icon: "vscode", openWith: "code" },
+  { id: "cursor", label: "session.header.open.app.cursor", icon: "cursor", openWith: "cursor" },
+  { id: "zed", label: "session.header.open.app.zed", icon: "zed", openWith: "zed" },
+  {
+    id: "sublime-text",
+    label: "session.header.open.app.sublimeText",
+    icon: "sublime-text",
+    openWith: "Sublime Text",
+  },
+] as const
+
+const detectOS = (platform: ReturnType<typeof usePlatform>): OS => {
+  if (platform.platform === "desktop" && platform.os) return platform.os
+  if (typeof navigator !== "object") return "unknown"
+  const value = navigator.platform || navigator.userAgent
+  if (/Mac/i.test(value)) return "macos"
+  if (/Win/i.test(value)) return "windows"
+  if (/Linux/i.test(value)) return "linux"
+  return "unknown"
+}
+
+const showRequestError = (language: ReturnType<typeof useLanguage>, err: unknown) => {
+  showToast({
+    variant: "error",
+    title: language.t("common.requestFailed"),
+    description: err instanceof Error ? err.message : String(err),
+  })
+}
+
 export function SessionHeader() {
+  const layout = useLayout()
   const command = useCommand()
+  const server = useServer()
+  const platform = usePlatform()
   const language = useLanguage()
   const settings = useSettings()
-  const { view } = useSessionLayout()
+  const sync = useSync()
+  const terminal = useTerminal()
+  const { params, view } = useSessionLayout()
 
+  const projectDirectory = createMemo(() => decode64(params.dir) ?? "")
+  const project = createMemo(() => {
+    const directory = projectDirectory()
+    if (!directory) return
+    return layout.projects.list().find((p) => p.worktree === directory || p.sandboxes?.includes(directory))
+  })
+  const name = createMemo(() => {
+    const current = project()
+    if (current) return current.name || getFilename(current.worktree)
+    return getFilename(projectDirectory())
+  })
+  const hotkey = createMemo(() => command.keybind("file.open"))
+  const os = createMemo(() => detectOS(platform))
+  const isV2 = settings.general.newLayoutDesigns
+  const search = settings.visibility.search
   const status = settings.visibility.status
   const isDesktop = createMediaQuery("(min-width: 768px)")
 
+  const [exists, setExists] = createStore<Partial<Record<OpenApp, boolean>>>({
+    finder: true,
+  })
+
+  const apps = createMemo(() => {
+    if (os() === "macos") return MAC_APPS
+    if (os() === "windows") return WINDOWS_APPS
+    return LINUX_APPS
+  })
+
+  const fileManager = createMemo(() => fileManagerApp(os()))
+
+  createEffect(() => {
+    if (platform.platform !== "desktop") return
+    if (!platform.checkAppExists) return
+
+    const list = apps()
+
+    setExists(Object.fromEntries(list.map((app) => [app.id, undefined])) as Partial<Record<OpenApp, boolean>>)
+
+    void Promise.all(
+      list.map((app) =>
+        Promise.resolve(platform.checkAppExists?.(app.openWith))
+          .then((value) => Boolean(value))
+          .catch(() => false)
+          .then((ok) => [app.id, ok] as const),
+      ),
+    ).then((entries) => {
+      setExists(Object.fromEntries(entries) as Partial<Record<OpenApp, boolean>>)
+    })
+  })
+
+  const options = createMemo(() => {
+    return [
+      { id: "finder", label: language.t(fileManager().label), icon: fileManager().icon },
+      ...apps()
+        .filter((app) => exists[app.id])
+        .map((app) => ({ ...app, label: language.t(app.label) })),
+    ] as const
+  })
+
+  const toggleTerminal = () => {
+    const next = !view().terminal.opened()
+    view().terminal.toggle()
+    if (!next) return
+
+    const id = terminal.active()
+    if (!id) return
+    focusTerminalById(id)
+  }
+
+  const [prefs, setPrefs] = persisted(Persist.global("open.app"), createStore({ app: "finder" as OpenApp }))
+  const [menu, setMenu] = createStore({ open: false })
+  const [openRequest, setOpenRequest] = createStore({
+    app: undefined as OpenApp | undefined,
+  })
+
+  const canOpen = createMemo(() => platform.platform === "desktop" && !!platform.openPath && server.isLocal())
+  const current = createMemo(
+    () =>
+      options().find((o) => o.id === prefs.app) ??
+      options()[0] ??
+      ({ id: "finder", label: fileManager().label, icon: fileManager().icon } as const),
+  )
+  const opening = createMemo(() => openRequest.app !== undefined)
+  const tint = createMemo(() =>
+    messageAgentColor(params.id ? sync().data.message[params.id] : undefined, sync().data.agent),
+  )
   const v2ActionsState = createMemo<SessionHeaderV2ActionsState>(() => ({
     statusVisible: status(),
     statusLabel: language.t("status.popover.trigger"),
@@ -33,16 +244,275 @@ export function SessionHeader() {
     onReviewToggle: () => view().reviewPanel.toggle(),
   }))
 
+  const selectApp = (app: OpenApp) => {
+    if (!options().some((item) => item.id === app)) return
+    setPrefs("app", app)
+  }
+
+  const openDir = (app: OpenApp) => {
+    if (opening() || !canOpen() || !platform.openPath) return
+    const directory = projectDirectory()
+    if (!directory) return
+
+    const item = options().find((o) => o.id === app)
+    const openWith = item && "openWith" in item ? item.openWith : undefined
+    setOpenRequest("app", app)
+    platform
+      .openPath(directory, openWith)
+      .catch((err: unknown) => showRequestError(language, err))
+      .finally(() => {
+        setOpenRequest("app", undefined)
+      })
+  }
+
+  const copyPath = () => {
+    const directory = projectDirectory()
+    if (!directory) return
+    navigator.clipboard
+      .writeText(directory)
+      .then(() => {
+        showToast({
+          variant: "success",
+          icon: "circle-check",
+          title: language.t("session.share.copy.copied"),
+          description: directory,
+        })
+      })
+      .catch((err: unknown) => showRequestError(language, err))
+  }
+
+  const [centerMount, setCenterMount] = createSignal<HTMLElement | null>(null)
   const rightMount = useTitlebarRightMount()
+  onMount(() => {
+    setCenterMount(document.getElementById("opencode-titlebar-center"))
+  })
 
   return (
-    <Show when={rightMount()} keyed>
-      {(mount) => (
-        <Portal mount={mount}>
-          <SessionHeaderV2Actions state={v2ActionsState()} />
-        </Portal>
-      )}
-    </Show>
+    <>
+      <Show when={search() && centerMount()} keyed>
+        {(mount) => (
+          <Portal mount={mount}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="small"
+              class="hidden md:flex w-[240px] max-w-full min-w-0 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-panel shadow-none cursor-default"
+              onClick={() => command.trigger("file.open")}
+              aria-label={language.t("session.header.searchFiles")}
+            >
+              <div class="flex min-w-0 flex-1 items-center overflow-visible">
+                <span class="flex-1 min-w-0 text-12-regular text-text-weak truncate text-left">
+                  {language.t("session.header.search.placeholder", {
+                    project: name(),
+                  })}
+                </span>
+              </div>
+
+              <Show when={hotkey()} keyed>
+                {(keybind) => (
+                  <Keybind class="shrink-0 !border-0 !bg-transparent !shadow-none px-0 text-text-weaker">
+                    {keybind}
+                  </Keybind>
+                )}
+              </Show>
+            </Button>
+          </Portal>
+        )}
+      </Show>
+      <Show when={rightMount()} keyed>
+        {(mount) => (
+          <Portal mount={mount}>
+            <Show
+              when={isV2}
+              fallback={
+                <div class="flex items-center gap-2">
+                  <Show when={projectDirectory()}>
+                    <div class="hidden xl:flex items-center">
+                      <Show
+                        when={canOpen()}
+                        fallback={
+                          <div class="flex h-[24px] box-border items-center rounded-md border border-border-weak-base bg-surface-panel overflow-hidden">
+                            <Button
+                              variant="ghost"
+                              class="rounded-none h-full py-0 pr-3 pl-0.5 gap-1.5 border-none shadow-none"
+                              onClick={copyPath}
+                              aria-label={language.t("session.header.open.copyPath")}
+                            >
+                              <Icon name="copy" size="small" class="text-icon-base" />
+                              <span class="text-12-regular text-text-strong">
+                                {language.t("session.header.open.copyPath")}
+                              </span>
+                            </Button>
+                          </div>
+                        }
+                      >
+                        <div class="flex items-center">
+                          <div class="flex h-[24px] box-border items-center rounded-md border border-border-weak-base bg-surface-panel overflow-hidden">
+                            <Button
+                              variant="ghost"
+                              class="rounded-none h-full px-0.5 border-none shadow-none disabled:!cursor-default"
+                              classList={{
+                                "bg-surface-raised-base-active": opening(),
+                              }}
+                              onClick={() => openDir(current().id)}
+                              disabled={opening()}
+                              aria-label={language.t("session.header.open.ariaLabel", { app: current().label })}
+                            >
+                              <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
+                                <Show when={opening()} fallback={<AppIcon id={current().icon} />}>
+                                  <Spinner class="size-3.5" style={{ color: tint() ?? "var(--icon-base)" }} />
+                                </Show>
+                              </div>
+                            </Button>
+                            <DropdownMenu
+                              gutter={4}
+                              placement="bottom-end"
+                              open={menu.open}
+                              onOpenChange={(open) => setMenu("open", open)}
+                            >
+                              <DropdownMenu.Trigger
+                                as={IconButton}
+                                icon="chevron-down"
+                                variant="ghost"
+                                disabled={opening()}
+                                class="rounded-none h-full w-[20px] p-0 border-none shadow-none data-[expanded]:bg-surface-raised-base-active disabled:!cursor-default"
+                                classList={{
+                                  "bg-surface-raised-base-active": opening(),
+                                }}
+                                aria-label={language.t("session.header.open.menu")}
+                              />
+                              <DropdownMenu.Portal>
+                                <DropdownMenu.Content class="[&_[data-slot=dropdown-menu-item]]:pl-1 [&_[data-slot=dropdown-menu-radio-item]]:pl-1 [&_[data-slot=dropdown-menu-radio-item]+[data-slot=dropdown-menu-radio-item]]:mt-1">
+                                  <DropdownMenu.Group>
+                                    <DropdownMenu.GroupLabel class="!px-1 !py-1">
+                                      {language.t("session.header.openIn")}
+                                    </DropdownMenu.GroupLabel>
+                                    <DropdownMenu.RadioGroup
+                                      class="mt-1"
+                                      value={current().id}
+                                      onChange={(value) => {
+                                        if (!OPEN_APPS.includes(value as OpenApp)) return
+                                        selectApp(value as OpenApp)
+                                      }}
+                                    >
+                                      <For each={options()}>
+                                        {(o) => (
+                                          <DropdownMenu.RadioItem
+                                            value={o.id}
+                                            disabled={opening()}
+                                            onSelect={() => {
+                                              setMenu("open", false)
+                                              openDir(o.id)
+                                            }}
+                                          >
+                                            <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
+                                              <AppIcon id={o.icon} />
+                                            </div>
+                                            <DropdownMenu.ItemLabel>{o.label}</DropdownMenu.ItemLabel>
+                                            <DropdownMenu.ItemIndicator>
+                                              <Icon name="check-small" size="small" class="text-icon-weak" />
+                                            </DropdownMenu.ItemIndicator>
+                                          </DropdownMenu.RadioItem>
+                                        )}
+                                      </For>
+                                    </DropdownMenu.RadioGroup>
+                                  </DropdownMenu.Group>
+                                  <DropdownMenu.Separator />
+                                  <DropdownMenu.Item
+                                    onSelect={() => {
+                                      setMenu("open", false)
+                                      copyPath()
+                                    }}
+                                  >
+                                    <div class="flex size-5 shrink-0 items-center justify-center">
+                                      <Icon name="copy" size="small" class="text-icon-weak" />
+                                    </div>
+                                    <DropdownMenu.ItemLabel>
+                                      {language.t("session.header.open.copyPath")}
+                                    </DropdownMenu.ItemLabel>
+                                  </DropdownMenu.Item>
+                                </DropdownMenu.Content>
+                              </DropdownMenu.Portal>
+                            </DropdownMenu>
+                          </div>
+                        </div>
+                      </Show>
+                    </div>
+                  </Show>
+                  <div class="flex items-center gap-1">
+                    <Show when={status()}>
+                      <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
+                        <StatusPopover />
+                      </Tooltip>
+                    </Show>
+                    <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"
+                      >
+                        <Icon size="small" name={view().terminal.opened() ? "terminal-active" : "terminal"} />
+                      </Button>
+                    </TooltipKeybind>
+
+                    <div class="hidden md:flex items-center gap-1 shrink-0">
+                      <TooltipKeybind
+                        title={language.t("command.review.toggle")}
+                        keybind={command.keybind("review.toggle")}
+                      >
+                        <Button
+                          variant="ghost"
+                          class="group/review-toggle titlebar-icon w-8 h-6 p-0 box-border"
+                          onClick={() => view().reviewPanel.toggle()}
+                          aria-label={language.t("command.review.toggle")}
+                          aria-expanded={view().reviewPanel.opened()}
+                          aria-controls="review-panel"
+                        >
+                          <Icon size="small" name={view().reviewPanel.opened() ? "review-active" : "review"} />
+                        </Button>
+                      </TooltipKeybind>
+
+                      <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"
+                        >
+                          <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>
+              }
+            >
+              <SessionHeaderV2Actions state={v2ActionsState()} />
+            </Show>
+          </Portal>
+        )}
+      </Show>
+    </>
   )
 }
 
@@ -57,6 +527,8 @@ type SessionHeaderV2ActionsState = {
 }
 
 function SessionHeaderV2Actions(props: { state: SessionHeaderV2ActionsState }) {
+  const language = useLanguage()
+
   return (
     <div class="flex items-center gap-2">
       <Show when={props.state.statusVisible}>

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

@@ -12,7 +12,7 @@ import { FileVisual } from "./session-sortable-tab"
 
 export function SortableTabV2(props: {
   tab: string
-  index: number
+  index: () => number
   temporary?: boolean
   onTabClose: (tab: string) => void
   onTabDoubleClick?: (tab: string) => void
@@ -26,7 +26,7 @@ export function SortableTabV2(props: {
       return props.tab
     },
     get index() {
-      return props.index
+      return props.index()
     },
   })
   const path = createMemo(() => file.pathFromTab(props.tab))

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

@@ -14,7 +14,7 @@ import { focusTerminalById } from "@/pages/session/helpers"
 
 export function SortableTerminalTabV2(props: {
   terminal: LocalPTY
-  index: number
+  index: () => number
   newLayout: boolean
   onClose?: () => void
 }): JSX.Element {
@@ -25,7 +25,7 @@ export function SortableTerminalTabV2(props: {
       return props.terminal.id
     },
     get index() {
-      return props.index
+      return props.index()
     },
   })
   const [store, setStore] = createStore({

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

@@ -1,6 +1,10 @@
-import { For, Show, createMemo, lazy, onCleanup } from "solid-js"
+import { Component, For, Show, createMemo, lazy, onCleanup, onMount } from "solid-js"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
+import { Button } from "@opencode-ai/ui/button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { TextField } from "@opencode-ai/ui/text-field"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
@@ -9,6 +13,7 @@ import fuzzysort from "fuzzysort"
 import { DEFAULT_PALETTE_KEYBIND, formatKeybind, parseKeybind, useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
+import { SettingsList } from "./settings-list"
 import { SettingsListV2 } from "./settings-v2/parts/list"
 
 const IconV2 = lazy(() => import("@opencode-ai/ui/v2/icon").then((module) => ({ default: module.Icon })))
@@ -196,6 +201,69 @@ function filteredFor(
   return out
 }
 
+function useKeyCapture(input: {
+  active: () => string | null
+  stop: () => void
+  set: (id: string, keybind: string) => void
+  used: () => Map<string, { id: string; title: string }[]>
+  language: ReturnType<typeof useLanguage>
+}) {
+  onMount(() => {
+    const handle = (event: KeyboardEvent) => {
+      const id = input.active()
+      if (!id) return
+
+      event.preventDefault()
+      event.stopPropagation()
+      event.stopImmediatePropagation()
+
+      if (event.key === "Escape") {
+        input.stop()
+        return
+      }
+
+      const clear =
+        (event.key === "Backspace" || event.key === "Delete") &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        !event.altKey &&
+        !event.shiftKey
+      if (clear) {
+        input.set(id, "none")
+        input.stop()
+        return
+      }
+
+      const next = recordKeybind(event)
+      if (!next) return
+
+      const conflicts = new Map<string, string>()
+      for (const sig of signatures(next)) {
+        for (const item of input.used().get(sig) ?? []) {
+          if (item.id === id) continue
+          conflicts.set(item.id, item.title)
+        }
+      }
+
+      if (conflicts.size > 0) {
+        showToast({
+          title: input.language.t("settings.shortcuts.conflict.title"),
+          description: input.language.t("settings.shortcuts.conflict.description", {
+            keybind: formatKeybind(next, input.language.t),
+            titles: [...conflicts.values()].join(", "),
+          }),
+        })
+        return
+      }
+
+      input.set(id, next)
+      input.stop()
+    }
+
+    makeEventListener(document, "keydown", handle, { capture: true })
+  })
+}
+
 export function createKeybindSettingsController(
   input: {
     command: Pick<CommandContext, "catalog" | "options" | "keybinds">
@@ -342,7 +410,7 @@ export function createKeybindSettingsController(
   }
 }
 
-export function SettingsKeybinds() {
+function SettingsKeybindsV2() {
   const command = useCommand()
   const settings = useSettings()
   const controller = createKeybindSettingsController({
@@ -356,9 +424,9 @@ export function SettingsKeybinds() {
       filtered={controller.catalog.filtered}
       title={controller.catalog.title}
       keybind={controller.catalog.keybind}
-      active={controller.capture.active()}
+      active={controller.capture.active}
       onCapture={controller.capture.toggle}
-      hasOverrides={controller.settings.hasOverrides()}
+      hasOverrides={controller.settings.hasOverrides}
       onReset={controller.settings.reset}
     />
   )
@@ -369,9 +437,9 @@ function SettingsKeybindsV2View(props: {
   filtered: (query: string) => Map<KeybindGroup, string[]>
   title: (id: string) => string
   keybind: (id: string) => string
-  active: string | null
+  active: () => string | null
   onCapture: (id: string) => void
-  hasOverrides: boolean
+  hasOverrides: () => boolean
   onReset: () => void
 }) {
   const language = useLanguage()
@@ -384,7 +452,7 @@ function SettingsKeybindsV2View(props: {
       <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
         <div class="settings-v2-tab-header-row">
           <h2 class="settings-v2-tab-title">{language.t("settings.shortcuts.title")}</h2>
-          <ButtonV2 variant="ghost" onClick={props.onReset} disabled={!props.hasOverrides}>
+          <ButtonV2 variant="ghost" onClick={props.onReset} disabled={!props.hasOverrides()}>
             {language.t("settings.shortcuts.reset.button")}
           </ButtonV2>
         </div>
@@ -430,12 +498,12 @@ function SettingsKeybindsV2View(props: {
                             data-keybind-id={id}
                             classList={{
                               "settings-v2-keybind-button": true,
-                              "settings-v2-keybind-button--active": props.active === id,
+                              "settings-v2-keybind-button--active": props.active() === id,
                             }}
                             onClick={() => props.onCapture(id)}
                           >
                             <Show
-                              when={props.active === id}
+                              when={props.active() === id}
                               fallback={props.keybind(id) || language.t("settings.shortcuts.unassigned")}
                             >
                               {language.t("settings.shortcuts.pressKeys")}
@@ -460,3 +528,254 @@ function SettingsKeybindsV2View(props: {
     </>
   )
 }
+
+export const SettingsKeybinds: Component<{ v2?: boolean }> = (props) => {
+  if (props.v2) return <SettingsKeybindsV2 />
+
+  const command = useCommand()
+  const language = useLanguage()
+  const settings = useSettings()
+
+  const [store, setStore] = createStore({
+    active: null as string | null,
+    filter: "",
+  })
+
+  const stop = () => {
+    if (!store.active) return
+    setStore("active", null)
+    command.keybinds(true)
+  }
+
+  const start = (id: string) => {
+    if (store.active === id) {
+      stop()
+      return
+    }
+
+    if (store.active) stop()
+
+    setStore("active", id)
+    command.keybinds(false)
+  }
+
+  const map = createMemo(() => keybinds(settings.current.keybinds))
+
+  const hasOverrides = createMemo(() => Object.values(map()).some((x) => typeof x === "string"))
+
+  const resetAll = () => {
+    stop()
+    settings.keybinds.resetAll()
+    showToast({
+      title: language.t("settings.shortcuts.reset.toast.title"),
+      description: language.t("settings.shortcuts.reset.toast.description"),
+    })
+  }
+
+  const list = createMemo(() => {
+    language.locale()
+    return listFor(command, map(), language.t("command.palette"))
+  })
+
+  const title = (id: string) => list().get(id)?.title ?? ""
+
+  const grouped = createMemo(() => groupedFor(list()))
+
+  const filtered = createMemo(() => {
+    return filteredFor(store.filter, list(), grouped(), (id) => command.keybind(id) || "")
+  })
+
+  const hasResults = createMemo(() => {
+    for (const group of GROUPS) {
+      const ids = filtered().get(group) ?? []
+      if (ids.length > 0) return true
+    }
+    return false
+  })
+
+  const used = createMemo(() => {
+    const map = new Map<string, { id: string; title: string }[]>()
+
+    const add = (key: string, value: { id: string; title: string }) => {
+      const list = map.get(key)
+      if (!list) {
+        map.set(key, [value])
+        return
+      }
+      list.push(value)
+    }
+
+    const palette = settings.keybinds.get(PALETTE_ID) ?? DEFAULT_PALETTE_KEYBIND
+    for (const sig of signatures(palette)) {
+      add(sig, { id: PALETTE_ID, title: title(PALETTE_ID) })
+    }
+
+    const valueFor = (id: string) => {
+      const custom = settings.keybinds.get(id)
+      if (typeof custom === "string") return custom
+
+      const live = command.options.find((x) => x.id === id)
+      if (live?.keybind) return live.keybind
+
+      const meta = command.catalog.find((x) => x.id === id)
+      return meta?.keybind
+    }
+
+    for (const id of list().keys()) {
+      if (id === PALETTE_ID) continue
+      for (const sig of signatures(valueFor(id))) {
+        add(sig, { id, title: title(id) })
+      }
+    }
+
+    return map
+  })
+
+  const setKeybind = (id: string, keybind: string) => settings.keybinds.set(id, keybind)
+
+  useKeyCapture({
+    active: () => store.active,
+    stop,
+    set: setKeybind,
+    used,
+    language,
+  })
+
+  onCleanup(() => {
+    if (store.active) command.keybinds(true)
+  })
+
+  const emptyResults = (
+    <Show when={store.filter && !hasResults()}>
+      <div
+        classList={{
+          "flex flex-col items-center justify-center py-12 text-center": !props.v2,
+          "settings-v2-shortcuts-status": props.v2,
+        }}
+      >
+        <span
+          classList={{
+            "text-14-regular text-text-weak": !props.v2,
+          }}
+        >
+          {language.t("settings.shortcuts.search.empty")}
+        </span>
+        <Show when={store.filter}>
+          <span
+            classList={{
+              "text-14-regular text-text-strong mt-1": !props.v2,
+              "settings-v2-shortcuts-status-filter": props.v2,
+            }}
+          >
+            &quot;{store.filter}&quot;
+          </span>
+        </Show>
+      </div>
+    </Show>
+  )
+
+  const List = props.v2 ? SettingsListV2 : SettingsList
+
+  const groups = (
+    <div
+      classList={{
+        "settings-v2-shortcuts flex flex-col gap-8": props.v2,
+        "flex flex-col gap-8 max-w-[720px]": !props.v2,
+      }}
+    >
+      <For each={GROUPS}>
+        {(group) => (
+          <Show when={(filtered().get(group) ?? []).length > 0}>
+            <div
+              classList={{
+                "settings-v2-section": props.v2,
+                "flex flex-col gap-1": !props.v2,
+              }}
+            >
+              <h3
+                classList={{
+                  "settings-v2-section-title": props.v2,
+                  "text-14-medium text-text-strong pb-2": !props.v2,
+                }}
+              >
+                {language.t(groupKey[group])}
+              </h3>
+              <List>
+                <For each={filtered().get(group) ?? []}>
+                  {(id) => (
+                    <div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
+                      <span
+                        classList={{
+                          "text-14-regular text-text-strong": !props.v2,
+                        }}
+                      >
+                        {title(id)}
+                      </span>
+                      <button
+                        type="button"
+                        data-keybind-id={id}
+                        classList={{
+                          "settings-v2-keybind-button": props.v2,
+                          "settings-v2-keybind-button--active": props.v2 && store.active === id,
+                          "h-8 px-3 rounded-md text-12-regular": !props.v2,
+                          "bg-surface-base text-text-subtle hover:bg-surface-raised-base-hover active:bg-surface-raised-base-active":
+                            !props.v2 && store.active !== id,
+                          "border border-border-weak-base bg-surface-inset-base text-text-weak":
+                            !props.v2 && store.active === id,
+                        }}
+                        onClick={() => start(id)}
+                      >
+                        <Show
+                          when={store.active === id}
+                          fallback={command.keybind(id) || language.t("settings.shortcuts.unassigned")}
+                        >
+                          {language.t("settings.shortcuts.pressKeys")}
+                        </Show>
+                      </button>
+                    </div>
+                  )}
+                </For>
+              </List>
+            </div>
+          </Show>
+        )}
+      </For>
+      {emptyResults}
+    </div>
+  )
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+      <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
+        <div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
+          <div class="flex items-center justify-between gap-4">
+            <h2 class="text-16-medium text-text-strong">{language.t("settings.shortcuts.title")}</h2>
+            <Button size="small" variant="secondary" onClick={resetAll} disabled={!hasOverrides()}>
+              {language.t("settings.shortcuts.reset.button")}
+            </Button>
+          </div>
+
+          <div class="flex items-center gap-2 px-3 h-9 rounded-lg bg-surface-base">
+            <Icon name="magnifying-glass" class="text-icon-weak-base flex-shrink-0" />
+            <TextField
+              variant="ghost"
+              type="text"
+              value={store.filter}
+              onChange={(v) => setStore("filter", v)}
+              placeholder={language.t("settings.shortcuts.search.placeholder")}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              class="flex-1"
+            />
+            <Show when={store.filter}>
+              <IconButton icon="circle-x" variant="ghost" onClick={() => setStore("filter", "")} />
+            </Show>
+          </div>
+        </div>
+      </div>
+      {groups}
+    </div>
+  )
+}

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

@@ -13,7 +13,7 @@ import {
 } from "@/components/server/server-management"
 import { useGlobal } from "@/context/global"
 import { useLanguage } from "@/context/language"
-import { normalizeServerUrl, ServerConnection, useServers } from "@/context/servers"
+import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
 import { useTabs } from "@/context/tabs"
 import { useCheckServerHealth } from "@/utils/server-health"
 import "./settings-v2.css"
@@ -146,7 +146,7 @@ export const DialogServerV2: Component<{
 }
 
 function createFormController(options: { onSelect?: () => void } = {}) {
-  const server = useServers()
+  const server = useServer()
   const tabs = useTabs()
   const global = useGlobal()
   const language = useLanguage()
@@ -173,7 +173,8 @@ function createFormController(options: { onSelect?: () => void } = {}) {
     })
   }
   const allServers = () => {
-    return server.list
+    if (!server.current || server.list.includes(server.current)) return server.list
+    return [server.current, ...server.list]
   }
   const editing = createMemo(() =>
     allServers().find((item) => item.type === "http" && item.http.url === store.originalUrl),
@@ -181,8 +182,10 @@ function createFormController(options: { onSelect?: () => void } = {}) {
   const add = (connection: ServerConnection.Http) => server.add(connection)
   const replace = (originalKey: ServerConnection.Key, next: ServerConnection.Http) =>
     replaceServerConnection(originalKey, next, {
+      active: () => server.key,
       removeTabs: (key) => tabs.removeServer(key),
       add,
+      setActive: (key) => server.setActive(key),
       remove: (key) => server.remove(key),
     })
 

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

@@ -1,10 +1,10 @@
-import { Component, createMemo, createSignal, Show, startTransition } from "solid-js"
+import { Component, createMemo, createSignal, startTransition } from "solid-js"
 import { Dialog } from "@opencode-ai/ui/v2/dialog-v2"
 import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
 import { Icon } from "@opencode-ai/ui/icon"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
-import { SettingsGeneral } from "./general"
+import { SettingsGeneralV2 } from "./general"
 import { SettingsKeybinds } from "../settings-keybinds"
 import { SettingsProvidersV2 } from "./providers"
 import { SettingsModelsV2 } from "./models"
@@ -13,10 +13,7 @@ import { SettingsServersV2 } from "./servers"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLayout } from "@/context/layout"
 import { useTabs } from "@/context/tabs"
-import { ServerProvider } from "@/context/server"
-import { ServerConnection, useServers } from "@/context/servers"
-import { useServerCtx } from "@/context/global"
-import { ModelsProvider } from "@/context/models"
+import { useServerSync } from "@/context/server-sync"
 
 export const DialogSettings: Component<{
   sessionID?: string
@@ -26,36 +23,18 @@ export const DialogSettings: Component<{
   const platform = usePlatform()
   const dialog = useDialog()
   const layout = useLayout()
-  const servers = useServers()
   const tabs = useTabs()
+  const serverSync = useServerSync()
   const [tab, setTab] = createSignal(props.defaultValue ?? "general")
-  const server = createMemo(() => {
-    const route = layout.route()
-    switch (route.type) {
-      case "draft": {
-        const draft = tabs.store.find((item) => item.type === "draft" && item.draftID === route.draftID)
-        return servers.list.find((item) => ServerConnection.key(item) === draft?.server)
-      }
-      case "session": {
-        return servers.list.find((item) => ServerConnection.key(item) === route.server)
-      }
-      case "home": {
-        return servers.list.find((item) => ServerConnection.key(item) === layout.home.selection().server)
-      }
-    }
-  })
-  const serverCtx = useServerCtx(server)
   const directory = createMemo(() => {
     const route = layout.route()
-    switch (route.type) {
-      case "draft": {
-        const draft = tabs.store.find((item) => item.type === "draft" && item.draftID === route.draftID)
-        return draft?.type === "draft" ? draft.directory : undefined
-      }
-      case "session": {
-        return serverCtx()?.sync.session.get(route.sessionId)?.location.directory
-      }
+    if (route.type === "dir-new-sesssion") return route.dir
+    if (route.type === "draft") {
+      const draft = tabs.store.find((item) => item.type === "draft" && item.draftID === route.draftID)
+      return draft?.type === "draft" ? draft.directory : undefined
     }
+    if (route.type === "session") return serverSync().session.get(route.sessionId)?.location.directory
+    return undefined
   })
 
   const showProviders = () => {
@@ -115,28 +94,20 @@ export const DialogSettings: Component<{
           </div>
         </TabsV2.List>
         <TabsV2.Content value="general" class="settings-v2-panel">
-          <SettingsGeneral server={server()} sessionID={props.sessionID} />
+          <SettingsGeneralV2 sessionID={props.sessionID} />
         </TabsV2.Content>
         <TabsV2.Content value="shortcuts" class="settings-v2-panel">
-          <SettingsKeybinds />
+          <SettingsKeybinds v2 />
         </TabsV2.Content>
         <TabsV2.Content value="servers" class="settings-v2-panel">
           <SettingsServersV2 />
         </TabsV2.Content>
-        <Show when={server()} keyed>
-          {(server) => (
-            <ServerProvider conn={server}>
-              <TabsV2.Content value="providers" class="settings-v2-panel">
-                <SettingsProvidersV2 directory={directory()} onBack={showProviders} />
-              </TabsV2.Content>
-              <TabsV2.Content value="models" class="settings-v2-panel">
-                <ModelsProvider directory={directory}>
-                  <SettingsModelsV2 />
-                </ModelsProvider>
-              </TabsV2.Content>
-            </ServerProvider>
-          )}
-        </Show>
+        <TabsV2.Content value="providers" class="settings-v2-panel">
+          <SettingsProvidersV2 directory={directory} onBack={showProviders} />
+        </TabsV2.Content>
+        <TabsV2.Content value="models" class="settings-v2-panel">
+          <SettingsModelsV2 />
+        </TabsV2.Content>
       </TabsV2>
     </Dialog>
   )

packages/app/src/components/settings-v2/general-controllers.ts

@@ -17,24 +17,17 @@ import {
 } from "@/context/settings"
 import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
 import { createSoundPreviewController, type ShellOption } from "./general-controller-behavior"
-import { ServerConnection } from "@/context/servers"
-import { useGlobal, useServerCtx } from "@/context/global"
 
 export { createShellOptions, createSoundPreviewController } from "./general-controller-behavior"
 export type { ShellOption, ShellSelectOption } from "./general-controller-behavior"
 
-export function createPermissionScopeController(
-  server: Accessor<ServerConnection.Any | undefined>,
-  sessionID: Accessor<string | undefined>,
-) {
-  const serverCtx = useServerCtx(server)
-  const permission = () => serverCtx()?.permission
-
+export function createPermissionScopeController(sessionID: Accessor<string | undefined>) {
+  const permission = usePermission()
+  const serverSync = useServerSync()
   const directory = createMemo(() => {
-    const s = server()
     const id = sessionID()
-    if (!s || !id) return undefined
-    return serverCtx()?.sync.session.lineage.peek(id)?.session.location.directory
+    if (!id) return undefined
+    return serverSync().session.lineage.peek(id)?.session.location.directory
   })
 
   return {
@@ -42,21 +35,21 @@ export function createPermissionScopeController(
       const id = sessionID()
       const dir = directory()
       if (!id || !dir) return false
-      return permission()?.isAutoAccepting(id, dir)
+      return permission.isAutoAccepting(id, dir)
     }),
     enabled: createMemo(() => !!directory()),
     set: (checked: boolean) => {
       const id = sessionID()
       const dir = directory()
       if (!id || !dir) return
-      if (checked) return permission()?.enableAutoAccept(id, dir)
-      permission()?.disableAutoAccept(id, dir)
+      if (checked) return permission.enableAutoAccept(id, dir)
+      permission.disableAutoAccept(id, dir)
     },
   }
 }
 
-export function createShellSettingsController(server: Accessor<ServerConnection.Any | undefined>) {
-  const serverCtx = useServerCtx(server)
+export function createShellSettingsController() {
+  const serverSync = useServerSync()
   const [shells] = createResource(
     async () => {
       // TODO: Dax is considering the V2 shell discovery and config update APIs.
@@ -65,7 +58,7 @@ export function createShellSettingsController(server: Accessor<ServerConnection.
     },
     { initialValue: [] as ShellOption[] },
   )
-  const current = createMemo(() => serverCtx()?.sync.data.config.shell ?? "")
+  const current = createMemo(() => serverSync().data.config.shell ?? "")
 
   return {
     shells: () => shells.latest,
@@ -73,7 +66,7 @@ export function createShellSettingsController(server: Accessor<ServerConnection.
     select: (value: string) => {
       if (value === current()) return
       // TODO: Dax is considering the V2 shell discovery and config update APIs.
-      // void serverSync.updateConfig({ shell: value })
+      // void serverSync().updateConfig({ shell: value })
     },
   }
 }

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

@@ -24,7 +24,6 @@ import {
   type SoundSettingsController,
 } from "./general-controllers"
 import "./settings-v2.css"
-import { ServerConnection } from "@/context/servers"
 
 const schemeOptions: ("system" | "light" | "dark")[] = ["system", "light", "dark"]
 const fontSettings = {
@@ -270,20 +269,16 @@ const LanguageSetting = () => {
   )
 }
 
-export const SettingsGeneral: Component<{
+export const SettingsGeneralV2: Component<{
   sessionID?: string
-  server?: ServerConnection.Any
 }> = (props) => {
   const language = useLanguage()
   const platform = usePlatform()
   const settings = useSettings()
   const mobile = createMediaQuery("(max-width: 767px)")
   const updater = useUpdaterAction()
-  const permissionScope = createPermissionScopeController(
-    () => props.server,
-    () => props.sessionID,
-  )
-  const shell = createShellSettingsController(() => props.server)
+  const permissionScope = createPermissionScopeController(() => props.sessionID)
+  const shell = createShellSettingsController()
   const appearance = createAppearanceSettingsController()
   const sounds = createSoundSettingsController()
   const desktop = createMemo(() => platform.platform === "desktop")
@@ -517,6 +512,7 @@ export const SettingsGeneral: Component<{
       <div class="settings-v2-tab-header">
         <h2 class="settings-v2-tab-title">{language.t("settings.tab.general")}</h2>
       </div>
+
       <div class="settings-v2-tab-body">
         <GeneralSection />
 

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

@@ -24,7 +24,7 @@ export const SettingsModelsV2: Component = () => {
   const models = useModels()
   const serverSdk = useServerSDK()
   const [store, setStore] = persisted(
-    Persist.serverGlobal(serverSdk.scope, "settings-v2.models.providers"),
+    Persist.serverGlobal(serverSdk().scope, "settings-v2.models.providers"),
     createStore({ collapsed: {} as Record<string, boolean> }),
   )
 

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

@@ -4,7 +4,7 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { showToast } from "@/utils/toast"
 import { popularProviders, useProviders } from "@/hooks/use-providers"
-import { createMemo, type Component, For, Show } from "solid-js"
+import { createMemo, type Accessor, type Component, For, Show } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { useServerSDK } from "@/context/server-sdk"
 import { useServerSync } from "@/context/server-sync"
@@ -30,14 +30,14 @@ const PROVIDER_NOTES = [
 const PROVIDER_ICON_SIZE = 16
 
 export const SettingsProvidersV2: Component<{
-  directory: string | undefined
+  directory: Accessor<string | undefined>
   onBack?: () => void
 }> = (props) => {
   const dialog = useDialog()
   const language = useLanguage()
   const serverSdk = useServerSDK()
   const serverSync = useServerSync()
-  const providers = useProviders(() => props.directory)
+  const providers = useProviders(props.directory)
   const providerConnect = useProviderConnectController({ onBack: props.onBack })
 
   const connect = (provider?: string) => {
@@ -85,7 +85,7 @@ export const SettingsProvidersV2: Component<{
   const note = (id: string) => PROVIDER_NOTES.find((item) => item.match(id))?.key
 
   const isConfigCustom = (providerID: string) => {
-    const provider = serverSync.data.config.provider?.[providerID]
+    const provider = serverSync().data.config.provider?.[providerID]
     if (!provider) return false
     if (provider.npm !== "@ai-sdk/openai-compatible") return false
     if (!provider.models || Object.keys(provider.models).length === 0) return false
@@ -94,11 +94,11 @@ export const SettingsProvidersV2: Component<{
 
   const disableProvider = async (providerID: string, name: string) => {
     return
-    const before = serverSync.data.config.disabled_providers ?? []
+    const before = serverSync().data.config.disabled_providers ?? []
     const next = before.includes(providerID) ? before : [...before, providerID]
-    serverSync.set("config", "disabled_providers", next)
+    serverSync().set("config", "disabled_providers", next)
 
-    await serverSync
+    await serverSync()
       .updateConfig({ disabled_providers: next })
       .then(() => {
         showToast({
@@ -109,21 +109,21 @@ export const SettingsProvidersV2: Component<{
         })
       })
       .catch((err: unknown) => {
-        serverSync.set("config", "disabled_providers", before)
+        serverSync().set("config", "disabled_providers", before)
         const message = err instanceof Error ? err.message : String(err)
         showToast({ title: language.t("common.requestFailed"), description: message })
       })
   }
 
   const disconnect = async (providerID: string, name: string) => {
-    const location = props.directory ? { directory: props.directory } : undefined
-    await serverSdk.api.integration
-      .get({ integrationID: providerID, location })
+    const location = props.directory() ? { directory: props.directory() } : undefined
+    await serverSdk()
+      .api.integration.get({ integrationID: providerID, location })
       .then(async (integration) => {
         const credentials = integration.data?.connections.filter((item) => item.type === "credential") ?? []
         if (credentials.length === 0) throw new Error(`No removable credentials found for ${name}`)
         await Promise.all(
-          credentials.map((credential) => serverSdk.api.credential.remove({ credentialID: credential.id, location })),
+          credentials.map((credential) => serverSdk().api.credential.remove({ credentialID: credential.id, location })),
         )
         showToast({
           variant: "success",

packages/app/src/components/settings-v2/servers.tsx

@@ -9,7 +9,7 @@ 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/servers"
+import { ServerConnection, serverName } from "@/context/server"
 import { useServerCollectionController } from "../server/server-management-controller"
 import { DialogServerV2 } from "./dialog-server-v2"
 import { SettingsListV2 } from "./parts/list"

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

@@ -1,17 +1,25 @@
 import { Switch } from "@opencode-ai/ui/switch"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { showToast } from "@/utils/toast"
-import { createEffect, createMemo, createResource, For, type JSXElement, onCleanup, Show } from "solid-js"
+import {
+  type Accessor,
+  createEffect,
+  createMemo,
+  createResource,
+  For,
+  type JSXElement,
+  onCleanup,
+  Show,
+} from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
-import { ServerConnection, useServers } from "@/context/servers"
+import { ServerConnection, useServer } from "@/context/server"
 import { useSync } from "@/context/sync"
 import { type ServerHealth } from "@/utils/server-health"
 import { useGlobal } from "@/context/global"
 import { useMcpToggle } from "@/context/mcp"
 import { useSDK } from "@/context/sdk"
-import { useServer } from "@/context/server"
 
 const pluginEmptyMessage = (value: string, file: string): JSXElement => {
   const parts = value.split(file)
@@ -101,9 +109,12 @@ type ServerStatusItem = {
   onSelect: () => void
 }
 
-export function StatusPopoverBody(props: { shown: boolean }) {
+export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
   const sync = useSync()
   const sdk = useSDK()
+  const global = useGlobal()
+  const server = useServer()
+  const platform = usePlatform()
   const language = useLanguage()
 
   const fail = (err: unknown) => {
@@ -114,18 +125,29 @@ export function StatusPopoverBody(props: { shown: boolean }) {
     })
   }
 
+  createEffect(() => {
+    if (!props.shown()) return
+  })
+
   let dialogRun = 0
+  let dialogDead = false
   onCleanup(() => {
+    dialogDead = true
     dialogRun += 1
   })
+  const sortedServers = createMemo(() => {
+    const list = global.servers.list()
+    return listServersByHealth(list, server.key, global.servers.health)
+  })
   const toggleMcp = useMcpToggle()
+  const defaultServer = useDefaultServerKey(platform.getDefaultServer)
   const mcpNames = createMemo(() => Object.keys(sync().data.mcp ?? {}).sort((a, b) => a.localeCompare(b)))
   const mcpStatus = (name: string) => sync().data.mcp?.[name]?.status
   const mcpConnected = createMemo(() => mcpNames().filter((name) => mcpStatus(name) === "connected").length)
   const lspItems = createMemo(() => sync().data.lsp ?? [])
   const lspCount = createMemo(() => lspItems().length)
   const [pluginList] = createResource(
-    () => (props.shown ? sdk().directory : undefined),
+    () => (props.shown() ? sdk().directory : undefined),
     (directory) =>
       sdk()
         .api.plugin.list({ location: { directory } })

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

@@ -5,7 +5,7 @@ import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { Popover } from "@opencode-ai/ui/popover"
 import { Suspense, createMemo, createSignal, lazy, Show, type JSX } from "solid-js"
 import { useLanguage } from "@/context/language"
-import { ServerConnection, useServers } from "@/context/servers"
+import { ServerConnection, useServer } from "@/context/server"
 import { useServerSDK } from "@/context/server-sdk"
 import { useSync } from "@/context/sync"
 import { useGlobal } from "@/context/global"
@@ -14,7 +14,6 @@ import {
   hasServiceNeedingAttention,
   serverStatusDotClass,
 } from "./status-popover-indicator"
-import { useServer } from "@/context/server"
 
 const Body = lazy(() => import("./status-popover-body").then((x) => ({ default: x.StatusPopoverBody })))
 
@@ -75,7 +74,7 @@ export function StatusPopover() {
             <div class="w-[360px] h-14 rounded-xl bg-background-strong shadow-[var(--shadow-lg-border-base)]" />
           }
         >
-          <Body shown={shown()} />
+          <Body shown={shown} />
         </Suspense>
       </Show>
     </Popover>
@@ -83,12 +82,16 @@ export function StatusPopover() {
 }
 
 export function StatusPopoverV2() {
+  return <DirectoryStatusPopover />
+}
+
+function DirectoryStatusPopover() {
   const language = useLanguage()
-  const server = useServer()
+  const server = useServerSDK()
   const global = useGlobal()
   const sync = useSync()
   const [shown, setShown] = createSignal(false)
-  const serverHealth = () => global.servers.health[server.key]?.healthy
+  const serverHealth = () => global.servers.health[ServerConnection.key(server().server)]?.healthy
   const ready = createMemo(() => serverHealth() === false || (sync().data.mcp_ready && sync().data.lsp_ready))
   const attention = createMemo(() =>
     hasServiceNeedingAttention({
@@ -111,7 +114,7 @@ export function StatusPopoverV2() {
     onOpenChange: setShown,
     body: () => (
       <StatusPopoverBody shown={shown()}>
-        <Body shown={shown()} />
+        <Body shown={shown} />
       </StatusPopoverBody>
     ),
   }))

packages/app/src/components/terminal.tsx

@@ -175,7 +175,6 @@ export const Terminal = (props: TerminalProps) => {
   const settings = useSettings()
   const theme = useTheme()
   const language = useLanguage()
-  // Intentional mount-time capture: the imperative xterm/WebSocket lifecycle needs stable values, and Terminal remounts when the SDK scope changes.
   const directory = sdk().directory
   const url = sdk().url
   let container!: HTMLDivElement

packages/app/src/components/titlebar-session-events.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import type { ServerConnection } from "@/context/servers"
+import type { ServerConnection } from "@/context/server"
 import { readSessionTabsRemovedDetail, SESSION_TABS_REMOVED_EVENT } from "./titlebar-session-events"
 
 const remote = "remote" as ServerConnection.Key

packages/app/src/components/titlebar-session-events.ts

@@ -1,9 +1,9 @@
-import { ServerConnection } from "@/context/servers"
+import type { ServerConnection } from "@/context/server"
 
 export const SESSION_TABS_REMOVED_EVENT = "opencode:session-tabs-removed"
 
 export type SessionTabsRemovedDetail = {
-  server: ServerConnection.Key
+  server?: ServerConnection.Key
   directory: string
   sessionIDs: string[]
 }
@@ -19,15 +19,16 @@ export function readSessionTabsRemovedDetail(event: Event): SessionTabsRemovedDe
   if (!detail || typeof detail !== "object") return undefined
   if (!("directory" in detail)) return undefined
   if (!("sessionIDs" in detail)) return undefined
-  if (!("server" in detail) || typeof detail.server !== "string") return undefined
   if (typeof detail.directory !== "string") return undefined
   if (!Array.isArray(detail.sessionIDs)) return undefined
+  if ("server" in detail && detail.server !== undefined && typeof detail.server !== "string") return undefined
 
   const sessionIDs = detail.sessionIDs.filter((id): id is string => typeof id === "string")
   if (sessionIDs.length === 0) return undefined
 
   return {
-    server: ServerConnection.Key.make(detail.server),
+    server:
+      "server" in detail && typeof detail.server === "string" ? (detail.server as ServerConnection.Key) : undefined,
     directory: detail.directory,
     sessionIDs,
   }

packages/app/src/components/titlebar-tab-nav.tsx

@@ -4,9 +4,9 @@ import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { createMutation } from "@tanstack/solid-query"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { useGlobal, useServerCtx } from "@/context/global"
+import { useGlobal } from "@/context/global"
 import { useLanguage } from "@/context/language"
-import { ServerConnection, serverName, useServers } from "@/context/servers"
+import { ServerConnection, serverName } from "@/context/server"
 import { displayName, projectForSession } from "@/pages/layout/helpers"
 import { SessionTabAvatar } from "@/pages/layout/session-tab-avatar"
 import type { SessionInfo } from "@opencode-ai/client/promise"
@@ -22,14 +22,14 @@ export function TabNavItem(props: {
   ref?: Ref<HTMLDivElement>
   href: string
   server: ServerConnection.Key
-  session: SessionInfo | undefined
+  session: () => SessionInfo | undefined
   fallbackTitle?: string
   onRename: (title: string) => Promise<void>
   onClose: () => void
   onNavigate: () => void
   active?: boolean
   forceTruncate?: boolean
-  suppressNavigation?: boolean
+  suppressNavigation?: () => boolean
   dragging?: boolean
   pressed?: boolean
   hidden?: boolean
@@ -46,38 +46,41 @@ export function TabNavItem(props: {
     event.stopPropagation()
     props.onClose()
   }
-  const servers = useServers()
-  const serverCtx = useServerCtx(() => servers.list.find((item) => ServerConnection.key(item) === props.server))
+  const global = useGlobal()
+  const serverCtx = createMemo(() => {
+    const conn = global.servers.list().find((item) => ServerConnection.key(item) === props.server)
+    if (conn) return global.ensureServerCtx(conn)
+  })
   const project = createMemo(() => {
-    const session = props.session
+    const session = props.session()
     if (!session) return
     return projectForSession(session, serverCtx()?.projects.list() ?? [])
   })
   const title = createMemo(() => {
-    const session = props.session
+    const session = props.session()
     return session ? sessionLabel(session) : props.fallbackTitle
   })
 
   const projectName = createMemo(() => {
-    const session = props.session
+    const session = props.session()
     if (!session) return
     return displayName(project() ?? { worktree: session.location.directory })
   })
   const previewPath = createMemo(() => {
-    const session = props.session
+    const session = props.session()
     if (!session) return
     const home = serverCtx()?.sync.data.path.home
     return home ? session.location.directory.replace(home, "~") : session.location.directory
   })
   // Only label the server when multiple servers are connected.
   const serverLabel = createMemo(() => {
-    if (servers.list.length <= 1) return
-    const conn = servers.list.find((item) => ServerConnection.key(item) === props.server)
+    if (global.servers.list().length <= 1) return
+    const conn = global.servers.list().find((item) => ServerConnection.key(item) === props.server)
     return conn ? serverName(conn) : undefined
   })
 
   const [popoverOpen, setPopoverOpen] = createSignal(false)
-  const previewBlocked = () => !!props.dragging || editing() || !!props.pressed || !props.session
+  const previewBlocked = () => !!props.dragging || editing() || !!props.pressed || !props.session()
 
   const measureTitleOverflow = () => {
     if (!titleEl || editing()) {
@@ -118,7 +121,7 @@ export function TabNavItem(props: {
   const closeRename = async (save: boolean) => {
     if (rename.isPending || !editing()) return
 
-    const original = props.session?.title ?? ""
+    const original = props.session()?.title ?? ""
     const next = (titleEl.textContent ?? "").trim()
 
     titleEl.scrollLeft = 0
@@ -143,7 +146,7 @@ export function TabNavItem(props: {
     event.preventDefault()
     event.stopPropagation()
     if (!canOpenTabRename(props.dragging, editing(), rename.isPending)) return
-    const session = props.session
+    const session = props.session()
     if (!session) return
     titleEl.textContent = session.title ?? ""
     setEditing(true)
@@ -210,7 +213,7 @@ export function TabNavItem(props: {
           // Navigate on mousedown to shave the press-release delay off tab switches.
           if (event.button !== 0) return
           if (editing()) return
-          if (props.suppressNavigation) return
+          if (props.suppressNavigation?.()) return
           props.onNavigate()
         }}
         onClick={(event) => {
@@ -218,14 +221,14 @@ export function TabNavItem(props: {
           // Mouse navigation already happened on mousedown; detail 0 means keyboard activation.
           if (event.detail > 0) return
           if (editing()) return
-          if (props.suppressNavigation) return
+          if (props.suppressNavigation?.()) return
           props.onNavigate()
         }}
         class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base group-data-[editing='true']:text-v2-text-text-base [-webkit-user-drag:none]"
       >
         <span data-slot="project-avatar-slot" class="flex size-4 shrink-0 items-center justify-center">
           <Show
-            when={props.session}
+            when={props.session()}
             keyed
             fallback={
               <span class="block size-4 rounded-[3px] border border-v2-border-border-muted" aria-hidden="true" />
@@ -264,7 +267,7 @@ export function TabNavItem(props: {
             }
             if (event.key !== "Escape") return
             event.preventDefault()
-            titleEl.textContent = props.session?.title ?? ""
+            titleEl.textContent = props.session()?.title ?? ""
             void closeRename(false)
           }}
           onBlur={() => void closeRename(true)}
@@ -305,7 +308,7 @@ export function TabNavItem(props: {
       }}
       data={{
         projectName: projectName(),
-        title: props.session?.title,
+        title: props.session()?.title,
         path: previewPath(),
         serverName: serverLabel(),
       }}
@@ -320,7 +323,7 @@ export function DraftTabItem(props: {
   active?: boolean
   onNavigate: () => void
   onClose: () => void
-  suppressNavigation?: boolean
+  suppressNavigation?: () => boolean
   dragging?: boolean
   pressed?: boolean
   hidden?: boolean
@@ -363,14 +366,14 @@ export function DraftTabItem(props: {
         onMouseDown={(event) => {
           // Navigate on mousedown to shave the press-release delay off tab switches.
           if (event.button !== 0) return
-          if (props.suppressNavigation) return
+          if (props.suppressNavigation?.()) return
           props.onNavigate()
         }}
         onClick={(event) => {
           event.preventDefault()
           // Mouse navigation already happened on mousedown; detail 0 means keyboard activation.
           if (event.detail > 0) return
-          if (props.suppressNavigation) return
+          if (props.suppressNavigation?.()) return
           props.onNavigate()
         }}
         class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base [-webkit-user-drag:none]"

packages/app/src/components/titlebar-tab-strip.tsx

@@ -8,9 +8,9 @@ import { RestrictToHorizontalAxis } from "@dnd-kit/abstract/modifiers"
 import { RestrictToElement } from "@dnd-kit/dom/modifiers"
 import { arrayMove } from "@dnd-kit/helpers"
 import { tabHref, tabKey, type SessionTab, type Tab } from "@/context/tabs"
-import { ServerConnection } from "@/context/servers"
+import { ServerConnection } from "@/context/server"
 import { DraftTabItem, TabNavItem } from "@/components/titlebar-tab-nav"
-import { useGlobal, useServerCtx, type ServerCtx } from "@/context/global"
+import { useGlobal, type ServerCtx } from "@/context/global"
 import { useLanguage } from "@/context/language"
 import { useCommand } from "@/context/command"
 import { useTabs } from "@/context/tabs"
@@ -24,10 +24,10 @@ import type { SessionInfo } from "@opencode-ai/client/promise"
 function SessionTabSlot(props: {
   tab: SessionTab
   id: string
-  index: number
-  active: boolean
+  index: () => number
+  active: () => boolean
   forceTruncate: boolean
-  session: SessionInfo | undefined
+  session: () => SessionInfo | undefined
   fallbackTitle?: string
   onRename: (title: string) => Promise<void>
   onNavigate: (element: HTMLDivElement) => void
@@ -38,7 +38,7 @@ function SessionTabSlot(props: {
       return props.id
     },
     get index() {
-      return props.index
+      return props.index()
     },
   })
   let ref!: HTMLDivElement
@@ -48,7 +48,7 @@ function SessionTabSlot(props: {
       ref={sortable.ref}
       data-titlebar-tab-slot
       data-tab-key={props.id}
-      data-active={props.active}
+      data-active={props.active()}
       class="relative flex w-56 min-w-7 max-w-56 flex-shrink"
     >
       <TabNavItem
@@ -62,7 +62,7 @@ function SessionTabSlot(props: {
         onRename={props.onRename}
         onNavigate={() => props.onNavigate(ref)}
         onClose={props.onClose}
-        active={props.active}
+        active={props.active()}
         forceTruncate={props.forceTruncate}
         dragging={sortable.isDragSource()}
       />
@@ -73,34 +73,34 @@ function SessionTabSlot(props: {
 function SessionTabEntry(props: {
   tab: SessionTab
   id: string
-  index: number
-  active: boolean
+  index: () => number
+  active: () => boolean
   forceTruncate: boolean
-  serverCtx: ServerCtx | undefined
+  serverCtx: () => ServerCtx | undefined
   onVisibleChange: (visible: boolean) => void
   onNavigate: (element: HTMLDivElement) => void
   onClose: () => void
 }) {
   const tabs = useTabs()
   const language = useLanguage()
-  const sdk = createMemo(() => props.serverCtx?.sdk ?? null)
-  const cachedSession = createMemo(() => props.serverCtx?.sync.session.peek(props.tab.sessionId))
+  const sdk = createMemo(() => props.serverCtx()?.sdk ?? null)
+  const cachedSession = createMemo(() => props.serverCtx()?.sync.session.peek(props.tab.sessionId))
   const persisted = createMemo(() => tabs.info[props.id])
   const [loadedSession] = createResource(
     () => {
-      const ctx = props.serverCtx
+      const ctx = props.serverCtx()
       return ctx ? { id: props.tab.sessionId, ctx } : null
     },
     ({ id, ctx }) => ctx.sync.session.resolve(id).catch(() => undefined),
   )
   const session = createMemo(() => cachedSession() ?? loadedSession())
-  const missingSession = createMemo(() => !!props.serverCtx && !loadedSession.loading && !session())
+  const missingSession = createMemo(() => !!props.serverCtx() && !loadedSession.loading && !session())
   const visible = createMemo(() => !!session() || missingSession() || !!persisted()?.title)
   let prefetched = false
 
   const rename = async (title: string) => {
     const value = session()
-    const ctx = props.serverCtx
+    const ctx = props.serverCtx()
     if (!value || !ctx) return
 
     ctx.sync.session.remember({ ...value, title })
@@ -108,7 +108,7 @@ function SessionTabEntry(props: {
       await ctx.sdk.api.session.rename({ sessionID: value.id, title })
     } catch (err) {
       const current = session()
-      const currentCtx = props.serverCtx
+      const currentCtx = props.serverCtx()
       if (current && currentCtx) currentCtx.sync.session.remember({ ...current, title: value.title })
       showToast({
         title: language.t("common.requestFailed"),
@@ -120,7 +120,7 @@ function SessionTabEntry(props: {
   createEffect(() => props.onVisibleChange(visible()))
 
   createEffect(() => {
-    const ctx = props.serverCtx
+    const ctx = props.serverCtx()
     const value = session()
     if (!ctx || !value || prefetched) return
     prefetched = true
@@ -157,7 +157,7 @@ function SessionTabEntry(props: {
         index={props.index}
         active={props.active}
         forceTruncate={props.forceTruncate}
-        session={session()}
+        session={session}
         fallbackTitle={persisted()?.title ?? (missingSession() ? language.t("session.tab.unknown") : undefined)}
         onRename={rename}
         onNavigate={props.onNavigate}
@@ -170,8 +170,8 @@ function SessionTabEntry(props: {
 function DraftTabSlot(props: {
   tab: Extract<Tab, { type: "draft" }>
   id: string
-  index: number
-  active: boolean
+  index: () => number
+  active: () => boolean
   title: string
   onNavigate: (element: HTMLDivElement) => void
   onClose: () => void
@@ -181,7 +181,7 @@ function DraftTabSlot(props: {
       return props.id
     },
     get index() {
-      return props.index
+      return props.index()
     },
   })
   let ref!: HTMLDivElement
@@ -191,7 +191,7 @@ function DraftTabSlot(props: {
       ref={sortable.ref}
       data-titlebar-tab-slot
       data-tab-key={props.id}
-      data-active={props.active}
+      data-active={props.active()}
       class="relative flex w-56 min-w-7 max-w-56 flex-shrink"
     >
       <DraftTabItem
@@ -202,7 +202,7 @@ function DraftTabSlot(props: {
         title={props.title}
         onNavigate={() => props.onNavigate(ref)}
         onClose={props.onClose}
-        active={props.active}
+        active={props.active()}
         dragging={sortable.isDragSource()}
       />
     </div>
@@ -211,7 +211,7 @@ function DraftTabSlot(props: {
 
 export function TitlebarTabStrip(props: {
   tabs: Tab[]
-  currentTab: Tab | undefined
+  currentTab: () => Tab | undefined
   forceTruncate: boolean
   onNavigate: (tab: Tab, el?: HTMLDivElement) => void
   onClose: (tab: Tab) => void
@@ -248,7 +248,7 @@ export function TitlebarTabStrip(props: {
   ])
 
   function selectAdjacentTab(offset: -1 | 1) {
-    const current = props.currentTab
+    const current = props.currentTab()
     const key = adjacentTabKey(visibleTabIds(), current ? tabKey(current) : undefined, offset)
     const next = props.tabs.find((tab) => tabKey(tab) === key)
     if (next) props.onNavigate(next)
@@ -339,9 +339,10 @@ export function TitlebarTabStrip(props: {
                 let ref!: HTMLDivElement
                 const visibleIndex = () => visibleTabs().findIndex((item) => tabKey(item) === id)
                 useTabShortcut(visibleIndex, () => props.onNavigate(tab, ref))
-                const serverCtx = useServerCtx(() => {
+                const serverCtx = createMemo(() => {
                   if (tab.type !== "session") return
-                  return global.servers.list().find((item) => ServerConnection.key(item) === tab.server)
+                  const conn = global.servers.list().find((item) => ServerConnection.key(item) === tab.server)
+                  if (conn) return global.ensureServerCtx(conn)
                 })
 
                 if (tab.type === "session") {
@@ -349,10 +350,10 @@ export function TitlebarTabStrip(props: {
                     <SessionTabEntry
                       tab={tab}
                       id={id}
-                      index={visibleIndex()}
-                      active={props.currentTab === tab}
+                      index={visibleIndex}
+                      active={() => props.currentTab() === tab}
                       forceTruncate={props.forceTruncate}
-                      serverCtx={serverCtx()}
+                      serverCtx={serverCtx}
                       onVisibleChange={(visible) => setVisibility(id, visible)}
                       onNavigate={(element) => {
                         ref = element
@@ -367,8 +368,8 @@ export function TitlebarTabStrip(props: {
                   <DraftTabSlot
                     tab={tab}
                     id={id}
-                    index={visibleIndex()}
-                    active={props.currentTab === tab}
+                    index={visibleIndex}
+                    active={() => props.currentTab() === tab}
                     title={language.t("command.session.new")}
                     onNavigate={(element) => {
                       ref = element

packages/app/src/components/titlebar.tsx

@@ -32,8 +32,8 @@ import { TitlebarTabStrip } from "@/components/titlebar-tab-strip"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { createMediaQuery } from "@solid-primitives/media"
 import { readSessionTabsRemovedDetail, SESSION_TABS_REMOVED_EVENT } from "@/components/titlebar-session-events"
-import { useGlobal, useServerCtx } from "@/context/global"
-import { ServerConnection, useServers } from "@/context/servers"
+import { useGlobal } from "@/context/global"
+import { ServerConnection, useServer } from "@/context/server"
 import { tabKey, useTabs } from "@/context/tabs"
 import type { PromptSession } from "@/context/prompt"
 import "./titlebar.css"
@@ -46,8 +46,8 @@ const windowsControlsBaseWidth = 138 // 3 native Windows caption buttons at 46px
 const macTrafficLightsBaseWidth = 84
 
 export type TitlebarUpdate = {
-  version: string | undefined
-  installing: boolean
+  version: () => string | undefined
+  installing: () => boolean
   install: () => void
 }
 
@@ -61,13 +61,15 @@ export function useTitlebarRightMount() {
 }
 
 export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visible: boolean; toggle: () => void } }) {
+  const layout = useLayout()
   const platform = usePlatform()
   const command = useCommand()
   const language = useLanguage()
   const settings = useSettings()
-  const servers = useServers()
+  const server = useServer()
   const navigate = useNavigate()
   const location = useLocation()
+  const params = useParams()
   const useV2Titlebar = createMemo(() => settings.general.newLayoutDesigns())
   const mobile = createMediaQuery("(max-width: 767px)")
   const bottom = createMemo(() => useV2Titlebar() && mobile() && settings.general.mobileTitlebarPosition() === "bottom")
@@ -75,9 +77,11 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
   const mac = createMemo(() => platform.platform === "desktop" && platform.os === "macos")
   const windows = createMemo(() => platform.platform === "desktop" && platform.os === "windows")
   const linux = createMemo(() => platform.platform === "desktop" && platform.os === "linux")
+  const web = createMemo(() => platform.platform === "web")
   const macTrafficLights = createMemo(() => mac() && !platform.windowFullscreen?.())
   const zoom = () => platform.webviewZoom?.() ?? 1
   const titlebarZoom = () => (windows() ? Math.max(zoom(), minTitlebarZoom) : zoom())
+  const counterZoom = () => (windows() && titlebarZoom() < 1 ? 1 / titlebarZoom() : 1)
   const minHeight = () => {
     const height = useV2Titlebar() ? v2TitlebarHeight : legacyTitlebarHeight
     if (mac()) return `${height / zoom()}px`
@@ -93,6 +97,14 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
   })
 
   const path = () => `${location.pathname}${location.search}${location.hash}`
+  const creating = createMemo(() => {
+    const route = layout.route()
+    if (route.type === "draft" || route.type === "dir-new-sesssion") return true
+    if (!params.dir) return false
+    if (params.id) return false
+    const parts = location.pathname.replace(/\/+$/, "").split("/")
+    return parts.at(-1) === "session"
+  })
 
   createEffect(() => {
     const current = path()
@@ -104,9 +116,13 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
     })
   })
 
+  const canBack = createMemo(() => history.index > 0)
+  const canForward = createMemo(() => history.index < history.stack.length - 1)
+  const hasProjects = createMemo(() => layout.projects.list().length > 0)
+  const nav = createMemo(() => (useV2Titlebar() ? settings.general.showNavigation() : true))
   const updateState = createMemo<TitlebarUpdatePillState>(() => {
-    const installing = props.update?.installing ?? false
-    const version = props.update?.version
+    const installing = props.update?.installing() ?? false
+    const version = props.update?.version()
     return {
       visible: version !== undefined || installing,
       installing,
@@ -172,7 +188,7 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
       data-tauri-drag-region
     >
       <Switch>
-        <Match when>
+        <Match when={useV2Titlebar()}>
           {(_) => {
             const layout = useLayout()
             const global = useGlobal()
@@ -184,7 +200,9 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
               () => {
                 const route = layout.route()
                 if (route.type !== "session") return undefined
-                const conn = global.servers.list().find((item) => ServerConnection.key(item) === route.server)
+                const conn = global.servers
+                  .list()
+                  .find((item) => ServerConnection.key(item) === (route.server ?? server.key))
                 return conn ? { route, sdk: global.ensureServerCtx(conn).sdk } : undefined
               },
               ({ route, sdk }) => sdk.api.session.get({ sessionID: route.sessionId }).catch(() => {}),
@@ -227,7 +245,7 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                 const s = session()
                 if (!s) return
                 const sessionId = s.parentID ?? s.id
-                const next = { server: route.server, sessionId }
+                const next = { server: route.server ?? server.key, sessionId }
                 tabsStoreActions.addSessionTab(next)
               }
             })
@@ -240,43 +258,53 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
 
             const openNewTab = () => {
               const route = layout.route()
-              switch (route.type) {
-                case "session": {
-                  const activeSession = session()
-                  if (!activeSession) return
-
-                  const sessionTab = {
-                    type: "session" as const,
-                    server: route.server,
-                    sessionId: activeSession.id,
-                  }
-                  const model = tabs.stateValue<PromptSession>(sessionTab, "prompt")?.model.current()
-                  tabs.newDraft({ server: sessionTab.server, directory: activeSession.location.directory }, "", model)
-                  return
+              const activeSession = session()
+              if (route.type === "session" && activeSession) {
+                const sessionTab = {
+                  type: "session" as const,
+                  server: route.server ?? server.key,
+                  sessionId: activeSession.id,
                 }
-                case "draft": {
-                  const activeTab = currentTab()
-                  if (activeTab?.type !== "draft") return
+                const model = tabs.stateValue<PromptSession>(sessionTab, "prompt")?.model.current()
+                tabs.newDraft({ server: sessionTab.server, directory: activeSession.location.directory }, "", model)
+                return
+              }
 
-                  const model = tabs.stateValue<PromptSession>(activeTab, "prompt")?.model.current()
-                  tabs.newDraft({ server: activeTab.server, directory: activeTab.directory }, "", model)
+              const activeTab = currentTab()
+              if (activeTab?.type === "draft") {
+                const model = tabs.stateValue<PromptSession>(activeTab, "prompt")?.model.current()
+                tabs.newDraft({ server: activeTab.server, directory: activeTab.directory }, "", model)
+                return
+              }
+
+              if (route.type === "home") {
+                const selection = layout.home.selection()
+                const conn = global.servers.list().find((item) => ServerConnection.key(item) === selection.server)
+                const project = conn
+                  ? global
+                      .ensureServerCtx(conn)
+                      .projects.list()
+                      .find((item) => item.worktree === selection.directory)
+                  : undefined
+                if (conn && project) {
+                  tabs.newDraft({ server: ServerConnection.key(conn), directory: project.worktree }, "")
                   return
                 }
-                case "home": {
-                  const selection = layout.home.selection()
-                  const conn = global.servers.list().find((item) => ServerConnection.key(item) === selection.server)
-                  const project = conn
-                    ? global
-                        .ensureServerCtx(conn)
-                        .projects.list()
-                        .find((item) => item.worktree === selection.directory)
-                    : undefined
-                  if (conn && project) {
-                    tabs.newDraft({ server: ServerConnection.key(conn), directory: project.worktree }, "")
-                    return
-                  }
-                }
               }
+
+              const current = layout.projects.list()[0]
+              if (current) {
+                tabs.newDraft({ server: server.key, directory: current.worktree }, "")
+                return
+              }
+
+              const fallback = global.servers.list().flatMap((conn) => {
+                const project = global.ensureServerCtx(conn).projects.list()[0]
+                return project ? [{ server: ServerConnection.key(conn), project }] : []
+              })[0]
+              if (!fallback) return
+
+              tabs.newDraft({ server: fallback.server, directory: fallback.project.worktree }, "")
             }
             const toggleHome = () => tabs.toggleHome({ home: layout.route().type === "home", current: currentTab() })
 
@@ -364,7 +392,7 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
 
                 <TitlebarTabStrip
                   tabs={tabsStore}
-                  currentTab={currentTab()}
+                  currentTab={currentTab}
                   forceTruncate={tabsAreOverflowing()}
                   onOverflowChange={setTabsAreOverflowing}
                   onNavigate={(tab, el) => {
@@ -402,6 +430,158 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
             )
           }}
         </Match>
+        <Match when>
+          <div
+            class="grid h-full min-h-full w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center"
+            style={{ zoom: counterZoom() }}
+          >
+            <div
+              classList={{
+                "flex items-center min-w-0": true,
+                "pl-2": !macTrafficLights(),
+              }}
+            >
+              <Show when={windows() || linux()}>
+                <WindowsAppMenu command={command} platform={platform} />
+              </Show>
+              <Show when={mac()}>
+                <div class="xl:hidden w-10 shrink-0 flex items-center justify-center">
+                  <IconButton
+                    icon="menu"
+                    variant="ghost"
+                    class="titlebar-icon rounded-md"
+                    onClick={layout.mobileSidebar.toggle}
+                    aria-label={language.t("sidebar.menu.toggle")}
+                    aria-expanded={layout.mobileSidebar.opened()}
+                  />
+                </div>
+              </Show>
+              <Show when={!mac()}>
+                <div class="xl:hidden w-[48px] shrink-0 flex items-center justify-center">
+                  <IconButton
+                    icon="menu"
+                    variant="ghost"
+                    class="titlebar-icon rounded-md"
+                    onClick={layout.mobileSidebar.toggle}
+                    aria-label={language.t("sidebar.menu.toggle")}
+                    aria-expanded={layout.mobileSidebar.opened()}
+                  />
+                </div>
+              </Show>
+              <div class="flex items-center gap-1 shrink-0">
+                <TooltipKeybind
+                  class={web() ? "hidden xl:flex shrink-0 ml-14" : "hidden xl:flex shrink-0 ml-2"}
+                  placement="bottom"
+                  title={language.t("command.sidebar.toggle")}
+                  keybind={command.keybind("sidebar.toggle")}
+                >
+                  <Button
+                    variant="ghost"
+                    class="group/sidebar-toggle titlebar-icon w-8 h-6 p-0 box-border"
+                    onClick={layout.sidebar.toggle}
+                    aria-label={language.t("command.sidebar.toggle")}
+                    aria-expanded={layout.sidebar.opened()}
+                  >
+                    <Icon size="small" name={layout.sidebar.opened() ? "sidebar-active" : "sidebar"} />
+                  </Button>
+                </TooltipKeybind>
+                <div class="hidden xl:flex items-center shrink-0">
+                  <Show when={params.dir}>
+                    <div
+                      class="flex items-center shrink-0 w-8 mr-1"
+                      aria-hidden={layout.sidebar.opened() ? "true" : undefined}
+                    >
+                      <div
+                        class="transition-opacity"
+                        classList={{
+                          "opacity-100 duration-120 ease-out": !layout.sidebar.opened(),
+                          "opacity-0 duration-120 ease-in delay-0 pointer-events-none": layout.sidebar.opened(),
+                        }}
+                      >
+                        <TooltipKeybind
+                          placement="bottom"
+                          title={language.t("command.session.new")}
+                          keybind={command.keybind("session.new")}
+                          openDelay={800}
+                        >
+                          <Button
+                            variant="ghost"
+                            class="titlebar-icon w-8 h-6 p-0 box-border"
+                            disabled={layout.sidebar.opened()}
+                            tabIndex={layout.sidebar.opened() ? -1 : undefined}
+                            onClick={() => {
+                              if (!params.dir) return
+                              navigate(`/${params.dir}/session`)
+                            }}
+                            aria-label={language.t("command.session.new")}
+                            aria-current={creating() ? "page" : undefined}
+                          >
+                            <IconV2 name="edit" size="small" />
+                          </Button>
+                        </TooltipKeybind>
+                      </div>
+                    </div>
+                  </Show>
+                  <div
+                    class="flex items-center shrink-0"
+                    classList={{
+                      "ltr:-translate-x-[36px] rtl:translate-x-[36px]": layout.sidebar.opened() && !!params.dir,
+                      "duration-180 ease-out": !layout.sidebar.opened(),
+                      "duration-180 ease-in": layout.sidebar.opened(),
+                    }}
+                  >
+                    <Show when={hasProjects() && nav()}>
+                      <div class="flex items-center gap-0 transition-transform">
+                        <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={800}>
+                          <Button
+                            variant="ghost"
+                            icon="chevron-left"
+                            class="titlebar-icon w-6 h-6 p-0 box-border"
+                            disabled={!canBack()}
+                            onClick={back}
+                            aria-label={language.t("common.goBack")}
+                          />
+                        </Tooltip>
+                        <Tooltip placement="bottom" value={language.t("common.goForward")} openDelay={800}>
+                          <Button
+                            variant="ghost"
+                            icon="chevron-right"
+                            class="titlebar-icon w-6 h-6 p-0 box-border"
+                            disabled={!canForward()}
+                            onClick={forward}
+                            aria-label={language.t("common.goForward")}
+                          />
+                        </Tooltip>
+                      </div>
+                    </Show>
+                    <div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
+                  </div>
+                </div>
+                <ChannelIndicator debugTools={props.debugTools} />
+              </div>
+            </div>
+
+            <div class="min-w-0 flex items-center justify-center pointer-events-none">
+              <div
+                id="opencode-titlebar-center"
+                class="pointer-events-auto min-w-0 flex justify-center w-fit max-w-full"
+              />
+            </div>
+
+            <div
+              classList={{
+                "flex items-center min-w-0 justify-end": true,
+                "pr-2": !windows(),
+              }}
+              data-tauri-drag-region
+            >
+              <div id="opencode-titlebar-right" class="flex items-center gap-1 shrink-0 justify-end" />
+              <Show when={windows()}>
+                <div class="shrink-0" style={{ width: windowsControlsWidth() }} />
+              </Show>
+            </div>
+          </div>
+        </Match>
       </Switch>
     </header>
   )
@@ -477,10 +657,12 @@ function ChannelIndicator(props: { debugTools?: { visible: boolean; toggle: () =
   }
 
   return (
-    <Show when={["local", "beta", "dev"].includes(channel)}>
-      <div class="bg-icon-interactive-base text-[#FFF] font-medium px-2 rounded-sm uppercase font-mono">
-        {channel.toUpperCase()}
-      </div>
-    </Show>
+    <>
+      {["local", "beta", "dev"].includes(channel) && (
+        <div class="bg-icon-interactive-base text-[#FFF] font-medium px-2 rounded-sm uppercase font-mono">
+          {channel.toUpperCase()}
+        </div>
+      )}
+    </>
   )
 }

packages/app/src/components/windows-app-menu.tsx

@@ -1,4 +1,4 @@
-import { For, Show, type JSX } from "solid-js"
+import { Show, type JSX } from "solid-js"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
@@ -50,20 +50,7 @@ export function WindowsAppMenu(props: {
 
   return (
     <DropdownMenu gutter={4} modal={false} placement="bottom-start">
-      <Show
-        when={props.variant === "v2"}
-        fallback={
-          <DropdownMenu.Trigger
-            as={IconButton}
-            icon="menu"
-            variant="ghost"
-            class="titlebar-icon rounded-md shrink-0"
-            aria-label={language.t("desktop.menu.ariaLabel")}
-            onPointerDown={rememberFocus}
-            onKeyDown={rememberFocus}
-          />
-        }
-      >
+      {props.variant === "v2" ? (
         <div
           data-component="desktop-icon-button"
           class="flex h-7 w-9 shrink-0 items-center justify-center rounded-[6px] px-1"
@@ -78,31 +65,39 @@ export function WindowsAppMenu(props: {
             onKeyDown={rememberFocus}
           />
         </div>
-      </Show>
+      ) : (
+        <DropdownMenu.Trigger
+          as={IconButton}
+          icon="menu"
+          variant="ghost"
+          class="titlebar-icon rounded-md shrink-0"
+          aria-label={language.t("desktop.menu.ariaLabel")}
+          onPointerDown={rememberFocus}
+          onKeyDown={rememberFocus}
+        />
+      )}
       <DropdownMenu.Portal>
         <DropdownMenu.Content class="desktop-app-menu">
           <DropdownMenu.Group>
             <DropdownMenu.GroupLabel class="desktop-app-menu-heading">OpenCode</DropdownMenu.GroupLabel>
-            <For each={DESKTOP_MENU.filter((menu) => desktopMenuVisible(menu, "windows"))}>
-              {(menu) => (
-                <DesktopMenuSubmenu label={language.t(menu.labelKey)}>
-                  <For each={menu.items?.filter((entry) => desktopMenuVisible(entry, "windows"))}>
-                    {(entry) => {
-                      // Static menu data: an early return keeps the union narrowing a Show fallback would lose.
-                      if (entry.type === "separator") return <DropdownMenu.Separator />
-                      return (
-                        <DesktopMenuItem
-                          label={entry.labelKey ? language.t(entry.labelKey) : ""}
-                          keybind={entry.command ? props.command.keybind(entry.command) : entry.accelerator?.windows}
-                          disabled={entry.command ? commandDisabled(entry.command) : false}
-                          onSelect={() => runEntry(entry)}
-                        />
-                      )
-                    }}
-                  </For>
-                </DesktopMenuSubmenu>
-              )}
-            </For>
+            {DESKTOP_MENU.filter((menu) => desktopMenuVisible(menu, "windows")).map((menu) => (
+              <DesktopMenuSubmenu label={language.t(menu.labelKey)}>
+                {menu.items
+                  ?.filter((entry) => desktopMenuVisible(entry, "windows"))
+                  .map((entry) =>
+                    entry.type === "separator" ? (
+                      <DropdownMenu.Separator />
+                    ) : (
+                      <DesktopMenuItem
+                        label={entry.labelKey ? language.t(entry.labelKey) : ""}
+                        keybind={entry.command ? props.command.keybind(entry.command) : entry.accelerator?.windows}
+                        disabled={entry.command ? commandDisabled(entry.command) : false}
+                        onSelect={() => runEntry(entry)}
+                      />
+                    ),
+                  )}
+              </DesktopMenuSubmenu>
+            ))}
           </DropdownMenu.Group>
         </DropdownMenu.Content>
       </DropdownMenu.Portal>

packages/app/src/context/comments.tsx

@@ -219,7 +219,7 @@ export const { use: useComments, provider: CommentsProvider } = createSimpleCont
         const decoded = decodeSessionKey(key)
         return createRoot((dispose) => ({
           value: createCommentSession(
-            serverSDK.scope,
+            serverSDK().scope,
             decoded.dir,
             decoded.id === WORKSPACE_KEY ? undefined : decoded.id,
           ),

packages/app/src/context/file.tsx

@@ -66,7 +66,7 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
     const scope = createMemo(() => sdk().directory)
     const path = createPathHelpers(scope)
     const tabs = layout.tabs(() =>
-      SessionStateKey.from(serverSDK.scope, SessionRouteKey.fromRoute(base64Encode(sdk().directory), params.id)),
+      SessionStateKey.from(serverSDK().scope, SessionRouteKey.fromRoute(base64Encode(sdk().directory), params.id)),
     )
 
     const inflight = new Map<string, Promise<void>>()
@@ -123,7 +123,7 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
       })
     })
 
-    const viewCache = createFileViewCache(serverSDK.scope)
+    const viewCache = createFileViewCache(serverSDK().scope)
     const view = createMemo(() => viewCache.load(scope(), params.id))
 
     const ensure = (file: string) => {
@@ -211,8 +211,8 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
     }
 
     const search = (query: string, dirs: "true" | "false", options?: { limit?: number; signal?: AbortSignal }) =>
-      serverSDK.api.file
-        .find(
+      serverSDK()
+        .api.file.find(
           {
             location: { directory: sdk().directory },
             query,

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

@@ -1,5 +1,4 @@
 import { Binary } from "@opencode-ai/core/util/binary"
-import { ProjectDirectories } from "@opencode-ai/schema/project-directories"
 import { produce, reconcile, type SetStoreFunction, type Store } from "solid-js/store"
 import type { Message, Part, Project, Todo } from "@/types"
 import type {
@@ -188,18 +187,6 @@ export function applyDirectoryEvent(input: {
       input.setStore("sessionTotal", (value) => Math.max(0, value - 1))
       break
     }
-    case "project.directory.resolved": {
-      const properties = event.properties as { projectID: string; directory: string; previous: string }
-      input.store.session.forEach((session, index) => {
-        const adopted = ProjectDirectories.adopt(
-          { projectID: session.projectID, directory: session.location.directory },
-          properties,
-        )
-        if (!adopted) return
-        input.setStore("session", index, (current) => ({ ...current, ...adopted }))
-      })
-      break
-    }
     case "session.renamed": {
       const properties = event.properties as { sessionID: string; title: string }
       const result = Binary.search(input.store.session, properties.sessionID, (session) => session.id)

packages/app/src/context/global.tsx

@@ -1,7 +1,7 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { Accessor, createEffect, createMemo, createRoot } from "solid-js"
+import { createEffect, createMemo, createRoot } from "solid-js"
 import { createStore } from "solid-js/store"
-import { createServerProjects, RECENTLY_CLOSED_DISPLAY_LIMIT, ServerConnection, useServers } from "./servers"
+import { createServerProjects, RECENTLY_CLOSED_DISPLAY_LIMIT, ServerConnection, useServer } from "./server"
 import { pathKey } from "@/utils/path-key"
 import { useServerHealth } from "@/utils/server-health"
 import { createServerSdkContext } from "./server-sdk"
@@ -9,13 +9,11 @@ import { createServerSyncContext } from "./server-sync"
 import { getOwner } from "solid-js/web"
 import { QueryClient } from "@tanstack/solid-query"
 import type { ServerScope } from "@/utils/server-scope"
-import { createServerPermissionState } from "./permission"
-import { createServerNotificationState } from "./notification"
 
 export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext({
   name: "Global",
   init: () => {
-    const server = useServers()
+    const server = useServer()
     const serverHealth = useServerHealth(
       () => server.list,
       () => true,
@@ -37,21 +35,23 @@ export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext(
       if (store.settings.serverKey !== key) setStore("settings", "serverKey", key)
     })
 
-    const serverCtxs = new Map<ServerConnection.Key, ReturnType<typeof createServerController>>()
-    const serverCtxDisposers = new Map<ServerConnection.Key, () => void>()
+    const serverCtxs = new Map<
+      ServerConnection.Key,
+      { dispose: () => void; serverCtx: ReturnType<typeof createServerCtx> }
+    >()
 
     const owner = getOwner()
 
     const ensureServerCtx = (conn: ServerConnection.Any) => {
       const key = ServerConnection.key(conn)
       const existing = serverCtxs.get(key)
-      if (existing) return existing
-      const serverCtx = createRoot((dispose) => {
-        serverCtxDisposers.set(key, dispose)
-        return createServerController(conn, server.scope(key), server.projects.forServer(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, serverCtx)
-      return serverCtx
+      serverCtxs.set(key, root)
+      return root.serverCtx
     }
 
     createMemo(() => {
@@ -63,8 +63,8 @@ export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext(
     createEffect(() => {
       for (const [key] of serverCtxs) {
         if (!server.list.find((conn) => ServerConnection.key(conn) === key)) {
-          serverCtxDisposers.get(key)?.()
-          serverCtxDisposers.delete(key)
+          const { dispose } = serverCtxs.get(key)!
+          dispose()
           serverCtxs.delete(key)
         }
       }
@@ -93,26 +93,22 @@ export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext(
   },
 })
 
-function createServerController(
+function createServerCtx(
   conn: ServerConnection.Any,
   scope: ServerScope,
   projects: ReturnType<typeof createServerProjects>,
 ) {
-  const connKey = ServerConnection.key(conn)
-
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
         refetchOnReconnect: false,
-        refetchOnWindowFocus: false,
         refetchOnMount: false,
+        refetchOnWindowFocus: false,
       },
     },
   })
   const sdk = createServerSdkContext(conn, scope)
   const sync = createServerSyncContext(sdk)
-  const permission = createServerPermissionState({ sdk, sync })
-  const notification = createServerNotificationState({ sdk, sync, key: connKey })
 
   function enrich(project: { worktree: string; expanded: boolean }) {
     const [childStore] = sync.child(project.worktree, { bootstrap: false })
@@ -154,22 +150,10 @@ function createServerController(
       list: projectsList,
       recentlyClosed: recentlyClosedList,
     },
-    permission,
-    notification,
   }
 }
 
-export function useServerCtx(server: Accessor<ServerConnection.Any>): Accessor<ServerCtx>
-export function useServerCtx(server: Accessor<ServerConnection.Any | undefined>): Accessor<ServerCtx | undefined>
-export function useServerCtx(server: Accessor<ServerConnection.Any | undefined>) {
-  const global = useGlobal()
-  return () => {
-    const s = server()
-    if (s) return global.ensureServerCtx(s)
-  }
-}
-
-export type ServerCtx = ReturnType<typeof createServerController>
+export type ServerCtx = ReturnType<typeof createServerCtx>
 
 function isLocalHost(url: string) {
   const host = url.replace(/^https?:\/\//, "").split(":")[0]

packages/app/src/context/layout.tsx

@@ -4,10 +4,13 @@ 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 { ServerConnection, useServers } from "./servers"
+import { useServerSDK } from "./server-sdk"
+import { RECENTLY_CLOSED_DISPLAY_LIMIT, ServerConnection, useServer } from "./server"
 import { usePlatform } from "./platform"
 import type { Project } from "@/types"
+import { normalizeProjectInfo } from "./global-sync/utils"
 import { Persist, persisted, removePersisted } from "@/utils/persist"
+import { pathKey } from "@/utils/path-key"
 import { decode64 } from "@/utils/base64"
 import { same } from "@/utils/same"
 import { createScrollPersistence, type SessionScroll } from "./layout-scroll"
@@ -16,6 +19,7 @@ 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"
 import { requireServerKey } from "@/utils/session-route"
+import { type DraftTab, useTabs } from "./tabs"
 import { closeSessionTab, openSessionTab, previewSessionTab, type SessionTabs } from "./layout-tabs"
 
 export { createSessionKeyReader, ensureSessionKey, pruneSessionKeys }
@@ -71,6 +75,13 @@ type SessionView = {
   todoCollapsed?: boolean
 }
 
+type TabHandoff = {
+  scope: ServerScope
+  dir: string
+  id: string
+  at: number
+}
+
 export type LocalProject = Partial<Project> & { worktree: string; expanded: boolean }
 export type HomeProjectSelection = { server: ServerConnection.Key; directory?: string }
 
@@ -80,8 +91,9 @@ export type ReviewPanelSource = "context-button" | "other"
 
 export type LayoutRoute =
   | { type: "home" }
-  | { type: "draft"; draftID: string }
-  | { type: "session"; sessionId: string; server: ServerConnection.Key }
+  | { type: "draft"; draftID: string; server?: ServerConnection.Key }
+  | { type: "dir-new-sesssion"; dir: string; dirBase64: string; server?: ServerConnection.Key }
+  | { type: "session"; sessionId: string; server?: ServerConnection.Key }
 
 const sessionPath = (key: string) => {
   const dir = SessionStateKey.route(key).split("/")[0]
@@ -137,21 +149,33 @@ export const currentRoute = (pathname: string, search: string): LayoutRoute => {
   const dir = decode64(dirBase64)
   if (!dir) return { type: "home" }
 
-  throw new Error("Unrecognised route!")
-}
+  if (parts[1] !== "session") return { type: "home" }
 
-export const useCurrentRoute = () => {
-  const location = useLocation()
-  return createMemo(() => currentRoute(location.pathname, location.search))
+  const id = parts[2]
+  if (id) return { type: "session", sessionId: id }
+  return { type: "dir-new-sesssion", dir, dirBase64 }
 }
 
 export const { use: useLayout, provider: LayoutProvider } = createSimpleContext({
   name: "Layout",
   gate: false,
   init: () => {
-    // const serverSync = useServerSync()
-    const servers = useServers()
+    const serverSdk = useServerSDK()
+    const serverSync = useServerSync()
+    const server = useServer()
+    const tabs = useTabs()
     const platform = usePlatform()
+    const location = useLocation()
+    const route = createMemo(() => {
+      const value = currentRoute(location.pathname, location.search)
+      if (value.type === "home") return value
+      if (value.server) return value
+      if (value.type === "draft") {
+        const draft = tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === value.draftID)
+        if (draft) return { ...value, server: draft.server }
+      }
+      return { ...value, server: server.key }
+    })
 
     const isRecord = (value: unknown): value is Record<string, unknown> =>
       typeof value === "object" && value !== null && !Array.isArray(value)
@@ -243,8 +267,9 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       }
     }
 
+    const target = Persist.serverGlobal(serverSdk().scope, "layout", ["layout.v6"])
     const [store, setStore, _, ready] = persisted(
-      { ...Persist.global("layout", ["layout.v6"]), migrate },
+      { ...target, migrate },
       createStore({
         sidebar: {
           opened: false,
@@ -273,8 +298,11 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         },
         sessionTabs: {} as Record<string, SessionTabs>,
         sessionView: {} as Record<string, SessionView>,
+        handoff: {
+          tabs: undefined as TabHandoff | undefined,
+        },
         home: {
-          selection: { server: ServerConnection.key(servers.list[0]) } as HomeProjectSelection,
+          selection: { server: server.key } as HomeProjectSelection,
         },
       }),
     )
@@ -414,116 +442,168 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       return available[Math.floor(Math.random() * available.length)]
     }
 
-    // function enrich(project: { worktree: string; expanded: boolean }) {
-    //   const [childStore] = serverSync.child(project.worktree, { bootstrap: false })
-    //   const projectID = childStore.project
-    //   const metadata = projectID
-    //     ? serverSync.data.project.find((x) => x.id === projectID)
-    //     : serverSync.data.project.find((x) => x.worktree === project.worktree)
+    function enrich(project: { worktree: string; expanded: boolean }) {
+      const [childStore] = serverSync().child(project.worktree, { bootstrap: false })
+      const projectID = childStore.project
+      const metadata = projectID
+        ? serverSync().data.project.find((x) => x.id === projectID)
+        : serverSync().data.project.find((x) => x.worktree === project.worktree)
 
-    //   // Preserve local icon override from per-workspace localStorage cache (childStore.icon).
-    //   // Without this, different subdirectories of the same git repo would share the same
-    //   // icon from the database instead of using their individual overrides.
-    //   const base = { ...metadata, ...project }
-    //   if (childStore.icon) {
-    //     return { ...base, icon: { ...base.icon, override: childStore.icon } }
-    //   }
-    //   return base
-    // }
+      // Preserve local icon override from per-workspace localStorage cache (childStore.icon).
+      // Without this, different subdirectories of the same git repo would share the same
+      // icon from the database instead of using their individual overrides.
+      const base = { ...metadata, ...project }
+      if (childStore.icon) {
+        return { ...base, icon: { ...base.icon, override: childStore.icon } }
+      }
+      return base
+    }
 
-    // const roots = createMemo(() => {
-    //   const map = new Map<string, string>()
-    //   for (const project of serverSync.data.project) {
-    //     const sandboxes = project.sandboxes ?? []
-    //     for (const sandbox of sandboxes) {
-    //       map.set(sandbox, project.worktree)
-    //     }
-    //   }
-    //   return map
-    // })
+    const roots = createMemo(() => {
+      const map = new Map<string, string>()
+      for (const project of serverSync().data.project) {
+        const sandboxes = project.sandboxes ?? []
+        for (const sandbox of sandboxes) {
+          map.set(sandbox, project.worktree)
+        }
+      }
+      return map
+    })
 
-    // const rootFor = (directory: string) => {
-    //   const map = roots()
-    //   if (map.size === 0) return directory
+    const rootFor = (directory: string) => {
+      const map = roots()
+      if (map.size === 0) return directory
 
-    //   const visited = new Set<string>()
-    //   const chain = [directory]
+      const visited = new Set<string>()
+      const chain = [directory]
 
-    //   while (chain.length) {
-    //     const current = chain[chain.length - 1]
-    //     if (!current) return directory
+      while (chain.length) {
+        const current = chain[chain.length - 1]
+        if (!current) return directory
 
-    //     const next = map.get(current)
-    //     if (!next) return current
+        const next = map.get(current)
+        if (!next) return current
 
-    //     if (visited.has(next)) return directory
-    //     visited.add(next)
-    //     chain.push(next)
-    //   }
+        if (visited.has(next)) return directory
+        visited.add(next)
+        chain.push(next)
+      }
 
-    //   return directory
-    // }
+      return directory
+    }
 
-    const enriched = createMemo(() => [] /* servers.projects.list().map(enrich) */)
+    createEffect(() => {
+      const projects = server.projects.list()
+      const seen = new Set(projects.map((project) => project.worktree))
 
-    // createEffect(() => {
-    //   const projects = enriched()
-    //   if (projects.length === 0) return
-    //   if (!serverSync.ready) return
+      batch(() => {
+        for (const project of projects) {
+          const root = rootFor(project.worktree)
+          if (root === project.worktree) continue
 
-    //   for (const project of projects) {
-    //     if (!project.id) continue
-    //     if (project.id === "global") continue
-    //     serverSync.project.icon(project.worktree, project.icon?.override)
-    //   }
-    // })
+          server.projects.remove(project.worktree)
 
-    // createEffect(() => {
-    //   const projects = enriched()
-    //   if (projects.length === 0) return
+          if (!seen.has(root)) {
+            server.projects.open(root)
+            seen.add(root)
+          }
 
-    //   for (const project of projects) {
-    //     if (project.icon?.color) colorRequested.delete(project.worktree)
-    //   }
+          if (project.expanded) server.projects.expand(root)
+        }
+      })
+    })
 
-    //   const used = new Set<string>()
-    //   for (const project of projects) {
-    //     const color = project.icon?.color ?? colors[project.worktree]
-    //     if (color) used.add(color)
-    //   }
+    const enriched = createMemo(() => server.projects.list().map(enrich))
+    const list = createMemo(() => {
+      const projects = enriched()
+      return projects.map((project) => {
+        const color = project.icon?.color ?? colors[project.worktree]
+        if (!color) return project
+        const icon = project.icon ? { ...project.icon, color } : { color }
+        return { ...project, icon }
+      })
+    })
 
-    //   for (const project of projects) {
-    //     if (project.icon?.color || project.icon?.override || project.icon?.url) continue
-    //     const worktree = project.worktree
-    //     const existing = colors[worktree]
-    //     const color = existing ?? pickAvailableColor(used)
-    //     if (!existing) {
-    //       used.add(color)
-    //       setColors(worktree, color)
-    //     }
-    //     if (!project.id) continue
+    createEffect(() => {
+      const projects = enriched()
+      if (projects.length === 0) return
+      if (!serverSync().ready) return
 
-    //     const requested = colorRequested.get(worktree)
-    //     if (requested === color) continue
-    //     colorRequested.set(worktree, color)
+      for (const project of projects) {
+        if (!project.id) continue
+        if (project.id === "global") continue
+        serverSync().project.icon(project.worktree, project.icon?.override)
+      }
+    })
 
-    //     if (project.id === "global") {
-    //       serverSync.project.meta(worktree, { icon: { color } })
-    //       continue
-    //     }
+    createEffect(() => {
+      const projects = enriched()
+      if (projects.length === 0) return
 
-    //     const projectID = project.id
-    //     void (async () => {
-    //       // TODO: Restore project color updates when the V2 client exposes a project update API.
-    //       void projectID
-    //     })().catch(() => {
-    //       if (colorRequested.get(worktree) === color) colorRequested.delete(worktree)
-    //     })
-    //   }
-    // })
+      for (const project of projects) {
+        if (project.icon?.color) colorRequested.delete(project.worktree)
+      }
+
+      const used = new Set<string>()
+      for (const project of projects) {
+        const color = project.icon?.color ?? colors[project.worktree]
+        if (color) used.add(color)
+      }
+
+      for (const project of projects) {
+        if (project.icon?.color || project.icon?.override || project.icon?.url) continue
+        const worktree = project.worktree
+        const existing = colors[worktree]
+        const color = existing ?? pickAvailableColor(used)
+        if (!existing) {
+          used.add(color)
+          setColors(worktree, color)
+        }
+        if (!project.id) continue
+
+        const requested = colorRequested.get(worktree)
+        if (requested === color) continue
+        colorRequested.set(worktree, color)
+
+        if (project.id === "global") {
+          serverSync().project.meta(worktree, { icon: { color } })
+          continue
+        }
+
+        const projectID = project.id
+        void (async () => {
+          // TODO: Restore project color updates when the V2 client exposes a project update API.
+          void projectID
+        })().catch(() => {
+          if (colorRequested.get(worktree) === color) colorRequested.delete(worktree)
+        })
+      }
+    })
+
+    let sessionFrame: number | undefined
+    let sessionTimer: number | undefined
+
+    onMount(() => {
+      sessionFrame = requestAnimationFrame(() => {
+        sessionFrame = undefined
+        sessionTimer = window.setTimeout(() => {
+          sessionTimer = undefined
+          void Promise.all(
+            server.projects.list().map((project) => {
+              return serverSync().project.loadSessions(project.worktree)
+            }),
+          )
+        }, 0)
+      })
+    })
+
+    onCleanup(() => {
+      if (sessionFrame !== undefined) cancelAnimationFrame(sessionFrame)
+      if (sessionTimer !== undefined) window.clearTimeout(sessionTimer)
+    })
 
     return {
-      route: useCurrentRoute(),
+      route,
       ready,
       home: {
         selection: createMemo(() => store.home.selection),
@@ -531,6 +611,71 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           setStore("home", "selection", reconcile(selection))
         },
       },
+      handoff: {
+        tabs: createMemo(() => store.handoff?.tabs),
+        setTabs(dir: string, id: string) {
+          setStore("handoff", "tabs", { scope: serverSdk().scope, dir, id, at: Date.now() })
+        },
+        clearTabs() {
+          if (!store.handoff?.tabs) return
+          setStore("handoff", "tabs", undefined)
+        },
+      },
+      projects: {
+        list,
+        recentlyClosed: createMemo(() => {
+          const known = new Set(serverSync().data.project.map((project) => pathKey(project.worktree)))
+          return server.projects
+            .recentlyClosed()
+            .filter((worktree) => known.has(pathKey(worktree)))
+            .slice(0, RECENTLY_CLOSED_DISPLAY_LIMIT)
+            .map((worktree) => enrich({ worktree, expanded: false }))
+        }),
+        open(directory: string) {
+          const root = rootFor(directory)
+          if (server.projects.list().find((x) => x.worktree === root)) return
+          void serverSync().project.loadSessions(root)
+          server.projects.open(root)
+        },
+        close(directory: string) {
+          server.projects.close(directory)
+        },
+        expand(directory: string) {
+          server.projects.expand(directory)
+        },
+        collapse(directory: string) {
+          server.projects.collapse(directory)
+        },
+        move(directory: string, toIndex: number) {
+          server.projects.move(directory, toIndex)
+        },
+      },
+      sidebar: {
+        opened: createMemo(() => store.sidebar.opened),
+        open() {
+          setStore("sidebar", "opened", true)
+        },
+        close() {
+          setStore("sidebar", "opened", false)
+        },
+        toggle() {
+          setStore("sidebar", "opened", (x) => !x)
+        },
+        width: createMemo(() => store.sidebar.width),
+        resize(width: number) {
+          setStore("sidebar", "width", width)
+        },
+        workspaces(directory: string) {
+          return () => store.sidebar.workspaces[directory] ?? store.sidebar.workspacesDefault ?? false
+        },
+        setWorkspaces(directory: string, value: boolean) {
+          setStore("sidebar", "workspaces", directory, value)
+        },
+        toggleWorkspaces(directory: string) {
+          const current = store.sidebar.workspaces[directory] ?? store.sidebar.workspacesDefault ?? false
+          setStore("sidebar", "workspaces", directory, !current)
+        },
+      },
       terminal: {
         height: createMemo(() => store.terminal.height),
         resize(height: number) {

packages/app/src/context/local.tsx

@@ -73,7 +73,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
 
     const [saved, setSaved, , savedReady] = persisted(
       {
-        ...Persist.serverWorkspace(serverSDK.scope, sdk().directory, "model-selection", ["model-selection.v1"]),
+        ...Persist.serverWorkspace(serverSDK().scope, sdk().directory, "model-selection", ["model-selection.v1"]),
         migrate,
       },
       createStore<Saved>({
@@ -127,14 +127,14 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
     const scope = createMemo<State | undefined>(() => {
       const session = id()
       if (!session) return store.draft ?? store.promoting
-      return saved.session[session] ?? handoff.get(handoffKey(serverSDK.scope, sdk().directory, session))
+      return saved.session[session] ?? handoff.get(handoffKey(serverSDK().scope, sdk().directory, session))
     })
 
     createEffect(() => {
       const session = id()
       if (!session) return
 
-      const key = handoffKey(serverSDK.scope, sdk().directory, session)
+      const key = handoffKey(serverSDK().scope, sdk().directory, session)
       const next = handoff.get(key)
       if (!next) return
       if (saved.session[session] !== undefined) {
@@ -385,7 +385,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         promote(dir: string, session: string, state?: State) {
           const next = clone(state ?? snapshot())
           if (!next) return
-          const key = handoffKey(serverSDK.scope, dir, session)
+          const key = handoffKey(serverSDK().scope, dir, session)
           handoff.set(key, next)
 
           if (dir === sdk().directory) {
@@ -400,7 +400,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
           if (!session) return
           if (msg.sessionID !== session) return
           if (saved.session[session] !== undefined) return
-          if (handoff.has(handoffKey(serverSDK.scope, sdk().directory, session))) return
+          if (handoff.has(handoffKey(serverSDK().scope, sdk().directory, session))) return
 
           setSaved("session", session, {
             agent: msg.agent,

packages/app/src/context/models.tsx

@@ -22,162 +22,152 @@ function modelKey(model: ModelKey) {
   return `${model.providerID}:${model.modelID}`
 }
 
-const createModelsPersistedState = () => {
-  const [store, setStore, _, ready] = persisted(
-    Persist.global("model", ["model.v1"]),
-    createStore<Store>({
-      user: [],
-      recent: [],
-      variant: {},
-    }),
-  )
-
-  return [store, setStore, ready] as const
-}
-
-const createModelsController = (directory: Accessor<string | undefined>) => {
-  const providers = useProviders(() => directory())
-
-  const [store, setStore, ready] = createModelsPersistedState()
-
-  const available = createMemo(() =>
-    providers.connected().flatMap((p) =>
-      Object.values(p.models).map((m) => ({
-        ...m,
-        provider: p,
-      })),
-    ),
-  )
-
-  const release = createMemo(
-    () =>
-      new Map(
-        available().map((model) => {
-          const parsed = DateTime.fromISO(model.release_date)
-          return [modelKey({ providerID: model.provider.id, modelID: model.id }), parsed] as const
-        }),
-      ),
-  )
-
-  const latest = createMemo(() =>
-    pipe(
-      available(),
-      filter(
-        (x) =>
-          Math.abs(
-            (release().get(modelKey({ providerID: x.provider.id, modelID: x.id })) ?? DateTime.invalid("invalid"))
-              .diffNow()
-              .as("months"),
-          ) < 6,
-      ),
-      groupBy((x) => x.provider.id),
-      mapValues((models) =>
-        pipe(
-          models,
-          groupBy((x) => x.family),
-          values(),
-          (groups) =>
-            groups.flatMap((g) => {
-              const first = firstBy(g, [(x) => x.release_date, "desc"])
-              return first ? [{ modelID: first.id, providerID: first.provider.id }] : []
-            }),
-        ),
-      ),
-      values(),
-      flat(),
-    ),
-  )
-
-  const latestSet = createMemo(() => new Set(latest().map((x) => modelKey(x))))
-
-  const visibility = createMemo(() => {
-    const map = new Map<string, Visibility>()
-    for (const item of store.user) map.set(`${item.providerID}:${item.modelID}`, item.visibility)
-    return map
-  })
-
-  const list = createMemo(() =>
-    available().map((m) => ({
-      ...m,
-      name: m.name.replace("(latest)", "").trim(),
-      latest: m.name.includes("(latest)"),
-    })),
-  )
-
-  const find = (key: ModelKey) => list().find((m) => m.id === key.modelID && m.provider.id === key.providerID)
-
-  function update(model: ModelKey, state: Visibility) {
-    const index = store.user.findIndex((x) => x.modelID === model.modelID && x.providerID === model.providerID)
-    if (index >= 0) {
-      setStore("user", index, (current) => ({ ...current, visibility: state }))
-      return
-    }
-    setStore("user", store.user.length, { ...model, visibility: state })
-  }
-
-  const visible = (model: ModelKey) => {
-    const key = modelKey(model)
-    const state = visibility().get(key)
-    if (state === "hide") return false
-    if (state === "show") return true
-    if (latestSet().has(key)) return true
-    const date = release().get(key)
-    if (!date?.isValid) return true
-    return false
-  }
-
-  const setVisibility = (model: ModelKey, state: boolean) => {
-    update(model, state ? "show" : "hide")
-  }
-
-  const push = (model: ModelKey) => {
-    const uniq = uniqueBy([model, ...store.recent], (x) => `${x.providerID}:${x.modelID}`)
-    if (uniq.length > RECENT_LIMIT) uniq.pop()
-    setStore("recent", uniq)
-  }
-
-  const variantKey = (model: ModelKey) => `${model.providerID}/${model.modelID}`
-  const getVariant = (model: ModelKey) => store.variant?.[variantKey(model)]
-
-  const setVariant = (model: ModelKey, value: string | undefined) => {
-    const key = variantKey(model)
-    if (!store.variant) {
-      setStore("variant", { [key]: value })
-      return
-    }
-    setStore("variant", key, value)
-  }
-
-  const [recentModels] = createResource(
-    async () => {
-      const recent = store.recent
-      await ready.promise
-      return recent
-    },
-    (p) => p,
-    { initialValue: [] },
-  )
-  return {
-    ready,
-    list,
-    find,
-    visible,
-    setVisibility,
-    recent: {
-      list: () => recentModels()!,
-      push,
-    },
-    variant: {
-      get: getVariant,
-      set: setVariant,
-    },
-  }
-}
-
 export const { use: useModels, provider: ModelsProvider } = createSimpleContext({
   name: "Models",
   gate: false,
-  init: (props: { directory?: string | Accessor<string | undefined> } = {}) => {
-    return createModelsController(() => (typeof props.directory === "function" ? props.directory() : props.directory))
+  init: (props: { directory?: Accessor<string | undefined> } = {}) => {
+    const providers = useProviders(() => props.directory?.())
+
+    const [store, setStore, _, ready] = persisted(
+      Persist.global("model", ["model.v1"]),
+      createStore<Store>({
+        user: [],
+        recent: [],
+        variant: {},
+      }),
+    )
+
+    const available = createMemo(() =>
+      providers.connected().flatMap((p) =>
+        Object.values(p.models).map((m) => ({
+          ...m,
+          provider: p,
+        })),
+      ),
+    )
+
+    const release = createMemo(
+      () =>
+        new Map(
+          available().map((model) => {
+            const parsed = DateTime.fromISO(model.release_date)
+            return [modelKey({ providerID: model.provider.id, modelID: model.id }), parsed] as const
+          }),
+        ),
+    )
+
+    const latest = createMemo(() =>
+      pipe(
+        available(),
+        filter(
+          (x) =>
+            Math.abs(
+              (release().get(modelKey({ providerID: x.provider.id, modelID: x.id })) ?? DateTime.invalid("invalid"))
+                .diffNow()
+                .as("months"),
+            ) < 6,
+        ),
+        groupBy((x) => x.provider.id),
+        mapValues((models) =>
+          pipe(
+            models,
+            groupBy((x) => x.family),
+            values(),
+            (groups) =>
+              groups.flatMap((g) => {
+                const first = firstBy(g, [(x) => x.release_date, "desc"])
+                return first ? [{ modelID: first.id, providerID: first.provider.id }] : []
+              }),
+          ),
+        ),
+        values(),
+        flat(),
+      ),
+    )
+
+    const latestSet = createMemo(() => new Set(latest().map((x) => modelKey(x))))
+
+    const visibility = createMemo(() => {
+      const map = new Map<string, Visibility>()
+      for (const item of store.user) map.set(`${item.providerID}:${item.modelID}`, item.visibility)
+      return map
+    })
+
+    const list = createMemo(() =>
+      available().map((m) => ({
+        ...m,
+        name: m.name.replace("(latest)", "").trim(),
+        latest: m.name.includes("(latest)"),
+      })),
+    )
+
+    const find = (key: ModelKey) => list().find((m) => m.id === key.modelID && m.provider.id === key.providerID)
+
+    function update(model: ModelKey, state: Visibility) {
+      const index = store.user.findIndex((x) => x.modelID === model.modelID && x.providerID === model.providerID)
+      if (index >= 0) {
+        setStore("user", index, (current) => ({ ...current, visibility: state }))
+        return
+      }
+      setStore("user", store.user.length, { ...model, visibility: state })
+    }
+
+    const visible = (model: ModelKey) => {
+      const key = modelKey(model)
+      const state = visibility().get(key)
+      if (state === "hide") return false
+      if (state === "show") return true
+      if (latestSet().has(key)) return true
+      const date = release().get(key)
+      if (!date?.isValid) return true
+      return false
+    }
+
+    const setVisibility = (model: ModelKey, state: boolean) => {
+      update(model, state ? "show" : "hide")
+    }
+
+    const push = (model: ModelKey) => {
+      const uniq = uniqueBy([model, ...store.recent], (x) => `${x.providerID}:${x.modelID}`)
+      if (uniq.length > RECENT_LIMIT) uniq.pop()
+      setStore("recent", uniq)
+    }
+
+    const variantKey = (model: ModelKey) => `${model.providerID}/${model.modelID}`
+    const getVariant = (model: ModelKey) => store.variant?.[variantKey(model)]
+
+    const setVariant = (model: ModelKey, value: string | undefined) => {
+      const key = variantKey(model)
+      if (!store.variant) {
+        setStore("variant", { [key]: value })
+        return
+      }
+      setStore("variant", key, value)
+    }
+
+    const [recentModels] = createResource(
+      async () => {
+        const recent = store.recent
+        await ready.promise
+        return recent
+      },
+      (p) => p,
+      { initialValue: [] },
+    )
+    return {
+      ready,
+      list,
+      find,
+      visible,
+      setVisibility,
+      recent: {
+        list: () => recentModels()!,
+        push,
+      },
+      variant: {
+        get: getVariant,
+        set: setVariant,
+      },
+    }
   },
 })

packages/app/src/context/notification.tsx

@@ -13,12 +13,10 @@ import type { EventSessionError } from "@/types"
 import { Persist, persisted } from "@/utils/persist"
 import { playSoundById } from "@/utils/sound"
 import { useGlobal } from "./global"
-import { ServerConnection, useServers } from "./servers"
+import { ServerConnection, useServer } from "./server"
 import { type DraftTab, useTabs } from "./tabs"
 import { requireServerKey } from "@/utils/session-route"
 import type { ServerScope } from "@/utils/server-scope"
-import { useCurrentRoute } from "./layout"
-import { useServer } from "./server"
 
 type NotificationBase = {
   directory?: string
@@ -111,18 +109,131 @@ function buildNotificationIndex(list: Notification[]) {
   return index
 }
 
-export function createServerNotificationState(input: { sdk: ServerSDK; sync: ServerSync; key: ServerConnection.Key }) {
-  const platform = usePlatform()
-  const settings = useSettings()
-  const language = useLanguage()
-  const navigate = useNavigate()
+export const { use: useNotification, provider: NotificationProvider } = createSimpleContext({
+  name: "Notification",
+  gate: false,
+  init: () => {
+    const params = useParams<{ serverKey?: string; dir?: string; id?: string }>()
+    const [search] = useSearchParams<{ draftId?: string }>()
+    const global = useGlobal()
+    const server = useServer()
+    const tabs = useTabs()
+    const navigate = useNavigate()
+    const platform = usePlatform()
+    const settings = useSettings()
+    const language = useLanguage()
+    const owner = getOwner()
+    const states = new Map<ServerScope, { dispose: () => void; state: NotificationState }>()
+
+    const activeServer = createMemo(() => {
+      if (params.serverKey) return requireServerKey(params.serverKey)
+      if (search.draftId) {
+        const draft = tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === search.draftId)
+        if (draft) return draft.server
+      }
+      return server.key
+    })
+    const activeDirectory = createMemo(() => decode64(params.dir))
+    const activeSession = createMemo(() => params.id)
+
+    const ensure = (key: ServerConnection.Key) => {
+      const conn = global.servers.list().find((item) => ServerConnection.key(item) === key)
+      if (!conn) throw new Error(`Notification server not found: ${key}`)
+      const ctx = global.ensureServerCtx(conn)
+      const existing = states.get(ctx.sdk.scope)
+      if (existing) return existing.state
+      const root = createRoot(
+        (dispose) => ({
+          dispose,
+          state: createServerNotificationState({
+            sdk: ctx.sdk,
+            sync: ctx.sync,
+            active: () => server.scope(activeServer()) === ctx.sdk.scope,
+            directory: activeDirectory,
+            sessionID: activeSession,
+            platform,
+            settings,
+            language,
+            navigate,
+          }),
+        }),
+        owner ?? undefined,
+      )
+      states.set(ctx.sdk.scope, root)
+      return root.state
+    }
+
+    createEffect(() => {
+      global.servers.list().forEach((conn) => ensure(ServerConnection.key(conn)))
+    })
+
+    createEffect(() => {
+      const scopes = new Set(global.servers.list().map((conn) => server.scope(ServerConnection.key(conn))))
+      states.forEach((value, scope) => {
+        if (scopes.has(scope)) return
+        value.dispose()
+        states.delete(scope)
+      })
+    })
+
+    onCleanup(() => states.forEach((value) => value.dispose()))
+
+    const selected = () => {
+      const list = global.servers.list()
+      const key = activeServer()
+      if (list.some((conn) => ServerConnection.key(conn) === key)) return ensure(key)
+      const conn = list.find((conn) => ServerConnection.key(conn) === server.key) ?? list[0]
+      if (!conn) throw new Error("Notification server not found")
+      return ensure(ServerConnection.key(conn))
+    }
+
+    return {
+      ready: () => selected().ready(),
+      ensureServerState: ensure,
+      session: {
+        all: (session: string) => selected().session.all(session),
+        unseen: (session: string) => selected().session.unseen(session),
+        unseenCount: (session: string) => selected().session.unseenCount(session),
+        unseenHasError: (session: string) => selected().session.unseenHasError(session),
+        markViewed: (session: string) => selected().session.markViewed(session),
+      },
+      project: {
+        all: (directory: string) => selected().project.all(directory),
+        unseen: (directory: string) => selected().project.unseen(directory),
+        unseenCount: (directory: string) => selected().project.unseenCount(directory),
+        unseenHasError: (directory: string) => selected().project.unseenHasError(directory),
+        markViewed: (directory: string) => selected().project.markViewed(directory),
+      },
+    }
+  },
+})
+
+type NotificationState = ReturnType<typeof createServerNotificationState>
+
+function createServerNotificationState(input: {
+  sdk: ServerSDK
+  sync: ServerSync
+  active: Accessor<boolean>
+  directory: Accessor<string | undefined>
+  sessionID: Accessor<string | undefined>
+  platform: ReturnType<typeof usePlatform>
+  settings: ReturnType<typeof useSettings>
+  language: ReturnType<typeof useLanguage>
+  navigate: (href: string) => void
+}) {
+  const serverSDK = () => input.sdk
+  const serverSync = () => input.sync
+  const platform = input.platform
+  const settings = input.settings
+  const language = input.language
 
   const empty: Notification[] = []
 
-  const route = useCurrentRoute()
+  const currentDirectory = input.directory
+  const currentSession = input.sessionID
 
   const [store, setStore, _, ready] = persisted(
-    Persist.serverGlobal(input.sdk.scope, "notification", ["notification.v1"]),
+    Persist.serverGlobal(serverSDK().scope, "notification", ["notification.v1"]),
     createStore({
       list: [] as Notification[],
     }),
@@ -205,7 +316,7 @@ export function createServerNotificationState(input: { sdk: ServerSDK; sync: Ser
 
   const lookup = async (directory: string, sessionID?: string) => {
     if (!sessionID) return undefined
-    const sync = input.sync.ensureDirSyncContext(directory)
+    const sync = serverSync().ensureDirSyncContext(directory)
     const session = sync.session.get(sessionID)
     if (session) return session
     return sync.session
@@ -214,12 +325,17 @@ export function createServerNotificationState(input: { sdk: ServerSDK; sync: Ser
       .catch(() => undefined)
   }
 
-  const viewedInCurrentSession = (sessionID: string) => {
-    const currentRoute = route()
-    return currentRoute.type === "session" && currentRoute.server === input.key && currentRoute.sessionId === sessionID
+  const viewedInCurrentSession = (directory: string, sessionID?: string) => {
+    if (!input.active()) return false
+    const activeDirectory = currentDirectory()
+    const activeSession = currentSession()
+    if (!activeSession) return false
+    if (!sessionID) return false
+    if (activeDirectory && directory !== activeDirectory) return false
+    return sessionID === activeSession
   }
 
-  const handleSessionIdle = (directory: string, event: { properties: { sessionID: string } }, time: number) => {
+  const handleSessionIdle = (directory: string, event: { properties: { sessionID?: string } }, time: number) => {
     const sessionID = event.properties.sessionID
     void lookup(directory, sessionID).then((session) => {
       if (meta.disposed) return
@@ -233,15 +349,15 @@ export function createServerNotificationState(input: { sdk: ServerSDK; sync: Ser
       append({
         directory,
         time,
-        viewed: viewedInCurrentSession(sessionID),
+        viewed: viewedInCurrentSession(directory, sessionID),
         type: "turn-complete",
         session: sessionID,
       })
 
-      const href = `/server/${input.key}/session/${sessionID}`
+      const href = `/${base64Encode(directory)}/session/${sessionID}`
       if (settings.notifications.agent()) {
         void platform.notify(language.t("notification.session.responseReady.title"), session.title ?? sessionID, () =>
-          navigate(href),
+          input.navigate(href),
         )
       }
     })
@@ -265,7 +381,7 @@ export function createServerNotificationState(input: { sdk: ServerSDK; sync: Ser
       append({
         directory,
         time,
-        viewed: viewedInCurrentSession(sessionID),
+        viewed: viewedInCurrentSession(directory, sessionID),
         type: "error",
         session: sessionID ?? "global",
         error,
@@ -273,14 +389,14 @@ export function createServerNotificationState(input: { sdk: ServerSDK; sync: Ser
       const description =
         session?.title ??
         (typeof error === "string" ? error : language.t("notification.session.error.fallbackDescription"))
-      const href = `/server/${input.key}/session/${sessionID}`
+      const href = sessionID ? `/${base64Encode(directory)}/session/${sessionID}` : `/${base64Encode(directory)}`
       if (settings.notifications.errors()) {
-        void platform.notify(language.t("notification.session.error.title"), description, () => navigate(href))
+        void platform.notify(language.t("notification.session.error.title"), description, () => input.navigate(href))
       }
     })
   }
 
-  const unsub = input.sdk.event.listen((e) => {
+  const unsub = serverSDK().event.listen((e) => {
     const event = e.details
     if (event.type !== "session.idle" && event.type !== "session.execution.failed") return
 
@@ -365,8 +481,3 @@ export function createServerNotificationState(input: { sdk: ServerSDK; sync: Ser
     },
   }
 }
-
-export const useNotification = () => {
-  const server = useServer()
-  return server.ctx.notification
-}

packages/app/src/context/permission.tsx

@@ -8,7 +8,7 @@ import type { ServerSync } from "./server-sync"
 import { useParams, useSearchParams } from "@solidjs/router"
 import { decode64 } from "@/utils/base64"
 import { useGlobal } from "./global"
-import { ServerConnection, useServers } from "./servers"
+import { ServerConnection, useServer } from "./server"
 import { type DraftTab, useTabs } from "./tabs"
 import { useSettings } from "./settings"
 import { requireServerKey } from "@/utils/session-route"
@@ -20,7 +20,6 @@ import {
   autoRespondsPermission,
   sessionAutoAccept,
 } from "./permission-auto-respond"
-import { useServer } from "./server"
 
 type PermissionRespondFn = (input: {
   sessionID: string
@@ -52,9 +51,142 @@ function hasPermissionPromptRules(permission: unknown) {
   return Object.values(config).some(isNonAllowRule)
 }
 
+export const { use: usePermission, provider: PermissionProvider } = createSimpleContext({
+  name: "Permission",
+  gate: false,
+  init: () => {
+    const params = useParams<{ serverKey?: string; dir?: string; id?: string }>()
+    const [search] = useSearchParams<{ draftId?: string }>()
+    const global = useGlobal()
+    const server = useServer()
+    const tabs = useTabs()
+    const settings = useSettings()
+    const owner = getOwner()
+    const states = new Map<ServerScope, { key: ServerConnection.Key; dispose: () => void; state: PermissionState }>()
+
+    const activeDraft = createMemo(() => {
+      if (!search.draftId) return
+      return tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === search.draftId)
+    })
+
+    const activeServer = createMemo(() => {
+      if (params.serverKey && settings.general.newLayoutDesigns()) return requireServerKey(params.serverKey)
+      return activeDraft()?.server ?? server.key
+    })
+
+    const ensure = (key: ServerConnection.Key) => {
+      const conn = global.servers.list().find((item) => ServerConnection.key(item) === key)
+      if (!conn) throw new Error(`Permission server not found: ${key}`)
+      const ctx = global.ensureServerCtx(conn)
+      const existing = states.get(ctx.sdk.scope)
+      if (existing && global.servers.list().some((item) => ServerConnection.key(item) === existing.key)) {
+        return existing.state
+      }
+      if (existing) {
+        existing.dispose()
+        states.delete(ctx.sdk.scope)
+      }
+      const root = createRoot(
+        (dispose) => ({
+          key,
+          dispose,
+          state: createServerPermissionState({ sdk: ctx.sdk, sync: ctx.sync }),
+        }),
+        owner ?? undefined,
+      )
+      states.set(ctx.sdk.scope, root)
+      return root.state
+    }
+
+    createEffect(() => {
+      global.servers.list().forEach((conn) => ensure(ServerConnection.key(conn)))
+    })
+
+    createEffect(() => {
+      const list = global.servers.list()
+      const keys = new Set(list.map(ServerConnection.key))
+      states.forEach((value, scope) => {
+        if (keys.has(value.key)) return
+        value.dispose()
+        states.delete(scope)
+        const replacement = list.find((conn) => server.scope(ServerConnection.key(conn)) === scope)
+        if (replacement) ensure(ServerConnection.key(replacement))
+      })
+    })
+
+    onCleanup(() => states.forEach((value) => value.dispose()))
+
+    let lastSelected: PermissionState | undefined
+    const selected = () => {
+      const key = activeServer()
+      if (global.servers.list().some((conn) => ServerConnection.key(conn) === key)) {
+        lastSelected = ensure(key)
+      }
+      if (lastSelected) return lastSelected
+      return ensure(server.key)
+    }
+    const activeDirectory = createMemo(() => {
+      const directory = decode64(params.dir)
+      if (directory) return directory
+      const draft = activeDraft()
+      if (draft) return draft.directory
+      if (!params.id) return
+      if (!global.servers.list().some((conn) => ServerConnection.key(conn) === activeServer())) return
+      return selected().sync.session.lineage.peek(params.id)?.session.location.directory
+    })
+
+    createEffect(() => {
+      const directory = activeDirectory()
+      if (!directory) return
+      selected().enableConfiguredDirectory(directory)
+    })
+
+    const permissionsEnabled = createMemo(() => {
+      const directory = activeDirectory()
+      if (!directory) return false
+      return selected().permissionsEnabled(directory)
+    })
+
+    return {
+      ready: () => selected().ready(),
+      ensureServerState: (key: ServerConnection.Key) => ensure(key).api,
+      currentServerState: () => selected().api,
+      respond(input: Parameters<PermissionRespondFn>[0]) {
+        selected().respond(input)
+      },
+      autoResponds(permission: PermissionRequest, directory?: string) {
+        return selected().autoResponds(permission, directory)
+      },
+      isAutoAccepting(sessionID: string, directory?: string) {
+        return selected().isAutoAccepting(sessionID, directory)
+      },
+      isAutoAcceptingDirectory(directory: string) {
+        return selected().isAutoAcceptingDirectory(directory)
+      },
+      toggleAutoAccept(sessionID: string, directory: string) {
+        selected().toggleAutoAccept(sessionID, directory)
+      },
+      toggleAutoAcceptDirectory(directory: string) {
+        selected().toggleAutoAcceptDirectory(directory)
+      },
+      enableAutoAccept(sessionID: string, directory: string) {
+        selected().enableAutoAccept(sessionID, directory)
+      },
+      disableAutoAccept(sessionID: string, directory?: string) {
+        selected().disableAutoAccept(sessionID, directory)
+      },
+      permissionsEnabled,
+      isPermissionAllowAll(directory: string) {
+        return selected().isPermissionAllowAll(directory)
+      },
+    }
+  },
+})
+
+type PermissionState = ReturnType<typeof createServerPermissionState>
 type PermissionEvent = Parameters<Parameters<ServerSDK["event"]["listen"]>[0]>[0]
 
-export function createServerPermissionState(input: { sdk: ServerSDK; sync: ServerSync }) {
+function createServerPermissionState(input: { sdk: ServerSDK; sync: ServerSync }) {
   const [store, setStore, _, ready] = persisted(
     {
       ...Persist.serverGlobal(input.sdk.scope, "permission", ["permission.v3"]),
@@ -342,8 +474,3 @@ export function createServerPermissionState(input: { sdk: ServerSDK; sync: Serve
     },
   }
 }
-
-export const usePermission = () => {
-  const server = useServer()
-  return server.ctx.permission
-}

packages/app/src/context/platform.tsx

@@ -2,7 +2,7 @@ import { createSimpleContext } from "@opencode-ai/ui/context"
 import type { AsyncStorage, SyncStorage } from "@solid-primitives/storage"
 import type { Accessor } from "solid-js"
 import type { DesktopMenuAction } from "../desktop-menu"
-import { ServerConnection } from "./servers"
+import { ServerConnection } from "./server"
 import type { WslServersPlatform } from "../wsl/types"
 import type { UpdaterPlatform } from "../updater"
 import type { DraftStore } from "@/utils/draft-store"

packages/app/src/context/prompt.tsx

@@ -3,7 +3,7 @@ import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useParams, useSearchParams } from "@solidjs/router"
 import { createMemo, createResource, createRoot, getOwner, onCleanup } from "solid-js"
 import { requireServerKey } from "@/utils/session-route"
-import { ServerConnection } from "./servers"
+import { ServerConnection } from "./server"
 import { useServerSDK } from "./server-sdk"
 import { useSettings } from "./settings"
 import { useSDK } from "./sdk"
@@ -101,12 +101,12 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
 
     const owner = getOwner()
     const serverKey = () =>
-      params.serverKey ? requireServerKey(params.serverKey) : ServerConnection.key(serverSDK.server)
+      params.serverKey ? requireServerKey(params.serverKey) : ServerConnection.key(serverSDK().server)
     const scope = (): PromptScope =>
       search.draftId ? { draftID: search.draftId } : { dir: base64Encode(sdk().directory), id: params.id }
     const load = (scope: PromptScope) => {
       const current = settings.general.newLayoutDesigns() ? selectPromptTab(tabs.store, scope, serverKey()) : undefined
-      if (current) return createTabPromptState(tabs, current, serverSDK.scope, scope)
+      if (current) return createTabPromptState(tabs, current, serverSDK().scope, scope)
 
       const key = scopeKey(scope)
       const existing = cache.get(key)
@@ -118,7 +118,7 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
 
       const entry = createRoot(
         (dispose) => ({
-          value: createPromptSession(serverSDK.scope, scope),
+          value: createPromptSession(serverSDK().scope, scope),
           dispose,
         }),
         owner,

packages/app/src/context/sdk.tsx

@@ -10,7 +10,7 @@ const context = createSimpleContext({
     const serverSDK = useServerSDK()
     return createMemo(() => {
       const directory = typeof props.directory === "function" ? props.directory() : props.directory
-      return serverSDK.ensureDirSdkContext(directory)
+      return serverSDK().ensureDirSdkContext(directory)
     })
   },
 })

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

@@ -1,14 +1,16 @@
 import type { OpenCodeEvent } from "@opencode-ai/client/promise"
 import type { Event } from "@/types"
+import { createSimpleContext } from "@opencode-ai/ui/context"
 import { createGlobalEmitter } from "@solid-primitives/event-bus"
 import { makeEventListener } from "@solid-primitives/event-listener"
-import { batch, onCleanup, onMount } from "solid-js"
+import { type Accessor, batch, createMemo, onCleanup, onMount } from "solid-js"
 import { createApiForServer, type ServerApi } from "@/utils/server"
+import { useLanguage } from "./language"
 import { usePlatform } from "./platform"
-import { ServerConnection } from "./servers"
+import { ServerConnection, useServer } from "./server"
 import { createRefCountMap } from "@/utils/refcount"
+import { useGlobal } from "./global"
 import { ServerScope } from "@/utils/server-scope"
-import { useServer } from "./server"
 
 const isAbortError = (error: unknown) =>
   error !== null && typeof error === "object" && "name" in error && error.name === "AbortError"
@@ -264,10 +266,22 @@ export function createServerSdkContext(server: ServerConnection.Any, scope: Serv
   })
 }
 
-export const useServerSDK = () => {
-  const server = useServer()
-  return server.ctx.sdk
-}
+export const { use: useServerSDK, provider: ServerSDKProvider } = createSimpleContext({
+  name: "ServerSDK",
+  // Returns an accessor so the resolved server can change reactively (e.g. a
+  // /new-session draft retargeting its server) without re-instantiating the subtree.
+  init: (props: { server?: Accessor<ServerConnection.Any | undefined> }) => {
+    const global = useGlobal()
+    const language = useLanguage()
+    const server = useServer()
+
+    return createMemo<ServerSDK>(() => {
+      const conn = props.server?.() ?? server.current
+      if (!conn) throw new Error(language.t("error.serverSDK.noServerAvailable"))
+      return global.ensureServerCtx(conn).sdk
+    })
+  },
+})
 
 type SDKEventMap = {
   [key in Event["type"]]: Extract<ServerEvent, { type: key }>

packages/app/src/context/server-session-v2-reducer.test.ts

@@ -18,18 +18,18 @@ describe("v2 session reducer", () => {
     apply({
       ...base,
       id: "evt_admitted",
-      type: "session.inbox.enqueued",
+      type: "session.input.admitted",
       data: {
         sessionID: "ses_1",
-        inboxID: "msg_user",
-        item: { type: "user", delivery: "steer", payload: { text: "hello" } },
+        inputID: "msg_user",
+        input: { type: "user", delivery: "steer", data: { text: "hello" } },
       },
     })
     apply({
       ...base,
       id: "evt_promoted",
-      type: "session.inbox.delivered",
-      data: { sessionID: "ses_1", inboxID: "msg_user" },
+      type: "session.input.promoted",
+      data: { sessionID: "ses_1", inputID: "msg_user" },
     })
     apply({
       ...base,
@@ -203,8 +203,8 @@ describe("v2 session reducer", () => {
       event({
         ...base,
         id: "evt_promoted",
-        type: "session.inbox.delivered",
-        data: { sessionID: "ses_1", inboxID: "msg_user" },
+        type: "session.input.promoted",
+        data: { sessionID: "ses_1", inputID: "msg_user" },
       }),
     )
 
@@ -218,11 +218,11 @@ describe("v2 session reducer", () => {
       event({
         ...base,
         id: "evt_admitted",
-        type: "session.inbox.enqueued",
+        type: "session.input.admitted",
         data: {
           sessionID: "ses_1",
-          inboxID: "msg_user",
-          item: { type: "user", delivery: "queue", payload: { text: "cancel me" } },
+          inputID: "msg_user",
+          input: { type: "user", delivery: "queue", data: { text: "cancel me" } },
         },
       }),
     )
@@ -231,8 +231,8 @@ describe("v2 session reducer", () => {
       event({
         ...base,
         id: "evt_cancelled",
-        type: "session.inbox.cancelled",
-        data: { sessionID: "ses_1", inboxID: "msg_user" },
+        type: "session.input.cancelled",
+        data: { sessionID: "ses_1", inputID: "msg_user" },
       }),
     )
     const result = reducer.reduce(
@@ -240,8 +240,8 @@ describe("v2 session reducer", () => {
       event({
         ...base,
         id: "evt_promoted",
-        type: "session.inbox.delivered",
-        data: { sessionID: "ses_1", inboxID: "msg_user" },
+        type: "session.input.promoted",
+        data: { sessionID: "ses_1", inputID: "msg_user" },
       }),
     )
 
@@ -255,11 +255,11 @@ describe("v2 session reducer", () => {
       event({
         ...base,
         id: "evt_admitted",
-        type: "session.inbox.enqueued",
+        type: "session.input.admitted",
         data: {
           sessionID: "ses_1",
-          inboxID: "msg_user",
-          item: { type: "user", delivery: "queue", payload: { text: "steer me" } },
+          inputID: "msg_user",
+          input: { type: "user", delivery: "queue", data: { text: "steer me" } },
         },
       }),
     )
@@ -268,8 +268,8 @@ describe("v2 session reducer", () => {
       event({
         ...base,
         id: "evt_steered",
-        type: "session.inbox.delivery.changed",
-        data: { sessionID: "ses_1", inboxID: "msg_user", delivery: "steer" },
+        type: "session.input.steered",
+        data: { sessionID: "ses_1", inputID: "msg_user" },
       }),
     )
     reducer.reduce(
@@ -277,8 +277,8 @@ describe("v2 session reducer", () => {
       event({
         ...base,
         id: "evt_queued",
-        type: "session.inbox.delivery.changed",
-        data: { sessionID: "ses_1", inboxID: "msg_user", delivery: "queue" },
+        type: "session.input.queued",
+        data: { sessionID: "ses_1", inputID: "msg_user" },
       }),
     )
 
@@ -287,8 +287,8 @@ describe("v2 session reducer", () => {
       event({
         ...base,
         id: "evt_promoted",
-        type: "session.inbox.delivered",
-        data: { sessionID: "ses_1", inboxID: "msg_user" },
+        type: "session.input.promoted",
+        data: { sessionID: "ses_1", inputID: "msg_user" },
       }),
     )
 

packages/app/src/context/server-session-v2-reducer.ts

@@ -1,4 +1,4 @@
-import type { OpenCodeEvent, SessionInboxItem, SessionMessageInfo } from "@opencode-ai/client/promise"
+import type { OpenCodeEvent, SessionMessageInfo, SessionPendingMessage } from "@opencode-ai/client/promise"
 
 type Assistant = Extract<SessionMessageInfo, { type: "assistant" }>
 type Compaction = Extract<SessionMessageInfo, { type: "compaction" }>
@@ -12,7 +12,7 @@ export type V2SessionReduction = {
 }
 
 export function createV2SessionReducer() {
-  const pending = new Map<string, SessionInboxItem>()
+  const pending = new Map<string, SessionPendingMessage>()
 
   const reduce = (source: readonly SessionMessageInfo[], event: OpenCodeEvent): V2SessionReduction | undefined => {
     if (!("data" in event) || !("sessionID" in event.data) || typeof event.data.sessionID !== "string") return
@@ -26,33 +26,32 @@ export function createV2SessionReducer() {
       result(source.some((item) => item.id === message.id) ? [...source] : [...source, message], [message.id])
 
     switch (event.type) {
-      case "session.inbox.enqueued":
-        pending.set(key(sessionID, event.data.inboxID), event.data.item)
+      case "session.input.admitted":
+        pending.set(key(sessionID, event.data.inputID), event.data.input)
         return result([...source])
-      case "session.inbox.cancelled":
-        pending.delete(key(sessionID, event.data.inboxID))
+      case "session.input.cancelled":
+        pending.delete(key(sessionID, event.data.inputID))
         return
-      case "session.inbox.delivered": {
-        const input = pending.get(key(sessionID, event.data.inboxID))
-        pending.delete(key(sessionID, event.data.inboxID))
-        if (!input) return { ...result([...source]), missing: event.data.inboxID }
+      case "session.input.promoted": {
+        const input = pending.get(key(sessionID, event.data.inputID))
+        pending.delete(key(sessionID, event.data.inputID))
+        if (!input) return { ...result([...source]), missing: event.data.inputID }
         if (input.type === "user")
           return append({
-            id: event.data.inboxID,
+            id: event.data.inputID,
             type: "user",
-            metadata: input.payload.metadata,
-            text: input.payload.text,
-            files: input.payload.files,
-            agents: input.payload.agents,
+            metadata: input.data.metadata,
+            text: input.data.text,
+            files: input.data.files,
+            agents: input.data.agents,
             time: { created: event.created },
           })
-        if (input.type !== "synthetic") return result([...source])
         return append({
-          id: event.data.inboxID,
+          id: event.data.inputID,
           type: "synthetic",
-          metadata: input.payload.metadata,
-          text: input.payload.text,
-          description: input.payload.description,
+          metadata: input.data.metadata,
+          text: input.data.text,
+          description: input.data.description,
           time: { created: event.created },
         })
       }
@@ -352,7 +351,7 @@ export function createV2SessionReducer() {
           metadata: event.metadata,
           reason: event.data.reason,
           summary: "",
-          recent: event.data.recent ?? "",
+          recent: event.data.recent,
           time: { created: event.created },
         })
       case "session.compaction.delta":

packages/app/src/context/server-session.ts

@@ -1,5 +1,4 @@
 import { Binary } from "@opencode-ai/core/util/binary"
-import { ProjectDirectories } from "@opencode-ai/schema/project-directories"
 import { retry } from "@opencode-ai/core/util/retry"
 import type { OpenCodeEvent, SessionApi, SessionInfo, SessionMessageInfo } from "@opencode-ai/client/promise"
 import type { Message, Part, Todo } from "@/types"
@@ -895,17 +894,6 @@ export function createServerSession(
   }
 
   const applyV2 = (event: OpenCodeEvent) => {
-    if (event.type === "project.directory.resolved") {
-      Object.values(data.info).forEach((info) => {
-        if (!info) return
-        const adopted = ProjectDirectories.adopt(
-          { projectID: info.projectID, directory: info.location.directory },
-          event.data,
-        )
-        if (adopted) remember({ ...info, ...adopted })
-      })
-      return
-    }
     if (!("data" in event) || !("sessionID" in event.data) || typeof event.data.sessionID !== "string") return
     const sessionID = event.data.sessionID
     const reduction = v2.reduce(data.session_message[sessionID] ?? [], event)

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

@@ -1,8 +1,8 @@
 import type { Config, Path, Project, ProviderAuthResponse } from "@/types"
 import { showToast } from "@/utils/toast"
 import { getFilename } from "@opencode-ai/core/util/path"
-import { batch, getOwner, onCleanup, onMount, untrack } from "solid-js"
-import { createStore, reconcile } from "solid-js/store"
+import { type Accessor, batch, createMemo, getOwner, onCleanup, onMount, untrack } from "solid-js"
+import { createStore, produce, reconcile } from "solid-js/store"
 import { useLanguage } from "@/context/language"
 import type { InitError } from "../pages/error"
 import { ServerSDK } from "./server-sdk"
@@ -31,9 +31,12 @@ import { createRefreshQueue } from "./global-sync/queue"
 import { directoryKey } from "./global-sync/utils"
 import { PathKey } from "@/utils/path-key"
 import { createDirSyncContext } from "./directory-sync"
+import { createSimpleContext } from "@opencode-ai/ui/context"
 import { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
 import { createRefCountMap } from "@/utils/refcount"
-import { ServerConnection } from "./servers"
+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 { createHomeSessionIndexCache } from "./global-sync/home-session-index"
 import { persisted } from "@/utils/persist"
@@ -51,7 +54,6 @@ import type {
 import { toggleMcp } from "./global-sync/mcp"
 import { createServerSession, type ServerSession } from "./server-session"
 import { usePlatform } from "./platform"
-import { useServer } from "./server"
 
 type GlobalStore = {
   ready: boolean
@@ -693,12 +695,24 @@ export function createServerSyncContext(serverSDK: ServerSDK) {
 
 export type ServerSync = ReturnType<typeof createServerSyncContext>
 
-export const useServerSync = () => {
-  const server = useServer()
-  return server.ctx.sync
-}
+export const { use: useServerSync, provider: ServerSyncProvider } = createSimpleContext({
+  name: "ServerSync",
+  // Returns an accessor so the resolved server can change reactively without
+  // re-instantiating the subtree (mirrors useServerSDK).
+  init: (props: { server?: Accessor<ServerConnection.Any | undefined> }) => {
+    const global = useGlobal()
+    const language = useLanguage()
+    const server = useServer()
+
+    return createMemo<ServerSync>(() => {
+      const conn = props.server?.() ?? server.current
+      if (!conn) throw new Error(language.t("error.serverSDK.noServerAvailable"))
+      return global.ensureServerCtx(conn).sync
+    })
+  },
+})
 
 export function useQueryOptions() {
   const sync = useServerSync()
-  return sync.queryOptions
+  return createMemo(() => sync().queryOptions)
 }

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

@@ -1,11 +1,13 @@
 import { describe, expect, test } from "bun:test"
 import { createRoot, createSignal } from "solid-js"
+import { createStore } from "solid-js/store"
 import {
+  createServerProjects,
   migrateCanonicalLocalServerState,
   nextServerAfterRemoval,
   resolveServerList,
   ServerConnection,
-} from "./servers"
+} from "./server"
 import { ServerScope } from "@/utils/server-scope"
 
 describe("resolveServerList", () => {
@@ -93,6 +95,110 @@ test("active server removal falls back across built-in and persisted servers", (
   ).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: {}, recentlyClosed: {} })
+      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()
+    })
+  })
+
+  test("tracks recently closed projects and drops them when reopened", () => {
+    createRoot((dispose) => {
+      const [scope] = createSignal(ServerScope.local)
+      const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} })
+      const projects = createServerProjects({ scope, store, setStore })
+
+      projects.open("/a")
+      projects.open("/b")
+      projects.close("/a")
+      expect(projects.recentlyClosed()).toEqual(["/a"])
+
+      projects.close("/b")
+      expect(projects.recentlyClosed()).toEqual(["/b", "/a"])
+
+      projects.open("/a")
+      expect(projects.recentlyClosed()).toEqual(["/b"])
+      expect(projects.list()).toEqual([{ worktree: "/a", expanded: true }])
+      dispose()
+    })
+  })
+
+  test("remove drops a project without recording it as recently closed", () => {
+    createRoot((dispose) => {
+      const [scope] = createSignal(ServerScope.local)
+      const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} })
+      const projects = createServerProjects({ scope, store, setStore })
+
+      projects.open("/repo/subdir")
+      projects.remove("/repo/subdir")
+      expect(projects.list()).toEqual([])
+      expect(projects.recentlyClosed()).toEqual([])
+      dispose()
+    })
+  })
+
+  test("retains recently closed history beyond the visible display limit", () => {
+    createRoot((dispose) => {
+      const [scope] = createSignal(ServerScope.local)
+      const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} })
+      const projects = createServerProjects({ scope, store, setStore })
+
+      // Closing 6 projects keeps all 6 in the store even though only 5 are displayed;
+      // this prevents display-filtered entries from evicting still-visible ones.
+      for (const dir of ["/1", "/2", "/3", "/4", "/5", "/6"]) {
+        projects.open(dir)
+        projects.close(dir)
+      }
+      expect(projects.recentlyClosed()).toEqual(["/6", "/5", "/4", "/3", "/2", "/1"])
+      dispose()
+    })
+  })
+
+  test("caps recently closed history at the store limit", () => {
+    createRoot((dispose) => {
+      const [scope] = createSignal(ServerScope.local)
+      const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} })
+      const projects = createServerProjects({ scope, store, setStore })
+
+      for (let i = 1; i <= 20; i++) {
+        projects.open(`/p${i}`)
+        projects.close(`/p${i}`)
+      }
+      expect(projects.recentlyClosed()).toHaveLength(16)
+      expect(projects.recentlyClosed()[0]).toBe("/p20")
+      expect(projects.recentlyClosed().at(-1)).toBe("/p5")
+      dispose()
+    })
+  })
+
+  test("dedupes recently closed entries by normalized path", () => {
+    createRoot((dispose) => {
+      const [scope] = createSignal(ServerScope.local)
+      const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} })
+      const projects = createServerProjects({ scope, store, setStore })
+
+      projects.close("/repo")
+      projects.close("/repo/")
+      expect(projects.recentlyClosed()).toEqual(["/repo/"])
+      dispose()
+    })
+  })
+})
+
 describe("migrateCanonicalLocalServerState", () => {
   test("moves an existing canonical web bucket into local scope", () => {
     expect(

packages/app/src/context/server.tsx

@@ -1,23 +1,375 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { ServerConnection } from "./servers"
-import { useGlobal } from "./global"
+import { type Accessor, batch, createMemo } from "solid-js"
+import { createStore, type SetStoreFunction, type Store } from "solid-js/store"
+import { Persist, persisted } from "@/utils/persist"
+import { pathKey } from "@/utils/path-key"
+import { ServerScope } from "@/utils/server-scope"
 
-// Must be keyed for now
-export const { use: useServer, provider: ServerProvider } = createSimpleContext({
-  name: "Server",
-  init: (props: { conn: ServerConnection.Any }) => {
-    const conn = props.conn
+type StoredProject = { worktree: string; expanded: boolean }
+type StoredServer = string | ServerConnection.HttpBase | ServerConnection.Http
+type ServerProjectState = {
+  projects: Record<string, StoredProject[]>
+  lastProject: Record<string, string>
+  recentlyClosed: Record<string, string[]>
+}
+const HEALTH_POLL_INTERVAL_MS = 10_000
+// The store retains more history than is displayed. Consumers filter recently closed entries
+// against the live project list (dropping deleted projects) and then cap the visible count via
+// RECENTLY_CLOSED_DISPLAY_LIMIT. Retaining extra history ensures entries that are temporarily
+// filtered out do not evict still-visible ones from the persisted store.
+const RECENTLY_CLOSED_HISTORY_LIMIT = 16
+export const RECENTLY_CLOSED_DISPLAY_LIMIT = 5
+
+export function normalizeServerUrl(input: string) {
+  const trimmed = input.trim()
+  if (!trimmed) return
+  const withProtocol = /^https?:\/\//.test(trimmed) ? trimmed : `http://${trimmed}`
+  return withProtocol.replace(/\/+$/, "")
+}
+
+export function serverName(conn?: ServerConnection.Any, ignoreDisplayName = false) {
+  if (!conn) return ""
+  if (conn.displayName && !ignoreDisplayName) return conn.displayName
+  return conn.http.url.replace(/^https?:\/\//, "").replace(/\/+$/, "")
+}
+
+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()] ?? []
+  const currentClosed = () => input.store.recentlyClosed?.[input.scope()] ?? []
+  const remove = (directory: string) => {
+    setStore(
+      "projects",
+      input.scope(),
+      current().filter((project) => project.worktree !== directory),
+    )
+  }
+  return {
+    list: current,
+    recentlyClosed: currentClosed,
+    remove,
+    open(directory: string) {
+      const scope = input.scope()
+      const key = pathKey(directory)
+      const closed = currentClosed()
+      if (closed.some((worktree) => pathKey(worktree) === key)) {
+        setStore(
+          "recentlyClosed",
+          scope,
+          closed.filter((worktree) => pathKey(worktree) !== key),
+        )
+      }
+      if (current().some((project) => project.worktree === directory)) return
+      setStore("projects", scope, [{ worktree: directory, expanded: true }, ...current()])
+    },
+    // User-initiated close: removes the project and records it in recently closed.
+    // Internal, non-user removals (e.g. sandbox/worktree normalization) should use remove().
+    close(directory: string) {
+      remove(directory)
+      const key = pathKey(directory)
+      const closed = [directory, ...currentClosed().filter((worktree) => pathKey(worktree) !== key)].slice(
+        0,
+        RECENTLY_CLOSED_HISTORY_LIMIT,
+      )
+      setStore("recentlyClosed", input.scope(), closed)
+    },
+    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[]
+}): 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 global = useGlobal()
+    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()]
+}
+
+export function canRemoveServer(input: {
+  key: ServerConnection.Key
+  provided?: Array<ServerConnection.Any>
+  stored: StoredServer[]
+}) {
+  if (input.provided?.some((server) => ServerConnection.key(server) === input.key)) return false
+  return input.stored.some((server) =>
+    typeof server === "string" ? server === input.key : ("type" in server ? server.http.url : server.url) === input.key,
+  )
+}
+
+export namespace ServerConnection {
+  type Base = { displayName?: string; label?: string }
+
+  export type HttpBase = {
+    url: string
+    username?: string
+    password?: string
+  }
+
+  // Regular web connections
+  export type Http = {
+    type: "http"
+    http: HttpBase
+    authToken?: boolean
+  } & Base
+
+  export type Sidecar = {
+    type: "sidecar"
+    http: HttpBase
+  } & (
+    | // Regular desktop server
+    { variant: "base" }
+    // WSL server (windows only)
+    | {
+        variant: "wsl"
+        distro: string
+      }
+  ) &
+    Base
+
+  // Remote server desktop can SSH into
+  export type Ssh = {
+    type: "ssh"
+    host: string
+    // SSH client exposes an HTTP server for the app to use as a proxy
+    http: HttpBase
+  } & Base
+
+  export type Any =
+    | Http
+    // All these are desktop-only
+    | (Sidecar | Ssh)
+
+  export const key = (conn: Any): Key => {
+    switch (conn.type) {
+      case "http":
+        return Key.make(conn.http.url)
+      case "sidecar": {
+        if (conn.variant === "wsl") return Key.make(`wsl:${conn.distro}`)
+        return Key.make("sidecar")
+      }
+      case "ssh":
+        return Key.make(`ssh:${conn.host}`)
+    }
+  }
+
+  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",
+  gate: true,
+  init: (props: {
+    defaultServer: ServerConnection.Key
+    canonicalLocalServer?: ServerConnection.Key
+    servers?: Array<ServerConnection.Any>
+  }) => {
+    const [store, setStore, _, ready] = persisted(
+      {
+        ...Persist.global("server", ["server.v3"]),
+        migrate: (value) => migrateCanonicalLocalServerState(value, props.canonicalLocalServer),
+      },
+      createStore({
+        list: [] as StoredServer[],
+        projects: {} as Record<string, StoredProject[]>,
+        lastProject: {} as Record<string, string>,
+        recentlyClosed: {} as Record<string, string[]>,
+      }),
+    )
+
+    const url = (x: StoredServer) => (typeof x === "string" ? x : "type" in x ? x.http.url : x.url)
+
+    const allServers = createMemo((): Array<ServerConnection.Any> => {
+      return resolveServerList({ stored: store.list, props: props.servers })
+    })
+
+    const [state, setState] = createStore({
+      active: props.defaultServer,
+    })
+
+    function setActive(input: ServerConnection.Key) {
+      if (state.active !== input) setState("active", input)
+    }
+
+    function add(input: ServerConnection.Http) {
+      const url_ = normalizeServerUrl(input.http.url)
+      if (!url_) return
+      const conn: ServerConnection.Http = { ...input, authToken: undefined, http: { ...input.http, url: url_ } }
+      return batch(() => {
+        const existing = store.list.findIndex((x) => url(x) === url_)
+        if (existing !== -1) {
+          setStore("list", existing, conn)
+        } else {
+          setStore("list", store.list.length, conn)
+        }
+        setState("active", ServerConnection.key(conn))
+        return conn
+      })
+    }
+
+    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) setState("active", next)
+      })
+    }
+
+    function canRemove(key: ServerConnection.Key) {
+      return canRemoveServer({ key, provided: props.servers, stored: store.list })
+    }
+
+    const isReady = Object.assign(
+      createMemo(() => ready() && !!state.active),
+      { promise: ready.promise },
+    )
+
+    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(() => ServerConnection.local(current()))
 
     return {
-      conn,
-      key,
-      isLocal: ServerConnection.local(props.conn),
-      ctx: global.ensureServerCtx(conn),
-      get health() {
-        return global.servers.health[key]
+      ready: isReady,
+      isLocal,
+      get key() {
+        return state.active
+      },
+      get name() {
+        return serverName(current())
+      },
+      get list() {
+        return allServers()
+      },
+      get current() {
+        return current()
+      },
+      setActive,
+      add,
+      remove,
+      canRemove,
+      scope,
+      projects: {
+        ...projects,
+        forServer: projectsForServer,
       },
     }
   },

packages/app/src/context/servers.tsx

@@ -1,342 +0,0 @@
-import { createSimpleContext } from "@opencode-ai/ui/context"
-import { type Accessor, batch, createMemo } from "solid-js"
-import { createStore, type SetStoreFunction, type Store } from "solid-js/store"
-import { Persist, persisted } from "@/utils/persist"
-import { pathKey } from "@/utils/path-key"
-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>
-  recentlyClosed: Record<string, string[]>
-}
-const HEALTH_POLL_INTERVAL_MS = 10_000
-// The store retains more history than is displayed. Consumers filter recently closed entries
-// against the live project list (dropping deleted projects) and then cap the visible count via
-// RECENTLY_CLOSED_DISPLAY_LIMIT. Retaining extra history ensures entries that are temporarily
-// filtered out do not evict still-visible ones from the persisted store.
-const RECENTLY_CLOSED_HISTORY_LIMIT = 16
-export const RECENTLY_CLOSED_DISPLAY_LIMIT = 5
-
-export function normalizeServerUrl(input: string) {
-  const trimmed = input.trim()
-  if (!trimmed) return
-  const withProtocol = /^https?:\/\//.test(trimmed) ? trimmed : `http://${trimmed}`
-  return withProtocol.replace(/\/+$/, "")
-}
-
-export function serverName(conn?: ServerConnection.Any, ignoreDisplayName = false) {
-  if (!conn) return ""
-  if (conn.displayName && !ignoreDisplayName) return conn.displayName
-  return conn.http.url.replace(/^https?:\/\//, "").replace(/\/+$/, "")
-}
-
-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: () => ServerScope
-  store: Store<T>
-  setStore: SetStoreFunction<T>
-}) {
-  const setStore = input.setStore as unknown as SetStoreFunction<ServerProjectState>
-  const current = () => input.store.projects[input.scope()] ?? []
-  const currentClosed = () => input.store.recentlyClosed?.[input.scope()] ?? []
-  const remove = (directory: string) => {
-    setStore(
-      "projects",
-      input.scope(),
-      current().filter((project) => project.worktree !== directory),
-    )
-  }
-  return {
-    list: current,
-    recentlyClosed: currentClosed,
-    remove,
-    open(directory: string) {
-      const scope = input.scope()
-      const key = pathKey(directory)
-      const closed = currentClosed()
-      if (closed.some((worktree) => pathKey(worktree) === key)) {
-        setStore(
-          "recentlyClosed",
-          scope,
-          closed.filter((worktree) => pathKey(worktree) !== key),
-        )
-      }
-      if (current().some((project) => project.worktree === directory)) return
-      setStore("projects", scope, [{ worktree: directory, expanded: true }, ...current()])
-    },
-    // User-initiated close: removes the project and records it in recently closed.
-    // Internal, non-user removals (e.g. sandbox/worktree normalization) should use remove().
-    close(directory: string) {
-      remove(directory)
-      const key = pathKey(directory)
-      const closed = [directory, ...currentClosed().filter((worktree) => pathKey(worktree) !== key)].slice(
-        0,
-        RECENTLY_CLOSED_HISTORY_LIMIT,
-      )
-      setStore("recentlyClosed", input.scope(), closed)
-    },
-    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[]
-}): 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()]
-}
-
-export function canRemoveServer(input: {
-  key: ServerConnection.Key
-  provided?: Array<ServerConnection.Any>
-  stored: StoredServer[]
-}) {
-  if (input.provided?.some((server) => ServerConnection.key(server) === input.key)) return false
-  return input.stored.some((server) =>
-    typeof server === "string" ? server === input.key : ("type" in server ? server.http.url : server.url) === input.key,
-  )
-}
-
-export namespace ServerConnection {
-  type Base = { displayName?: string; label?: string }
-
-  export type HttpBase = {
-    url: string
-    username?: string
-    password?: string
-  }
-
-  // Regular web connections
-  export type Http = {
-    type: "http"
-    http: HttpBase
-    authToken?: boolean
-  } & Base
-
-  export type Sidecar = {
-    type: "sidecar"
-    http: HttpBase
-  } & (
-    | // Regular desktop server
-    { variant: "base" }
-    // WSL server (windows only)
-    | {
-        variant: "wsl"
-        distro: string
-      }
-  ) &
-    Base
-
-  // Remote server desktop can SSH into
-  export type Ssh = {
-    type: "ssh"
-    host: string
-    // SSH client exposes an HTTP server for the app to use as a proxy
-    http: HttpBase
-  } & Base
-
-  export type Any =
-    | Http
-    // All these are desktop-only
-    | (Sidecar | Ssh)
-
-  export const key = (conn: Any): Key => {
-    switch (conn.type) {
-      case "http":
-        return Key.make(conn.http.url)
-      case "sidecar": {
-        if (conn.variant === "wsl") return Key.make(`wsl:${conn.distro}`)
-        return Key.make("sidecar")
-      }
-      case "ssh":
-        return Key.make(`ssh:${conn.host}`)
-    }
-  }
-
-  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: useServers, provider: ServersProvider } = createSimpleContext({
-  name: "Server",
-  gate: true,
-  init: (props: {
-    defaultServer: ServerConnection.Key
-    canonicalLocalServer?: ServerConnection.Key
-    servers?: Array<ServerConnection.Any>
-  }) => {
-    const [store, setStore, _] = persisted(
-      {
-        ...Persist.global("server", ["server.v3"]),
-        migrate: (value) => migrateCanonicalLocalServerState(value, props.canonicalLocalServer),
-      },
-      createStore({
-        list: [] as StoredServer[],
-        projects: {} as Record<string, StoredProject[]>,
-        lastProject: {} as Record<string, string>,
-        recentlyClosed: {} as Record<string, string[]>,
-      }),
-    )
-
-    const url = (x: StoredServer) => (typeof x === "string" ? x : "type" in x ? x.http.url : x.url)
-
-    const allServers = createMemo((): Array<ServerConnection.Any> => {
-      return resolveServerList({ stored: store.list, props: props.servers })
-    })
-
-    function add(input: ServerConnection.Http) {
-      const url_ = normalizeServerUrl(input.http.url)
-      if (!url_) return
-      const conn: ServerConnection.Http = { ...input, authToken: undefined, http: { ...input.http, url: url_ } }
-      return batch(() => {
-        const existing = store.list.findIndex((x) => url(x) === url_)
-        if (existing !== -1) {
-          setStore("list", existing, conn)
-        } else {
-          setStore("list", store.list.length, conn)
-        }
-        return conn
-      })
-    }
-
-    function remove(key: ServerConnection.Key) {
-      const list = store.list.filter((x) => url(x) !== key)
-      batch(() => {
-        setStore("list", list)
-      })
-    }
-
-    function canRemove(key: ServerConnection.Key) {
-      return canRemoveServer({ key, provided: props.servers, stored: store.list })
-    }
-
-    const scope = (key: ServerConnection.Key) => ServerScope.fromServerKey(key, props.canonicalLocalServer)
-    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
-    }
-
-    return {
-      get list() {
-        return allServers()
-      },
-      add,
-      remove,
-      canRemove,
-      scope,
-      projects: {
-        forServer: projectsForServer,
-      },
-    }
-  },
-})

packages/app/src/context/sync.tsx

@@ -114,7 +114,7 @@ export const useSync = () => {
   const serverSync = useServerSync()
   const sdk = useSDK()
 
-  return createMemo(() => serverSync.ensureDirSyncContext(sdk().directory))
+  return createMemo(() => serverSync().ensureDirSyncContext(sdk().directory))
 }
 
 export type DirectorySync = ReturnType<ReturnType<typeof useSync>>

packages/app/src/context/tab-migration.ts

@@ -1,4 +1,4 @@
-import type { ServerConnection } from "./servers"
+import type { ServerConnection } from "./server"
 import type { Tab } from "./tabs"
 
 export function migrateTabs(value: unknown, fallback: ServerConnection.Key): Tab[] {

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

@@ -4,7 +4,7 @@ import { createTabMemory } from "./tab-memory"
 import { nextTabAfterClose, pushClosedTab, removeClosedTabs, takeClosedTab, type ClosedTab } from "./closed-tabs"
 import type { SessionTab, Tab } from "./tabs"
 import { migrateTabs } from "./tab-migration"
-import type { ServerConnection } from "./servers"
+import type { ServerConnection } from "./server"
 
 const server = "local\nhttp://localhost:4096" as ServerConnection.Key
 

packages/app/src/context/tabs.tsx

@@ -2,7 +2,7 @@ import type { SessionInfo } from "@opencode-ai/client/promise"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { createStore, produce } from "solid-js/store"
 import { Persist, persisted, removePersisted, draftPersistedKeys } from "@/utils/persist"
-import { ServerConnection, useServers } from "./servers"
+import { ServerConnection, useServer } from "./server"
 import { createEffect, getOwner, onCleanup, startTransition } from "solid-js"
 import { useLocation, useNavigate, useParams } from "@solidjs/router"
 import { usePlatform } from "./platform"
@@ -13,7 +13,6 @@ import { createTabMemory } from "./tab-memory"
 import { nextTabAfterClose, pushClosedTab, removeClosedTabs, takeClosedTab, type ClosedTab } from "./closed-tabs"
 import { createDraftPromptSession, type PromptModel } from "./prompt-state"
 import { migrateTabs } from "./tab-migration"
-import { useCurrentRoute } from "./layout"
 
 export type SessionTab = {
   type: "session"
@@ -55,12 +54,13 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
   name: "Tabs",
   gate: false,
   init: () => {
-    const servers = useServers()
+    const server = useServer()
     const platform = usePlatform()
+    const fallback = server.key
     const [store, setStore, _, ready] = persisted(
       {
         ...Persist.window("tabs"),
-        migrate: (value: unknown) => migrateTabs(value, ServerConnection.key(servers.list[0])),
+        migrate: (value: unknown) => migrateTabs(value, fallback),
       },
       createStore<Tab[]>([]),
     )
@@ -72,7 +72,6 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
     const navigate = useNavigate()
     const location = useLocation()
     const memory = createTabMemory(getOwner())
-    const currentRoute = useCurrentRoute()
 
     const closing = new Set<string>()
     let recentWrite = 0
@@ -121,11 +120,11 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
 
     createEffect(() => {
       if (!ready() || !recentReady()) return
-      const serversSet = new Set(servers.list.map(ServerConnection.key))
-      const next = store.filter((tab) => serversSet.has(tab.server))
+      const servers = new Set(server.list.map(ServerConnection.key))
+      const next = store.filter((tab) => servers.has(tab.server))
       if (next.length !== store.length) {
         for (const tab of store) {
-          if (!serversSet.has(tab.server)) {
+          if (!servers.has(tab.server)) {
             const key = tabKey(tab)
             memory.remove(key)
             removeInfo(key)
@@ -142,8 +141,8 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
 
     createEffect(() => {
       if (!closedReady()) return
-      const serversSet = new Set(servers.list.map(ServerConnection.key))
-      const next = closed.filter((entry) => serversSet.has(entry.tab.server))
+      const servers = new Set(server.list.map(ServerConnection.key))
+      const next = closed.filter((entry) => servers.has(entry.tab.server))
       if (next.length !== closed.length) setClosed(() => next)
     })
 
@@ -294,9 +293,10 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
         for (const key of removed) removeInfo(key)
         if (recent.key && removed.includes(recent.key)) setRecentKey(undefined)
         for (const draftID of drafts) removeDraftPersisted(draftID)
+        if (server.key === key) navigate("/")
       },
       removeSessions: (input: SessionTabsRemovedDetail) => {
-        const targetServer = input.server
+        const targetServer = input.server ?? server.key
         updateClosed((stack) => removeClosedTabs(stack, targetServer, input.sessionIDs))
         const removed = store
           .filter(
@@ -307,14 +307,17 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
           setStore(
             produce((tabs) => {
               const sessionIDs = new Set(input.sessionIDs)
-              const route = currentRoute()
-              const sessionRoute = route.type === "session" ? route : undefined
-              const currentIndex = sessionRoute
+              const currentHref =
+                targetServer === server.key && params.dir && params.id
+                  ? tabHref({
+                      type: "session",
+                      server: targetServer,
+                      sessionId: params.id,
+                    })
+                  : undefined
+              const currentIndex = currentHref
                 ? tabs.findIndex(
-                    (tab) =>
-                      tab.type === "session" &&
-                      tab.server === sessionRoute.server &&
-                      tab.sessionId === sessionRoute.sessionId,
+                    (tab) => tab.type === "session" && tab.server === targetServer && tabHref(tab) === currentHref,
                   )
                 : -1
               const currentTab = tabs[currentIndex]

packages/app/src/context/terminal.tsx

@@ -440,7 +440,7 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont
     const serverSDK = useServerSDK()
     const params = useParams()
     const cache = new Map<string, TerminalCacheEntry>()
-    const scope = () => serverSDK.scope
+    const scope = () => serverSDK().scope
     const directory = createMemo(() => base64Encode(sdk().directory))
 
     caches.add(cache)

packages/app/src/entry.tsx

@@ -10,7 +10,7 @@ import { dict as en } from "@/i18n/en"
 import { dict as zh } from "@/i18n/zh"
 import { authFromToken } from "@/utils/server"
 import pkg from "../package.json"
-import { ServerConnection } from "./context/servers"
+import { ServerConnection } from "./context/server"
 
 const DEFAULT_SERVER_URL_KEY = "opencode.settings.dat:defaultServerUrl"
 

packages/app/src/hooks/provider-catalog.ts

@@ -1,6 +1,6 @@
 import type { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
 
-export const emptyProviderCatalog: NormalizedProviderListResponse = { all: new Map(), connected: [], default: {} }
+const emptyProviderCatalog: NormalizedProviderListResponse = { all: new Map(), connected: [], default: {} }
 
 type DirectoryCatalog = {
   ready: boolean

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

@@ -1,9 +1,9 @@
-import { useQueryOptions } from "@/context/server-sync"
+import { useServerSync } from "@/context/server-sync"
+import { decode64 } from "@/utils/base64"
+import { useParams } from "@solidjs/router"
 import { Iterable, pipe } from "effect"
-import { type Accessor } from "solid-js"
-import { emptyProviderCatalog } from "./provider-catalog"
-import { useQuery } from "@tanstack/solid-query"
-import { pathKey } from "@/utils/path-key"
+import { createEffect, createMemo, type Accessor } from "solid-js"
+import { selectProviderCatalog } from "./provider-catalog"
 
 export const popularProviders = [
   "opencode",
@@ -18,13 +18,25 @@ export const popularProviders = [
 const popularProviderSet = new Set(popularProviders)
 
 export function useProviders(directory: Accessor<string | undefined>) {
-  const providersQuery = useQuery(() => {
-    const queryOpts = useQueryOptions()
-    const dir = directory()
-    return queryOpts.providers(dir ? pathKey(dir) : null)
-  })
-
-  const providers = () => (!providersQuery.isSuccess ? emptyProviderCatalog : providersQuery.data)
+  const serverSync = useServerSync()
+  const params = useParams()
+  const dir = () => (directory ? directory() : decode64(params.dir))
+  const providers = () => {
+    const value = dir()
+    const projectStore = value ? serverSync().child(value)[0] : undefined
+    if (value)
+      return selectProviderCatalog({
+        explicit: true,
+        directory: value,
+        catalog: projectStore && { ready: projectStore.provider_ready, providers: projectStore.provider },
+      })
+    return selectProviderCatalog({
+      explicit: false,
+      directory: value,
+      catalog: projectStore && { ready: projectStore.provider_ready, providers: projectStore.provider },
+      global: serverSync().data.provider,
+    })
+  }
 
   return {
     all: () => providers().all,

packages/app/src/index.ts

@@ -2,7 +2,7 @@ export { AppBaseProviders, AppInterface } from "./app"
 export { useLayout } from "./context/layout"
 export { useServerSDK } from "./context/server-sdk"
 export { useServerSync } from "./context/server-sync"
-export { useServers as useServers } from "./context/servers"
+export { useServer } from "./context/server"
 export { useSettings } from "./context/settings"
 export { useTabs } from "./context/tabs"
 export { useProviders } from "./hooks/use-providers"
@@ -26,5 +26,5 @@ export {
   type WslServersPlatform,
   type WslServersState,
 } from "./wsl/types"
-export { ServerConnection } from "./context/servers"
+export { ServerConnection } from "./context/server"
 export { createDraftStore, type DraftStore } from "./utils/draft-store"

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

@@ -2,22 +2,22 @@ import { DataProvider } from "@opencode-ai/session-ui/context"
 import { showToast } from "@/utils/toast"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 import { useLocation, useNavigate, useParams } from "@solidjs/router"
-import { createEffect, createMemo, createResource, onCleanup, type ParentProps, Show } from "solid-js"
+import { type Accessor, createEffect, createMemo, createResource, onCleanup, type ParentProps, Show } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { LocalProvider } from "@/context/local"
 import { SDKProvider } from "@/context/sdk"
 import { useSync } from "@/context/sync"
 import { decode64 } from "@/utils/base64"
 import { Schema } from "effect"
-import type { ServerConnection } from "@/context/servers"
+import type { ServerConnection } from "@/context/server"
 import { sessionHref } from "@/utils/session-route"
 import { useServerSync } from "@/context/server-sync"
 
 export function DirectoryDataProvider(
   props: ParentProps<{
-    directory: string
+    directory: string | Accessor<string>
     draftID?: string
-    server?: ServerConnection.Key
+    server?: Accessor<ServerConnection.Key | undefined>
   }>,
 ) {
   const location = useLocation()
@@ -25,16 +25,17 @@ export function DirectoryDataProvider(
   const params = useParams()
   const sync = useSync()
   const serverSync = useServerSync()
-  const directory = () => props.directory
+  const directory = () => (typeof props.directory === "function" ? props.directory() : props.directory)
   const slug = createMemo(() => base64Encode(directory()))
   const href = (sessionID: string) => {
-    if (props.server) return sessionHref(props.server, sessionID)
+    const server = props.server?.()
+    if (server) return sessionHref(server, sessionID)
     return `/${slug()}/session/${sessionID}`
   }
 
   createEffect(() => {
     // A draft lives at /new-session?draftId=… and has no directory segment to normalize.
-    if (props.draftID || props.server) return
+    if (props.draftID || props.server?.()) return
     const next = sync().data.path.directory
     if (!next || next === directory()) return
     const path = location.pathname.slice(slug().length + 1)
@@ -52,8 +53,8 @@ export function DirectoryDataProvider(
   createEffect(() => {
     const sessionID = params.id
     if (!sessionID) return
-    serverSync.session.pin(sessionID)
-    onCleanup(() => serverSync.session.unpin(sessionID))
+    serverSync().session.pin(sessionID)
+    onCleanup(() => serverSync().session.unpin(sessionID))
   })
 
   return (

packages/app/src/pages/home-session-archive.test.ts

@@ -1,7 +1,7 @@
 import { expect, test } from "bun:test"
 import { SESSION_TABS_REMOVED_EVENT, readSessionTabsRemovedDetail } from "@/components/titlebar-session-events"
 import { archiveHomeSession } from "./home-session-archive"
-import type { ServerConnection } from "@/context/servers"
+import type { ServerConnection } from "@/context/server"
 
 const remote = "remote" as ServerConnection.Key