refactor(app): split server management controllers

Co-authored-by: adityachaudhary99 <adityaachaudhary2003@gmail.com>

bun.lock

@@ -339,7 +339,7 @@
         "drizzle-orm": "catalog:",
         "effect": "catalog:",
         "fuzzysort": "3.1.0",
-        "gitlab-ai-provider": "6.11.1",
+        "gitlab-ai-provider": "6.12.0",
         "glob": "13.0.5",
         "google-auth-library": "10.5.0",
         "gray-matter": "4.0.3",
@@ -632,7 +632,7 @@
         "drizzle-orm": "catalog:",
         "effect": "catalog:",
         "fuzzysort": "3.1.0",
-        "gitlab-ai-provider": "6.11.1",
+        "gitlab-ai-provider": "6.12.0",
         "glob": "13.0.5",
         "google-auth-library": "10.5.0",
         "gray-matter": "4.0.3",
@@ -3854,7 +3854,7 @@
 
     "github-slugger": ["github-slugger@2.0.0", "", {}, "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="],
 
-    "gitlab-ai-provider": ["gitlab-ai-provider@6.11.1", "", { "dependencies": { "@anthropic-ai/sdk": "^0.71.0", "@anycable/core": "^0.9.2", "graphql-request": "^6.1.0", "isomorphic-ws": "^5.0.0", "openai": "^6.16.0", "socket.io-client": "^4.8.1", "vscode-jsonrpc": "^8.2.1", "zod": "^3.25.76" }, "peerDependencies": { "@ai-sdk/provider": ">=3.0.0", "@ai-sdk/provider-utils": ">=4.0.0" } }, "sha512-SJ6f5qa7P8md6lPrserryER3zerLkrezlnqqYQ2AbvDPpHLbwtbyk0FYJ5kNRcmbI80i/VMcsMBP0YIRdc3ucQ=="],
+    "gitlab-ai-provider": ["gitlab-ai-provider@6.12.0", "", { "dependencies": { "@anthropic-ai/sdk": "^0.71.0", "@anycable/core": "^0.9.2", "graphql-request": "^6.1.0", "isomorphic-ws": "^5.0.0", "openai": "^6.16.0", "socket.io-client": "^4.8.1", "vscode-jsonrpc": "^8.2.1", "zod": "^3.25.76" }, "peerDependencies": { "@ai-sdk/provider": ">=3.0.0", "@ai-sdk/provider-utils": ">=4.0.0" } }, "sha512-uGan7MQaNfmV5SH9wiMJkZ7D5QxM4KVPRcjIHtPCM5icZjgXl5mrHMjr3/e7TAHa9OjEJKT0a2FxzPgwRtN3PQ=="],
 
     "glob": ["glob@13.0.5", "", { "dependencies": { "minimatch": "^10.2.1", "minipass": "^7.1.2", "path-scurry": "^2.0.0" } }, "sha512-BzXxZg24Ibra1pbQ/zE7Kys4Ua1ks7Bn6pKLkVPZ9FZe4JQS6/Q7ef3LG1H+k7lUf5l4T3PLSyYyYJVYUvfgTw=="],
 

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

@@ -28,7 +28,6 @@ import {
   Switch,
 } from "solid-js"
 import { createStore, produce } 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"
@@ -38,7 +37,6 @@ 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"
 
 const CUSTOM_ID = "_custom"
 type ConnectMethod = Extract<IntegrationMethod, { type: "key" | "oauth" }>
@@ -386,7 +384,6 @@ function ProviderConnection(props: {
   const dialog = useDialog()
   const serverSync = useServerSync()
   const serverSDK = useServerSDK()
-  const queryClient = useQueryClient()
   const params = useParams()
   const language = useLanguage()
   const settings = useSettings()
@@ -707,9 +704,8 @@ function ProviderConnection(props: {
   })
 
   async function complete() {
-    const value = directory()
-    await queryClient
-      .refetchQueries(serverSync().queryOptions.providers(value ? pathKey(value) : null))
+    await serverSync()
+      .refreshProviders()
       .catch(() => undefined)
     dialog.close()
     showToast({

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

@@ -6,9 +6,7 @@ import {
   createMemo,
   For,
   JSX,
-  onCleanup,
   Show,
-  ValidComponent,
 } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLocal } from "@/context/local"
@@ -29,6 +27,7 @@ import { ModelTooltip } from "./model-tooltip"
 import { useLanguage } from "@/context/language"
 import { decode64 } from "@/utils/base64"
 import { handleDocumentSearchKeydown } from "@/utils/search-keydown"
+import { createMenuDismissController } from "@/utils/menu-dismiss-controller"
 import { createEventListener } from "@solid-primitives/event-listener"
 import { matchesModelSearch } from "./dialog-select-model-search"
 
@@ -122,14 +121,13 @@ const ModelList: Component<{
 }
 
 type ModelSelectorTriggerProps = Omit<ComponentProps<typeof Kobalte.Trigger>, "as" | "ref">
+type ModelSelectorTrigger = (props: ModelSelectorTriggerProps) => JSX.Element
 type Dismiss = "escape" | "outside" | "select" | "manage" | "provider"
 
 export function ModelSelectorPopover(props: {
   provider?: string
   model?: ModelState
-  children?: JSX.Element
-  triggerAs?: ValidComponent
-  triggerProps?: ModelSelectorTriggerProps
+  trigger: ModelSelectorTrigger
   onClose?: (cause: "escape" | "select") => void
 }) {
   const [store, setStore] = createStore<{
@@ -174,9 +172,7 @@ export function ModelSelectorPopover(props: {
       placement="top-start"
       gutter={4}
     >
-      <Kobalte.Trigger as={props.triggerAs ?? "div"} {...props.triggerProps}>
-        {props.children}
-      </Kobalte.Trigger>
+      <Kobalte.Trigger as={props.trigger} />
       <Kobalte.Portal>
         <Kobalte.Content
           class="w-72 h-80 flex flex-col p-2 rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
@@ -237,66 +233,101 @@ export function ModelSelectorPopover(props: {
 export function ModelSelectorPopoverV2(props: {
   provider?: string
   model?: ModelState
-  children?: JSX.Element
-  triggerAs?: ValidComponent
-  triggerProps?: ModelSelectorTriggerProps
+  trigger: ModelSelectorTrigger
   onClose?: () => void
 }) {
-  const model = props.model ?? useLocal().model
-  const language = useLanguage()
   const dialog = useDialog()
-  const [store, setStore] = createStore({ open: false, search: "", active: "" })
-  let searchRef: HTMLInputElement | undefined
-  let contentRef: HTMLDivElement | undefined
-  let restoreTrigger = true
+  const controller = createModelSelectorController({
+    model: props.model,
+    provider: () => props.provider,
+    onSelect: () => props.onClose?.(),
+  })
 
+  return (
+    <ModelSelectorPopoverV2View
+      trigger={props.trigger}
+      models={controller.models}
+      groups={controller.groups}
+      current={controller.current}
+      select={controller.select}
+      onManage={() => {
+        void import("./dialog-manage-models").then((module) => {
+          void dialog.show(() => <module.DialogManageModelsV2 />)
+        })
+      }}
+      onClose={() => props.onClose?.()}
+    />
+  )
+}
+
+function createModelSelectorController(input: {
+  provider: () => string | undefined
+  model?: ModelState
+  onSelect: () => void
+}) {
+  const model = input.model ?? useLocal().model
   const allModels = createMemo(() =>
     model
       .list()
       .filter((item) => model.visible({ modelID: item.id, providerID: item.provider.id }))
-      .filter((item) => (props.provider ? item.provider.id === props.provider : true)),
+      .filter((item) => (input.provider() ? item.provider.id === input.provider() : true)),
   )
-  const models = createMemo(() => {
-    const search = store.search.trim()
-    const filtered = search
-      ? allModels().filter((item) => matchesModelSearch(search, [item.name, item.id, item.provider.name]))
-      : allModels()
 
-    return [...filtered].sort((a, b) => a.name.localeCompare(b.name))
-  })
-  const groups = createMemo(() => {
-    const byProvider = new Map<string, ModelItem[]>()
-    for (const item of models()) {
-      byProvider.set(item.provider.id, [...(byProvider.get(item.provider.id) ?? []), item])
-    }
-    return Array.from(byProvider, ([category, items]) => ({ category, items })).sort(sortModelGroups)
-  })
-  const keys = () => [...models().map(modelKey), manageKey]
-  const current = () => {
-    const value = model.current()
-    return value ? `${value.provider.id}:${value.id}` : undefined
+  return {
+    models: (search: string) => {
+      const query = search.trim()
+      const filtered = query
+        ? allModels().filter((item) => matchesModelSearch(query, [item.name, item.id, item.provider.name]))
+        : allModels()
+      return [...filtered].sort((a, b) => a.name.localeCompare(b.name))
+    },
+    groups: (models: ModelItem[]) => {
+      const byProvider = new Map<string, ModelItem[]>()
+      for (const item of models) {
+        byProvider.set(item.provider.id, [...(byProvider.get(item.provider.id) ?? []), item])
+      }
+      return Array.from(byProvider, ([category, items]) => ({ category, items })).sort(sortModelGroups)
+    },
+    current: () => {
+      const value = model.current()
+      return value ? modelKey(value) : undefined
+    },
+    select: (item: ModelItem) => {
+      model.set({ modelID: item.id, providerID: item.provider.id }, { recent: true })
+      input.onSelect()
+    },
   }
+}
+
+function ModelSelectorPopoverV2View(props: {
+  trigger: ModelSelectorTrigger
+  models: (search: string) => ModelItem[]
+  groups: (models: ModelItem[]) => { category: string; items: ModelItem[] }[]
+  current: () => string | undefined
+  select: (item: ModelItem) => void
+  onManage: () => void
+  onClose: () => void
+}) {
+  const language = useLanguage()
+  const [store, setStore] = createStore({ open: false, search: "", active: "" })
+  let searchRef: HTMLInputElement | undefined
+  let contentRef: HTMLDivElement | undefined
+  const dismiss = createMenuDismissController(() => contentRef)
+
+  const models = createMemo(() => props.models(store.search))
+  const groups = createMemo(() => props.groups(models()))
+  const keys = () => [...models().map(modelKey), manageKey]
   const initialActive = () => {
-    const selected = current()
+    const selected = props.current()
     const options = keys()
     if (selected && options.includes(selected)) return selected
     return options[0] ?? ""
   }
   const activeItem = () =>
     store.active ? contentRef?.querySelector<HTMLElement>(`[data-option-key="${CSS.escape(store.active)}"]`) : undefined
-  const afterClose = (callback: () => void) => {
-    const complete = () => {
-      if (contentRef?.isConnected) {
-        requestAnimationFrame(complete)
-        return
-      }
-      requestAnimationFrame(() => requestAnimationFrame(callback))
-    }
-    requestAnimationFrame(complete)
-  }
   const setOpen = (open: boolean) => {
     if (open) {
-      restoreTrigger = true
+      dismiss.allowTriggerRestore()
       setStore({ open: true, active: initialActive() })
       setTimeout(() =>
         requestAnimationFrame(() => {
@@ -308,23 +339,15 @@ export function ModelSelectorPopoverV2(props: {
     }
     setStore({ open: false, search: "", active: "" })
   }
-  const select = (item: ModelItem) => {
-    model.set({ modelID: item.id, providerID: item.provider.id }, { recent: true })
-    props.onClose?.()
-  }
   const selectModel = (item: ModelItem) => {
-    restoreTrigger = false
+    dismiss.preventTriggerRestore()
     setOpen(false)
-    afterClose(() => select(item))
+    dismiss.afterClose(() => props.select(item))
   }
   const manage = () => {
-    restoreTrigger = false
+    dismiss.preventTriggerRestore()
     setOpen(false)
-    afterClose(() => {
-      void import("./dialog-manage-models").then((x) => {
-        dialog.show(() => <x.DialogManageModelsV2 />)
-      })
-    })
+    dismiss.afterClose(props.onManage)
   }
   const selectActive = () => {
     const item = models().find((item) => modelKey(item) === store.active)
@@ -343,10 +366,7 @@ export function ModelSelectorPopoverV2(props: {
     queueMicrotask(() => activeItem()?.scrollIntoView({ block: "nearest" }))
   }
   const setSearch = (value: string) => {
-    const search = value.trim()
-    const first = [...allModels()]
-      .sort((a, b) => a.name.localeCompare(b.name))
-      .find((item) => matchesModelSearch(search, [item.name, item.id, item.provider.name]))
+    const first = props.models(value)[0]
     setStore({ search: value, active: first ? modelKey(first) : manageKey })
   }
 
@@ -362,18 +382,14 @@ export function ModelSelectorPopoverV2(props: {
 
   return (
     <MenuV2 open={store.open} modal={false} placement="top-start" gutter={6} onOpenChange={setOpen}>
-      <MenuV2.Trigger as={props.triggerAs ?? "div"} {...props.triggerProps}>
-        {props.children}
-      </MenuV2.Trigger>
+      <MenuV2.Trigger as={props.trigger} />
       <MenuV2.Portal>
         <MenuV2.Content
-          ref={(el: HTMLDivElement) => (contentRef = el)}
+          ref={(element: HTMLDivElement) => (contentRef = element)}
           class="w-[284px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 !p-0 shadow-[var(--v2-elevation-floating)] focus:outline-none"
-          onPointerDownOutside={() => (restoreTrigger = false)}
-          onFocusOutside={() => (restoreTrigger = false)}
-          onCloseAutoFocus={(event) => {
-            if (!restoreTrigger) event.preventDefault()
-          }}
+          onPointerDownOutside={dismiss.preventTriggerRestore}
+          onFocusOutside={dismiss.preventTriggerRestore}
+          onCloseAutoFocus={dismiss.onCloseAutoFocus}
         >
           <div class="flex flex-col p-0.5">
             <div class="flex h-7 items-center gap-2 rounded-sm pl-3 pr-2.5 text-v2-icon-icon-muted">
@@ -393,9 +409,9 @@ export function ModelSelectorPopoverV2(props: {
                   event.stopPropagation()
                   if (event.key === "Escape") {
                     event.preventDefault()
-                    restoreTrigger = false
+                    dismiss.preventTriggerRestore()
                     setOpen(false)
-                    afterClose(() => props.onClose?.())
+                    dismiss.afterClose(props.onClose)
                     return
                   }
                   if (event.altKey || event.metaKey) return
@@ -445,7 +461,7 @@ export function ModelSelectorPopoverV2(props: {
                       <MenuV2.GroupLabel class="gap-2 px-3">
                         <span class="min-w-0 truncate">{group.items[0].provider.name}</span>
                       </MenuV2.GroupLabel>
-                      <MenuV2.RadioGroup value={current()}>
+                      <MenuV2.RadioGroup value={props.current()}>
                         <For each={group.items}>
                           {(item) => (
                             <TooltipV2
@@ -465,7 +481,7 @@ export function ModelSelectorPopoverV2(props: {
                               <MenuV2.RadioItem
                                 value={modelKey(item)}
                                 data-option-key={modelKey(item)}
-                                data-selected-model={current() === modelKey(item) ? true : undefined}
+                                data-selected-model={props.current() === modelKey(item) ? true : undefined}
                                 class="scroll-my-6 w-full"
                                 classList={{ "!bg-v2-overlay-simple-overlay-hover": store.active === modelKey(item) }}
                                 onMouseEnter={() => {

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

@@ -6,22 +6,17 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { List } from "@opencode-ai/ui/list"
 import { TextField } from "@opencode-ai/ui/text-field"
-import { useMutation } from "@tanstack/solid-query"
-import { showToast } from "@/utils/toast"
-import { useNavigate } from "@solidjs/router"
-import { createEffect, createMemo, createResource, Show } from "solid-js"
-import { createStore } from "solid-js/store"
+import { Show } from "solid-js"
 import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
-import { useGlobal } from "@/context/global"
 import { useLanguage } from "@/context/language"
-import { usePlatform } from "@/context/platform"
-import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
-import { detectServerProtocol } from "@/utils/server-protocol"
-import { type ServerHealth, useCheckServerHealth } from "@/utils/server-health"
+import { ServerConnection } from "@/context/server"
 import { useSettings } from "@/context/settings"
-import { useTabs } from "@/context/tabs"
-
-const DEFAULT_USERNAME = "opencode"
+import {
+  type ServerDomainController,
+  type ServerFormController,
+  useServerDomainController,
+  useServerFormController,
+} from "@/components/server/server-management-controller"
 
 interface ServerFormProps {
   value: string
@@ -40,76 +35,6 @@ interface ServerFormProps {
   onBack: () => void
 }
 
-function showRequestError(language: ReturnType<typeof useLanguage>, err: unknown) {
-  showToast({
-    variant: "error",
-    title: language.t("common.requestFailed"),
-    description: err instanceof Error ? err.message : String(err),
-  })
-}
-
-function useDefaultServer() {
-  const language = useLanguage()
-  const platform = usePlatform()
-  const [defaultKey, defaultUrlActions] = createResource(
-    async () => {
-      try {
-        const key = await platform.getDefaultServer?.()
-        if (!key) return null
-        return key
-      } catch (err) {
-        showRequestError(language, err)
-        return null
-      }
-    },
-    { initialValue: null },
-  )
-
-  const canDefault = createMemo(() => !!platform.getDefaultServer && !!platform.setDefaultServer)
-  const setDefault = async (key: ServerConnection.Key | null) => {
-    try {
-      await platform.setDefaultServer?.(key)
-      defaultUrlActions.mutate(key)
-    } catch (err) {
-      showRequestError(language, err)
-    }
-  }
-
-  return { defaultKey: () => defaultKey.latest, canDefault, setDefault }
-}
-
-function useServerPreview() {
-  const checkServerHealth = useCheckServerHealth()
-
-  const looksComplete = (value: string) => {
-    const normalized = normalizeServerUrl(value)
-    if (!normalized) return false
-    const host = normalized.replace(/^https?:\/\//, "").split("/")[0]
-    if (!host) return false
-    if (host.includes("localhost") || host.startsWith("127.0.0.1")) return true
-    return host.includes(".") || host.includes(":")
-  }
-
-  const previewStatus = async (
-    value: string,
-    username: string,
-    password: string,
-    setStatus: (value: boolean | undefined) => void,
-  ) => {
-    setStatus(undefined)
-    if (!looksComplete(value)) return
-    const normalized = normalizeServerUrl(value)
-    if (!normalized) return
-    const http: ServerConnection.HttpBase = { url: normalized }
-    if (username) http.username = username
-    if (password) http.password = password
-    const result = await checkServerHealth(http)
-    setStatus(result.healthy)
-  }
-
-  return { previewStatus }
-}
-
 function ServerForm(props: ServerFormProps) {
   const language = useLanguage()
   const keyDown = (event: KeyboardEvent) => {
@@ -177,400 +102,40 @@ function ServerForm(props: ServerFormProps) {
 
 export function DialogSelectServer() {
   const dialog = useDialog()
-  const controller = useServerManagementController({ onSelect: dialog.close })
+  const language = useLanguage()
+  const domain = useServerDomainController({ onSelect: () => dialog.close() })
+  const form = useServerFormController({ onSelect: () => dialog.close() })
+  const title = () => {
+    if (!form.state.open()) return language.t("dialog.server.title")
+    return (
+      <div class="flex items-center gap-2 -ml-2">
+        <IconButton icon="arrow-left" variant="ghost" onClick={form.reset} aria-label={language.t("common.goBack")} />
+        <span>
+          {form.state.adding() ? language.t("dialog.server.add.title") : language.t("dialog.server.edit.title")}
+        </span>
+      </div>
+    )
+  }
 
   return (
-    <Dialog title={controller.formTitle()}>
+    <Dialog title={title()}>
       <div class="flex flex-1 min-h-0 flex-col px-5">
-        <Show when={controller.isFormMode()} fallback={<ServerConnectionList controller={controller} />}>
-          <ServerConnectionForm controller={controller} />
+        <Show
+          when={form.state.open()}
+          fallback={<ServerConnectionList domain={domain} onAdd={form.start.add} onEdit={form.start.edit} />}
+        >
+          <ServerConnectionForm form={form} />
         </Show>
       </div>
     </Dialog>
   )
 }
 
-export function useServerManagementController(options: { onSelect?: () => void; navigateOnAdd?: boolean } = {}) {
-  const navigate = useNavigate()
-  const server = useServer()
-  const tabs = useTabs()
-  const global = useGlobal()
-  const platform = usePlatform()
-  const language = useLanguage()
-  const { defaultKey, canDefault, setDefault } = useDefaultServer()
-  const { previewStatus } = useServerPreview()
-  const checkServerHealth = useCheckServerHealth()
-  const [store, setStore] = createStore({
-    addServer: {
-      url: "",
-      name: "",
-      username: DEFAULT_USERNAME,
-      password: "",
-      error: "",
-      showForm: false,
-      status: undefined as boolean | undefined,
-    },
-    editServer: {
-      id: undefined as string | undefined,
-      value: "",
-      name: "",
-      username: "",
-      password: "",
-      error: "",
-      status: undefined as boolean | undefined,
-    },
-  })
-
-  const resetAdd = () => {
-    setStore("addServer", {
-      url: "",
-      name: "",
-      username: DEFAULT_USERNAME,
-      password: "",
-      error: "",
-      showForm: false,
-      status: undefined,
-    })
-  }
-  const resetEdit = () => {
-    setStore("editServer", {
-      id: undefined,
-      value: "",
-      name: "",
-      username: "",
-      password: "",
-      error: "",
-      status: undefined,
-    })
-  }
-
-  const addMutation = useMutation(() => ({
-    mutationFn: async (value: string) => {
-      const normalized = normalizeServerUrl(value)
-      if (!normalized) {
-        resetAdd()
-        return
-      }
-
-      const conn: ServerConnection.Http = {
-        type: "http",
-        http: { url: normalized },
-      }
-      if (store.addServer.name.trim()) conn.displayName = store.addServer.name.trim()
-      if (store.addServer.password) conn.http.password = store.addServer.password
-      if (store.addServer.password && store.addServer.username) conn.http.username = store.addServer.username
-      const result = await checkServerHealth(conn.http)
-      if (!result.healthy) {
-        setStore("addServer", { error: language.t("dialog.server.add.error") })
-        return
-      }
-      if (
-        !settings.general.newLayoutDesigns() &&
-        (await detectServerProtocol(conn.http, platform.fetch ?? globalThis.fetch)) === "v2"
-      ) {
-        setStore("addServer", { error: language.t("dialog.server.add.error") })
-        return
-      }
-
-      resetAdd()
-      if (options.navigateOnAdd === false) {
-        server.add(conn)
-        options.onSelect?.()
-        return
-      }
-      await select(conn, true)
-    },
-  }))
-
-  const editMutation = useMutation(() => ({
-    mutationFn: async (input: { original: ServerConnection.Any; value: string }) => {
-      if (input.original.type !== "http") return
-      const normalized = normalizeServerUrl(input.value)
-      if (!normalized) {
-        resetEdit()
-        return
-      }
-
-      const name = store.editServer.name.trim() || undefined
-      const username = store.editServer.username || undefined
-      const password = store.editServer.password || undefined
-      const existingName = input.original.displayName
-      if (
-        normalized === input.original.http.url &&
-        name === existingName &&
-        username === input.original.http.username &&
-        password === input.original.http.password
-      ) {
-        resetEdit()
-        return
-      }
-
-      const conn: ServerConnection.Http = {
-        type: "http",
-        displayName: name,
-        http: { url: normalized, username, password },
-      }
-      const result = await checkServerHealth(conn.http)
-      if (!result.healthy) {
-        setStore("editServer", { error: language.t("dialog.server.add.error") })
-        return
-      }
-      if (
-        !settings.general.newLayoutDesigns() &&
-        (await detectServerProtocol(conn.http, platform.fetch ?? globalThis.fetch)) === "v2"
-      ) {
-        setStore("editServer", { error: language.t("dialog.server.add.error") })
-        return
-      }
-      if (normalized === input.original.http.url) {
-        server.add(conn)
-      } else {
-        replaceServer(input.original, conn)
-      }
-
-      resetEdit()
-    },
-  }))
-
-  const replaceServer = (original: ServerConnection.Http, next: ServerConnection.Http) => {
-    const originalKey = ServerConnection.key(original)
-    const active = server.key
-    tabs.removeServer(originalKey)
-    const newConn = server.add(next)
-    if (!newConn) return
-    const nextActive = active === originalKey ? ServerConnection.key(newConn) : active
-    if (nextActive) server.setActive(nextActive)
-    server.remove(originalKey)
-  }
-
-  const items = createMemo(() => {
-    const current = server.current
-    const list = server.list
-    if (!current) return list
-    if (!list.includes(current)) return [current, ...list]
-    return [current, ...list.filter((x) => x !== current)]
-  })
-
-  const settings = useSettings()
-  const current = createMemo<ServerConnection.Any | undefined>(() =>
-    settings.general.newLayoutDesigns()
-      ? undefined
-      : (items().find((x) => ServerConnection.key(x) === server.key) ?? items()[0]),
-  )
-
-  const sortedItems = createMemo(() => {
-    const raw = items()
-    const list = settings.general.newLayoutDesigns()
-      ? raw
-      : raw.filter((x) => global.ensureServerCtx(x).sdk.protocolKind() !== "v2")
-    if (!list.length) return list
-    const active = current()
-    const order = new Map(list.map((url, index) => [url, index] as const))
-    const rank = (value?: ServerHealth) => {
-      if (value?.healthy === true) return 0
-      if (value?.healthy === false) return 2
-      return 1
-    }
-    return list.slice().sort((a, b) => {
-      if (a === active) return -1
-      if (b === active) return 1
-      const diff =
-        rank(global.servers.health[ServerConnection.key(a)]) - rank(global.servers.health[ServerConnection.key(b)])
-      if (diff !== 0) return diff
-      return (order.get(a) ?? 0) - (order.get(b) ?? 0)
-    })
-  })
-
-  async function select(conn: ServerConnection.Any, persist?: boolean) {
-    if (!persist && global.servers.health[ServerConnection.key(conn)]?.healthy === false) return
-    options.onSelect?.()
-    if (persist && conn.type === "http") {
-      server.add(conn)
-      navigate("/")
-      return
-    }
-    navigate("/")
-    queueMicrotask(() => server.setActive(ServerConnection.key(conn)))
-  }
-
-  const handleAddChange = (value: string) => {
-    if (addMutation.isPending) return
-    setStore("addServer", { url: value, error: "" })
-    void previewStatus(value, store.addServer.username, store.addServer.password, (next) =>
-      setStore("addServer", { status: next }),
-    )
-  }
-
-  const handleAddNameChange = (value: string) => {
-    if (addMutation.isPending) return
-    setStore("addServer", { name: value, error: "" })
-  }
-
-  const handleAddUsernameChange = (value: string) => {
-    if (addMutation.isPending) return
-    setStore("addServer", { username: value, error: "" })
-    void previewStatus(store.addServer.url, value, store.addServer.password, (next) =>
-      setStore("addServer", { status: next }),
-    )
-  }
-
-  const handleAddPasswordChange = (value: string) => {
-    if (addMutation.isPending) return
-    setStore("addServer", { password: value, error: "" })
-    void previewStatus(store.addServer.url, store.addServer.username, value, (next) =>
-      setStore("addServer", { status: next }),
-    )
-  }
-
-  const handleEditChange = (value: string) => {
-    if (editMutation.isPending) return
-    setStore("editServer", { value, error: "" })
-    void previewStatus(value, store.editServer.username, store.editServer.password, (next) =>
-      setStore("editServer", { status: next }),
-    )
-  }
-
-  const handleEditNameChange = (value: string) => {
-    if (editMutation.isPending) return
-    setStore("editServer", { name: value, error: "" })
-  }
-
-  const handleEditUsernameChange = (value: string) => {
-    if (editMutation.isPending) return
-    setStore("editServer", { username: value, error: "" })
-    void previewStatus(store.editServer.value, value, store.editServer.password, (next) =>
-      setStore("editServer", { status: next }),
-    )
-  }
-
-  const handleEditPasswordChange = (value: string) => {
-    if (editMutation.isPending) return
-    setStore("editServer", { password: value, error: "" })
-    void previewStatus(store.editServer.value, store.editServer.username, value, (next) =>
-      setStore("editServer", { status: next }),
-    )
-  }
-
-  const mode = createMemo<"list" | "add" | "edit">(() => {
-    if (store.editServer.id) return "edit"
-    if (store.addServer.showForm) return "add"
-    return "list"
-  })
-
-  const editing = createMemo(() => {
-    if (!store.editServer.id) return
-    return items().find((x) => x.type === "http" && x.http.url === store.editServer.id)
-  })
-
-  const resetForm = () => {
-    resetAdd()
-    resetEdit()
-  }
-
-  const startAdd = () => {
-    resetEdit()
-    setStore("addServer", {
-      showForm: true,
-      url: "",
-      name: "",
-      username: DEFAULT_USERNAME,
-      password: "",
-      error: "",
-      status: undefined,
-    })
-  }
-
-  const startEdit = (conn: ServerConnection.Http) => {
-    resetAdd()
-    setStore("editServer", {
-      id: conn.http.url,
-      value: conn.http.url,
-      name: conn.displayName ?? "",
-      username: conn.http.username ?? "",
-      password: conn.http.password ?? "",
-      error: "",
-      status: global.servers.health[ServerConnection.key(conn)]?.healthy,
-    })
-  }
-
-  const submitForm = () => {
-    if (mode() === "add") {
-      if (addMutation.isPending) return
-      setStore("addServer", { error: "" })
-      addMutation.mutate(store.addServer.url)
-      return
-    }
-    const original = editing()
-    if (!original) return
-    if (editMutation.isPending) return
-    setStore("editServer", { error: "" })
-    editMutation.mutate({ original, value: store.editServer.value })
-  }
-
-  const isFormMode = createMemo(() => mode() !== "list")
-  const isAddMode = createMemo(() => mode() === "add")
-  const formBusy = createMemo(() => (isAddMode() ? addMutation.isPending : editMutation.isPending))
-
-  const formTitle = createMemo(() => {
-    if (!isFormMode()) return language.t("dialog.server.title")
-    return (
-      <div class="flex items-center gap-2 -ml-2">
-        <IconButton icon="arrow-left" variant="ghost" onClick={resetForm} aria-label={language.t("common.goBack")} />
-        <span>{isAddMode() ? language.t("dialog.server.add.title") : language.t("dialog.server.edit.title")}</span>
-      </div>
-    )
-  })
-
-  createEffect(() => {
-    if (!store.editServer.id) return
-    if (editing()) return
-    resetEdit()
-  })
-
-  async function handleRemove(key: ServerConnection.Key) {
-    try {
-      if (key.startsWith("wsl:")) await platform.wslServers?.removeServer(key)
-      tabs.removeServer(key)
-      server.remove(key)
-      if ((await platform.getDefaultServer?.()) === key) {
-        await setDefault(null)
-      }
-    } catch (err) {
-      showRequestError(language, err)
-    }
-  }
-
-  return {
-    defaultKey,
-    canDefault,
-    current,
-    sortedItems,
-    status: () => global.servers.health,
-    isFormMode,
-    isAddMode,
-    formTitle,
-    formBusy,
-    formValue: () => (isAddMode() ? store.addServer.url : store.editServer.value),
-    formName: () => (isAddMode() ? store.addServer.name : store.editServer.name),
-    formUsername: () => (isAddMode() ? store.addServer.username : store.editServer.username),
-    formPassword: () => (isAddMode() ? store.addServer.password : store.editServer.password),
-    formError: () => (isAddMode() ? store.addServer.error : store.editServer.error),
-    formStatus: () => (isAddMode() ? store.addServer.status : store.editServer.status),
-    select,
-    setDefault,
-    startAdd,
-    startEdit,
-    resetForm,
-    submitForm,
-    handleRemove,
-    handleFormChange: () => (isAddMode() ? handleAddChange : handleEditChange),
-    handleFormNameChange: () => (isAddMode() ? handleAddNameChange : handleEditNameChange),
-    handleFormUsernameChange: () => (isAddMode() ? handleAddUsernameChange : handleEditUsernameChange),
-    handleFormPasswordChange: () => (isAddMode() ? handleAddPasswordChange : handleEditPasswordChange),
-  }
-}
-
-export function ServerConnectionList(props: { controller: ReturnType<typeof useServerManagementController> }) {
+export function ServerConnectionList(props: {
+  domain: ServerDomainController
+  onAdd: () => void
+  onEdit: (server: ServerConnection.Http) => void
+}) {
   const language = useLanguage()
   const settings = useSettings()
 
@@ -584,10 +149,10 @@ export function ServerConnectionList(props: { controller: ReturnType<typeof useS
         }}
         noInitialSelection
         emptyMessage={language.t("dialog.server.empty")}
-        items={props.controller.sortedItems}
+        items={props.domain.collection.items}
         key={(x) => x.http.url}
         onSelect={(x) => {
-          if (x && !settings.general.newLayoutDesigns()) void props.controller.select(x)
+          if (x && !settings.general.newLayoutDesigns()) void props.domain.selection.select(x)
         }}
         divider={true}
       >
@@ -596,15 +161,15 @@ export function ServerConnectionList(props: { controller: ReturnType<typeof useS
           return (
             <div class="flex items-center gap-3 min-w-0 flex-1 w-full group/item">
               <div class="flex flex-col h-full items-center w-5">
-                <ServerHealthIndicator health={props.controller.status()[key]} />
+                <ServerHealthIndicator health={props.domain.collection.health()[key]} />
               </div>
               <ServerRow
                 conn={i}
-                dimmed={props.controller.status()[key]?.healthy === false}
-                status={props.controller.status()[key]}
+                dimmed={props.domain.collection.health()[key]?.healthy === false}
+                status={props.domain.collection.health()[key]}
                 class="flex items-center gap-3 min-w-0 flex-1"
                 badge={
-                  <Show when={props.controller.defaultKey() === ServerConnection.key(i)}>
+                  <Show when={props.domain.defaults.key() === ServerConnection.key(i)}>
                     <span class="text-text-base bg-surface-base text-14-regular px-1.5 rounded-xs">
                       {language.t("dialog.server.status.default")}
                     </span>
@@ -613,7 +178,12 @@ export function ServerConnectionList(props: { controller: ReturnType<typeof useS
                 showCredentials
               />
               <div class="flex items-center justify-center gap-4 pl-4">
-                <Show when={props.controller.current() && ServerConnection.key(props.controller.current()!) === key}>
+                <Show
+                  when={
+                    props.domain.collection.current() &&
+                    ServerConnection.key(props.domain.collection.current()!) === key
+                  }
+                >
                   <Icon name="check" class="h-6" />
                 </Show>
 
@@ -632,18 +202,18 @@ export function ServerConnectionList(props: { controller: ReturnType<typeof useS
                         <DropdownMenu.Item
                           onSelect={() => {
                             if (i.type !== "http") return
-                            props.controller.startEdit(i)
+                            props.onEdit(i)
                           }}
                         >
                           <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.edit")}</DropdownMenu.ItemLabel>
                         </DropdownMenu.Item>
-                        <Show when={props.controller.canDefault() && props.controller.defaultKey() !== key}>
-                          <DropdownMenu.Item onSelect={() => props.controller.setDefault(key)}>
+                        <Show when={props.domain.defaults.available() && props.domain.defaults.key() !== key}>
+                          <DropdownMenu.Item onSelect={() => props.domain.defaults.set(key)}>
                             <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.default")}</DropdownMenu.ItemLabel>
                           </DropdownMenu.Item>
                         </Show>
-                        <Show when={props.controller.canDefault() && props.controller.defaultKey() === key}>
-                          <DropdownMenu.Item onSelect={() => props.controller.setDefault(null)}>
+                        <Show when={props.domain.defaults.available() && props.domain.defaults.key() === key}>
+                          <DropdownMenu.Item onSelect={() => props.domain.defaults.set(null)}>
                             <DropdownMenu.ItemLabel>
                               {language.t("dialog.server.menu.defaultRemove")}
                             </DropdownMenu.ItemLabel>
@@ -651,7 +221,7 @@ export function ServerConnectionList(props: { controller: ReturnType<typeof useS
                         </Show>
                         <DropdownMenu.Separator />
                         <DropdownMenu.Item
-                          onSelect={() => props.controller.handleRemove(ServerConnection.key(i))}
+                          onSelect={() => props.domain.connection.remove(ServerConnection.key(i))}
                           class="text-text-on-critical-base hover:bg-surface-critical-weak"
                         >
                           <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.delete")}</DropdownMenu.ItemLabel>
@@ -671,7 +241,7 @@ export function ServerConnectionList(props: { controller: ReturnType<typeof useS
           variant="secondary"
           icon="plus-small"
           size="large"
-          onClick={props.controller.startAdd}
+          onClick={props.onAdd}
           class="py-1.5 pl-1.5 pr-3 flex items-center gap-1.5"
         >
           {language.t("dialog.server.add.button")}
@@ -681,38 +251,38 @@ export function ServerConnectionList(props: { controller: ReturnType<typeof useS
   )
 }
 
-export function ServerConnectionForm(props: { controller: ReturnType<typeof useServerManagementController> }) {
+export function ServerConnectionForm(props: { form: ServerFormController }) {
   const language = useLanguage()
 
   return (
     <div class="flex flex-1 min-h-0 flex-col gap-4">
       <ServerForm
-        value={props.controller.formValue()}
-        name={props.controller.formName()}
-        username={props.controller.formUsername()}
-        password={props.controller.formPassword()}
+        value={props.form.state.value()}
+        name={props.form.state.name()}
+        username={props.form.state.username()}
+        password={props.form.state.password()}
         placeholder={language.t("dialog.server.add.placeholder")}
-        busy={props.controller.formBusy()}
-        error={props.controller.formError()}
-        status={props.controller.formStatus()}
-        onChange={props.controller.handleFormChange()}
-        onNameChange={props.controller.handleFormNameChange()}
-        onUsernameChange={props.controller.handleFormUsernameChange()}
-        onPasswordChange={props.controller.handleFormPasswordChange()}
-        onSubmit={props.controller.submitForm}
-        onBack={props.controller.resetForm}
+        busy={props.form.state.busy()}
+        error={props.form.state.error()}
+        status={props.form.state.status()}
+        onChange={props.form.change.value}
+        onNameChange={props.form.change.name}
+        onUsernameChange={props.form.change.username}
+        onPasswordChange={props.form.change.password}
+        onSubmit={props.form.submit}
+        onBack={props.form.reset}
       />
       <div class="shrink-0 pb-5">
         <Button
           variant="primary"
           size="large"
-          onClick={props.controller.submitForm}
-          disabled={props.controller.formBusy()}
+          onClick={props.form.submit}
+          disabled={props.form.state.busy()}
           class="px-3 py-1.5"
         >
-          {props.controller.formBusy()
+          {props.form.state.busy()
             ? language.t("dialog.server.add.checking")
-            : props.controller.isAddMode()
+            : props.form.state.adding()
               ? language.t("dialog.server.add.button")
               : language.t("common.save")}
         </Button>

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

@@ -522,20 +522,22 @@ function PromptInputV2ModelControl(props: {
         >
           <ModelSelectorPopoverV2
             model={props.model}
-            triggerAs={ButtonV2}
-            triggerProps={{
-              variant: "ghost-muted",
-              size: "normal",
-              style: { height: "28px" },
-              class: "min-w-0 max-w-[220px] justify-start ![font-weight:440] group",
-              classList: { "animate-in fade-in": shouldAnimate() },
-              "data-action": "prompt-model",
-              "data-control-type": "popover",
-            }}
+            trigger={(triggerProps) => (
+              <ButtonV2
+                {...triggerProps}
+                variant="ghost-muted"
+                size="normal"
+                style={{ height: "28px" }}
+                class="min-w-0 max-w-[220px] justify-start ![font-weight:440] group"
+                classList={{ "animate-in fade-in": shouldAnimate() }}
+                data-action="prompt-model"
+                data-control-type="popover"
+              >
+                {content()}
+              </ButtonV2>
+            )}
             onClose={props.onClose}
-          >
-            {content()}
-          </ModelSelectorPopoverV2>
+          />
         </Show>
       </TooltipV2>
     </Show>

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

@@ -1723,29 +1723,31 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                         >
                           <ModelSelectorPopover
                             model={props.controls.model.selection}
-                            triggerAs={Button}
-                            triggerProps={{
-                              variant: "ghost",
-                              size: "normal",
-                              style: control(),
-                              class: "min-w-0 max-w-[320px] text-13-regular text-text-base group",
-                              "data-action": "prompt-model",
-                            }}
+                            trigger={(triggerProps) => (
+                              <Button
+                                {...triggerProps}
+                                variant="ghost"
+                                size="normal"
+                                style={control()}
+                                class="min-w-0 max-w-[320px] text-13-regular text-text-base group"
+                                data-action="prompt-model"
+                              >
+                                <Show when={props.controls.model.selection.current()?.provider?.id}>
+                                  <ProviderIcon
+                                    id={props.controls.model.selection.current()?.provider?.id ?? ""}
+                                    class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
+                                    style={{ "will-change": "opacity", transform: "translateZ(0)" }}
+                                  />
+                                </Show>
+                                <span class="truncate">
+                                  {props.controls.model.selection.current()?.name ??
+                                    language.t("dialog.model.select.title")}
+                                </span>
+                                <Icon name="chevron-down" size="small" class="shrink-0" />
+                              </Button>
+                            )}
                             onClose={restoreFocus}
-                          >
-                            <Show when={props.controls.model.selection.current()?.provider?.id}>
-                              <ProviderIcon
-                                id={props.controls.model.selection.current()?.provider?.id ?? ""}
-                                class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
-                                style={{ "will-change": "opacity", transform: "translateZ(0)" }}
-                              />
-                            </Show>
-                            <span class="truncate">
-                              {props.controls.model.selection.current()?.name ??
-                                language.t("dialog.model.select.title")}
-                            </span>
-                            <Icon name="chevron-down" size="small" class="shrink-0" />
-                          </ModelSelectorPopover>
+                          />
                         </TooltipKeybind>
                       </Show>
                     </div>

packages/app/src/components/prompt-project-selector.tsx

@@ -18,6 +18,7 @@ import { useLanguage } from "@/context/language"
 import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
 import { pathKey } from "@/utils/path-key"
 import { handleDocumentSearchKeydown } from "@/utils/search-keydown"
+import { createMenuDismissController } from "@/utils/menu-dismiss-controller"
 
 export type PromptProject = {
   name?: string
@@ -197,8 +198,8 @@ export function PromptProjectSelector(props: {
 }) {
   const [triggerReady, setTriggerReady] = createSignal(false)
   let contentRef: HTMLDivElement | undefined
+  const dismiss = createMenuDismissController(() => contentRef)
   let triggerFrame: number | undefined
-  let restoreTrigger = true
 
   // Floating UI requires a connected anchor; route transitions can construct this trigger before adoption.
   const setTriggerRef = (element: HTMLButtonElement) => {
@@ -221,25 +222,15 @@ export function PromptProjectSelector(props: {
     props.controller.active()
       ? contentRef?.querySelector<HTMLElement>(`[data-option-key="${CSS.escape(props.controller.active())}"]`)
       : undefined
-  const afterClose = (callback: () => void) => {
-    const complete = () => {
-      if (contentRef?.isConnected) {
-        requestAnimationFrame(complete)
-        return
-      }
-      requestAnimationFrame(() => requestAnimationFrame(callback))
-    }
-    requestAnimationFrame(complete)
-  }
   const selectProject = (project: PromptProject) => {
-    restoreTrigger = false
+    dismiss.preventTriggerRestore()
     props.controller.setOpen(false)
-    afterClose(() => props.controller.select(project))
+    dismiss.afterClose(() => props.controller.select(project))
   }
   const selectAction = (server?: string) => {
-    restoreTrigger = false
+    dismiss.preventTriggerRestore()
     props.controller.setOpen(false)
-    afterClose(() => props.controller.add(server))
+    dismiss.afterClose(() => props.controller.add(server))
   }
   const selectActive = () => {
     const project = props.controller.activeProject()
@@ -267,7 +258,7 @@ export function PromptProjectSelector(props: {
     )
       .filter((element) => !contentRef?.contains(element) && !element.hasAttribute("data-focus-trap"))
       .findLast((element) => element.offsetParent !== null)
-    restoreTrigger = false
+    dismiss.preventTriggerRestore()
     target?.focus()
     queueMicrotask(() => {
       if (props.controller.open()) props.controller.setOpen(false)
@@ -291,7 +282,10 @@ export function PromptProjectSelector(props: {
       placement={props.placement ?? "bottom"}
       gutter={4}
       modal={false}
-      onOpenChange={(open) => props.controller.setOpen(open)}
+      onOpenChange={(open) => {
+        if (open) dismiss.allowTriggerRestore()
+        props.controller.setOpen(open)
+      }}
     >
       <DropdownMenu.Trigger as={ProjectTrigger} ref={setTriggerRef} controller={props.controller} />
       <DropdownMenu.Portal>
@@ -300,11 +294,9 @@ export function PromptProjectSelector(props: {
           id="prompt-project-menu"
           class="w-[243px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 p-0 shadow-[var(--v2-elevation-floating)] focus:outline-none [&[data-closed]]:!animate-none"
           onOpenAutoFocus={(event) => event.preventDefault()}
-          onPointerDownOutside={() => (restoreTrigger = false)}
-          onFocusOutside={() => (restoreTrigger = false)}
-          onCloseAutoFocus={(event) => {
-            if (!restoreTrigger) event.preventDefault()
-          }}
+          onPointerDownOutside={dismiss.preventTriggerRestore}
+          onFocusOutside={dismiss.preventTriggerRestore}
+          onCloseAutoFocus={dismiss.onCloseAutoFocus}
         >
           <div class="flex flex-col p-0.5">
             <div class="flex h-7 items-center gap-2 rounded-sm pl-3 pr-2.5 text-v2-icon-icon-muted">

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

@@ -0,0 +1,336 @@
+import { useNavigate } from "@solidjs/router"
+import { useMutation } from "@tanstack/solid-query"
+import { createEffect, createMemo, createResource, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useGlobal } from "@/context/global"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
+import { useSettings } from "@/context/settings"
+import { useTabs } from "@/context/tabs"
+import { type ServerHealth, useCheckServerHealth } from "@/utils/server-health"
+import { detectServerProtocol } from "@/utils/server-protocol"
+import { showToast } from "@/utils/toast"
+import { createServerHealthPreview, replaceServerConnection, type ServerFormValues } from "./server-management"
+
+const DEFAULT_USERNAME = "opencode"
+
+type FormMode = "list" | "add" | "edit"
+
+function showRequestError(language: ReturnType<typeof useLanguage>, err: unknown) {
+  showToast({
+    variant: "error",
+    title: language.t("common.requestFailed"),
+    description: err instanceof Error ? err.message : String(err),
+  })
+}
+
+function useDefaultServer() {
+  const language = useLanguage()
+  const platform = usePlatform()
+  const [defaultKey, defaultKeyActions] = createResource(
+    async () => {
+      try {
+        return (await platform.getDefaultServer?.()) ?? null
+      } catch (err) {
+        showRequestError(language, err)
+        return null
+      }
+    },
+    { initialValue: null },
+  )
+
+  const set = async (key: ServerConnection.Key | null) => {
+    try {
+      await platform.setDefaultServer?.(key)
+      defaultKeyActions.mutate(key)
+    } catch (err) {
+      showRequestError(language, err)
+    }
+  }
+
+  return {
+    key: () => defaultKey.latest,
+    available: createMemo(() => !!platform.getDefaultServer && !!platform.setDefaultServer),
+    set,
+  }
+}
+
+function useServerMutations() {
+  const server = useServer()
+  const tabs = useTabs()
+
+  return {
+    add: (connection: ServerConnection.Http) => server.add(connection),
+    replace: (original: ServerConnection.Http, next: ServerConnection.Http) =>
+      replaceServerConnection(original, next, {
+        active: () => server.key,
+        removeTabs: (key) => tabs.removeServer(key),
+        add: (connection) => server.add(connection),
+        setActive: (key) => server.setActive(key),
+        remove: (key) => server.remove(key),
+      }),
+  }
+}
+
+export function useServerActionsController() {
+  const server = useServer()
+  const tabs = useTabs()
+  const platform = usePlatform()
+  const language = useLanguage()
+  const defaults = useDefaultServer()
+
+  const remove = async (key: ServerConnection.Key) => {
+    try {
+      if (key.startsWith("wsl:")) await platform.wslServers?.removeServer(key)
+      tabs.removeServer(key)
+      server.remove(key)
+      if ((await platform.getDefaultServer?.()) === key) await defaults.set(null)
+    } catch (err) {
+      showRequestError(language, err)
+    }
+  }
+
+  return { defaults, connection: { remove } }
+}
+
+export type ServerActionsController = ReturnType<typeof useServerActionsController>
+
+export function useServerCollectionController() {
+  const server = useServer()
+  const global = useGlobal()
+  const settings = useSettings()
+  const actions = useServerActionsController()
+
+  const items = createMemo(() => {
+    const current = server.current
+    const list = server.list
+    if (!current) return list
+    if (!list.includes(current)) return [current, ...list]
+    return [current, ...list.filter((item) => item !== current)]
+  })
+  const current = createMemo<ServerConnection.Any | undefined>(() =>
+    settings.general.newLayoutDesigns()
+      ? undefined
+      : (items().find((item) => ServerConnection.key(item) === server.key) ?? items()[0]),
+  )
+  const sorted = createMemo(() => {
+    const raw = items()
+    const list = settings.general.newLayoutDesigns()
+      ? raw
+      : raw.filter((item) => global.ensureServerCtx(item).sdk.protocolKind() !== "v2")
+    if (!list.length) return list
+    const active = current()
+    const order = new Map(list.map((item, index) => [item, index] as const))
+    const rank = (value?: ServerHealth) => {
+      if (value?.healthy === true) return 0
+      if (value?.healthy === false) return 2
+      return 1
+    }
+    return list.slice().sort((a, b) => {
+      if (a === active) return -1
+      if (b === active) return 1
+      const diff =
+        rank(global.servers.health[ServerConnection.key(a)]) - rank(global.servers.health[ServerConnection.key(b)])
+      if (diff !== 0) return diff
+      return (order.get(a) ?? 0) - (order.get(b) ?? 0)
+    })
+  })
+
+  return {
+    collection: {
+      items: sorted,
+      current,
+      health: () => global.servers.health,
+    },
+    ...actions,
+  }
+}
+
+export type ServerCollectionController = ReturnType<typeof useServerCollectionController>
+
+export function useServerDomainController(options: { onSelect?: () => void } = {}) {
+  const navigate = useNavigate()
+  const server = useServer()
+  const global = useGlobal()
+  const collection = useServerCollectionController()
+
+  const select = async (connection: ServerConnection.Any) => {
+    if (global.servers.health[ServerConnection.key(connection)]?.healthy === false) return
+    options.onSelect?.()
+    navigate("/")
+    queueMicrotask(() => server.setActive(ServerConnection.key(connection)))
+  }
+
+  return { ...collection, selection: { select } }
+}
+
+export type ServerDomainController = ReturnType<typeof useServerDomainController>
+
+export function useServerFormController(options: { onSelect?: () => void; navigateOnAdd?: boolean } = {}) {
+  const navigate = useNavigate()
+  const server = useServer()
+  const global = useGlobal()
+  const platform = usePlatform()
+  const language = useLanguage()
+  const settings = useSettings()
+  const mutations = useServerMutations()
+  const checkServerHealth = useCheckServerHealth()
+  const healthPreview = createServerHealthPreview(checkServerHealth)
+  const [store, setStore] = createStore({
+    mode: "list" as FormMode,
+    originalUrl: undefined as string | undefined,
+    values: { url: "", name: "", username: DEFAULT_USERNAME, password: "" },
+    error: "",
+    status: undefined as boolean | undefined,
+  })
+
+  onCleanup(healthPreview.cancel)
+
+  const reset = () => {
+    healthPreview.cancel()
+    setStore({
+      mode: "list",
+      originalUrl: undefined,
+      values: { url: "", name: "", username: DEFAULT_USERNAME, password: "" },
+      error: "",
+      status: undefined,
+    })
+  }
+  const allServers = () => {
+    if (!server.current || server.list.includes(server.current)) return server.list
+    return [server.current, ...server.list]
+  }
+  const editing = createMemo(() =>
+    allServers().find((item) => item.type === "http" && item.http.url === store.originalUrl),
+  )
+
+  const request = useMutation(() => ({
+    mutationFn: async () => {
+      const normalized = normalizeServerUrl(store.values.url)
+      if (!normalized) {
+        reset()
+        return
+      }
+
+      const original = store.mode === "edit" ? editing() : undefined
+      if (store.mode === "edit" && !original) return
+      const name = store.values.name.trim() || undefined
+      const username = store.values.username || undefined
+      const password = store.values.password || undefined
+      if (
+        original?.type === "http" &&
+        normalized === original.http.url &&
+        name === original.displayName &&
+        username === original.http.username &&
+        password === original.http.password
+      ) {
+        reset()
+        return
+      }
+
+      const connection: ServerConnection.Http = {
+        type: "http",
+        displayName: name,
+        http: {
+          url: normalized,
+          username: store.mode === "add" && !password ? undefined : username,
+          password,
+        },
+      }
+      const result = await checkServerHealth(connection.http)
+      if (!result.healthy) {
+        setStore("error", language.t("dialog.server.add.error"))
+        return
+      }
+      if (
+        !settings.general.newLayoutDesigns() &&
+        (await detectServerProtocol(connection.http, platform.fetch ?? globalThis.fetch)) === "v2"
+      ) {
+        setStore("error", language.t("dialog.server.add.error"))
+        return
+      }
+
+      if (original?.type === "http") {
+        if (normalized === original.http.url) mutations.add(connection)
+        if (normalized !== original.http.url) mutations.replace(original, connection)
+        reset()
+        return
+      }
+
+      reset()
+      if (options.navigateOnAdd === false) {
+        mutations.add(connection)
+        options.onSelect?.()
+        return
+      }
+      mutations.add(connection)
+      options.onSelect?.()
+      navigate("/")
+    },
+  }))
+
+  const preview = () => void healthPreview.preview(store.values, (status) => setStore("status", status))
+  const change = (field: keyof ServerFormValues, value: string) => {
+    if (request.isPending) return
+    setStore("values", field, value)
+    setStore("error", "")
+    if (field !== "name") preview()
+  }
+  const startAdd = () => {
+    reset()
+    setStore("mode", "add")
+  }
+  const startEdit = (connection: ServerConnection.Http) => {
+    reset()
+    setStore({
+      mode: "edit",
+      originalUrl: connection.http.url,
+      values: {
+        url: connection.http.url,
+        name: connection.displayName ?? "",
+        username: connection.http.username ?? "",
+        password: connection.http.password ?? "",
+      },
+      error: "",
+      status: global.servers.health[ServerConnection.key(connection)]?.healthy,
+    })
+  }
+  const submit = () => {
+    if (store.mode === "list" || request.isPending) return
+    setStore("error", "")
+    request.mutate()
+  }
+
+  createEffect(() => {
+    if (store.mode !== "edit") return
+    if (editing()) return
+    reset()
+  })
+
+  return {
+    state: {
+      mode: () => store.mode,
+      open: () => store.mode !== "list",
+      adding: () => store.mode === "add",
+      busy: () => request.isPending,
+      value: () => store.values.url,
+      name: () => store.values.name,
+      username: () => store.values.username,
+      password: () => store.values.password,
+      error: () => store.error,
+      status: () => store.status,
+    },
+    change: {
+      value: (value: string) => change("url", value),
+      name: (value: string) => change("name", value),
+      username: (value: string) => change("username", value),
+      password: (value: string) => change("password", value),
+    },
+    start: { add: startAdd, edit: startEdit },
+    reset,
+    submit,
+  }
+}
+
+export type ServerFormController = ReturnType<typeof useServerFormController>

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

@@ -0,0 +1,99 @@
+import { describe, expect, test } from "bun:test"
+import { ServerConnection } from "@/context/server"
+import { createServerHealthPreview, replaceServerConnection, type ServerFormValues } from "./server-management"
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((done) => {
+    resolve = done
+  })
+  return { promise, resolve }
+}
+
+const values = (url: string): ServerFormValues => ({ url, name: "", username: "opencode", password: "" })
+
+describe("createServerHealthPreview", () => {
+  test("ignores an older response that resolves after the latest response", async () => {
+    const first = deferred<{ healthy: boolean }>()
+    const second = deferred<{ healthy: boolean }>()
+    const requests = [first, second]
+    const status: Array<boolean | undefined> = []
+    const preview = createServerHealthPreview(() => requests.shift()!.promise)
+
+    const older = preview.preview(values("old.example.com"), (value) => status.push(value))
+    const latest = preview.preview(values("new.example.com"), (value) => status.push(value))
+    second.resolve({ healthy: true })
+    await latest
+    first.resolve({ healthy: false })
+    await older
+
+    expect(status).toEqual([undefined, undefined, true])
+  })
+
+  test("an incomplete value invalidates an in-flight response", async () => {
+    const request = deferred<{ healthy: boolean }>()
+    const status: Array<boolean | undefined> = []
+    const preview = createServerHealthPreview(() => request.promise)
+
+    const pending = preview.preview(values("server.example.com"), (value) => status.push(value))
+    await preview.preview(values("server"), (value) => status.push(value))
+    request.resolve({ healthy: true })
+    await pending
+
+    expect(status).toEqual([undefined, undefined])
+  })
+
+  test("cancellation prevents an in-flight response from updating status", async () => {
+    const request = deferred<{ healthy: boolean }>()
+    const status: Array<boolean | undefined> = []
+    const preview = createServerHealthPreview(() => request.promise)
+
+    const pending = preview.preview(values("server.example.com"), (value) => status.push(value))
+    preview.cancel()
+    request.resolve({ healthy: true })
+    await pending
+
+    expect(status).toEqual([undefined])
+  })
+})
+
+describe("replaceServerConnection", () => {
+  const original: ServerConnection.Http = { type: "http", http: { url: "https://old.example.com" } }
+  const next: ServerConnection.Http = { type: "http", http: { url: "https://new.example.com" } }
+
+  test("moves active selection after adding the replacement and removes the original", () => {
+    const calls: string[] = []
+
+    replaceServerConnection(original, next, {
+      active: () => ServerConnection.key(original),
+      removeTabs: (key) => calls.push(`tabs:${key}`),
+      add: (server) => {
+        calls.push(`add:${ServerConnection.key(server)}`)
+        return server
+      },
+      setActive: (key) => calls.push(`active:${key}`),
+      remove: (key) => calls.push(`remove:${key}`),
+    })
+
+    expect(calls).toEqual([
+      "tabs:https://old.example.com",
+      "add:https://new.example.com",
+      "active:https://new.example.com",
+      "remove:https://old.example.com",
+    ])
+  })
+
+  test("keeps the original when the replacement cannot be added", () => {
+    const removed: ServerConnection.Key[] = []
+
+    replaceServerConnection(original, next, {
+      active: () => ServerConnection.key(original),
+      removeTabs: () => {},
+      add: () => undefined,
+      setActive: () => {},
+      remove: (key) => removed.push(key),
+    })
+
+    expect(removed).toEqual([])
+  })
+})

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

@@ -0,0 +1,60 @@
+import { normalizeServerUrl, ServerConnection } from "@/context/server"
+import type { ServerHealth } from "@/utils/server-health"
+
+export type ServerFormValues = {
+  url: string
+  name: string
+  username: string
+  password: string
+}
+
+export function createServerHealthPreview(
+  check: (server: ServerConnection.HttpBase) => Promise<Pick<ServerHealth, "healthy">>,
+) {
+  let generation = 0
+
+  const cancel = () => {
+    generation += 1
+  }
+
+  const preview = async (values: ServerFormValues, setStatus: (value: boolean | undefined) => void) => {
+    const current = ++generation
+    setStatus(undefined)
+    const normalized = normalizeServerUrl(values.url)
+    if (!normalized) return
+    const host = normalized.replace(/^https?:\/\//, "").split("/")[0]
+    if (!host) return
+    if (!host.includes("localhost") && !host.startsWith("127.0.0.1") && !host.includes(".") && !host.includes(":"))
+      return
+
+    const http: ServerConnection.HttpBase = { url: normalized }
+    if (values.username) http.username = values.username
+    if (values.password) http.password = values.password
+    const result = await check(http)
+    if (current !== generation) return
+    setStatus(result.healthy)
+  }
+
+  return { cancel, preview }
+}
+
+export function replaceServerConnection(
+  original: ServerConnection.Http,
+  next: ServerConnection.Http,
+  operations: {
+    active: () => ServerConnection.Key | undefined
+    removeTabs: (key: ServerConnection.Key) => void
+    add: (server: ServerConnection.Http) => ServerConnection.Any | undefined
+    setActive: (key: ServerConnection.Key) => void
+    remove: (key: ServerConnection.Key) => void
+  },
+) {
+  const originalKey = ServerConnection.key(original)
+  const active = operations.active()
+  operations.removeTabs(originalKey)
+  const added = operations.add(next)
+  if (!added) return
+  const nextActive = active === originalKey ? ServerConnection.key(added) : active
+  if (nextActive) operations.setActive(nextActive)
+  operations.remove(originalKey)
+}

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

@@ -2,13 +2,13 @@ import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { type Component, Show } from "solid-js"
-import { useServerManagementController } from "@/components/dialog-select-server"
+import type { ServerActionsController } from "@/components/server/server-management-controller"
 import { useLanguage } from "@/context/language"
 import { ServerConnection } from "@/context/server"
 
 export const ServerRowMenu: Component<{
   server: ServerConnection.Any
-  controller: ReturnType<typeof useServerManagementController>
+  domain: ServerActionsController
   onEdit: (server: ServerConnection.Http) => void
   open?: boolean
   onOpenChange?: (open: boolean) => void
@@ -19,12 +19,12 @@ export const ServerRowMenu: Component<{
     <ServerRowMenuView
       server={props.server}
       labels={serverMenuLabels(language)}
-      canDefault={props.controller.canDefault()}
-      isDefault={props.controller.defaultKey() === key}
+      canDefault={props.domain.defaults.available()}
+      isDefault={props.domain.defaults.key() === key}
       onEdit={props.onEdit}
-      onSetDefault={() => props.controller.setDefault(key)}
-      onRemoveDefault={() => props.controller.setDefault(null)}
-      onRemove={() => props.controller.handleRemove(key)}
+      onSetDefault={() => props.domain.defaults.set(key)}
+      onRemoveDefault={() => props.domain.defaults.set(null)}
+      onRemove={() => props.domain.connection.remove(key)}
       open={props.open}
       onOpenChange={props.onOpenChange}
     />

packages/app/src/components/settings-keybinds.test.ts

@@ -0,0 +1,103 @@
+import { describe, expect, test } from "bun:test"
+import { createRoot } from "solid-js"
+import { createKeybindSettingsController } from "./settings-keybinds"
+
+function setup(overrides: Record<string, string> = {}) {
+  const changes: [string, string][] = []
+  const suppression: boolean[] = []
+  const notifications: { title: string; description?: string }[] = []
+  let resets = 0
+  let controller: ReturnType<typeof createKeybindSettingsController>
+
+  const dispose = createRoot((dispose) => {
+    controller = createKeybindSettingsController({
+      command: {
+        catalog: [
+          { id: "session.alpha", title: "Alpha", keybind: "mod+a" },
+          { id: "session.beta", title: "Beta", keybind: "mod+b" },
+        ],
+        options: [],
+        keybinds: (enabled) => suppression.push(enabled),
+      },
+      locale: () => "en",
+      translate: (key, params) => {
+        if (params) return `${key}:${Object.values(params).join("|")}`
+        if (key === "common.key.alt") return "Alt"
+        return String(key)
+      },
+      settings: {
+        current: { keybinds: overrides },
+        keybinds: {
+          get: (id) => overrides[id],
+          set: (id, value) => {
+            overrides[id] = value
+            changes.push([id, value])
+          },
+          resetAll: () => {
+            resets++
+          },
+        },
+      },
+      notify: (toast) => notifications.push(toast),
+    })
+    return dispose
+  })
+
+  return {
+    controller: controller!,
+    changes,
+    suppression,
+    notifications,
+    resets: () => resets,
+    dispose,
+  }
+}
+
+function modKey(key: string) {
+  const mac = /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
+  return new KeyboardEvent("keydown", { key, ctrlKey: !mac, metaKey: mac, bubbles: true, cancelable: true })
+}
+
+describe("keybind settings controller", () => {
+  test("derives the catalog, effective bindings, and filtered groups", () => {
+    const state = setup({ "session.beta": "alt+k" })
+
+    expect(state.controller.catalog.title("session.alpha")).toBe("Alpha")
+    expect(state.controller.catalog.keybind("session.beta")).toBe("Alt+K")
+    expect(state.controller.catalog.filtered("alt k").get("Session")).toEqual(["session.beta"])
+    expect(state.controller.settings.hasOverrides()).toBe(true)
+
+    state.dispose()
+  })
+
+  test("captures bindings, rejects conflicts, and restores command handling", () => {
+    const state = setup()
+
+    state.controller.capture.toggle("session.beta")
+    document.dispatchEvent(modKey("a"))
+    expect(state.changes).toEqual([])
+    expect(state.notifications).toHaveLength(1)
+    expect(state.controller.capture.active()).toBe("session.beta")
+
+    document.dispatchEvent(modKey("x"))
+    expect(state.changes).toEqual([["session.beta", "mod+x"]])
+    expect(state.suppression).toEqual([false, true])
+    expect(state.controller.capture.active()).toBeNull()
+
+    state.controller.capture.toggle("session.alpha")
+    state.dispose()
+    expect(state.suppression).toEqual([false, true, false, true])
+    document.dispatchEvent(modKey("z"))
+    expect(state.changes).toEqual([["session.beta", "mod+x"]])
+  })
+
+  test("resets persisted overrides and reports success", () => {
+    const state = setup({ "session.alpha": "none" })
+
+    state.controller.settings.reset()
+    expect(state.resets()).toBe(1)
+    expect(state.notifications[0]?.title).toBe("settings.shortcuts.reset.toast.title")
+
+    state.dispose()
+  })
+})

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

@@ -30,6 +30,8 @@ type KeybindMeta = {
 
 type KeybindMap = Record<string, string | undefined>
 type CommandContext = ReturnType<typeof useCommand>
+type LanguageContext = ReturnType<typeof useLanguage>
+type SettingsContext = ReturnType<typeof useSettings>
 
 const GROUPS: KeybindGroup[] = ["General", "Session", "Navigation", "Model and agent", "Terminal", "Prompt"]
 
@@ -122,7 +124,7 @@ function keybinds(value: unknown): KeybindMap {
   return value as KeybindMap
 }
 
-function listFor(command: CommandContext, map: KeybindMap, palette: string) {
+function listFor(command: Pick<CommandContext, "catalog" | "options">, map: KeybindMap, palette: string) {
   const out = new Map<string, KeybindMeta>()
   out.set(PALETTE_ID, { title: palette, group: "General" })
 
@@ -262,11 +264,288 @@ function useKeyCapture(input: {
   })
 }
 
+export function createKeybindSettingsController(input: {
+  command: Pick<CommandContext, "catalog" | "options" | "keybinds">
+  locale: LanguageContext["locale"]
+  translate: LanguageContext["t"]
+  settings: {
+    current: { keybinds: unknown }
+    keybinds: Pick<SettingsContext["keybinds"], "get" | "set" | "resetAll">
+  }
+  target?: Document
+  notify?: (toast: { title: string; description: string }) => void
+}) {
+  const [store, setStore] = createStore({ active: null as string | null })
+  const overrides = createMemo(() => keybinds(input.settings.current.keybinds))
+  const list = createMemo(() => {
+    input.locale()
+    return listFor(input.command, overrides(), input.translate("command.palette"))
+  })
+  const grouped = createMemo(() => groupedFor(list()))
+  const title = (id: string) => list().get(id)?.title ?? ""
+  const effective = (id: string) => {
+    if (id === PALETTE_ID) return input.settings.keybinds.get(id) ?? DEFAULT_PALETTE_KEYBIND
+
+    const custom = input.settings.keybinds.get(id)
+    if (typeof custom === "string") return custom
+
+    const live = input.command.options.find((item) => item.id === id)
+    if (live?.keybind) return live.keybind
+    return input.command.catalog.find((item) => item.id === id)?.keybind
+  }
+  const used = createMemo(() => {
+    const value = new Map<string, { id: string; title: string }[]>()
+
+    for (const id of list().keys()) {
+      for (const signature of signatures(effective(id))) {
+        const items = value.get(signature)
+        if (items) {
+          items.push({ id, title: title(id) })
+          continue
+        }
+        value.set(signature, [{ id, title: title(id) }])
+      }
+    }
+
+    return value
+  })
+  const stop = () => {
+    if (!store.active) return
+    setStore("active", null)
+    input.command.keybinds(true)
+  }
+  const toggle = (id: string) => {
+    if (store.active === id) {
+      stop()
+      return
+    }
+    if (store.active) stop()
+    setStore("active", id)
+    input.command.keybinds(false)
+  }
+  const notify = input.notify ?? ((toast: { title: string; description: string }) => showToast(toast))
+
+  onMount(() => {
+    const handle = (event: KeyboardEvent) => {
+      const id = store.active
+      if (!id) return
+
+      event.preventDefault()
+      event.stopPropagation()
+      event.stopImmediatePropagation()
+
+      if (event.key === "Escape") {
+        stop()
+        return
+      }
+
+      const clear =
+        (event.key === "Backspace" || event.key === "Delete") &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        !event.altKey &&
+        !event.shiftKey
+      if (clear) {
+        input.settings.keybinds.set(id, "none")
+        stop()
+        return
+      }
+
+      const next = recordKeybind(event)
+      if (!next) return
+
+      const conflicts = new Map<string, string>()
+      for (const signature of signatures(next)) {
+        for (const item of used().get(signature) ?? []) {
+          if (item.id === id) continue
+          conflicts.set(item.id, item.title)
+        }
+      }
+
+      if (conflicts.size > 0) {
+        notify({
+          title: input.translate("settings.shortcuts.conflict.title"),
+          description: input.translate("settings.shortcuts.conflict.description", {
+            keybind: formatKeybind(next, input.translate),
+            titles: [...conflicts.values()].join(", "),
+          }),
+        })
+        return
+      }
+
+      input.settings.keybinds.set(id, next)
+      stop()
+    }
+
+    makeEventListener(input.target ?? document, "keydown", handle, { capture: true })
+  })
+
+  onCleanup(() => {
+    if (store.active) input.command.keybinds(true)
+  })
+
+  return {
+    catalog: {
+      groups: GROUPS,
+      filtered: (query: string) =>
+        filteredFor(query, list(), grouped(), (id) => formatKeybind(effective(id) ?? "", input.translate)),
+      title,
+      keybind: (id: string) => formatKeybind(effective(id) ?? "", input.translate),
+    },
+    capture: {
+      active: () => store.active,
+      toggle,
+    },
+    settings: {
+      hasOverrides: () => Object.values(overrides()).some((value) => typeof value === "string"),
+      reset: () => {
+        stop()
+        input.settings.keybinds.resetAll()
+        notify({
+          title: input.translate("settings.shortcuts.reset.toast.title"),
+          description: input.translate("settings.shortcuts.reset.toast.description"),
+        })
+      },
+    },
+  }
+}
+
+function SettingsKeybindsV2(props: { command: CommandContext; language: LanguageContext; settings: SettingsContext }) {
+  const controller = createKeybindSettingsController({
+    command: props.command,
+    locale: props.language.locale,
+    translate: props.language.t,
+    settings: props.settings,
+  })
+
+  return (
+    <SettingsKeybindsV2View
+      groups={controller.catalog.groups}
+      filtered={controller.catalog.filtered}
+      title={controller.catalog.title}
+      keybind={controller.catalog.keybind}
+      active={controller.capture.active}
+      onCapture={controller.capture.toggle}
+      hasOverrides={controller.settings.hasOverrides}
+      onReset={controller.settings.reset}
+      groupLabel={(group) => props.language.t(groupKey[group])}
+      titleLabel={() => props.language.t("settings.shortcuts.title")}
+      resetLabel={() => props.language.t("settings.shortcuts.reset.button")}
+      searchLabel={() => props.language.t("settings.shortcuts.search.placeholder")}
+      emptyLabel={() => props.language.t("settings.shortcuts.search.empty")}
+      unassignedLabel={() => props.language.t("settings.shortcuts.unassigned")}
+      pressKeysLabel={() => props.language.t("settings.shortcuts.pressKeys")}
+    />
+  )
+}
+
+function SettingsKeybindsV2View(props: {
+  groups: KeybindGroup[]
+  filtered: (query: string) => Map<KeybindGroup, string[]>
+  title: (id: string) => string
+  keybind: (id: string) => string
+  active: () => string | null
+  onCapture: (id: string) => void
+  hasOverrides: () => boolean
+  onReset: () => void
+  groupLabel: (group: KeybindGroup) => string
+  titleLabel: () => string
+  resetLabel: () => string
+  searchLabel: () => string
+  emptyLabel: () => string
+  unassignedLabel: () => string
+  pressKeysLabel: () => string
+}) {
+  const [store, setStore] = createStore({ filter: "" })
+  const filtered = createMemo(() => props.filtered(store.filter))
+  const hasResults = createMemo(() => props.groups.some((group) => (filtered().get(group)?.length ?? 0) > 0))
+
+  return (
+    <>
+      <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
+        <div class="settings-v2-tab-header-row">
+          <h2 class="settings-v2-tab-title">{props.titleLabel()}</h2>
+          <ButtonV2 variant="ghost" onClick={props.onReset} disabled={!props.hasOverrides()}>
+            {props.resetLabel()}
+          </ButtonV2>
+        </div>
+        <div class="settings-v2-tab-search">
+          <TextInputV2
+            type="search"
+            appearance="base"
+            value={store.filter}
+            onInput={(event) => setStore("filter", event.currentTarget.value)}
+            placeholder={props.searchLabel()}
+            spellcheck={false}
+            autocorrect="off"
+            autocomplete="off"
+            autocapitalize="off"
+            aria-label={props.searchLabel()}
+          />
+          <Show when={store.filter}>
+            <IconButtonV2
+              type="button"
+              variant="ghost-muted"
+              size="small"
+              class="settings-v2-tab-search-clear"
+              icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
+              onClick={() => setStore("filter", "")}
+            />
+          </Show>
+        </div>
+      </div>
+      <div class="settings-v2-tab-body">
+        <div class="settings-v2-shortcuts flex flex-col gap-8">
+          <For each={props.groups}>
+            {(group) => (
+              <Show when={(filtered().get(group) ?? []).length > 0}>
+                <div class="settings-v2-section">
+                  <h3 class="settings-v2-section-title">{props.groupLabel(group)}</h3>
+                  <SettingsListV2>
+                    <For each={filtered().get(group) ?? []}>
+                      {(id) => (
+                        <div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
+                          <span>{props.title(id)}</span>
+                          <button
+                            type="button"
+                            data-keybind-id={id}
+                            classList={{
+                              "settings-v2-keybind-button": true,
+                              "settings-v2-keybind-button--active": props.active() === id,
+                            }}
+                            onClick={() => props.onCapture(id)}
+                          >
+                            <Show when={props.active() === id} fallback={props.keybind(id) || props.unassignedLabel()}>
+                              {props.pressKeysLabel()}
+                            </Show>
+                          </button>
+                        </div>
+                      )}
+                    </For>
+                  </SettingsListV2>
+                </div>
+              </Show>
+            )}
+          </For>
+          <Show when={store.filter && !hasResults()}>
+            <div class="settings-v2-shortcuts-status">
+              <span>{props.emptyLabel()}</span>
+              <span class="settings-v2-shortcuts-status-filter">&quot;{store.filter}&quot;</span>
+            </div>
+          </Show>
+        </div>
+      </div>
+    </>
+  )
+}
+
 export const SettingsKeybinds: Component<{ v2?: boolean }> = (props) => {
   const command = useCommand()
   const language = useLanguage()
   const settings = useSettings()
 
+  if (props.v2) return <SettingsKeybindsV2 command={command} language={language} settings={settings} />
+
   const [store, setStore] = createStore({
     active: null as string | null,
     filter: "",
@@ -476,78 +755,37 @@ export const SettingsKeybinds: Component<{ v2?: boolean }> = (props) => {
   )
 
   return (
-    <Show
-      when={props.v2}
-      fallback={
-        <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
-          <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
-            <div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
-              <div class="flex items-center justify-between gap-4">
-                <h2 class="text-16-medium text-text-strong">{language.t("settings.shortcuts.title")}</h2>
-                <Button size="small" variant="secondary" onClick={resetAll} disabled={!hasOverrides()}>
-                  {language.t("settings.shortcuts.reset.button")}
-                </Button>
-              </div>
-
-              <div class="flex items-center gap-2 px-3 h-9 rounded-lg bg-surface-base">
-                <Icon name="magnifying-glass" class="text-icon-weak-base flex-shrink-0" />
-                <TextField
-                  variant="ghost"
-                  type="text"
-                  value={store.filter}
-                  onChange={(v) => setStore("filter", v)}
-                  placeholder={language.t("settings.shortcuts.search.placeholder")}
-                  spellcheck={false}
-                  autocorrect="off"
-                  autocomplete="off"
-                  autocapitalize="off"
-                  class="flex-1"
-                />
-                <Show when={store.filter}>
-                  <IconButton icon="circle-x" variant="ghost" onClick={() => setStore("filter", "")} />
-                </Show>
-              </div>
-            </div>
-          </div>
-          {groups}
-        </div>
-      }
-    >
-      <>
-        <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
-          <div class="settings-v2-tab-header-row">
-            <h2 class="settings-v2-tab-title">{language.t("settings.shortcuts.title")}</h2>
-            <ButtonV2 variant="ghost" onClick={resetAll} disabled={!hasOverrides()}>
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+      <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
+        <div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
+          <div class="flex items-center justify-between gap-4">
+            <h2 class="text-16-medium text-text-strong">{language.t("settings.shortcuts.title")}</h2>
+            <Button size="small" variant="secondary" onClick={resetAll} disabled={!hasOverrides()}>
               {language.t("settings.shortcuts.reset.button")}
-            </ButtonV2>
+            </Button>
           </div>
-          <div class="settings-v2-tab-search">
-            <TextInputV2
-              type="search"
-              appearance="base"
+
+          <div class="flex items-center gap-2 px-3 h-9 rounded-lg bg-surface-base">
+            <Icon name="magnifying-glass" class="text-icon-weak-base flex-shrink-0" />
+            <TextField
+              variant="ghost"
+              type="text"
               value={store.filter}
-              onInput={(event) => setStore("filter", event.currentTarget.value)}
+              onChange={(v) => setStore("filter", v)}
               placeholder={language.t("settings.shortcuts.search.placeholder")}
               spellcheck={false}
               autocorrect="off"
               autocomplete="off"
               autocapitalize="off"
-              aria-label={language.t("settings.shortcuts.search.placeholder")}
+              class="flex-1"
             />
             <Show when={store.filter}>
-              <IconButtonV2
-                type="button"
-                variant="ghost-muted"
-                size="small"
-                class="settings-v2-tab-search-clear"
-                icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
-                onClick={() => setStore("filter", "")}
-              />
+              <IconButton icon="circle-x" variant="ghost" onClick={() => setStore("filter", "")} />
             </Show>
           </div>
         </div>
-        <div class="settings-v2-tab-body">{groups}</div>
-      </>
-    </Show>
+      </div>
+      {groups}
+    </div>
   )
 }

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

@@ -1,16 +1,19 @@
 import { Show, type Component } from "solid-js"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 import { useLanguage } from "@/context/language"
-import { ServerConnectionForm, ServerConnectionList, useServerManagementController } from "./dialog-select-server"
+import { useServerDomainController, useServerFormController } from "./server/server-management-controller"
+import { ServerConnectionForm, ServerConnectionList } from "./dialog-select-server"
 
 export const SettingsServers: Component = () => {
   const language = useLanguage()
-  const controller = useServerManagementController()
+  const domain = useServerDomainController()
+  const form = useServerFormController()
 
   return (
     <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
       <div class="flex flex-col flex-1 min-h-0 max-w-[720px]">
         <Show
-          when={controller.isFormMode()}
+          when={form.state.open()}
           fallback={
             <>
               <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
@@ -18,13 +21,25 @@ export const SettingsServers: Component = () => {
                   <h2 class="text-16-medium text-text-strong">{language.t("status.popover.tab.servers")}</h2>
                 </div>
               </div>
-              <ServerConnectionList controller={controller} />
+              <ServerConnectionList domain={domain} onAdd={form.start.add} onEdit={form.start.edit} />
             </>
           }
         >
           <div class="flex flex-1 min-h-0 flex-col gap-4 pt-6">
-            <div class="text-16-medium text-text-strong">{controller.formTitle()}</div>
-            <ServerConnectionForm controller={controller} />
+            <div class="text-16-medium text-text-strong">
+              <div class="flex items-center gap-2 -ml-2">
+                <IconButton
+                  icon="arrow-left"
+                  variant="ghost"
+                  onClick={form.reset}
+                  aria-label={language.t("common.goBack")}
+                />
+                <span>
+                  {form.state.adding() ? language.t("dialog.server.add.title") : language.t("dialog.server.edit.title")}
+                </span>
+              </div>
+            </div>
+            <ServerConnectionForm form={form} />
           </div>
         </Show>
       </div>

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

@@ -6,7 +6,7 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { type Component, Show, createEffect, createSignal, onCleanup, onMount } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { type ServerConnection } from "@/context/server"
-import { useServerManagementController } from "../dialog-select-server"
+import { useServerFormController } from "../server/server-management-controller"
 import "./settings-v2.css"
 
 export const DialogServerV2: Component<{
@@ -15,39 +15,39 @@ export const DialogServerV2: Component<{
 }> = (props) => {
   const dialog = useDialog()
   const language = useLanguage()
-  const controller = useServerManagementController({
+  const form = useServerFormController({
     onSelect: () => dialog.close(),
     navigateOnAdd: false,
   })
   const [opened, setOpened] = createSignal(false)
 
   onMount(() => {
-    if (props.mode === "add") controller.startAdd()
-    if (props.mode === "edit" && props.server) controller.startEdit(props.server)
+    if (props.mode === "add") form.start.add()
+    if (props.mode === "edit" && props.server) form.start.edit(props.server)
     setOpened(true)
   })
 
   onCleanup(() => {
-    controller.resetForm()
+    form.reset()
   })
 
   createEffect(() => {
     if (!opened()) return
-    if (controller.isFormMode()) return
+    if (form.state.open()) return
     dialog.close()
   })
 
   const keyDown = (event: KeyboardEvent) => {
     if (event.key !== "Enter" || event.isComposing) return
     event.preventDefault()
-    controller.submitForm()
+    form.submit()
   }
 
   const title = () =>
     props.mode === "add" ? language.t("dialog.server.add.title") : language.t("dialog.server.edit.title")
 
   const submitLabel = () => {
-    if (controller.formBusy()) return language.t("dialog.server.add.checking")
+    if (form.state.busy()) return language.t("dialog.server.add.checking")
     if (props.mode === "add") return language.t("dialog.server.add.button")
     return language.t("common.save")
   }
@@ -66,16 +66,16 @@ export const DialogServerV2: Component<{
               type="text"
               appearance="large"
               class="!w-full self-stretch"
-              value={controller.formValue()}
+              value={form.state.value()}
               placeholder={language.t("dialog.server.add.placeholder")}
-              invalid={!!controller.formError()}
-              disabled={controller.formBusy()}
+              invalid={!!form.state.error()}
+              disabled={form.state.busy()}
               autofocus
-              onInput={(event) => controller.handleFormChange()(event.currentTarget.value)}
+              onInput={(event) => form.change.value(event.currentTarget.value)}
               onKeyDown={keyDown}
             />
-            <Show when={controller.formError()}>
-              <span class="settings-v2-server-dialog-error">{controller.formError()}</span>
+            <Show when={form.state.error()}>
+              <span class="settings-v2-server-dialog-error">{form.state.error()}</span>
             </Show>
           </div>
           <div class="flex w-full min-w-0 flex-col gap-2">
@@ -84,10 +84,10 @@ export const DialogServerV2: Component<{
               type="text"
               appearance="large"
               class="!w-full self-stretch"
-              value={controller.formName()}
+              value={form.state.name()}
               placeholder={language.t("dialog.server.add.namePlaceholder")}
-              disabled={controller.formBusy()}
-              onInput={(event) => controller.handleFormNameChange()(event.currentTarget.value)}
+              disabled={form.state.busy()}
+              onInput={(event) => form.change.name(event.currentTarget.value)}
               onKeyDown={keyDown}
             />
           </div>
@@ -98,10 +98,10 @@ export const DialogServerV2: Component<{
                 type="text"
                 appearance="large"
                 class="!w-full self-stretch"
-                value={controller.formUsername()}
+                value={form.state.username()}
                 placeholder={language.t("dialog.server.add.usernamePlaceholder")}
-                disabled={controller.formBusy()}
-                onInput={(event) => controller.handleFormUsernameChange()(event.currentTarget.value)}
+                disabled={form.state.busy()}
+                onInput={(event) => form.change.username(event.currentTarget.value)}
                 onKeyDown={keyDown}
               />
             </div>
@@ -111,10 +111,10 @@ export const DialogServerV2: Component<{
                 type="password"
                 appearance="large"
                 class="!w-full self-stretch"
-                value={controller.formPassword()}
+                value={form.state.password()}
                 placeholder={language.t("dialog.server.add.passwordPlaceholder")}
-                disabled={controller.formBusy()}
-                onInput={(event) => controller.handleFormPasswordChange()(event.currentTarget.value)}
+                disabled={form.state.busy()}
+                onInput={(event) => form.change.password(event.currentTarget.value)}
                 onKeyDown={keyDown}
               />
             </div>
@@ -122,10 +122,10 @@ export const DialogServerV2: Component<{
         </div>
       </DialogBody>
       <DialogFooter>
-        <ButtonV2 variant="neutral" disabled={controller.formBusy()} onClick={() => dialog.close()}>
+        <ButtonV2 variant="neutral" disabled={form.state.busy()} onClick={() => dialog.close()}>
           {language.t("common.cancel")}
         </ButtonV2>
-        <ButtonV2 variant="contrast" disabled={controller.formBusy()} onClick={controller.submitForm}>
+        <ButtonV2 variant="contrast" disabled={form.state.busy()} onClick={form.submit}>
           {submitLabel()}
         </ButtonV2>
       </DialogFooter>

packages/app/src/components/settings-v2/general-controller-behavior.ts

@@ -0,0 +1,73 @@
+import { onCleanup } from "solid-js"
+
+export type ShellOption = {
+  path: string
+  name: string
+  acceptable: boolean
+}
+
+export type ShellSelectOption = {
+  id: string
+  value: string
+  label: string
+}
+
+export function createShellOptions(input: {
+  shells: ShellOption[]
+  current: string | undefined
+  automatic: string
+  terminalOnly: string
+}) {
+  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: "", label: input.automatic },
+    ...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,
+        label: shell.acceptable ? name : `${name} (${input.terminalOnly})`,
+      }
+    }),
+  ]
+  if (input.current && !options.some((option) => option.value === input.current)) {
+    options.push({ id: input.current, value: input.current, label: input.current })
+  }
+  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 }
+}

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

@@ -0,0 +1,55 @@
+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",
+        automatic: "Automatic",
+        terminalOnly: "Terminal only",
+      }),
+    ).toEqual([
+      { id: "auto", value: "", label: "Automatic" },
+      { id: "/bin/bash", value: "/bin/bash", label: "/bin/bash" },
+      { id: "/opt/bash", value: "/opt/bash", label: "/opt/bash (Terminal only)" },
+      { id: "/bin/zsh", value: "zsh", label: "zsh" },
+      { id: "fish", value: "fish", label: "fish" },
+    ])
+  })
+
+  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()
+    }
+  })
+})

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

@@ -0,0 +1,198 @@
+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 { useLanguage } from "@/context/language"
+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 {
+  createShellOptions,
+  createSoundPreviewController,
+  type ShellOption,
+  type ShellSelectOption,
+} 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 language = useLanguage()
+  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 ?? "")
+  const options = createMemo(() =>
+    createShellOptions({
+      shells: shells.latest,
+      current: current(),
+      automatic: language.t("settings.general.row.shell.autoDefault"),
+      terminalOnly: language.t("settings.general.row.shell.terminalOnly"),
+    }),
+  )
+
+  return {
+    current: createMemo(() => options().find((option) => option.value === current()) ?? options()[0]),
+    options,
+    select: (option: ShellSelectOption | null) => {
+      if (!option || option.value === current()) return
+      void serverSync().updateConfig({ shell: option.value })
+    },
+  }
+}
+
+export function createAppearanceSettingsController() {
+  const language = useLanguage()
+  const settings = useSettings()
+  const theme = useTheme()
+  const schemes = 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 themes = createMemo(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
+
+  onMount(() => void theme.loadThemes())
+
+  return {
+    scheme: {
+      options: schemes,
+      current: createMemo(() => schemes().find((option) => option.value === theme.colorScheme())),
+      select: (option: { value: ColorScheme } | null) => option && theme.setColorScheme(option.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 language = useLanguage()
+  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 {
+    options: soundOptions,
+    label: (option: SoundSelectOption) => language.t(option.label),
+    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>

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

@@ -1,182 +1,346 @@
-import { Component, Show, createMemo, createResource, onMount } from "solid-js"
+import { Component, Show, createMemo, createResource, type Accessor } 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 {
-  monoDefault,
-  monoFontFamily,
-  monoInput,
-  sansDefault,
-  sansFontFamily,
-  sansInput,
-  terminalDefault,
-  terminalFontFamily,
-  terminalInput,
-  useSettings,
-} from "@/context/settings"
-import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
+import { useSettings } from "@/context/settings"
 import { Link } from "../link"
 import { SettingsListV2 } from "./parts/list"
 import { SettingsRowV2 } from "./parts/row"
 import { LayoutRetirementNotice, LayoutTransitionToggle } from "./interface-transition"
+import {
+  createAppearanceSettingsController,
+  createPermissionScopeController,
+  createShellSettingsController,
+  createSoundSettingsController,
+  type AppearanceSettingsController,
+  type PermissionScopeController,
+  type ShellSelectOption,
+  type ShellSettingsController,
+  type SoundSelectOption,
+  type SoundSettingsController,
+} from "./general-controllers"
 import "./settings-v2.css"
 
-let demoSoundState = {
-  cleanup: undefined as (() => void) | undefined,
-  timeout: undefined as NodeJS.Timeout | undefined,
-  run: 0,
+const PermissionScopeSetting: Component<{ controller: PermissionScopeController }> = (props) => {
+  const language = useLanguage()
+  return (
+    <PermissionScopeSettingView
+      title={language.t("command.permissions.autoaccept.enable")}
+      description={language.t("toast.permissions.autoaccept.on.description")}
+      checked={props.controller.accepting}
+      enabled={props.controller.enabled}
+      onChange={(checked) => props.controller.set(checked)}
+    />
+  )
 }
 
-type ThemeOption = {
-  id: string
-  name: string
+const PermissionScopeSettingView: Component<{
+  title: string
+  description: string
+  checked: Accessor<boolean>
+  enabled: Accessor<boolean>
+  onChange: (checked: boolean) => void
+}> = (props) => (
+  <SettingsRowV2 title={props.title} description={props.description}>
+    <div data-action="settings-auto-accept-permissions">
+      <Switch checked={props.checked()} disabled={!props.enabled()} onChange={props.onChange} />
+    </div>
+  </SettingsRowV2>
+)
+
+const ShellSetting: Component<{ controller: ShellSettingsController }> = (props) => {
+  const language = useLanguage()
+  return (
+    <ShellSettingView
+      title={language.t("settings.general.row.shell.title")}
+      description={language.t("settings.general.row.shell.description")}
+      options={props.controller.options}
+      current={props.controller.current}
+      onSelect={(option) => props.controller.select(option)}
+    />
+  )
 }
 
-type ShellOption = {
-  path: string
-  name: string
-  acceptable: boolean
+const ShellSettingView: Component<{
+  title: string
+  description: string
+  options: Accessor<ShellSelectOption[]>
+  current: Accessor<ShellSelectOption | undefined>
+  onSelect: (option: ShellSelectOption | null) => void
+}> = (props) => (
+  <SettingsRowV2 title={props.title} description={props.description}>
+    <SelectV2
+      appearance="inline"
+      data-action="settings-shell"
+      options={props.options()}
+      current={props.current()}
+      placement="bottom-end"
+      gutter={6}
+      value={(option) => option.id}
+      label={(option) => option.label}
+      onSelect={props.onSelect}
+    />
+  </SettingsRowV2>
+)
+
+const AppearanceSection: Component<{ controller: AppearanceSettingsController }> = (props) => {
+  const language = useLanguage()
+  return (
+    <AppearanceSectionView
+      t={language.t}
+      schemeOptions={props.controller.scheme.options}
+      currentScheme={props.controller.scheme.current}
+      onSchemeSelect={props.controller.scheme.select}
+      themeOptions={props.controller.theme.options}
+      currentTheme={props.controller.theme.current}
+      onThemeSelect={props.controller.theme.select}
+      uiFont={props.controller.fonts.ui}
+      codeFont={props.controller.fonts.code}
+      terminalFont={props.controller.fonts.terminal}
+      onUIFontInput={props.controller.fonts.setUI}
+      onCodeFontInput={props.controller.fonts.setCode}
+      onTerminalFontInput={props.controller.fonts.setTerminal}
+    />
+  )
 }
 
-type ShellSelectOption = {
-  id: string
-  value: string
-  label: string
+type AppearanceSectionViewProps = {
+  t: ReturnType<typeof useLanguage>["t"]
+  schemeOptions: AppearanceSettingsController["scheme"]["options"]
+  currentScheme: AppearanceSettingsController["scheme"]["current"]
+  onSchemeSelect: AppearanceSettingsController["scheme"]["select"]
+  themeOptions: AppearanceSettingsController["theme"]["options"]
+  currentTheme: AppearanceSettingsController["theme"]["current"]
+  onThemeSelect: AppearanceSettingsController["theme"]["select"]
+  uiFont: AppearanceSettingsController["fonts"]["ui"]
+  codeFont: AppearanceSettingsController["fonts"]["code"]
+  terminalFont: AppearanceSettingsController["fonts"]["terminal"]
+  onUIFontInput: (value: string) => void
+  onCodeFontInput: (value: string) => void
+  onTerminalFontInput: (value: string) => void
 }
 
-// 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 AppearanceSectionView: Component<AppearanceSectionViewProps> = (props) => (
+  <div class="settings-v2-section">
+    <h3 class="settings-v2-section-title">{props.t("settings.general.section.appearance")}</h3>
+    <SettingsListV2>
+      <SettingsRowV2
+        title={props.t("settings.general.row.colorScheme.title")}
+        description={props.t("settings.general.row.colorScheme.description")}
+      >
+        <SelectV2
+          appearance="inline"
+          data-action="settings-color-scheme"
+          options={props.schemeOptions()}
+          current={props.currentScheme()}
+          placement="bottom-end"
+          gutter={6}
+          value={(option) => option.value}
+          label={(option) => option.label}
+          onSelect={props.onSchemeSelect}
+        />
+      </SettingsRowV2>
+
+      <SettingsRowV2
+        title={props.t("settings.general.row.theme.title")}
+        description={
+          <>
+            {props.t("settings.general.row.theme.description")}{" "}
+            <Link class="settings-v2-link" href="https://opencode.ai/docs/themes/">
+              {props.t("common.learnMore")}
+            </Link>
+          </>
+        }
+      >
+        <SelectV2
+          appearance="inline"
+          data-action="settings-theme"
+          options={props.themeOptions()}
+          current={props.currentTheme()}
+          placement="bottom-end"
+          gutter={6}
+          value={(option) => option.id}
+          label={(option) => option.name}
+          onSelect={props.onThemeSelect}
+        />
+      </SettingsRowV2>
+
+      <FontSettingView
+        action="settings-ui-font"
+        title={props.t("settings.general.row.uiFont.title")}
+        description={props.t("settings.general.row.uiFont.description")}
+        font={props.uiFont}
+        onInput={props.onUIFontInput}
+      />
+      <FontSettingView
+        action="settings-code-font"
+        title={props.t("settings.general.row.font.title")}
+        description={props.t("settings.general.row.font.description")}
+        font={props.codeFont}
+        onInput={props.onCodeFontInput}
+      />
+      <FontSettingView
+        action="settings-terminal-font"
+        title={props.t("settings.general.row.terminalFont.title")}
+        description={props.t("settings.general.row.terminalFont.description")}
+        font={props.terminalFont}
+        onInput={props.onTerminalFontInput}
+      />
+    </SettingsListV2>
+  </div>
+)
+
+const FontSettingView: Component<{
+  action: string
+  title: string
+  description: string
+  font: Accessor<{ value: string; family: string; placeholder: string }>
+  onInput: (value: string) => void
+}> = (props) => (
+  <SettingsRowV2 title={props.title} description={props.description}>
+    <div class="w-full sm:w-[220px]">
+      <TextInputV2
+        data-action={props.action}
+        type="text"
+        appearance="base"
+        value={props.font().value}
+        onInput={(event) => props.onInput(event.currentTarget.value)}
+        placeholder={props.font().placeholder}
+        spellcheck={false}
+        autocorrect="off"
+        autocomplete="off"
+        autocapitalize="off"
+        aria-label={props.title}
+        style={{ "font-family": props.font().family }}
+      />
+    </div>
+  </SettingsRowV2>
+)
+
+const SoundsSection: Component<{ controller: SoundSettingsController }> = (props) => {
+  const language = useLanguage()
+  return (
+    <SoundsSectionView
+      t={language.t}
+      options={props.controller.options}
+      label={props.controller.label}
+      agentCurrent={props.controller.agent.current}
+      onAgentHighlight={(option) => props.controller.agent.highlight(option)}
+      onAgentSelect={(option) => props.controller.agent.select(option)}
+      permissionsCurrent={props.controller.permissions.current}
+      onPermissionsHighlight={(option) => props.controller.permissions.highlight(option)}
+      onPermissionsSelect={(option) => props.controller.permissions.select(option)}
+      errorsCurrent={props.controller.errors.current}
+      onErrorsHighlight={(option) => props.controller.errors.highlight(option)}
+      onErrorsSelect={(option) => props.controller.errors.select(option)}
+    />
+  )
 }
 
-const playDemoSound = (id: string | undefined) => {
-  stopDemoSound()
-  if (!id) return
+const SoundsSectionView: Component<{
+  t: ReturnType<typeof useLanguage>["t"]
+  options: SoundSelectOption[]
+  label: (option: SoundSelectOption) => string
+  agentCurrent: Accessor<SoundSelectOption>
+  onAgentHighlight: (option: SoundSelectOption | undefined) => void
+  onAgentSelect: (option: SoundSelectOption | null) => void
+  permissionsCurrent: Accessor<SoundSelectOption>
+  onPermissionsHighlight: (option: SoundSelectOption | undefined) => void
+  onPermissionsSelect: (option: SoundSelectOption | null) => void
+  errorsCurrent: Accessor<SoundSelectOption>
+  onErrorsHighlight: (option: SoundSelectOption | undefined) => void
+  onErrorsSelect: (option: SoundSelectOption | null) => void
+}> = (props) => (
+  <div class="settings-v2-section">
+    <h3 class="settings-v2-section-title">{props.t("settings.general.section.sounds")}</h3>
+    <SettingsListV2>
+      <SoundSettingView
+        action="settings-sounds-agent"
+        title={props.t("settings.general.sounds.agent.title")}
+        description={props.t("settings.general.sounds.agent.description")}
+        options={props.options}
+        label={props.label}
+        current={props.agentCurrent}
+        onHighlight={props.onAgentHighlight}
+        onSelect={props.onAgentSelect}
+      />
+      <SoundSettingView
+        action="settings-sounds-permissions"
+        title={props.t("settings.general.sounds.permissions.title")}
+        description={props.t("settings.general.sounds.permissions.description")}
+        options={props.options}
+        label={props.label}
+        current={props.permissionsCurrent}
+        onHighlight={props.onPermissionsHighlight}
+        onSelect={props.onPermissionsSelect}
+      />
+      <SoundSettingView
+        action="settings-sounds-errors"
+        title={props.t("settings.general.sounds.errors.title")}
+        description={props.t("settings.general.sounds.errors.description")}
+        options={props.options}
+        label={props.label}
+        current={props.errorsCurrent}
+        onHighlight={props.onErrorsHighlight}
+        onSelect={props.onErrorsSelect}
+      />
+    </SettingsListV2>
+  </div>
+)
 
-  const run = ++demoSoundState.run
-  demoSoundState.timeout = setTimeout(() => {
-    void playSoundById(id).then((cleanup) => {
-      if (demoSoundState.run !== run) {
-        cleanup?.()
-        return
-      }
-      demoSoundState.cleanup = cleanup
-    })
-  }, 100)
-}
+const SoundSettingView: Component<{
+  action: string
+  title: string
+  description: string
+  options: SoundSelectOption[]
+  label: (option: SoundSelectOption) => string
+  current: Accessor<SoundSelectOption>
+  onHighlight: (option: SoundSelectOption | undefined) => void
+  onSelect: (option: SoundSelectOption | null) => void
+}> = (props) => (
+  <SettingsRowV2 title={props.title} description={props.description}>
+    <SelectV2
+      appearance="inline"
+      data-action={props.action}
+      options={props.options}
+      current={props.current()}
+      value={(option) => option.id}
+      label={props.label}
+      onHighlight={props.onHighlight}
+      onSelect={props.onSelect}
+      placement="bottom-end"
+      gutter={6}
+    />
+  </SettingsRowV2>
+)
 
 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 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 permissionScope = createPermissionScopeController(() => props.sessionID)
+  const shell = createShellSettingsController()
+  const appearance = createAppearanceSettingsController()
+  const sounds = createSoundSettingsController()
   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() && platform.getPinchZoomEnabled ? true : false),
+    () => desktop() && "getPinchZoomEnabled" in platform,
     () => 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)
@@ -184,12 +348,6 @@ 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,
@@ -197,39 +355,6 @@ export const SettingsGeneralV2: Component<{
     })),
   )
 
-  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")}
@@ -251,7 +376,7 @@ 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()}
     />
   )
 
@@ -275,35 +400,9 @@ export const SettingsGeneralV2: Component<{
           />
         </SettingsRowV2>
 
-        <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>
+        <PermissionScopeSetting controller={permissionScope} />
 
-        <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>
+        <ShellSetting controller={shell} />
 
         <SettingsRowV2
           title={language.t("settings.general.row.reasoningSummaries.title")}
@@ -414,124 +513,6 @@ 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>
@@ -576,68 +557,6 @@ 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>
@@ -659,7 +578,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>
@@ -704,11 +623,11 @@ export const SettingsGeneralV2: Component<{
 
         <GeneralSection />
 
-        <AppearanceSection />
+        <AppearanceSection controller={appearance} />
 
         <NotificationsSection />
 
-        <SoundsSection />
+        <SoundsSection controller={sounds} />
 
         <Show when={desktop()}>
           <UpdatesSection />

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

@@ -10,7 +10,7 @@ import { ServerRowMenu } from "@/components/server/server-row-menu"
 import { ServerHealthIndicator } from "@/components/server/server-row"
 import { useLanguage } from "@/context/language"
 import { ServerConnection, serverName } from "@/context/server"
-import { useServerManagementController } from "../dialog-select-server"
+import { useServerCollectionController } from "../server/server-management-controller"
 import { DialogServerV2 } from "./dialog-server-v2"
 import { SettingsListV2 } from "./parts/list"
 import { AddServerMenu, isWslServer, useFilteredWslServers, WslServerSettings } from "@/wsl/settings"
@@ -19,16 +19,16 @@ import "./settings-v2.css"
 export const SettingsServersV2: Component = () => {
   const dialog = useDialog()
   const language = useLanguage()
-  const controller = useServerManagementController()
+  const domain = useServerCollectionController()
   const [store, setStore] = createStore({ filter: "" })
   const wslServers = useFilteredWslServers(() => store.filter)
 
   const showSearch = createMemo(
-    () => controller.sortedItems().filter((item) => !isWslServer(item)).length + wslServers().length > 1,
+    () => domain.collection.items().filter((item) => !isWslServer(item)).length + wslServers().length > 1,
   )
 
   const filtered = createMemo(() => {
-    const items = controller.sortedItems().filter((item) => !isWslServer(item))
+    const items = domain.collection.items().filter((item) => !isWslServer(item))
     const query = store.filter.trim()
     if (!query) return items
     return fuzzysort
@@ -39,11 +39,11 @@ export const SettingsServersV2: Component = () => {
   })
 
   const openAdd = () => {
-    dialog.push(() => <DialogServerV2 mode="add" />)
+    void dialog.push(() => <DialogServerV2 mode="add" />)
   }
 
   const openEdit = (server: ServerConnection.Http) => {
-    dialog.push(() => <DialogServerV2 mode="edit" server={server} />)
+    void dialog.push(() => <DialogServerV2 mode="edit" server={server} />)
   }
 
   return (
@@ -97,12 +97,12 @@ export const SettingsServersV2: Component = () => {
           }
         >
           <SettingsListV2>
-            <WslServerSettings controller={controller} servers={wslServers} />
+            <WslServerSettings domain={domain} servers={wslServers} />
             <For each={filtered()}>
               {(item) => {
                 const key = ServerConnection.key(item)
-                const health = () => controller.status()[key]
-                const isDefault = () => controller.defaultKey() === key
+                const health = () => domain.collection.health()[key]
+                const isDefault = () => domain.defaults.key() === key
                 return (
                   <div class="settings-v2-servers-row">
                     <div class="settings-v2-servers-lead">
@@ -122,10 +122,10 @@ export const SettingsServersV2: Component = () => {
                       </div>
                     </div>
                     <div class="settings-v2-servers-actions">
-                      <Show when={controller.canDefault() && isDefault()}>
+                      <Show when={domain.defaults.available() && isDefault()}>
                         <Tag>{language.t("dialog.server.status.default")}</Tag>
                       </Show>
-                      <ServerRowMenu server={item} controller={controller} onEdit={openEdit} />
+                      <ServerRowMenu server={item} domain={domain} onEdit={openEdit} />
                     </div>
                   </div>
                 )

packages/app/src/components/status-popover-indicator.test.ts

@@ -1,11 +1,21 @@
 import { describe, expect, test } from "bun:test"
-import { hasNonBlockingServiceIssue, serverStatusDotClass } from "./status-popover-indicator"
+import {
+  hasNonBlockingServiceIssue,
+  hasServiceNeedingAttention,
+  serverStatusDotClass,
+} from "./status-popover-indicator"
 
 describe("serverStatusDotClass", () => {
   test("uses the success token while the server and services are healthy", () => {
     expect(serverStatusDotClass({ ready: true, serverHealth: true, issue: false })).toBe("bg-icon-success-base")
   })
 
+  test("uses the session attention token when a service needs attention", () => {
+    expect(serverStatusDotClass({ ready: true, serverHealth: true, attention: true, issue: true })).toBe(
+      "bg-v2-background-bg-accent",
+    )
+  })
+
   test("uses the warning token for non-blocking issues while the server is online", () => {
     expect(serverStatusDotClass({ ready: true, serverHealth: true, issue: true })).toBe("bg-icon-warning-base")
   })
@@ -34,3 +44,15 @@ describe("hasNonBlockingServiceIssue", () => {
     expect(hasNonBlockingServiceIssue({ mcp: [], lsp: ["connected"] })).toBe(false)
   })
 })
+
+describe("hasServiceNeedingAttention", () => {
+  test("detects MCP states that need user attention", () => {
+    expect(hasServiceNeedingAttention({ mcp: ["needs_auth"] })).toBe(true)
+    expect(hasServiceNeedingAttention({ mcp: ["needs_client_registration"] })).toBe(true)
+  })
+
+  test("ignores states that do not need user attention", () => {
+    expect(hasServiceNeedingAttention({ mcp: ["failed"] })).toBe(false)
+    expect(hasServiceNeedingAttention({ mcp: ["connected", "pending", "disabled"] })).toBe(false)
+  })
+})

packages/app/src/components/status-popover-indicator.ts

@@ -1,6 +1,10 @@
 import type { LspStatus } from "@opencode-ai/sdk/v2/client"
 import type { McpServer } from "@opencode-ai/client/promise"
 
+export function hasServiceNeedingAttention(input: { mcp: Array<McpServer["status"]["status"]> }) {
+  return input.mcp.some((status) => status === "needs_auth" || status === "needs_client_registration")
+}
+
 export function hasNonBlockingServiceIssue(input: {
   mcp: Array<McpServer["status"]["status"]>
   lsp: Array<LspStatus["status"]>
@@ -11,9 +15,15 @@ export function hasNonBlockingServiceIssue(input: {
   )
 }
 
-export function serverStatusDotClass(input: { ready: boolean; serverHealth: boolean | undefined; issue: boolean }) {
+export function serverStatusDotClass(input: {
+  ready: boolean
+  serverHealth: boolean | undefined
+  attention?: boolean
+  issue: boolean
+}) {
   if (input.serverHealth === false) return "bg-icon-critical-base"
   if (!input.ready || input.serverHealth === undefined) return "bg-border-weak-base"
+  if (input.attention) return "bg-v2-background-bg-accent"
   if (input.issue) return "bg-icon-warning-base"
   if (input.serverHealth === true) return "bg-icon-success-base"
   return "bg-border-weak-base"

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

@@ -9,7 +9,11 @@ import { ServerConnection, useServer } from "@/context/server"
 import { useServerSDK } from "@/context/server-sdk"
 import { useSync } from "@/context/sync"
 import { useGlobal } from "@/context/global"
-import { hasNonBlockingServiceIssue, serverStatusDotClass } from "./status-popover-indicator"
+import {
+  hasNonBlockingServiceIssue,
+  hasServiceNeedingAttention,
+  serverStatusDotClass,
+} from "./status-popover-indicator"
 
 const Body = lazy(() => import("./status-popover-body").then((x) => ({ default: x.StatusPopoverBody })))
 const ServerBody = lazy(() => import("./status-popover-body").then((x) => ({ default: x.StatusPopoverServerBody })))
@@ -22,6 +26,11 @@ export function StatusPopover() {
   const [shown, setShown] = createSignal(false)
   const serverHealth = () => global.servers.health[server.key]?.healthy
   const ready = createMemo(() => serverHealth() === false || (sync().data.mcp_ready && sync().data.lsp_ready))
+  const attention = createMemo(() =>
+    hasServiceNeedingAttention({
+      mcp: Object.values(sync().data.mcp ?? {}).map((item) => item.status),
+    }),
+  )
   const issue = createMemo(() =>
     hasNonBlockingServiceIssue({
       mcp: Object.values(sync().data.mcp ?? {}).map((item) => item.status),
@@ -49,6 +58,7 @@ export function StatusPopover() {
             class={`absolute -top-px -right-px size-1.5 rounded-full ${serverStatusDotClass({
               ready: ready(),
               serverHealth: serverHealth(),
+              attention: attention(),
               issue: issue(),
             })}`}
           />
@@ -85,6 +95,11 @@ function DirectoryStatusPopover() {
   const [shown, setShown] = createSignal(false)
   const serverHealth = () => global.servers.health[ServerConnection.key(server().server)]?.healthy
   const ready = createMemo(() => serverHealth() === false || (sync().data.mcp_ready && sync().data.lsp_ready))
+  const attention = createMemo(() =>
+    hasServiceNeedingAttention({
+      mcp: Object.values(sync().data.mcp ?? {}).map((item) => item.status),
+    }),
+  )
   const issue = createMemo(() =>
     hasNonBlockingServiceIssue({
       mcp: Object.values(sync().data.mcp ?? {}).map((item) => item.status),
@@ -95,6 +110,7 @@ function DirectoryStatusPopover() {
     shown: shown(),
     ready: ready(),
     serverHealth: serverHealth(),
+    attention: attention(),
     issue: issue(),
     label: language.t("status.popover.trigger"),
     onOpenChange: setShown,
@@ -118,6 +134,7 @@ function ServerStatusPopover() {
     shown: shown(),
     ready: serverHealth() !== undefined,
     serverHealth: serverHealth(),
+    attention: false,
     issue: false,
     label: language.t("status.popover.trigger"),
     onOpenChange: setShown,
@@ -135,6 +152,7 @@ type StatusPopoverState = {
   shown: boolean
   ready: boolean
   serverHealth: boolean | undefined
+  attention: boolean
   issue: boolean
   label: string
   onOpenChange: (value: boolean) => void

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

@@ -290,6 +290,10 @@ export function createServerSyncContextInner(serverSDK: ServerSDK) {
 
   const queryClient = useQueryClient()
   const homeSessions = createHomeSessionIndexCache(queryClient, ServerConnection.key(serverSDK.server))
+  const refreshProviders = () =>
+    queryClient.refetchQueries({
+      predicate: (query) => query.queryKey[0] === serverSDK.scope && query.queryKey[2] === "providers",
+    })
 
   let bootedAt = 0
   let bootingRoot = false
@@ -537,6 +541,7 @@ export function createServerSyncContextInner(serverSDK: ServerSDK) {
       homeSessions.apply(event)
     }
     homeSessions.refresh(event.type)
+    if (eventType === "integration.connection.updated") void refreshProviders()
 
     if (directory === "global") {
       if (eventType === "server.connected" && activeSessionsQuery.data === undefined && !activeSessionsQuery.isFetching)
@@ -678,6 +683,7 @@ export function createServerSyncContextInner(serverSDK: ServerSDK) {
     peek: children.peek,
     disableMcp: children.disableMcp,
     queryOptions: queryOptionsApi,
+    refreshProviders,
     // bootstrap,
     updateConfig: updateConfigMutation.mutateAsync,
     project: projectApi,

packages/app/src/pages/home/home-projects-controller.tsx

@@ -1,5 +1,5 @@
 import { useDirectoryPicker } from "@/components/directory-picker"
-import { useServerManagementController } from "@/components/dialog-select-server"
+import { useServerActionsController } from "@/components/server/server-management-controller"
 import { useSettingsCommand } from "@/components/settings-dialog"
 import { DialogServerV2 } from "@/components/settings-v2/dialog-server-v2"
 import { type LocalProject } from "@/context/layout"
@@ -22,7 +22,7 @@ export function createHomeProjectsController(home: HomeController) {
   const language = useLanguage()
   const notification = useNotification()
   const openSettings = useSettingsCommand()
-  const serverManagement = useServerManagementController({ navigateOnAdd: false })
+  const serverManagement = useServerActionsController()
   const [_state, setState, _, ready] = persisted(
     Persist.global("home.servers", ["home.servers.v1"]),
     createStore({ collapsed: {} as Record<string, boolean> }),
@@ -56,11 +56,11 @@ export function createHomeProjectsController(home: HomeController) {
         const key = ServerConnection.key(conn)
         setState("collapsed", key, !state().collapsed[key])
       },
-      canDefault: serverManagement.canDefault,
-      defaultKey: serverManagement.defaultKey,
+      canDefault: serverManagement.defaults.available,
+      defaultKey: serverManagement.defaults.key,
       setDefault: (conn: ServerConnection.Any | undefined) =>
-        serverManagement.setDefault(conn ? ServerConnection.key(conn) : null),
-      remove: (conn: ServerConnection.Any) => serverManagement.handleRemove(ServerConnection.key(conn)),
+        serverManagement.defaults.set(conn ? ServerConnection.key(conn) : null),
+      remove: (conn: ServerConnection.Any) => serverManagement.connection.remove(ServerConnection.key(conn)),
       edit: (conn: ServerConnection.Http) => dialog.show(() => <DialogServerV2 mode="edit" server={conn} />),
       focus: home.selection.focusServer,
     },

packages/app/src/pages/new-session.tsx

@@ -1,290 +1,27 @@
-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 { 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"
+import { createPromptProjectController } from "@/components/prompt-project-selector"
+import { createNewSessionCommandController } from "./new-session/new-session-command-controller"
+import { createNewSessionDraftController } from "./new-session/new-session-draft-controller"
+import { NewSession } from "./new-session/new-session"
+import { createNewSessionWorkspaceController } from "./new-session/new-session-workspace-controller"
 
-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).
- */
+/** The draft-only V2 session page. Submitting promotes the draft into a real session. */
 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 workspace = createNewSessionWorkspaceController()
+  const draft = createNewSessionDraftController({
+    worktree: workspace.selection.value,
+    resetWorktree: workspace.selection.reset,
   })
-  const projectControls = createPromptProjectControls()
-
-  const [store, setStore] = createStore<{ worktree?: string }>({})
-  const rightMount = useTitlebarRightMount()
-
-  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()
-  })
-  const promptInputV2Controller = usePromptInputV2Controller({
-    get controls() {
-      return inputController()
+  const commands = createNewSessionCommandController({
+    restoreFocus: draft.input.restoreFocus,
+    project: {
+      empty: project.empty,
+      open: () => project.setOpen(true),
     },
-    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 (!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(
-    () => prompt.ready.promise ?? ready,
-    (promise) => promise.then(() => true),
-  )
-
-  return (
-    <div class="relative size-full overflow-hidden flex flex-col">
-      {suspendUntilPromptReady()}
-      <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">
-        <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>
-  )
+  return <NewSession draft={draft} commands={commands} workspace={workspace} project={project} />
 }

packages/app/src/pages/new-session/new-session-command-controller.tsx

@@ -0,0 +1,64 @@
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useSettingsCommand } from "@/components/settings-dialog"
+import { useCommand } from "@/context/command"
+import { useLanguage } from "@/context/language"
+import { useSDK } from "@/context/sdk"
+import { useServerSync } from "@/context/server-sync"
+import { useProviders } from "@/hooks/use-providers"
+
+export function createNewSessionCommandController(input: {
+  restoreFocus: () => void
+  project: {
+    empty: () => boolean
+    open: () => void
+  }
+}) {
+  const command = useCommand()
+  const dialog = useDialog()
+  const language = useLanguage()
+  const sdk = useSDK()
+  const serverSync = useServerSync()
+  const providers = useProviders(() => sdk().directory)
+
+  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,
+    },
+  ])
+
+  return {
+    provider: {
+      ready: () => serverSync().child(sdk().directory)[0].provider_ready,
+      connected: () => providers.paid().length > 0,
+      open: () => {
+        void import("@/components/dialog-connect-provider").then(({ DialogConnectProvider }) => {
+          void dialog.show(() => <DialogConnectProvider directory={() => sdk().directory} />)
+        })
+      },
+    },
+  }
+}
+
+export type NewSessionCommandController = ReturnType<typeof createNewSessionCommandController>

packages/app/src/pages/new-session/new-session-draft-controller.ts

@@ -0,0 +1,64 @@
+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>

packages/app/src/pages/new-session/new-session-view.tsx

@@ -0,0 +1,165 @@
+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 { Show, createEffect, createMemo, createResource, createSignal, type Accessor, type JSX } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Portal } from "solid-js/web"
+import createPresence from "solid-presence"
+import { NewSessionDesignView } from "@/components/session"
+import { PromptGitStatus, PromptWorkspaceSelector } from "@/components/prompt-workspace-selector"
+import type { PromptProject } from "@/components/prompt-project-selector"
+import { StatusPopoverV2 } from "@/components/status-popover"
+import { useLanguage } from "@/context/language"
+import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
+import { Persist, persisted } from "@/utils/persist"
+
+const providerTipDismissalDuration = 30 * 24 * 60 * 60 * 1000
+
+export function NewSessionView(props: {
+  rightMount: Accessor<HTMLElement | null>
+  statusVisible: Accessor<boolean>
+  statusLabel: Accessor<string>
+  promptReady: Accessor<boolean>
+  promptReadyPromise: Accessor<Promise<unknown> | undefined>
+  restoreFocus: () => void
+  composer: () => JSX.Element
+  projectEmpty: Accessor<boolean>
+  projectSelected: Accessor<PromptProject | undefined>
+  projectAdd: () => JSX.Element
+  projectSelector: () => JSX.Element
+  workspaceVisible: Accessor<boolean>
+  workspaceValue: Accessor<string>
+  workspaceRoot: Accessor<string>
+  workspaces: Accessor<string[]>
+  branch: Accessor<string | undefined>
+  noGit: Accessor<boolean>
+  onWorkspaceChange: (value: string) => void
+  providerReady: Accessor<boolean>
+  providerConnected: Accessor<boolean>
+  onOpenProviders: () => void
+}) {
+  createEffect(() => {
+    if (!props.promptReady()) return
+    props.restoreFocus()
+  })
+
+  const ready = Promise.resolve()
+  const [suspendUntilPromptReady] = createResource(
+    () => props.promptReadyPromise() ?? ready,
+    (promise) => promise.then(() => true),
+  )
+
+  return (
+    <div class="relative size-full overflow-hidden flex flex-col">
+      {suspendUntilPromptReady()}
+      <Show when={props.rightMount()}>
+        {(mount) => (
+          <Portal mount={mount()}>
+            <Show when={props.statusVisible()}>
+              <Tooltip placement="bottom" value={props.statusLabel()}>
+                <StatusPopoverV2 />
+              </Tooltip>
+            </Show>
+          </Portal>
+        )}
+      </Show>
+      <div class="flex-1 min-h-0 flex flex-col gap-2 p-2">
+        <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">
+                  {props.composer()}
+                  <Show when={props.projectEmpty()}>{props.projectAdd()}</Show>
+                  <Show when={props.projectSelected()}>
+                    <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">
+                      {props.projectSelector()}
+                      <Show
+                        when={props.workspaceVisible()}
+                        fallback={<PromptGitStatus branch={props.branch()} noGit={props.noGit()} />}
+                      >
+                        <PromptWorkspaceSelector
+                          value={props.workspaceValue()}
+                          projectRoot={props.workspaceRoot()}
+                          workspaces={props.workspaces()}
+                          branch={props.branch()}
+                          onChange={props.onWorkspaceChange}
+                          onDone={props.restoreFocus}
+                        />
+                      </Show>
+                    </div>
+                  </Show>
+                </div>
+              </div>
+            </NewSessionDesignView>
+            <ProviderTip
+              ready={props.providerReady}
+              connected={props.providerConnected}
+              openProviders={props.onOpenProviders}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ProviderTip(props: { ready: Accessor<boolean>; connected: Accessor<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,
+  )
+  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={() => setPersistedState("dismissedAt", Date.now())}
+            >
+              <IconV2 name="xmark-small" />
+            </button>
+          </TooltipV2>
+        </div>
+      </div>
+    </Show>
+  )
+}

packages/app/src/pages/new-session/new-session-workspace-controller.test.ts

@@ -0,0 +1,43 @@
+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")
+  })
+})

packages/app/src/pages/new-session/new-session-workspace-controller.ts

@@ -0,0 +1,78 @@
+import { createMemo } from "solid-js"
+import { createStore } from "solid-js/store"
+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 [store, setStore] = createStore<{ worktree?: string }>({})
+  const visible = createMemo(() => workspaceBarEnabled && sync().project?.vcs === "git")
+  const value = createMemo(() =>
+    resolveNewSessionWorktree({
+      enabled: visible(),
+      selected: store.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: () => setStore("worktree", undefined),
+      set: (worktree: string) =>
+        setStore("worktree", 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>

packages/app/src/pages/new-session/new-session.tsx

@@ -0,0 +1,47 @@
+import type { PromptProjectController } from "@/components/prompt-project-selector"
+import { PromptProjectAddButton, PromptProjectSelector } from "@/components/prompt-project-selector"
+import { PromptInputV2Composer } from "@/components/prompt-input-v2"
+import { useLanguage } from "@/context/language"
+import { useSettings } from "@/context/settings"
+import { useTitlebarRightMount } from "@/components/titlebar"
+import type { NewSessionCommandController } from "./new-session-command-controller"
+import type { NewSessionDraftController } from "./new-session-draft-controller"
+import { NewSessionView } from "./new-session-view"
+import type { NewSessionWorkspaceController } from "./new-session-workspace-controller"
+
+export function NewSession(props: {
+  draft: NewSessionDraftController
+  commands: NewSessionCommandController
+  workspace: NewSessionWorkspaceController
+  project: PromptProjectController
+}) {
+  const language = useLanguage()
+  const settings = useSettings()
+  const rightMount = useTitlebarRightMount()
+
+  return (
+    <NewSessionView
+      rightMount={rightMount}
+      statusVisible={settings.visibility.status}
+      statusLabel={() => language.t("status.popover.trigger")}
+      promptReady={props.draft.prompt.ready}
+      promptReadyPromise={props.draft.prompt.readyPromise}
+      restoreFocus={props.draft.input.restoreFocus}
+      composer={() => <PromptInputV2Composer controller={props.draft.input} />}
+      projectEmpty={props.project.empty}
+      projectSelected={props.project.selected}
+      projectAdd={() => <PromptProjectAddButton controller={props.project} />}
+      projectSelector={() => <PromptProjectSelector controller={props.project} placement="bottom" />}
+      workspaceVisible={props.workspace.bar.visible}
+      workspaceValue={props.workspace.selection.value}
+      workspaceRoot={props.workspace.project.root}
+      workspaces={props.workspace.project.workspaces}
+      branch={props.workspace.bar.branch}
+      noGit={() => !props.workspace.project.git()}
+      onWorkspaceChange={props.workspace.selection.set}
+      providerReady={props.commands.provider.ready}
+      providerConnected={props.commands.provider.connected}
+      onOpenProviders={props.commands.provider.open}
+    />
+  )
+}

packages/app/src/utils/menu-dismiss-controller.ts

@@ -0,0 +1,30 @@
+/** Coordinates focus restoration and actions that must run after menu content unmounts. */
+export function createMenuDismissController(content: () => HTMLElement | undefined) {
+  let restoreTrigger = true
+
+  return {
+    /** Allows the menu primitive to restore focus to its trigger when closing. */
+    allowTriggerRestore() {
+      restoreTrigger = true
+    },
+    /** Keeps focus at its current or next destination instead of returning it to the trigger. */
+    preventTriggerRestore() {
+      restoreTrigger = false
+    },
+    /** Applies the current restoration policy during the menu primitive's close-focus event. */
+    onCloseAutoFocus(event: Event) {
+      if (!restoreTrigger) event.preventDefault()
+    },
+    /** Runs an action after the menu unmounts and its focus-close work has settled. */
+    afterClose(callback: () => void) {
+      const complete = () => {
+        if (content()?.isConnected) {
+          requestAnimationFrame(complete)
+          return
+        }
+        requestAnimationFrame(() => requestAnimationFrame(callback))
+      }
+      requestAnimationFrame(complete)
+    },
+  }
+}

packages/app/src/wsl/settings.tsx

@@ -7,7 +7,7 @@ import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { useMutation } from "@tanstack/solid-query"
 import fuzzysort from "fuzzysort"
 import { type Accessor, For, Show, createMemo } from "solid-js"
-import type { useServerManagementController } from "@/components/dialog-select-server"
+import type { ServerCollectionController } from "@/components/server/server-management-controller"
 import { ServerHealthIndicator } from "@/components/server/server-row"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
@@ -17,8 +17,6 @@ import { DialogAddWslServer } from "./dialog-add-server"
 import { useWslServers } from "./context"
 import { wslOpencodeAction, wslRuntimeRetryable } from "./settings-model"
 
-type Controller = ReturnType<typeof useServerManagementController>
-
 export function isWslServer(server: ServerConnection.Any) {
   return server.type === "sidecar" && server.variant === "wsl"
 }
@@ -28,7 +26,7 @@ export function AddServerMenu(props: { onAddServer: () => void }) {
   const dialog = useDialog()
   const language = useLanguage()
   const openAddWsl = () => {
-    dialog.push(() => <DialogAddWslServer />)
+    void dialog.push(() => <DialogAddWslServer />)
   }
   return (
     <Show
@@ -67,7 +65,7 @@ export function useFilteredWslServers(filter: Accessor<string>) {
 }
 
 export function WslServerSettings(props: {
-  controller: Controller
+  domain: Pick<ServerCollectionController, "collection" | "defaults" | "connection">
   servers: ReturnType<typeof useFilteredWslServers>
 }) {
   const platform = usePlatform()
@@ -86,7 +84,7 @@ export function WslServerSettings(props: {
   }))
 
   const remove = (key: ServerConnection.Key) => {
-    request.mutate(() => props.controller.handleRemove(key))
+    request.mutate(() => props.domain.connection.remove(key))
   }
 
   return (
@@ -100,7 +98,7 @@ export function WslServerSettings(props: {
           return (
             <div class="settings-v2-servers-row">
               <div class="settings-v2-servers-lead">
-                <ServerHealthIndicator health={props.controller.status()[key]} />
+                <ServerHealthIndicator health={props.domain.collection.health()[key]} />
                 <div class="settings-v2-servers-copy">
                   <span class="flex min-w-0 items-center gap-1">
                     <span class="settings-v2-servers-name">{item.config.distro}</span>
@@ -114,7 +112,7 @@ export function WslServerSettings(props: {
                 </div>
               </div>
               <div class="settings-v2-servers-actions">
-                <Show when={props.controller.canDefault() && props.controller.defaultKey() === key}>
+                <Show when={props.domain.defaults.available() && props.domain.defaults.key() === key}>
                   <Tag>{language.t("dialog.server.status.default")}</Tag>
                 </Show>
                 <Show when={opencodeAction()}>
@@ -145,13 +143,13 @@ export function WslServerSettings(props: {
                             {language.t("wsl.server.retryStart")}
                           </MenuV2.Item>
                         </Show>
-                        <Show when={props.controller.canDefault() && props.controller.defaultKey() !== key}>
-                          <MenuV2.Item onSelect={() => props.controller.setDefault(key)}>
+                        <Show when={props.domain.defaults.available() && props.domain.defaults.key() !== key}>
+                          <MenuV2.Item onSelect={() => props.domain.defaults.set(key)}>
                             {language.t("dialog.server.menu.default")}
                           </MenuV2.Item>
                         </Show>
-                        <Show when={props.controller.canDefault() && props.controller.defaultKey() === key}>
-                          <MenuV2.Item onSelect={() => props.controller.setDefault(null)}>
+                        <Show when={props.domain.defaults.available() && props.domain.defaults.key() === key}>
+                          <MenuV2.Item onSelect={() => props.domain.defaults.set(null)}>
                             {language.t("dialog.server.menu.defaultRemove")}
                           </MenuV2.Item>
                         </Show>

packages/core/package.json

@@ -108,7 +108,7 @@
     "drizzle-orm": "catalog:",
     "effect": "catalog:",
     "fuzzysort": "3.1.0",
-    "gitlab-ai-provider": "6.11.1",
+    "gitlab-ai-provider": "6.12.0",
     "glob": "13.0.5",
     "google-auth-library": "10.5.0",
     "gray-matter": "4.0.3",

packages/desktop/electron-builder.config.test.ts

@@ -24,6 +24,8 @@ for (const channel of channels) {
     expect(config.extraMetadata?.desktopName).toBe(`${channel.appId}.desktop`)
     expect(config.linux?.executableName).toBe(channel.appId)
     expect(config.linux?.desktop?.entry?.StartupWMClass).toBe(channel.appId)
+    expect(config.deb?.fpm).toContainEqual(expect.stringContaining(`/usr/share/metainfo/${channel.appId}.metainfo.xml`))
+    expect(config.rpm?.fpm).toContainEqual(expect.stringContaining(`/usr/share/metainfo/${channel.appId}.metainfo.xml`))
   })
 }
 
@@ -37,8 +39,16 @@ test("keeps a hidden prod launcher for old Linux pins", async () => {
   if (previous === undefined) delete process.env.OPENCODE_CHANNEL
   else process.env.OPENCODE_CHANNEL = previous
 
-  expect(config.deb?.fpm?.[0]).toEndWith(`${legacyDesktopEntry}=/usr/share/applications/opencode-desktop.desktop`)
-  expect(config.rpm?.fpm?.[0]).toEndWith(`${legacyDesktopEntry}=/usr/share/applications/opencode-desktop.desktop`)
+  expect(
+    config.deb?.fpm?.some((entry) =>
+      entry.endsWith("opencode-desktop.desktop=/usr/share/applications/opencode-desktop.desktop"),
+    ),
+  ).toBe(true)
+  expect(
+    config.rpm?.fpm?.some((entry) =>
+      entry.endsWith("opencode-desktop.desktop=/usr/share/applications/opencode-desktop.desktop"),
+    ),
+  ).toBe(true)
 
   const desktop = await Bun.file(legacyDesktopEntry).text()
   expect(desktop).toContain("Exec=/opt/OpenCode/ai.opencode.desktop %U")

packages/desktop/electron-builder.config.ts

@@ -15,6 +15,9 @@ const signScript = path.join(rootDir, "script", "sign-windows.ps1")
 const legacyDesktopEntry = path.join(packageDir, "resources", "linux", "opencode-desktop.desktop")
 const legacyDesktopEntryFpm = `${legacyDesktopEntry}=/usr/share/applications/opencode-desktop.desktop`
 
+const metainfoFpm = (appId: string) =>
+  `${path.join(packageDir, "resources", `${appId}.metainfo.xml`)}=/usr/share/metainfo/${appId}.metainfo.xml`
+
 async function signWindows(configuration: { path: string }) {
   if (process.platform !== "win32") return
   if (process.env.GITHUB_ACTIONS !== "true") return
@@ -116,7 +119,8 @@ function getConfig() {
         ...base,
         appId,
         productName: "OpenCode Dev",
-        rpm: { packageName: "opencode-dev" },
+        deb: { fpm: [metainfoFpm(appId)] },
+        rpm: { packageName: "opencode-dev", fpm: [metainfoFpm(appId)] },
       }
     }
     case "beta": {
@@ -126,7 +130,8 @@ function getConfig() {
         productName: "OpenCode Beta",
         protocols: { name: "OpenCode Beta", schemes: ["opencode"] },
         publish: { provider: "github", owner: "anomalyco", repo: "opencode-beta", channel: "latest" },
-        rpm: { packageName: "opencode-beta" },
+        deb: { fpm: [metainfoFpm(appId)] },
+        rpm: { packageName: "opencode-beta", fpm: [metainfoFpm(appId)] },
       }
     }
     case "prod": {
@@ -136,8 +141,8 @@ function getConfig() {
         productName: "OpenCode",
         protocols: { name: "OpenCode", schemes: ["opencode"] },
         publish: { provider: "github", owner: "anomalyco", repo: "opencode", channel: "latest" },
-        deb: { fpm: [legacyDesktopEntryFpm] },
-        rpm: { packageName: "opencode", fpm: [legacyDesktopEntryFpm] },
+        deb: { fpm: [metainfoFpm(appId), legacyDesktopEntryFpm] },
+        rpm: { packageName: "opencode", fpm: [metainfoFpm(appId), legacyDesktopEntryFpm] },
       }
     }
   }

packages/desktop/src/main/server.ts

@@ -214,7 +214,6 @@ function createSidecarEnv(): Record<string, string> {
   )
   delete env.DEBUG
   if (process.platform === "linux") delete env.LD_PRELOAD
-  if (!app.isPackaged) env.OPENCODE_DISABLE_CHANNEL_DB = "1"
   return env
 }
 

packages/opencode/package.json

@@ -120,7 +120,7 @@
     "drizzle-orm": "catalog:",
     "effect": "catalog:",
     "fuzzysort": "3.1.0",
-    "gitlab-ai-provider": "6.11.1",
+    "gitlab-ai-provider": "6.12.0",
     "glob": "13.0.5",
     "google-auth-library": "10.5.0",
     "gray-matter": "4.0.3",

packages/storybook/.storybook/mocks/app/components/dialog-select-model.tsx

@@ -1,9 +1,8 @@
-import { splitProps } from "solid-js"
+import { splitProps, type JSX } from "solid-js"
 
-export function ModelSelectorPopover(props: { triggerAs: any; triggerProps?: Record<string, unknown>; children: any }) {
-  const [local] = splitProps(props, ["triggerAs", "triggerProps", "children"])
-  const Trigger = local.triggerAs
-  return <Trigger {...(local.triggerProps ?? {})}>{local.children}</Trigger>
+export function ModelSelectorPopover(props: { trigger: (props: Record<string, unknown>) => JSX.Element }) {
+  const [local] = splitProps(props, ["trigger"])
+  return <>{local.trigger({})}</>
 }
 
 export const ModelSelectorPopoverV2 = ModelSelectorPopover