fix(app): bind provider query client

refactor(app): extract provider connection controller
2026-07-28 06:02:05 -04:00 · 2026-07-28 15:02:30 +08:00 · 2026-07-28 15:02:30 +08:00
39 changed files with 1287 additions and 1845 deletions
@@ -1,8 +1,8 @@
 {
  "nodeModules": {
-    "x86_64-linux": "sha256-TJg4wSxeEUqsmSjVt5kGmygCzKISN0uhk+HXDNMqWZw=",
-    "aarch64-linux": "sha256-W1hM9pmrIFJafrbNlV4anP+j1xEBBGSYpvMyW7Kdx5k=",
-    "aarch64-darwin": "sha256-EVhn24RmSNth2J0UzkvbuHfd9fliHzb6al7p3RJWYF8=",
-    "x86_64-darwin": "sha256-r9kxGH3Sl/BDWZao6yuJhsltlMIZ0q25NdLSyLQi9HI="
+    "x86_64-linux": "sha256-RFek0QoEEjsgbqmTE/SxQAmPtYyzs0IPR2ugFn5Okrs=",
+    "aarch64-linux": "sha256-BmAxapY1YrAFn7mVq3/6A9+6Au5UIvSqBboHMkyJH3I=",
+    "aarch64-darwin": "sha256-Sx3bGWQqLlgoa/RudJxanjSzhFRNklckT2ffnO2I5F4=",
+    "x86_64-darwin": "sha256-CMOhiisHNowg06qadvgg4K+60zrynglwiT0qKYQ4NiA="
  }
 }
@@ -1,4 +1,3 @@
-import type { IntegrationMethod, IntegrationOauthConnectOutput } from "@opencode-ai/client/promise"
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
@@ -13,21 +12,9 @@ import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { DialogBody, DialogHeader, DialogTitle, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { showToast } from "@/utils/toast"
-import {
-  type Accessor,
-  type Component,
-  createEffect,
-  createMemo,
-  createResource,
-  createUniqueId,
-  For,
-  Match,
-  onCleanup,
-  onMount,
-  Show,
-  Switch,
-} from "solid-js"
-import { createStore, produce } from "solid-js/store"
+import { type Accessor, type Component, createMemo, createUniqueId, For, Match, onMount, Show, Switch } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useQueryClient } from "@tanstack/solid-query"
 import { useParams } from "@solidjs/router"
 import { Link } from "@/components/link"
 import { useServerSDK } from "@/context/server-sdk"
@@ -37,10 +24,10 @@ import { useSettings } from "@/context/settings"
 import { popularProviders, useProviders } from "@/hooks/use-providers"
 import { CustomProviderForm } from "./dialog-custom-provider"
 import { decode64 } from "@/utils/base64"
+import { pathKey } from "@/utils/path-key"
+import { createProviderConnectionController } from "./provider-connection-controller"

 const CUSTOM_ID = "_custom"
-type ConnectMethod = Extract<IntegrationMethod, { type: "key" | "oauth" }>
-
 export function useProviderConnectController(options: { onBack?: () => void } = {}) {
  const [store, setStore] = createStore({ selected: undefined as string | undefined })
  const reset = () => setStore("selected", undefined)
@@ -384,118 +371,91 @@ function ProviderConnection(props: {
  const dialog = useDialog()
  const serverSync = useServerSync()
  const serverSDK = useServerSDK()
+  const queryClient = useQueryClient()
  const params = useParams()
  const language = useLanguage()
  const settings = useSettings()
  const newLayout = settings.general.newLayoutDesigns
  const providers = useProviders(() => props.directory?.())
  const directory = () => props.directory?.() ?? decode64(params.dir)
-  const location = () => {
-    const value = directory()
-    return value ? { directory: value } : undefined
-  }
-
-  const alive = { value: true }
-  const timer = { current: undefined as ReturnType<typeof setTimeout> | undefined }
-
-  onCleanup(() => {
-    alive.value = false
-    if (timer.current === undefined) return
-    clearTimeout(timer.current)
-    timer.current = undefined
-  })

  const provider = createMemo(
    () => providers.all().get(props.provider) ?? serverSync().data.provider.all.get(props.provider)!,
  )
-  const fallback = createMemo<ConnectMethod[]>(() => [
-    {
-      type: "key" as const,
-      label: language.t("provider.connect.method.apiKey"),
+  const controller = createProviderConnectionController({
+    provider: props.provider,
+    directory,
+    fallbackKeyLabel: () => language.t("provider.connect.method.apiKey"),
+    requestFailed: () => language.t("common.requestFailed"),
+    invalidCode: () => language.t("provider.connect.oauth.code.invalid"),
+    services: {
+      integration: {
+        load: (integrationID, value) =>
+          serverSDK()
+            .api.integration.get({
+              integrationID,
+              location: value ? { directory: value } : undefined,
+            })
+            .then((result) => result.data),
+      },
+      connection: {
+        key: (integrationID, value, key) =>
+          serverSDK().api.integration.connect.key({
+            integrationID,
+            location: value ? { directory: value } : undefined,
+            key,
+          }),
+        oauth: (integrationID, value, methodID, inputs) =>
+          serverSDK()
+            .api.integration.oauth.connect({
+              integrationID,
+              methodID,
+              inputs,
+              location: value ? { directory: value } : undefined,
+            })
+            .then((result) => result.data),
+        status: (integrationID, value, attemptID) =>
+          serverSDK()
+            .api.integration.oauth.status({
+              integrationID,
+              attemptID,
+              location: value ? { directory: value } : undefined,
+            })
+            .then((result) => result.data),
+        complete: (integrationID, value, attemptID, code) =>
+          serverSDK().api.integration.oauth.complete({
+            integrationID,
+            attemptID,
+            location: value ? { directory: value } : undefined,
+            code,
+          }),
+      },
+      provider: {
+        refresh: () =>
+          queryClient.refetchQueries(serverSync().queryOptions.providers(directory() ? pathKey(directory()!) : null)),
+      },
+      completion: {
+        finish: () => {
+          dialog.close()
+          showToast({
+            variant: "success",
+            icon: "circle-check",
+            title: language.t("provider.connect.toast.connected.title", { provider: provider().name }),
+            description: language.t("provider.connect.toast.connected.description", { provider: provider().name }),
+          })
+        },
+      },
    },
-  ])
-  const [integration] = createResource(
-    () => ({ provider: props.provider, directory: directory() }),
-    (input) =>
-      serverSDK()
-        .api.integration.get({
-          integrationID: input.provider,
-          location: input.directory ? { directory: input.directory } : undefined,
-        })
-        .then((result) => result.data),
-  )
-  const loading = createMemo(() => integration.loading)
-  const methods = createMemo<ConnectMethod[]>(() => {
-    const values = integration.latest?.methods.filter(
-      (method): method is ConnectMethod => method.type === "key" || method.type === "oauth",
-    )
-    return values?.length ? values : fallback()
  })
-  const [store, setStore] = createStore({
-    methodIndex: undefined as undefined | number,
-    authorization: undefined as undefined | IntegrationOauthConnectOutput["data"],
-    promptInputs: undefined as undefined | Record<string, string>,
-    state: "pending" as undefined | "pending" | "complete" | "error" | "prompt",
-    error: undefined as string | undefined,
-  })
-
-  type Action =
-    | { type: "method.select"; index: number }
-    | { type: "method.reset" }
-    | { type: "auth.prompt" }
-    | { type: "auth.inputs"; inputs: Record<string, string> }
-    | { type: "auth.pending" }
-    | { type: "auth.complete"; authorization: IntegrationOauthConnectOutput["data"] }
-    | { type: "auth.error"; error: string }
-
-  function dispatch(action: Action) {
-    setStore(
-      produce((draft) => {
-        if (action.type === "method.select") {
-          draft.methodIndex = action.index
-          draft.authorization = undefined
-          draft.promptInputs = undefined
-          draft.state = undefined
-          draft.error = undefined
-          return
-        }
-        if (action.type === "method.reset") {
-          draft.methodIndex = undefined
-          draft.authorization = undefined
-          draft.promptInputs = undefined
-          draft.state = undefined
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.prompt") {
-          draft.state = "prompt"
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.inputs") {
-          draft.promptInputs = action.inputs
-          draft.state = undefined
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.pending") {
-          draft.state = "pending"
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.complete") {
-          draft.state = "complete"
-          draft.authorization = action.authorization
-          draft.error = undefined
-          return
-        }
-        draft.state = "error"
-        draft.error = action.error
-      }),
-    )
-  }
-
-  const method = createMemo(() => (store.methodIndex !== undefined ? methods().at(store.methodIndex!) : undefined))
+  const loading = controller.data.loading
+  const methods = controller.data.methods
+  const method = controller.data.method
+  const methodIndex = controller.data.methodIndex
+  const authorization = controller.data.authorization
+  const state = controller.auth.state
+  const error = controller.auth.error
+  const connectKey = controller.auth.connectKey
+  const completeCode = controller.auth.completeCode

  const methodLabel = (value?: { type?: string; label?: string }) => {
    if (!value) return ""
@@ -513,56 +473,7 @@ function ProviderConnection(props: {
    }
  }

-  function formatError(value: unknown, fallback: string): string {
-    if (value && typeof value === "object" && "data" in value) {
-      const data = (value as { data?: { message?: unknown } }).data
-      if (typeof data?.message === "string" && data.message) return data.message
-    }
-    if (value && typeof value === "object" && "error" in value) {
-      const nested = formatError((value as { error?: unknown }).error, "")
-      if (nested) return nested
-    }
-    if (value && typeof value === "object" && "message" in value) {
-      const message = (value as { message?: unknown }).message
-      if (typeof message === "string" && message) return message
-    }
-    if (value instanceof Error && value.message) return value.message
-    if (typeof value === "string" && value) return value
-    return fallback
-  }
-
-  async function selectMethod(index: number, inputs?: Record<string, string>) {
-    if (timer.current !== undefined) {
-      clearTimeout(timer.current)
-      timer.current = undefined
-    }
-
-    const method = methods()[index]
-    dispatch({ type: "method.select", index })
-
-    if (method.type === "oauth") {
-      if (method.prompts?.length && !inputs) {
-        dispatch({ type: "auth.prompt" })
-        return
-      }
-      dispatch({ type: "auth.pending" })
-      await serverSDK()
-        .api.integration.oauth.connect({
-          integrationID: props.provider,
-          methodID: method.id,
-          inputs: inputs ?? {},
-          location: location(),
-        })
-        .then((x) => {
-          if (!alive.value) return
-          dispatch({ type: "auth.complete", authorization: x.data })
-        })
-        .catch((e) => {
-          if (!alive.value) return
-          dispatch({ type: "auth.error", error: formatError(e, language.t("common.requestFailed")) })
-        })
-    }
-  }
+  const selectMethod = controller.auth.select

  function AuthPromptsView() {
    const [formStore, setFormStore] = createStore({
@@ -583,7 +494,7 @@ function ProviderConnection(props: {
    const current = createMemo(() => {
      const all = prompts()
      const index = all.findIndex((prompt, index) => index >= formStore.index && matches(prompt, formStore.value))
-      if (index === -1) return
+      if (index === -1) return undefined
      return {
        index,
        prompt: all[index],
@@ -597,13 +508,14 @@ function ProviderConnection(props: {
    })

    async function next(index: number, value: Record<string, string>) {
-      if (store.methodIndex === undefined) return
+      const selected = methodIndex()
+      if (selected === undefined) return
      const next = prompts().findIndex((prompt, i) => i > index && matches(prompt, value))
      if (next !== -1) {
        setFormStore("index", next)
        return
      }
-      await selectMethod(store.methodIndex, value)
+      await selectMethod(selected, value)
    }

    async function handleSubmit(e: SubmitEvent) {
@@ -617,12 +529,12 @@ function ProviderConnection(props: {
    const item = () => current()
    const text = createMemo(() => {
      const prompt = item()?.prompt
-      if (!prompt || prompt.type !== "text") return
+      if (!prompt || prompt.type !== "text") return undefined
      return prompt
    })
    const select = createMemo(() => {
      const prompt = item()?.prompt
-      if (!prompt || prompt.type !== "select") return
+      if (!prompt || prompt.type !== "select") return undefined
      return prompt
    })

@@ -693,32 +605,9 @@ function ProviderConnection(props: {
    listRef?.onKeyDown(e)
  }

-  let auto = false
-  createEffect(() => {
-    if (auto) return
-    if (loading()) return
-    if (methods().length === 1) {
-      auto = true
-      void selectMethod(0)
-    }
-  })
-
-  async function complete() {
-    await serverSync()
-      .refreshProviders()
-      .catch(() => undefined)
-    dialog.close()
-    showToast({
-      variant: "success",
-      icon: "circle-check",
-      title: language.t("provider.connect.toast.connected.title", { provider: provider().name }),
-      description: language.t("provider.connect.toast.connected.description", { provider: provider().name }),
-    })
-  }
-
  function goBack() {
-    if (methods().length > 1 && store.methodIndex !== undefined) {
-      dispatch({ type: "method.reset" })
+    if (methods().length > 1 && methodIndex() !== undefined) {
+      controller.auth.reset()
      return
    }
    props.onBack()
@@ -806,9 +695,9 @@ function ProviderConnection(props: {
    async function handleSubmit(e: SubmitEvent) {
      e.preventDefault()

-      const form = e.currentTarget as HTMLFormElement
-      const formData = new FormData(form)
-      const apiKey = formData.get("apiKey") as string
+      if (!(e.currentTarget instanceof HTMLFormElement)) return
+      const value = new FormData(e.currentTarget).get("apiKey")
+      const apiKey = typeof value === "string" ? value : ""

      if (!apiKey?.trim()) {
        setFormStore("error", language.t("provider.connect.apiKey.required"))
@@ -816,12 +705,7 @@ function ProviderConnection(props: {
      }

      setFormStore("error", undefined)
-      await serverSDK().api.integration.connect.key({
-        integrationID: props.provider,
-        location: location(),
-        key: apiKey,
-      })
-      await complete()
+      await connectKey(apiKey)
    }

    if (newLayout())
@@ -936,9 +820,9 @@ function ProviderConnection(props: {
    async function handleSubmit(e: SubmitEvent) {
      e.preventDefault()

-      const form = e.currentTarget as HTMLFormElement
-      const formData = new FormData(form)
-      const code = formData.get("code") as string
+      if (!(e.currentTarget instanceof HTMLFormElement)) return
+      const value = new FormData(e.currentTarget).get("code")
+      const code = typeof value === "string" ? value : ""

      if (!code?.trim()) {
        setFormStore("error", language.t("provider.connect.oauth.code.required"))
@@ -946,20 +830,7 @@ function ProviderConnection(props: {
      }

      setFormStore("error", undefined)
-      const result = await serverSDK()
-        .api.integration.oauth.complete({
-          integrationID: props.provider,
-          attemptID: store.authorization!.attemptID,
-          location: location(),
-          code,
-        })
-        .then(() => ({ ok: true as const }))
-        .catch((error) => ({ ok: false as const, error }))
-      if (result.ok) {
-        await complete()
-        return
-      }
-      setFormStore("error", formatError(result.error, language.t("provider.connect.oauth.code.invalid")))
+      setFormStore("error", await completeCode(code))
    }

    if (newLayout())
@@ -967,7 +838,7 @@ function ProviderConnection(props: {
        <div class="flex flex-col gap-5 px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
          <div>
            {language.t("provider.connect.oauth.code.visit.prefix")}
-            <Link href={store.authorization!.url} class="text-v2-text-text-base">
+            <Link href={authorization()!.url} class="text-v2-text-text-base">
              {language.t("provider.connect.oauth.code.visit.link")}
            </Link>
            {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
@@ -1006,7 +877,7 @@ function ProviderConnection(props: {
      <div class="flex flex-col gap-6">
        <div class="text-14-regular text-text-base">
          {language.t("provider.connect.oauth.code.visit.prefix")}
-          <Link href={store.authorization!.url}>{language.t("provider.connect.oauth.code.visit.link")}</Link>
+          <Link href={authorization()!.url}>{language.t("provider.connect.oauth.code.visit.link")}</Link>
          {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
        </div>
        <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
@@ -1032,52 +903,18 @@ function ProviderConnection(props: {

  function OAuthAutoView() {
    const code = createMemo(() => {
-      const instructions = store.authorization?.instructions
+      const instructions = authorization()?.instructions
      if (instructions?.includes(":")) {
        return instructions.split(":").pop()?.trim()
      }
      return instructions
    })

-    onMount(() => {
-      const poll = async () => {
-        const authorization = store.authorization
-        if (!authorization || !alive.value) return
-        const result = await serverSDK()
-          .api.integration.oauth.status({
-            integrationID: props.provider,
-            attemptID: authorization.attemptID,
-            location: location(),
-          })
-          .then((value) => ({ ok: true as const, status: value.data }))
-          .catch((error) => ({ ok: false as const, error }))
-        if (!alive.value) return
-        if (!result.ok) {
-          dispatch({ type: "auth.error", error: formatError(result.error, language.t("common.requestFailed")) })
-          return
-        }
-        if (result.status.status === "complete") {
-          await complete()
-          return
-        }
-        if (result.status.status === "failed") {
-          dispatch({ type: "auth.error", error: result.status.message })
-          return
-        }
-        if (result.status.status === "expired") {
-          dispatch({ type: "auth.error", error: language.t("common.requestFailed") })
-          return
-        }
-        timer.current = setTimeout(poll, 1_000)
-      }
-      void poll()
-    })
-
    return (
      <div class="flex flex-col gap-6">
        <div class="text-14-regular text-text-base">
          {language.t("provider.connect.oauth.auto.visit.prefix")}
-          <Link href={store.authorization!.url}>{language.t("provider.connect.oauth.auto.visit.link")}</Link>
+          <Link href={authorization()!.url}>{language.t("provider.connect.oauth.auto.visit.link")}</Link>
          {language.t("provider.connect.oauth.auto.visit.suffix", { provider: provider().name })}
        </div>
        <TextField
@@ -1121,7 +958,7 @@ function ProviderConnection(props: {
        <div
          onKeyDown={handleKey}
          tabIndex={newLayout() ? undefined : 0}
-          autofocus={!newLayout() && store.methodIndex === undefined ? true : undefined}
+          autofocus={!newLayout() && methodIndex() === undefined ? true : undefined}
        >
          <Switch>
            <Match when={loading()}>
@@ -1132,10 +969,10 @@ function ProviderConnection(props: {
                </div>
              </div>
            </Match>
-            <Match when={store.methodIndex === undefined}>
+            <Match when={methodIndex() === undefined}>
              <MethodSelection />
            </Match>
-            <Match when={store.state === "pending"}>
+            <Match when={state() === "pending"}>
              <div class="text-14-regular text-text-base">
                <div class="flex items-center gap-x-2">
                  <Spinner />
@@ -1143,14 +980,14 @@ function ProviderConnection(props: {
                </div>
              </div>
            </Match>
-            <Match when={store.state === "prompt"}>
+            <Match when={state() === "prompt"}>
              <AuthPromptsView />
            </Match>
-            <Match when={store.state === "error"}>
+            <Match when={state() === "error"}>
              <div class="text-14-regular text-text-base">
                <div class="flex items-center gap-x-2">
                  <Icon name="circle-ban-sign" class="text-icon-critical-base" />
-                  <span>{language.t("provider.connect.status.failed", { error: store.error ?? "" })}</span>
+                  <span>{language.t("provider.connect.status.failed", { error: error() ?? "" })}</span>
                </div>
              </div>
            </Match>
@@ -1159,10 +996,10 @@ function ProviderConnection(props: {
            </Match>
            <Match when={method()?.type === "oauth"}>
              <Switch>
-                <Match when={store.authorization?.mode === "code"}>
+                <Match when={authorization()?.mode === "code"}>
                  <OAuthCodeView />
                </Match>
-                <Match when={store.authorization?.mode === "auto"}>
+                <Match when={authorization()?.mode === "auto"}>
                  <OAuthAutoView />
                </Match>
              </Switch>
@@ -88,7 +88,7 @@ export const DialogSelectModelUnpaidV2: Component<{ model?: ModelState }> = (pro
                  class="w-full"
                  placement="right-start"
                  gutter={6}
-                  delay="intent"
+                  openDelay={0}
                  contentStyle={{ "font-family": "var(--v2-font-family-sans)" }}
                  value={
                    <ModelTooltip
@@ -460,7 +460,7 @@ function ModelSelectorPopoverV2View(props: {
                              class="w-full"
                              placement="right-start"
                              gutter={6}
-                              delay="intent"
+                              openDelay={0}
                              value={
                                <ModelTooltip
                                  model={item}
@@ -47,7 +47,7 @@ export const PromptContextItems: Component<ContextItemsProps> = (props) => {
                  </span>
                }
                placement="top"
-                {...(!props.newLayoutDesigns ? { openDelay: 800 } : {})}
+                openDelay={800}
              >
                <div
                  classList={{
@@ -52,7 +52,12 @@ export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (p
            <For each={props.comments ?? []}>
              {(item) => (
                <div class="relative group shrink-0">
-                  <TooltipV2 value={item.comment} placement="top" contentClass="max-w-[300px] break-words">
+                  <TooltipV2
+                    value={item.comment}
+                    placement="top"
+                    openDelay={800}
+                    contentClass="max-w-[300px] break-words"
+                  >
                    <CommentCardV2
                      comment={item.comment ?? ""}
                      path={item.path}
@@ -0,0 +1,129 @@
+import { describe, expect, test, vi } from "bun:test"
+import { createRoot } from "solid-js"
+import {
+  createProviderConnectionWorkflowController,
+  type ProviderConnectMethod,
+} from "./provider-connection-controller"
+
+const authorization = {
+  attemptID: "attempt-1",
+  url: "https://example.com/auth",
+  instructions: "Code: ABCD",
+  mode: "auto" as const,
+  time: { created: 0, expires: 1 },
+}
+
+function services(options: {
+  methods: readonly ProviderConnectMethod[]
+  status?: () => Promise<{ status: "pending" | "complete" }>
+  refresh?: () => void
+  finish?: () => void
+}) {
+  return {
+    connection: {
+      key: async () => undefined,
+      oauth: async () => authorization,
+      status: options.status ?? (async () => ({ status: "pending" as const })),
+      complete: async () => undefined,
+    },
+    provider: { refresh: async () => options.refresh?.() },
+    completion: { finish: options.finish ?? (() => undefined) },
+  }
+}
+
+function create(options: Parameters<typeof services>[0]) {
+  return createRoot((dispose) => ({
+    dispose,
+    controller: createProviderConnectionWorkflowController({
+      provider: "example",
+      directory: () => "/project",
+      requestFailed: () => "Request failed",
+      invalidCode: () => "Invalid code",
+      loading: () => false,
+      methods: () => [...options.methods],
+      services: services(options),
+      pollInterval: 100,
+    }),
+  }))
+}
+
+async function settle() {
+  await Promise.resolve()
+  await Promise.resolve()
+  await Promise.resolve()
+  await Promise.resolve()
+}
+
+describe("provider connection controller", () => {
+  test("moves prompted OAuth methods through prompt and authorization states", async () => {
+    const owned = create({
+      methods: [
+        {
+          id: "oauth",
+          type: "oauth",
+          label: "OAuth",
+          prompts: [{ type: "text", key: "account", message: "Account" }],
+        },
+      ],
+    })
+
+    await owned.controller.auth.select(0)
+    expect(owned.controller.auth.state()).toBe("prompt")
+
+    await owned.controller.auth.select(0, { account: "team" })
+    expect(owned.controller.auth.state()).toBe("complete")
+    expect(owned.controller.data.authorization()).toEqual(authorization)
+    owned.dispose()
+  })
+
+  test("polls auto OAuth independently and completes after provider refresh", async () => {
+    vi.useFakeTimers()
+    try {
+      const calls: string[] = []
+      const statuses = [{ status: "pending" as const }, { status: "complete" as const }]
+      const owned = create({
+        methods: [{ id: "oauth", type: "oauth", label: "OAuth" }],
+        status: async () => statuses.shift() ?? { status: "complete" as const },
+        refresh: () => calls.push("refresh"),
+        finish: () => calls.push("finish"),
+      })
+
+      await owned.controller.auth.select(0)
+      await settle()
+      expect(owned.controller.data.authorization()).toEqual(authorization)
+      expect(calls).toEqual([])
+
+      vi.advanceTimersByTime(100)
+      await settle()
+      expect(calls).toEqual(["refresh", "finish"])
+      owned.dispose()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  test("cancels an owned poll timer on reset and disposal", async () => {
+    vi.useFakeTimers()
+    try {
+      const status = vi.fn(async () => ({ status: "pending" as const }))
+      const owned = create({ methods: [{ id: "oauth", type: "oauth", label: "OAuth" }], status })
+
+      await owned.controller.auth.select(0)
+      expect(status).toHaveBeenCalledTimes(1)
+
+      owned.controller.auth.reset()
+      vi.advanceTimersByTime(1_000)
+      await settle()
+      expect(status).toHaveBeenCalledTimes(1)
+
+      await owned.controller.auth.select(0)
+      expect(status).toHaveBeenCalledTimes(2)
+      owned.dispose()
+      vi.advanceTimersByTime(1_000)
+      await settle()
+      expect(status).toHaveBeenCalledTimes(2)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+})
@@ -0,0 +1,254 @@
+import type { IntegrationMethod, IntegrationOauthConnectOutput } from "@opencode-ai/client/promise"
+import { createEffect, createMemo, createResource, onCleanup } from "solid-js"
+import { createStore, produce } from "solid-js/store"
+
+export type ProviderConnectMethod = Extract<IntegrationMethod, { type: "key" | "oauth" }>
+type Authorization = IntegrationOauthConnectOutput["data"]
+type OAuthStatus = { status: "pending" | "complete" | "expired" } | { status: "failed"; message: string }
+
+type ProviderConnectionServices = {
+  integration: {
+    load: (provider: string, directory?: string) => Promise<{ methods: readonly IntegrationMethod[] } | null>
+  }
+  connection: {
+    key: (provider: string, directory: string | undefined, key: string) => Promise<unknown>
+    oauth: (
+      provider: string,
+      directory: string | undefined,
+      method: string,
+      inputs: Record<string, string>,
+    ) => Promise<Authorization>
+    status: (provider: string, directory: string | undefined, attempt: string) => Promise<OAuthStatus>
+    complete: (provider: string, directory: string | undefined, attempt: string, code: string) => Promise<unknown>
+  }
+  provider: { refresh: () => Promise<unknown> }
+  completion: { finish: () => void }
+}
+
+export function createProviderConnectionController(options: {
+  provider: string
+  directory: () => string | undefined
+  fallbackKeyLabel: () => string
+  requestFailed: () => string
+  invalidCode: () => string
+  services: ProviderConnectionServices
+  pollInterval?: number
+}) {
+  const [integration] = createResource(
+    () => ({ provider: options.provider, directory: options.directory() }),
+    (input) => options.services.integration.load(input.provider, input.directory),
+  )
+  const methods = createMemo<ProviderConnectMethod[]>(() => {
+    const values = integration.latest?.methods.filter(
+      (method): method is ProviderConnectMethod => method.type === "key" || method.type === "oauth",
+    )
+    if (values?.length) return [...values]
+    return [{ type: "key", label: options.fallbackKeyLabel() }]
+  })
+  return createProviderConnectionWorkflowController({
+    ...options,
+    loading: () => integration.loading,
+    methods,
+  })
+}
+
+export function createProviderConnectionWorkflowController(options: {
+  provider: string
+  directory: () => string | undefined
+  requestFailed: () => string
+  invalidCode: () => string
+  loading: () => boolean
+  methods: () => ProviderConnectMethod[]
+  services: Pick<ProviderConnectionServices, "connection" | "provider" | "completion">
+  pollInterval?: number
+}) {
+  const [store, setStore] = createStore({
+    methodIndex: undefined as number | undefined,
+    authorization: undefined as Authorization | undefined,
+    state: "pending" as "pending" | "complete" | "error" | "prompt" | undefined,
+    error: undefined as string | undefined,
+  })
+  const polling = {
+    generation: 0,
+    timer: undefined as ReturnType<typeof setTimeout> | undefined,
+    disposed: false,
+  }
+  const methods = options.methods
+  const method = createMemo(() => (store.methodIndex === undefined ? undefined : methods().at(store.methodIndex)))
+
+  type Action =
+    | { type: "method.select"; index: number }
+    | { type: "method.reset" }
+    | { type: "auth.prompt" }
+    | { type: "auth.pending" }
+    | { type: "auth.complete"; authorization: Authorization }
+    | { type: "auth.error"; error: string }
+
+  const dispatch = (action: Action) => {
+    setStore(
+      produce((draft) => {
+        if (action.type === "method.select") {
+          draft.methodIndex = action.index
+          draft.authorization = undefined
+          draft.state = undefined
+          draft.error = undefined
+          return
+        }
+        if (action.type === "method.reset") {
+          draft.methodIndex = undefined
+          draft.authorization = undefined
+          draft.state = undefined
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.prompt") {
+          draft.state = "prompt"
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.pending") {
+          draft.state = "pending"
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.complete") {
+          draft.state = "complete"
+          draft.authorization = action.authorization
+          draft.error = undefined
+          return
+        }
+        draft.state = "error"
+        draft.error = action.error
+      }),
+    )
+  }
+
+  const cancelPolling = () => {
+    polling.generation++
+    if (polling.timer === undefined) return
+    clearTimeout(polling.timer)
+    polling.timer = undefined
+  }
+  const finish = async () => {
+    cancelPolling()
+    await options.services.provider.refresh().catch(() => undefined)
+    if (polling.disposed) return
+    options.services.completion.finish()
+  }
+  const poll = async (authorization: Authorization, generation: number) => {
+    const result = await options.services.connection
+      .status(options.provider, options.directory(), authorization.attemptID)
+      .then((status) => ({ ok: true as const, status }))
+      .catch((error) => ({ ok: false as const, error }))
+    if (polling.disposed || generation !== polling.generation) return
+    if (!result.ok) {
+      dispatch({ type: "auth.error", error: formatProviderConnectionError(result.error, options.requestFailed()) })
+      return
+    }
+    if (result.status.status === "complete") {
+      await finish()
+      return
+    }
+    if (result.status.status === "failed") {
+      dispatch({ type: "auth.error", error: result.status.message })
+      return
+    }
+    if (result.status.status === "expired") {
+      dispatch({ type: "auth.error", error: options.requestFailed() })
+      return
+    }
+    polling.timer = setTimeout(() => void poll(authorization, generation), options.pollInterval ?? 1_000)
+  }
+  const select = async (index: number, inputs?: Record<string, string>) => {
+    cancelPolling()
+    const generation = polling.generation
+    const selected = methods()[index]
+    dispatch({ type: "method.select", index })
+    if (selected.type !== "oauth") return
+    if (selected.prompts?.length && !inputs) {
+      dispatch({ type: "auth.prompt" })
+      return
+    }
+    dispatch({ type: "auth.pending" })
+    const result = await options.services.connection
+      .oauth(options.provider, options.directory(), selected.id, inputs ?? {})
+      .then((authorization) => ({ ok: true as const, authorization }))
+      .catch((error) => ({ ok: false as const, error }))
+    if (polling.disposed || generation !== polling.generation) return
+    if (!result.ok) {
+      dispatch({ type: "auth.error", error: formatProviderConnectionError(result.error, options.requestFailed()) })
+      return
+    }
+    dispatch({ type: "auth.complete", authorization: result.authorization })
+    if (result.authorization.mode === "auto") void poll(result.authorization, generation)
+  }
+  const reset = () => {
+    cancelPolling()
+    dispatch({ type: "method.reset" })
+  }
+  const connectKey = async (key: string) => {
+    await options.services.connection.key(options.provider, options.directory(), key)
+    await finish()
+  }
+  const completeCode = async (code: string) => {
+    const authorization = store.authorization
+    if (!authorization) return options.invalidCode()
+    const result = await options.services.connection
+      .complete(options.provider, options.directory(), authorization.attemptID, code)
+      .then(() => ({ ok: true as const }))
+      .catch((error) => ({ ok: false as const, error }))
+    if (!result.ok) return formatProviderConnectionError(result.error, options.invalidCode())
+    await finish()
+    return undefined
+  }
+
+  let auto = false
+  createEffect(() => {
+    if (auto || options.loading() || methods().length !== 1) return
+    auto = true
+    void select(0)
+  })
+  onCleanup(() => {
+    polling.disposed = true
+    cancelPolling()
+  })
+
+  return {
+    data: {
+      loading: options.loading,
+      methods,
+      method,
+      methodIndex: () => store.methodIndex,
+      authorization: () => store.authorization,
+    },
+    auth: {
+      state: () => store.state,
+      error: () => store.error,
+      select,
+      reset,
+      connectKey,
+      completeCode,
+    },
+  }
+}
+
+export type ProviderConnectionController = ReturnType<typeof createProviderConnectionController>
+
+export function formatProviderConnectionError(value: unknown, fallback: string): string {
+  if (value && typeof value === "object" && "data" in value) {
+    const data = value.data
+    if (data && typeof data === "object" && "message" in data && typeof data.message === "string" && data.message)
+      return data.message
+  }
+  if (value && typeof value === "object" && "error" in value) {
+    const nested = formatProviderConnectionError(value.error, "")
+    if (nested) return nested
+  }
+  if (value && typeof value === "object" && "message" in value) {
+    const message = value.message
+    if (typeof message === "string" && message) return message
+  }
+  if (value instanceof Error && value.message) return value.message
+  if (typeof value === "string" && value) return value
+  return fallback
+}
@@ -4,3 +4,4 @@ export { SortableTab, FileVisual } from "./session-sortable-tab"
 export { SortableTabV2 } from "./session-sortable-tab-v2"
 export { SortableTerminalTab } from "./session-sortable-terminal-tab"
 export { NewSessionView } from "./session-new-view"
+export { NewSessionDesignView } from "./session-new-design-view"
@@ -0,0 +1,16 @@
+import type { JSX } from "solid-js"
+import { WordmarkV2 } from "@opencode-ai/ui/v2/wordmark-v2"
+import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
+
+export function NewSessionDesignView(props: { children: JSX.Element }) {
+  return (
+    <div data-component="session-new-design" class="relative size-full overflow-hidden bg-v2-background-bg-deep ">
+      <div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
+        <div class={NEW_SESSION_CONTENT_WIDTH}>
+          <WordmarkV2 class="h-auto w-full text-v2-background-bg-inverse" />
+          <div class="mt-8">{props.children}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -1,70 +0,0 @@
-import { onCleanup } from "solid-js"
-
-export type ShellOption = {
-  path: string
-  name: string
-  acceptable: boolean
-}
-
-export type ShellSelectOption = {
-  id: string
-  value: string
-  name: string
-  terminalOnly: boolean
-}
-
-export function createShellOptions(input: { shells: ShellOption[]; current: string | undefined }) {
-  const counts = input.shells.reduce((result, shell) => {
-    result.set(shell.name, (result.get(shell.name) ?? 0) + 1)
-    return result
-  }, new Map<string, number>())
-  const options: ShellSelectOption[] = [
-    { id: "auto", value: "", name: "", terminalOnly: false },
-    ...input.shells.map((shell) => {
-      const ambiguous = (counts.get(shell.name) ?? 0) > 1
-      const name = ambiguous ? shell.path : shell.name
-      return {
-        id: shell.path,
-        value: ambiguous ? shell.path : shell.name,
-        name,
-        terminalOnly: !shell.acceptable,
-      }
-    }),
-  ]
-  if (input.current && !options.some((option) => option.value === input.current)) {
-    options.push({ id: input.current, value: input.current, name: input.current, terminalOnly: false })
-  }
-  return options
-}
-
-export function createSoundPreviewController(player: (id: string | undefined) => Promise<(() => void) | undefined>) {
-  let cleanup: (() => void) | undefined
-  let timeout: ReturnType<typeof setTimeout> | undefined
-  let run = 0
-
-  const stop = () => {
-    run += 1
-    cleanup?.()
-    clearTimeout(timeout)
-    cleanup = undefined
-    timeout = undefined
-  }
-  const play = (id: string | undefined) => {
-    stop()
-    if (!id) return
-    const current = ++run
-    timeout = setTimeout(() => {
-      timeout = undefined
-      void player(id).then((next) => {
-        if (run === current) {
-          cleanup = next
-          return
-        }
-        next?.()
-      })
-    }, 100)
-  }
-
-  onCleanup(stop)
-  return { play, stop }
-}
@@ -1,53 +0,0 @@
-import { describe, expect, test, vi } from "bun:test"
-import { createRoot } from "solid-js"
-import { createShellOptions, createSoundPreviewController } from "./general-controller-behavior"
-
-describe("settings v2 controllers", () => {
-  test("normalizes shell names and preserves an unavailable configured shell", () => {
-    expect(
-      createShellOptions({
-        shells: [
-          { path: "/bin/bash", name: "bash", acceptable: true },
-          { path: "/opt/bash", name: "bash", acceptable: false },
-          { path: "/bin/zsh", name: "zsh", acceptable: true },
-        ],
-        current: "fish",
-      }),
-    ).toEqual([
-      { id: "auto", value: "", name: "", terminalOnly: false },
-      { id: "/bin/bash", value: "/bin/bash", name: "/bin/bash", terminalOnly: false },
-      { id: "/opt/bash", value: "/opt/bash", name: "/opt/bash", terminalOnly: true },
-      { id: "/bin/zsh", value: "zsh", name: "zsh", terminalOnly: false },
-      { id: "fish", value: "fish", name: "fish", terminalOnly: false },
-    ])
-  })
-
-  test("debounces previews and stops owned audio on disposal", async () => {
-    vi.useFakeTimers()
-    try {
-      const played: string[] = []
-      const stopped: string[] = []
-      const owned = createRoot((dispose) => ({
-        dispose,
-        preview: createSoundPreviewController(async (id) => {
-          played.push(id ?? "")
-          return () => stopped.push(id ?? "")
-        }),
-      }))
-
-      owned.preview.play("first")
-      vi.advanceTimersByTime(99)
-      expect(played).toEqual([])
-
-      owned.preview.play("second")
-      vi.advanceTimersByTime(100)
-      await Promise.resolve()
-      expect(played).toEqual(["second"])
-
-      owned.dispose()
-      expect(stopped).toEqual(["second"])
-    } finally {
-      vi.useRealTimers()
-    }
-  })
-})
@@ -1,173 +0,0 @@
-import { createMemo, createResource, onMount, type Accessor } from "solid-js"
-import type { ColorScheme } from "@opencode-ai/ui/theme/context"
-import { useTheme } from "@opencode-ai/ui/theme/context"
-import { usePermission } from "@/context/permission"
-import { useServerSDK } from "@/context/server-sdk"
-import { useServerSync } from "@/context/server-sync"
-import {
-  monoDefault,
-  monoFontFamily,
-  monoInput,
-  sansDefault,
-  sansFontFamily,
-  sansInput,
-  terminalDefault,
-  terminalFontFamily,
-  terminalInput,
-  useSettings,
-} from "@/context/settings"
-import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
-import { createSoundPreviewController, type ShellOption } from "./general-controller-behavior"
-
-export { createShellOptions, createSoundPreviewController } from "./general-controller-behavior"
-export type { ShellOption, ShellSelectOption } from "./general-controller-behavior"
-
-export function createPermissionScopeController(sessionID: Accessor<string | undefined>) {
-  const permission = usePermission()
-  const serverSync = useServerSync()
-  const directory = createMemo(() => {
-    const id = sessionID()
-    if (!id) return undefined
-    return serverSync().session.lineage.peek(id)?.session.directory
-  })
-
-  return {
-    accepting: createMemo(() => {
-      const id = sessionID()
-      const dir = directory()
-      if (!id || !dir) return false
-      return permission.isAutoAccepting(id, dir)
-    }),
-    enabled: createMemo(() => !!directory()),
-    set: (checked: boolean) => {
-      const id = sessionID()
-      const dir = directory()
-      if (!id || !dir) return
-      if (checked) return permission.enableAutoAccept(id, dir)
-      permission.disableAutoAccept(id, dir)
-    },
-  }
-}
-
-export function createShellSettingsController() {
-  const serverSdk = useServerSDK()
-  const serverSync = useServerSync()
-  const [shells] = createResource(
-    async () => {
-      const sdk = serverSdk()
-      if ((await sdk.protocol) === "v1") return (await sdk.client.pty.shells()).data ?? []
-      return [] as ShellOption[]
-    },
-    { initialValue: [] as ShellOption[] },
-  )
-  const current = createMemo(() => serverSync().data.config.shell ?? "")
-
-  return {
-    shells: () => shells.latest,
-    current,
-    select: (value: string) => {
-      if (value === current()) return
-      void serverSync().updateConfig({ shell: value })
-    },
-  }
-}
-
-export function createAppearanceSettingsController() {
-  const settings = useSettings()
-  const theme = useTheme()
-  const themes = createMemo(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
-
-  onMount(() => void theme.loadThemes())
-
-  return {
-    scheme: {
-      current: theme.colorScheme,
-      select: (value: ColorScheme) => theme.setColorScheme(value),
-    },
-    theme: {
-      options: themes,
-      current: createMemo(() => themes().find((option) => option.id === theme.themeId())),
-      select: (option: { id: string } | null) => option && theme.setTheme(option.id),
-    },
-    fonts: {
-      ui: createMemo(() => ({
-        value: sansInput(settings.appearance.uiFont()),
-        family: sansFontFamily(settings.appearance.uiFont()),
-        placeholder: sansDefault,
-      })),
-      code: createMemo(() => ({
-        value: monoInput(settings.appearance.font()),
-        family: monoFontFamily(settings.appearance.font()),
-        placeholder: monoDefault,
-      })),
-      terminal: createMemo(() => ({
-        value: terminalInput(settings.appearance.terminalFont()),
-        family: terminalFontFamily(settings.appearance.terminalFont()),
-        placeholder: terminalDefault,
-      })),
-      setUI: (value: string) => settings.appearance.setUIFont(value),
-      setCode: (value: string) => settings.appearance.setFont(value),
-      setTerminal: (value: string) => settings.appearance.setTerminalFont(value),
-    },
-  }
-}
-
-const noneSound = { id: "none", label: "sound.option.none" } as const
-export const soundOptions = [noneSound, ...SOUND_OPTIONS]
-export type SoundSelectOption = (typeof soundOptions)[number]
-
-export function createSoundSettingsController() {
-  const settings = useSettings()
-  const preview = createSoundPreviewController(playSoundById)
-  const channel = (
-    enabled: Accessor<boolean>,
-    current: Accessor<string>,
-    setEnabled: (value: boolean) => void,
-    set: (id: string) => void,
-  ) => ({
-    current: createMemo(() =>
-      enabled() ? (soundOptions.find((option) => option.id === current()) ?? noneSound) : noneSound,
-    ),
-    highlight: (option: SoundSelectOption | undefined) => {
-      if (!option) return
-      preview.play(option.id === "none" ? undefined : option.id)
-    },
-    select: (option: SoundSelectOption | null) => {
-      if (!option) return
-      if (option.id === "none") {
-        setEnabled(false)
-        preview.stop()
-        return
-      }
-      setEnabled(true)
-      set(option.id)
-      preview.play(option.id)
-    },
-  })
-
-  return {
-    agent: channel(
-      settings.sounds.agentEnabled,
-      settings.sounds.agent,
-      (value) => settings.sounds.setAgentEnabled(value),
-      (id) => settings.sounds.setAgent(id),
-    ),
-    permissions: channel(
-      settings.sounds.permissionsEnabled,
-      settings.sounds.permissions,
-      (value) => settings.sounds.setPermissionsEnabled(value),
-      (id) => settings.sounds.setPermissions(id),
-    ),
-    errors: channel(
-      settings.sounds.errorsEnabled,
-      settings.sounds.errors,
-      (value) => settings.sounds.setErrorsEnabled(value),
-      (id) => settings.sounds.setErrors(id),
-    ),
-  }
-}
-
-export type PermissionScopeController = ReturnType<typeof createPermissionScopeController>
-export type ShellSettingsController = ReturnType<typeof createShellSettingsController>
-export type AppearanceSettingsController = ReturnType<typeof createAppearanceSettingsController>
-export type SoundSettingsController = ReturnType<typeof createSoundSettingsController>
@@ -1,297 +1,182 @@
-import { Component, Show, createMemo, createResource } from "solid-js"
+import { Component, Show, createMemo, createResource, onMount } from "solid-js"
 import { createMediaQuery } from "@solid-primitives/media"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
 import { Switch } from "@opencode-ai/ui/v2/switch-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLanguage } from "@/context/language"
+import { usePermission } from "@/context/permission"
 import { usePlatform } from "@/context/platform"
+import { useServerSync } from "@/context/server-sync"
+import { useServerSDK } from "@/context/server-sdk"
 import { useUpdaterAction } from "../updater-action"
-import { useSettings } from "@/context/settings"
+import {
+  monoDefault,
+  monoFontFamily,
+  monoInput,
+  sansDefault,
+  sansFontFamily,
+  sansInput,
+  terminalDefault,
+  terminalFontFamily,
+  terminalInput,
+  useSettings,
+} from "@/context/settings"
+import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
 import { Link } from "../link"
 import { SettingsListV2 } from "./parts/list"
 import { SettingsRowV2 } from "./parts/row"
 import { LayoutRetirementNotice, LayoutTransitionToggle } from "./interface-transition"
-import {
-  createAppearanceSettingsController,
-  createPermissionScopeController,
-  createShellOptions,
-  createShellSettingsController,
-  createSoundSettingsController,
-  soundOptions,
-  type AppearanceSettingsController,
-  type PermissionScopeController,
-  type ShellSettingsController,
-  type SoundSettingsController,
-} from "./general-controllers"
 import "./settings-v2.css"

-const schemeOptions: ("system" | "light" | "dark")[] = ["system", "light", "dark"]
-const fontSettings = {
-  ui: {
-    action: "settings-ui-font",
-    title: "settings.general.row.uiFont.title",
-    description: "settings.general.row.uiFont.description",
-    font: "ui",
-    input: "setUI",
-  },
-  code: {
-    action: "settings-code-font",
-    title: "settings.general.row.font.title",
-    description: "settings.general.row.font.description",
-    font: "code",
-    input: "setCode",
-  },
-  terminal: {
-    action: "settings-terminal-font",
-    title: "settings.general.row.terminalFont.title",
-    description: "settings.general.row.terminalFont.description",
-    font: "terminal",
-    input: "setTerminal",
-  },
-} as const
-const soundSettings = {
-  agent: {
-    action: "settings-sounds-agent",
-    title: "settings.general.sounds.agent.title",
-    description: "settings.general.sounds.agent.description",
-  },
-  permissions: {
-    action: "settings-sounds-permissions",
-    title: "settings.general.sounds.permissions.title",
-    description: "settings.general.sounds.permissions.description",
-  },
-  errors: {
-    action: "settings-sounds-errors",
-    title: "settings.general.sounds.errors.title",
-    description: "settings.general.sounds.errors.description",
-  },
-} as const
-
-const PermissionScopeSetting: Component<{ controller: PermissionScopeController }> = (props) => {
-  const language = useLanguage()
-  return (
-    <SettingsRowV2
-      title={language.t("command.permissions.autoaccept.enable")}
-      description={language.t("toast.permissions.autoaccept.on.description")}
-    >
-      <div data-action="settings-auto-accept-permissions">
-        <Switch
-          checked={props.controller.accepting()}
-          disabled={!props.controller.enabled()}
-          onChange={props.controller.set}
-        />
-      </div>
-    </SettingsRowV2>
-  )
+let demoSoundState = {
+  cleanup: undefined as (() => void) | undefined,
+  timeout: undefined as NodeJS.Timeout | undefined,
+  run: 0,
 }

-const ShellSetting: Component<{ controller: ShellSettingsController }> = (props) => {
-  const language = useLanguage()
-  const options = createMemo(() =>
-    createShellOptions({
-      shells: props.controller.shells(),
-      current: props.controller.current(),
-    }),
-  )
-  return (
-    <SettingsRowV2
-      title={language.t("settings.general.row.shell.title")}
-      description={language.t("settings.general.row.shell.description")}
-    >
-      <SelectV2
-        appearance="inline"
-        data-action="settings-shell"
-        options={options()}
-        current={options().find((option) => option.value === props.controller.current()) ?? options()[0]}
-        placement="bottom-end"
-        gutter={6}
-        value={(option) => option.id}
-        label={(option) => {
-          if (option.id === "auto") return language.t("settings.general.row.shell.autoDefault")
-          if (!option.terminalOnly) return option.name
-          return `${option.name} (${language.t("settings.general.row.shell.terminalOnly")})`
-        }}
-        onSelect={(option) => option && props.controller.select(option.value)}
-      />
-    </SettingsRowV2>
-  )
+type ThemeOption = {
+  id: string
+  name: string
 }

-const AppearanceSection: Component<{ controller: AppearanceSettingsController }> = (props) => {
-  const language = useLanguage()
-  return (
-    <div class="settings-v2-section">
-      <h3 class="settings-v2-section-title">{language.t("settings.general.section.appearance")}</h3>
-      <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.general.row.colorScheme.title")}
-          description={language.t("settings.general.row.colorScheme.description")}
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-color-scheme"
-            options={schemeOptions}
-            current={schemeOptions.find((option) => option === props.controller.scheme.current())}
-            placement="bottom-end"
-            gutter={6}
-            label={(option) => {
-              if (option === "system") return language.t("theme.scheme.system")
-              if (option === "light") return language.t("theme.scheme.light")
-              return language.t("theme.scheme.dark")
-            }}
-            onSelect={(option) => option && props.controller.scheme.select(option)}
-          />
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.theme.title")}
-          description={
-            <>
-              {language.t("settings.general.row.theme.description")}{" "}
-              <Link class="settings-v2-link" href="https://opencode.ai/docs/themes/">
-                {language.t("common.learnMore")}
-              </Link>
-            </>
-          }
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-theme"
-            options={props.controller.theme.options()}
-            current={props.controller.theme.current()}
-            placement="bottom-end"
-            gutter={6}
-            value={(option) => option.id}
-            label={(option) => option.name}
-            onSelect={props.controller.theme.select}
-          />
-        </SettingsRowV2>
-
-        <FontSetting kind="ui" fonts={props.controller.fonts} />
-        <FontSetting kind="code" fonts={props.controller.fonts} />
-        <FontSetting kind="terminal" fonts={props.controller.fonts} />
-      </SettingsListV2>
-    </div>
-  )
+type ShellOption = {
+  path: string
+  name: string
+  acceptable: boolean
 }

-const FontSetting: Component<{
-  kind: "ui" | "code" | "terminal"
-  fonts: AppearanceSettingsController["fonts"]
-}> = (props) => {
-  const language = useLanguage()
-  const config = () => fontSettings[props.kind]
-  return (
-    <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
-      <div class="w-full sm:w-[220px]">
-        <TextInputV2
-          data-action={config().action}
-          type="text"
-          appearance="base"
-          value={props.fonts[config().font]().value}
-          onInput={(event) => props.fonts[config().input](event.currentTarget.value)}
-          placeholder={props.fonts[config().font]().placeholder}
-          spellcheck={false}
-          autocorrect="off"
-          autocomplete="off"
-          autocapitalize="off"
-          aria-label={language.t(config().title)}
-          style={{ "font-family": props.fonts[config().font]().family }}
-        />
-      </div>
-    </SettingsRowV2>
-  )
+type ShellSelectOption = {
+  id: string
+  value: string
+  label: string
 }

-const SoundsSection: Component<{ controller: SoundSettingsController }> = (props) => {
-  const language = useLanguage()
-  return (
-    <div class="settings-v2-section">
-      <h3 class="settings-v2-section-title">{language.t("settings.general.section.sounds")}</h3>
-      <SettingsListV2>
-        <SoundSetting kind="agent" channel={props.controller.agent} />
-        <SoundSetting kind="permissions" channel={props.controller.permissions} />
-        <SoundSetting kind="errors" channel={props.controller.errors} />
-      </SettingsListV2>
-    </div>
-  )
+// To prevent audio from overlapping/playing very quickly when navigating the settings menus,
+// delay the playback by 100ms during quick selection changes and pause existing sounds.
+const stopDemoSound = () => {
+  demoSoundState.run += 1
+  if (demoSoundState.cleanup) {
+    demoSoundState.cleanup()
+  }
+  clearTimeout(demoSoundState.timeout)
+  demoSoundState.cleanup = undefined
 }

-const SoundSetting: Component<{
-  kind: "agent" | "permissions" | "errors"
-  channel: SoundSettingsController["agent"]
-}> = (props) => {
-  const language = useLanguage()
-  const config = () => soundSettings[props.kind]
-  return (
-    <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
-      <SelectV2
-        appearance="inline"
-        data-action={config().action}
-        options={soundOptions}
-        current={props.channel.current()}
-        value={(option) => option.id}
-        label={(option) => language.t(option.label)}
-        onHighlight={props.channel.highlight}
-        onSelect={props.channel.select}
-        placement="bottom-end"
-        gutter={6}
-      />
-    </SettingsRowV2>
-  )
-}
+const playDemoSound = (id: string | undefined) => {
+  stopDemoSound()
+  if (!id) return

-const LanguageSetting = () => {
-  const language = useLanguage()
-  const options = createMemo(() =>
-    language.locales.map((locale) => ({
-      value: locale,
-      label: language.label(locale),
-    })),
-  )
-  return (
-    <SettingsRowV2
-      title={language.t("settings.general.row.language.title")}
-      description={language.t("settings.general.row.language.description")}
-    >
-      <SelectV2
-        appearance="inline"
-        data-action="settings-language"
-        options={options()}
-        placement="bottom-end"
-        gutter={6}
-        current={options().find((option) => option.value === language.locale())}
-        value={(option) => option.value}
-        label={(option) => option.label}
-        onSelect={(option) => option && language.setLocale(option.value)}
-      />
-    </SettingsRowV2>
-  )
+  const run = ++demoSoundState.run
+  demoSoundState.timeout = setTimeout(() => {
+    void playSoundById(id).then((cleanup) => {
+      if (demoSoundState.run !== run) {
+        cleanup?.()
+        return
+      }
+      demoSoundState.cleanup = cleanup
+    })
+  }, 100)
 }

 export const SettingsGeneralV2: Component<{
  sessionID?: string
 }> = (props) => {
+  const theme = useTheme()
  const language = useLanguage()
+  const permission = usePermission()
  const platform = usePlatform()
  const dialog = useDialog()
  const settings = useSettings()
+  const serverSync = useServerSync()
+  const serverSdk = useServerSDK()
  const mobile = createMediaQuery("(max-width: 767px)")
+
  const updater = useUpdaterAction()
-  const permissionScope = createPermissionScopeController(() => props.sessionID)
-  const shell = createShellSettingsController()
-  const appearance = createAppearanceSettingsController()
-  const sounds = createSoundSettingsController()
+
+  const dir = createMemo(() => {
+    if (!props.sessionID) return undefined
+    return serverSync().session.lineage.peek(props.sessionID)?.session.directory
+  })
+  const accepting = createMemo(() => {
+    const value = dir()
+    if (!value || !props.sessionID) return false
+    return permission.isAutoAccepting(props.sessionID, value)
+  })
+
+  const toggleAccept = (checked: boolean) => {
+    const value = dir()
+    if (!value || !props.sessionID) return
+
+    if (checked) {
+      permission.enableAutoAccept(props.sessionID, value)
+      return
+    }
+
+    permission.disableAutoAccept(props.sessionID, value)
+  }
  const desktop = createMemo(() => platform.platform === "desktop")

+  const themeOptions = createMemo<ThemeOption[]>(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
+
+  const [shells] = createResource(
+    async () => {
+      const sdk = serverSdk()
+      if ((await sdk.protocol) === "v1") {
+        return (await sdk.client.pty.shells()).data ?? []
+      }
+      // return (await sdk.api.pty.shells()).data
+      return [] as ShellOption[]
+    },
+    { initialValue: [] as ShellOption[] },
+  )
+
  const [pinchZoom, { mutate: setPinchZoom }] = createResource(
-    () => desktop() && "getPinchZoomEnabled" in platform,
+    () => (desktop() && platform.getPinchZoomEnabled ? true : false),
    () => Promise.resolve(platform.getPinchZoomEnabled?.() ?? false).catch(() => false),
    { initialValue: false },
  )

+  onMount(() => {
+    void theme.loadThemes()
+  })
+
+  const autoOption = { id: "auto", value: "", label: language.t("settings.general.row.shell.autoDefault") }
+  const currentShell = createMemo(() => serverSync().data.config.shell ?? "")
+
+  const shellOptions = createMemo<ShellSelectOption[]>(() => {
+    const list = shells.latest
+    const current = serverSync().data.config.shell
+
+    const nameCounts = new Map<string, number>()
+    for (const s of list) {
+      nameCounts.set(s.name, (nameCounts.get(s.name) || 0) + 1)
+    }
+
+    const options = [
+      autoOption,
+      ...list.map((s) => {
+        const ambiguousName = (nameCounts.get(s.name) || 0) > 1
+        const text = ambiguousName ? s.path : s.name
+        const label = s.acceptable ? text : `${text} (${language.t("settings.general.row.shell.terminalOnly")})`
+        return {
+          id: s.path,
+          // Prefer name over path - "bash" is much cleaner than the explicit full route even when it may change due to PATH.
+          value: ambiguousName ? s.path : s.name,
+          label,
+        }
+      }),
+    ]
+
+    if (current && !options.some((o) => o.value === current)) {
+      options.push({ id: current, value: current, label: current })
+    }
+
+    return options
+  })
+
  const onPinchZoomChange = (checked: boolean) => {
    setPinchZoom(checked)
    const update = platform.setPinchZoomEnabled?.(checked)
@@ -299,6 +184,52 @@ export const SettingsGeneralV2: Component<{
    void update.catch(() => setPinchZoom(!checked))
  }

+  const colorSchemeOptions = createMemo((): { value: ColorScheme; label: string }[] => [
+    { value: "system", label: language.t("theme.scheme.system") },
+    { value: "light", label: language.t("theme.scheme.light") },
+    { value: "dark", label: language.t("theme.scheme.dark") },
+  ])
+
+  const languageOptions = createMemo(() =>
+    language.locales.map((locale) => ({
+      value: locale,
+      label: language.label(locale),
+    })),
+  )
+
+  const noneSound = { id: "none", label: "sound.option.none" } as const
+  const soundOptions = [noneSound, ...SOUND_OPTIONS]
+  const mono = () => monoInput(settings.appearance.font())
+  const sans = () => sansInput(settings.appearance.uiFont())
+  const terminal = () => terminalInput(settings.appearance.terminalFont())
+
+  const soundSelectProps = (
+    enabled: () => boolean,
+    current: () => string,
+    setEnabled: (value: boolean) => void,
+    set: (id: string) => void,
+  ) => ({
+    options: soundOptions,
+    current: enabled() ? (soundOptions.find((o) => o.id === current()) ?? noneSound) : noneSound,
+    value: (o: (typeof soundOptions)[number]) => o.id,
+    label: (o: (typeof soundOptions)[number]) => language.t(o.label),
+    onHighlight: (option: (typeof soundOptions)[number] | undefined) => {
+      if (!option) return
+      playDemoSound(option.id === "none" ? undefined : option.id)
+    },
+    onSelect: (option: (typeof soundOptions)[number] | null) => {
+      if (!option) return
+      if (option.id === "none") {
+        setEnabled(false)
+        stopDemoSound()
+        return
+      }
+      setEnabled(true)
+      set(option.id)
+      playDemoSound(option.id)
+    },
+  })
+
  const InterfaceSection = () => (
    <LayoutTransitionToggle
      title={language.t("settings.general.row.newInterface.title")}
@@ -320,18 +251,59 @@ export const SettingsGeneralV2: Component<{
      title={language.t("settings.general.row.newInterfaceNotice.title")}
      description={language.t("settings.general.row.newInterfaceNotice.description")}
      dismiss={language.t("settings.general.row.newInterfaceNotice.dismiss")}
-      onDismiss={() => settings.general.dismissNewInterfaceNotice()}
+      onDismiss={settings.general.dismissNewInterfaceNotice}
    />
  )

  const GeneralSection = () => (
    <div class="settings-v2-section">
      <SettingsListV2>
-        <LanguageSetting />
+        <SettingsRowV2
+          title={language.t("settings.general.row.language.title")}
+          description={language.t("settings.general.row.language.description")}
+        >
+          <SelectV2
+            appearance="inline"
+            data-action="settings-language"
+            options={languageOptions()}
+            placement="bottom-end"
+            gutter={6}
+            current={languageOptions().find((o) => o.value === language.locale())}
+            value={(o) => o.value}
+            label={(o) => o.label}
+            onSelect={(option) => option && language.setLocale(option.value)}
+          />
+        </SettingsRowV2>

-        <PermissionScopeSetting controller={permissionScope} />
+        <SettingsRowV2
+          title={language.t("command.permissions.autoaccept.enable")}
+          description={language.t("toast.permissions.autoaccept.on.description")}
+        >
+          <div data-action="settings-auto-accept-permissions">
+            <Switch checked={accepting()} disabled={!dir()} onChange={toggleAccept} />
+          </div>
+        </SettingsRowV2>

-        <ShellSetting controller={shell} />
+        <SettingsRowV2
+          title={language.t("settings.general.row.shell.title")}
+          description={language.t("settings.general.row.shell.description")}
+        >
+          <SelectV2
+            appearance="inline"
+            data-action="settings-shell"
+            options={shellOptions()}
+            current={shellOptions().find((o) => o.value === currentShell()) ?? autoOption}
+            placement="bottom-end"
+            gutter={6}
+            value={(o) => o.id}
+            label={(o) => o.label}
+            onSelect={(option) => {
+              if (!option) return
+              if (option.value === currentShell()) return
+              serverSync().updateConfig({ shell: option.value })
+            }}
+          />
+        </SettingsRowV2>

        <SettingsRowV2
          title={language.t("settings.general.row.reasoningSummaries.title")}
@@ -442,6 +414,124 @@ export const SettingsGeneralV2: Component<{
    </div>
  )

+  const AppearanceSection = () => (
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.appearance")}</h3>
+
+      <SettingsListV2>
+        <SettingsRowV2
+          title={language.t("settings.general.row.colorScheme.title")}
+          description={language.t("settings.general.row.colorScheme.description")}
+        >
+          <SelectV2
+            appearance="inline"
+            data-action="settings-color-scheme"
+            options={colorSchemeOptions()}
+            current={colorSchemeOptions().find((o) => o.value === theme.colorScheme())}
+            placement="bottom-end"
+            gutter={6}
+            value={(o) => o.value}
+            label={(o) => o.label}
+            onSelect={(option) => option && theme.setColorScheme(option.value)}
+          />
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.row.theme.title")}
+          description={
+            <>
+              {language.t("settings.general.row.theme.description")}{" "}
+              <Link class="settings-v2-link" href="https://opencode.ai/docs/themes/">
+                {language.t("common.learnMore")}
+              </Link>
+            </>
+          }
+        >
+          <SelectV2
+            appearance="inline"
+            data-action="settings-theme"
+            options={themeOptions()}
+            current={themeOptions().find((o) => o.id === theme.themeId())}
+            placement="bottom-end"
+            gutter={6}
+            value={(o) => o.id}
+            label={(o) => o.name}
+            onSelect={(option) => {
+              if (!option) return
+              theme.setTheme(option.id)
+            }}
+          />
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.row.uiFont.title")}
+          description={language.t("settings.general.row.uiFont.description")}
+        >
+          <div class="w-full sm:w-[220px]">
+            <TextInputV2
+              data-action="settings-ui-font"
+              type="text"
+              appearance="base"
+              value={sans()}
+              onInput={(event) => settings.appearance.setUIFont(event.currentTarget.value)}
+              placeholder={sansDefault}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              aria-label={language.t("settings.general.row.uiFont.title")}
+              style={{ "font-family": sansFontFamily(settings.appearance.uiFont()) }}
+            />
+          </div>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.row.font.title")}
+          description={language.t("settings.general.row.font.description")}
+        >
+          <div class="w-full sm:w-[220px]">
+            <TextInputV2
+              data-action="settings-code-font"
+              type="text"
+              appearance="base"
+              value={mono()}
+              onInput={(event) => settings.appearance.setFont(event.currentTarget.value)}
+              placeholder={monoDefault}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              aria-label={language.t("settings.general.row.font.title")}
+              style={{ "font-family": monoFontFamily(settings.appearance.font()) }}
+            />
+          </div>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.row.terminalFont.title")}
+          description={language.t("settings.general.row.terminalFont.description")}
+        >
+          <div class="w-full sm:w-[220px]">
+            <TextInputV2
+              data-action="settings-terminal-font"
+              type="text"
+              appearance="base"
+              value={terminal()}
+              onInput={(event) => settings.appearance.setTerminalFont(event.currentTarget.value)}
+              placeholder={terminalDefault}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              aria-label={language.t("settings.general.row.terminalFont.title")}
+              style={{ "font-family": terminalFontFamily(settings.appearance.terminalFont()) }}
+            />
+          </div>
+        </SettingsRowV2>
+      </SettingsListV2>
+    </div>
+  )
+
  const NotificationsSection = () => (
    <div class="settings-v2-section">
      <h3 class="settings-v2-section-title">{language.t("settings.general.section.notifications")}</h3>
@@ -486,6 +576,68 @@ export const SettingsGeneralV2: Component<{
    </div>
  )

+  const SoundsSection = () => (
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.sounds")}</h3>
+
+      <SettingsListV2>
+        <SettingsRowV2
+          title={language.t("settings.general.sounds.agent.title")}
+          description={language.t("settings.general.sounds.agent.description")}
+        >
+          <SelectV2
+            appearance="inline"
+            data-action="settings-sounds-agent"
+            {...soundSelectProps(
+              () => settings.sounds.agentEnabled(),
+              () => settings.sounds.agent(),
+              (value) => settings.sounds.setAgentEnabled(value),
+              (id) => settings.sounds.setAgent(id),
+            )}
+            placement="bottom-end"
+            gutter={6}
+          />
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.sounds.permissions.title")}
+          description={language.t("settings.general.sounds.permissions.description")}
+        >
+          <SelectV2
+            appearance="inline"
+            data-action="settings-sounds-permissions"
+            {...soundSelectProps(
+              () => settings.sounds.permissionsEnabled(),
+              () => settings.sounds.permissions(),
+              (value) => settings.sounds.setPermissionsEnabled(value),
+              (id) => settings.sounds.setPermissions(id),
+            )}
+            placement="bottom-end"
+            gutter={6}
+          />
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.sounds.errors.title")}
+          description={language.t("settings.general.sounds.errors.description")}
+        >
+          <SelectV2
+            appearance="inline"
+            data-action="settings-sounds-errors"
+            {...soundSelectProps(
+              () => settings.sounds.errorsEnabled(),
+              () => settings.sounds.errors(),
+              (value) => settings.sounds.setErrorsEnabled(value),
+              (id) => settings.sounds.setErrors(id),
+            )}
+            placement="bottom-end"
+            gutter={6}
+          />
+        </SettingsRowV2>
+      </SettingsListV2>
+    </div>
+  )
+
  const UpdatesSection = () => (
    <div class="settings-v2-section">
      <h3 class="settings-v2-section-title">{language.t("settings.general.section.updates")}</h3>
@@ -507,7 +659,7 @@ export const SettingsGeneralV2: Component<{
          title={language.t("settings.updates.row.check.title")}
          description={language.t("settings.updates.row.check.description")}
        >
-          <ButtonV2 size="normal" variant="neutral" disabled={!updater.action().run} onClick={() => updater.run()}>
+          <ButtonV2 size="normal" variant="neutral" disabled={!updater.action().run} onClick={updater.run}>
            {language.t(updater.action().label)}
          </ButtonV2>
        </SettingsRowV2>
@@ -552,11 +704,11 @@ export const SettingsGeneralV2: Component<{

        <GeneralSection />

-        <AppearanceSection controller={appearance} />
+        <AppearanceSection />

        <NotificationsSection />

-        <SoundsSection controller={sounds} />
+        <SoundsSection />

        <Show when={desktop()}>
          <UpdatesSection />
@@ -5,12 +5,9 @@ import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { type Component, For, Show } from "solid-js"
-import { createStore } from "solid-js/store"
 import { useLanguage } from "@/context/language"
 import { useModels } from "@/context/models"
-import { useServerSDK } from "@/context/server-sdk"
 import { popularProviders } from "@/hooks/use-providers"
-import { Persist, persisted } from "@/utils/persist"
 import { SettingsListV2 } from "./parts/list"
 import { SettingsRowV2 } from "./parts/row"
 import "./settings-v2.css"
@@ -22,11 +19,6 @@ const PROVIDER_ICON_SIZE = 16
 export const SettingsModelsV2: Component = () => {
  const language = useLanguage()
  const models = useModels()
-  const serverSdk = useServerSDK()
-  const [store, setStore] = persisted(
-    Persist.serverGlobal(serverSdk().scope, "settings-v2.models.providers"),
-    createStore({ collapsed: {} as Record<string, boolean> }),
-  )

  const list = useFilteredList<ModelItem>({
    items: (_filter) => models.list(),
@@ -102,82 +94,41 @@ export const SettingsModelsV2: Component = () => {
            }
          >
            <For each={list.grouped.latest}>
-              {(group) => {
-                const searching = () => list.filter().length > 0
-                const expanded = () => searching() || !store.collapsed[group.category]
-
-                return (
-                  <div
-                    class="settings-v2-section"
-                    data-component="settings-models-provider"
-                    data-expanded={expanded() ? "" : undefined}
-                  >
-                    <h3 class="settings-v2-models-group-header">
-                      <button
-                        type="button"
-                        class="settings-v2-models-group-trigger"
-                        aria-expanded={expanded()}
-                        disabled={searching()}
-                        onClick={() => setStore("collapsed", group.category, expanded())}
-                      >
-                        <span class="settings-v2-models-group-chevron">
-                          <Show
-                            when={expanded()}
-                            fallback={
-                              <svg width="5" height="6" viewBox="0 0 5 6" fill="none" aria-hidden="true">
-                                <path
-                                  d="M0.75194 5.31663C0.41861 5.51103 0 5.27063 0 4.88473V0.500754C0 0.114854 0.41861 -0.125577 0.75194 0.0688635L4.5096 2.26084C4.8404 2.45378 4.8404 2.93168 4.5096 3.12462L0.75194 5.31663Z"
-                                  fill="currentColor"
-                                />
-                              </svg>
-                            }
-                          >
-                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-                              <path
-                                d="M5.37624 6.75194C5.18184 6.41861 5.42224 6 5.80814 6H10.1921C10.578 6 10.8184 6.41861 10.624 6.75194L8.43203 10.5096C8.23909 10.8404 7.76119 10.8404 7.56825 10.5096L5.37624 6.75194Z"
-                                fill="currentColor"
-                              />
-                            </svg>
-                          </Show>
-                        </span>
-                        <span class="settings-v2-models-group-label">
-                          <ProviderIcon
-                            id={group.category}
-                            width={PROVIDER_ICON_SIZE}
-                            height={PROVIDER_ICON_SIZE}
-                            class="settings-v2-models-provider-icon shrink-0"
-                          />
-                          <span class="settings-v2-section-title">{group.items[0].provider.name}</span>
-                        </span>
-                      </button>
-                    </h3>
-                    <Show when={expanded()}>
-                      <SettingsListV2>
-                        <For each={group.items}>
-                          {(item) => {
-                            const key = { providerID: item.provider.id, modelID: item.id }
-                            return (
-                              <SettingsRowV2 title={item.name} description="">
-                                <div>
-                                  <Switch
-                                    checked={models.visible(key)}
-                                    onChange={(checked) => {
-                                      models.setVisibility(key, checked)
-                                    }}
-                                    hideLabel
-                                  >
-                                    {item.name}
-                                  </Switch>
-                                </div>
-                              </SettingsRowV2>
-                            )
-                          }}
-                        </For>
-                      </SettingsListV2>
-                    </Show>
+              {(group) => (
+                <div class="settings-v2-section" data-component="settings-models-provider">
+                  <div class="settings-v2-models-group-header">
+                    <ProviderIcon
+                      id={group.category}
+                      width={PROVIDER_ICON_SIZE}
+                      height={PROVIDER_ICON_SIZE}
+                      class="settings-v2-models-provider-icon shrink-0"
+                    />
+                    <h3 class="settings-v2-section-title">{group.items[0].provider.name}</h3>
                  </div>
-                )
-              }}
+                  <SettingsListV2>
+                    <For each={group.items}>
+                      {(item) => {
+                        const key = { providerID: item.provider.id, modelID: item.id }
+                        return (
+                          <SettingsRowV2 title={item.name} description="">
+                            <div>
+                              <Switch
+                                checked={models.visible(key)}
+                                onChange={(checked) => {
+                                  models.setVisibility(key, checked)
+                                }}
+                                hideLabel
+                              >
+                                {item.name}
+                              </Switch>
+                            </div>
+                          </SettingsRowV2>
+                        )
+                      }}
+                    </For>
+                  </SettingsListV2>
+                </div>
+              )}
            </For>
          </Show>
        </Show>
@@ -373,64 +373,14 @@
 }

 .settings-v2-models {
-  gap: 12px;
-}
-
-.settings-v2-models .settings-v2-section {
-  gap: 12px;
-}
-
-.settings-v2-models .settings-v2-section[data-expanded] {
-  padding-bottom: 12px;
+  gap: 24px;
 }

 .settings-v2-models-group-header {
-  display: flex;
-  align-items: center;
-  height: 28px;
-}
-
-.settings-v2-models-group-trigger {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  height: 28px;
-  padding: 4px 8px 4px 4px;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--v2-text-text-base);
-}
-
-.settings-v2-models-group-trigger:focus-visible {
-  outline: 2px solid var(--v2-border-border-focus);
-  outline-offset: 2px;
-}
-
-@media (hover: hover) {
-  .settings-v2-models-group-trigger:not(:disabled):hover {
-    background-color: var(--v2-background-bg-layer-02);
-  }
-}
-
-.settings-v2-models-group-trigger:disabled {
-  cursor: default;
-}
-
-.settings-v2-models-group-chevron {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  color: var(--v2-icon-icon-muted);
-}
-
-.settings-v2-models-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
+  padding-bottom: 8px;
 }

 .settings-v2-models .settings-v2-section-title {
@@ -444,10 +394,6 @@
  color: var(--v2-icon-icon-base);
 }

-.settings-v2-models [data-component="settings-v2-list"] {
-  padding-inline: 16px;
-}
-
 .settings-v2-models .settings-v2-section-title + [data-component="settings-v2-list"] {
  margin-top: 0;
 }
@@ -338,22 +338,6 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                  keybind: "mod+shift+t",
                  onSelect: () => tabsStoreActions.reopenClosedTab(),
                },
-                {
-                  id: `tab.prev`,
-                  category: "tab",
-                  title: "",
-                  keybind: `mod+option+ArrowLeft,ctrl+shift+tab`,
-                  hidden: true,
-                  onSelect: tabs.previous,
-                },
-                {
-                  id: `tab.next`,
-                  category: "tab",
-                  title: "",
-                  keybind: `mod+option+ArrowRight,ctrl+tab`,
-                  hidden: true,
-                  onSelect: tabs.next,
-                },
              ].filter((v) => v !== undefined)
            })

@@ -1,43 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { nextTab, previousTab, rememberTab, type TabHistory } from "./tab-history"
-
-function history(): TabHistory {
-  return { stack: [], index: -1 }
-}
-
-describe("tab history", () => {
-  test("moves backward and forward through selected tabs", () => {
-    const selected = ["a", "b", "c"].reduce(rememberTab, history())
-    const available = new Set(selected.stack)
-
-    const previous = previousTab(selected, available)
-    expect(previous?.key).toBe("b")
-
-    const first = previousTab(previous!.state, available)
-    expect(first?.key).toBe("a")
-
-    const next = nextTab(first!.state, available)
-    expect(next?.key).toBe("b")
-  })
-
-  test("replaces forward history after a new selection", () => {
-    const selected = ["a", "b", "c"].reduce(rememberTab, history())
-    const previous = previousTab(selected, new Set(selected.stack))
-    const next = rememberTab(previous!.state, "d")
-
-    expect(next).toEqual({ stack: ["a", "b", "d"], index: 2 })
-    expect(nextTab(next, new Set(next.stack))).toBeUndefined()
-  })
-
-  test("skips tabs that are no longer open", () => {
-    const selected = ["a", "b", "c"].reduce(rememberTab, history())
-
-    expect(previousTab(selected, new Set(["a", "c"]))?.key).toBe("a")
-  })
-
-  test("skips a repeated current tab after closing the previous selection", () => {
-    const selected = ["a", "b", "c", "b"].reduce(rememberTab, history())
-
-    expect(previousTab(selected, new Set(["a", "b"]))?.key).toBe("a")
-  })
-})
@@ -1,28 +0,0 @@
-const MAX_TAB_HISTORY = 100
-
-export type TabHistory = {
-  stack: string[]
-  index: number
-}
-
-export function rememberTab(state: TabHistory, key: string): TabHistory {
-  if (state.stack[state.index] === key) return state
-  const stack = state.stack.slice(0, state.index + 1).concat(key).slice(-MAX_TAB_HISTORY)
-  return { stack, index: stack.length - 1 }
-}
-
-export function previousTab(state: TabHistory, available: Set<string>) {
-  return move(state, -1, available)
-}
-
-export function nextTab(state: TabHistory, available: Set<string>) {
-  return move(state, 1, available)
-}
-
-function move(state: TabHistory, offset: -1 | 1, available: Set<string>) {
-  const current = state.stack[state.index]
-  for (let index = state.index + offset; index >= 0 && index < state.stack.length; index += offset) {
-    const key = state.stack[index]
-    if (key && key !== current && available.has(key)) return { state: { ...state, index }, key }
-  }
-}
@@ -12,7 +12,6 @@ import { sessionHref } from "@/utils/session-route"
 import { createTabMemory } from "./tab-memory"
 import { nextTabAfterClose, pushClosedTab, removeClosedTabs, takeClosedTab, type ClosedTab } from "./closed-tabs"
 import { createDraftPromptSession, type PromptModel } from "./prompt-state"
-import { nextTab, previousTab, rememberTab, type TabHistory } from "./tab-history"

 export type SessionTab = {
  type: "session"
@@ -80,7 +79,6 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
    const memory = createTabMemory(getOwner())

    const closing = new Set<string>()
-    let history: TabHistory = { stack: [], index: -1 }
    let recentWrite = 0
    let recentValue: string | undefined

@@ -152,21 +150,10 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({

    const navigateTab = (tab: Tab) => {
      const href = tabHref(tab)
-      history = rememberTab(history, tabKey(tab))
      setRecentKey(tabKey(tab))
      navigate(href)
    }

-    const moveHistory = (direction: "previous" | "next") => {
-      const available = new Set(store.map(tabKey))
-      const result = direction === "previous" ? previousTab(history, available) : nextTab(history, available)
-      if (!result) return
-      const tab = store.find((item) => tabKey(item) === result.key)
-      if (!tab) return
-      history = result.state
-      navigateTab(tab)
-    }
-
    const removeTab = (index: number) => {
      const tab = store[index]
      if (!tab) return
@@ -372,11 +359,8 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
      select: navigateTab,
      remember(tab: Tab) {
        const key = tabKey(tab)
-        history = rememberTab(history, key)
        if (recentKey() !== key) setRecentKey(key)
      },
-      previous: () => moveHistory("previous"),
-      next: () => moveHistory("next"),
      toggleHome(input: { home: boolean; current?: Tab }) {
        if (input.home) {
          const tab = store.find((tab) => tabKey(tab) === recentKey())
@@ -2,17 +2,6 @@ import { describe, expect, test } from "bun:test"
 import { DESKTOP_MENU } from "./desktop-menu"

 describe("desktop menu", () => {
-  test("navigates between tabs", () => {
-    const items = DESKTOP_MENU.flatMap((menu) => menu.items ?? []).filter(
-      (item) => item.type === "item" && (item.label === "Previous Tab" || item.label === "Next Tab"),
-    )
-
-    expect(items).toEqual([
-      { type: "item", label: "Previous Tab", command: "tab.prev", accelerator: { macos: "Option+Up" } },
-      { type: "item", label: "Next Tab", command: "tab.next", accelerator: { macos: "Option+Down" } },
-    ])
-  })
-
  test("exports logs through the desktop command registry", () => {
    const items = DESKTOP_MENU.flatMap((menu) => menu.items ?? []).filter(
      (item) => item.type === "item" && item.label === "Export Logs...",
@@ -168,8 +168,8 @@ export const DESKTOP_MENU: DesktopMenu[] = [
      { type: "item", label: "Back", command: "common.goBack", accelerator: { macos: "Cmd+[" } },
      { type: "item", label: "Forward", command: "common.goForward", accelerator: { macos: "Cmd+]" } },
      { type: "separator" },
-      { type: "item", label: "Previous Tab", command: "tab.prev", accelerator: { macos: "Option+Up" } },
-      { type: "item", label: "Next Tab", command: "tab.next", accelerator: { macos: "Option+Down" } },
+      { type: "item", label: "Previous Session", command: "session.previous", accelerator: { macos: "Option+Up" } },
+      { type: "item", label: "Next Session", command: "session.next", accelerator: { macos: "Option+Down" } },
      { type: "separator" },
      {
        type: "item",
@@ -1,5 +1,5 @@
 import type { Session } from "@opencode-ai/sdk/v2/client"
-import { type Accessor, createMemo, For, Show, Suspense } from "solid-js"
+import { type Accessor, createMemo, For, Show } from "solid-js"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
@@ -39,6 +39,7 @@ function isBackgroundOpen(event: MouseEvent) {
 export type HomeSessionsViewProps = {
  language: ReturnType<typeof useLanguage>
  groups: Accessor<HomeSessionGroup[]>
+  loading: Accessor<boolean>
  showProjectName: Accessor<boolean>
  server: Accessor<ServerConnection.Key>
  canCreateSession: Accessor<boolean>
@@ -80,22 +81,20 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
    >
      <div class="sticky top-0 z-30 shrink-0 bg-v2-background-bg-base pb-3 pt-6 lg:pt-12" onWheel={props.onWheel}>
        <HomeSessionSearch {...props} />
-        <Suspense>
-          <Show when={props.groups().length > 0 && props.canCreateSession()}>
-            <div class="pointer-events-none absolute right-0 top-[84px] z-20 flex lg:top-[108px]">
-              <ButtonV2
-                data-action="home-new-session"
-                variant="ghost-muted"
-                size="normal"
-                icon="edit"
-                class="pointer-events-auto h-7 px-2 [font-weight:530]"
-                onClick={props.onCreateSession}
-              >
-                {props.language.t("command.session.new")}
-              </ButtonV2>
-            </div>
-          </Show>
-        </Suspense>
+        <Show when={props.groups().length > 0 && props.canCreateSession()}>
+          <div class="pointer-events-none absolute right-0 top-[84px] z-20 flex lg:top-[108px]">
+            <ButtonV2
+              data-action="home-new-session"
+              variant="ghost-muted"
+              size="normal"
+              icon="edit"
+              class="pointer-events-auto h-7 px-2 [font-weight:530]"
+              onClick={props.onCreateSession}
+            >
+              {props.language.t("command.session.new")}
+            </ButtonV2>
+          </div>
+        </Show>
      </div>
      <div class="pointer-events-none sticky top-[84px] z-40 h-0 -mr-3 lg:top-[108px]">
        <div
@@ -105,7 +104,8 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
        />
      </div>
      <div class="-mr-3 min-h-[calc(100cqh-72px)] lg:min-h-[calc(100cqh-96px)]">
-        <Suspense
+        <Show
+          when={!props.loading()}
          fallback={
            <div class="pt-3">
              <HomeSessionSkeleton label={props.language.t("common.loading")} />
@@ -141,7 +141,7 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
              </For>
            </div>
          </Show>
-        </Suspense>
+        </Show>
      </div>
    </section>
  )
@@ -12,6 +12,7 @@ export function HomeSessions(props: {
    <HomeSessionsView
      language={props.sessions.copy.language}
      groups={props.sessions.data.groups}
+      loading={props.sessions.data.loading}
      showProjectName={props.sessions.session.showProjectName}
      server={props.sessions.session.server}
      canCreateSession={props.sessions.session.canCreate}
@@ -1,49 +1,290 @@
-import { createPromptProjectController } from "@/components/prompt-project-selector"
-import { useTitlebarRightMount } from "@/components/titlebar"
+import { Show, createEffect, createMemo, createResource, createSignal, onCleanup, untrack } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Portal } from "solid-js/web"
+import { useSearchParams } from "@solidjs/router"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { NewSessionDesignView } from "@/components/session"
+import { PromptInputV2Composer, usePromptInputV2Controller } from "@/components/prompt-input-v2"
+import { StatusPopoverV2 } from "@/components/status-popover"
+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 { useSettings } from "@/context/settings"
-import { createEffect, createResource } from "solid-js"
-import { createNewSessionDraftController } from "./new-session/new-session-draft-controller"
-import { NewSessionStatus, NewSessionView } from "./new-session/new-session-view"
-import { createNewSessionWorkspaceController } from "./new-session/new-session-workspace-controller"
-import { useNewSessionCommands } from "./new-session/use-new-session-commands"
+import { createPromptInputController, createPromptProjectControls } from "@/pages/session/composer"
+import { useSessionKey } from "@/pages/session/session-layout"
+import { useComposerCommands } from "@/pages/session/use-composer-commands"
+import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
+import { PromptGitStatus, PromptWorkspaceSelector } from "@/components/prompt-workspace-selector"
+import { useTitlebarRightMount } from "@/components/titlebar"
+import { useCommand } from "@/context/command"
+import { useProviders } from "@/hooks/use-providers"
+import { useSettingsCommand } from "@/components/settings-dialog"
+import { Persist, persisted } from "@/utils/persist"
+import createPresence from "solid-presence"
+import { useLocal } from "@/context/local"
+import { createPromptModelSelection } from "@/pages/session/composer/prompt-model-selection"

-/** The draft-only V2 session page. Submitting promotes the draft into a real session. */
+const workspaceBarEnabled = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
+const providerTipDismissalDuration = 30 * 24 * 60 * 60 * 1000
+const providerTipExitDuration = 250
+
+/**
+ * The `/new-session` draft page. Unlike `session.tsx`, this only renders the prompt
+ * composer for a brand-new session — no terminal, review pane, file tree, or message
+ * timeline. Submitting promotes the draft into a real session (see prompt-input/submit).
+ */
 export default function NewSessionPage() {
+  const prompt = usePrompt()
+  const sdk = useSDK()
+  const sync = useSync()
+  const serverSync = useServerSync()
+  const comments = useComments()
+  const language = useLanguage()
  const settings = useSettings()
+  const dialog = useDialog()
+  const command = useCommand()
+  const providers = useProviders(() => sdk().directory)
+  const openProviders = () => {
+    void import("@/components/dialog-connect-provider").then(({ DialogConnectProvider }) => {
+      void dialog.show(() => <DialogConnectProvider directory={() => sdk().directory} />)
+    })
+  }
+  useSettingsCommand()
+  const route = useSessionKey()
+  const [searchParams, setSearchParams] = useSearchParams<{ draftId?: string; prompt?: string }>()
+  const local = useLocal()
+  const model = createPromptModelSelection({ agent: local.agent.current })
+
+  useComposerCommands({ model })
+
+  const inputController = createPromptInputController({
+    sessionKey: route.sessionKey,
+    sessionID: () => route.params.id,
+    queryOptions: serverSync().queryOptions,
+    model,
+  })
+  const projectControls = createPromptProjectControls()
+
+  const [store, setStore] = createStore<{ worktree?: string }>({})
  const rightMount = useTitlebarRightMount()
-  const workspace = createNewSessionWorkspaceController()
-  const draft = createNewSessionDraftController({
-    worktree: workspace.selection.value,
-    resetWorktree: workspace.selection.reset,
+
+  const showWorkspaceBar = createMemo(() => workspaceBarEnabled && sync().project?.vcs === "git")
+  const newSessionWorktree = createMemo(() => {
+    if (!showWorkspaceBar()) return "main"
+    if (store.worktree) return store.worktree
+    const project = sync().project
+    if (project && sdk().directory !== project.worktree) return sdk().directory
+    return "main"
  })
-  const project = createPromptProjectController({
-    controls: draft.project.controls,
-    onDone: draft.input.restoreFocus,
+  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()
  })
-  useNewSessionCommands({
-    restoreFocus: draft.input.restoreFocus,
-    project: {
-      empty: project.empty,
-      open: () => project.setOpen(true),
+  const promptInputV2Controller = usePromptInputV2Controller({
+    get controls() {
+      return inputController()
    },
+    get newSessionWorktree() {
+      return newSessionWorktree()
+    },
+    onNewSessionWorktreeReset: () => setStore("worktree", undefined),
+    onSubmit: () => comments.clear(),
  })
+  const projectController = createPromptProjectController({
+    controls: projectControls,
+    onDone: promptInputV2Controller.restoreFocus,
+  })
+
+  command.register("new-session", () => [
+    {
+      id: "command.palette",
+      title: language.t("command.palette"),
+      hidden: true,
+      onSelect: async () => {
+        const { DialogSelectFile } = await import("@/components/dialog-select-file")
+        void dialog.show(() => <DialogSelectFile />)
+      },
+    },
+    {
+      id: "input.focus",
+      title: language.t("command.input.focus"),
+      category: language.t("command.category.view"),
+      keybind: "ctrl+l",
+      onSelect: () => promptInputV2Controller.restoreFocus(),
+    },
+    {
+      id: "project.select",
+      title: language.t("session.new.project.search"),
+      category: language.t("command.category.project"),
+      keybind: "mod+shift+o",
+      disabled: projectController.empty(),
+      onSelect: () => projectController.setOpen(true),
+    },
+  ])
+
  createEffect(() => {
-    if (!draft.prompt.ready()) return
-    draft.input.restoreFocus()
+    if (!prompt.ready()) return
+    untrack(() => {
+      const text = searchParams.prompt
+      if (!text) return
+      prompt.set([{ type: "text", content: text, start: 0, end: text.length }], text.length)
+      setSearchParams({ ...searchParams, prompt: undefined })
+    })
  })
+
+  createEffect(() => {
+    if (!prompt.ready()) return
+    promptInputV2Controller.restoreFocus()
+  })
+
  const ready = Promise.resolve()
  const [suspendUntilPromptReady] = createResource(
-    () => draft.prompt.readyPromise() ?? ready,
+    () => prompt.ready.promise ?? ready,
    (promise) => promise.then(() => true),
  )

  return (
    <div class="relative size-full overflow-hidden flex flex-col">
      {suspendUntilPromptReady()}
-      <NewSessionStatus mount={rightMount} visible={settings.visibility.status} />
+      <Show when={rightMount()}>
+        {(mount) => (
+          <Portal mount={mount()}>
+            <Show when={settings.visibility.status()}>
+              <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
+                <StatusPopoverV2 />
+              </Tooltip>
+            </Show>
+          </Portal>
+        )}
+      </Show>
      <div class="flex-1 min-h-0 flex flex-col gap-2 p-2">
-        <NewSessionView input={draft.input} project={project} workspace={workspace} />
+        <div class="@container relative flex flex-col min-h-0 h-full flex-1">
+          <div class="flex-1 min-h-0 overflow-hidden rounded-[10px]">
+            <NewSessionDesignView>
+              <div class={NEW_SESSION_CONTENT_WIDTH}>
+                <div class="flex flex-col gap-8">
+                  <PromptInputV2Composer controller={promptInputV2Controller} />
+                  <Show when={projectController.empty()}>
+                    <PromptProjectAddButton controller={projectController} />
+                  </Show>
+                  <Show when={projectController.selected()}>
+                    <div class="flex min-h-7 min-w-0 flex-col items-center justify-center gap-0 text-v2-text-text-faint sm:flex-row">
+                      <PromptProjectSelector controller={projectController} placement="bottom" />
+                      <Show
+                        when={showWorkspaceBar()}
+                        fallback={<PromptGitStatus branch={selectedBranch()} noGit={sync().project?.vcs !== "git"} />}
+                      >
+                        <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={promptInputV2Controller.restoreFocus}
+                        />
+                      </Show>
+                    </div>
+                  </Show>
+                </div>
+                {/*</Show>*/}
+              </div>
+            </NewSessionDesignView>
+            <ProviderTip
+              ready={() => serverSync().child(sdk().directory)[0].provider_ready}
+              connected={() => providers.paid().length > 0}
+              openProviders={openProviders}
+            />
+          </div>
+        </div>
      </div>
    </div>
  )
 }
+
+function ProviderTip(props: { ready: () => boolean; connected: () => boolean; openProviders: () => void }) {
+  const language = useLanguage()
+  const [persistedState, setPersistedState, , persistedReady] = persisted(
+    Persist.global("new-session.provider-tip"),
+    createStore({ dismissedAt: 0 }),
+  )
+  const visible = createMemo(
+    () =>
+      props.ready() &&
+      persistedReady() &&
+      !props.connected() &&
+      Date.now() - persistedState.dismissedAt >= providerTipDismissalDuration,
+  )
+
+  function dismiss() {
+    setPersistedState("dismissedAt", Date.now())
+  }
+
+  const [ref, setRef] = createSignal<HTMLDivElement>()
+  const presence = createPresence({
+    show: () => visible(),
+    element: () => ref() ?? null,
+  })
+
+  return (
+    <Show when={presence.present()}>
+      <div class="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center px-10">
+        <div
+          ref={setRef}
+          data-component="provider-tip"
+          data-visible={visible()}
+          class="group/provider-tip pointer-events-auto relative flex h-6 max-w-full items-center transition-[opacity,transform] duration-[250ms] ease-[cubic-bezier(0.215,0.61,0.355,1)] motion-reduce:transition-none"
+          classList={{
+            "data-[visible=false]:animate-out fade-out slide-out-to-bottom-4": true,
+          }}
+        >
+          <button
+            type="button"
+            class="flex h-6 min-w-0 items-center rounded-[4px] pl-1.5 text-[13px] leading-none tracking-[-0.04px] text-v2-text-text-faint transition-[background-color,color] duration-150 ease-in-out hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-text-text-muted focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-text-text-muted focus-visible:outline-none"
+            onClick={props.openProviders}
+          >
+            <span class="truncate">{language.t("home.providerTip")}</span>
+            <span class="flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
+              <IconV2 name="chevron-down" size="small" class="-rotate-90" />
+            </span>
+          </button>
+          <TooltipV2
+            class="hover-reveal absolute left-full top-0 flex h-6 w-7 items-center justify-end delay-0 duration-0 group-hover/provider-tip:delay-[250ms] group-hover/provider-tip:duration-150 group-hover/provider-tip:opacity-100 focus-within:delay-0 focus-within:duration-0 focus-within:opacity-100"
+            placement="top"
+            openDelay={1000}
+            value={language.t("common.dismiss")}
+          >
+            <button
+              type="button"
+              class="flex size-6 items-center justify-center rounded-[4px] text-v2-icon-icon-muted transition-[background-color,color] duration-150 ease-in-out hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-icon-icon-base focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-icon-icon-base focus-visible:outline-none"
+              aria-label={language.t("common.dismiss")}
+              onClick={dismiss}
+            >
+              <IconV2 name="xmark-small" />
+            </button>
+          </TooltipV2>
+        </div>
+      </div>
+    </Show>
+  )
+}
@@ -1,64 +0,0 @@
-import { useSearchParams } from "@solidjs/router"
-import { createEffect, untrack } from "solid-js"
-import { usePromptInputV2Controller } from "@/components/prompt-input-v2"
-import { useComments } from "@/context/comments"
-import { useLocal } from "@/context/local"
-import { usePrompt } from "@/context/prompt"
-import { useServerSync } from "@/context/server-sync"
-import { createPromptInputController, createPromptProjectControls } from "@/pages/session/composer"
-import { createPromptModelSelection } from "@/pages/session/composer/prompt-model-selection"
-import { useSessionKey } from "@/pages/session/session-layout"
-import { useComposerCommands } from "@/pages/session/use-composer-commands"
-
-export function createNewSessionDraftController(workspace: { worktree: () => string; resetWorktree: () => void }) {
-  const prompt = usePrompt()
-  const serverSync = useServerSync()
-  const comments = useComments()
-  const local = useLocal()
-  const route = useSessionKey()
-  const [searchParams, setSearchParams] = useSearchParams<{ draftId?: string; prompt?: string }>()
-  const model = createPromptModelSelection({ agent: () => local.agent.current() })
-
-  useComposerCommands({ model })
-
-  const controls = createPromptInputController({
-    sessionKey: route.sessionKey,
-    sessionID: () => route.params.id,
-    queryOptions: serverSync().queryOptions,
-    model,
-  })
-  const projectControls = createPromptProjectControls()
-  const input = usePromptInputV2Controller({
-    get controls() {
-      return controls()
-    },
-    get newSessionWorktree() {
-      return workspace.worktree()
-    },
-    onNewSessionWorktreeReset: workspace.resetWorktree,
-    onSubmit: comments.clear,
-  })
-
-  createEffect(() => {
-    if (!prompt.ready()) return
-    untrack(() => {
-      const text = searchParams.prompt
-      if (!text) return
-      prompt.set([{ type: "text", content: text, start: 0, end: text.length }], text.length)
-      setSearchParams({ ...searchParams, prompt: undefined })
-    })
-  })
-
-  return {
-    input,
-    prompt: {
-      ready: prompt.ready,
-      readyPromise: () => prompt.ready.promise,
-    },
-    project: {
-      controls: projectControls,
-    },
-  }
-}
-
-export type NewSessionDraftController = ReturnType<typeof createNewSessionDraftController>
@@ -1,162 +0,0 @@
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
-import { WordmarkV2 } from "@opencode-ai/ui/v2/wordmark-v2"
-import { Show, createMemo, createSignal, type Accessor } from "solid-js"
-import { createStore } from "solid-js/store"
-import { Portal } from "solid-js/web"
-import createPresence from "solid-presence"
-import { PromptInputV2Composer } from "@/components/prompt-input-v2"
-import { PromptGitStatus, PromptWorkspaceSelector } from "@/components/prompt-workspace-selector"
-import {
-  PromptProjectAddButton,
-  PromptProjectSelector,
-  type PromptProjectController,
-} from "@/components/prompt-project-selector"
-import { StatusPopoverV2 } from "@/components/status-popover"
-import { useLanguage } from "@/context/language"
-import { useSDK } from "@/context/sdk"
-import { useServerSync } from "@/context/server-sync"
-import { useProviders } from "@/hooks/use-providers"
-import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
-import { Persist, persisted } from "@/utils/persist"
-import type { NewSessionDraftController } from "./new-session-draft-controller"
-import type { NewSessionWorkspaceController } from "./new-session-workspace-controller"
-
-const providerTipDismissalDuration = 30 * 24 * 60 * 60 * 1000
-
-export function NewSessionView(props: {
-  input: NewSessionDraftController["input"]
-  project: PromptProjectController
-  workspace: NewSessionWorkspaceController
-}) {
-  return (
-    <div class="@container relative flex flex-col min-h-0 h-full flex-1">
-      <div
-        data-component="session-new-design"
-        class="relative flex-1 min-h-0 overflow-hidden rounded-[10px] bg-v2-background-bg-deep"
-      >
-        <div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
-          <div class={NEW_SESSION_CONTENT_WIDTH}>
-            <WordmarkV2 class="h-auto w-full text-v2-background-bg-inverse" />
-            <div class="mt-8 flex flex-col gap-8">
-              <PromptInputV2Composer controller={props.input} />
-              <Show when={props.project.empty()}>
-                <PromptProjectAddButton controller={props.project} />
-              </Show>
-              <Show when={props.project.selected()}>
-                <div class="flex min-h-7 min-w-0 flex-col items-center justify-center gap-0 text-v2-text-text-faint sm:flex-row">
-                  <PromptProjectSelector controller={props.project} placement="bottom" />
-                  <Show
-                    when={props.workspace.bar.visible()}
-                    fallback={
-                      <PromptGitStatus branch={props.workspace.bar.branch()} noGit={!props.workspace.project.git()} />
-                    }
-                  >
-                    <PromptWorkspaceSelector
-                      value={props.workspace.selection.value()}
-                      projectRoot={props.workspace.project.root()}
-                      workspaces={props.workspace.project.workspaces()}
-                      branch={props.workspace.bar.branch()}
-                      onChange={props.workspace.selection.set}
-                      onDone={props.input.restoreFocus}
-                    />
-                  </Show>
-                </div>
-              </Show>
-            </div>
-          </div>
-        </div>
-        <ProviderTip />
-      </div>
-    </div>
-  )
-}
-
-export function NewSessionStatus(props: { mount: Accessor<HTMLElement | null>; visible: Accessor<boolean> }) {
-  const language = useLanguage()
-
-  return (
-    <Show when={props.mount()}>
-      {(mount) => (
-        <Portal mount={mount()}>
-          <Show when={props.visible()}>
-            <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
-              <StatusPopoverV2 />
-            </Tooltip>
-          </Show>
-        </Portal>
-      )}
-    </Show>
-  )
-}
-
-function ProviderTip() {
-  const language = useLanguage()
-  const dialog = useDialog()
-  const sdk = useSDK()
-  const serverSync = useServerSync()
-  const providers = useProviders(() => sdk().directory)
-  const [persistedState, setPersistedState, , persistedReady] = persisted(
-    Persist.global("new-session.provider-tip"),
-    createStore({ dismissedAt: 0 }),
-  )
-  const visible = createMemo(
-    () =>
-      serverSync().child(sdk().directory)[0].provider_ready &&
-      persistedReady() &&
-      providers.paid().length === 0 &&
-      Date.now() - persistedState.dismissedAt >= providerTipDismissalDuration,
-  )
-  const [ref, setRef] = createSignal<HTMLDivElement>()
-  const presence = createPresence({
-    show: visible,
-    element: () => ref() ?? null,
-  })
-  const openProviders = () => {
-    void import("@/components/dialog-connect-provider").then(({ DialogConnectProvider }) => {
-      void dialog.show(() => <DialogConnectProvider directory={() => sdk().directory} />)
-    })
-  }
-
-  return (
-    <Show when={presence.present()}>
-      <div class="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center px-10">
-        <div
-          ref={setRef}
-          data-component="provider-tip"
-          data-visible={visible()}
-          class="group/provider-tip pointer-events-auto relative flex h-6 max-w-full items-center transition-[opacity,transform] duration-[250ms] ease-[cubic-bezier(0.215,0.61,0.355,1)] motion-reduce:transition-none"
-          classList={{ "data-[visible=false]:animate-out fade-out slide-out-to-bottom-4": true }}
-        >
-          <button
-            type="button"
-            class="flex h-6 min-w-0 items-center rounded-[4px] pl-1.5 text-[13px] leading-none tracking-[-0.04px] text-v2-text-text-faint transition-[background-color,color] duration-150 ease-in-out hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-text-text-muted focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-text-text-muted focus-visible:outline-none"
-            onClick={openProviders}
-          >
-            <span class="truncate">{language.t("home.providerTip")}</span>
-            <span class="flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
-              <IconV2 name="chevron-down" size="small" class="-rotate-90" />
-            </span>
-          </button>
-          <TooltipV2
-            class="hover-reveal absolute left-full top-0 flex h-6 w-7 items-center justify-end delay-0 duration-0 group-hover/provider-tip:delay-[250ms] group-hover/provider-tip:duration-150 group-hover/provider-tip:opacity-100 focus-within:delay-0 focus-within:duration-0 focus-within:opacity-100"
-            placement="top"
-            delay="intent"
-            value={language.t("common.dismiss")}
-          >
-            <button
-              type="button"
-              class="flex size-6 items-center justify-center rounded-[4px] text-v2-icon-icon-muted transition-[background-color,color] duration-150 ease-in-out hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-icon-icon-base focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-icon-icon-base focus-visible:outline-none"
-              aria-label={language.t("common.dismiss")}
-              onClick={() => setPersistedState("dismissedAt", Date.now())}
-            >
-              <IconV2 name="xmark-small" />
-            </button>
-          </TooltipV2>
-        </div>
-      </div>
-    </Show>
-  )
-}
@@ -1,43 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import {
-  normalizeNewSessionWorktree,
-  resolveNewSessionBranch,
-  resolveNewSessionWorktree,
-} from "./new-session-workspace-controller"
-
-describe("new session workspace selection", () => {
-  test("uses main when the workspace bar is unavailable", () => {
-    expect(
-      resolveNewSessionWorktree({
-        enabled: false,
-        selected: "/project/feature",
-        directory: "/project/feature",
-        projectWorktree: "/project",
-      }),
-    ).toBe("main")
-  })
-
-  test("derives an existing worktree from the current directory", () => {
-    expect(
-      resolveNewSessionWorktree({ enabled: true, directory: "/project/feature", projectWorktree: "/project" }),
-    ).toBe("/project/feature")
-    expect(resolveNewSessionWorktree({ enabled: true, directory: "/project", projectWorktree: "/project" })).toBe(
-      "main",
-    )
-  })
-
-  test("normalizes main to the project root outside the main worktree", () => {
-    expect(normalizeNewSessionWorktree("main", "/project/feature", "/project")).toBe("/project")
-    expect(normalizeNewSessionWorktree("main", "/project", "/project")).toBe("main")
-  })
-
-  test("falls back to the local branch for main, create, and unknown worktrees", () => {
-    const branch = (worktree: string) => (worktree === "/project/feature" ? "feature" : undefined)
-    expect(resolveNewSessionBranch({ worktree: "main", local: "dev", worktreeBranch: branch })).toBe("dev")
-    expect(resolveNewSessionBranch({ worktree: "create", local: "dev", worktreeBranch: branch })).toBe("dev")
-    expect(resolveNewSessionBranch({ worktree: "/project/feature", local: "dev", worktreeBranch: branch })).toBe(
-      "feature",
-    )
-    expect(resolveNewSessionBranch({ worktree: "/missing", local: "dev", worktreeBranch: branch })).toBe("dev")
-  })
-})
@@ -1,77 +0,0 @@
-import { createMemo, createSignal } from "solid-js"
-import { useSDK } from "@/context/sdk"
-import { useServerSync } from "@/context/server-sync"
-import { useSync } from "@/context/sync"
-
-const workspaceBarEnabled = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
-
-export function resolveNewSessionWorktree(input: {
-  enabled: boolean
-  selected?: string
-  directory: string
-  projectWorktree?: string
-}) {
-  if (!input.enabled) return "main"
-  if (input.selected) return input.selected
-  if (input.projectWorktree && input.directory !== input.projectWorktree) return input.directory
-  return "main"
-}
-
-export function normalizeNewSessionWorktree(value: string, directory: string, projectWorktree?: string) {
-  if (value === "main" && projectWorktree !== directory) return projectWorktree
-  return value
-}
-
-export function resolveNewSessionBranch(input: {
-  worktree: string
-  local?: string
-  worktreeBranch: (worktree: string) => string | undefined
-}) {
-  if (input.worktree === "main" || input.worktree === "create") return input.local
-  return input.worktreeBranch(input.worktree) ?? input.local
-}
-
-export function createNewSessionWorkspaceController() {
-  const sdk = useSDK()
-  const sync = useSync()
-  const serverSync = useServerSync()
-  const [worktree, setWorktree] = createSignal<string>()
-  const visible = createMemo(() => workspaceBarEnabled && sync().project?.vcs === "git")
-  const value = createMemo(() =>
-    resolveNewSessionWorktree({
-      enabled: visible(),
-      selected: worktree(),
-      directory: sdk().directory,
-      projectWorktree: sync().project?.worktree,
-    }),
-  )
-  const projectRoot = createMemo(() => sync().project?.worktree ?? sdk().directory)
-  const localBranch = createMemo(() => serverSync().child(projectRoot())[0].vcs?.branch)
-  const branch = createMemo(() =>
-    resolveNewSessionBranch({
-      worktree: value(),
-      local: localBranch(),
-      worktreeBranch: (worktree) => serverSync().child(worktree)[0].vcs?.branch,
-    }),
-  )
-
-  return {
-    selection: {
-      value,
-      reset: () => setWorktree(),
-      set: (worktree: string) =>
-        setWorktree(normalizeNewSessionWorktree(worktree, sdk().directory, sync().project?.worktree)),
-    },
-    project: {
-      root: projectRoot,
-      workspaces: () => sync().project?.sandboxes ?? [],
-      git: () => sync().project?.vcs === "git",
-    },
-    bar: {
-      visible,
-      branch,
-    },
-  }
-}
-
-export type NewSessionWorkspaceController = ReturnType<typeof createNewSessionWorkspaceController>
@@ -1,44 +0,0 @@
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { useSettingsCommand } from "@/components/settings-dialog"
-import { useCommand } from "@/context/command"
-import { useLanguage } from "@/context/language"
-
-export function useNewSessionCommands(input: {
-  restoreFocus: () => void
-  project: {
-    empty: () => boolean
-    open: () => void
-  }
-}) {
-  const command = useCommand()
-  const dialog = useDialog()
-  const language = useLanguage()
-
-  useSettingsCommand()
-  command.register("new-session", () => [
-    {
-      id: "command.palette",
-      title: language.t("command.palette"),
-      hidden: true,
-      onSelect: async () => {
-        const { DialogSelectFile } = await import("@/components/dialog-select-file")
-        void dialog.show(() => <DialogSelectFile />)
-      },
-    },
-    {
-      id: "input.focus",
-      title: language.t("command.input.focus"),
-      category: language.t("command.category.view"),
-      keybind: "ctrl+l",
-      onSelect: input.restoreFocus,
-    },
-    {
-      id: "project.select",
-      title: language.t("session.new.project.search"),
-      category: language.t("command.category.project"),
-      keybind: "mod+shift+o",
-      disabled: input.project.empty(),
-      onSelect: input.project.open,
-    },
-  ])
-}
@@ -1,64 +0,0 @@
-import { expect, test } from "bun:test"
-import { MetaProvider, Title } from "@solidjs/meta"
-import { MemoryRouter, Route, createMemoryHistory, useParams } from "@solidjs/router"
-import { createMemo } from "solid-js"
-import { createComponent, render } from "solid-js/web"
-
-test("route cleanup cannot invalidate an owner list being disposed", async () => {
-  const host = document.createElement("div")
-  document.body.append(host)
-  const history = createMemoryHistory()
-
-  const RepoPage = () => {
-    const params = useParams<{ id?: string }>()
-    const title = createMemo(() => params.id ?? "")
-    const button = document.createElement("button")
-    button.textContent = "Back"
-    button.addEventListener("click", () => history.set({ value: "/", scroll: false, replace: false }))
-    return [
-      createComponent(Title, {
-        get children() {
-          return title()
-        },
-      }),
-      button,
-    ]
-  }
-
-  const HomePage = () => {
-    const button = document.createElement("button")
-    button.textContent = "Go"
-    button.addEventListener("click", () => history.set({ value: "/project", scroll: false, replace: false }))
-    return button
-  }
-
-  const App = () =>
-    createComponent(MetaProvider, {
-      get children() {
-        return createComponent(MemoryRouter, {
-          history,
-          get children() {
-            return [
-              createComponent(Route, { path: "/", component: HomePage }),
-              createComponent(Route, { path: "/:id", component: RepoPage }),
-            ]
-          },
-        })
-      },
-    })
-
-  const dispose = render(() => createComponent(App, {}), host)
-  const go = host.querySelector("button")
-  expect(go?.textContent).toBe("Go")
-  go?.click()
-  await new Promise((resolve) => setTimeout(resolve, 0))
-
-  const back = host.querySelector("button")
-  expect(back?.textContent).toBe("Back")
-  back?.click()
-  await new Promise((resolve) => setTimeout(resolve, 0))
-
-  expect(host.querySelector("button")?.textContent).toBe("Go")
-  dispose()
-  host.remove()
-})
@@ -32,6 +32,7 @@ export function CommentCardV2(props: {
  return (
    <TooltipV2
      placement="top"
+      openDelay={1000}
      value={props.title ?? props.comment}
      disabled={!props.tooltip || !truncated()}
      class={props.wide ? "w-full" : undefined}
@@ -385,7 +385,12 @@ export function PromptInputV2Attachments(props: {
          <For each={props.comments ?? []}>
            {(comment) => (
              <div class="relative group shrink-0">
-                <TooltipV2 value={comment.comment} placement="top" contentClass="max-w-[300px] break-words">
+                <TooltipV2
+                  value={comment.comment}
+                  placement="top"
+                  openDelay={800}
+                  contentClass="max-w-[300px] break-words"
+                >
                  <CommentCardV2
                    comment={comment.comment ?? ""}
                    path={comment.path}
@@ -214,6 +214,7 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
      </Show>
      <div class="flex items-center">
        <TooltipV2
+          openDelay={2000}
          inactive={!prev()}
          value={
            <>
@@ -233,6 +234,7 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
          />
        </TooltipV2>
        <TooltipV2
+          openDelay={2000}
          inactive={!next()}
          value={
            <>
@@ -266,12 +268,12 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
        class="session-review-v2-segmented-control session-review-v2-segmented-control--icon"
        aria-label={i18n.t("ui.sessionReviewV2.expandMode")}
      >
-        <TooltipV2 value={i18n.t("ui.sessionReviewV2.showAllLines")}>
+        <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.showAllLines")}>
          <SegmentedControlItemV2 value="expand" aria-label={i18n.t("ui.sessionReviewV2.showAllLines")}>
            <Icon name="expand" />
          </SegmentedControlItemV2>
        </TooltipV2>
-        <TooltipV2 value={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
+        <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
          <SegmentedControlItemV2 value="collapse" aria-label={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
            <Icon name="collapse" />
          </SegmentedControlItemV2>
@@ -287,12 +289,12 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
          class="session-review-v2-segmented-control session-review-v2-segmented-control--icon"
          aria-label={i18n.t("ui.sessionReviewV2.diffView")}
        >
-          <TooltipV2 value={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
+          <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
            <SegmentedControlItemV2 value="unified" aria-label={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
              <Icon name="unified" />
            </SegmentedControlItemV2>
          </TooltipV2>
-          <TooltipV2 value={i18n.t("ui.sessionReviewV2.splitDiff")}>
+          <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.splitDiff")}>
            <SegmentedControlItemV2 value="split" aria-label={i18n.t("ui.sessionReviewV2.splitDiff")}>
              <Icon name="split" />
            </SegmentedControlItemV2>
@@ -104,6 +104,7 @@ const appGlobalBindingCommands = [
 ] as const

 const appBindingCommands = [
+  "command.palette.show",
  "model.list",
  "model.cycle_recent",
  "model.cycle_recent_reverse",
@@ -962,11 +963,6 @@ function App(props: { onSnapshot?: () => Promise<string[]>; pluginHost: TuiPlugi
    commands: appCommands(),
  }))

-  useBindings(() => ({
-    enabled: () => dialog.stack.length === 0,
-    bindings: tuiConfig.keybinds.get(COMMAND_PALETTE_COMMAND),
-  }))
-
  useBindings(() => ({
    mode: OPENCODE_BASE_MODE,
    bindings: tuiConfig.keybinds.gather("app", appBindingCommands),
@@ -5,13 +5,7 @@ import { testRender, useRenderer } from "@opentui/solid"
 import { expect, test } from "bun:test"
 import { onCleanup } from "solid-js"
 import { TuiKeybind } from "../src/config/keybind"
-import {
-  COMMAND_PALETTE_COMMAND,
-  getOpencodeModeStack,
-  OPENCODE_BASE_MODE,
-  OpencodeKeymapProvider,
-  registerOpencodeKeymap,
-} from "../src/keymap"
+import { getOpencodeModeStack, OPENCODE_BASE_MODE, OpencodeKeymapProvider, registerOpencodeKeymap } from "../src/keymap"

 function createResolvedKeymapConfig(input: TuiKeybind.KeybindOverrides = {}) {
  const keybinds = TuiKeybind.parse(input)
@@ -79,14 +73,12 @@ test("mode-less bindings stay active when opencode mode changes", async () => {
    const offKeymap = registerOpencodeKeymap(keymap, renderer, config)
    const offGlobal = keymap.registerLayer({
      commands: [
-        { name: COMMAND_PALETTE_COMMAND, run() {} },
        { name: "session.list", run() {} },
        { name: "session.new", run() {} },
        { name: "session.page.up", run() {} },
        { name: "session.first", run() {} },
      ],
      bindings: config.keybinds.gather("test.global", [
-        COMMAND_PALETTE_COMMAND,
        "session.list",
        "session.new",
        "session.page.up",
@@ -103,14 +95,7 @@ test("mode-less bindings stay active when opencode mode changes", async () => {
        Array.from(
          keymap.getCommandBindings({
            visibility: "active",
-            commands: [
-              COMMAND_PALETTE_COMMAND,
-              "session.list",
-              "session.new",
-              "session.page.up",
-              "session.first",
-              "model.list",
-            ],
+            commands: ["session.list", "session.new", "session.page.up", "session.first", "model.list"],
          }),
          ([command, bindings]) => [command, bindings.length],
        ),
@@ -140,24 +125,9 @@ test("mode-less bindings stay active when opencode mode changes", async () => {
  const app = await testRender(() => <Harness />)
  try {
    expect(counts).toEqual({
-      base: {
-        [COMMAND_PALETTE_COMMAND]: 1,
-        "session.list": 1,
-        "session.new": 1,
-        "session.page.up": 2,
-        "session.first": 2,
-        "model.list": 1,
-      },
-      question: {
-        [COMMAND_PALETTE_COMMAND]: 1,
-        "session.list": 1,
-        "session.new": 1,
-        "session.page.up": 2,
-        "session.first": 2,
-        "model.list": 0,
-      },
+      base: { "session.list": 1, "session.new": 1, "session.page.up": 2, "session.first": 2, "model.list": 1 },
+      question: { "session.list": 1, "session.new": 1, "session.page.up": 2, "session.first": 2, "model.list": 0 },
      autocomplete: {
-        [COMMAND_PALETTE_COMMAND]: 1,
        "session.list": 1,
        "session.new": 1,
        "session.page.up": 2,
@@ -1,35 +0,0 @@
-const OPEN_DELAY = 1_000
-
-// Kobalte warms every tooltip globally. Keep intent previews isolated so opening
-// a model picker never inherits warm state from an unrelated tooltip.
-let warm = false
-let reset: ReturnType<typeof setTimeout> | undefined
-
-export function openTooltipIntent(open: () => void) {
-  clearTimeout(reset)
-  reset = undefined
-  if (warm) {
-    open()
-    return
-  }
-  const timer = setTimeout(() => {
-    warm = true
-    open()
-  }, OPEN_DELAY)
-  return () => clearTimeout(timer)
-}
-
-export function closeTooltipIntent() {
-  clearTimeout(reset)
-  // Adjacent triggers enter before the next task; leaving the group does not.
-  reset = setTimeout(() => {
-    warm = false
-    reset = undefined
-  })
-}
-
-export function resetTooltipIntent() {
-  clearTimeout(reset)
-  reset = undefined
-  warm = false
-}
@@ -2,22 +2,19 @@ import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
 import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { createStore } from "solid-js/store"
-import { closeTooltipIntent, openTooltipIntent, resetTooltipIntent } from "./tooltip-intent"
 import "./tooltip-v2.css"

-export interface TooltipV2Props extends Omit<ComponentProps<typeof KobalteTooltip>, "openDelay"> {
+export interface TooltipV2Props extends ComponentProps<typeof KobalteTooltip> {
  value: JSX.Element
  class?: string
  contentClass?: string
  contentStyle?: JSX.CSSProperties
  inactive?: boolean
-  delay?: "standard" | "intent"
  forceOpen?: boolean
 }

 export function TooltipV2(props: TooltipV2Props) {
  let ref: HTMLDivElement | undefined
-  let cancelIntent: (() => void) | undefined
  const [state, setState] = createStore({
    open: false,
    block: false,
@@ -29,37 +26,19 @@ export function TooltipV2(props: TooltipV2Props) {
    "contentClass",
    "contentStyle",
    "inactive",
-    "delay",
    "forceOpen",
    "ignoreSafeArea",
    "value",
  ])

+  const close = () => setState("open", false)
+
  const inside = () => {
    const active = document.activeElement
    if (!ref || !active) return false
    return ref.contains(active)
  }

-  const close = () => {
-    cancelIntent?.()
-    cancelIntent = undefined
-    if (local.delay === "intent") closeTooltipIntent()
-    setState("open", false)
-  }
-
-  const show = () => {
-    if (local.delay !== "intent" || inside()) {
-      setState("open", true)
-      return
-    }
-    if (cancelIntent) return
-    cancelIntent = openTooltipIntent(() => {
-      cancelIntent = undefined
-      setState("open", true)
-    })
-  }
-
  const drop = (expand = state.expand) => {
    if (expand) return
    if (ref?.matches(":hover")) return
@@ -101,11 +80,6 @@ export function TooltipV2(props: TooltipV2Props) {
    onCleanup(() => obs.disconnect())
  })

-  onCleanup(() => {
-    cancelIntent?.()
-    if (local.delay === "intent") resetTooltipIntent()
-  })
-
  let justClickedTrigger = false

  return (
@@ -114,8 +88,8 @@ export function TooltipV2(props: TooltipV2Props) {
      <Match when={true}>
        <KobalteTooltip
          gutter={4}
-          openDelay={local.delay === "intent" ? 0 : 400}
-          skipDelayDuration={local.delay === "intent" ? 0 : 300}
+          openDelay={400}
+          skipDelayDuration={300}
          {...others}
          closeDelay={0}
          ignoreSafeArea={local.ignoreSafeArea ?? true}
@@ -127,11 +101,7 @@ export function TooltipV2(props: TooltipV2Props) {
              justClickedTrigger = false
              return
            }
-            if (open) {
-              show()
-              return
-            }
-            close()
+            setState("open", open)
          }}
        >
          <KobalteTooltip.Trigger
@@ -1,5 +1,11 @@
+diff --git a/Users/brendonovich/github.com/anomalyco/opencode/node_modules/solid-js/.bun-tag-6fcb6b48d6947d2c b/.bun-tag-6fcb6b48d6947d2c
+new file mode 100644
+index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
+diff --git a/Users/brendonovich/github.com/anomalyco/opencode/node_modules/solid-js/.bun-tag-b272f631c12927b0 b/.bun-tag-b272f631c12927b0
+new file mode 100644
+index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
 diff --git a/dist/dev.cjs b/dist/dev.cjs
-index 7104749..dc3eac9 100644
+index 7104749486e4361e8c4ee7836a8046582cec7aa1..0501eb1ec5d13b81ecb13a5ac1a82db42502b976 100644
 --- a/dist/dev.cjs
 +++ b/dist/dev.cjs
@@ -764,6 +764,8 @@ function runComputation(node, value, time) {
@@ -11,33 +17,8 @@ index 7104749..dc3eac9 100644
       Transition.sources.add(node);
       node.tValue = nextValue;
     } else node.value = nextValue;
-@@ -987,18 +989,21 @@ function cleanNode(node) {
-     }
-   }
-   if (node.tOwned) {
-    for (i = node.tOwned.length - 1; i >= 0; i--) cleanNode(node.tOwned[i]);
-+    const tOwned = node.tOwned;
-     delete node.tOwned;
-+    for (i = tOwned.length - 1; i >= 0; i--) cleanNode(tOwned[i]);
-   }
-   if (Transition && Transition.running && node.pure) {
-     reset(node, true);
-   } else if (node.owned) {
-    for (i = node.owned.length - 1; i >= 0; i--) cleanNode(node.owned[i]);
-+    const owned = node.owned;
-     node.owned = null;
-+    for (i = owned.length - 1; i >= 0; i--) cleanNode(owned[i]);
-   }
-   if (node.cleanups) {
-    for (i = node.cleanups.length - 1; i >= 0; i--) node.cleanups[i]();
-+    const cleanups = node.cleanups;
-     node.cleanups = null;
-+    for (i = cleanups.length - 1; i >= 0; i--) cleanups[i]();
-   }
-   if (Transition && Transition.running) node.tState = 0;else node.state = 0;
-   delete node.sourceMap;
 diff --git a/dist/dev.js b/dist/dev.js
-index ea5e4bc..a2e2d59 100644
+index ea5e4bc2fd4f0b3922a73d9134439529dc81339f..4b3ec07e624d20fdd23d6941a4fdde6d3a78cca3 100644
 --- a/dist/dev.js
 +++ b/dist/dev.js
@@ -762,6 +762,8 @@ function runComputation(node, value, time) {
@@ -49,75 +30,8 @@ index ea5e4bc..a2e2d59 100644
       Transition.sources.add(node);
       node.tValue = nextValue;
     } else node.value = nextValue;
-@@ -985,18 +987,21 @@ function cleanNode(node) {
-     }
-   }
-   if (node.tOwned) {
-    for (i = node.tOwned.length - 1; i >= 0; i--) cleanNode(node.tOwned[i]);
-+    const tOwned = node.tOwned;
-     delete node.tOwned;
-+    for (i = tOwned.length - 1; i >= 0; i--) cleanNode(tOwned[i]);
-   }
-   if (Transition && Transition.running && node.pure) {
-     reset(node, true);
-   } else if (node.owned) {
-    for (i = node.owned.length - 1; i >= 0; i--) cleanNode(node.owned[i]);
-+    const owned = node.owned;
-     node.owned = null;
-+    for (i = owned.length - 1; i >= 0; i--) cleanNode(owned[i]);
-   }
-   if (node.cleanups) {
-    for (i = node.cleanups.length - 1; i >= 0; i--) node.cleanups[i]();
-+    const cleanups = node.cleanups;
-     node.cleanups = null;
-+    for (i = cleanups.length - 1; i >= 0; i--) cleanups[i]();
-   }
-   if (Transition && Transition.running) node.tState = 0;else node.state = 0;
-   delete node.sourceMap;
-diff --git a/dist/server.cjs b/dist/server.cjs
-index e715309..188ba81 100644
--- a/dist/server.cjs
-+++ b/dist/server.cjs
-@@ -127,12 +127,14 @@ function onCleanup(fn) {
- }
- function cleanNode(node) {
-   if (node.owned) {
-    for (let i = 0; i < node.owned.length; i++) cleanNode(node.owned[i]);
-+    const owned = node.owned;
-     node.owned = null;
-+    for (let i = 0; i < owned.length; i++) cleanNode(owned[i]);
-   }
-   if (node.cleanups) {
-    for (let i = 0; i < node.cleanups.length; i++) node.cleanups[i]();
-+    const cleanups = node.cleanups;
-     node.cleanups = null;
-+    for (let i = 0; i < cleanups.length; i++) cleanups[i]();
-   }
- }
- function catchError(fn, handler) {
-diff --git a/dist/server.js b/dist/server.js
-index d5f8803..320d9af 100644
--- a/dist/server.js
-+++ b/dist/server.js
-@@ -125,12 +125,14 @@ function onCleanup(fn) {
- }
- function cleanNode(node) {
-   if (node.owned) {
-    for (let i = 0; i < node.owned.length; i++) cleanNode(node.owned[i]);
-+    const owned = node.owned;
-     node.owned = null;
-+    for (let i = 0; i < owned.length; i++) cleanNode(owned[i]);
-   }
-   if (node.cleanups) {
-    for (let i = 0; i < node.cleanups.length; i++) node.cleanups[i]();
-+    const cleanups = node.cleanups;
-     node.cleanups = null;
-+    for (let i = 0; i < cleanups.length; i++) cleanups[i]();
-   }
- }
- function catchError(fn, handler) {
 diff --git a/dist/solid.cjs b/dist/solid.cjs
-index 7c133a2..5ef1501 100644
+index 7c133a2b254678a84fd61d719fbeffad766e1331..2f68c99f2698210cc0bac62f074cc8cd3beb2881 100644
 --- a/dist/solid.cjs
 +++ b/dist/solid.cjs
@@ -717,6 +717,8 @@ function runComputation(node, value, time) {
@@ -129,33 +43,8 @@ index 7c133a2..5ef1501 100644
       Transition.sources.add(node);
       node.tValue = nextValue;
     } else node.value = nextValue;
-@@ -938,18 +940,21 @@ function cleanNode(node) {
-     }
-   }
-   if (node.tOwned) {
-    for (i = node.tOwned.length - 1; i >= 0; i--) cleanNode(node.tOwned[i]);
-+    const tOwned = node.tOwned;
-     delete node.tOwned;
-+    for (i = tOwned.length - 1; i >= 0; i--) cleanNode(tOwned[i]);
-   }
-   if (Transition && Transition.running && node.pure) {
-     reset(node, true);
-   } else if (node.owned) {
-    for (i = node.owned.length - 1; i >= 0; i--) cleanNode(node.owned[i]);
-+    const owned = node.owned;
-     node.owned = null;
-+    for (i = owned.length - 1; i >= 0; i--) cleanNode(owned[i]);
-   }
-   if (node.cleanups) {
-    for (i = node.cleanups.length - 1; i >= 0; i--) node.cleanups[i]();
-+    const cleanups = node.cleanups;
-     node.cleanups = null;
-+    for (i = cleanups.length - 1; i >= 0; i--) cleanups[i]();
-   }
-   if (Transition && Transition.running) node.tState = 0;else node.state = 0;
- }
 diff --git a/dist/solid.js b/dist/solid.js
-index 656fd26..6e0038c 100644
+index 656fd26e7e5c794aa22df19c2377ff5c0591fc29..f08e9f5a7157c3506e5b6922fe2ef991335a80be 100644
 --- a/dist/solid.js
 +++ b/dist/solid.js
@@ -715,6 +715,8 @@ function runComputation(node, value, time) {
@@ -167,28 +56,3 @@ index 656fd26..6e0038c 100644
       Transition.sources.add(node);
       node.tValue = nextValue;
     } else node.value = nextValue;
-@@ -936,18 +938,21 @@ function cleanNode(node) {
-     }
-   }
-   if (node.tOwned) {
-    for (i = node.tOwned.length - 1; i >= 0; i--) cleanNode(node.tOwned[i]);
-+    const tOwned = node.tOwned;
-     delete node.tOwned;
-+    for (i = tOwned.length - 1; i >= 0; i--) cleanNode(tOwned[i]);
-   }
-   if (Transition && Transition.running && node.pure) {
-     reset(node, true);
-   } else if (node.owned) {
-    for (i = node.owned.length - 1; i >= 0; i--) cleanNode(node.owned[i]);
-+    const owned = node.owned;
-     node.owned = null;
-+    for (i = owned.length - 1; i >= 0; i--) cleanNode(owned[i]);
-   }
-   if (node.cleanups) {
-    for (i = node.cleanups.length - 1; i >= 0; i--) node.cleanups[i]();
-+    const cleanups = node.cleanups;
-     node.cleanups = null;
-+    for (i = cleanups.length - 1; i >= 0; i--) cleanups[i]();
-   }
-   if (Transition && Transition.running) node.tState = 0;else node.state = 0;
- }
Author	SHA1	Message	Date
Brendan Allan	98bf16df92	fix(app): bind provider query client	2026-07-28 15:02:30 +08:00
Brendan Allan	3e75d6de02	refactor(app): extract provider connection controller	2026-07-28 15:02:30 +08:00