chore(console): remove unused support dependency

Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>
fix(mcp): request refresh token scope (#34125 )
2026-08-04 09:16:20 -04:00 · 2026-06-27 03:44:48 +00:00 · 2026-06-26 22:27:43 -05:00 · 2026-06-26 22:21:16 -05:00 · 2026-06-27 02:47:33 +00:00 · 2026-06-26 22:46:07 -04:00
511 changed files with 24371 additions and 12342 deletions
@@ -1,2 +1,4 @@
 sst-env.d.ts
 packages/desktop/src/bindings.ts
+packages/client/src/generated/
+packages/client/src/generated-effect/
@@ -1,4 +1,6 @@
- To regenerate the JavaScript SDK, run `./packages/sdk/js/script/build.ts`.
+- To regenerate the legacy JavaScript SDK, run `./packages/sdk/js/script/build.ts`.
+- 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.
 - The default branch in this repo is `dev`.
 - Local `main` ref may not exist; use `dev` or `origin/dev` for diffs.

@@ -57,11 +57,21 @@ The bounded projection of a Core-executed tool result persisted in Session histo
 **Managed Tool Output File**:
 A temporary file created under OpenCode's shared tool-output directory to retain complete output that was too large for Session history.

+**Model Request Options**:
+Provider-semantic model settings selected from the Catalog and active Session variant before the LLM protocol adapter encodes them for a provider request.
+_Avoid_: Request body, wire options
+
+**Generation Controls**:
+Provider-neutral sampling and output controls, partitioned from provider semantics and compatibility wire fields when model metadata enters the Catalog.
+
+**Native Continuation Metadata**:
+Opaque protocol-shaped data attached to assistant content and required to continue that content natively with a compatible model, such as a reasoning signature or provider-hosted item identifier.
+
 **PTY Environment**:
 The host-supplied environment overlay applied by the server when creating a PTY, observed for the request Location and resolved PTY working directory.

 **OpenCode Client**:
-The generated Effect API shared by networked and in-process consumers, executed through an `HttpClient` against the same `HttpApi` router and handlers.
+The generated Promise and Effect APIs derived from the public `HttpApi`; **Embedded OpenCode** shares the Effect API through an in-memory `HttpClient` against the same router and handlers.
 _Avoid_: Remote client

 **SDK Contract IR**:
@@ -122,6 +132,9 @@ _Avoid_: Response envelope
 - A **Baseline System Context** durably preserves the exact joined text used for the active provider-cache prefix.
 - Completed compaction starts a new **Context Epoch** on the next provider attempt, folding the current complete **System Context** into a fresh baseline and removing earlier **Mid-Conversation System Messages** from active model history.
 - A model/provider switch preserves the current **Context Epoch** and chronological conversation history; the new selection applies to the next provider turn.
+- **Native Continuation Metadata** remains in durable history. Provider-turn projection includes it only for a successful exact originating provider/model match; failed turns and incompatible models omit opaque metadata, while non-empty visible reasoning lowers to ordinary assistant text after a model switch. This conservative relation may widen only when recorded provider tests establish compatibility.
+- **Model Request Options** remain provider-semantic through Catalog resolution. The Session runner maps them into the LLM package's provider-option namespace; the selected protocol adapter alone owns provider wire encoding.
+- **Generation Controls**, protocol-semantic **Model Request Options**, and compatibility request body fields are separate Catalog domains. A shared ingestion adapter partitions legacy and models.dev AI-SDK-shaped options before routing.
 - The **PTY Environment** is a server concern rather than a Core PTY concern. PTY creation merges caller values, then the host overlay, then Core-forced terminal invariants such as `TERM` and `OPENCODE_TERMINAL`.
 - Networked and **Embedded OpenCode** use the same **OpenCode Client** and preserve the full HTTP encoding, routing, middleware, and decoding boundary; only the `HttpClient` transport differs.
 - The Effect-native network constructor obtains `HttpClient.HttpClient` from its environment so callers own transport selection, recording, tracing, retries, and tests. Convenience runtimes may provide a fetch transport separately.
@@ -159,8 +172,9 @@ _Avoid_: Response envelope
 - Session list cursors are opaque branded values carrying continuation query and ordering state. Consumers pass them back unchanged and do not inspect storage anchors or encoded filter fields.
 - A Session list continuation accepts only its opaque cursor. Scope, filters, ordering, and page size are fixed by the initial query and carried by that cursor.
 - `sessions.messages(...)` returns a **Page** and uses the same cursor discipline as `sessions.list(...)`: the initial request supplies `sessionID`, ordering, and page size; continuation supplies `sessionID` plus only an opaque branded message cursor carrying ordering, page size, direction, and message anchor. Using a cursor with another Session is invalid.
- `sessions.message({ sessionID, messageID })` is a required resource lookup. An unknown Session fails with `SessionNotFoundError`; a known Session with an absent or differently owned message fails with `SessionMessageNotFoundError` without disclosing cross-Session ownership. Absence is not represented as `undefined` across the public HTTP boundary.
+- `sessions.message({ sessionID, messageID })` is a required resource lookup. An unknown Session fails with `SessionNotFoundError`; a known Session with an absent or differently owned message fails with `MessageNotFoundError` without disclosing cross-Session ownership. Absence is not represented as `undefined` across the public HTTP boundary.
 - `sessions.interrupt({ sessionID })` first verifies that the durable Session exists, failing with `SessionNotFoundError` otherwise. For a known Session, interruption is idempotent: idle, already-settled, or locally unowned execution is a no-op.
+- `sessions.active()` snapshots the current process's foreground Session drain registry as a record of Session IDs to `{ type: "running" }`. Missing IDs are inactive; background subagents and tasks do not make their parent Session active, and process restart clears the registry.
 - `sessions.context({ sessionID })` preserves the existing message-only operation. It returns projected conversational messages selected as Session context; it does not include or represent the complete provider request context, whose baseline system context and other contributions remain separate.
 - **Open question**: Should a future, separately named operation expose the complete provider request context, including baseline system context, selected source contributions, and context-epoch metadata?
 - `sessions.prompt(...)` exposes `resume?: boolean`. Omitting it preserves durable admission followed by an advisory execution wake; `resume: false` requests durable admit-only behavior.
@@ -29,8 +29,12 @@
    },
    "packages/app": {
      "name": "@opencode-ai/app",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
+        "@dnd-kit/abstract": "0.5.0",
+        "@dnd-kit/dom": "0.5.0",
+        "@dnd-kit/helpers": "0.5.0",
+        "@dnd-kit/solid": "0.5.0",
        "@kobalte/core": "catalog:",
        "@opencode-ai/core": "workspace:*",
        "@opencode-ai/sdk": "workspace:*",
@@ -59,7 +63,7 @@
        "diff": "catalog:",
        "effect": "catalog:",
        "fuzzysort": "catalog:",
-        "ghostty-web": "github:anomalyco/ghostty-web#main",
+        "ghostty-web": "github:anomalyco/ghostty-web#513463a6f1190253057e8a3f0dac8f6ee8393553",
        "luxon": "catalog:",
        "marked": "catalog:",
        "marked-shiki": "catalog:",
@@ -79,6 +83,7 @@
        "@types/luxon": "catalog:",
        "@types/node": "catalog:",
        "@typescript/native-preview": "catalog:",
+        "tw-animate-css": "1.4.0",
        "typescript": "catalog:",
        "vite": "catalog:",
        "vite-plugin-icons-spritesheet": "3.0.1",
@@ -87,7 +92,7 @@
    },
    "packages/cli": {
      "name": "@opencode-ai/cli",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "bin": {
        "lildax": "./bin/lildax.cjs",
      },
@@ -135,7 +140,7 @@
    },
    "packages/console/app": {
      "name": "@opencode-ai/console-app",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@cloudflare/vite-plugin": "1.15.2",
        "@ibm/plex": "6.4.1",
@@ -171,7 +176,7 @@
    },
    "packages/console/core": {
      "name": "@opencode-ai/console-core",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@aws-sdk/client-sts": "3.782.0",
        "@jsx-email/render": "1.1.1",
@@ -198,7 +203,7 @@
    },
    "packages/console/function": {
      "name": "@opencode-ai/console-function",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@ai-sdk/anthropic": "3.0.82",
        "@ai-sdk/openai": "3.0.48",
@@ -220,7 +225,7 @@
    },
    "packages/console/mail": {
      "name": "@opencode-ai/console-mail",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@jsx-email/all": "2.2.3",
        "@jsx-email/cli": "1.4.3",
@@ -244,9 +249,8 @@
    },
    "packages/console/support": {
      "name": "@opencode-ai/console-support",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
-        "@cloudflare/vite-plugin": "1.15.2",
        "@opencode-ai/console-core": "workspace:*",
        "@solidjs/meta": "catalog:",
        "@solidjs/router": "catalog:",
@@ -264,7 +268,7 @@
    },
    "packages/core": {
      "name": "@opencode-ai/core",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "bin": {
        "opencode": "./bin/opencode",
      },
@@ -357,7 +361,7 @@
    },
    "packages/desktop": {
      "name": "@opencode-ai/desktop",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@zip.js/zip.js": "2.7.62",
        "effect": "catalog:",
@@ -411,7 +415,7 @@
    },
    "packages/effect-drizzle-sqlite": {
      "name": "@opencode-ai/effect-drizzle-sqlite",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "drizzle-orm": "catalog:",
        "effect": "catalog:",
@@ -425,7 +429,7 @@
    },
    "packages/effect-sqlite-node": {
      "name": "@opencode-ai/effect-sqlite-node",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "effect": "catalog:",
      },
@@ -437,7 +441,7 @@
    },
    "packages/enterprise": {
      "name": "@opencode-ai/enterprise",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@hono/standard-validator": "catalog:",
        "@opencode-ai/core": "workspace:*",
@@ -469,7 +473,7 @@
    },
    "packages/function": {
      "name": "@opencode-ai/function",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@octokit/auth-app": "8.0.1",
        "@octokit/rest": "catalog:",
@@ -485,7 +489,7 @@
    },
    "packages/http-recorder": {
      "name": "@opencode-ai/http-recorder",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@effect/platform-node": "4.0.0-beta.83",
        "@effect/platform-node-shared": "4.0.0-beta.83",
@@ -516,7 +520,7 @@
    },
    "packages/llm": {
      "name": "@opencode-ai/llm",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@opencode-ai/schema": "workspace:*",
        "@smithy/eventstream-codec": "4.2.14",
@@ -535,7 +539,7 @@
    },
    "packages/opencode": {
      "name": "opencode",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "bin": {
        "opencode": "./bin/opencode",
      },
@@ -665,7 +669,7 @@
    },
    "packages/plugin": {
      "name": "@opencode-ai/plugin",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@ai-sdk/provider": "3.0.8",
        "@opencode-ai/sdk": "workspace:*",
@@ -682,9 +686,9 @@
        "typescript": "catalog:",
      },
      "peerDependencies": {
-        "@opentui/core": ">=0.4.2",
-        "@opentui/keymap": ">=0.4.2",
-        "@opentui/solid": ">=0.4.2",
+        "@opentui/core": ">=0.3.4",
+        "@opentui/keymap": ">=0.3.4",
+        "@opentui/solid": ">=0.3.4",
      },
      "optionalPeers": [
        "@opentui/core",
@@ -741,7 +745,7 @@
    },
    "packages/sdk/js": {
      "name": "@opencode-ai/sdk",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "cross-spawn": "catalog:",
      },
@@ -756,7 +760,7 @@
    },
    "packages/server": {
      "name": "@opencode-ai/server",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@opencode-ai/core": "workspace:*",
        "@opencode-ai/protocol": "workspace:*",
@@ -771,7 +775,7 @@
    },
    "packages/session-ui": {
      "name": "@opencode-ai/session-ui",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@kobalte/core": "catalog:",
        "@opencode-ai/core": "workspace:*",
@@ -815,7 +819,7 @@
    },
    "packages/slack": {
      "name": "@opencode-ai/slack",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@opencode-ai/sdk": "workspace:*",
        "@slack/bolt": "^3.17.1",
@@ -828,7 +832,7 @@
    },
    "packages/stats/app": {
      "name": "@opencode-ai/stats-app",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@ibm/plex": "6.4.1",
        "@opencode-ai/stats-core": "workspace:*",
@@ -861,7 +865,7 @@
    },
    "packages/stats/core": {
      "name": "@opencode-ai/stats-core",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@aws-sdk/client-athena": "3.933.0",
        "@planetscale/database": "1.19.0",
@@ -880,7 +884,7 @@
    },
    "packages/stats/server": {
      "name": "@opencode-ai/stats-server",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@aws-sdk/client-firehose": "3.933.0",
        "@effect/platform-node": "catalog:",
@@ -921,7 +925,7 @@
    },
    "packages/tui": {
      "name": "@opencode-ai/tui",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@opencode-ai/core": "workspace:*",
        "@opencode-ai/plugin": "workspace:*",
@@ -948,7 +952,7 @@
    },
    "packages/ui": {
      "name": "@opencode-ai/ui",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@kobalte/core": "catalog:",
        "@pierre/diffs": "catalog:",
@@ -958,8 +962,6 @@
        "@solid-primitives/event-listener": "2.4.5",
        "@solid-primitives/media": "2.3.3",
        "@solid-primitives/resize-observer": "2.1.3",
-        "@solidjs/meta": "catalog:",
-        "@solidjs/router": "catalog:",
        "diff": "catalog:",
        "dompurify": "3.3.1",
        "fuzzysort": "catalog:",
@@ -975,27 +977,33 @@
        "remeda": "catalog:",
        "remend": "catalog:",
        "shiki": "catalog:",
-        "solid-js": "catalog:",
        "solid-list": "catalog:",
        "strip-ansi": "7.1.2",
      },
      "devDependencies": {
+        "@solidjs/meta": "catalog:",
        "@tailwindcss/vite": "catalog:",
        "@tsconfig/node22": "catalog:",
        "@types/bun": "catalog:",
        "@types/katex": "0.16.7",
        "@types/luxon": "catalog:",
        "@typescript/native-preview": "catalog:",
+        "solid-js": "catalog:",
        "tailwindcss": "catalog:",
+        "tw-animate-css": "1.4.0",
        "typescript": "catalog:",
        "vite": "catalog:",
        "vite-plugin-icons-spritesheet": "3.0.1",
        "vite-plugin-solid": "catalog:",
      },
+      "peerDependencies": {
+        "@solidjs/meta": "^0.29.0",
+        "solid-js": "^1.9.0",
+      },
    },
    "packages/web": {
      "name": "@opencode-ai/web",
-      "version": "1.17.10",
+      "version": "1.17.11",
      "dependencies": {
        "@astrojs/cloudflare": "12.6.3",
        "@astrojs/markdown-remark": "6.3.1",
@@ -1069,9 +1077,9 @@
    "@npmcli/arborist": "9.4.0",
    "@octokit/rest": "22.0.0",
    "@openauthjs/openauth": "0.0.0-20250322224806",
-    "@opentui/core": "0.4.2",
-    "@opentui/keymap": "0.4.2",
-    "@opentui/solid": "0.4.2",
+    "@opentui/core": "0.3.4",
+    "@opentui/keymap": "0.3.4",
+    "@opentui/solid": "0.3.4",
    "@pierre/diffs": "1.2.10",
    "@playwright/test": "1.59.1",
    "@sentry/solid": "10.36.0",
@@ -1448,6 +1456,20 @@

    "@develar/schema-utils": ["@develar/schema-utils@2.6.5", "", { "dependencies": { "ajv": "^6.12.0", "ajv-keywords": "^3.4.1" } }, "sha512-0cp4PsWQ/9avqTVMCtZ+GirikIA36ikvjtHweU4/j8yLtgObI0+JUPhYFScgwlteveGB1rt3Cm8UhN04XayDig=="],

+    "@dnd-kit/abstract": ["@dnd-kit/abstract@0.5.0", "", { "dependencies": { "@dnd-kit/geometry": "^0.5.0", "@dnd-kit/state": "^0.5.0", "tslib": "^2.6.2" } }, "sha512-hi13iMJgjPX/KDYVKg5VeDIhmYiV6buc9bAX+tCLYf4QdyYjPbsXjn2sPo6m7fQ6SGJBEFgHJ2PemeKDUbwBaA=="],
+
+    "@dnd-kit/collision": ["@dnd-kit/collision@0.5.0", "", { "dependencies": { "@dnd-kit/abstract": "^0.5.0", "@dnd-kit/geometry": "^0.5.0", "tslib": "^2.6.2" } }, "sha512-xUqRn3lS7oqLkT0AnnHS/STh/Czvwe1UapZFYiLbsUGxopMsQd4teaPCzPouOThoMdGEe+dHWjfqJl6t9iG4mQ=="],
+
+    "@dnd-kit/dom": ["@dnd-kit/dom@0.5.0", "", { "dependencies": { "@dnd-kit/abstract": "^0.5.0", "@dnd-kit/collision": "^0.5.0", "@dnd-kit/geometry": "^0.5.0", "@dnd-kit/state": "^0.5.0", "tslib": "^2.6.2" } }, "sha512-f2xFJp5SYQ8EW/Fbtaa8iBb66hpkWc7qa8vU826KW11/tb44sH+AisZnGtwOOTWTQ0GraqBDr5ixTErww+eKXw=="],
+
+    "@dnd-kit/geometry": ["@dnd-kit/geometry@0.5.0", "", { "dependencies": { "@dnd-kit/state": "^0.5.0", "tslib": "^2.6.2" } }, "sha512-ubHQS1CiSDH8ssYH2xG5BnpwPSFP1tStXXjug7/Ba6qnQdu/EUH47l6QXKIksQnnanfVfDf0aGeevRxgZlj28A=="],
+
+    "@dnd-kit/helpers": ["@dnd-kit/helpers@0.5.0", "", { "dependencies": { "@dnd-kit/abstract": "^0.5.0", "tslib": "^2.6.2" } }, "sha512-i4y+51/icSw+OHMr/su19qhnmNhAzh8PnBwXvapFYTd+64oodIyJRiRkB+hhfxAfnur7RYSW8qacDTrXjg2XOg=="],
+
+    "@dnd-kit/solid": ["@dnd-kit/solid@0.5.0", "", { "dependencies": { "@dnd-kit/abstract": "^0.5.0", "@dnd-kit/dom": "^0.5.0", "@dnd-kit/state": "^0.5.0", "tslib": "^2.6.2" }, "peerDependencies": { "solid-js": "^1.8.0" } }, "sha512-IKDqVZICS0jEeUzpJMIIF61w0WA4zisyx9U7K7Skbmkb/kQSDa3lB0cOc0947RwSO+ALoxytRNOuoNfyOIm3lQ=="],
+
+    "@dnd-kit/state": ["@dnd-kit/state@0.5.0", "", { "dependencies": { "@preact/signals-core": "^1.10.0", "tslib": "^2.6.2" } }, "sha512-y7XbabQqjF58Lk8YmDQuR8l6QjN+Kh4qlGEjUvHuIeasLk1QP+9L5diXS98VMxQIivyMmUtX2//f+3N7qPJX4w=="],
+
    "@dot/log": ["@dot/log@0.1.5", "", { "dependencies": { "chalk": "^4.1.2", "loglevelnext": "^6.0.0", "p-defer": "^3.0.0" } }, "sha512-ECraEVJWv2f2mWK93lYiefUkphStVlKD6yKDzisuoEmxuLKrxO9iGetHK2DoEAkj7sxjE886n0OUVVCUx0YPNg=="],

    "@drizzle-team/brocli": ["@drizzle-team/brocli@0.11.0", "", {}, "sha512-hD3pekGiPg0WPCCGAZmusBBJsDqGUR66Y452YgQsZOnkdQ7ViEPKuyP4huUGEZQefp8g34RRodXYmJ2TbCH+tg=="],
@@ -1988,27 +2010,27 @@

    "@opentelemetry/semantic-conventions": ["@opentelemetry/semantic-conventions@1.41.1", "", {}, "sha512-/UhIkaZgPutTFmQ7RnIJGgDXZmtEJ7Dvi86xNTFWcnRxVRNk/aotsqDJYeEvDP+FSMB2SdW+pQzNMcWP0rwuNA=="],

-    "@opentui/core": ["@opentui/core@0.4.2", "", { "dependencies": { "bun-ffi-structs": "0.2.3", "diff": "9.0.0", "marked": "17.0.1", "string-width": "7.2.0", "strip-ansi": "7.1.2" }, "optionalDependencies": { "@opentui/core-darwin-arm64": "0.4.2", "@opentui/core-darwin-x64": "0.4.2", "@opentui/core-linux-arm64": "0.4.2", "@opentui/core-linux-arm64-musl": "0.4.2", "@opentui/core-linux-x64": "0.4.2", "@opentui/core-linux-x64-musl": "0.4.2", "@opentui/core-win32-arm64": "0.4.2", "@opentui/core-win32-x64": "0.4.2" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-ulx6RMqftf2fm7Itf9e81GcCDMNY6NAhmnKYhllDOMYD+PxYXR+vomy2bxQNV5ow31RE7s8WQFnb7hWTRUbx2g=="],
+    "@opentui/core": ["@opentui/core@0.3.4", "", { "dependencies": { "bun-ffi-structs": "0.2.2", "diff": "9.0.0", "marked": "17.0.1", "string-width": "7.2.0", "strip-ansi": "7.1.2", "yoga-layout": "3.2.1" }, "optionalDependencies": { "@opentui/core-darwin-arm64": "0.3.4", "@opentui/core-darwin-x64": "0.3.4", "@opentui/core-linux-arm64": "0.3.4", "@opentui/core-linux-arm64-musl": "0.3.4", "@opentui/core-linux-x64": "0.3.4", "@opentui/core-linux-x64-musl": "0.3.4", "@opentui/core-win32-arm64": "0.3.4", "@opentui/core-win32-x64": "0.3.4" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-y0DlrChP9lcJ4jC5z/1wMS34+ygfSTW7gD5OJHwJaAScfmlFvuJOZbwmCGrJURZ+5wFBxuOi9LatZsmeAUIKAA=="],

-    "@opentui/core-darwin-arm64": ["@opentui/core-darwin-arm64@0.4.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-is+O+sS/l3E9cZXyM9pRF1WhqnE+hYSPYoZkbseR9CthJcaWPGi3R3jUJa1cLj325252jWgxVupnDqFUtKg36w=="],
+    "@opentui/core-darwin-arm64": ["@opentui/core-darwin-arm64@0.3.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-4A7JYXUsZqhu9PPCe07E30ourSJYkitkwMujUyNKjM5e/dHNDVnz+5r5cO3M5snofLafc1DN7+9jEPn4UQzchQ=="],

-    "@opentui/core-darwin-x64": ["@opentui/core-darwin-x64@0.4.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-ACi42h81DurSeybUAD1XyKT6xmXZcKeTxS54lZFi0CVZh46w0g99vNj8PlQzIFXvvFLT0e0IlRS//eWSWS2zGQ=="],
+    "@opentui/core-darwin-x64": ["@opentui/core-darwin-x64@0.3.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-Jvm9E8n2sPhKEyKSXn9GlmJcj8WoJXJTooXb3djwjVaiimjihIj0XxHzCWhdqbDtQp+VxDFyCKoQagOOz20qhA=="],

-    "@opentui/core-linux-arm64": ["@opentui/core-linux-arm64@0.4.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-RjOx2HcjLRtGSy9WrAGSdr5M9SpJuPifPORpImx6Mciovw0ltnE0uoYjIyor82uf6/LExWC7YA2AcAl+YBxayA=="],
+    "@opentui/core-linux-arm64": ["@opentui/core-linux-arm64@0.3.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-0uPuHCeZxm/O7+L+iNQl8zRAfehiwYstKkT9J0uTZO64/byBCLvy5lvn1DiE/72s/nTJ5nwpLN+pQs2/WYVKLQ=="],

-    "@opentui/core-linux-arm64-musl": ["@opentui/core-linux-arm64-musl@0.4.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-heNciL2ngPU+kq1h01PHLsxn6Fr8iqTFtbxSdVbhaY3XihuIjkuXyEhFeuoa1lsXY7Bb2gpWnX5EQVWnZsAuDQ=="],
+    "@opentui/core-linux-arm64-musl": ["@opentui/core-linux-arm64-musl@0.3.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-sJYUzYcSOb5PCXRlhwsse/fdsMiVomNvIwq/2TDhAANef+YPO3Br+OH9kQRbuj0bjVDmUS36SGYWSTFu2lUO+A=="],

-    "@opentui/core-linux-x64": ["@opentui/core-linux-x64@0.4.2", "", { "os": "linux", "cpu": "x64" }, "sha512-9s0s/ooK+AhWP306By3gu+XhzcVEThC2sqKMPK1nQmGDujQhd+xOrtbtfCVcJSx62UzAovC2VNqypvP8vHByOg=="],
+    "@opentui/core-linux-x64": ["@opentui/core-linux-x64@0.3.4", "", { "os": "linux", "cpu": "x64" }, "sha512-btYIQeNdPbN4JCrCjVB/RwMGrnRY7qWB2piNEfALSByuULKNjPKQ33PYIj38Yd01zCvCV7FotIeXEGSHx3tgCA=="],

-    "@opentui/core-linux-x64-musl": ["@opentui/core-linux-x64-musl@0.4.2", "", { "os": "linux", "cpu": "x64" }, "sha512-Cjv6Bv7l3p/KLNJr5RyqCS0FmRlAGJnkA2IK3S+HkHhCOv/O02S1G+DBUY6POnyjp1eNy95vauustApobhdbig=="],
+    "@opentui/core-linux-x64-musl": ["@opentui/core-linux-x64-musl@0.3.4", "", { "os": "linux", "cpu": "x64" }, "sha512-fhmUey4oJJ2+N62xlIgAPxAl36Fa7wYffqDOT4QLpm0jfyD5xzo+wL/hr2zUqaEI439R8Iq6jHNxf/Nsx1WuuQ=="],

-    "@opentui/core-win32-arm64": ["@opentui/core-win32-arm64@0.4.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-mfJZrJ0TNPFRZUzXNsxAPe1YdiWsy/vbTl93+yeXGHPI1B8Qnk9V5hpzSxxEyBGhlTHSfGNtgiO+VrrdRC3kZA=="],
+    "@opentui/core-win32-arm64": ["@opentui/core-win32-arm64@0.3.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-sh432vPU+eLp8eA4I0KWKKn7D0VHbk01YTg6mA9/ihCNYHntc6LZ8/sLvsPv8CvKscMotfIkh3M5YhdS36BuXw=="],

-    "@opentui/core-win32-x64": ["@opentui/core-win32-x64@0.4.2", "", { "os": "win32", "cpu": "x64" }, "sha512-P2oguG3ng3OMjAdasFSA3GhHaQXtzDUsIRDGbzWFOimpZ/zMemidp+JQ0V8V6XwK6Utk5G0aQ03oBaRCoLyYDw=="],
+    "@opentui/core-win32-x64": ["@opentui/core-win32-x64@0.3.4", "", { "os": "win32", "cpu": "x64" }, "sha512-dw8FcjUZaLAjw25P3/7BarobCh/QOHn3srYaWYQdysoqyvSlPkQumpI8kV/KgpJtdITU1GW02MQC4EeLIFFalA=="],

-    "@opentui/keymap": ["@opentui/keymap@0.4.2", "", { "dependencies": { "@opentui/core": "0.4.2" }, "peerDependencies": { "@opentui/react": "0.4.2", "@opentui/solid": "0.4.2", "react": ">=19.2.0", "solid-js": "1.9.12" }, "optionalPeers": ["@opentui/react", "@opentui/solid", "react", "solid-js"] }, "sha512-wxBEFfWgm3feqCRLckWg1JH4tbMJinpyK3yobkLTsWJ7PDsM+fPoFMyQ8ieKVdUL2eP6ELTmHvM1bHKShZ7SUQ=="],
+    "@opentui/keymap": ["@opentui/keymap@0.3.4", "", { "dependencies": { "@opentui/core": "0.3.4" }, "peerDependencies": { "@opentui/react": "0.3.4", "@opentui/solid": "0.3.4", "react": ">=19.2.0", "solid-js": "1.9.12" }, "optionalPeers": ["@opentui/react", "@opentui/solid", "react", "solid-js"] }, "sha512-8fo6BZWQgCjANfbKkzPo0ghAzS1E7TlHjDDS+SUhrX01qEUO1clFTRssKluHbXd2UJY1Ehle01TV5bFmY78f8w=="],

-    "@opentui/solid": ["@opentui/solid@0.4.2", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.4.2", "babel-plugin-module-resolver": "5.0.2", "babel-preset-solid": "1.9.12", "entities": "7.0.1", "s-js": "^0.4.9" }, "peerDependencies": { "solid-js": "1.9.12" } }, "sha512-zuYXsnrlsMtnXrS7QCYBdPzMtUSonG2LqnJikBR2NjEE2O4zEKvJd48n3eB1igcxjv96tiotTXRNCylYS0SNdQ=="],
+    "@opentui/solid": ["@opentui/solid@0.3.4", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.3.4", "babel-plugin-module-resolver": "5.0.2", "babel-preset-solid": "1.9.12", "entities": "7.0.1", "s-js": "^0.4.9" }, "peerDependencies": { "solid-js": "1.9.12" } }, "sha512-gin1VnsVBahX0nrU3mpgh5U1qvyJBIZu4NE5mc0YnObWOEf9HVNxKY4/BpUvQPh91kT6zeOzTBvAvYK4R7g9MQ=="],

    "@oslojs/asn1": ["@oslojs/asn1@1.0.0", "", { "dependencies": { "@oslojs/binary": "1.0.0" } }, "sha512-zw/wn0sj0j0QKbIXfIlnEcTviaCzYOY3V5rAyjR6YtOByFtJiT574+8p9Wlach0lZH9fddD4yb9laEAIl4vXQA=="],

@@ -2284,6 +2306,8 @@

    "@poppinss/exception": ["@poppinss/exception@1.2.3", "", {}, "sha512-dCED+QRChTVatE9ibtoaxc+WkdzOSjYTKi/+uacHWIsfodVfpsueo3+DKpgU5Px8qXjgmXkSvhXvSCz3fnP9lw=="],

+    "@preact/signals-core": ["@preact/signals-core@1.14.3", "", {}, "sha512-m0K3vnbSLC5rHs2ZVfeAMvBtT1zIyq4mxx5OlNncSgMj5Iz6W5Rn3kPrDxAC+iIKmiVe0lSl6U37t5ZkEWoVAw=="],
+
    "@protobuf-ts/plugin": ["@protobuf-ts/plugin@2.11.1", "", { "dependencies": { "@bufbuild/protobuf": "^2.4.0", "@bufbuild/protoplugin": "^2.4.0", "@protobuf-ts/protoc": "^2.11.1", "@protobuf-ts/runtime": "^2.11.1", "@protobuf-ts/runtime-rpc": "^2.11.1", "typescript": "^3.9" }, "bin": { "protoc-gen-ts": "bin/protoc-gen-ts", "protoc-gen-dump": "bin/protoc-gen-dump" } }, "sha512-HyuprDcw0bEEJqkOWe1rnXUP0gwYLij8YhPuZyZk6cJbIgc/Q0IFgoHQxOXNIXAcXM4Sbehh6kjVnCzasElw1A=="],

    "@protobuf-ts/protoc": ["@protobuf-ts/protoc@2.11.1", "", { "bin": { "protoc": "protoc.js" } }, "sha512-mUZJaV0daGO6HUX90o/atzQ6A7bbN2RSuHtdwo8SSF2Qoe3zHwa4IHyCN1evftTeHfLmdz+45qo47sL+5P8nyg=="],
@@ -3186,7 +3210,7 @@

    "builder-util-runtime": ["builder-util-runtime@9.7.0", "", { "dependencies": { "debug": "^4.3.4", "sax": "^1.2.4" } }, "sha512-g/kR520giAFYkSXTzcmF3kqQq7wi8F6N6SzeDgZrqTBN+VHdmgWOyTdD1yD7AATDId/yXLvuP34CxW46/BwCdw=="],

-    "bun-ffi-structs": ["bun-ffi-structs@0.2.3", "", { "peerDependencies": { "typescript": "^5" } }, "sha512-pgJiXP+hEgFo9qG51J6ItfY4ocs3vniwNzJ9WhoakB3QB2GdzQxX2EXssentPYlB2hOfJrTjO6iIQkWYzUodpg=="],
+    "bun-ffi-structs": ["bun-ffi-structs@0.2.2", "", { "peerDependencies": { "typescript": "^5" } }, "sha512-N/ZWtyN0piZlrXQT7TO0V+q952orYqkfhXRXM1Hcbb+R3QSiBH4vLnib187Mrs1H7pWIYECAmPeapGYDOMCl+w=="],

    "bun-pty": ["bun-pty@0.4.8", "", {}, "sha512-rO70Mrbr13+jxHHHu2YBkk2pNqrJE5cJn29WE++PUr+GFA0hq/VgtQPZANJ8dJo6d7XImvBk37Innt8GM7O28w=="],

@@ -3778,7 +3802,7 @@

    "get-tsconfig": ["get-tsconfig@4.14.0", "", { "dependencies": { "resolve-pkg-maps": "^1.0.0" } }, "sha512-yTb+8DXzDREzgvYmh6s9vHsSVCHeC0G3PI5bEXNBHtmshPnO+S5O7qgLEOn0I5QvMy6kpZN8K1NKGyilLb93wA=="],

-    "ghostty-web": ["ghostty-web@github:anomalyco/ghostty-web#20bd361", {}, "anomalyco-ghostty-web-20bd361", "sha512-dW0nwaiBBcun9y5WJSvm3HxDLe5o9V0xLCndQvWonRVubU8CS1PHxZpLffyPt1YujPWC13ez03aWxcuKBPYYGQ=="],
+    "ghostty-web": ["ghostty-web@github:anomalyco/ghostty-web#513463a", {}, "anomalyco-ghostty-web-513463a", "sha512-GZR8LSmgGzViWnBJrqRI8MpAZRCJxhcr1Hi9Tyeh7YRooHZQjK9J97FQRD3tbBaM2wjq05gzGY2UEsG+JtZeBw=="],

    "giget": ["giget@2.0.0", "", { "dependencies": { "citty": "^0.1.6", "consola": "^3.4.0", "defu": "^6.1.4", "node-fetch-native": "^1.6.6", "nypm": "^0.6.0", "pathe": "^2.0.3" }, "bin": { "giget": "dist/cli.mjs" } }, "sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA=="],

@@ -5292,6 +5316,8 @@

    "turndown": ["turndown@7.2.0", "", { "dependencies": { "@mixmark-io/domino": "^2.2.0" } }, "sha512-eCZGBN4nNNqM9Owkv9HAtWRYfLA4h909E/WGAWWBpmB275ehNhZyk87/Tpvjbp0jjNl9XwCsbe6bm6CqFsgD+A=="],

+    "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
+
    "tw-to-css": ["tw-to-css@0.0.12", "", { "dependencies": { "postcss": "8.4.31", "postcss-css-variables": "0.18.0", "tailwindcss": "3.3.2" } }, "sha512-rQAsQvOtV1lBkyCw+iypMygNHrShYAItES5r8fMsrhhaj5qrV2LkZyXc8ccEH+u5bFjHjQ9iuxe90I7Kykf6pw=="],

    "type-fest": ["type-fest@4.41.0", "", {}, "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA=="],
@@ -5544,6 +5570,8 @@

    "yoctocolors": ["yoctocolors@2.1.2", "", {}, "sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug=="],

+    "yoga-layout": ["yoga-layout@3.2.1", "", {}, "sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ=="],
+
    "youch": ["youch@4.1.0-beta.10", "", { "dependencies": { "@poppinss/colors": "^4.1.5", "@poppinss/dumper": "^0.6.4", "@speed-highlight/core": "^1.2.7", "cookie": "^1.0.2", "youch-core": "^0.3.3" } }, "sha512-rLfVLB4FgQneDr0dv1oddCVZmKjcJ6yX6mS4pU82Mq/Dt9a3cLZQ62pDBL4AUO+uVrCvtWz3ZFUL2HFAFJ/BXQ=="],

    "youch-core": ["youch-core@0.3.3", "", { "dependencies": { "@poppinss/exception": "^1.2.2", "error-stack-parser-es": "^1.0.5" } }, "sha512-ho7XuGjLaJ2hWHoK8yFnsUGy2Y5uDpqSTq1FkHLK4/oqKtyUU1AFbOOxY4IpC9f0fTLjwYbslUz0Po5BpD1wrA=="],
@@ -1,8 +1,8 @@
 {
  "nodeModules": {
-    "x86_64-linux": "sha256-4RYkrGAbsrUw/n0ecPJpntSZYuV6GsmMMjK9R6MbMxU=",
-    "aarch64-linux": "sha256-kwSkouFxbEYzYAsr9gaVUQrT7YfbcoKb4kB9dhNtaFM=",
-    "aarch64-darwin": "sha256-mukRph5X1noBRhd5+0Ct7ZshTYxooGcoY+tZEXzfSvo=",
-    "x86_64-darwin": "sha256-CE8JgBAfZQmUnunPPw4XPPw3bkso1OALmNgmyGgJr1k="
+    "x86_64-linux": "sha256-rB/CcrBUQVZ08nBFSYA8u2w88rQmTpKxKPkIreDEKgI=",
+    "aarch64-linux": "sha256-ZRTphtic8Ip96MnILteFgZAUxjK9O4YfJu2O6u/0H8k=",
+    "aarch64-darwin": "sha256-VK5XIzraP0HtqnPwPCejiDKer4ewtNtX1vxP5uuyjSk=",
+    "x86_64-darwin": "sha256-ZLPHqcCZB1EmxQk95cmUpiODTTKOyi7PSF0yr/rDk6Y="
  }
 }
@@ -39,9 +39,9 @@
      "@octokit/rest": "22.0.0",
      "@hono/standard-validator": "0.2.0",
      "@hono/zod-validator": "0.4.2",
-      "@opentui/core": "0.4.2",
-      "@opentui/keymap": "0.4.2",
-      "@opentui/solid": "0.4.2",
+      "@opentui/core": "0.3.4",
+      "@opentui/keymap": "0.3.4",
+      "@opentui/solid": "0.3.4",
      "@tanstack/solid-virtual": "3.13.28",
      "@shikijs/stream": "4.2.0",
      "ulid": "3.0.1",
@@ -0,0 +1,79 @@
+import { expect, test } from "@playwright/test"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectSessionTitle } from "../utils/waits"
+
+const directory = "C:/OpenCode/HiddenTerminalRegression"
+const projectID = "proj_hidden_terminal_regression"
+const sessionID = "ses_hidden_terminal_regression"
+const title = "Hidden terminal regression"
+
+test("unmounts the terminal renderer while the pane is hidden", async ({ page }) => {
+  await page.setViewportSize({ width: 1400, height: 900 })
+  await mockOpenCodeServer(page, {
+    directory,
+    project: {
+      id: projectID,
+      worktree: directory,
+      vcs: "git",
+      name: "hidden-terminal-regression",
+      time: { created: 1700000000000, updated: 1700000000000 },
+      sandboxes: [],
+    },
+    provider: {
+      all: [
+        {
+          id: "opencode",
+          name: "OpenCode",
+          models: { test: { id: "test", name: "Test", limit: { context: 200_000 } } },
+        },
+      ],
+      connected: ["opencode"],
+      default: { providerID: "opencode", modelID: "test" },
+    },
+    sessions: [
+      {
+        id: sessionID,
+        slug: "hidden-terminal-regression",
+        projectID,
+        directory,
+        title,
+        version: "dev",
+        time: { created: 1700000000000, updated: 1700000000000 },
+      },
+    ],
+    pageMessages: () => ({ items: [] }),
+  })
+  await page.route("**/pty", (route) =>
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ id: "pty_hidden_terminal", title: "Terminal 1" }),
+    }),
+  )
+  await page.route("**/pty/pty_hidden_terminal", (route) =>
+    route.fulfill({ status: 200, contentType: "application/json", body: "{}" }),
+  )
+  await page.routeWebSocket("**/pty/pty_hidden_terminal/connect", () => undefined)
+
+  await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
+  await expectSessionTitle(page, title)
+
+  await page.keyboard.press("Control+Backquote")
+  const panel = page.locator("#terminal-panel")
+  await expect(panel).toHaveAttribute("aria-hidden", "false")
+  await expect(page.locator('[data-component="terminal"]')).toBeVisible()
+
+  await page.keyboard.press("Control+Backquote")
+  await expect(panel).toHaveAttribute("aria-hidden", "true")
+  await expect(page.locator('[data-component="terminal"]')).toHaveCount(0)
+
+  await page.setViewportSize({ width: 1200, height: 700 })
+  await expect(page.locator('[data-component="terminal"]')).toHaveCount(0)
+
+  await page.keyboard.press("Control+Backquote")
+  await expect(page.locator('[data-component="terminal"]')).toBeVisible()
+})
+
+function base64Encode(value: string) {
+  return Buffer.from(value, "utf8").toString("base64").replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "")
+}
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/app",
-  "version": "1.17.10",
+  "version": "1.17.11",
  "description": "",
  "type": "module",
  "exports": {
@@ -38,12 +38,17 @@
    "@types/luxon": "catalog:",
    "@types/node": "catalog:",
    "@typescript/native-preview": "catalog:",
+    "tw-animate-css": "1.4.0",
    "typescript": "catalog:",
    "vite": "catalog:",
    "vite-plugin-icons-spritesheet": "3.0.1",
    "vite-plugin-solid": "catalog:"
  },
  "dependencies": {
+    "@dnd-kit/abstract": "0.5.0",
+    "@dnd-kit/dom": "0.5.0",
+    "@dnd-kit/helpers": "0.5.0",
+    "@dnd-kit/solid": "0.5.0",
    "@kobalte/core": "catalog:",
    "@opencode-ai/core": "workspace:*",
    "@opencode-ai/sdk": "workspace:*",
@@ -72,7 +77,7 @@
    "diff": "catalog:",
    "effect": "catalog:",
    "fuzzysort": "catalog:",
-    "ghostty-web": "github:anomalyco/ghostty-web#main",
+    "ghostty-web": "github:anomalyco/ghostty-web#513463a6f1190253057e8a3f0dac8f6ee8393553",
    "luxon": "catalog:",
    "marked": "catalog:",
    "marked-shiki": "catalog:",
@@ -16,6 +16,7 @@ import {
  type Component,
  createEffect,
  createMemo,
+  createRenderEffect,
  createResource,
  createSignal,
  ErrorBoundary,
@@ -32,12 +33,12 @@ import { CommentsProvider } from "@/context/comments"
 import { FileProvider } from "@/context/file"
 import { ServerSDKProvider, useServerSDK } from "@/context/server-sdk"
 import { ServerSyncProvider, useServerSync } from "@/context/server-sync"
-import { GlobalProvider } from "@/context/global"
+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 { NotificationProvider, useNotification } from "@/context/notification"
 import { PermissionProvider } from "@/context/permission"
 import { PromptProvider } from "@/context/prompt"
 import { ServerConnection, ServerProvider, serverName, useServer } from "@/context/server"
@@ -58,6 +59,7 @@ import {
  selectSessionLineage,
  sessionHref,
 } from "./utils/session-route"
+import { isSessionNotFoundError } from "./utils/server-errors"

 import Session from "@/pages/session"
 import { NewHome, LegacyHome } from "@/pages/home"
@@ -102,10 +104,10 @@ const SessionRoute = () => {

 const TargetSessionRoute = () => {
  const params = useParams<{ serverKey: string; id: string }>()
-  const server = useServer()
+  const global = useGlobal()
  const conn = createMemo(() => {
    const key = requireServerKey(params.serverKey)
-    return server.list.find((item) => ServerConnection.key(item) === key)
+    return global.servers.list().find((item) => ServerConnection.key(item) === key)
  })

  return (
@@ -129,9 +131,13 @@ function ResolvedTargetSessionRoute() {
  const [resolved] = createResource(
    () => {
      if (cached()) return
-      return { id: params.id, sync: sync() }
+      return { id: params.id, server: serverKey(), sync: sync() }
    },
-    ({ id, sync }) => sync.session.lineage.resolve(id),
+    ({ id, server, sync }) =>
+      sync.session.lineage.resolve(id).catch((error) => {
+        if (isSessionNotFoundError(error, id)) tabs.removeSessionTab({ server, sessionId: id })
+        throw error
+      }),
  )
  const current = createMemo(() => selectSessionLineage(params.id, cached(), resolved()))
  const directory = createMemo(() => current()?.session.directory)
@@ -216,25 +222,27 @@ function DraftRoute() {
 }

 function ResolvedDraftRoute(props: { draft: DraftTab }) {
-  const server = useServer()
-  const conn = createMemo(() => server.list.find((item) => ServerConnection.key(item) === props.draft.server))
+  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 (
-    <ServerSDKProvider server={conn}>
-      <ServerSyncProvider server={conn}>
-        <TargetServerScopedProviders directory={directory}>
-          <SDKProvider directory={directory}>
-            <DirectoryDataProvider directory={directory} server={serverKey}>
-              <DraftProviders>
-                <NewSession />
-              </DraftProviders>
-            </DirectoryDataProvider>
-          </SDKProvider>
-        </TargetServerScopedProviders>
-      </ServerSyncProvider>
-    </ServerSDKProvider>
+    <Show when={`${props.draft.server}\0${props.draft.directory}`} keyed>
+      <ServerSDKProvider server={conn}>
+        <ServerSyncProvider server={conn}>
+          <TargetServerScopedProviders directory={directory}>
+            <SDKProvider directory={directory}>
+              <DirectoryDataProvider directory={directory} server={serverKey}>
+                <DraftProviders>
+                  <NewSession />
+                </DraftProviders>
+              </DirectoryDataProvider>
+            </SDKProvider>
+          </TargetServerScopedProviders>
+        </ServerSyncProvider>
+      </ServerSDKProvider>
+    </Show>
  )
 }

@@ -271,10 +279,11 @@ function QueryProvider(props: ParentProps) {
 function BodyDesignClass() {
  const settings = useSettings()

-  createEffect(() => {
+  createRenderEffect(() => {
    if (typeof document === "undefined") return

    const enabled = settings.general.newLayoutDesigns()
+    document.body.toggleAttribute("data-new-layout", enabled)
    document.body.classList.toggle("text-12-regular", !enabled)
    document.body.classList.toggle("font-(family-name:--font-family-text)", enabled)
    document.body.classList.toggle("text-[13px]", enabled)
@@ -307,9 +316,7 @@ function ServerScopedProviders(props: ServerScopedShellProps) {
  return (
    <PermissionProvider directory={props.directory}>
      <LayoutProvider>
-        <NotificationProvider directory={props.directory} sessionID={props.sessionID}>
-          <ModelsProvider directory={props.directory}>{props.children}</ModelsProvider>
-        </NotificationProvider>
+        <ModelsProvider directory={props.directory}>{props.children}</ModelsProvider>
      </LayoutProvider>
    </PermissionProvider>
  )
@@ -336,13 +343,23 @@ function NewAppLayout(props: ParentProps) {
 function TargetServerScopedProviders(props: ServerScopedShellProps) {
  return (
    <PermissionProvider directory={props.directory}>
-      <NotificationProvider directory={props.directory} sessionID={props.sessionID}>
-        <ModelsProvider directory={props.directory}>{props.children}</ModelsProvider>
-      </NotificationProvider>
+      <MarkSessionNotificationsViewed sessionID={props.sessionID} />
+      <ModelsProvider directory={props.directory}>{props.children}</ModelsProvider>
    </PermissionProvider>
  )
 }

+function MarkSessionNotificationsViewed(props: { sessionID?: () => string | undefined }) {
+  const notification = useNotification()
+  createEffect(() => {
+    const sessionID = props.sessionID?.()
+    if (!notification.ready() || !sessionID) return
+    if (notification.session.unseenCount(sessionID) === 0) return
+    notification.session.markViewed(sessionID)
+  })
+  return null
+}
+
 function SessionProviders(props: ParentProps) {
  return (
    <TerminalProvider>
@@ -551,11 +568,13 @@ export function AppInterface(props: {
                component={props.router ?? Router}
                root={(routerProps) => (
                  <TabsProvider>
-                    <ServerShell>
-                      <Show when={useSettings().general.newLayoutDesigns()} fallback={routerProps.children}>
-                        <NewAppLayout>{routerProps.children}</NewAppLayout>
-                      </Show>
-                    </ServerShell>
+                    <NotificationProvider>
+                      <ServerShell>
+                        <Show when={useSettings().general.newLayoutDesigns()} fallback={routerProps.children}>
+                          <NewAppLayout>{routerProps.children}</NewAppLayout>
+                        </Show>
+                      </ServerShell>
+                    </NotificationProvider>
                  </TabsProvider>
                )}
              >
@@ -583,18 +602,31 @@ function Routes() {
      </Route>
      <Show when={settings.general.newLayoutDesigns()}>
        <Route path="/" component={NewHome} />
-        <Route
-          path="/:dir/session/:id"
-          component={() => {
-            const server = useServer()
-            const { id } = useParams()
-
-            return <Navigate href={`/server/${server.key}/session/${id}`} />
-          }}
-        />
+        <Route path="/:dir/session/:id" component={LegacyTargetSessionRoute} />
      </Show>
      <Route path="/new-session" component={DraftRoute} />
      <Route path="/server/:serverKey/session/:id" component={TargetSessionRoute} />
    </>
  )
 }
+
+function LegacyTargetSessionRoute() {
+  const server = useServer()
+  const tabs = useTabs()
+  const params = useParams<{ id: string }>()
+
+  return (
+    <Show when={tabs.ready()}>
+      <Navigate
+        href={sessionHref(
+          legacySessionServer(
+            tabs.store.filter((item) => item.type === "session"),
+            params.id,
+            server.key,
+          ),
+          params.id,
+        )}
+      />
+    </Show>
+  )
+}
@@ -0,0 +1,22 @@
+import { describe, expect, test } from "bun:test"
+import { newTabTooltipKeybind, reviewTooltipKeybind } from "./command-tooltip-keybind"
+
+describe("command tooltip keybinds", () => {
+  test("keeps localized review shortcut modifiers", () => {
+    const command = {
+      keybind: () => "Ctrl+Maj+R",
+      keybindParts: () => ["Ctrl", "Maj", "R"],
+    }
+
+    expect(reviewTooltipKeybind(command, (key) => key)).toEqual(["Ctrl", "Maj", "R"])
+  })
+
+  test("uses the configured new-tab shortcut", () => {
+    const command = {
+      keybind: () => "Alt+N",
+      keybindParts: () => ["Alt", "N"],
+    }
+
+    expect(newTabTooltipKeybind(command, (key) => key)).toEqual(["Alt", "N"])
+  })
+})
@@ -0,0 +1,11 @@
+type CommandKeybind = {
+  keybindParts: (id: string) => string[]
+}
+
+export function reviewTooltipKeybind(command: CommandKeybind, _translate?: (key: string) => string) {
+  return command.keybindParts("review.toggle")
+}
+
+export function newTabTooltipKeybind(command: CommandKeybind, _translate?: (key: string) => string) {
+  return command.keybindParts("tab.new")
+}
@@ -1,6 +1,6 @@
 import "@pierre/trees/web-components"
 import { FileTree } from "@pierre/trees"
-import { Dialog, DialogFooter } from "@opencode-ai/ui/v2/dialog-v2"
+import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -27,6 +27,7 @@ import {
  pickerRoot,
 } from "./directory-picker-domain"
 import "./dialog-select-directory-v2.css"
+import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"

 interface DialogSelectDirectoryV2Props {
  title?: string
@@ -266,8 +267,12 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
  onCleanup(() => tree?.cleanUp())

  return (
-    <Dialog title={props.title ?? language.t("command.project.open")} size="large" class="directory-picker-v2">
-      <div class="directory-picker-v2-body">
+    <Dialog size="large" class="directory-picker-v2">
+      <DialogHeader>
+        <DialogTitle>{props.title ?? language.t("command.project.open")}</DialogTitle>
+      </DialogHeader>
+      <DividerV2 />
+      <DialogBody class="directory-picker-v2-body pt-4!">
        <div class="directory-picker-v2-path" ref={pathArea}>
          <TextInputV2
            value={input()}
@@ -349,7 +354,7 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
          </Show>
        </div>
        <div class="directory-picker-v2-selection">{policy.result(root(), selected(), rootValid())}</div>
-      </div>
+      </DialogBody>
      <DialogFooter>
        <ButtonV2 variant="neutral" onClick={() => dialog.close()}>
          {language.t("common.cancel")}
@@ -15,7 +15,6 @@ import { useLayout } from "@/context/layout"
 import { useFile } from "@/context/file"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
-import { useServer } from "@/context/server"
 import { useSettings } from "@/context/settings"
 import { useSessionLayout } from "@/pages/session/session-layout"
 import { createSessionTabs } from "@/pages/session/helpers"
@@ -272,7 +271,6 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
  const command = useCommand()
  const language = useLanguage()
  const platform = usePlatform()
-  const server = useServer()
  const settings = useSettings()
  const layout = useLayout()
  const file = useFile()
@@ -393,10 +391,10 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
    state.cleanup?.()
  })

-  if (filesOnly() && platform.platform === "desktop" && settings.general.newLayoutDesigns() && server.current) {
+  if (filesOnly() && platform.platform === "desktop" && settings.general.newLayoutDesigns()) {
    return (
      <DialogSelectFileV2
-        server={server.current}
+        server={serverSDK().server}
        mode="file"
        start={projectDirectory()}
        title={language.t("session.header.searchFiles")}
@@ -59,6 +59,7 @@ const ModelList: Component<{
          class="w-full"
          placement="right-start"
          gutter={12}
+          openDelay={0}
          value={<ModelTooltip model={item} latest={item.latest} free={isFree(item.provider.id, item.cost)} />}
        >
          {node}
@@ -2,7 +2,7 @@
 import { createStore } from "solid-js/store"
 import type { Todo } from "@opencode-ai/sdk/v2"
 import { createPromptState } from "@/context/prompt"
-import { SessionComposerRegion } from "@/pages/session/composer"
+import { SessionComposerRegion, createSessionComposerRegionController } from "@/pages/session/composer"
 import { createPromptInputHistory, PromptInput } from "./prompt-input"

 function createPromptInputStoryRuntime() {
@@ -54,12 +54,6 @@ function PromptInputExample() {
      paid: true,
      loading: false,
    },
-    projects: {
-      available: [{ name: "Story project", worktree: "/tmp/story", sandboxes: [] }],
-      directory: "/tmp/story",
-      select() {},
-      add() {},
-    },
    session: {
      id: "story-session",
      tabs: {
@@ -142,7 +136,6 @@ function PromptInputWithOpenDock() {
      paid: true,
      loading: false,
    },
-    projects: { available: [], directory: "/tmp/story", select: () => {}, add: () => {} },
    session: {
      id: "story-session",
      tabs: {
@@ -166,22 +159,35 @@ function PromptInputWithOpenDock() {
    closing: () => false,
    opening: () => false,
  }
-
  return (
    <SessionComposerRegion
-      state={state}
-      sessionKey="story-session"
-      sessionID="story-session"
-      controls={inputControls}
-      promptInput={{ ...input, ref: () => {}, newSessionWorktree: "", onNewSessionWorktreeReset: () => {} }}
-      todo={{
-        collapsed: controls.todoCollapsed,
-        onToggle: () => setControls("todoCollapsed", (collapsed) => !collapsed),
-      }}
-      ready
-      centered={false}
-      onResponseSubmit={() => {}}
-      setPromptDockRef={() => {}}
+      controller={createSessionComposerRegionController({
+        state,
+        sessionKey: () => "story-session",
+        sessionID: () => "story-session",
+        prompt: input.state,
+        ready: () => true,
+        centered: () => false,
+        todo: {
+          collapsed: () => controls.todoCollapsed,
+          onToggle: () => setControls("todoCollapsed", (collapsed) => !collapsed),
+        },
+        followup: () => undefined,
+        revert: () => undefined,
+        onResponseSubmit: () => {},
+        openParent: () => {},
+        setPromptRef: () => {},
+        setDockRef: () => {},
+      })}
+      promptInput={
+        <PromptInput
+          controls={inputControls}
+          {...input}
+          ref={() => {}}
+          newSessionWorktree=""
+          onNewSessionWorktreeReset={() => {}}
+        />
+      }
    />
  )
 }
@@ -4,8 +4,6 @@ import {
  createEffect,
  on,
  Component,
-  splitProps,
-  For,
  Show,
  onCleanup,
  createMemo,
@@ -13,10 +11,8 @@ import {
  createResource,
  Switch,
  Match,
-  type ComponentProps,
  type JSX,
 } from "solid-js"
-import { Popover as KobaltePopover } from "@kobalte/core/popover"
 import { createStore, type SetStoreFunction, type Store } from "solid-js/store"
 import type { useLocal } from "@/context/local"
 import { selectionFromLines, type SelectedLineRange, useFile } from "@/context/file"
@@ -36,7 +32,7 @@ import { useSync } from "@/context/sync"
 import { useComments } from "@/context/comments"
 import { Button } from "@opencode-ai/ui/button"
 import { DockShellForm, DockTray } from "@opencode-ai/ui/dock-surface"
-import { Icon, type IconProps } from "@opencode-ai/ui/icon"
+import { Icon } from "@opencode-ai/ui/icon"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { IconButton } from "@opencode-ai/ui/icon-button"
@@ -70,8 +66,6 @@ import { promptPlaceholder } from "./prompt-input/placeholder"
 import { createPromptInputTransientState } from "./prompt-input/transient-state"
 import { showToast } from "@/utils/toast"
 import { ImagePreview } from "@opencode-ai/ui/image-preview"
-import { pathKey } from "@/utils/path-key"
-import { displayName } from "@/pages/layout/helpers"

 export type PromptInputState = ReturnType<typeof usePrompt>

@@ -99,12 +93,6 @@ export type PromptInputControls = {
    paid: boolean
    loading: boolean
  }
-  projects: {
-    available: { name?: string; worktree: string; sandboxes?: string[] }[]
-    directory: string
-    select: (worktree: string) => void
-    add: (title: string) => void
-  }
  session: {
    id?: string
    tabs: {
@@ -175,6 +163,7 @@ export interface PromptInputProps {
  onQueue?: (draft: FollowupDraft) => void
  onAbort?: () => void
  onSubmit?: () => void
+  toolbar?: JSX.Element
 }

 const EXAMPLES = [
@@ -223,7 +212,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  let fileInputRef: HTMLInputElement | undefined
  let scrollRef!: HTMLDivElement
  let slashPopoverRef!: HTMLDivElement
-  let projectSearchRef: HTMLInputElement | undefined

  const mirror = { input: false }
  const inset = 56
@@ -351,11 +339,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
    () => prompt.capture(),
    Math.floor(Math.random() * EXAMPLES.length),
  )
-  const [picker, setPicker] = createStore({
-    projectOpen: false,
-    projectSearch: "",
-  })
-
  const buttonsSpring = useSpring(() => (store.mode === "normal" ? 1 : 0), { visualDuration: 0.2, bounce: 0 })
  const motion = (value: number) => ({
    opacity: value,
@@ -1360,9 +1343,9 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  }

  const agentsLoading = () => props.controls.agents.loading
-  const agentsShouldFadeIn = createMemo((prev) => prev ?? agentsLoading())
+  const agentsShouldFadeIn = createMemo<boolean>((prev) => prev ?? agentsLoading())
  const providersLoading = () => props.controls.model.loading
-  const providersShouldFadeIn = createMemo((prev) => prev ?? providersLoading())
+  const providersShouldFadeIn = createMemo<boolean>((prev) => prev ?? providersLoading())

  const [promptReady] = createResource(
    () => prompt.ready.promise,
@@ -1376,6 +1359,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {

  const modelControlState = createMemo<ComposerModelControlState>(() => ({
    loading: providersLoading(),
+    shouldAnimate: providersShouldFadeIn(),
    paid: props.controls.model.paid,
    title: language.t("command.model.choose"),
    keybind: command.keybind("model.choose"),
@@ -1392,72 +1376,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  }))

  const newSession = () => props.variant === "new-session"
-  const projects = createMemo(() => props.controls.projects.available)
-  const projectForDirectory = (directory: string | undefined) => {
-    if (!directory) return
-    const key = pathKey(directory)
-    return projects().find(
-      (project) => pathKey(project.worktree) === key || project.sandboxes?.some((sandbox) => pathKey(sandbox) === key),
-    )
-  }
-  const selectedProject = createMemo(() => projectForDirectory(props.controls.projects.directory))
-  const projectResults = createMemo(() => {
-    const search = picker.projectSearch.trim().toLowerCase()
-    if (!search) return projects()
-    return projects().filter((project) => displayName(project).toLowerCase().includes(search))
-  })
  const showAgentControl = createMemo(() => props.controls.agents.visible && props.controls.agents.options.length > 0)
-  const selectProject = (worktree: string) => {
-    setPicker({
-      projectOpen: false,
-      projectSearch: "",
-    })
-    if (pathKey(worktree) === pathKey(selectedProject()?.worktree ?? "")) {
-      restoreFocus()
-      return
-    }
-    props.controls.projects.select(worktree)
-    restoreFocus()
-  }
-  const addProject = () => {
-    props.controls.projects.add(language.t("command.project.open"))
-  }
-
-  const projectPickerState = createMemo<ComposerPickerState>(() => ({
-    open: picker.projectOpen,
-    trigger: {
-      action: "prompt-project",
-      icon: "folder",
-      label: selectedProject() ? displayName(selectedProject()!) : language.t("session.new.project.new"),
-      class: "max-w-[203px]",
-      style: control(),
-      onPress: () => setPicker("projectOpen", true),
-    },
-    search: picker.projectSearch,
-    searchPlaceholder: language.t("session.new.project.search"),
-    clearLabel: language.t("common.clear"),
-    items: projectResults().map((project) => ({
-      icon: "folder",
-      label: displayName(project),
-      selected: selectedProject()?.worktree === project.worktree,
-      onSelect: () => selectProject(project.worktree),
-    })),
-    action: {
-      icon: "plus",
-      label: language.t("session.new.project.add"),
-      onSelect: () => {
-        setPicker("projectOpen", false)
-        void addProject()
-      },
-    },
-    onOpenChange: (open) => {
-      setPicker("projectOpen", open)
-      if (open) requestAnimationFrame(() => projectSearchRef?.focus())
-    },
-    onSearchInput: (value) => setPicker("projectSearch", value),
-    onSearchClear: () => setPicker("projectSearch", ""),
-    searchRef: (el) => (projectSearchRef = el),
-  }))
  const agentControlState = createMemo<ComposerAgentControlState>(() => ({
    title: language.t("command.agent.cycle"),
    keybind: command.keybind("agent.cycle"),
@@ -1469,15 +1388,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
      restoreFocus()
    },
  }))
-  const newProjectTriggerState = createMemo<ComposerPickerTriggerState>(() => ({
-    action: "prompt-project",
-    icon: "folder-add-left",
-    label: language.t("session.new.project.new"),
-    class: "max-w-[160px]",
-    style: control(),
-    onPress: () => void addProject(),
-  }))
-
  return (
    <div class="relative size-full flex flex-col gap-0">
      {(promptReady(), null)}
@@ -1608,14 +1518,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                  <Show when={showAgentControl()}>
                    <ComposerAgentControl state={agentControlState()} />
                  </Show>
-                  <Show when={newSession() && !selectedProject()}>
-                    <ComposerPickerTrigger state={newProjectTriggerState()} />
-                  </Show>
+                  {props.toolbar}
                  <ComposerModelControl state={modelControlState()} />
-                  <Show when={store.mode !== "shell" && showVariantControl()}>
+                  <Show when={!providersLoading() && store.mode !== "shell" && showVariantControl()}>
                    <div
                      data-component="prompt-variant-control"
                      classList={{
+                        "animate-in fade-in": providersShouldFadeIn(),
                        "hidden group-hover/prompt-input:block group-focus-within/prompt-input:block":
                          !props.controls.model.selection.variant.current() && !store.variantOpen,
                      }}
@@ -1664,11 +1573,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                </Tooltip>
              </div>
            </DockShellForm>
-            <Show when={newSession() && selectedProject()}>
-              <div class="flex h-7 min-w-0 items-center gap-0 px-2">
-                <ComposerPicker state={projectPickerState()} />
-              </div>
-            </Show>
          </div>
        </Match>
        <Match when>
@@ -1863,7 +1767,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                    <Show when={!agentsLoading()}>
                      <div
                        data-component="prompt-agent-control"
-                        style={agentsShouldFadeIn() ? { animation: "fade-in 0.3s" } : undefined}
+                        classList={{ "animate-in fade-in duration-300": agentsShouldFadeIn() }}
                      >
                        <TooltipKeybind
                          placement="top"
@@ -1892,7 +1796,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                      <Show when={store.mode !== "shell"}>
                        <div
                          data-component="prompt-model-control"
-                          style={providersShouldFadeIn() ? { animation: "fade-in 0.3s" } : undefined}
+                          classList={{ "animate-in fade-in duration-300": providersShouldFadeIn() }}
                        >
                          <Show
                            when={props.controls.model.paid}
@@ -1971,7 +1875,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                        <Show when={showVariantControl()}>
                          <div
                            data-component="prompt-variant-control"
-                            style={providersShouldFadeIn() ? { animation: "fade-in 0.3s" } : undefined}
+                            classList={{ "animate-in fade-in duration-300": providersShouldFadeIn() }}
                          >
                            <TooltipKeybind
                              placement="top"
@@ -2010,37 +1914,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  )
 }

-type ComposerPickerItemState = {
-  icon: IconProps["name"]
-  label: string
-  selected?: boolean
-  onSelect: () => void
-}
-
-type ComposerPickerTriggerState = {
-  action: string
-  icon?: IconProps["name"]
-  label: string
-  class?: string
-  style: JSX.CSSProperties | undefined
-  onPress: () => void
-}
-
-type ComposerPickerState = {
-  open: boolean
-  trigger: ComposerPickerTriggerState
-  search: string
-  searchPlaceholder: string
-  clearLabel: string
-  items: ComposerPickerItemState[]
-  action: ComposerPickerItemState
-  listClass?: string
-  searchRef: (el: HTMLInputElement) => void
-  onOpenChange: (open: boolean) => void
-  onSearchInput: (value: string) => void
-  onSearchClear: () => void
-}
-
 type ComposerAgentControlState = {
  title: string
  keybind: string
@@ -2052,6 +1925,7 @@ type ComposerAgentControlState = {

 type ComposerModelControlState = {
  loading: boolean
+  shouldAnimate: boolean
  paid: boolean
  title: string
  keybind: string
@@ -2063,90 +1937,6 @@ type ComposerModelControlState = {
  onUnpaidClick: () => void
 }

-function ComposerPickerTrigger(props: ComponentProps<"button"> & { state: ComposerPickerTriggerState }) {
-  const [local, rest] = splitProps(props, ["state", "class", "style", "onClick"])
-  return (
-    <button
-      {...rest}
-      data-action={local.state.action}
-      type="button"
-      class={`flex h-7 min-w-0 items-center gap-1.5 rounded px-2 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-faint transition-colors hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none ${local.state.class ?? ""}`}
-      style={local.state.style}
-      onClick={() => local.state.onPress()}
-    >
-      <Show when={local.state.icon}>
-        {(icon) => <Icon name={icon()} size="small" class="shrink-0 text-v2-icon-icon-muted" />}
-      </Show>
-      <span class="min-w-0 truncate leading-5">{local.state.label}</span>
-      <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
-    </button>
-  )
-}
-
-function ComposerPickerMenuItem(props: { state: ComposerPickerItemState }) {
-  return (
-    <button
-      type="button"
-      class="flex h-7 w-full items-center gap-2 rounded px-3 text-left text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
-      onClick={props.state.onSelect}
-    >
-      <Icon name={props.state.icon} size="small" class="shrink-0 text-v2-icon-icon-base" />
-      <span class="min-w-0 flex-1 truncate leading-5">{props.state.label}</span>
-      <Show when={props.state.selected}>
-        <Icon name="check-small" size="small" class="shrink-0 text-v2-icon-icon-base" />
-      </Show>
-    </button>
-  )
-}
-
-function ComposerPicker(props: { state: ComposerPickerState }) {
-  return (
-    <KobaltePopover
-      open={props.state.open}
-      placement="bottom-start"
-      gutter={4}
-      modal={false}
-      onOpenChange={props.state.onOpenChange}
-    >
-      <KobaltePopover.Trigger as={ComposerPickerTrigger} state={props.state.trigger} />
-      <KobaltePopover.Portal>
-        <KobaltePopover.Content
-          class="w-[243px] overflow-hidden rounded-md bg-v2-background-bg-layer-01 shadow-[var(--v2-elevation-floating)] focus:outline-none"
-          onOpenAutoFocus={(event) => event.preventDefault()}
-        >
-          <div class={`flex flex-col p-0.5 ${props.state.listClass ?? ""}`}>
-            <div class="flex h-7 items-center gap-2 rounded px-3 text-v2-icon-icon-muted">
-              <Icon name="magnifying-glass" size="small" class="shrink-0" />
-              <input
-                ref={props.state.searchRef}
-                value={props.state.search}
-                placeholder={props.state.searchPlaceholder}
-                class="h-7 min-w-0 flex-1 border-0 bg-transparent text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base outline-none placeholder:text-v2-text-text-faint"
-                onInput={(event) => props.state.onSearchInput(event.currentTarget.value)}
-              />
-              <Show when={props.state.search.trim()}>
-                <button
-                  type="button"
-                  class="flex size-5 items-center justify-center rounded text-v2-icon-icon-muted hover:bg-v2-overlay-simple-overlay-hover"
-                  onClick={props.state.onSearchClear}
-                  aria-label={props.state.clearLabel}
-                >
-                  <Icon name="close-small" size="small" />
-                </button>
-              </Show>
-            </div>
-            <For each={props.state.items}>{(item) => <ComposerPickerMenuItem state={item} />}</For>
-          </div>
-          <div class="h-px bg-v2-border-border-muted" />
-          <div class="flex flex-col p-0.5">
-            <ComposerPickerMenuItem state={props.state.action} />
-          </div>
-        </KobaltePopover.Content>
-      </KobaltePopover.Portal>
-    </KobaltePopover>
-  )
-}
-
 function ComposerAgentControl(props: { state: ComposerAgentControlState }) {
  return (
    <div class="relative">
@@ -2183,6 +1973,7 @@ function ComposerModelControl(props: { state: ComposerModelControlState }) {
              variant="ghost"
              size="normal"
              class="min-w-0 max-w-[220px] justify-start text-[13px] font-[440] leading-5 text-v2-text-text-faint group"
+              classList={{ "animate-in fade-in": props.state.shouldAnimate }}
              style={props.state.style}
              onClick={props.state.onUnpaidClick}
            >
@@ -2196,7 +1987,9 @@ function ComposerModelControl(props: { state: ComposerModelControlState }) {
                )}
              </Show>
              <span class="truncate">{props.state.modelName}</span>
-              <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+              <span class="-ml-1 shrink-0 flex size-fit">
+                <Icon name="chevron-down" size="small" class="text-v2-icon-icon-muted" />
+              </span>
            </Button>
          </TooltipKeybind>
        }
@@ -2211,6 +2004,7 @@ function ComposerModelControl(props: { state: ComposerModelControlState }) {
              style: props.state.style,
              class:
                "min-w-0 max-w-[220px] justify-start text-[13px] font-[440] leading-5 text-v2-text-text-faint group",
+              classList: { "animate-in fade-in": props.state.shouldAnimate },
              "data-action": "prompt-model",
            }}
            onClose={props.state.onClose}
@@ -2225,7 +2019,9 @@ function ComposerModelControl(props: { state: ComposerModelControlState }) {
              )}
            </Show>
            <span class="truncate">{props.state.modelName}</span>
-            <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+            <span class="-ml-1 shrink-0 flex size-fit">
+              <Icon name="chevron-down" size="small" class="text-v2-icon-icon-muted" />
+            </span>
          </ModelSelectorPopover>
        </TooltipKeybind>
      </Show>
@@ -20,8 +20,10 @@ const storedSessions: Record<string, Array<{ id: string; title?: string }>> = {}
 const promoted: Array<{ directory: string; sessionID: string }> = []
 const sentShell: string[] = []
 const syncedDirectories: string[] = []
+const promotedDrafts: Array<{ draftID: string; server: string; sessionId: string }> = []

 let params: { id?: string } = {}
+let search: { draftId?: string } = {}
 let selected = "/repo/worktree-a"
 let variant: string | undefined

@@ -79,7 +81,7 @@ beforeAll(async () => {
    useNavigate: () => () => undefined,
    useParams: () => params,
    useLocation: () => ({}),
-    useSearchParams: () => [{}, () => undefined],
+    useSearchParams: () => [search, () => undefined],
  }))

  mock.module("@opencode-ai/sdk/v2/client", () => ({
@@ -129,7 +131,10 @@ beforeAll(async () => {

  mock.module("@/context/tabs", () => ({
    useTabs: () => ({
-      promoteDraft: () => undefined,
+      draft: () => ({ server: "project-server" }),
+      promoteDraft: (draftID: string, session: { server: string; sessionId: string }) => {
+        promotedDrafts.push({ draftID, ...session })
+      },
    }),
  }))

@@ -234,7 +239,9 @@ beforeEach(() => {
  optimistic.length = 0
  optimisticSeeded.length = 0
  promoted.length = 0
+  promotedDrafts.length = 0
  params = {}
+  search = {}
  sentShell.length = 0
  syncedDirectories.length = 0
  selected = "/repo/worktree-a"
@@ -309,6 +316,33 @@ describe("prompt submit worktree selection", () => {
    expect(enabledAutoAccept).toEqual([{ sessionID: "session-1", directory: "/repo/worktree-a" }])
  })

+  test("promotes drafts using the selected project's server", async () => {
+    search = { draftId: "draft-1" }
+    const submit = createPromptSubmit({
+      prompt,
+      info: () => undefined,
+      imageAttachments: () => [],
+      commentCount: () => 0,
+      autoAccept: () => false,
+      mode: () => "normal",
+      working: () => false,
+      editor: () => undefined,
+      queueScroll: () => undefined,
+      promptLength: (value) => value.reduce((sum, part) => sum + ("content" in part ? part.content.length : 0), 0),
+      addToHistory: () => undefined,
+      resetHistoryNavigation: () => undefined,
+      setMode: () => undefined,
+      setPopover: () => undefined,
+      newSessionWorktree: () => selected,
+      onNewSessionWorktreeReset: () => undefined,
+      onSubmit: () => undefined,
+    })
+
+    await submit.handleSubmit({ preventDefault: () => undefined } as unknown as Event)
+
+    expect(promotedDrafts).toEqual([{ draftID: "draft-1", server: "project-server", sessionId: "session-1" }])
+  })
+
  test("includes the selected variant on optimistic prompts", async () => {
    params = { id: "session-1" }
    variant = "high"
@@ -4,7 +4,6 @@ import { base64Encode } from "@opencode-ai/core/util/encode"
 import { Binary } from "@opencode-ai/core/util/binary"
 import { useNavigate, useParams, useSearchParams } from "@solidjs/router"
 import { batch, type Accessor } from "solid-js"
-import { useServer } from "@/context/server"
 import { useTabs } from "@/context/tabs"
 import { useServerSync, type ServerSync } from "@/context/server-sync"
 import { useLanguage } from "@/context/language"
@@ -206,7 +205,6 @@ export function createPromptSubmit(input: PromptSubmitInput) {
  const language = useLanguage()
  const params = useParams()
  const [search] = useSearchParams<{ draftId?: string }>()
-  const server = useServer()
  const tabs = useTabs()
  const pendingKey = (sessionID: string) => ScopedKey.from(sdk().scope, sessionID)

@@ -380,7 +378,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
        local.session.promote(sessionDirectory, session.id)
        layout.handoff.setTabs(base64Encode(sessionDirectory), session.id)
        const draftID = search.draftId
-        if (draftID) tabs.promoteDraft(draftID, { server: server.key, sessionId: session.id })
+        if (draftID) tabs.promoteDraft(draftID, { server: tabs.draft(draftID).server, sessionId: session.id })
        else navigate(`/${base64Encode(sessionDirectory)}/session/${session.id}`)
        submission.retarget(prompt.capture({ dir: base64Encode(sessionDirectory), id: session.id }))
      }
@@ -0,0 +1,551 @@
+import { For, Show, splitProps, type Accessor, type ComponentProps } from "solid-js"
+import { createStore } from "solid-js/store"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
+import { getProjectAvatarVariant } from "@/context/layout"
+import { useLanguage } from "@/context/language"
+import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
+import { pathKey } from "@/utils/path-key"
+
+export type PromptProject = {
+  name?: string
+  id?: string
+  worktree: string
+  sandboxes?: string[]
+  icon?: { color?: string; url?: string; override?: string }
+  server?: { key: string; name: string }
+}
+
+export type PromptProjectControls = {
+  available: PromptProject[]
+  directory: string
+  server?: string
+  select: (worktree: string, server?: string) => void
+  add: (title: string, server?: string) => void
+}
+
+const actionPrefix = "action:"
+const projectPrefix = "project:"
+
+function projectKey(project: PromptProject) {
+  return `${projectPrefix}${encodeURIComponent(project.server?.key ?? "")}:${encodeURIComponent(project.worktree)}`
+}
+
+function actionKey(server?: string) {
+  return `${actionPrefix}${encodeURIComponent(server ?? "")}`
+}
+
+export function createPromptProjectController(input: {
+  controls: Accessor<PromptProjectControls>
+  onDone: () => void
+}) {
+  const language = useLanguage()
+  const [store, setStore] = createStore({ open: false, search: "", active: "" })
+  let searchRef: HTMLInputElement | undefined
+
+  const selected = () => {
+    const key = pathKey(input.controls().directory)
+    return input
+      .controls()
+      .available.find(
+        (project) =>
+          (!project.server || project.server.key === input.controls().server) &&
+          (pathKey(project.worktree) === key || project.sandboxes?.some((sandbox) => pathKey(sandbox) === key)),
+      )
+  }
+  const projects = () => {
+    const search = store.search.trim().toLowerCase()
+    if (!search) return input.controls().available
+    return input.controls().available.filter((project) => displayName(project).toLowerCase().includes(search))
+  }
+  const servers = () =>
+    input
+      .controls()
+      .available.map((project) => project.server)
+      .filter((server, index, all) => server && all.findIndex((item) => item?.key === server.key) === index)
+  const keys = () => {
+    if (servers().length <= 1) {
+      return [...projects().map(projectKey), actionKey(servers()[0]?.key)]
+    }
+    return [
+      ...servers().flatMap((server) =>
+        projects()
+          .filter((project) => project.server?.key === server!.key)
+          .map(projectKey),
+      ),
+      actionKey(),
+    ]
+  }
+  const initialActive = () => {
+    const selectedKey = selected() ? projectKey(selected()!) : undefined
+    const options = keys()
+    if (selectedKey && options.includes(selectedKey)) return selectedKey
+    return options[0] ?? ""
+  }
+  const close = () => {
+    setStore({ open: false, search: "", active: "" })
+    input.onDone()
+  }
+  const select = (project: PromptProject) => {
+    if (
+      pathKey(project.worktree) !== pathKey(selected()?.worktree ?? "") ||
+      project.server?.key !== selected()?.server?.key
+    ) {
+      input.controls().select(project.worktree, project.server?.key)
+    }
+    close()
+  }
+  const add = (server?: string) => {
+    setStore({ open: false, search: "", active: "" })
+    input.controls().add(language.t("command.project.open"), server)
+  }
+
+  return {
+    selected,
+    projects,
+    servers,
+    projectKey,
+    actionKey,
+    open: () => store.open,
+    search: () => store.search,
+    active: () => store.active,
+    labels: {
+      add: () => language.t("session.new.project.add"),
+      clear: () => language.t("common.clear"),
+      new: () => language.t("session.new.project.new"),
+      search: () => language.t("session.new.project.search"),
+    },
+    add,
+    select,
+    setOpen(open: boolean) {
+      if (open) {
+        setStore({ open: true, active: initialActive() })
+        setTimeout(() => requestAnimationFrame(() => searchRef?.focus()))
+        return
+      }
+      setStore({ open: false, search: "", active: "" })
+    },
+    setSearch(value: string) {
+      const search = value.trim().toLowerCase()
+      const first = input
+        .controls()
+        .available.find((project) => !search || displayName(project).toLowerCase().includes(search))
+      setStore({
+        search: value,
+        active: first ? projectKey(first) : actionKey(servers().length > 1 ? undefined : servers()[0]?.key),
+      })
+    },
+    clearSearch() {
+      setStore({ search: "", active: initialActive() })
+      setTimeout(() => searchRef?.focus())
+    },
+    setActive(key: string) {
+      setStore("active", key)
+    },
+    moveActive(delta: number) {
+      const options = keys()
+      if (options.length === 0) return
+      const index = options.indexOf(store.active)
+      const start = index === -1 ? 0 : index
+      setStore("active", options[(start + delta + options.length) % options.length])
+    },
+    activeProject() {
+      return store.active.startsWith(projectPrefix)
+        ? projects().find((project) => projectKey(project) === store.active)
+        : undefined
+    },
+    activeServer() {
+      return store.active.startsWith(actionPrefix)
+        ? decodeURIComponent(store.active.slice(actionPrefix.length)) || undefined
+        : undefined
+    },
+    activeAction() {
+      return store.active.startsWith(actionPrefix)
+    },
+    setSearchRef(el: HTMLInputElement) {
+      searchRef = el
+    },
+    focusSearch() {
+      setTimeout(() => requestAnimationFrame(() => searchRef?.focus()))
+    },
+  }
+}
+
+export type PromptProjectController = ReturnType<typeof createPromptProjectController>
+
+export function PromptProjectSelector(props: {
+  controller: PromptProjectController
+  placement?: "bottom" | "bottom-start"
+}) {
+  let contentRef: HTMLDivElement | undefined
+  let restoreTrigger = true
+
+  const activeItem = () =>
+    props.controller.active()
+      ? contentRef?.querySelector<HTMLElement>(`[data-option-key="${CSS.escape(props.controller.active())}"]`)
+      : undefined
+  const afterClose = (callback: () => void) => {
+    const complete = () => {
+      if (contentRef?.isConnected) {
+        requestAnimationFrame(complete)
+        return
+      }
+      requestAnimationFrame(() => requestAnimationFrame(callback))
+    }
+    requestAnimationFrame(complete)
+  }
+  const selectProject = (project: PromptProject) => {
+    restoreTrigger = false
+    props.controller.setOpen(false)
+    afterClose(() => props.controller.select(project))
+  }
+  const selectAction = (server?: string) => {
+    restoreTrigger = false
+    props.controller.setOpen(false)
+    afterClose(() => props.controller.add(server))
+  }
+  const selectActive = () => {
+    const project = props.controller.activeProject()
+    if (project) {
+      selectProject(project)
+      return
+    }
+    if (props.controller.activeAction() && props.controller.servers().length > 1) {
+      const item = activeItem()
+      item?.focus()
+      item?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }))
+      return
+    }
+    selectAction(props.controller.activeServer())
+  }
+  const moveActive = (delta: number) => {
+    props.controller.moveActive(delta)
+    queueMicrotask(() => activeItem()?.scrollIntoView({ block: "nearest" }))
+  }
+  const focusPreviousControl = () => {
+    const target = Array.from(
+      document.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      ),
+    )
+      .filter((element) => !contentRef?.contains(element) && !element.hasAttribute("data-focus-trap"))
+      .findLast((element) => element.offsetParent !== null)
+    restoreTrigger = false
+    target?.focus()
+    queueMicrotask(() => {
+      if (props.controller.open()) props.controller.setOpen(false)
+    })
+  }
+  const selectedValue = () => {
+    const project = props.controller.selected()
+    return project ? props.controller.projectKey(project) : undefined
+  }
+
+  return (
+    <DropdownMenu
+      open={props.controller.open()}
+      placement={props.placement ?? "bottom"}
+      gutter={4}
+      modal={false}
+      onOpenChange={(open) => props.controller.setOpen(open)}
+    >
+      <DropdownMenu.Trigger as={ProjectTrigger} controller={props.controller} />
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          ref={contentRef}
+          id="prompt-project-menu"
+          class="w-[243px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 p-0 shadow-[var(--v2-elevation-floating)] focus:outline-none [&[data-closed]]:!animate-none"
+          onOpenAutoFocus={(event) => event.preventDefault()}
+          onPointerDownOutside={() => (restoreTrigger = false)}
+          onFocusOutside={() => (restoreTrigger = false)}
+          onCloseAutoFocus={(event) => {
+            if (!restoreTrigger) event.preventDefault()
+          }}
+        >
+          <div class="flex flex-col p-0.5">
+            <div class="flex h-7 items-center gap-2 rounded-sm pl-3 pr-2.5 text-v2-icon-icon-muted">
+              <Icon name="magnifying-glass" size="small" class="shrink-0" />
+              <input
+                ref={(el) => props.controller.setSearchRef(el)}
+                value={props.controller.search()}
+                placeholder={props.controller.labels.search()}
+                aria-autocomplete="list"
+                aria-controls="prompt-project-menu"
+                aria-activedescendant={props.controller.active() || undefined}
+                class="h-7 min-w-0 flex-1 border-0 bg-transparent text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base outline-none placeholder:text-v2-text-text-faint"
+                onInput={(event) => props.controller.setSearch(event.currentTarget.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Tab") {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    if (event.shiftKey) {
+                      focusPreviousControl()
+                      return
+                    }
+                    activeItem()?.focus()
+                    return
+                  }
+                  event.stopPropagation()
+                  if (event.key === "Escape") {
+                    event.preventDefault()
+                    props.controller.setOpen(false)
+                    return
+                  }
+                  if (event.altKey || event.metaKey) return
+                  if (event.key === "ArrowDown") {
+                    event.preventDefault()
+                    moveActive(1)
+                    return
+                  }
+                  if (event.key === "ArrowUp") {
+                    event.preventDefault()
+                    moveActive(-1)
+                    return
+                  }
+                  if (event.key === "Enter" && !event.isComposing) {
+                    event.preventDefault()
+                    selectActive()
+                  }
+                }}
+              />
+              <Show when={props.controller.search().trim()}>
+                <button
+                  type="button"
+                  class="flex size-5 items-center justify-center rounded-sm text-v2-icon-icon-muted hover:bg-v2-overlay-simple-overlay-hover"
+                  onPointerDown={(event) => event.preventDefault()}
+                  onClick={() => props.controller.clearSearch()}
+                  aria-label={props.controller.labels.clear()}
+                >
+                  <Icon name="close-small" size="small" />
+                </button>
+              </Show>
+            </div>
+            <Show
+              when={props.controller.servers().length > 1}
+              fallback={
+                <DropdownMenu.RadioGroup value={selectedValue()}>
+                  <For each={props.controller.projects()}>
+                    {(project) => (
+                      <ProjectItem project={project} controller={props.controller} onSelect={selectProject} />
+                    )}
+                  </For>
+                </DropdownMenu.RadioGroup>
+              }
+            >
+              <For
+                each={props.controller
+                  .servers()
+                  .filter((server) =>
+                    props.controller.projects().some((project) => project.server?.key === server!.key),
+                  )}
+              >
+                {(server) => (
+                  <div>
+                    <div class="flex h-7 select-none items-center pl-1.5 pr-3 text-[11px] font-[530] leading-none tracking-[0.05px] text-v2-text-text-faint">
+                      {server!.name}
+                    </div>
+                    <DropdownMenu.RadioGroup value={selectedValue()}>
+                      <For each={props.controller.projects().filter((project) => project.server?.key === server!.key)}>
+                        {(project) => (
+                          <ProjectItem project={project} controller={props.controller} onSelect={selectProject} />
+                        )}
+                      </For>
+                    </DropdownMenu.RadioGroup>
+                  </div>
+                )}
+              </For>
+            </Show>
+          </div>
+          <div class="h-px bg-v2-border-border-muted" />
+          <div class="flex flex-col p-0.5">
+            <Show
+              when={props.controller.servers().length > 1}
+              fallback={
+                <ProjectAction
+                  server={props.controller.servers()[0]?.key}
+                  controller={props.controller}
+                  onSelect={selectAction}
+                />
+              }
+            >
+              <DropdownMenu.Sub>
+                <DropdownMenu.SubTrigger
+                  id={props.controller.actionKey()}
+                  data-option-key={props.controller.actionKey()}
+                  class={projectActionClass}
+                  classList={{
+                    "!bg-v2-overlay-simple-overlay-hover": props.controller.active() === props.controller.actionKey(),
+                  }}
+                  onMouseEnter={() => props.controller.setActive(props.controller.actionKey())}
+                >
+                  <Icon name="plus" size="small" />
+                  <span data-slot="dropdown-menu-item-label" class="min-w-0 flex-1 truncate leading-5">
+                    {props.controller.labels.add()}
+                  </span>
+                  <Icon name="chevron-right" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+                </DropdownMenu.SubTrigger>
+                <DropdownMenu.Portal>
+                  <DropdownMenu.SubContent class="min-w-[180px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 p-0.5 shadow-[var(--v2-elevation-floating)] focus:outline-none">
+                    <For each={props.controller.servers()}>
+                      {(server) => <ServerAction server={server!} onSelect={selectAction} />}
+                    </For>
+                  </DropdownMenu.SubContent>
+                </DropdownMenu.Portal>
+              </DropdownMenu.Sub>
+            </Show>
+          </div>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu>
+  )
+}
+
+export function PromptProjectAddButton(props: { controller: PromptProjectController }) {
+  return (
+    <button
+      data-action="prompt-project"
+      type="button"
+      class="flex h-7 min-w-0 max-w-[160px] items-center gap-1.5 rounded-sm px-2 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-faint transition-colors hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
+      onClick={() => props.controller.add()}
+    >
+      <Icon name="folder-add-left" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+      <span class="min-w-0 truncate leading-5">{props.controller.labels.new()}</span>
+      <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+    </button>
+  )
+}
+
+function ProjectTrigger(props: ComponentProps<"button"> & { controller: PromptProjectController }) {
+  const [local, rest] = splitProps(props, ["controller", "class", "classList", "onClick", "onKeyDown"])
+  const project = () => local.controller.selected()
+  return (
+    <button
+      {...rest}
+      data-action="prompt-project"
+      type="button"
+      class="flex h-7 min-w-0 max-w-[203px] items-center gap-1.5 rounded-sm px-1.5 transition-colors focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
+      classList={{
+        ...local.classList,
+        "hover:bg-v2-overlay-simple-overlay-hover": !local.controller.open(),
+        "bg-v2-overlay-simple-overlay-pressed": local.controller.open(),
+        "text-v2-text-text-muted": local.controller.open(),
+      }}
+      onClick={local.onClick ?? (() => local.controller.setOpen(true))}
+      onKeyDown={(event) => {
+        if (!local.controller.open() && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+          event.preventDefault()
+          event.stopPropagation()
+          return
+        }
+        if (typeof local.onKeyDown === "function") local.onKeyDown(event)
+      }}
+    >
+      <Show
+        when={project()}
+        fallback={<Icon name="folder-add-left" size="small" class="shrink-0 text-v2-icon-icon-muted" />}
+      >
+        {(item) => (
+          <ProjectAvatar
+            fallback={displayName(item())}
+            src={getProjectAvatarSource(item().id, item().icon)}
+            variant={getProjectAvatarVariant(item().icon?.color)}
+          />
+        )}
+      </Show>
+      <span class="min-w-0 truncate leading-5">
+        {project() ? displayName(project()!) : local.controller.labels.new()}
+      </span>
+      <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+    </button>
+  )
+}
+
+function ProjectItem(props: {
+  project: PromptProject
+  controller: PromptProjectController
+  onSelect: (project: PromptProject) => void
+}) {
+  const key = () => props.controller.projectKey(props.project)
+  return (
+    <DropdownMenu.RadioItem
+      id={key()}
+      value={key()}
+      data-option-key={key()}
+      class="h-7 gap-2 rounded-sm px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base data-[highlighted]:!bg-v2-overlay-simple-overlay-hover"
+      classList={{ "!bg-v2-overlay-simple-overlay-hover": props.controller.active() === key() }}
+      style={{
+        "font-family": "var(--v2-font-family-sans)",
+        "font-size": "13px",
+        "font-weight": 440,
+        "line-height": "20px",
+        "letter-spacing": "-0.04px",
+        color: "var(--v2-text-text-base)",
+        padding: "0 12px",
+      }}
+      closeOnSelect
+      onMouseEnter={() => {
+        props.controller.setActive(key())
+        props.controller.focusSearch()
+      }}
+      onSelect={() => props.onSelect(props.project)}
+    >
+      <ProjectAvatar
+        fallback={displayName(props.project)}
+        src={getProjectAvatarSource(props.project.id, props.project.icon)}
+        variant={getProjectAvatarVariant(props.project.icon?.color)}
+      />
+      <DropdownMenu.ItemLabel class="min-w-0 truncate leading-5">{displayName(props.project)}</DropdownMenu.ItemLabel>
+      <DropdownMenu.ItemIndicator style={{ width: "14px", height: "14px", right: "12px" }}>
+        <IconV2 name="check" size="small" class="shrink-0 text-v2-icon-icon-base" />
+      </DropdownMenu.ItemIndicator>
+    </DropdownMenu.RadioItem>
+  )
+}
+
+const projectActionClass =
+  "h-7 gap-2 rounded-sm px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base [font-family:var(--v2-font-family-sans)] data-[highlighted]:!bg-v2-overlay-simple-overlay-hover"
+
+function ProjectAction(props: {
+  server?: string
+  controller: PromptProjectController
+  onSelect: (server?: string) => void
+}) {
+  const key = () => props.controller.actionKey(props.server)
+  return (
+    <DropdownMenu.Item
+      id={key()}
+      data-option-key={key()}
+      class="h-7 gap-2 rounded-sm px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base data-[highlighted]:!bg-v2-overlay-simple-overlay-hover"
+      classList={{ "!bg-v2-overlay-simple-overlay-hover": props.controller.active() === key() }}
+      style={{
+        "font-family": "var(--v2-font-family-sans)",
+        "font-size": "13px",
+        "font-weight": 440,
+        "line-height": "20px",
+        "letter-spacing": "-0.04px",
+        color: "var(--v2-text-text-base)",
+        padding: "0 12px",
+      }}
+      onMouseEnter={() => {
+        props.controller.setActive(key())
+        props.controller.focusSearch()
+      }}
+      onSelect={() => props.onSelect(props.server)}
+    >
+      <Icon name="plus" size="small" />
+      <DropdownMenu.ItemLabel class="min-w-0 truncate leading-5">
+        {props.controller.labels.add()}
+      </DropdownMenu.ItemLabel>
+    </DropdownMenu.Item>
+  )
+}
+
+function ServerAction(props: { server: { key: string; name: string }; onSelect: (server: string) => void }) {
+  return (
+    <DropdownMenu.Item class={projectActionClass} onSelect={() => props.onSelect(props.server.key)}>
+      <DropdownMenu.ItemLabel class="min-w-0 flex-1 truncate leading-5">{props.server.name}</DropdownMenu.ItemLabel>
+    </DropdownMenu.Item>
+  )
+}
@@ -0,0 +1,102 @@
+import { For, Show } from "solid-js"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { getFilename } from "@opencode-ai/core/util/path"
+import { useLanguage } from "@/context/language"
+
+export function PromptWorkspaceSelector(props: {
+  value: string
+  projectRoot: string
+  workspaces: string[]
+  branch?: string
+  onChange: (value: string) => void
+  onDone: () => void
+}) {
+  const language = useLanguage()
+  let pending: string | undefined
+  const selected = () => (props.value === props.projectRoot ? "main" : props.value)
+  const icon = () => {
+    if (selected() === "main") return "monitor"
+    if (selected() === "create") return "workspace-new"
+    return "workspace"
+  }
+  const select = (value: string) => {
+    pending = value
+  }
+  const onOpenChange = (open: boolean) => {
+    if (open) return
+    const value = pending
+    pending = undefined
+    if (value) props.onChange(value)
+    props.onDone()
+  }
+  const label = () => {
+    if (selected() === "main") return language.t("session.new.workspace.triggerLocal")
+    if (props.value === "create") return language.t("workspace.new")
+    return getFilename(props.value)
+  }
+
+  return (
+    <>
+      <span class="hidden select-none opacity-50 sm:inline mx-1">/</span>
+      <MenuV2 placement="bottom" gutter={4} onOpenChange={onOpenChange}>
+        <MenuV2.Trigger class="flex h-7 min-w-0 max-w-[203px] items-center gap-1.5 rounded-sm px-1.5 hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-pressed data-[expanded]:text-v2-text-text-muted">
+          <IconV2 name={icon()} class="shrink-0 text-v2-icon-icon-muted" />
+          <span class="min-w-0 truncate">{label()}</span>
+          <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+        </MenuV2.Trigger>
+        <MenuV2.Portal>
+          <MenuV2.Content class="w-[180px]">
+            <MenuV2.Group>
+              <MenuV2.GroupLabel>{language.t("session.new.workspace.runIn")}</MenuV2.GroupLabel>
+              <MenuV2.Item onSelect={() => select("main")}>
+                <IconV2 name="monitor" />
+                <span class="min-w-0 flex-1 truncate">{language.t("session.new.workspace.local")}</span>
+                <Show when={selected() === "main"}>
+                  <Icon name="check" size="small" class="shrink-0" />
+                </Show>
+              </MenuV2.Item>
+              <MenuV2.Item onSelect={() => select("create")}>
+                <IconV2 name="workspace-new" />
+                <span class="min-w-0 flex-1 truncate">{language.t("workspace.new")}</span>
+                <Show when={selected() === "create"}>
+                  <Icon name="check" size="small" class="shrink-0" />
+                </Show>
+              </MenuV2.Item>
+            </MenuV2.Group>
+            <Show when={props.workspaces.length > 0}>
+              <MenuV2.Separator />
+              <MenuV2.Sub gutter={0} overlap overflowPadding={8}>
+                <MenuV2.SubTrigger>
+                  <IconV2 name="workspace" />
+                  {language.t("session.new.workspace.existing")}
+                </MenuV2.SubTrigger>
+                <MenuV2.Portal>
+                  <MenuV2.SubContent class="max-w-[200px]">
+                    <For each={props.workspaces}>
+                      {(workspace) => (
+                        <MenuV2.Item onSelect={() => select(workspace)}>
+                          <IconV2 name="workspace-isolated" />
+                          <span class="min-w-0 flex-1 truncate">{getFilename(workspace)}</span>
+                          <Show when={selected() === workspace}>
+                            <Icon name="check" size="small" class="shrink-0" />
+                          </Show>
+                        </MenuV2.Item>
+                      )}
+                    </For>
+                  </MenuV2.SubContent>
+                </MenuV2.Portal>
+              </MenuV2.Sub>
+            </Show>
+          </MenuV2.Content>
+        </MenuV2.Portal>
+      </MenuV2>
+      <span class="hidden select-none opacity-50 sm:inline mx-1">/</span>
+      <div class="flex h-7 min-w-0 max-w-[220px] items-center gap-1.5 px-2 text-[13px] font-[440] leading-5 tracking-[-0.04px]">
+        <Icon name="branch" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+        <span class="min-w-0 truncate">{props.branch || "main"}</span>
+      </div>
+    </>
+  )
+}
@@ -19,7 +19,7 @@ export const ServerRowMenu: Component<{
  const isDefault = () => props.controller.defaultKey() === key

  return (
-    <MenuV2 gutter={4} modal={false} placement="bottom-end" open={props.open} onOpenChange={props.onOpenChange}>
+    <MenuV2 gutter={6} modal={false} placement="bottom-end" open={props.open} onOpenChange={props.onOpenChange}>
      <MenuV2.Trigger
        as={IconButtonV2}
        variant="ghost-muted"
@@ -117,7 +117,7 @@ export function ServerHealthIndicator(props: { health?: ServerHealth }) {
  return (
    <div
      classList={{
-        "size-1.5 rounded-full shrink-0": true,
+        "size-1.5 rounded-full shrink-0 my-[3.5px]": true,
        "bg-icon-success-base": props.health?.healthy === true,
        "bg-icon-critical-base": props.health?.healthy === false,
        "bg-border-weak-base": props.health === undefined,
@@ -28,6 +28,9 @@ 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"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { reviewTooltipKeybind } from "../command-tooltip-keybind"

 const OPEN_APPS = [
  "vscode",
@@ -237,7 +240,7 @@ export function SessionHeader() {
    statusVisible: status(),
    statusLabel: language.t("status.popover.trigger"),
    reviewLabel: language.t("command.review.toggle"),
-    reviewKeybind: command.keybind("review.toggle"),
+    reviewKeybind: reviewTooltipKeybind(command),
    reviewVisible: isDesktop(),
    reviewOpened: view().reviewPanel.opened(),
    onReviewToggle: () => view().reviewPanel.toggle(),
@@ -520,13 +523,15 @@ type SessionHeaderV2ActionsState = {
  statusVisible: boolean
  statusLabel: string
  reviewLabel: string
-  reviewKeybind: string
+  reviewKeybind: string[]
  reviewVisible: boolean
  reviewOpened: boolean
  onReviewToggle: () => void
 }

 function SessionHeaderV2Actions(props: { state: SessionHeaderV2ActionsState }) {
+  const language = useLanguage()
+
  return (
    <div class="flex items-center gap-2">
      <Show when={props.state.statusVisible}>
@@ -535,7 +540,17 @@ function SessionHeaderV2Actions(props: { state: SessionHeaderV2ActionsState }) {
        </Tooltip>
      </Show>
      <Show when={props.state.reviewVisible}>
-        <TooltipKeybind title={props.state.reviewLabel} keybind={props.state.reviewKeybind}>
+        <TooltipV2
+          placement="bottom"
+          value={
+            <>
+              {props.state.reviewLabel}
+              <Show when={props.state.reviewKeybind.length > 0}>
+                <KeybindV2 keys={props.state.reviewKeybind} variant="neutral" />
+              </Show>
+            </>
+          }
+        >
          <IconButtonV2
            type="button"
            variant="ghost-muted"
@@ -548,7 +563,7 @@ function SessionHeaderV2Actions(props: { state: SessionHeaderV2ActionsState }) {
            aria-controls="review-panel"
            icon={<IconV2 name="sidebar-right" />}
          />
-        </TooltipKeybind>
+        </TooltipV2>
      </Show>
    </div>
  )
@@ -0,0 +1,43 @@
+import { useParams } from "@solidjs/router"
+import { onCleanup } from "solid-js"
+import { useCommand } from "@/context/command"
+import { useLanguage } from "@/context/language"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+
+export function useSettingsDialog() {
+  const dialog = useDialog()
+  const params = useParams<{ id?: string }>()
+  let run = 0
+  let dead = false
+
+  onCleanup(() => {
+    dead = true
+  })
+
+  return () => {
+    const current = ++run
+    const sessionID = params.id
+    void import("@/components/settings-v2").then((module) => {
+      if (dead || run !== current) return
+      void dialog.show(() => <module.DialogSettings sessionID={sessionID} />)
+    })
+  }
+}
+
+export function useSettingsCommand() {
+  const command = useCommand()
+  const language = useLanguage()
+  const show = useSettingsDialog()
+
+  command.register("settings", () => [
+    {
+      id: "settings.open",
+      title: language.t("command.settings.open"),
+      category: language.t("command.category.settings"),
+      keybind: "mod+comma",
+      onSelect: show,
+    },
+  ])
+
+  return show
+}
@@ -1,5 +1,6 @@
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Dialog, DialogFooter } from "@opencode-ai/ui/v2/dialog-v2"
+import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
+import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { type Component, Show, createEffect, createSignal, onCleanup, onMount } from "solid-js"
@@ -52,8 +53,12 @@ export const DialogServerV2: Component<{
  }

  return (
-    <Dialog title={title()} fit class="settings-v2-server-dialog">
-      <div class="flex w-full min-w-0 flex-1 flex-col px-4">
+    <Dialog fit class="settings-v2-server-dialog">
+      <DialogHeader hideClose={true}>
+        <DialogTitle>{title()}</DialogTitle>
+      </DialogHeader>
+      <DividerV2 />
+      <DialogBody class="flex w-full min-w-0 flex-1 flex-col px-4 pt-4 pb-2">
        <div class="flex w-full min-w-0 flex-col gap-6">
          <div class="flex w-full min-w-0 flex-col gap-2">
            <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.url")}</label>
@@ -115,7 +120,7 @@ export const DialogServerV2: Component<{
            </div>
          </div>
        </div>
-      </div>
+      </DialogBody>
      <DialogFooter>
        <ButtonV2 variant="neutral" disabled={controller.formBusy()} onClick={() => dialog.close()}>
          {language.t("common.cancel")}
@@ -11,7 +11,9 @@ import { SettingsModelsV2 } from "./models"
 import "./settings-v2.css"
 import { SettingsServersV2 } from "./servers"

-export const DialogSettings: Component = () => {
+export const DialogSettings: Component<{
+  sessionID?: string
+}> = (props) => {
  const language = useLanguage()
  const platform = usePlatform()

@@ -62,7 +64,7 @@ export const DialogSettings: Component = () => {
          </div>
        </TabsV2.List>
        <TabsV2.Content value="general" class="settings-v2-panel">
-          <SettingsGeneralV2 />
+          <SettingsGeneralV2 sessionID={props.sessionID} />
        </TabsV2.Content>
        <TabsV2.Content value="shortcuts" class="settings-v2-panel">
          <SettingsKeybinds v2 />
@@ -6,7 +6,6 @@ import { Switch } from "@opencode-ai/ui/v2/switch-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { useParams } from "@solidjs/router"
 import { useLanguage } from "@/context/language"
 import { usePermission } from "@/context/permission"
 import { usePlatform } from "@/context/platform"
@@ -25,7 +24,6 @@ import {
  terminalInput,
  useSettings,
 } from "@/context/settings"
-import { decode64 } from "@/utils/base64"
 import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
 import { Link } from "../link"
 import { SettingsListV2 } from "./parts/list"
@@ -82,50 +80,46 @@ const playDemoSound = (id: string | undefined) => {
  }, 100)
 }

-export const SettingsGeneralV2: Component = () => {
+export const SettingsGeneralV2: Component<{
+  sessionID?: string
+}> = (props) => {
  const theme = useTheme()
  const language = useLanguage()
  const permission = usePermission()
  const platform = usePlatform()
  const dialog = useDialog()
-  const params = useParams()
  const settings = useSettings()
+  const serverSync = useServerSync()
+  const serverSdk = useServerSDK()
  const mobile = createMediaQuery("(max-width: 767px)")

  const updater = useUpdaterAction()

-  const dir = createMemo(() => decode64(params.dir))
+  const dir = createMemo(() => {
+    if (!props.sessionID) return undefined
+    return serverSync().session.lineage.peek(props.sessionID)?.session.directory
+  })
  const accepting = createMemo(() => {
    const value = dir()
-    if (!value) return false
-    if (!params.id) return permission.isAutoAcceptingDirectory(value)
-    return permission.isAutoAccepting(params.id, value)
+    if (!value || !props.sessionID) return false
+    return permission.isAutoAccepting(props.sessionID, value)
  })

  const toggleAccept = (checked: boolean) => {
    const value = dir()
-    if (!value) return
-
-    if (!params.id) {
-      if (permission.isAutoAcceptingDirectory(value) === checked) return
-      permission.toggleAutoAcceptDirectory(value)
-      return
-    }
+    if (!value || !props.sessionID) return

    if (checked) {
-      permission.enableAutoAccept(params.id, value)
+      permission.enableAutoAccept(props.sessionID, value)
      return
    }

-    permission.disableAutoAccept(params.id, value)
+    permission.disableAutoAccept(props.sessionID, value)
  }
  const desktop = createMemo(() => platform.platform === "desktop")

  const themeOptions = createMemo<ThemeOption[]>(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))

-  const serverSync = useServerSync()
-  const serverSdk = useServerSDK()
-
  const [shells] = createResource(
    () =>
      serverSdk()
@@ -336,7 +330,7 @@ export const SettingsGeneralV2: Component = () => {
          </div>
        </SettingsRowV2>

-        <Show when={mobile()}>
+        <Show when={mobile() && import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"}>
          <SettingsRowV2
            title={language.t("settings.general.row.mobileTitlebarBottom.title")}
            description={language.t("settings.general.row.mobileTitlebarBottom.description")}
@@ -633,7 +633,7 @@

 [data-component="dialog-v2"].settings-v2-server-dialog [data-slot="dialog-header"] {
  align-items: center;
-  padding: 24px 24px 0;
+  padding: 24px 24px 16px;
 }

 [data-component="dialog-v2"].settings-v2-server-dialog [data-slot="dialog-body"] {
@@ -5,7 +5,8 @@ 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 { useServer } from "@/context/server"
+import { ServerConnection, useServer } from "@/context/server"
+import { useServerSDK } from "@/context/server-sdk"
 import { useSync } from "@/context/sync"
 import { useGlobal } from "@/context/global"

@@ -81,11 +82,11 @@ export function StatusPopoverV2(props: { scope?: "server" }) {

 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)
  const mcpIssue = createMemo(() => {
    const mcp = Object.values(sync().data.mcp ?? {})
@@ -10,7 +10,7 @@ import { matchKeybind, parseKeybind } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 import { useSDK } from "@/context/sdk"
-import { useServer } from "@/context/server"
+import { useServerSDK } from "@/context/server-sdk"
 import { terminalFontFamily, useSettings } from "@/context/settings"
 import type { LocalPTY } from "@/context/terminal"
 import { disposeIfDisposable, getHoveredLinkText, setOptionIfSupported } from "@/utils/runtime-adapters"
@@ -160,13 +160,15 @@ export const Terminal = (props: TerminalProps) => {
  const settings = useSettings()
  const theme = useTheme()
  const language = useLanguage()
-  const server = useServer()
+  // Terminal captures its connection for the PTY lifetime, so callers must key it per server/session.
+  const connection = useServerSDK()().server
  const directory = sdk().directory
  const client = sdk().client
  const url = sdk().url
-  const auth = server.current?.http
+  const auth = connection.http
  const username = auth?.username ?? "opencode"
  const password = auth?.password ?? ""
+  const authToken = connection.type === "http" ? connection.authToken : false
  const sameOrigin = new URL(url, location.href).origin === location.origin
  let container!: HTMLDivElement
  const [local, others] = splitProps(props, ["pty", "class", "classList", "autoFocus", "onConnect", "onConnectError"])
@@ -540,7 +542,7 @@ export const Terminal = (props: TerminalProps) => {
            sameOrigin,
            username,
            password,
-            authToken: server.current?.type === "http" ? server.current.authToken : false,
+            authToken,
          }),
        )
        socket.binaryType = "arraybuffer"
@@ -1,15 +1,19 @@
 import { describe, expect, test } from "bun:test"
+import type { ServerConnection } from "@/context/server"
 import { readSessionTabsRemovedDetail, SESSION_TABS_REMOVED_EVENT } from "./titlebar-session-events"

+const remote = "remote" as ServerConnection.Key
+
 describe("titlebar session events", () => {
  test("reads valid removed session tab details", () => {
    expect(
      readSessionTabsRemovedDetail(
        new CustomEvent(SESSION_TABS_REMOVED_EVENT, {
-          detail: { directory: "/tmp/project", sessionIDs: ["ses_1", "ses_2", 1] },
+          detail: { server: "remote", directory: "/tmp/project", sessionIDs: ["ses_1", "ses_2", 1] },
        }),
      ),
    ).toEqual({
+      server: remote,
      directory: "/tmp/project",
      sessionIDs: ["ses_1", "ses_2"],
    })
@@ -1,6 +1,9 @@
+import type { ServerConnection } from "@/context/server"
+
 export const SESSION_TABS_REMOVED_EVENT = "opencode:session-tabs-removed"

 export type SessionTabsRemovedDetail = {
+  server?: ServerConnection.Key
  directory: string
  sessionIDs: string[]
 }
@@ -18,11 +21,14 @@ export function readSessionTabsRemovedDetail(event: Event): SessionTabsRemovedDe
  if (!("sessionIDs" in detail)) 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:
+      "server" in detail && typeof detail.server === "string" ? (detail.server as ServerConnection.Key) : undefined,
    directory: detail.directory,
    sessionIDs,
  }
@@ -1,119 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { captureTabDragLayout, insertIndexFromVirtualLayout } from "./titlebar-tab-drag"
-import {
-  canOpenTabRename,
-  captureTabPointerDown,
-  canStartTabDrag,
-  createTabDragPreview,
-  forwardTabRef,
-  isPrimaryPointerPressed,
-  isTabCloseTarget,
-} from "./titlebar-tab-gesture"
-
-describe("titlebar tab drag", () => {
-  const layout = {
-    listLeft: 100,
-    dividerWidth: 13,
-    tabWidthById: new Map([
-      ["a", 40],
-      ["b", 40],
-      ["c", 40],
-      ["d", 40],
-    ]),
-  }
-
-  test("moves across multiple tabs from one pointer update", () => {
-    expect(insertIndexFromVirtualLayout(260, ["a", "b", "c", "d"], "a", 0, layout)).toBe(3)
-    expect(insertIndexFromVirtualLayout(90, ["a", "b", "c", "d"], "d", 3, layout)).toBe(0)
-  })
-
-  test("keeps the current index inside the left hysteresis deadband", () => {
-    expect(insertIndexFromVirtualLayout(146, ["a", "b", "c", "d"], "b", 1, layout)).toBe(1)
-  })
-
-  test("includes slot margins in captured divider width", () => {
-    const list = document.createElement("div")
-    const first = document.createElement("div")
-    const second = document.createElement("div")
-    const firstTab = document.createElement("div")
-    const secondTab = document.createElement("div")
-    first.dataset.titlebarTabSlot = ""
-    first.dataset.tabKey = "a"
-    second.dataset.titlebarTabSlot = ""
-    second.dataset.tabKey = "b"
-    second.style.marginLeft = "6px"
-    firstTab.dataset.titlebarTab = ""
-    secondTab.dataset.titlebarTab = ""
-    first.append(firstTab)
-    second.append(secondTab)
-    list.append(first, second)
-    document.body.append(list)
-    firstTab.getBoundingClientRect = () => ({ width: 40 }) as DOMRect
-    secondTab.getBoundingClientRect = () => ({ width: 40 }) as DOMRect
-    second.getBoundingClientRect = () => ({ width: 47 }) as DOMRect
-    list.getBoundingClientRect = () => ({ left: 100 }) as DOMRect
-
-    expect(captureTabDragLayout(list, ["a", "b"]).dividerWidth).toBe(13)
-    list.remove()
-  })
-})
-
-describe("titlebar tab gestures", () => {
-  test("excludes close controls from tab gestures", () => {
-    const close = document.createElement("div")
-    const button = document.createElement("button")
-    const link = document.createElement("a")
-    close.dataset.slot = "tab-close"
-    close.append(button)
-    expect(isTabCloseTarget(close)).toBe(true)
-    expect(isTabCloseTarget(button)).toBe(true)
-    expect(isTabCloseTarget(link)).toBe(false)
-  })
-
-  test("forwards component refs", () => {
-    const element = document.createElement("div")
-    let received: HTMLDivElement | undefined
-    forwardTabRef((value) => (received = value), element)
-    expect(received).toBe(element)
-  })
-
-  test("does not reopen rename while a save is pending", () => {
-    expect(canOpenTabRename(false, false, false)).toBe(true)
-    expect(canOpenTabRename(false, false, true)).toBe(false)
-  })
-
-  test("keeps the rendered tab content in the drag preview", () => {
-    const tab = document.createElement("div")
-    tab.innerHTML = '<span data-slot="project-avatar-slot"></span><span data-slot="tab-title">Session</span>'
-    const preview = createTabDragPreview(tab)
-    expect(preview.querySelector('[data-slot="project-avatar-slot"]')).not.toBeNull()
-    expect(preview.querySelector('[data-slot="tab-title"]')?.textContent).toBe("Session")
-  })
-
-  test("captures the grab offset before navigation scrolls the tab", () => {
-    const tab = document.createElement("div")
-    tab.getBoundingClientRect = () => ({ left: 80, top: 10, width: 120 }) as DOMRect
-
-    expect(captureTabPointerDown(tab, 100, 20)).toEqual({
-      startX: 100,
-      startY: 20,
-      grabOffsetX: 20,
-      grabOffsetY: 10,
-      width: 120,
-      element: tab,
-    })
-  })
-
-  test("detects when the primary pointer button was released outside the window", () => {
-    expect(isPrimaryPointerPressed(1)).toBe(true)
-    expect(isPrimaryPointerPressed(3)).toBe(true)
-    expect(isPrimaryPointerPressed(0)).toBe(false)
-    expect(isPrimaryPointerPressed(2)).toBe(false)
-  })
-
-  test("preserves native panning for touch pointers", () => {
-    expect(canStartTabDrag("mouse")).toBe(true)
-    expect(canStartTabDrag("pen")).toBe(true)
-    expect(canStartTabDrag("touch")).toBe(false)
-  })
-})
@@ -1,135 +0,0 @@
-export type TabDragLayout = {
-  tabWidthById: Map<string, number>
-  dividerWidth: number
-  listLeft: number
-}
-
-export const ACTIVATION_DISTANCE = 4
-export const HYSTERESIS_DEADBAND = 8
-export const AUTOSCROLL_EDGE = 24
-export const AUTOSCROLL_MAX_SPEED = 8
-export const FLOATER_OVERSHOOT_MAX = 8
-
-export function pointerDistance(x1: number, y1: number, x2: number, y2: number) {
-  const dx = x2 - x1
-  const dy = y2 - y1
-  return Math.sqrt(dx * dx + dy * dy)
-}
-
-export function captureTabDragLayout(list: HTMLElement, order: string[]) {
-  const tabWidthById = new Map<string, number>()
-  const slots = list.querySelectorAll<HTMLElement>("[data-titlebar-tab-slot]")
-  for (const slot of slots) {
-    const id = slot.dataset.tabKey
-    if (!id) continue
-    const tab = slot.querySelector<HTMLElement>("[data-titlebar-tab]")
-    if (!tab) continue
-    tabWidthById.set(id, tab.getBoundingClientRect().width)
-  }
-
-  let dividerWidth = 0
-  if (order.length >= 2) {
-    const secondId = order[1]
-    for (const slot of slots) {
-      if (slot.dataset.tabKey !== secondId) continue
-      const tab = slot.querySelector<HTMLElement>("[data-titlebar-tab]")
-      if (!tab) break
-      const style = getComputedStyle(slot)
-      dividerWidth =
-        slot.getBoundingClientRect().width -
-        tab.getBoundingClientRect().width +
-        (Number.parseFloat(style.marginLeft) || 0) +
-        (Number.parseFloat(style.marginRight) || 0)
-      break
-    }
-  }
-
-  return {
-    tabWidthById,
-    dividerWidth,
-    listLeft: list.getBoundingClientRect().left,
-  }
-}
-
-export function syncLayoutScroll(list: HTMLElement, layout: TabDragLayout) {
-  layout.listLeft = list.getBoundingClientRect().left
-}
-
-function slotWidthAt(order: readonly string[], index: number, layout: TabDragLayout) {
-  const id = order[index]
-  if (!id) return 0
-  const tabWidth = layout.tabWidthById.get(id) ?? 0
-  return index === 0 ? tabWidth : layout.dividerWidth + tabWidth
-}
-
-function slotLeft(order: readonly string[], index: number, layout: TabDragLayout) {
-  let left = layout.listLeft
-  for (let i = 0; i < index; i++) {
-    left += slotWidthAt(order, i, layout)
-  }
-  return left
-}
-
-export function insertIndexFromVirtualLayout(
-  pointerX: number,
-  order: readonly string[],
-  draggedId: string,
-  currentIndex: number,
-  layout: TabDragLayout,
-  deadband = HYSTERESIS_DEADBAND,
-) {
-  if (order.length === 0) return 0
-
-  const others = order.filter((id) => id !== draggedId)
-  let target = currentIndex
-
-  while (target > 0 && pointerX < slotLeft(others, target, layout) - deadband) target--
-  while (target < order.length - 1 && pointerX >= slotLeft(others, target + 1, layout)) target++
-
-  return target
-}
-
-export function movePlaceholder(order: readonly string[], draggedId: string, toIndex: number) {
-  const fromIndex = order.indexOf(draggedId)
-  if (fromIndex === -1 || fromIndex === toIndex) return [...order]
-  const next = [...order]
-  next.splice(toIndex, 0, ...next.splice(fromIndex, 1))
-  return next
-}
-
-export function draftOrderChanged(initial: readonly string[], final: readonly string[]) {
-  if (initial.length === 0 || final.length === 0 || initial.length !== final.length) return false
-  return final.some((key, index) => key !== initial[index])
-}
-
-function easeOvershoot(overshoot: number) {
-  return (FLOATER_OVERSHOOT_MAX * overshoot) / (overshoot + FLOATER_OVERSHOOT_MAX)
-}
-
-export function clampFloaterLeft(left: number, width: number, stripLeft: number, stripRight: number) {
-  const stripWidth = stripRight - stripLeft
-  if (width >= stripWidth) return stripLeft
-
-  const maxLeft = stripRight - width
-  if (left > maxLeft) return maxLeft + easeOvershoot(left - maxLeft)
-  if (left < stripLeft) return stripLeft - easeOvershoot(stripLeft - left)
-
-  return left
-}
-
-export function autoscrollSpeed(pointerX: number, containerLeft: number, containerRight: number) {
-  const leftEdge = containerLeft + AUTOSCROLL_EDGE
-  const rightEdge = containerRight - AUTOSCROLL_EDGE
-
-  if (pointerX < leftEdge) {
-    const depth = (leftEdge - pointerX) / AUTOSCROLL_EDGE
-    return -Math.ceil(AUTOSCROLL_MAX_SPEED * Math.min(depth, 1))
-  }
-
-  if (pointerX > rightEdge) {
-    const depth = (pointerX - rightEdge) / AUTOSCROLL_EDGE
-    return Math.ceil(AUTOSCROLL_MAX_SPEED * Math.min(depth, 1))
-  }
-
-  return 0
-}
@@ -0,0 +1,33 @@
+import { describe, expect, test } from "bun:test"
+import { canOpenTabRename, canStartTabDrag, forwardTabRef, isTabCloseTarget } from "./titlebar-tab-gesture"
+
+describe("titlebar tab gestures", () => {
+  test("excludes close controls from tab gestures", () => {
+    const close = document.createElement("div")
+    const button = document.createElement("button")
+    const link = document.createElement("a")
+    close.dataset.slot = "tab-close"
+    close.append(button)
+    expect(isTabCloseTarget(close)).toBe(true)
+    expect(isTabCloseTarget(button)).toBe(true)
+    expect(isTabCloseTarget(link)).toBe(false)
+  })
+
+  test("forwards component refs", () => {
+    const element = document.createElement("div")
+    let received: HTMLDivElement | undefined
+    forwardTabRef((value) => (received = value), element)
+    expect(received).toBe(element)
+  })
+
+  test("does not reopen rename while a save is pending", () => {
+    expect(canOpenTabRename(false, false, false)).toBe(true)
+    expect(canOpenTabRename(false, false, true)).toBe(false)
+  })
+
+  test("preserves native panning for touch pointers", () => {
+    expect(canStartTabDrag("mouse")).toBe(true)
+    expect(canStartTabDrag("pen")).toBe(true)
+    expect(canStartTabDrag("touch")).toBe(false)
+  })
+})
@@ -8,22 +8,6 @@ export function canStartTabDrag(pointerType: string) {
  return pointerType !== "touch"
 }

-export function isPrimaryPointerPressed(buttons: number) {
-  return (buttons & 1) !== 0
-}
-
-export function captureTabPointerDown(element: HTMLDivElement, clientX: number, clientY: number) {
-  const rect = element.getBoundingClientRect()
-  return {
-    startX: clientX,
-    startY: clientY,
-    grabOffsetX: clientX - rect.left,
-    grabOffsetY: clientY - rect.top,
-    width: rect.width,
-    element,
-  }
-}
-
 export function forwardTabRef(ref: Ref<HTMLDivElement> | undefined, element: HTMLDivElement) {
  if (typeof ref === "function") ref(element)
 }
@@ -31,7 +15,3 @@ export function forwardTabRef(ref: Ref<HTMLDivElement> | undefined, element: HTM
 export function canOpenTabRename(dragging: boolean | undefined, editing: boolean, committing: boolean) {
  return !dragging && !editing && !committing
 }
-
-export function createTabDragPreview(element: HTMLDivElement) {
-  return element.cloneNode(true) as HTMLDivElement
-}
@@ -1,14 +1,37 @@
 [data-titlebar-tab] [data-slot="tab-close"] {
  position: absolute;
-  top: 0;
-  right: 0;
+  top: 4px;
+  right: 4px;
  display: flex;
-  height: 28px;
-  width: 28px;
+  height: 20px;
+  width: 20px;
  align-items: center;
  justify-content: center;
 }

+[data-titlebar-tab][data-editing="true"] [data-slot="tab-close"] {
+  display: none;
+}
+
+[data-titlebar-tab-list] {
+  gap: 13.5px;
+}
+
+[data-titlebar-tab-slot] {
+  position: relative;
+}
+
+[data-titlebar-tab-slot]:not(:first-child)::before {
+  content: "";
+  position: absolute;
+  top: 8px;
+  left: -6.75px;
+  width: 1.5px;
+  height: 12px;
+  border-radius: 9999px;
+  background: var(--v2-background-bg-layer-02);
+}
+
 [data-titlebar-tab] [data-slot="tab-close"]::before {
  content: "";
  position: absolute;
@@ -31,19 +54,11 @@
  right: 100%;
 }

-[data-titlebar-tab] [data-slot="tab-link"] {
-  padding-right: 22px;
-}
-
 [data-titlebar-tab][data-title-overflow="true"]:not(:hover):not([data-active="true"]):not([data-editing="true"])
  [data-slot="tab-link"] {
  padding-right: 0;
 }

-[data-titlebar-tab][data-editing="true"] [data-slot="tab-link"] {
-  padding-right: 22px;
-}
-
 [data-titlebar-tab] [data-slot="tab-title"] {
  min-width: 0;
 }
@@ -62,8 +77,20 @@
  display: none;
 }

-[data-titlebar-tab]:hover [data-slot="tab-close"],
-[data-titlebar-tab][data-active="true"] [data-slot="tab-close"],
-[data-titlebar-tab][data-editing="true"] [data-slot="tab-close"] {
-  background: var(--tab-bg);
+@container (max-width: 64px) {
+  [data-titlebar-tab-link] {
+    justify-content: center;
+    gap: 0;
+    padding-inline: 0;
+  }
+
+  [data-titlebar-tab-title] {
+    display: none;
+  }
+
+  [data-slot="tab-close"] {
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 }
@@ -175,9 +175,10 @@ export function TabNavItem(props: {
        forwardTabRef(props.ref, el)
      }}
      data-titlebar-tab
+      data-slot="titlebar-tab-item"
      data-title-overflow={titleOverflowing()}
      data-editing={editing()}
-      class="group relative flex h-7 min-w-24 max-w-60 select-none flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[dragging='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[pressed='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[editing='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+      class="group relative flex h-7 w-full min-w-0 select-none flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [container-type:inline-size] [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] has-[>a:focus-visible]:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[dragging='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[pressed='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[editing='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
      classList={{ invisible: props.hidden }}
      data-active={props.active}
      data-dragging={props.dragging}
@@ -192,6 +193,7 @@ export function TabNavItem(props: {
          return (
            <a
              data-slot="tab-link"
+              data-titlebar-tab-link
              href={props.href}
              draggable={false}
              onDragStart={(event) => {
@@ -220,6 +222,7 @@ export function TabNavItem(props: {
                  titleEl.textContent = session().title
                }}
                data-slot="tab-title"
+                data-titlebar-tab-title
                class="min-w-0 flex-1 outline-none leading-4"
                classList={{
                  "overflow-hidden text-clip whitespace-nowrap": !editing(),
@@ -254,11 +257,11 @@ export function TabNavItem(props: {
        }}
      </Show>

-      <div data-slot="tab-close">
+      <div data-slot="tab-close" class="group-hover:bg-[var(--tab-bg)] group-data-[active=true]:bg-[var(--tab-bg)]">
        <IconButtonV2
          size="small"
          variant="ghost-muted"
-          class="relative z-10 opacity-0 group-hover:opacity-100 group-data-[active=true]:opacity-100 group-data-[editing=true]:opacity-100"
+          class="hover-reveal relative z-10 group-hover:opacity-100 group-data-[active=true]:opacity-100 group-data-[editing=true]:opacity-100"
          onPointerDown={(event) => {
            event.preventDefault()
            event.stopPropagation()
@@ -292,10 +295,11 @@ export function DraftTabItem(props: {
    <div
      ref={(el) => forwardTabRef(props.ref, el)}
      data-titlebar-tab
+      data-slot="titlebar-tab-item"
      data-active={props.active}
      data-dragging={props.dragging}
      data-pressed={props.pressed}
-      class="group relative shrink-0 flex h-7 max-w-60 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] bg-[var(--tab-bg)] pl-1.5 pr-8 whitespace-nowrap [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-overlay-simple-overlay-pressed)] data-[dragging='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[pressed='true']:[--tab-bg:var(--v2-background-bg-layer-02)] focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-[var(--v2-border-border-focus)]"
+      class="group relative flex h-7 w-full min-w-0 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] bg-[var(--tab-bg)] px-1.5 [container-type:inline-size] whitespace-nowrap [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] has-[>a:focus-visible]:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[dragging='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[pressed='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[editing='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
      classList={{ invisible: props.hidden }}
      onMouseDown={(event) => {
        if (event.button !== 1) return
@@ -304,6 +308,7 @@ export function DraftTabItem(props: {
    >
      <a
        data-slot="tab-link"
+        data-titlebar-tab-link
        href={props.href}
        draggable={false}
        onDragStart={(event) => {
@@ -315,14 +320,19 @@ export function DraftTabItem(props: {
          if (props.suppressNavigation?.()) return
          props.onNavigate()
        }}
-        class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 overflow-hidden text-[13px] font-medium leading-5 text-v2-text-text-faint group-data-[active='true']:text-[var(--v2-text-text-base)]"
+        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]"
      >
-        <span class="flex size-4 shrink-0 rotate-90 items-center justify-center">
+        <span class="flex size-4 shrink-0 items-center justify-center">
          <IconV2 name="edit" />
        </span>
-        <span class="truncate leading-5">{props.title}</span>
+        <span
+          data-titlebar-tab-title
+          class="min-w-0 flex-1 overflow-hidden text-clip whitespace-nowrap outline-none leading-4"
+        >
+          {props.title}
+        </span>
      </a>
-      <div data-slot="tab-close" class="absolute right-0 inset-y-0 flex w-7 items-center justify-center">
+      <div data-slot="tab-close" class="group-hover:bg-[var(--tab-bg)] group-data-[active=true]:bg-[var(--tab-bg)]">
        <IconButtonV2
          size="small"
          variant="ghost-muted"
@@ -334,6 +344,7 @@ export function DraftTabItem(props: {
            event.preventDefault()
            event.stopPropagation()
          }}
+          class="hover-reveal relative z-10 group-hover:opacity-100 group-data-[active=true]:opacity-100 group-data-[editing=true]:opacity-100"
          onClick={closeTab}
          icon={<IconV2 name="xmark-small" />}
          aria-label="Close tab"
@@ -1,18 +1,11 @@
-import {
-  createEffect,
-  createMemo,
-  createResource,
-  createRoot,
-  createSignal,
-  For,
-  onCleanup,
-  onMount,
-  Show,
-} from "solid-js"
-import { Portal } from "solid-js/web"
-import { createStore } from "solid-js/store"
-import { makeEventListener } from "@solid-primitives/event-listener"
+import { createEffect, createMemo, createResource, createRoot, For, onCleanup, onMount } from "solid-js"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
+import { DragDropProvider, PointerSensor } from "@dnd-kit/solid"
+import { isSortable, useSortable } from "@dnd-kit/solid/sortable"
+import { Accessibility, AutoScroller, Feedback, PointerActivationConstraints } from "@dnd-kit/dom"
+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/server"
 import { DraftTabItem, TabNavItem } from "@/components/titlebar-tab-nav"
@@ -22,43 +15,30 @@ import { useCommand } from "@/context/command"
 import { useTabs } from "@/context/tabs"
 import { createTabPromptState } from "@/context/prompt"
 import { base64Encode } from "@opencode-ai/core/util/encode"
-import {
-  captureTabPointerDown,
-  canStartTabDrag,
-  createTabDragPreview,
-  isPrimaryPointerPressed,
-  isTabCloseTarget,
-} from "./titlebar-tab-gesture"
-import {
-  ACTIVATION_DISTANCE,
-  autoscrollSpeed,
-  captureTabDragLayout,
-  clampFloaterLeft,
-  draftOrderChanged,
-  insertIndexFromVirtualLayout,
-  movePlaceholder,
-  pointerDistance,
-  syncLayoutScroll,
-  type TabDragLayout,
-} from "@/components/titlebar-tab-drag"
+import { canStartTabDrag, isTabCloseTarget } from "./titlebar-tab-gesture"
+
+const sortableTransition = { duration: 0 }

 function SessionTabSlot(props: {
  tab: SessionTab
  id: string
-  first: () => boolean
+  index: () => number
  active: () => boolean
  activeServerKey: ServerConnection.Key
  forceTruncate: boolean
-  dragActive: boolean
-  dragged: () => boolean
-  pressed: () => boolean
  serverCtx: () => ServerCtx | undefined
-  suppressNavigation: () => boolean
-  onPointerDown: (event: PointerEvent) => void
  onNavigate: (element: HTMLDivElement) => void
  onClose: () => void
 }) {
  const tabs = useTabs()
+  const sortable = useSortable({
+    get id() {
+      return props.id
+    },
+    get index() {
+      return props.index()
+    },
+  })
  let ref!: HTMLDivElement
  const sdk = createMemo(() => props.serverCtx()?.sdk ?? null)
  const cachedSession = createMemo(() => props.serverCtx()?.sync.session.peek(props.tab.sessionId))
@@ -102,18 +82,16 @@ function SessionTabSlot(props: {

  return (
    <div
+      ref={sortable.ref}
      data-titlebar-tab-slot
      data-tab-key={props.id}
-      class="flex shrink-0"
-      classList={{
-        hidden: !session(),
-        "ml-1.5 border-l border-[var(--v2-background-bg-layer-02)] pl-1.5": !props.first(),
-        "pointer-events-none": props.dragActive,
-      }}
-      onPointerDown={props.onPointerDown}
+      class="relative flex w-56 min-w-7 max-w-56 flex-shrink"
+      classList={{ hidden: !session() }}
    >
      <TabNavItem
-        ref={ref}
+        ref={(el) => {
+          ref = el
+        }}
        href={tabHref(props.tab)}
        server={props.tab.server}
        session={session}
@@ -132,9 +110,48 @@ function SessionTabSlot(props: {
        active={props.active()}
        activeServer={props.tab.server === props.activeServerKey}
        forceTruncate={props.forceTruncate}
-        suppressNavigation={props.suppressNavigation}
-        pressed={props.pressed()}
-        hidden={props.dragged()}
+        dragging={sortable.isDragSource()}
+      />
+    </div>
+  )
+}
+
+function DraftTabSlot(props: {
+  tab: Extract<Tab, { type: "draft" }>
+  id: string
+  index: () => number
+  active: () => boolean
+  title: string
+  onNavigate: (element: HTMLDivElement) => void
+  onClose: () => void
+}) {
+  const sortable = useSortable({
+    get id() {
+      return props.id
+    },
+    get index() {
+      return props.index()
+    },
+  })
+  let ref!: HTMLDivElement
+
+  return (
+    <div
+      ref={sortable.ref}
+      data-titlebar-tab-slot
+      data-tab-key={props.id}
+      class="relative flex w-56 min-w-7 max-w-56 flex-shrink"
+    >
+      <DraftTabItem
+        ref={(el) => {
+          ref = el
+        }}
+        href={tabHref(props.tab)}
+        title={props.title}
+        onNavigate={() => props.onNavigate(ref)}
+        onClose={props.onClose}
+        active={props.active()}
+        dragging={sortable.isDragSource()}
      />
    </div>
  )
@@ -152,52 +169,12 @@ export function TitlebarTabStrip(props: {
 }) {
  const global = useGlobal()
  const language = useLanguage()
-  const [drag, setDrag] = createStore({
-    active: false,
-    draggedId: undefined as string | undefined,
-    placeholderIndex: 0,
-    draftOrder: [] as string[],
-    initialOrder: [] as string[],
-    draggedWidth: 0,
-    pointerX: 0,
-    grabOffsetX: 0,
-    floaterTop: 0,
-  })
-
-  const [gesture, setGesture] = createStore({
-    pending: undefined as
-      | {
-          id: string
-          startX: number
-          startY: number
-          grabOffsetX: number
-          grabOffsetY: number
-          pointerId: number
-          width: number
-          element: HTMLDivElement
-        }
-      | undefined,
-  })
-
-  const [suppressNavigation, setSuppressNavigation] = createSignal(false)
-  const [pressedId, setPressedId] = createSignal<string | undefined>()
-  const [stripScrollLeft, setStripScrollLeft] = createSignal(0)
  let scrollRef!: HTMLDivElement
  let listRef!: HTMLDivElement
-  let dragLayout: TabDragLayout | undefined
-  let dragPointerId: number | undefined
-  let autoscrollFrame: number | undefined
  let resizeFrame: number | undefined
-  let dragPreview: HTMLDivElement | undefined

  const tabIds = () => props.tabs.map(tabKey)

-  const displayTabs = createMemo(() => {
-    if (!drag.active || drag.draftOrder.length === 0) return props.tabs
-    const byKey = new Map(props.tabs.map((tab) => [tabKey(tab), tab]))
-    return drag.draftOrder.map((key) => byKey.get(key)).filter((tab): tab is Tab => !!tab)
-  })
-
  function refreshOverflow() {
    if (!scrollRef) return
    props.onOverflowChange(scrollRef.scrollWidth > scrollRef.clientWidth)
@@ -210,217 +187,14 @@ export function TitlebarTabStrip(props: {
      resizeFrame = requestAnimationFrame(() => {
        resizeFrame = undefined
        refreshOverflow()
-        if (!drag.active || !listRef) return
-        dragLayout = captureTabDragLayout(listRef, drag.draftOrder)
-        updateInsertIndex()
      })
    },
  )

-  function syncScroll() {
-    if (!scrollRef || !listRef || !dragLayout) return
-    syncLayoutScroll(listRef, dragLayout)
-    setStripScrollLeft(scrollRef.scrollLeft)
-    updateInsertIndex()
-  }
-
-  function stopAutoscroll() {
-    if (autoscrollFrame === undefined) return
-    cancelAnimationFrame(autoscrollFrame)
-    autoscrollFrame = undefined
-  }
-
-  function tickAutoscroll() {
-    if (!drag.active || !scrollRef) return
-
-    const strip = scrollRef.getBoundingClientRect()
-    const speed = autoscrollSpeed(drag.pointerX, strip.left, strip.right)
-
-    if (speed !== 0) {
-      scrollRef.scrollLeft += speed
-      syncScroll()
-    }
-
-    autoscrollFrame = requestAnimationFrame(tickAutoscroll)
-  }
-
-  function startAutoscroll() {
-    stopAutoscroll()
-    autoscrollFrame = requestAnimationFrame(tickAutoscroll)
-  }
-
-  function applyPlaceholderIndex(nextIndex: number) {
-    const id = drag.draggedId
-    if (!id) return
-    const next = movePlaceholder(drag.draftOrder, id, nextIndex)
-    setDrag({
-      draftOrder: next,
-      placeholderIndex: nextIndex,
-    })
-  }
-
-  function updateInsertIndex() {
-    if (!drag.active || !dragLayout) return
-    const draggedId = drag.draggedId
-    if (!draggedId) return
-    const nextIndex = insertIndexFromVirtualLayout(
-      drag.pointerX,
-      drag.draftOrder,
-      draggedId,
-      drag.placeholderIndex,
-      dragLayout,
-    )
-    if (nextIndex === drag.placeholderIndex) return
-    applyPlaceholderIndex(nextIndex)
-  }
-
-  function startDrag(id: string) {
-    const order = tabIds()
-    const index = order.indexOf(id)
-    const pending = gesture.pending
-    if (index === -1 || !pending || !listRef || !scrollRef) return
-
-    dragLayout = captureTabDragLayout(listRef, order)
-    dragPreview = createTabDragPreview(pending.element)
-    dragPointerId = pending.pointerId
-    setGesture("pending", undefined)
-
-    setDrag({
-      active: true,
-      draggedId: id,
-      placeholderIndex: index,
-      draftOrder: order,
-      initialOrder: order,
-      draggedWidth: pending.width,
-      pointerX: pending.startX,
-      grabOffsetX: pending.grabOffsetX,
-      floaterTop: pending.startY - pending.grabOffsetY,
-    })
-    setPressedId(undefined)
-    setStripScrollLeft(scrollRef.scrollLeft)
-    startAutoscroll()
-  }
-
-  function endDrag(commit: boolean) {
-    const initial = drag.initialOrder
-    const final = drag.draftOrder
-    const moved = drag.active
-
-    if (commit && moved && draftOrderChanged(initial, final)) {
-      props.onReorder(final)
-    }
-
-    if (moved) setSuppressNavigation(true)
-
-    setDrag({
-      active: false,
-      draggedId: undefined,
-      placeholderIndex: 0,
-      draftOrder: [],
-      initialOrder: [],
-      draggedWidth: 0,
-      pointerX: 0,
-      grabOffsetX: 0,
-      floaterTop: 0,
-    })
-
-    dragLayout = undefined
-    dragPreview = undefined
-    dragPointerId = undefined
-    setGesture("pending", undefined)
-    setPressedId(undefined)
-    stopAutoscroll()
-    refreshOverflow()
-    requestAnimationFrame(() => setSuppressNavigation(false))
-  }
-
-  function onPointerDown(id: string, event: PointerEvent) {
-    if (event.button !== 0 || drag.active) return
-    if (!canStartTabDrag(event.pointerType)) return
-    if (isTabCloseTarget(event.target)) return
-    const tabEl = (event.currentTarget as HTMLElement).querySelector<HTMLDivElement>("[data-titlebar-tab]")
-    if (!tabEl) return
-    if (!tabEl.querySelector('[data-slot="tab-link"]')) return
-    const tab = props.tabs.find((item) => tabKey(item) === id)
-    if (!tab) return
-    const pointer = captureTabPointerDown(tabEl, event.clientX, event.clientY)
-    setSuppressNavigation(true)
-    props.onNavigate(tab, tabEl)
-    setPressedId(id)
-    setGesture("pending", {
-      id,
-      pointerId: event.pointerId,
-      ...pointer,
-    })
-  }
-
-  function onPointerMove(event: PointerEvent) {
-    const pending = gesture.pending
-    if (pending && event.pointerId !== pending.pointerId) return
-    if (drag.active && dragPointerId !== undefined && event.pointerId !== dragPointerId) return
-    if (!isPrimaryPointerPressed(event.buttons)) {
-      if (drag.active) endDrag(true)
-      if (pending) {
-        setGesture("pending", undefined)
-        setPressedId(undefined)
-        requestAnimationFrame(() => setSuppressNavigation(false))
-      }
-      return
-    }
-
-    if (pending && !drag.active) {
-      if (pointerDistance(pending.startX, pending.startY, event.clientX, event.clientY) < ACTIVATION_DISTANCE) return
-      startDrag(pending.id)
-    }
-
-    if (!drag.active) return
-
-    setDrag("pointerX", event.clientX)
-    syncScroll()
-  }
-
-  function onPointerUp(event: PointerEvent) {
-    if (drag.active) {
-      if (dragPointerId !== undefined && event.pointerId !== dragPointerId) return
-      setDrag("pointerX", event.clientX)
-      syncScroll()
-      endDrag(true)
-      return
-    }
-
-    const pending = gesture.pending
-    if (pending && event.pointerId !== pending.pointerId) return
-
-    setGesture("pending", undefined)
-    setPressedId(undefined)
-    requestAnimationFrame(() => setSuppressNavigation(false))
-  }
-
-  function onPointerCancel(event: PointerEvent) {
-    if (drag.active) {
-      if (dragPointerId !== undefined && event.pointerId !== dragPointerId) return
-      endDrag(false)
-      return
-    }
-
-    if (!gesture.pending) return
-    if (gesture.pending.pointerId !== event.pointerId) return
-    setGesture("pending", undefined)
-    setPressedId(undefined)
-    requestAnimationFrame(() => setSuppressNavigation(false))
-  }
-
  onMount(() => {
-    const cleanups = [
-      makeEventListener(window, "pointermove", onPointerMove),
-      makeEventListener(window, "pointerup", onPointerUp),
-      makeEventListener(window, "pointercancel", onPointerCancel),
-    ]
    refreshOverflow()
-    onCleanup(() => cleanups.forEach((cleanup) => cleanup()))
  })

-  onCleanup(stopAutoscroll)
  onCleanup(() => {
    if (resizeFrame !== undefined) cancelAnimationFrame(resizeFrame)
  })
@@ -431,51 +205,54 @@ export function TitlebarTabStrip(props: {
    refreshOverflow()
  })

-  createEffect(() => {
-    if (!drag.active || !scrollRef) return
-    onCleanup(makeEventListener(scrollRef, "scroll", syncScroll))
-  })
-
-  const floaterStyle = () => {
-    stripScrollLeft()
-    const strip = scrollRef?.getBoundingClientRect()
-    const left = strip
-      ? clampFloaterLeft(drag.pointerX - drag.grabOffsetX, drag.draggedWidth, strip.left, strip.right)
-      : drag.pointerX - drag.grabOffsetX
-
-    return {
-      position: "fixed" as const,
-      top: `${drag.floaterTop}px`,
-      left: `${left}px`,
-      width: `${drag.draggedWidth}px`,
-      "z-index": "10000",
-      "pointer-events": "none" as const,
-    }
-  }
-
-  const draggedTab = createMemo(() => {
-    const id = drag.draggedId
-    if (!id) return
-    return props.tabs.find((tab) => tabKey(tab) === id)
-  })
-
  return (
-    <>
-      <div data-slot="titlebar-tabs" class="relative min-w-0">
-        <div
-          data-slot="titlebar-tabs-scroll"
-          class="flex min-w-0 flex-row items-center gap-1.5 overflow-x-auto no-scrollbar [app-region:no-drag]"
-          ref={scrollRef}
+    <div data-slot="titlebar-tabs" class="relative min-w-0">
+      <div
+        data-slot="titlebar-tabs-scroll"
+        class="flex min-w-0 flex-row items-center gap-1.5 overflow-x-auto no-scrollbar [app-region:no-drag]"
+        ref={scrollRef}
+      >
+        <DragDropProvider
+          sensors={[
+            PointerSensor.configure({
+              activationConstraints: [new PointerActivationConstraints.Distance({ value: 4 })],
+              preventActivation: (event) =>
+                !canStartTabDrag(event.pointerType) ||
+                isTabCloseTarget(event.target) ||
+                (event.target instanceof Element && !!event.target.closest('[contenteditable="true"]')),
+            }),
+          ]}
+          modifiers={[RestrictToHorizontalAxis, RestrictToElement.configure({ element: () => listRef })]}
+          plugins={(defaults) => [
+            ...defaults.filter((plugin) => plugin !== Accessibility),
+            AutoScroller.configure({ acceleration: 8, threshold: { x: 0.05, y: 0 } }),
+            Feedback.configure({ dropAnimation: null }),
+          ]}
+          onDragStart={(event) => {
+            const source = event.operation.source
+            if (!source) return
+            const tab = props.tabs.find((item) => tabKey(item) === source.id.toString())
+            if (!tab) return
+            const tabEl = source.element?.querySelector<HTMLDivElement>("[data-titlebar-tab]")
+            props.onNavigate(tab, tabEl ?? undefined)
+          }}
+          onDragEnd={(event) => {
+            const current = tabIds()
+            const source = event.operation.source
+            if (event.canceled || !isSortable(source)) return
+
+            const { initialIndex, index } = source
+            if (initialIndex !== index) {
+              props.onReorder(arrayMove(current, source.initialIndex, source.index))
+            }
+          }}
        >
-          <div class="flex min-w-0 flex-row items-center" ref={listRef}>
-            <For each={displayTabs()}>
+          <div data-titlebar-tab-list class="flex w-full min-w-0 flex-row items-center" ref={listRef}>
+            <For each={props.tabs}>
              {(tab, index) => {
                const id = tabKey(tab)
-                const first = () => index() === 0
                let ref!: HTMLDivElement
                useTabShortcut(index, () => props.onNavigate(tab, ref))
-
-                const dragged = () => drag.active && drag.draggedId === id
                const serverCtx = createMemo(() => {
                  if (tab.type !== "session") return
                  const conn = global.servers.list().find((item) => ServerConnection.key(item) === tab.server)
@@ -487,77 +264,50 @@ export function TitlebarTabStrip(props: {
                    <SessionTabSlot
                      tab={tab}
                      id={id}
-                      first={first}
+                      index={index}
                      active={() => props.currentTab() === tab}
                      activeServerKey={props.activeServerKey}
                      forceTruncate={props.forceTruncate}
-                      dragActive={drag.active}
-                      dragged={dragged}
-                      pressed={() => pressedId() === id}
                      serverCtx={serverCtx}
-                      suppressNavigation={() => suppressNavigation()}
-                      onPointerDown={(event) => {
-                        if (dragged()) return
-                        onPointerDown(id, event)
+                      onNavigate={(element) => {
+                        ref = element
+                        props.onNavigate(tab, element)
                      }}
-                      onNavigate={(element) => props.onNavigate(tab, element)}
                      onClose={() => props.onClose(tab)}
                    />
                  )
                }

                return (
-                  <div
-                    data-titlebar-tab-slot
-                    data-tab-key={id}
-                    class="flex shrink-0"
-                    classList={{
-                      "ml-1.5 border-l border-[var(--v2-background-bg-layer-02)] pl-1.5": !first(),
-                      "pointer-events-none": drag.active,
+                  <DraftTabSlot
+                    tab={tab}
+                    id={id}
+                    index={index}
+                    active={() => props.currentTab() === tab}
+                    title={language.t("command.session.new")}
+                    onNavigate={(element) => {
+                      ref = element
+                      props.onNavigate(tab, element)
                    }}
-                    onPointerDown={(event) => {
-                      if (dragged()) return
-                      onPointerDown(id, event)
-                    }}
-                  >
-                    <DraftTabItem
-                      ref={ref}
-                      href={tabHref(tab)}
-                      title={language.t("command.session.new")}
-                      onNavigate={() => props.onNavigate(tab, ref)}
-                      onClose={() => props.onClose(tab)}
-                      suppressNavigation={() => suppressNavigation()}
-                      active={props.currentTab() === tab}
-                      pressed={pressedId() === id}
-                      hidden={dragged()}
-                    />
-                  </div>
+                    onClose={() => props.onClose(tab)}
+                  />
                )
              }}
            </For>
          </div>
-        </div>
-        <div
-          data-slot="titlebar-tabs-fade-left"
-          aria-hidden="true"
-          class="pointer-events-none absolute inset-y-0 left-0 z-10 w-6 bg-[linear-gradient(to_right,var(--v2-background-bg-deep),transparent)]"
-        />
-        <div
-          data-slot="titlebar-tabs-fade-right"
-          aria-hidden="true"
-          class="pointer-events-none absolute inset-y-0 right-0 z-10 w-6 bg-[linear-gradient(to_left,var(--v2-background-bg-deep),transparent)]"
-        />
+        </DragDropProvider>
      </div>
-      <Show when={drag.active && draggedTab() && dragPreview}>
-        {(_) => (
-          <Portal>
-            <div data-titlebar-tab-preview style={floaterStyle()}>
-              {dragPreview}
-            </div>
-          </Portal>
-        )}
-      </Show>
-    </>
+      <div
+        data-slot="titlebar-tabs-fade-left"
+        aria-hidden="true"
+        class="pointer-events-none absolute inset-y-0 left-0 z-10 w-6 bg-[linear-gradient(to_right,var(--v2-background-bg-deep),transparent)]"
+      />
+      <div
+        data-slot="titlebar-tabs-fade-right"
+        aria-hidden="true"
+        class="pointer-events-none absolute inset-y-0 right-0 z-10 w-6 bg-[linear-gradient(to_left,var(--v2-background-bg-deep),transparent)]"
+      />
+    </div>
  )
 }

@@ -1,3 +1,34 @@
+[data-slot="titlebar-tab-item"] {
+  user-select: none;
+}
+
+[data-slot="titlebar-tab-item"] a {
+  outline: none;
+}
+
+[data-slot="titlebar-v2"]
+  [data-component="icon-button-v2"][data-variant="ghost-muted"]:is(:focus-visible, [data-state="focus"]):not(
+    :disabled
+  ) {
+  outline: none;
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-slot="titlebar-tab-item"]
+  [data-component="icon-button-v2"]:is(:focus-visible, [data-state="focus"]):not(:disabled) {
+  opacity: 1;
+}
+
+[data-slot="titlebar-tab-item"]:has([data-component="icon-button-v2"]:focus-visible) [data-slot="titlebar-tab-close"] {
+  right: 0;
+  left: auto;
+}
+
+[data-slot="titlebar-tab-item"]:has([data-component="icon-button-v2"]:focus-visible)
+  [data-slot="titlebar-tab-close-fade"] {
+  background-image: var(--active-bg);
+}
+
@keyframes titlebar-tab-fade-left {
  from {
    visibility: hidden;
@@ -26,6 +26,7 @@ import { useGlobal } from "@/context/global"
 import { ServerConnection, useServer } from "@/context/server"
 import { tabKey, useTabs } from "@/context/tabs"
 import "./titlebar.css"
+import { newTabTooltipKeybind } from "./command-tooltip-keybind"

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

  return (
    <header
+      data-slot={useV2Titlebar() ? "titlebar-v2" : undefined}
      classList={{
        "shrink-0 relative flex flex-row": true,
        "h-9 bg-v2-background-bg-deep overflow-visible": useV2Titlebar(),
@@ -317,6 +319,12 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                return
              }

+              const activeTab = currentTab()
+              if (activeTab?.type === "draft") {
+                tabs.newDraft({ server: activeTab.server, directory: activeTab.directory }, "")
+                return
+              }
+
              const current = layout.projects.list()[0]
              if (current) {
                tabs.newDraft({ server: server.key, directory: current.worktree }, "")
@@ -370,7 +378,7 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                  id: `tab.prev`,
                  category: "tab",
                  title: "",
-                  keybind: `mod+option+ArrowLeft`,
+                  keybind: `mod+option+ArrowLeft,ctrl+shift+tab`,
                  hidden: true,
                  onSelect: () => {
                    let index = tabsStore.findIndex((tab) => tab === currentTab())
@@ -387,7 +395,7 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                  id: `tab.next`,
                  category: "tab",
                  title: "",
-                  keybind: `mod+option+ArrowRight`,
+                  keybind: `mod+option+ArrowRight,ctrl+tab`,
                  hidden: true,
                  onSelect: () => {
                    let index = tabsStore.findIndex((tab) => tab === currentTab())
@@ -459,15 +467,25 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                  onReorder={(keys) => tabsStoreActions.reorder(keys)}
                />
                <Show when={!(creating() && params.dir)}>
-                  <IconButtonV2
-                    type="button"
-                    variant="ghost-muted"
-                    size="large"
-                    class="shrink-0"
-                    icon={<IconV2 name="plus" />}
-                    onClick={openNewTab}
-                    aria-label={language.t("command.session.new")}
-                  />
+                  <TooltipV2
+                    placement="bottom"
+                    value={
+                      <>
+                        {language.t("command.session.new")}
+                        <KeybindV2 keys={newTabTooltipKeybind(command)} variant="neutral" />
+                      </>
+                    }
+                  >
+                    <IconButtonV2
+                      type="button"
+                      variant="ghost-muted"
+                      size="large"
+                      class="shrink-0"
+                      icon={<IconV2 name="plus" />}
+                      onClick={openNewTab}
+                      aria-label={language.t("command.session.new")}
+                    />
+                  </TooltipV2>
                </Show>
                <div class="flex-1" />
                <TitlebarV2Right state={v2RightState()} />
@@ -555,7 +573,6 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                        >
                          <Button
                            variant="ghost"
-                            icon={creating() ? "new-session-active" : "new-session"}
                            class="titlebar-icon w-8 h-6 p-0 box-border"
                            disabled={layout.sidebar.opened()}
                            tabIndex={layout.sidebar.opened() ? -1 : undefined}
@@ -565,7 +582,9 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                            }}
                            aria-label={language.t("command.session.new")}
                            aria-current={creating() ? "page" : undefined}
-                          />
+                          >
+                            <IconV2 name="edit" size="small" />
+                          </Button>
                        </TooltipKeybind>
                      </div>
                    </div>
@@ -663,16 +682,16 @@ function TitlebarV2Right(props: { state: TitlebarV2RightState }) {

 function TitlebarUpdateIconButton(props: { state: TitlebarUpdatePillState }) {
  return (
-    <div class="relative isolate mr-3 size-5 shrink-0">
+    <div class="group relative mr-3 h-5 w-5 shrink-0 rounded-full bg-v2-background-bg-deep transition-[width] duration-150 ease-out hover:z-30 hover:w-[68px] focus-within:z-30 focus-within:w-[68px] motion-reduce:transition-none">
      <button
        type="button"
-        class="group absolute right-0 top-0 z-10 flex h-5 w-5 items-center justify-end overflow-hidden rounded-full bg-v2-icon-icon-accent/20 text-v2-icon-icon-accent transition-[width,background-color] duration-150 ease-out hover:z-30 hover:w-[68px] hover:bg-[color-mix(in_srgb,var(--v2-icon-icon-accent)_20%,var(--v2-background-bg-deep))] focus-visible:z-30 focus-visible:w-[68px] focus-visible:bg-[color-mix(in_srgb,var(--v2-icon-icon-accent)_20%,var(--v2-background-bg-deep))] focus-visible:outline-none disabled:opacity-60 motion-reduce:transition-none"
+        class="absolute right-0 top-0 z-10 flex h-5 w-5 items-center justify-end overflow-hidden rounded-full bg-v2-icon-icon-accent/20 text-v2-icon-icon-accent transition-[width,background-color] duration-150 ease-out group-hover:w-[68px] group-hover:bg-[color-mix(in_srgb,var(--v2-icon-icon-accent)_20%,var(--v2-background-bg-deep))] group-focus-within:w-[68px] group-focus-within:bg-[color-mix(in_srgb,var(--v2-icon-icon-accent)_20%,var(--v2-background-bg-deep))] focus-visible:outline-none disabled:opacity-60 motion-reduce:transition-none"
        onClick={props.state.onInstall}
        disabled={props.state.installing}
        aria-busy={props.state.installing}
        aria-label={props.state.ariaLabel}
      >
-        <span class="shrink-0 ml-[8px] mr-px text-[11px] text-v2-text-text-accent [font-weight:530] opacity-0 translate-x-2 motion-safe:transition-all duration-150 ease-out group-hover:opacity-100 group-hover:translate-x-0 group-focus-visible:opacity-100 group-focus-visible:translate-x-0 motion-reduce:translate-x-0">
+        <span class="shrink-0 ml-[8px] mr-px text-[11px] text-v2-text-text-accent [font-weight:530] opacity-0 translate-x-2 motion-safe:transition-all duration-150 ease-out group-hover:opacity-100 group-hover:translate-x-0 group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:translate-x-0">
          Update
        </span>
        <span class="flex size-5 shrink-0 items-center justify-center">
@@ -227,6 +227,11 @@ export function formatKeybind(config: string, t?: (key: KeyLabel) => string): st
  return IS_MAC ? parts.join("") : parts.join("+")
 }

+// KeybindV2 takes an array instead of a string
+export function formatKeybindKeys(config: string, t?: (key: KeyLabel) => string): string[] {
+  return formatKeybindParts(config, t)
+}
+
 function isEditableTarget(target: EventTarget | null) {
  if (!(target instanceof HTMLElement)) return false
  if (target.isContentEditable) return true
@@ -1,4 +1,4 @@
-import { createStore, produce } from "solid-js/store"
+import { createStore, produce, reconcile } from "solid-js/store"
 import { batch, createEffect, createMemo, onCleanup, onMount, type Accessor } from "solid-js"
 import { useLocation } from "@solidjs/router"
 import { createSimpleContext } from "@opencode-ai/ui/context"
@@ -17,6 +17,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"

 export { createSessionKeyReader, ensureSessionKey, pruneSessionKeys }

@@ -73,6 +74,7 @@ type TabHandoff = {
 }

 export type LocalProject = Partial<Project> & { worktree: string; expanded: boolean }
+export type HomeProjectSelection = { server: ServerConnection.Key; directory?: string }

 export type ReviewDiffStyle = "unified" | "split"

@@ -158,12 +160,17 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
    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 }
    })

@@ -290,6 +297,9 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
        handoff: {
          tabs: undefined as TabHandoff | undefined,
        },
+        home: {
+          selection: { server: server.key } as HomeProjectSelection,
+        },
      }),
    )

@@ -579,6 +589,12 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
    return {
      route,
      ready,
+      home: {
+        selection: createMemo(() => store.home.selection),
+        setSelection(selection: HomeProjectSelection) {
+          setStore("home", "selection", reconcile(selection))
+        },
+      },
      handoff: {
        tabs: createMemo(() => store.handoff?.tabs),
        setTabs(dir: string, id: string) {
@@ -1,4 +1,4 @@
-import { type Accessor, createMemo } from "solid-js"
+import { type Accessor, createMemo, createResource } from "solid-js"
 import { createStore } from "solid-js/store"
 import { DateTime } from "luxon"
 import { filter, firstBy, flat, groupBy, mapValues, pipe, uniqueBy, values } from "remeda"
@@ -145,6 +145,15 @@ export const { use: useModels, provider: ModelsProvider } = createSimpleContext(
      setStore("variant", key, value)
    }

+    const [recentModels] = createResource(
+      async () => {
+        const recent = store.recent
+        await ready.promise
+        return recent
+      },
+      (p) => p,
+      { initialValue: [] },
+    )
    return {
      ready,
      list,
@@ -152,7 +161,7 @@ export const { use: useModels, provider: ModelsProvider } = createSimpleContext(
      visible,
      setVisibility,
      recent: {
-        list: createMemo(() => store.recent),
+        list: () => recentModels()!,
        push,
      },
      variant: {
@@ -1,9 +1,9 @@
 import { createStore, reconcile } from "solid-js/store"
-import { type Accessor, batch, createEffect, createMemo, onCleanup } from "solid-js"
-import { useParams } from "@solidjs/router"
+import { type Accessor, batch, createEffect, createMemo, createRoot, getOwner, onCleanup } from "solid-js"
+import { useParams, useSearchParams } from "@solidjs/router"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { useServerSDK } from "./server-sdk"
-import { useServerSync } from "./server-sync"
+import type { ServerSDK } from "./server-sdk"
+import type { ServerSync } from "./server-sync"
 import { usePlatform } from "@/context/platform"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
@@ -12,6 +12,11 @@ import { decode64 } from "@/utils/base64"
 import { EventSessionError } from "@opencode-ai/sdk/v2"
 import { Persist, persisted } from "@/utils/persist"
 import { playSoundById } from "@/utils/sound"
+import { useGlobal } from "./global"
+import { ServerConnection, useServer } from "./server"
+import { type DraftTab, useTabs } from "./tabs"
+import { requireServerKey } from "@/utils/session-route"
+import type { ServerScope } from "@/utils/server-scope"

 type NotificationBase = {
  directory?: string
@@ -107,267 +112,360 @@ function buildNotificationIndex(list: Notification[]) {
 export const { use: useNotification, provider: NotificationProvider } = createSimpleContext({
  name: "Notification",
  gate: false,
-  init: (props: { directory?: Accessor<string | undefined>; sessionID?: Accessor<string | undefined> }) => {
-    const params = useParams()
-    const serverSDK = useServerSDK()
-    const serverSync = useServerSync()
+  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 platform = usePlatform()
    const settings = useSettings()
    const language = useLanguage()
+    const owner = getOwner()
+    const states = new Map<ServerScope, { dispose: () => void; state: NotificationState }>()

-    const empty: Notification[] = []
-
-    const currentDirectory = createMemo(() => {
-      return props.directory?.() ?? decode64(params.dir)
+    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 currentSession = createMemo(() => props.sessionID?.() ?? params.id)
-
-    const [store, setStore, _, ready] = persisted(
-      Persist.serverGlobal(serverSDK().scope, "notification", ["notification.v1"]),
-      createStore({
-        list: [] as Notification[],
-      }),
-    )
-    const [index, setIndex] = createStore<NotificationIndex>(buildNotificationIndex(store.list))
-
-    const meta = { pruned: false, disposed: false }
-
-    const updateUnseen = (scope: "session" | "project", key: string, unseen: Notification[]) => {
-      setIndex(scope, "unseen", key, unseen)
-      setIndex(scope, "unseenCount", key, unseen.length)
-      setIndex(
-        scope,
-        "unseenHasError",
-        key,
-        unseen.some((notification) => notification.type === "error"),
+    const 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,
+          }),
+        }),
+        owner ?? undefined,
      )
-    }
-
-    const appendToIndex = (notification: Notification) => {
-      if (notification.session) {
-        setIndex("session", "all", notification.session, (all = []) => [...all, notification])
-        if (!notification.viewed) {
-          setIndex("session", "unseen", notification.session, (unseen = []) => [...unseen, notification])
-          setIndex("session", "unseenCount", notification.session, (count = 0) => count + 1)
-          if (notification.type === "error") setIndex("session", "unseenHasError", notification.session, true)
-        }
-      }
-
-      if (notification.directory) {
-        setIndex("project", "all", notification.directory, (all = []) => [...all, notification])
-        if (!notification.viewed) {
-          setIndex("project", "unseen", notification.directory, (unseen = []) => [...unseen, notification])
-          setIndex("project", "unseenCount", notification.directory, (count = 0) => count + 1)
-          if (notification.type === "error") setIndex("project", "unseenHasError", notification.directory, true)
-        }
-      }
-    }
-
-    const removeFromIndex = (notification: Notification) => {
-      if (notification.session) {
-        setIndex("session", "all", notification.session, (all = []) => all.filter((n) => n !== notification))
-        if (!notification.viewed) {
-          const unseen = (index.session.unseen[notification.session] ?? empty).filter((n) => n !== notification)
-          updateUnseen("session", notification.session, unseen)
-        }
-      }
-
-      if (notification.directory) {
-        setIndex("project", "all", notification.directory, (all = []) => all.filter((n) => n !== notification))
-        if (!notification.viewed) {
-          const unseen = (index.project.unseen[notification.directory] ?? empty).filter((n) => n !== notification)
-          updateUnseen("project", notification.directory, unseen)
-        }
-      }
+      states.set(ctx.sdk.scope, root)
+      return root.state
    }

    createEffect(() => {
-      if (!ready()) return
-      if (meta.pruned) return
-      meta.pruned = true
-      const list = pruneNotifications(store.list)
-      batch(() => {
-        setStore("list", list)
-        setIndex(reconcile(buildNotificationIndex(list), { merge: false }))
+      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)
      })
    })

-    const append = (notification: Notification) => {
-      const list = pruneNotifications([...store.list, notification])
-      const keep = new Set(list)
-      const removed = store.list.filter((n) => !keep.has(n))
+    onCleanup(() => states.forEach((value) => value.dispose()))

-      batch(() => {
-        if (keep.has(notification)) appendToIndex(notification)
-        removed.forEach((n) => removeFromIndex(n))
-        setStore("list", list)
-      })
-    }
-
-    const lookup = async (directory: string, sessionID?: string) => {
-      if (!sessionID) return undefined
-      const sync = serverSync().ensureDirSyncContext(directory)
-      const session = sync.session.get(sessionID)
-      if (session) return session
-      return sync.session
-        .sync(sessionID)
-        .then(() => sync.session.get(sessionID))
-        .catch(() => undefined)
-    }
-
-    const viewedInCurrentSession = (directory: string, sessionID?: string) => {
-      const activeDirectory = currentDirectory()
-      const activeSession = currentSession()
-      if (!activeDirectory) return false
-      if (!activeSession) return false
-      if (!sessionID) return false
-      if (directory !== activeDirectory) return false
-      return sessionID === activeSession
-    }
-
-    const handleSessionIdle = (directory: string, event: { properties: { sessionID?: string } }, time: number) => {
-      const sessionID = event.properties.sessionID
-      void lookup(directory, sessionID).then((session) => {
-        if (meta.disposed) return
-        if (!session) return
-        if (session.parentID) return
-
-        if (settings.sounds.agentEnabled()) {
-          void playSoundById(settings.sounds.agent())
-        }
-
-        append({
-          directory,
-          time,
-          viewed: viewedInCurrentSession(directory, sessionID),
-          type: "turn-complete",
-          session: sessionID,
-        })
-
-        const href = `/${base64Encode(directory)}/session/${sessionID}`
-        if (settings.notifications.agent()) {
-          void platform.notify(language.t("notification.session.responseReady.title"), session.title ?? sessionID, href)
-        }
-      })
-    }
-
-    const handleSessionError = (
-      directory: string,
-      event: { properties: { sessionID?: string; error?: EventSessionError["properties"]["error"] } },
-      time: number,
-    ) => {
-      const sessionID = event.properties.sessionID
-      void lookup(directory, sessionID).then((session) => {
-        if (meta.disposed) return
-        if (session?.parentID) return
-
-        if (settings.sounds.errorsEnabled()) {
-          void playSoundById(settings.sounds.errors())
-        }
-
-        const error = "error" in event.properties ? event.properties.error : undefined
-        append({
-          directory,
-          time,
-          viewed: viewedInCurrentSession(directory, sessionID),
-          type: "error",
-          session: sessionID ?? "global",
-          error,
-        })
-        const description =
-          session?.title ??
-          (typeof error === "string" ? error : language.t("notification.session.error.fallbackDescription"))
-        const href = sessionID ? `/${base64Encode(directory)}/session/${sessionID}` : `/${base64Encode(directory)}`
-        if (settings.notifications.errors()) {
-          void platform.notify(language.t("notification.session.error.title"), description, href)
-        }
-      })
-    }
-
-    const unsub = serverSDK().event.listen((e) => {
-      const event = e.details
-      if (event.type !== "session.idle" && event.type !== "session.error") return
-
-      const directory = e.name
-      const time = Date.now()
-      if (event.type === "session.idle") {
-        handleSessionIdle(directory, event, time)
-        return
-      }
-      handleSessionError(directory, event, time)
-    })
-    onCleanup(() => {
-      meta.disposed = true
-      unsub()
-    })
+    const selected = () => ensure(activeServer())

    return {
-      ready,
+      ready: () => selected().ready(),
+      ensureServerState: ensure,
      session: {
-        all(session: string) {
-          return index.session.all[session] ?? empty
-        },
-        unseen(session: string) {
-          return index.session.unseen[session] ?? empty
-        },
-        unseenCount(session: string) {
-          return index.session.unseenCount[session] ?? 0
-        },
-        unseenHasError(session: string) {
-          return index.session.unseenHasError[session] ?? false
-        },
-        markViewed(session: string) {
-          const unseen = index.session.unseen[session] ?? empty
-          if (!unseen.length) return
-
-          const projects = [
-            ...new Set(unseen.flatMap((notification) => (notification.directory ? [notification.directory] : []))),
-          ]
-          batch(() => {
-            setStore("list", (n) => n.session === session && !n.viewed, "viewed", true)
-            updateUnseen("session", session, [])
-            projects.forEach((directory) => {
-              const next = (index.project.unseen[directory] ?? empty).filter(
-                (notification) => notification.session !== session,
-              )
-              updateUnseen("project", directory, next)
-            })
-          })
-        },
+        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) {
-          return index.project.all[directory] ?? empty
-        },
-        unseen(directory: string) {
-          return index.project.unseen[directory] ?? empty
-        },
-        unseenCount(directory: string) {
-          return index.project.unseenCount[directory] ?? 0
-        },
-        unseenHasError(directory: string) {
-          return index.project.unseenHasError[directory] ?? false
-        },
-        markViewed(directory: string) {
-          const unseen = index.project.unseen[directory] ?? empty
-          if (!unseen.length) return
-
-          const sessions = [
-            ...new Set(unseen.flatMap((notification) => (notification.session ? [notification.session] : []))),
-          ]
-          batch(() => {
-            setStore("list", (n) => n.directory === directory && !n.viewed, "viewed", true)
-            updateUnseen("project", directory, [])
-            sessions.forEach((session) => {
-              const next = (index.session.unseen[session] ?? empty).filter(
-                (notification) => notification.directory !== directory,
-              )
-              updateUnseen("session", session, next)
-            })
-          })
-        },
+        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>
+}) {
+  const serverSDK = () => input.sdk
+  const serverSync = () => input.sync
+  const platform = input.platform
+  const settings = input.settings
+  const language = input.language
+
+  const empty: Notification[] = []
+
+  const currentDirectory = input.directory
+  const currentSession = input.sessionID
+
+  const [store, setStore, _, ready] = persisted(
+    Persist.serverGlobal(serverSDK().scope, "notification", ["notification.v1"]),
+    createStore({
+      list: [] as Notification[],
+    }),
+  )
+  const [index, setIndex] = createStore<NotificationIndex>(buildNotificationIndex(store.list))
+
+  const meta = { pruned: false, disposed: false }
+
+  const updateUnseen = (scope: "session" | "project", key: string, unseen: Notification[]) => {
+    setIndex(scope, "unseen", key, unseen)
+    setIndex(scope, "unseenCount", key, unseen.length)
+    setIndex(
+      scope,
+      "unseenHasError",
+      key,
+      unseen.some((notification) => notification.type === "error"),
+    )
+  }
+
+  const appendToIndex = (notification: Notification) => {
+    if (notification.session) {
+      setIndex("session", "all", notification.session, (all = []) => [...all, notification])
+      if (!notification.viewed) {
+        setIndex("session", "unseen", notification.session, (unseen = []) => [...unseen, notification])
+        setIndex("session", "unseenCount", notification.session, (count = 0) => count + 1)
+        if (notification.type === "error") setIndex("session", "unseenHasError", notification.session, true)
+      }
+    }
+
+    if (notification.directory) {
+      setIndex("project", "all", notification.directory, (all = []) => [...all, notification])
+      if (!notification.viewed) {
+        setIndex("project", "unseen", notification.directory, (unseen = []) => [...unseen, notification])
+        setIndex("project", "unseenCount", notification.directory, (count = 0) => count + 1)
+        if (notification.type === "error") setIndex("project", "unseenHasError", notification.directory, true)
+      }
+    }
+  }
+
+  const removeFromIndex = (notification: Notification) => {
+    if (notification.session) {
+      setIndex("session", "all", notification.session, (all = []) => all.filter((n) => n !== notification))
+      if (!notification.viewed) {
+        const unseen = (index.session.unseen[notification.session] ?? empty).filter((n) => n !== notification)
+        updateUnseen("session", notification.session, unseen)
+      }
+    }
+
+    if (notification.directory) {
+      setIndex("project", "all", notification.directory, (all = []) => all.filter((n) => n !== notification))
+      if (!notification.viewed) {
+        const unseen = (index.project.unseen[notification.directory] ?? empty).filter((n) => n !== notification)
+        updateUnseen("project", notification.directory, unseen)
+      }
+    }
+  }
+
+  createEffect(() => {
+    if (!ready()) return
+    if (meta.pruned) return
+    meta.pruned = true
+    const list = pruneNotifications(store.list)
+    batch(() => {
+      setStore("list", list)
+      setIndex(reconcile(buildNotificationIndex(list), { merge: false }))
+    })
+  })
+
+  const append = (notification: Notification) => {
+    const list = pruneNotifications([...store.list, notification])
+    const keep = new Set(list)
+    const removed = store.list.filter((n) => !keep.has(n))
+
+    batch(() => {
+      if (keep.has(notification)) appendToIndex(notification)
+      removed.forEach((n) => removeFromIndex(n))
+      setStore("list", list)
+    })
+  }
+
+  const lookup = async (directory: string, sessionID?: string) => {
+    if (!sessionID) return undefined
+    const sync = serverSync().ensureDirSyncContext(directory)
+    const session = sync.session.get(sessionID)
+    if (session) return session
+    return sync.session
+      .sync(sessionID)
+      .then(() => sync.session.get(sessionID))
+      .catch(() => undefined)
+  }
+
+  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 sessionID = event.properties.sessionID
+    void lookup(directory, sessionID).then((session) => {
+      if (meta.disposed) return
+      if (!session) return
+      if (session.parentID) return
+
+      if (settings.sounds.agentEnabled()) {
+        void playSoundById(settings.sounds.agent())
+      }
+
+      append({
+        directory,
+        time,
+        viewed: viewedInCurrentSession(directory, sessionID),
+        type: "turn-complete",
+        session: sessionID,
+      })
+
+      const href = `/${base64Encode(directory)}/session/${sessionID}`
+      if (settings.notifications.agent()) {
+        void platform.notify(language.t("notification.session.responseReady.title"), session.title ?? sessionID, href)
+      }
+    })
+  }
+
+  const handleSessionError = (
+    directory: string,
+    event: { properties: { sessionID?: string; error?: EventSessionError["properties"]["error"] } },
+    time: number,
+  ) => {
+    const sessionID = event.properties.sessionID
+    void lookup(directory, sessionID).then((session) => {
+      if (meta.disposed) return
+      if (session?.parentID) return
+
+      if (settings.sounds.errorsEnabled()) {
+        void playSoundById(settings.sounds.errors())
+      }
+
+      const error = "error" in event.properties ? event.properties.error : undefined
+      append({
+        directory,
+        time,
+        viewed: viewedInCurrentSession(directory, sessionID),
+        type: "error",
+        session: sessionID ?? "global",
+        error,
+      })
+      const description =
+        session?.title ??
+        (typeof error === "string" ? error : language.t("notification.session.error.fallbackDescription"))
+      const href = sessionID ? `/${base64Encode(directory)}/session/${sessionID}` : `/${base64Encode(directory)}`
+      if (settings.notifications.errors()) {
+        void platform.notify(language.t("notification.session.error.title"), description, href)
+      }
+    })
+  }
+
+  const unsub = serverSDK().event.listen((e) => {
+    const event = e.details
+    if (event.type !== "session.idle" && event.type !== "session.error") return
+
+    const directory = e.name
+    const time = Date.now()
+    if (event.type === "session.idle") {
+      handleSessionIdle(directory, event, time)
+      return
+    }
+    handleSessionError(directory, event, time)
+  })
+  onCleanup(() => {
+    meta.disposed = true
+    unsub()
+  })
+
+  return {
+    ready,
+    session: {
+      all(session: string) {
+        return index.session.all[session] ?? empty
+      },
+      unseen(session: string) {
+        return index.session.unseen[session] ?? empty
+      },
+      unseenCount(session: string) {
+        return index.session.unseenCount[session] ?? 0
+      },
+      unseenHasError(session: string) {
+        return index.session.unseenHasError[session] ?? false
+      },
+      markViewed(session: string) {
+        const unseen = index.session.unseen[session] ?? empty
+        if (!unseen.length) return
+
+        const projects = [
+          ...new Set(unseen.flatMap((notification) => (notification.directory ? [notification.directory] : []))),
+        ]
+        batch(() => {
+          setStore("list", (n) => n.session === session && !n.viewed, "viewed", true)
+          updateUnseen("session", session, [])
+          projects.forEach((directory) => {
+            const next = (index.project.unseen[directory] ?? empty).filter(
+              (notification) => notification.session !== session,
+            )
+            updateUnseen("project", directory, next)
+          })
+        })
+      },
+    },
+    project: {
+      all(directory: string) {
+        return index.project.all[directory] ?? empty
+      },
+      unseen(directory: string) {
+        return index.project.unseen[directory] ?? empty
+      },
+      unseenCount(directory: string) {
+        return index.project.unseenCount[directory] ?? 0
+      },
+      unseenHasError(directory: string) {
+        return index.project.unseenHasError[directory] ?? false
+      },
+      markViewed(directory: string) {
+        const unseen = index.project.unseen[directory] ?? empty
+        if (!unseen.length) return
+
+        const sessions = [
+          ...new Set(unseen.flatMap((notification) => (notification.session ? [notification.session] : []))),
+        ]
+        batch(() => {
+          setStore("list", (n) => n.directory === directory && !n.viewed, "viewed", true)
+          updateUnseen("project", directory, [])
+          sessions.forEach((session) => {
+            const next = (index.session.unseen[session] ?? empty).filter(
+              (notification) => notification.directory !== directory,
+            )
+            updateUnseen("session", session, next)
+          })
+        })
+      },
+    },
+  }
+}
@@ -9,7 +9,7 @@ import { useServerSDK } from "./server-sdk"
 import type { ServerScope } from "@/utils/server-scope"
 import { useSDK } from "./sdk"
 import { useTabs, type Tab } from "./tabs"
-import { ServerConnection, useServer } from "./server"
+import { ServerConnection } from "./server"
 import { requireServerKey } from "@/utils/session-route"
 import { useSettings } from "./settings"

@@ -287,7 +287,6 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
    const sdk = useSDK()
    const [search] = useSearchParams<{ draftId?: string }>()
    const serverSDK = useServerSDK()
-    const server = useServer()
    const tabs = useTabs()
    const settings = useSettings()
    const cache = new Map<string, PromptCacheEntry>()
@@ -312,7 +311,8 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
    }

    const owner = getOwner()
-    const serverKey = () => (params.serverKey ? requireServerKey(params.serverKey) : server.key)
+    const serverKey = () =>
+      params.serverKey ? requireServerKey(params.serverKey) : ServerConnection.key(serverSDK().server)
    const scope = () =>
      search.draftId ? { draftID: search.draftId } : { dir: base64Encode(sdk().directory), id: params.id }
    const load = (scope: Scope) => {
@@ -269,6 +269,7 @@ function createServerSdkContextBase(server: ServerConnection.Any, scope: ServerS
  })

  return {
+    server,
    scope,
    url: server.http.url,
    client: sdk,
@@ -471,14 +471,18 @@ export function createServerSession(client: OpencodeClient) {
      }
      case "permission.asked": {
        const permission = event.properties as PermissionRequest
-        const permissions = data.permission[permission.sessionID] ?? []
+        const permissions = data.permission[permission.sessionID]
+        if (!permissions) {
+          setData("permission", permission.sessionID, [permission])
+          return
+        }
        const result = Binary.search(permissions, permission.id, (item) => item.id)
        if (result.found) setData("permission", permission.sessionID, result.index, reconcile(permission))
        if (!result.found)
          setData(
            "permission",
            permission.sessionID,
-            produce((draft = []) => void draft.splice(result.index, 0, permission)),
+            produce((draft) => void draft.splice(result.index, 0, permission)),
          )
        return
      }
@@ -497,14 +501,18 @@ export function createServerSession(client: OpencodeClient) {
      }
      case "question.asked": {
        const question = event.properties as QuestionRequest
-        const questions = data.question[question.sessionID] ?? []
+        const questions = data.question[question.sessionID]
+        if (!questions) {
+          setData("question", question.sessionID, [question])
+          return
+        }
        const result = Binary.search(questions, question.id, (item) => item.id)
        if (result.found) setData("question", question.sessionID, result.index, reconcile(question))
        if (!result.found)
          setData(
            "question",
            question.sessionID,
-            produce((draft = []) => void draft.splice(result.index, 0, question)),
+            produce((draft) => void draft.splice(result.index, 0, question)),
          )
        return
      }
@@ -112,6 +112,27 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
      navigate(href)
    }

+    const removeTab = (index: number) => {
+      const tab = store[index]
+      if (!tab) return
+      const key = tabKey(tab)
+      const draftID = tab.type === "draft" ? tab.draftID : undefined
+      const nextTab = store[index + 1] ?? store[index - 1]
+      closing.add(key)
+      void startTransition(() => {
+        setStore(
+          produce((tabs) => {
+            tabs.splice(index, 1)
+          }),
+        )
+        if (recent.key === key) setRecentKey(nextTab && tabKey(nextTab))
+        if (nextTab) navigateTab(nextTab)
+        else navigate("/")
+      }).finally(() => closing.delete(key))
+      memory.remove(key)
+      if (draftID) removeDraftPersisted(draftID)
+    }
+
    const actions = {
      addSessionTab: (tab: Omit<SessionTab, "type">) => {
        const next = { type: "session" as const, ...tab }
@@ -175,25 +196,12 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
        memory.remove(`draft:${draftID}`)
        removeDraftPersisted(draftID)
      },
-      removeTab: (index: number) => {
-        const tab = store[index]
-        if (!tab) return
-        const key = tabKey(tab)
-        const draftID = tab.type === "draft" ? tab.draftID : undefined
-        const nextTab = store[index + 1] ?? store[index - 1]
-        closing.add(key)
-        void startTransition(() => {
-          setStore(
-            produce((tabs) => {
-              tabs.splice(index, 1)
-            }),
-          )
-          if (recent.key === key) setRecentKey(nextTab && tabKey(nextTab))
-          if (nextTab) navigateTab(nextTab)
-          else navigate("/")
-        }).finally(() => closing.delete(key))
-        memory.remove(key)
-        if (draftID) removeDraftPersisted(draftID)
+      removeTab,
+      removeSessionTab(input: Omit<SessionTab, "type">) {
+        const index = store.findIndex(
+          (tab) => tab.type === "session" && tab.server === input.server && tab.sessionId === input.sessionId,
+        )
+        if (index !== -1) removeTab(index)
      },
      removeServer(key: ServerConnection.Key) {
        const drafts = store.flatMap((tab) => (tab.type === "draft" && tab.server === key ? [tab.draftID] : []))
@@ -205,9 +213,10 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
        if (server.key === key) navigate("/")
      },
      removeSessions: (input: SessionTabsRemovedDetail) => {
+        const targetServer = input.server ?? server.key
        const removed = store
          .filter(
-            (tab) => tab.type === "session" && tab.server === server.key && input.sessionIDs.includes(tab.sessionId),
+            (tab) => tab.type === "session" && tab.server === targetServer && input.sessionIDs.includes(tab.sessionId),
          )
          .map(tabKey)
        void startTransition(() => {
@@ -215,28 +224,28 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
            produce((tabs) => {
              const sessionIDs = new Set(input.sessionIDs)
              const currentHref =
-                params.dir && params.id
+                targetServer === server.key && params.dir && params.id
                  ? tabHref({
                      type: "session",
-                      server: server.key,
+                      server: targetServer,
                      sessionId: params.id,
                    })
                  : undefined
              const currentIndex = currentHref
                ? tabs.findIndex(
-                    (tab) => tab.type === "session" && tab.server === server.key && tabHref(tab) === currentHref,
+                    (tab) => tab.type === "session" && tab.server === targetServer && tabHref(tab) === currentHref,
                  )
                : -1
              const currentTab = tabs[currentIndex]
              const removedCurrent =
                currentTab?.type === "session" &&
-                currentTab.server === server.key &&
+                currentTab.server === targetServer &&
                sessionIDs.has(currentTab.sessionId)

              for (let i = tabs.length - 1; i >= 0; i--) {
                const tab = tabs[i]
                if (!tab || tab.type !== "session") continue
-                if (tab.server !== server.key) continue
+                if (tab.server !== targetServer) continue
                if (!sessionIDs.has(tab.sessionId)) continue
                tabs.splice(i, 1)
              }
@@ -592,10 +592,11 @@ export const dict = {
  "home.server.collapse": "Collapse server projects",
  "home.server.expand": "Expand server projects",
  "home.sessions.search.placeholder": "Search sessions",
+  "home.sessions.search.placeholder.scoped": "Search sessions in {{scope}}",
  "home.sessions.search.sessions": "Sessions",
  "home.sessions.search.noResults": "No sessions found for {{query}}",
-  "home.sessions.empty": "No sessions found",
-  "home.sessions.empty.description": "Start a new session for this project",
+  "home.sessions.empty": "Nothing here yet",
+  "home.sessions.empty.description": "Create a session to get started",
  "home.sessions.group.today": "Today",
  "home.sessions.group.yesterday": "Yesterday",
  "home.sessions.group.older": "Older",
@@ -655,6 +656,10 @@ export const dict = {
  "session.new.worktree.main": "Main branch",
  "session.new.worktree.mainWithBranch": "Main branch ({{branch}})",
  "session.new.worktree.create": "Create new worktree",
+  "session.new.workspace.runIn": "Run session in",
+  "session.new.workspace.triggerLocal": "Local",
+  "session.new.workspace.local": "Local repository",
+  "session.new.workspace.existing": "Workspace…",
  "session.new.lastModified": "Last modified",

  "session.header.search.placeholder": "Search {{project}}",
@@ -507,9 +507,11 @@ export const dict = {
  "home.projects": "项目",
  "home.project.add": "添加项目",
  "home.sessions.search.placeholder": "搜索会话",
+  "home.sessions.search.placeholder.scoped": "在 {{scope}} 中搜索会话",
  "home.sessions.search.sessions": "会话",
  "home.sessions.search.noResults": "未找到与 {{query}} 相关的会话",
-  "home.sessions.empty": "未找到会话",
+  "home.sessions.empty": "这里还没有内容",
+  "home.sessions.empty.description": "创建一个会话以开始。",
  "home.sessions.group.today": "今天",
  "home.sessions.group.yesterday": "昨天",
  "home.sessions.group.older": "更早",
@@ -1,6 +1,7 @@
@import "@opencode-ai/ui/styles/tailwind";
@import "@opencode-ai/session-ui/styles";
@import "@opencode-ai/ui/v2/styles/tailwind.css";
+@import "tw-animate-css";

@font-face {
  font-family: "JetBrainsMono Nerd Font Mono";
@@ -131,13 +132,4 @@
      transform: rotate(360deg);
    }
  }
-
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
 }
@@ -0,0 +1,51 @@
+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/server"
+
+const remote = "remote" as ServerConnection.Key
+
+test("archiving a Home session removes its open titlebar tab", async () => {
+  let detail: ReturnType<typeof readSessionTabsRemovedDetail>
+  let removed = false
+  window.addEventListener(
+    SESSION_TABS_REMOVED_EVENT,
+    (event) => {
+      detail = readSessionTabsRemovedDetail(event)
+    },
+    { once: true },
+  )
+
+  await archiveHomeSession({
+    server: remote,
+    session: { id: "ses_1", directory: "/workspace" },
+    update: async () => undefined,
+    remove: () => {
+      removed = true
+    },
+  })
+
+  expect(removed).toBe(true)
+  expect(detail).toEqual({ server: remote, directory: "/workspace", sessionIDs: ["ses_1"] })
+})
+
+test("reports archive failures without removing the session", async () => {
+  const failure = new Error("offline")
+  let error: unknown
+  let removed = false
+
+  await archiveHomeSession({
+    server: remote,
+    session: { id: "ses_1", directory: "/workspace" },
+    update: async () => Promise.reject(failure),
+    remove: () => {
+      removed = true
+    },
+    onError: (value) => {
+      error = value
+    },
+  })
+
+  expect(error).toBe(failure)
+  expect(removed).toBe(false)
+})
@@ -0,0 +1,37 @@
+import { notifySessionTabsRemoved } from "@/components/titlebar-session-events"
+import type { ServerConnection } from "@/context/server"
+
+type HomeSession = {
+  id: string
+  directory: string
+}
+
+type SessionUpdate = {
+  directory: string
+  sessionID: string
+  time: { archived: number }
+}
+
+export async function archiveHomeSession(input: {
+  server: ServerConnection.Key
+  session: HomeSession
+  update: (value: SessionUpdate) => Promise<unknown>
+  remove: () => void
+  onError?: (error: unknown) => void
+}) {
+  await input
+    .update({
+      directory: input.session.directory,
+      sessionID: input.session.id,
+      time: { archived: Date.now() },
+    })
+    .then(() => {
+      input.remove()
+      notifySessionTabsRemoved({
+        server: input.server,
+        directory: input.session.directory,
+        sessionIDs: [input.session.id],
+      })
+    })
+    .catch((error) => input.onError?.(error))
+}
@@ -1,8 +1,8 @@
 import type { Session } from "@opencode-ai/sdk/v2/client"
 import {
-  batch,
  createEffect,
  createMemo,
+  createResource,
  createRoot,
  For,
  Match,
@@ -14,7 +14,7 @@ import {
  Switch,
 } from "solid-js"
 import { makeEventListener } from "@solid-primitives/event-listener"
-import { createStore } from "solid-js/store"
+import { createStore, produce } from "solid-js/store"
 import { useQuery } from "@tanstack/solid-query"
 import { Button } from "@opencode-ai/ui/button"
 import { Logo } from "@opencode-ai/ui/logo"
@@ -25,7 +25,8 @@ import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
-import { getProjectAvatarVariant, useLayout, type LocalProject } from "@/context/layout"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { getProjectAvatarVariant, useLayout, type HomeProjectSelection, type LocalProject } from "@/context/layout"
 import { useNavigate } from "@solidjs/router"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 import { Icon } from "@opencode-ai/ui/icon"
@@ -33,9 +34,10 @@ import { usePlatform } from "@/context/platform"
 import { DateTime } from "luxon"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useDirectoryPicker } from "@/components/directory-picker"
+import { useSettingsCommand } from "@/components/settings-dialog"
 import { DialogSelectServer, useServerManagementController } from "@/components/dialog-select-server"
 import { DialogServerV2 } from "@/components/settings-v2/dialog-server-v2"
-import { ServerConnection, useServer } from "@/context/server"
+import { ServerConnection, serverName, useServer } from "@/context/server"
 import { sessionHasOpenTab, useTabs } from "@/context/tabs"
 import { useServerSync, type ServerSync } from "@/context/server-sync"
 import { useLanguage } from "@/context/language"
@@ -43,9 +45,9 @@ import { useNotification } from "@/context/notification"
 import {
  closeHomeProject,
  displayName,
+  errorMessage,
  getProjectAvatarSource,
  homeProjectDirectories,
-  type HomeProjectSelection,
  projectForSession,
  sortedRootSessions,
  toggleHomeProjectSelection,
@@ -55,14 +57,18 @@ import { sessionTitle } from "@/utils/session-title"
 import { pathKey } from "@/utils/path-key"
 import { useGlobal } from "@/context/global"
 import { useCommand } from "@/context/command"
+import { Binary } from "@opencode-ai/core/util/binary"
 import { ServerRowMenu } from "@/components/server/server-row-menu"
 import { ServerHealthIndicator } from "@/components/server/server-row"
 import { type ServerHealth } from "@/utils/server-health"
 import { Persist, persisted } from "@/utils/persist"
 import { useMarked } from "@opencode-ai/ui/context/marked"
 import { preloadMarkdown } from "@opencode-ai/session-ui/markdown-cache"
+import { archiveHomeSession } from "./home-session-archive"
+import { showToast } from "@/utils/toast"

 const HOME_SESSION_LIMIT = 64
+const SHOW_HOME_SESSION_ARCHIVE = false
 const HOME_ROW_LAYOUT =
  "flex min-w-0 w-full shrink-0 cursor-default items-center rounded-[6px] bg-transparent text-left transition-[background-color,color,box-shadow] duration-[120ms] ease-in-out focus-visible:outline-none"
 const HOME_ROW_BASE = `${HOME_ROW_LAYOUT} border-0`
@@ -85,7 +91,7 @@ type HomeSessionGroup = {

 const HOME_SESSION_SEARCH_RESULTS_ID = "home-session-search-results"
 const HOME_SEARCH_RESULT_ROW =
-  "flex h-10 w-full shrink-0 cursor-default items-center gap-2 border-0 py-3 pl-4 pr-6 text-left transition-[background-color] duration-[120ms] ease-in-out hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
+  "flex h-10 w-full shrink-0 cursor-default items-center gap-2 border-0 py-3 pl-[18px] pr-6 text-left transition-[background-color] duration-[120ms] ease-in-out hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
 const HOME_SEARCH_RESULT_TITLE =
  "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[13px] leading-4 tracking-[-0.04px] text-v2-text-text-base [font-weight:530]"
 const HOME_SEARCH_RESULT_META =
@@ -141,15 +147,16 @@ export function NewHome() {
  const command = useCommand()
  const notification = useNotification()
  const marked = useMarked()
+  const openSettings = useSettingsCommand()
  let focusSessionSearch: (() => void) | undefined
  const [state, setState] = createStore({
    search: "",
-    selection: { server: server.key } as HomeProjectSelection,
    searchFocused: false,
  })
+  const selection = layout.home.selection

  const focusedServer = createMemo(
-    () => global.servers.list().find((conn) => ServerConnection.key(conn) === state.selection.server) ?? server.current,
+    () => global.servers.list().find((conn) => ServerConnection.key(conn) === selection().server) ?? server.current,
  )
  const focusedServerCtx = createMemo(() => {
    const conn = focusedServer()
@@ -158,7 +165,7 @@ export function NewHome() {
  })
  const focusedSync = () => focusedServerCtx()?.sync ?? sync()
  const projects = createMemo(() => focusedServerCtx()?.projects.list() ?? layout.projects.list())
-  const selectedProject = createMemo(() => projects().find((project) => project.worktree === state.selection.directory))
+  const selectedProject = createMemo(() => projects().find((project) => project.worktree === selection().directory))
  const newSessionProject = createMemo(
    () =>
      selectedProject() ??
@@ -172,8 +179,21 @@ export function NewHome() {
    return directories(project)
  })
  const search = createMemo(() => state.search.trim())
+  const searchPlaceholder = createMemo(() => {
+    const project = selectedProject()
+    if (project) {
+      return language.t("home.sessions.search.placeholder.scoped", { scope: displayName(project) })
+    }
+    if (global.servers.list().length > 1) {
+      const conn = focusedServer()
+      if (conn) {
+        return language.t("home.sessions.search.placeholder.scoped", { scope: serverName(conn) })
+      }
+    }
+    return language.t("home.sessions.search.placeholder")
+  })
  const sessionLoad = useQuery(() => ({
-    queryKey: ["home", "sessions", state.selection.server, ...projectDirectories()] as const,
+    queryKey: ["home", "sessions", selection().server, ...projectDirectories()] as const,
    queryFn: async () => {
      await Promise.all(
        projectDirectories().map((directory) =>
@@ -239,10 +259,7 @@ export function NewHome() {
  })

  function setSelection(next: HomeProjectSelection) {
-    batch(() => {
-      if (state.selection.server !== next.server) setState("selection", "server", next.server)
-      if (state.selection.directory !== next.directory) setState("selection", "directory", next.directory)
-    })
+    layout.home.setSelection(next)
  }

  function closeSearch() {
@@ -258,7 +275,7 @@ export function NewHome() {
  command.register("home", () => [
    {
      id: "home.sessions.search.focus",
-      title: language.t("home.sessions.search.placeholder"),
+      title: searchPlaceholder(),
      keybind: "mod+f",
      hidden: true,
      onSelect: () => focusSessionSearch?.(),
@@ -267,7 +284,7 @@ export function NewHome() {

  createEffect(() => {
    const list = global.servers.list()
-    if (list.some((conn) => ServerConnection.key(conn) === state.selection.server)) return
+    if (list.some((conn) => ServerConnection.key(conn) === selection().server)) return
    const conn = list.find((conn) => ServerConnection.key(conn) === server.key) ?? list[0]
    if (conn) setSelection({ server: ServerConnection.key(conn) })
  })
@@ -292,7 +309,7 @@ export function NewHome() {
        .some((project) => project.worktree === directory)
    )
      return
-    setSelection(toggleHomeProjectSelection(state.selection, key, directory))
+    setSelection(toggleHomeProjectSelection(selection(), key, directory))
  }

  function addProjects(conn: ServerConnection.Any, directories: string[]) {
@@ -325,15 +342,15 @@ export function NewHome() {
  }

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

  function clearNotifications(conn: ServerConnection.Any, project: LocalProject) {
-    if (ServerConnection.key(conn) !== server.key) return
+    const state = notification.ensureServerState(ServerConnection.key(conn))
    directories(project)
-      .filter((directory) => notification.project.unseenCount(directory) > 0)
-      .forEach((directory) => notification.project.markViewed(directory))
+      .filter((directory) => state.project.unseenCount(directory) > 0)
+      .forEach((directory) => state.project.markViewed(directory))
  }

  function openSession(session: Session) {
@@ -350,7 +367,33 @@ export function NewHome() {
    })
  }

+  async function archiveSession(session: Session) {
+    const conn = focusedServer()
+    const ctx = focusedServerCtx()
+    if (!conn || !ctx) return
+    const [, setStore] = ctx.sync.child(session.directory)
+    await archiveHomeSession({
+      server: ServerConnection.key(conn),
+      session,
+      update: (value) => ctx.sdk.client.session.update(value),
+      remove: () =>
+        setStore(
+          produce((draft) => {
+            const match = Binary.search(draft.session, session.id, (s) => s.id)
+            if (match.found) draft.session.splice(match.index, 1)
+          }),
+        ),
+      onError: (error) =>
+        showToast({
+          title: language.t("common.requestFailed"),
+          description: errorMessage(error, language.t("common.requestFailed")),
+        }),
+    })
+  }
+
  function chooseProject(conn: ServerConnection.Any) {
+    if (global.servers.health[ServerConnection.key(conn)]?.healthy === false) return
+
    function resolve(result: string | string[] | null) {
      addProjects(conn, homeProjectDirectories(result))
    }
@@ -363,18 +406,12 @@ export function NewHome() {
    })
  }

-  function openSettings() {
-    void import("@/components/settings-v2").then((x) => {
-      dialog.show(() => <x.DialogSettings />)
-    })
-  }
-
  return (
    <div class="rounded-[10px] shadow-[var(--v2-elevation-raised)] m-2 min-h-0 lg:overflow-hidden bg-v2-background-bg-base self-stretch flex-1">
      <div class="mx-auto grid h-full w-full max-w-[1080px] grid-rows-[auto_minmax(0,1fr)_auto] gap-4 px-3 pb-3 lg:grid-cols-[280px_minmax(0,720px)] lg:grid-rows-1 lg:gap-8 lg:px-6 lg:pb-16">
        <HomeProjectColumn
          projects={projects()}
-          selected={state.selection}
+          selected={selection()}
          focusServer={focusServer}
          selectProject={selectProject}
          openNewSession={openProjectNewSession}
@@ -382,7 +419,7 @@ export function NewHome() {
          editProject={editProject}
          closeProject={(conn, directory) => {
            const next = closeHomeProject(
-              state.selection,
+              selection(),
              ServerConnection.key(conn),
              global.ensureServerCtx(conn).projects,
              directory,
@@ -402,12 +439,13 @@ export function NewHome() {
        >
          <HomeSessionSearch
            value={state.search}
-            placeholder={language.t("home.sessions.search.placeholder")}
+            placeholder={searchPlaceholder()}
            open={searchOpen()}
            loading={sessionLoad.isLoading}
            results={searchResults()}
-            server={state.selection.server}
-            activeServer={state.selection.server === server.key}
+            showProjectName={!selectedProject()}
+            server={selection().server}
+            activeServer={selection().server === server.key}
            noResultsLabel={language.t("home.sessions.search.noResults", { query: search() })}
            bindFocus={(focus) => {
              focusSessionSearch = focus
@@ -418,22 +456,19 @@ export function NewHome() {
            onSelect={selectSearchSession}
          />
          <ScrollView class="mt-3 min-h-0 flex-1">
-            <div class="pt-3 flex flex-col gap-6">
+            <Show
+              when={!sessionLoad.isLoading}
+              fallback={
+                <div class="pt-3">
+                  <HomeSessionSkeleton label={language.t("common.loading")} />
+                </div>
+              }
+            >
              <Show
-                when={!sessionLoad.isLoading}
-                fallback={<HomeSessionSkeleton label={language.t("common.loading")} />}
+                when={groups().length > 0}
+                fallback={<HomeSessionsEmpty onNewSession={newSessionProject() ? openNewSession : undefined} />}
              >
-                <Show
-                  when={groups().length > 0}
-                  fallback={
-                    <div class="flex min-w-0 flex-col gap-4">
-                      <HomeSessionGroupHeader
-                        title={language.t("home.sessions.empty")}
-                        onNewSession={newSessionProject() ? openNewSession : undefined}
-                      />
-                    </div>
-                  }
-                >
+                <div class="pt-3 flex flex-col gap-6">
                  <For each={groups()}>
                    {(group, index) => (
                      <div class="flex min-w-0 flex-col gap-4">
@@ -446,9 +481,11 @@ export function NewHome() {
                            {(record) => (
                              <HomeSessionRow
                                record={record}
-                                server={state.selection.server}
-                                activeServer={state.selection.server === server.key}
-                                onClick={() => openSession(record.session)}
+                                showProjectName={!selectedProject()}
+                                server={selection().server}
+                                activeServer={selection().server === server.key}
+                                openSession={openSession}
+                                archiveSession={archiveSession}
                              />
                            )}
                          </For>
@@ -456,9 +493,9 @@ export function NewHome() {
                      </div>
                    )}
                  </For>
-                </Show>
+                </div>
              </Show>
-            </div>
+            </Show>
          </ScrollView>
        </section>
        <HomeUtilityNav
@@ -490,10 +527,16 @@ function HomeProjectColumn(props: {
  const global = useGlobal()
  const dialog = useDialog()
  const controller = useServerManagementController({ navigateOnAdd: false })
-  const [state, setState] = persisted(
+  const [_state, setState, _, ready] = persisted(
    Persist.global("home.servers", ["home.servers.v1"]),
    createStore({ collapsed: {} as Record<string, boolean> }),
  )
+  const [state] = createResource(
+    () => ready.promise ?? Promise.resolve(),
+    (p) => p.then(() => _state),
+    { initialValue: _state },
+  )
+
  return (
    <aside
      class="mt-6 flex min-w-0 flex-col gap-4 lg:mt-14 lg:pt-[52px]"
@@ -502,15 +545,18 @@ function HomeProjectColumn(props: {
      <div class="flex h-7 min-w-0 items-center justify-between pl-1.5">
        <div class={HOME_SECTION_LABEL}>{props.language.t("home.projects")}</div>
        <Show when={global.servers.list().length === 1}>
-          <IconButtonV2
-            data-action="home-add-project"
-            variant="ghost-muted"
-            size="large"
-            class="titlebar-icon [&_[data-slot=icon-svg]]:text-v2-icon-icon-muted"
-            icon={<IconV2 name="folder-add-left" />}
-            onClick={() => props.chooseProject(global.servers.list()[0]!)}
-            aria-label={props.language.t("home.project.add")}
-          />
+          <TooltipV2 placement="bottom" value={props.language.t("home.project.add")}>
+            <IconButtonV2
+              data-action="home-add-project"
+              variant="ghost-muted"
+              size="large"
+              class="titlebar-icon [&_[data-slot=icon-svg]]:text-v2-icon-icon-muted"
+              icon={<IconV2 name="folder-add-left" />}
+              disabled={global.servers.health[ServerConnection.key(global.servers.list()[0]!)]?.healthy === false}
+              onClick={() => props.chooseProject(global.servers.list()[0]!)}
+              aria-label={props.language.t("home.project.add")}
+            />
+          </TooltipV2>
        </Show>
      </div>
      <Show
@@ -522,7 +568,7 @@ function HomeProjectColumn(props: {
            const key = ServerConnection.key(item)
            const healthy = () => !!global.servers.health[key]?.healthy
            const serverCtx = global.ensureServerCtx(item)
-            const collapsed = () => !!state.collapsed[key]
+            const collapsed = () => !!state().collapsed[key]
            return (
              <div class="flex max-h-[min(572px,calc(100vh_-_300px))] min-w-0 flex-col gap-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                <HomeServerRow
@@ -535,7 +581,7 @@ function HomeProjectColumn(props: {
                  focusServer={props.focusServer}
                  chooseProject={props.chooseProject}
                  openEdit={(server) => dialog.show(() => <DialogServerV2 mode="edit" server={server} />)}
-                  toggleCollapsed={() => setState("collapsed", key, !state.collapsed[key])}
+                  toggleCollapsed={() => setState("collapsed", key, !state().collapsed[key])}
                  language={props.language}
                />
                <Show when={healthy() && !collapsed()}>
@@ -646,7 +692,7 @@ function HomeServerRow(props: {
        </span>
      </button>
      <div
-        class="absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-0.5 opacity-0 transition-opacity group-hover/server:opacity-100 focus-within:opacity-100 data-[menu=true]:opacity-100"
+        class="hover-reveal absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-1 group-hover/server:opacity-100 focus-within:opacity-100 data-[menu=true]:opacity-100"
        data-menu={state.menuOpen}
      >
        <ServerRowMenu
@@ -656,14 +702,17 @@ function HomeServerRow(props: {
          open={state.menuOpen}
          onOpenChange={(open) => setState("menuOpen", open)}
        />
-        <IconButtonV2
-          data-action="home-add-project"
-          variant="ghost-muted"
-          size="small"
-          icon={<IconV2 name="folder-add-left" />}
-          aria-label={props.language.t("home.project.add")}
-          onClick={() => props.chooseProject(props.server)}
-        />
+        <TooltipV2 class="flex shrink-0 items-center" placement="bottom" value={props.language.t("home.project.add")}>
+          <IconButtonV2
+            data-action="home-add-project"
+            variant="ghost-muted"
+            size="small"
+            icon={<IconV2 name="folder-add-left" />}
+            aria-label={props.language.t("home.project.add")}
+            disabled={props.health?.healthy === false}
+            onClick={() => props.chooseProject(props.server)}
+          />
+        </TooltipV2>
      </div>
    </div>
  )
@@ -733,19 +782,11 @@ function HomeProjectRow(props: {
        <span class={HOME_PROJECT_NAV_LABEL}>{displayName(props.project)}</span>
      </button>
      <div
-        class="absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-0.5 opacity-0 transition-opacity group-hover/project:opacity-100 focus-within:opacity-100 data-[menu=true]:opacity-100"
+        class="hover-reveal absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-1 group-hover/project:opacity-100 focus-within:opacity-100 data-[menu=true]:opacity-100"
        data-menu={state.menuOpen}
      >
-        <IconButtonV2
-          data-action="home-project-new-session"
-          variant="ghost-muted"
-          size="small"
-          icon={<IconV2 name="edit" />}
-          aria-label={props.language.t("command.session.new")}
-          onClick={() => props.openNewSession(props.server, props.project.worktree)}
-        />
        <MenuV2
-          gutter={4}
+          gutter={6}
          modal={false}
          placement="bottom-end"
          open={state.menuOpen}
@@ -765,7 +806,7 @@ function HomeProjectRow(props: {
                {props.language.t("command.session.new")}
              </MenuV2.Item>
              <MenuV2.Item onSelect={() => props.editProject(props.server, props.project)}>
-                {props.language.t("common.edit")}
+                {props.language.t("dialog.project.edit.title")}
              </MenuV2.Item>
              <MenuV2.Item
                disabled={props.unseenCount === 0}
@@ -780,6 +821,14 @@ function HomeProjectRow(props: {
            </MenuV2.Content>
          </MenuV2.Portal>
        </MenuV2>
+        <IconButtonV2
+          data-action="home-project-new-session"
+          variant="ghost-muted"
+          size="small"
+          icon={<IconV2 name="edit" />}
+          aria-label={props.language.t("command.session.new")}
+          onClick={() => props.openNewSession(props.server, props.project.worktree)}
+        />
      </div>
    </div>
  )
@@ -810,7 +859,7 @@ function HomeSessionLeading(props: {
        <span
          aria-hidden="true"
          class="pointer-events-none absolute top-1/2 h-[7px] w-[3px] -translate-y-1/2 rounded-[2px] bg-v2-background-bg-layer-04"
-          style={{ right: "calc(100% + 12px)" }}
+          style={{ right: "calc(100% + 5px)" }}
        />
      </Show>
      <SessionTabAvatar
@@ -829,6 +878,7 @@ function HomeSessionSearch(props: {
  open: boolean
  loading: boolean
  results: HomeSessionRecord[]
+  showProjectName: boolean
  server: ServerConnection.Key
  activeServer: boolean
  noResultsLabel: string
@@ -906,12 +956,12 @@ function HomeSessionSearch(props: {
  )

  return (
-    <div class="ml-4 mr-2 w-[calc(100%_-_24px)]">
+    <div class="w-full">
      <div ref={root} data-component="home-session-search" class="relative z-10 w-full">
        <Show when={props.open}>
          <div
            data-component="home-session-search-panel"
-            class="absolute flex flex-col rounded-[12px] bg-v2-background-bg-base shadow-[var(--v2-elevation-floating)]"
+            class="absolute flex flex-col overflow-hidden rounded-[12px] bg-v2-background-bg-base shadow-[var(--v2-elevation-floating)]"
            style={{
              top: "-6px",
              left: "-6px",
@@ -919,7 +969,7 @@ function HomeSessionSearch(props: {
            }}
          >
            <div class="flex flex-col pt-9">
-              <div id={HOME_SESSION_SEARCH_RESULTS_ID} role="listbox" class="flex flex-col gap-4 pt-4 pb-2">
+              <div id={HOME_SESSION_SEARCH_RESULTS_ID} role="listbox" class="flex flex-col gap-4 pt-4">
                <Show
                  when={!props.loading}
                  fallback={
@@ -931,29 +981,32 @@ function HomeSessionSearch(props: {
                  <Show
                    when={props.results.length > 0}
                    fallback={
-                      <p class="my-1.5 px-4 text-[13px] leading-4 tracking-[-0.04px] text-v2-text-text-muted [font-weight:440]">
+                      <p class="my-1.5 px-4 pb-2 text-[13px] leading-4 tracking-[-0.04px] text-v2-text-text-muted [font-weight:440]">
                        {props.noResultsLabel}
                      </p>
                    }
                  >
                    <div class="flex flex-col">
-                      <p class="my-1.5 px-4 text-[13px] leading-4 tracking-[-0.04px] text-v2-text-text-muted [font-weight:440]">
+                      <p class="my-1.5 pl-[18px] pr-6 text-[13px] leading-4 tracking-[-0.04px] text-v2-text-text-muted [font-weight:440]">
                        {language.t("home.sessions.search.sessions")}
                      </p>
-                      <div ref={listRef} class="flex max-h-80 flex-col gap-px overflow-y-auto">
-                        <For each={props.results}>
-                          {(record) => (
-                            <HomeSessionSearchResultRow
-                              record={record}
-                              server={props.server}
-                              activeServer={props.activeServer}
-                              selected={store.active === homeSessionSearchKey(record)}
-                              onHighlight={() => setStore("active", homeSessionSearchKey(record))}
-                              onSelect={(session) => props.onSelect(session)}
-                            />
-                          )}
-                        </For>
-                      </div>
+                      <ScrollView class="max-h-80" viewportRef={(el) => (listRef = el)}>
+                        <div class="flex flex-col gap-px pb-2">
+                          <For each={props.results}>
+                            {(record) => (
+                              <HomeSessionSearchResultRow
+                                record={record}
+                                showProjectName={props.showProjectName}
+                                server={props.server}
+                                activeServer={props.activeServer}
+                                selected={store.active === homeSessionSearchKey(record)}
+                                onHighlight={() => setStore("active", homeSessionSearchKey(record))}
+                                onSelect={(session) => props.onSelect(session)}
+                              />
+                            )}
+                          </For>
+                        </div>
+                      </ScrollView>
                    </div>
                  </Show>
                </Show>
@@ -962,11 +1015,10 @@ function HomeSessionSearch(props: {
          </div>
        </Show>
        <label
-          class="relative z-20 flex h-9 w-full items-center gap-2 rounded-[6px] py-1 pl-3 pr-2 text-v2-icon-icon-muted transition-[background-color,box-shadow] duration-[120ms] ease-in-out"
+          class="relative z-20 flex h-9 w-full items-center gap-2 rounded-[6px] bg-v2-background-bg-layer-02 py-1 pl-3 pr-2 text-v2-icon-icon-muted transition-[background-color,box-shadow] duration-[120ms] ease-in-out"
          classList={{
-            "bg-v2-background-bg-layer-03 focus-within:bg-v2-background-bg-layer-03 focus-within:shadow-[0_0_0_0.5px_var(--v2-border-border-focus),var(--v2-elevation-raised)]":
-              !props.open,
-            "bg-transparent shadow-[0_0_0_0.5px_var(--v2-border-border-focus)]": props.open,
+            "focus-within:shadow-[0_0_0_0.5px_var(--v2-border-border-focus),var(--v2-elevation-raised)]": !props.open,
+            "shadow-[0_0_0_0.5px_var(--v2-border-border-focus)]": props.open,
          }}
        >
          <IconV2 name="magnifying-glass" />
@@ -1031,6 +1083,7 @@ function HomeSessionSearch(props: {

 function HomeSessionSearchResultRow(props: {
  record: HomeSessionRecord
+  showProjectName: boolean
  server: ServerConnection.Key
  activeServer: boolean
  selected: boolean
@@ -1038,6 +1091,7 @@ function HomeSessionSearchResultRow(props: {
  onSelect: (session: Session) => void
 }) {
  const title = createMemo(() => sessionTitle(props.record.session.title) || props.record.session.id)
+  const showProjectName = () => props.showProjectName && props.record.projectName

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

@@ -1064,11 +1118,11 @@ function HomeSessionSearchResultRow(props: {
      />
      <div class="flex min-w-0 flex-1 items-center gap-1.5">
        <span
-          class={`${HOME_SEARCH_RESULT_TITLE} ${props.record.projectName ? "max-w-[min(70%,480px)] flex-[0_1_auto]" : "flex-[1_1_auto]"}`}
+          class={`${HOME_SEARCH_RESULT_TITLE} ${showProjectName() ? "max-w-[min(70%,480px)] flex-[0_1_auto]" : "flex-[1_1_auto]"}`}
        >
          {title()}
        </span>
-        <Show when={props.record.projectName}>
+        <Show when={showProjectName()}>
          <span class={HOME_SEARCH_RESULT_META}>{props.record.projectName}</span>
        </Show>
      </div>
@@ -1079,7 +1133,7 @@ function HomeSessionSearchResultRow(props: {
 function HomeSessionGroupHeader(props: { title: string; onNewSession?: () => void }) {
  const language = useLanguage()
  return (
-    <div class="flex h-7 min-w-0 items-center justify-between pl-4 pr-2">
+    <div class="flex h-7 min-w-0 items-center justify-between pl-[18px]">
      <div class={HOME_SECTION_LABEL}>{props.title}</div>
      <Show when={props.onNewSession}>
        {(onNewSession) => (
@@ -1101,36 +1155,81 @@ function HomeSessionGroupHeader(props: { title: string; onNewSession?: () => voi

 function HomeSessionRow(props: {
  record: HomeSessionRecord
+  showProjectName: boolean
  server: ServerConnection.Key
  activeServer: boolean
-  onClick: () => void
+  openSession: (session: Session) => void
+  archiveSession: (session: Session) => Promise<void>
 }) {
+  const language = useLanguage()
  const title = createMemo(() => sessionTitle(props.record.session.title) || props.record.session.id)
+  const showProjectName = () => props.showProjectName && props.record.projectName

  return (
-    <button
-      type="button"
-      data-component="home-session-row"
-      class={`${HOME_ROW} h-10 gap-2 px-6 py-3 pl-4`}
-      onClick={props.onClick}
-    >
-      <HomeSessionLeading
-        project={props.record.project}
-        session={props.record.session}
-        server={props.server}
-        activeServer={props.activeServer}
-      />
-      <span
-        class={`min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-v2-text-text-base [font-weight:530] ${props.record.projectName ? "max-w-[min(70%,480px)] flex-[0_1_auto]" : "flex-[1_1_auto]"}`}
+    <div class="group/session relative flex h-10 min-w-0 items-center rounded-[6px]">
+      <button
+        type="button"
+        data-component="home-session-row"
+        class={`${HOME_ROW} h-10 min-w-0 flex-1 gap-2 py-3 pl-3 pr-10`}
+        onClick={() => props.openSession(props.record.session)}
      >
-        {title()}
-      </span>
-      <Show when={props.record.projectName}>
-        <span class="min-w-0 flex-[1_1_auto] overflow-hidden text-ellipsis whitespace-nowrap text-v2-text-text-muted [font-weight:440]">
-          {props.record.projectName}
+        <HomeSessionLeading
+          project={props.record.project}
+          session={props.record.session}
+          server={props.server}
+          activeServer={props.activeServer}
+        />
+        <span
+          class={`min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-v2-text-text-base [font-weight:530] ${showProjectName() ? "max-w-[min(70%,480px)] flex-[0_1_auto]" : "flex-[1_1_auto]"}`}
+        >
+          {title()}
        </span>
+        <Show when={showProjectName()}>
+          <span class="min-w-0 flex-[1_1_auto] overflow-hidden text-ellipsis whitespace-nowrap text-v2-text-text-muted [font-weight:440]">
+            {props.record.projectName}
+          </span>
+        </Show>
+      </button>
+      <Show when={SHOW_HOME_SESSION_ARCHIVE}>
+        <div class="hover-reveal absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center gap-1 group-hover/session:opacity-100 focus-within:opacity-100">
+          <TooltipV2 class="flex shrink-0 items-center" placement="bottom" value={language.t("common.archive")}>
+            <IconButtonV2
+              data-action="home-session-archive"
+              variant="ghost-muted"
+              size="large"
+              icon={<IconV2 name="archive" />}
+              aria-label={language.t("common.archive")}
+              onClick={(event) => {
+                event.preventDefault()
+                event.stopPropagation()
+                void props.archiveSession(props.record.session)
+              }}
+            />
+          </TooltipV2>
+        </div>
      </Show>
-    </button>
+    </div>
+  )
+}
+
+function HomeSessionsEmpty(props: { onNewSession?: () => void }) {
+  const language = useLanguage()
+  return (
+    <div class="flex min-h-full flex-col items-center gap-4 px-6 pt-[52px] text-center">
+      <div class="shrink-0 text-[13px] leading-[13px] tracking-[-0.04px] text-v2-text-text-base [font-weight:530]">
+        {language.t("home.sessions.empty")}
+      </div>
+      <p class="mb-1 text-center text-[13px] leading-5 tracking-[-0.04px] text-v2-text-text-muted [font-weight:440]">
+        {language.t("home.sessions.empty.description")}
+      </p>
+      <Show when={props.onNewSession}>
+        {(onNewSession) => (
+          <ButtonV2 data-action="home-new-session" variant="neutral" size="normal" icon="edit" onClick={onNewSession()}>
+            {language.t("command.session.new")}
+          </ButtonV2>
+        )}
+      </Show>
+    </div>
  )
 }

@@ -1182,6 +1281,7 @@ export function LegacyHome() {
  const server = useServer()
  const language = useLanguage()
  const homedir = createMemo(() => sync().data.path.home)
+  const serverUnreachable = createMemo(() => global.servers.health[server.key]?.healthy === false)
  const recent = createMemo(() => {
    return sync()
      .data.project.slice()
@@ -1204,6 +1304,7 @@ export function LegacyHome() {
  }

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

@@ -1247,7 +1348,13 @@ export function LegacyHome() {
          <div class="mt-20 w-full flex flex-col gap-4">
            <div class="flex gap-2 items-center justify-between pl-3">
              <div class="text-14-medium text-text-strong">{language.t("home.recentProjects")}</div>
-              <Button icon="folder-add-left" size="normal" class="pl-2 pr-3" onClick={chooseProject}>
+              <Button
+                icon="folder-add-left"
+                size="normal"
+                class="pl-2 pr-3"
+                disabled={serverUnreachable()}
+                onClick={chooseProject}
+              >
                {language.t("command.project.open")}
              </Button>
            </div>
@@ -1273,7 +1380,7 @@ export function LegacyHome() {
        <Match when={!sync().ready}>
          <div class="mt-30 mx-auto flex flex-col items-center gap-3">
            <div class="text-12-regular text-text-weak">{language.t("common.loading")}</div>
-            <Button class="px-3" onClick={chooseProject}>
+            <Button class="px-3" disabled={serverUnreachable()} onClick={chooseProject}>
              {language.t("command.project.open")}
            </Button>
          </div>
@@ -1285,7 +1392,7 @@ export function LegacyHome() {
              <div class="text-14-medium text-text-strong">{language.t("home.empty.title")}</div>
              <div class="text-12-regular text-text-weak">{language.t("home.empty.description")}</div>
            </div>
-            <Button class="px-3 mt-1" onClick={chooseProject}>
+            <Button class="px-3 mt-1" disabled={serverUnreachable()} onClick={chooseProject}>
              {language.t("command.project.open")}
            </Button>
          </div>
@@ -1,26 +1,18 @@
 import { createEffect, Suspense, type ParentProps } from "solid-js"
-import { useNavigate, useParams } from "@solidjs/router"
+import { useNavigate } from "@solidjs/router"
 import { DebugBar } from "@/components/debug-bar"
 import { HelpButton } from "@/components/help-button"
 import { Titlebar, type TitlebarUpdate } from "@/components/titlebar"
-import { useNotification } from "@/context/notification"
 import { usePlatform } from "@/context/platform"
 import { setNavigate } from "@/utils/notification-click"
 import { setV2Toast, ToastRegion } from "@/utils/toast"

 export default function NewLayout(props: ParentProps) {
  const platform = usePlatform()
-  const notification = useNotification()
  const navigate = useNavigate()
-  const params = useParams<{ id?: string }>()
  setNavigate(navigate)

  createEffect(() => setV2Toast(true))
-  createEffect(() => {
-    if (!notification.ready() || !params.id) return
-    if (notification.session.unseenCount(params.id) === 0) return
-    notification.session.markViewed(params.id)
-  })

  const update: TitlebarUpdate = {
    version: () => {
@@ -20,6 +20,7 @@ import { base64Encode } from "@opencode-ai/core/util/encode"
 import { decode64 } from "@/utils/base64"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Button } from "@opencode-ai/ui/button"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
@@ -2115,7 +2116,6 @@ export default function LegacyLayout(props: ParentProps) {
                      <div class="shrink-0 py-4">
                        <Button
                          size="large"
-                          icon="new-session"
                          class="w-full"
                          onClick={() => {
                            const dir = worktree()
@@ -2123,6 +2123,7 @@ export default function LegacyLayout(props: ParentProps) {
                            navigateWithSidebarReset(`/${base64Encode(dir)}/session`)
                          }}
                        >
+                          <IconV2 name="edit" size="small" />
                          {language.t("command.session.new")}
                        </Button>
                      </div>
@@ -2,6 +2,7 @@ import { getFilename } from "@opencode-ai/core/util/path"
 import { type Session } from "@opencode-ai/sdk/v2/client"
 import { pathKey } from "@/utils/path-key"
 import type { ServerConnection } from "@/context/server"
+import type { HomeProjectSelection } from "@/context/layout"

 type SessionStore = {
  session?: Session[]
@@ -56,8 +57,6 @@ export const childSessionOnPath = (sessions: Session[] | undefined, rootID: stri
 export const displayName = (project: { name?: string; worktree: string }) =>
  project.name || getFilename(project.worktree) || project.worktree

-export type HomeProjectSelection = { server: ServerConnection.Key; directory?: string }
-
 export function toggleHomeProjectSelection(
  current: HomeProjectSelection | undefined,
  server: ServerConnection.Key,
@@ -27,7 +27,17 @@ export function SessionTabAvatar(props: {
        />
      }
    >
-      <SessionProgressIndicatorV2 class="shrink-0" />
+      <span class="relative block size-4 shrink-0">
+        <SessionProgressIndicatorV2 class="absolute inset-0 group-hover:invisible" />
+        <span class="invisible absolute inset-0 group-hover:visible">
+          <ProjectAvatar
+            fallback={displayName(props.project ?? { worktree: props.directory })}
+            src={getProjectAvatarSource(props.project?.id, props.project?.icon)}
+            variant={getProjectAvatarVariant(props.project?.icon?.color)}
+            unread={state.unread()}
+          />
+        </span>
+      </span>
    </Show>
  )
 }
@@ -1,6 +1,7 @@
 import type { Session } from "@opencode-ai/sdk/v2/client"
 import { Avatar } from "@opencode-ai/ui/avatar"
 import { Icon } from "@opencode-ai/ui/icon"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
@@ -300,7 +301,7 @@ export const NewSessionItem = (props: {
      }}
    >
      <div class="shrink-0 size-6 flex items-center justify-center">
-        <Icon name="new-session" size="small" class="text-icon-weak" />
+        <IconV2 name="edit" size="small" class="text-icon-weak" />
      </div>
      <span class="text-14-regular text-text-strong min-w-0 flex-1 truncate">{label}</span>
    </A>
@@ -10,6 +10,8 @@ import { Collapsible } from "@opencode-ai/ui/collapsible"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { type Session } from "@opencode-ai/sdk/v2/client"
@@ -214,9 +216,10 @@ const WorkspaceActions = (props: {
    </DropdownMenu>
    <Show when={!props.touch()}>
      <Tooltip value={props.language.t("command.session.new")} placement="top">
-        <IconButton
-          icon="new-session"
+        <IconButtonV2
+          icon={<IconV2 name="edit" size="small" />}
          variant="ghost"
+          size="small"
          class="size-6 rounded-md opacity-0 pointer-events-none group-hover/workspace:opacity-100 group-hover/workspace:pointer-events-auto group-focus-within/workspace:opacity-100 group-focus-within/workspace:pointer-events-auto"
          data-action="workspace-new-session"
          data-workspace={base64Encode(props.directory)}
@@ -1,18 +1,27 @@
-import { createEffect, createMemo, onMount, untrack } from "solid-js"
+import { Show, createEffect, createMemo, createResource, untrack } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useSearchParams } from "@solidjs/router"
 import { NewSessionDesignView } from "@/components/session"
+import { PromptInput } from "@/components/prompt-input"
+import { useSettingsCommand } from "@/components/settings-dialog"
+import {
+  PromptProjectAddButton,
+  PromptProjectSelector,
+  createPromptProjectController,
+} from "@/components/prompt-project-selector"
 import { useComments } from "@/context/comments"
 import { usePrompt } from "@/context/prompt"
 import { useSDK } from "@/context/sdk"
 import { useSync } from "@/context/sync"
 import { useServerSync } from "@/context/server-sync"
-import {
-  createSessionComposerControls,
-  createSessionComposerState,
-  SessionComposerRegion,
-} from "@/pages/session/composer"
+import { useLanguage } from "@/context/language"
+import { createPromptInputController, createPromptProjectControls } from "@/pages/session/composer"
 import { useSessionKey } from "@/pages/session/session-layout"
+import { useComposerCommands } from "@/pages/session/use-composer-commands"
+import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
+import { PromptWorkspaceSelector } from "@/components/prompt-workspace-selector"
+
+const showWorkspaceBar = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"

 /**
 * The `/new-session` draft page. Unlike `session.tsx`, this only renders the prompt
@@ -25,28 +34,41 @@ export default function NewSessionPage() {
  const sync = useSync()
  const serverSync = useServerSync()
  const comments = useComments()
+  const language = useLanguage()
  const route = useSessionKey()
-  const [searchParams, setSearchParams] = useSearchParams<{ prompt?: string }>()
+  const [searchParams, setSearchParams] = useSearchParams<{ draftId?: string; prompt?: string }>()
+
+  useComposerCommands()
+  useSettingsCommand()

  let inputRef: HTMLDivElement | undefined

-  const composer = createSessionComposerState()
-  const composerControls = createSessionComposerControls({
+  const inputController = createPromptInputController({
    sessionKey: route.sessionKey,
    sessionID: () => route.params.id,
    queryOptions: serverSync().queryOptions,
  })
-
-  const [store, setStore] = createStore({
-    worktree: "main",
+  const projectControls = createPromptProjectControls()
+  const projectController = createPromptProjectController({
+    controls: projectControls,
+    onDone: () => inputRef?.focus(),
  })

+  const [store, setStore] = createStore<{ worktree?: string }>({})
+
  const newSessionWorktree = createMemo(() => {
-    if (store.worktree === "create") return "create"
+    if (store.worktree) return store.worktree
    const project = sync().project
    if (project && sdk().directory !== project.worktree) return sdk().directory
    return "main"
  })
+  const projectRoot = createMemo(() => sync().project?.worktree ?? sdk().directory)
+  const localBranch = createMemo(() => serverSync().child(projectRoot())[0].vcs?.branch)
+  const selectedBranch = createMemo(() => {
+    const worktree = newSessionWorktree()
+    if (worktree === "main" || worktree === "create") return localBranch()
+    return serverSync().child(worktree)[0].vcs?.branch ?? localBranch()
+  })

  createEffect(() => {
    if (!prompt.ready()) return
@@ -58,9 +80,15 @@ export default function NewSessionPage() {
    })
  })

-  onMount(() => {
+  createEffect(() => {
+    if (!prompt.ready()) return
    requestAnimationFrame(() => inputRef?.focus())
  })
+  const ready = Promise.resolve()
+  const [promptReady] = createResource(
+    () => prompt.ready.promise ?? ready,
+    (promise) => promise.then(() => true),
+  )

  return (
    <div class="relative size-full overflow-hidden flex flex-col">
@@ -68,26 +96,65 @@ export default function NewSessionPage() {
        <div class="@container relative flex flex-col min-h-0 h-full bg-background-stronger flex-1">
          <div class="flex-1 min-h-0 overflow-hidden rounded-[10px]">
            <NewSessionDesignView>
-              <SessionComposerRegion
-                state={composer}
-                sessionKey={route.sessionKey()}
-                sessionID={route.params.id}
-                controls={composerControls()}
-                promptInput={{
-                  ref: (el) => {
-                    inputRef = el
-                  },
-                  newSessionWorktree: newSessionWorktree(),
-                  onNewSessionWorktreeReset: () => setStore("worktree", "main"),
-                  onSubmit: () => comments.clear(),
-                }}
-                todo={{ collapsed: false, onToggle: () => {} }}
-                ready
-                centered={false}
-                placement="inline"
-                onResponseSubmit={() => {}}
-                setPromptDockRef={() => {}}
-              />
+              <div class={NEW_SESSION_CONTENT_WIDTH}>
+                <Show
+                  when={prompt.ready() || promptReady()}
+                  fallback={
+                    <div class="w-full min-h-32 md:min-h-40 rounded-md border border-border-weak-base bg-background-base/50 px-4 py-3 text-text-weak pointer-events-none">
+                      {language.t("prompt.loading")}
+                    </div>
+                  }
+                >
+                  <div class="flex flex-col" classList={{ "gap-8": showWorkspaceBar, "gap-3": !showWorkspaceBar }}>
+                    <PromptInput
+                      controls={inputController()}
+                      variant="new-session"
+                      ref={(el) => {
+                        inputRef = el
+                      }}
+                      newSessionWorktree={newSessionWorktree()}
+                      onNewSessionWorktreeReset={() => setStore("worktree", undefined)}
+                      onSubmit={() => comments.clear()}
+                      toolbar={
+                        <Show when={!projectController.selected()}>
+                          <PromptProjectAddButton controller={projectController} />
+                        </Show>
+                      }
+                    />
+                    <Show when={projectController.selected()}>
+                      <div
+                        class="flex min-h-7 min-w-0 items-center gap-0 text-v2-text-text-faint"
+                        classList={{
+                          "flex-col justify-center sm:flex-row": showWorkspaceBar,
+                          "justify-start": !showWorkspaceBar,
+                        }}
+                      >
+                        <PromptProjectSelector
+                          controller={projectController}
+                          placement={showWorkspaceBar ? "bottom" : "bottom-start"}
+                        />
+                        <Show when={showWorkspaceBar}>
+                          <PromptWorkspaceSelector
+                            value={newSessionWorktree()}
+                            projectRoot={projectRoot()}
+                            workspaces={sync().project?.sandboxes ?? []}
+                            branch={selectedBranch()}
+                            onChange={(value) =>
+                              setStore(
+                                "worktree",
+                                value === "main" && sync().project?.worktree !== sdk().directory
+                                  ? sync().project?.worktree
+                                  : value,
+                              )
+                            }
+                            onDone={() => inputRef?.focus()}
+                          />
+                        </Show>
+                      </div>
+                    </Show>
+                  </div>
+                </Show>
+              </div>
            </NewSessionDesignView>
          </div>
        </div>
@@ -42,10 +42,13 @@ import { useServerSDK } from "@/context/server-sdk"
 import { useSettings } from "@/context/settings"
 import { useSync } from "@/context/sync"
 import { useTerminal } from "@/context/terminal"
+import { PromptInput } from "@/components/prompt-input"
+import { useSettingsCommand } from "@/components/settings-dialog"
 import { type FollowupDraft, sendFollowupDraft } from "@/components/prompt-input/submit"
 import {
-  createSessionComposerControls,
-  createSessionComposerState,
+  createPromptInputController,
+  createSessionComposerController,
+  createSessionComposerRegionController,
  SessionComposerRegion,
 } from "@/pages/session/composer"
 import {
@@ -63,6 +66,7 @@ import { useSessionLayout } from "@/pages/session/session-layout"
 import { syncSessionModel } from "@/pages/session/session-model-helpers"
 import { SessionSidePanel } from "@/pages/session/session-side-panel"
 import { TerminalPanel } from "@/pages/session/terminal-panel"
+import { useComposerCommands } from "@/pages/session/use-composer-commands"
 import { useSessionCommands } from "@/pages/session/use-session-commands"
 import { useSessionHashScroll } from "@/pages/session/use-session-hash-scroll"
 import { Identifier } from "@/utils/id"
@@ -155,8 +159,8 @@ export default function Page() {
    },
  })

-  const composer = createSessionComposerState()
-  const composerControls = createSessionComposerControls({
+  const composer = createSessionComposerController()
+  const inputController = createPromptInputController({
    sessionKey,
    sessionID: () => params.id,
    queryOptions: serverSync().queryOptions,
@@ -783,6 +787,8 @@ export default function Page() {
    inputRef?.focus()
  }

+  useComposerCommands()
+  useSettingsCommand()
  useSessionCommands({
    navigateMessageByOffset,
    setActiveMessage,
@@ -902,7 +908,13 @@ export default function Page() {
  )

  const reviewPanel = () => (
-    <div class="flex flex-col h-full overflow-hidden bg-background-stronger contain-strict">
+    <div
+      classList={{
+        "flex flex-col h-full overflow-hidden contain-strict": true,
+        "bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
+        "bg-background-stronger": !settings.general.newLayoutDesigns(),
+      }}
+    >
      <div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
        {reviewContent({
          diffStyle: layout.review.diffStyle(),
@@ -1567,62 +1579,28 @@ export default function Page() {

  useUsageExceededDialogs()

-  const composerRegion = (placement: "dock" | "inline") => (
-    <SessionComposerRegion
-      state={composer}
-      sessionKey={sessionKey()}
-      sessionID={params.id}
-      controls={composerControls()}
-      promptInput={{
-        ref: (el) => {
-          inputRef = el
-        },
-        newSessionWorktree: newSessionWorktree(),
-        onNewSessionWorktreeReset: () => setStore("newSessionWorktree", "main"),
-        onSubmit: () => {
-          comments.clear()
-          resumeScroll()
-        },
-      }}
-      todo={{
-        collapsed: view().todoCollapsed.get(),
+  const composerRegion = () => {
+    const controller = createSessionComposerRegionController({
+      state: composer,
+      sessionKey,
+      sessionID: () => params.id,
+      prompt,
+      ready: () => !store.deferRender && messagesReady(),
+      centered,
+      todo: {
+        collapsed: () => view().todoCollapsed.get(),
        onToggle: () => view().todoCollapsed.set(!view().todoCollapsed.get()),
-      }}
-      ready={!store.deferRender && messagesReady()}
-      centered={placement === "dock" && centered()}
-      placement={placement}
-      openParent={() => {
-        const id = info()?.parentID
-        if (!id) return
-        navigate(
-          params.serverKey
-            ? sessionHref(requireServerKey(params.serverKey), id)
-            : legacySessionHref(sdk().directory, id),
-        )
-      }}
-      onResponseSubmit={resumeScroll}
-      followup={
+      },
+      followup: () =>
        params.id && !isChildSession()
          ? {
-              queue: queueEnabled,
              items: followupDock(),
              sending: sendingFollowup(),
-              edit: editingFollowup(),
-              onQueue: queueFollowup,
-              onAbort: () => {
-                const id = params.id
-                if (!id) return
-                setFollowup("paused", id, true)
-              },
-              onSend: (id) => {
-                void sendFollowup(params.id!, id, { manual: true })
-              },
+              onSend: (id) => void sendFollowup(params.id!, id, { manual: true }),
              onEdit: editFollowup,
-              onEditLoaded: clearFollowupEdit,
            }
-          : undefined
-      }
-      revert={
+          : undefined,
+      revert: () =>
        rolled().length > 0
          ? {
              items: rolled(),
@@ -1630,13 +1608,53 @@ export default function Page() {
              disabled: reverting(),
              onRestore: restore,
            }
-          : undefined
-      }
-      setPromptDockRef={(el) => {
+          : undefined,
+      onResponseSubmit: resumeScroll,
+      openParent: () => {
+        const id = info()?.parentID
+        if (!id) return
+        navigate(
+          params.serverKey
+            ? sessionHref(requireServerKey(params.serverKey), id)
+            : legacySessionHref(sdk().directory, id),
+        )
+      },
+      setPromptRef: (el) => {
+        inputRef = el
+      },
+      setDockRef: (el) => {
        promptDock = el
-      }}
-    />
-  )
+      },
+    })
+    return (
+      <SessionComposerRegion
+        controller={controller}
+        promptInput={
+          <PromptInput
+            controls={inputController()}
+            ref={(el) => {
+              inputRef = el
+            }}
+            newSessionWorktree={newSessionWorktree()}
+            onNewSessionWorktreeReset={() => setStore("newSessionWorktree", "main")}
+            onSubmit={() => {
+              comments.clear()
+              resumeScroll()
+            }}
+            edit={editingFollowup()}
+            onEditLoaded={clearFollowupEdit}
+            shouldQueue={queueEnabled}
+            onQueue={queueFollowup}
+            onAbort={() => {
+              const id = params.id
+              if (!id) return
+              setFollowup("paused", id, true)
+            }}
+          />
+        }
+      />
+    )
+  }

  const mobileTabs = (compact = false, bottom = false) => (
    <Tabs value={store.mobileTab} class="h-auto">
@@ -1701,7 +1719,9 @@ export default function Page() {
        >
          <div
            classList={{
-              "flex-1 min-h-0 flex flex-col bg-background-stronger": true,
+              "flex-1 min-h-0 flex flex-col": true,
+              "bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
+              "bg-background-stronger": !settings.general.newLayoutDesigns(),
              "rounded-[10px] overflow-hidden": settings.general.newLayoutDesigns(),
              "shadow-[var(--v2-elevation-raised)]": settings.general.newLayoutDesigns() && !!params.id,
            }}
@@ -1773,7 +1793,7 @@ export default function Page() {
              </Switch>
            </div>

-            <Show when={(params.id || !newSessionDesign()) && !mobileChanges()}>{composerRegion("dock")}</Show>
+            <Show when={(params.id || !newSessionDesign()) && !mobileChanges()}>{(_) => composerRegion()}</Show>
            <Show when={!!params.id && mobileTabsBottom()}>{mobileTabs(true, true)}</Show>
          </div>

@@ -1,3 +1,4 @@
 export { SessionComposerRegion } from "./session-composer-region"
-export { createSessionComposerControls } from "./session-composer-controls"
-export { createSessionComposerState } from "./session-composer-state"
+export { createPromptInputController, createPromptProjectControls } from "./session-composer-controls"
+export { createSessionComposerController } from "./session-composer-state"
+export { createSessionComposerRegionController } from "./session-composer-region-controller"
@@ -3,88 +3,37 @@ import { createQuery } from "@tanstack/solid-query"
 import { useNavigate, useSearchParams } from "@solidjs/router"
 import { type Accessor, createMemo } from "solid-js"
 import type { PromptInputControls } from "@/components/prompt-input"
+import type { PromptProjectControls } from "@/components/prompt-project-selector"
 import { useDirectoryPicker } from "@/components/directory-picker"
 import { useGlobal } from "@/context/global"
 import { useLayout } from "@/context/layout"
 import { useLocal } from "@/context/local"
 import type { QueryOptionsApi } from "@/context/server-sync"
-import { ServerConnection, useServer } from "@/context/server"
+import { useServerSDK } from "@/context/server-sdk"
+import { serverName, ServerConnection, useServer } from "@/context/server"
 import { useSDK } from "@/context/sdk"
 import { useSettings } from "@/context/settings"
 import { useSync } from "@/context/sync"
-import { type DraftTab, useTabs } from "@/context/tabs"
+import { useTabs } from "@/context/tabs"
 import { useProviders } from "@/hooks/use-providers"
 import { pathKey } from "@/utils/path-key"

-export function createSessionComposerControls(input: {
+export function createPromptInputController(input: {
  sessionKey: Accessor<string>
  sessionID: Accessor<string | undefined>
  queryOptions: Pick<QueryOptionsApi, "agents" | "providers">
 }) {
-  const navigate = useNavigate()
  const layout = useLayout()
  const local = useLocal()
  const providers = useProviders()
  const settings = useSettings()
-  const server = useServer()
  const sync = useSync()
  const sdk = useSDK()
-  const tabs = useTabs()
-  const global = useGlobal()
-  const pickDirectory = useDirectoryPicker()
-  const [search] = useSearchParams<{ draftId?: string }>()
  const view = layout.view(input.sessionKey)
-
-  const draft = createMemo(() => {
-    if (!search.draftId) return
-    return tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === search.draftId)
-  })
-  const projectServer = createMemo(() => {
-    if (!search.draftId) return server.current
-    const target = draft()?.server
-    if (!target) return
-    return server.list.find((conn) => ServerConnection.key(conn) === target)
-  })
-  const projectServerCtx = createMemo(() => {
-    const conn = projectServer()
-    if (conn) return global.ensureServerCtx(conn)
-  })
-  const projects = createMemo(() =>
-    search.draftId ? (projectServerCtx()?.projects.list() ?? []) : layout.projects.list(),
-  )
  const agentsQuery = createQuery(() => input.queryOptions.agents(pathKey(sdk().directory)))
  const globalProvidersQuery = createQuery(() => input.queryOptions.providers(null))
  const providersQuery = createQuery(() => input.queryOptions.providers(pathKey(sdk().directory)))

-  const selectProject = (worktree: string) => {
-    const conn = projectServer()
-    const target = projectServerCtx()
-    if (search.draftId) {
-      if (!conn || !target) return
-      target.projects.open(worktree)
-      target.projects.touch(worktree)
-      tabs.updateDraft(search.draftId, { server: ServerConnection.key(conn), directory: worktree })
-      return
-    }
-
-    layout.projects.open(worktree)
-    server.projects.touch(worktree)
-    navigate(`/${base64Encode(worktree)}/session`)
-  }
-
-  const addProject = (title: string) => {
-    const conn = projectServer()
-    if (!conn) return
-    pickDirectory({
-      server: conn,
-      title,
-      onSelect: (result) => {
-        const directory = Array.isArray(result) ? result[0] : result
-        if (directory) selectProject(directory)
-      },
-    })
-  }
-
  return createMemo<PromptInputControls>(() => ({
    agents: {
      available: sync().data.agent,
@@ -99,12 +48,6 @@ export function createSessionComposerControls(input: {
      paid: providers.paid().length > 0,
      loading: agentsQuery.isLoading || providersQuery.isLoading || globalProvidersQuery.isLoading,
    },
-    projects: {
-      available: projects(),
-      directory: sdk().directory,
-      select: selectProject,
-      add: addProject,
-    },
    session: {
      id: input.sessionID(),
      tabs: layout.tabs(input.sessionKey),
@@ -113,3 +56,75 @@ export function createSessionComposerControls(input: {
    newLayoutDesigns: settings.general.newLayoutDesigns(),
  }))
 }
+
+export function createPromptProjectControls() {
+  const navigate = useNavigate()
+  const layout = useLayout()
+  const server = useServer()
+  const serverSDK = useServerSDK()
+  const sdk = useSDK()
+  const tabs = useTabs()
+  const global = useGlobal()
+  const pickDirectory = useDirectoryPicker()
+  const [search] = useSearchParams<{ draftId?: string }>()
+  const projectServer = () => serverSDK().server
+  const projectServerCtx = createMemo(() => global.ensureServerCtx(projectServer()))
+  const projects = createMemo(() => {
+    if (server.list.length <= 1) {
+      return search.draftId ? projectServerCtx().projects.list() : layout.projects.list()
+    }
+    return server.list.flatMap((conn) => {
+      const item = { key: ServerConnection.key(conn), name: serverName(conn) }
+      return global
+        .ensureServerCtx(conn)
+        .projects.list()
+        .map((project) => ({ ...project, server: item }))
+    })
+  })
+  const selectProject = (worktree: string, serverKey?: string) => {
+    const conn = serverKey ? server.list.find((conn) => ServerConnection.key(conn) === serverKey) : projectServer()
+    if (search.draftId) {
+      if (!conn) return
+      const target = global.ensureServerCtx(conn)
+      target.projects.open(worktree)
+      target.projects.touch(worktree)
+      tabs.updateDraft(search.draftId, { server: ServerConnection.key(conn), directory: worktree })
+      return
+    }
+
+    if (!serverKey) {
+      layout.projects.open(worktree)
+      server.projects.touch(worktree)
+      navigate(`/${base64Encode(worktree)}/session`)
+      return
+    }
+
+    if (!conn) return
+    const target = global.ensureServerCtx(conn)
+    target.projects.open(worktree)
+    target.projects.touch(worktree)
+    server.setActive(ServerConnection.key(conn))
+    navigate(`/${base64Encode(worktree)}/session`)
+  }
+
+  const addProject = (title: string, serverKey?: string) => {
+    const conn = serverKey ? server.list.find((conn) => ServerConnection.key(conn) === serverKey) : projectServer()
+    if (!conn) return
+    pickDirectory({
+      server: conn,
+      title,
+      onSelect: (result) => {
+        const directory = Array.isArray(result) ? result[0] : result
+        if (directory) selectProject(directory, serverKey)
+      },
+    })
+  }
+
+  return createMemo<PromptProjectControls>(() => ({
+    available: projects(),
+    directory: sdk().directory,
+    server: server.list.length > 1 ? ServerConnection.key(projectServer()) : undefined,
+    select: selectProject,
+    add: addProject,
+  }))
+}
@@ -0,0 +1,145 @@
+import { createResizeObserver } from "@solid-primitives/resize-observer"
+import { useSpring } from "@opencode-ai/ui/motion-spring"
+import { type Accessor, createEffect, createMemo, createResource, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import type { PromptInputState } from "@/components/prompt-input"
+import { useSync } from "@/context/sync"
+import { getSessionHandoff, setSessionHandoff } from "@/pages/session/handoff"
+import type { SessionComposerController } from "./session-composer-state"
+
+export type SessionComposerFollowupDock = {
+  items: { id: string; text: string }[]
+  sending?: string
+  onSend: (id: string) => void
+  onEdit: (id: string) => void
+}
+
+export type SessionComposerRevertDock = {
+  items: { id: string; text: string }[]
+  restoring?: string
+  disabled?: boolean
+  onRestore: (id: string) => void
+}
+
+export function createSessionComposerRegionController(input: {
+  state: SessionComposerController
+  sessionKey: Accessor<string>
+  sessionID: Accessor<string | undefined>
+  prompt: PromptInputState
+  ready: Accessor<boolean>
+  centered: Accessor<boolean>
+  todo: {
+    collapsed: Accessor<boolean>
+    onToggle: () => void
+  }
+  followup: Accessor<SessionComposerFollowupDock | undefined>
+  revert: Accessor<SessionComposerRevertDock | undefined>
+  onResponseSubmit: () => void
+  openParent: () => void
+  setPromptRef: (el: HTMLDivElement) => void
+  setDockRef: (el: HTMLDivElement) => void
+}) {
+  const sync = useSync()
+  const [store, setStore] = createStore({
+    ready: input.ready() || input.state.dock(),
+    height: 320,
+    body: undefined as HTMLDivElement | undefined,
+  })
+  let timer: number | undefined
+  let frame: number | undefined
+
+  const clear = () => {
+    if (timer !== undefined) window.clearTimeout(timer)
+    if (frame !== undefined) cancelAnimationFrame(frame)
+    timer = undefined
+    frame = undefined
+  }
+
+  createEffect(() => {
+    input.sessionKey()
+    const ready = input.ready()
+    const dock = input.state.dock()
+
+    clear()
+    if (store.ready || (!ready && !dock)) return
+    if (dock) {
+      setStore("ready", true)
+      return
+    }
+
+    frame = requestAnimationFrame(() => {
+      frame = undefined
+      timer = window.setTimeout(() => {
+        setStore("ready", true)
+        timer = undefined
+      }, 140)
+    })
+  })
+
+  createEffect(() => {
+    if (!input.prompt.ready()) return
+    setSessionHandoff(input.sessionKey(), {
+      prompt: input.prompt
+        .current()
+        .map((part) => {
+          if (part.type === "file") return `[file:${part.path}]`
+          if (part.type === "agent") return `@${part.name}`
+          if (part.type === "image") return `[image:${part.filename}]`
+          return part.content
+        })
+        .join("")
+        .trim(),
+    })
+  })
+
+  createEffect(() => {
+    const el = store.body
+    if (!el) return
+    const update = () => setStore("height", el.getBoundingClientRect().height)
+    createResizeObserver(el, update)
+    update()
+  })
+
+  onCleanup(clear)
+
+  const parentID = createMemo(() => {
+    const id = input.sessionID()
+    return id ? sync().session.get(id)?.parentID : undefined
+  })
+  const open = createMemo(() => store.ready && input.state.dock() && !input.state.closing())
+  const progress = useSpring(
+    () => (open() ? 1 : 0),
+    { visualDuration: 0.3, bounce: 0 },
+    () => `${input.sessionKey()}\0${store.ready}`,
+  )
+  const value = createMemo(() => Math.max(0, Math.min(1, progress())))
+  const ready = Promise.resolve()
+  const [promptReady] = createResource(
+    () => input.prompt.ready.promise ?? ready,
+    (promise) => promise.then(() => true),
+  )
+
+  return {
+    state: input.state,
+    centered: input.centered,
+    todo: input.todo,
+    followup: input.followup,
+    revert: input.revert,
+    onResponseSubmit: input.onResponseSubmit,
+    openParent: input.openParent,
+    setPromptRef: input.setPromptRef,
+    setDockRef: input.setDockRef,
+    parentID,
+    child: () => !!parentID(),
+    showComposer: () => !input.state.blocked() || !!parentID(),
+    handoffPrompt: () => getSessionHandoff(input.sessionKey())?.prompt,
+    promptReady: () => input.prompt.ready() || promptReady(),
+    dock: () => (store.ready && input.state.dock()) || value() > 0.001,
+    dockProgress: value,
+    dockHeight: () => Math.max(78, store.height),
+    lift: () => (input.revert()?.items.length ? 18 : 36 * value()),
+    setDockBodyRef: (el: HTMLDivElement) => setStore("body", el),
+  }
+}
+
+export type SessionComposerRegionController = ReturnType<typeof createSessionComposerRegionController>
@@ -1,216 +1,89 @@
-import { Show, createEffect, createMemo, createResource, onCleanup } from "solid-js"
-import { createStore } from "solid-js/store"
-import { useSpring } from "@opencode-ai/ui/motion-spring"
-import { PromptInput, type PromptInputControls, type PromptInputProps } from "@/components/prompt-input"
+import { Show, type JSX } from "solid-js"
 import { useLanguage } from "@/context/language"
-import { usePrompt } from "@/context/prompt"
-import { useSync } from "@/context/sync"
-import { getSessionHandoff, setSessionHandoff } from "@/pages/session/handoff"
+import { useSettings } from "@/context/settings"
 import { SessionPermissionDock } from "@/pages/session/composer/session-permission-dock"
 import { SessionQuestionDock } from "@/pages/session/composer/session-question-dock"
 import { SessionFollowupDock } from "@/pages/session/composer/session-followup-dock"
 import { SessionRevertDock } from "@/pages/session/composer/session-revert-dock"
-import type { SessionComposerState } from "@/pages/session/composer/session-composer-state"
 import { SessionTodoDock } from "@/pages/session/composer/session-todo-dock"
-import type { FollowupDraft } from "@/components/prompt-input/submit"
-import { createResizeObserver } from "@solid-primitives/resize-observer"
-import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
+import type { SessionComposerRegionController } from "./session-composer-region-controller"

 export function SessionComposerRegion(props: {
-  state: SessionComposerState
-  sessionKey: string
-  sessionID?: string
-  controls: PromptInputControls
-  promptInput: Omit<PromptInputProps, "controls" | "variant">
-  todo: {
-    collapsed: boolean
-    onToggle: () => void
-  }
-  ready: boolean
-  centered: boolean
-  placement?: "dock" | "inline"
-  openParent?: () => void
-  onResponseSubmit: () => void
-  followup?: {
-    queue: () => boolean
-    items: { id: string; text: string }[]
-    sending?: string
-    edit?: { id: string; prompt: FollowupDraft["prompt"]; context: FollowupDraft["context"] }
-    onQueue: (draft: FollowupDraft) => void
-    onAbort: () => void
-    onSend: (id: string) => void
-    onEdit: (id: string) => void
-    onEditLoaded: () => void
-  }
-  revert?: {
-    items: { id: string; text: string }[]
-    restoring?: string
-    disabled?: boolean
-    onRestore: (id: string) => void
-  }
-  setPromptDockRef: (el: HTMLDivElement) => void
+  controller: SessionComposerRegionController
+  promptInput: JSX.Element
 }) {
-  const prompt = props.promptInput.state ?? usePrompt()
  const language = useLanguage()
-  const sync = useSync()
-
-  const handoffPrompt = createMemo(() => getSessionHandoff(props.sessionKey)?.prompt)
-  const info = createMemo(() => (props.sessionID ? sync().session.get(props.sessionID) : undefined))
-  const parentID = createMemo(() => info()?.parentID)
-  const child = createMemo(() => !!parentID())
-  const showComposer = createMemo(() => !props.state.blocked() || child())
-
-  const previewPrompt = () =>
-    prompt
-      .current()
-      .map((part) => {
-        if (part.type === "file") return `[file:${part.path}]`
-        if (part.type === "agent") return `@${part.name}`
-        if (part.type === "image") return `[image:${part.filename}]`
-        return part.content
-      })
-      .join("")
-      .trim()
-
-  createEffect(() => {
-    if (!prompt.ready()) return
-    setSessionHandoff(props.sessionKey, { prompt: previewPrompt() })
-  })
-
-  const [store, setStore] = createStore({
-    ready: props.ready || props.state.dock(),
-    height: 320,
-    body: undefined as HTMLDivElement | undefined,
-  })
-  let timer: number | undefined
-  let frame: number | undefined
-
-  const clear = () => {
-    if (timer !== undefined) {
-      window.clearTimeout(timer)
-      timer = undefined
-    }
-    if (frame !== undefined) {
-      cancelAnimationFrame(frame)
-      frame = undefined
-    }
+  const controller = props.controller
+  const settings = useSettings()
+  const rolled = () => {
+    const revert = controller.revert()
+    return revert?.items.length ? revert : undefined
  }

-  createEffect(() => {
-    props.sessionKey
-    const ready = props.ready
-    const dock = props.state.dock()
-    const delay = 140
-
-    clear()
-    if (store.ready || (!ready && !dock)) return
-    if (dock) {
-      setStore("ready", true)
-      return
-    }
-
-    frame = requestAnimationFrame(() => {
-      frame = undefined
-      timer = window.setTimeout(() => {
-        setStore("ready", true)
-        timer = undefined
-      }, delay)
-    })
-  })
-
-  onCleanup(clear)
-
-  const open = createMemo(() => store.ready && props.state.dock() && !props.state.closing())
-  const progress = useSpring(
-    () => (open() ? 1 : 0),
-    { visualDuration: 0.3, bounce: 0 },
-    () => `${props.sessionKey}\0${store.ready}`,
-  )
-  const value = createMemo(() => Math.max(0, Math.min(1, progress())))
-  const dock = createMemo(() => (store.ready && props.state.dock()) || value() > 0.001)
-  const rolled = createMemo(() => (props.revert?.items.length ? props.revert : undefined))
-  const lift = createMemo(() => (rolled() ? 18 : 36 * value()))
-  const full = createMemo(() => Math.max(78, store.height))
-
-  createEffect(() => {
-    const el = store.body
-    if (!el) return
-    const update = () => setStore("height", el.getBoundingClientRect().height)
-    createResizeObserver(store.body, update)
-    update()
-  })
-
-  const ready = Promise.resolve()
-  const [promptReadyResource] = createResource(
-    () => prompt.ready.promise ?? ready,
-    (promise) => promise.then(() => true),
-  )
-
  return (
    <div
-      ref={props.setPromptDockRef}
+      ref={controller.setDockRef}
      data-component="session-prompt-dock"
      classList={{
-        "w-full flex flex-col justify-center items-center pointer-events-none": true,
-        "shrink-0 pb-3 bg-background-stronger": props.placement !== "inline",
+        "w-full shrink-0 flex flex-col justify-center items-center pb-3 pointer-events-none": true,
+        "bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
+        "bg-background-stronger": !settings.general.newLayoutDesigns(),
      }}
    >
      <div
        classList={{
-          "w-full pointer-events-auto": true,
-          "px-3": props.placement !== "inline",
-          [NEW_SESSION_CONTENT_WIDTH]: props.placement === "inline",
-          "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
+          "w-full px-3 pointer-events-auto": true,
+          "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": controller.centered(),
        }}
      >
-        <Show when={props.state.questionRequest()} keyed>
+        <Show when={controller.state.questionRequest()} keyed>
          {(request) => (
            <div>
-              <SessionQuestionDock request={request} onSubmit={props.onResponseSubmit} />
+              <SessionQuestionDock request={request} onSubmit={controller.onResponseSubmit} />
            </div>
          )}
        </Show>

-        <Show when={props.state.permissionRequest()} keyed>
+        <Show when={controller.state.permissionRequest()} keyed>
          {(request) => (
            <div>
              <SessionPermissionDock
                request={request}
-                responding={props.state.permissionResponding()}
+                responding={controller.state.permissionResponding()}
                onDecide={(response) => {
-                  props.onResponseSubmit()
-                  props.state.decide(response)
+                  controller.onResponseSubmit()
+                  controller.state.decide(response)
                }}
              />
            </div>
          )}
        </Show>

-        <Show when={showComposer()}>
-          <Show when={dock()}>
+        <Show when={controller.showComposer()}>
+          <Show when={controller.dock()}>
            <div
              classList={{
                "overflow-hidden": true,
-                "pointer-events-none": value() < 0.98,
+                "pointer-events-none": controller.dockProgress() < 0.98,
              }}
              style={{
-                "max-height": `${full() * value()}px`,
+                "max-height": `${controller.dockHeight() * controller.dockProgress()}px`,
              }}
            >
-              <div ref={(el) => setStore("body", el)}>
+              <div ref={controller.setDockBodyRef}>
                <SessionTodoDock
-                  todos={props.state.todos()}
-                  collapsed={props.todo.collapsed}
-                  onToggle={props.todo.onToggle}
+                  todos={controller.state.todos()}
+                  collapsed={controller.todo.collapsed()}
+                  onToggle={controller.todo.onToggle}
                  collapseLabel={language.t("session.todo.collapse")}
                  expandLabel={language.t("session.todo.expand")}
-                  dockProgress={value()}
+                  dockProgress={controller.dockProgress()}
                />
              </div>
            </div>
          </Show>
          <Show
-            when={prompt.ready() || promptReadyResource()}
+            when={controller.promptReady()}
            fallback={
              <>
                <Show when={rolled()} keyed>
@@ -227,9 +100,9 @@ export function SessionComposerRegion(props: {
                </Show>
                <div
                  class="w-full min-h-32 md:min-h-40 rounded-md border border-border-weak-base bg-background-base/50 px-4 py-3 text-text-weak whitespace-pre-wrap pointer-events-none"
-                  style={{ "margin-top": `${-36 * value()}px` }}
+                  style={{ "margin-top": `${-36 * controller.dockProgress()}px` }}
                >
-                  {handoffPrompt() || language.t("prompt.loading")}
+                  {controller.handoffPrompt() || language.t("prompt.loading")}
                </div>
              </>
            }
@@ -238,7 +111,7 @@ export function SessionComposerRegion(props: {
              {(revert) => (
                <div
                  style={{
-                    "margin-top": `${-36 * value()}px`,
+                    "margin-top": `${-36 * controller.dockProgress()}px`,
                  }}
                >
                  <SessionRevertDock
@@ -252,47 +125,34 @@ export function SessionComposerRegion(props: {
            </Show>
            <div
              classList={{
-                "relative z-10": true,
+                "relative z-30": true,
              }}
              style={{
-                "margin-top": `${-lift()}px`,
+                "margin-top": `${-controller.lift()}px`,
              }}
            >
-              <Show when={props.followup?.items.length}>
+              <Show when={controller.followup()?.items.length}>
                <SessionFollowupDock
-                  items={props.followup!.items}
-                  sending={props.followup!.sending}
-                  onSend={props.followup!.onSend}
-                  onEdit={props.followup!.onEdit}
+                  items={controller.followup()!.items}
+                  sending={controller.followup()!.sending}
+                  onSend={controller.followup()!.onSend}
+                  onEdit={controller.followup()!.onEdit}
                />
              </Show>
              <Show
-                when={child()}
-                fallback={
-                  <Show when={!props.state.blocked()}>
-                    <PromptInput
-                      {...props.promptInput}
-                      controls={props.controls}
-                      variant={props.placement === "inline" ? "new-session" : undefined}
-                      edit={props.followup?.edit}
-                      onEditLoaded={props.followup?.onEditLoaded}
-                      shouldQueue={props.followup?.queue}
-                      onQueue={props.followup?.onQueue}
-                      onAbort={props.followup?.onAbort}
-                    />
-                  </Show>
-                }
+                when={controller.child()}
+                fallback={<Show when={!controller.state.blocked()}>{props.promptInput}</Show>}
              >
                <div
-                  ref={props.promptInput.ref}
+                  ref={controller.setPromptRef}
                  class="w-full rounded-[12px] border border-border-weak-base bg-background-base p-3 text-16-regular text-text-weak"
                >
                  <span>{language.t("session.child.promptDisabled")} </span>
-                  <Show when={parentID() && props.openParent}>
+                  <Show when={controller.parentID()}>
                    <button
                      type="button"
                      class="text-text-base transition-colors hover:text-text-strong"
-                      onClick={props.openParent}
+                      onClick={controller.openParent}
                    >
                      {language.t("session.child.backToParent")}
                    </button>
@@ -25,7 +25,7 @@ export const todoDockAtBoundary = (state: ReturnType<typeof todoState>) => state

 const idle = { type: "idle" as const }

-export function createSessionComposerState(options?: { closeMs?: number | (() => number) }) {
+export function createSessionComposerController(options?: { closeMs?: number | (() => number) }) {
  const params = useParams()
  const sdk = useSDK()
  const sync = useSync()
@@ -201,4 +201,4 @@ export function createSessionComposerState(options?: { closeMs?: number | (() =>
  }
 }

-export type SessionComposerState = ReturnType<typeof createSessionComposerState>
+export type SessionComposerController = ReturnType<typeof createSessionComposerController>
@@ -432,21 +432,23 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
      header={
        <>
          <div data-slot="question-header-title">{summary()}</div>
-          <div data-slot="question-progress">
-            <For each={questions()}>
-              {(_, i) => (
-                <button
-                  type="button"
-                  data-slot="question-progress-segment"
-                  data-active={i() === store.tab}
-                  data-answered={answered(i())}
-                  disabled={sending()}
-                  onClick={() => jump(i())}
-                  aria-label={`${language.t("ui.tool.questions")} ${i() + 1}`}
-                />
-              )}
-            </For>
-          </div>
+          <Show when={total() > 1}>
+            <div data-slot="question-progress">
+              <For each={questions()}>
+                {(_, i) => (
+                  <button
+                    type="button"
+                    data-slot="question-progress-segment"
+                    data-active={i() === store.tab}
+                    data-answered={answered(i())}
+                    disabled={sending()}
+                    onClick={() => jump(i())}
+                    aria-label={`${language.t("ui.tool.questions")} ${i() + 1}`}
+                  />
+                )}
+              </For>
+            </div>
+          </Show>
        </>
      }
      footer={
@@ -3,7 +3,13 @@ import { createEffect, createMemo, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import type { Todo } from "@opencode-ai/sdk/v2"
 import { useServerSync } from "@/context/global-sync"
-import { SessionComposerRegion, createSessionComposerState } from "@/pages/session/composer"
+import { PromptInput } from "@/components/prompt-input"
+import { usePrompt } from "@/context/prompt"
+import {
+  SessionComposerRegion,
+  createSessionComposerController,
+  createSessionComposerRegionController,
+} from "@/pages/session/composer"

 export default {
  title: "UI/Todo Panel Motion",
@@ -60,7 +66,6 @@ const controls = {
    paid: true,
    loading: false,
  },
-  projects: { available: [], directory: "/tmp/story", select: () => {}, add: () => {} },
  session: {
    id: "story-session",
    tabs: { active: () => undefined, all: () => [], open: () => {}, setActive: () => {} },
@@ -149,6 +154,7 @@ const css = `
 export const Playground = {
  render: () => {
    const global = useServerSync()
+    const prompt = usePrompt()
    const [cfg, setCfg] = createStore({
      open: true,
      collapsed: false,
@@ -188,7 +194,7 @@ export const Playground = {
    const countMask = () => cfg.countMask
    const countMaskHeight = () => cfg.countMaskHeight
    const countWidthDuration = () => cfg.countWidthDuration
-    const state = createSessionComposerState({ closeMs: () => Math.round(dockCloseDuration() * 1000) })
+    const state = createSessionComposerController({ closeMs: () => Math.round(dockCloseDuration() * 1000) })
    let frame
    let scrollRef

@@ -217,7 +223,6 @@ export const Playground = {

    const collapsed = () => cfg.collapsed
    const setCollapsed = (value: boolean) => setCfg("collapsed", value)
-
    const openDock = () => {
      clear()
      setCfg("open", true)
@@ -281,36 +286,30 @@ export const Playground = {

                <div>
                  <SessionComposerRegion
-                    state={state}
-                    sessionKey="story-session"
-                    sessionID="story-session"
-                    controls={controls}
-                    promptInput={{
-                      submission: { abort: () => {}, handleSubmit: (event) => event.preventDefault() },
-                      ref: () => {},
-                      newSessionWorktree: "",
-                      onNewSessionWorktreeReset: () => {},
-                    }}
-                    todo={{ collapsed: collapsed(), onToggle: () => setCollapsed(!collapsed()) }}
-                    ready
-                    centered={false}
-                    onResponseSubmit={pin}
-                    setPromptDockRef={() => {}}
-                    dockOpenVisualDuration={dockOpenDuration()}
-                    dockOpenBounce={dockOpenBounce()}
-                    dockCloseVisualDuration={dockCloseDuration()}
-                    dockCloseBounce={dockCloseBounce()}
-                    drawerExpandVisualDuration={drawerExpandDuration()}
-                    drawerExpandBounce={drawerExpandBounce()}
-                    drawerCollapseVisualDuration={drawerCollapseDuration()}
-                    drawerCollapseBounce={drawerCollapseBounce()}
-                    subtitleDuration={subtitleDuration()}
-                    subtitleTravel={subtitleAuto() ? undefined : subtitleTravel()}
-                    subtitleEdge={subtitleAuto() ? undefined : subtitleEdge()}
-                    countDuration={countDuration()}
-                    countMask={countMask()}
-                    countMaskHeight={countMaskHeight()}
-                    countWidthDuration={countWidthDuration()}
+                    controller={createSessionComposerRegionController({
+                      state,
+                      sessionKey: () => "story-session",
+                      sessionID: () => "story-session",
+                      prompt,
+                      ready: () => true,
+                      centered: () => false,
+                      todo: { collapsed, onToggle: () => setCollapsed(!collapsed()) },
+                      followup: () => undefined,
+                      revert: () => undefined,
+                      onResponseSubmit: pin,
+                      openParent: () => {},
+                      setPromptRef: () => {},
+                      setDockRef: () => {},
+                    })}
+                    promptInput={
+                      <PromptInput
+                        controls={controls}
+                        submission={{ abort: () => {}, handleSubmit: (event) => event.preventDefault() }}
+                        ref={() => {}}
+                        newSessionWorktree=""
+                        onNewSessionWorktreeReset={() => {}}
+                      />
+                    }
                  />
                </div>
              </div>
@@ -293,7 +293,7 @@ export function TerminalPanel() {
                </Tabs.List>
              </Tabs>
              <div class="flex-1 min-h-0 relative">
-                <Show when={terminal.active()} keyed>
+                <Show when={opened() && terminal.active()} keyed>
                  {(id) => {
                    const ops = terminal.bind()
                    return (
@@ -34,7 +34,6 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { InlineInput } from "@opencode-ai/ui/inline-input"
-import { Spinner } from "@opencode-ai/ui/spinner"
 import { SessionRetry } from "@opencode-ai/session-ui/session-retry"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
@@ -66,9 +65,7 @@ import { legacySessionHref, requireServerKey, sessionHref } from "@/utils/sessio
 import { useSDK } from "@/context/sdk"
 import { useSync } from "@/context/sync"
 import { notifySessionTabsRemoved } from "@/components/titlebar-session-events"
-import { messageAgentColor } from "@/utils/agent"
 import { sessionTitle } from "@/utils/session-title"
-import { makeTimer } from "@solid-primitives/timer"
 import { scheduleConnectedMeasure } from "./measure"
 import { createTimelineProjection } from "./projection"
 import { MessageComment, SummaryDiff, TimelineRow, TimelineRowMap } from "./rows"
@@ -277,25 +274,7 @@ export function MessageTimeline(props: {
    if (!id) return idle
    return sync().data.session_status[id] ?? idle
  })
-  const working = createMemo(() => sessionStatus().type !== "idle")
  const sessionMessages = createMemo(() => (sessionID() ? (sync().data.message[sessionID()!] ?? []) : []))
-  const tint = createMemo(() => messageAgentColor(sessionMessages(), sync().data.agent))
-
-  const [timeoutDone, setTimeoutDone] = createSignal(true)
-
-  const workingStatus = createMemo<"hidden" | "showing" | "hiding">((prev) => {
-    if (working()) return "showing"
-    if (prev === "showing" || !timeoutDone()) return "hiding"
-    return "hidden"
-  })
-
-  createEffect(() => {
-    if (workingStatus() !== "hiding") return
-
-    setTimeoutDone(false)
-    makeTimer(() => setTimeoutDone(true), 260, setTimeout)
-  })
-
  const info = createMemo(() => {
    const id = sessionID()
    if (!id) return
@@ -1040,7 +1019,13 @@ export function MessageTimeline(props: {
                <div class="flex w-max min-w-full justify-end gap-2">
                  <Index each={comments()}>
                    {(comment) => (
-                      <div class="shrink-0 max-w-[260px] rounded-[6px] border border-border-weak-base bg-background-stronger px-2.5 py-2">
+                      <div
+                        classList={{
+                          "shrink-0 max-w-[260px] rounded-[6px] border-border-weak-base bg-background-stronger px-2.5 py-2": true,
+                          "border-[0.5px]": settings.general.newLayoutDesigns(),
+                          border: !settings.general.newLayoutDesigns(),
+                        }}
+                      >
                        <div class="flex items-center gap-1.5 min-w-0 text-11-medium text-text-strong">
                          <FileIcon node={{ path: comment().path, type: "file" }} class="size-3.5 shrink-0" />
                          <span class="truncate">{getFilename(comment().path)}</span>
@@ -1239,26 +1224,56 @@ export function MessageTimeline(props: {
  return (
    <div class="relative w-full h-full min-w-0">
      <div
-        class="absolute left-1/2 -translate-x-1/2 bottom-6 z-[60] pointer-events-none transition-all duration-200 ease-out"
+        class="absolute left-1/2 -translate-x-1/2 z-[60] pointer-events-none transition-all duration-200 ease-out"
        classList={{
+          "bottom-8": settings.general.newLayoutDesigns(),
+          "bottom-6": !settings.general.newLayoutDesigns(),
          "opacity-100 translate-y-0 scale-100": props.scroll.overflow && props.scroll.jump,
-          "opacity-0 translate-y-2 scale-95 pointer-events-none": !props.scroll.overflow || !props.scroll.jump,
+          "opacity-0 translate-y-2 pointer-events-none": !props.scroll.overflow || !props.scroll.jump,
+          "scale-[0.8]": (!props.scroll.overflow || !props.scroll.jump) && settings.general.newLayoutDesigns(),
+          "scale-95": (!props.scroll.overflow || !props.scroll.jump) && !settings.general.newLayoutDesigns(),
        }}
      >
-        <button
-          class="pointer-events-auto flex items-center justify-center w-10 h-8 bg-transparent border-none cursor-pointer p-0 group"
-          onClick={props.onResumeScroll}
+        <Show
+          when={settings.general.newLayoutDesigns()}
+          fallback={
+            <button
+              type="button"
+              aria-label={language.t("session.messages.jumpToLatest")}
+              class="pointer-events-auto flex items-center justify-center w-10 h-8 bg-transparent border-none cursor-pointer p-0 group"
+              onClick={props.onResumeScroll}
+            >
+              <div
+                class="flex items-center justify-center w-8 h-6 rounded-[6px] border border-border-weaker-base bg-[color-mix(in_srgb,var(--surface-raised-stronger-non-alpha)_80%,transparent)] backdrop-blur-[0.75px] transition-colors group-hover:border-[var(--border-weak-base)] group-hover:[--icon-base:var(--icon-hover)]"
+                style={{
+                  "box-shadow":
+                    "0 51px 60px 0 rgba(0,0,0,0.10), 0 15px 18px 0 rgba(0,0,0,0.12), 0 6.386px 7.513px 0 rgba(0,0,0,0.12), 0 2.31px 2.717px 0 rgba(0,0,0,0.20)",
+                }}
+              >
+                <Icon name="arrow-down-to-line" size="small" />
+              </div>
+            </button>
+          }
        >
-          <div
-            class="flex items-center justify-center w-8 h-6 rounded-[6px] border border-border-weaker-base bg-[color-mix(in_srgb,var(--surface-raised-stronger-non-alpha)_80%,transparent)] backdrop-blur-[0.75px] transition-colors group-hover:border-[var(--border-weak-base)] group-hover:[--icon-base:var(--icon-hover)]"
+          <button
+            type="button"
+            aria-label={language.t("session.messages.jumpToLatest")}
+            class="pointer-events-auto flex items-center justify-center w-8 h-7 px-2 py-1.5 rounded-lg border-none cursor-pointer text-v2-text-text-base backdrop-blur-[2px]"
            style={{
-              "box-shadow":
-                "0 51px 60px 0 rgba(0,0,0,0.10), 0 15px 18px 0 rgba(0,0,0,0.12), 0 6.386px 7.513px 0 rgba(0,0,0,0.12), 0 2.31px 2.717px 0 rgba(0,0,0,0.20)",
+              background: "color-mix(in srgb, var(--v2-background-bg-base) 92%, transparent)",
+              "box-shadow": "var(--v2-elevation-raised), 0px 2px 8px var(--v2-background-bg-base)",
            }}
+            onClick={props.onResumeScroll}
          >
-            <Icon name="arrow-down-to-line" size="small" />
-          </div>
-        </button>
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path
+                d="M12.3333 8.66665L8 13L3.66667 8.66665M8 12.6667V2.83332"
+                stroke="currentColor"
+                stroke-linecap="square"
+              />
+            </svg>
+          </button>
+        </Show>
      </div>
      <ScrollView
        viewportRef={bindListRoot}
@@ -1279,7 +1294,11 @@ export function MessageTimeline(props: {
          <div
            data-session-title
            classList={{
-              "sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]": true,
+              "sticky top-0 z-30": true,
+              "bg-[linear-gradient(to_bottom,var(--v2-background-bg-base)_48px,transparent)]":
+                settings.general.newLayoutDesigns(),
+              "bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]":
+                !settings.general.newLayoutDesigns(),
              "w-full": true,
              "pb-4": true,
              "pr-3": true,
@@ -1308,23 +1327,6 @@ export function MessageTimeline(props: {
                      /
                    </span>
                  </Show>
-                  <div
-                    class="shrink-0 flex items-center justify-center overflow-hidden transition-[width,margin] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]"
-                    style={{
-                      width: working() ? "16px" : "0px",
-                      "margin-right": working() ? "8px" : "0px",
-                    }}
-                    aria-hidden="true"
-                  >
-                    <Show when={workingStatus() !== "hidden"}>
-                      <div
-                        class="transition-opacity duration-200 ease-out"
-                        classList={{ "opacity-0": workingStatus() === "hiding" }}
-                      >
-                        <Spinner class="size-4" style={{ color: tint() ?? "var(--icon-interactive-base)" }} />
-                      </div>
-                    </Show>
-                  </div>
                  <Show when={childTitle() || title.editing}>
                    <Show
                      when={title.editing}
@@ -1517,7 +1519,11 @@ export function MessageTimeline(props: {
                                      <Button
                                        size="large"
                                        variant="secondary"
-                                        class="w-full shadow-none border border-border-weak-base"
+                                        class={
+                                          settings.general.newLayoutDesigns()
+                                            ? "w-full shadow-none border-[0.5px] border-border-weak-base"
+                                            : "w-full shadow-none border border-border-weak-base"
+                                        }
                                        onClick={unshareSession}
                                        disabled={unshareMutation.isPending}
                                      >
@@ -0,0 +1,69 @@
+import { useCommand, type CommandOption } from "@/context/command"
+import { useLanguage } from "@/context/language"
+import { useLocal } from "@/context/local"
+import { useSettings } from "@/context/settings"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useSessionLayout } from "./session-layout"
+import { createSessionOwnership } from "./session-ownership"
+
+const withCategory = (category: string) => {
+  return (option: Omit<CommandOption, "category">): CommandOption => ({
+    ...option,
+    category,
+  })
+}
+
+export const useComposerCommands = () => {
+  const command = useCommand()
+  const dialog = useDialog()
+  const language = useLanguage()
+  const local = useLocal()
+  const settings = useSettings()
+  const { sessionKey } = useSessionLayout()
+  const sessionOwnership = createSessionOwnership(sessionKey)
+  const modelCommand = withCategory(language.t("command.category.model"))
+  const agentCommand = withCategory(language.t("command.category.agent"))
+
+  const chooseModel = async () => {
+    const owner = sessionOwnership.capture()
+    const { DialogSelectModel } = await import("@/components/dialog-select-model")
+    owner.run(() => {
+      void dialog.show(() => <DialogSelectModel model={local.model} />)
+    })
+  }
+
+  command.register("composer", () => [
+    modelCommand({
+      id: "model.choose",
+      title: language.t("command.model.choose"),
+      description: language.t("command.model.choose.description"),
+      keybind: "mod+'",
+      slash: "model",
+      onSelect: chooseModel,
+    }),
+    modelCommand({
+      id: "model.variant.cycle",
+      title: language.t("command.model.variant.cycle"),
+      description: language.t("command.model.variant.cycle.description"),
+      keybind: "shift+mod+d",
+      onSelect: () => local.model.variant.cycle(),
+    }),
+    agentCommand({
+      id: "agent.cycle",
+      title: language.t("command.agent.cycle"),
+      description: language.t("command.agent.cycle.description"),
+      keybind: "mod+.",
+      slash: "agent",
+      disabled: !settings.visibility.customAgents(),
+      onSelect: () => local.agent.move(1),
+    }),
+    agentCommand({
+      id: "agent.cycle.reverse",
+      title: language.t("command.agent.cycle.reverse"),
+      description: language.t("command.agent.cycle.reverse.description"),
+      keybind: "shift+mod+.",
+      disabled: !settings.visibility.customAgents(),
+      onSelect: () => local.agent.move(-1),
+    }),
+  ])
+}
@@ -136,9 +136,7 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
  const contextCommand = withCategory(language.t("command.category.context"))
  const viewCommand = withCategory(language.t("command.category.view"))
  const terminalCommand = withCategory(language.t("command.category.terminal"))
-  const modelCommand = withCategory(language.t("command.category.model"))
  const mcpCommand = withCategory(language.t("command.category.mcp"))
-  const agentCommand = withCategory(language.t("command.category.agent"))
  const permissionsCommand = withCategory(language.t("command.category.permissions"))

  const isAutoAcceptActive = () => {
@@ -271,13 +269,6 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
    view().terminal.open()
  }

-  const chooseModel = () => {
-    void openDialog(
-      () => import("@/components/dialog-select-model"),
-      (x) => dialog.show(() => <x.DialogSelectModel model={local.model} />),
-    )
-  }
-
  const chooseMcp = () => {
    void openDialog(
      () => import("@/components/dialog-select-mcp"),
@@ -555,24 +546,6 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
    }),
  ]

-  const modelCmds = () => [
-    modelCommand({
-      id: "model.choose",
-      title: language.t("command.model.choose"),
-      description: language.t("command.model.choose.description"),
-      keybind: "mod+'",
-      slash: "model",
-      onSelect: chooseModel,
-    }),
-    modelCommand({
-      id: "model.variant.cycle",
-      title: language.t("command.model.variant.cycle"),
-      description: language.t("command.model.variant.cycle.description"),
-      keybind: "shift+mod+d",
-      onSelect: () => local.model.variant.cycle(),
-    }),
-  ]
-
  const mcpCmds = () => [
    mcpCommand({
      id: "mcp.toggle",
@@ -584,26 +557,6 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
    }),
  ]

-  const agentCmds = () => [
-    agentCommand({
-      id: "agent.cycle",
-      title: language.t("command.agent.cycle"),
-      description: language.t("command.agent.cycle.description"),
-      keybind: "mod+.",
-      slash: "agent",
-      disabled: !settings.visibility.customAgents(),
-      onSelect: () => local.agent.move(1),
-    }),
-    agentCommand({
-      id: "agent.cycle.reverse",
-      title: language.t("command.agent.cycle.reverse"),
-      description: language.t("command.agent.cycle.reverse.description"),
-      keybind: "shift+mod+.",
-      disabled: !settings.visibility.customAgents(),
-      onSelect: () => local.agent.move(-1),
-    }),
-  ]
-
  const permissionsCmds = () => [
    permissionsCommand({
      id: "permissions.autoaccept",
@@ -624,9 +577,7 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
    ...viewCmds(),
    ...terminalCmds(),
    ...messageCmds(),
-    ...modelCmds(),
    ...mcpCmds(),
-    ...agentCmds(),
    ...permissionsCmds(),
  ])
 }
@@ -1,6 +1,7 @@
 import { describe, expect, test } from "bun:test"
+import type { SessionNotFoundError } from "@opencode-ai/sdk/v2/client"
 import type { ConfigInvalidError, ProviderModelNotFoundError } from "./server-errors"
-import { formatServerError, parseReadableConfigInvalidError } from "./server-errors"
+import { formatServerError, isSessionNotFoundError, parseReadableConfigInvalidError } from "./server-errors"

 function fill(text: string, vars?: Record<string, string | number>) {
  if (!vars) return text
@@ -142,3 +143,33 @@ describe("formatServerError", () => {
    expect(formatServerError(wrapped, language.t)).toBe("Arquivo de config em config invalido: Missing host")
  })
 })
+
+describe("isSessionNotFoundError", () => {
+  test("matches an SDK-wrapped error for the requested session", () => {
+    const body = {
+      _tag: "SessionNotFoundError",
+      sessionID: "ses_missing",
+      message: "Session not found",
+    } satisfies SessionNotFoundError
+
+    expect(isSessionNotFoundError(new Error(body.message, { cause: { body, status: 404 } }), body.sessionID)).toBe(true)
+  })
+
+  test("rejects errors for other sessions and other 404 responses", () => {
+    const body = {
+      _tag: "SessionNotFoundError",
+      sessionID: "ses_parent",
+      message: "Session not found",
+    } satisfies SessionNotFoundError
+
+    expect(isSessionNotFoundError(new Error(body.message, { cause: { body, status: 404 } }), "ses_tab")).toBe(false)
+    expect(
+      isSessionNotFoundError(
+        new Error("Provider not found", {
+          cause: { body: { _tag: "ProviderNotFoundError", providerID: "missing" }, status: 404 },
+        }),
+        "ses_tab",
+      ),
+    ).toBe(false)
+  })
+})
@@ -42,6 +42,13 @@ function unwrapNamedError(error: unknown): unknown {
  return error
 }

+export function isSessionNotFoundError(error: unknown, sessionID: string) {
+  const unwrapped = unwrapNamedError(error)
+  if (typeof unwrapped !== "object" || unwrapped === null) return false
+  const value = unwrapped as Record<string, unknown>
+  return value._tag === "SessionNotFoundError" && value.sessionID === sessionID
+}
+
 function isConfigInvalidErrorLike(error: unknown): error is ConfigInvalidError {
  if (typeof error !== "object" || error === null) return false
  const o = error as Record<string, unknown>
@@ -1,7 +1,8 @@
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Tag } from "@opencode-ai/ui/v2/badge-v2"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Dialog } from "@opencode-ai/ui/v2/dialog-v2"
+import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
+import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
@@ -30,8 +31,14 @@ export function AddServerMenu(props: { onAddServer: () => void }) {
  const language = useLanguage()
  const openAddWsl = () => {
    dialog.push(() => (
-      <Dialog title={language.t("wsl.server.add")} size="large" fit class="settings-v2-wsl-dialog">
-        <DialogAddWslServer />
+      <Dialog size="large" fit class="settings-v2-wsl-dialog">
+        <DialogHeader hideClose={true}>
+          <DialogTitle>{language.t("wsl.server.add")}</DialogTitle>
+        </DialogHeader>
+        <DividerV2 />
+        <DialogBody>
+          <DialogAddWslServer />
+        </DialogBody>
      </Dialog>
    ))
  }
@@ -1,7 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/cli",
-  "version": "1.17.10",
+  "version": "1.17.11",
  "type": "module",
  "license": "MIT",
  "bin": {
@@ -1,20 +1,29 @@
 import { NodeFileSystem } from "@effect/platform-node"
 import { compile, emitEffectImported, emitPromise, write } from "@opencode-ai/httpapi-codegen"
-import { Api } from "@opencode-ai/server/api"
+import { ClientApi } from "../src/contract"
 import { Effect } from "effect"
-import { HttpApi } from "effect/unstable/httpapi"
 import { fileURLToPath } from "url"

-const contract = compile(HttpApi.make("opencode-client").add(Api.groups["server.session"]), {
-  groupNames: { "server.session": "sessions" },
+const contract = compile(ClientApi, {
+  groupNames: { "server.session": "sessions", "server.event": "events" },
 })

 await Effect.runPromise(
  Effect.all(
    [
-      write(emitPromise(contract), fileURLToPath(new URL("../src/generated", import.meta.url))),
      write(
-        emitEffectImported(contract, { module: "../contract", group: "SessionGroup" }),
+        emitPromise(contract, {
+          outputTypes: {
+            "events.subscribe": {
+              name: "OpenCodeEventEncoded",
+              import: 'import type { OpenCodeEventEncoded } from "@opencode-ai/protocol/groups/event"',
+            },
+          },
+        }),
+        fileURLToPath(new URL("../src/generated", import.meta.url)),
+      ),
+      write(
+        emitEffectImported(contract, { module: "../contract", api: "ClientApi" }),
        fileURLToPath(new URL("../src/generated-effect", import.meta.url)),
      ),
    ],
@@ -1,6 +1,6 @@
 import { makeDefaultApi } from "@opencode-ai/protocol/api"
 import { InvalidRequestError, SessionNotFoundError } from "@opencode-ai/protocol/errors"
-import { HttpApiMiddleware } from "effect/unstable/httpapi"
+import { HttpApi, HttpApiMiddleware } from "effect/unstable/httpapi"

 class LocationMiddleware extends HttpApiMiddleware.Service<LocationMiddleware>()(
  "@opencode-ai/client/LocationMiddleware",
@@ -17,3 +17,5 @@ const Api = makeDefaultApi({
 })

 export const SessionGroup = Api.groups["server.session"]
+export const EventGroup = Api.groups["server.event"]
+export const ClientApi = HttpApi.make("opencode-client").add(SessionGroup).add(EventGroup)
@@ -10,3 +10,4 @@ export { Session } from "@opencode-ai/schema/session"
 export { SessionInput } from "@opencode-ai/schema/session-input"
 export { SessionMessage } from "@opencode-ai/schema/session-message"
 export { Prompt } from "@opencode-ai/schema/prompt"
+export type { OpenCodeEvent } from "@opencode-ai/protocol/groups/event"
@@ -1 +1,5 @@
-["client-error.ts", "client.ts", "index.ts"]
+[
+  "client-error.ts",
+  "client.ts",
+  "index.ts"
+]
@@ -1,14 +1,12 @@
 // Generated by @opencode-ai/httpapi-codegen. Do not edit.
-import { Effect, Schema } from "effect"
+import { Effect, Stream, Schema } from "effect"
 import { Sse } from "effect/unstable/encoding"
 import { HttpClientError } from "effect/unstable/http"
-import { HttpApi, HttpApiClient } from "effect/unstable/httpapi"
-import { SessionGroup } from "../contract"
+import { HttpApiClient } from "effect/unstable/httpapi"
+import { ClientApi } from "../contract"
 import { ClientError } from "./client-error"

-const Api = HttpApi.make("generated").add(SessionGroup)
-
-type RawClient = HttpApiClient.ForApi<typeof Api>
+type RawClient = HttpApiClient.ForApi<typeof ClientApi>

 const mapClientError = <E>(error: E) =>
  HttpClientError.isHttpClientError(error) || Schema.isSchemaError(error) || Sse.Retry.is(error)
@@ -55,43 +53,49 @@ const Endpoint0_1 = (raw: RawClient["server.session"]) => (input?: Endpoint0_1In
    Effect.map((value) => value.data),
  )

-type Endpoint0_2Request = Parameters<RawClient["server.session"]["session.get"]>[0]
-type Endpoint0_2Input = { readonly sessionID: Endpoint0_2Request["params"]["sessionID"] }
-const Endpoint0_2 = (raw: RawClient["server.session"]) => (input: Endpoint0_2Input) =>
+const Endpoint0_2 = (raw: RawClient["server.session"]) => () =>
+  raw["session.active"]({}).pipe(
+    Effect.mapError(mapClientError),
+    Effect.map((value) => value.data),
+  )
+
+type Endpoint0_3Request = Parameters<RawClient["server.session"]["session.get"]>[0]
+type Endpoint0_3Input = { readonly sessionID: Endpoint0_3Request["params"]["sessionID"] }
+const Endpoint0_3 = (raw: RawClient["server.session"]) => (input: Endpoint0_3Input) =>
  raw["session.get"]({ params: { sessionID: input.sessionID } }).pipe(
    Effect.mapError(mapClientError),
    Effect.map((value) => value.data),
  )

-type Endpoint0_3Request = Parameters<RawClient["server.session"]["session.switchAgent"]>[0]
-type Endpoint0_3Input = {
-  readonly sessionID: Endpoint0_3Request["params"]["sessionID"]
-  readonly agent: Endpoint0_3Request["payload"]["agent"]
+type Endpoint0_4Request = Parameters<RawClient["server.session"]["session.switchAgent"]>[0]
+type Endpoint0_4Input = {
+  readonly sessionID: Endpoint0_4Request["params"]["sessionID"]
+  readonly agent: Endpoint0_4Request["payload"]["agent"]
 }
-const Endpoint0_3 = (raw: RawClient["server.session"]) => (input: Endpoint0_3Input) =>
+const Endpoint0_4 = (raw: RawClient["server.session"]) => (input: Endpoint0_4Input) =>
  raw["session.switchAgent"]({ params: { sessionID: input.sessionID }, payload: { agent: input.agent } }).pipe(
    Effect.mapError(mapClientError),
  )

-type Endpoint0_4Request = Parameters<RawClient["server.session"]["session.switchModel"]>[0]
-type Endpoint0_4Input = {
-  readonly sessionID: Endpoint0_4Request["params"]["sessionID"]
-  readonly model: Endpoint0_4Request["payload"]["model"]
+type Endpoint0_5Request = Parameters<RawClient["server.session"]["session.switchModel"]>[0]
+type Endpoint0_5Input = {
+  readonly sessionID: Endpoint0_5Request["params"]["sessionID"]
+  readonly model: Endpoint0_5Request["payload"]["model"]
 }
-const Endpoint0_4 = (raw: RawClient["server.session"]) => (input: Endpoint0_4Input) =>
+const Endpoint0_5 = (raw: RawClient["server.session"]) => (input: Endpoint0_5Input) =>
  raw["session.switchModel"]({ params: { sessionID: input.sessionID }, payload: { model: input.model } }).pipe(
    Effect.mapError(mapClientError),
  )

-type Endpoint0_5Request = Parameters<RawClient["server.session"]["session.prompt"]>[0]
-type Endpoint0_5Input = {
-  readonly sessionID: Endpoint0_5Request["params"]["sessionID"]
-  readonly id?: Endpoint0_5Request["payload"]["id"]
-  readonly prompt: Endpoint0_5Request["payload"]["prompt"]
-  readonly delivery?: Endpoint0_5Request["payload"]["delivery"]
-  readonly resume?: Endpoint0_5Request["payload"]["resume"]
+type Endpoint0_6Request = Parameters<RawClient["server.session"]["session.prompt"]>[0]
+type Endpoint0_6Input = {
+  readonly sessionID: Endpoint0_6Request["params"]["sessionID"]
+  readonly id?: Endpoint0_6Request["payload"]["id"]
+  readonly prompt: Endpoint0_6Request["payload"]["prompt"]
+  readonly delivery?: Endpoint0_6Request["payload"]["delivery"]
+  readonly resume?: Endpoint0_6Request["payload"]["resume"]
 }
-const Endpoint0_5 = (raw: RawClient["server.session"]) => (input: Endpoint0_5Input) =>
+const Endpoint0_6 = (raw: RawClient["server.session"]) => (input: Endpoint0_6Input) =>
  raw["session.prompt"]({
    params: { sessionID: input.sessionID },
    payload: { id: input.id, prompt: input.prompt, delivery: input.delivery, resume: input.resume },
@@ -100,23 +104,23 @@ const Endpoint0_5 = (raw: RawClient["server.session"]) => (input: Endpoint0_5Inp
    Effect.map((value) => value.data),
  )

-type Endpoint0_6Request = Parameters<RawClient["server.session"]["session.compact"]>[0]
-type Endpoint0_6Input = { readonly sessionID: Endpoint0_6Request["params"]["sessionID"] }
-const Endpoint0_6 = (raw: RawClient["server.session"]) => (input: Endpoint0_6Input) =>
-  raw["session.compact"]({ params: { sessionID: input.sessionID } }).pipe(Effect.mapError(mapClientError))
-
-type Endpoint0_7Request = Parameters<RawClient["server.session"]["session.wait"]>[0]
+type Endpoint0_7Request = Parameters<RawClient["server.session"]["session.compact"]>[0]
 type Endpoint0_7Input = { readonly sessionID: Endpoint0_7Request["params"]["sessionID"] }
 const Endpoint0_7 = (raw: RawClient["server.session"]) => (input: Endpoint0_7Input) =>
+  raw["session.compact"]({ params: { sessionID: input.sessionID } }).pipe(Effect.mapError(mapClientError))
+
+type Endpoint0_8Request = Parameters<RawClient["server.session"]["session.wait"]>[0]
+type Endpoint0_8Input = { readonly sessionID: Endpoint0_8Request["params"]["sessionID"] }
+const Endpoint0_8 = (raw: RawClient["server.session"]) => (input: Endpoint0_8Input) =>
  raw["session.wait"]({ params: { sessionID: input.sessionID } }).pipe(Effect.mapError(mapClientError))

-type Endpoint0_8Request = Parameters<RawClient["server.session"]["session.revert.stage"]>[0]
-type Endpoint0_8Input = {
-  readonly sessionID: Endpoint0_8Request["params"]["sessionID"]
-  readonly messageID: Endpoint0_8Request["payload"]["messageID"]
-  readonly files?: Endpoint0_8Request["payload"]["files"]
+type Endpoint0_9Request = Parameters<RawClient["server.session"]["session.revert.stage"]>[0]
+type Endpoint0_9Input = {
+  readonly sessionID: Endpoint0_9Request["params"]["sessionID"]
+  readonly messageID: Endpoint0_9Request["payload"]["messageID"]
+  readonly files?: Endpoint0_9Request["payload"]["files"]
 }
-const Endpoint0_8 = (raw: RawClient["server.session"]) => (input: Endpoint0_8Input) =>
+const Endpoint0_9 = (raw: RawClient["server.session"]) => (input: Endpoint0_9Input) =>
  raw["session.revert.stage"]({
    params: { sessionID: input.sessionID },
    payload: { messageID: input.messageID, files: input.files },
@@ -125,40 +129,99 @@ const Endpoint0_8 = (raw: RawClient["server.session"]) => (input: Endpoint0_8Inp
    Effect.map((value) => value.data),
  )

-type Endpoint0_9Request = Parameters<RawClient["server.session"]["session.revert.clear"]>[0]
-type Endpoint0_9Input = { readonly sessionID: Endpoint0_9Request["params"]["sessionID"] }
-const Endpoint0_9 = (raw: RawClient["server.session"]) => (input: Endpoint0_9Input) =>
-  raw["session.revert.clear"]({ params: { sessionID: input.sessionID } }).pipe(Effect.mapError(mapClientError))
-
-type Endpoint0_10Request = Parameters<RawClient["server.session"]["session.revert.commit"]>[0]
+type Endpoint0_10Request = Parameters<RawClient["server.session"]["session.revert.clear"]>[0]
 type Endpoint0_10Input = { readonly sessionID: Endpoint0_10Request["params"]["sessionID"] }
 const Endpoint0_10 = (raw: RawClient["server.session"]) => (input: Endpoint0_10Input) =>
-  raw["session.revert.commit"]({ params: { sessionID: input.sessionID } }).pipe(Effect.mapError(mapClientError))
+  raw["session.revert.clear"]({ params: { sessionID: input.sessionID } }).pipe(Effect.mapError(mapClientError))

-type Endpoint0_11Request = Parameters<RawClient["server.session"]["session.context"]>[0]
+type Endpoint0_11Request = Parameters<RawClient["server.session"]["session.revert.commit"]>[0]
 type Endpoint0_11Input = { readonly sessionID: Endpoint0_11Request["params"]["sessionID"] }
 const Endpoint0_11 = (raw: RawClient["server.session"]) => (input: Endpoint0_11Input) =>
+  raw["session.revert.commit"]({ params: { sessionID: input.sessionID } }).pipe(Effect.mapError(mapClientError))
+
+type Endpoint0_12Request = Parameters<RawClient["server.session"]["session.context"]>[0]
+type Endpoint0_12Input = { readonly sessionID: Endpoint0_12Request["params"]["sessionID"] }
+const Endpoint0_12 = (raw: RawClient["server.session"]) => (input: Endpoint0_12Input) =>
  raw["session.context"]({ params: { sessionID: input.sessionID } }).pipe(
    Effect.mapError(mapClientError),
    Effect.map((value) => value.data),
  )

+type Endpoint0_13Request = Parameters<RawClient["server.session"]["session.history"]>[0]
+type Endpoint0_13Input = {
+  readonly sessionID: Endpoint0_13Request["params"]["sessionID"]
+  readonly limit?: Endpoint0_13Request["query"]["limit"]
+  readonly after?: Endpoint0_13Request["query"]["after"]
+}
+const Endpoint0_13 = (raw: RawClient["server.session"]) => (input: Endpoint0_13Input) =>
+  raw["session.history"]({
+    params: { sessionID: input.sessionID },
+    query: { limit: input.limit, after: input.after },
+  }).pipe(Effect.mapError(mapClientError))
+
+type Endpoint0_14Request = Parameters<RawClient["server.session"]["session.events"]>[0]
+type Endpoint0_14Input = {
+  readonly sessionID: Endpoint0_14Request["params"]["sessionID"]
+  readonly after?: Endpoint0_14Request["query"]["after"]
+}
+const Endpoint0_14 = (raw: RawClient["server.session"]) => (input: Endpoint0_14Input) =>
+  Stream.unwrap(
+    raw["session.events"]({ params: { sessionID: input.sessionID }, query: { after: input.after } }).pipe(
+      Effect.mapError(mapClientError),
+      Effect.map((stream) => stream.pipe(Stream.mapError(mapClientError))),
+    ),
+  )
+
+type Endpoint0_15Request = Parameters<RawClient["server.session"]["session.interrupt"]>[0]
+type Endpoint0_15Input = { readonly sessionID: Endpoint0_15Request["params"]["sessionID"] }
+const Endpoint0_15 = (raw: RawClient["server.session"]) => (input: Endpoint0_15Input) =>
+  raw["session.interrupt"]({ params: { sessionID: input.sessionID } }).pipe(Effect.mapError(mapClientError))
+
+type Endpoint0_16Request = Parameters<RawClient["server.session"]["session.message"]>[0]
+type Endpoint0_16Input = {
+  readonly sessionID: Endpoint0_16Request["params"]["sessionID"]
+  readonly messageID: Endpoint0_16Request["params"]["messageID"]
+}
+const Endpoint0_16 = (raw: RawClient["server.session"]) => (input: Endpoint0_16Input) =>
+  raw["session.message"]({ params: { sessionID: input.sessionID, messageID: input.messageID } }).pipe(
+    Effect.mapError(mapClientError),
+    Effect.map((value) => value.data),
+  )
+
 const adaptGroup0 = (raw: RawClient["server.session"]) => ({
  list: Endpoint0_0(raw),
  create: Endpoint0_1(raw),
-  get: Endpoint0_2(raw),
-  switchAgent: Endpoint0_3(raw),
-  switchModel: Endpoint0_4(raw),
-  prompt: Endpoint0_5(raw),
-  compact: Endpoint0_6(raw),
-  wait: Endpoint0_7(raw),
-  stage: Endpoint0_8(raw),
-  clear: Endpoint0_9(raw),
-  commit: Endpoint0_10(raw),
-  context: Endpoint0_11(raw),
+  active: Endpoint0_2(raw),
+  get: Endpoint0_3(raw),
+  switchAgent: Endpoint0_4(raw),
+  switchModel: Endpoint0_5(raw),
+  prompt: Endpoint0_6(raw),
+  compact: Endpoint0_7(raw),
+  wait: Endpoint0_8(raw),
+  stage: Endpoint0_9(raw),
+  clear: Endpoint0_10(raw),
+  commit: Endpoint0_11(raw),
+  context: Endpoint0_12(raw),
+  history: Endpoint0_13(raw),
+  events: Endpoint0_14(raw),
+  interrupt: Endpoint0_15(raw),
+  message: Endpoint0_16(raw),
 })

-const adaptClient = (raw: RawClient) => ({ sessions: adaptGroup0(raw["server.session"]) })
+const Endpoint1_0 = (raw: RawClient["server.event"]) => () =>
+  Stream.unwrap(
+    raw["event.subscribe"]({}).pipe(
+      Effect.mapError(mapClientError),
+      Effect.map((stream) => stream.pipe(Stream.mapError(mapClientError))),
+    ),
+  )
+
+const adaptGroup1 = (raw: RawClient["server.event"]) => ({ subscribe: Endpoint1_0(raw) })
+
+const adaptClient = (raw: RawClient) => ({
+  sessions: adaptGroup0(raw["server.session"]),
+  events: adaptGroup1(raw["server.event"]),
+})

 export const make = (options?: { readonly baseUrl?: URL | string }) =>
-  HttpApiClient.make(Api, options).pipe(Effect.map(adaptClient))
+  HttpApiClient.make(ClientApi, options).pipe(Effect.map(adaptClient))
@@ -1 +1,6 @@
-["client-error.ts", "client.ts", "index.ts", "types.ts"]
+[
+  "client-error.ts",
+  "client.ts",
+  "index.ts",
+  "types.ts"
+]
@@ -3,6 +3,7 @@ import type {
  SessionsListOutput,
  SessionsCreateInput,
  SessionsCreateOutput,
+  SessionsActiveOutput,
  SessionsGetInput,
  SessionsGetOutput,
  SessionsSwitchAgentInput,
@@ -23,6 +24,15 @@ import type {
  SessionsCommitOutput,
  SessionsContextInput,
  SessionsContextOutput,
+  SessionsHistoryInput,
+  SessionsHistoryOutput,
+  SessionsEventsInput,
+  SessionsEventsOutput,
+  SessionsInterruptInput,
+  SessionsInterruptOutput,
+  SessionsMessageInput,
+  SessionsMessageOutput,
+  EventsSubscribeOutput,
 } from "./types"
 import { ClientError } from "./client-error"

@@ -192,6 +202,17 @@ export function make(options: ClientOptions) {
          },
          requestOptions,
        ).then((value) => value.data),
+      active: (requestOptions?: RequestOptions) =>
+        request<{ readonly data: SessionsActiveOutput }>(
+          {
+            method: "GET",
+            path: `/api/session/active`,
+            successStatus: 200,
+            declaredStatuses: [401, 400],
+            empty: false,
+          },
+          requestOptions,
+        ).then((value) => value.data),
      get: (input: SessionsGetInput, requestOptions?: RequestOptions) =>
        request<{ readonly data: SessionsGetOutput }>(
          {
@@ -306,6 +327,59 @@ export function make(options: ClientOptions) {
          },
          requestOptions,
        ).then((value) => value.data),
+      history: (input: SessionsHistoryInput, requestOptions?: RequestOptions) =>
+        request<SessionsHistoryOutput>(
+          {
+            method: "GET",
+            path: `/api/session/${encodeURIComponent(input.sessionID)}/history`,
+            query: { limit: input.limit, after: input.after },
+            successStatus: 200,
+            declaredStatuses: [404, 400, 401],
+            empty: false,
+          },
+          requestOptions,
+        ),
+      events: (input: SessionsEventsInput, requestOptions?: RequestOptions): AsyncIterable<SessionsEventsOutput> =>
+        sse<SessionsEventsOutput>(
+          {
+            method: "GET",
+            path: `/api/session/${encodeURIComponent(input.sessionID)}/event`,
+            query: { after: input.after },
+            successStatus: 200,
+            declaredStatuses: [404, 400, 401],
+            empty: false,
+          },
+          requestOptions,
+        ),
+      interrupt: (input: SessionsInterruptInput, requestOptions?: RequestOptions) =>
+        request<SessionsInterruptOutput>(
+          {
+            method: "POST",
+            path: `/api/session/${encodeURIComponent(input.sessionID)}/interrupt`,
+            successStatus: 204,
+            declaredStatuses: [404, 400, 401],
+            empty: true,
+          },
+          requestOptions,
+        ),
+      message: (input: SessionsMessageInput, requestOptions?: RequestOptions) =>
+        request<{ readonly data: SessionsMessageOutput }>(
+          {
+            method: "GET",
+            path: `/api/session/${encodeURIComponent(input.sessionID)}/message/${encodeURIComponent(input.messageID)}`,
+            successStatus: 200,
+            declaredStatuses: [404, 400, 401],
+            empty: false,
+          },
+          requestOptions,
+        ).then((value) => value.data),
+    },
+    events: {
+      subscribe: (requestOptions?: RequestOptions): AsyncIterable<EventsSubscribeOutput> =>
+        sse<EventsSubscribeOutput>(
+          { method: "GET", path: `/api/event`, successStatus: 200, declaredStatuses: [401, 400], empty: false },
+          requestOptions,
+        ),
    },
  }
 }
@@ -1 +1,2 @@
 export * from "./generated/index"
+export type { EventsSubscribeOutput as OpenCodeEvent } from "./generated/types"
@@ -0,0 +1,10 @@
+/* This file is auto-generated by SST. Do not edit. */
+/* tslint:disable */
+/* eslint-disable */
+/* deno-fmt-ignore-file */
+/* biome-ignore-all lint: auto-generated */
+
+/// <reference path="../../sst-env.d.ts" />
+
+import "sst"
+export {}
@@ -20,7 +20,7 @@ import { Workspace } from "@opencode-ai/schema/workspace"
 import { Api } from "@opencode-ai/server/api"
 import { compile, emitPromise } from "@opencode-ai/httpapi-codegen"
 import { HttpApi } from "effect/unstable/httpapi"
-import { SessionGroup } from "../src/contract"
+import { EventGroup, SessionGroup } from "../src/contract"

 test("Core and Server reuse the authoritative Schema and Protocol values", () => {
  expect(AgentV2.ID).toBe(Agent.ID)
@@ -32,6 +32,7 @@ test("Core and Server reuse the authoritative Schema and Protocol values", () =>
  expect(CorePrompt).toBe(Prompt)
  expect(Api.groups["server.session"].identifier).toBe("server.session")
  expect(SessionGroup.identifier).toBe(Api.groups["server.session"].identifier)
+  expect(EventGroup.identifier).toBe(Api.groups["server.event"].identifier)
  expect(Session.ID.create()).toStartWith("ses_")
  expect(Project.ID.global).toBe("global")
  expect(Provider.ID.anthropic).toBe("anthropic")
@@ -1,7 +1,7 @@
 import { expect, test } from "bun:test"
-import { DateTime, Effect } from "effect"
+import { DateTime, Effect, Stream } from "effect"
 import { HttpClient, HttpClientResponse } from "effect/unstable/http"
-import { AbsolutePath, Agent, Location, Model, OpenCode, Prompt, Session } from "../src/effect"
+import { AbsolutePath, Agent, Location, Model, OpenCode, Prompt, Session, SessionMessage } from "../src/effect"

 test("sessions.get returns the decoded Effect projection", async () => {
  const httpClient = HttpClient.make((request) =>
@@ -15,15 +15,91 @@ test("sessions.get returns the decoded Effect projection", async () => {
  expect(DateTime.toEpochMillis(result.time.created)).toBe(1_717_171_717_000)
 })

+test("events.subscribe exposes and decodes the native Effect event stream", async () => {
+  const httpClient = HttpClient.make((request) =>
+    Effect.succeed(
+      HttpClientResponse.fromWeb(
+        request,
+        new Response(
+          `data: ${JSON.stringify({ id: "evt_connected", type: "server.connected", data: {} })}\n\n` +
+            `data: ${JSON.stringify(modelSwitchedEvent)}\n\n`,
+          { headers: { "content-type": "text/event-stream" } },
+        ),
+      ),
+    ),
+  )
+  const events = await Effect.gen(function* () {
+    const client = yield* OpenCode.make({ baseUrl: "http://localhost:3000" })
+    return yield* client.events.subscribe().pipe(Stream.runCollect)
+  }).pipe(Effect.provideService(HttpClient.HttpClient, httpClient), Effect.runPromise)
+
+  expect(Array.from(events).map((event) => event.type)).toEqual(["server.connected", "session.next.model.switched"])
+  const durable = events[1]
+  if (durable?.type !== "session.next.model.switched") throw new Error("Expected model event")
+  expect(DateTime.toEpochMillis(durable.data.timestamp)).toBe(1_717_171_717_000)
+  expect(durable.durable).toEqual({ aggregateID: "ses_test", seq: 1, version: 1 })
+})
+
+test("events.subscribe terminates on Effect protocol decode failures", async () => {
+  const httpClient = HttpClient.make((request) =>
+    Effect.succeed(
+      HttpClientResponse.fromWeb(
+        request,
+        new Response(`data: {"type":"server.connected"}\n\n`, {
+          headers: { "content-type": "text/event-stream" },
+        }),
+      ),
+    ),
+  )
+  const error = await Effect.gen(function* () {
+    const client = yield* OpenCode.make({ baseUrl: "http://localhost:3000" })
+    return yield* client.events.subscribe().pipe(Stream.runCollect, Effect.flip)
+  }).pipe(Effect.provideService(HttpClient.HttpClient, httpClient), Effect.runPromise)
+
+  expect(error._tag).toBe("ClientError")
+})
+
 test("session methods retain decoded Effect inputs and outputs", async () => {
+  const historyQueries: Array<Record<string, string>> = []
+  let historyPage = 0
  const httpClient = HttpClient.make((request) => {
    const url = request.url
+    if (url.includes("/event")) {
+      return Effect.succeed(
+        HttpClientResponse.fromWeb(
+          request,
+          new Response(`data: ${JSON.stringify(modelSwitchedEvent)}\n\n`, {
+            headers: { "content-type": "text/event-stream" },
+          }),
+        ),
+      )
+    }
+    if (url.includes("/history")) {
+      historyPage++
+      historyQueries.push(Object.fromEntries(request.urlParams.params))
+      return Effect.succeed(
+        HttpClientResponse.fromWeb(
+          request,
+          Response.json(
+            historyPage === 1 ? { data: [modelSwitchedEvent], hasMore: true } : { data: [], hasMore: false },
+          ),
+        ),
+      )
+    }
    if (url.includes("/prompt")) {
      return Effect.succeed(HttpClientResponse.fromWeb(request, Response.json(admission)))
    }
    if (url.includes("/context")) {
      return Effect.succeed(HttpClientResponse.fromWeb(request, Response.json({ data: [] })))
    }
+    if (url.includes("/message/")) {
+      return Effect.succeed(HttpClientResponse.fromWeb(request, Response.json({ data: modelSwitchedMessage })))
+    }
+    if (url.endsWith("/api/session/active")) {
+      return Effect.succeed(
+        HttpClientResponse.fromWeb(request, Response.json({ data: { ses_test: { type: "running" } } })),
+      )
+    }
    if (request.method === "POST" && url.endsWith("/api/session")) {
      return Effect.succeed(HttpClientResponse.fromWeb(request, Response.json(session)))
    }
@@ -37,6 +113,7 @@ test("session methods retain decoded Effect inputs and outputs", async () => {
  const result = await Effect.gen(function* () {
    const client = yield* OpenCode.make({ baseUrl: "http://localhost:3000" })
    const page = yield* client.sessions.list({ limit: 10 })
+    const active = yield* client.sessions.active()
    const created = yield* client.sessions.create({
      location: Location.Ref.make({ directory: AbsolutePath.make("/tmp/project") }),
    })
@@ -53,10 +130,31 @@ test("session methods retain decoded Effect inputs and outputs", async () => {
    yield* client.sessions.compact({ sessionID: Session.ID.make("ses_test") })
    yield* client.sessions.wait({ sessionID: Session.ID.make("ses_test") })
    const context = yield* client.sessions.context({ sessionID: Session.ID.make("ses_test") })
-    return { page, created, admitted, context }
+    const history = yield* client.sessions.history({
+      sessionID: Session.ID.make("ses_test"),
+      after: 0,
+      limit: 1,
+    })
+    const historyNext = history.hasMore
+      ? yield* client.sessions.history({
+          sessionID: Session.ID.make("ses_test"),
+          after: history.data.at(-1)?.durable?.seq,
+          limit: 2,
+        })
+      : undefined
+    const events = yield* client.sessions
+      .events({ sessionID: Session.ID.make("ses_test"), after: 0 })
+      .pipe(Stream.runCollect)
+    yield* client.sessions.interrupt({ sessionID: Session.ID.make("ses_test") })
+    const message = yield* client.sessions.message({
+      sessionID: Session.ID.make("ses_test"),
+      messageID: SessionMessage.ID.make("msg_model"),
+    })
+    return { page, active, created, admitted, context, history, historyNext, events, message }
  }).pipe(Effect.provideService(HttpClient.HttpClient, httpClient), Effect.runPromise)

  expect(DateTime.toEpochMillis(result.page.data[0].time.created)).toBe(1_717_171_717_000)
+  expect(result.active).toEqual({ ses_test: { type: "running" } })
  expect(Object.getPrototypeOf(result.page.data[0])).toBe(Object.prototype)
  expect(Object.getPrototypeOf(result.created)).toBe(Object.prototype)
  expect(result.created.id).toBe("ses_test")
@@ -64,6 +162,37 @@ test("session methods retain decoded Effect inputs and outputs", async () => {
  expect(Object.getPrototypeOf(result.admitted.prompt)).toBe(Object.prototype)
  expect(DateTime.toEpochMillis(result.admitted.timeCreated)).toBe(1_717_171_717_000)
  expect(result.context).toEqual([])
+  expect(DateTime.toEpochMillis(result.history.data[0].data.timestamp)).toBe(1_717_171_717_000)
+  expect(result.history).toEqual(expect.objectContaining({ hasMore: true }))
+  expect(result.historyNext).toEqual({ data: [], hasMore: false })
+  expect(historyQueries[0]).toEqual({ limit: "1", after: "0" })
+  expect(historyQueries[1]).toEqual({ limit: "2", after: "1" })
+  expect(DateTime.toEpochMillis(result.events[0].data.timestamp)).toBe(1_717_171_717_000)
+  expect(result.message).toEqual(expect.objectContaining({ id: "msg_model", type: "model-switched" }))
+})
+
+test("sessions.history retains the typed SessionNotFoundError", async () => {
+  const httpClient = HttpClient.make((request) =>
+    Effect.succeed(
+      HttpClientResponse.fromWeb(
+        request,
+        Response.json(
+          { _tag: "SessionNotFoundError", sessionID: "ses_missing", message: "Session not found" },
+          { status: 404 },
+        ),
+      ),
+    ),
+  )
+  const error = await Effect.gen(function* () {
+    const client = yield* OpenCode.make({ baseUrl: "http://localhost:3000" })
+    return yield* client.sessions
+      .history({
+        sessionID: Session.ID.make("ses_missing"),
+      })
+      .pipe(Effect.flip)
+  }).pipe(Effect.provideService(HttpClient.HttpClient, httpClient), Effect.runPromise)
+
+  expect(error._tag).toBe("SessionNotFoundError")
 })

 const session = {
@@ -96,3 +225,22 @@ const admission = {
    timeCreated: 1_717_171_717_000,
  },
 }
+
+const modelSwitchedMessage = {
+  id: "msg_model",
+  type: "model-switched",
+  time: { created: 1_717_171_717_000 },
+  model: { id: "claude", providerID: "anthropic" },
+}
+
+const modelSwitchedEvent = {
+  id: "evt_model",
+  type: "session.next.model.switched",
+  durable: { aggregateID: "ses_test", seq: 1, version: 1 },
+  data: {
+    timestamp: 1_717_171_717_000,
+    sessionID: "ses_test",
+    messageID: "msg_model",
+    model: { id: "claude", providerID: "anthropic" },
+  },
+}
@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { isUnauthorizedError, OpenCode } from "../src"
+import { isSessionNotFoundError, isUnauthorizedError, OpenCode } from "../src"

 test("sessions.get returns the wire projection", async () => {
  const client = OpenCode.make({
@@ -17,22 +17,66 @@ test("sessions.get returns the wire projection", async () => {
  expect(result.time.created).toBe(1_717_171_717_000)
 })

+test("events.subscribe exposes the Promise event stream wire projection", async () => {
+  const client = OpenCode.make({
+    baseUrl: "http://localhost:3000",
+    fetch: async () =>
+      new Response(
+        `: heartbeat\n\ndata: ${JSON.stringify({ id: "evt_connected", type: "server.connected", data: {} })}\n\n` +
+          `data: ${JSON.stringify(modelSwitchedEvent)}\n\n`,
+        { headers: { "content-type": "text/event-stream" } },
+      ),
+  })
+  const events = []
+  for await (const event of client.events.subscribe()) events.push(event)
+
+  expect(events).toEqual([{ id: "evt_connected", type: "server.connected", data: {} }, modelSwitchedEvent])
+  expect(events[1]?.type === "session.next.model.switched" && events[1].data.timestamp).toBe(1_717_171_717_000)
+})
+
+test("events.subscribe terminates on malformed Promise SSE data", async () => {
+  const client = OpenCode.make({
+    baseUrl: "http://localhost:3000",
+    fetch: async () => new Response("data: {not-json}\n\n", { headers: { "content-type": "text/event-stream" } }),
+  })
+
+  await expect(client.events.subscribe()[Symbol.asyncIterator]().next()).rejects.toMatchObject({
+    name: "ClientError",
+    reason: "MalformedResponse",
+  })
+})
+
 test("session methods use the public HTTP contract", async () => {
  const requests: Array<{ url: string; init?: RequestInit }> = []
+  let historyPage = 0
  const client = OpenCode.make({
    baseUrl: "http://localhost:3000",
    fetch: async (input, init) => {
      const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url
      requests.push({ url, init })
+      if (url.includes("/event")) {
+        return new Response(`data: ${JSON.stringify(modelSwitchedEvent)}\n\n`, {
+          headers: { "content-type": "text/event-stream" },
+        })
+      }
+      if (url.includes("/history")) {
+        historyPage++
+        return Response.json(
+          historyPage === 1 ? { data: [modelSwitchedEvent], hasMore: true } : { data: [], hasMore: false },
+        )
+      }
      if (url.includes("/prompt")) return Response.json(admission)
      if (url.includes("/context")) return Response.json({ data: [] })
+      if (url.includes("/message/")) return Response.json({ data: modelSwitchedMessage })
+      if (url.endsWith("/api/session/active")) return Response.json({ data: { ses_test: { type: "running" } } })
      if (init?.method === "POST" && url.endsWith("/api/session")) return Response.json(session)
      if (init?.method === "POST") return new Response(null, { status: 204 })
      return Response.json({ data: [session.data], cursor: { next: "next" } })
    },
  })

-  const page = await client.sessions.list({ limit: "10", order: "desc" })
+  const page = await client.sessions.list({ limit: 10, order: "desc" })
+  const active = await client.sessions.active()
  const created = await client.sessions.create({ location: { directory: "/tmp/project" } })
  await client.sessions.switchAgent({ sessionID: "ses_test", agent: "build" })
  await client.sessions.switchModel({
@@ -47,13 +91,28 @@ test("session methods use the public HTTP contract", async () => {
  await client.sessions.compact({ sessionID: "ses_test" })
  await client.sessions.wait({ sessionID: "ses_test" })
  const context = await client.sessions.context({ sessionID: "ses_test" })
+  const history = await client.sessions.history({ sessionID: "ses_test", after: 0, limit: 1 })
+  const historyAfter = history.data.at(-1)?.durable?.seq
+  const historyNext = history.hasMore
+    ? await client.sessions.history({ sessionID: "ses_test", after: historyAfter, limit: 2 })
+    : undefined
+  const events = []
+  for await (const event of client.sessions.events({ sessionID: "ses_test", after: 0 })) events.push(event)
+  await client.sessions.interrupt({ sessionID: "ses_test" })
+  const message = await client.sessions.message({ sessionID: "ses_test", messageID: "msg_model" })

  expect(page.cursor.next).toBe("next")
+  expect(active).toEqual({ ses_test: { type: "running" } })
  expect(created.id).toBe("ses_test")
  expect(admitted.id).toBe("msg_test")
  expect(context).toEqual([])
+  expect(history).toEqual({ data: [modelSwitchedEvent], hasMore: true })
+  expect(historyNext).toEqual({ data: [], hasMore: false })
+  expect(events).toEqual([modelSwitchedEvent])
+  expect(message).toEqual(modelSwitchedMessage)
  expect(requests.map((request) => [request.init?.method, request.url])).toEqual([
    ["GET", "http://localhost:3000/api/session?limit=10&order=desc"],
+    ["GET", "http://localhost:3000/api/session/active"],
    ["POST", "http://localhost:3000/api/session"],
    ["POST", "http://localhost:3000/api/session/ses_test/agent"],
    ["POST", "http://localhost:3000/api/session/ses_test/model"],
@@ -61,8 +120,13 @@ test("session methods use the public HTTP contract", async () => {
    ["POST", "http://localhost:3000/api/session/ses_test/compact"],
    ["POST", "http://localhost:3000/api/session/ses_test/wait"],
    ["GET", "http://localhost:3000/api/session/ses_test/context"],
+    ["GET", "http://localhost:3000/api/session/ses_test/history?limit=1&after=0"],
+    ["GET", "http://localhost:3000/api/session/ses_test/history?limit=2&after=1"],
+    ["GET", "http://localhost:3000/api/session/ses_test/event?after=0"],
+    ["POST", "http://localhost:3000/api/session/ses_test/interrupt"],
+    ["GET", "http://localhost:3000/api/session/ses_test/message/msg_model"],
  ])
-  const body = requests[4]?.init?.body
+  const body = requests.find((request) => request.url.endsWith("/api/session/ses_test/prompt"))?.init?.body
  if (typeof body !== "string") throw new Error("Expected JSON request body")
  expect(JSON.parse(body)).toEqual({
    prompt: { text: "Hello" },
@@ -85,6 +149,24 @@ test("middleware errors remain declared client errors", async () => {
  }
 })

+test("sessions.history decodes SessionNotFoundError", async () => {
+  const client = OpenCode.make({
+    baseUrl: "http://localhost:3000",
+    fetch: async () =>
+      Response.json(
+        { _tag: "SessionNotFoundError", sessionID: "ses_missing", message: "Session not found" },
+        { status: 404 },
+      ),
+  })
+
+  try {
+    await client.sessions.history({ sessionID: "ses_missing" })
+    throw new Error("Expected request to fail")
+  } catch (error) {
+    expect(isSessionNotFoundError(error)).toBe(true)
+  }
+})
+
 const session = {
  data: {
    id: "ses_test",
@@ -115,3 +197,22 @@ const admission = {
    timeCreated: 1_717_171_717_000,
  },
 }
+
+const modelSwitchedMessage = {
+  id: "msg_model",
+  type: "model-switched",
+  time: { created: 1_717_171_717_000 },
+  model: { id: "claude", providerID: "anthropic" },
+}
+
+const modelSwitchedEvent = {
+  id: "evt_model",
+  type: "session.next.model.switched",
+  durable: { aggregateID: "ses_test", seq: 1, version: 1 },
+  data: {
+    timestamp: 1_717_171_717_000,
+    sessionID: "ses_test",
+    messageID: "msg_model",
+    model: { id: "claude", providerID: "anthropic" },
+  },
+}
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-app",
-  "version": "1.17.10",
+  "version": "1.17.11",
  "type": "module",
  "license": "MIT",
  "scripts": {
@@ -1,10 +1,15 @@
 import type { APIEvent } from "@solidjs/start/server"
 import { Resource } from "@opencode-ai/console-resource"
+import { LOCALE_HEADER, cookie, localeFromRequest, route, tag } from "~/lib/language"

 const dataPath = "/data"

 export async function statsProxy(evt: APIEvent) {
  const req = evt.request.clone()
+  const locale = localeFromRequest(req)
+  const redirect = redirectToLocalizedData(req, new URL(req.url), locale)
+  if (redirect) return redirect
+
  const targetUrl = new URL(req.url)
  targetUrl.protocol = "https:"
  targetUrl.hostname = Resource.App.stage === "production" ? "stats.opencode.ai" : "stats.dev.opencode.ai"
@@ -18,9 +23,13 @@ export async function statsProxy(evt: APIEvent) {
    targetUrl.pathname = targetUrl.pathname.slice(dataPath.length)
  }

+  const requestHeaders = new Headers(req.headers)
+  requestHeaders.set(LOCALE_HEADER, locale)
+  requestHeaders.set("accept-language", tag(locale))
+
  const response = await fetch(targetUrl, {
    method: req.method,
-    headers: req.headers,
+    headers: requestHeaders,
    body: req.body,
  })

@@ -30,6 +39,7 @@ export async function statsProxy(evt: APIEvent) {
  headers.delete("content-encoding")
  headers.delete("content-length")
  headers.delete("etag")
+  appendVary(headers, "Accept-Language", "Cookie")

  return new Response(rewriteStatsHtml(await response.text()), {
    status: response.status,
@@ -52,3 +62,60 @@ export function statsRedirect(evt: APIEvent) {
 function rewriteStatsHtml(html: string) {
  return html.replaceAll('"/_build/', `"${dataPath}/_build/`).replaceAll("'/_build/", `'${dataPath}/_build/`)
 }
+
+function redirectToLocalizedData(request: Request, url: URL, locale: ReturnType<typeof localeFromRequest>) {
+  if (locale === "en") return null
+  if (request.headers.get(LOCALE_HEADER)) return null
+  if (request.method !== "GET" && request.method !== "HEAD") return null
+  if (!acceptsHtml(request)) return null
+  if (!url.pathname.startsWith(`${dataPath}/`) && url.pathname !== dataPath) return null
+  if (isDataBypassPath(url.pathname)) return null
+
+  const next = new URL(url)
+  next.pathname = route(locale, url.pathname)
+
+  const headers = new Headers({
+    Location: next.toString(),
+  })
+  headers.append("set-cookie", cookie(locale))
+  appendVary(headers, "Accept-Language", "Cookie")
+
+  return new Response(null, {
+    status: 308,
+    headers,
+  })
+}
+
+function acceptsHtml(request: Request) {
+  const accept = request.headers.get("accept")
+  return !accept || accept.includes("text/html") || accept.includes("*/*")
+}
+
+function isDataBypassPath(pathname: string) {
+  return (
+    pathname.startsWith(`${dataPath}/_build/`) ||
+    pathname.startsWith(`${dataPath}/api/`) ||
+    pathname.startsWith(`${dataPath}/_server`) ||
+    pathname === `${dataPath}/banner.jpg` ||
+    pathname === `${dataPath}/banner.png`
+  )
+}
+
+function appendVary(headers: Headers, ...values: string[]) {
+  const existing = headers
+    .get("vary")
+    ?.split(",")
+    .map((value) => value.trim())
+    .filter(Boolean)
+
+  headers.set(
+    "vary",
+    values
+      .reduce(
+        (result, value) =>
+          result.some((item) => item.toLowerCase() === value.toLowerCase()) ? result : [...result, value],
+        existing ?? [],
+      )
+      .join(", "),
+  )
+}
@@ -196,11 +196,12 @@ export async function handler(
          providerInfo.modifyHeaders(headers, providerInfo.apiKey, stickyId)
          Object.entries(providerInfo.headerModifier ?? {}).forEach(([k, v]) => {
            if (v === "$ip") return headers.set(k, ip)
-            if (v === "$caller") return headers.set(k, `caller:${ip}`)
+            if (v === "$caller") return headers.set(k, stickyId)
            if (v === "$session") return headers.set(k, sessionId)
            if (v === "$model") return headers.set(k, model)
            if (v === "$request") return headers.set(k, requestId)
            if (v === "$project") return headers.set(k, projectId)
+            if (v === "$workspace" && authInfo?.workspaceID) return headers.set(k, authInfo.workspaceID)
            headers.set(k, v)
          })
          headers.delete("host")
@@ -214,6 +215,16 @@ export async function handler(
        body: reqBody,
      })

+      if (providerInfo.id.startsWith("console.")) {
+        const resEndpointId = res.headers.get("x-opencode-endpoint-id")
+        const resEndpointModelId = res.headers.get("x-opencode-upstream-model-id")
+        if (resEndpointId && resEndpointModelId)
+          logger.metric({
+            provider: resEndpointId,
+            "provider.model": resEndpointModelId,
+          })
+      }
+
      if (res.status !== 200) {
        logger.metric({
          "llm.error.code": res.status,
@@ -1,7 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/console-core",
-  "version": "1.17.10",
+  "version": "1.17.11",
  "private": true,
  "type": "module",
  "license": "MIT",
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-function",
-  "version": "1.17.10",
+  "version": "1.17.11",
  "$schema": "https://json.schemastore.org/package.json",
  "private": true,
  "type": "module",
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-mail",
-  "version": "1.17.10",
+  "version": "1.17.11",
  "dependencies": {
    "@jsx-email/all": "2.2.3",
    "@jsx-email/cli": "1.4.3",
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-support",
-  "version": "1.17.10",
+  "version": "1.17.11",
  "type": "module",
  "license": "MIT",
  "scripts": {
@@ -8,7 +8,6 @@
    "dev": "sst shell --stage production -- vite dev"
  },
  "dependencies": {
-    "@cloudflare/vite-plugin": "1.15.2",
    "@opencode-ai/console-core": "workspace:*",
    "@solidjs/meta": "catalog:",
    "@solidjs/router": "catalog:",
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
-  "version": "1.17.10",
+  "version": "1.17.11",
  "name": "@opencode-ai/core",
  "type": "module",
  "license": "MIT",
@@ -16,6 +16,8 @@
    "opencode": "./bin/opencode"
  },
  "exports": {
+    "./effect/layer-node": "./src/effect/layer-node/index.ts",
+    "./effect/node": "./src/effect/node.ts",
    "./session/runner": "./src/session/runner/index.ts",
    "./system-context": "./src/system-context/index.ts",
    "./*": "./src/*.ts"
@@ -1,5 +1,6 @@
 export * as AgentV2 from "./agent"

+import { makeLocationNode } from "./effect/node"
 import { Array, Context, Effect, Layer, Types } from "effect"
 import { Agent } from "@opencode-ai/schema/agent"
 import { State } from "./state"
@@ -106,3 +107,5 @@ export const layer = Layer.effect(
 )

 export const locationLayer = layer
+
+export const node = makeLocationNode({ service: Service, layer, deps: [] })
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Aiden Cline	cfae321101	chore(console): remove unused support dependency Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>	2026-06-27 03:44:48 +00:00
Aiden Cline	36c416e143	fix(mcp): request refresh token scope (#34125 )	2026-06-26 22:27:43 -05:00
Aiden Cline	e1e0304a96	fix(mcp): surface OAuth completion errors (#34145 )	2026-06-26 22:21:16 -05:00
opencode-agent[bot]	71c3a7c8f2	chore: generate	2026-06-27 02:47:33 +00:00
James Long	ecdfff5a42	refactor(core): separate out location node functionality and integrate into v2 (#34119 )	2026-06-26 22:46:07 -04:00
opencode-agent[bot]	4b948c5d74	fix(app): hide home session archive action (#34136 ) Co-authored-by: 𝓛𝓲𝓽𝓽𝓵𝓮 𝓕𝓻𝓪𝓷𝓴 <little-frank@opencord.local>	2026-06-27 02:23:36 +00:00
opencode-agent[bot]	cd56c51e2d	fix(app): keep bare slash as plain inline code (#34122 ) Co-authored-by: 𝓛𝓲𝓽𝓽𝓵𝓮 𝓕𝓻𝓪𝓷𝓴 <little-frank@opencord.local>	2026-06-26 22:21:01 +00:00
opencode-agent[bot]	43e39d7f68	fix(tui): use generated event union (#34118 ) Co-authored-by: 𝓛𝓲𝓽𝓽𝓵𝓮 𝓕𝓻𝓪𝓷𝓴 <little-frank@opencord.local>	2026-06-26 18:04:53 -04:00
Frank	7a17925495	zen: new inference	2026-06-26 16:25:07 -04:00
Brendan Allan	5acb2530b4	fix(app): centralize notification state (#34105 )	2026-06-26 19:24:33 +00:00
opencode-agent[bot]	44a6787359	chore: generate	2026-06-26 19:18:18 +00:00
Kit Langton	42e6b7db32	feat(sdk): expose live event stream (#34098 )	2026-06-26 21:16:33 +02:00
opencode-agent[bot]	2c02f8bace	chore: update nix node_modules hashes	2026-06-26 18:53:34 +00:00
Affan Ali	2ec20e576b	fix(app): slow tooltip display for models (#30745 ) Co-authored-by: affanali2k3 <affanalikhanxx@gmail.com>	2026-06-27 02:53:08 +08:00
opencode-agent[bot]	20f47fec7a	chore: generate	2026-06-26 18:51:42 +00:00
Kit Langton	65210f2d97	feat(api): add finite durable session history pages (#34097 )	2026-06-26 14:49:47 -04:00
Brendan Allan	af0b7ffae7	fix(app): animate prompt selectors after loading (#34101 )	2026-06-27 02:36:01 +08:00
opencode-agent[bot]	0e2dd4ad15	chore: generate	2026-06-26 17:56:55 +00:00
Dax Raad	11d2f3e5f8	fix(llm): end reasoning before responses	2026-06-26 13:55:04 -04:00
Dax Raad	1ac6b4bec4	fix(core): authorize external read paths	2026-06-26 13:55:04 -04:00
opencode-agent[bot]	0befd9b049	chore: generate	2026-06-26 17:53:26 +00:00
Dax Raad	850a0dfe7c	fix(core): resolve prompt attachment mime types	2026-06-26 13:51:00 -04:00
opencode-agent[bot]	18a419e634	chore: generate	2026-06-26 17:36:45 +00:00
Adam	82f47cb312	feat(stats): add clickable section headings (#34095 )	2026-06-26 12:34:44 -05:00
Adam	7b1fe33ed3	fix(data): clarify unchanged rank	2026-06-26 12:29:29 -05:00
Stefan Avram	c72cca8def	docs: route enterprise contact links (#34080 )	2026-06-26 12:05:24 -05:00
Adam	05ce6bc275	fix(data): canonicalize locale pages	2026-06-26 12:00:32 -05:00
Shoubhit Dash	1de7368580	fix(acp): send partial completed tool updates (#34091 )	2026-06-26 22:21:35 +05:30
Brendan Allan	36f901588a	fix(app): wait for persisted home state before reading collapsed state (#34088 )	2026-06-27 00:25:43 +08:00
Ariane Emory	92f1a17b67	docs(providers): document blacklist and whitelist model filtering (#33792 )	2026-06-26 11:09:14 -05:00
Shoubhit Dash	ebf4007efd	fix(acp): enrich permission prompts (#34079 )	2026-06-26 21:25:52 +05:30
Brendan Allan	1aea999d7c	fix(app): consolidate add project action (#34086 )	2026-06-26 23:54:31 +08:00
Brendan Allan	4a8fee3b2d	feat(app): add new session workspace controls (#34085 )	2026-06-26 23:43:41 +08:00
Aiden Cline	0d3e0fc8f4	fix(core): enlarge OAuth callback card (#34082 )	2026-06-26 10:16:51 -05:00
Aiden Cline	f254476043	fix(llm): omit stateless response item ids (#34027 )	2026-06-26 10:14:43 -05:00
Aiden Cline	639c8e6475	tweak: update OAuth callback branding (#34081 )	2026-06-26 10:08:29 -05:00
Aiden Cline	e3bfd4cce6	fix(mcp): refresh credentials on reauthentication (#33717 )	2026-06-26 10:03:39 -05:00
Shoubhit Dash	c2882268d6	fix(acp): skip resume transcript replay (#34070 )	2026-06-26 14:12:05 +00:00
Aarav Sareen	9c38b91e91	feat(app): updates to design system (#34066 )	2026-06-26 13:22:35 +00:00
Shoubhit Dash	6e8e772582	fix(acp): surface prompt errors (#34061 )	2026-06-26 12:20:38 +00:00
Shoubhit Dash	971518c6d9	fix(core): refresh cached remote skills (#34059 )	2026-06-26 12:12:50 +00:00
Shoubhit Dash	ae853561cd	fix(opencode): preserve skill resource paths (#34052 )	2026-06-26 16:48:30 +05:30
Luke Parker	753d312c28	fix(tui): preserve renderer initialization errors (#33996 ) Co-authored-by: Shoubhit Dash <shoubhit2005@gmail.com>	2026-06-26 15:14:28 +05:30
vimtor	eeb5b1d8bc	core: prevent UI imports compiling TSX source	2026-06-26 10:25:48 +02:00
opencode-agent[bot]	f8ceb30b43	chore: generate	2026-06-26 08:06:37 +00:00
usrnk1	78a5a030ce	feat(app): refine session UI styling (#33860 ) Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>	2026-06-26 08:04:56 +00:00
opencode-agent[bot]	219ba24d90	chore: update nix node_modules hashes	2026-06-26 05:43:54 +00:00
Aiden Cline	e8fea9e63a	feat(oauth): unify OAuth callback browser pages (#34025 )	2026-06-26 00:36:40 -05:00
opencode-agent[bot]	11537260aa	chore: generate	2026-06-26 05:31:26 +00:00
Brendan Allan	929c4aaf29	refactor(app): replace tab drag handling with dndkit (#33880 ) Co-authored-by: opencode-agent[bot] <219766164+opencode-agent[bot]@users.noreply.github.com>	2026-06-26 05:29:58 +00:00
opencode-agent[bot]	19e510f5d2	refactor(app): use dropdown for project selector (#33984 )	2026-06-26 13:18:23 +08:00
opencode-agent[bot]	8a1608ed1d	chore: update nix node_modules hashes	2026-06-26 05:13:59 +00:00
opencode-agent[bot]	077deb9d82	fix(app): bump ghostty-web to prevent terminal resize hangs (#34020 ) Co-authored-by: Luke Parker <10430890+Hona@users.noreply.github.com>	2026-06-26 14:59:18 +10:00
opencode-agent[bot]	41f2705e72	chore: generate	2026-06-26 03:35:39 +00:00
Kit Langton	ef5c9f4931	feat(sdk): expose active sessions (#33991 )	2026-06-26 03:33:35 +00:00
Kit Langton	40ecfceec2	fix(sdk): wake embedded session execution (#33992 )	2026-06-25 23:04:14 -04:00
Kit Langton	a1f093a748	refactor(opencode): stop legacy v2 event emission (#33993 )	2026-06-26 04:42:38 +02:00
opencode-agent[bot]	9859b19b93	fix(ui): normalize tooltip trigger layout (#33979 ) Co-authored-by: Test <test@opencode.test> Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>	2026-06-26 02:42:16 +00:00
opencode-agent[bot]	45badf7163	fix(app): suspend hidden terminal renderer (#33990 ) Co-authored-by: Test <test@opencode.test>	2026-06-26 02:28:36 +00:00
opencode-agent[bot]	28a00ad6af	fix(app): enable auto-accept in session settings (#33974 )	2026-06-26 11:55:21 +10:00
Aiden Cline	0f272d931d	tweak: hide MCP access token prefix (#33711 )	2026-06-25 20:32:36 -05:00
Aiden Cline	ded29f03f0	fix(core): refine small model defaults (#33926 )	2026-06-25 20:31:53 -05:00
opencode-agent[bot]	f428755851	feat(core): split MCP timeout configuration (#33977 ) Co-authored-by: Test <test@opencode.test>	2026-06-25 20:31:00 -05:00
opencode-agent[bot]	17166b271f	fix(app): simplify question prompt (#33968 ) Co-authored-by: Test <test@opencode.test>	2026-06-26 09:22:36 +10:00
Aiden Cline	5f61d21487	feat(llm): pass strict through tool definitions for Codex parity (#33392 )	2026-06-25 16:28:39 -05:00
opencode-agent[bot]	0568855cc6	chore: generate	2026-06-25 21:28:07 +00:00
Aiden Cline	3fbc005f26	fix(mcp): scope auth status to server URL (#33924 )	2026-06-25 16:26:00 -05:00
opencode-agent[bot]	21c0e03a70	chore: generate	2026-06-25 20:26:11 +00:00
Brendan Allan	a2b847e29e	refactor(app): split session composer (#33954 )	2026-06-25 20:23:58 +00:00
Brendan Allan	fae100fe72	fix(app): enable composer shortcuts on drafts (#33956 )	2026-06-26 04:05:36 +08:00
Brendan Allan	b60c0a5e8c	fix(app): use tab-scoped servers in sessions (#33946 )	2026-06-25 19:09:22 +00:00
opencode-agent[bot]	0870a838a8	chore: generate	2026-06-25 18:36:16 +00:00
James Long	0e731c2a1a	refactor(core): support tiered layer nodes (#33937 )	2026-06-25 14:34:17 -04:00
opencode-agent[bot]	21b78c49fc	chore: generate	2026-06-25 18:25:16 +00:00
Kit Langton	f44423609b	feat(sdk): restore session runtime operations (#33777 )	2026-06-25 14:23:01 -04:00
Brendan Allan	44806777ca	feat(app): group prompt projects by server (#33941 )	2026-06-25 17:47:45 +00:00
Kit Langton	a267222080	refactor(schema): isolate v1 contracts (#33769 )	2026-06-25 17:26:47 +00:00
opencode-agent[bot]	ecabab49a7	chore: generate	2026-06-25 17:13:12 +00:00
Kit Langton	9e9d405d7e	refactor(schema): tighten public contracts (#33771 )	2026-06-25 17:10:23 +00:00
opencode-agent[bot]	5682371d0a	chore: generate	2026-06-25 17:03:14 +00:00
Brendan Allan	10e4b87d25	fix(app): persist home project selection (#33935 )	2026-06-25 17:00:19 +00:00
Simon Klee	e7c59b17a8	fix(tui): load root sessions in session switcher (#33931 ) Request root sessions before applying the session list limit so child sessions cannot crowd roots out of the switcher. Keep the synchronized cache available while requests are pending or fail, reconcile results with live updates, and retain current and pinned sessions. Preserve selection by session ID when asynchronous results reorder the list. Closes #16270 Closes #32725	2026-06-25 18:36:08 +02:00
Brendan Allan	69f75dff1a	fix(app): adjust home search and header layout (#33923 )	2026-06-26 00:19:20 +08:00
Frank	fec087bf37	zen: new inference	2026-06-25 12:15:34 -04:00
Frank	4f4aa68db9	zen: migrate to new inference	2026-06-25 11:55:37 -04:00
opencode-agent[bot]	77f2d2227a	chore: generate	2026-06-25 15:44:27 +00:00
Kit Langton	7854f5b9f7	refactor(schema): normalize module patterns (#33770 )	2026-06-25 15:42:22 +00:00
Brendan Allan	5565a8ee10	fix(app): restore new layout shortcuts (#33929 )	2026-06-25 23:22:12 +08:00
Kit Langton	9ad7067971	docs(schema): document package conventions (#33768 )	2026-06-25 11:12:09 -04:00
opencode-agent[bot]	ddbc8d3b75	chore: generate	2026-06-25 14:56:25 +00:00
Brendan Allan	4f88cab20d	fix(app): suspend while recent models load (#33921 )	2026-06-25 14:53:45 +00:00
Adam	208cd56d03	feat(stats): add i18n support (#33693 )	2026-06-25 09:50:29 -05:00
Brendan Allan	c097d51135	feat(app): improve titlebar tab layout (#33914 )	2026-06-25 14:39:59 +00:00
opencode-agent[bot]	20fd323591	chore: generate	2026-06-25 13:57:16 +00:00
Dax	7f40aeab21	feat(server): add permission request endpoints (#33774 )	2026-06-25 13:55:17 +00:00
opencode-agent[bot]	bcff162c60	chore: update nix node_modules hashes	2026-06-25 12:26:33 +00:00
Brendan Allan	5ea405bf81	fix(app): hide mobile titlebar setting in production (#33894 )	2026-06-25 20:18:14 +08:00
opencode	7c0e1b431c	sync release versions for v1.17.11	2026-06-25 12:09:26 +00:00
Victor Navarro	f4103f5c3a	feat(ui): publish ui package (#33681 )	2026-06-25 14:04:49 +02:00
opencode-agent[bot]	e6c45134ab	fix(client): exclude generated files from formatting (#33832 ) Co-authored-by: Test <test@opencode.test>	2026-06-25 07:53:00 -04:00
opencode-agent[bot]	f55d8fa3ff	chore: update nix node_modules hashes	2026-06-25 08:56:29 +00:00
Brendan Allan	78234fa305	fix(app): use project server for prompt drafts (#33850 )	2026-06-25 16:55:20 +08:00
Simon Klee	98dcea02a8	Revert "deps: update OpenTUI to 0.4.2 (#33610 )" (#33842 )	2026-06-25 10:38:09 +02:00
opencode-agent[bot]	0149d460e3	feat(app): add Chrome tab cycle shortcuts (#33838 )	2026-06-25 16:25:42 +08:00
opencode-agent[bot]	5471d2a769	fix(app): reveal tab avatar on hover (#33824 ) Co-authored-by: Test <test@opencode.test>	2026-06-25 15:54:44 +08:00
Brendan Allan	b44af11e03	fix(app): restore tab layout consistency (#33804 )	2026-06-25 15:00:12 +08:00
Brendan Allan	717b740d24	fix(app): improve home action availability (#33805 )	2026-06-25 14:55:23 +08:00
Aarav Sareen	b2c688f2a8	feat(app): restyle v2 jump-to-latest button (#33809 )	2026-06-25 16:51:37 +10:00
opencode-agent[bot]	1b107301fb	chore: generate	2026-06-25 06:07:21 +00:00
Aarav Sareen	aee262f019	feat(app): no sesssions empty state (#33315 )	2026-06-25 16:05:39 +10:00
Brendan Allan	6ec6db4ad6	fix(storybook): support prompt state capture (#33798 )	2026-06-25 13:50:09 +08:00
Aarav Sareen	40ddede2b1	fix(app): update all v1 new-session icons (#32017 ) Co-authored-by: LukeParkerDev <10430890+Hona@users.noreply.github.com>	2026-06-25 15:40:30 +10:00
Brendan Allan	71402bcbc3	fix(app): remove produce default values in server session state (#33793 )	2026-06-25 13:35:08 +08:00
Brendan Allan	d13779b1d5	fix(app): preserve todo dock across sessions (#33778 )	2026-06-25 13:34:37 +08:00
Brendan Allan	bdee94ca40	fix(app): close missing session tabs (#33785 )	2026-06-25 13:28:32 +08:00
opencode-agent[bot]	9c0d813b8e	chore: generate	2026-06-25 05:28:04 +00:00
Aarav Sareen	1bcb9d7cb9	feat(app): ui improvements (#32438 ) Co-authored-by: LukeParkerDev <10430890+Hona@users.noreply.github.com>	2026-06-25 15:26:37 +10:00