fix(desktop): constrain renderer navigation

2026-08-07 10:28:48 +00:00 · 2026-08-07 03:10:29 +00:00
70 changed files with 6798 additions and 699 deletions
@@ -1,18 +1,19 @@
 import { expect, test } from "@playwright/test"
+import { base64Encode } from "@opencode-ai/core/util/encode"
 import { mockOpenCodeServer } from "../utils/mock-server"

-const draftID = "draft_removed_layout_preference"
-const directory = "C:/OpenCode/RemovedLayoutPreference"
+const draftID = "draft_legacy_new_session"
+const directory = "C:/OpenCode/LegacyNewSession"
 const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`

-test("ignores persisted old layout preferences when opening drafts", async ({ page }) => {
+test("redirects a draft to the legacy new-session route", async ({ page }) => {
  await mockOpenCodeServer(page, {
    directory,
    project: {
-      id: "proj_removed_layout_preference",
+      id: "proj_legacy_new_session",
      worktree: directory,
      vcs: "git",
-      name: "removed-layout-preference",
+      name: "legacy-new-session",
      time: { created: 1700000000000, updated: 1700000000000 },
      sandboxes: [],
    },
@@ -23,6 +24,7 @@ test("ignores persisted old layout preferences when opening drafts", async ({ pa
  await page.addInitScript(
    ({ directory, draftID, server }) => {
      localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: false } }))
+      localStorage.setItem("app-version.v1", JSON.stringify({ version: "1.17.20" }))
      localStorage.setItem(
        "opencode.window.browser.dat:tabs",
        JSON.stringify([{ type: "draft", draftID, server, directory }]),
@@ -33,7 +35,7 @@ test("ignores persisted old layout preferences when opening drafts", async ({ pa

  await page.goto(`/new-session?draftId=${draftID}`)

-  await expect(page).toHaveURL(`/new-session?draftId=${draftID}`)
-  await expect(page.locator("body")).toHaveAttribute("data-new-layout", "")
-  await expect(page.getByRole("textbox", { name: "Prompt" })).toBeVisible()
+  await expect(page).toHaveURL(`/${base64Encode(directory)}/session`)
+  await expect(page.locator("header[data-tauri-drag-region]")).toBeVisible()
+  await expect(page.locator('[data-component="prompt-input"]')).toBeVisible()
 })
@@ -20,7 +20,7 @@
    <meta property="twitter:image" content="/social-share.png" />
    <script id="oc-theme-preload-script" src="/oc-theme-preload.js"></script>
  </head>
-  <body data-new-layout class="antialiased overscroll-none font-(family-name:--font-family-text) text-[13px] font-[440] overflow-hidden bg-v2-background-bg-deep">
+  <body class="antialiased overscroll-none text-12-regular overflow-hidden bg-v2-background-bg-deep">
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root" class="flex flex-col h-dvh bg-v2-background-bg-deep p-px"></div>
    <script src="/src/entry.tsx" type="module"></script>
@@ -14,11 +14,14 @@ import {
  Navigate,
  Route,
  Router,
+  useLocation,
+  useNavigate,
  useParams,
  useSearchParams,
 } from "@solidjs/router"
 import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
 import { Effect } from "effect"
+import { base64Encode } from "@opencode-ai/core/util/encode"
 import {
  type Component,
  createEffect,
@@ -40,7 +43,7 @@ import { CommandProvider, useCommand, type CommandOption } from "@/context/comma
 import { CommentsProvider } from "@/context/comments"
 import { FileProvider } from "@/context/file"
 import { ServerSDKProvider } from "@/context/server-sdk"
-import { ServerSyncProvider } from "@/context/server-sync"
+import { ServerSyncProvider, useServerSync } from "@/context/server-sync"
 import { GlobalProvider, useGlobal } from "@/context/global"
 import { HighlightsProvider } from "@/context/highlights"
 import { LanguageProvider, type Locale, useLanguage } from "@/context/language"
@@ -51,36 +54,58 @@ import { PermissionProvider } from "@/context/permission"
 import { usePlatform } from "@/context/platform"
 import { PromptProvider } from "@/context/prompt"
 import { ServerConnection, ServerProvider, serverName, useServer } from "@/context/server"
-import { SettingsProvider } from "@/context/settings"
+import { SettingsProvider, useSettings } from "@/context/settings"
 import { TabsProvider, useTabs, type DraftTab } from "@/context/tabs"
-import { SDKProvider } from "@/context/sdk"
+import { SDKProvider, useSDK } from "@/context/sdk"
 import { WslServersProvider } from "@/wsl/context"
-import { DirectoryDataProvider } from "@/pages/directory-layout"
-import Layout from "@/pages/layout"
+import DirectoryLayout, { DirectoryDataProvider } from "@/pages/directory-layout"
+import LegacyLayout from "@/pages/layout"
+import NewLayout from "@/pages/layout-new"
 import { ErrorPage } from "./pages/error"
 import { useCheckServerHealth } from "./utils/server-health"
-import { legacySessionServer, requireServerKey, sessionHref } from "./utils/session-route"
-import { decode64 } from "@/utils/base64"
+import { legacySessionHref, legacySessionServer, requireServerKey, sessionHref } from "./utils/session-route"
+import { createSessionLineage } from "@/pages/session/session-lineage"

-import { TargetSessionRouteContent } from "@/pages/session"
-import { Home } from "@/pages/home"
+import { SessionPage, SessionRouteErrorBoundary, TargetSessionRouteContent } from "@/pages/session"
+import { NewHome } from "@/pages/home"
+import { LegacyHome } from "@/pages/home/legacy-home"

 const NewSession = lazy(() => import("@/pages/new-session"))

-const DirectoryDraftRedirect = () => {
+const SessionRoute = () => {
+  const settings = useSettings()
  const params = useParams()
  const [search] = useSearchParams<{ draftId?: string; prompt?: string }>()
+  const sdk = useSDK()
  const server = useServer()
  const tabs = useTabs()

+  if (params.id && settings.general.newLayoutDesigns()) {
+    const sessionID = params.id
+    return (
+      <Show when={tabs.ready()}>
+        {(_) => {
+          const persisted = tabs.store.filter((item) => item.type === "session")
+          return <Navigate href={sessionHref(legacySessionServer(persisted, sessionID, server.key), sessionID)} />
+        }}
+      </Show>
+    )
+  }
+
+  // When the new layout is enabled, the legacy new-session route (/:dir/session with no id)
+  // is replaced by a draft at /new-session?draftId=…
  createEffect(() => {
-    if (search.draftId || !tabs.ready()) return
-    const directory = decode64(params.dir)
-    if (!directory) return
-    tabs.newDraft({ server: server.key, directory }, search.prompt)
+    if (!settings.general.newLayoutDesigns()) return
+    if (params.id || search.draftId) return
+    if (!tabs.ready() || !sdk().directory) return
+    tabs.newDraft({ server: server.key, directory: sdk().directory }, search.prompt)
  })

-  return null
+  return (
+    <SessionRouteErrorBoundary sessionID={params.id}>
+      <SessionPage />
+    </SessionRouteErrorBoundary>
+  )
 }

 function TargetServerRoute(props: ParentProps) {
@@ -92,7 +117,9 @@ function TargetServerRoute(props: ParentProps) {
  })

  return (
-    // Owns the server-identity remount. Session changes must not remount this subtree.
+    // Owns the server-identity remount. Session changes must NOT remount this
+    // subtree (SessionRouteErrorBoundary resets and createSessionLineage
+    // re-resolves reactively instead); both rely on this key for server changes.
    <Show when={requireServerKey(params.serverKey)} keyed>
      <ServerSDKProvider server={conn}>
        <ServerSyncProvider server={conn}>{props.children}</ServerSyncProvider>
@@ -107,6 +134,35 @@ const TargetSessionRoute = () => (
  </TargetServerRoute>
 )

+function LegacyTargetSessionRoute() {
+  const params = useParams<{ serverKey: string; id: string }>()
+  return (
+    <TargetServerRoute>
+      <SessionRouteErrorBoundary sessionID={params.id} serverKey={requireServerKey(params.serverKey)}>
+        <LegacyTargetSessionRedirect />
+      </SessionRouteErrorBoundary>
+    </TargetServerRoute>
+  )
+}
+
+function LegacyTargetSessionRedirect() {
+  const params = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const sync = useServerSync()
+  const current = createSessionLineage(
+    () => params.id,
+    () => sync().session.lineage,
+  )
+
+  createEffect(() => {
+    const directory = current()?.session.location.directory
+    if (!directory) return
+    navigate(legacySessionHref(directory, params.id), { replace: true })
+  })
+
+  return null
+}
+
 // Wraps the non-draft routes. They are gated on (and keyed to) the globally selected
 // server via ServerKey, then provide the server-scoped shell for that server.
 function SelectedServerProviders(props: ParentProps) {
@@ -119,8 +175,17 @@ function SelectedServerProviders(props: ParentProps) {
  )
 }

+function LegacyServerLayout(props: ParentProps<{ serverScoped?: JSX.Element }>) {
+  return (
+    <SelectedServerProviders>
+      <LegacyServerScopedShell serverScoped={props.serverScoped}>{props.children}</LegacyServerScopedShell>
+    </SelectedServerProviders>
+  )
+}
+
 function DraftRoute() {
  const [search] = useSearchParams<{ draftId?: string }>()
+  const settings = useSettings()
  const tabs = useTabs()
  return (
    <Show when={tabs.ready()}>
@@ -129,7 +194,14 @@ function DraftRoute() {
        keyed
        fallback={<Navigate href="/" />}
      >
-        {(draft) => <ResolvedDraftRoute draft={draft} />}
+        {(draft) => (
+          <Show
+            when={settings.general.newLayoutDesigns()}
+            fallback={<Navigate href={`/${base64Encode(draft.directory)}/session`} />}
+          >
+            <ResolvedDraftRoute draft={draft} />
+          </Show>
+        )}
      </Show>
    </Show>
  )
@@ -165,6 +237,10 @@ function UiI18nBridge(props: ParentProps) {
  return <I18nProvider value={{ locale: language.intl, t: language.t }}>{props.children}</I18nProvider>
 }

+function LayoutCompatibility(props: ParentProps) {
+  return <>{props.children}</>
+}
+
 declare global {
  interface Window {
    __OPENCODE__?: {
@@ -191,11 +267,17 @@ function QueryProvider(props: ParentProps) {
 }

 function BodyDesignClass() {
+  const settings = useSettings()
+
  createRenderEffect(() => {
    if (typeof document === "undefined") return
-    document.body.toggleAttribute("data-new-layout", true)
-    document.body.classList.remove("text-12-regular")
-    document.body.classList.add("font-(family-name:--font-family-text)", "text-[13px]", "font-[440]")
+
+    const enabled = settings.general.newLayoutDesigns()
+    document.body.toggleAttribute("data-new-layout", enabled)
+    document.body.classList.toggle("text-12-regular", !enabled)
+    document.body.classList.toggle("font-(family-name:--font-family-text)", enabled)
+    document.body.classList.toggle("text-[13px]", enabled)
+    document.body.classList.toggle("font-[440]", enabled)
  })

  return null
@@ -238,6 +320,7 @@ function DesktopCommands() {
  return null
 }

+// Server-scoped providers shared by the legacy shell and the top-level new shell.
 type ServerScopedShellProps = ParentProps<{
  directory?: () => string | undefined
  serverScoped?: JSX.Element
@@ -252,11 +335,19 @@ function ServerScopedProviders(props: ServerScopedShellProps) {
  )
 }

-function AppLayout(props: ParentProps<{ serverScoped?: JSX.Element }>) {
+function LegacyServerScopedShell(props: ServerScopedShellProps) {
+  return (
+    <ServerScopedProviders directory={props.directory} serverScoped={props.serverScoped}>
+      <LegacyLayout>{props.children}</LegacyLayout>
+    </ServerScopedProviders>
+  )
+}
+
+function NewAppLayout(props: ParentProps<{ serverScoped?: JSX.Element }>) {
  return (
    <SelectedServerProviders>
      <ServerScopedProviders serverScoped={props.serverScoped}>
-        <Layout>{props.children}</Layout>
+        <NewLayout>{props.children}</NewLayout>
      </ServerScopedProviders>
    </SelectedServerProviders>
  )
@@ -445,7 +536,7 @@ export function AppInterface(props: {
  startup?: Promise<void>
  serverScoped?: JSX.Element
 }) {
-  // The visual layout lives in the router root so it remains mounted across
+  // The visual new layout lives in the router root so it remains mounted across
  // route changes. Draft and session routes override only their server-bound data
  // providers beneath it.
  const ServerShell = (shellProps: ParentProps) => (
@@ -466,22 +557,26 @@ export function AppInterface(props: {
      <GlobalProvider>
        <SettingsProvider>
          <ConnectionGate disableHealthCheck={props.disableHealthCheck} startup={props.startup}>
-            <Dynamic
-              component={props.router ?? Router}
-              root={(routerProps) => (
-                <TabsProvider>
-                  <PermissionProvider>
-                    <NotificationProvider>
-                      <ServerShell>
-                        <AppLayout serverScoped={props.serverScoped}>{routerProps.children}</AppLayout>
-                      </ServerShell>
-                    </NotificationProvider>
-                  </PermissionProvider>
-                </TabsProvider>
-              )}
-            >
-              <Routes />
-            </Dynamic>
+            <Show when={useSettings().general.newLayoutDesigns().toString()} keyed>
+              <Dynamic
+                component={props.router ?? Router}
+                root={(routerProps) => (
+                  <TabsProvider>
+                    <PermissionProvider>
+                      <NotificationProvider>
+                        <ServerShell>
+                          <Show when={useSettings().general.newLayoutDesigns()} fallback={routerProps.children}>
+                            <NewAppLayout serverScoped={props.serverScoped}>{routerProps.children}</NewAppLayout>
+                          </Show>
+                        </ServerShell>
+                      </NotificationProvider>
+                    </PermissionProvider>
+                  </TabsProvider>
+                )}
+              >
+                <Routes serverScoped={props.serverScoped} />
+              </Dynamic>
+            </Show>
          </ConnectionGate>
        </SettingsProvider>
      </GlobalProvider>
@@ -489,20 +584,40 @@ export function AppInterface(props: {
  )
 }

-function Routes() {
+function Routes(props: { serverScoped?: JSX.Element }) {
+  const settings = useSettings()
+
  return (
    <>
-      <Route path="/" component={Home} />
-      <Route path="/:dir" component={DirectoryDraftRedirect} />
-      <Route path="/:dir/session" component={DirectoryDraftRedirect} />
-      <Route path="/:dir/session/:id" component={LegacySessionRedirect} />
-      <Route path="/server/:serverKey/session/:id" component={TargetSessionRoute} />
+      <Route
+        component={(routeProps) => (
+          <LegacyServerLayout serverScoped={props.serverScoped}>{routeProps.children}</LegacyServerLayout>
+        )}
+      >
+        <Show when={!settings.general.newLayoutDesigns()}>
+          {
+            <>
+              <Route path="/" component={LegacyHome} />
+              <Route path="/server/:serverKey/session/:id" component={LegacyTargetSessionRoute} />
+            </>
+          }
+        </Show>
+        <Route path="/:dir" component={DirectoryLayout}>
+          <Route path="/" component={() => <Navigate href="session" />} />
+          <Route path="/session/:id?" component={SessionRoute} />
+        </Route>
+      </Route>
+      <Show when={settings.general.newLayoutDesigns()}>
+        <Route path="/" component={NewHome} />
+        <Route path="/:dir/session/:id" component={NewLayoutLegacySessionRedirect} />
+        <Route path="/server/:serverKey/session/:id" component={TargetSessionRoute} />
+      </Show>
      <Route path="/new-session" component={DraftRoute} />
    </>
  )
 }

-function LegacySessionRedirect() {
+function NewLayoutLegacySessionRedirect() {
  const server = useServer()
  const tabs = useTabs()
  const params = useParams<{ id: string }>()
@@ -0,0 +1,170 @@
+import { Button } from "@opencode-ai/ui/button"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { Icon } from "@opencode-ai/ui/icon"
+import { For, Show } from "solid-js"
+import { type LocalProject, getAvatarColors } from "@/context/layout"
+import { Avatar } from "@opencode-ai/ui/avatar"
+import { useLanguage } from "@/context/language"
+import { getProjectAvatarSource } from "@/pages/layout/helpers"
+import { ServerConnection } from "@/context/server"
+import { createEditProjectModel } from "./edit-project"
+
+const AVATAR_COLOR_KEYS = ["pink", "mint", "orange", "purple", "cyan", "lime"] as const
+
+export function DialogEditProject(props: { project: LocalProject; server: ServerConnection.Any }) {
+  const language = useLanguage()
+  const model = createEditProjectModel(props)
+
+  return (
+    <Dialog title={language.t("dialog.project.edit.title")} class="w-full max-w-[480px] mx-auto">
+      <form onSubmit={model.submit} class="flex flex-col gap-6 p-6 pt-0">
+        <div class="flex flex-col gap-4">
+          <TextField
+            autofocus
+            type="text"
+            label={language.t("dialog.project.edit.name")}
+            placeholder={model.folderName()}
+            value={model.store.name}
+            onChange={(v) => model.setStore("name", v)}
+          />
+
+          <div class="flex flex-col gap-2">
+            <label class="text-12-medium text-text-weak">{language.t("dialog.project.edit.icon")}</label>
+            <div class="flex gap-3 items-start">
+              <div
+                class="relative"
+                onMouseEnter={() => model.setStore("iconHover", true)}
+                onMouseLeave={() => model.setStore("iconHover", false)}
+              >
+                <div
+                  class="relative size-16 rounded-md transition-colors cursor-pointer"
+                  classList={{
+                    "border-text-interactive-base bg-surface-info-base/20": model.store.dragOver,
+                    "border-border-base hover:border-border-strong": !model.store.dragOver,
+                    "overflow-hidden": !!model.store.iconOverride,
+                  }}
+                  onDrop={model.drop}
+                  onDragOver={model.dragOver}
+                  onDragLeave={model.dragLeave}
+                  onClick={model.iconClick}
+                >
+                  <Show
+                    when={getProjectAvatarSource(props.project.id, {
+                      color: model.store.color,
+                      url: props.project.icon?.url,
+                      override: model.store.iconOverride,
+                    })}
+                    fallback={
+                      <div class="size-full flex items-center justify-center">
+                        <Avatar
+                          fallback={model.store.name || model.defaultName()}
+                          {...getAvatarColors(model.store.color)}
+                          class="size-full text-[32px]"
+                        />
+                      </div>
+                    }
+                  >
+                    {(src) => (
+                      <img
+                        src={src()}
+                        alt={language.t("dialog.project.edit.icon.alt")}
+                        class="size-full object-cover"
+                      />
+                    )}
+                  </Show>
+                </div>
+                <div
+                  class="absolute inset-0 size-16 bg-surface-raised-stronger-non-alpha/90 rounded-[6px] z-10 pointer-events-none flex items-center justify-center transition-opacity"
+                  classList={{
+                    "opacity-100": model.store.iconHover && !model.store.iconOverride,
+                    "opacity-0": !(model.store.iconHover && !model.store.iconOverride),
+                  }}
+                >
+                  <Icon name="cloud-upload" size="large" class="text-icon-on-interactive-base drop-shadow-sm" />
+                </div>
+                <div
+                  class="absolute inset-0 size-16 bg-surface-raised-stronger-non-alpha/90 rounded-[6px] z-10 pointer-events-none flex items-center justify-center transition-opacity"
+                  classList={{
+                    "opacity-100": model.store.iconHover && !!model.store.iconOverride,
+                    "opacity-0": !(model.store.iconHover && !!model.store.iconOverride),
+                  }}
+                >
+                  <Icon name="trash" size="large" class="text-icon-on-interactive-base drop-shadow-sm" />
+                </div>
+              </div>
+              <input
+                id="icon-upload"
+                ref={(el) => {
+                  model.setIconInput(el)
+                }}
+                type="file"
+                accept="image/*"
+                class="hidden"
+                onChange={model.inputChange}
+              />
+              <div class="flex flex-col gap-1.5 text-12-regular text-text-weak self-center">
+                <span>{language.t("dialog.project.edit.icon.hint")}</span>
+                <span>{language.t("dialog.project.edit.icon.recommended")}</span>
+              </div>
+            </div>
+          </div>
+
+          <Show when={!model.store.iconOverride}>
+            <div class="flex flex-col gap-2">
+              <label class="text-12-medium text-text-weak">{language.t("dialog.project.edit.color")}</label>
+              <div class="flex gap-1.5">
+                <For each={AVATAR_COLOR_KEYS}>
+                  {(color) => (
+                    <button
+                      type="button"
+                      aria-label={language.t("dialog.project.edit.color.select", { color })}
+                      aria-pressed={model.store.color === color}
+                      classList={{
+                        "flex items-center justify-center size-10 p-0.5 rounded-lg overflow-hidden transition-colors cursor-default": true,
+                        "bg-transparent border-2 border-icon-strong-base hover:bg-surface-base-hover":
+                          model.store.color === color,
+                        "bg-transparent border border-transparent hover:bg-surface-base-hover hover:border-border-weak-base":
+                          model.store.color !== color,
+                      }}
+                      onClick={() => {
+                        if (model.store.color === color && !props.project.icon?.url) return
+                        model.setStore("color", model.store.color === color ? undefined : color)
+                      }}
+                    >
+                      <Avatar
+                        fallback={model.store.name || model.defaultName()}
+                        {...getAvatarColors(color)}
+                        class="size-full rounded"
+                      />
+                    </button>
+                  )}
+                </For>
+              </div>
+            </div>
+          </Show>
+
+          <TextField
+            multiline
+            label={language.t("dialog.project.edit.worktree.startup")}
+            description={language.t("dialog.project.edit.worktree.startup.description")}
+            placeholder={language.t("dialog.project.edit.worktree.startup.placeholder")}
+            value={model.store.startup}
+            onChange={(v) => model.setStore("startup", v)}
+            spellcheck={false}
+            class="max-h-14 w-full overflow-y-auto font-mono text-xs"
+          />
+        </div>
+
+        <div class="flex justify-end gap-2">
+          <Button type="button" variant="ghost" size="large" onClick={model.close}>
+            {language.t("common.cancel")}
+          </Button>
+          <Button type="submit" variant="primary" size="large" disabled={!model.supported || model.save.isPending}>
+            {model.save.isPending ? language.t("common.saving") : language.t("common.save")}
+          </Button>
+        </div>
+      </form>
+    </Dialog>
+  )
+}
@@ -0,0 +1,94 @@
+import { Component, createSignal, startTransition } from "solid-js"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { Icon } from "@opencode-ai/ui/icon"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { SettingsGeneral } from "./settings-general"
+import { SettingsKeybinds } from "./settings-keybinds"
+import { SettingsProviders } from "./settings-providers"
+import { SettingsModels } from "./settings-models"
+import { SettingsServers } from "./settings-servers"
+
+export const DialogSettings: Component<{ defaultValue?: string }> = (props) => {
+  const language = useLanguage()
+  const platform = usePlatform()
+  const dialog = useDialog()
+  const [tab, setTab] = createSignal(props.defaultValue ?? "general")
+
+  const showProviders = () => {
+    void dialog.show(() => <DialogSettings defaultValue="providers" />)
+  }
+
+  return (
+    <Dialog size="x-large" transition>
+      <Tabs
+        orientation="vertical"
+        variant="settings"
+        value={tab()}
+        onChange={(value) => void startTransition(() => setTab(value))}
+        class="h-full settings-dialog"
+      >
+        <Tabs.List>
+          <div class="flex flex-col justify-between h-full w-full gap-4">
+            <div class="flex flex-col gap-3 w-full pt-3">
+              <div class="flex flex-col gap-3">
+                <div class="flex flex-col gap-1.5">
+                  <Tabs.SectionTitle>{language.t("settings.section.desktop")}</Tabs.SectionTitle>
+                  <div class="flex flex-col gap-1.5 w-full">
+                    <Tabs.Trigger value="general">
+                      <Icon name="sliders" />
+                      {language.t("settings.tab.general")}
+                    </Tabs.Trigger>
+                    <Tabs.Trigger value="shortcuts">
+                      <Icon name="keyboard" />
+                      {language.t("settings.tab.shortcuts")}
+                    </Tabs.Trigger>
+                    <Tabs.Trigger value="servers">
+                      <Icon name="server" />
+                      {language.t("status.popover.tab.servers")}
+                    </Tabs.Trigger>
+                  </div>
+                </div>
+
+                <div class="flex flex-col gap-1.5">
+                  <Tabs.SectionTitle>{language.t("settings.section.server")}</Tabs.SectionTitle>
+                  <div class="flex flex-col gap-1.5 w-full">
+                    <Tabs.Trigger value="providers">
+                      <Icon name="providers" />
+                      {language.t("settings.providers.title")}
+                    </Tabs.Trigger>
+                    <Tabs.Trigger value="models">
+                      <Icon name="models" />
+                      {language.t("settings.models.title")}
+                    </Tabs.Trigger>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="flex flex-col gap-1 pl-1 py-1 text-12-medium text-text-weak">
+              <span>{language.t("app.name.desktop")}</span>
+              <span class="text-11-regular">v{platform.version}</span>
+            </div>
+          </div>
+        </Tabs.List>
+        <Tabs.Content value="general" class="no-scrollbar">
+          <SettingsGeneral />
+        </Tabs.Content>
+        <Tabs.Content value="shortcuts" class="no-scrollbar">
+          <SettingsKeybinds />
+        </Tabs.Content>
+        <Tabs.Content value="servers" class="no-scrollbar">
+          <SettingsServers />
+        </Tabs.Content>
+        <Tabs.Content value="providers" class="no-scrollbar">
+          <SettingsProviders onBack={showProviders} />
+        </Tabs.Content>
+        <Tabs.Content value="models" class="no-scrollbar">
+          <SettingsModels />
+        </Tabs.Content>
+      </Tabs>
+    </Dialog>
+  )
+}
@@ -0,0 +1,148 @@
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { createSignal, Show } from "solid-js"
+import { Drawer, DrawerClose, DrawerContent } from "@/components/ui/drawer"
+import { usePlatform } from "@/context/platform"
+import { useSettings } from "@/context/settings"
+import introducingTabsVideo from "@/assets/help/introducing-tabs.mp4"
+import homeImage from "@/assets/help/home.png"
+import tabsImage from "@/assets/help/tabs.png"
+
+// TODO: wire to changelog / seen-state when available
+const showPopover = () => true
+
+// can remove this after the tabs rollout has been out for a while
+export function TabsInfoPopup() {
+  const settings = useSettings()
+  const platform = usePlatform()
+  const [drawerOpen, setDrawerOpen] = createSignal(false)
+  const windows = () => platform.platform === "desktop" && platform.os === "windows"
+
+  return (
+    <Drawer open={drawerOpen()} onOpenChange={setDrawerOpen} side="right">
+      <Show when={settings.general.shouldDisplayTabsToast()}>
+        <div
+          class="fixed bottom-5 right-5 z-50 h-[240px] w-[192px] rounded-[8px] bg-v2-background-bg-base p-1 shadow-[var(--v2-elevation-floating)]"
+          aria-label="Introducing Tabs. Organize your work and active sessions with tabs"
+        >
+          <button
+            type="button"
+            aria-label="Dismiss Tabs information"
+            class="absolute top-3 right-3 z-10 size-5 flex items-center justify-center rounded-[4px] bg-[rgba(0,0,0,0.4)]"
+            onClick={settings.general.dismissTabsToast}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <path d="M4.25 11.75L11.75 4.25M11.75 11.75L4.25 4.25" stroke="white" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            class="relative block h-[232px] w-[184px] cursor-pointer overflow-hidden rounded-[4px] text-left"
+            onClick={() => {
+              settings.general.dismissTabsToast()
+              setDrawerOpen(true)
+            }}
+          >
+            <video
+              src={introducingTabsVideo}
+              class="absolute inset-0 h-full w-full object-cover"
+              loop
+              muted
+              autoplay
+              playsinline
+              aria-hidden="true"
+              onContextMenu={(event) => event.preventDefault()}
+            />
+            <div class="absolute inset-x-0 bottom-0 flex w-full flex-col items-start gap-1.5 bg-[linear-gradient(180deg,rgba(0,0,0,0)_0%,#000000_100%)] px-3 py-5">
+              <p class="w-full select-none text-[13px] font-[530] leading-none tracking-[-0.04px] text-[#FFFFFF]">
+                Introducing Tabs
+              </p>
+              <p class="w-full select-none text-[13px] font-[440] leading-[140%] tracking-[-0.04px] text-[#808080]">
+                Organize your work and active sessions with tabs
+              </p>
+            </div>
+          </button>
+        </div>
+      </Show>
+      <DrawerContent
+        style={
+          windows()
+            ? {
+                inset: "0 0 0 auto",
+                "max-height": "100vh",
+                "max-width": "100vw",
+                "border-radius": "0",
+              }
+            : undefined
+        }
+      >
+        <Show when={windows()}>
+          <DrawerClose
+            as={IconButtonV2}
+            type="button"
+            size="small"
+            variant="neutral"
+            aria-label="Close"
+            icon={<IconV2 name="xmark-small" />}
+            class="absolute top-[10px] left-[-36px]"
+          />
+        </Show>
+        <div
+          class="flex w-full shrink-0 items-center gap-4 self-stretch border-b border-v2-border-border-muted"
+          classList={{
+            "h-[40px] px-4": windows(),
+            "h-[52px] p-4": !windows(),
+          }}
+        >
+          <p class="min-h-0 min-w-0 flex-1 text-[13px] font-[530] leading-5 tracking-[-0.04px] tabular-nums text-v2-text-text-muted">
+            July 14
+          </p>
+          <Show when={!windows()}>
+            <DrawerClose
+              as={IconButtonV2}
+              type="button"
+              size="small"
+              variant="ghost-muted"
+              aria-label="Close"
+              icon={<IconV2 name="xmark-small" />}
+            />
+          </Show>
+        </div>
+        <div class="relative flex min-h-0 w-full flex-1 flex-col items-start gap-6 overflow-y-auto p-8">
+          <p class="w-full shrink-0 self-stretch text-[21px] font-[610] leading-6 tracking-[-0.37px] tabular-nums text-v2-text-text-base">
+            Introducing Tabs
+          </p>
+          <div class="flex w-full flex-1 flex-col gap-4 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base">
+            <p>OpenCode Desktop is now built around tabs.</p>
+            <img src={tabsImage} alt="" class="aspect-video w-full rounded-[6px] object-cover" />
+            <p>
+              Start a new session in a tab, or open an existing session from any of your projects. Open a new tab when
+              you're starting something new, and close it when you're done.
+            </p>
+            <p>
+              Keeping a few tabs open makes it easier to organize your active sessions. Rename tabs to something
+              memorable if you plan to keep them around.
+            </p>
+            <p>
+              You'll find all your sessions and projects on the new Home screen. Selecting a session opens it in a tab.
+            </p>
+            <img src={homeImage} alt="" class="aspect-video w-full rounded-[6px] object-cover" />
+            <p>When you reopen the app, your tabs are still open.</p>
+            <p>
+              The new design does not support Git Worktrees yet, it's coming soon. So if you'd prefer to continue using
+              the previous layout, you can switch between layouts in Settings. Just keep in mind that the new layout
+              will become permanent in a few weeks.
+            </p>
+          </div>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
@@ -0,0 +1,793 @@
+import { Component, Show, createMemo, createResource, onMount, type JSX } from "solid-js"
+import { Button } from "@opencode-ai/ui/button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Select } from "@opencode-ai/ui/select"
+import { Switch } from "@opencode-ai/ui/switch"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { Tag } from "@opencode-ai/ui/v2/badge-v2"
+import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useParams } from "@solidjs/router"
+import { useLanguage } from "@/context/language"
+import { usePermission } from "@/context/permission"
+import { usePlatform, type DisplayBackend } 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 { decode64 } from "@/utils/base64"
+import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
+import { Link } from "./link"
+import { SettingsList } from "./settings-list"
+
+let demoSoundState = {
+  cleanup: undefined as (() => void) | undefined,
+  timeout: undefined as NodeJS.Timeout | undefined,
+  run: 0,
+}
+
+type ThemeOption = {
+  id: string
+  name: string
+}
+
+type ShellOption = {
+  path: string
+  name: string
+  acceptable: boolean
+}
+
+type ShellSelectOption = {
+  id: string
+  value: string
+  label: string
+}
+
+// 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 playDemoSound = (id: string | undefined) => {
+  stopDemoSound()
+  if (!id) return
+
+  const run = ++demoSoundState.run
+  demoSoundState.timeout = setTimeout(() => {
+    void playSoundById(id).then((cleanup) => {
+      if (demoSoundState.run !== run) {
+        cleanup?.()
+        return
+      }
+      demoSoundState.cleanup = cleanup
+    })
+  }, 100)
+}
+
+export const SettingsGeneral: Component = () => {
+  const theme = useTheme()
+  const language = useLanguage()
+  const permission = usePermission()
+  const platform = usePlatform()
+  const dialog = useDialog()
+  const params = useParams()
+  const settings = useSettings()
+
+  const updater = useUpdaterAction()
+
+  const linux = createMemo(() => platform.platform === "desktop" && platform.os === "linux")
+  const dir = createMemo(() => decode64(params.dir))
+  const accepting = createMemo(() => {
+    const value = dir()
+    if (!value) return false
+    if (!params.id) return permission.isAutoAcceptingDirectory(value)
+    return permission.isAutoAccepting(params.id, value)
+  })
+
+  const toggleAccept = (checked: boolean) => {
+    const value = dir()
+    if (!value) return
+
+    if (!params.id) {
+      if (permission.isAutoAcceptingDirectory(value) === checked) return
+      permission.toggleAutoAcceptDirectory(value)
+      return
+    }
+
+    if (checked) {
+      permission.enableAutoAccept(params.id, value)
+      return
+    }
+
+    permission.disableAutoAccept(params.id, value)
+  }
+  const desktop = createMemo(() => platform.platform === "desktop")
+
+  const themeOptions = createMemo<ThemeOption[]>(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
+
+  const serverSync = useServerSync()
+  const serverSdk = useServerSDK()
+
+  const [shells] = createResource(
+    async () => {
+      // TODO: Restore executable shell discovery; V2 shell.list only lists shell processes.
+      return [] as ShellOption[]
+    },
+    { initialValue: [] as ShellOption[] },
+  )
+
+  const [displayBackend, { refetch: refetchDisplayBackend }] = createResource(
+    () => (linux() && platform.getDisplayBackend ? true : false),
+    () => Promise.resolve(platform.getDisplayBackend?.() ?? null).catch(() => null as DisplayBackend | null),
+    { initialValue: null as DisplayBackend | null },
+  )
+
+  const [pinchZoom, { mutate: setPinchZoom }] = createResource(
+    () => (desktop() && platform.getPinchZoomEnabled ? true : false),
+    () => Promise.resolve(platform.getPinchZoomEnabled?.() ?? false).catch(() => false),
+    { initialValue: false },
+  )
+
+  onMount(() => {
+    void theme.loadThemes()
+  })
+
+  const autoOption = { id: "auto", value: "", label: language.t("settings.general.row.shell.autoDefault") }
+  const currentShell = createMemo(() => serverSync().data.config.shell ?? "")
+
+  const shellOptions = createMemo<ShellSelectOption[]>(() => {
+    const list = shells.latest
+    const current = serverSync().data.config.shell
+
+    const nameCounts = new Map<string, number>()
+    for (const s of list) {
+      nameCounts.set(s.name, (nameCounts.get(s.name) || 0) + 1)
+    }
+
+    const options = [
+      autoOption,
+      ...list.map((s) => {
+        const ambiguousName = (nameCounts.get(s.name) || 0) > 1
+        const text = ambiguousName ? s.path : s.name
+        const label = s.acceptable ? text : `${text} (${language.t("settings.general.row.shell.terminalOnly")})`
+        return {
+          id: s.path,
+          // Prefer name over path - "bash" is much cleaner than the explicit full route even when it may change due to PATH.
+          value: ambiguousName ? s.path : s.name,
+          label,
+        }
+      }),
+    ]
+
+    if (current && !options.some((o) => o.value === current)) {
+      options.push({ id: current, value: current, label: current })
+    }
+
+    return options
+  })
+
+  const onDisplayBackendChange = (checked: boolean) => {
+    const update = platform.setDisplayBackend?.(checked ? "wayland" : "auto")
+    if (!update) return
+    void update.finally(() => {
+      void refetchDisplayBackend()
+    })
+  }
+
+  const onPinchZoomChange = (checked: boolean) => {
+    setPinchZoom(checked)
+    const update = platform.setPinchZoomEnabled?.(checked)
+    if (!update) return
+    void update.catch(() => setPinchZoom(!checked))
+  }
+
+  const colorSchemeOptions = createMemo((): { value: ColorScheme; label: string }[] => [
+    { value: "system", label: language.t("theme.scheme.system") },
+    { value: "light", label: language.t("theme.scheme.light") },
+    { value: "dark", label: language.t("theme.scheme.dark") },
+  ])
+
+  const languageOptions = createMemo(() =>
+    language.locales.map((locale) => ({
+      value: locale,
+      label: language.label(locale),
+    })),
+  )
+
+  const noneSound = { id: "none", label: "sound.option.none" } as const
+  const soundOptions = [noneSound, ...SOUND_OPTIONS]
+  const mono = () => monoInput(settings.appearance.font())
+  const sans = () => sansInput(settings.appearance.uiFont())
+  const terminal = () => terminalInput(settings.appearance.terminalFont())
+
+  const soundSelectProps = (
+    enabled: () => boolean,
+    current: () => string,
+    setEnabled: (value: boolean) => void,
+    set: (id: string) => void,
+  ) => ({
+    options: soundOptions,
+    current: enabled() ? (soundOptions.find((o) => o.id === current()) ?? noneSound) : noneSound,
+    value: (o: (typeof soundOptions)[number]) => o.id,
+    label: (o: (typeof soundOptions)[number]) => language.t(o.label),
+    onHighlight: (option: (typeof soundOptions)[number] | undefined) => {
+      if (!option) return
+      playDemoSound(option.id === "none" ? undefined : option.id)
+    },
+    onSelect: (option: (typeof soundOptions)[number] | undefined) => {
+      if (!option) return
+      if (option.id === "none") {
+        setEnabled(false)
+        stopDemoSound()
+        return
+      }
+      setEnabled(true)
+      set(option.id)
+      playDemoSound(option.id)
+    },
+    variant: "secondary" as const,
+    size: "small" as const,
+    triggerVariant: "settings" as const,
+  })
+
+  const InterfaceSection = () => (
+    <div class="flex flex-col gap-1">
+      <SettingsList>
+        <SettingsRow
+          title={
+            <span class="flex items-center gap-2">
+              {language.t("settings.general.row.newInterface.title")}
+              <Tag variant="accent">{language.t("settings.general.row.newInterface.badge")}</Tag>
+            </span>
+          }
+          description={language.t("settings.general.row.newInterface.description")}
+        >
+          <div data-action="settings-new-layout-designs">
+            <Switch
+              checked={settings.general.newLayoutDesigns()}
+              onChange={(checked) => {
+                settings.general.setNewLayoutDesigns(checked)
+                if (!checked) return
+                void import("@/components/settings-v2").then((module) => {
+                  void dialog.show(() => <module.DialogSettings />)
+                })
+              }}
+            />
+          </div>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const InterfaceNoticeSection = () => (
+    <div class="flex flex-col gap-1">
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.row.newInterfaceNotice.title")}
+          description={language.t("settings.general.row.newInterfaceNotice.description")}
+        >
+          <Button size="small" variant="ghost" onClick={settings.general.dismissNewInterfaceNotice}>
+            {language.t("settings.general.row.newInterfaceNotice.dismiss")}
+          </Button>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const GeneralSection = () => (
+    <div class="flex flex-col gap-1">
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.row.language.title")}
+          description={language.t("settings.general.row.language.description")}
+        >
+          <Select
+            data-action="settings-language"
+            options={languageOptions()}
+            current={languageOptions().find((o) => o.value === language.locale())}
+            value={(o) => o.value}
+            label={(o) => o.label}
+            onSelect={(option) => option && language.setLocale(option.value)}
+            variant="secondary"
+            size="small"
+            triggerVariant="settings"
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          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>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.shell.title")}
+          description={language.t("settings.general.row.shell.description")}
+        >
+          <Select
+            data-action="settings-shell"
+            disabled
+            options={shellOptions()}
+            current={shellOptions().find((o) => o.value === currentShell()) ?? autoOption}
+            value={(o) => o.id}
+            label={(o) => o.label}
+            onSelect={(option) => {
+              if (!option) return
+              if (option.value === currentShell()) return
+              // TODO: Restore config writes when the V2 client exposes a config API.
+              // void serverSync().updateConfig({ shell: option.value })
+            }}
+            variant="secondary"
+            size="small"
+            triggerVariant="settings"
+            triggerStyle={{ "min-width": "180px" }}
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.reasoningSummaries.title")}
+          description={language.t("settings.general.row.reasoningSummaries.description")}
+        >
+          <div data-action="settings-feed-reasoning-summaries">
+            <Switch
+              checked={settings.general.showReasoningSummaries()}
+              onChange={(checked) => settings.general.setShowReasoningSummaries(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.shellToolPartsExpanded.title")}
+          description={language.t("settings.general.row.shellToolPartsExpanded.description")}
+        >
+          <div data-action="settings-feed-shell-tool-parts-expanded">
+            <Switch
+              checked={settings.general.shellToolPartsExpanded()}
+              onChange={(checked) => settings.general.setShellToolPartsExpanded(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.editToolPartsExpanded.title")}
+          description={language.t("settings.general.row.editToolPartsExpanded.description")}
+        >
+          <div data-action="settings-feed-edit-tool-parts-expanded">
+            <Switch
+              checked={settings.general.editToolPartsExpanded()}
+              onChange={(checked) => settings.general.setEditToolPartsExpanded(checked)}
+            />
+          </div>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const AdvancedSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.advanced")}</h3>
+
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.row.showFileTree.title")}
+          description={language.t("settings.general.row.showFileTree.description")}
+        >
+          <div data-action="settings-show-file-tree">
+            <Switch
+              checked={settings.general.showFileTree()}
+              onChange={(checked) => settings.general.setShowFileTree(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.showNavigation.title")}
+          description={language.t("settings.general.row.showNavigation.description")}
+        >
+          <div data-action="settings-show-navigation">
+            <Switch
+              checked={settings.general.showNavigation()}
+              onChange={(checked) => settings.general.setShowNavigation(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.showSearch.title")}
+          description={language.t("settings.general.row.showSearch.description")}
+        >
+          <div data-action="settings-show-search">
+            <Switch
+              checked={settings.general.showSearch()}
+              onChange={(checked) => settings.general.setShowSearch(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.showStatus.title")}
+          description={language.t("settings.general.row.showStatus.description")}
+        >
+          <div data-action="settings-show-status">
+            <Switch
+              checked={settings.general.showStatus()}
+              onChange={(checked) => settings.general.setShowStatus(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.showCustomAgents.title")}
+          description={language.t("settings.general.row.showCustomAgents.description")}
+        >
+          <div data-action="settings-show-custom-agents">
+            <Switch
+              checked={settings.general.showCustomAgents()}
+              onChange={(checked) => settings.general.setShowCustomAgents(checked)}
+            />
+          </div>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const AppearanceSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.appearance")}</h3>
+
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.row.colorScheme.title")}
+          description={language.t("settings.general.row.colorScheme.description")}
+        >
+          <Select
+            data-action="settings-color-scheme"
+            options={colorSchemeOptions()}
+            current={colorSchemeOptions().find((o) => o.value === theme.colorScheme())}
+            value={(o) => o.value}
+            label={(o) => o.label}
+            onSelect={(option) => option && theme.setColorScheme(option.value)}
+            variant="secondary"
+            size="small"
+            triggerVariant="settings"
+            triggerStyle={{ "min-width": "220px" }}
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.theme.title")}
+          description={
+            <>
+              {language.t("settings.general.row.theme.description")}{" "}
+              <Link href="https://opencode.ai/docs/themes/">{language.t("common.learnMore")}</Link>
+            </>
+          }
+        >
+          <Select
+            data-action="settings-theme"
+            options={themeOptions()}
+            current={themeOptions().find((o) => o.id === theme.themeId())}
+            value={(o) => o.id}
+            label={(o) => o.name}
+            onSelect={(option) => {
+              if (!option) return
+              theme.setTheme(option.id)
+            }}
+            variant="secondary"
+            size="small"
+            triggerVariant="settings"
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.uiFont.title")}
+          description={language.t("settings.general.row.uiFont.description")}
+        >
+          <div class="w-full sm:w-[220px]">
+            <TextField
+              data-action="settings-ui-font"
+              label={language.t("settings.general.row.uiFont.title")}
+              hideLabel
+              type="text"
+              value={sans()}
+              onChange={(value) => settings.appearance.setUIFont(value)}
+              placeholder={sansDefault}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              class="text-12-regular"
+              style={{ "font-family": sansFontFamily(settings.appearance.uiFont()) }}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.font.title")}
+          description={language.t("settings.general.row.font.description")}
+        >
+          <div class="w-full sm:w-[220px]">
+            <TextField
+              data-action="settings-code-font"
+              label={language.t("settings.general.row.font.title")}
+              hideLabel
+              type="text"
+              value={mono()}
+              onChange={(value) => settings.appearance.setFont(value)}
+              placeholder={monoDefault}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              class="text-12-regular"
+              style={{ "font-family": monoFontFamily(settings.appearance.font()) }}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.terminalFont.title")}
+          description={language.t("settings.general.row.terminalFont.description")}
+        >
+          <div class="w-full sm:w-[220px]">
+            <TextField
+              data-action="settings-terminal-font"
+              label={language.t("settings.general.row.terminalFont.title")}
+              hideLabel
+              type="text"
+              value={terminal()}
+              onChange={(value) => settings.appearance.setTerminalFont(value)}
+              placeholder={terminalDefault}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              class="text-12-regular"
+              style={{ "font-family": terminalFontFamily(settings.appearance.terminalFont()) }}
+            />
+          </div>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const NotificationsSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.notifications")}</h3>
+
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.notifications.agent.title")}
+          description={language.t("settings.general.notifications.agent.description")}
+        >
+          <div data-action="settings-notifications-agent">
+            <Switch
+              checked={settings.notifications.agent()}
+              onChange={(checked) => settings.notifications.setAgent(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.notifications.permissions.title")}
+          description={language.t("settings.general.notifications.permissions.description")}
+        >
+          <div data-action="settings-notifications-permissions">
+            <Switch
+              checked={settings.notifications.permissions()}
+              onChange={(checked) => settings.notifications.setPermissions(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.notifications.errors.title")}
+          description={language.t("settings.general.notifications.errors.description")}
+        >
+          <div data-action="settings-notifications-errors">
+            <Switch
+              checked={settings.notifications.errors()}
+              onChange={(checked) => settings.notifications.setErrors(checked)}
+            />
+          </div>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const SoundsSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.sounds")}</h3>
+
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.sounds.agent.title")}
+          description={language.t("settings.general.sounds.agent.description")}
+        >
+          <Select
+            data-action="settings-sounds-agent"
+            {...soundSelectProps(
+              () => settings.sounds.agentEnabled(),
+              () => settings.sounds.agent(),
+              (value) => settings.sounds.setAgentEnabled(value),
+              (id) => settings.sounds.setAgent(id),
+            )}
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.sounds.permissions.title")}
+          description={language.t("settings.general.sounds.permissions.description")}
+        >
+          <Select
+            data-action="settings-sounds-permissions"
+            {...soundSelectProps(
+              () => settings.sounds.permissionsEnabled(),
+              () => settings.sounds.permissions(),
+              (value) => settings.sounds.setPermissionsEnabled(value),
+              (id) => settings.sounds.setPermissions(id),
+            )}
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.sounds.errors.title")}
+          description={language.t("settings.general.sounds.errors.description")}
+        >
+          <Select
+            data-action="settings-sounds-errors"
+            {...soundSelectProps(
+              () => settings.sounds.errorsEnabled(),
+              () => settings.sounds.errors(),
+              (value) => settings.sounds.setErrorsEnabled(value),
+              (id) => settings.sounds.setErrors(id),
+            )}
+          />
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const UpdatesSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.updates")}</h3>
+
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.row.releaseNotes.title")}
+          description={language.t("settings.general.row.releaseNotes.description")}
+        >
+          <div data-action="settings-release-notes">
+            <Switch
+              checked={settings.general.releaseNotes()}
+              onChange={(checked) => settings.general.setReleaseNotes(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.updates.row.check.title")}
+          description={language.t("settings.updates.row.check.description")}
+        >
+          <Button size="small" variant="secondary" disabled={!updater.action().run} onClick={updater.run}>
+            {language.t(updater.action().label)}
+          </Button>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const DisplaySection = () => (
+    <Show when={desktop()}>
+      <div class="flex flex-col gap-1">
+        <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.display")}</h3>
+
+        <SettingsList>
+          <SettingsRow
+            title={language.t("settings.general.row.pinchZoom.title")}
+            description={language.t("settings.general.row.pinchZoom.description")}
+          >
+            <div data-action="settings-pinch-zoom">
+              <Switch checked={pinchZoom.latest} onChange={onPinchZoomChange} />
+            </div>
+          </SettingsRow>
+
+          <Show when={linux()}>
+            <SettingsRow
+              title={
+                <div class="flex items-center gap-2">
+                  <span>{language.t("settings.general.row.wayland.title")}</span>
+                  <Tooltip value={language.t("settings.general.row.wayland.tooltip")} placement="top">
+                    <span class="text-text-weak">
+                      <Icon name="help" size="small" />
+                    </span>
+                  </Tooltip>
+                </div>
+              }
+              description={language.t("settings.general.row.wayland.description")}
+            >
+              <div data-action="settings-wayland">
+                <Switch checked={displayBackend.latest === "wayland"} onChange={onDisplayBackendChange} />
+              </div>
+            </SettingsRow>
+          </Show>
+        </SettingsList>
+      </div>
+    </Show>
+  )
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+      <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
+        <div class="flex flex-col gap-1 pt-6 pb-8">
+          <h2 class="text-16-medium text-text-strong">{language.t("settings.tab.general")}</h2>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-8 w-full">
+        <Show when={settings.general.layoutTransitionAvailable()}>
+          <InterfaceSection />
+        </Show>
+
+        <Show when={settings.general.newInterfaceNoticeVisible()}>
+          <InterfaceNoticeSection />
+        </Show>
+
+        <GeneralSection />
+
+        <AppearanceSection />
+
+        <NotificationsSection />
+
+        <SoundsSection />
+
+        <UpdatesSection />
+
+        <DisplaySection />
+
+        <Show when={desktop()}>
+          <AdvancedSection />
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+interface SettingsRowProps {
+  title: string | JSX.Element
+  description: string | JSX.Element
+  children: JSX.Element
+}
+
+const SettingsRow: Component<SettingsRowProps> = (props) => {
+  return (
+    <div class="flex flex-wrap items-center gap-4 py-3 border-b border-border-weak-base last:border-none sm:flex-nowrap">
+      <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span class="text-14-medium text-text-strong">{props.title}</span>
+        <span class="text-12-regular text-text-weak">{props.description}</span>
+      </div>
+      <div class="flex w-full justify-end sm:w-auto sm:shrink-0">{props.children}</div>
+    </div>
+  )
+}
@@ -0,0 +1,149 @@
+import { useFilteredList } from "@opencode-ai/ui/hooks"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { Switch } from "@opencode-ai/ui/switch"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { type Component, For, Show } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { useModels } from "@/context/models"
+import { popularProviders } from "@/hooks/use-providers"
+import { SettingsList } from "./settings-list"
+import { SettingsServerPicker, SettingsServerScope } from "./settings-server-picker"
+
+type ModelItem = ReturnType<ReturnType<typeof useModels>["list"]>[number]
+
+const ListLoadingState: Component<{ label: string }> = (props) => {
+  return (
+    <div class="flex flex-col items-center justify-center py-12 text-center">
+      <span class="text-14-regular text-text-weak">{props.label}</span>
+    </div>
+  )
+}
+
+const ListEmptyState: Component<{ message: string; filter: string }> = (props) => {
+  return (
+    <div class="flex flex-col items-center justify-center py-12 text-center">
+      <span class="text-14-regular text-text-weak">{props.message}</span>
+      <Show when={props.filter}>
+        <span class="text-14-regular text-text-strong mt-1">&quot;{props.filter}&quot;</span>
+      </Show>
+    </div>
+  )
+}
+
+export const SettingsModels: Component = () => {
+  return (
+    <SettingsServerScope>
+      <SettingsModelsContent />
+    </SettingsServerScope>
+  )
+}
+
+const SettingsModelsContent: Component = () => {
+  const language = useLanguage()
+  const models = useModels()
+
+  const list = useFilteredList<ModelItem>({
+    items: (_filter) => models.list(),
+    key: (x) => `${x.provider.id}:${x.id}`,
+    filterKeys: ["provider.name", "name", "id"],
+    sortBy: (a, b) => a.name.localeCompare(b.name),
+    groupBy: (x) => x.provider.id,
+    sortGroupsBy: (a, b) => {
+      const aIndex = popularProviders.indexOf(a.category)
+      const bIndex = popularProviders.indexOf(b.category)
+      const aPopular = aIndex >= 0
+      const bPopular = bIndex >= 0
+
+      if (aPopular && !bPopular) return -1
+      if (!aPopular && bPopular) return 1
+      if (aPopular && bPopular) return aIndex - bIndex
+
+      const aName = a.items[0].provider.name
+      const bName = b.items[0].provider.name
+      return aName.localeCompare(bName)
+    },
+  })
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+      <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
+        <div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
+          <div class="flex items-center justify-between gap-4">
+            <h2 class="text-16-medium text-text-strong">{language.t("settings.models.title")}</h2>
+            <SettingsServerPicker />
+          </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={list.filter()}
+              onChange={list.onInput}
+              placeholder={language.t("dialog.model.search.placeholder")}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              class="flex-1"
+            />
+            <Show when={list.filter()}>
+              <IconButton icon="circle-x" variant="ghost" onClick={list.clear} />
+            </Show>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-8 max-w-[720px]">
+        <Show
+          when={!list.grouped.loading}
+          fallback={
+            <ListLoadingState label={`${language.t("common.loading")}${language.t("common.loading.ellipsis")}`} />
+          }
+        >
+          <Show
+            when={list.flat().length > 0}
+            fallback={<ListEmptyState message={language.t("dialog.model.empty")} filter={list.filter()} />}
+          >
+            <For each={list.grouped.latest}>
+              {(group) => (
+                <div class="flex flex-col gap-1">
+                  <div class="flex items-center gap-2 pb-2">
+                    <ProviderIcon id={group.category} class="size-5 shrink-0 icon-strong-base" />
+                    <span class="text-14-medium text-text-strong">{group.items[0].provider.name}</span>
+                  </div>
+                  <SettingsList>
+                    <For each={group.items}>
+                      {(item) => {
+                        const key = { providerID: item.provider.id, modelID: item.id }
+                        return (
+                          <div class="flex flex-wrap items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
+                            <div class="min-w-0">
+                              <span class="text-14-regular text-text-strong truncate block">{item.name}</span>
+                            </div>
+                            <div class="flex-shrink-0">
+                              <Switch
+                                checked={models.visible(key)}
+                                onChange={(checked) => {
+                                  models.setVisibility(key, checked)
+                                }}
+                                hideLabel
+                              >
+                                {item.name}
+                              </Switch>
+                            </div>
+                          </div>
+                        )
+                      }}
+                    </For>
+                  </SettingsList>
+                </div>
+              )}
+            </For>
+          </Show>
+        </Show>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,259 @@
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { Tag } from "@opencode-ai/ui/tag"
+import { showToast } from "@/utils/toast"
+import { popularProviders, useProviders } from "@/hooks/use-providers"
+import { createMemo, type Component, For, Show } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
+import { DialogConnectProvider, useProviderConnectController } from "./dialog-connect-provider"
+import { DialogCustomProvider } from "./dialog-custom-provider"
+import { SettingsList } from "./settings-list"
+import { SettingsServerPicker, SettingsServerScope } from "./settings-server-picker"
+
+type ProviderSource = "env" | "api" | "config" | "custom"
+type ProviderItem = ReturnType<ReturnType<typeof useProviders>["connected"]>[number]
+
+const PROVIDER_NOTES = [
+  { match: (id: string) => id === "opencode", key: "dialog.provider.opencode.note" },
+  { match: (id: string) => id === "opencode-go", key: "dialog.provider.opencodeGo.tagline" },
+  { match: (id: string) => id === "anthropic", key: "dialog.provider.anthropic.note" },
+  { match: (id: string) => id.startsWith("github-copilot"), key: "dialog.provider.copilot.note" },
+  { match: (id: string) => id === "openai", key: "dialog.provider.openai.note" },
+  { match: (id: string) => id === "google", key: "dialog.provider.google.note" },
+  { match: (id: string) => id === "openrouter", key: "dialog.provider.openrouter.note" },
+  { match: (id: string) => id === "vercel", key: "dialog.provider.vercel.note" },
+] as const
+
+export const SettingsProviders: Component<{ onBack?: () => void }> = (props) => {
+  return (
+    <SettingsServerScope>
+      <SettingsProvidersContent onBack={props.onBack} />
+    </SettingsServerScope>
+  )
+}
+
+const SettingsProvidersContent: Component<{ onBack?: () => void }> = (props) => {
+  const dialog = useDialog()
+  const language = useLanguage()
+  const serverSDK = useServerSDK()
+  const serverSync = useServerSync()
+  const providers = useProviders(() => undefined)
+  const providerConnect = useProviderConnectController({ onBack: props.onBack })
+
+  const connect = (provider?: string) => {
+    providerConnect.select(provider)
+    void dialog.show(() => <DialogConnectProvider controller={providerConnect} />)
+  }
+
+  const connected = createMemo(() => {
+    return providers
+      .connected()
+      .filter((p) => p.id !== "opencode" || Object.values(p.models).find((m) => m.cost?.input))
+  })
+
+  const popular = createMemo(() => {
+    const connectedIDs = new Set(connected().map((p) => p.id))
+    const items = providers
+      .popular()
+      .filter((p) => !connectedIDs.has(p.id))
+      .slice()
+    items.sort((a, b) => popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id))
+    return items
+  })
+
+  const source = (item: ProviderItem): ProviderSource | undefined => {
+    if (!("source" in item)) return
+    const value = item.source
+    if (value === "env" || value === "api" || value === "config" || value === "custom") return value
+    return
+  }
+
+  const type = (item: ProviderItem) => {
+    const current = source(item)
+    if (current === "env") return language.t("settings.providers.tag.environment")
+    if (current === "api") return language.t("provider.connect.method.apiKey")
+    if (current === "config") {
+      if (isConfigCustom(item.id)) return language.t("settings.providers.tag.custom")
+      return language.t("settings.providers.tag.config")
+    }
+    if (current === "custom") return language.t("settings.providers.tag.custom")
+    return language.t("settings.providers.tag.other")
+  }
+
+  const canDisconnect = (item: ProviderItem) => source(item) !== "env" && !isConfigCustom(item.id)
+
+  const note = (id: string) => PROVIDER_NOTES.find((item) => item.match(id))?.key
+
+  const isConfigCustom = (providerID: string) => {
+    const provider = serverSync().data.config.provider?.[providerID]
+    if (!provider) return false
+    if (provider.npm !== "@ai-sdk/openai-compatible") return false
+    if (!provider.models || Object.keys(provider.models).length === 0) return false
+    return true
+  }
+
+  const disableProvider = async (providerID: string, name: string) => {
+    return
+    const before = serverSync().data.config.disabled_providers ?? []
+    const next = before.includes(providerID) ? before : [...before, providerID]
+    serverSync().set("config", "disabled_providers", next)
+
+    await serverSync()
+      .updateConfig({ disabled_providers: next })
+      .then(() => {
+        showToast({
+          variant: "success",
+          icon: "circle-check",
+          title: language.t("provider.disconnect.toast.disconnected.title", { provider: name }),
+          description: language.t("provider.disconnect.toast.disconnected.description", { provider: name }),
+        })
+      })
+      .catch((err: unknown) => {
+        serverSync().set("config", "disabled_providers", before)
+        const message = err instanceof Error ? err.message : String(err)
+        showToast({ title: language.t("common.requestFailed"), description: message })
+      })
+  }
+
+  const disconnect = async (providerID: string, name: string) => {
+    await serverSDK()
+      .api.integration.get({ integrationID: providerID })
+      .then(async (integration) => {
+        const credentials = integration.data?.connections.filter((item) => item.type === "credential") ?? []
+        if (credentials.length === 0) throw new Error(`No removable credentials found for ${name}`)
+        await Promise.all(
+          credentials.map((credential) => serverSDK().api.credential.remove({ credentialID: credential.id })),
+        )
+        showToast({
+          variant: "success",
+          icon: "circle-check",
+          title: language.t("provider.disconnect.toast.disconnected.title", { provider: name }),
+          description: language.t("provider.disconnect.toast.disconnected.description", { provider: name }),
+        })
+      })
+      .catch((err: unknown) => {
+        const message = err instanceof Error ? err.message : String(err)
+        showToast({ title: language.t("common.requestFailed"), description: message })
+      })
+  }
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+      <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
+        <div class="flex items-center justify-between gap-4 pt-6 pb-8 max-w-[720px]">
+          <h2 class="text-16-medium text-text-strong">{language.t("settings.providers.title")}</h2>
+          <SettingsServerPicker />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-8 max-w-[720px]">
+        <div class="flex flex-col gap-1" data-component="connected-providers-section">
+          <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.providers.section.connected")}</h3>
+          <SettingsList>
+            <Show
+              when={connected().length > 0}
+              fallback={
+                <div class="py-4 text-14-regular text-text-weak">
+                  {language.t("settings.providers.connected.empty")}
+                </div>
+              }
+            >
+              <For each={connected()}>
+                {(item) => (
+                  <div class="group flex flex-wrap items-center justify-between gap-4 min-h-16 py-3 border-b border-border-weak-base last:border-none">
+                    <div class="flex items-center gap-3 min-w-0">
+                      <ProviderIcon id={item.id} class="size-5 shrink-0 icon-strong-base" />
+                      <span class="text-14-medium text-text-strong truncate">{item.name}</span>
+                      <Tag>{type(item)}</Tag>
+                    </div>
+                    <Show
+                      when={canDisconnect(item)}
+                      fallback={
+                        <span class="text-14-regular text-text-base opacity-0 group-hover:opacity-100 transition-opacity duration-200 pr-3 cursor-default">
+                          {language.t("settings.providers.connected.environmentDescription")}
+                        </span>
+                      }
+                    >
+                      <Button size="large" variant="ghost" onClick={() => void disconnect(item.id, item.name)}>
+                        {language.t("common.disconnect")}
+                      </Button>
+                    </Show>
+                  </div>
+                )}
+              </For>
+            </Show>
+          </SettingsList>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.providers.section.popular")}</h3>
+          <SettingsList>
+            <For each={popular()}>
+              {(item) => (
+                <div class="flex flex-wrap items-center justify-between gap-4 min-h-16 py-3 border-b border-border-weak-base last:border-none">
+                  <div class="flex flex-col min-w-0">
+                    <div class="flex items-center gap-x-3">
+                      <ProviderIcon id={item.id} class="size-5 shrink-0 icon-strong-base" />
+                      <span class="text-14-medium text-text-strong">{item.name}</span>
+                      <Show when={item.id === "opencode"}>
+                        <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
+                      </Show>
+                      <Show when={item.id === "opencode-go"}>
+                        <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
+                      </Show>
+                    </div>
+                    <Show when={note(item.id)}>
+                      {(key) => <span class="text-12-regular text-text-weak pl-8">{language.t(key())}</span>}
+                    </Show>
+                  </div>
+                  <Button size="large" variant="secondary" icon="plus-small" onClick={() => connect(item.id)}>
+                    {language.t("common.connect")}
+                  </Button>
+                </div>
+              )}
+            </For>
+
+            <Show when={false}>
+              <div
+                class="flex items-center justify-between gap-4 min-h-16 border-b border-border-weak-base last:border-none flex-wrap py-3"
+                data-component="custom-provider-section"
+              >
+                <div class="flex flex-col min-w-0">
+                  <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
+                    <ProviderIcon id="synthetic" class="size-5 shrink-0 icon-strong-base" />
+                    <span class="text-14-medium text-text-strong">{language.t("provider.custom.title")}</span>
+                    <Tag>{language.t("settings.providers.tag.custom")}</Tag>
+                  </div>
+                  <span class="text-12-regular text-text-weak pl-8">
+                    {language.t("settings.providers.custom.description")}
+                  </span>
+                </div>
+                <Button
+                  size="large"
+                  variant="secondary"
+                  icon="plus-small"
+                  onClick={() => {
+                    dialog.show(() => <DialogCustomProvider onBack={dialog.close} />)
+                  }}
+                >
+                  {language.t("common.connect")}
+                </Button>
+              </div>
+            </Show>
+          </SettingsList>
+
+          <Button
+            variant="ghost"
+            class="px-0 py-0 mt-5 text-14-medium text-text-interactive-base text-left justify-start hover:bg-transparent active:bg-transparent"
+            onClick={() => connect()}
+          >
+            {language.t("dialog.provider.viewAll")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,106 @@
+import { Button } from "@opencode-ai/ui/button"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { Icon } from "@opencode-ai/ui/icon"
+import { QueryClientProvider } from "@tanstack/solid-query"
+import { createMemo, For, type ParentProps, Show } from "solid-js"
+import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
+import { ModelsProvider } from "@/context/models"
+import { ServerConnection } from "@/context/server"
+import { ServerSDKProvider } from "@/context/server-sdk"
+import { ServerSyncProvider } from "@/context/server-sync"
+import { useGlobal } from "@/context/global"
+import { useSettings } from "@/context/settings"
+
+export function SettingsServerScope(props: ParentProps) {
+  const global = useGlobal()
+  const settings = useSettings()
+
+  return (
+    <Show when={settings.general.newLayoutDesigns()} fallback={props.children}>
+      <Show when={global.settings.server.selected()}>
+        {(server) => <SettingsServerDataProviders server={server()}>{props.children}</SettingsServerDataProviders>}
+      </Show>
+    </Show>
+  )
+}
+
+function SettingsServerDataProviders(props: ParentProps<{ server: ServerConnection.Any }>) {
+  const global = useGlobal()
+  const serverCtx = () => global.ensureServerCtx(props.server)
+
+  return (
+    <QueryClientProvider client={serverCtx().queryClient}>
+      <ServerSDKProvider server={() => props.server}>
+        <ServerSyncProvider>
+          <ModelsProvider>{props.children}</ModelsProvider>
+        </ServerSyncProvider>
+      </ServerSDKProvider>
+    </QueryClientProvider>
+  )
+}
+
+export function SettingsServerPicker() {
+  const global = useGlobal()
+  const settings = useSettings()
+  const selected = createMemo(() =>
+    settings.general.newLayoutDesigns() ? global.settings.server.selected() : undefined,
+  )
+
+  return (
+    <Show when={selected()}>
+      {(conn) => (
+        <DropdownMenu gutter={4} placement="bottom-end">
+          <DropdownMenu.Trigger
+            as={Button}
+            variant="secondary"
+            size="large"
+            class="h-8 max-w-[260px] gap-2 px-2 py-1.5 data-[expanded]:bg-surface-base-active"
+          >
+            <ServerHealthIndicator health={global.servers.health[ServerConnection.key(conn())]} />
+            <ServerRow
+              conn={conn()}
+              status={global.servers.health[ServerConnection.key(conn())]}
+              class="flex items-center gap-2 min-w-0 flex-1"
+              nameClass="text-14-regular text-text-base truncate"
+              versionClass="hidden"
+            />
+            <Icon name="chevron-down" size="small" class="text-icon-weak shrink-0" />
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Portal>
+            <DropdownMenu.Content class="w-[320px] mt-1 [&_[data-slot=dropdown-menu-radio-item]]:pl-2 [&_[data-slot=dropdown-menu-radio-item]]:pr-2">
+              <DropdownMenu.RadioGroup
+                value={global.settings.server.key}
+                onChange={(key) => {
+                  if (typeof key === "string") global.settings.server.set(ServerConnection.Key.make(key))
+                }}
+              >
+                <For each={global.servers.list()}>
+                  {(item) => {
+                    const key = ServerConnection.key(item)
+                    const blocked = () => global.servers.health[key]?.healthy === false
+                    return (
+                      <DropdownMenu.RadioItem value={key} disabled={blocked()}>
+                        <ServerHealthIndicator health={global.servers.health[key]} />
+                        <ServerRow
+                          conn={item}
+                          dimmed={blocked()}
+                          status={global.servers.health[key]}
+                          class="flex items-center gap-2 min-w-0 flex-1"
+                          nameClass="text-14-regular text-text-base truncate"
+                          versionClass="text-12-regular text-text-weak truncate"
+                        />
+                        <DropdownMenu.ItemIndicator>
+                          <Icon name="check-small" size="small" class="text-icon-weak" />
+                        </DropdownMenu.ItemIndicator>
+                      </DropdownMenu.RadioItem>
+                    )
+                  }}
+                </For>
+              </DropdownMenu.RadioGroup>
+            </DropdownMenu.Content>
+          </DropdownMenu.Portal>
+        </DropdownMenu>
+      )}
+    </Show>
+  )
+}
@@ -0,0 +1,33 @@
+import { Show, type Component } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { ServerConnectionForm, ServerConnectionList, useServerManagementController } from "./dialog-select-server"
+
+export const SettingsServers: Component = () => {
+  const language = useLanguage()
+  const controller = useServerManagementController()
+
+  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()}
+          fallback={
+            <>
+              <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-1 pt-6 pb-8">
+                  <h2 class="text-16-medium text-text-strong">{language.t("status.popover.tab.servers")}</h2>
+                </div>
+              </div>
+              <ServerConnectionList controller={controller} />
+            </>
+          }
+        >
+          <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>
+        </Show>
+      </div>
+    </div>
+  )
+}
@@ -5,6 +5,7 @@ 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"
@@ -26,6 +27,7 @@ import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
 import { Link } from "../link"
 import { SettingsListV2 } from "./parts/list"
 import { SettingsRowV2 } from "./parts/row"
+import { LayoutRetirementNotice, LayoutTransitionToggle } from "./interface-transition"
 import "./settings-v2.css"

 let demoSoundState = {
@@ -85,6 +87,7 @@ export const SettingsGeneralV2: Component<{
  const language = useLanguage()
  const permission = usePermission()
  const platform = usePlatform()
+  const dialog = useDialog()
  const settings = useSettings()
  const serverSync = useServerSync()
  const mobile = createMediaQuery("(max-width: 767px)")
@@ -222,6 +225,31 @@ export const SettingsGeneralV2: Component<{
    },
  })

+  const InterfaceSection = () => (
+    <LayoutTransitionToggle
+      title={language.t("settings.general.row.newInterface.title")}
+      badge={language.t("settings.general.row.newInterface.badge")}
+      description={language.t("settings.general.row.newInterface.description")}
+      checked={settings.general.newLayoutDesigns()}
+      onChange={(checked) => {
+        settings.general.setNewLayoutDesigns(checked)
+        if (checked) return
+        void import("@/components/dialog-settings").then((module) => {
+          void dialog.show(() => <module.DialogSettings />)
+        })
+      }}
+    />
+  )
+
+  const InterfaceNoticeSection = () => (
+    <LayoutRetirementNotice
+      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}
+    />
+  )
+
  const GeneralSection = () => (
    <div class="settings-v2-section">
      <SettingsListV2>
@@ -661,6 +689,14 @@ export const SettingsGeneralV2: Component<{
      </div>

      <div class="settings-v2-tab-body">
+        <Show when={settings.general.layoutTransitionAvailable()}>
+          <InterfaceSection />
+        </Show>
+
+        <Show when={settings.general.newInterfaceNoticeVisible()}>
+          <InterfaceNoticeSection />
+        </Show>
+
        <GeneralSection />

        <AppearanceSection />
@@ -0,0 +1,76 @@
+// @ts-nocheck
+import { Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { LayoutRetirementNotice, LayoutTransitionToggle } from "./interface-transition"
+
+const copy = {
+  title: "New layout",
+  badge: "New",
+  description: "Use the new tabs and home layout. Switch between layouts for a limited time.",
+  noticeTitle: "You're now using new layout",
+  noticeDescription: "The previous layout is no longer available",
+  dismiss: "Dismiss",
+}
+
+function Frame(props) {
+  return <div class="w-[640px] max-w-full">{props.children}</div>
+}
+
+function ToggleExample(props) {
+  const [state, setState] = createStore({ checked: props.checked })
+  return (
+    <Frame>
+      <LayoutTransitionToggle
+        title={copy.title}
+        badge={copy.badge}
+        description={copy.description}
+        checked={state.checked}
+        onChange={(checked) => setState("checked", checked)}
+      />
+    </Frame>
+  )
+}
+
+function NoticeExample() {
+  const [state, setState] = createStore({ dismissed: false })
+  return (
+    <Frame>
+      <Show when={!state.dismissed} fallback={<span class="text-v2-text-text-muted">Notice dismissed</span>}>
+        <LayoutRetirementNotice
+          title={copy.noticeTitle}
+          description={copy.noticeDescription}
+          dismiss={copy.dismiss}
+          onDismiss={() => setState("dismissed", true)}
+        />
+      </Show>
+    </Frame>
+  )
+}
+
+export default {
+  title: "App/Settings/Layout transition",
+  id: "app-settings-layout-transition",
+  component: LayoutTransitionToggle,
+}
+
+export const NewLayoutEnabled = {
+  render: () => <ToggleExample checked />,
+}
+
+export const PreviousLayoutEnabled = {
+  render: () => <ToggleExample checked={false} />,
+}
+
+export const PreviousLayoutRetired = {
+  render: () => <NoticeExample />,
+}
+
+export const AllStates = {
+  render: () => (
+    <div class="flex flex-col gap-8">
+      <ToggleExample checked />
+      <ToggleExample checked={false} />
+      <NoticeExample />
+    </div>
+  ),
+}
@@ -0,0 +1,54 @@
+import { Tag } from "@opencode-ai/ui/v2/badge-v2"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Switch } from "@opencode-ai/ui/v2/switch-v2"
+import { SettingsListV2 } from "./parts/list"
+import { SettingsRowV2 } from "./parts/row"
+
+export function LayoutTransitionToggle(props: {
+  title: string
+  badge: string
+  description: string
+  checked: boolean
+  onChange: (checked: boolean) => void
+}) {
+  return (
+    <div class="settings-v2-section">
+      <div class="settings-v2-interface-feature">
+        <SettingsListV2>
+          <SettingsRowV2
+            title={
+              <span class="flex items-center gap-2">
+                {props.title}
+                <Tag variant="accent">{props.badge}</Tag>
+              </span>
+            }
+            description={props.description}
+          >
+            <div data-action="settings-new-layout-designs">
+              <Switch checked={props.checked} onChange={props.onChange} />
+            </div>
+          </SettingsRowV2>
+        </SettingsListV2>
+      </div>
+    </div>
+  )
+}
+
+export function LayoutRetirementNotice(props: {
+  title: string
+  description: string
+  dismiss: string
+  onDismiss: () => void
+}) {
+  return (
+    <div class="settings-v2-section">
+      <SettingsListV2>
+        <SettingsRowV2 title={props.title} description={props.description}>
+          <ButtonV2 size="small" variant="ghost-muted" onClick={props.onDismiss}>
+            {props.dismiss}
+          </ButtonV2>
+        </SettingsRowV2>
+      </SettingsListV2>
+    </div>
+  )
+}
@@ -0,0 +1,79 @@
+import { describe, expect, test } from "bun:test"
+import {
+  hasExistingWebState,
+  isAppUpgrade,
+  layoutTransitionState,
+  maximumSunsetTimeout,
+  newLayoutDesignsDefault,
+  nextSunsetCheckDelay,
+  resolveNewLayoutDesigns,
+  shouldDisplayTabsToast,
+  shouldEnableNewLayout,
+} from "./settings"
+
+describe("layout transition", () => {
+  test("blank profiles default to the new layout", () => {
+    expect(newLayoutDesignsDefault).toBe(true)
+  })
+
+  test("hides the transition until a sunset is scheduled", () => {
+    expect(layoutTransitionState(false, true, false, false)).toEqual({ available: false, notice: false })
+  })
+
+  test("existing profiles can switch before sunset", () => {
+    expect(layoutTransitionState(true, true, false, false)).toEqual({ available: true, notice: false })
+  })
+
+  test("classifies web profiles from existing settings or a recorded version", () => {
+    expect(hasExistingWebState("{}", undefined)).toBe(true)
+    expect(hasExistingWebState(null, "1.17.19")).toBe(true)
+    expect(hasExistingWebState(null, undefined)).toBe(false)
+  })
+
+  test("preserves explicit and default layout preferences", () => {
+    expect(resolveNewLayoutDesigns(false, false, true)).toBe(false)
+    expect(resolveNewLayoutDesigns(false, undefined, false)).toBe(false)
+    expect(resolveNewLayoutDesigns(false, undefined, true)).toBe(true)
+  })
+
+  test("sunset replaces the toggle with a dismissible notice", () => {
+    expect(layoutTransitionState(true, true, true, false)).toEqual({ available: false, notice: true })
+    expect(layoutTransitionState(true, true, true, true)).toEqual({ available: false, notice: false })
+    expect(resolveNewLayoutDesigns(true, false)).toBe(true)
+  })
+
+  test("caps checks for sunsets beyond the browser timeout limit", () => {
+    expect(nextSunsetCheckDelay(maximumSunsetTimeout + 1_000, 0)).toBe(maximumSunsetTimeout)
+    expect(nextSunsetCheckDelay(10_000, 9_000)).toBe(1_000)
+    expect(nextSunsetCheckDelay(9_000, 10_000)).toBe(0)
+  })
+
+  test("enables the new layout when upgrading from 1.17.19 or earlier", () => {
+    expect(shouldEnableNewLayout("v1.17.19", "1.17.20")).toBe(true)
+    expect(shouldEnableNewLayout("1.16.9", "2.0.0")).toBe(true)
+  })
+
+  test("enables the new layout when no previous version was recorded", () => {
+    expect(shouldEnableNewLayout(undefined, "1.17.20")).toBe(true)
+  })
+
+  test("detects upgrades only when a previous version is older", () => {
+    expect(isAppUpgrade("1.17.19", "1.17.20")).toBe(true)
+    expect(isAppUpgrade(undefined, "1.17.20")).toBe(false)
+    expect(isAppUpgrade("1.17.20", "1.17.20")).toBe(false)
+    expect(isAppUpgrade("1.17.21", "1.17.20")).toBe(false)
+  })
+
+  test("shows the tabs toast for upgrades and existing installs without a recorded version", () => {
+    expect(shouldDisplayTabsToast("1.17.19", "1.17.20", false)).toBe(true)
+    expect(shouldDisplayTabsToast(undefined, "1.17.20", true)).toBe(true)
+    expect(shouldDisplayTabsToast(undefined, "1.17.20", false)).toBe(false)
+  })
+
+  test("does not enable the new layout without a qualifying upgrade", () => {
+    expect(shouldEnableNewLayout("1.17.19", "1.17.19")).toBe(false)
+    expect(shouldEnableNewLayout("1.17.20", "1.17.21")).toBe(false)
+    expect(shouldEnableNewLayout(undefined, "1.17.19")).toBe(false)
+    expect(shouldEnableNewLayout("dev", "1.17.20")).toBe(false)
+  })
+})
@@ -1,7 +1,8 @@
 import { createStore, reconcile } from "solid-js/store"
-import { createEffect, createMemo } from "solid-js"
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { persisted } from "@/utils/persist"
+import { usePlatform } from "@/context/platform"

 export interface NotificationSettings {
  agent: boolean
@@ -33,6 +34,10 @@ export interface Settings {
    editToolPartsExpanded: boolean
    showCustomAgents: boolean
    mobileTitlebarPosition: "top" | "bottom"
+    newLayoutDesigns?: boolean
+    layoutTransitionEligible?: boolean
+    newInterfaceNoticeDismissed?: boolean
+    shouldDisplayTabsToast?: boolean
  }
  appearance: {
    fontSize: number
@@ -51,6 +56,75 @@ export interface Settings {
 export const monoDefault = "System Mono"
 export const sansDefault = "System Sans"
 export const terminalDefault = "JetBrainsMono Nerd Font Mono"
+const legacyNewLayoutDesignsDefault = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
+export const newLayoutDesignsDefault = true
+// Existing users can switch layouts until local midnight on this date. Set new Date(YYYY, M-1, D) to show.
+export const oldInterfaceSunset = new Date(2026, 8, 14)
+const newLayoutDesignsUpgradeCutoff = "1.17.19"
+
+function compareVersions(a: string, b: string) {
+  const parse = (version: string) => {
+    const match = /^v?(\d+)\.(\d+)\.(\d+)(?:[-+].*)?$/i.exec(version.trim())
+    if (!match) return
+    return match.slice(1).map(Number)
+  }
+  const left = parse(a)
+  const right = parse(b)
+  if (!left || !right) return
+  const index = left.findIndex((part, index) => part !== right[index])
+  return index === -1 ? 0 : left[index]! - right[index]!
+}
+
+export function isAppUpgrade(previous: string | undefined, current: string | undefined) {
+  if (!previous || !current) return false
+  const comparison = compareVersions(current, previous)
+  return comparison !== undefined && comparison > 0
+}
+
+export function shouldDisplayTabsToast(
+  previous: string | undefined,
+  current: string | undefined,
+  existingInstall: boolean,
+) {
+  return isAppUpgrade(previous, current) || (!previous && existingInstall)
+}
+
+export function hasExistingWebState(settings: Promise<string> | string | null, previousVersion: string | undefined) {
+  return settings !== null || previousVersion !== undefined
+}
+
+export function shouldEnableNewLayout(previous: string | undefined, current: string | undefined) {
+  if (!current) return false
+  const currentComparison = compareVersions(current, newLayoutDesignsUpgradeCutoff)
+  if (!previous) return currentComparison !== undefined && currentComparison > 0
+  if (!isAppUpgrade(previous, current)) return false
+  const previousComparison = compareVersions(previous, newLayoutDesignsUpgradeCutoff)
+  return (
+    previousComparison !== undefined &&
+    currentComparison !== undefined &&
+    previousComparison <= 0 &&
+    currentComparison > 0
+  )
+}
+
+export function layoutTransitionState(scheduled: boolean, eligible: boolean, retired: boolean, dismissed: boolean) {
+  return {
+    available: scheduled && eligible && !retired,
+    notice: scheduled && eligible && retired && !dismissed,
+  }
+}
+
+export const maximumSunsetTimeout = 2_147_483_647
+
+export function nextSunsetCheckDelay(sunset: number, now: number) {
+  return Math.min(Math.max(0, sunset - now), maximumSunsetTimeout)
+}
+
+export function resolveNewLayoutDesigns(retired: boolean, preference: boolean | undefined, fallback = true) {
+  if (retired) return true
+  return preference ?? fallback
+}
+
 const monoFallback =
  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
 const sansFallback = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
@@ -149,7 +223,17 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
  name: "Settings",
  gate: false,
  init: () => {
-    const [store, setStore, , ready] = persisted("settings.v3", createStore<Settings>(defaultSettings))
+    const platform = usePlatform()
+    const [store, setStore, settingsInit, ready] = persisted("settings.v3", createStore<Settings>(defaultSettings))
+    const [launch, setLaunch, , launchReady] = persisted(
+      "app-version.v1",
+      createStore<{ version?: string }>({ version: undefined }),
+    )
+    const [launchState, setLaunchState] = createStore({
+      classified: false,
+      migrationApplied: false,
+      previous: undefined as string | undefined,
+    })
    const showFileTree = withFallback(() => store.general?.showFileTree, defaultSettings.general.showFileTree)
    const showSearch = withFallback(() => store.general?.showSearch, defaultSettings.general.showSearch)
    const showStatus = withFallback(() => store.general?.showStatus, defaultSettings.general.showStatus)
@@ -157,6 +241,93 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
      () => store.general?.showCustomAgents,
      defaultSettings.general.showCustomAgents,
    )
+    const sunset = oldInterfaceSunset
+    const [oldInterfaceRetired, setOldInterfaceRetired] = createSignal(sunset ? Date.now() >= sunset.getTime() : false)
+    const layoutTransitionClassified = createMemo(() => typeof store.general?.layoutTransitionEligible === "boolean")
+    const layoutTransitionEligible = withFallback(() => store.general?.layoutTransitionEligible, false)
+    const newInterfaceNoticeDismissed = withFallback(() => store.general?.newInterfaceNoticeDismissed, false)
+    const layoutUpgrade = createMemo(() =>
+      launchState.classified && !launchState.migrationApplied
+        ? shouldEnableNewLayout(launchState.previous, platform.version)
+        : false,
+    )
+    const layoutTransition = createMemo(() =>
+      layoutTransitionState(!!sunset, layoutTransitionEligible(), oldInterfaceRetired(), newInterfaceNoticeDismissed()),
+    )
+    const newLayoutDesigns = createMemo(() => {
+      if (layoutUpgrade()) return true
+      if (!ready() && !oldInterfaceRetired()) return legacyNewLayoutDesignsDefault
+      if (!layoutTransitionClassified()) {
+        return resolveNewLayoutDesigns(
+          oldInterfaceRetired(),
+          store.general?.newLayoutDesigns,
+          legacyNewLayoutDesignsDefault,
+        )
+      }
+      return resolveNewLayoutDesigns(
+        oldInterfaceRetired(),
+        store.general?.newLayoutDesigns,
+        layoutTransitionEligible() ? legacyNewLayoutDesignsDefault : newLayoutDesignsDefault,
+      )
+    })
+    const visible = (preference: () => boolean) => createMemo(() => !newLayoutDesigns() || preference())
+
+    if (sunset && !oldInterfaceRetired()) {
+      const timeout = { current: undefined as ReturnType<typeof setTimeout> | undefined }
+      const checkSunset = () => {
+        if (Date.now() >= sunset.getTime()) {
+          setOldInterfaceRetired(true)
+          return
+        }
+        timeout.current = setTimeout(checkSunset, nextSunsetCheckDelay(sunset.getTime(), Date.now()))
+      }
+      checkSunset()
+      onCleanup(() => {
+        if (timeout.current !== undefined) clearTimeout(timeout.current)
+      })
+    }
+
+    createEffect(() => {
+      if (!launchReady() || launchState.classified) return
+      setLaunchState({
+        classified: true,
+        previous: launch.version,
+      })
+      if (!platform.version || launch.version === platform.version) return
+      setLaunch("version", platform.version)
+    })
+
+    createEffect(() => {
+      if (!ready() || !launchState.classified || platform.platform !== "web") return
+      if (layoutTransitionClassified()) return
+      setStore("general", "layoutTransitionEligible", hasExistingWebState(settingsInit, launchState.previous))
+    })
+
+    createEffect(() => {
+      if (!ready() || !launchState.classified || launchState.migrationApplied) return
+      if (layoutUpgrade() && store.general?.newLayoutDesigns !== true) {
+        setStore("general", "newLayoutDesigns", true)
+      }
+      setLaunchState("migrationApplied", true)
+    })
+
+    createEffect(() => {
+      if (!ready() || !launchState.classified) return
+      if (typeof store.general?.shouldDisplayTabsToast === "boolean") return
+      if (!launchState.previous && !layoutTransitionClassified()) return
+      setStore(
+        "general",
+        "shouldDisplayTabsToast",
+        shouldDisplayTabsToast(launchState.previous, platform.version, layoutTransitionEligible()),
+      )
+    })
+
+    createEffect(() => {
+      if (!ready() || !oldInterfaceRetired()) return
+      if (store.general?.newLayoutDesigns === true) return
+      setStore("general", "newLayoutDesigns", true)
+    })
+
    createEffect(() => {
      if (typeof document === "undefined") return
      const root = document.documentElement
@@ -242,13 +413,34 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
        setMobileTitlebarPosition(value: "top" | "bottom") {
          setStore("general", "mobileTitlebarPosition", value)
        },
-        newLayoutDesigns: () => true,
+        newLayoutDesigns,
+        setNewLayoutDesigns(value: boolean) {
+          const next = oldInterfaceRetired() ? true : value
+          if (newLayoutDesigns() === next) return
+          setStore("general", "newLayoutDesigns", next)
+          if (typeof window !== "undefined") setTimeout(() => window.location.reload())
+        },
+        layoutTransitionClassified,
+        setOldLayoutEligible(eligible: boolean) {
+          const current = store.general?.layoutTransitionEligible
+          if (typeof current === "boolean") return
+          setStore("general", "layoutTransitionEligible", eligible)
+        },
+        layoutTransitionAvailable: createMemo(() => ready() && layoutTransition().available),
+        newInterfaceNoticeVisible: createMemo(() => ready() && layoutTransition().notice),
+        dismissNewInterfaceNotice() {
+          setStore("general", "newInterfaceNoticeDismissed", true)
+        },
+        shouldDisplayTabsToast: withFallback(() => store.general?.shouldDisplayTabsToast, false),
+        dismissTabsToast() {
+          setStore("general", "shouldDisplayTabsToast", false)
+        },
      },
      visibility: {
-        fileTree: showFileTree,
-        search: showSearch,
-        status: showStatus,
-        customAgents: showCustomAgents,
+        fileTree: visible(showFileTree),
+        search: visible(showSearch),
+        status: visible(showStatus),
+        customAgents: visible(showCustomAgents),
      },
      appearance: {
        fontSize: withFallback(() => store.appearance?.fontSize, defaultSettings.appearance.fontSize),
@@ -8,7 +8,7 @@ import { createHomeSessionSearchController } from "./home/home-session-search-co
 import { createHomeSessionsController } from "./home/home-sessions-controller"
 import { HomeSessions } from "./home/home-sessions"

-export function Home() {
+export function NewHome() {
  const home = createHomeController()
  const projects = createHomeProjectsController(home)
  const sessions = createHomeSessionsController(home)
@@ -0,0 +1,142 @@
+import { DialogSelectServer } from "@/components/dialog-select-server"
+import { useDirectoryPicker } from "@/components/directory-picker"
+import { useGlobal } from "@/context/global"
+import { useLanguage } from "@/context/language"
+import { type ServerConnection, useServer } from "@/context/server"
+import { useServerSync } from "@/context/server-sync"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Logo } from "@opencode-ai/ui/logo"
+import { useNavigate } from "@solidjs/router"
+import { DateTime } from "luxon"
+import { createMemo, For, Match, Switch } from "solid-js"
+
+export function LegacyHome() {
+  const sync = useServerSync()
+  const pickDirectory = useDirectoryPicker()
+  const dialog = useDialog()
+  const navigate = useNavigate()
+  const global = useGlobal()
+  const server = useServer()
+  const language = useLanguage()
+  const homedir = createMemo(() => sync().data.path.home)
+  const serverUnreachable = createMemo(() => global.servers.health[server.key]?.healthy === false)
+  const recent = createMemo(() => {
+    return sync()
+      .data.project.slice()
+      .sort((a, b) => (b.time.updated ?? b.time.created) - (a.time.updated ?? a.time.created))
+      .slice(0, 5)
+  })
+
+  const serverDotClass = createMemo(() => {
+    const healthy = global.servers.health[server.key]?.healthy
+    if (healthy === true) return "bg-icon-success-base"
+    if (healthy === false) return "bg-icon-critical-base"
+    return "bg-border-weak-base"
+  })
+
+  function openProject(conn: ServerConnection.Any, directory: string) {
+    const serverCtx = global.ensureServerCtx(conn)
+    serverCtx.projects.open(directory)
+    serverCtx.projects.touch(directory)
+    navigate(`/${base64Encode(directory)}`)
+  }
+
+  function chooseProject() {
+    if (serverUnreachable()) return
+    const conn = server.current
+    if (!conn) return
+
+    const resolve = (result: string | string[] | null) => {
+      if (Array.isArray(result)) {
+        result.forEach((directory) => openProject(conn, directory))
+        return
+      }
+      if (result) openProject(conn, result)
+    }
+
+    pickDirectory({
+      server: conn,
+      title: language.t("command.project.open"),
+      multiple: true,
+      onSelect: resolve,
+    })
+  }
+
+  return (
+    <div class="mx-auto mt-55 w-full md:w-auto px-4">
+      <Logo class="md:w-xl opacity-12" />
+      <Button
+        size="large"
+        variant="ghost"
+        class="mt-4 mx-auto text-14-regular text-text-weak"
+        onClick={() => dialog.show(() => <DialogSelectServer />)}
+      >
+        <div
+          classList={{
+            "size-2 rounded-full": true,
+            [serverDotClass()]: true,
+          }}
+        />
+        {server.name}
+      </Button>
+      <Switch>
+        <Match when={sync().data.project.length > 0}>
+          <div class="mt-20 w-full flex flex-col gap-4">
+            <div class="flex gap-2 items-center justify-between pl-3">
+              <div class="text-14-medium text-text-strong">{language.t("home.recentProjects")}</div>
+              <Button
+                icon="folder-add-left"
+                size="normal"
+                class="pl-2 pr-3"
+                disabled={serverUnreachable()}
+                onClick={chooseProject}
+              >
+                {language.t("command.project.open")}
+              </Button>
+            </div>
+            <ul class="flex flex-col gap-2">
+              <For each={recent()}>
+                {(project) => (
+                  <Button
+                    size="large"
+                    variant="ghost"
+                    class="text-14-mono text-left justify-between px-3"
+                    onClick={() => openProject(server.current!, project.worktree)}
+                  >
+                    {project.worktree.replace(homedir(), "~")}
+                    <div class="text-14-regular text-text-weak">
+                      {DateTime.fromMillis(project.time.updated ?? project.time.created).toRelative()}
+                    </div>
+                  </Button>
+                )}
+              </For>
+            </ul>
+          </div>
+        </Match>
+        <Match when={!sync().ready}>
+          <div class="mt-30 mx-auto flex flex-col items-center gap-3">
+            <div class="text-12-regular text-text-weak">{language.t("common.loading")}</div>
+            <Button class="px-3" disabled={serverUnreachable()} onClick={chooseProject}>
+              {language.t("command.project.open")}
+            </Button>
+          </div>
+        </Match>
+        <Match when={true}>
+          <div class="mt-30 mx-auto flex flex-col items-center gap-3">
+            <Icon name="folder-add-left" size="large" />
+            <div class="flex flex-col gap-1 items-center justify-center">
+              <div class="text-14-medium text-text-strong">{language.t("home.empty.title")}</div>
+              <div class="text-12-regular text-text-weak">{language.t("home.empty.description")}</div>
+            </div>
+            <Button class="px-3 mt-1" disabled={serverUnreachable()} onClick={chooseProject}>
+              {language.t("command.project.open")}
+            </Button>
+          </div>
+        </Match>
+      </Switch>
+    </div>
+  )
+}
@@ -0,0 +1,53 @@
+import { createEffect, Suspense, type ParentProps } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useNavigate } from "@solidjs/router"
+import { DebugBar } from "@/components/debug-bar"
+import { TabsInfoPopup } from "@/components/help-button"
+import { Titlebar, type TitlebarUpdate } from "@/components/titlebar"
+import { usePlatform } from "@/context/platform"
+import { setNavigate } from "@/utils/notification-click"
+import { setV2Toast, ToastRegion } from "@/utils/toast"
+
+export default function NewLayout(props: ParentProps) {
+  const platform = usePlatform()
+  const navigate = useNavigate()
+  setNavigate(navigate)
+  const [state, setState] = createStore({ debugTools: true })
+
+  createEffect(() => setV2Toast(true))
+
+  const update: TitlebarUpdate = {
+    version: () => {
+      const state = platform.updater?.state()
+      if (state?.status !== "ready") return
+      return state.version
+    },
+    installing: () => platform.updater?.state().status === "installing",
+    install: () => void platform.updater?.install(),
+  }
+
+  return (
+    <div
+      class="relative bg-v2-background-bg-deep flex-1 min-h-0 min-w-0 flex flex-col select-none [&_input]:select-text [&_textarea]:select-text [&_[contenteditable]]:select-text"
+      style={{
+        "padding-top": "env(safe-area-inset-top, 0px)",
+        "padding-bottom": "env(safe-area-inset-bottom, 0px)",
+      }}
+    >
+      <Titlebar
+        update={update}
+        debugTools={
+          import.meta.env.DEV
+            ? { visible: state.debugTools, toggle: () => setState("debugTools", (value) => !value) }
+            : undefined
+        }
+      />
+      <main class="flex-1 min-h-0 min-w-0 overflow-x-hidden flex flex-col items-start contain-strict">
+        <Suspense>{props.children}</Suspense>
+      </main>
+      {import.meta.env.DEV && state.debugTools && <DebugBar inline />}
+      <TabsInfoPopup />
+      <ToastRegion v2 />
+    </div>
+  )
+}
@@ -0,0 +1,126 @@
+import { createStore } from "solid-js/store"
+import { onCleanup, Show, type Accessor } from "solid-js"
+import { InlineInput } from "@opencode-ai/ui/inline-input"
+
+export function createInlineEditorController() {
+  // This controller intentionally supports one active inline editor at a time.
+  const [editor, setEditor] = createStore({
+    active: "" as string,
+    value: "",
+  })
+
+  const editorOpen = (id: string) => editor.active === id
+  const editorValue = () => editor.value
+  const openEditor = (id: string, value: string) => {
+    if (!id) return
+    setEditor({ active: id, value })
+  }
+  const closeEditor = () => setEditor({ active: "", value: "" })
+
+  const saveEditor = (callback: (next: string) => void) => {
+    const next = editor.value.trim()
+    if (!next) {
+      closeEditor()
+      return
+    }
+    closeEditor()
+    callback(next)
+  }
+
+  const editorKeyDown = (event: KeyboardEvent, callback: (next: string) => void) => {
+    if (event.key === "Enter") {
+      event.preventDefault()
+      saveEditor(callback)
+      return
+    }
+    if (event.key !== "Escape") return
+    event.preventDefault()
+    closeEditor()
+  }
+
+  const InlineEditor = (props: {
+    id: string
+    value: Accessor<string>
+    onSave: (next: string) => void
+    class?: string
+    displayClass?: string
+    editing?: boolean
+    stopPropagation?: boolean
+    openOnDblClick?: boolean
+  }) => {
+    let frame: number | undefined
+
+    onCleanup(() => {
+      if (frame === undefined) return
+      cancelAnimationFrame(frame)
+    })
+
+    const isEditing = () => props.editing ?? editorOpen(props.id)
+    const stopEvents = () => props.stopPropagation ?? false
+    const allowDblClick = () => props.openOnDblClick ?? true
+    const stopPropagation = (event: Event) => {
+      if (!stopEvents()) return
+      event.stopPropagation()
+    }
+    const handleDblClick = (event: MouseEvent) => {
+      if (!allowDblClick()) return
+      stopPropagation(event)
+      openEditor(props.id, props.value())
+    }
+
+    return (
+      <Show
+        when={isEditing()}
+        fallback={
+          <span
+            class={props.displayClass ?? props.class}
+            onDblClick={handleDblClick}
+            onPointerDown={stopPropagation}
+            onMouseDown={stopPropagation}
+            onClick={stopPropagation}
+            onTouchStart={stopPropagation}
+          >
+            {props.value()}
+          </span>
+        }
+      >
+        <InlineInput
+          ref={(el) => {
+            if (frame !== undefined) cancelAnimationFrame(frame)
+            frame = requestAnimationFrame(() => {
+              frame = undefined
+              if (!el.isConnected) return
+              el.focus()
+            })
+          }}
+          value={editorValue()}
+          class={props.class}
+          onInput={(event) => setEditor("value", event.currentTarget.value)}
+          onKeyDown={(event) => {
+            event.stopPropagation()
+            editorKeyDown(event, props.onSave)
+          }}
+          onBlur={closeEditor}
+          onPointerDown={stopPropagation}
+          onClick={stopPropagation}
+          onDblClick={stopPropagation}
+          onMouseDown={stopPropagation}
+          onMouseUp={stopPropagation}
+          onTouchStart={stopPropagation}
+        />
+      </Show>
+    )
+  }
+
+  return {
+    editor,
+    editorOpen,
+    editorValue,
+    openEditor,
+    closeEditor,
+    saveEditor,
+    editorKeyDown,
+    setEditor,
+    InlineEditor,
+  }
+}
@@ -0,0 +1,340 @@
+import type { SessionInfo } from "@opencode-ai/client/promise"
+import { Avatar } from "@opencode-ai/ui/avatar"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Spinner } from "@opencode-ai/ui/spinner"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { getFilename } from "@opencode-ai/core/util/path"
+import { A, useParams } from "@solidjs/router"
+import { type Accessor, createMemo, For, type JSX, Match, Show, Switch } from "solid-js"
+import { useServerSync } from "@/context/server-sync"
+import { useLanguage } from "@/context/language"
+import { getAvatarColors, type LocalProject, useLayout } from "@/context/layout"
+import { useNotification } from "@/context/notification"
+import { usePermission } from "@/context/permission"
+import { messageAgentColor } from "@/utils/agent"
+import { sessionLabel } from "@/utils/session-title"
+import { sessionPermissionRequest } from "../session/composer/session-request-tree"
+import { childSessionOnPath, getProjectAvatarSource, hasProjectPermissions } from "./helpers"
+
+export const ProjectIcon = (props: {
+  project: LocalProject
+  class?: string
+  notify?: boolean
+  working?: boolean
+}): JSX.Element => {
+  const serverSync = useServerSync()
+  const notification = useNotification()
+  const permission = usePermission()
+  const dirs = createMemo(() => [props.project.worktree, ...(props.project.sandboxes ?? [])])
+  const unseenCount = createMemo(() =>
+    dirs().reduce((total, directory) => total + notification.project.unseenCount(directory), 0),
+  )
+  const hasError = createMemo(() => dirs().some((directory) => notification.project.unseenHasError(directory)))
+  const hasPermissions = createMemo(() =>
+    dirs().some((directory) => {
+      return hasProjectPermissions(serverSync().session.data.permission, (item) => {
+        if (serverSync().session.get(item.sessionID)?.location.directory !== directory) return false
+        return !permission.autoResponds(item, directory)
+      })
+    }),
+  )
+  const notify = createMemo(() => props.notify && (hasPermissions() || unseenCount() > 0))
+  const name = createMemo(() => props.project.name || getFilename(props.project.worktree))
+
+  return (
+    <div class={`relative size-8 shrink-0 rounded ${props.class ?? ""}`}>
+      <div class="size-full rounded overflow-clip">
+        <Avatar
+          fallback={name()}
+          src={getProjectAvatarSource(props.project.id, props.project.icon)}
+          {...getAvatarColors(props.project.icon?.color)}
+          class="size-full rounded"
+          classList={{ "badge-mask": notify() }}
+        />
+      </div>
+      <Show when={notify()}>
+        <div
+          classList={{
+            "absolute top-px right-px size-1.5 rounded-full z-10": true,
+            "bg-surface-warning-strong": hasPermissions(),
+            "bg-icon-critical-base": !hasPermissions() && hasError(),
+            "bg-text-interactive-base": !hasPermissions() && !hasError(),
+          }}
+        />
+      </Show>
+      <Show when={props.working}>
+        <div class="absolute bottom-px right-px size-3 rounded-full bg-background-base z-10 flex items-center justify-center">
+          <Spinner class="size-[9px]" />
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export type SessionItemProps = {
+  session: SessionInfo
+  list: SessionInfo[]
+  navList?: Accessor<SessionInfo[]>
+  slug: string
+  mobile?: boolean
+  dense?: boolean
+  showTooltip?: boolean
+  showChild?: boolean
+  level?: number
+  sidebarExpanded: Accessor<boolean>
+  clearHoverProjectSoon: () => void
+  prefetchSession: (session: SessionInfo, priority?: "high" | "low") => void
+  archiveSession: (session: SessionInfo) => Promise<void>
+}
+
+const SessionRow = (props: {
+  session: SessionInfo
+  slug: string
+  mobile?: boolean
+  dense?: boolean
+  tint: Accessor<string | undefined>
+  isWorking: Accessor<boolean>
+  hasPermissions: Accessor<boolean>
+  hasError: Accessor<boolean>
+  unseenCount: Accessor<number>
+  clearHoverProjectSoon: () => void
+  sidebarOpened: Accessor<boolean>
+  warmPress: () => void
+  warmFocus: () => void
+}): JSX.Element => {
+  const title = () => sessionLabel(props.session)
+
+  return (
+    <A
+      href={`/${props.slug}/session/${props.session.id}`}
+      class={`flex items-center gap-2 min-w-0 w-full text-left focus:outline-none ${props.dense ? "py-0.5" : "py-1"}`}
+      onPointerDown={props.warmPress}
+      onFocus={props.warmFocus}
+      onClick={() => {
+        if (props.sidebarOpened()) return
+        props.clearHoverProjectSoon()
+      }}
+    >
+      <Show when={props.isWorking() || props.hasPermissions() || props.hasError() || props.unseenCount() > 0}>
+        <div
+          class="shrink-0 size-6 flex items-center justify-center"
+          style={{ color: props.tint() ?? "var(--icon-interactive-base)" }}
+        >
+          <Switch>
+            <Match when={props.isWorking()}>
+              <Spinner class="size-[15px]" />
+            </Match>
+            <Match when={props.hasPermissions()}>
+              <div class="size-1.5 rounded-full bg-surface-warning-strong" />
+            </Match>
+            <Match when={props.hasError()}>
+              <div class="size-1.5 rounded-full bg-text-diff-delete-base" />
+            </Match>
+            <Match when={props.unseenCount() > 0}>
+              <div class="size-1.5 rounded-full bg-text-interactive-base" />
+            </Match>
+          </Switch>
+        </div>
+      </Show>
+      <span class="text-14-regular text-text-strong min-w-0 flex-1 truncate">{title()}</span>
+    </A>
+  )
+}
+
+export const SessionItem = (props: SessionItemProps): JSX.Element => {
+  const params = useParams()
+  const layout = useLayout()
+  const language = useLanguage()
+  const notification = useNotification()
+  const permission = usePermission()
+  const serverSync = useServerSync()
+  const unseenCount = createMemo(() => notification.session.unseenCount(props.session.id))
+  const hasError = createMemo(() => notification.session.unseenHasError(props.session.id))
+  const [sessionStore] = serverSync().child(props.session.location.directory)
+  const hasPermissions = createMemo(() => {
+    return !!sessionPermissionRequest(
+      sessionStore.session,
+      serverSync().session.data.permission,
+      props.session.id,
+      (item) => {
+        return !permission.autoResponds(item, props.session.location.directory)
+      },
+    )
+  })
+  const isWorking = createMemo(() => {
+    if (hasPermissions()) return false
+    return serverSync().session.data.session_working(props.session.id)
+  })
+
+  const tint = createMemo(() =>
+    messageAgentColor(serverSync().session.data.message[props.session.id], sessionStore.agent),
+  )
+  const tooltip = createMemo(() => props.showTooltip ?? (props.mobile || !props.sidebarExpanded()))
+  const currentChild = createMemo(() => {
+    if (!props.showChild) return
+    return childSessionOnPath(sessionStore.session, props.session.id, params.id)
+  })
+
+  const warm = (span: number, priority: "high" | "low") => {
+    const nav = props.navList?.()
+    const list = nav?.some(
+      (item) => item.id === props.session.id && item.location.directory === props.session.location.directory,
+    )
+      ? nav
+      : props.list
+
+    props.prefetchSession(props.session, priority)
+
+    const idx = list.findIndex(
+      (item) => item.id === props.session.id && item.location.directory === props.session.location.directory,
+    )
+    if (idx === -1) return
+
+    for (let step = 1; step <= span; step++) {
+      const next = list[idx + step]
+      if (next) props.prefetchSession(next, step === 1 ? "high" : priority)
+
+      const prev = list[idx - step]
+      if (prev) props.prefetchSession(prev, step === 1 ? "high" : priority)
+    }
+  }
+
+  const item = (
+    <SessionRow
+      session={props.session}
+      slug={props.slug}
+      mobile={props.mobile}
+      dense={props.dense}
+      tint={tint}
+      isWorking={isWorking}
+      hasPermissions={hasPermissions}
+      hasError={hasError}
+      unseenCount={unseenCount}
+      clearHoverProjectSoon={props.clearHoverProjectSoon}
+      sidebarOpened={layout.sidebar.opened}
+      warmPress={() => warm(2, "high")}
+      warmFocus={() => warm(2, "high")}
+    />
+  )
+
+  return (
+    <>
+      <div
+        data-session-id={props.session.id}
+        class="group/session relative w-full min-w-0 rounded-md cursor-default pr-3 transition-colors hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active"
+        style={{ "padding-left": `${8 + (props.level ?? 0) * 16}px` }}
+      >
+        <div class="flex min-w-0 items-center gap-1">
+          <div class="min-w-0 flex-1">
+            <Show
+              when={!tooltip()}
+              fallback={
+                <Tooltip
+                  placement={props.mobile ? "bottom" : "right"}
+                  value={sessionLabel(props.session)}
+                  gutter={10}
+                  class="min-w-0 w-full"
+                >
+                  {item}
+                </Tooltip>
+              }
+            >
+              {item}
+            </Show>
+          </div>
+
+          {/* TODO: Restore the archive action when the V2 client exposes session archive. */}
+          <Show when={false}>
+            <div
+              class="shrink-0 overflow-hidden transition-[width,opacity]"
+              classList={{
+                "w-6 opacity-100 pointer-events-auto": !!props.mobile,
+                "w-0 opacity-0 pointer-events-none": !props.mobile,
+                "group-hover/session:w-6 group-hover/session:opacity-100 group-hover/session:pointer-events-auto": true,
+                "group-focus-within/session:w-6 group-focus-within/session:opacity-100 group-focus-within/session:pointer-events-auto": true,
+              }}
+            >
+              <Tooltip value={language.t("common.archive")} placement="top">
+                <IconButton
+                  icon="archive"
+                  variant="ghost"
+                  class="size-6 rounded-md"
+                  aria-label={language.t("common.archive")}
+                  onClick={(event) => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    void props.archiveSession(props.session)
+                  }}
+                />
+              </Tooltip>
+            </div>
+          </Show>
+        </div>
+      </div>
+      <Show when={currentChild()} keyed>
+        {(child) => (
+          <div class="w-full">
+            <SessionItem {...props} session={child} level={(props.level ?? 0) + 1} />
+          </div>
+        )}
+      </Show>
+    </>
+  )
+}
+
+export const NewSessionItem = (props: {
+  slug: string
+  mobile?: boolean
+  dense?: boolean
+  sidebarExpanded: Accessor<boolean>
+  clearHoverProjectSoon: () => void
+}): JSX.Element => {
+  const layout = useLayout()
+  const language = useLanguage()
+  const label = language.t("command.session.new")
+  const tooltip = () => props.mobile || !props.sidebarExpanded()
+  const item = (
+    <A
+      href={`/${props.slug}/session`}
+      end
+      class={`flex items-center gap-2 min-w-0 w-full text-left focus:outline-none ${props.dense ? "py-0.5" : "py-1"}`}
+      onClick={() => {
+        if (layout.sidebar.opened()) return
+        props.clearHoverProjectSoon()
+      }}
+    >
+      <div class="shrink-0 size-6 flex items-center justify-center">
+        <IconV2 name="edit" size="small" class="text-icon-weak" />
+      </div>
+      <span class="text-14-regular text-text-strong min-w-0 flex-1 truncate">{label}</span>
+    </A>
+  )
+
+  return (
+    <div class="group/session relative w-full min-w-0 rounded-md cursor-default transition-colors pl-2 pr-3 hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active">
+      <Show
+        when={!tooltip()}
+        fallback={
+          <Tooltip placement={props.mobile ? "bottom" : "right"} value={label} gutter={10} class="min-w-0 w-full">
+            {item}
+          </Tooltip>
+        }
+      >
+        {item}
+      </Show>
+    </div>
+  )
+}
+
+export const SessionSkeleton = (props: { count?: number }): JSX.Element => {
+  const items = Array.from({ length: props.count ?? 4 }, (_, index) => index)
+  return (
+    <div class="flex flex-col gap-1">
+      <For each={items}>
+        {() => <div class="h-8 w-full rounded-md bg-surface-raised-base opacity-60 animate-pulse" />}
+      </For>
+    </div>
+  )
+}
@@ -0,0 +1,377 @@
+import { createMemo, For, Show, type Accessor, type JSX } from "solid-js"
+import { createStore } from "solid-js/store"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { Button } from "@opencode-ai/ui/button"
+import { ContextMenu } from "@opencode-ai/ui/context-menu"
+import { HoverCard } from "@opencode-ai/ui/hover-card"
+import { Icon } from "@opencode-ai/ui/icon"
+import { createSortable } from "@thisbeyond/solid-dnd"
+import { useLayout, type LocalProject } from "@/context/layout"
+import { useServerSync } from "@/context/server-sync"
+import { useLanguage } from "@/context/language"
+import { useNotification } from "@/context/notification"
+import { ProjectIcon, SessionItem, type SessionItemProps } from "./sidebar-items"
+import { displayName, sortedRootSessions } from "./helpers"
+
+export type ProjectSidebarContext = {
+  currentDir: Accessor<string>
+  currentProject: Accessor<LocalProject | undefined>
+  sidebarOpened: Accessor<boolean>
+  sidebarHovering: Accessor<boolean>
+  hoverProject: Accessor<string | undefined>
+  onProjectMouseEnter: (worktree: string, event: MouseEvent) => void
+  onProjectMouseLeave: (worktree: string) => void
+  onProjectFocus: (worktree: string) => void
+  onHoverOpenChanged: (worktree: string, hovered: boolean) => void
+  navigateToProject: (directory: string) => void
+  openSidebar: () => void
+  closeProject: (directory: string) => void
+  showEditProjectDialog: (project: LocalProject) => void
+  toggleProjectWorkspaces: (project: LocalProject) => void
+  workspacesEnabled: (project: LocalProject) => boolean
+  workspaceIds: (project: LocalProject) => string[]
+  workspaceLabel: (directory: string, branch?: string, projectId?: string) => string
+  sessionProps: Omit<SessionItemProps, "session" | "list" | "slug" | "mobile" | "dense">
+}
+
+export const ProjectDragOverlay = (props: {
+  projects: Accessor<LocalProject[]>
+  activeProject: Accessor<string | undefined>
+}): JSX.Element => {
+  const project = createMemo(() => props.projects().find((p) => p.worktree === props.activeProject()))
+  return (
+    <Show when={project()}>
+      {(p) => (
+        <div class="bg-background-base rounded-xl p-1">
+          <ProjectIcon project={p()} />
+        </div>
+      )}
+    </Show>
+  )
+}
+
+const ProjectTile = (props: {
+  project: LocalProject
+  mobile?: boolean
+  sidebarHovering: Accessor<boolean>
+  selected: Accessor<boolean>
+  active: Accessor<boolean>
+  isWorking: Accessor<boolean>
+  overlay: Accessor<boolean>
+  suppressHover: Accessor<boolean>
+  dirs: Accessor<string[]>
+  onProjectMouseEnter: (worktree: string, event: MouseEvent) => void
+  onProjectMouseLeave: (worktree: string) => void
+  onProjectFocus: (worktree: string) => void
+  navigateToProject: (directory: string) => void
+  showEditProjectDialog: (project: LocalProject) => void
+  toggleProjectWorkspaces: (project: LocalProject) => void
+  workspacesEnabled: (project: LocalProject) => boolean
+  closeProject: (directory: string) => void
+  setMenu: (value: boolean) => void
+  setOpen: (value: boolean) => void
+  setSuppressHover: (value: boolean) => void
+  language: ReturnType<typeof useLanguage>
+}): JSX.Element => {
+  const notification = useNotification()
+  const layout = useLayout()
+  const unseenCount = createMemo(() =>
+    props.dirs().reduce((total, directory) => total + notification.project.unseenCount(directory), 0),
+  )
+
+  const clear = () =>
+    props
+      .dirs()
+      .filter((directory) => notification.project.unseenCount(directory) > 0)
+      .forEach((directory) => notification.project.markViewed(directory))
+
+  return (
+    <ContextMenu
+      modal={!props.sidebarHovering()}
+      onOpenChange={(value) => {
+        props.setMenu(value)
+        props.setSuppressHover(value)
+        if (value) props.setOpen(false)
+      }}
+    >
+      <ContextMenu.Trigger
+        as="button"
+        type="button"
+        aria-label={displayName(props.project)}
+        data-action="project-switch"
+        data-project={base64Encode(props.project.worktree)}
+        classList={{
+          "flex items-center justify-center size-10 p-1 rounded-lg overflow-hidden transition-colors cursor-default": true,
+          "bg-transparent border-2 border-icon-strong-base hover:bg-surface-base-hover": props.selected(),
+          "bg-transparent border border-transparent hover:bg-surface-base-hover hover:border-border-weak-base":
+            !props.selected() && !props.active(),
+          "bg-surface-base-hover border border-border-weak-base": !props.selected() && props.active(),
+        }}
+        onPointerDown={(event) => {
+          if (event.button === 0 && !event.ctrlKey) {
+            props.setOpen(false)
+            props.setSuppressHover(true)
+            return
+          }
+          if (!props.overlay()) return
+          if (event.button !== 2 && !(event.button === 0 && event.ctrlKey)) return
+          props.setOpen(false)
+          props.setSuppressHover(true)
+          event.preventDefault()
+        }}
+        onMouseEnter={(event: MouseEvent) => {
+          if (!props.overlay()) return
+          if (props.suppressHover()) return
+          props.onProjectMouseEnter(props.project.worktree, event)
+        }}
+        onMouseLeave={() => {
+          if (props.suppressHover()) props.setSuppressHover(false)
+          if (!props.overlay()) return
+          props.onProjectMouseLeave(props.project.worktree)
+        }}
+        onFocus={() => {
+          if (!props.overlay()) return
+          if (props.suppressHover()) return
+          props.onProjectFocus(props.project.worktree)
+        }}
+        onClick={() => {
+          props.setOpen(false)
+          if (props.selected()) {
+            layout.sidebar.toggle()
+            return
+          }
+          props.navigateToProject(props.project.worktree)
+        }}
+        onBlur={() => props.setOpen(false)}
+      >
+        <ProjectIcon project={props.project} notify working={props.isWorking()} />
+      </ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Content>
+          <ContextMenu.Item onSelect={() => props.showEditProjectDialog(props.project)}>
+            <ContextMenu.ItemLabel>{props.language.t("common.edit")}</ContextMenu.ItemLabel>
+          </ContextMenu.Item>
+          <ContextMenu.Item
+            data-action="project-workspaces-toggle"
+            data-project={base64Encode(props.project.worktree)}
+            disabled={props.project.vcs !== "git" && !props.workspacesEnabled(props.project)}
+            onSelect={() => props.toggleProjectWorkspaces(props.project)}
+          >
+            <ContextMenu.ItemLabel>
+              {props.workspacesEnabled(props.project)
+                ? props.language.t("sidebar.workspaces.disable")
+                : props.language.t("sidebar.workspaces.enable")}
+            </ContextMenu.ItemLabel>
+          </ContextMenu.Item>
+          <ContextMenu.Item
+            data-action="project-clear-notifications"
+            data-project={base64Encode(props.project.worktree)}
+            disabled={unseenCount() === 0}
+            onSelect={clear}
+          >
+            <ContextMenu.ItemLabel>{props.language.t("sidebar.project.clearNotifications")}</ContextMenu.ItemLabel>
+          </ContextMenu.Item>
+          <ContextMenu.Separator />
+          <ContextMenu.Item
+            data-action="project-close-menu"
+            data-project={base64Encode(props.project.worktree)}
+            onSelect={() => props.closeProject(props.project.worktree)}
+          >
+            <ContextMenu.ItemLabel>{props.language.t("common.close")}</ContextMenu.ItemLabel>
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu>
+  )
+}
+
+const ProjectPreviewPanel = (props: {
+  project: LocalProject
+  mobile?: boolean
+  selected: Accessor<boolean>
+  workspaceEnabled: Accessor<boolean>
+  workspaces: Accessor<string[]>
+  label: (directory: string) => string
+  projectSessions: Accessor<ReturnType<typeof sortedRootSessions>>
+  workspaceSessions: (directory: string) => ReturnType<typeof sortedRootSessions>
+  ctx: ProjectSidebarContext
+  language: ReturnType<typeof useLanguage>
+}): JSX.Element => (
+  <div class="-m-3 p-2 flex flex-col w-72">
+    <div class="px-4 pt-2 pb-1 flex items-center gap-2">
+      <div class="text-14-medium text-text-strong truncate grow">{displayName(props.project)}</div>
+    </div>
+    <div class="px-4 pb-2 text-12-medium text-text-weak">{props.language.t("sidebar.project.recentSessions")}</div>
+    <div class="px-2 pb-2 flex flex-col gap-2">
+      <Show
+        when={props.workspaceEnabled()}
+        fallback={
+          <For each={props.projectSessions().slice(0, 2)}>
+            {(session) => (
+              <SessionItem
+                {...props.ctx.sessionProps}
+                session={session}
+                list={props.projectSessions()}
+                slug={base64Encode(props.project.worktree)}
+                dense
+                showTooltip
+                mobile={props.mobile}
+              />
+            )}
+          </For>
+        }
+      >
+        <For each={props.workspaces()}>
+          {(directory) => {
+            const sessions = createMemo(() => props.workspaceSessions(directory))
+            return (
+              <div class="flex flex-col gap-1">
+                <div class="px-2 py-0.5 flex items-center gap-1 min-w-0">
+                  <div class="shrink-0 size-6 flex items-center justify-center">
+                    <Icon name="branch" size="small" class="text-icon-base" />
+                  </div>
+                  <span class="truncate text-14-medium text-text-base">{props.label(directory)}</span>
+                </div>
+                <For each={sessions().slice(0, 2)}>
+                  {(session) => (
+                    <SessionItem
+                      {...props.ctx.sessionProps}
+                      session={session}
+                      list={sessions()}
+                      slug={base64Encode(directory)}
+                      dense
+                      showTooltip
+                      mobile={props.mobile}
+                    />
+                  )}
+                </For>
+              </div>
+            )
+          }}
+        </For>
+      </Show>
+    </div>
+    <div class="px-2 py-2 border-t border-border-weak-base">
+      <Button
+        variant="ghost"
+        class="flex w-full text-left justify-start text-text-base px-2 hover:bg-transparent active:bg-transparent"
+        onClick={() => {
+          props.ctx.openSidebar()
+          props.ctx.onHoverOpenChanged(props.project.worktree, false)
+          if (props.selected()) return
+          props.ctx.navigateToProject(props.project.worktree)
+        }}
+      >
+        {props.language.t("sidebar.project.viewAllSessions")}
+      </Button>
+    </div>
+  </div>
+)
+
+export const SortableProject = (props: {
+  project: LocalProject
+  mobile?: boolean
+  ctx: ProjectSidebarContext
+  sortNow: Accessor<number>
+}): JSX.Element => {
+  const serverSync = useServerSync()
+  const language = useLanguage()
+  const sortable = createSortable(props.project.worktree)
+  const selected = createMemo(() => props.ctx.currentProject()?.worktree === props.project.worktree)
+  const workspaces = createMemo(() => props.ctx.workspaceIds(props.project).slice(0, 2))
+  const workspaceEnabled = createMemo(() => props.ctx.workspacesEnabled(props.project))
+  const dirs = createMemo(() => props.ctx.workspaceIds(props.project))
+  const [state, setState] = createStore({
+    menu: false,
+    suppressHover: false,
+  })
+
+  const isHoverProject = () => props.ctx.hoverProject() === props.project.worktree
+  const preview = createMemo(() => !props.mobile && props.ctx.sidebarOpened())
+  const overlay = createMemo(() => !props.mobile && !props.ctx.sidebarOpened())
+  const active = createMemo(() => state.menu || (preview() ? isHoverProject() : overlay() && isHoverProject()))
+
+  const hoverOpen = () => isHoverProject() && preview() && !selected() && !state.menu
+
+  const label = (directory: string) => {
+    const [data] = serverSync().child(directory, { bootstrap: false })
+    const kind =
+      directory === props.project.worktree ? language.t("workspace.type.local") : language.t("workspace.type.sandbox")
+    const name = props.ctx.workspaceLabel(directory, data.vcs?.branch, props.project.id)
+    return `${kind} : ${name}`
+  }
+
+  const projectStore = createMemo(() => serverSync().child(props.project.worktree, { bootstrap: false })[0])
+  const isWorking = createMemo(() =>
+    dirs().some((directory) => {
+      return Object.keys(serverSync().session.data.session_status).some((id) => {
+        if (serverSync().session.get(id)?.location.directory !== directory) return false
+        return serverSync().session.data.session_working(id)
+      })
+    }),
+  )
+  const projectSessions = createMemo(() => sortedRootSessions(projectStore(), props.sortNow()))
+  const workspaceSessions = (directory: string) => {
+    const [data] = serverSync().child(directory, { bootstrap: false })
+    return sortedRootSessions(data, props.sortNow())
+  }
+  const tile = () => (
+    <ProjectTile
+      project={props.project}
+      mobile={props.mobile}
+      sidebarHovering={props.ctx.sidebarHovering}
+      selected={selected}
+      active={active}
+      isWorking={isWorking}
+      overlay={overlay}
+      suppressHover={() => state.suppressHover}
+      dirs={dirs}
+      onProjectMouseEnter={props.ctx.onProjectMouseEnter}
+      onProjectMouseLeave={props.ctx.onProjectMouseLeave}
+      onProjectFocus={props.ctx.onProjectFocus}
+      navigateToProject={props.ctx.navigateToProject}
+      showEditProjectDialog={props.ctx.showEditProjectDialog}
+      toggleProjectWorkspaces={props.ctx.toggleProjectWorkspaces}
+      workspacesEnabled={props.ctx.workspacesEnabled}
+      closeProject={props.ctx.closeProject}
+      setMenu={(value) => setState("menu", value)}
+      setOpen={(value) => props.ctx.onHoverOpenChanged(props.project.worktree, value)}
+      setSuppressHover={(value) => setState("suppressHover", value)}
+      language={language}
+    />
+  )
+
+  return (
+    // @ts-ignore
+    <div use:sortable classList={{ "opacity-30": sortable.isActiveDraggable }}>
+      <Show when={preview() && !selected()} fallback={tile()}>
+        <HoverCard
+          open={!state.suppressHover && hoverOpen() && !state.menu}
+          openDelay={0}
+          closeDelay={0}
+          placement="right-start"
+          gutter={6}
+          trigger={tile()}
+          onOpenChange={(value) => {
+            if (state.menu) return
+            if (value && state.suppressHover) return
+            props.ctx.onHoverOpenChanged(props.project.worktree, value)
+          }}
+        >
+          <ProjectPreviewPanel
+            project={props.project}
+            mobile={props.mobile}
+            selected={selected}
+            workspaceEnabled={workspaceEnabled}
+            workspaces={workspaces}
+            label={label}
+            projectSessions={projectSessions}
+            workspaceSessions={workspaceSessions}
+            ctx={props.ctx}
+            language={language}
+          />
+        </HoverCard>
+      </Show>
+    </div>
+  )
+}
@@ -0,0 +1,125 @@
+import { createEffect, createMemo, For, Show, type Accessor, type JSX } from "solid-js"
+import {
+  DragDropProvider,
+  DragDropSensors,
+  DragOverlay,
+  SortableProvider,
+  closestCenter,
+  type DragEvent,
+} from "@thisbeyond/solid-dnd"
+import { ConstrainDragXAxis } from "@/utils/solid-dnd"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
+import { type LocalProject } from "@/context/layout"
+
+export const SidebarContent = (props: {
+  mobile?: boolean
+  opened: Accessor<boolean>
+  aimMove: (event: MouseEvent) => void
+  projects: Accessor<LocalProject[]>
+  renderProject: (project: LocalProject) => JSX.Element
+  handleDragStart: (event: unknown) => void
+  handleDragEnd: () => void
+  handleDragOver: (event: DragEvent) => void
+  openProjectLabel: JSX.Element
+  openProjectKeybind: Accessor<string | undefined>
+  onOpenProject: () => void
+  renderProjectOverlay: () => JSX.Element
+  settingsLabel: Accessor<string>
+  settingsKeybind: Accessor<string | undefined>
+  onOpenSettings: () => void
+  helpLabel: Accessor<string>
+  onOpenHelp: () => void
+  renderPanel: () => JSX.Element
+}): JSX.Element => {
+  const expanded = createMemo(() => !!props.mobile || props.opened())
+  const placement = () => (props.mobile ? "bottom" : "right")
+  let panel: HTMLDivElement | undefined
+
+  createEffect(() => {
+    const el = panel
+    if (!el) return
+    if (expanded()) {
+      el.removeAttribute("inert")
+      return
+    }
+    el.setAttribute("inert", "")
+  })
+
+  return (
+    <div class="flex h-full w-full min-w-0 overflow-hidden">
+      <div
+        data-component="sidebar-rail"
+        class="w-16 shrink-0 bg-background-base flex flex-col items-center overflow-hidden"
+        onMouseMove={props.aimMove}
+      >
+        <div class="flex-1 min-h-0 w-full">
+          <DragDropProvider
+            onDragStart={props.handleDragStart}
+            onDragEnd={props.handleDragEnd}
+            onDragOver={props.handleDragOver}
+            collisionDetector={closestCenter}
+          >
+            <DragDropSensors />
+            <ConstrainDragXAxis />
+            <div class="h-full w-full flex flex-col items-center gap-3 px-3 py-3 overflow-y-auto no-scrollbar">
+              <SortableProvider ids={props.projects().map((p) => p.worktree)}>
+                <For each={props.projects()}>{(project) => props.renderProject(project)}</For>
+              </SortableProvider>
+              <Tooltip
+                placement={placement()}
+                value={
+                  <div class="flex items-center gap-2">
+                    <span>{props.openProjectLabel}</span>
+                    <Show when={!props.mobile && !!props.openProjectKeybind()}>
+                      <span class="text-icon-base text-12-medium">{props.openProjectKeybind()}</span>
+                    </Show>
+                  </div>
+                }
+              >
+                <IconButton
+                  icon="plus"
+                  variant="ghost"
+                  size="large"
+                  onClick={props.onOpenProject}
+                  aria-label={typeof props.openProjectLabel === "string" ? props.openProjectLabel : undefined}
+                />
+              </Tooltip>
+            </div>
+            <DragOverlay>{props.renderProjectOverlay()}</DragOverlay>
+          </DragDropProvider>
+        </div>
+        <div class="shrink-0 w-full pt-3 pb-6 flex flex-col items-center gap-2">
+          <TooltipKeybind placement={placement()} title={props.settingsLabel()} keybind={props.settingsKeybind() ?? ""}>
+            <IconButton
+              icon="settings-gear"
+              variant="ghost"
+              size="large"
+              onClick={props.onOpenSettings}
+              aria-label={props.settingsLabel()}
+            />
+          </TooltipKeybind>
+          <Tooltip placement={placement()} value={props.helpLabel()}>
+            <IconButton
+              icon="help"
+              variant="ghost"
+              size="large"
+              onClick={props.onOpenHelp}
+              aria-label={props.helpLabel()}
+            />
+          </Tooltip>
+        </div>
+      </div>
+
+      <div
+        ref={(el) => {
+          panel = el
+        }}
+        classList={{ "flex-1 flex h-full min-h-0 min-w-0 overflow-hidden": true, "pointer-events-none": !expanded() }}
+        aria-hidden={!expanded()}
+      >
+        {props.renderPanel()}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,489 @@
+import { useNavigate, useParams } from "@solidjs/router"
+import { createEffect, createMemo, For, Show, type Accessor, type JSX } from "solid-js"
+import { createStore } from "solid-js/store"
+import { createSortable } from "@thisbeyond/solid-dnd"
+import { createMediaQuery } from "@solid-primitives/media"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { getFilename } from "@opencode-ai/core/util/path"
+import { Button } from "@opencode-ai/ui/button"
+import { Collapsible } from "@opencode-ai/ui/collapsible"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { Spinner } from "@opencode-ai/ui/spinner"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import type { SessionInfo } from "@opencode-ai/client/promise"
+import { type LocalProject } from "@/context/layout"
+import { useServerSync, useQueryOptions } from "@/context/server-sync"
+import { useLanguage } from "@/context/language"
+import { pathKey } from "@/utils/path-key"
+import { NewSessionItem, SessionItem, SessionSkeleton } from "./sidebar-items"
+import { sortedRootSessions } from "./helpers"
+import { useIsFetching } from "@tanstack/solid-query"
+
+type InlineEditorComponent = (props: {
+  id: string
+  value: Accessor<string>
+  onSave: (next: string) => void
+  class?: string
+  displayClass?: string
+  editing?: boolean
+  stopPropagation?: boolean
+  openOnDblClick?: boolean
+}) => JSX.Element
+
+export type WorkspaceSidebarContext = {
+  currentDir: Accessor<string>
+  navList: Accessor<SessionInfo[]>
+  sidebarExpanded: Accessor<boolean>
+  sidebarHovering: Accessor<boolean>
+  clearHoverProjectSoon: () => void
+  prefetchSession: (session: SessionInfo, priority?: "high" | "low") => void
+  archiveSession: (session: SessionInfo) => Promise<void>
+  workspaceName: (directory: string, projectId?: string, branch?: string) => string | undefined
+  renameWorkspace: (directory: string, next: string, projectId?: string, branch?: string) => void
+  editorOpen: (id: string) => boolean
+  openEditor: (id: string, value: string) => void
+  closeEditor: () => void
+  setEditor: (key: "value", value: string) => void
+  InlineEditor: InlineEditorComponent
+  isBusy: (directory: string) => boolean
+  workspaceExpanded: (directory: string, local: boolean) => boolean
+  setWorkspaceExpanded: (directory: string, value: boolean) => void
+  showResetWorkspaceDialog: (root: string, directory: string) => void
+  showDeleteWorkspaceDialog: (root: string, directory: string) => void
+  setScrollContainerRef: (el: HTMLDivElement | undefined, mobile?: boolean) => void
+}
+
+export const WorkspaceDragOverlay = (props: {
+  sidebarProject: Accessor<LocalProject | undefined>
+  activeWorkspace: Accessor<string | undefined>
+  workspaceLabel: (directory: string, branch?: string, projectId?: string) => string
+}): JSX.Element => {
+  const serverSync = useServerSync()
+  const language = useLanguage()
+  const label = createMemo(() => {
+    const project = props.sidebarProject()
+    if (!project) return
+    const directory = props.activeWorkspace()
+    if (!directory) return
+
+    const [workspaceStore] = serverSync().child(directory, { bootstrap: false })
+    const kind =
+      directory === project.worktree ? language.t("workspace.type.local") : language.t("workspace.type.sandbox")
+    const name = props.workspaceLabel(directory, workspaceStore.vcs?.branch, project.id)
+    return `${kind} : ${name}`
+  })
+
+  return (
+    <Show when={label()}>
+      {(value) => <div class="bg-background-base rounded-md px-2 py-1 text-14-medium text-text-strong">{value()}</div>}
+    </Show>
+  )
+}
+
+const WorkspaceHeader = (props: {
+  local: Accessor<boolean>
+  busy: Accessor<boolean>
+  open: Accessor<boolean>
+  directory: string
+  language: ReturnType<typeof useLanguage>
+  branch: Accessor<string | undefined>
+  workspaceValue: Accessor<string>
+  workspaceEditActive: Accessor<boolean>
+  InlineEditor: WorkspaceSidebarContext["InlineEditor"]
+  renameWorkspace: WorkspaceSidebarContext["renameWorkspace"]
+  setEditor: WorkspaceSidebarContext["setEditor"]
+  projectId?: string
+}): JSX.Element => (
+  <div class="flex items-center gap-1 min-w-0 flex-1">
+    <div class="flex items-center justify-center shrink-0 size-6">
+      <Show when={props.busy()} fallback={<Icon name="branch" size="small" />}>
+        <Spinner class="size-[15px]" />
+      </Show>
+    </div>
+    <span class="text-14-medium text-text-base shrink-0">
+      {props.local() ? props.language.t("workspace.type.local") : props.language.t("workspace.type.sandbox")} :
+    </span>
+    <Show
+      when={!props.local()}
+      fallback={
+        <span class="text-14-medium text-text-base min-w-0 truncate">
+          {props.branch() ?? getFilename(props.directory)}
+        </span>
+      }
+    >
+      <props.InlineEditor
+        id={`workspace:${props.directory}`}
+        value={props.workspaceValue}
+        onSave={(next) => {
+          const trimmed = next.trim()
+          if (!trimmed) return
+          props.renameWorkspace(props.directory, trimmed, props.projectId, props.branch())
+          props.setEditor("value", props.workspaceValue())
+        }}
+        class="text-14-medium text-text-base min-w-0 truncate"
+        displayClass="text-14-medium text-text-base min-w-0 truncate"
+        editing={props.workspaceEditActive()}
+        stopPropagation={false}
+        openOnDblClick={false}
+      />
+    </Show>
+    <div class="flex items-center justify-center shrink-0 overflow-hidden w-0 opacity-0 transition-all duration-200 group-hover/workspace:w-3.5 group-hover/workspace:opacity-100 group-focus-within/workspace:w-3.5 group-focus-within/workspace:opacity-100">
+      <Icon name={props.open() ? "chevron-down" : "chevron-right"} size="small" class="text-icon-base" />
+    </div>
+  </div>
+)
+
+const WorkspaceActions = (props: {
+  directory: string
+  local: Accessor<boolean>
+  busy: Accessor<boolean>
+  menuOpen: Accessor<boolean>
+  pendingRename: Accessor<boolean>
+  setMenuOpen: (open: boolean) => void
+  setPendingRename: (value: boolean) => void
+  sidebarHovering: Accessor<boolean>
+  touch: Accessor<boolean>
+  language: ReturnType<typeof useLanguage>
+  workspaceValue: Accessor<string>
+  openEditor: WorkspaceSidebarContext["openEditor"]
+  showResetWorkspaceDialog: WorkspaceSidebarContext["showResetWorkspaceDialog"]
+  showDeleteWorkspaceDialog: WorkspaceSidebarContext["showDeleteWorkspaceDialog"]
+  root: string
+  clearHoverProjectSoon: WorkspaceSidebarContext["clearHoverProjectSoon"]
+  navigateToNewSession: () => void
+}): JSX.Element => (
+  <div
+    class="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-0.5 transition-opacity"
+    classList={{
+      "opacity-100 pointer-events-auto": props.menuOpen(),
+      "opacity-0 pointer-events-none": !props.menuOpen(),
+      "group-hover/workspace:opacity-100 group-hover/workspace:pointer-events-auto": true,
+      "group-focus-within/workspace:opacity-100 group-focus-within/workspace:pointer-events-auto": true,
+    }}
+  >
+    <DropdownMenu
+      modal={!props.sidebarHovering()}
+      open={props.menuOpen()}
+      onOpenChange={(open) => props.setMenuOpen(open)}
+    >
+      <Tooltip value={props.language.t("common.moreOptions")} placement="top">
+        <DropdownMenu.Trigger
+          as={IconButton}
+          icon="dot-grid"
+          variant="ghost"
+          class="size-6 rounded-md"
+          data-action="workspace-menu"
+          data-workspace={base64Encode(props.directory)}
+          aria-label={props.language.t("common.moreOptions")}
+        />
+      </Tooltip>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          onCloseAutoFocus={(event) => {
+            if (!props.pendingRename()) return
+            event.preventDefault()
+            props.setPendingRename(false)
+            props.openEditor(`workspace:${props.directory}`, props.workspaceValue())
+          }}
+        >
+          <DropdownMenu.Item
+            disabled={props.local()}
+            onSelect={() => {
+              props.setPendingRename(true)
+              props.setMenuOpen(false)
+            }}
+          >
+            <DropdownMenu.ItemLabel>{props.language.t("common.rename")}</DropdownMenu.ItemLabel>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            // TODO: Restore reset when V2 exposes project-copy reset and instance disposal.
+            // onSelect={() => props.showResetWorkspaceDialog(props.root, props.directory)}
+            disabled
+          >
+            <DropdownMenu.ItemLabel>{props.language.t("common.reset")}</DropdownMenu.ItemLabel>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            disabled={props.local() || props.busy()}
+            onSelect={() => props.showDeleteWorkspaceDialog(props.root, props.directory)}
+          >
+            <DropdownMenu.ItemLabel>{props.language.t("common.delete")}</DropdownMenu.ItemLabel>
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu>
+    <Show when={!props.touch()}>
+      <Tooltip value={props.language.t("command.session.new")} placement="top">
+        <IconButtonV2
+          icon={<IconV2 name="edit" size="small" />}
+          variant="ghost"
+          size="small"
+          class="size-6 rounded-md opacity-0 pointer-events-none group-hover/workspace:opacity-100 group-hover/workspace:pointer-events-auto group-focus-within/workspace:opacity-100 group-focus-within/workspace:pointer-events-auto"
+          data-action="workspace-new-session"
+          data-workspace={base64Encode(props.directory)}
+          aria-label={props.language.t("command.session.new")}
+          onClick={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            props.clearHoverProjectSoon()
+            props.navigateToNewSession()
+          }}
+        />
+      </Tooltip>
+    </Show>
+  </div>
+)
+
+const WorkspaceSessionList = (props: {
+  slug: Accessor<string>
+  mobile?: boolean
+  ctx: WorkspaceSidebarContext
+  showNew: Accessor<boolean>
+  loading: Accessor<boolean>
+  sessions: Accessor<SessionInfo[]>
+  hasMore: Accessor<boolean>
+  loadMore: () => Promise<void>
+  language: ReturnType<typeof useLanguage>
+}): JSX.Element => (
+  <nav class="flex flex-col gap-1">
+    <Show when={props.showNew()}>
+      <NewSessionItem
+        slug={props.slug()}
+        mobile={props.mobile}
+        sidebarExpanded={props.ctx.sidebarExpanded}
+        clearHoverProjectSoon={props.ctx.clearHoverProjectSoon}
+      />
+    </Show>
+    <Show when={props.loading()}>
+      <SessionSkeleton />
+    </Show>
+    <For each={props.sessions()}>
+      {(session) => (
+        <SessionItem
+          session={session}
+          list={props.sessions()}
+          navList={props.ctx.navList}
+          slug={props.slug()}
+          mobile={props.mobile}
+          showChild
+          sidebarExpanded={props.ctx.sidebarExpanded}
+          clearHoverProjectSoon={props.ctx.clearHoverProjectSoon}
+          prefetchSession={props.ctx.prefetchSession}
+          archiveSession={props.ctx.archiveSession}
+        />
+      )}
+    </For>
+    <Show when={props.hasMore()}>
+      <div class="relative w-full py-1">
+        <Button
+          variant="ghost"
+          class="flex w-full text-left justify-start text-14-regular text-text-weak pl-2 pr-10"
+          size="large"
+          onClick={(e: MouseEvent) => {
+            void props.loadMore()
+            ;(e.currentTarget as HTMLButtonElement).blur()
+          }}
+        >
+          {props.language.t("common.loadMore")}
+        </Button>
+      </div>
+    </Show>
+  </nav>
+)
+
+export const SortableWorkspace = (props: {
+  ctx: WorkspaceSidebarContext
+  directory: string
+  project: LocalProject
+  sortNow: Accessor<number>
+  mobile?: boolean
+}): JSX.Element => {
+  const navigate = useNavigate()
+  const params = useParams()
+  const serverSync = useServerSync()
+  const queryOptions = useQueryOptions()
+  const language = useLanguage()
+  const sortable = createSortable(props.directory)
+  const [workspaceStore, setWorkspaceStore] = serverSync().child(props.directory, { bootstrap: false })
+  const [menu, setMenu] = createStore({
+    open: false,
+    pendingRename: false,
+  })
+  const slug = createMemo(() => base64Encode(props.directory))
+  const sessions = createMemo(() => sortedRootSessions(workspaceStore, props.sortNow()))
+  const local = createMemo(() => props.directory === props.project.worktree)
+  const active = createMemo(() => pathKey(props.ctx.currentDir()) === pathKey(props.directory))
+  const workspaceValue = createMemo(() => {
+    const branch = workspaceStore.vcs?.branch
+    const name = branch ?? getFilename(props.directory)
+    return props.ctx.workspaceName(props.directory, props.project.id, branch) ?? name
+  })
+  const open = createMemo(() => props.ctx.workspaceExpanded(props.directory, local()))
+  const boot = createMemo(() => open() || active())
+  const count = createMemo(() => sessions()?.length ?? 0)
+  const hasMore = createMemo(() => workspaceStore.sessionTotal > count())
+  const fetching = useIsFetching(() => queryOptions().sessions(pathKey(props.directory)))
+  const busy = createMemo(() => props.ctx.isBusy(props.directory))
+  const loading = () => fetching() > 0 && count() === 0
+  const touch = createMediaQuery("(hover: none)")
+  const showNew = createMemo(() => !loading() && (touch() || count() === 0 || (active() && !params.id)))
+  const loadMore = async () => {
+    setWorkspaceStore("limit", (limit) => (limit ?? 0) + 5)
+    await serverSync().project.loadSessions(props.directory)
+  }
+
+  const workspaceEditActive = createMemo(() => props.ctx.editorOpen(`workspace:${props.directory}`))
+  const header = () => (
+    <WorkspaceHeader
+      local={local}
+      busy={busy}
+      open={open}
+      directory={props.directory}
+      language={language}
+      branch={() => workspaceStore.vcs?.branch}
+      workspaceValue={workspaceValue}
+      workspaceEditActive={workspaceEditActive}
+      InlineEditor={props.ctx.InlineEditor}
+      renameWorkspace={props.ctx.renameWorkspace}
+      setEditor={props.ctx.setEditor}
+      projectId={props.project.id}
+    />
+  )
+
+  const openWrapper = (value: boolean) => {
+    props.ctx.setWorkspaceExpanded(props.directory, value)
+    if (value) return
+    if (props.ctx.editorOpen(`workspace:${props.directory}`)) props.ctx.closeEditor()
+  }
+
+  createEffect(() => {
+    if (!boot()) return
+    serverSync().child(props.directory, { bootstrap: true })
+  })
+
+  return (
+    <div
+      // @ts-ignore
+      use:sortable
+      classList={{
+        "opacity-30": sortable.isActiveDraggable,
+        "opacity-50 pointer-events-none": busy(),
+      }}
+    >
+      <Collapsible variant="ghost" open={open()} class="shrink-0" onOpenChange={openWrapper}>
+        <div class="py-1">
+          <div
+            class="group/workspace relative"
+            data-component="workspace-item"
+            data-workspace={base64Encode(props.directory)}
+          >
+            <div class="flex items-center gap-1">
+              <Show
+                when={workspaceEditActive()}
+                fallback={
+                  <Collapsible.Trigger
+                    class={`flex items-center justify-between w-full pl-2 py-1.5 rounded-md hover:bg-surface-raised-base-hover transition-[padding] duration-200 ${
+                      menu.open ? "pr-16" : "pr-2"
+                    } group-hover/workspace:pr-16 group-focus-within/workspace:pr-16`}
+                    data-action="workspace-toggle"
+                    data-workspace={base64Encode(props.directory)}
+                  >
+                    {header()}
+                  </Collapsible.Trigger>
+                }
+              >
+                <div
+                  class={`flex items-center justify-between w-full pl-2 py-1.5 rounded-md transition-[padding] duration-200 ${
+                    menu.open ? "pr-16" : "pr-2"
+                  } group-hover/workspace:pr-16 group-focus-within/workspace:pr-16`}
+                >
+                  {header()}
+                </div>
+              </Show>
+              <WorkspaceActions
+                directory={props.directory}
+                local={local}
+                busy={busy}
+                menuOpen={() => menu.open}
+                pendingRename={() => menu.pendingRename}
+                setMenuOpen={(open) => setMenu("open", open)}
+                setPendingRename={(value) => setMenu("pendingRename", value)}
+                sidebarHovering={props.ctx.sidebarHovering}
+                touch={touch}
+                language={language}
+                workspaceValue={workspaceValue}
+                openEditor={props.ctx.openEditor}
+                showResetWorkspaceDialog={props.ctx.showResetWorkspaceDialog}
+                showDeleteWorkspaceDialog={props.ctx.showDeleteWorkspaceDialog}
+                root={props.project.worktree}
+                clearHoverProjectSoon={props.ctx.clearHoverProjectSoon}
+                navigateToNewSession={() => navigate(`/${slug()}/session`)}
+              />
+            </div>
+          </div>
+        </div>
+
+        <Collapsible.Content>
+          <WorkspaceSessionList
+            slug={slug}
+            mobile={props.mobile}
+            ctx={props.ctx}
+            showNew={showNew}
+            loading={loading}
+            sessions={sessions}
+            hasMore={hasMore}
+            loadMore={loadMore}
+            language={language}
+          />
+        </Collapsible.Content>
+      </Collapsible>
+    </div>
+  )
+}
+
+export const LocalWorkspace = (props: {
+  ctx: WorkspaceSidebarContext
+  project: LocalProject
+  sortNow: Accessor<number>
+  mobile?: boolean
+}): JSX.Element => {
+  const serverSync = useServerSync()
+  const queryOptions = useQueryOptions()
+  const language = useLanguage()
+  const workspace = createMemo(() => {
+    const [store, setStore] = serverSync().child(props.project.worktree)
+    return { store, setStore }
+  })
+  const slug = createMemo(() => base64Encode(props.project.worktree))
+  const sessions = createMemo(() => sortedRootSessions(workspace().store, props.sortNow()))
+  const count = createMemo(() => sessions()?.length ?? 0)
+  const fetching = useIsFetching(() => queryOptions().sessions(pathKey(props.project.worktree)))
+  const hasMore = createMemo(() => workspace().store.sessionTotal > count())
+  const loading = () => fetching() > 0 && count() === 0
+  const loadMore = async () => {
+    workspace().setStore("limit", (limit) => (limit ?? 0) + 5)
+    await serverSync().project.loadSessions(props.project.worktree)
+  }
+
+  return (
+    <div
+      ref={(el) => props.ctx.setScrollContainerRef(el, props.mobile)}
+      class="size-full flex flex-col py-2 overflow-y-auto no-scrollbar [overflow-anchor:none]"
+    >
+      <WorkspaceSessionList
+        slug={slug}
+        mobile={props.mobile}
+        ctx={props.ctx}
+        showNew={() => false}
+        loading={loading}
+        sessions={sessions}
+        hasMore={hasMore}
+        loadMore={loadMore}
+        language={language}
+      />
+    </div>
+  )
+}
@@ -2,7 +2,7 @@ import { For } from "solid-js"
 import { createStore } from "solid-js/store"
 import { DockShell } from "@opencode-ai/ui/dock-surface"
 import { SessionRevertDock } from "@/pages/session/composer/session-revert-dock"
-import { SettingsProvider } from "@/context/settings"
+import { SettingsProvider, useSettings } from "@/context/settings"

 export default {
  title: "Composer/Revert Dock",
@@ -21,6 +21,9 @@ Real \`SessionRevertDock\` from app code, rendered above a mock composer card.
 The live composer overlaps the dock's bottom by 18px (\`session-composer-region-controller.ts\` \`lift()\`).
 The card below reproduces that overlap so the collapsed/expanded cutoff behavior can be verified in isolation.

+### Layout split
+Use the **Layout** button to toggle \`newLayoutDesigns\` and preview both the v2 dock and the legacy (v1) \`DockTray\` fallback.
+
 ### Notes
 - \`onRestore\` only mutates local story state, so nothing in the real session is affected.
 - Click the header to expand/collapse. Click "Restore message" to remove a row.`,
@@ -50,9 +53,11 @@ const btn = (accent?: boolean) =>
  }) as const

 function Stage(props: { count: number }) {
+  const settings = useSettings()
  const seed = () => messages.slice(0, props.count).map((text, index) => ({ id: `rolled-${index}`, text }))
  const [store, setStore] = createStore({ items: seed() })

+  const v2 = () => settings.general.newLayoutDesigns()
  const reset = () => setStore("items", seed())
  const restore = (id: string) =>
    setStore(
@@ -66,15 +71,22 @@ function Stage(props: { count: number }) {
        <button style={btn()} onClick={reset}>
          Reset ({props.count})
        </button>
+        <button style={btn(v2())} onClick={() => settings.general.setNewLayoutDesigns(!v2())}>
+          Layout: {v2() ? "v2" : "v1"}
+        </button>
      </div>

      {/* Reproduce the real composer stack: dock + card overlapping the dock's bottom by lift() = 18px */}
      <div style={{ display: "flex", "flex-direction": "column" }}>
        <SessionRevertDock items={store.items} onRestore={restore} />
        <DockShell
-          data-dock-border-underlay="v2"
+          data-dock-border-underlay={v2() ? "v2" : "legacy"}
          style={{ position: "relative", "z-index": 70, "margin-top": "-18px" }}
-          class="min-h-24 w-full rounded-[12px] bg-v2-background-bg-base px-4 py-3 text-[13px] text-v2-text-text-faint"
+          classList={{
+            "min-h-24 w-full rounded-[12px] px-4 py-3 text-[13px]": true,
+            "bg-v2-background-bg-base text-v2-text-text-faint": v2(),
+            "text-text-weak": !v2(),
+          }}
        >
          Ask anything...
        </DockShell>
@@ -50,7 +50,7 @@ const login = Effect.fn("cli.console.login.run")(function* (timeline: TimelineHo
      {
        integrationID,
        methodID: method.id,
-        answers: server ? { server } : {},
+        inputs: server ? { server } : {},
        location,
      },
      { signal },
@@ -30,11 +30,9 @@ export default Runtime.handler(
    )
    if (!method)
      return yield* Effect.fail(new Error(`MCP server "${input.name}" is not an OAuth-capable remote server`))
-    if (method.forms)
-      return yield* Effect.fail(new Error(`MCP server "${input.name}" requires an interactive authentication form`))

    const started = yield* Effect.promise(() =>
-      client.integration.oauth.connect({ integrationID: integration.id, methodID: method.id, answers: {}, location }),
+      client.integration.oauth.connect({ integrationID: integration.id, methodID: method.id, inputs: {}, location }),
    )
    const attempt = started.data
    if (attempt.mode === "code")
@@ -23,9 +23,9 @@ import type { Shell } from "@opencode-ai/schema/shell"
 import type { DateTime } from "effect"
 import type { Provider } from "@opencode-ai/schema/provider"
 import type { Integration } from "@opencode-ai/schema/integration"
-import type { Form } from "@opencode-ai/schema/form"
 import type { Mcp } from "@opencode-ai/schema/mcp"
 import type { Credential } from "@opencode-ai/schema/credential"
+import type { Form } from "@opencode-ai/schema/form"
 import type { Permission } from "@opencode-ai/schema/permission"
 import type { PermissionSaved } from "@opencode-ai/schema/permission-saved"
 import type { FileSystem } from "@opencode-ai/schema/filesystem"
@@ -1006,7 +1006,6 @@ export type Endpoint10_3Input = {
  readonly integrationID: Integration.ID
  readonly location?: { readonly directory?: string | undefined; readonly workspace?: string | undefined } | undefined
  readonly key: string
-  readonly answers: Form.Answer
  readonly label?: string | undefined
 }
 export type Endpoint10_3Output = void
@@ -1018,7 +1017,7 @@ export type Endpoint10_4Input = {
  readonly integrationID: Integration.ID
  readonly location?: { readonly directory?: string | undefined; readonly workspace?: string | undefined } | undefined
  readonly methodID: Integration.MethodID
-  readonly answers: Form.Answer
+  readonly inputs: { readonly [x: string]: string }
  readonly label?: string | undefined
 }
 export type Endpoint10_4Output = { readonly location: Location.Info; readonly data: Integration.Attempt }
@@ -688,7 +688,7 @@ const Endpoint10_3 = (raw: RawClient["server.integration"]) => (input: Endpoint1
    raw["integration.connect.key"]({
      params: { integrationID: input["integrationID"] },
      query: { location: input["location"] },
-      payload: { key: input["key"], answers: input["answers"], label: input["label"] },
+      payload: { key: input["key"], label: input["label"] },
    }).pipe(Effect.mapError(mapClientError)),
  )

@@ -697,7 +697,7 @@ const Endpoint10_4 = (raw: RawClient["server.integration"]) => (input: Endpoint1
    raw["integration.oauth.connect"]({
      params: { integrationID: input["integrationID"] },
      query: { location: input["location"] },
-      payload: { methodID: input["methodID"], answers: input["answers"], label: input["label"] },
+      payload: { methodID: input["methodID"], inputs: input["inputs"], label: input["label"] },
    }).pipe(Effect.mapError(mapClientError)),
  )

@@ -991,7 +991,7 @@ export function make(options: ClientOptions) {
              method: "POST",
              path: `/api/integration/${encodeURIComponent(input.integrationID)}/connect/key`,
              query: { location: input["location"] },
-              body: { key: input["key"], answers: input["answers"], label: input["label"] },
+              body: { key: input["key"], label: input["label"] },
              successStatus: 204,
              declaredStatuses: [400, 401],
              empty: true,
@@ -1006,7 +1006,7 @@ export function make(options: ClientOptions) {
              method: "POST",
              path: `/api/integration/${encodeURIComponent(input.integrationID)}/connect/oauth`,
              query: { location: input["location"] },
-              body: { methodID: input["methodID"], answers: input["answers"], label: input["label"] },
+              body: { methodID: input["methodID"], inputs: input["inputs"], label: input["label"] },
              successStatus: 200,
              declaredStatuses: [400, 401],
              empty: false,
@@ -195,18 +195,12 @@ export type ProviderInfo = {
  body?: { [x: string]: any }
 }

-export type FormWhen = {
-  key: string
-  op: "eq" | "neq"
-  value: string | number | "Infinity" | "-Infinity" | "NaN" | boolean
-}
-
-export type FormOption = { value: string; label: string; description?: string }
-
-export type FormExternalField = { key: string; type: "external"; url: string; title?: string; description?: string }
+export type IntegrationWhen = { key: string; op: "eq" | "neq"; value: string }

 export type IntegrationCommandMethod = { id: string; type: "command"; label: string; command: Array<string> }

+export type IntegrationKeyMethod = { type: "key"; label?: string }
+
 export type IntegrationEnvMethod = { type: "env"; names: Array<string> }

 export type ConnectionCredentialInfo = { type: "credential"; id: string; label: string }
@@ -291,6 +285,16 @@ export type ProjectDirectory = { directory: string; strategy?: string }

 export type FormMetadata = { [x: string]: JsonValue }

+export type FormWhen = {
+  key: string
+  op: "eq" | "neq"
+  value: string | number | "Infinity" | "-Infinity" | "NaN" | boolean
+}
+
+export type FormOption = { value: string; label: string; description?: string }
+
+export type FormExternalField = { key: string; type: "external"; url: string; title?: string; description?: string }
+
 export type FormValue = string | number | boolean | Array<string>

 export type PermissionSource = { type: "tool"; messageID: string; id: string }
@@ -1241,6 +1245,45 @@ export type ModelCost = {
  cache: { read: MoneyUSDPerMillionTokens; write: MoneyUSDPerMillionTokens }
 }

+export type IntegrationTextPrompt = {
+  type: "text"
+  key: string
+  message: string
+  placeholder?: string
+  when?: IntegrationWhen
+}
+
+export type IntegrationSelectPrompt = {
+  type: "select"
+  key: string
+  message: string
+  options: Array<{ label: string; value: string; hint?: string }>
+  when?: IntegrationWhen
+}
+
+export type ConnectionInfo = ConnectionCredentialInfo | ConnectionEnvInfo
+
+export type McpServer = {
+  name: string
+  status: McpStatusConnected | McpStatusPending | McpStatusDisabled | McpStatusFailed | McpStatusNeedsAuth
+  integrationID?: string
+}
+
+export type McpResourceCatalog = { resources: Array<McpResource>; templates: Array<McpResourceTemplate> }
+
+export type Project = {
+  id: string
+  canonical: string
+  vcs?: ProjectVcs
+  name?: string
+  icon?: ProjectIcon
+  commands?: ProjectCommands
+  time: ProjectTime
+  sandboxes: Array<string>
+}
+
+export type ProjectDirectories = Array<ProjectDirectory>
+
 export type FormNumberField = {
  key: string
  title?: string
@@ -1306,29 +1349,6 @@ export type FormMultiselectField = {
  default?: Array<string>
 }

-export type ConnectionInfo = ConnectionCredentialInfo | ConnectionEnvInfo
-
-export type McpServer = {
-  name: string
-  status: McpStatusConnected | McpStatusPending | McpStatusDisabled | McpStatusFailed | McpStatusNeedsAuth
-  integrationID?: string
-}
-
-export type McpResourceCatalog = { resources: Array<McpResource>; templates: Array<McpResourceTemplate> }
-
-export type Project = {
-  id: string
-  canonical: string
-  vcs?: ProjectVcs
-  name?: string
-  icon?: ProjectIcon
-  commands?: ProjectCommands
-  time: ProjectTime
-  sandboxes: Array<string>
-}
-
-export type ProjectDirectories = Array<ProjectDirectory>
-
 export type FormAnswer = { [x: string]: FormValue }

 export type PermissionRequest = {
@@ -1609,6 +1629,13 @@ export type ModelInfo = {
  limit: { context: number; input?: number; output: number }
 }

+export type IntegrationOAuthMethod = {
+  id: string
+  type: "oauth"
+  label: string
+  prompts?: Array<IntegrationTextPrompt | IntegrationSelectPrompt>
+}
+
 export type FormField =
  | FormStringField
  | FormNumberField
@@ -1862,9 +1889,15 @@ export type SessionMessageAssistantTool = {
  time: { created: number; ran?: number; completed?: number }
 }

+export type IntegrationMethod =
+  | IntegrationOAuthMethod
+  | IntegrationCommandMethod
+  | IntegrationKeyMethod
+  | IntegrationEnvMethod
+
 export type FormFields = [FormField, ...Array<FormField>]

-export type FormFields3 = [FormField1, ...Array<FormField1>]
+export type FormFields1 = [FormField1, ...Array<FormField1>]

 export type SessionPendingInfo = SessionPendingUser | SessionPendingSynthetic | SessionPendingCompaction

@@ -1886,13 +1919,16 @@ export type SessionMessageAssistant = {
  retry?: SessionMessageAssistantRetry
 }

-export type IntegrationOAuthMethod = { id: string; type: "oauth"; label: string; forms?: FormFields }
-
-export type IntegrationKeyMethod = { type: "key"; label?: string; forms?: FormFields }
+export type IntegrationInfo = {
+  id: string
+  name: string
+  methods: Array<IntegrationMethod>
+  connections: Array<ConnectionInfo>
+}

 export type FormInfo = { id: string; sessionID: string; title: string; metadata?: FormMetadata; fields: FormFields }

-export type FormInfo1 = { id: string; sessionID: string; title: string; metadata?: FormMetadata1; fields: FormFields3 }
+export type FormInfo1 = { id: string; sessionID: string; title: string; metadata?: FormMetadata1; fields: FormFields1 }

 export type SessionInputAdmitted = {
  id: string
@@ -1915,12 +1951,6 @@ export type SessionMessageInfo =
  | SessionMessageAssistant
  | SessionMessageCompaction

-export type IntegrationMethod =
-  | IntegrationOAuthMethod
-  | IntegrationCommandMethod
-  | IntegrationKeyMethod
-  | IntegrationEnvMethod
-
 export type FormCreated = {
  id: string
  created: number
@@ -1978,13 +2008,6 @@ export type SessionMessagesResponse = {
  cursor: { previous?: string | null; next?: string | null }
 }

-export type IntegrationInfo = {
-  id: string
-  name: string
-  methods: Array<IntegrationMethod>
-  connections: Array<ConnectionInfo>
-}
-
 export type V2Event =
  | ModelsDevRefreshed
  | IntegrationUpdated
@@ -3834,21 +3857,8 @@ export type IntegrationConnectKeyInput = {
  readonly location?: {
    readonly location?: { readonly directory?: string | undefined; readonly workspace?: string | undefined } | undefined
  }["location"]
-  readonly key: {
-    readonly key: string
-    readonly answers: { readonly [x: string]: string | number | boolean | ReadonlyArray<string> }
-    readonly label?: string | undefined
-  }["key"]
-  readonly answers: {
-    readonly key: string
-    readonly answers: { readonly [x: string]: string | number | boolean | ReadonlyArray<string> }
-    readonly label?: string | undefined
-  }["answers"]
-  readonly label?: {
-    readonly key: string
-    readonly answers: { readonly [x: string]: string | number | boolean | ReadonlyArray<string> }
-    readonly label?: string | undefined
-  }["label"]
+  readonly key: { readonly key: string; readonly label?: string | undefined }["key"]
+  readonly label?: { readonly key: string; readonly label?: string | undefined }["label"]
 }

 export type IntegrationConnectKeyOutput = void
@@ -3860,17 +3870,17 @@ export type IntegrationOauthConnectInput = {
  }["location"]
  readonly methodID: {
    readonly methodID: string
-    readonly answers: { readonly [x: string]: string | number | boolean | ReadonlyArray<string> }
+    readonly inputs: { readonly [x: string]: string }
    readonly label?: string | undefined
  }["methodID"]
-  readonly answers: {
+  readonly inputs: {
    readonly methodID: string
-    readonly answers: { readonly [x: string]: string | number | boolean | ReadonlyArray<string> }
+    readonly inputs: { readonly [x: string]: string }
    readonly label?: string | undefined
-  }["answers"]
+  }["inputs"]
  readonly label?: {
    readonly methodID: string
-    readonly answers: { readonly [x: string]: string | number | boolean | ReadonlyArray<string> }
+    readonly inputs: { readonly [x: string]: string }
    readonly label?: string | undefined
  }["label"]
 }
@@ -147,45 +147,6 @@ test("experimental wellknown integration add uses the public HTTP contract", asy
  expect(await request?.json()).toEqual({ url: "https://example.com" })
 })

-test("integration connections submit form answers", async () => {
-  const requests: Request[] = []
-  const client = OpenCode.make({
-    baseUrl: "http://localhost:3000",
-    fetch: async (input, init) => {
-      const request = input instanceof Request ? input : new Request(input, init)
-      requests.push(request)
-      if (request.url.endsWith("/connect/key")) return new Response(null, { status: 204 })
-      return Response.json({
-        location: { directory: "/tmp/project", project: { id: "proj_test", directory: "/tmp/project" } },
-        data: {
-          attemptID: "con_test",
-          url: "https://example.com/authorize",
-          instructions: "Authorize",
-          mode: "auto",
-          time: { created: 1, expires: 2 },
-        },
-      })
-    },
-  })
-
-  await client.integration.connect.key({
-    integrationID: "cloudflare-workers-ai",
-    key: "secret",
-    answers: { accountId: "account" },
-  })
-  await client.integration.oauth.connect({
-    integrationID: "github-copilot",
-    methodID: "device",
-    answers: { deploymentType: "enterprise", enabled: true, scopes: ["read:user"] },
-  })
-
-  expect(await requests[0].json()).toEqual({ key: "secret", answers: { accountId: "account" } })
-  expect(await requests[1].json()).toEqual({
-    methodID: "device",
-    answers: { deploymentType: "enterprise", enabled: true, scopes: ["read:user"] },
-  })
-})
-
 test("health.stop sends exact replacement identity", async () => {
  let request: Request | undefined
  const client = OpenCode.make({
@@ -180,14 +180,10 @@ export const layer = Layer.effect(
        Effect.gen(function* () {
          const entry = yield* find(input.id)
          if (entry.state.status !== "pending") return yield* new AlreadySettledError({ id: input.id })
-          const invalid = validateAnswer(entry.form.fields, input.answer)
+          const invalid = validateAnswer(entry.form, input.answer)
          if (invalid) return yield* new InvalidAnswerError({ id: input.id, message: invalid })
          const next: TerminalState = { status: "answered", answer: input.answer }
-          yield* bus.publish(Form.Event.Replied, {
-            id: input.id,
-            sessionID: entry.form.sessionID,
-            answer: input.answer,
-          })
+          yield* bus.publish(Form.Event.Replied, { id: input.id, sessionID: entry.form.sessionID, answer: input.answer })
          yield* Cache.set(forms, input.id, { ...entry, state: next })
          yield* Deferred.succeed(entry.deferred, next)
        }),
@@ -227,12 +223,12 @@ export const locationLayer = layer

 export const node = makeLocationNode({ service: Service, layer, deps: [Bus.node] })

-export function validateAnswer(forms: ReadonlyArray<Form.Field>, answer: Answer) {
-  const fields = new Map(forms.map((field) => [field.key, field] as const))
+function validateAnswer(form: Info, answer: Answer) {
+  const fields = new Map(form.fields.map((field) => [field.key, field] as const))
  for (const key of Object.keys(answer)) {
    if (!fields.has(key)) return `Unknown form field: ${key}`
  }
-  for (const field of forms) {
+  for (const field of form.fields) {
    const value = answer[field.key]
    if (field.type === "external") {
      if (value !== true) return `External form field must be acknowledged: ${field.key}`
@@ -268,7 +264,7 @@ function matches(when: Form.When, value: Form.Value | undefined) {
 // carry a value matching that field's type, and use a declared option when the field's options
 // are closed. Rejecting these at creation surfaces authoring mistakes to the caller instead of
 // silently never matching.
-export function validateFields(fields: ReadonlyArray<Form.Field>) {
+function validateFields(fields: ReadonlyArray<Form.Field>) {
  if (fields.length === 0) return "Form must have at least one field"
  const earlier = new Map<string, InputField>()
  const keys = new Set<string>()
@@ -24,7 +24,6 @@ import { Bus } from "./bus"
 import { IntegrationConnection } from "./integration/connection"
 import { AppProcess } from "@opencode-ai/util/process"
 import { ChildProcess } from "effect/unstable/process"
-import { Form } from "./form"

 export const ID = Integration.ID
 export type ID = Integration.ID
@@ -35,6 +34,18 @@ export type MethodID = Integration.MethodID
 export const AttemptID = Integration.AttemptID
 export type AttemptID = typeof AttemptID.Type

+export const When = Integration.When
+export type When = Integration.When
+
+export const TextPrompt = Integration.TextPrompt
+export type TextPrompt = Integration.TextPrompt
+
+export const SelectPrompt = Integration.SelectPrompt
+export type SelectPrompt = Integration.SelectPrompt
+
+export const Prompt = Integration.Prompt
+export type Prompt = Integration.Prompt
+
 export const OAuthMethod = Integration.OAuthMethod
 export type OAuthMethod = Integration.OAuthMethod

@@ -53,6 +64,9 @@ export type Method = Integration.Method
 export const Info = Integration.Info
 export type Info = Integration.Info

+export const Inputs = Integration.Inputs
+export type Inputs = Integration.Inputs
+
 export type OAuthAuthorization = {
  readonly url: string
  readonly instructions: string
@@ -71,7 +85,7 @@ export type OAuthAuthorization = {
 export interface OAuthImplementation {
  readonly integrationID: ID
  readonly method: OAuthMethod
-  readonly authorize: (answers: Form.Answer) => Effect.Effect<OAuthAuthorization, unknown, Scope.Scope>
+  readonly authorize: (inputs: Inputs) => Effect.Effect<OAuthAuthorization, unknown, Scope.Scope>
  readonly refresh?: (credential: Credential.OAuth) => Effect.Effect<Credential.OAuth, unknown>
  readonly label?: (credential: Credential.OAuth) => string | undefined
 }
@@ -161,8 +175,6 @@ export interface Interface extends State.Transformable<Draft> {
      readonly integrationID: ID
      /** Secret entered by the user. */
      readonly key: string
-      /** Values collected from the method's form fields. */
-      readonly answers: Form.Answer
      /** User-facing label for the stored credential. */
      readonly label?: string
    }) => Effect.Effect<void, AuthorizationError>
@@ -179,7 +191,7 @@ export interface Interface extends State.Transformable<Draft> {
    readonly connect: (input: {
      readonly integrationID: ID
      readonly methodID: MethodID
-      readonly answers: Form.Answer
+      readonly inputs: Inputs
      readonly label?: string
    }) => Effect.Effect<Attempt, AuthorizationError>
    /** Returns the current state of an OAuth attempt. */
@@ -344,7 +356,7 @@ const layer = Layer.effect(
      return [...credentials, ...env]
    }

-    const project = (entry: Entry, connections: IntegrationConnection.Info[]): Info =>
+    const project = (entry: Entry, connections: IntegrationConnection.Info[]) =>
      Info.make({
        id: entry.ref.id,
        name: entry.ref.name,
@@ -535,20 +547,15 @@ const layer = Layer.effect(
    const connectOAuth = Effect.fn("Integration.oauth.connect")(function* (input: {
      readonly integrationID: ID
      readonly methodID: MethodID
-      readonly answers: Form.Answer
+      readonly inputs: Inputs
      readonly label?: string
    }) {
      const method = state.get().integrations.get(input.integrationID)?.implementations.get(input.methodID)
      if (!method) {
        return yield* Effect.die(new Error(`OAuth method not found: ${input.integrationID}/${input.methodID}`))
      }
-      if (method.method.forms) {
-        const invalid =
-          Form.validateFields(method.method.forms) ?? Form.validateAnswer(method.method.forms, input.answers)
-        if (invalid) return yield* new AuthorizationError({ cause: new Error(invalid) })
-      }
      const attemptScope = yield* Scope.fork(scope)
-      const authorization = yield* authorize(method.authorize(input.answers)).pipe(
+      const authorization = yield* authorize(method.authorize(input.inputs)).pipe(
        Scope.provide(attemptScope),
        Effect.onExit((exit) => (Exit.isFailure(exit) ? Scope.close(attemptScope, exit) : Effect.void)),
      )
@@ -692,23 +699,12 @@ const layer = Layer.effect(
          const method = state
            .get()
            .integrations.get(input.integrationID)
-            ?.methods.find((method) => method.type === "key")
+            ?.methods.some((method) => method.type === "key")
          if (!method) return yield* Effect.die(new Error(`Key method not found: ${input.integrationID}`))
-          if (method.type === "key" && method.forms) {
-            const invalid = Form.validateFields(method.forms) ?? Form.validateAnswer(method.forms, input.answers)
-            if (invalid) return yield* new AuthorizationError({ cause: new Error(invalid) })
-          }
-          if (method.type === "key" && !method.forms && Object.keys(input.answers).length > 0) {
-            return yield* new AuthorizationError({ cause: new Error("Key method does not accept form answers") })
-          }
          yield* credentials.create({
            integrationID: input.integrationID,
            label: input.label,
-            value: Credential.Key.make({
-              type: "key",
-              key: input.key,
-              ...(Object.keys(input.answers).length > 0 ? { configuration: input.answers } : {}),
-            }),
+            value: Credential.Key.make({ type: "key", key: input.key }),
          })
          yield* bus.publish(Integration.Event.ConnectionUpdated, { integrationID: input.integrationID })
          yield* bus.publish(Integration.Event.Updated, {})
@@ -149,7 +149,6 @@ export const fromCatalogModel = (
  })
  const packageName = Provider.packageName(resolved.package)
  const key = apiKey(resolved, credential)
-  const configuration = credential?.type === "key" ? credential.configuration : undefined

  if (Provider.isAISDK(resolved.package) && packageName === "@ai-sdk/openai") {
    return Effect.succeed(
@@ -176,7 +175,7 @@ export const fromCatalogModel = (
        .model({ id: resolved.modelID ?? resolved.id, compatibility: resolved.compatibility }),
    )
  }
-  const configured = { ...resolved.settings, ...credential?.metadata, ...configuration }
+  const configured = { ...resolved.settings, ...credential?.metadata }
  const mapping = Provider.isAISDK(resolved.package)
    ? AISDKNative.map({
        packageName,
@@ -191,7 +190,6 @@ export const fromCatalogModel = (
      draft.settings = Provider.mergeOverlay(draft.settings, {
        ...nativeCredentialSettings(resolved.package ?? "", credential),
        ...credential?.metadata,
-        ...configuration,
      })
    })
    return dependencies.loadAISDK(runtime).pipe(Effect.mapError(() => unsupported(resolved)))
@@ -47,13 +47,17 @@ export const make = Effect.fn("PluginHost.make")(function* (plugin: import("../p
      workspaceID: location.workspaceID,
      project: location.project,
    })
-  const locationRef = (input?: { readonly location?: { readonly directory?: string; readonly workspace?: string } }) =>
+  const locationRef = (input?: {
+    readonly location?: { readonly directory?: string; readonly workspace?: string }
+  }) =>
    input?.location === undefined
      ? undefined
      : Location.Ref.make({
          directory: AbsolutePath.make(input.location.directory ?? location.directory),
          workspaceID:
-            input.location.workspace === undefined ? location.workspaceID : Workspace.ID.make(input.location.workspace),
+            input.location.workspace === undefined
+              ? location.workspaceID
+              : Workspace.ID.make(input.location.workspace),
        })
  const isCurrentLocation = (ref: Location.Ref) =>
    ref.directory === location.directory && ref.workspaceID === location.workspaceID
@@ -70,12 +74,7 @@ export const make = Effect.fn("PluginHost.make")(function* (plugin: import("../p
          ref && !isCurrentLocation(ref)
            ? runtime.location.agent
                .list(ref)
-                .pipe(
-                  Effect.map((result) => ({
-                    ...result,
-                    data: result.data.find((agent) => agent.id === input.agentID),
-                  })),
-                )
+                .pipe(Effect.map((result) => ({ ...result, data: result.data.find((agent) => agent.id === input.agentID) })))
            : response(agents.get(input.agentID))
        return output.pipe(
          Effect.flatMap((result) =>
@@ -163,7 +162,8 @@ export const make = Effect.fn("PluginHost.make")(function* (plugin: import("../p
                mutable(draft.model.get(Provider.ID.make(providerID), Model.ID.make(modelID))),
              update: (providerID, modelID, update) =>
                draft.model.update(Provider.ID.make(providerID), Model.ID.make(modelID), update),
-              remove: (providerID, modelID) => draft.model.remove(Provider.ID.make(providerID), Model.ID.make(modelID)),
+              remove: (providerID, modelID) =>
+                draft.model.remove(Provider.ID.make(providerID), Model.ID.make(modelID)),
              default: {
                get: draft.model.default.get,
                set: (providerID, modelID) =>
@@ -192,7 +192,6 @@ export const make = Effect.fn("PluginHost.make")(function* (plugin: import("../p
          integration.connection.key({
            integrationID: Integration.ID.make(input.integrationID),
            key: input.key,
-            answers: input.answers,
            label: input.label,
          }),
      },
@@ -202,7 +201,7 @@ export const make = Effect.fn("PluginHost.make")(function* (plugin: import("../p
            integration.oauth.connect({
              integrationID: Integration.ID.make(input.integrationID),
              methodID: Integration.MethodID.make(input.methodID),
-              answers: input.answers,
+              inputs: input.inputs,
              label: input.label,
            }),
          ),
@@ -365,14 +364,9 @@ function methodImplementation(input: IntegrationMethodRegistration): Integration
    const refresh = input.refresh
    return {
      integrationID: Integration.ID.make(input.integrationID),
-      method: Schema.decodeUnknownSync(Integration.OAuthMethod)({
-        id: Integration.MethodID.make(input.method.id),
-        type: "oauth",
-        label: input.method.label,
-        ...(input.method.forms === undefined ? {} : { forms: input.method.forms }),
-      }),
-      authorize: (answers) =>
-        input.authorize(answers).pipe(
+      method: { ...input.method, id: Integration.MethodID.make(input.method.id) },
+      authorize: (inputs) =>
+        input.authorize(inputs).pipe(
          Effect.map((authorization) => {
            if (authorization.mode === "auto") {
              return {
@@ -404,11 +398,7 @@ function methodImplementation(input: IntegrationMethodRegistration): Integration
  }
  return {
    integrationID: Integration.ID.make(input.integrationID),
-    method: Schema.decodeUnknownSync(Integration.KeyMethod)({
-      type: "key",
-      ...(input.method.label === undefined ? {} : { label: input.method.label }),
-      ...(input.method.forms === undefined ? {} : { forms: input.method.forms }),
-    }),
+    method: { type: "key", label: input.method.label },
  }
 }

@@ -179,8 +179,8 @@ export function fromPromise(plugin: Plugin) {
                        const refresh = input.refresh
                        draft.method.update({
                          ...input,
-                          authorize: (answers) =>
-                            Effect.promise(() => input.authorize(answers)).pipe(
+                          authorize: (inputs) =>
+                            Effect.promise(() => input.authorize(inputs)).pipe(
                              Effect.map((authorization) =>
                                authorization.mode === "auto"
                                  ? {
@@ -359,17 +359,11 @@ type Wire<Value> = unknown extends Value
    ? Value
    : Value extends DateTime.DateTime
      ? number
-      : Value extends readonly [infer Head, ...infer Tail]
-        ? [Wire<Head>, ...WireTuple<Tail>]
-        : Value extends ReadonlyArray<infer Item>
-          ? Array<Wire<Item>>
-          : Value extends object
-            ? { -readonly [Key in keyof Value]: Wire<Value[Key]> }
-            : Value
-
-type WireTuple<Value extends ReadonlyArray<unknown>> = {
-  -readonly [Key in keyof Value]: Wire<Value[Key]>
-}
+      : Value extends ReadonlyArray<infer Item>
+        ? Array<Wire<Item>>
+        : Value extends object
+          ? { -readonly [Key in keyof Value]: Wire<Value[Key]> }
+          : Value

 function wire<Value>(value: Value): Wire<Value>
 function wire(value: unknown): unknown {
@@ -1,7 +1,6 @@
 import { Effect } from "effect"
 import { define } from "@opencode-ai/plugin/effect/plugin"
 import { Provider } from "../../provider"
-import { configuredSettings } from "./configured"

 function selectLanguage(sdk: any, modelID: string, useChat: boolean) {
  if (useChat && sdk.chat) return sdk.chat(modelID)
@@ -14,29 +13,6 @@ function selectLanguage(sdk: any, modelID: string, useChat: boolean) {
 export const AzurePlugin = define({
  id: "opencode.provider.azure",
  effect: Effect.fn(function* (ctx) {
-    const configured = yield* configuredSettings(Provider.ID.azure)
-    yield* ctx.integration.transform((draft) => {
-      draft.method.update({
-        integrationID: Provider.ID.azure,
-        method: {
-          type: "key",
-          label: "API key",
-          ...(resolveResourceName(configured) || typeof configured?.baseURL === "string"
-            ? {}
-            : {
-                forms: [
-                  {
-                    type: "string",
-                    key: "resourceName",
-                    title: "Enter Azure Resource Name",
-                    placeholder: "e.g. my-models",
-                    required: true,
-                  },
-                ],
-              }),
-        },
-      })
-    })
    yield* ctx.catalog.transform((evt) => {
      for (const item of evt.provider.list()) {
        if (item.provider.id !== Provider.ID.azure && Provider.packageName(item.provider.package) !== "@ai-sdk/azure")
@@ -2,53 +2,10 @@ import os from "os"
 import { App } from "../../app"
 import { Effect, Option, Schema } from "effect"
 import { define } from "@opencode-ai/plugin/effect/plugin"
-import { Provider } from "../../provider"
-import { configuredSettings } from "./configured"
-
-const providerID = Provider.ID.make("cloudflare-ai-gateway")

 export const CloudflareAIGatewayPlugin = define({
  id: "opencode.provider.cloudflare-ai-gateway",
  effect: Effect.fn(function* (ctx) {
-    const configured = yield* configuredSettings(providerID)
-    const complete = typeof configured?.baseURL === "string"
-    yield* ctx.integration.transform((draft) => {
-      const forms = [
-        ...(complete || process.env.CLOUDFLARE_ACCOUNT_ID || stringOption(configured ?? {}, "accountId")
-          ? []
-          : [
-              {
-                type: "string" as const,
-                key: "accountId",
-                title: "Enter your Cloudflare Account ID",
-                placeholder: "e.g. 1234567890abcdef1234567890abcdef",
-                required: true,
-              },
-            ]),
-        ...(complete ||
-        process.env.CLOUDFLARE_GATEWAY_ID ||
-        stringOption(configured ?? {}, "gatewayId") ||
-        stringOption(configured ?? {}, "gateway")
-          ? []
-          : [
-              {
-                type: "string" as const,
-                key: "gatewayId",
-                title: "Enter your Cloudflare AI Gateway ID",
-                placeholder: "e.g. my-gateway",
-                required: true,
-              },
-            ]),
-      ]
-      draft.method.update({
-        integrationID: providerID,
-        method: {
-          type: "key",
-          label: "Gateway API token",
-          ...(forms[0] ? { forms: [forms[0], ...forms.slice(1)] } : {}),
-        },
-      })
-    })
    yield* ctx.aisdk.hook(
      "sdk",
      Effect.fn(function* (evt) {
@@ -89,7 +46,7 @@ const decodeJson = Schema.decodeUnknownOption(Schema.UnknownFromJsonString)

 function gatewayConfig(options: Record<string, unknown>): GatewayConfig | undefined {
  const accountId = process.env.CLOUDFLARE_ACCOUNT_ID ?? stringOption(options, "accountId")
-  // Credential projection copies key metadata into options. The form stores the
+  // Credential projection copies key metadata into options. The prompt stores the
  // gateway as gatewayId, while older config examples may use gateway.
  const gatewayId =
    process.env.CLOUDFLARE_GATEWAY_ID ?? stringOption(options, "gatewayId") ?? stringOption(options, "gateway")
@@ -3,36 +3,12 @@ import { App } from "../../app"
 import { Effect } from "effect"
 import { define } from "@opencode-ai/plugin/effect/plugin"
 import { Provider } from "../../provider"
-import { configuredSettings } from "./configured"

 const providerID = Provider.ID.make("cloudflare-workers-ai")

 export const CloudflareWorkersAIPlugin = define({
  id: "opencode.provider.cloudflare-workers-ai",
  effect: Effect.fn(function* (ctx) {
-    const configured = yield* configuredSettings(providerID)
-    yield* ctx.integration.transform((draft) => {
-      draft.method.update({
-        integrationID: providerID,
-        method: {
-          type: "key",
-          label: "API key",
-          ...(typeof configured?.baseURL === "string" || resolveAccountId(configured ?? {})
-            ? {}
-            : {
-                forms: [
-                  {
-                    type: "string",
-                    key: "accountId",
-                    title: "Enter your Cloudflare Account ID",
-                    placeholder: "e.g. 1234567890abcdef1234567890abcdef",
-                    required: true,
-                  },
-                ],
-              }),
-        },
-      })
-    })
    yield* ctx.catalog.transform((evt) => {
      const item = evt.provider.get(providerID)
      if (!item) return
@@ -1,15 +0,0 @@
-import { Effect, Option } from "effect"
-import type { Document } from "@opencode-ai/schema/config"
-import { Catalog } from "../../catalog"
-import { Config } from "../../config"
-import { Provider } from "../../provider"
-
-export const configuredSettings = Effect.fn("ProviderPlugin.configuredSettings")(function* (id: Provider.ID) {
-  const catalog = yield* Catalog.Service
-  const current = (yield* catalog.provider.get(id))?.settings
-  const service = yield* Effect.serviceOption(Config.Service)
-  const entries = Option.isSome(service) ? yield* service.value.entries() : []
-  return entries
-    .filter((entry): entry is Document => entry.type === "document")
-    .reduce((settings, entry) => Provider.mergeOverlay(settings, entry.info.providers?.[id]?.settings), current)
-})
@@ -46,33 +46,30 @@ const oauth = (app: App.Info) => ({
    id: methodID,
    type: "oauth",
    label: "Login with GitHub Copilot",
-    forms: [
+    prompts: [
      {
-        type: "string",
+        type: "select",
        key: "deploymentType",
-        title: "Select GitHub deployment type",
-        required: true,
+        message: "Select GitHub deployment type",
        options: [
-          { label: "GitHub.com", value: "github.com", description: "Public" },
-          { label: "GitHub Enterprise", value: "enterprise", description: "Data residency or self-hosted" },
+          { label: "GitHub.com", value: "github.com", hint: "Public" },
+          { label: "GitHub Enterprise", value: "enterprise", hint: "Data residency or self-hosted" },
        ],
      },
      {
-        type: "string",
+        type: "text",
        key: "enterpriseUrl",
-        title: "Enter your GitHub Enterprise URL or domain",
+        message: "Enter your GitHub Enterprise URL or domain",
        placeholder: "company.ghe.com or https://company.ghe.com",
-        required: true,
-        when: [{ key: "deploymentType", op: "eq", value: "enterprise" }],
+        when: { key: "deploymentType", op: "eq", value: "enterprise" },
      },
    ],
  },
-  authorize: (answers) =>
+  authorize: (inputs) =>
    Effect.gen(function* () {
-      const enterprise = answers.deploymentType === "enterprise"
-      const enterpriseUrl = typeof answers.enterpriseUrl === "string" ? answers.enterpriseUrl : undefined
-      if (enterprise && !enterpriseUrl) return yield* Effect.fail(new Error("Enterprise URL is required"))
-      const domain = enterprise ? normalizeDomain(enterpriseUrl ?? "") : "github.com"
+      const enterprise = inputs.deploymentType === "enterprise"
+      if (enterprise && !inputs.enterpriseUrl) return yield* Effect.fail(new Error("Enterprise URL is required"))
+      const domain = enterprise ? normalizeDomain(inputs.enterpriseUrl ?? "") : "github.com"
      const urls = oauthURLs(domain)
      const device = yield* request(urls.device, {
        method: "POST",
@@ -43,9 +43,9 @@ function oauth(http: HttpClient.HttpClient) {
      type: "oauth",
      label: "OpenCode Console account",
    },
-    authorize: (answers) =>
+    authorize: (inputs) =>
      Effect.gen(function* () {
-        const server = yield* normalizeServer(typeof answers.server === "string" ? answers.server : defaultServer)
+        const server = yield* normalizeServer(inputs.server ?? defaultServer)
        const device = yield* post(http, `${server}/auth/device/code`, { client_id: clientID }, Device)
        const verification = URL.canParse(device.verification_uri_complete)
          ? new URL(device.verification_uri_complete)
@@ -140,11 +140,7 @@ describe("Integration", () => {
      yield* integrations.transform((editor) =>
        editor.method.update({
          integrationID,
-          method: {
-            type: "key",
-            label: "API key",
-            forms: [{ type: "string", key: "accountId", title: "Account ID", required: true }],
-          },
+          method: { type: "key", label: "API key" },
        }),
      )
      const updated = yield* bus
@@ -152,17 +148,9 @@ describe("Integration", () => {
        .pipe(Stream.take(1), Stream.runCollect, Effect.forkScoped)
      yield* Effect.yieldNow

-      expect(
-        yield* integrations.connection.key({ integrationID, key: "secret", answers: {} }).pipe(
-          Effect.flip,
-          Effect.map((error) => error.cause),
-        ),
-      ).toEqual(expect.objectContaining({ message: "Missing required form field: accountId" }))
-
      yield* integrations.connection.key({
        integrationID,
        key: "secret",
-        answers: { accountId: "account" },
        label: "Work",
      })

@@ -170,7 +158,7 @@ describe("Integration", () => {
        expect.objectContaining({
          integrationID,
          label: "Work",
-          value: Credential.Key.make({ type: "key", key: "secret", configuration: { accountId: "account" } }),
+          value: Credential.Key.make({ type: "key", key: "secret" }),
        }),
      ])
      expect((yield* Fiber.join(updated)).length).toBe(1)
@@ -255,7 +243,7 @@ describe("Integration", () => {
      const attempt = yield* integrations.oauth.connect({
        integrationID,
        methodID,
-        answers: {},
+        inputs: {},
        label: "Personal",
      })
      expect(attempt.mode).toBe("code")
@@ -301,7 +289,7 @@ describe("Integration", () => {
        }),
      )

-      const attempt = yield* integrations.oauth.connect({ integrationID, methodID, answers: {} })
+      const attempt = yield* integrations.oauth.connect({ integrationID, methodID, inputs: {} })
      expect(
        yield* integrations.oauth.complete({ integrationID, attemptID: attempt.attemptID }).pipe(Effect.flip),
      ).toBeInstanceOf(Integration.CodeRequiredError)
@@ -339,7 +327,7 @@ describe("Integration", () => {
        }),
      )

-      const attempt = yield* integrations.oauth.connect({ integrationID, methodID, answers: {} })
+      const attempt = yield* integrations.oauth.connect({ integrationID, methodID, inputs: {} })
      yield* Effect.yieldNow
      expect(yield* integrations.oauth.status({ integrationID, attemptID: attempt.attemptID })).toEqual({
        status: "complete",
@@ -377,7 +365,7 @@ describe("Integration", () => {
        }),
      )

-      const attempt = yield* integrations.oauth.connect({ integrationID, methodID, answers: {} })
+      const attempt = yield* integrations.oauth.connect({ integrationID, methodID, inputs: {} })
      const exit = yield* integrations.oauth
        .complete({ integrationID, attemptID: attempt.attemptID, code: "1234" })
        .pipe(Effect.exit)
@@ -413,7 +401,7 @@ describe("Integration", () => {
        }),
      )

-      const attempt = yield* integrations.oauth.connect({ integrationID, methodID, answers: {} })
+      const attempt = yield* integrations.oauth.connect({ integrationID, methodID, inputs: {} })
      expect(attempt.time.expires - attempt.time.created).toBe(Duration.toMillis(Duration.minutes(10)))
      yield* TestClock.adjust(Duration.minutes(10))
      yield* Effect.yieldNow
@@ -454,7 +442,7 @@ describe("Integration", () => {
            }),
          )

-          const attempt = yield* integrations.oauth.connect({ integrationID, methodID, answers: {} })
+          const attempt = yield* integrations.oauth.connect({ integrationID, methodID, inputs: {} })
          expect(attempt.time).toEqual({ created, expires: expiresAt })
        })
      })
@@ -736,11 +736,7 @@ describe("ModelResolver", () => {
          headers: { "x-aisdk": "header" },
          body: { custom: true },
        }),
-        Credential.Key.make({
-          type: "key",
-          key: "fallback-secret",
-          configuration: { accountId: "account" },
-        }),
+        Credential.Key.make({ type: "key", key: "fallback-secret" }),
        {
          loadAISDK: (runtime) =>
            Effect.sync(() => {
@@ -749,7 +745,7 @@ describe("ModelResolver", () => {
                modelID: "mistral-api-model",
                providerID: "test-provider",
                package: Provider.aisdk("@ai-sdk/mistral"),
-                settings: { project: "test", apiKey: "fallback-secret", accountId: "account" },
+                settings: { project: "test", apiKey: "fallback-secret" },
                headers: { "x-aisdk": "header" },
                body: { custom: true },
              })
@@ -10,7 +10,7 @@ import { Project } from "@opencode-ai/core/project"
 import { Provider } from "@opencode-ai/core/provider"
 import { AbsolutePath } from "@opencode-ai/core/schema"
 import { WebSearch } from "@opencode-ai/core/websearch"
-import { Effect, Schema, Stream } from "effect"
+import { Effect, Stream } from "effect"

 type Overrides = Partial<Omit<Plugin.Context, "options" | "session">> & {
  readonly session?: Partial<Plugin.Context["session"]>
@@ -226,7 +226,8 @@ export function catalogHost(catalog: Catalog.Interface): Plugin.Context["catalog
                  })),
                })
              }),
-            remove: (providerID, modelID) => draft.model.remove(Provider.ID.make(providerID), Model.ID.make(modelID)),
+            remove: (providerID, modelID) =>
+              draft.model.remove(Provider.ID.make(providerID), Model.ID.make(modelID)),
            default: {
              get: () => {
                const value = draft.model.default.get()
@@ -285,9 +286,9 @@ export function integrationHost(integration: Integration.Interface): Plugin.Cont
                const refresh = input.refresh
                draft.method.update({
                  integrationID: Integration.ID.make(input.integrationID),
-                  method: oauthMethod(input.method, methodID),
-                  authorize: (answers) =>
-                    input.authorize(answers).pipe(
+                  method: { ...input.method, id: methodID },
+                  authorize: (inputs) =>
+                    input.authorize(inputs).pipe(
                      Effect.map((authorization) => {
                        if (authorization.mode === "auto") {
                          return {
@@ -353,7 +354,7 @@ export function integrationHost(integration: Integration.Interface): Plugin.Cont
              }
              draft.method.update({
                integrationID: Integration.ID.make(input.integrationID),
-                method: keyMethod(input.method),
+                method: input.method,
              })
            },
            remove: (id, item) => draft.method.remove(Integration.ID.make(id), internalMethod(item)),
@@ -401,21 +402,26 @@ function oauthCredential(value: Credential.OAuth) {
  return Credential.OAuth.make({ ...value, methodID: Integration.MethodID.make(value.methodID) })
 }

-function method(value: Integration.Method): IntegrationMethodRegistration["method"] {
+function method(value: Integration.Method) {
  if (value.type === "env") return { type: value.type, names: [...value.names] }
-  if (value.type === "key") return { type: value.type, label: value.label, forms: mutable(value.forms) }
+  if (value.type === "key") return { type: value.type, label: value.label }
  if (value.type === "command") return { ...value, command: [...value.command] }
  return {
    type: value.type,
    id: value.id,
    label: value.label,
-    forms: mutable(value.forms),
+    prompts: value.prompts?.map((prompt) => {
+      if (prompt.type === "text") return { ...prompt }
+      return { ...prompt, options: prompt.options.map((option) => ({ ...option })) }
+    }),
  }
 }

-function internalMethod(value: IntegrationMethodRegistration["method"]): Integration.Method {
+function internalMethod(
+  value: IntegrationMethodRegistration["method"],
+): Integration.Method {
  if (value.type === "env") return value
-  if (value.type === "key") return keyMethod(value)
+  if (value.type === "key") return value
  if (value.type === "command") {
    return {
      ...value,
@@ -423,41 +429,10 @@ function internalMethod(value: IntegrationMethodRegistration["method"]): Integra
      command: [...value.command],
    }
  }
-  return oauthMethod(value, Integration.MethodID.make(value.id))
-}
-
-type Mutable<Value> = Value extends readonly [infer Head, ...infer Tail]
-  ? [Mutable<Head>, ...MutableTuple<Tail>]
-  : Value extends ReadonlyArray<infer Item>
-    ? Array<Mutable<Item>>
-    : Value extends object
-      ? { -readonly [Key in keyof Value]: Mutable<Value[Key]> }
-      : Value
-
-type MutableTuple<Value extends ReadonlyArray<unknown>> = {
-  -readonly [Key in keyof Value]: Mutable<Value[Key]>
-}
-
-function mutable<Value>(value: Value): Mutable<Value>
-function mutable(value: unknown): unknown {
-  return structuredClone(value)
-}
-
-function keyMethod(value: IntegrationMethodRegistration["method"] & { type: "key" }) {
-  return Schema.decodeUnknownSync(Integration.KeyMethod)({
-    type: "key",
-    ...(value.label === undefined ? {} : { label: value.label }),
-    ...(value.forms === undefined ? {} : { forms: value.forms }),
-  })
-}
-
-function oauthMethod(value: IntegrationMethodRegistration["method"] & { type: "oauth" }, id: Integration.MethodID) {
-  return Schema.decodeUnknownSync(Integration.OAuthMethod)({
-    id,
-    type: "oauth",
-    label: value.label,
-    ...(value.forms === undefined ? {} : { forms: value.forms }),
-  })
+  return {
+    ...value,
+    id: Integration.MethodID.make(value.id),
+  }
 }

 function agentInfo(value: Agent.Info) {
@@ -8,7 +8,6 @@ import { Plugin } from "@opencode-ai/core/plugin"
 import { PluginHost } from "@opencode-ai/core/plugin/host"
 import { AzurePlugin } from "@opencode-ai/core/plugin/provider/azure"
 import { Provider } from "@opencode-ai/core/provider"
-import { Integration } from "@opencode-ai/core/integration"
 import { testEffect } from "../lib/effect"
 import { PluginTestLayer } from "./fixture"

@@ -61,27 +60,6 @@ function fakeSelectorSdk(calls: string[]) {
 }

 describe("AzurePlugin", () => {
-  it.effect("registers a resource name form when the environment does not provide one", () =>
-    withEnv({ AZURE_RESOURCE_NAME: undefined, AZURE_COGNITIVE_SERVICES_RESOURCE_NAME: undefined }, () =>
-      Effect.gen(function* () {
-        yield* addPlugin()
-        expect((yield* (yield* Integration.Service).get(Integration.ID.make("azure")))?.methods).toContainEqual({
-          type: "key",
-          label: "API key",
-          forms: [
-            {
-              type: "string",
-              key: "resourceName",
-              title: "Enter Azure Resource Name",
-              placeholder: "e.g. my-models",
-              required: true,
-            },
-          ],
-        })
-      }),
-    ),
-  )
-
  it.effect("resolves resourceName from env", () =>
    withEnv({ AZURE_RESOURCE_NAME: "from-env" }, () =>
      Effect.gen(function* () {
@@ -217,17 +195,7 @@ describe("AzurePlugin", () => {
      Effect.gen(function* () {
        const plugin = yield* Plugin.Service
        const aisdk = yield* AISDK.Service
-        const catalog = yield* Catalog.Service
-        yield* catalog.transform((catalog) =>
-          catalog.provider.update(Provider.ID.azure, (provider) => {
-            provider.settings = { ...provider.settings, baseURL: "https://proxy.example.com/openai" }
-          }),
-        )
        yield* addPlugin()
-        expect((yield* (yield* Integration.Service).get(Integration.ID.make("azure")))?.methods).toContainEqual({
-          type: "key",
-          label: "API key",
-        })
        const result = yield* aisdk.runSDK({
          model: Model.Info.make({
            ...Model.Info.default(Provider.ID.azure, Model.ID.make("deployment")),
@@ -1,13 +1,11 @@
 import { AISDK } from "@opencode-ai/core/aisdk"
 import { describe, expect, mock } from "bun:test"
 import { Effect } from "effect"
-import { Catalog } from "@opencode-ai/core/catalog"
 import { Model } from "@opencode-ai/core/model"
 import { Plugin } from "@opencode-ai/core/plugin"
 import { PluginHost } from "@opencode-ai/core/plugin/host"
 import { CloudflareAIGatewayPlugin } from "@opencode-ai/core/plugin/provider/cloudflare-ai-gateway"
 import { Provider } from "@opencode-ai/core/provider"
-import { Integration } from "@opencode-ai/core/integration"
 import { testEffect } from "../lib/effect"
 import { PluginTestLayer } from "./fixture"

@@ -104,24 +102,6 @@ mock.module("ai-gateway-provider/providers/unified", () => ({
 }))

 describe("CloudflareAIGatewayPlugin", () => {
-  it.effect("registers account and gateway forms when the environment does not provide them", () =>
-    withEnv({ CLOUDFLARE_ACCOUNT_ID: undefined, CLOUDFLARE_GATEWAY_ID: undefined }, () =>
-      Effect.gen(function* () {
-        yield* addPlugin()
-        expect(
-          (yield* (yield* Integration.Service).get(Integration.ID.make("cloudflare-ai-gateway")))?.methods,
-        ).toContainEqual({
-          type: "key",
-          label: "Gateway API token",
-          forms: [
-            expect.objectContaining({ type: "string", key: "accountId", required: true }),
-            expect.objectContaining({ type: "string", key: "gatewayId", required: true }),
-          ],
-        })
-      }),
-    ),
-  )
-
  it.effect("requires account, gateway, and token before creating the unified SDK", () =>
    withEnv(
      {
@@ -377,16 +357,7 @@ describe("CloudflareAIGatewayPlugin", () => {
          resetCalls()
          const plugin = yield* Plugin.Service
          const aisdk = yield* AISDK.Service
-          const catalog = yield* Catalog.Service
-          yield* catalog.transform((catalog) =>
-            catalog.provider.update(Provider.ID.make("cloudflare-ai-gateway"), (provider) => {
-              provider.settings = { ...provider.settings, baseURL: "https://proxy.example/v1" }
-            }),
-          )
          yield* addPlugin()
-          expect(
-            (yield* (yield* Integration.Service).get(Integration.ID.make("cloudflare-ai-gateway")))?.methods,
-          ).toContainEqual({ type: "key", label: "Gateway API token" })

          const result = yield* aisdk.runSDK({
            model: Model.Info.make({
@@ -7,7 +7,6 @@ import { Plugin } from "@opencode-ai/core/plugin"
 import { PluginHost } from "@opencode-ai/core/plugin/host"
 import { CloudflareWorkersAIPlugin } from "@opencode-ai/core/plugin/provider/cloudflare-workers-ai"
 import { Provider } from "@opencode-ai/core/provider"
-import { Integration } from "@opencode-ai/core/integration"
 import type { LanguageModelV3 } from "@ai-sdk/provider"
 import { testEffect } from "../lib/effect"
 import { PluginTestLayer } from "./fixture"
@@ -80,29 +79,6 @@ function cloudflareHeaders(sdk: unknown, modelID = "@cf/model") {
 }

 describe("CloudflareWorkersAIPlugin", () => {
-  it.effect("registers an account form when the environment does not provide one", () =>
-    withEnv({ CLOUDFLARE_ACCOUNT_ID: undefined }, () =>
-      Effect.gen(function* () {
-        yield* addPlugin()
-        expect(
-          (yield* (yield* Integration.Service).get(Integration.ID.make("cloudflare-workers-ai")))?.methods,
-        ).toContainEqual({
-          type: "key",
-          label: "API key",
-          forms: [
-            {
-              type: "string",
-              key: "accountId",
-              title: "Enter your Cloudflare Account ID",
-              placeholder: "e.g. 1234567890abcdef1234567890abcdef",
-              required: true,
-            },
-          ],
-        })
-      }),
-    ),
-  )
-
  it.effect("maps account ID to endpoint URL and creates an OpenAI-compatible SDK", () =>
    withEnv({ CLOUDFLARE_ACCOUNT_ID: "acct", CLOUDFLARE_API_KEY: "key" }, () =>
      Effect.gen(function* () {
@@ -115,9 +91,6 @@ describe("CloudflareWorkersAIPlugin", () => {
          }),
        )
        yield* addPlugin()
-        expect(
-          (yield* (yield* Integration.Service).get(Integration.ID.make("cloudflare-workers-ai")))?.methods,
-        ).toContainEqual({ type: "key", label: "API key" })
        const provider = required(yield* catalog.provider.get(Provider.ID.make("cloudflare-workers-ai")))
        const sdk = yield* aisdk.runSDK({
          model: Model.Info.make({
@@ -162,16 +135,7 @@ describe("CloudflareWorkersAIPlugin", () => {
      Effect.gen(function* () {
        const plugin = yield* Plugin.Service
        const aisdk = yield* AISDK.Service
-        const catalog = yield* Catalog.Service
-        yield* catalog.transform((catalog) =>
-          catalog.provider.update(Provider.ID.make("cloudflare-workers-ai"), (provider) => {
-            provider.settings = { ...provider.settings, baseURL: "https://proxy.example/v1" }
-          }),
-        )
        yield* addPlugin()
-        expect(
-          (yield* (yield* Integration.Service).get(Integration.ID.make("cloudflare-workers-ai")))?.methods,
-        ).toContainEqual({ type: "key", label: "API key" })
        const result = yield* aisdk.runSDK({
          model: Model.Info.make({
            ...Model.Info.default(Provider.ID.make("cloudflare-workers-ai"), Model.ID.make("@cf/model")),
@@ -57,7 +57,7 @@ describe("GithubCopilotPlugin", () => {
        id: Integration.MethodID.make("device"),
        type: "oauth",
        label: "Login with GitHub Copilot",
-        forms: expect.any(Array),
+        prompts: expect.any(Array),
      })
    }),
  )
@@ -128,7 +128,7 @@ describe("OpencodePlugin", () => {
          const attempt = yield* integrations.oauth.connect({
            integrationID,
            methodID: Integration.MethodID.make("device"),
-            answers: { server: `${server.url.origin}/console///?ignored=true#ignored` },
+            inputs: { server: `${server.url.origin}/console///?ignored=true#ignored` },
          })
          expect(attempt.url).toBe(`${server.url.origin}/verify`)
          yield* eventually(
@@ -155,7 +155,7 @@ describe("OpencodePlugin", () => {
        .connect({
          integrationID: Integration.ID.make("opencode"),
          methodID: Integration.MethodID.make("device"),
-          answers: { server: "ftp://console.example.com" },
+          inputs: { server: "ftp://console.example.com" },
        })
        .pipe(Effect.flip)
      expect(error).toBeInstanceOf(Integration.AuthorizationError)
@@ -67,7 +67,7 @@ describe("built-in web search providers", () => {
        name: "Exa",
        methods: [{ type: "key" }, { type: "env", names: ["EXA_API_KEY"] }],
      })
-      yield* integrations.connection.key({ integrationID: Integration.ID.make("exa"), key: "exa secret", answers: {} })
+      yield* integrations.connection.key({ integrationID: Integration.ID.make("exa"), key: "exa secret" })
      expect(yield* websearch.query({ query: "effect typescript", providerID: WebSearch.ID.make("exa") })).toEqual(
        new WebSearch.Response({
          providerID: WebSearch.ID.make("exa"),
@@ -129,11 +129,7 @@ describe("built-in web search providers", () => {
      yield* WebSearchParallel.Plugin.effect(
        host({ integration: integrationHost(integrations), websearch: webSearchHost(websearch) }),
      )
-      yield* integrations.connection.key({
-        integrationID: Integration.ID.make("parallel"),
-        key: "parallel-secret",
-        answers: {},
-      })
+      yield* integrations.connection.key({ integrationID: Integration.ID.make("parallel"), key: "parallel-secret" })

      const output = yield* websearch.query({
        query: "effect layers",
@@ -90,10 +90,15 @@ test("Core reuses the canonical shared schemas", async () => {
    [coreFileSystem.Match, FileSystem.Match],
    [coreIntegration.ID, Integration.ID],
    [coreIntegration.MethodID, Integration.MethodID],
+    [coreIntegration.When, Integration.When],
+    [coreIntegration.TextPrompt, Integration.TextPrompt],
+    [coreIntegration.SelectPrompt, Integration.SelectPrompt],
+    [coreIntegration.Prompt, Integration.Prompt],
    [coreIntegration.OAuthMethod, Integration.OAuthMethod],
    [coreIntegration.KeyMethod, Integration.KeyMethod],
    [coreIntegration.EnvMethod, Integration.EnvMethod],
    [coreIntegration.Method, Integration.Method],
+    [coreIntegration.Inputs, Integration.Inputs],
    [coreIntegration.Ref, Integration.Ref],
    [coreLocation.Ref, Location.Ref],
    [coreAI.ProviderMetadata, AI.ProviderMetadata],
@@ -0,0 +1,18 @@
+import { describe, expect, test } from "bun:test"
+import { isSafeExternalUrl } from "./external-url"
+
+describe("external URL policy", () => {
+  test.each(["https://opencode.ai", "http://127.0.0.1:4096", "mailto:hello@opencode.ai"])("allows %s", (url) =>
+    expect(isSafeExternalUrl(url)).toBe(true),
+  )
+
+  test.each(["file:///tmp/test", "javascript:alert(1)", "data:text/html,test", "vscode://file/tmp/test", "nope"])(
+    "rejects %s",
+    (url) => expect(isSafeExternalUrl(url)).toBe(false),
+  )
+
+  test("rejects non-string values", () => {
+    expect(isSafeExternalUrl(null)).toBe(false)
+    expect(isSafeExternalUrl({ toString: () => "https://opencode.ai" })).toBe(false)
+  })
+})
@@ -0,0 +1,6 @@
+const protocols = new Set(["http:", "https:", "mailto:"])
+
+export function isSafeExternalUrl(value: unknown) {
+  if (typeof value !== "string" || !URL.canParse(value)) return false
+  return protocols.has(new URL(value).protocol)
+}
@@ -8,6 +8,7 @@ import type { DesktopMenuAction } from "@opencode-ai/app/desktop-menu"
 import type { FatalRendererError, ServerReadyData, TitlebarTheme } from "../preload/types"
 import { runDesktopMenuAction } from "./desktop-menu-actions"
 import { setForceFocus } from "./debug"
+import { isSafeExternalUrl } from "./external-url"
 import { assertAttachmentBudget, createPickedFileAuthorizations } from "./attachment-picker"
 import { getStore, removeStoreFileIfEmpty } from "./store"
 import { getPinchZoomEnabled, getWindowID, setPinchZoomEnabled, setTitlebar, updateTitlebar } from "./windows"
@@ -178,6 +179,7 @@ export function registerIpcHandlers(deps: Deps) {
  )

  ipcMain.on("open-link", (_event: IpcMainEvent, url: string) => {
+    if (!isSafeExternalUrl(url)) return
    void shell.openExternal(url)
  })

@@ -220,6 +220,11 @@ export function createMainWindow(id: string = randomUUID()) {
  state.manage(win)
  registerWindow(win, id)
  wireFullscreen(win)
+  win.webContents.on("will-frame-navigate", (event) => {
+    if (isRendererUrl(event.url)) return
+    event.preventDefault()
+  })
+  win.webContents.setWindowOpenHandler(() => ({ action: "deny" }))
  loadWindow(win, "index.html")
  wireZoom(win)

@@ -1,8 +1,9 @@
-import { ServerConnection, useServer, useTabs } from "@opencode-ai/app"
+import { ServerConnection, useServer, useSettings, useTabs } from "@opencode-ai/app"
 import { onMount } from "solid-js"

 export function DesktopFirstLaunchOnboarding(props: { initialUrl: string; onLoaded: () => void }) {
  const server = useServer()
+  const settings = useSettings()
  const tabs = useTabs()

  onMount(() => {
@@ -15,6 +16,7 @@ export function DesktopFirstLaunchOnboarding(props: { initialUrl: string; onLoad
        [server.ready.promise, tabs.ready.promise, tabs.recentReady.promise].map((p) => p ?? Promise.resolve()),
      )
      const existingInstall = await window.api.isOldLayoutEligible()
+      settings.general.setOldLayoutEligible(existingInstall)
      if (!server.isLocal()) return

      const pending = await window.api.isFirstLaunchOnboardingPending()
@@ -8,10 +8,10 @@ import type {
 } from "@opencode-ai/client"
 import type { IntegrationApi } from "@opencode-ai/client/effect/api"
 import { Credential } from "@opencode-ai/schema/credential"
-import { Form } from "@opencode-ai/schema/form"
 import type { Effect, Scope } from "effect"
 import type { Transform } from "./registration.js"

+type IntegrationInputs = Record<string, string>
 type IntegrationRef = { id: string; name: string }

 export type IntegrationOAuthAuthorization = {
@@ -31,7 +31,7 @@ export type IntegrationOAuthAuthorization = {
 export type IntegrationOAuthMethodRegistration = {
  readonly integrationID: string
  readonly method: IntegrationOAuthMethod
-  readonly authorize: (answers: Form.Answer) => Effect.Effect<IntegrationOAuthAuthorization, unknown, Scope.Scope>
+  readonly authorize: (inputs: IntegrationInputs) => Effect.Effect<IntegrationOAuthAuthorization, unknown, Scope.Scope>
  readonly refresh?: (credential: Credential.OAuth) => Effect.Effect<Credential.OAuth, unknown>
  readonly label?: (credential: Credential.OAuth) => string | undefined
 }
@@ -8,9 +8,9 @@ import type {
 } from "@opencode-ai/client"
 import type { IntegrationApi } from "@opencode-ai/client/promise/api"
 import { Credential } from "@opencode-ai/schema/credential"
-import { Form } from "@opencode-ai/schema/form"
 import type { Transform } from "./registration.js"

+type IntegrationInputs = Record<string, string>
 type IntegrationRef = { id: string; name: string }

 export type IntegrationOAuthAuthorization = {
@@ -31,7 +31,7 @@ export type IntegrationOAuthAuthorization = {
 export type IntegrationOAuthMethodRegistration = {
  readonly integrationID: string
  readonly method: IntegrationOAuthMethod
-  readonly authorize: (answers: Form.Answer) => Promise<IntegrationOAuthAuthorization>
+  readonly authorize: (inputs: IntegrationInputs) => Promise<IntegrationOAuthAuthorization>
  readonly refresh?: (credential: Credential.OAuth) => Promise<Credential.OAuth>
  readonly label?: (credential: Credential.OAuth) => string | undefined
 }
@@ -1,11 +1,12 @@
 import { Integration } from "@opencode-ai/schema/integration"
 import { Location } from "@opencode-ai/schema/location"
-import { Form } from "@opencode-ai/schema/form"
 import { Schema } from "effect"
 import { HttpApiEndpoint, HttpApiGroup, HttpApiSchema, OpenApi } from "effect/unstable/httpapi"
 import { InvalidRequestError } from "../errors.js"
 import { LocationQuery, locationQueryOpenApi } from "./location.js"

+const Inputs = Schema.Record(Schema.String, Schema.String)
+
 export const IntegrationGroup = HttpApiGroup.make("server.integration")
  .add(
    HttpApiEndpoint.get("integration.list", "/api/integration", {
@@ -58,7 +59,6 @@ export const IntegrationGroup = HttpApiGroup.make("server.integration")
      query: LocationQuery,
      payload: Schema.Struct({
        key: Schema.String,
-        answers: Form.Answer,
        label: Schema.optional(Schema.String),
      }),
      success: HttpApiSchema.NoContent,
@@ -79,7 +79,7 @@ export const IntegrationGroup = HttpApiGroup.make("server.integration")
      query: LocationQuery,
      payload: Schema.Struct({
        methodID: Integration.MethodID,
-        answers: Form.Answer,
+        inputs: Inputs,
        label: Schema.optional(Schema.String),
      }),
      success: Location.response(Integration.Attempt),
@@ -5,7 +5,6 @@ import { optional } from "./schema.js"
 import { IntegrationMethodID } from "./integration-id.js"
 import { ascending } from "./identifier.js"
 import { NonNegativeInt, statics } from "./schema.js"
-import { Form } from "./form.js"

 export const ID = Schema.String.pipe(
  Schema.brand("Credential.ID"),
@@ -28,7 +27,6 @@ export const Key = Schema.Struct({
  type: Schema.Literal("key"),
  key: Schema.String,
  metadata: optional(Schema.Record(Schema.String, Schema.Unknown)),
-  configuration: optional(Form.Answer),
 }).annotate({ identifier: "Credential.Key" })

 export const Value = Schema.Union([OAuth, Key])
@@ -7,7 +7,6 @@ import { Connection } from "./connection.js"
 import { ascending } from "./identifier.js"
 import { statics } from "./schema.js"
 import { IntegrationID, IntegrationMethodID } from "./integration-id.js"
-import { Form } from "./form.js"

 export const ID = IntegrationID
 export type ID = typeof ID.Type
@@ -15,12 +14,46 @@ export type ID = typeof ID.Type
 export const MethodID = IntegrationMethodID
 export type MethodID = typeof MethodID.Type

+export interface When extends Schema.Schema.Type<typeof When> {}
+export const When = Schema.Struct({
+  key: Schema.String,
+  op: Schema.Literals(["eq", "neq"]),
+  value: Schema.String,
+}).annotate({ identifier: "Integration.When" })
+
+export interface TextPrompt extends Schema.Schema.Type<typeof TextPrompt> {}
+export const TextPrompt = Schema.Struct({
+  type: Schema.Literal("text"),
+  key: Schema.String,
+  message: Schema.String,
+  placeholder: optional(Schema.String),
+  when: optional(When),
+}).annotate({ identifier: "Integration.TextPrompt" })
+
+export interface SelectPrompt extends Schema.Schema.Type<typeof SelectPrompt> {}
+export const SelectPrompt = Schema.Struct({
+  type: Schema.Literal("select"),
+  key: Schema.String,
+  message: Schema.String,
+  options: Schema.Array(
+    Schema.Struct({
+      label: Schema.String,
+      value: Schema.String,
+      hint: optional(Schema.String),
+    }),
+  ),
+  when: optional(When),
+}).annotate({ identifier: "Integration.SelectPrompt" })
+
+export const Prompt = Schema.Union([TextPrompt, SelectPrompt]).pipe(Schema.toTaggedUnion("type"))
+export type Prompt = typeof Prompt.Type
+
 export interface OAuthMethod extends Schema.Schema.Type<typeof OAuthMethod> {}
 export const OAuthMethod = Schema.Struct({
  id: MethodID,
  type: Schema.Literal("oauth"),
  label: Schema.String,
-  forms: optional(Form.Fields),
+  prompts: optional(Schema.Array(Prompt)),
 }).annotate({ identifier: "Integration.OAuthMethod" })

 export interface CommandMethod extends Schema.Schema.Type<typeof CommandMethod> {}
@@ -35,7 +68,6 @@ export interface KeyMethod extends Schema.Schema.Type<typeof KeyMethod> {}
 export const KeyMethod = Schema.Struct({
  type: Schema.Literal("key"),
  label: optional(Schema.String),
-  forms: optional(Form.Fields),
 }).annotate({ identifier: "Integration.KeyMethod" })

 export interface EnvMethod extends Schema.Schema.Type<typeof EnvMethod> {}
@@ -49,6 +81,9 @@ export const Method = Schema.Union([OAuthMethod, CommandMethod, KeyMethod, EnvMe
  .annotate({ identifier: "Integration.Method" })
 export type Method = typeof Method.Type

+export const Inputs = Schema.Record(Schema.String, Schema.String).annotate({ identifier: "Integration.Inputs" })
+export type Inputs = typeof Inputs.Type
+
 const Updated = ephemeral({
  type: "integration.updated",
  schema: {},
@@ -58,7 +58,6 @@ export const IntegrationHandler = HttpApiBuilder.group(Api, "server.integration"
            service.connection.key({
              integrationID: ctx.params.integrationID,
              key: ctx.payload.key,
-              answers: ctx.payload.answers,
              label: ctx.payload.label,
            }),
          )
@@ -74,7 +73,7 @@ export const IntegrationHandler = HttpApiBuilder.group(Api, "server.integration"
              service.oauth.connect({
                integrationID: ctx.params.integrationID,
                methodID: ctx.payload.methodID,
-                answers: ctx.payload.answers,
+                inputs: ctx.payload.inputs,
                label: ctx.payload.label,
              }),
            ),
@@ -5,8 +5,6 @@ import type {
  IntegrationInfo,
  IntegrationOauthConnectOutput,
  IntegrationOAuthMethod,
-  FormAnswer,
-  FormFields,
 } from "@opencode-ai/client"
 import open from "open"
 import { createMemo, createSignal, onCleanup, onMount, Show } from "solid-js"
@@ -20,7 +18,6 @@ import { DialogPrompt } from "../ui/dialog-prompt"
 import { DialogSelect } from "../ui/dialog-select"
 import { Link } from "../ui/link"
 import { useToast } from "../ui/toast"
-import { FormInput } from "../routes/session/form"

 const INTEGRATION_PRIORITY: Record<string, number> = {
  opencode: 0,
@@ -184,7 +181,7 @@ function openMethod(
  onConnected?: OnIntegrationConnected,
 ) {
  if (method.type === "key") {
-    void beginKey(integration, method, dialog, onConnected)
+    dialog.replace(() => <KeyMethod integration={integration} method={method} onConnected={onConnected} />)
    return
  }
  if (method.type === "command") {
@@ -194,21 +191,6 @@ function openMethod(
  void beginOAuth(integration, method, dialog, onConnected)
 }

-async function beginKey(
-  integration: IntegrationInfo,
-  method: Extract<ConnectMethod, { type: "key" }>,
-  dialog: ReturnType<typeof useDialog>,
-  onConnected?: OnIntegrationConnected,
-) {
-  const answers = method.forms
-    ? await formAnswers(dialog, method.label ?? `Connect ${integration.name}`, method.forms)
-    : {}
-  if (answers === null) return
-  dialog.replace(() => (
-    <KeyMethod integration={integration} method={method} answers={answers} onConnected={onConnected} />
-  ))
-}
-
 function CommandStarting(props: {
  integration: IntegrationInfo
  method: Extract<ConnectMethod, { type: "command" }>
@@ -354,7 +336,6 @@ function CommandView(props: { title: string; output: string; message: string })
 function KeyMethod(props: {
  integration: IntegrationInfo
  method: Extract<ConnectMethod, { type: "key" }>
-  answers: FormAnswer
  onConnected?: OnIntegrationConnected
 }) {
  const data = useData()
@@ -375,7 +356,6 @@ function KeyMethod(props: {
            integrationID: props.integration.id,
            location: location(data),
            key,
-            answers: props.answers,
          })
          .then(() => connected(props.integration, data, dialog, toast, props.onConnected))
          .catch((cause) => setError(message(cause)))
@@ -393,17 +373,17 @@ async function beginOAuth(
  dialog: ReturnType<typeof useDialog>,
  onConnected?: OnIntegrationConnected,
 ) {
-  const answers = method.forms ? await formAnswers(dialog, method.label, method.forms) : {}
-  if (answers === null) return
+  const inputs = method.prompts?.length ? await promptInputs(dialog, method.prompts) : {}
+  if (inputs === null) return
  dialog.replace(() => (
-    <OAuthStarting integration={integration} method={method} answers={answers} onConnected={onConnected} />
+    <OAuthStarting integration={integration} method={method} inputs={inputs} onConnected={onConnected} />
  ))
 }

 function OAuthStarting(props: {
  integration: IntegrationInfo
  method: IntegrationOAuthMethod
-  answers: FormAnswer
+  inputs: Record<string, string>
  onConnected?: OnIntegrationConnected
 }) {
  const data = useData()
@@ -417,7 +397,7 @@ function OAuthStarting(props: {
        integrationID: props.integration.id,
        location: location(data),
        methodID: props.method.id,
-        answers: props.answers,
+        inputs: props.inputs,
      })
      .then((result) => {
        if (result.data.mode === "code") {
@@ -641,23 +621,49 @@ function OAuthView(props: {
  )
 }

-async function formAnswers(dialog: ReturnType<typeof useDialog>, title: string, forms: FormFields) {
-  return new Promise<FormAnswer | null>((resolve) => {
-    dialog.replace(
-      () => (
-        <FormInput
-          form={{ title, fields: forms }}
-          onSubmit={resolve}
-          onCancel={() => {
-            dialog.clear()
-            resolve(null)
-          }}
-        />
-      ),
-      () => resolve(null),
-    )
-    dialog.setSize("large")
-  })
+async function promptInputs(
+  dialog: ReturnType<typeof useDialog>,
+  prompts: NonNullable<IntegrationOAuthMethod["prompts"]>,
+) {
+  const inputs: Record<string, string> = {}
+  for (const prompt of prompts) {
+    if (prompt.when) {
+      const value = inputs[prompt.when.key]
+      if (value === undefined) continue
+      const matches = prompt.when.op === "eq" ? value === prompt.when.value : value !== prompt.when.value
+      if (!matches) continue
+    }
+    if (prompt.type === "select") {
+      const value = await new Promise<string | null>((resolve) => {
+        dialog.replace(
+          () => (
+            <DialogSelect
+              title={prompt.message}
+              options={prompt.options.map((option) => ({
+                title: option.label,
+                value: option.value,
+                description: option.hint,
+              }))}
+              onSelect={(option) => resolve(option.value)}
+            />
+          ),
+          () => resolve(null),
+        )
+      })
+      if (value === null) return null
+      inputs[prompt.key] = value
+      continue
+    }
+    const value = await new Promise<string | null>((resolve) => {
+      dialog.replace(
+        () => <DialogPrompt title={prompt.message} placeholder={prompt.placeholder} onConfirm={resolve} />,
+        () => resolve(null),
+      )
+    })
+    if (value === null) return null
+    inputs[prompt.key] = value
+  }
+  return inputs
 }

 async function connected(
@@ -4,7 +4,7 @@ import { useRenderer, useTerminalDimensions } from "@opentui/solid"
 import type { ScrollBoxRenderable, TextareaRenderable } from "@opentui/core"
 import open from "open"
 import { useTheme, useThemes } from "../../context/theme"
-import type { FormAnswer, FormField, FormValue } from "@opencode-ai/client"
+import type { FormField, FormValue } from "@opencode-ai/client"
 import type { FormWithLocation } from "../../context/data"
 import { useClient } from "../../context/client"
 import { useClipboard } from "../../context/clipboard"
@@ -44,27 +44,6 @@ function requestOptions(form: FormWithLocation) {

 export function FormPrompt(props: { form: FormWithLocation }) {
  const client = useClient()
-  return (
-    <FormInput
-      form={props.form}
-      onSubmit={(answer) =>
-        client.api.form.reply(
-          { sessionID: props.form.sessionID, formID: props.form.id, answer },
-          requestOptions(props.form),
-        )
-      }
-      onCancel={() =>
-        client.api.form.cancel({ sessionID: props.form.sessionID, formID: props.form.id }, requestOptions(props.form))
-      }
-    />
-  )
-}
-
-export function FormInput(props: {
-  form: Pick<FormWithLocation, "title" | "fields" | "metadata">
-  onSubmit: (answer: FormAnswer) => Promise<unknown> | void
-  onCancel: () => Promise<unknown> | void
-}) {
  const themes = useThemes()
  const theme = useTheme("elevated")
  const themeMode = themes.mode
@@ -202,14 +181,23 @@ export function FormInput(props: {
  }

  function replySingle(field: FormAnswerField, value: FormValue) {
-    Promise.resolve(props.onSubmit({ [field.key]: value })).catch((error: unknown) => {
-      setStore(
-        "error",
-        typeof error === "object" && error !== null && "message" in error && typeof error.message === "string"
-          ? error.message
-          : "Invalid answer",
+    client.api.form
+      .reply(
+        {
+          sessionID: props.form.sessionID,
+          formID: props.form.id,
+          answer: { [field.key]: value },
+        },
+        requestOptions(props.form),
      )
-    })
+      .catch((error: unknown) => {
+        setStore(
+          "error",
+          typeof error === "object" && error !== null && "message" in error && typeof error.message === "string"
+            ? error.message
+            : "Invalid answer",
+        )
+      })
  }

  function pick(value: FormValue, customValue?: string) {
@@ -362,7 +350,7 @@ export function FormInput(props: {
  }

  function cancel() {
-    void props.onCancel()
+    void client.api.form.cancel({ sessionID: props.form.sessionID, formID: props.form.id }, requestOptions(props.form))
  }

  function openExternal() {
@@ -414,23 +402,28 @@ export function FormInput(props: {
      setStore("error", formValidateValue(invalid, store.answers[invalid.key]) ?? "Invalid answer")
      return
    }
-    Promise.resolve(
-      props.onSubmit(
-        Object.fromEntries(
-          fields().flatMap((field) => {
-            const value = store.answers[field.key]
-            return value === undefined ? [] : [[field.key, value] as const]
-          }),
-        ),
-      ),
-    ).catch((error: unknown) => {
-      setStore(
-        "error",
-        typeof error === "object" && error !== null && "message" in error && typeof error.message === "string"
-          ? error.message
-          : "Invalid answer",
+    client.api.form
+      .reply(
+        {
+          sessionID: props.form.sessionID,
+          formID: props.form.id,
+          answer: Object.fromEntries(
+            fields().flatMap((field) => {
+              const value = store.answers[field.key]
+              return value === undefined ? [] : [[field.key, value] as const]
+            }),
+          ),
+        },
+        requestOptions(props.form),
      )
-    })
+      .catch((error: unknown) => {
+        setStore(
+          "error",
+          typeof error === "object" && error !== null && "message" in error && typeof error.message === "string"
+            ? error.message
+            : "Invalid answer",
+        )
+      })
  }

  onMount(() => onCleanup(keymap.mode.push(FORM_MODE)))
@@ -458,7 +451,10 @@ export function FormInput(props: {
        group: "Form",
        run: () => {
          if (textual()) {
-            void props.onCancel()
+            void client.api.form.cancel(
+              { sessionID: props.form.sessionID, formID: props.form.id },
+              requestOptions(props.form),
+            )
            return
          }
          setStore("editing", false)