wip

2026-08-13 15:03:43 -04:00 · 2026-06-26 15:41:43 -04:00
263 changed files with 4568 additions and 5932 deletions
@@ -174,7 +174,6 @@ _Avoid_: Response envelope
 - `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 `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.
@@ -31,10 +31,6 @@
      "name": "@opencode-ai/app",
      "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:*",
@@ -63,7 +59,7 @@
        "diff": "catalog:",
        "effect": "catalog:",
        "fuzzysort": "catalog:",
-        "ghostty-web": "github:anomalyco/ghostty-web#513463a6f1190253057e8a3f0dac8f6ee8393553",
+        "ghostty-web": "github:anomalyco/ghostty-web#main",
        "luxon": "catalog:",
        "marked": "catalog:",
        "marked-shiki": "catalog:",
@@ -1455,20 +1451,6 @@

    "@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=="],
@@ -2305,8 +2287,6 @@

    "@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=="],
@@ -3801,7 +3781,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#513463a", {}, "anomalyco-ghostty-web-513463a", "sha512-GZR8LSmgGzViWnBJrqRI8MpAZRCJxhcr1Hi9Tyeh7YRooHZQjK9J97FQRD3tbBaM2wjq05gzGY2UEsG+JtZeBw=="],
+    "ghostty-web": ["ghostty-web@github:anomalyco/ghostty-web#20bd361", {}, "anomalyco-ghostty-web-20bd361", "sha512-dW0nwaiBBcun9y5WJSvm3HxDLe5o9V0xLCndQvWonRVubU8CS1PHxZpLffyPt1YujPWC13ez03aWxcuKBPYYGQ=="],

    "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=="],

@@ -1,8 +1,8 @@
 {
  "nodeModules": {
-    "x86_64-linux": "sha256-OiWvZ57vuyHwiIKNtW1n1KX+MLmOXVG3x4fLKvUoGQw=",
-    "aarch64-linux": "sha256-RnPLxVEg/UsL5IeIFWmXMSLUOG6rVrajYxhyDYj1vTA=",
-    "aarch64-darwin": "sha256-KPIgcBA0pTFBPrCTSZgIbvEorbtWcMgXvyX9bFAypVs=",
-    "x86_64-darwin": "sha256-6jVU7/uVId0VD24MVQ8s8Ill5b6PsKdlBgHg+oceKRg="
+    "x86_64-linux": "sha256-drc/Ev96W6b8b0b5LqdZeeGDQ1SMgsz8r5cMO91ei2o=",
+    "aarch64-linux": "sha256-Ti0hNjhUgkVtdb54vea/lpI0ltDwLoPitVyHtx4JGwY=",
+    "aarch64-darwin": "sha256-br4iQ/kK3tSGp+1FefiCTlwsCRhHHhGbKzSixGWaCto=",
+    "x86_64-darwin": "sha256-h7yje968Kyh8/mVY19YmDB5g693XDhIf0XnuwukzCWE="
  }
 }
@@ -1,79 +0,0 @@
-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, "")
-}
@@ -44,10 +44,6 @@
    "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:*",
@@ -76,7 +72,7 @@
    "diff": "catalog:",
    "effect": "catalog:",
    "fuzzysort": "catalog:",
-    "ghostty-web": "github:anomalyco/ghostty-web#513463a6f1190253057e8a3f0dac8f6ee8393553",
+    "ghostty-web": "github:anomalyco/ghostty-web#main",
    "luxon": "catalog:",
    "marked": "catalog:",
    "marked-shiki": "catalog:",
@@ -16,7 +16,6 @@ import {
  type Component,
  createEffect,
  createMemo,
-  createRenderEffect,
  createResource,
  createSignal,
  ErrorBoundary,
@@ -33,7 +32,7 @@ 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, useGlobal } from "@/context/global"
+import { GlobalProvider } from "@/context/global"
 import { HighlightsProvider } from "@/context/highlights"
 import { LanguageProvider, type Locale, useLanguage } from "@/context/language"
 import { LayoutProvider } from "@/context/layout"
@@ -104,10 +103,10 @@ const SessionRoute = () => {

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

  return (
@@ -222,27 +221,25 @@ function DraftRoute() {
 }

 function ResolvedDraftRoute(props: { draft: DraftTab }) {
-  const global = useGlobal()
-  const conn = createMemo(() => global.servers.list().find((item) => ServerConnection.key(item) === props.draft.server))
+  const server = useServer()
+  const conn = createMemo(() => server.list.find((item) => ServerConnection.key(item) === props.draft.server))
  const directory = () => props.draft.directory
  const serverKey = () => props.draft.server

  return (
-    <Show when={`${props.draft.server}\0${props.draft.directory}`} keyed>
-      <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>
+    <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>
  )
 }

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

-  createRenderEffect(() => {
+  createEffect(() => {
    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)
@@ -592,31 +588,18 @@ function Routes() {
      </Route>
      <Show when={settings.general.newLayoutDesigns()}>
        <Route path="/" component={NewHome} />
-        <Route path="/:dir/session/:id" component={LegacyTargetSessionRoute} />
+        <Route
+          path="/:dir/session/:id"
+          component={() => {
+            const server = useServer()
+            const { id } = useParams()
+
+            return <Navigate href={`/server/${server.key}/session/${id}`} />
+          }}
+        />
      </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>
-  )
-}
@@ -1,6 +1,6 @@
 import "@pierre/trees/web-components"
 import { FileTree } from "@pierre/trees"
-import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
+import { Dialog, DialogFooter } 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,7 +27,6 @@ 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
@@ -267,12 +266,8 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
  onCleanup(() => tree?.cleanUp())

  return (
-    <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!">
+    <Dialog title={props.title ?? language.t("command.project.open")} size="large" class="directory-picker-v2">
+      <div class="directory-picker-v2-body">
        <div class="directory-picker-v2-path" ref={pathArea}>
          <TextInputV2
            value={input()}
@@ -354,7 +349,7 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
          </Show>
        </div>
        <div class="directory-picker-v2-selection">{policy.result(root(), selected(), rootValid())}</div>
-      </DialogBody>
+      </div>
      <DialogFooter>
        <ButtonV2 variant="neutral" onClick={() => dialog.close()}>
          {language.t("common.cancel")}
@@ -15,6 +15,7 @@ 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"
@@ -271,6 +272,7 @@ 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()
@@ -391,10 +393,10 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
    state.cleanup?.()
  })

-  if (filesOnly() && platform.platform === "desktop" && settings.general.newLayoutDesigns()) {
+  if (filesOnly() && platform.platform === "desktop" && settings.general.newLayoutDesigns() && server.current) {
    return (
      <DialogSelectFileV2
-        server={serverSDK().server}
+        server={server.current}
        mode="file"
        start={projectDirectory()}
        title={language.t("session.header.searchFiles")}
@@ -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, createSessionComposerRegionController } from "@/pages/session/composer"
+import { SessionComposerRegion } from "@/pages/session/composer"
 import { createPromptInputHistory, PromptInput } from "./prompt-input"

 function createPromptInputStoryRuntime() {
@@ -54,6 +54,12 @@ 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: {
@@ -136,6 +142,7 @@ function PromptInputWithOpenDock() {
      paid: true,
      loading: false,
    },
+    projects: { available: [], directory: "/tmp/story", select: () => {}, add: () => {} },
    session: {
      id: "story-session",
      tabs: {
@@ -159,35 +166,22 @@ function PromptInputWithOpenDock() {
    closing: () => false,
    opening: () => false,
  }
+
  return (
    <SessionComposerRegion
-      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={() => {}}
-        />
-      }
+      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={() => {}}
    />
  )
 }
@@ -4,6 +4,8 @@ import {
  createEffect,
  on,
  Component,
+  splitProps,
+  For,
  Show,
  onCleanup,
  createMemo,
@@ -11,8 +13,10 @@ 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"
@@ -26,14 +30,15 @@ import {
  AgentPart,
  FileAttachmentPart,
 } from "@/context/prompt"
-import { useLayout } from "@/context/layout"
+import { getProjectAvatarVariant, useLayout } from "@/context/layout"
 import { useSDK } from "@/context/sdk"
 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 } from "@opencode-ai/ui/icon"
+import { Icon, type IconProps } from "@opencode-ai/ui/icon"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Select } from "@opencode-ai/ui/select"
@@ -66,6 +71,8 @@ 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, getProjectAvatarSource } from "@/pages/layout/helpers"

 export type PromptInputState = ReturnType<typeof usePrompt>

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

 const EXAMPLES = [
@@ -212,6 +232,7 @@ 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
@@ -339,6 +360,11 @@ 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,
@@ -1375,7 +1401,137 @@ 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) =>
+        (!project.server || project.server.key === props.controls.projects.server) &&
+        (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, server?: string) => {
+    setPicker({
+      projectOpen: false,
+      projectSearch: "",
+    })
+    if (pathKey(worktree) === pathKey(selectedProject()?.worktree ?? "") && server === selectedProject()?.server?.key) {
+      restoreFocus()
+      return
+    }
+    props.controls.projects.select(worktree, server)
+    restoreFocus()
+  }
+  const addProject = (server?: string) => {
+    props.controls.projects.add(language.t("command.project.open"), server)
+  }
+
+  const projectItems = createMemo<ComposerPickerItemState[]>(() =>
+    projectResults().map((project) => ({
+      leading: (
+        <ProjectAvatar
+          fallback={displayName(project)}
+          src={getProjectAvatarSource(project.id, project.icon)}
+          variant={getProjectAvatarVariant(project.icon?.color)}
+        />
+      ),
+      label: displayName(project),
+      selected:
+        selectedProject()?.worktree === project.worktree && selectedProject()?.server?.key === project.server?.key,
+      onSelect: () => selectProject(project.worktree, project.server?.key),
+    })),
+  )
+  const projectServers = createMemo(() =>
+    projects()
+      .map((project) => project.server)
+      .filter((server, index, all) => server && all.findIndex((item) => item?.key === server.key) === index),
+  )
+  const addProjectLabel = createMemo(() => language.t("session.new.project.add"))
+  const projectGroups = createMemo(() => {
+    if (projectServers().length <= 1) return
+    return projectServers()
+      .map((server) => ({
+        label: server!.name,
+        server: server!.key,
+        items: projectItems().filter((_, index) => projectResults()[index]?.server?.key === server!.key),
+        action: {
+          icon: "plus" as const,
+          label: addProjectLabel(),
+          onSelect: () => {
+            setPicker("projectOpen", false)
+            addProject(server!.key)
+          },
+        },
+      }))
+      .filter((group) => group.items.length > 0)
+  })
+  const projectPickerState: ComposerPickerState = {
+    get open() {
+      return picker.projectOpen
+    },
+    trigger: {
+      action: "prompt-project",
+      get icon() {
+        return selectedProject() ? undefined : "folder"
+      },
+      get leading() {
+        const project = selectedProject()
+        if (!project) return
+        return (
+          <ProjectAvatar
+            fallback={displayName(project)}
+            src={getProjectAvatarSource(project.id, project.icon)}
+            variant={getProjectAvatarVariant(project.icon?.color)}
+          />
+        )
+      },
+      get label() {
+        const project = selectedProject()
+        return project ? displayName(project) : language.t("session.new.project.new")
+      },
+      class: "max-w-[203px]",
+      get style() {
+        return control()
+      },
+      onPress: () => setPicker("projectOpen", true),
+    },
+    get search() {
+      return picker.projectSearch
+    },
+    searchPlaceholder: language.t("session.new.project.search"),
+    clearLabel: language.t("common.clear"),
+    get items() {
+      return projectItems()
+    },
+    get groups() {
+      return projectGroups()
+    },
+    action: {
+      icon: "plus",
+      get label() {
+        return addProjectLabel()
+      },
+      onSelect: () => {
+        setPicker("projectOpen", false)
+        addProject(projectServers()[0]?.key)
+      },
+    },
+    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"),
@@ -1387,6 +1543,15 @@ 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)}
@@ -1517,7 +1682,9 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                  <Show when={showAgentControl()}>
                    <ComposerAgentControl state={agentControlState()} />
                  </Show>
-                  {props.toolbar}
+                  <Show when={newSession() && !selectedProject()}>
+                    <ComposerPickerTrigger state={newProjectTriggerState()} />
+                  </Show>
                  <ComposerModelControl state={modelControlState()} />
                  <Show when={store.mode !== "shell" && showVariantControl()}>
                    <div
@@ -1571,6 +1738,11 @@ 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>
@@ -1912,6 +2084,40 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  )
 }

+type ComposerPickerItemState = {
+  icon?: IconProps["name"]
+  leading?: JSX.Element
+  label: string
+  selected?: boolean
+  onSelect: () => void
+}
+
+type ComposerPickerTriggerState = {
+  action: string
+  icon?: IconProps["name"]
+  leading?: JSX.Element
+  label: string
+  class?: string
+  style: JSX.CSSProperties | undefined
+  onPress: () => void
+}
+
+type ComposerPickerState = {
+  open: boolean
+  trigger: ComposerPickerTriggerState
+  search: string
+  searchPlaceholder: string
+  clearLabel: string
+  items: ComposerPickerItemState[]
+  groups?: { label: string; server: string; items: ComposerPickerItemState[]; action: 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
@@ -1934,6 +2140,125 @@ 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-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 ${local.state.class ?? ""}`}
+      style={local.state.style}
+      onClick={() => local.state.onPress()}
+    >
+      <Show
+        when={local.state.leading}
+        fallback={
+          <Show when={local.state.icon}>
+            {(icon) => <Icon name={icon()} size="small" class="shrink-0 text-v2-icon-icon-muted" />}
+          </Show>
+        }
+      >
+        {(leading) => leading()}
+      </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-sm 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}
+    >
+      <Show
+        when={props.state.leading}
+        fallback={
+          <Show when={props.state.icon}>
+            {(icon) => <Icon name={icon()} size="small" class="shrink-0 text-v2-icon-icon-base" />}
+          </Show>
+        }
+      >
+        {(leading) => leading()}
+      </Show>
+      <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>
+            <Show
+              when={props.state.groups}
+              fallback={<For each={props.state.items}>{(item) => <ComposerPickerMenuItem state={item} />}</For>}
+            >
+              {(groups) => (
+                <For each={groups()}>
+                  {(group) => (
+                    <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">
+                        {group.label}
+                      </div>
+                      <For each={group.items}>{(item) => <ComposerPickerMenuItem state={item} />}</For>
+                      <ComposerPickerMenuItem state={group.action} />
+                    </div>
+                  )}
+                </For>
+              )}
+            </Show>
+          </div>
+          <Show when={!props.state.groups}>
+            <div class="h-px bg-v2-border-border-muted" />
+            <div class="flex flex-col p-0.5">
+              <ComposerPickerMenuItem state={props.state.action} />
+            </div>
+          </Show>
+        </KobaltePopover.Content>
+      </KobaltePopover.Portal>
+    </KobaltePopover>
+  )
+}
+
 function ComposerAgentControl(props: { state: ComposerAgentControlState }) {
  return (
    <div class="relative">
@@ -1,551 +0,0 @@
-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>
-  )
-}
@@ -1,102 +0,0 @@
-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>
-    </>
-  )
-}
@@ -1,43 +0,0 @@
-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,6 +1,5 @@
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
-import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
+import { Dialog, DialogFooter } from "@opencode-ai/ui/v2/dialog-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { type Component, Show, createEffect, createSignal, onCleanup, onMount } from "solid-js"
@@ -53,12 +52,8 @@ export const DialogServerV2: Component<{
  }

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

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

@@ -64,7 +62,7 @@ export const DialogSettings: Component<{
          </div>
        </TabsV2.List>
        <TabsV2.Content value="general" class="settings-v2-panel">
-          <SettingsGeneralV2 sessionID={props.sessionID} />
+          <SettingsGeneralV2 />
        </TabsV2.Content>
        <TabsV2.Content value="shortcuts" class="settings-v2-panel">
          <SettingsKeybinds v2 />
@@ -6,6 +6,7 @@ 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"
@@ -24,6 +25,7 @@ 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"
@@ -80,46 +82,50 @@ const playDemoSound = (id: string | undefined) => {
  }, 100)
 }

-export const SettingsGeneralV2: Component<{
-  sessionID?: string
-}> = (props) => {
+export const SettingsGeneralV2: Component = () => {
  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(() => {
-    if (!props.sessionID) return undefined
-    return serverSync().session.lineage.peek(props.sessionID)?.session.directory
-  })
+  const dir = createMemo(() => decode64(params.dir))
  const accepting = createMemo(() => {
    const value = dir()
-    if (!value || !props.sessionID) return false
-    return permission.isAutoAccepting(props.sessionID, value)
+    if (!value) return false
+    if (!params.id) return permission.isAutoAcceptingDirectory(value)
+    return permission.isAutoAccepting(params.id, value)
  })

  const toggleAccept = (checked: boolean) => {
    const value = dir()
-    if (!value || !props.sessionID) return
+    if (!value) return

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

-    permission.disableAutoAccept(props.sessionID, value)
+    if (checked) {
+      permission.enableAutoAccept(params.id, value)
+      return
+    }
+
+    permission.disableAutoAccept(params.id, 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()
@@ -633,7 +633,7 @@

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

 [data-component="dialog-v2"].settings-v2-server-dialog [data-slot="dialog-body"] {
@@ -5,8 +5,7 @@ import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { Popover } from "@opencode-ai/ui/popover"
 import { Suspense, createMemo, createSignal, lazy, Show, type JSX } from "solid-js"
 import { useLanguage } from "@/context/language"
-import { ServerConnection, useServer } from "@/context/server"
-import { useServerSDK } from "@/context/server-sdk"
+import { useServer } from "@/context/server"
 import { useSync } from "@/context/sync"
 import { useGlobal } from "@/context/global"

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

 function DirectoryStatusPopover() {
  const language = useLanguage()
-  const server = useServerSDK()
+  const server = useServer()
  const global = useGlobal()
  const sync = useSync()
  const [shown, setShown] = createSignal(false)
-  const serverHealth = () => global.servers.health[ServerConnection.key(server().server)]?.healthy
+  const serverHealth = () => global.servers.health[server.key]?.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 { useServerSDK } from "@/context/server-sdk"
+import { useServer } from "@/context/server"
 import { terminalFontFamily, useSettings } from "@/context/settings"
 import type { LocalPTY } from "@/context/terminal"
 import { disposeIfDisposable, getHoveredLinkText, setOptionIfSupported } from "@/utils/runtime-adapters"
@@ -160,15 +160,13 @@ export const Terminal = (props: TerminalProps) => {
  const settings = useSettings()
  const theme = useTheme()
  const language = useLanguage()
-  // Terminal captures its connection for the PTY lifetime, so callers must key it per server/session.
-  const connection = useServerSDK()().server
+  const server = useServer()
  const directory = sdk().directory
  const client = sdk().client
  const url = sdk().url
-  const auth = connection.http
+  const auth = server.current?.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"])
@@ -542,7 +540,7 @@ export const Terminal = (props: TerminalProps) => {
            sameOrigin,
            username,
            password,
-            authToken,
+            authToken: server.current?.type === "http" ? server.current.authToken : false,
          }),
        )
        socket.binaryType = "arraybuffer"
@@ -0,0 +1,141 @@
+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()
+  })
+
+  test("uses the list gap as the 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"
+    firstTab.dataset.titlebarTab = ""
+    secondTab.dataset.titlebarTab = ""
+    first.append(firstTab)
+    second.append(secondTab)
+    list.append(first, second)
+    list.style.columnGap = "13.5px"
+    document.body.append(list)
+
+    expect(captureTabDragLayout(list, ["a", "b"]).dividerWidth).toBe(13.5)
+    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)
+  })
+})
@@ -0,0 +1,137 @@
+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.matches("[data-titlebar-tab]") ? slot : slot.querySelector<HTMLElement>("[data-titlebar-tab]")
+    if (!tab) continue
+    tabWidthById.set(id, tab.getBoundingClientRect().width)
+  }
+
+  let dividerWidth = 0
+  if (order.length >= 2) {
+    const gap = Number.parseFloat(getComputedStyle(list).columnGap) || 0
+    const secondId = order[1]
+    for (const slot of slots) {
+      if (slot.dataset.tabKey !== secondId) continue
+      const tab = slot.matches("[data-titlebar-tab]") ? slot : slot.querySelector<HTMLElement>("[data-titlebar-tab]")
+      if (!tab) break
+      const style = getComputedStyle(slot)
+      dividerWidth =
+        gap ||
+        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
+}
@@ -1,33 +0,0 @@
-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,6 +8,22 @@ 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)
 }
@@ -15,3 +31,7 @@ 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
+}
@@ -9,10 +9,6 @@
  justify-content: center;
 }

-[data-titlebar-tab][data-editing="true"] [data-slot="tab-close"] {
-  display: none;
-}
-
 [data-titlebar-tab-list] {
  gap: 13.5px;
 }
@@ -29,6 +29,9 @@ export function TabNavItem(props: {
  dragging?: boolean
  pressed?: boolean
  hidden?: boolean
+  tabKey: string
+  dragActive: boolean
+  onPointerDown: (event: PointerEvent) => void
 }) {
  const language = useLanguage()
  const [editing, setEditing] = createSignal(false)
@@ -170,105 +173,112 @@ export function TabNavItem(props: {

  return (
    <div
-      ref={(el) => {
-        tabRoot = el
-        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 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}
-      data-pressed={props.pressed}
-      onMouseDown={(event) => {
-        if (event.button !== 1) return
-        closeTab(event)
-      }}
+      data-titlebar-tab-slot
+      data-tab-key={props.tabKey}
+      class="relative flex w-56 min-w-7 max-w-56 flex-shrink"
+      classList={{ invisible: props.hidden, "pointer-events-none": props.dragActive }}
+      onPointerDown={props.onPointerDown}
    >
-      <Show when={props.session()}>
-        {(session) => {
-          return (
-            <a
-              data-slot="tab-link"
-              data-titlebar-tab-link
-              href={props.href}
-              draggable={false}
-              onDragStart={(event) => {
-                event.preventDefault()
-                event.stopPropagation()
-              }}
-              onClick={(event) => {
-                event.preventDefault()
-                if (editing()) return
-                if (props.suppressNavigation?.()) return
-                props.onNavigate()
-              }}
-              class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base group-data-[editing='true']:text-v2-text-text-base [-webkit-user-drag:none]"
-            >
-              <span data-slot="project-avatar-slot">
-                <SessionTabAvatar
-                  project={project()}
-                  directory={session().directory}
-                  sessionId={session().id}
-                  activeServer={props.activeServer}
-                />
-              </span>
-              <span
-                ref={(el) => {
-                  titleEl = el
-                  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(),
-                  "select-text": editing(),
-                }}
-                contenteditable={editing() ? true : undefined}
-                onDblClick={openRename}
-                onKeyDown={(event) => {
-                  event.stopPropagation()
-                  if (event.key === "Enter") {
-                    event.preventDefault()
-                    void closeRename(true)
-                    return
-                  }
-                  if (event.key !== "Escape") return
+      <div
+        ref={(el) => {
+          tabRoot = el
+          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 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)]"
+        data-active={props.active}
+        data-dragging={props.dragging}
+        data-pressed={props.pressed}
+        onMouseDown={(event) => {
+          if (event.button !== 1) return
+          closeTab(event)
+        }}
+      >
+        <Show when={props.session()}>
+          {(session) => {
+            return (
+              <a
+                data-slot="tab-link"
+                data-titlebar-tab-link
+                href={props.href}
+                draggable={false}
+                onDragStart={(event) => {
                  event.preventDefault()
-                  titleEl.textContent = session().title
-                  void closeRename(false)
-                }}
-                onBlur={() => void closeRename(true)}
-                onPointerDown={(event) => {
-                  if (!editing()) return
                  event.stopPropagation()
                }}
                onClick={(event) => {
-                  if (!editing()) return
                  event.preventDefault()
+                  if (editing()) return
+                  if (props.suppressNavigation?.()) return
+                  props.onNavigate()
                }}
-              />
-            </a>
-          )
-        }}
-      </Show>
-
-      <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="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()
+                class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base group-data-[editing='true']:text-v2-text-text-base [-webkit-user-drag:none]"
+              >
+                <span data-slot="project-avatar-slot">
+                  <SessionTabAvatar
+                    project={project()}
+                    directory={session().directory}
+                    sessionId={session().id}
+                    activeServer={props.activeServer}
+                  />
+                </span>
+                <span
+                  ref={(el) => {
+                    titleEl = el
+                    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(),
+                    "select-text": editing(),
+                  }}
+                  contenteditable={editing() ? true : undefined}
+                  onDblClick={openRename}
+                  onKeyDown={(event) => {
+                    event.stopPropagation()
+                    if (event.key === "Enter") {
+                      event.preventDefault()
+                      void closeRename(true)
+                      return
+                    }
+                    if (event.key !== "Escape") return
+                    event.preventDefault()
+                    titleEl.textContent = session().title
+                    void closeRename(false)
+                  }}
+                  onBlur={() => void closeRename(true)}
+                  onPointerDown={(event) => {
+                    if (!editing()) return
+                    event.stopPropagation()
+                  }}
+                  onClick={(event) => {
+                    if (!editing()) return
+                    event.preventDefault()
+                  }}
+                />
+              </a>
+            )
          }}
-          onClick={closeTab}
-          icon={<IconV2 name="xmark-small" />}
-        />
+        </Show>
+
+        <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="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()
+            }}
+            onClick={closeTab}
+            icon={<IconV2 name="xmark-small" />}
+          />
+        </div>
      </div>
    </div>
  )
@@ -285,6 +295,9 @@ export function DraftTabItem(props: {
  dragging?: boolean
  pressed?: boolean
  hidden?: boolean
+  tabKey: string
+  dragActive: boolean
+  onPointerDown: (event: PointerEvent) => void
 }) {
  const closeTab = (event: MouseEvent) => {
    event.preventDefault()
@@ -293,62 +306,69 @@ export function DraftTabItem(props: {
  }
  return (
    <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 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
-        closeTab(event)
-      }}
+      data-titlebar-tab-slot
+      data-tab-key={props.tabKey}
+      class="relative flex w-56 min-w-7 max-w-56 flex-shrink"
+      classList={{ invisible: props.hidden, "pointer-events-none": props.dragActive }}
+      onPointerDown={props.onPointerDown}
    >
-      <a
-        data-slot="tab-link"
-        data-titlebar-tab-link
-        href={props.href}
-        draggable={false}
-        onDragStart={(event) => {
-          event.preventDefault()
-          event.stopPropagation()
+      <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 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)]"
+        onMouseDown={(event) => {
+          if (event.button !== 1) return
+          closeTab(event)
        }}
-        onClick={(event) => {
-          event.preventDefault()
-          if (props.suppressNavigation?.()) return
-          props.onNavigate()
-        }}
-        class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base [-webkit-user-drag:none]"
      >
-        <span class="flex size-4 shrink-0 items-center justify-center">
-          <IconV2 name="edit" />
-        </span>
-        <span
-          data-titlebar-tab-title
-          class="min-w-0 flex-1 overflow-hidden text-clip whitespace-nowrap outline-none leading-4"
+        <a
+          data-slot="tab-link"
+          data-titlebar-tab-link
+          href={props.href}
+          draggable={false}
+          onDragStart={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+          }}
+          onClick={(event) => {
+            event.preventDefault()
+            if (props.suppressNavigation?.()) return
+            props.onNavigate()
+          }}
+          class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base [-webkit-user-drag:none]"
        >
-          {props.title}
-        </span>
-      </a>
-      <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"
-          onPointerDown={(event) => {
-            event.preventDefault()
-            event.stopPropagation()
-          }}
-          onMouseDown={(event) => {
-            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"
-        />
+          <span class="flex size-4 shrink-0 items-center justify-center">
+            <IconV2 name="edit" />
+          </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="group-hover:bg-[var(--tab-bg)] group-data-[active=true]:bg-[var(--tab-bg)]">
+          <IconButtonV2
+            size="small"
+            variant="ghost-muted"
+            onPointerDown={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+            }}
+            onMouseDown={(event) => {
+              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"
+          />
+        </div>
      </div>
    </div>
  )
@@ -1,11 +1,18 @@
-import { createEffect, createMemo, createResource, createRoot, For, onCleanup, onMount } from "solid-js"
+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 { 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"
@@ -15,30 +22,42 @@ import { useCommand } from "@/context/command"
 import { useTabs } from "@/context/tabs"
 import { createTabPromptState } from "@/context/prompt"
 import { base64Encode } from "@opencode-ai/core/util/encode"
-import { canStartTabDrag, isTabCloseTarget } from "./titlebar-tab-gesture"
-
-const sortableTransition = { duration: 0 }
+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"

 function SessionTabSlot(props: {
  tab: SessionTab
  id: string
-  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))
@@ -81,79 +100,33 @@ function SessionTabSlot(props: {
  })

  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"
-      classList={{ hidden: !session() }}
-    >
-      <TabNavItem
-        ref={(el) => {
-          ref = el
-        }}
-        href={tabHref(props.tab)}
-        server={props.tab.server}
-        session={session}
-        onTitleChange={(title) => {
-          const value = session()
-          const ctx = props.serverCtx()
-          if (value && ctx) ctx.sync.session.remember({ ...value, title })
-        }}
-        onTitleChangeFailed={(title) => {
-          const value = session()
-          const ctx = props.serverCtx()
-          if (value && ctx) ctx.sync.session.remember({ ...value, title })
-        }}
-        onNavigate={() => props.onNavigate(ref)}
-        onClose={props.onClose}
-        active={props.active()}
-        activeServer={props.tab.server === props.activeServerKey}
-        forceTruncate={props.forceTruncate}
-        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>
+    <TabNavItem
+      tabKey={props.id}
+      dragActive={props.dragActive}
+      onPointerDown={props.onPointerDown}
+      ref={ref}
+      href={tabHref(props.tab)}
+      server={props.tab.server}
+      session={session}
+      onTitleChange={(title) => {
+        const value = session()
+        const ctx = props.serverCtx()
+        if (value && ctx) ctx.sync.session.remember({ ...value, title })
+      }}
+      onTitleChangeFailed={(title) => {
+        const value = session()
+        const ctx = props.serverCtx()
+        if (value && ctx) ctx.sync.session.remember({ ...value, title })
+      }}
+      onNavigate={() => props.onNavigate(ref)}
+      onClose={props.onClose}
+      active={props.active()}
+      activeServer={props.tab.server === props.activeServerKey}
+      forceTruncate={props.forceTruncate}
+      suppressNavigation={props.suppressNavigation}
+      pressed={props.pressed()}
+      hidden={props.dragged() || !session()}
+    />
  )
 }

@@ -169,12 +142,52 @@ 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)
@@ -187,14 +200,220 @@ export function TitlebarTabStrip(props: {
      resizeFrame = requestAnimationFrame(() => {
        resizeFrame = undefined
        refreshOverflow()
+        if (!drag.active || !listRef) return
+        dragLayout = captureTabDragLayout(listRef, drag.draftOrder)
+        updateInsertIndex()
      })
    },
  )

-  onMount(() => {
+  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 target = event.currentTarget as HTMLDivElement
+    const tabEl = target.matches("[data-titlebar-tab]")
+      ? target
+      : target.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)
  })
@@ -205,54 +424,50 @@ export function TitlebarTabStrip(props: {
    refreshOverflow()
  })

-  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}
-      >
-        <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
+  createEffect(() => {
+    if (!drag.active || !scrollRef) return
+    onCleanup(makeEventListener(scrollRef, "scroll", syncScroll))
+  })

-            const { initialIndex, index } = source
-            if (initialIndex !== index) {
-              props.onReorder(arrayMove(current, source.initialIndex, source.index))
-            }
-          }}
+  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-titlebar-tab-list class="flex w-full min-w-0 flex-row items-center" ref={listRef}>
-            <For each={props.tabs}>
+          <div data-titlebar-tab-list class="flex min-w-0 flex-row items-center" ref={listRef}>
+            <For each={displayTabs()}>
              {(tab, index) => {
                const id = tabKey(tab)
                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)
@@ -264,50 +479,68 @@ export function TitlebarTabStrip(props: {
                    <SessionTabSlot
                      tab={tab}
                      id={id}
-                      index={index}
                      active={() => props.currentTab() === tab}
                      activeServerKey={props.activeServerKey}
                      forceTruncate={props.forceTruncate}
+                      dragActive={drag.active}
+                      dragged={dragged}
+                      pressed={() => pressedId() === id}
                      serverCtx={serverCtx}
-                      onNavigate={(element) => {
-                        ref = element
-                        props.onNavigate(tab, element)
+                      suppressNavigation={() => suppressNavigation()}
+                      onPointerDown={(event) => {
+                        if (dragged()) return
+                        onPointerDown(id, event)
                      }}
+                      onNavigate={(element) => props.onNavigate(tab, element)}
                      onClose={() => props.onClose(tab)}
                    />
                  )
                }

                return (
-                  <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)
+                  <DraftTabItem
+                    tabKey={id}
+                    dragActive={drag.active}
+                    onPointerDown={(event) => {
+                      if (dragged()) return
+                      onPointerDown(id, event)
                    }}
+                    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()}
                  />
                )
              }}
            </For>
          </div>
-        </DragDropProvider>
+        </div>
+        <div
+          data-slot="titlebar-tabs-fade-left"
+          aria-hidden="true"
+          class="pointer-events-none absolute inset-y-0 left-0 z-10 w-6 bg-[linear-gradient(to_right,var(--v2-background-bg-deep),transparent)]"
+        />
+        <div
+          data-slot="titlebar-tabs-fade-right"
+          aria-hidden="true"
+          class="pointer-events-none absolute inset-y-0 right-0 z-10 w-6 bg-[linear-gradient(to_left,var(--v2-background-bg-deep),transparent)]"
+        />
      </div>
-      <div
-        data-slot="titlebar-tabs-fade-left"
-        aria-hidden="true"
-        class="pointer-events-none absolute inset-y-0 left-0 z-10 w-6 bg-[linear-gradient(to_right,var(--v2-background-bg-deep),transparent)]"
-      />
-      <div
-        data-slot="titlebar-tabs-fade-right"
-        aria-hidden="true"
-        class="pointer-events-none absolute inset-y-0 right-0 z-10 w-6 bg-[linear-gradient(to_left,var(--v2-background-bg-deep),transparent)]"
-      />
-    </div>
+      <Show when={drag.active && draggedTab() && dragPreview}>
+        {(_) => (
+          <Portal>
+            <div data-titlebar-tab-preview style={floaterStyle()}>
+              {dragPreview}
+            </div>
+          </Portal>
+        )}
+      </Show>
+    </>
  )
 }

@@ -319,12 +319,6 @@ 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 }, "")
@@ -17,7 +17,6 @@ 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 }

@@ -160,17 +159,12 @@ 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 }
    })

@@ -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 } from "./server"
+import { ServerConnection, useServer } from "./server"
 import { requireServerKey } from "@/utils/session-route"
 import { useSettings } from "./settings"

@@ -287,6 +287,7 @@ 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>()
@@ -311,8 +312,7 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
    }

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

  return {
-    server,
    scope,
    url: server.http.url,
    client: sdk,
@@ -656,10 +656,6 @@ 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}}",
@@ -2,7 +2,6 @@ import type { Session } from "@opencode-ai/sdk/v2/client"
 import {
  createEffect,
  createMemo,
-  createResource,
  createRoot,
  For,
  Match,
@@ -34,7 +33,6 @@ 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, serverName, useServer } from "@/context/server"
@@ -146,7 +144,6 @@ export function NewHome() {
  const command = useCommand()
  const notification = useNotification()
  const marked = useMarked()
-  const openSettings = useSettingsCommand()
  let focusSessionSearch: (() => void) | undefined
  const [state, setState] = createStore({
    search: "",
@@ -405,6 +402,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">
@@ -526,16 +529,10 @@ function HomeProjectColumn(props: {
  const global = useGlobal()
  const dialog = useDialog()
  const controller = useServerManagementController({ navigateOnAdd: false })
-  const [_state, setState, _, ready] = persisted(
+  const [state, setState] = 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]"
@@ -567,7 +564,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
@@ -580,7 +577,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()}>
@@ -3,12 +3,18 @@ import { useNavigate, useParams } from "@solidjs/router"
 import { DebugBar } from "@/components/debug-bar"
 import { HelpButton } from "@/components/help-button"
 import { Titlebar, type TitlebarUpdate } from "@/components/titlebar"
+import { useCommand } from "@/context/command"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useLanguage } from "@/context/language"
 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 command = useCommand()
+  const dialog = useDialog()
+  const language = useLanguage()
  const platform = usePlatform()
  const notification = useNotification()
  const navigate = useNavigate()
@@ -22,6 +28,20 @@ export default function NewLayout(props: ParentProps) {
    notification.session.markViewed(params.id)
  })

+  command.register("layout", () => [
+    {
+      id: "settings.open",
+      title: language.t("command.settings.open"),
+      category: language.t("command.category.settings"),
+      keybind: "mod+comma",
+      onSelect: () => {
+        void import("@/components/settings-v2").then((x) => {
+          dialog.show(() => <x.DialogSettings />)
+        })
+      },
+    },
+  ])
+
  const update: TitlebarUpdate = {
    version: () => {
      const state = platform.updater?.state()
@@ -1,27 +1,18 @@
-import { Show, createEffect, createMemo, createResource, untrack } from "solid-js"
+import { createEffect, createMemo, onMount, untrack } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useSearchParams } from "@solidjs/router"
 import { NewSessionDesignView } from "@/components/session"
-import { 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 { useLanguage } from "@/context/language"
-import { createPromptInputController, createPromptProjectControls } from "@/pages/session/composer"
+import {
+  createSessionComposerControls,
+  createSessionComposerState,
+  SessionComposerRegion,
+} 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
@@ -34,41 +25,28 @@ export default function NewSessionPage() {
  const sync = useSync()
  const serverSync = useServerSync()
  const comments = useComments()
-  const language = useLanguage()
  const route = useSessionKey()
  const [searchParams, setSearchParams] = useSearchParams<{ draftId?: string; prompt?: string }>()

-  useComposerCommands()
-  useSettingsCommand()
-
  let inputRef: HTMLDivElement | undefined

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

-  const [store, setStore] = createStore<{ worktree?: string }>({})
-
  const newSessionWorktree = createMemo(() => {
-    if (store.worktree) return store.worktree
+    if (store.worktree === "create") return "create"
    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
@@ -80,15 +58,9 @@ export default function NewSessionPage() {
    })
  })

-  createEffect(() => {
-    if (!prompt.ready()) return
+  onMount(() => {
    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">
@@ -96,65 +68,26 @@ 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>
-              <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>
+              <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={() => {}}
+              />
            </NewSessionDesignView>
          </div>
        </div>
@@ -42,13 +42,10 @@ 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 {
-  createPromptInputController,
-  createSessionComposerController,
-  createSessionComposerRegionController,
+  createSessionComposerControls,
+  createSessionComposerState,
  SessionComposerRegion,
 } from "@/pages/session/composer"
 import {
@@ -66,7 +63,6 @@ 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"
@@ -159,8 +155,8 @@ export default function Page() {
    },
  })

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

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

  const reviewPanel = () => (
-    <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="flex flex-col h-full overflow-hidden bg-background-stronger contain-strict">
      <div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
        {reviewContent({
          diffStyle: layout.review.diffStyle(),
@@ -1579,38 +1567,31 @@ export default function Page() {

  useUsageExceededDialogs()

-  const composerRegion = () => {
-    const controller = createSessionComposerRegionController({
-      state: composer,
-      sessionKey,
-      sessionID: () => params.id,
-      prompt,
-      ready: () => !store.deferRender && messagesReady(),
-      centered,
-      todo: {
-        collapsed: () => view().todoCollapsed.get(),
+  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(),
        onToggle: () => view().todoCollapsed.set(!view().todoCollapsed.get()),
-      },
-      followup: () =>
-        params.id && !isChildSession()
-          ? {
-              items: followupDock(),
-              sending: sendingFollowup(),
-              onSend: (id) => void sendFollowup(params.id!, id, { manual: true }),
-              onEdit: editFollowup,
-            }
-          : undefined,
-      revert: () =>
-        rolled().length > 0
-          ? {
-              items: rolled(),
-              restoring: restoring(),
-              disabled: reverting(),
-              onRestore: restore,
-            }
-          : undefined,
-      onResponseSubmit: resumeScroll,
-      openParent: () => {
+      }}
+      ready={!store.deferRender && messagesReady()}
+      centered={placement === "dock" && centered()}
+      placement={placement}
+      openParent={() => {
        const id = info()?.parentID
        if (!id) return
        navigate(
@@ -1618,43 +1599,44 @@ export default function Page() {
            ? sessionHref(requireServerKey(params.serverKey), id)
            : legacySessionHref(sdk().directory, id),
        )
-      },
-      setPromptRef: (el) => {
-        inputRef = el
-      },
-      setDockRef: (el) => {
+      }}
+      onResponseSubmit={resumeScroll}
+      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 })
+              },
+              onEdit: editFollowup,
+              onEditLoaded: clearFollowupEdit,
+            }
+          : undefined
+      }
+      revert={
+        rolled().length > 0
+          ? {
+              items: rolled(),
+              restoring: restoring(),
+              disabled: reverting(),
+              onRestore: restore,
+            }
+          : undefined
+      }
+      setPromptDockRef={(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">
@@ -1719,9 +1701,7 @@ export default function Page() {
        >
          <div
            classList={{
-              "flex-1 min-h-0 flex flex-col": true,
-              "bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
-              "bg-background-stronger": !settings.general.newLayoutDesigns(),
+              "flex-1 min-h-0 flex flex-col bg-background-stronger": true,
              "rounded-[10px] overflow-hidden": settings.general.newLayoutDesigns(),
              "shadow-[var(--v2-elevation-raised)]": settings.general.newLayoutDesigns() && !!params.id,
            }}
@@ -1793,7 +1773,7 @@ export default function Page() {
              </Switch>
            </div>

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

@@ -1,4 +1,3 @@
 export { SessionComposerRegion } from "./session-composer-region"
-export { createPromptInputController, createPromptProjectControls } from "./session-composer-controls"
-export { createSessionComposerController } from "./session-composer-state"
-export { createSessionComposerRegionController } from "./session-composer-region-controller"
+export { createSessionComposerControls } from "./session-composer-controls"
+export { createSessionComposerState } from "./session-composer-state"
@@ -3,84 +3,68 @@ 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 { 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 { useTabs } from "@/context/tabs"
+import { type DraftTab, useTabs } from "@/context/tabs"
 import { useProviders } from "@/hooks/use-providers"
 import { pathKey } from "@/utils/path-key"

-export function createPromptInputController(input: {
+export function createSessionComposerControls(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 sync = useSync()
-  const sdk = useSDK()
-  const view = layout.view(input.sessionKey)
-  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)))
-
-  return createMemo<PromptInputControls>(() => ({
-    agents: {
-      available: sync().data.agent,
-      options: local.agent.list().map((agent) => agent.name),
-      current: local.agent.current()?.name ?? "",
-      loading: agentsQuery.isLoading,
-      visible: settings.visibility.customAgents(),
-      select: local.agent.set,
-    },
-    model: {
-      selection: local.model,
-      paid: providers.paid().length > 0,
-      loading: agentsQuery.isLoading || providersQuery.isLoading || globalProvidersQuery.isLoading,
-    },
-    session: {
-      id: input.sessionID(),
-      tabs: layout.tabs(input.sessionKey),
-      reviewPanel: view.reviewPanel,
-    },
-    newLayoutDesigns: settings.general.newLayoutDesigns(),
-  }))
-}
-
-export function createPromptProjectControls() {
-  const navigate = useNavigate()
-  const layout = useLayout()
  const server = useServer()
-  const serverSDK = useServerSDK()
+  const sync = useSync()
  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 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(() => {
    if (server.list.length <= 1) {
-      return search.draftId ? projectServerCtx().projects.list() : layout.projects.list()
+      return search.draftId ? (projectServerCtx()?.projects.list() ?? []) : layout.projects.list()
    }
    return server.list.flatMap((conn) => {
-      const item = { key: ServerConnection.key(conn), name: serverName(conn) }
+      const server = { key: ServerConnection.key(conn), name: serverName(conn) }
      return global
        .ensureServerCtx(conn)
        .projects.list()
-        .map((project) => ({ ...project, server: item }))
+        .map((project) => ({ ...project, server }))
    })
  })
+  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, serverKey?: string) => {
    const conn = serverKey ? server.list.find((conn) => ServerConnection.key(conn) === serverKey) : projectServer()
    if (search.draftId) {
@@ -120,11 +104,32 @@ export function createPromptProjectControls() {
    })
  }

-  return createMemo<PromptProjectControls>(() => ({
-    available: projects(),
-    directory: sdk().directory,
-    server: server.list.length > 1 ? ServerConnection.key(projectServer()) : undefined,
-    select: selectProject,
-    add: addProject,
+  return createMemo<PromptInputControls>(() => ({
+    agents: {
+      available: sync().data.agent,
+      options: local.agent.list().map((agent) => agent.name),
+      current: local.agent.current()?.name ?? "",
+      loading: agentsQuery.isLoading,
+      visible: settings.visibility.customAgents(),
+      select: local.agent.set,
+    },
+    model: {
+      selection: local.model,
+      paid: providers.paid().length > 0,
+      loading: agentsQuery.isLoading || providersQuery.isLoading || globalProvidersQuery.isLoading,
+    },
+    projects: {
+      available: projects(),
+      directory: sdk().directory,
+      server: server.list.length > 1 && projectServer() ? ServerConnection.key(projectServer()!) : undefined,
+      select: selectProject,
+      add: addProject,
+    },
+    session: {
+      id: input.sessionID(),
+      tabs: layout.tabs(input.sessionKey),
+      reviewPanel: view.reviewPanel,
+    },
+    newLayoutDesigns: settings.general.newLayoutDesigns(),
  }))
 }
@@ -1,145 +0,0 @@
-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,89 +1,216 @@
-import { Show, type JSX } from "solid-js"
+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 { useLanguage } from "@/context/language"
-import { useSettings } from "@/context/settings"
+import { usePrompt } from "@/context/prompt"
+import { useSync } from "@/context/sync"
+import { getSessionHandoff, setSessionHandoff } from "@/pages/session/handoff"
 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 { SessionComposerRegionController } from "./session-composer-region-controller"
+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"

 export function SessionComposerRegion(props: {
-  controller: SessionComposerRegionController
-  promptInput: JSX.Element
-}) {
-  const language = useLanguage()
-  const controller = props.controller
-  const settings = useSettings()
-  const rolled = () => {
-    const revert = controller.revert()
-    return revert?.items.length ? revert : undefined
+  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
+}) {
+  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
+    }
+  }
+
+  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={controller.setDockRef}
+      ref={props.setPromptDockRef}
      data-component="session-prompt-dock"
      classList={{
-        "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(),
+        "w-full flex flex-col justify-center items-center pointer-events-none": true,
+        "shrink-0 pb-3 bg-background-stronger": props.placement !== "inline",
      }}
    >
      <div
        classList={{
-          "w-full px-3 pointer-events-auto": true,
-          "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": controller.centered(),
+          "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,
        }}
      >
-        <Show when={controller.state.questionRequest()} keyed>
+        <Show when={props.state.questionRequest()} keyed>
          {(request) => (
            <div>
-              <SessionQuestionDock request={request} onSubmit={controller.onResponseSubmit} />
+              <SessionQuestionDock request={request} onSubmit={props.onResponseSubmit} />
            </div>
          )}
        </Show>

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

-        <Show when={controller.showComposer()}>
-          <Show when={controller.dock()}>
+        <Show when={showComposer()}>
+          <Show when={dock()}>
            <div
              classList={{
                "overflow-hidden": true,
-                "pointer-events-none": controller.dockProgress() < 0.98,
+                "pointer-events-none": value() < 0.98,
              }}
              style={{
-                "max-height": `${controller.dockHeight() * controller.dockProgress()}px`,
+                "max-height": `${full() * value()}px`,
              }}
            >
-              <div ref={controller.setDockBodyRef}>
+              <div ref={(el) => setStore("body", el)}>
                <SessionTodoDock
-                  todos={controller.state.todos()}
-                  collapsed={controller.todo.collapsed()}
-                  onToggle={controller.todo.onToggle}
+                  todos={props.state.todos()}
+                  collapsed={props.todo.collapsed}
+                  onToggle={props.todo.onToggle}
                  collapseLabel={language.t("session.todo.collapse")}
                  expandLabel={language.t("session.todo.expand")}
-                  dockProgress={controller.dockProgress()}
+                  dockProgress={value()}
                />
              </div>
            </div>
          </Show>
          <Show
-            when={controller.promptReady()}
+            when={prompt.ready() || promptReadyResource()}
            fallback={
              <>
                <Show when={rolled()} keyed>
@@ -100,9 +227,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 * controller.dockProgress()}px` }}
+                  style={{ "margin-top": `${-36 * value()}px` }}
                >
-                  {controller.handoffPrompt() || language.t("prompt.loading")}
+                  {handoffPrompt() || language.t("prompt.loading")}
                </div>
              </>
            }
@@ -111,7 +238,7 @@ export function SessionComposerRegion(props: {
              {(revert) => (
                <div
                  style={{
-                    "margin-top": `${-36 * controller.dockProgress()}px`,
+                    "margin-top": `${-36 * value()}px`,
                  }}
                >
                  <SessionRevertDock
@@ -128,31 +255,44 @@ export function SessionComposerRegion(props: {
                "relative z-30": true,
              }}
              style={{
-                "margin-top": `${-controller.lift()}px`,
+                "margin-top": `${-lift()}px`,
              }}
            >
-              <Show when={controller.followup()?.items.length}>
+              <Show when={props.followup?.items.length}>
                <SessionFollowupDock
-                  items={controller.followup()!.items}
-                  sending={controller.followup()!.sending}
-                  onSend={controller.followup()!.onSend}
-                  onEdit={controller.followup()!.onEdit}
+                  items={props.followup!.items}
+                  sending={props.followup!.sending}
+                  onSend={props.followup!.onSend}
+                  onEdit={props.followup!.onEdit}
                />
              </Show>
              <Show
-                when={controller.child()}
-                fallback={<Show when={!controller.state.blocked()}>{props.promptInput}</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>
+                }
              >
                <div
-                  ref={controller.setPromptRef}
+                  ref={props.promptInput.ref}
                  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={controller.parentID()}>
+                  <Show when={parentID() && props.openParent}>
                    <button
                      type="button"
                      class="text-text-base transition-colors hover:text-text-strong"
-                      onClick={controller.openParent}
+                      onClick={props.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 createSessionComposerController(options?: { closeMs?: number | (() => number) }) {
+export function createSessionComposerState(options?: { closeMs?: number | (() => number) }) {
  const params = useParams()
  const sdk = useSDK()
  const sync = useSync()
@@ -201,4 +201,4 @@ export function createSessionComposerController(options?: { closeMs?: number | (
  }
 }

-export type SessionComposerController = ReturnType<typeof createSessionComposerController>
+export type SessionComposerState = ReturnType<typeof createSessionComposerState>
@@ -432,23 +432,21 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
      header={
        <>
          <div data-slot="question-header-title">{summary()}</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>
+          <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>
        </>
      }
      footer={
@@ -3,13 +3,7 @@ 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 { PromptInput } from "@/components/prompt-input"
-import { usePrompt } from "@/context/prompt"
-import {
-  SessionComposerRegion,
-  createSessionComposerController,
-  createSessionComposerRegionController,
-} from "@/pages/session/composer"
+import { SessionComposerRegion, createSessionComposerState } from "@/pages/session/composer"

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

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

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

                <div>
                  <SessionComposerRegion
-                    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={() => {}}
-                      />
-                    }
+                    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()}
                  />
                </div>
              </div>
@@ -293,7 +293,7 @@ export function TerminalPanel() {
                </Tabs.List>
              </Tabs>
              <div class="flex-1 min-h-0 relative">
-                <Show when={opened() && terminal.active()} keyed>
+                <Show when={terminal.active()} keyed>
                  {(id) => {
                    const ops = terminal.bind()
                    return (
@@ -1019,13 +1019,7 @@ export function MessageTimeline(props: {
                <div class="flex w-max min-w-full justify-end gap-2">
                  <Index each={comments()}>
                    {(comment) => (
-                      <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="shrink-0 max-w-[260px] rounded-[6px] border border-border-weak-base bg-background-stronger px-2.5 py-2">
                        <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>
@@ -1294,11 +1288,7 @@ export function MessageTimeline(props: {
          <div
            data-session-title
            classList={{
-              "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(),
+              "sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]": true,
              "w-full": true,
              "pb-4": true,
              "pr-3": true,
@@ -1519,11 +1509,7 @@ export function MessageTimeline(props: {
                                      <Button
                                        size="large"
                                        variant="secondary"
-                                        class={
-                                          settings.general.newLayoutDesigns()
-                                            ? "w-full shadow-none border-[0.5px] border-border-weak-base"
-                                            : "w-full shadow-none border border-border-weak-base"
-                                        }
+                                        class="w-full shadow-none border border-border-weak-base"
                                        onClick={unshareSession}
                                        disabled={unshareMutation.isPending}
                                      >
@@ -1,69 +0,0 @@
-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,7 +136,9 @@ 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 = () => {
@@ -269,6 +271,13 @@ 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"),
@@ -546,6 +555,24 @@ 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",
@@ -557,6 +584,26 @@ 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",
@@ -577,7 +624,9 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
    ...viewCmds(),
    ...terminalCmds(),
    ...messageCmds(),
+    ...modelCmds(),
    ...mcpCmds(),
+    ...agentCmds(),
    ...permissionsCmds(),
  ])
 }
@@ -1,8 +1,7 @@
 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, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
-import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
+import { Dialog } from "@opencode-ai/ui/v2/dialog-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"
@@ -31,14 +30,8 @@ export function AddServerMenu(props: { onAddServer: () => void }) {
  const language = useLanguage()
  const openAddWsl = () => {
    dialog.push(() => (
-      <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 title={language.t("wsl.server.add")} size="large" fit class="settings-v2-wsl-dialog">
+        <DialogAddWslServer />
      </Dialog>
    ))
  }
@@ -55,49 +55,43 @@ const Endpoint0_1 = (raw: RawClient["server.session"]) => (input?: Endpoint0_1In
    Effect.map((value) => value.data),
  )

-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) =>
+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) =>
  raw["session.get"]({ params: { sessionID: input.sessionID } }).pipe(
    Effect.mapError(mapClientError),
    Effect.map((value) => value.data),
  )

-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"]
+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"]
 }
-const Endpoint0_4 = (raw: RawClient["server.session"]) => (input: Endpoint0_4Input) =>
+const Endpoint0_3 = (raw: RawClient["server.session"]) => (input: Endpoint0_3Input) =>
  raw["session.switchAgent"]({ params: { sessionID: input.sessionID }, payload: { agent: input.agent } }).pipe(
    Effect.mapError(mapClientError),
  )

-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"]
+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"]
 }
-const Endpoint0_5 = (raw: RawClient["server.session"]) => (input: Endpoint0_5Input) =>
+const Endpoint0_4 = (raw: RawClient["server.session"]) => (input: Endpoint0_4Input) =>
  raw["session.switchModel"]({ params: { sessionID: input.sessionID }, payload: { model: input.model } }).pipe(
    Effect.mapError(mapClientError),
  )

-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"]
+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"]
 }
-const Endpoint0_6 = (raw: RawClient["server.session"]) => (input: Endpoint0_6Input) =>
+const Endpoint0_5 = (raw: RawClient["server.session"]) => (input: Endpoint0_5Input) =>
  raw["session.prompt"]({
    params: { sessionID: input.sessionID },
    payload: { id: input.id, prompt: input.prompt, delivery: input.delivery, resume: input.resume },
@@ -106,23 +100,23 @@ const Endpoint0_6 = (raw: RawClient["server.session"]) => (input: Endpoint0_6Inp
    Effect.map((value) => value.data),
  )

-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) =>
+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_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) =>
+type Endpoint0_7Request = Parameters<RawClient["server.session"]["session.wait"]>[0]
+type Endpoint0_7Input = { readonly sessionID: Endpoint0_7Request["params"]["sessionID"] }
+const Endpoint0_7 = (raw: RawClient["server.session"]) => (input: Endpoint0_7Input) =>
  raw["session.wait"]({ params: { sessionID: input.sessionID } }).pipe(Effect.mapError(mapClientError))

-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"]
+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"]
 }
-const Endpoint0_9 = (raw: RawClient["server.session"]) => (input: Endpoint0_9Input) =>
+const Endpoint0_8 = (raw: RawClient["server.session"]) => (input: Endpoint0_8Input) =>
  raw["session.revert.stage"]({
    params: { sessionID: input.sessionID },
    payload: { messageID: input.messageID, files: input.files },
@@ -131,30 +125,30 @@ const Endpoint0_9 = (raw: RawClient["server.session"]) => (input: Endpoint0_9Inp
    Effect.map((value) => value.data),
  )

-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) =>
+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_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) =>
+type Endpoint0_10Request = Parameters<RawClient["server.session"]["session.revert.commit"]>[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))

-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) =>
+type Endpoint0_11Request = Parameters<RawClient["server.session"]["session.context"]>[0]
+type Endpoint0_11Input = { readonly sessionID: Endpoint0_11Request["params"]["sessionID"] }
+const Endpoint0_11 = (raw: RawClient["server.session"]) => (input: Endpoint0_11Input) =>
  raw["session.context"]({ params: { sessionID: input.sessionID } }).pipe(
    Effect.mapError(mapClientError),
    Effect.map((value) => value.data),
  )

-type Endpoint0_13Request = Parameters<RawClient["server.session"]["session.events"]>[0]
-type Endpoint0_13Input = {
-  readonly sessionID: Endpoint0_13Request["params"]["sessionID"]
-  readonly after?: Endpoint0_13Request["query"]["after"]
+type Endpoint0_12Request = Parameters<RawClient["server.session"]["session.events"]>[0]
+type Endpoint0_12Input = {
+  readonly sessionID: Endpoint0_12Request["params"]["sessionID"]
+  readonly after?: Endpoint0_12Request["query"]["after"]
 }
-const Endpoint0_13 = (raw: RawClient["server.session"]) => (input: Endpoint0_13Input) =>
+const Endpoint0_12 = (raw: RawClient["server.session"]) => (input: Endpoint0_12Input) =>
  Stream.unwrap(
    raw["session.events"]({ params: { sessionID: input.sessionID }, query: { after: input.after } }).pipe(
      Effect.mapError(mapClientError),
@@ -162,17 +156,17 @@ const Endpoint0_13 = (raw: RawClient["server.session"]) => (input: Endpoint0_13I
    ),
  )

-type Endpoint0_14Request = Parameters<RawClient["server.session"]["session.interrupt"]>[0]
-type Endpoint0_14Input = { readonly sessionID: Endpoint0_14Request["params"]["sessionID"] }
-const Endpoint0_14 = (raw: RawClient["server.session"]) => (input: Endpoint0_14Input) =>
+type Endpoint0_13Request = Parameters<RawClient["server.session"]["session.interrupt"]>[0]
+type Endpoint0_13Input = { readonly sessionID: Endpoint0_13Request["params"]["sessionID"] }
+const Endpoint0_13 = (raw: RawClient["server.session"]) => (input: Endpoint0_13Input) =>
  raw["session.interrupt"]({ params: { sessionID: input.sessionID } }).pipe(Effect.mapError(mapClientError))

-type Endpoint0_15Request = Parameters<RawClient["server.session"]["session.message"]>[0]
-type Endpoint0_15Input = {
-  readonly sessionID: Endpoint0_15Request["params"]["sessionID"]
-  readonly messageID: Endpoint0_15Request["params"]["messageID"]
+type Endpoint0_14Request = Parameters<RawClient["server.session"]["session.message"]>[0]
+type Endpoint0_14Input = {
+  readonly sessionID: Endpoint0_14Request["params"]["sessionID"]
+  readonly messageID: Endpoint0_14Request["params"]["messageID"]
 }
-const Endpoint0_15 = (raw: RawClient["server.session"]) => (input: Endpoint0_15Input) =>
+const Endpoint0_14 = (raw: RawClient["server.session"]) => (input: Endpoint0_14Input) =>
  raw["session.message"]({ params: { sessionID: input.sessionID, messageID: input.messageID } }).pipe(
    Effect.mapError(mapClientError),
    Effect.map((value) => value.data),
@@ -181,20 +175,19 @@ const Endpoint0_15 = (raw: RawClient["server.session"]) => (input: Endpoint0_15I
 const adaptGroup0 = (raw: RawClient["server.session"]) => ({
  list: Endpoint0_0(raw),
  create: Endpoint0_1(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),
-  events: Endpoint0_13(raw),
-  interrupt: Endpoint0_14(raw),
-  message: Endpoint0_15(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),
+  events: Endpoint0_12(raw),
+  interrupt: Endpoint0_13(raw),
+  message: Endpoint0_14(raw),
 })

 const adaptClient = (raw: RawClient) => ({ sessions: adaptGroup0(raw["server.session"]) })
@@ -3,7 +3,6 @@ import type {
  SessionsListOutput,
  SessionsCreateInput,
  SessionsCreateOutput,
-  SessionsActiveOutput,
  SessionsGetInput,
  SessionsGetOutput,
  SessionsSwitchAgentInput,
@@ -199,17 +198,6 @@ 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 }>(
          {
@@ -243,8 +243,6 @@ export type SessionsCreateOutput = {
  }
 }["data"]

-export type SessionsActiveOutput = { readonly data: { readonly [x: string]: { readonly type: "running" } } }["data"]
-
 export type SessionsGetInput = { readonly sessionID: { readonly sessionID: string }["sessionID"] }

 export type SessionsGetOutput = {
@@ -37,11 +37,6 @@ test("session methods retain decoded Effect inputs and outputs", async () => {
    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)))
    }
@@ -55,7 +50,6 @@ 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") }),
    })
@@ -80,11 +74,10 @@ test("session methods retain decoded Effect inputs and outputs", async () => {
      sessionID: Session.ID.make("ses_test"),
      messageID: SessionMessage.ID.make("msg_model"),
    })
-    return { page, active, created, admitted, context, events, message }
+    return { page, created, admitted, context, 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")
@@ -32,7 +32,6 @@ test("session methods use the public HTTP contract", async () => {
      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" } })
@@ -40,7 +39,6 @@ test("session methods use the public HTTP contract", async () => {
  })

  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({
@@ -61,7 +59,6 @@ test("session methods use the public HTTP contract", async () => {
  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([])
@@ -69,7 +66,6 @@ test("session methods use the public HTTP contract", async () => {
  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"],
@@ -81,7 +77,7 @@ test("session methods use the public HTTP contract", async () => {
    ["POST", "http://localhost:3000/api/session/ses_test/interrupt"],
    ["GET", "http://localhost:3000/api/session/ses_test/message/msg_model"],
  ])
-  const body = requests.find((request) => request.url.endsWith("/api/session/ses_test/prompt"))?.init?.body
+  const body = requests[4]?.init?.body
  if (typeof body !== "string") throw new Error("Expected JSON request body")
  expect(JSON.parse(body)).toEqual({
    prompt: { text: "Hello" },
@@ -1,15 +1,10 @@
 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"
@@ -23,13 +18,9 @@ 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: requestHeaders,
+    headers: req.headers,
    body: req.body,
  })

@@ -39,7 +30,6 @@ 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,
@@ -62,60 +52,3 @@ 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(", "),
-  )
-}
@@ -0,0 +1 @@
+james@james-6.local.2380:1780672839
@@ -0,0 +1 @@
+james@james-6.local.2380:1780672839
@@ -1,5 +1,6 @@
 export * as AgentV2 from "./agent"

+import { makeLocationNode } from "./effect/scoped-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: [] })
@@ -1,5 +1,6 @@
 export * as AISDK from "./aisdk"

+import { makeLocationNode } from "./effect/scoped-node"
 import type { LanguageModelV3 } from "@ai-sdk/provider"
 import { Cause, Context, Effect, Layer, Schema, Scope } from "effect"
 import { ModelV2 } from "./model"
@@ -231,4 +232,6 @@ export const locationLayer = Layer.effect(
  }),
 )

+export const node = makeLocationNode({ service: Service, layer: locationLayer, deps: [] })
+
 export const defaultLayer = locationLayer
@@ -2,6 +2,7 @@ export * as BackgroundJob from "./background-job"

 import { Cause, Clock, Context, Deferred, Effect, Exit, Layer, Scope, SynchronizedRef } from "effect"
 import { Identifier } from "./id/id"
+import { makeGlobalNode } from "./effect/scoped-node"

 export type Status = "running" | "completed" | "error" | "cancelled"

@@ -362,3 +363,5 @@ export const make = Effect.gen(function* () {
 export const layer = Layer.effect(Service, make)

 export const defaultLayer = layer
+
+export const node = makeGlobalNode({ service: Service, layer, deps: [] })
@@ -1,5 +1,6 @@
 export * as Catalog from "./catalog"

+import { makeLocationNode } from "./effect/scoped-node"
 import { Array, Context, Effect, Layer, Option, Order, pipe, Schema } from "effect"
 import { Catalog } from "@opencode-ai/schema/catalog"
 import { ModelV2 } from "./model"
@@ -235,11 +236,6 @@ export const layer = Layer.effect(
          if (!record) return
          const provider = record.provider

-          // TODO: Remove these provider-specific assumptions once model syncing reliably reports available deployments.
-          if (providerID === ProviderV2.ID.azure || providerID === ProviderV2.ID.make("azure-cognitive-services")) {
-            return
-          }
-
          if (providerID === ProviderV2.ID.opencode) {
            const gpt5Nano = record.models.get(ModelV2.ID.make("gpt-5-nano"))
            if (gpt5Nano?.enabled && gpt5Nano.status === "active") return projectModel(gpt5Nano, provider)
@@ -296,3 +292,5 @@ export const locationLayer = layer.pipe(
  Layer.provideMerge(Integration.locationLayer),
  Layer.provideMerge(Policy.locationLayer),
 )
+
+export const node = makeLocationNode({ service: Service, layer, deps: [EventV2.node, Policy.node, Integration.node] })
@@ -1,5 +1,6 @@
 export * as CommandV2 from "./command"

+import { makeLocationNode } from "./effect/scoped-node"
 import { Context, Effect, Layer, Types } from "effect"
 import { Command } from "@opencode-ai/schema/command"
 import { State } from "./state"
@@ -59,3 +60,5 @@ export const layer = Layer.effect(
 )

 export const locationLayer = layer
+
+export const node = makeLocationNode({ service: Service, layer, deps: [] })
@@ -1,5 +1,6 @@
 export * as Config from "./config"

+import { makeLocationNode } from "./effect/scoped-node"
 import path from "path"
 import { type ParseError, parse } from "jsonc-parser"
 import { Context, Effect, Layer, Option, Schema } from "effect"
@@ -218,3 +219,9 @@ export const layer = Layer.effect(
 )

 export const locationLayer = layer.pipe(Layer.provideMerge(Policy.locationLayer))
+
+export const node = makeLocationNode({
+  service: Service,
+  layer,
+  deps: [FSUtil.node, Global.node, Location.node, Policy.node],
+})
@@ -3,15 +3,6 @@ export * as ConfigMCP from "./mcp"
 import { Schema } from "effect"
 import { PositiveInt } from "../schema"

-export class Timeout extends Schema.Class<Timeout>("ConfigV2.MCP.Timeout")({
-  startup: PositiveInt.pipe(Schema.optional).annotate({
-    description: "Maximum time in milliseconds to establish and initialize the MCP server.",
-  }),
-  request: PositiveInt.pipe(Schema.optional).annotate({
-    description: "Maximum time in milliseconds to wait for each MCP request after initialization.",
-  }),
-}) {}
-
 export class Local extends Schema.Class<Local>("ConfigV2.MCP.Local")({
  type: Schema.Literal("local"),
  command: Schema.String.pipe(Schema.Array),
@@ -20,7 +11,7 @@ export class Local extends Schema.Class<Local>("ConfigV2.MCP.Local")({
  }),
  environment: Schema.Record(Schema.String, Schema.String).pipe(Schema.optional),
  disabled: Schema.Boolean.pipe(Schema.optional),
-  timeout: Timeout.pipe(Schema.optional),
+  timeout: PositiveInt.pipe(Schema.optional),
 }) {}

 export class OAuth extends Schema.Class<OAuth>("ConfigV2.MCP.OAuth")({
@@ -37,12 +28,12 @@ export class Remote extends Schema.Class<Remote>("ConfigV2.MCP.Remote")({
  headers: Schema.Record(Schema.String, Schema.String).pipe(Schema.optional),
  oauth: Schema.Union([OAuth, Schema.Literal(false)]).pipe(Schema.optional),
  disabled: Schema.Boolean.pipe(Schema.optional),
-  timeout: Timeout.pipe(Schema.optional),
+  timeout: PositiveInt.pipe(Schema.optional),
 }) {}

 export const Server = Schema.Union([Local, Remote]).pipe(Schema.toTaggedUnion("type"))

 export class Info extends Schema.Class<Info>("ConfigV2.MCP")({
-  timeout: Timeout.pipe(Schema.optional),
+  timeout: PositiveInt.pipe(Schema.optional),
  servers: Schema.Record(Schema.String, Server).pipe(Schema.optional),
 }) {}
@@ -6,9 +6,9 @@ import { Git } from "../git"
 import { Location } from "../location"
 import { ProjectV2 } from "../project"
 import { SessionV2 } from "../session"
+import { SessionExecution } from "../session/execution"
 import { SessionEvent } from "../session/event"
 import { SessionSchema } from "../session/schema"
-import { SessionStore } from "../session/store"
 import { AbsolutePath, RelativePath } from "../schema"
 import path from "path"

@@ -71,11 +71,10 @@ export const layer = Layer.effect(
    const git = yield* Git.Service
    const events = yield* EventV2.Service
    const project = yield* ProjectV2.Service
-    const sessions = yield* SessionStore.Service
+    const session = yield* SessionV2.Service

    const moveSession = Effect.fn("MoveSession.moveSession")(function* (input: Input) {
-      const current = yield* sessions.get(input.sessionID)
-      if (!current) return yield* new SessionV2.NotFoundError({ sessionID: input.sessionID })
+      const current = yield* session.get(input.sessionID)
      const directory = AbsolutePath.make(input.destination.directory)
      if (current.location.directory === directory) return

@@ -144,5 +143,6 @@ export const defaultLayer = layer.pipe(
  Layer.provide(Git.defaultLayer),
  Layer.provide(EventV2.defaultLayer),
  Layer.provide(ProjectV2.defaultLayer),
-  Layer.provide(SessionStore.defaultLayer),
+  Layer.provide(SessionExecution.noopLayer),
+  Layer.provide(SessionV2.defaultLayer),
 )
@@ -5,6 +5,7 @@ import { Context, Effect, Layer, Schema } from "effect"
 import { Credential } from "@opencode-ai/schema/credential"
 import { Integration } from "@opencode-ai/schema/integration"
 import { Database } from "./database/database"
+import { makeGlobalNode } from "./effect/scoped-node"
 import { CredentialTable } from "./credential/sql"

 export const ID = Credential.ID
@@ -135,3 +136,5 @@ export const layer = Layer.effect(
 )

 export const defaultLayer = layer.pipe(Layer.provide(Database.defaultLayer))
+
+export const node = makeGlobalNode({ service: Service, layer, deps: [Database.node] })
@@ -24,7 +24,7 @@ import {
 import * as NodeChildProcess from "node:child_process"
 import { PassThrough } from "node:stream"
 import launch from "cross-spawn"
-import { LayerNode } from "./effect/layer-node"
+import { makeGlobalNode } from "./effect/scoped-node"
 import { filesystem, path } from "./effect/layer-node-platform"

 const toError = (err: unknown): Error => (err instanceof globalThis.Error ? err : new globalThis.Error(String(err)))
@@ -503,6 +503,6 @@ export const layer: Layer.Layer<ChildProcessSpawner, never, FileSystem.FileSyste
 )

 export const defaultLayer = layer.pipe(Layer.provide(NodeFileSystem.layer), Layer.provide(NodePath.layer))
-export const node = LayerNode.make({ service: ChildProcessSpawner, layer, deps: [filesystem, path] })
+export const node = makeGlobalNode({ service: ChildProcessSpawner, layer, deps: [filesystem, path] })

 export * as CrossSpawnSpawner from "./cross-spawn-spawner"
@@ -8,7 +8,7 @@ import { Flag } from "../flag/flag"
 import { isAbsolute, join } from "path"
 import { DatabaseMigration } from "./migration"
 import { InstallationChannel } from "../installation/version"
-import { LayerNode } from "../effect/layer-node"
+import { makeGlobalNode } from "../effect/scoped-node"

 const makeDatabase = EffectDrizzleSqlite.makeWithDefaults()
 type DatabaseShape = Effect.Success<typeof makeDatabase>
@@ -60,4 +60,4 @@ export const defaultLayer = Layer.unwrap(
  }),
 ).pipe(Layer.provide(Global.defaultLayer))

-export const node = LayerNode.make({ service: Service, layer: layerFromPath(path()), deps: [] })
+export const node = makeGlobalNode({ service: Service, layer: layerFromPath(path()), deps: [] })
@@ -3,16 +3,16 @@ import { LLMClient, RequestExecutor } from "@opencode-ai/llm/route"
 import { FileSystem, Path } from "effect"
 import { FetchHttpClient } from "effect/unstable/http"
 import { HttpClient } from "effect/unstable/http"
-import { LayerNode } from "./layer-node"
+import { makeGlobalNode } from "./scoped-node"

-export const filesystem = LayerNode.make({ service: FileSystem.FileSystem, layer: NodeFileSystem.layer, deps: [] })
-export const path = LayerNode.make({ service: Path.Path, layer: NodePath.layer, deps: [] })
-export const httpClient = LayerNode.make({ service: HttpClient.HttpClient, layer: FetchHttpClient.layer, deps: [] })
-export const requestExecutor = LayerNode.make({
+export const filesystem = makeGlobalNode({ service: FileSystem.FileSystem, layer: NodeFileSystem.layer, deps: [] })
+export const path = makeGlobalNode({ service: Path.Path, layer: NodePath.layer, deps: [] })
+export const httpClient = makeGlobalNode({ service: HttpClient.HttpClient, layer: FetchHttpClient.layer, deps: [] })
+export const requestExecutor = makeGlobalNode({
  service: RequestExecutor.Service,
  layer: RequestExecutor.layer,
  deps: [httpClient],
 })
-export const llmClient = LayerNode.make({ service: LLMClient.Service, layer: LLMClient.layer, deps: [requestExecutor] })
+export const llmClient = makeGlobalNode({ service: LLMClient.Service, layer: LLMClient.layer, deps: [requestExecutor] })

 export * as LayerNodePlatform from "./layer-node-platform"
@@ -0,0 +1,182 @@
+import { Layer } from "effect"
+import { LayerNode } from "./layer-node"
+
+type AnyNode = LayerNode.Node<unknown, unknown, any>
+type RuntimeLayer = Layer.Layer<never, unknown, unknown>
+
+type Separated<N, Names extends readonly [string, ...string[]]> = {
+  readonly [Name in Names[number]]: N extends LayerNode.Node<infer A, infer E, any>
+    ? LayerNode.Node<A, E>
+    : never
+}
+
+export function separate<const Root extends AnyNode, const Names extends readonly [string, ...string[]]>(
+  root: Root,
+  tiers: LayerNode.Tiers<Names>,
+): Separated<Root, Names> {
+  const roots = new Map<LayerNode.Tier, AnyNode[]>()
+  const serviceTiers = new Map<string, LayerNode.Tier>()
+  const visited = new Set<AnyNode>()
+
+  const validate = (node: AnyNode) => {
+    if (node.kind === "group") {
+      node.dependencies.forEach(validate)
+      return
+    }
+    if (visited.has(node)) return
+    visited.add(node)
+    const tier = requireTier(node, tiers)
+    const existing = serviceTiers.get(node.name)
+    if (existing && existing !== tier) {
+      throw new Error(`Service ${node.name} belongs to both tier ${existing} and tier ${tier}`)
+    }
+    serviceTiers.set(node.name, tier)
+    node.dependencies.forEach(validate)
+  }
+  validate(root)
+
+  for (const node of flatten(root)) {
+    const tier = requireTier(node, tiers)
+    const current = roots.get(tier) ?? []
+    roots.set(tier, current)
+    current.push(node)
+  }
+
+  return Object.fromEntries(
+    tiers.names.map((name) => [name, LayerNode.group(roots.get(tiers.values[name as Names[number]]) ?? [])]),
+  ) as Separated<Root, Names>
+}
+
+export function hoist<A, E, T extends LayerNode.Tier>(
+  root: LayerNode.Node<A, E, any>,
+  tier: T,
+  tiers: LayerNode.Tiers<readonly [string, ...string[]]>,
+): {
+  readonly node: LayerNode.Node<A, E>
+  readonly hoisted: LayerNode.Node<unknown, unknown>
+} {
+  const indexes = new Map(tiers.names.map((name, index) => [tiers.values[name], index]))
+  const current = indexes.get(tier)
+  if (current === undefined) throw new Error(`Tier ${tier} is not in the tier configuration`)
+  const visited = new Map<AnyNode, AnyNode>()
+  const hoisted = new Map<string, AnyNode>()
+  let hoistedTier: LayerNode.Tier | undefined
+  const visiting = new Set<AnyNode>()
+  const stack: AnyNode[] = []
+
+  const visit = (node: AnyNode): AnyNode => {
+    if (node.kind === "group") {
+      return { ...node, dependencies: node.dependencies.map(visit) }
+    }
+
+    const existingNode = visited.get(node)
+    if (existingNode) return existingNode
+
+    const dependencyTier = requireTier(node, tiers)
+    const index = indexes.get(dependencyTier)!
+    if (index < current) throw new Error(`Tier ${tier} cannot depend on lower tier ${dependencyTier}`)
+    if (index > current) {
+      if (hoistedTier && hoistedTier !== dependencyTier) {
+        throw new Error(`Tree ${tier} hoists dependencies into multiple tiers`)
+      }
+      hoistedTier = dependencyTier
+      const existing = hoisted.get(node.name)
+      if (existing && existing !== node) {
+        throw new Error(`Tier ${tier} has conflicting implementations for ${node.name}`)
+      }
+      hoisted.set(node.name, node)
+      const empty = LayerNode.group([])
+      visited.set(node, empty)
+      return empty
+    }
+    if (node.kind === "unbound") {
+      return node
+    }
+
+    if (visiting.has(node)) {
+      const start = stack.indexOf(node)
+      throw new Error(
+        `Cycle detected in layer tree: ${[...stack.slice(start), node].map((item) => item.name).join(" -> ")}`,
+      )
+    }
+    visiting.add(node)
+    stack.push(node)
+    try {
+      const dependencies = node.dependencies.map(visit)
+      const clone = { ...node, dependencies }
+      visited.set(node, clone)
+      return clone
+    } finally {
+      stack.pop()
+      visiting.delete(node)
+    }
+  }
+
+  return {
+    node: visit(root) as LayerNode.Node<A, E>,
+    hoisted: LayerNode.group(Array.from(hoisted.values())),
+  }
+}
+
+export function compile(
+  root: LayerNode.Node<unknown, unknown, any>,
+  replacements?: ReadonlyMap<Layer.Any, Layer.Any>,
+): Layer.Layer<never, unknown> {
+  const cache = new Map<AnyNode, RuntimeLayer>()
+  const compileNode = (node: AnyNode): RuntimeLayer => {
+    if (node.kind === "unbound") throw new Error(`Unbound layer node: ${node.name}`)
+    const cached = cache.get(node)
+    if (cached) return cached
+    const dependencies = node.dependencies.flatMap(flatten).map(compileNode)
+    const implementation = (replacements?.get(node.implementation!) ?? node.implementation!) as RuntimeLayer
+    const layer =
+      dependencies.length === 0
+        ? implementation
+        : implementation.pipe(Layer.provide(dependencies as [RuntimeLayer, ...RuntimeLayer[]]))
+    cache.set(node, layer)
+    return layer
+  }
+  const layers = flatten(root).map((node) => compileNode(node))
+  const layer = layers.reduce<RuntimeLayer>((result, layer) => layer.pipe(Layer.provideMerge(result)), Layer.empty)
+  return layer as Layer.Layer<never, unknown>
+}
+
+export function bind<A, E, T extends LayerNode.Tier | undefined>(
+  root: LayerNode.Node<A, E, T>,
+  source: AnyNode,
+  replacement: AnyNode,
+): LayerNode.Node<A, E, T> {
+  if (source.kind !== "unbound") throw new Error(`Cannot bind non-unbound layer node: ${source.name}`)
+  if (source.name !== replacement.name) {
+    throw new Error(`Cannot bind ${source.name} to ${replacement.name}`)
+  }
+  if (source.tier !== replacement.tier) {
+    throw new Error(`Cannot bind ${source.name} across tiers`)
+  }
+  const visited = new Map<AnyNode, AnyNode>()
+  const visit = (node: AnyNode): AnyNode => {
+    if (node === source) return replacement
+    const existing = visited.get(node)
+    if (existing) return existing
+    if (node.kind === "unbound") return node
+    const clone = { ...node, dependencies: node.dependencies.map(visit) }
+    visited.set(node, clone)
+    return clone
+  }
+  return visit(root) as LayerNode.Node<A, E, T>
+}
+
+function flatten(node: AnyNode): readonly AnyNode[] {
+  return node.kind === "group" ? node.dependencies.flatMap(flatten) : [node]
+}
+
+function requireTier(node: AnyNode, tiers: LayerNode.Tiers<readonly [string, ...string[]]>): LayerNode.Tier {
+  const tier =
+    node.tier ?? (tiers.names.length === 1 && tiers.names[0] === "untiered" ? tiers.values.untiered : undefined)
+  if (!tier || !tiers.names.some((name) => tiers.values[name] === tier)) {
+    throw new Error(`Node ${node.name} is not in the tier configuration`)
+  }
+  return tier
+}
+
+export * as LayerNodeTree from "./layer-node-tree"
@@ -1,6 +1,5 @@
 import { Brand, Context, Layer } from "effect"

-type RuntimeLayer = Layer.Layer<never, unknown, unknown>
 type AnyNode = Node<unknown, unknown, any>
 type NodeList<Item extends AnyNode = AnyNode> = readonly [] | readonly [Item, ...Item[]]
 type Output<Item> = [Item] extends [never] ? never : Item extends Node<infer A, unknown, any> ? A : never
@@ -18,8 +17,8 @@ export type Tier<Name extends string = string> = Name & Brand.Brand<"LayerNode.T

 const makeTier = Brand.nominal<Tier>()

-export type Node<A, E = never, T extends Tier | undefined = undefined> = {
-  readonly kind: "layer" | "group"
+export interface Node<A, E = never, T extends Tier | undefined = undefined> {
+  readonly kind: "layer" | "unbound" | "group"
  readonly name: string
  readonly service?: Context.Service.Any
  readonly implementation?: Layer.Any
@@ -34,7 +33,7 @@ type NodeIdentity =
  | { readonly name: string; readonly service?: never }
 type DistributiveOmit<A, K extends PropertyKey> = A extends unknown ? Omit<A, K> : never

-type NodeInput<
+type MakeInput<
  Implementation extends Layer.Any,
  Items extends NodeList,
  T extends Tier | undefined = undefined,
@@ -49,8 +48,12 @@ export function make<
  const Items extends NodeList,
  const T extends Tier | undefined = undefined,
 >(
-  input: NodeInput<Implementation, Items, T>,
-): Node<Layer.Success<Implementation>, Layer.Error<Implementation> | Error<Items[number]>, T> {
+  input: MakeInput<Implementation, Items, T>,
+): Node<
+  Layer.Success<Implementation>,
+  Layer.Error<Implementation> | Error<Items[number]>,
+  T
+> {
  return {
    kind: "layer",
    name: input.service !== undefined ? input.service.key : input.name,
@@ -61,7 +64,20 @@ export function make<
  }
 }

-export function group<const Items extends NodeList>(
+export function unbound<R, Shape, const T extends Tier>(
+  service: Context.Key<R, Shape>,
+  tier: T,
+): Node<R, never, T> {
+  return {
+    kind: "unbound",
+    name: service.key,
+    service,
+    dependencies: [],
+    tier,
+  }
+}
+
+export function group<const Items extends readonly AnyNode[]>(
  dependencies: Items,
 ): Node<Output<Items[number]>, Error<Items[number]>> {
  return { kind: "group", name: "group", dependencies }
@@ -76,19 +92,26 @@ type AllowedTierNames<Names extends readonly string[], Name extends Names[number
    : AllowedTierNames<Tail, Name>
  : never

-type NodeInTiers<Names extends string> = Node<unknown, unknown, Tier<Names>>
+type NodeInTiers<Names extends string> = Node<unknown, unknown, Tier<Names> | undefined>
+type CheckTiers<Items extends NodeList, Names extends string> = [Exclude<Items[number], NodeInTiers<Names>>] extends [
+  never,
+]
+  ? unknown
+  : { readonly "Invalid tier dependencies": Exclude<Items[number], NodeInTiers<Names>> }

 export interface Tiers<Names extends readonly [string, ...string[]]> {
  readonly names: Names
  readonly values: { readonly [K in Names[number]]: Tier<K> }
  readonly make: <Name extends Names[number]>(
    name: Name,
-  ) => <
-    const Implementation extends Layer.Any,
-    const Items extends NodeList<NodeInTiers<AllowedTierNames<Names, Name>>>,
-  >(
-    input: DistributiveOmit<NodeInput<Implementation, Items, Tier<Name>>, "tier">,
-  ) => Node<Layer.Success<Implementation>, Layer.Error<Implementation> | Error<Items[number]>, Tier<Name>>
+  ) => <const Implementation extends Layer.Any, const Items extends NodeList>(
+    input: DistributiveOmit<MakeInput<Implementation, Items, Tier<Name>>, "tier"> &
+      CheckTiers<Items, AllowedTierNames<Names, Name>>,
+  ) => Node<
+    Layer.Success<Implementation>,
+    Layer.Error<Implementation> | Error<Items[number]>,
+    Tier<Name>
+  >
 }

 export function tiers<const Names extends readonly [string, ...string[]]>(names: Names): Tiers<Names> {
@@ -96,14 +119,11 @@ export function tiers<const Names extends readonly [string, ...string[]]>(names:
  return {
    names,
    values,
-    make: ((name: Names[number]) => (input: DistributiveOmit<NodeInput<Layer.Any, NodeList, Tier>, "tier">) =>
+    make: ((name: Names[number]) => (input: DistributiveOmit<MakeInput<Layer.Any, NodeList, Tier>, "tier">) =>
      make({ ...input, tier: values[name] })) as Tiers<Names>["make"],
  }
 }

-const defaultTiers = tiers(["untiered"])
-const untiered = defaultTiers.values.untiered
-
 export type Replacement = {
  readonly source: Layer.Any
  readonly replacement: Layer.Any
@@ -120,129 +140,4 @@ export function replace<A, E, R, E2>(
  return { source, replacement }
 }

-export function buildLayer<
-  A,
-  E,
-  const Names extends readonly [string, ...string[]] = readonly ["untiered"],
-  const Built extends Layer.Any = Layer.Layer<never, never, never>,
->(
-  node: Node<A, E, any>,
-  options?: {
-    readonly tiers?: Tiers<Names>
-    readonly buildTier?: (tier: Names[number], layers: readonly Layer.Any[]) => Built
-    readonly replacements?: readonly Replacement[]
-  },
-): Layer.Layer<A | Layer.Success<Built>, E | Layer.Error<Built>, never> {
-  const tiers = options?.tiers ?? (defaultTiers as unknown as Tiers<Names>)
-  const replacementMap = new Map(options?.replacements?.map((item) => [item.source, item.replacement]))
-  const plans = plan(node, tiers, replacementMap)
-  const layers: RuntimeLayer[] = tiers.names.map((name) => {
-    const tier = tiers.values[name as Names[number]]
-    const layers = plans.get(tier) ?? []
-    return (options?.buildTier?.(name, layers) ?? combine(layers)) as RuntimeLayer
-  })
-  if (layers.length === 0) return Layer.empty as never
-  return layers.slice(1).reduce((result, layer) => result.pipe(Layer.provideMerge(layer)), layers[0]) as never
-}
-
-export function combine(layers: readonly Layer.Any[]): RuntimeLayer {
-  return layers.reduce<RuntimeLayer>(
-    (result, layer) => (layer as RuntimeLayer).pipe(Layer.provideMerge(result)),
-    Layer.empty as RuntimeLayer,
-  )
-}
-
-function plan(
-  root: AnyNode,
-  tiers: Tiers<readonly [string, ...string[]]>,
-  replacements: ReadonlyMap<Layer.Any, Layer.Any>,
-) {
-  const indexes = new Map(tiers.names.map((name, index) => [tiers.values[name], index]))
-  const plans = new Map<Tier, Layer.Any[]>()
-  const activeImplementations = new Map<Tier, Map<string, AnyNode>>()
-  const serviceTiers = new Map<string, Tier>()
-  const visiting = new Set<AnyNode>()
-  const stack: AnyNode[] = []
-  const boundaryVisited = new Map<AnyNode, Set<Tier>>()
-  const boundaryServices = new Map<Tier, Map<string, AnyNode>>()
-
-  const validateBoundary = (node: AnyNode, origin: Tier) => {
-    const checked = boundaryVisited.get(node) ?? new Set<Tier>()
-    boundaryVisited.set(node, checked)
-    if (checked.has(origin)) return false
-    checked.add(origin)
-    const services = boundaryServices.get(origin) ?? new Map<string, AnyNode>()
-    boundaryServices.set(origin, services)
-    const key = node.name
-    const existing = services.get(key)
-    if (existing && existing !== node) {
-      throw new Error(`Tier ${origin} has conflicting implementations for ${key}`)
-    }
-    services.set(key, node)
-    return true
-  }
-
-  const visit = (node: AnyNode, currentTier?: Tier, origins: readonly Tier[] = []) => {
-    if (node.kind === "group") {
-      node.dependencies.forEach((dependency) => visit(dependency, currentTier, origins))
-      return
-    }
-
-    const tier = node.tier ?? untiered
-    if (!indexes.has(tier)) throw new Error(`Node ${node.name} is not in the tier configuration`)
-    const key = node.name
-    const serviceTier = serviceTiers.get(key)
-    if (serviceTier && serviceTier !== tier) {
-      throw new Error(`Service ${key} belongs to both tier ${serviceTier} and tier ${tier}`)
-    }
-    serviceTiers.set(key, tier)
-    const nextOrigins = [...origins]
-    if (currentTier) {
-      const current = indexes.get(currentTier)!
-      const required = indexes.get(tier)!
-      if (required < current) {
-        throw new Error(`Tier ${currentTier} cannot depend on lower tier ${tier}`)
-      }
-      if (required > current) nextOrigins.push(currentTier)
-    }
-    const unseenOrigins = nextOrigins.filter((origin) => validateBoundary(node, origin))
-
-    // A node may need to be emitted more than once because the final output is a
-    // flat list of layers applied with Layer.provideMerge. If another node for
-    // the same service was emitted afterward, this node is no longer the active
-    // implementation for subsequent consumers. Re-emitting restores the intended
-    // implementation ordering while Effect memoization avoids reacquiring the layer.
-    const implementations = activeImplementations.get(tier) ?? new Map<string, AnyNode>()
-    activeImplementations.set(tier, implementations)
-    if (implementations.get(key) === node && unseenOrigins.length === 0) return
-
-    if (visiting.has(node)) {
-      const start = stack.indexOf(node)
-      throw new Error(
-        `Cycle detected in layer graph: ${[...stack.slice(start), node].map((item) => item.name).join(" -> ")}`,
-      )
-    }
-
-    visiting.add(node)
-    stack.push(node)
-    try {
-      node.dependencies.forEach((dependency) => visit(dependency, tier, unseenOrigins))
-      const layers = plans.get(tier) ?? []
-      plans.set(tier, layers)
-      layers.push(replacements.get(node.implementation!) ?? node.implementation!)
-      implementations.set(key, node)
-    } finally {
-      stack.pop()
-      visiting.delete(node)
-    }
-  }
-
-  visit(root)
-  return plans
-}
-
-function requireTier(node: AnyNode, indexes: ReadonlyMap<Tier, number>) {
-  if (!node.tier || !indexes.has(node.tier)) throw new Error(`Node ${node.name} is not in the tier configuration`)
-}
-
 export * as LayerNode from "./layer-node"
@@ -0,0 +1,32 @@
+import { Layer } from "effect"
+import { buildLocationServiceMap, type LocationError, type LocationServices } from "../location-layer"
+import { LocationServiceMap, node as locationServiceMapNode } from "../location-service-map"
+import { LayerNode } from "./layer-node"
+import { LayerNodeTree } from "./layer-node-tree"
+import { makeGlobalNode, tiers } from "./scoped-node"
+
+export function build<A, E>(
+  root: LayerNode.Node<A, E, any>,
+  replacements?: readonly LayerNode.Replacement[],
+): Layer.Layer<LocationServiceMap | A, LocationError | E> {
+  const separated = LayerNodeTree.separate(root, tiers)
+
+  const location = LayerNodeTree.hoist(separated.location, tiers.values.location, tiers)
+
+  const replacementMap = new Map(replacements?.map((item) => [item.source, item.replacement]))
+
+  const locationMap = buildLocationServiceMap(
+    location.node as unknown as LayerNode.Node<LocationServices, LocationError, any>,
+    replacementMap,
+  ).pipe(Layer.provide(LayerNodeTree.compile(location.hoisted, replacementMap)))
+
+  const locationMapNode = makeGlobalNode({ service: LocationServiceMap, layer: locationMap, deps: [] })
+  const globalNode = LayerNodeTree.bind(separated.global, locationServiceMapNode, locationMapNode)
+
+  return LayerNodeTree.compile(globalNode, replacementMap).pipe(Layer.provideMerge(locationMap)) as Layer.Layer<
+    LocationServiceMap | A,
+    LocationError | E
+  >
+}
+
+export * as ScopedNodeBuild from "./scoped-node-build"
@@ -7,7 +7,7 @@ import { and, asc, eq, gt } from "drizzle-orm"
 import { Database } from "./database/database"
 import { EventSequenceTable, EventTable } from "./event/sql"
 import { Location } from "./location"
-import { LayerNode } from "./effect/layer-node"
+import { makeGlobalNode } from "./effect/scoped-node"
 import { isDeepStrictEqual } from "node:util"
 import { Durable } from "@opencode-ai/schema/durable-event-manifest"

@@ -569,6 +569,6 @@ export const layerWith = (options?: LayerOptions) =>
  )

 export const layer = layerWith()
-export const node = LayerNode.make({ service: Service, layer: layer, deps: [Database.node] })
+export const node = makeGlobalNode({ service: Service, layer: layer, deps: [Database.node] })

 export const defaultLayer = layer.pipe(Layer.provide(Database.defaultLayer))
@@ -1,5 +1,6 @@
 export * as FileMutation from "./file-mutation"

+import { makeLocationNode } from "./effect/scoped-node"
 import { Context, Effect, Layer, Schema } from "effect"
 import { dirname } from "path"
 import { KeyedMutex } from "./effect/keyed-mutex"
@@ -192,6 +193,8 @@ function sameBytes(left: Uint8Array, right: Uint8Array) {

 export const locationLayer = layer

+export const node = makeLocationNode({ service: Service, layer, deps: [FSUtil.node] })
+
 /**
 * Deferred until the corresponding V2 integrations exist.
 */
@@ -1,5 +1,6 @@
 export * as FileSystem from "./filesystem"

+import { makeLocationNode } from "./effect/scoped-node"
 import path from "path"
 import { Context, Effect, Layer, Schema } from "effect"
 import { FSUtil } from "./fs-util"
@@ -113,3 +114,9 @@ const baseLayer = Layer.effect(
 export const layer = baseLayer.pipe(Layer.provide(FileSystemSearch.locationLayer), Layer.provide(FSUtil.defaultLayer))

 export const locationLayer = layer
+
+export const node = makeLocationNode({
+  service: Service,
+  layer: baseLayer,
+  deps: [FSUtil.node, Location.node, FileSystemSearch.node],
+})
@@ -1,5 +1,6 @@
 export * as FileSystemSearch from "./search"

+import { makeLocationNode } from "../effect/scoped-node"
 import path from "path"
 import { Context, Effect, Layer, Scope } from "effect"
 import { Fff } from "#fff"
@@ -229,6 +230,8 @@ export const fffLayer = Layer.effect(
  }),
 )

-export const locationLayer = Layer.unwrap(
-  Effect.sync(() => (Flag.OPENCODE_DISABLE_FFF || !Fff.available() ? ripgrepLayer : fffLayer)),
-)
+const layer = Layer.unwrap(Effect.sync(() => (Flag.OPENCODE_DISABLE_FFF || !Fff.available() ? ripgrepLayer : fffLayer)))
+
+export const locationLayer = layer
+
+export const node = makeLocationNode({ service: Service, layer, deps: [FSUtil.node, Location.node, Ripgrep.node] })
@@ -3,6 +3,7 @@ export * as Watcher from "./watcher"
 // @ts-ignore
 import { createWrapper } from "@parcel/watcher/wrapper"
 import type ParcelWatcher from "@parcel/watcher"
+import { makeLocationNode } from "../effect/scoped-node"
 import { Cause, Context, Effect, Layer } from "effect"
 import { FileSystemWatcher } from "@opencode-ai/schema/filesystem-watcher"
 import path from "path"
@@ -133,3 +134,9 @@ export const layer = Layer.effect(
 )

 export const locationLayer = layer.pipe(Layer.provide(Config.locationLayer), Layer.provide(Git.defaultLayer))
+
+export const node = makeLocationNode({
+  service: Service,
+  layer,
+  deps: [FSUtil.node, Location.node, Config.node, Git.node, EventV2.node],
+})
@@ -48,7 +48,6 @@ export const Flag = {

  OPENCODE_WORKSPACE_ID: process.env["OPENCODE_WORKSPACE_ID"],
  OPENCODE_EXPERIMENTAL_WORKSPACES: enabledByExperimental("OPENCODE_EXPERIMENTAL_WORKSPACES"),
-  OPENCODE_EXPERIMENTAL_TAB_SCROLL: enabledByExperimental("OPENCODE_EXPERIMENTAL_TAB_SCROLL"),

  // Evaluated at access time (not module load) because tests, the CLI, and
  // external tooling set these env vars at runtime.
@@ -7,7 +7,7 @@ import { Context, Effect, FileSystem, Layer, Schema } from "effect"
 import type { PlatformError } from "effect/PlatformError"
 import { Glob } from "./util/glob"
 import { serviceUse } from "./effect/service-use"
-import { LayerNode } from "./effect/layer-node"
+import { makeGlobalNode } from "./effect/scoped-node"
 import { filesystem } from "./effect/layer-node-platform"

 export namespace FSUtil {
@@ -201,7 +201,7 @@ export namespace FSUtil {
  )

  export const defaultLayer = layer.pipe(Layer.provide(NodeFileSystem.layer))
-  export const node = LayerNode.make({ service: Service, layer: layer, deps: [filesystem] })
+  export const node = makeGlobalNode({ service: Service, layer: layer, deps: [filesystem] })

  // Pure helpers that don't need Effect (path manipulation, sync operations)
  export function mimeType(p: string): string {
@@ -7,7 +7,7 @@ import { ChildProcess } from "effect/unstable/process"
 import { AbsolutePath, RelativePath } from "./schema"
 import { FSUtil } from "./fs-util"
 import { AppProcess } from "./process"
-import { LayerNode } from "./effect/layer-node"
+import { makeGlobalNode } from "./effect/scoped-node"
 import { File } from "./file"
 import { KeyedMutex } from "./effect/keyed-mutex"

@@ -944,7 +944,7 @@ export const layer = Layer.effect(
 )

 export const defaultLayer = layer.pipe(Layer.provide(FSUtil.defaultLayer), Layer.provide(AppProcess.defaultLayer))
-export const node = LayerNode.make({ service: Service, layer: layer, deps: [FSUtil.node, AppProcess.node] })
+export const node = makeGlobalNode({ service: Service, layer: layer, deps: [FSUtil.node, AppProcess.node] })

 interface Result {
  readonly exitCode: number
@@ -5,7 +5,7 @@ import os from "os"
 import { Context, Effect, Layer } from "effect"
 import { Flock } from "./util/flock"
 import { Flag } from "./flag/flag"
-import { LayerNode } from "./effect/layer-node"
+import { makeGlobalNode } from "./effect/scoped-node"

 const app = "opencode"
 const data = path.join(xdgData!, app)
@@ -77,7 +77,7 @@ export const layer = Layer.effect(
 )

 export const defaultLayer = layer
-export const node = LayerNode.make({ service: Service, layer: layer, deps: [] })
+export const node = makeGlobalNode({ service: Service, layer: layer, deps: [] })

 export const layerWith = (input: Partial<Interface>) =>
  Layer.effect(
@@ -1,5 +1,6 @@
 export * as Image from "./image"

+import { makeLocationNode } from "./effect/scoped-node"
 import { Context, Effect, Layer, Schema } from "effect"
 import { Config } from "./config"
 import { FileSystem } from "./filesystem"
@@ -76,3 +77,5 @@ export const layer = Layer.effect(
 )

 export const locationLayer = layer.pipe(Layer.provide(Config.locationLayer))
+
+export const node = makeLocationNode({ service: Service, layer, deps: [Config.node] })
@@ -9,6 +9,7 @@ import { Location } from "./location"
 import { AbsolutePath } from "./schema"
 import { SystemContext } from "./system-context/index"
 import { SystemContextRegistry } from "./system-context/registry"
+import { makeLocationNode } from "./effect/scoped-node"

 class File extends Schema.Class<File>("InstructionContext.File")({
  path: AbsolutePath,
@@ -87,6 +88,12 @@ export const layer = Layer.effectDiscard(
  }),
 )

+export const node = makeLocationNode({
+  name: "instruction-context",
+  layer,
+  deps: [FSUtil.node, Global.node, Location.node, SystemContextRegistry.node],
+})
+
 function render(files: ReadonlyArray<File>) {
  return files.map((file) => `Instructions from: ${file.path}\n${file.content}`).join("\n\n")
 }
@@ -1,5 +1,6 @@
 export * as Integration from "./integration"

+import { makeLocationNode } from "./effect/scoped-node"
 import {
  Cause,
  Clock,
@@ -515,3 +516,5 @@ export const locationLayer = Layer.effect(
    })
  }),
 )
+
+export const node = makeLocationNode({ service: Service, layer: locationLayer, deps: [Credential.node, EventV2.node] })
@@ -1,151 +1,125 @@
 import { Effect, Layer, LayerMap } from "effect"
-import { Location } from "./location"
-import { Policy } from "./policy"
-import { Config } from "./config"
-import { PluginV2 } from "./plugin"
-import { Catalog } from "./catalog"
-import { Integration } from "./integration"
-import { CommandV2 } from "./command"
 import { AgentV2 } from "./agent"
-import { PluginInternal } from "./plugin/internal"
-import { Project } from "./project"
-import { ProjectCopy } from "./project/copy"
-import { ProjectDirectories } from "./project/directories"
-import { EventV2 } from "./event"
-import { Credential } from "./credential"
-import { Npm } from "./npm"
-import { ModelsDev } from "./models-dev"
-import { FSUtil } from "./fs-util"
-import { Git } from "./git"
-import { Global } from "./global"
-import { Database } from "./database/database"
-import { PermissionV2 } from "./permission"
-import { PermissionSaved } from "./permission/saved"
-import { FileSystem } from "./filesystem"
-import { Ripgrep } from "./ripgrep"
-import { Watcher } from "./filesystem/watcher"
-import { LocationMutation } from "./location-mutation"
+import { AISDK } from "./aisdk"
+import { Catalog } from "./catalog"
+import { CommandV2 } from "./command"
+import { Config } from "./config"
+import { LayerNode } from "./effect/layer-node"
+import { LayerNodeTree } from "./effect/layer-node-tree"
+import { ScopedNode } from "./effect/scoped-node"
 import { FileMutation } from "./file-mutation"
+import { FileSystem } from "./filesystem"
+import { FileSystemSearch } from "./filesystem/search"
+import { Watcher } from "./filesystem/watcher"
+import { Image } from "./image"
+import { Integration } from "./integration"
+import { Location } from "./location"
+import { LocationMutation } from "./location-mutation"
+import { LocationServiceMap } from "./location-service-map"
+import { PermissionV2 } from "./permission"
+import { PluginV2 } from "./plugin"
+import { PluginInternal } from "./plugin/internal"
+import { Policy } from "./policy"
+import { ProjectCopy } from "./project/copy"
+import { Pty } from "./pty"
+import { QuestionV2 } from "./question"
 import { Reference } from "./reference"
 import { ReferenceGuidance } from "./reference/guidance"
-import { RepositoryCache } from "./repository-cache"
-import { Pty } from "./pty"
-import { SkillV2 } from "./skill"
-import { SkillGuidance } from "./skill/guidance"
-import { BuiltInTools } from "./tool/builtins"
-import { Image } from "./image"
-import { ToolRegistry } from "./tool/registry"
-import { ApplicationTools } from "./tool/application-tools"
-import { ToolOutputStore } from "./tool-output-store"
-import { AppProcess } from "./process"
-import { SessionStore } from "./session/store"
-import { SessionTodo } from "./session/todo"
-import { QuestionV2 } from "./question"
-import { LLMClient } from "@opencode-ai/llm"
-import { RequestExecutor } from "@opencode-ai/llm/route"
 import * as SessionRunnerLLM from "./session/runner/llm"
 import { SessionRunnerModel } from "./session/runner/model"
-import { SystemContextBuiltIns } from "./system-context/builtins"
-import { FetchHttpClient } from "effect/unstable/http"
+import { SessionTodo } from "./session/todo"
+import { SkillV2 } from "./skill"
+import { SkillGuidance } from "./skill/guidance"
 import { Snapshot } from "./snapshot"
+import { SystemContextBuiltIns } from "./system-context/builtins"
+import { SystemContextRegistry } from "./system-context/registry"
+import { BuiltInTools } from "./tool/builtins"
+import { ReadToolFileSystem } from "./tool/read-filesystem"
+import { ToolRegistry } from "./tool/registry"
+import { ToolOutputStore } from "./tool-output-store"

-export class LocationServiceMap extends LayerMap.Service<LocationServiceMap>()("@opencode/example/LocationServiceMap", {
-  lookup: (ref: Location.Ref) => {
-    const boot = Layer.effectDiscard(
-      Effect.logInfo("booting location services", { directory: ref.directory, workspaceID: ref.workspaceID }),
-    )
-    const location = Location.layer(ref)
-    const systemContext = SystemContextBuiltIns.locationLayer
-    const base = Layer.mergeAll(
-      location,
-      Policy.locationLayer,
-      Config.locationLayer,
-      Reference.locationLayer,
-      PluginV2.locationLayer,
-      Catalog.locationLayer,
-      Integration.locationLayer,
-      CommandV2.locationLayer,
-      AgentV2.locationLayer,
-      PluginInternal.locationLayer,
-      ProjectCopy.locationLayer,
-      FileSystem.locationLayer,
-      Watcher.locationLayer,
-      Pty.locationLayer,
-      SkillV2.locationLayer,
-      systemContext,
-      LocationMutation.locationLayer.pipe(Layer.orDie),
-    ).pipe(Layer.provideMerge(location))
-    const resources = ToolOutputStore.layer.pipe(Layer.provide(base))
-    const permissionsAndTools = ToolRegistry.layer.pipe(
-      Layer.provideMerge(PermissionV2.locationLayer),
-      Layer.provide(resources),
-      Layer.provide(base),
-    )
-    const services = Layer.mergeAll(base, resources, permissionsAndTools)
-    const image = Image.layer.pipe(Layer.provide(services))
-    const mutation = FileMutation.locationLayer.pipe(Layer.provide(services))
-    const skillGuidance = SkillGuidance.locationLayer.pipe(Layer.provide(services))
-    const referenceGuidance = ReferenceGuidance.locationLayer.pipe(Layer.provide(services))
-    const todos = SessionTodo.layer.pipe(Layer.provide(services))
-    const questions = QuestionV2.locationLayer.pipe(Layer.provide(services))
-    const builtInTools = BuiltInTools.locationLayer.pipe(
-      Layer.provide(services),
-      Layer.provide(mutation),
-      Layer.provide(resources),
-      Layer.provide(todos),
-      Layer.provide(questions),
-      Layer.provide(image),
-    )
-    const model = SessionRunnerModel.locationLayer.pipe(Layer.provide(services))
-    const snapshot = Snapshot.locationLayer.pipe(Layer.provide(services))
-    const runner = SessionRunnerLLM.defaultLayer.pipe(
-      Layer.provide(services),
-      Layer.provide(model),
-      Layer.provide(skillGuidance),
-      Layer.provide(referenceGuidance),
-      Layer.provide(snapshot),
-    )
+export { LocationServiceMap, node } from "./location-service-map"

-    // Kick off a background project copy refresh to update locations now that we
-    // have a location
-    const projectCopyRefresh = Layer.effectDiscard(ProjectCopy.refreshAfterBoot).pipe(Layer.provide(services))
+export const locationServices = LayerNode.group([
+  Location.node,
+  Policy.node,
+  Config.node,
+  AgentV2.node,
+  CommandV2.node,
+  Reference.node,
+  Integration.node,
+  Catalog.node,
+  AISDK.node,
+  PluginV2.node,
+  PluginInternal.node,
+  ProjectCopy.node,
+  ProjectCopy.refreshNode,
+  FileSystemSearch.node,
+  FileSystem.node,
+  Watcher.node,
+  Pty.node,
+  SkillV2.node,
+  SystemContextRegistry.node,
+  SystemContextBuiltIns.node,
+  LocationMutation.node,
+  FileMutation.node,
+  PermissionV2.node,
+  ToolOutputStore.node,
+  ToolRegistry.node,
+  ToolRegistry.toolsNode,
+  Image.node,
+  SkillGuidance.node,
+  ReferenceGuidance.node,
+  SessionTodo.node,
+  QuestionV2.node,
+  ReadToolFileSystem.node,
+  BuiltInTools.node,
+  SessionRunnerModel.node,
+  Snapshot.node,
+  SessionRunnerLLM.node,
+])

-    return Layer.mergeAll(
-      boot,
-      services,
-      image,
-      mutation,
-      resources,
-      todos,
-      questions,
-      model,
-      snapshot,
-      runner,
-      builtInTools,
-      referenceGuidance,
-      projectCopyRefresh,
-    ).pipe(Layer.fresh)
-  },
-  idleTimeToLive: "60 minutes",
-  dependencies: [
-    Project.defaultLayer,
-    EventV2.defaultLayer,
-    Credential.defaultLayer,
-    Npm.defaultLayer,
-    ModelsDev.defaultLayer,
-    FSUtil.defaultLayer,
-    Git.defaultLayer,
-    AppProcess.defaultLayer,
-    Global.defaultLayer,
-    Ripgrep.defaultLayer,
-    Database.defaultLayer,
-    ProjectDirectories.defaultLayer,
-    SessionStore.layer.pipe(Layer.provide(Database.defaultLayer)),
-    PermissionSaved.defaultLayer,
-    RepositoryCache.defaultLayer,
-    LLMClient.layer.pipe(Layer.provide(RequestExecutor.defaultLayer)),
-    FetchHttpClient.layer,
-    ToolOutputStore.defaultCleanupLayer,
-    ApplicationTools.layer,
-  ],
-}) {}
+type NodeOutput<N> = N extends LayerNode.Node<infer A, unknown, any> ? A : never
+type NodeError<N> = N extends LayerNode.Node<unknown, infer E, any> ? E : never
+export type LocationServices = NodeOutput<typeof locationServices>
+export type LocationError = NodeError<typeof locationServices>
+export type LocationTierServices = Exclude<LocationServices, Location.Service>
+
+export function buildLocationServiceMap(
+  location: LayerNode.Node<LocationServices, LocationError, any>,
+  replacements?: ReadonlyMap<Layer.Any, Layer.Any>,
+): Layer.Layer<LocationServiceMap, LocationError> {
+  return Layer.effect(
+    LocationServiceMap,
+    LayerMap.make(
+      (ref: Location.Ref) => {
+        const layer = LayerNodeTree.compile(
+          LayerNodeTree.bind(location, Location.node, Location.boundNode(ref)),
+          replacements,
+        ) as Layer.Layer<LocationServices, LocationError>
+        return layer.pipe(
+          Layer.fresh,
+          Layer.tap(() =>
+            Effect.logInfo("booting location services", {
+              directory: ref.directory,
+              workspaceID: ref.workspaceID,
+            }),
+          ),
+        )
+      },
+      { idleTimeToLive: "60 minutes" },
+    ),
+  )
+}
+
+// This is temporary for backwards compatibility
+const separatedLocationServices = LayerNodeTree.separate(locationServices, ScopedNode.tiers)
+const hoistedLocationServices = LayerNodeTree.hoist(
+  separatedLocationServices.location,
+  ScopedNode.tiers.values.location,
+  ScopedNode.tiers,
+)
+
+export const locationServiceMapLayer = buildLocationServiceMap(
+  hoistedLocationServices.node as LayerNode.Node<LocationServices, LocationError, any>,
+).pipe(Layer.provide(LayerNodeTree.compile(hoistedLocationServices.hoisted))) as Layer.Layer<LocationServiceMap>
@@ -1,5 +1,6 @@
 export * as LocationMutation from "./location-mutation"

+import { makeLocationNode } from "./effect/scoped-node"
 import path from "path"
 import { Context, Effect, Layer, Schema } from "effect"
 import { FSUtil } from "./fs-util"
@@ -153,3 +154,9 @@ export const layer = Layer.effect(
 )

 export const locationLayer = layer
+
+export const node = makeLocationNode({
+  service: Service,
+  layer: layer.pipe(Layer.orDie),
+  deps: [FSUtil.node, Location.node],
+})
@@ -0,0 +1,16 @@
+import { Context, Effect, Layer, LayerMap } from "effect"
+import { LayerNode } from "./effect/layer-node"
+import { ScopedNode } from "./effect/scoped-node"
+import { Location } from "./location"
+import type { LocationError, LocationServices } from "./location-layer"
+
+export class LocationServiceMap extends Context.Service<
+  LocationServiceMap,
+  LayerMap.LayerMap<Location.Ref, LocationServices, LocationError>
+>()("@opencode/example/LocationServiceMap") {
+  static get(ref: Location.Ref) {
+    return Layer.unwrap(Effect.map(LocationServiceMap, (locations) => locations.get(ref)))
+  }
+}
+
+export const node = LayerNode.unbound(LocationServiceMap, ScopedNode.tiers.values.global)
@@ -1,6 +1,8 @@
 import { Context, Effect, Layer } from "effect"
 import { Info, Ref, response } from "@opencode-ai/schema/location"
 import { Project } from "./project"
+import { LayerNode } from "./effect/layer-node"
+import { makeLocationNode, tiers } from "./effect/scoped-node"

 export * as Location from "./location"

@@ -12,6 +14,8 @@ export interface Interface extends Info {

 export class Service extends Context.Service<Service, Interface>()("@opencode/Location") {}

+export const node = LayerNode.unbound(Service, tiers.values.location)
+
 export const layer = (ref: Ref) =>
  Layer.effect(
    Service,
@@ -26,3 +30,10 @@ export const layer = (ref: Ref) =>
      })
    }),
  )
+
+export const boundNode = (ref: Ref) =>
+  makeLocationNode({
+    service: Service,
+    layer: layer(ref),
+    deps: [Project.node],
+  })
@@ -9,7 +9,7 @@ import { Hash } from "./util/hash"
 import { FSUtil } from "./fs-util"
 import { InstallationChannel, InstallationVersion } from "./installation/version"
 import { EventV2 } from "./event"
-import { LayerNode } from "./effect/layer-node"
+import { makeGlobalNode } from "./effect/scoped-node"
 import { httpClient } from "./effect/layer-node-platform"

 export const CatalogModelStatus = Schema.Literals(["alpha", "beta", "deprecated"])
@@ -244,6 +244,6 @@ export const defaultLayer = layer.pipe(
  Layer.provide(FSUtil.defaultLayer),
  Layer.provide(EventV2.defaultLayer),
 )
-export const node = LayerNode.make({ service: Service, layer: layer, deps: [FSUtil.node, EventV2.node, httpClient] })
+export const node = makeGlobalNode({ service: Service, layer: layer, deps: [FSUtil.node, EventV2.node, httpClient] })

 export * as ModelsDev from "./models-dev"
@@ -7,7 +7,7 @@ import { NodeFileSystem } from "@effect/platform-node"
 import { FSUtil } from "./fs-util"
 import { Global } from "./global"
 import { EffectFlock } from "./util/effect-flock"
-import { LayerNode } from "./effect/layer-node"
+import { makeGlobalNode } from "./effect/scoped-node"
 import { filesystem } from "./effect/layer-node-platform"
 import { makeRuntime } from "./effect/runtime"
 import { NpmConfig } from "./npm-config"
@@ -253,7 +253,7 @@ export const defaultLayer = layer.pipe(
  Layer.provide(Global.layer),
  Layer.provide(NodeFileSystem.layer),
 )
-export const node = LayerNode.make({
+export const node = makeGlobalNode({
  service: Service,
  layer: layer,
  deps: [FSUtil.node, Global.node, filesystem, EffectFlock.node],
@@ -1,276 +0,0 @@
-// Branded HTML pages for local OAuth callback servers.
-//
-// These are served by the loopback HTTP servers that finish an OAuth exchange
-// (MCP, Codex/ChatGPT, xAI, Snowflake, DigitalOcean, ...). The functions return
-// a fully self-contained HTML string with no external assets, so they work
-// offline and drop into any transport (`res.end(...)`, Effect `response.end`,
-// etc.).
-//
-// The visual language mirrors the OpenCode app: the design tokens are a curated
-// subset of the OC-2 semantic tokens in `packages/ui/src/styles/theme.css`, and
-// the wordmark is the same geometry as `packages/ui/src/components/logo.tsx`.
-// Keep this file in sync with those sources when the brand changes.
-
-export interface CallbackPageOptions {
-  /** Friendly integration name shown as a subtitle, e.g. "xAI", "Snowflake", "MCP". */
-  provider?: string
-  /** Attempt to close the window shortly after success. Defaults to true. */
-  autoClose?: boolean
-}
-
-export function success(options?: CallbackPageOptions) {
-  const provider = options?.provider
-  return renderDocument({
-    title: "Authorization successful",
-    body: renderCard({
-      status: "success",
-      headline: "Authorization successful",
-      message: provider ? `OpenCode is now connected to ${escapeHtml(provider)}.` : "OpenCode is now authorized.",
-      footnote: "You can close this window.",
-    }),
-    script: options?.autoClose === false ? undefined : AUTO_CLOSE_SCRIPT,
-  })
-}
-
-export function error(detail: string, options?: CallbackPageOptions) {
-  const provider = options?.provider
-  return renderDocument({
-    title: "Authorization failed",
-    body: renderCard({
-      status: "error",
-      headline: "Authorization failed",
-      message: provider
-        ? `OpenCode couldn't finish connecting to ${escapeHtml(provider)}.`
-        : "OpenCode couldn't complete authorization.",
-      detail,
-      footnote: "Close this window and try again from OpenCode.",
-    }),
-  })
-}
-
-export interface BootstrapOptions {
-  /** Same-origin path the in-browser script POSTs the parsed callback to. */
-  tokenPath: string
-  provider?: string
-}
-
-// For flows where the credential arrives in the URL fragment (implicit grant),
-// the browser must relay it back to the loopback server. This renders a pending
-// page whose script reads the fragment, POSTs it to `tokenPath`, then resolves
-// to the success or error state in place.
-export function bootstrap(options: BootstrapOptions) {
-  return renderDocument({
-    title: "Finishing sign-in",
-    body: renderCard({
-      status: "pending",
-      headline: "Finishing sign-in",
-      message: options.provider
-        ? `Completing your ${escapeHtml(options.provider)} authorization.`
-        : "Completing authorization.",
-      footnote: "You can close this window once sign-in finishes.",
-    }),
-    script: bootstrapScript(options),
-  })
-}
-
-export * as OauthCallbackPage from "./page"
-
-type Status = "pending" | "success" | "error"
-
-function renderCard(input: { status: Status; headline: string; message: string; detail?: string; footnote: string }) {
-  const detail = input.detail?.trim()
-  return `<main class="card" id="oc-card" data-status="${input.status}" role="status" aria-live="polite">
-      <div class="brand">${WORDMARK}</div>
-      <div class="status" aria-hidden="true">
-        <span class="icon icon-pending">${ICON_SPINNER}</span>
-        <span class="icon icon-success">${ICON_CHECK}</span>
-        <span class="icon icon-error">${ICON_CROSS}</span>
-      </div>
-      <h1 class="headline" id="oc-headline">${escapeHtml(input.headline)}</h1>
-      <p class="message" id="oc-message">${input.message}</p>
-      <pre class="detail" id="oc-detail"${detail ? "" : " hidden"}>${detail ? escapeHtml(detail) : ""}</pre>
-      <p class="footnote" id="oc-footnote">${escapeHtml(input.footnote)}</p>
-    </main>`
-}
-
-function renderDocument(input: { title: string; body: string; script?: string }) {
-  return `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="robots" content="noindex" />
-    <title>${escapeHtml(input.title)} · OpenCode</title>
-    <style>${STYLES}</style>
-  </head>
-  <body>
-    ${input.body}${input.script ? `\n    <script>${input.script}</script>` : ""}
-  </body>
-</html>`
-}
-
-const AUTO_CLOSE_SCRIPT = `setTimeout(function(){try{window.close()}catch(e){}},2500)`
-
-function bootstrapScript(options: BootstrapOptions) {
-  return `var PROVIDER=${scriptString(options.provider ?? "")};
-var TOKEN_URL=new URL(${scriptString(options.tokenPath)},window.location.origin).href;
-(function(){
-  var card=document.getElementById("oc-card"),headline=document.getElementById("oc-headline"),message=document.getElementById("oc-message"),detail=document.getElementById("oc-detail"),footnote=document.getElementById("oc-footnote");
-  function fail(text){card.dataset.status="error";headline.textContent="Authorization failed";message.textContent=PROVIDER?("OpenCode couldn't finish connecting to "+PROVIDER+"."):"OpenCode couldn't complete authorization.";if(text){detail.textContent=text;detail.hidden=false}footnote.textContent="Close this window and try again from OpenCode."}
-  function ok(){card.dataset.status="success";headline.textContent="Authorization successful";message.textContent=PROVIDER?("OpenCode is now connected to "+PROVIDER+"."):"OpenCode is now authorized.";detail.hidden=true;footnote.textContent="You can close this window.";setTimeout(function(){try{window.close()}catch(e){}},2500)}
-  try{
-    var hash=new URLSearchParams((window.location.hash||"").slice(1));
-    var search=new URLSearchParams(window.location.search||"");
-    var err=hash.get("error")||search.get("error");
-    var errDescription=hash.get("error_description")||search.get("error_description");
-    var body=err?{error:err,error_description:errDescription||""}:{access_token:hash.get("access_token")||"",expires_in:hash.get("expires_in")||"0",state:hash.get("state")||""};
-    fetch(TOKEN_URL,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(body)}).then(function(res){
-      if(!res.ok)return res.text().catch(function(){return""}).then(function(t){throw new Error(t||("callback failed ("+res.status+")"))});
-      if(err){fail(errDescription||err);return}
-      ok();
-    }).catch(function(e){fail(String(e&&e.message?e.message:e))});
-  }catch(e){fail(String(e&&e.message?e.message:e))}
-})()`
-}
-
-function scriptString(value: string) {
-  return JSON.stringify(value).replaceAll("<", "\\u003c")
-}
-
-function escapeHtml(value: string) {
-  return value
-    .replaceAll("&", "&amp;")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;")
-    .replaceAll("'", "&#39;")
-}
-
-// Curated subset of OC-2 tokens (packages/ui/src/styles/theme.css). Default is
-// light; dark applies via prefers-color-scheme. The [data-theme] selectors let a
-// host force a scheme without changing the default.
-const LIGHT_VARS = `
-    --oc-bg: #f8f8f8;
-    --oc-card: #fcfcfc;
-    --oc-text-strong: #171717;
-    --oc-text-base: #6f6f6f;
-    --oc-text-weak: #8f8f8f;
-    --oc-border-weak: #e5e5e5;
-    --oc-icon-strong: #171717;
-    --oc-icon-base: #8f8f8f;
-    --oc-icon-weak: #dbdbdb;
-    --oc-success: #2dba26;
-    --oc-error: #ed4831;
-    --oc-detail-bg: #fff8f6;
-    --oc-detail-border: #fdc3b7;
-    --oc-shadow: 0 16px 48px -6px rgba(0,0,0,.10), 0 6px 12px -2px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.06);`
-
-const DARK_VARS = `
-    --oc-bg: #101010;
-    --oc-card: #161616;
-    --oc-text-strong: rgba(255,255,255,.936);
-    --oc-text-base: rgba(255,255,255,.618);
-    --oc-text-weak: rgba(255,255,255,.422);
-    --oc-border-weak: #282828;
-    --oc-icon-strong: #ededed;
-    --oc-icon-base: #7e7e7e;
-    --oc-icon-weak: #343434;
-    --oc-success: #12c905;
-    --oc-error: #fc533a;
-    --oc-detail-bg: #28110c;
-    --oc-detail-border: #6a1206;
-    --oc-shadow: 0 16px 48px -6px rgba(0,0,0,.55), 0 6px 12px -2px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4);`
-
-const STYLES = `
-  :root { color-scheme: light dark;${LIGHT_VARS}
-    --oc-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    --oc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  }
-  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {${DARK_VARS} } }
-  :root[data-theme="dark"] {${DARK_VARS} }
-  :root[data-theme="light"] {${LIGHT_VARS} }
-
-  * { box-sizing: border-box; }
-  html, body { margin: 0; height: 100%; }
-  body {
-    min-height: 100vh;
-    display: grid;
-    place-items: center;
-    padding: 24px;
-    background: var(--oc-bg);
-    color: var(--oc-text-base);
-    font-family: var(--oc-font-sans);
-    line-height: 1.5;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-  }
-  .card {
-    width: min(100%, 28rem);
-    padding: 2.25rem 2rem 1.75rem;
-    background: var(--oc-card);
-    border: 1px solid var(--oc-border-weak);
-    border-radius: 14px;
-    box-shadow: var(--oc-shadow);
-    text-align: center;
-  }
-  .brand { display: flex; justify-content: center; margin-bottom: 1.75rem; }
-  .brand svg { height: 19px; width: auto; }
-  .status { display: flex; justify-content: center; margin-bottom: 1.125rem; }
-  .icon { display: none; line-height: 0; }
-  .icon svg { display: block; }
-  .card[data-status="pending"] .icon-pending,
-  .card[data-status="success"] .icon-success,
-  .card[data-status="error"] .icon-error { display: block; }
-  .icon-success { color: var(--oc-success); }
-  .icon-error { color: var(--oc-error); }
-  .icon-pending { color: var(--oc-text-weak); }
-  .headline { margin: 0; font-size: 1.1875rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.012em; color: var(--oc-text-strong); }
-  .message { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--oc-text-base); }
-  .detail {
-    margin: 1.25rem 0 0;
-    padding: 0.75rem 0.875rem;
-    text-align: left;
-    font-family: var(--oc-font-mono);
-    font-size: 0.8125rem;
-    line-height: 1.55;
-    color: var(--oc-text-strong);
-    background: var(--oc-detail-bg);
-    border: 1px solid var(--oc-detail-border);
-    border-radius: 8px;
-    white-space: pre-wrap;
-    word-break: break-word;
-    max-height: 9.5rem;
-    overflow: auto;
-  }
-  .detail[hidden] { display: none; }
-  .footnote { margin: 1.5rem 0 0; font-size: 0.8125rem; color: var(--oc-text-weak); }
-  .spinner { animation: oc-spin 0.8s linear infinite; transform-origin: center; }
-  @keyframes oc-spin { to { transform: rotate(360deg); } }
-  @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
-`
-
-// OpenCode wordmark — same path geometry as packages/ui/src/components/logo.tsx (Logo).
-const WORDMARK = `<svg class="wordmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234 42" fill="none" aria-label="OpenCode" role="img">
-        <path d="M18 30H6V18H18V30Z" fill="var(--oc-icon-weak)" />
-        <path d="M18 12H6V30H18V12ZM24 36H0V6H24V36Z" fill="var(--oc-icon-base)" />
-        <path d="M48 30H36V18H48V30Z" fill="var(--oc-icon-weak)" />
-        <path d="M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z" fill="var(--oc-icon-base)" />
-        <path d="M84 24V30H66V24H84Z" fill="var(--oc-icon-weak)" />
-        <path d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="var(--oc-icon-base)" />
-        <path d="M108 36H96V18H108V36Z" fill="var(--oc-icon-weak)" />
-        <path d="M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z" fill="var(--oc-icon-base)" />
-        <path d="M144 30H126V18H144V30Z" fill="var(--oc-icon-weak)" />
-        <path d="M144 12H126V30H144V36H120V6H144V12Z" fill="var(--oc-icon-strong)" />
-        <path d="M168 30H156V18H168V30Z" fill="var(--oc-icon-weak)" />
-        <path d="M168 12H156V30H168V12ZM174 36H150V6H174V36Z" fill="var(--oc-icon-strong)" />
-        <path d="M198 30H186V18H198V30Z" fill="var(--oc-icon-weak)" />
-        <path d="M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z" fill="var(--oc-icon-strong)" />
-        <path d="M234 24V30H216V24H234Z" fill="var(--oc-icon-weak)" />
-        <path d="M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z" fill="var(--oc-icon-strong)" />
-      </svg>`
-
-const ICON_CHECK = `<svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9" /><path d="m8.5 12.5 2.4 2.4 4.6-5.4" /></svg>`
-
-const ICON_CROSS = `<svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9" /><path d="m9 9 6 6m0-6-6 6" /></svg>`
-
-const ICON_SPINNER = `<svg class="spinner" viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9" opacity="0.2" /><path d="M21 12a9 9 0 0 0-9-9" /></svg>`
@@ -1,5 +1,6 @@
 export * as PermissionV2 from "./permission"

+import { makeLocationNode } from "./effect/scoped-node"
 import { Context, Deferred, Effect as EffectRuntime, Layer, Schema } from "effect"
 import { Permission } from "@opencode-ai/schema/permission"
 import { EventV2 } from "./event"
@@ -300,3 +301,9 @@ export const layer = Layer.effect(
 )

 export const locationLayer = layer.pipe(Layer.provideMerge(AgentV2.locationLayer))
+
+export const node = makeLocationNode({
+  service: Service,
+  layer,
+  deps: [EventV2.node, Location.node, AgentV2.node, SessionStore.node, PermissionSaved.node],
+})
@@ -3,6 +3,7 @@ export * as PermissionSaved from "./saved"
 import { eq } from "drizzle-orm"
 import { Context, Effect, Layer, Schema } from "effect"
 import { Database } from "../database/database"
+import { makeGlobalNode } from "../effect/scoped-node"
 import { ProjectV2 } from "../project"
 import { PermissionTable } from "./sql"
 import { PermissionSaved } from "@opencode-ai/schema/permission-saved"
@@ -76,3 +77,5 @@ export const layer = Layer.effect(
 )

 export const defaultLayer = layer.pipe(Layer.provide(Database.defaultLayer))
+
+export const node = makeGlobalNode({ service: Service, layer, deps: [Database.node] })
@@ -1,5 +1,6 @@
 export * as PluginV2 from "./plugin"

+import { makeLocationNode } from "./effect/scoped-node"
 import { Context, Deferred, Effect, Exit, Layer, Scope } from "effect"
 import type { Plugin as PluginRuntime } from "@opencode-ai/plugin/v2/effect"
 import { Plugin } from "@opencode-ai/schema/plugin"
@@ -150,3 +151,18 @@ export const locationLayer = layer.pipe(
  Layer.provideMerge(Reference.locationLayer),
  Layer.provideMerge(SkillV2.locationLayer),
 )
+
+export const node = makeLocationNode({
+  service: Service,
+  layer,
+  deps: [
+    EventV2.node,
+    AgentV2.node,
+    AISDK.node,
+    Catalog.node,
+    CommandV2.node,
+    Integration.node,
+    Reference.node,
+    SkillV2.node,
+  ],
+})
@@ -1,5 +1,7 @@
 export * as PluginInternal from "./internal"

+import { makeLocationNode } from "../effect/scoped-node"
+import { httpClient } from "../effect/layer-node-platform"
 import type { PluginContext } from "@opencode-ai/plugin/v2/effect"
 import { Effect, Layer, Scope } from "effect"
 import { AgentV2 } from "../agent"
@@ -57,7 +59,7 @@ export function define<R>(plugin: Plugin<R>) {
  return plugin
 }

-export const locationLayer = Layer.effectDiscard(
+const layer = Layer.effectDiscard(
  Effect.gen(function* () {
    const catalog = yield* Catalog.Service
    const commands = yield* CommandV2.Service
@@ -117,9 +119,34 @@ export const locationLayer = Layer.effectDiscard(
      yield* add(VariantPlugin.Plugin)
    }).pipe(Effect.withSpan("PluginInternal.boot"), Effect.forkScoped({ startImmediately: true }))
  }),
-).pipe(
+)
+
+export const locationLayer = layer.pipe(
  Layer.provideMerge(PluginV2.locationLayer),
  Layer.provideMerge(Config.locationLayer),
  Layer.provideMerge(FileSystem.locationLayer),
  Layer.provideMerge(FetchHttpClient.layer),
 )
+
+export const node = makeLocationNode({
+  name: "plugin-internal",
+  layer,
+  deps: [
+    Catalog.node,
+    CommandV2.node,
+    PluginV2.node,
+    Integration.node,
+    AgentV2.node,
+    Config.node,
+    Location.node,
+    ModelsDev.node,
+    Npm.node,
+    EventV2.node,
+    FSUtil.node,
+    FileSystem.node,
+    Global.node,
+    httpClient,
+    SkillV2.node,
+    Reference.node,
+  ],
+})
@@ -7,7 +7,6 @@ import { Credential } from "../../credential"
 import { InstallationVersion } from "../../installation/version"
 import { Integration } from "../../integration"
 import { ModelV2 } from "../../model"
-import { OauthCallbackPage } from "../../oauth/page"
 import { ProviderV2 } from "../../provider"
 import type { PluginInternal } from "../internal"

@@ -59,21 +58,17 @@ const browser = {
        const value = url.searchParams.get("code")
        if (error) {
          Effect.runFork(Deferred.fail(code, new Error(error)))
-          response
-            .writeHead(400, { "Content-Type": "text/html" })
-            .end(OauthCallbackPage.error(error, { provider: "ChatGPT" }))
+          response.writeHead(400, { "Content-Type": "text/html" }).end(errorPage(error))
          return
        }
        if (!value || url.searchParams.get("state") !== state) {
          const message = value ? "Invalid OAuth state" : "Missing authorization code"
          Effect.runFork(Deferred.fail(code, new Error(message)))
-          response
-            .writeHead(400, { "Content-Type": "text/html" })
-            .end(OauthCallbackPage.error(message, { provider: "ChatGPT" }))
+          response.writeHead(400, { "Content-Type": "text/html" }).end(errorPage(message))
          return
        }
        Effect.runFork(Deferred.succeed(code, value))
-        response.writeHead(200, { "Content-Type": "text/html" }).end(OauthCallbackPage.success({ provider: "ChatGPT" }))
+        response.writeHead(200, { "Content-Type": "text/html" }).end(successPage)
      })
      yield* Effect.callback<void, Error>((resume) => {
        server.once("error", (error) => resume(Effect.fail(error)))
@@ -290,3 +285,8 @@ function claim(token: string) {
    return
  }
 }
+
+const successPage =
+  "<!doctype html><title>OpenCode</title><h1>Authorization successful</h1><p>You can close this window.</p>"
+const errorPage = (message: string) =>
+  `<!doctype html><title>OpenCode</title><h1>Authorization failed</h1><p>${message.replace(/[&<>"']/g, "")}</p>`
@@ -1,5 +1,6 @@
 export * as Policy from "./policy"

+import { makeLocationNode } from "./effect/scoped-node"
 import { Context, Effect as EffectRuntime, Layer, Schema } from "effect"
 import { Wildcard } from "./util/wildcard"
 import { Location } from "./location"
@@ -44,3 +45,5 @@ export const layer = Layer.effect(
 )

 export const locationLayer = layer
+
+export const node = makeLocationNode({ service: Service, layer, deps: [Location.node] })
@@ -3,7 +3,7 @@ import type { PlatformError } from "effect/PlatformError"
 import { ChildProcess } from "effect/unstable/process"
 import { ChildProcessSpawner } from "effect/unstable/process/ChildProcessSpawner"
 import { CrossSpawnSpawner } from "./cross-spawn-spawner"
-import { LayerNode } from "./effect/layer-node"
+import { makeGlobalNode } from "./effect/scoped-node"

 export class AppProcessError extends Schema.TaggedErrorClass<AppProcessError>()("AppProcessError", {
  command: Schema.String,
@@ -238,6 +238,6 @@ export const layer = Layer.effect(
 )

 export const defaultLayer = layer.pipe(Layer.provide(CrossSpawnSpawner.defaultLayer))
-export const node = LayerNode.make({ service: Service, layer: layer, deps: [CrossSpawnSpawner.node] })
+export const node = makeGlobalNode({ service: Service, layer: layer, deps: [CrossSpawnSpawner.node] })

 export * as AppProcess from "./process"
@@ -6,7 +6,7 @@ import path from "path"
 import { AbsolutePath } from "./schema"
 import { FSUtil } from "./fs-util"
 import { Git } from "./git"
-import { LayerNode } from "./effect/layer-node"
+import { makeGlobalNode } from "./effect/scoped-node"
 import { Hash } from "./util/hash"
 import { ProjectDirectories } from "./project/directories"
 import { ProjectSchema } from "./project/schema"
@@ -134,7 +134,7 @@ export const defaultLayer = layer.pipe(
  Layer.provide(Git.defaultLayer),
  Layer.provideMerge(ProjectDirectories.defaultLayer),
 )
-export const node = LayerNode.make({
+export const node = makeGlobalNode({
  service: Service,
  layer: layer,
  deps: [FSUtil.node, Git.node, ProjectDirectories.node],
@@ -5,7 +5,7 @@ import path from "path"
 import { AbsolutePath } from "../schema"
 import { FSUtil } from "../fs-util"
 import { Git } from "../git"
-import { LayerNode } from "../effect/layer-node"
+import { makeLocationNode } from "../effect/scoped-node"
 import { Project } from "../project"
 import { ProjectDirectories } from "./directories"
 import { makeGitWorktreeStrategy } from "./copy-strategies"
@@ -279,8 +279,14 @@ export const layer = Layer.effect(
 )

 export const locationLayer = layer
-export const node = LayerNode.make({
+export const node = makeLocationNode({
  service: Service,
  layer: layer,
  deps: [FSUtil.node, Git.node, ProjectDirectories.node, EventV2.node, Database.node],
 })
+
+export const refreshNode = makeLocationNode({
+  name: "project-copy-refresh",
+  layer: Layer.effectDiscard(refreshAfterBoot),
+  deps: [node, Location.node],
+})
@@ -3,7 +3,7 @@ export * as ProjectDirectories from "./directories"
 import { and, asc, desc, eq, isNotNull, isNull, ne, or } from "drizzle-orm"
 import { Context, Effect, Layer, Schema } from "effect"
 import { Database } from "../database/database"
-import { LayerNode } from "../effect/layer-node"
+import { makeGlobalNode } from "../effect/scoped-node"
 import { AbsolutePath, optional } from "../schema"
 import { ProjectSchema } from "./schema"
 import { ProjectDirectoryTable } from "./sql"
@@ -156,4 +156,4 @@ export const layer = Layer.effect(
 )

 export const defaultLayer = layer.pipe(Layer.provide(Database.defaultLayer))
-export const node = LayerNode.make({ service: Service, layer: layer, deps: [Database.node] })
+export const node = makeGlobalNode({ service: Service, layer: layer, deps: [Database.node] })
@@ -1,5 +1,6 @@
 export * as Pty from "./pty"

+import { makeLocationNode } from "./effect/scoped-node"
 import type { Disp, Proc } from "#pty"
 import { Context, Effect, Layer, Schema, Types } from "effect"
 import { Pty } from "@opencode-ai/schema/pty"
@@ -313,3 +314,5 @@ export const layer = Layer.effect(
 )

 export const locationLayer = layer.pipe(Layer.provide(Config.locationLayer))
+
+export const node = makeLocationNode({ service: Service, layer, deps: [EventV2.node, Location.node, Config.node] })
--- a/Show More
+++ b/Show More