Apply PR #30303: feat(tui): add session render state dump

Co-authored-by: Brendan Allan <git@brendonovich.dev>
Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>

.gitattributes

@@ -0,0 +1,2 @@
+packages/core/migration/**/snapshot.json linguist-generated
+packages/core/src/database/migration.gen.ts linguist-generated

bun.lock

@@ -290,6 +290,7 @@
         "@tsconfig/bun": "catalog:",
         "@types/bun": "catalog:",
         "@types/cross-spawn": "catalog:",
+        "@types/node": "catalog:",
         "@types/npm-package-arg": "6.1.4",
         "@types/npmcli__arborist": "6.3.3",
         "@types/semver": "catalog:",

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-51jxaHLvv2Staz9NN9N4EYoNmr2fZeDvfKZ5enf/Wx0=",
-    "aarch64-linux": "sha256-oGMMlgSJx7Yw5qN6LOquCD/K8GPLy4kDo34AOJGmcso=",
-    "aarch64-darwin": "sha256-j7IvnyY8Cj4a509D85i+FgfsyQiBstxagvVWMp6y5hI=",
-    "x86_64-darwin": "sha256-Dd36AN6LopLNV79d7i9lGz5kKOuv6mk1YyBlmdcIhZY="
+    "x86_64-linux": "sha256-BZR0H2ZmkYNm7g0bx2Vm/15k1jZbtBQLuIkmZbrUepM=",
+    "aarch64-linux": "sha256-0WVQV0i95AZXtCm5/3txmINTAtenplnPH4A49oZ51aE=",
+    "aarch64-darwin": "sha256-ELjSy1HfKSk+VZaOIxgcZl1Imnga8rkKZjKu32bzzvg=",
+    "x86_64-darwin": "sha256-cwXZNYAiOXq63/gAuqJtSSptZUA7cTficVWINAw8iTM="
   }
 }

packages/app/src/app.tsx

@@ -43,6 +43,7 @@ import { PromptProvider } from "@/context/prompt"
 import { ServerConnection, ServerProvider, serverName, useServer } from "@/context/server"
 import { SettingsProvider, useSettings } from "@/context/settings"
 import { TerminalProvider } from "@/context/terminal"
+import { WslServersProvider } from "@/context/wsl-servers"
 import DirectoryLayout from "@/pages/directory-layout"
 import Layout from "@/pages/layout"
 import { ErrorPage } from "./pages/error"
@@ -71,7 +72,7 @@ declare global {
     __OPENCODE__?: {
       updaterEnabled?: boolean
       deepLinks?: string[]
-      wsl?: boolean
+      activeServer?: string
     }
     api?: {
       setTitlebar?: (theme: { mode: "light" | "dark" }) => Promise<void>
@@ -171,11 +172,13 @@ export function AppBaseProviders(props: ParentProps<{ locale?: Locale }>) {
               }}
             >
               <QueryProvider>
-                <DialogProvider>
-                  <MarkedProvider>
-                    <FileComponentProvider component={File}>{props.children}</FileComponentProvider>
-                  </MarkedProvider>
-                </DialogProvider>
+                <WslServersProvider>
+                  <DialogProvider>
+                    <MarkedProvider>
+                      <FileComponentProvider component={File}>{props.children}</FileComponentProvider>
+                    </MarkedProvider>
+                  </DialogProvider>
+                </WslServersProvider>
               </QueryProvider>
             </ErrorBoundary>
           </UiI18nBridge>
@@ -298,11 +301,11 @@ function ConnectionError(props: { onRetry?: () => void; onServerSelected?: (key:
   )
 }
 
-function ServerKey(props: ParentProps) {
+function ServerKey(props: { children: (key: ServerConnection.Key) => JSX.Element }) {
   const server = useServer()
   return (
     <Show when={server.key} keyed>
-      {props.children}
+      {(key) => props.children(key)}
     </Show>
   )
 }
@@ -319,22 +322,24 @@ export function AppInterface(props: {
       <ServersProvider>
         <ConnectionGate disableHealthCheck={props.disableHealthCheck}>
           <ServerKey>
-            <QueryProvider>
-              <ServerSDKProvider>
-                <ServerSyncProvider>
-                  <Dynamic
-                    component={props.router ?? Router}
-                    root={(routerProps) => <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>}
-                  >
-                    <Route path="/" component={HomeRoute} />
-                    <Route path="/:dir" component={DirectoryLayout}>
-                      <Route path="/" component={() => <Navigate href="session" />} />
-                      <Route path="/session/:id?" component={SessionRoute} />
-                    </Route>
-                  </Dynamic>
-                </ServerSyncProvider>
-              </ServerSDKProvider>
-            </QueryProvider>
+            {() => (
+              <QueryProvider>
+                <ServerSDKProvider>
+                  <ServerSyncProvider>
+                    <Dynamic
+                      component={props.router ?? Router}
+                      root={(routerProps) => <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>}
+                    >
+                      <Route path="/" component={HomeRoute} />
+                      <Route path="/:dir" component={DirectoryLayout}>
+                        <Route path="/" component={() => <Navigate href="session" />} />
+                        <Route path="/session/:id?" component={SessionRoute} />
+                      </Route>
+                    </Dynamic>
+                  </ServerSyncProvider>
+                </ServerSDKProvider>
+              </QueryProvider>
+            )}
           </ServerKey>
         </ConnectionGate>
       </ServersProvider>

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

@@ -8,7 +8,7 @@ import { List, type ListRef } from "@opencode-ai/ui/list"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { TextField } from "@opencode-ai/ui/text-field"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import { createEffect, createMemo, createResource, Match, onCleanup, onMount, Switch } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { Link } from "@/components/link"

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

@@ -5,7 +5,7 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { useMutation } from "@tanstack/solid-query"
 import { TextField } from "@opencode-ai/ui/text-field"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import { batch, For } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { Link } from "@/components/link"

packages/app/src/components/dialog-fork.tsx

@@ -6,7 +6,7 @@ import { usePrompt } from "@/context/prompt"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import { extractPromptFromParts } from "@/utils/prompt"
 import type { TextPart as SDKTextPart } from "@opencode-ai/sdk/v2/client"
 import { base64Encode } from "@opencode-ai/core/util/encode"

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

@@ -5,20 +5,26 @@ import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { List } from "@opencode-ai/ui/list"
+import { Spinner } from "@opencode-ai/ui/spinner"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { useMutation } from "@tanstack/solid-query"
 import { showToast } from "@opencode-ai/ui/toast"
-import { useNavigate } from "@solidjs/router"
-import { createEffect, createMemo, createResource, onCleanup, Show } from "solid-js"
+import { batch, createEffect, createMemo, createResource, For, onCleanup, Show, untrack } from "solid-js"
 import { createStore, reconcile } from "solid-js/store"
+import { DialogWslServer } from "@/components/dialog-wsl-server"
 import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
+import { useWslServers } from "@/context/wsl-servers"
 import { type ServerHealth, useCheckServerHealth } from "@/utils/server-health"
 
 const DEFAULT_USERNAME = "opencode"
 
+interface DialogSelectServerProps {
+  onNavigateHome?: () => void
+}
+
 interface ServerFormProps {
   value: string
   name: string
@@ -27,7 +33,6 @@ interface ServerFormProps {
   placeholder: string
   busy: boolean
   error: string
-  status: boolean | undefined
   onChange: (value: string) => void
   onNameChange: (value: string) => void
   onUsernameChange: (value: string) => void
@@ -44,15 +49,17 @@ function showRequestError(language: ReturnType<typeof useLanguage>, err: unknown
   })
 }
 
+function isWslSidecar(conn: ServerConnection.Any): conn is ServerConnection.Sidecar & { variant: "wsl" } {
+  return conn.type === "sidecar" && conn.variant === "wsl"
+}
+
 function useDefaultServer() {
   const language = useLanguage()
   const platform = usePlatform()
-  const [defaultKey, defaultUrlActions] = createResource(
+  const [defaultKey, defaultActions] = createResource(
     async () => {
       try {
-        const key = await platform.getDefaultServer?.()
-        if (!key) return null
-        return key
+        return (await platform.getDefaultServer?.()) ?? null
       } catch (err) {
         showRequestError(language, err)
         return null
@@ -60,52 +67,18 @@ function useDefaultServer() {
     },
     { initialValue: null },
   )
-
   const canDefault = createMemo(() => !!platform.getDefaultServer && !!platform.setDefaultServer)
   const setDefault = async (key: ServerConnection.Key | null) => {
     try {
       await platform.setDefaultServer?.(key)
-      defaultUrlActions.mutate(key)
+      defaultActions.mutate(key)
     } catch (err) {
       showRequestError(language, err)
     }
   }
-
   return { defaultKey, canDefault, setDefault }
 }
 
-function useServerPreview() {
-  const checkServerHealth = useCheckServerHealth()
-
-  const looksComplete = (value: string) => {
-    const normalized = normalizeServerUrl(value)
-    if (!normalized) return false
-    const host = normalized.replace(/^https?:\/\//, "").split("/")[0]
-    if (!host) return false
-    if (host.includes("localhost") || host.startsWith("127.0.0.1")) return true
-    return host.includes(".") || host.includes(":")
-  }
-
-  const previewStatus = async (
-    value: string,
-    username: string,
-    password: string,
-    setStatus: (value: boolean | undefined) => void,
-  ) => {
-    setStatus(undefined)
-    if (!looksComplete(value)) return
-    const normalized = normalizeServerUrl(value)
-    if (!normalized) return
-    const http: ServerConnection.HttpBase = { url: normalized }
-    if (username) http.username = username
-    if (password) http.password = password
-    const result = await checkServerHealth(http)
-    setStatus(result.healthy)
-  }
-
-  return { previewStatus }
-}
-
 function ServerForm(props: ServerFormProps) {
   const language = useLanguage()
   const keyDown = (event: KeyboardEvent) => {
@@ -171,15 +144,18 @@ function ServerForm(props: ServerFormProps) {
   )
 }
 
-export function DialogSelectServer() {
-  const navigate = useNavigate()
+export function DialogSelectServer(props: DialogSelectServerProps = {}) {
   const dialog = useDialog()
   const server = useServer()
   const platform = usePlatform()
   const language = useLanguage()
-  const { defaultKey, canDefault, setDefault } = useDefaultServer()
-  const { previewStatus } = useServerPreview()
+  const wslServers = useWslServers()
+  const defaultServer = useDefaultServer()
   const checkServerHealth = useCheckServerHealth()
+  let disposed = false
+  onCleanup(() => {
+    disposed = true
+  })
   const [store, setStore] = createStore({
     status: {} as Record<ServerConnection.Key, ServerHealth | undefined>,
     addServer: {
@@ -189,7 +165,9 @@ export function DialogSelectServer() {
       password: "",
       error: "",
       showForm: false,
-      status: undefined as boolean | undefined,
+    },
+    addWsl: {
+      showWizard: false,
     },
     editServer: {
       id: undefined as string | undefined,
@@ -198,7 +176,6 @@ export function DialogSelectServer() {
       username: "",
       password: "",
       error: "",
-      status: undefined as boolean | undefined,
     },
   })
 
@@ -210,7 +187,6 @@ export function DialogSelectServer() {
       password: "",
       error: "",
       showForm: false,
-      status: undefined,
     })
   }
   const resetEdit = () => {
@@ -221,7 +197,6 @@ export function DialogSelectServer() {
       username: "",
       password: "",
       error: "",
-      status: undefined,
     })
   }
 
@@ -294,6 +269,32 @@ export function DialogSelectServer() {
     },
   }))
 
+  const removeWslMutation = useMutation(() => ({
+    mutationFn: async (key: ServerConnection.Key) => {
+      await platform.wslServers?.removeServer(key)
+      return key
+    },
+    onSuccess: async (key) => {
+      if (defaultServer.defaultKey() === key) await defaultServer.setDefault(null)
+      server.remove(key)
+    },
+    onError: (err) => showRequestError(language, err),
+  }))
+
+  const retryWslMutation = useMutation(() => ({
+    mutationFn: async (key: ServerConnection.Key) => {
+      await platform.wslServers?.startServer(key)
+    },
+    onError: (err) => showRequestError(language, err),
+  }))
+
+  const updateWslMutation = useMutation(() => ({
+    mutationFn: async (distro: string) => {
+      await platform.wslServers?.installOpencode(distro)
+    },
+    onError: (err) => showRequestError(language, err),
+  }))
+
   const replaceServer = (original: ServerConnection.Http, next: ServerConnection.Http) => {
     const active = server.key
     const newConn = server.add(next)
@@ -312,6 +313,32 @@ export function DialogSelectServer() {
   })
 
   const current = createMemo(() => items().find((x) => ServerConnection.key(x) === server.key) ?? items()[0])
+  const wslState = () => wslServers.data
+  const healthPollKey = createMemo(() =>
+    items()
+      .map((conn) =>
+        [ServerConnection.key(conn), conn.http.url, conn.http.username ?? "", conn.http.password ?? ""].join("\n"),
+      )
+      .join("\n\n"),
+  )
+  const health = (key: ServerConnection.Key) => store.status[key]
+  const wslRuntime = (conn: ServerConnection.Any) => {
+    if (!isWslSidecar(conn)) return
+    return wslState()?.servers.find((item) => item.config.id === ServerConnection.key(conn))?.runtime
+  }
+  const nonReadyWslServers = createMemo(() =>
+    (wslState()?.servers ?? []).filter((item) => item.runtime.kind !== "ready"),
+  )
+  const canRetryWsl = (conn: ServerConnection.Any) => {
+    const runtime = wslRuntime(conn)
+    return runtime?.kind === "failed" || runtime?.kind === "stopped"
+  }
+  const canRetryWslRuntime = (kind: string) => kind === "failed" || kind === "stopped"
+  const wslRuntimeLabel = (kind: string) => {
+    if (kind === "starting") return "Starting"
+    if (kind === "failed") return "Failed"
+    return "Stopped"
+  }
 
   const sortedItems = createMemo(() => {
     const list = items()
@@ -326,7 +353,7 @@ export function DialogSelectServer() {
     return list.slice().sort((a, b) => {
       if (a === active) return -1
       if (b === active) return 1
-      const diff = rank(store.status[ServerConnection.key(a)]) - rank(store.status[ServerConnection.key(b)])
+      const diff = rank(health(ServerConnection.key(a))) - rank(health(ServerConnection.key(b)))
       if (diff !== 0) return diff
       return (order.get(a) ?? 0) - (order.get(b) ?? 0)
     })
@@ -334,39 +361,60 @@ export function DialogSelectServer() {
 
   async function refreshHealth() {
     const results: Record<ServerConnection.Key, ServerHealth> = {}
+    const list = untrack(items)
     await Promise.all(
-      items().map(async (conn) => {
+      list.map(async (conn) => {
         results[ServerConnection.key(conn)] = await checkServerHealth(conn.http)
       }),
     )
+    if (disposed) return
     setStore("status", reconcile(results))
   }
 
   createEffect(() => {
-    items()
+    healthPollKey()
     void refreshHealth()
     const interval = setInterval(refreshHealth, 10_000)
     onCleanup(() => clearInterval(interval))
   })
 
+  const wslCheck = (conn: ServerConnection.Any) => {
+    if (!isWslSidecar(conn)) return null
+    return wslState()?.opencodeChecks[conn.distro] ?? null
+  }
+
   async function select(conn: ServerConnection.Any, persist?: boolean) {
-    if (!persist && store.status[ServerConnection.key(conn)]?.healthy === false) return
-    dialog.close()
-    if (persist && conn.type === "http") {
-      server.add(conn)
-      navigate("/")
+    if (!persist && health(ServerConnection.key(conn))?.healthy === false) return
+    const nextKey = ServerConnection.key(conn)
+    const changed = server.key !== nextKey
+
+    const navigateHome = () => props.onNavigateHome?.()
+
+    const apply = () => {
+      dialog.close()
+      if (persist && conn.type === "http") {
+        server.add(conn)
+        navigateHome()
+        return
+      }
+
+      batch(() => {
+        navigateHome()
+        server.setActive(nextKey)
+      })
+    }
+
+    if (!changed) {
+      await apply()
       return
     }
-    navigate("/")
-    queueMicrotask(() => server.setActive(ServerConnection.key(conn)))
+
+    apply()
   }
 
   const handleAddChange = (value: string) => {
     if (addMutation.isPending) return
     setStore("addServer", { url: value, error: "" })
-    void previewStatus(value, store.addServer.username, store.addServer.password, (next) =>
-      setStore("addServer", { status: next }),
-    )
   }
 
   const handleAddNameChange = (value: string) => {
@@ -377,25 +425,16 @@ export function DialogSelectServer() {
   const handleAddUsernameChange = (value: string) => {
     if (addMutation.isPending) return
     setStore("addServer", { username: value, error: "" })
-    void previewStatus(store.addServer.url, value, store.addServer.password, (next) =>
-      setStore("addServer", { status: next }),
-    )
   }
 
   const handleAddPasswordChange = (value: string) => {
     if (addMutation.isPending) return
     setStore("addServer", { password: value, error: "" })
-    void previewStatus(store.addServer.url, store.addServer.username, value, (next) =>
-      setStore("addServer", { status: next }),
-    )
   }
 
   const handleEditChange = (value: string) => {
     if (editMutation.isPending) return
     setStore("editServer", { value, error: "" })
-    void previewStatus(value, store.editServer.username, store.editServer.password, (next) =>
-      setStore("editServer", { status: next }),
-    )
   }
 
   const handleEditNameChange = (value: string) => {
@@ -406,20 +445,15 @@ export function DialogSelectServer() {
   const handleEditUsernameChange = (value: string) => {
     if (editMutation.isPending) return
     setStore("editServer", { username: value, error: "" })
-    void previewStatus(store.editServer.value, value, store.editServer.password, (next) =>
-      setStore("editServer", { status: next }),
-    )
   }
 
   const handleEditPasswordChange = (value: string) => {
     if (editMutation.isPending) return
     setStore("editServer", { password: value, error: "" })
-    void previewStatus(store.editServer.value, store.editServer.username, value, (next) =>
-      setStore("editServer", { status: next }),
-    )
   }
 
-  const mode = createMemo<"list" | "add" | "edit">(() => {
+  const mode = createMemo<"list" | "add-wsl" | "add" | "edit">(() => {
+    if (store.addWsl.showWizard) return "add-wsl"
     if (store.editServer.id) return "edit"
     if (store.addServer.showForm) return "add"
     return "list"
@@ -433,9 +467,11 @@ export function DialogSelectServer() {
   const resetForm = () => {
     resetAdd()
     resetEdit()
+    setStore("addWsl", "showWizard", false)
   }
 
   const startAdd = () => {
+    setStore("addWsl", "showWizard", false)
     resetEdit()
     setStore("addServer", {
       showForm: true,
@@ -444,11 +480,11 @@ export function DialogSelectServer() {
       username: DEFAULT_USERNAME,
       password: "",
       error: "",
-      status: undefined,
     })
   }
 
   const startEdit = (conn: ServerConnection.Http) => {
+    setStore("addWsl", "showWizard", false)
     resetAdd()
     setStore("editServer", {
       id: conn.http.url,
@@ -457,10 +493,22 @@ export function DialogSelectServer() {
       username: conn.http.username ?? "",
       password: conn.http.password ?? "",
       error: "",
-      status: store.status[ServerConnection.key(conn)]?.healthy,
     })
   }
 
+  const startAddWsl = () => {
+    resetAdd()
+    resetEdit()
+    setStore("addWsl", "showWizard", true)
+  }
+
+  const handleAddedWsl = async (distro: string) => {
+    const key = ServerConnection.Key.make(`wsl:${distro}`)
+    setStore("addWsl", "showWizard", false)
+    const conn = items().find((item) => ServerConnection.key(item) === key)
+    if (conn) await select(conn)
+  }
+
   const submitForm = () => {
     if (mode() === "add") {
       if (addMutation.isPending) return
@@ -477,14 +525,22 @@ export function DialogSelectServer() {
 
   const isFormMode = createMemo(() => mode() !== "list")
   const isAddMode = createMemo(() => mode() === "add")
+  const isAddWslMode = createMemo(() => mode() === "add-wsl")
   const formBusy = createMemo(() => (isAddMode() ? addMutation.isPending : editMutation.isPending))
+  const canAddWsl = createMemo(() => !!platform.wslServers && platform.os === "windows")
 
   const formTitle = createMemo(() => {
     if (!isFormMode()) return language.t("dialog.server.title")
     return (
       <div class="flex items-center gap-2 -ml-2">
         <IconButton icon="arrow-left" variant="ghost" onClick={resetForm} aria-label={language.t("common.goBack")} />
-        <span>{isAddMode() ? language.t("dialog.server.add.title") : language.t("dialog.server.edit.title")}</span>
+        <span>
+          {isAddWslMode()
+            ? "Add WSL server"
+            : isAddMode()
+              ? language.t("dialog.server.add.title")
+              : language.t("dialog.server.edit.title")}
+        </span>
       </div>
     )
   })
@@ -495,37 +551,126 @@ export function DialogSelectServer() {
     resetEdit()
   })
 
-  async function handleRemove(url: ServerConnection.Key) {
-    server.remove(url)
-    if ((await platform.getDefaultServer?.()) === url) {
-      void platform.setDefaultServer?.(null)
-    }
+  async function handleRemove(key: ServerConnection.Key) {
+    server.remove(key)
+    if (defaultServer.defaultKey() === key) await defaultServer.setDefault(null)
   }
 
   return (
-    <Dialog title={formTitle()}>
-      <div class="flex flex-1 min-h-0 flex-col gap-2">
+    <Dialog
+      title={formTitle()}
+      fit={isAddWslMode()}
+      class={isAddWslMode() ? "[&_[data-slot=dialog-body]]:flex-none [&_[data-slot=dialog-body]]:overflow-visible" : undefined}
+    >
+      <div class={isAddWslMode() ? "flex flex-col gap-2" : "flex flex-1 min-h-0 flex-col gap-2"}>
         <Show
           when={!isFormMode()}
           fallback={
-            <ServerForm
-              value={isAddMode() ? store.addServer.url : store.editServer.value}
-              name={isAddMode() ? store.addServer.name : store.editServer.name}
-              username={isAddMode() ? store.addServer.username : store.editServer.username}
-              password={isAddMode() ? store.addServer.password : store.editServer.password}
-              placeholder={language.t("dialog.server.add.placeholder")}
-              busy={formBusy()}
-              error={isAddMode() ? store.addServer.error : store.editServer.error}
-              status={isAddMode() ? store.addServer.status : store.editServer.status}
-              onChange={isAddMode() ? handleAddChange : handleEditChange}
-              onNameChange={isAddMode() ? handleAddNameChange : handleEditNameChange}
-              onUsernameChange={isAddMode() ? handleAddUsernameChange : handleEditUsernameChange}
-              onPasswordChange={isAddMode() ? handleAddPasswordChange : handleEditPasswordChange}
-              onSubmit={submitForm}
-              onBack={resetForm}
-            />
+            <Show
+              when={isAddWslMode()}
+              fallback={
+                <ServerForm
+                  value={isAddMode() ? store.addServer.url : store.editServer.value}
+                  name={isAddMode() ? store.addServer.name : store.editServer.name}
+                  username={isAddMode() ? store.addServer.username : store.editServer.username}
+                  password={isAddMode() ? store.addServer.password : store.editServer.password}
+                  placeholder={language.t("dialog.server.add.placeholder")}
+                  busy={formBusy()}
+                  error={isAddMode() ? store.addServer.error : store.editServer.error}
+                  onChange={isAddMode() ? handleAddChange : handleEditChange}
+                  onNameChange={isAddMode() ? handleAddNameChange : handleEditNameChange}
+                  onUsernameChange={isAddMode() ? handleAddUsernameChange : handleEditUsernameChange}
+                  onPasswordChange={isAddMode() ? handleAddPasswordChange : handleEditPasswordChange}
+                  onSubmit={submitForm}
+                  onBack={resetForm}
+                />
+              }
+            >
+              <DialogWslServer onAdded={handleAddedWsl} />
+            </Show>
           }
         >
+          <Show when={nonReadyWslServers().length > 0}>
+            <div class="px-5">
+              <div class="bg-surface-base rounded-md overflow-hidden">
+                <For each={nonReadyWslServers()}>
+                  {(item) => {
+                    const key = ServerConnection.Key.make(item.config.id)
+                    const retryable = () => canRetryWslRuntime(item.runtime.kind)
+                    return (
+                      <div class="min-h-14 p-3 flex items-center gap-3 border-b border-border-weak-base last:border-b-0">
+                        <div
+                          classList={{
+                            "size-1.5 rounded-full shrink-0": true,
+                            "bg-icon-critical-base": item.runtime.kind === "failed",
+                            "bg-border-weak-base": item.runtime.kind !== "failed",
+                          }}
+                        />
+                        <div class="flex items-center gap-2 min-w-0 flex-1">
+                          <span class="text-14-medium text-text-base truncate">{item.config.distro}</span>
+                          <span class="text-11-regular text-text-weak border border-border-weak-base bg-surface-base px-1.5 py-0.5 rounded-md shrink-0">
+                            WSL
+                          </span>
+                          <Show when={defaultServer.defaultKey() === key}>
+                            <span class="text-text-base bg-surface-base text-14-regular px-1.5 rounded-xs shrink-0">
+                              {language.t("dialog.server.status.default")}
+                            </span>
+                          </Show>
+                          <span class="text-12-regular text-text-weak truncate">
+                            {wslRuntimeLabel(item.runtime.kind)}
+                          </span>
+                        </div>
+                        <DropdownMenu>
+                          <DropdownMenu.Trigger
+                            as={IconButton}
+                            icon="dot-grid"
+                            variant="ghost"
+                            class="shrink-0 size-8 hover:bg-surface-base-hover data-[expanded]:bg-surface-base-active"
+                            onClick={(e: MouseEvent) => e.stopPropagation()}
+                            onPointerDown={(e: PointerEvent) => e.stopPropagation()}
+                          />
+                          <DropdownMenu.Portal>
+                            <DropdownMenu.Content class="mt-1">
+                              <Show when={retryable()}>
+                                <DropdownMenu.Item onSelect={() => retryWslMutation.mutate(key)}>
+                                  <DropdownMenu.ItemLabel>Retry start</DropdownMenu.ItemLabel>
+                                </DropdownMenu.Item>
+                              </Show>
+                              <Show when={defaultServer.canDefault() && defaultServer.defaultKey() !== key}>
+                                <DropdownMenu.Item onSelect={() => void defaultServer.setDefault(key)}>
+                                  <DropdownMenu.ItemLabel>
+                                    {language.t("dialog.server.menu.default")}
+                                  </DropdownMenu.ItemLabel>
+                                </DropdownMenu.Item>
+                              </Show>
+                              <Show when={defaultServer.canDefault() && defaultServer.defaultKey() === key}>
+                                <DropdownMenu.Item onSelect={() => void defaultServer.setDefault(null)}>
+                                  <DropdownMenu.ItemLabel>
+                                    {language.t("dialog.server.menu.defaultRemove")}
+                                  </DropdownMenu.ItemLabel>
+                                </DropdownMenu.Item>
+                              </Show>
+                              <Show when={retryable() || defaultServer.canDefault()}>
+                                <DropdownMenu.Separator />
+                              </Show>
+                              <DropdownMenu.Item
+                                onSelect={() => removeWslMutation.mutate(key)}
+                                class="text-text-on-critical-base hover:bg-surface-critical-weak"
+                              >
+                                <DropdownMenu.ItemLabel>
+                                  {language.t("dialog.server.menu.delete")}
+                                </DropdownMenu.ItemLabel>
+                              </DropdownMenu.Item>
+                            </DropdownMenu.Content>
+                          </DropdownMenu.Portal>
+                        </DropdownMenu>
+                      </div>
+                    )
+                  }}
+                </For>
+              </div>
+            </div>
+          </Show>
           <List
             search={{
               placeholder: language.t("dialog.server.search.placeholder"),
@@ -534,7 +679,7 @@ export function DialogSelectServer() {
             noInitialSelection
             emptyMessage={language.t("dialog.server.empty")}
             items={sortedItems}
-            key={(x) => x.http.url}
+            key={(x) => ServerConnection.key(x)}
             onSelect={(x) => {
               if (x) void select(x)
             }}
@@ -543,18 +688,35 @@ export function DialogSelectServer() {
           >
             {(i) => {
               const key = ServerConnection.key(i)
+              const wsl = isWslSidecar(i)
+              const wslDistro = wsl ? i.distro : undefined
+              const blocked = () => health(key)?.healthy === false
+              const canChangeDefault = () => defaultServer.canDefault() && (i.type === "http" || wsl)
+              const canRemove = () => i.type === "http" || wsl
+              const opencodeAction = () => {
+                const check = wslCheck(i)
+                if (!check) return null
+                if (!check.resolvedPath) return "Install OpenCode"
+                if (check.matchesDesktop === false) return "Update OpenCode"
+                return null
+              }
+              const updating = () => {
+                const job = wslState()?.job
+                return job?.kind === "install-opencode" && job.distro === wslDistro
+              }
               return (
                 <div class="flex items-center gap-3 min-w-0 flex-1 w-full group/item">
                   <div class="flex flex-col h-full items-start w-5">
-                    <ServerHealthIndicator health={store.status[key]} />
+                    <ServerHealthIndicator health={health(key)} />
                   </div>
                   <ServerRow
                     conn={i}
-                    dimmed={store.status[key]?.healthy === false}
-                    status={store.status[key]}
+                    dimmed={blocked()}
+                    status={health(key)}
+                    version={wslCheck(i)?.version ?? undefined}
                     class="flex items-center gap-3 min-w-0 flex-1"
                     badge={
-                      <Show when={defaultKey() === ServerConnection.key(i)}>
+                      <Show when={defaultServer.defaultKey() === ServerConnection.key(i)}>
                         <span class="text-text-base bg-surface-base text-14-regular px-1.5 rounded-xs">
                           {language.t("dialog.server.status.default")}
                         </span>
@@ -562,12 +724,32 @@ export function DialogSelectServer() {
                     }
                     showCredentials
                   />
-                  <div class="flex items-center justify-center gap-4 pl-4">
+                  <div class="flex items-center justify-center gap-3 pl-4">
+                    <Show when={wsl && opencodeAction()}>
+                      {(label) => (
+                        <Button
+                          variant="secondary"
+                          size="small"
+                          disabled={!!wslState()?.job}
+                          class="shrink-0"
+                          onPointerDown={(e: PointerEvent) => e.stopPropagation()}
+                          onClick={(e: MouseEvent) => {
+                            e.stopPropagation()
+                            if (wslDistro) updateWslMutation.mutate(wslDistro)
+                          }}
+                        >
+                          <Show when={updating()}>
+                            <Spinner class="size-3.5 shrink-0" />
+                          </Show>
+                          {label()}
+                        </Button>
+                      )}
+                    </Show>
                     <Show when={ServerConnection.key(current()) === key}>
                       <Icon name="check" class="h-6" />
                     </Show>
 
-                    <Show when={i.type === "http"}>
+                    <Show when={i.type === "http" || i.type === "sidecar"}>
                       <DropdownMenu>
                         <DropdownMenu.Trigger
                           as={IconButton}
@@ -579,35 +761,54 @@ export function DialogSelectServer() {
                         />
                         <DropdownMenu.Portal>
                           <DropdownMenu.Content class="mt-1">
-                            <DropdownMenu.Item
-                              onSelect={() => {
-                                if (i.type !== "http") return
-                                startEdit(i)
-                              }}
-                            >
-                              <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.edit")}</DropdownMenu.ItemLabel>
-                            </DropdownMenu.Item>
-                            <Show when={canDefault() && defaultKey() !== key}>
-                              <DropdownMenu.Item onSelect={() => setDefault(key)}>
+                            <Show when={i.type === "http"}>
+                              <DropdownMenu.Item
+                                onSelect={() => {
+                                  if (i.type !== "http") return
+                                  startEdit(i)
+                                }}
+                              >
+                                <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.edit")}</DropdownMenu.ItemLabel>
+                              </DropdownMenu.Item>
+                            </Show>
+                            <Show when={wsl && canRetryWsl(i)}>
+                              <DropdownMenu.Item onSelect={() => retryWslMutation.mutate(key)}>
+                                <DropdownMenu.ItemLabel>Retry start</DropdownMenu.ItemLabel>
+                              </DropdownMenu.Item>
+                            </Show>
+                            <Show when={canChangeDefault() && defaultServer.defaultKey() !== key}>
+                              <DropdownMenu.Item onSelect={() => void defaultServer.setDefault(key)}>
                                 <DropdownMenu.ItemLabel>
                                   {language.t("dialog.server.menu.default")}
                                 </DropdownMenu.ItemLabel>
                               </DropdownMenu.Item>
                             </Show>
-                            <Show when={canDefault() && defaultKey() === key}>
-                              <DropdownMenu.Item onSelect={() => setDefault(null)}>
+                            <Show when={canChangeDefault() && defaultServer.defaultKey() === key}>
+                              <DropdownMenu.Item onSelect={() => void defaultServer.setDefault(null)}>
                                 <DropdownMenu.ItemLabel>
                                   {language.t("dialog.server.menu.defaultRemove")}
                                 </DropdownMenu.ItemLabel>
                               </DropdownMenu.Item>
                             </Show>
-                            <DropdownMenu.Separator />
-                            <DropdownMenu.Item
-                              onSelect={() => handleRemove(ServerConnection.key(i))}
-                              class="text-text-on-critical-base hover:bg-surface-critical-weak"
-                            >
-                              <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.delete")}</DropdownMenu.ItemLabel>
-                            </DropdownMenu.Item>
+                            <Show when={canRemove() && (i.type === "http" || canChangeDefault() || canRetryWsl(i))}>
+                              <DropdownMenu.Separator />
+                            </Show>
+                            <Show when={canRemove()}>
+                              <DropdownMenu.Item
+                                onSelect={() => {
+                                  if (wsl) {
+                                    removeWslMutation.mutate(key)
+                                    return
+                                  }
+                                  void handleRemove(key)
+                                }}
+                                class="text-text-on-critical-base hover:bg-surface-critical-weak"
+                              >
+                                <DropdownMenu.ItemLabel>
+                                  {language.t("dialog.server.menu.delete")}
+                                </DropdownMenu.ItemLabel>
+                              </DropdownMenu.Item>
+                            </Show>
                           </DropdownMenu.Content>
                         </DropdownMenu.Portal>
                       </DropdownMenu>
@@ -621,17 +822,32 @@ export function DialogSelectServer() {
 
         <div class="shrink-0 px-5 pb-5">
           <Show
-            when={isFormMode()}
+            when={!isAddWslMode() && isFormMode()}
             fallback={
-              <Button
-                variant="secondary"
-                icon="plus-small"
-                size="large"
-                onClick={startAdd}
-                class="py-1.5 pl-1.5 pr-3 flex items-center gap-1.5"
-              >
-                {language.t("dialog.server.add.button")}
-              </Button>
+              <Show when={!isAddWslMode()}>
+                <div class="flex items-center gap-2">
+                  <Button
+                    variant="secondary"
+                    icon="plus-small"
+                    size="large"
+                    onClick={startAdd}
+                    class="py-1.5 pl-1.5 pr-3 flex items-center gap-1.5"
+                  >
+                    {language.t("dialog.server.add.button")}
+                  </Button>
+                  <Show when={canAddWsl()}>
+                    <Button
+                      variant="secondary"
+                      icon="plus-small"
+                      size="large"
+                      onClick={startAddWsl}
+                      class="py-1.5 pl-1.5 pr-3 flex items-center gap-1.5"
+                    >
+                      Add WSL
+                    </Button>
+                  </Show>
+                </div>
+              </Show>
             }
           >
             <Button variant="primary" size="large" onClick={submitForm} disabled={formBusy()} class="px-3 py-1.5">

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

@@ -0,0 +1,582 @@
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Spinner } from "@opencode-ai/ui/spinner"
+import { showToast } from "@opencode-ai/ui/toast"
+import { createEffect, createMemo, For, Match, onCleanup, Show, Switch } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { useWslServers } from "@/context/wsl-servers"
+
+type WslServerStep = "wsl" | "distro" | "opencode"
+
+const STEPS: WslServerStep[] = ["wsl", "distro", "opencode"]
+
+function isHiddenDistro(name: string) {
+  return /^docker-desktop(?:-data)?$/i.test(name)
+}
+
+interface DialogWslServerProps {
+  onAdded?: (distro: string) => void | Promise<void>
+}
+
+export function DialogWslServer(props: DialogWslServerProps = {}) {
+  const language = useLanguage()
+  const platform = usePlatform()
+  const dialog = useDialog()
+  const wslServers = useWslServers()
+  const api = platform.wslServers!
+  const [store, setStore] = createStore({
+    step: undefined as WslServerStep | undefined,
+    selectedDistro: null as string | null,
+    installTarget: undefined as string | undefined,
+    adding: false,
+  })
+  const current = () => wslServers.data
+  let disposed = false
+  onCleanup(() => {
+    disposed = true
+  })
+  const busy = createMemo(() => !!current()?.job || store.adding)
+  const selectedProbe = createMemo(() => {
+    const distro = store.selectedDistro
+    if (!distro) return null
+    return current()?.distroProbes[distro] ?? null
+  })
+  const selectedInstalled = createMemo(() => {
+    const distro = store.selectedDistro
+    if (!distro) return null
+    return (current()?.installed ?? []).find((item) => item.name === distro) ?? null
+  })
+  const visibleInstalledDistros = createMemo(() =>
+    (current()?.installed ?? []).filter((item) => !isHiddenDistro(item.name)),
+  )
+  const visibleOnlineDistros = createMemo(() => (current()?.online ?? []).filter((item) => !isHiddenDistro(item.name)))
+  const defaultInstalledDistro = createMemo(() => visibleInstalledDistros().find((item) => item.isDefault) ?? null)
+  const opencodeCheck = createMemo(() => {
+    const distro = store.selectedDistro
+    if (!distro) return null
+    return current()?.opencodeChecks[distro] ?? null
+  })
+  const distroWarningProbe = createMemo(() => {
+    const probe = selectedProbe()
+    if (!probe) return null
+    if (distroReady()) return null
+    return probe
+  })
+  const distroUnavailableMessage = createMemo(() => {
+    const probe = distroWarningProbe()
+    const distro = store.selectedDistro
+    if (!probe || probe.canExecute || !distro) return null
+    if (!selectedInstalled()) return `${distro} is not installed yet.`
+    return `Open ${distro} once to finish setup.`
+  })
+  const distroMissingTools = createMemo(() => {
+    const probe = distroWarningProbe()
+    if (!probe?.canExecute) return null
+    if (probe.hasBash && probe.hasCurl) return null
+    return probe
+  })
+  const existingServerDistros = createMemo(() => new Set((current()?.servers ?? []).map((item) => item.config.distro)))
+  const addableInstalledDistros = createMemo(() => {
+    return visibleInstalledDistros().filter((item) => !existingServerDistros().has(item.name))
+  })
+  const installableDistros = createMemo(() => {
+    const online = visibleOnlineDistros()
+    const installed = new Set(visibleInstalledDistros().map((item) => item.name))
+    const hasVersionedUbuntu = online.some((item) => /^Ubuntu-\d/.test(item.name))
+    return online
+      .filter((item) => !installed.has(item.name))
+      .filter((item) => !(item.name === "Ubuntu" && hasVersionedUbuntu))
+  })
+  const installTarget = createMemo(() => installableDistros().find((item) => item.name === store.installTarget) ?? null)
+  const installingDistro = createMemo(() => current()?.job?.kind === "install-distro")
+  const installingOpencode = createMemo(() => {
+    const job = current()?.job
+    return job?.kind === "install-opencode" && job.distro === store.selectedDistro
+  })
+  const wslReady = createMemo(() => !!current()?.runtime?.available && !current()?.pendingRestart)
+  const distroReady = createMemo(() => {
+    const probe = selectedProbe()
+    if (!probe || !store.selectedDistro) return false
+    if (selectedInstalled()?.version === 1) return false
+    return probe.canExecute && probe.hasBash && probe.hasCurl
+  })
+  const opencodeReady = createMemo(() => {
+    const check = opencodeCheck()
+    return !!check?.resolvedPath && !check.error
+  })
+  const allReady = createMemo(() => wslReady() && distroReady() && opencodeReady())
+  const addDisabled = createMemo(() => {
+    const job = current()?.job
+    if (!job) return store.adding
+    return store.adding || job.kind !== "probe-opencode"
+  })
+  const recommendedStep = createMemo<WslServerStep>(() => {
+    if (!wslReady()) return "wsl"
+    if (!distroReady()) return "distro"
+    return "opencode"
+  })
+  // activeStep falls back to recommendedStep when the user hasn't picked one.
+  // Once the user clicks a step tab we respect their choice rather than snapping
+  // them back when a probe result updates recommendedStep.
+  const activeStep = createMemo(() => store.step ?? recommendedStep())
+
+  const autoProbe = createMemo(() => {
+    const state = current()
+    if (!state || busy()) return null
+    if (state.pendingRestart) return null
+    if (!state.runtime) return { key: "runtime", run: () => api.probeRuntime() }
+    if (!wslReady()) return null
+    if (!state.installed.length && !state.online.length) {
+      return { key: "distros", run: () => api.refreshDistros() }
+    }
+    const distro = store.selectedDistro
+    if (distro && !state.distroProbes[distro]) {
+      return { key: `probe-distro:${distro}`, run: () => api.probeDistro(distro) }
+    }
+    if (!distro || !distroReady()) return null
+    if (!state.opencodeChecks[distro]) {
+      return { key: `probe-opencode:${distro}`, run: () => api.probeOpencode(distro) }
+    }
+    return null
+  })
+
+  let lastAutoProbe: string | null = null
+  createEffect(() => {
+    const probe = autoProbe()
+    if (!probe || probe.key === lastAutoProbe) return
+    const key = probe.key
+    lastAutoProbe = key
+    void (async () => {
+      try {
+        await probe.run()
+      } catch (err) {
+        if (disposed) return
+        // Allow the same probe to run again when reactive inputs next change
+        // (e.g. user reselects a distro). Without this the user would be stuck
+        // on a transient wsl.exe failure until they pick a different distro.
+        if (lastAutoProbe === key) lastAutoProbe = null
+        requestError(language, err)
+      }
+    })()
+  })
+
+  createEffect(() => {
+    const state = current()
+    const distro = defaultInstalledDistro()
+    if (!state || !distro || busy()) return
+    if (store.selectedDistro) return
+    if (existingServerDistros().has(distro.name)) return
+    setStore("selectedDistro", distro.name)
+  })
+
+  createEffect(() => {
+    const distros = installableDistros()
+    if (!distros.length) {
+      if (store.installTarget) setStore("installTarget", undefined)
+      return
+    }
+    if (store.installTarget && distros.some((item) => item.name === store.installTarget)) return
+    setStore("installTarget", distros[0]!.name)
+  })
+
+  const wslMessage = createMemo(() => {
+    const state = current()
+    if (!state || state.job?.kind === "runtime") return "Checking WSL..."
+    if (state.pendingRestart) return "Windows needs a restart to finish installing WSL."
+    if (state.runtime?.available) return state.runtime.version ?? "WSL is ready."
+    return state.runtime?.error ?? "WSL is required to continue."
+  })
+
+  const distroMessage = createMemo(() => {
+    const state = current()
+    if (!state) return "Checking distros..."
+    const distro = store.selectedDistro
+    if (state.job?.kind === "install-distro") return `Installing ${state.job.distro}...`
+    if (state.job?.kind === "probe-distro") return `Checking ${state.job.distro}...`
+    if (state.job?.kind === "distros") return "Listing distros..."
+    if (distroUnavailableMessage()) return distroUnavailableMessage()!
+    if (selectedProbe() && distroReady()) return `${selectedProbe()!.name} is ready.`
+    if (distro) return `Finishing setup for ${distro}.`
+    return "Pick a distro or install one below."
+  })
+
+  const opencodeMessage = createMemo(() => {
+    const state = current()
+    if (!state) return "Checking OpenCode..."
+    const distro = store.selectedDistro
+    if (state.job?.kind === "probe-opencode" || state.job?.kind === "install-opencode") {
+      return distro ? `Checking OpenCode in ${distro}...` : "Checking OpenCode..."
+    }
+    if (opencodeCheck()?.error) return opencodeCheck()!.error
+    if (opencodeCheck()?.matchesDesktop === false) {
+      return distro ? `Update OpenCode in ${distro}.` : "Update OpenCode."
+    }
+    if (opencodeReady()) return distro ? `OpenCode is ready in ${distro}.` : "OpenCode is ready."
+    return distro ? `Install OpenCode in ${distro}.` : "Choose a distro first."
+  })
+
+  const run = async (action: () => Promise<unknown>) => {
+    try {
+      await action()
+    } catch (err) {
+      requestError(language, err)
+    }
+  }
+
+  const runSelectedDistro = (action: (distro: string) => Promise<unknown>) => {
+    const distro = store.selectedDistro
+    if (!distro) return
+    void run(() => action(distro))
+  }
+
+  const selectDistro = (name: string) => {
+    setStore("selectedDistro", name)
+    setStore("step", undefined)
+  }
+
+  const finish = async () => {
+    const distro = store.selectedDistro
+    if (!distro) return
+    setStore("adding", true)
+    try {
+      await api.addServer(distro)
+      if (props.onAdded) {
+        await props.onAdded(distro)
+      } else {
+        dialog.close()
+      }
+    } catch (err) {
+      requestError(language, err)
+    } finally {
+      setStore("adding", false)
+    }
+  }
+
+  const steps = createMemo(() => {
+    const active = activeStep()
+    const activeIndex = STEPS.indexOf(active)
+    const recommendedIndex = STEPS.indexOf(recommendedStep())
+    return STEPS.map((step) => {
+      const index = STEPS.indexOf(step)
+      return {
+        step,
+        title: step === "wsl" ? "WSL" : step === "distro" ? "Choose distro" : "OpenCode",
+        state:
+          active === step
+            ? "current"
+            : step === "wsl"
+              ? wslReady()
+                ? "done"
+                : "warning"
+              : step === "distro"
+                ? distroReady()
+                  ? "done"
+                  : index > activeIndex
+                    ? "locked"
+                    : "warning"
+                : opencodeCheck()?.matchesDesktop === false
+                  ? "warning"
+                  : opencodeReady()
+                    ? "done"
+                    : index > activeIndex
+                      ? "locked"
+                      : "warning",
+        locked: index > recommendedIndex,
+      }
+    })
+  })
+  const loadError = createMemo(() => {
+    const error = wslServers.error
+    if (!error) return "Failed to load WSL state."
+    return error instanceof Error ? error.message : String(error)
+  })
+
+  return (
+    <div class="px-5 pb-5 flex flex-col gap-4">
+      <Show when={!wslServers.isPending} fallback={<div class="px-1 py-6 text-14-regular text-text-weak">Loading...</div>}>
+        <Show when={!wslServers.isError} fallback={<div class="px-1 py-6 text-14-regular text-text-weak">{loadError()}</div>}>
+          <div class="flex gap-2 pb-1">
+            <For each={steps()}>
+              {(item) => (
+                <button
+                  type="button"
+                  class="basis-0 flex-1 min-w-0 rounded-md border px-3 py-2 text-left transition-colors"
+                  classList={{
+                    "border-border-strong-base bg-surface-base-hover": item.state === "current",
+                    "border-icon-success-base/40 bg-surface-base": item.state === "done",
+                    "border-border-weak-base bg-background-base opacity-60": item.state === "locked",
+                    "border-icon-warning-base/40 bg-surface-base": item.state === "warning",
+                  }}
+                  disabled={item.locked}
+                  onClick={() => setStore("step", item.step)}
+                >
+                  <div class="text-13-medium text-text-strong">{item.title}</div>
+                </button>
+              )}
+            </For>
+          </div>
+
+          <Switch>
+          <Match when={activeStep() === "wsl"}>
+            <div class="rounded-md bg-surface-base p-4 flex flex-col gap-3">
+              <div class="flex items-center justify-between gap-3">
+                <div class="text-14-medium text-text-strong">WSL</div>
+                <Show when={current()?.runtime && !wslReady() && !current()?.pendingRestart}>
+                  <Button
+                    variant="secondary"
+                    size="large"
+                    disabled={busy()}
+                    onClick={() => void run(() => api.installWsl())}
+                  >
+                    Install WSL
+                  </Button>
+                </Show>
+              </div>
+              <div class="text-12-regular text-text-weak whitespace-pre-wrap break-words">{wslMessage()}</div>
+              <Show when={current()?.pendingRestart}>
+                <div class="rounded-md border border-border-weak-base px-3 py-3 flex items-center justify-between gap-3">
+                  <div class="text-12-regular text-text-warning-base">Windows restart required.</div>
+                  <Button variant="secondary" size="large" onClick={() => void platform.restart()}>
+                    Relaunch OpenCode
+                  </Button>
+                </div>
+              </Show>
+              <div class="flex items-center justify-end">
+                <Button variant="secondary" size="large" disabled={busy() || !wslReady()} onClick={() => setStore("step", "distro")}>
+                  Next
+                </Button>
+              </div>
+            </div>
+          </Match>
+
+          <Match when={activeStep() === "distro"}>
+            <div class="rounded-md bg-surface-base p-4 flex flex-col gap-3">
+              <div class="flex items-center justify-between gap-3">
+                <div class="text-14-medium text-text-strong">Choose a distro</div>
+                <Show when={store.selectedDistro}>
+                  <Button
+                    variant="ghost"
+                    size="small"
+                    disabled={busy()}
+                    onClick={() => runSelectedDistro((distro) => api.probeDistro(distro))}
+                  >
+                    Refresh
+                  </Button>
+                </Show>
+              </div>
+              <div class="text-12-regular text-text-weak whitespace-pre-wrap break-words">{distroMessage()}</div>
+
+              <div class="flex flex-col gap-2">
+                <Show
+                  when={addableInstalledDistros().length > 0}
+                  fallback={
+                    <div class="text-12-regular text-text-weak">
+                      {visibleInstalledDistros().length
+                        ? "All installed distros are already added."
+                        : current()?.runtime?.available
+                          ? "No distros detected yet."
+                          : "Checking distros..."}
+                    </div>
+                  }
+                >
+                  <For each={addableInstalledDistros()}>
+                    {(item) => (
+                      <button
+                        type="button"
+                        class="rounded-md border border-border-weak-base px-3 py-2 text-left transition-colors"
+                        classList={{ "bg-surface-raised-base": store.selectedDistro === item.name }}
+                        onClick={() => selectDistro(item.name)}
+                      >
+                        <div class="text-13-medium text-text-strong">{item.name}</div>
+                        <Show when={item.isDefault}>
+                          <div class="text-12-regular text-text-weak">Default</div>
+                        </Show>
+                      </button>
+                    )}
+                  </For>
+                </Show>
+              </div>
+
+              <Show when={installableDistros().length > 0}>
+                <div class="rounded-md border border-border-weak-base p-2 flex flex-col gap-2">
+                  <div class="px-1 flex items-center justify-between gap-3">
+                    <div class="text-12-medium text-text-weak">Install</div>
+                    <div class="flex items-center gap-2 shrink-0">
+                      <Show when={installingDistro()}>
+                        <Spinner class="h-4 w-4 text-icon-info-base shrink-0" />
+                      </Show>
+                      <Button
+                        variant="secondary"
+                        size="small"
+                        disabled={busy() || !installTarget()}
+                        onClick={() => void run(() => api.installDistro(installTarget()!.name))}
+                      >
+                        {installingDistro() ? "Installing..." : "Install"}
+                      </Button>
+                    </div>
+                  </div>
+                  <div
+                    role="radiogroup"
+                    aria-label="Install distro"
+                    class="max-h-52 overflow-y-auto rounded-md bg-background-base"
+                  >
+                    <For each={installableDistros()}>
+                      {(item) => {
+                        const selected = () => store.installTarget === item.name
+                        return (
+                          <button
+                            type="button"
+                            role="radio"
+                            aria-checked={selected()}
+                            disabled={busy()}
+                            class="w-full px-3 py-2 flex items-center gap-3 text-left border-b border-border-weak-base last:border-b-0 transition-colors"
+                            classList={{
+                              "bg-surface-raised-base": selected(),
+                              "hover:bg-surface-base": !selected(),
+                            }}
+                            onClick={() => setStore("installTarget", item.name)}
+                          >
+                            <div
+                              class="mt-0.5 h-4 w-4 rounded-full border border-border-strong-base flex items-center justify-center shrink-0"
+                              classList={{ "border-text-strong": selected() }}
+                            >
+                              <div class="h-2 w-2 rounded-full bg-text-strong" classList={{ hidden: !selected() }} />
+                            </div>
+                            <div class="min-w-0 flex-1 text-13-medium text-text-strong truncate">{item.label}</div>
+                          </button>
+                        )
+                      }}
+                    </For>
+                  </div>
+                </div>
+              </Show>
+
+              <Show
+                when={
+                  selectedInstalled()?.version === 1 ||
+                  distroUnavailableMessage() ||
+                  distroMissingTools()
+                }
+              >
+                <div class="rounded-md border border-border-weak-base px-3 py-3 flex flex-col gap-1">
+                  <Show when={selectedInstalled()?.version === 1}>
+                    <div class="text-12-regular text-text-warning-base">WSL 2 is required.</div>
+                  </Show>
+                  <Show when={distroUnavailableMessage()}>
+                    {(message) => <div class="text-12-regular text-text-warning-base">{message()}</div>}
+                  </Show>
+                  <Show when={distroMissingTools()}>
+                    <div class="text-12-regular text-text-warning-base">This distro needs bash and curl.</div>
+                  </Show>
+                </div>
+              </Show>
+
+              <div class="flex items-center gap-2">
+                <Button
+                  variant="secondary"
+                  size="large"
+                  disabled={busy() || !selectedInstalled()}
+                  onClick={() => runSelectedDistro((distro) => api.openTerminal(distro))}
+                >
+                  Open terminal
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="large"
+                  disabled={busy() || !store.selectedDistro}
+                  onClick={() => runSelectedDistro((distro) => api.probeDistro(distro))}
+                >
+                  Refresh
+                </Button>
+              </div>
+
+              <div class="flex items-center justify-end">
+                <Button
+                  variant="secondary"
+                  size="large"
+                  disabled={busy() || !store.selectedDistro || !distroReady()}
+                  onClick={() => setStore("step", "opencode")}
+                >
+                  Next
+                </Button>
+              </div>
+            </div>
+          </Match>
+
+          <Match when={activeStep() === "opencode"}>
+            <div class="rounded-md bg-surface-base p-4 flex flex-col gap-3">
+              <div class="flex items-center justify-between gap-3">
+                <div class="text-14-medium text-text-strong">OpenCode</div>
+                <div class="flex items-center gap-2">
+                  <Show when={store.selectedDistro}>
+                    <Button
+                      variant="ghost"
+                      size="large"
+                      disabled={busy()}
+                      onClick={() => runSelectedDistro((distro) => api.probeOpencode(distro))}
+                    >
+                      Refresh
+                    </Button>
+                  </Show>
+                  <Show when={!opencodeReady() || opencodeCheck()?.matchesDesktop === false}>
+                    <Button
+                      variant="secondary"
+                      size="large"
+                      disabled={busy()}
+                      onClick={() => runSelectedDistro((distro) => api.installOpencode(distro))}
+                    >
+                      <Show when={installingOpencode()}>
+                        <Spinner class="size-4 shrink-0" />
+                      </Show>
+                      {opencodeCheck()?.resolvedPath ? "Update OpenCode" : "Install OpenCode"}
+                    </Button>
+                  </Show>
+                </div>
+              </div>
+              <div class="text-12-regular text-text-weak whitespace-pre-wrap break-words">{opencodeMessage()}</div>
+              <Show when={opencodeCheck()?.matchesDesktop === false ? opencodeCheck() : null}>
+                {(check) => (
+                  <div class="rounded-md border border-border-weak-base px-3 py-3 flex flex-col gap-1">
+                    <div class="text-12-regular text-text-weak">Path: {check().resolvedPath ?? "not found"}</div>
+                    <div class="text-12-regular text-text-weak">
+                      Version: {check().version ?? "unknown"}
+                      <Show when={check().expectedVersion}>
+                        {(expected) => <span>{` · desktop ${expected()}`}</span>}
+                      </Show>
+                    </div>
+                    <div class="text-12-regular text-text-warning-base">
+                      Installed version does not match the desktop app version.
+                    </div>
+                  </div>
+                )}
+              </Show>
+            </div>
+          </Match>
+          </Switch>
+
+          <Show when={activeStep() === "opencode" && allReady() && store.selectedDistro}>
+            <div class="flex items-center justify-end gap-2">
+              <Button variant="ghost" size="large" disabled={store.adding} onClick={() => dialog.close()}>
+                Cancel
+              </Button>
+              <Button variant="primary" size="large" disabled={addDisabled()} onClick={() => void finish()}>
+                {store.adding ? "Adding..." : "Add WSL server"}
+              </Button>
+            </div>
+          </Show>
+        </Show>
+      </Show>
+    </div>
+  )
+}
+
+function requestError(language: ReturnType<typeof useLanguage>, err: unknown) {
+  console.error("WSL servers request failed", err instanceof Error ? (err.stack ?? err.message) : String(err))
+  showToast({
+    variant: "error",
+    title: language.t("common.requestFailed"),
+    description: err instanceof Error ? err.message : String(err),
+  })
+}

packages/app/src/components/prompt-input/attachments.ts

@@ -1,6 +1,6 @@
 import { onMount } from "solid-js"
 import { makeEventListener } from "@solid-primitives/event-listener"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import { usePrompt, type ContentPart, type ImageAttachmentPart } from "@/context/prompt"
 import { useLanguage } from "@/context/language"
 import { uuid } from "@/utils/uuid"

packages/app/src/components/prompt-input/submit.ts

@@ -1,5 +1,5 @@
 import type { Message, Session } from "@opencode-ai/sdk/v2/client"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 import { Binary } from "@opencode-ai/core/util/binary"
 import { useNavigate, useParams } from "@solidjs/router"

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

@@ -17,6 +17,7 @@ import type { ServerHealth } from "@/utils/server-health"
 interface ServerRowProps extends ParentProps {
   conn: ServerConnection.Any
   status?: ServerHealth
+  version?: string
   class?: string
   nameClass?: string
   versionClass?: string
@@ -31,6 +32,8 @@ export function ServerRow(props: ServerRowProps) {
   let nameRef: HTMLSpanElement | undefined
   let versionRef: HTMLSpanElement | undefined
   const name = createMemo(() => serverName(props.conn))
+  const isWsl = createMemo(() => props.conn.type === "sidecar" && props.conn.variant === "wsl")
+  const version = createMemo(() => props.version ?? props.status?.version)
 
   const check = () => {
     const nameTruncated = nameRef ? nameRef.scrollWidth > nameRef.clientWidth : false
@@ -41,7 +44,7 @@ export function ServerRow(props: ServerRowProps) {
   createEffect(() => {
     name()
     props.conn.http.url
-    props.status?.version
+    version()
     queueMicrotask(check)
   })
 
@@ -54,8 +57,11 @@ export function ServerRow(props: ServerRowProps) {
   const tooltipValue = () => (
     <span class="flex items-center gap-2">
       <span>{serverName(props.conn, true)}</span>
-      <Show when={props.status?.version}>
-        <span class="text-text-invert-weak">v{props.status?.version}</span>
+      <Show when={isWsl()}>
+        <span class="text-text-invert-weak">WSL</span>
+      </Show>
+      <Show when={version()}>
+        <span class="text-text-invert-weak">v{version()}</span>
       </Show>
     </span>
   )
@@ -76,15 +82,20 @@ export function ServerRow(props: ServerRowProps) {
             <span ref={nameRef} class={`${props.nameClass ?? "truncate"} min-w-0`}>
               {name()}
             </span>
+            <Show when={isWsl()}>
+              <span class="text-11-regular text-text-weak border border-border-weak-base bg-surface-base px-1.5 py-0.5 rounded-md shrink-0">
+                WSL
+              </span>
+            </Show>
             <Show
               when={badge()}
               fallback={
-                <Show when={props.status?.version}>
+                <Show when={version()}>
                   <span
                     ref={versionRef}
                     class={`${props.versionClass ?? "text-text-weak text-14-regular truncate"} min-w-0`}
                   >
-                    v{props.status?.version}
+                    v{version()}
                   </span>
                 </Show>
               }

packages/app/src/components/session/session-header.tsx

@@ -5,7 +5,7 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Keybind } from "@opencode-ai/ui/keybind"
 import { Spinner } from "@opencode-ai/ui/spinner"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { getFilename } from "@opencode-ai/core/util/path"
 import { createEffect, createMemo, createSignal, For, onMount, Show } from "solid-js"
@@ -25,8 +25,8 @@ import { messageAgentColor } from "@/utils/agent"
 import { decode64 } from "@/utils/base64"
 import { Persist, persisted } from "@/utils/persist"
 import { StatusPopover, StatusPopoverV2 } from "../status-popover"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/components/icon-button-v2.jsx"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/components/icon.jsx"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 
 const OPEN_APPS = [
   "vscode",

packages/app/src/components/session/session-new-design-view.tsx

@@ -1,11 +1,12 @@
 import type { JSX } from "solid-js"
-import { WordmarkV2 } from "@opencode-ai/ui/v2/components/wordmark-v2.jsx"
+import { WordmarkV2 } from "@opencode-ai/ui/v2/wordmark-v2"
+import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
 
 export function NewSessionDesignView(props: { children: JSX.Element }) {
   return (
     <div data-component="session-new-design" class="relative size-full overflow-hidden bg-v2-background-bg-deep">
       <div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
-        <div class="w-full max-w-[720px]">
+        <div class={NEW_SESSION_CONTENT_WIDTH}>
           <WordmarkV2 class="h-auto w-full text-v2-icon-icon-base" />
           <div class="mt-8">{props.children}</div>
         </div>

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

@@ -7,7 +7,8 @@ import { Switch } from "@opencode-ai/ui/switch"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
-import { showToast } from "@opencode-ai/ui/toast"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { showToast } from "@/utils/toast"
 import { useParams } from "@solidjs/router"
 import { useLanguage } from "@/context/language"
 import { usePermission } from "@/context/permission"
@@ -86,6 +87,7 @@ export const SettingsGeneral: Component = () => {
   const language = useLanguage()
   const permission = usePermission()
   const platform = usePlatform()
+  const dialog = useDialog()
   const params = useParams()
   const settings = useSettings()
 
@@ -407,7 +409,13 @@ export const SettingsGeneral: Component = () => {
           <div data-action="settings-new-layout-designs">
             <Switch
               checked={settings.general.newLayoutDesigns()}
-              onChange={(checked) => settings.general.setNewLayoutDesigns(checked)}
+              onChange={(checked) => {
+                settings.general.setNewLayoutDesigns(checked)
+                if (!checked) return
+                void import("@/components/settings-v2").then((module) => {
+                  dialog.show(() => <module.DialogSettings />)
+                })
+              }}
             />
           </div>
         </SettingsRow>

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

@@ -1,17 +1,29 @@
-import { Component, For, Show, createMemo, onCleanup, onMount } from "solid-js"
+import { Component, For, Show, createMemo, lazy, onCleanup, onMount } from "solid-js"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { TextField } from "@opencode-ai/ui/text-field"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import fuzzysort from "fuzzysort"
 import { formatKeybind, parseKeybind, useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
 import { SettingsList } from "./settings-list"
 
+const ButtonV2 = lazy(() => import("@opencode-ai/ui/v2/button-v2").then((module) => ({ default: module.ButtonV2 })))
+const IconV2 = lazy(() => import("@opencode-ai/ui/v2/icon").then((module) => ({ default: module.Icon })))
+const IconButtonV2 = lazy(() =>
+  import("@opencode-ai/ui/v2/icon-button-v2").then((module) => ({ default: module.IconButtonV2 })),
+)
+const TextInputV2 = lazy(() =>
+  import("@opencode-ai/ui/v2/text-input-v2").then((module) => ({ default: module.TextInputV2 })),
+)
+const SettingsListV2 = lazy(() =>
+  import("./settings-v2/parts/list").then((module) => ({ default: module.SettingsListV2 })),
+)
+
 const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
 const PALETTE_ID = "command.palette"
 const DEFAULT_PALETTE_KEYBIND = "mod+shift+p"
@@ -257,7 +269,7 @@ function useKeyCapture(input: {
   })
 }
 
-export const SettingsKeybinds: Component = () => {
+export const SettingsKeybinds: Component<{ v2?: boolean }> = (props) => {
   const command = useCommand()
   const language = useLanguage()
   const settings = useSettings()
@@ -371,85 +383,178 @@ export const SettingsKeybinds: Component = () => {
     if (store.active) command.keybinds(true)
   })
 
-  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.shortcuts.title")}</h2>
-            <Button size="small" variant="secondary" onClick={resetAll} disabled={!hasOverrides()}>
-              {language.t("settings.shortcuts.reset.button")}
-            </Button>
-          </div>
+  const emptyResults = (
+    <Show when={store.filter && !hasResults()}>
+      <div
+        classList={{
+          "flex flex-col items-center justify-center py-12 text-center": !props.v2,
+          "settings-v2-shortcuts-status": props.v2,
+        }}
+      >
+        <span
+          classList={{
+            "text-14-regular text-text-weak": !props.v2,
+          }}
+        >
+          {language.t("settings.shortcuts.search.empty")}
+        </span>
+        <Show when={store.filter}>
+          <span
+            classList={{
+              "text-14-regular text-text-strong mt-1": !props.v2,
+              "settings-v2-shortcuts-status-filter": props.v2,
+            }}
+          >
+            &quot;{store.filter}&quot;
+          </span>
+        </Show>
+      </div>
+    </Show>
+  )
 
-          <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"
+  const List = props.v2 ? SettingsListV2 : SettingsList
+
+  const groups = (
+    <div
+      classList={{
+        "settings-v2-shortcuts flex flex-col gap-8": props.v2,
+        "flex flex-col gap-8 max-w-[720px]": !props.v2,
+      }}
+    >
+      <For each={GROUPS}>
+        {(group) => (
+          <Show when={(filtered().get(group) ?? []).length > 0}>
+            <div
+              classList={{
+                "settings-v2-section": props.v2,
+                "flex flex-col gap-1": !props.v2,
+              }}
+            >
+              <h3
+                classList={{
+                  "settings-v2-section-title": props.v2,
+                  "text-14-medium text-text-strong pb-2": !props.v2,
+                }}
+              >
+                {language.t(groupKey[group])}
+              </h3>
+              <List>
+                <For each={filtered().get(group) ?? []}>
+                  {(id) => (
+                    <div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
+                      <span
+                        classList={{
+                          "text-14-regular text-text-strong": !props.v2,
+                        }}
+                      >
+                        {title(id)}
+                      </span>
+                      <button
+                        type="button"
+                        data-keybind-id={id}
+                        classList={{
+                          "settings-v2-keybind-button": props.v2,
+                          "settings-v2-keybind-button--active": props.v2 && store.active === id,
+                          "h-8 px-3 rounded-md text-12-regular": !props.v2,
+                          "bg-surface-base text-text-subtle hover:bg-surface-raised-base-hover active:bg-surface-raised-base-active":
+                            !props.v2 && store.active !== id,
+                          "border border-border-weak-base bg-surface-inset-base text-text-weak":
+                            !props.v2 && store.active === id,
+                        }}
+                        onClick={() => start(id)}
+                      >
+                        <Show
+                          when={store.active === id}
+                          fallback={command.keybind(id) || language.t("settings.shortcuts.unassigned")}
+                        >
+                          {language.t("settings.shortcuts.pressKeys")}
+                        </Show>
+                      </button>
+                    </div>
+                  )}
+                </For>
+              </List>
+            </div>
+          </Show>
+        )}
+      </For>
+      {emptyResults}
+    </div>
+  )
+
+  return (
+    <Show
+      when={props.v2}
+      fallback={
+        <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+          <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
+            <div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
+              <div class="flex items-center justify-between gap-4">
+                <h2 class="text-16-medium text-text-strong">{language.t("settings.shortcuts.title")}</h2>
+                <Button size="small" variant="secondary" onClick={resetAll} disabled={!hasOverrides()}>
+                  {language.t("settings.shortcuts.reset.button")}
+                </Button>
+              </div>
+
+              <div class="flex items-center gap-2 px-3 h-9 rounded-lg bg-surface-base">
+                <Icon name="magnifying-glass" class="text-icon-weak-base flex-shrink-0" />
+                <TextField
+                  variant="ghost"
+                  type="text"
+                  value={store.filter}
+                  onChange={(v) => setStore("filter", v)}
+                  placeholder={language.t("settings.shortcuts.search.placeholder")}
+                  spellcheck={false}
+                  autocorrect="off"
+                  autocomplete="off"
+                  autocapitalize="off"
+                  class="flex-1"
+                />
+                <Show when={store.filter}>
+                  <IconButton icon="circle-x" variant="ghost" onClick={() => setStore("filter", "")} />
+                </Show>
+              </div>
+            </div>
+          </div>
+          {groups}
+        </div>
+      }
+    >
+      <>
+        <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
+          <div class="settings-v2-tab-header-row">
+            <h2 class="settings-v2-tab-title">{language.t("settings.shortcuts.title")}</h2>
+            <ButtonV2 variant="ghost" onClick={resetAll} disabled={!hasOverrides()}>
+              {language.t("settings.shortcuts.reset.button")}
+            </ButtonV2>
+          </div>
+          <div class="settings-v2-tab-search">
+            <TextInputV2
+              type="search"
+              appearance="base"
               value={store.filter}
-              onChange={(v) => setStore("filter", v)}
+              onInput={(event) => setStore("filter", event.currentTarget.value)}
               placeholder={language.t("settings.shortcuts.search.placeholder")}
               spellcheck={false}
               autocorrect="off"
               autocomplete="off"
               autocapitalize="off"
-              class="flex-1"
+              aria-label={language.t("settings.shortcuts.search.placeholder")}
             />
             <Show when={store.filter}>
-              <IconButton icon="circle-x" variant="ghost" onClick={() => setStore("filter", "")} />
+              <IconButtonV2
+                type="button"
+                variant="ghost-muted"
+                size="small"
+                class="settings-v2-tab-search-clear"
+                icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
+                onClick={() => setStore("filter", "")}
+              />
             </Show>
           </div>
         </div>
-      </div>
-
-      <div class="flex flex-col gap-8 max-w-[720px]">
-        <For each={GROUPS}>
-          {(group) => (
-            <Show when={(filtered().get(group) ?? []).length > 0}>
-              <div class="flex flex-col gap-1">
-                <h3 class="text-14-medium text-text-strong pb-2">{language.t(groupKey[group])}</h3>
-                <SettingsList>
-                  <For each={filtered().get(group) ?? []}>
-                    {(id) => (
-                      <div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
-                        <span class="text-14-regular text-text-strong">{title(id)}</span>
-                        <button
-                          type="button"
-                          data-keybind-id={id}
-                          classList={{
-                            "h-8 px-3 rounded-md text-12-regular": true,
-                            "bg-surface-base text-text-subtle hover:bg-surface-raised-base-hover active:bg-surface-raised-base-active":
-                              store.active !== id,
-                            "border border-border-weak-base bg-surface-inset-base text-text-weak": store.active === id,
-                          }}
-                          onClick={() => start(id)}
-                        >
-                          <Show
-                            when={store.active === id}
-                            fallback={command.keybind(id) || language.t("settings.shortcuts.unassigned")}
-                          >
-                            {language.t("settings.shortcuts.pressKeys")}
-                          </Show>
-                        </button>
-                      </div>
-                    )}
-                  </For>
-                </SettingsList>
-              </div>
-            </Show>
-          )}
-        </For>
-
-        <Show when={store.filter && !hasResults()}>
-          <div class="flex flex-col items-center justify-center py-12 text-center">
-            <span class="text-14-regular text-text-weak">{language.t("settings.shortcuts.search.empty")}</span>
-            <Show when={store.filter}>
-              <span class="text-14-regular text-text-strong mt-1">"{store.filter}"</span>
-            </Show>
-          </div>
-        </Show>
-      </div>
-    </div>
+        <div class="settings-v2-tab-body">{groups}</div>
+      </>
+    </Show>
   )
 }

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

@@ -2,7 +2,7 @@ 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 "@opencode-ai/ui/toast"
+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"

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

@@ -0,0 +1,80 @@
+import { Component } from "solid-js"
+import { Dialog } from "@opencode-ai/ui/v2/dialog-v2"
+import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
+import { Icon } from "@opencode-ai/ui/icon"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { SettingsGeneralV2 } from "./general"
+import { SettingsKeybinds } from "../settings-keybinds"
+import { SettingsProvidersV2 } from "./providers"
+import { SettingsModelsV2 } from "./models"
+import "./settings-v2.css"
+
+export const DialogSettings: Component = () => {
+  const language = useLanguage()
+  const platform = usePlatform()
+
+  return (
+    <Dialog size="x-large" class="settings-v2-dialog" data-component="settings-v2-dialog">
+      <TabsV2
+        orientation="vertical"
+        variant="settings"
+        defaultValue="general"
+        class="settings-v2"
+        data-component="settings-v2"
+      >
+        <TabsV2.List>
+          <div class="flex flex-col justify-between h-full w-full">
+            <div class="flex flex-col gap-3 w-full">
+              <div class="flex flex-col gap-3">
+                <div class="flex flex-col gap-1.5">
+                  <TabsV2.SectionTitle>{language.t("settings.section.desktop")}</TabsV2.SectionTitle>
+                  <div class="flex flex-col gap-1.5 w-full">
+                    <TabsV2.Trigger value="general">
+                      <Icon name="sliders" />
+                      {language.t("settings.tab.general")}
+                    </TabsV2.Trigger>
+                    <TabsV2.Trigger value="shortcuts">
+                      <Icon name="keyboard" />
+                      {language.t("settings.tab.shortcuts")}
+                    </TabsV2.Trigger>
+                  </div>
+                </div>
+
+                <div class="flex flex-col gap-1.5">
+                  <TabsV2.SectionTitle>{language.t("settings.section.server")}</TabsV2.SectionTitle>
+                  <div class="flex flex-col gap-1.5 w-full">
+                    <TabsV2.Trigger value="providers">
+                      <Icon name="providers" />
+                      {language.t("settings.providers.title")}
+                    </TabsV2.Trigger>
+                    <TabsV2.Trigger value="models">
+                      <Icon name="models" />
+                      {language.t("settings.models.title")}
+                    </TabsV2.Trigger>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="settings-v2-nav-footer">
+              <span>{language.t("app.name.desktop")}</span>
+              <span>v{platform.version}</span>
+            </div>
+          </div>
+        </TabsV2.List>
+        <TabsV2.Content value="general" class="settings-v2-panel">
+          <SettingsGeneralV2 />
+        </TabsV2.Content>
+        <TabsV2.Content value="shortcuts" class="settings-v2-panel">
+          <SettingsKeybinds v2 />
+        </TabsV2.Content>
+        <TabsV2.Content value="providers" class="settings-v2-panel">
+          <SettingsProvidersV2 />
+        </TabsV2.Content>
+        <TabsV2.Content value="models" class="settings-v2-panel">
+          <SettingsModelsV2 />
+        </TabsV2.Content>
+      </TabsV2>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,825 @@
+import { Component, Show, createMemo, createResource, onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Icon } from "@opencode-ai/ui/icon"
+import { SelectV2 } from "@opencode-ai/ui/select-v2"
+import { Switch } from "@opencode-ai/ui/v2/switch-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { showToast } from "@/utils/toast"
+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 {
+  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 { SettingsListV2 } from "./parts/list"
+import { SettingsRowV2 } from "./parts/row"
+import "./settings-v2.css"
+
+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 SettingsGeneralV2: Component = () => {
+  const theme = useTheme()
+  const language = useLanguage()
+  const permission = usePermission()
+  const platform = usePlatform()
+  const dialog = useDialog()
+  const params = useParams()
+  const settings = useSettings()
+
+  const [store, setStore] = createStore({
+    checking: false,
+  })
+
+  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 check = () => {
+    if (!platform.checkUpdate) return
+    setStore("checking", true)
+
+    void platform
+      .checkUpdate()
+      .then((result) => {
+        if (!result.updateAvailable) {
+          showToast({
+            variant: "success",
+            icon: "circle-check",
+            title: language.t("settings.updates.toast.latest.title"),
+            description: language.t("settings.updates.toast.latest.description", { version: platform.version ?? "" }),
+          })
+          return
+        }
+
+        const actions = platform.updateAndRestart
+          ? [
+              {
+                label: language.t("toast.update.action.installRestart"),
+                onClick: async () => {
+                  await platform.updateAndRestart!()
+                },
+              },
+              {
+                label: language.t("toast.update.action.notYet"),
+                onClick: "dismiss" as const,
+              },
+            ]
+          : [
+              {
+                label: language.t("toast.update.action.notYet"),
+                onClick: "dismiss" as const,
+              },
+            ]
+
+        showToast({
+          persistent: true,
+          icon: "download",
+          title: language.t("toast.update.title"),
+          description: language.t("toast.update.description", { version: result.version ?? "" }),
+          actions,
+        })
+      })
+      .catch((err: unknown) => {
+        const message = err instanceof Error ? err.message : String(err)
+        showToast({ title: language.t("common.requestFailed"), description: message })
+      })
+      .finally(() => setStore("checking", false))
+  }
+
+  const themeOptions = createMemo<ThemeOption[]>(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
+
+  const globalSync = useServerSync()
+  const globalSdk = useServerSDK()
+
+  const [shells] = createResource(
+    () =>
+      globalSdk.client.pty
+        .shells()
+        .then((res) => res.data ?? [])
+        .catch(() => [] 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(() => globalSync.data.config.shell ?? "")
+
+  const shellOptions = createMemo<ShellSelectOption[]>(() => {
+    const list = shells.latest
+    const current = globalSync.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)
+    },
+  })
+
+  const GeneralSection = () => (
+    <div class="settings-v2-section">
+      <SettingsListV2>
+        <SettingsRowV2
+          title={language.t("settings.general.row.language.title")}
+          description={language.t("settings.general.row.language.description")}
+        >
+          <SelectV2
+            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)}
+          />
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("command.permissions.autoaccept.enable")}
+          description={language.t("toast.permissions.autoaccept.on.description")}
+        >
+          <div data-action="settings-auto-accept-permissions">
+            <Switch checked={accepting()} disabled={!dir()} onChange={toggleAccept} />
+          </div>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.row.shell.title")}
+          description={language.t("settings.general.row.shell.description")}
+        >
+          <SelectV2
+            data-action="settings-shell"
+            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
+              globalSync.updateConfig({ shell: option.value })
+            }}
+          />
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          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>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          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>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          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>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.row.showSessionProgressBar.title")}
+          description={language.t("settings.general.row.showSessionProgressBar.description")}
+        >
+          <div data-action="settings-show-session-progress-bar">
+            <Switch
+              checked={settings.general.showSessionProgressBar()}
+              onChange={(checked) => settings.general.setShowSessionProgressBar(checked)}
+            />
+          </div>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.row.newLayoutDesigns.title")}
+          description={language.t("settings.general.row.newLayoutDesigns.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/dialog-settings").then((module) => {
+                  dialog.show(() => <module.DialogSettings />)
+                })
+              }}
+            />
+          </div>
+        </SettingsRowV2>
+      </SettingsListV2>
+    </div>
+  )
+
+  const AdvancedSection = () => (
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.advanced")}</h3>
+
+      <SettingsListV2>
+        <SettingsRowV2
+          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>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          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>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          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>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.row.showTerminal.title")}
+          description={language.t("settings.general.row.showTerminal.description")}
+        >
+          <div data-action="settings-show-terminal">
+            <Switch
+              checked={settings.general.showTerminal()}
+              onChange={(checked) => settings.general.setShowTerminal(checked)}
+            />
+          </div>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          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>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          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>
+        </SettingsRowV2>
+      </SettingsListV2>
+    </div>
+  )
+
+  const AppearanceSection = () => (
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.appearance")}</h3>
+
+      <SettingsListV2>
+        <SettingsRowV2
+          title={language.t("settings.general.row.colorScheme.title")}
+          description={language.t("settings.general.row.colorScheme.description")}
+        >
+          <SelectV2
+            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)}
+            onHighlight={(option) => {
+              if (!option) return
+              theme.previewColorScheme(option.value)
+              return () => theme.cancelPreview()
+            }}
+          />
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.row.theme.title")}
+          description={
+            <>
+              {language.t("settings.general.row.theme.description")}{" "}
+              <Link class="settings-v2-link" href="https://opencode.ai/docs/themes/">
+                {language.t("common.learnMore")}
+              </Link>
+            </>
+          }
+        >
+          <SelectV2
+            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)
+            }}
+            onHighlight={(option) => {
+              if (!option) return
+              theme.previewTheme(option.id)
+              return () => theme.cancelPreview()
+            }}
+          />
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.row.uiFont.title")}
+          description={language.t("settings.general.row.uiFont.description")}
+        >
+          <div class="w-full sm:w-[220px]">
+            <TextInputV2
+              data-action="settings-ui-font"
+              type="text"
+              appearance="base"
+              value={sans()}
+              onInput={(event) => settings.appearance.setUIFont(event.currentTarget.value)}
+              placeholder={sansDefault}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              aria-label={language.t("settings.general.row.uiFont.title")}
+              style={{ "font-family": sansFontFamily(settings.appearance.uiFont()) }}
+            />
+          </div>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.row.font.title")}
+          description={language.t("settings.general.row.font.description")}
+        >
+          <div class="w-full sm:w-[220px]">
+            <TextInputV2
+              data-action="settings-code-font"
+              type="text"
+              appearance="base"
+              value={mono()}
+              onInput={(event) => settings.appearance.setFont(event.currentTarget.value)}
+              placeholder={monoDefault}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              aria-label={language.t("settings.general.row.font.title")}
+              style={{ "font-family": monoFontFamily(settings.appearance.font()) }}
+            />
+          </div>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.row.terminalFont.title")}
+          description={language.t("settings.general.row.terminalFont.description")}
+        >
+          <div class="w-full sm:w-[220px]">
+            <TextInputV2
+              data-action="settings-terminal-font"
+              type="text"
+              appearance="base"
+              value={terminal()}
+              onInput={(event) => settings.appearance.setTerminalFont(event.currentTarget.value)}
+              placeholder={terminalDefault}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              aria-label={language.t("settings.general.row.terminalFont.title")}
+              style={{ "font-family": terminalFontFamily(settings.appearance.terminalFont()) }}
+            />
+          </div>
+        </SettingsRowV2>
+      </SettingsListV2>
+    </div>
+  )
+
+  const NotificationsSection = () => (
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.notifications")}</h3>
+
+      <SettingsListV2>
+        <SettingsRowV2
+          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>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          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>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          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>
+        </SettingsRowV2>
+      </SettingsListV2>
+    </div>
+  )
+
+  const SoundsSection = () => (
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.sounds")}</h3>
+
+      <SettingsListV2>
+        <SettingsRowV2
+          title={language.t("settings.general.sounds.agent.title")}
+          description={language.t("settings.general.sounds.agent.description")}
+        >
+          <SelectV2
+            data-action="settings-sounds-agent"
+            {...soundSelectProps(
+              () => settings.sounds.agentEnabled(),
+              () => settings.sounds.agent(),
+              (value) => settings.sounds.setAgentEnabled(value),
+              (id) => settings.sounds.setAgent(id),
+            )}
+          />
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.sounds.permissions.title")}
+          description={language.t("settings.general.sounds.permissions.description")}
+        >
+          <SelectV2
+            data-action="settings-sounds-permissions"
+            {...soundSelectProps(
+              () => settings.sounds.permissionsEnabled(),
+              () => settings.sounds.permissions(),
+              (value) => settings.sounds.setPermissionsEnabled(value),
+              (id) => settings.sounds.setPermissions(id),
+            )}
+          />
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.sounds.errors.title")}
+          description={language.t("settings.general.sounds.errors.description")}
+        >
+          <SelectV2
+            data-action="settings-sounds-errors"
+            {...soundSelectProps(
+              () => settings.sounds.errorsEnabled(),
+              () => settings.sounds.errors(),
+              (value) => settings.sounds.setErrorsEnabled(value),
+              (id) => settings.sounds.setErrors(id),
+            )}
+          />
+        </SettingsRowV2>
+      </SettingsListV2>
+    </div>
+  )
+
+  const UpdatesSection = () => (
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.updates")}</h3>
+
+      <SettingsListV2>
+        <SettingsRowV2
+          title={language.t("settings.updates.row.startup.title")}
+          description={language.t("settings.updates.row.startup.description")}
+        >
+          <div data-action="settings-updates-startup">
+            <Switch
+              checked={settings.updates.startup()}
+              disabled={!platform.checkUpdate}
+              onChange={(checked) => settings.updates.setStartup(checked)}
+            />
+          </div>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          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>
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.updates.row.check.title")}
+          description={language.t("settings.updates.row.check.description")}
+        >
+          <ButtonV2 size="normal" variant="neutral" disabled={store.checking || !platform.checkUpdate} onClick={check}>
+            {store.checking
+              ? language.t("settings.updates.action.checking")
+              : language.t("settings.updates.action.checkNow")}
+          </ButtonV2>
+        </SettingsRowV2>
+      </SettingsListV2>
+    </div>
+  )
+
+  const DisplaySection = () => (
+    <Show when={desktop()}>
+      <div class="settings-v2-section">
+        <h3 class="settings-v2-section-title">{language.t("settings.general.section.display")}</h3>
+
+        <SettingsListV2>
+          <SettingsRowV2
+            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>
+          </SettingsRowV2>
+
+          <Show when={linux()}>
+            <SettingsRowV2
+              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>
+            </SettingsRowV2>
+          </Show>
+        </SettingsListV2>
+      </div>
+    </Show>
+  )
+
+  return (
+    <>
+      <div class="settings-v2-tab-header">
+        <h2 class="settings-v2-tab-title">{language.t("settings.tab.general")}</h2>
+      </div>
+
+      <div class="settings-v2-tab-body">
+        <GeneralSection />
+
+        <AppearanceSection />
+
+        <NotificationsSection />
+
+        <SoundsSection />
+
+        <UpdatesSection />
+
+        <DisplaySection />
+
+        <Show when={desktop()}>
+          <AdvancedSection />
+        </Show>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1 @@
+export { DialogSettings } from "./dialog-settings-v2"

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

@@ -0,0 +1,138 @@
+import { useFilteredList } from "@opencode-ai/ui/hooks"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { Switch } from "@opencode-ai/ui/v2/switch-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { type Component, For, Show } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { useModels } from "@/context/models"
+import { popularProviders } from "@/hooks/use-providers"
+import { SettingsListV2 } from "./parts/list"
+import { SettingsRowV2 } from "./parts/row"
+import "./settings-v2.css"
+
+type ModelItem = ReturnType<ReturnType<typeof useModels>["list"]>[number]
+
+const PROVIDER_ICON_SIZE = 16
+
+export const SettingsModelsV2: 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="settings-v2-tab-header settings-v2-tab-header--stacked">
+        <h2 class="settings-v2-tab-title">{language.t("settings.models.title")}</h2>
+        <div class="settings-v2-tab-search">
+          <TextInputV2
+            type="search"
+            appearance="base"
+            value={list.filter()}
+            onInput={(event) => list.onInput(event.currentTarget.value)}
+            placeholder={language.t("dialog.model.search.placeholder")}
+            spellcheck={false}
+            autocorrect="off"
+            autocomplete="off"
+            autocapitalize="off"
+            aria-label={language.t("dialog.model.search.placeholder")}
+          />
+          <Show when={list.filter()}>
+            <IconButtonV2
+              type="button"
+              variant="ghost-muted"
+              size="small"
+              class="settings-v2-tab-search-clear"
+              icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
+              onClick={() => list.clear()}
+            />
+          </Show>
+        </div>
+      </div>
+
+      <div class="settings-v2-tab-body settings-v2-models">
+        <Show
+          when={!list.grouped.loading}
+          fallback={
+            <div class="settings-v2-models-status">
+              {language.t("common.loading")}
+              {language.t("common.loading.ellipsis")}
+            </div>
+          }
+        >
+          <Show
+            when={list.flat().length > 0}
+            fallback={
+              <div class="settings-v2-models-status">
+                <span>{language.t("dialog.model.empty")}</span>
+                <Show when={list.filter()}>
+                  <span class="settings-v2-models-status-filter">&quot;{list.filter()}&quot;</span>
+                </Show>
+              </div>
+            }
+          >
+            <For each={list.grouped.latest}>
+              {(group) => (
+                <div class="settings-v2-section" data-component="settings-models-provider">
+                  <div class="settings-v2-models-group-header">
+                    <ProviderIcon
+                      id={group.category}
+                      width={PROVIDER_ICON_SIZE}
+                      height={PROVIDER_ICON_SIZE}
+                      class="settings-v2-models-provider-icon shrink-0"
+                    />
+                    <h3 class="settings-v2-section-title">{group.items[0].provider.name}</h3>
+                  </div>
+                  <SettingsListV2>
+                    <For each={group.items}>
+                      {(item) => {
+                        const key = { providerID: item.provider.id, modelID: item.id }
+                        return (
+                          <SettingsRowV2 title={item.name} description="">
+                            <div>
+                              <Switch
+                                checked={models.visible(key)}
+                                onChange={(checked) => {
+                                  models.setVisibility(key, checked)
+                                }}
+                                hideLabel
+                              >
+                                {item.name}
+                              </Switch>
+                            </div>
+                          </SettingsRowV2>
+                        )
+                      }}
+                    </For>
+                  </SettingsListV2>
+                </div>
+              )}
+            </For>
+          </Show>
+        </Show>
+      </div>
+    </>
+  )
+}

packages/app/src/components/settings-v2/parts/list.tsx

@@ -0,0 +1,6 @@
+import type { Component, JSX } from "solid-js"
+import "../settings-v2.css"
+
+export const SettingsListV2: Component<{ children: JSX.Element }> = (props) => {
+  return <div data-component="settings-v2-list">{props.children}</div>
+}

packages/app/src/components/settings-v2/parts/row.tsx

@@ -0,0 +1,20 @@
+import type { Component, JSX } from "solid-js"
+import "../settings-v2.css"
+
+export interface SettingsRowV2Props {
+  title: string | JSX.Element
+  description: string | JSX.Element
+  children: JSX.Element
+}
+
+export const SettingsRowV2: Component<SettingsRowV2Props> = (props) => {
+  return (
+    <div data-component="settings-v2-row">
+      <div data-slot="settings-v2-row-copy">
+        <div data-slot="settings-v2-row-title">{props.title}</div>
+        <div data-slot="settings-v2-row-description">{props.description}</div>
+      </div>
+      <div data-slot="settings-v2-row-control">{props.children}</div>
+    </div>
+  )
+}

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

@@ -0,0 +1,263 @@
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Tag } from "@opencode-ai/ui/v2/badge-v2"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+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 } from "../dialog-connect-provider"
+import { DialogSelectProvider } from "../dialog-select-provider"
+import { DialogCustomProvider } from "../dialog-custom-provider"
+import { SettingsListV2 } from "./parts/list"
+import "./settings-v2.css"
+
+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
+
+const PROVIDER_ICON_SIZE = 16
+
+export const SettingsProvidersV2: Component = () => {
+  const dialog = useDialog()
+  const language = useLanguage()
+  const globalSDK = useServerSDK()
+  const globalSync = useServerSync()
+  const providers = useProviders()
+
+  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"
+
+  const note = (id: string) => PROVIDER_NOTES.find((item) => item.match(id))?.key
+
+  const isConfigCustom = (providerID: string) => {
+    const provider = globalSync.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) => {
+    const before = globalSync.data.config.disabled_providers ?? []
+    const next = before.includes(providerID) ? before : [...before, providerID]
+    globalSync.set("config", "disabled_providers", next)
+
+    await globalSync
+      .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) => {
+        globalSync.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) => {
+    if (isConfigCustom(providerID)) {
+      await globalSDK.client.auth.remove({ providerID }).catch(() => undefined)
+      await disableProvider(providerID, name)
+      return
+    }
+    await globalSDK.client.auth
+      .remove({ providerID })
+      .then(async () => {
+        await globalSDK.client.global.dispose()
+        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="settings-v2-tab-header">
+        <h2 class="settings-v2-tab-title">{language.t("settings.providers.title")}</h2>
+      </div>
+
+      <div class="settings-v2-tab-body settings-v2-providers">
+        <div class="settings-v2-section" data-component="connected-providers-section">
+          <h3 class="settings-v2-section-title">{language.t("settings.providers.section.connected")}</h3>
+          <SettingsListV2>
+            <Show
+              when={connected().length > 0}
+              fallback={
+                <div class="settings-v2-provider-empty">{language.t("settings.providers.connected.empty")}</div>
+              }
+            >
+              <For each={connected()}>
+                {(item) => (
+                  <div class="settings-v2-provider-row group">
+                    <div class="settings-v2-provider-lead">
+                      <ProviderIcon
+                        id={item.id}
+                        width={PROVIDER_ICON_SIZE}
+                        height={PROVIDER_ICON_SIZE}
+                        class="settings-v2-provider-icon shrink-0"
+                      />
+                      <div class="settings-v2-provider-main">
+                        <span class="settings-v2-provider-name truncate">{item.name}</span>
+                        <Tag>{type(item)}</Tag>
+                      </div>
+                    </div>
+                    <Show
+                      when={canDisconnect(item)}
+                      fallback={
+                        <span class="settings-v2-provider-env-hint">
+                          {language.t("settings.providers.connected.environmentDescription")}
+                        </span>
+                      }
+                    >
+                      <ButtonV2 size="normal" variant="ghost-muted" onClick={() => void disconnect(item.id, item.name)}>
+                        {language.t("common.disconnect")}
+                      </ButtonV2>
+                    </Show>
+                  </div>
+                )}
+              </For>
+            </Show>
+          </SettingsListV2>
+        </div>
+
+        <div class="settings-v2-section">
+          <h3 class="settings-v2-section-title">{language.t("settings.providers.section.popular")}</h3>
+          <SettingsListV2>
+            <For each={popular()}>
+              {(item) => (
+                <div class="settings-v2-provider-row">
+                  <div class="settings-v2-provider-lead">
+                    <ProviderIcon
+                      id={item.id}
+                      width={PROVIDER_ICON_SIZE}
+                      height={PROVIDER_ICON_SIZE}
+                      class="settings-v2-provider-icon shrink-0"
+                    />
+                    <div class="settings-v2-provider-copy">
+                      <div class="settings-v2-provider-main">
+                        <span class="settings-v2-provider-name">{item.name}</span>
+                        <Show when={item.id === "opencode" || item.id === "opencode-go"}>
+                          <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
+                        </Show>
+                      </div>
+                      <Show when={note(item.id)}>
+                        {(key) => <p class="settings-v2-provider-description">{language.t(key())}</p>}
+                      </Show>
+                    </div>
+                  </div>
+                  <ButtonV2
+                    size="normal"
+                    variant="neutral"
+                    icon="plus"
+                    onClick={() => {
+                      dialog.show(() => <DialogConnectProvider provider={item.id} />)
+                    }}
+                  >
+                    {language.t("common.connect")}
+                  </ButtonV2>
+                </div>
+              )}
+            </For>
+
+            <div class="settings-v2-provider-row" data-component="custom-provider-section">
+              <div class="settings-v2-provider-lead">
+                <ProviderIcon
+                  id="synthetic"
+                  width={PROVIDER_ICON_SIZE}
+                  height={PROVIDER_ICON_SIZE}
+                  class="settings-v2-provider-icon shrink-0"
+                />
+                <div class="settings-v2-provider-copy">
+                  <div class="settings-v2-provider-main">
+                    <span class="settings-v2-provider-name">{language.t("provider.custom.title")}</span>
+                    <Tag>{language.t("settings.providers.tag.custom")}</Tag>
+                  </div>
+                  <p class="settings-v2-provider-description">{language.t("settings.providers.custom.description")}</p>
+                </div>
+              </div>
+              <ButtonV2
+                size="normal"
+                variant="neutral"
+                icon="plus"
+                onClick={() => {
+                  dialog.show(() => <DialogCustomProvider back="close" />)
+                }}
+              >
+                {language.t("common.connect")}
+              </ButtonV2>
+            </div>
+          </SettingsListV2>
+
+          <button
+            type="button"
+            class="settings-v2-providers-view-all"
+            onClick={() => {
+              dialog.show(() => <DialogSelectProvider />)
+            }}
+          >
+            {language.t("dialog.provider.viewAll")}
+          </button>
+        </div>
+      </div>
+    </>
+  )
+}

packages/app/src/components/settings-v2/settings-v2.css

@@ -0,0 +1,515 @@
+@import "@opencode-ai/ui/v2/text-input-v2.css";
+@import "@opencode-ai/ui/v2/button-v2.css";
+
+[data-component="settings-v2"] {
+  height: 100%;
+}
+
+[data-component="settings-v2-dialog"] [data-slot="dialog-body"] {
+  padding: 0;
+  overflow: hidden;
+}
+
+.settings-v2-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.settings-v2-panel::-webkit-scrollbar {
+  display: none;
+}
+
+.settings-v2-tab-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  padding: 40px 40px 32px;
+  background: linear-gradient(to bottom, var(--v2-background-bg-base) calc(100% - 24px), transparent);
+}
+
+.settings-v2-tab-title {
+  font-size: 15px;
+  font-weight: 640;
+  line-height: 1;
+  color: var(--v2-text-text-base);
+}
+
+.settings-v2-tab-body {
+  display: flex;
+  flex-direction: column;
+  gap: 36px;
+  width: 100%;
+  padding: 0 40px 40px;
+}
+
+[data-slot="settings-v2-row-description"] a.settings-v2-link {
+  color: var(--v2-text-text-accent);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+[data-slot="settings-v2-row-description"] a.settings-v2-link:hover {
+  color: var(--v2-text-text-accent-hover);
+}
+
+.settings-v2-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.settings-v2-section-title {
+  padding-bottom: 8px;
+  font-size: 15px;
+  font-weight: 640;
+  line-height: 1;
+  color: var(--v2-text-text-base);
+}
+
+.settings-v2-section-title + [data-component="settings-v2-list"] {
+  margin-top: -4px;
+  margin-bottom: 0;
+}
+
+[data-component="settings-v2-list"] {
+  border-radius: 8px;
+  background-color: var(--v2-background-bg-layer-01);
+  padding-inline: 20px;
+  box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
+}
+
+[data-slot="dialog-container"]:has(.settings-v2-dialog) {
+  box-shadow: var(--v2-elevation-overlay);
+}
+
+[data-component="settings-v2-row"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+  padding-block: 20px;
+  border-bottom: 0.5px solid var(--v2-border-border-base);
+}
+
+[data-component="settings-v2-row"]:last-child {
+  border-bottom: none;
+}
+
+@media (min-width: 640px) {
+  [data-component="settings-v2-row"] {
+    flex-wrap: nowrap;
+  }
+}
+
+[data-slot="settings-v2-row-copy"] {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+}
+
+[data-slot="settings-v2-row-title"] {
+  font-style: normal;
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+  font-variation-settings: "slnt" 0;
+}
+
+[data-slot="settings-v2-row-description"] {
+  font-size: 11px;
+  font-weight: 440;
+  line-height: 1;
+  color: var(--v2-text-text-muted);
+}
+
+[data-slot="settings-v2-row-control"] {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+}
+
+[data-slot="settings-v2-row-control"] > div:has([data-component="switch"]),
+[data-slot="settings-v2-row-control"] > [data-component="switch"] {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px;
+}
+
+@media (min-width: 640px) {
+  [data-slot="settings-v2-row-control"] {
+    width: auto;
+    flex-shrink: 0;
+  }
+}
+
+[data-slot="settings-v2-row-control"] [data-component="text-input-v2"] {
+  width: 100%;
+}
+
+[data-component="settings-v2-dialog"] [data-component="select"][data-trigger-style="settings-v2"] {
+  width: fit-content;
+  max-width: 100%;
+}
+
+[data-component="settings-v2-dialog"]
+  [data-component="select"][data-trigger-style="settings-v2"]
+  [data-component="button-v2"] {
+  width: fit-content;
+  max-width: 100%;
+}
+
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-list"] {
+  background-color: var(--v2-background-bg-layer-01);
+}
+
+.settings-v2-nav-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 4px 0 4px 4px;
+}
+
+.settings-v2-nav-footer > span {
+  font-size: 11px;
+  font-weight: 440;
+  line-height: 1;
+  color: var(--v2-text-text-faint);
+}
+
+.settings-v2-legacy-panel {
+  height: 100%;
+  overflow: hidden;
+}
+
+.settings-v2-legacy-panel [data-component="dialog"] {
+  display: contents;
+}
+
+.settings-v2-provider-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding-block: 20px;
+  border-bottom: 0.5px solid var(--v2-border-border-base);
+}
+
+.settings-v2-provider-row:last-child {
+  border-bottom: none;
+}
+
+@media (min-width: 640px) {
+  .settings-v2-provider-row {
+    flex-wrap: nowrap;
+  }
+}
+
+.settings-v2-providers [data-component="provider-icon"] {
+  color: var(--v2-icon-icon-base);
+}
+
+.settings-v2-provider-lead {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.settings-v2-provider-lead:not(:has(.settings-v2-provider-copy)) {
+  align-items: center;
+}
+
+.settings-v2-provider-copy {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.settings-v2-provider-main {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.settings-v2-provider-name {
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 16px;
+  color: var(--v2-text-text-base);
+}
+
+.settings-v2-provider-description {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 1;
+  color: var(--v2-text-text-muted);
+}
+
+.settings-v2-provider-empty {
+  padding-block: 20px;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 1;
+  color: var(--v2-text-text-muted);
+}
+
+.settings-v2-provider-env-hint {
+  padding-right: 12px;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 1;
+  color: var(--v2-text-text-muted);
+  opacity: 0;
+  transition: opacity 200ms ease;
+  cursor: default;
+}
+
+.group:hover .settings-v2-provider-env-hint {
+  opacity: 1;
+}
+
+.settings-v2-providers-view-all {
+  margin-top: 20px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 1;
+  color: var(--v2-text-text-accent);
+  cursor: pointer;
+  text-align: left;
+}
+
+.settings-v2-providers-view-all:hover {
+  color: var(--v2-text-text-accent-hover);
+}
+
+.settings-v2-tab-body.settings-v2-providers {
+  gap: 32px;
+}
+
+.settings-v2-tab-header:has(+ .settings-v2-tab-body.settings-v2-providers) {
+  padding-bottom: 32px;
+}
+
+.settings-v2-providers .settings-v2-section-title {
+  padding-bottom: 0;
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 1;
+}
+
+.settings-v2-providers .settings-v2-section-title + [data-component="settings-v2-list"] {
+  margin-top: 16px;
+}
+
+.settings-v2-tab-header.settings-v2-tab-header--stacked {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  padding-bottom: 32px;
+}
+
+.settings-v2-tab-header--stacked > .settings-v2-tab-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.settings-v2-tab-search {
+  position: relative;
+  width: 100%;
+}
+
+.settings-v2-tab-search [data-component="text-input-v2"] {
+  width: 100%;
+}
+
+.settings-v2-tab-search [data-slot="text-input-v2-input"] {
+  padding-right: 28px;
+}
+
+.settings-v2-tab-search-clear {
+  position: absolute;
+  top: 50%;
+  right: 6px;
+  z-index: 1;
+  transform: translateY(-50%);
+}
+
+.settings-v2-tab-body.settings-v2-models {
+  gap: 24px;
+}
+
+.settings-v2-models-group-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-bottom: 8px;
+}
+
+.settings-v2-models .settings-v2-section-title {
+  padding-bottom: 0;
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 16px;
+}
+
+.settings-v2-models [data-component="provider-icon"] {
+  color: var(--v2-icon-icon-base);
+}
+
+.settings-v2-models .settings-v2-section-title + [data-component="settings-v2-list"] {
+  margin-top: 0;
+}
+
+.settings-v2-models [data-slot="settings-v2-row-description"]:empty {
+  display: none;
+}
+
+.settings-v2-models [data-slot="settings-v2-row-copy"] {
+  gap: 0;
+}
+
+.settings-v2-models [data-slot="settings-v2-row-title"] {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.settings-v2-models-status {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding-block: 48px;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 1;
+  color: var(--v2-text-text-muted);
+  text-align: center;
+}
+
+.settings-v2-models-status-filter {
+  color: var(--v2-text-text-base);
+}
+
+.settings-v2-shortcuts .settings-v2-section {
+  gap: 16px;
+}
+
+.settings-v2-shortcuts .settings-v2-section-title {
+  padding-bottom: 0;
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 1;
+}
+
+.settings-v2-shortcuts [data-component="settings-v2-list"] {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 20px;
+  border-radius: 6px;
+}
+
+.settings-v2-shortcuts [data-component="settings-v2-list"] > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding-top: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.settings-v2-shortcuts [data-component="settings-v2-list"] > div:not(:last-child) {
+  padding-bottom: 16px;
+  margin-bottom: 16px;
+  border-bottom: 0.5px solid var(--v2-border-border-base);
+}
+
+.settings-v2-shortcuts [data-component="settings-v2-list"] > div > span {
+  font-weight: 440;
+  font-size: 13px;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+  font-variation-settings: "slnt" 0;
+}
+
+.settings-v2-keybind-button {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  padding: 6px 8px;
+  margin: -6px -8px;
+  border: 0;
+  border-radius: 2px;
+  background: transparent;
+  cursor: pointer;
+  font-style: normal;
+  font-weight: 530;
+  font-size: 11px;
+  line-height: 1;
+  letter-spacing: 0.05px;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings:
+    "tnum" on,
+    "lnum" on;
+  font-variation-settings: "slnt" 0;
+  color: var(--v2-text-text-faint);
+}
+
+.settings-v2-keybind-button:hover {
+  background-color: var(--v2-background-bg-layer-02);
+}
+
+.settings-v2-keybind-button:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 2px;
+}
+
+.settings-v2-keybind-button--active {
+  color: var(--v2-text-text-faint);
+  border-radius: 2px;
+  background-color: var(--v2-background-bg-layer-02);
+}
+
+.settings-v2-shortcuts-status {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding-block: 48px;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 1;
+  color: var(--v2-text-text-muted);
+  text-align: center;
+}
+
+.settings-v2-shortcuts-status-filter {
+  color: var(--v2-text-text-base);
+}

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

@@ -3,9 +3,9 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Switch } from "@opencode-ai/ui/switch"
 import { Tabs } from "@opencode-ai/ui/tabs"
-import { useMutation, useQueryClient } from "@tanstack/solid-query"
 import { showToast } from "@opencode-ai/ui/toast"
-import { useNavigate } from "@solidjs/router"
+import { useMutation, useQueryClient } from "@tanstack/solid-query"
+import { useLocation, useNavigate } from "@solidjs/router"
 import { type Accessor, createEffect, createMemo, For, type JSXElement, onCleanup, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
@@ -286,7 +286,7 @@ function ServerStatusList(props: { state: ServerStatusState }) {
   )
 }
 
-export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
+export function StatusPopoverBody(props: { shown: Accessor<boolean>; close?: () => void }) {
   const sync = useSync()
   const servers = useServers()
   const server = useServer()
@@ -294,6 +294,7 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
   const dialog = useDialog()
   const language = useLanguage()
   const navigate = useNavigate()
+  const location = useLocation()
 
   const fail = (err: unknown) => {
     showToast({
@@ -374,8 +375,16 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
                       aria-disabled={blocked()}
                       onClick={() => {
                         if (blocked()) return
+                        props.close?.()
                         navigate("/")
-                        queueMicrotask(() => server.setActive(key))
+                        const activate = () => {
+                          if (location.pathname !== "/") {
+                            setTimeout(activate, 16)
+                            return
+                          }
+                          setTimeout(() => server.setActive(key), 0)
+                        }
+                        setTimeout(activate, 0)
                       }}
                     >
                       <ServerHealthIndicator health={servers.health[key]} />

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

@@ -1,7 +1,7 @@
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/components/icon-button-v2.jsx"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/components/icon.jsx"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { Popover } from "@opencode-ai/ui/popover"
 import { Suspense, createMemo, createSignal, lazy, Show, type JSX } from "solid-js"
 import { useLanguage } from "@/context/language"
@@ -67,7 +67,7 @@ export function StatusPopover() {
             <div class="w-[360px] h-14 rounded-xl bg-background-strong shadow-[var(--shadow-lg-border-base)]" />
           }
         >
-          <Body shown={shown} />
+          <Body shown={shown} close={() => setShown(false)} />
         </Suspense>
       </Show>
     </Popover>

packages/app/src/components/terminal.tsx

@@ -2,7 +2,7 @@ import { withAlpha } from "@opencode-ai/ui/theme/color"
 import { useTheme } from "@opencode-ai/ui/theme/context"
 import { resolveThemeVariant } from "@opencode-ai/ui/theme/resolve"
 import type { HexColor } from "@opencode-ai/ui/theme/types"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import type { FitAddon, Ghostty, Terminal as Term } from "ghostty-web"
 import { type ComponentProps, createEffect, createMemo, onCleanup, onMount, splitProps } from "solid-js"
 import { SerializeAddon } from "@/addons/serialize"

packages/app/src/components/titlebar.tsx

@@ -6,10 +6,10 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { Button } from "@opencode-ai/ui/button"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { useTheme } from "@opencode-ai/ui/theme/context"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/components/icon-button-v2.jsx"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/components/icon.jsx"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 
-import { getAvatarColors, useLayout, type LocalProject } from "@/context/layout"
+import { getProjectAvatarVariant, useLayout, type LocalProject } from "@/context/layout"
 import { usePlatform } from "@/context/platform"
 import { useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
@@ -20,8 +20,9 @@ import { useServerSync } from "@/context/server-sync"
 import { decodeDirectory } from "@/pages/directory-layout"
 import { iife } from "@opencode-ai/core/util/iife"
 import { base64Encode } from "@opencode-ai/core/util/encode"
-import { Avatar as AvatarV2 } from "@opencode-ai/ui/v2/components/avatar-v2.jsx"
+import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { displayName, getProjectAvatarSource, projectForSession } from "@/pages/layout/helpers"
+import { useSessionTabAvatarState } from "@/pages/layout/project-avatar-state"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { StatusPopoverV2 } from "@/components/status-popover"
 import {
@@ -370,22 +371,28 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
               return true
             }
 
-            makeEventListener(
-              document,
-              "keydown",
-              (event) => {
-                if (!event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return
-                if (event.key.toLowerCase() !== "w") return
-                if (!(closeCurrentSessionTab() || closeNewSessionTab())) return
+            const openNewTab = () => navigate(newSessionHref())
 
-                event.preventDefault()
-                event.stopPropagation()
-              },
-              { capture: true },
-            )
+            const closeActiveTab = () => closeCurrentSessionTab() || closeNewSessionTab()
 
             command.register(() => {
               const commands = [
+                {
+                  id: "tab.new",
+                  category: "tab",
+                  title: language.t("command.session.new"),
+                  keybind: "mod+t",
+                  hidden: true,
+                  onSelect: openNewTab,
+                },
+                {
+                  id: "tab.close",
+                  category: "tab",
+                  title: language.t("command.tab.close"),
+                  keybind: "mod+w",
+                  hidden: true,
+                  onSelect: closeActiveTab,
+                },
                 {
                   id: `tab.prev`,
                   category: "tab",
@@ -489,6 +496,7 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                             title={tab.info.title}
                             project={projectForSession(tab.info, projects(), projectByID())}
                             directory={tab.dir}
+                            sessionId={tab.info.id}
                             onClose={() => tabsStoreActions.removeTab(tab.href)}
                           />
                         </>
@@ -736,26 +744,39 @@ function TabNavItem(props: {
   title: string
   project?: LocalProject
   directory: string
+  sessionId: string
+  hideClose?: boolean
   onClose: () => void
 }) {
   const match = useMatch(() => props.href)
   const isActive = () => !!match()
+  const closeTab = (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    props.onClose()
+  }
   return (
     <div
       class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
       data-active={isActive()}
+      onMouseDown={(event) => {
+        if (event.button !== 1) return
+        closeTab(event)
+      }}
     >
       <a
         href={props.href}
-        class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 overflow-hidden text-[13px] font-medium leading-5 text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base"
+        class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base"
       >
-        <ProjectTabAvatar project={props.project} directory={props.directory} />
-        <span class="text-clip leading-5">{props.title}</span>
+        <span data-slot="project-avatar-slot">
+          <ProjectTabAvatar project={props.project} directory={props.directory} sessionId={props.sessionId} />
+        </span>
+        <span class="min-w-0 flex-1 truncate">{props.title}</span>
       </a>
 
-      <div class="absolute not-group-hover:not-group-data-[active=true]:left-52 group-hover:right-0 group-data-[active=true]:right-0 inset-y-0 flex flex-row items-center pr-1 py-1 w-8 pl-2">
+      <div class="absolute right-0 inset-y-0 flex flex-row items-center overflow-hidden rounded-r-[6px] pr-1 py-1 w-8 pl-2">
         <div
-          class="absolute inset-0 bg-(image:--inactive-bg) group-hover:bg-(image:--active-bg) group-data-[active=true]:bg-(image:--active-bg)"
+          class="absolute inset-0 rounded-r-[6px] bg-(image:--inactive-bg) group-hover:bg-(image:--active-bg) group-data-[active=true]:bg-(image:--active-bg)"
           style={{
             "--inactive-bg": "linear-gradient(to right, transparent 0%, var(--tab-bg) 80%)",
             "--active-bg": "linear-gradient(90deg, transparent 0%, var(--tab-bg) 25%)",
@@ -765,7 +786,7 @@ function TabNavItem(props: {
           size="small"
           variant="ghost-muted"
           class="opacity-0 group-hover:opacity-100 group-data-[active='true']:opacity-100 z-10"
-          onClick={props.onClose}
+          onClick={closeTab}
           icon={<IconV2 name="xmark-small" />}
         />
       </div>
@@ -773,22 +794,35 @@ function TabNavItem(props: {
   )
 }
 
-function ProjectTabAvatar(props: { project?: LocalProject; directory: string }) {
+function ProjectTabAvatar(props: { project?: LocalProject; directory: string; sessionId: string }) {
+  const directory = () => props.directory
+  const sessionId = () => props.sessionId
+  const state = useSessionTabAvatarState(directory, sessionId)
   return (
-    <AvatarV2
+    <ProjectAvatar
       fallback={displayName(props.project ?? { worktree: props.directory })}
       src={getProjectAvatarSource(props.project?.id, props.project?.icon)}
-      kind="org"
-      size="small"
-      {...getAvatarColors(props.project?.icon?.color)}
-      class="size-4 rounded"
+      variant={getProjectAvatarVariant(props.project?.icon?.color)}
+      unread={state.unread()}
+      loading={state.loading()}
     />
   )
 }
 
 function NewSessionTabItem(props: { href: string; title: string; onClose: () => void }) {
+  const closeTab = (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    props.onClose()
+  }
   return (
-    <div class="group relative flex h-7 max-w-60 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] bg-[var(--v2-overlay-simple-overlay-pressed)] pl-1.5 pr-8 whitespace-nowrap focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-[var(--v2-border-border-focus)]">
+    <div
+      class="group relative flex h-7 max-w-60 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] bg-[var(--v2-overlay-simple-overlay-pressed)] pl-1.5 pr-8 whitespace-nowrap focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-[var(--v2-border-border-focus)]"
+      onMouseDown={(event) => {
+        if (event.button !== 1) return
+        closeTab(event)
+      }}
+    >
       <a
         href={props.href}
         aria-current="page"
@@ -807,11 +841,7 @@ function NewSessionTabItem(props: { href: string; title: string; onClose: () =>
             event.preventDefault()
             event.stopPropagation()
           }}
-          onClick={(event) => {
-            event.preventDefault()
-            event.stopPropagation()
-            props.onClose()
-          }}
+          onClick={closeTab}
           icon={<IconV2 name="xmark-small" />}
           aria-label="Close tab"
         />

packages/app/src/components/windows-app-menu.tsx

@@ -2,8 +2,8 @@ import { Show, type JSX } from "solid-js"
 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/components/icon-button-v2.jsx"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/components/icon.jsx"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 
 import { useCommand } from "@/context/command"
 import { DESKTOP_MENU, desktopMenuVisible, type DesktopMenuAction, type DesktopMenuEntry } from "@/desktop-menu"

packages/app/src/context/file.tsx

@@ -1,7 +1,7 @@
 import { batch, createEffect, createMemo, onCleanup } from "solid-js"
 import { createStore, produce, reconcile } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import { useParams } from "@solidjs/router"
 import { getFilename } from "@opencode-ai/core/util/path"
 import { useSDK } from "./sdk"

packages/app/src/context/global-sync/bootstrap.ts

@@ -9,7 +9,7 @@ import type {
   Session,
   Todo,
 } from "@opencode-ai/sdk/v2/client"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import { getFilename } from "@opencode-ai/core/util/path"
 import { retry } from "@opencode-ai/core/util/retry"
 import { batch } from "solid-js"

packages/app/src/context/global-sync/child-store.test.ts

@@ -6,7 +6,7 @@ import type { State } from "./types"
 import type { QueryOptionsApi } from "../server-sync"
 
 let createChildStoreManager: typeof import("./child-store").createChildStoreManager
-const queryGroups: Array<() => { queries: Array<{ enabled?: boolean }> }> = []
+const querySingles: Array<() => { queryKey?: unknown[]; enabled?: boolean }> = []
 
 const child = () => createStore({} as State)
 const provider = { all: new Map(), connected: [], default: {} } satisfies NormalizedProviderListResponse
@@ -49,14 +49,20 @@ beforeAll(async () => {
     persisted: (_target: string, store: unknown[]) => [store[0], store[1], null, () => true],
   }))
   mock.module("@tanstack/solid-query", () => ({
-    useQueries: (options: () => { queries: Array<{ enabled?: boolean }> }) => {
-      queryGroups.push(options)
-      return [
-        { isLoading: true, data: undefined },
-        { isLoading: false, data: {} },
-        { isLoading: false, data: [] },
-        { isLoading: false, data: provider },
-      ]
+    useQuery: (options: () => { queryKey?: unknown[]; enabled?: boolean }) => {
+      querySingles.push(options)
+      return {
+        get isLoading() {
+          return options().queryKey?.[1] === "path"
+        },
+        get data() {
+          if (options().queryKey?.[1] === "path") throw new Error("pending path data read")
+          if (options().queryKey?.[1] === "mcp") return options().enabled ? { demo: { status: "disabled" } } : undefined
+          if (options().queryKey?.[1] === "lsp") return []
+          if (options().queryKey?.[1] === "providers") return provider
+          return undefined
+        },
+      }
     },
   }))
 
@@ -159,7 +165,7 @@ describe("createChildStoreManager", () => {
 
   test("enables MCP only when requested for the directory", () => {
     let manager: ReturnType<typeof createChildStoreManager> | undefined
-    const offset = queryGroups.length
+    const offset = querySingles.length
     const mcpLoads: string[] = []
 
     const dispose = createOwner((owner) => {
@@ -180,18 +186,20 @@ describe("createChildStoreManager", () => {
 
     try {
       if (!manager) throw new Error("manager required")
-      const [, setStore] = manager.child("/project", { bootstrap: false })
-      const queries = queryGroups[offset]
-      if (!queries) throw new Error("queries required")
-      expect(queries().queries[1]?.enabled).toBe(false)
+      const [store, setStore] = manager.child("/project", { bootstrap: false })
+      expect(querySingles.length - offset).toBe(4)
+      const query = querySingles[offset + 1]
+      if (!query) throw new Error("query required")
+      expect(query().enabled).toBe(false)
 
       setStore("status", "complete")
       manager.child("/project", { bootstrap: false, mcp: true })
-      expect(queries().queries[1]?.enabled).toBe(true)
+      expect(query().enabled).toBe(true)
+      expect(store.mcp).toEqual({ demo: { status: "disabled" } })
       expect(mcpLoads).toEqual(["/project"])
 
       manager.disableMcp("/project")
-      expect(queries().queries[1]?.enabled).toBe(false)
+      expect(query().enabled).toBe(false)
       expect(manager.mcp("/project")).toBe(false)
     } finally {
       dispose()

packages/app/src/context/global-sync/child-store.ts

@@ -14,7 +14,7 @@ import {
   type VcsCache,
 } from "./types"
 import { canDisposeDirectory, pickDirectoriesToEvict } from "./eviction"
-import { useQueries } from "@tanstack/solid-query"
+import { useQuery } from "@tanstack/solid-query"
 import { QueryOptionsApi } from "../server-sync"
 import { directoryKey, type DirectoryKey } from "./utils"
 import { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
@@ -95,6 +95,24 @@ export function createChildStoreManager(input: {
     })
   }
 
+  function disposeChild(key: DirectoryKey) {
+    const dispose = disposers.get(key)
+    if (!key || !children[key]) return false
+    vcsCache.delete(key)
+    metaCache.delete(key)
+    iconCache.delete(key)
+    lifecycle.delete(key)
+    mcpDirectories.delete(key)
+    mcpToggles.delete(key)
+    disposers.delete(key)
+    delete children[key]
+    input.onDispose(key)
+    if (dispose) {
+      dispose()
+    }
+    return true
+  }
+
   function disposeDirectory(directory: DirectoryKey) {
     const key = directory
     if (
@@ -109,20 +127,13 @@ export function createChildStoreManager(input: {
       return false
     }
 
-    vcsCache.delete(key)
-    metaCache.delete(key)
-    iconCache.delete(key)
-    lifecycle.delete(key)
-    mcpDirectories.delete(key)
-    mcpToggles.delete(key)
-    const dispose = disposers.get(key)
-    if (dispose) {
-      dispose()
-      disposers.delete(key)
+    return disposeChild(key)
+  }
+
+  function disposeAll() {
+    for (const directory of Object.keys(children)) {
+      disposeChild(directoryKey(directory))
     }
-    delete children[key]
-    input.onDispose(key)
-    return true
   }
 
   function runEviction(skip?: string) {
@@ -180,14 +191,10 @@ export function createChildStoreManager(input: {
           const initialIcon = icon[0].value
           const [mcpEnabled, setMcpEnabled] = createSignal(false)
 
-          const [pathQuery, mcpQuery, lspQuery, providerQuery] = useQueries(() => ({
-            queries: [
-              input.queryOptions.path(key),
-              { ...input.queryOptions.mcp(key), enabled: mcpEnabled() },
-              input.queryOptions.lsp(key),
-              input.queryOptions.providers(key),
-            ],
-          }))
+          const pathQuery = useQuery(() => input.queryOptions.path(key))
+          const mcpQuery = useQuery(() => ({ ...input.queryOptions.mcp(key), enabled: mcpEnabled() }))
+          const lspQuery = useQuery(() => input.queryOptions.lsp(key))
+          const providerQuery = useQuery(() => input.queryOptions.providers(key))
 
           const child = createStore<State>({
             project: "",
@@ -204,8 +211,9 @@ export function createChildStoreManager(input: {
             },
             config: {},
             get path() {
-              if (pathQuery.data) return pathQuery.data
-              return { state: "", config: "", worktree: "", directory, home: "" }
+              const EMPTY = { state: "", config: "", worktree: "", directory, home: "" }
+              if (pathQuery.isLoading) return EMPTY
+              return pathQuery.data ?? EMPTY
             },
             status: "loading" as const,
             agent: [],
@@ -354,6 +362,7 @@ export function createChildStoreManager(input: {
     mcp: (directory: string) => mcpDirectories.has(directoryKey(directory)),
     disableMcp,
     disposeDirectory,
+    disposeAll,
     runEviction,
     vcsCache,
     metaCache,

packages/app/src/context/layout.tsx

@@ -12,6 +12,9 @@ import { decode64 } from "@/utils/base64"
 import { same } from "@/utils/same"
 import { createScrollPersistence, type SessionScroll } from "./layout-scroll"
 import { createPathHelpers } from "./file/path"
+import type { ProjectAvatarVariant } from "@opencode-ai/ui/v2/project-avatar-v2"
+
+export type { ProjectAvatarVariant }
 
 const AVATAR_COLOR_KEYS = ["pink", "mint", "orange", "purple", "cyan", "lime"] as const
 const DEFAULT_SIDEBAR_WIDTH = 344
@@ -33,6 +36,16 @@ export function getAvatarColors(key?: string) {
   }
 }
 
+export function getProjectAvatarVariant(key?: string): ProjectAvatarVariant {
+  if (key === "orange") return "orange"
+  if (key === "pink") return "pink"
+  if (key === "cyan") return "cyan"
+  if (key === "purple") return "purple"
+  if (key === "mint") return "cyan"
+  if (key === "lime") return "green"
+  return "gray"
+}
+
 type SessionTabs = {
   active?: string
   all: string[]

packages/app/src/context/platform.tsx

@@ -20,6 +20,88 @@ export type FatalRendererErrorLog = {
   os?: DesktopOS
 }
 
+export type WslRuntimeCheck = {
+  available: boolean
+  version: string | null
+  error: string | null
+}
+export type WslInstalledDistro = {
+  name: string
+  version: number | null
+  isDefault: boolean
+}
+export type WslOnlineDistro = {
+  name: string
+  label: string
+}
+export type WslDistroProbe = {
+  name: string
+  canExecute: boolean
+  hasBash: boolean
+  hasCurl: boolean
+  error: string | null
+}
+export type WslOpencodeCheck = {
+  distro: string
+  resolvedPath: string | null
+  version: string | null
+  expectedVersion: string | null
+  matchesDesktop: boolean | null
+  error: string | null
+}
+export type WslServerConfig = {
+  id: string
+  distro: string
+}
+
+export type WslServerRuntime =
+  | { kind: "starting" }
+  | { kind: "ready"; url: string; username: string | null; password: string | null }
+  | { kind: "failed"; message: string }
+  | { kind: "stopped" }
+
+export type WslServerItem = {
+  config: WslServerConfig
+  runtime: WslServerRuntime
+}
+
+export type WslJob =
+  | { kind: "runtime"; startedAt: number }
+  | { kind: "distros"; startedAt: number }
+  | { kind: "install-wsl"; startedAt: number }
+  | { kind: "install-distro"; distro: string; startedAt: number }
+  | { kind: "probe-distro"; distro: string; startedAt: number }
+  | { kind: "probe-opencode"; distro: string; startedAt: number }
+  | { kind: "install-opencode"; distro: string; startedAt: number }
+
+export type WslServersState = {
+  runtime: WslRuntimeCheck | null
+  installed: WslInstalledDistro[]
+  online: WslOnlineDistro[]
+  distroProbes: Record<string, WslDistroProbe>
+  opencodeChecks: Record<string, WslOpencodeCheck>
+  pendingRestart: boolean
+  servers: WslServerItem[]
+  job: WslJob | null
+}
+export type WslServersEvent = { type: "state"; state: WslServersState }
+
+export type WslServersPlatform = {
+  getState(): Promise<WslServersState>
+  subscribe(cb: (event: WslServersEvent) => void): () => void
+  probeRuntime(): Promise<void>
+  refreshDistros(): Promise<void>
+  installWsl(): Promise<void>
+  installDistro(name: string): Promise<void>
+  probeDistro(name: string): Promise<void>
+  probeOpencode(name: string): Promise<void>
+  installOpencode(name: string): Promise<void>
+  openTerminal(name: string): Promise<void>
+  addServer(distro: string): Promise<WslServerConfig>
+  removeServer(id: string): Promise<void>
+  startServer(id: string): Promise<void>
+}
+
 export type Platform = {
   /** Platform discriminator */
   platform: PlatformName
@@ -75,11 +157,8 @@ export type Platform = {
   /** Set the default server URL to use on app startup (platform-specific) */
   setDefaultServer?(url: ServerConnection.Key | null): Promise<void> | void
 
-  /** Get the configured WSL integration (desktop only) */
-  getWslEnabled?(): Promise<boolean>
-
-  /** Set the configured WSL integration (desktop only) */
-  setWslEnabled?(config: boolean): Promise<void> | void
+  /** Manage WSL sidecar servers (Electron on Windows only) */
+  wslServers?: WslServersPlatform
 
   /** Get the preferred display backend (desktop only) */
   getDisplayBackend?(): Promise<DisplayBackend | null> | DisplayBackend | null

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

@@ -1,5 +1,5 @@
 import type { Config, OpencodeClient, Path, Project, ProviderAuthResponse, Todo } from "@opencode-ai/sdk/v2/client"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import { getFilename } from "@opencode-ai/core/util/path"
 import { batch, createContext, getOwner, onCleanup, onMount, type ParentProps, untrack, useContext } from "solid-js"
 import { createStore, produce, reconcile } from "solid-js/store"
@@ -397,11 +397,7 @@ export function createServerSyncContext() {
   onCleanup(() => {
     queue.dispose()
   })
-  onCleanup(() => {
-    for (const directory of Object.keys(children.children)) {
-      children.disposeDirectory(directoryKey(directory))
-    }
-  })
+  onCleanup(children.disposeAll)
 
   onMount(() => {
     if (typeof requestAnimationFrame === "function") {

packages/app/src/context/server.tsx

@@ -1,5 +1,5 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { type Accessor, batch, createMemo } from "solid-js"
+import { type Accessor, batch, createEffect, createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Persist, persisted } from "@/utils/persist"
 
@@ -151,6 +151,12 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
       if (state.active !== input) setState("active", input)
     }
 
+    createEffect(() => {
+      if (typeof window === "undefined") return
+      window.__OPENCODE__ ??= {}
+      window.__OPENCODE__.activeServer = state.active
+    })
+
     function add(input: ServerConnection.Http) {
       const url_ = normalizeServerUrl(input.http.url)
       if (!url_) return
@@ -187,7 +193,7 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
     )
     const isLocal = createMemo(() => {
       const c = current()
-      return (c?.type === "sidecar" && c.variant === "base") || (c?.type === "http" && isLocalHost(c.http.url))
+      return c?.type === "sidecar" || (c?.type === "http" && isLocalHost(c.http.url))
     })
 
     return {

packages/app/src/context/wsl-servers.tsx

@@ -0,0 +1,35 @@
+import { createSimpleContext } from "@opencode-ai/ui/context"
+import { queryOptions, skipToken, useQuery, useQueryClient } from "@tanstack/solid-query"
+import { createEffect, onCleanup } from "solid-js"
+import type { WslServersPlatform, WslServersState } from "./platform"
+import { usePlatform } from "./platform"
+
+const wslServersQueryKey = ["platform", "wslServers"] as const
+
+export const { use: useWslServers, provider: WslServersProvider } = createSimpleContext({
+  name: "WslServers",
+  init: () => {
+    const platform = usePlatform()
+    const queryClient = useQueryClient()
+    const query = useQuery(() => {
+      const api = platform.wslServers
+      return queryOptions<WslServersState>({
+        queryKey: wslServersQueryKey,
+        queryFn: api ? () => api.getState() : skipToken,
+        staleTime: Number.POSITIVE_INFINITY,
+        gcTime: Number.POSITIVE_INFINITY,
+      })
+    })
+
+    createEffect(() => {
+      const api = platform.wslServers
+      if (!api) return
+      const off = api.subscribe((event) => {
+        queryClient.setQueryData(wslServersQueryKey, event.state)
+      })
+      onCleanup(off)
+    })
+
+    return query
+  },
+})

packages/app/src/i18n/en.ts

@@ -531,6 +531,8 @@ export const dict = {
   "home.projects": "Projects",
   "home.project.add": "Add project",
   "home.sessions.search.placeholder": "Search sessions",
+  "home.sessions.search.sessions": "Sessions",
+  "home.sessions.search.noResults": "No sessions found for {{query}}",
   "home.sessions.empty": "No sessions found",
   "home.sessions.empty.description": "Start a new session for this project",
   "home.sessions.group.today": "Today",

packages/app/src/i18n/zh.ts

@@ -502,6 +502,8 @@ export const dict = {
   "home.projects": "项目",
   "home.project.add": "添加项目",
   "home.sessions.search.placeholder": "搜索会话",
+  "home.sessions.search.sessions": "会话",
+  "home.sessions.search.noResults": "未找到与 {{query}} 相关的会话",
   "home.sessions.empty": "未找到会话",
   "home.sessions.group.today": "今天",
   "home.sessions.group.yesterday": "昨天",

packages/app/src/index.ts

@@ -2,6 +2,24 @@ export { AppBaseProviders, AppInterface } from "./app"
 export { ACCEPTED_FILE_EXTENSIONS, ACCEPTED_FILE_TYPES, filePickerFilters } from "./constants/file-picker"
 export { useCommand } from "./context/command"
 export { loadLocaleDict, normalizeLocale, type Locale } from "./context/language"
-export { type DisplayBackend, type FatalRendererErrorLog, type Platform, PlatformProvider } from "./context/platform"
+export { useWslServers } from "./context/wsl-servers"
+export {
+  type DisplayBackend,
+  type FatalRendererErrorLog,
+  type Platform,
+  PlatformProvider,
+  type WslDistroProbe,
+  type WslInstalledDistro,
+  type WslJob,
+  type WslOnlineDistro,
+  type WslOpencodeCheck,
+  type WslRuntimeCheck,
+  type WslServerConfig,
+  type WslServerItem,
+  type WslServerRuntime,
+  type WslServersEvent,
+  type WslServersPlatform,
+  type WslServersState,
+} from "./context/platform"
 export { ServerConnection } from "./context/server"
 export { handleNotificationClick } from "./utils/notification-click"

packages/app/src/pages/directory-layout.tsx

@@ -1,5 +1,5 @@
 import { DataProvider } from "@opencode-ai/ui/context"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 import { useLocation, useNavigate, useParams } from "@solidjs/router"
 import { createEffect, createMemo, createResource, type ParentProps, Show } from "solid-js"

packages/app/src/pages/layout.tsx

@@ -34,7 +34,8 @@ import { createStore, produce, reconcile } from "solid-js/store"
 import { DragDropProvider, DragDropSensors, DragOverlay, SortableProvider, closestCenter } from "@thisbeyond/solid-dnd"
 import type { DragEvent } from "@thisbeyond/solid-dnd"
 import { useProviders } from "@/hooks/use-providers"
-import { showToast, Toast, toaster } from "@opencode-ai/ui/toast"
+import { toaster } from "@opencode-ai/ui/toast"
+import { setV2Toast, showToast, ToastRegion } from "@/utils/toast"
 import { useServerSDK } from "@/context/server-sdk"
 import { clearWorkspaceTerminals, getTerminalServerScope } from "@/context/terminal"
 import { dropSessionCaches, pickSessionCacheEvictions } from "@/context/global-sync/session-cache"
@@ -128,6 +129,7 @@ export default function Layout(props: ParentProps) {
   const theme = useTheme()
   const language = useLanguage()
   const newDesign = createMemo(() => settings.general.newLayoutDesigns())
+  createEffect(() => setV2Toast(newDesign()))
   const initialDirectory = decode64(params.dir)
   const location = useLocation()
   const route = createMemo(() => {
@@ -151,6 +153,7 @@ export default function Layout(props: ParentProps) {
   }
   const colorSchemeLabel = (scheme: ColorScheme) => language.t(colorSchemeKey[scheme])
   const currentDir = createMemo(() => route().dir)
+  const useWebDirectoryPicker = createMemo(() => server.current?.type === "sidecar" && server.current.variant === "wsl")
 
   const [state, setState] = createStore({
     autoselect: !initialDirectory && !newDesign(),
@@ -1221,13 +1224,16 @@ export default function Layout(props: ParentProps) {
     const run = ++dialogRun
     void import("@/components/dialog-select-server").then((x) => {
       if (dialogDead || dialogRun !== run) return
-      dialog.show(() => <x.DialogSelectServer />)
+      dialog.show(() => <x.DialogSelectServer onNavigateHome={() => navigate("/")} />)
     })
   }
 
   function openSettings() {
     const run = ++dialogRun
-    void import("@/components/dialog-settings").then((x) => {
+    const module = settings.general.newLayoutDesigns()
+      ? import("@/components/settings-v2")
+      : import("@/components/dialog-settings")
+    void module.then((x) => {
       if (dialogDead || dialogRun !== run) return
       dialog.show(() => <x.DialogSettings />)
     })
@@ -1474,7 +1480,7 @@ export default function Layout(props: ParentProps) {
       }
     }
 
-    if (platform.openDirectoryPickerDialog && server.isLocal()) {
+    if (platform.openDirectoryPickerDialog && server.isLocal() && !useWebDirectoryPicker()) {
       const result = await platform.openDirectoryPickerDialog?.({
         title: language.t("command.project.open"),
         multiple: true,
@@ -2380,7 +2386,7 @@ export default function Layout(props: ParentProps) {
             </Show>
           </main>
           {import.meta.env.DEV && <DebugBar />}
-          <Toast.Region />
+          <ToastRegion v2={newDesign()} />
         </div>
       }
     >
@@ -2533,7 +2539,7 @@ export default function Layout(props: ParentProps) {
           </div>
           {import.meta.env.DEV && <DebugBar />}
         </div>
-        <Toast.Region />
+        <ToastRegion v2={newDesign()} />
       </div>
     </Show>
   )

packages/app/src/pages/layout/project-avatar-state.ts

@@ -0,0 +1,24 @@
+import { createMemo, type Accessor } from "solid-js"
+import { useServerSync } from "@/context/server-sync"
+import { useNotification } from "@/context/notification"
+import { usePermission } from "@/context/permission"
+import { sessionPermissionRequest } from "@/pages/session/composer/session-request-tree"
+
+export function useSessionTabAvatarState(directory: Accessor<string>, sessionId: Accessor<string>) {
+  const globalSync = useServerSync()
+  const notification = useNotification()
+  const permission = usePermission()
+  const hasPermissions = createMemo(() => {
+    const [store] = globalSync.child(directory(), { bootstrap: false })
+    return !!sessionPermissionRequest(store.session, store.permission, sessionId(), (item) => {
+      return !permission.autoResponds(item, directory())
+    })
+  })
+  const unread = createMemo(() => hasPermissions() || notification.session.unseenCount(sessionId()) > 0)
+  const loading = createMemo(() => {
+    if (hasPermissions()) return false
+    const [store] = globalSync.child(directory(), { bootstrap: false })
+    return store.session_working(sessionId())
+  })
+  return { unread, loading }
+}

packages/app/src/pages/session.tsx

@@ -28,7 +28,7 @@ import { Tabs } from "@opencode-ai/ui/tabs"
 import { createAutoScroll } from "@opencode-ai/ui/hooks"
 import { previewSelectedLines } from "@opencode-ai/ui/pierre/selection-bridge"
 import { Button } from "@opencode-ai/ui/button"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import { checksum } from "@opencode-ai/core/util/encode"
 import { useLocation, useSearchParams } from "@solidjs/router"
 import { NewSessionDesignView, NewSessionView, SessionHeader } from "@/components/session"

packages/app/src/pages/session/composer/session-composer-region.tsx

@@ -17,6 +17,7 @@ import type { SessionComposerState } from "@/pages/session/composer/session-comp
 import { SessionTodoDock } from "@/pages/session/composer/session-todo-dock"
 import type { FollowupDraft } from "@/components/prompt-input/submit"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
+import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
 
 export function SessionComposerRegion(props: {
   state: SessionComposerState
@@ -150,8 +151,9 @@ export function SessionComposerRegion(props: {
     >
       <div
         classList={{
-          "w-full px-3 pointer-events-auto": true,
-          "max-w-[720px] px-0": props.placement === "inline",
+          "w-full pointer-events-auto": true,
+          "px-3": props.placement !== "inline",
+          [NEW_SESSION_CONTENT_WIDTH]: props.placement === "inline",
           "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
         }}
       >

packages/app/src/pages/session/composer/session-composer-state.ts

@@ -2,7 +2,7 @@ import { createEffect, createMemo, on, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import type { PermissionRequest, QuestionRequest, Todo } from "@opencode-ai/sdk/v2"
 import { useParams } from "@solidjs/router"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import { useServerSync } from "@/context/server-sync"
 import { useLanguage } from "@/context/language"
 import { usePermission } from "@/context/permission"

packages/app/src/pages/session/composer/session-question-dock.tsx

@@ -4,7 +4,7 @@ import { useMutation } from "@tanstack/solid-query"
 import { Button } from "@opencode-ai/ui/button"
 import { DockPrompt } from "@opencode-ai/ui/dock-prompt"
 import { Icon } from "@opencode-ai/ui/icon"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import type { QuestionAnswer, QuestionRequest } from "@opencode-ai/sdk/v2"
 import { useLanguage } from "@/context/language"
 import { useSDK } from "@/context/sdk"

packages/app/src/pages/session/file-tabs.tsx

@@ -11,7 +11,7 @@ import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import { selectionFromLines, useFile, type FileSelection, type SelectedLineRange } from "@/context/file"
 import { useComments } from "@/context/comments"
 import { useLanguage } from "@/context/language"

packages/app/src/pages/session/message-timeline.tsx

@@ -48,7 +48,7 @@ import type {
   ToolPart,
   UserMessage,
 } from "@opencode-ai/sdk/v2"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import { Binary } from "@opencode-ai/core/util/binary"
 import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
 import { Popover as KobaltePopover } from "@kobalte/core/popover"

packages/app/src/pages/session/new-session-layout.ts

@@ -1,3 +1,6 @@
+/** Inline new-session content width — keep in sync with session composer `placement === "inline"`. */
+export const NEW_SESSION_CONTENT_WIDTH = "w-full max-w-[720px] px-0"
+
 export function shouldUseV2NewSessionPage(input: { newLayoutDesigns: boolean; sessionID?: string }) {
   return input.newLayoutDesigns && !input.sessionID
 }

packages/app/src/pages/session/use-session-commands.tsx

@@ -13,7 +13,7 @@ import { useSDK } from "@/context/sdk"
 import { useSettings } from "@/context/settings"
 import { useSync } from "@/context/sync"
 import { useTerminal } from "@/context/terminal"
-import { showToast } from "@opencode-ai/ui/toast"
+import { showToast } from "@/utils/toast"
 import { findLast } from "@opencode-ai/core/util/array"
 import { createSessionTabs } from "@/pages/session/helpers"
 import { extractPromptFromParts } from "@/utils/prompt"

packages/app/src/utils/solid-dnd.tsx

@@ -1,6 +1,6 @@
 import { useDragDropContext } from "@thisbeyond/solid-dnd"
 import type { Transformer } from "@thisbeyond/solid-dnd"
-import { createRoot, onCleanup, type JSXElement } from "solid-js"
+import type { JSXElement } from "solid-js"
 
 type DragEvent = { draggable?: { id?: unknown } }
 
@@ -27,20 +27,16 @@ const createAxisConstraint = (axis: "x" | "y", transformerId: string) => (): JSX
   if (!context) return null
   const [, { onDragStart, onDragEnd, addTransformer, removeTransformer }] = context
   const transformer = createTransformer(transformerId, axis)
-  const dispose = createRoot((dispose) => {
-    onDragStart((event) => {
-      const id = getDraggableId(event)
-      if (!id) return
-      addTransformer("draggables", id, transformer)
-    })
-    onDragEnd((event) => {
-      const id = getDraggableId(event)
-      if (!id) return
-      removeTransformer("draggables", id, transformer.id)
-    })
-    return dispose
+  onDragStart((event) => {
+    const id = getDraggableId(event)
+    if (!id) return
+    addTransformer("draggables", id, transformer)
+  })
+  onDragEnd((event) => {
+    const id = getDraggableId(event)
+    if (!id) return
+    removeTransformer("draggables", id, transformer.id)
   })
-  onCleanup(dispose)
   return null
 }
 

packages/app/src/utils/toast.tsx

@@ -0,0 +1,34 @@
+import { Icon, type IconProps } from "@opencode-ai/ui/icon"
+import { Toast, showToast as showLegacyToast, type ToastOptions, type ToastVariant } from "@opencode-ai/ui/toast"
+import { ToastV2, showToastV2 } from "@opencode-ai/ui/v2/toast-v2"
+
+let v2 = false
+
+export function setV2Toast(value: boolean) {
+  v2 = value
+}
+
+export function ToastRegion(props: { v2: boolean }) {
+  if (props.v2) return <ToastV2.Region />
+  return <Toast.Region />
+}
+
+export function showToast(options: ToastOptions | string) {
+  if (!v2) return showLegacyToast(options)
+  if (typeof options === "string") return showToastV2(options)
+
+  return showToastV2({
+    ...options,
+    icon: resolveIcon(options.icon, options.variant),
+    actions: options.actions?.map((action) => ({
+      ...action,
+      variant: action.onClick === "dismiss" ? "secondary" : "primary",
+    })),
+  })
+}
+
+function resolveIcon(icon: IconProps["name"] | undefined, variant: ToastVariant | undefined) {
+  const name = icon ?? (variant === "success" ? "check" : undefined)
+  if (!name) return
+  return <Icon name={name} />
+}

packages/core/migration/20260601010001_normalize_storage_paths/migration.sql

@@ -0,0 +1,7 @@
+UPDATE project SET worktree = REPLACE(worktree, char(92), '/') WHERE worktree GLOB '[A-Za-z]:' || char(92) || '*' OR worktree LIKE char(92) || char(92) || '%';
+--> statement-breakpoint
+UPDATE project SET sandboxes = REPLACE(sandboxes, char(92) || char(92), '/') WHERE instr(sandboxes, char(92)) > 0 AND (worktree GLOB '[A-Za-z]:*' OR worktree LIKE '//%');
+--> statement-breakpoint
+UPDATE session SET directory = REPLACE(directory, char(92), '/') WHERE directory GLOB '[A-Za-z]:' || char(92) || '*' OR directory LIKE char(92) || char(92) || '%';
+--> statement-breakpoint
+UPDATE session SET path = REPLACE(path, char(92), '/') WHERE path IS NOT NULL AND instr(path, char(92)) > 0 AND (directory GLOB '[A-Za-z]:*' OR directory LIKE '//%');

packages/core/migration/20260601202201_amazing_prowler/migration.sql

@@ -0,0 +1 @@
+DROP TABLE `permission`;

packages/core/migration/20260602002951_lowly_union_jack/migration.sql

@@ -0,0 +1,11 @@
+CREATE TABLE `permission` (
+	`id` text PRIMARY KEY,
+	`project_id` text NOT NULL,
+	`action` text NOT NULL,
+	`resource` text NOT NULL,
+	`time_created` integer NOT NULL,
+	`time_updated` integer NOT NULL,
+	CONSTRAINT `fk_permission_project_id_project_id_fk` FOREIGN KEY (`project_id`) REFERENCES `project`(`id`) ON DELETE CASCADE
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `permission_project_action_resource_idx` ON `permission` (`project_id`,`action`,`resource`);

packages/core/package.json

@@ -29,6 +29,7 @@
     "@tsconfig/bun": "catalog:",
     "@types/bun": "catalog:",
     "@types/cross-spawn": "catalog:",
+    "@types/node": "catalog:",
     "@types/npm-package-arg": "6.1.4",
     "@types/npmcli__arborist": "6.3.3",
     "@types/semver": "catalog:",

packages/core/src/agent.ts

@@ -3,7 +3,7 @@ export * as AgentV2 from "./agent"
 import { Array, Context, Effect, Layer, Schema, Scope } from "effect"
 import { castDraft, enableMapSet, type Draft } from "immer"
 import { ModelV2 } from "./model"
-import { PermissionV2 } from "./permission"
+import { PermissionSchema } from "./permission/schema"
 import { ProviderV2 } from "./provider"
 import { PositiveInt } from "./schema"
 import { State } from "./state"
@@ -26,7 +26,7 @@ export class Info extends Schema.Class<Info>("AgentV2.Info")({
   hidden: Schema.Boolean,
   color: Color.pipe(Schema.optional),
   steps: PositiveInt.pipe(Schema.optional),
-  permissions: PermissionV2.Ruleset,
+  permissions: PermissionSchema.Ruleset,
 }) {
   static empty(id: ID) {
     return new Info({

packages/core/src/auth-well-known.ts

@@ -0,0 +1,242 @@
+export * as AuthWellKnown from "./auth-well-known"
+
+import path from "path"
+import { Context, Effect, Layer, Option, Schema, SynchronizedRef } from "effect"
+import { FetchHttpClient, HttpClient, HttpClientRequest } from "effect/unstable/http"
+import { AppFileSystem } from "./filesystem"
+import { Global } from "./global"
+import { Substitution } from "./substitution"
+
+export class Entry extends Schema.Class<Entry>("AuthWellKnown.Entry")({
+  key: Schema.String,
+  token: Schema.String,
+}) {}
+
+export class FileWriteError extends Schema.TaggedErrorClass<FileWriteError>()("AuthWellKnown.FileWriteError", {
+  operation: Schema.Union([Schema.Literal("migrate"), Schema.Literal("write")]),
+  cause: Schema.Defect,
+}) {}
+
+export class RemoteConfigError extends Schema.TaggedErrorClass<RemoteConfigError>()("AuthWellKnown.RemoteConfigError", {
+  url: Schema.String,
+  status: Schema.Number.pipe(Schema.optional),
+  cause: Schema.Defect.pipe(Schema.optional),
+}) {}
+
+export type Error = FileWriteError | RemoteConfigError
+
+const RemoteConfig = Schema.Struct({
+  url: Schema.String,
+  headers: Schema.Record(Schema.String, Schema.String).pipe(Schema.optional),
+})
+
+export class Metadata extends Schema.Class<Metadata>("AuthWellKnown.Metadata")({
+  auth: Schema.Struct({
+    command: Schema.Array(Schema.String),
+    env: Schema.String,
+  }).pipe(Schema.optional),
+  config: Schema.Record(Schema.String, Schema.Unknown).pipe(Schema.optional),
+  remote_config: RemoteConfig.pipe(Schema.optional),
+}) {}
+
+export type ConfigDocument = {
+  url: string
+  source: string
+  dir: string
+  content: unknown
+}
+
+export interface Interface {
+  readonly all: () => Effect.Effect<Record<string, Entry>, Error>
+  readonly get: (url: string) => Effect.Effect<Entry | undefined, Error>
+  readonly set: (url: string, entry: Entry) => Effect.Effect<void, Error>
+  readonly remove: (url: string) => Effect.Effect<void, Error>
+  readonly metadata: (url: string) => Effect.Effect<Metadata, Error>
+  readonly configs: () => Effect.Effect<ConfigDocument[], Error>
+}
+
+export class Service extends Context.Service<Service, Interface>()("@opencode/v2/AuthWellKnown") {}
+const decodeMetadata = Schema.decodeUnknownEffect(Metadata)
+const decodeRemoteConfig = Schema.decodeUnknownEffect(RemoteConfig)
+
+function loadLegacyAuth(input: {
+  fsys: AppFileSystem.Interface
+  dataDir: string
+  write: (data: Record<string, Entry>) => Effect.Effect<void, Error>
+}) {
+  return Effect.gen(function* () {
+    const decodeLegacy = Schema.decodeUnknownOption(Schema.Record(Schema.String, Schema.Unknown))
+    const decodeLegacyCredential = Schema.decodeUnknownOption(
+      Schema.Struct({
+        type: Schema.Literal("wellknown"),
+        key: Schema.String,
+        token: Schema.String,
+      }),
+    )
+    const legacy = Object.fromEntries(
+      Object.entries(
+        Option.getOrElse(
+          decodeLegacy(
+            yield* input.fsys.readJson(path.join(input.dataDir, "auth.json")).pipe(Effect.orElseSucceed(() => null)),
+          ),
+          () => ({}),
+        ),
+      ).flatMap(([url, value]) => {
+        const decoded = Option.getOrUndefined(decodeLegacyCredential(value))
+        return decoded ? [[url.replace(/\/+$/, ""), new Entry({ key: decoded.key, token: decoded.token })]] : []
+      }),
+    )
+    if (Object.keys(legacy).length > 0) yield* input.write(legacy).pipe(Effect.ignore)
+    return legacy
+  })
+}
+
+export const layer = Layer.effect(
+  Service,
+  Effect.gen(function* () {
+    const fsys = yield* AppFileSystem.Service
+    const global = yield* Global.Service
+    const http = yield* HttpClient.HttpClient
+    const substitution = yield* Substitution.Service
+    const file = path.join(global.data, "well-known.json")
+    const decodeEntries = Schema.decodeUnknownOption(Schema.Record(Schema.String, Entry))
+    const normalizeUrl = (url: string) => url.replace(/\/+$/, "")
+
+    const write = (operation: "migrate" | "write", data: Record<string, Entry>) =>
+      fsys.writeJson(file, data, 0o600).pipe(Effect.mapError((cause) => new FileWriteError({ operation, cause })))
+
+    const load: () => Effect.Effect<Record<string, Entry>> = Effect.fnUntraced(function* () {
+      const current = yield* fsys.readJson(file).pipe(Effect.orElseSucceed(() => null))
+      if (current && typeof current === "object")
+        return Option.getOrElse(decodeEntries(current), () => ({}) as Record<string, Entry>)
+      return yield* loadLegacyAuth({ fsys, dataDir: global.data, write: (data) => write("migrate", data) })
+    })
+
+    const state = SynchronizedRef.makeUnsafe<Record<string, Entry>>(yield* load())
+
+    const metadata = Effect.fn("AuthWellKnown.metadata")(function* (url: string) {
+      const normalized = normalizeUrl(url)
+      const source = `${normalized}/.well-known/opencode`
+      const response = yield* HttpClientRequest.get(source).pipe(
+        HttpClientRequest.acceptJson,
+        http.execute,
+        Effect.mapError((cause) => new RemoteConfigError({ url: source, cause })),
+      )
+      if (response.status < 200 || response.status >= 300) {
+        return yield* new RemoteConfigError({ url: source, status: response.status })
+      }
+      const metadata = yield* response.json.pipe(
+        Effect.flatMap(decodeMetadata),
+        Effect.mapError((cause) => new RemoteConfigError({ url: source, cause })),
+      )
+      return { url: normalized, source, dir: path.dirname(source), metadata }
+    })
+
+    const remote = Effect.fn("AuthWellKnown.remote")(function* (input: { url: string; headers?: Record<string, string> }) {
+      const response = yield* HttpClientRequest.get(input.url).pipe(
+        HttpClientRequest.acceptJson,
+        input.headers ? HttpClientRequest.setHeaders(input.headers) : (request) => request,
+        http.execute,
+        Effect.mapError((cause) => new RemoteConfigError({ url: input.url, cause })),
+      )
+      if (response.status < 200 || response.status >= 300) {
+        return yield* new RemoteConfigError({ url: input.url, status: response.status })
+      }
+      return yield* response.json.pipe(Effect.mapError((cause) => new RemoteConfigError({ url: input.url, cause })))
+    })
+
+    return Service.of({
+      all: Effect.fn("AuthWellKnown.all")(function* () {
+        return yield* SynchronizedRef.get(state)
+      }),
+
+      get: Effect.fn("AuthWellKnown.get")(function* (url) {
+        return (yield* SynchronizedRef.get(state))[normalizeUrl(url)]
+      }),
+
+      set: Effect.fn("AuthWellKnown.set")(function* (url, entry) {
+        yield* SynchronizedRef.updateEffect(
+          state,
+          Effect.fnUntraced(function* (data) {
+            const next = { ...data, [normalizeUrl(url)]: entry }
+            yield* write("write", next)
+            return next
+          }),
+        )
+      }),
+
+      remove: Effect.fn("AuthWellKnown.remove")(function* (url) {
+        yield* SynchronizedRef.updateEffect(
+          state,
+          Effect.fnUntraced(function* (data) {
+            const next = { ...data }
+            delete next[url]
+            delete next[normalizeUrl(url)]
+            yield* write("write", next)
+            return next
+          }),
+        )
+      }),
+
+      metadata: Effect.fn("AuthWellKnown.metadata.public")(function* (url) {
+        return (yield* metadata(url)).metadata
+      }),
+
+      configs: Effect.fn("AuthWellKnown.configs")(function* () {
+        const documents = yield* Effect.all(
+          Object.entries(yield* SynchronizedRef.get(state)).map(([url, entry]) =>
+            Effect.gen(function* () {
+              const configs: ConfigDocument[] = []
+              const response = yield* metadata(url)
+              const env = { [entry.key]: entry.token }
+              if (response.metadata.config) {
+                configs.push({
+                  url: response.url,
+                  source: response.source,
+                  dir: response.dir,
+                  content: response.metadata.config,
+                })
+              }
+              if (response.metadata.remote_config) {
+                const remoteConfig = yield* substitution
+                  .substitute({
+                    text: JSON.stringify(response.metadata.remote_config),
+                    type: "virtual",
+                    dir: response.url,
+                    source: response.source,
+                    env,
+                  })
+                  .pipe(
+                    Effect.flatMap((text) =>
+                      Effect.try({
+                        try: () => JSON.parse(text) as unknown,
+                        catch: (cause) => new RemoteConfigError({ url: response.source, cause }),
+                      }),
+                    ),
+                    Effect.flatMap(decodeRemoteConfig),
+                    Effect.mapError((cause) => new RemoteConfigError({ url: response.source, cause })),
+                  )
+                configs.push({
+                  url: remoteConfig.url,
+                  source: remoteConfig.url,
+                  dir: path.dirname(remoteConfig.url),
+                  content: yield* remote({ url: remoteConfig.url, headers: remoteConfig.headers }),
+                })
+              }
+              return configs
+            }),
+          ),
+          { concurrency: "unbounded" },
+        )
+        return documents.flat()
+      }),
+    })
+  }),
+)
+
+export const defaultLayer = layer.pipe(
+  Layer.provide(AppFileSystem.defaultLayer),
+  Layer.provide(Global.defaultLayer),
+  Layer.provide(FetchHttpClient.layer),
+  Layer.provide(Substitution.defaultLayer),
+)

packages/core/src/database/migration.gen.ts

@@ -23,5 +23,8 @@ export const migrations = (
     import("./migration/20260510033149_session_usage"),
     import("./migration/20260511000411_data_migration_state"),
     import("./migration/20260511173437_session-metadata"),
+    import("./migration/20260601010001_normalize_storage_paths"),
+    import("./migration/20260601202201_amazing_prowler"),
+    import("./migration/20260602002951_lowly_union_jack"),
   ])
 ).map((module) => module.default) satisfies DatabaseMigration.Migration[]

packages/core/src/database/migration/20260601010001_normalize_storage_paths.ts

@@ -0,0 +1,22 @@
+import { Effect } from "effect"
+import type { DatabaseMigration } from "../migration"
+
+export default {
+  id: "20260601010001_normalize_storage_paths",
+  up(tx) {
+    return Effect.gen(function* () {
+      yield* tx.run(
+        `UPDATE project SET worktree = REPLACE(worktree, char(92), '/') WHERE worktree GLOB '[A-Za-z]:' || char(92) || '*' OR worktree LIKE char(92) || char(92) || '%';`,
+      )
+      yield* tx.run(
+        `UPDATE project SET sandboxes = REPLACE(sandboxes, char(92) || char(92), '/') WHERE instr(sandboxes, char(92)) > 0 AND (worktree GLOB '[A-Za-z]:*' OR worktree LIKE '//%');`,
+      )
+      yield* tx.run(
+        `UPDATE session SET directory = REPLACE(directory, char(92), '/') WHERE directory GLOB '[A-Za-z]:' || char(92) || '*' OR directory LIKE char(92) || char(92) || '%';`,
+      )
+      yield* tx.run(
+        `UPDATE session SET path = REPLACE(path, char(92), '/') WHERE path IS NOT NULL AND instr(path, char(92)) > 0 AND (directory GLOB '[A-Za-z]:*' OR directory LIKE '//%');`,
+      )
+    })
+  },
+} satisfies DatabaseMigration.Migration

packages/core/src/database/migration/20260601202201_amazing_prowler.ts

@@ -0,0 +1,11 @@
+import { Effect } from "effect"
+import type { DatabaseMigration } from "../migration"
+
+export default {
+  id: "20260601202201_amazing_prowler",
+  up(tx) {
+    return Effect.gen(function* () {
+      yield* tx.run(`DROP TABLE \`permission\`;`)
+    })
+  },
+} satisfies DatabaseMigration.Migration

packages/core/src/database/migration/20260602002951_lowly_union_jack.ts

@@ -0,0 +1,24 @@
+import { Effect } from "effect"
+import type { DatabaseMigration } from "../migration"
+
+export default {
+  id: "20260602002951_lowly_union_jack",
+  up(tx) {
+    return Effect.gen(function* () {
+      yield* tx.run(`
+        CREATE TABLE \`permission\` (
+          \`id\` text PRIMARY KEY,
+          \`project_id\` text NOT NULL,
+          \`action\` text NOT NULL,
+          \`resource\` text NOT NULL,
+          \`time_created\` integer NOT NULL,
+          \`time_updated\` integer NOT NULL,
+          CONSTRAINT \`fk_permission_project_id_project_id_fk\` FOREIGN KEY (\`project_id\`) REFERENCES \`project\`(\`id\`) ON DELETE CASCADE
+        );
+      `)
+      yield* tx.run(
+        `CREATE UNIQUE INDEX \`permission_project_action_resource_idx\` ON \`permission\` (\`project_id\`,\`action\`,\`resource\`);`,
+      )
+    })
+  },
+} satisfies DatabaseMigration.Migration

packages/core/src/database/path.ts

@@ -0,0 +1,91 @@
+import nodePath from "path"
+import { customType } from "drizzle-orm/sqlite-core"
+import { AbsolutePath } from "../schema"
+
+function storagePath(input: string) {
+  if (process.platform !== "win32") return input
+  return input.replaceAll("\\", "/")
+}
+
+function isWindowsStoragePath(input: string) {
+  return /^[A-Za-z]:\//.test(input) || input.startsWith("//")
+}
+
+function absolute(input: string) {
+  const result = storagePath(input)
+  if (!nodePath.posix.isAbsolute(result) && !(process.platform === "win32" && isWindowsStoragePath(result))) {
+    throw new Error(`Path is not absolute: ${input}`)
+  }
+  return result
+}
+
+function toPlatform(input: string) {
+  if (process.platform !== "win32" || !isWindowsStoragePath(input)) return input
+  return input.replaceAll("/", "\\")
+}
+
+export const absoluteColumn = customType<{
+  data: AbsolutePath
+  driverData: string
+  driverOutput: string
+}>({
+  dataType() {
+    return "text"
+  },
+  toDriver(input) {
+    return absolute(input)
+  },
+  fromDriver(input) {
+    return AbsolutePath.make(toPlatform(absolute(input)))
+  },
+})
+
+// Legacy sessions may persist an empty directory. Keep that existing value
+// readable while normalizing and validating every real directory.
+export const directoryColumn = customType<{
+  data: string
+  driverData: string
+  driverOutput: string
+}>({
+  dataType() {
+    return "text"
+  },
+  toDriver(input) {
+    return input ? absolute(input) : input
+  },
+  fromDriver(input) {
+    return input ? toPlatform(absolute(input)) : input
+  },
+})
+
+export const pathColumn = customType<{
+  data: string
+  driverData: string
+  driverOutput: string
+}>({
+  dataType() {
+    return "text"
+  },
+  toDriver(input) {
+    return storagePath(input)
+  },
+  fromDriver(input) {
+    return storagePath(input)
+  },
+})
+
+export const absoluteArrayColumn = customType<{
+  data: AbsolutePath[]
+  driverData: string
+  driverOutput: string
+}>({
+  dataType() {
+    return "text"
+  },
+  toDriver(input) {
+    return JSON.stringify(input.map(absolute))
+  },
+  fromDriver(input) {
+    return (JSON.parse(input) as string[]).map((item) => AbsolutePath.make(toPlatform(absolute(item))))
+  },
+})

packages/core/src/location-layer.ts

@@ -13,6 +13,10 @@ import { Npm } from "./npm"
 import { ModelsDev } from "./models-dev"
 import { AppFileSystem } from "./filesystem"
 import { Global } from "./global"
+import { Database } from "./database/database"
+import { PermissionV2 } from "./permission"
+import { PermissionSaved } from "./permission/saved"
+import { SessionV2 } from "./session"
 
 export class LocationServiceMap extends LayerMap.Service<LocationServiceMap>()("@opencode/example/LocationServiceMap", {
   lookup: (ref: Location.Ref) => {
@@ -25,6 +29,7 @@ export class LocationServiceMap extends LayerMap.Service<LocationServiceMap>()("
       Catalog.locationLayer,
       AgentV2.locationLayer,
       PluginBoot.locationLayer,
+      PermissionV2.locationLayer,
     ).pipe(Layer.provideMerge(location), Layer.fresh)
   },
   idleTimeToLive: "60 minutes",
@@ -36,5 +41,8 @@ export class LocationServiceMap extends LayerMap.Service<LocationServiceMap>()("
     ModelsDev.defaultLayer,
     AppFileSystem.defaultLayer,
     Global.defaultLayer,
+    Database.defaultLayer,
+    SessionV2.defaultLayer,
+    PermissionSaved.defaultLayer,
   ],
 }) {}

packages/core/src/permission.ts

@@ -1,42 +1,110 @@
 export * as PermissionV2 from "./permission"
 
-import { Schema } from "effect"
+import { Context, Deferred, Effect as EffectRuntime, Layer, Schema } from "effect"
+import { EventV2 } from "./event"
+import { Location } from "./location"
+import { AgentV2 } from "./agent"
+import { SessionV2 } from "./session"
+import { withStatics } from "./schema"
+import { Identifier } from "./util/identifier"
 import { Wildcard } from "./util/wildcard"
-import { Identifier } from "./id/id"
-import { Newtype } from "./schema"
+import { PermissionSchema } from "./permission/schema"
+import { PermissionSaved } from "./permission/saved"
 
-export class PermissionID extends Newtype<PermissionID>()(
-  "PermissionID",
-  Schema.String.check(Schema.isStartsWith("per")),
-) {
-  static ascending(id?: string): PermissionID {
-    return this.make(Identifier.ascending("permission", id))
-  }
+export { Effect, Rule, Ruleset } from "./permission/schema"
+type Effect = PermissionSchema.Effect
+type Rule = PermissionSchema.Rule
+type Ruleset = PermissionSchema.Ruleset
+
+export const ID = Schema.String.check(Schema.isStartsWith("per")).pipe(
+  Schema.brand("PermissionV2.ID"),
+  withStatics((schema) => ({ create: (id?: string) => schema.make(id ?? "per_" + Identifier.ascending()) })),
+)
+export type ID = typeof ID.Type
+
+export const Source = Schema.Union([
+  Schema.Struct({
+    type: Schema.Literal("tool"),
+    messageID: Schema.String,
+    callID: Schema.String,
+  }),
+]).annotate({ identifier: "PermissionV2.Source" })
+export type Source = typeof Source.Type
+
+export const Request = Schema.Struct({
+  id: ID,
+  sessionID: SessionV2.ID,
+  action: Schema.String,
+  resources: Schema.Array(Schema.String),
+  save: Schema.Array(Schema.String).pipe(Schema.optional),
+  metadata: Schema.Record(Schema.String, Schema.Unknown).pipe(Schema.optional),
+  source: Source.pipe(Schema.optional),
+}).annotate({ identifier: "PermissionV2.Request" })
+export type Request = typeof Request.Type
+
+export const Reply = Schema.Literals(["once", "always", "reject"]).annotate({ identifier: "PermissionV2.Reply" })
+export type Reply = typeof Reply.Type
+
+export const AssertInput = Schema.Struct({
+  id: ID.pipe(Schema.optional),
+  sessionID: SessionV2.ID,
+  action: Schema.String,
+  resources: Schema.Array(Schema.String),
+  save: Schema.Array(Schema.String).pipe(Schema.optional),
+  metadata: Schema.Record(Schema.String, Schema.Unknown).pipe(Schema.optional),
+  source: Source.pipe(Schema.optional),
+}).annotate({ identifier: "PermissionV2.AssertInput" })
+export type AssertInput = typeof AssertInput.Type
+
+export const ReplyInput = Schema.Struct({
+  requestID: ID,
+  reply: Reply,
+  message: Schema.String.pipe(Schema.optional),
+}).annotate({ identifier: "PermissionV2.ReplyInput" })
+export type ReplyInput = typeof ReplyInput.Type
+
+export const AskResult = Schema.Struct({
+  id: ID,
+  effect: PermissionSchema.Effect,
+}).annotate({ identifier: "PermissionV2.AskResult" })
+export type AskResult = typeof AskResult.Type
+
+export const Event = {
+  Asked: EventV2.define({ type: "permission.v2.asked", schema: Request.fields }),
+  Replied: EventV2.define({
+    type: "permission.v2.replied",
+    schema: {
+      sessionID: SessionV2.ID,
+      requestID: ID,
+      reply: Reply,
+    },
+  }),
 }
 
-export const Action = Schema.Literals(["allow", "deny", "ask"]).annotate({ identifier: "Permission.Action" })
-export type Action = typeof Action.Type
+export class RejectedError extends Schema.TaggedErrorClass<RejectedError>()("PermissionV2.RejectedError", {}) {}
 
-export const Rule = Schema.Struct({
-  permission: Schema.String,
-  pattern: Schema.String,
-  action: Action,
-}).annotate({ identifier: "Permission.Rule" })
-export type Rule = typeof Rule.Type
+export class CorrectedError extends Schema.TaggedErrorClass<CorrectedError>()("PermissionV2.CorrectedError", {
+  feedback: Schema.String,
+}) {}
 
-export const Ruleset = Schema.Array(Rule).annotate({ identifier: "Permission.Ruleset" })
-export type Ruleset = typeof Ruleset.Type
+export class DeniedError extends Schema.TaggedErrorClass<DeniedError>()("PermissionV2.DeniedError", {
+  rules: PermissionSchema.Ruleset,
+}) {}
 
-const EDIT_TOOLS = ["edit", "write", "apply_patch"]
+export class NotFoundError extends Schema.TaggedErrorClass<NotFoundError>()("PermissionV2.NotFoundError", {
+  requestID: ID,
+}) {}
 
-export function evaluate(permission: string, pattern: string, ...rulesets: Ruleset[]): Rule {
+export type Error = DeniedError | RejectedError | CorrectedError
+
+export function evaluate(action: string, resource: string, ...rulesets: Ruleset[]): Rule {
   return (
     rulesets
       .flat()
-      .findLast((rule) => Wildcard.match(permission, rule.permission) && Wildcard.match(pattern, rule.pattern)) ?? {
-      action: "ask",
-      permission,
-      pattern: "*",
+      .findLast((rule) => Wildcard.match(action, rule.action) && Wildcard.match(resource, rule.resource)) ?? {
+      action,
+      resource: "*",
+      effect: "ask",
     }
   )
 }
@@ -45,12 +113,195 @@ export function merge(...rulesets: Ruleset[]): Ruleset {
   return rulesets.flat()
 }
 
-export function disabled(tools: string[], ruleset: Ruleset): Set<string> {
-  return new Set(
-    tools.filter((tool) => {
-      const permission = EDIT_TOOLS.includes(tool) ? "edit" : tool
-      const rule = ruleset.findLast((rule) => Wildcard.match(permission, rule.permission))
-      return rule?.pattern === "*" && rule.action === "deny"
-    }),
-  )
+export interface Interface {
+  readonly ask: (input: AssertInput) => EffectRuntime.Effect<AskResult, SessionV2.NotFoundError>
+  readonly assert: (input: AssertInput) => EffectRuntime.Effect<void, Error | SessionV2.NotFoundError>
+  readonly reply: (input: ReplyInput) => EffectRuntime.Effect<void, NotFoundError>
+  readonly get: (id: ID) => EffectRuntime.Effect<Request | undefined>
+  readonly forSession: (sessionID: SessionV2.ID) => EffectRuntime.Effect<ReadonlyArray<Request>>
+  readonly list: () => EffectRuntime.Effect<ReadonlyArray<Request>>
 }
+
+export class Service extends Context.Service<Service, Interface>()("@opencode/v2/Permission") {}
+
+interface Pending {
+  readonly request: Request
+  readonly deferred: Deferred.Deferred<void, RejectedError | CorrectedError>
+}
+
+export const layer = Layer.effect(
+  Service,
+  EffectRuntime.gen(function* () {
+    const events = yield* EventV2.Service
+    const location = yield* Location.Service
+    const agents = yield* AgentV2.Service
+    const sessions = yield* SessionV2.Service
+    const saved = yield* PermissionSaved.Service
+    const pending = new Map<ID, Pending>()
+
+    yield* EffectRuntime.addFinalizer(() =>
+      EffectRuntime.forEach(pending.values(), (item) => Deferred.fail(item.deferred, new RejectedError()), {
+        discard: true,
+      }).pipe(
+        EffectRuntime.ensuring(
+          EffectRuntime.sync(() => {
+            pending.clear()
+          }),
+        ),
+      ),
+    )
+
+    const savedRules = EffectRuntime.fnUntraced(function* () {
+      return (yield* saved.list({ projectID: location.project.id })).map(
+        (item): Rule => ({ action: item.action, resource: item.resource, effect: "allow" }),
+      )
+    })
+
+    const configured = EffectRuntime.fn("PermissionV2.configured")(function* (sessionID: SessionV2.ID) {
+      const session = yield* sessions.get(sessionID)
+      if (!session.agent) return []
+      return (yield* agents.get(AgentV2.ID.make(session.agent)))?.permissions ?? []
+    })
+
+    function denied(input: AssertInput, rules: Ruleset) {
+      return input.resources.some((resource) => evaluate(input.action, resource, rules).effect === "deny")
+    }
+
+    function relevant(input: AssertInput, rules: Ruleset) {
+      return rules.filter((rule) => Wildcard.match(input.action, rule.action))
+    }
+
+    const evaluateInput = EffectRuntime.fnUntraced(function* (input: AssertInput) {
+      const rules = yield* configured(input.sessionID)
+      if (denied(input, rules)) return { effect: "deny" as const, rules }
+      const all = [...rules, ...(yield* savedRules())]
+      const effects = input.resources.map((resource) => evaluate(input.action, resource, all).effect)
+      const effect: Effect = effects.includes("deny") ? "deny" : effects.includes("ask") ? "ask" : "allow"
+      return { effect, rules: all }
+    })
+
+    function request(input: AssertInput): Request {
+      return {
+        id: input.id ?? ID.create(),
+        sessionID: input.sessionID,
+        action: input.action,
+        resources: input.resources,
+        save: input.save,
+        metadata: input.metadata,
+        source: input.source,
+      }
+    }
+
+    const create = EffectRuntime.fnUntraced(function* (request: Request) {
+      const deferred = yield* Deferred.make<void, RejectedError | CorrectedError>()
+      const item = { request, deferred }
+      pending.set(request.id, item)
+      yield* events.publish(Event.Asked, request)
+      return item
+    })
+
+    const ask = EffectRuntime.fn("PermissionV2.ask")(function* (input: AssertInput) {
+      const result = yield* evaluateInput(input)
+      const value = request(input)
+      if (result.effect === "ask") yield* create(value)
+      return { id: value.id, effect: result.effect }
+    })
+
+    const assert = EffectRuntime.fn("PermissionV2.assert")(function* (input: AssertInput) {
+      const result = yield* evaluateInput(input)
+      if (result.effect === "deny") {
+        return yield* new DeniedError({
+          rules: relevant(input, result.rules),
+        })
+      }
+      if (result.effect === "allow") return
+      const item = yield* create(request(input))
+      return yield* Deferred.await(item.deferred).pipe(
+        EffectRuntime.ensuring(
+          EffectRuntime.sync(() => {
+            pending.delete(item.request.id)
+          }),
+        ),
+      )
+    })
+
+    const reply = EffectRuntime.fn("PermissionV2.reply")(function* (input: ReplyInput) {
+      const existing = pending.get(input.requestID)
+      if (!existing) return yield* new NotFoundError({ requestID: input.requestID })
+      pending.delete(input.requestID)
+      yield* events.publish(Event.Replied, {
+        sessionID: existing.request.sessionID,
+        requestID: existing.request.id,
+        reply: input.reply,
+      })
+
+      if (input.reply === "reject") {
+        yield* Deferred.fail(
+          existing.deferred,
+          input.message ? new CorrectedError({ feedback: input.message }) : new RejectedError(),
+        )
+        for (const [id, item] of pending) {
+          if (item.request.sessionID !== existing.request.sessionID) continue
+          pending.delete(id)
+          yield* events.publish(Event.Replied, {
+            sessionID: item.request.sessionID,
+            requestID: item.request.id,
+            reply: "reject",
+          })
+          yield* Deferred.fail(item.deferred, new RejectedError())
+        }
+        return
+      }
+
+      if (input.reply === "always" && existing.request.save?.length) {
+        yield* saved.add({
+          projectID: location.project.id,
+          action: existing.request.action,
+          resources: existing.request.save,
+        })
+      }
+      yield* Deferred.succeed(existing.deferred, undefined)
+      if (input.reply !== "always" || !existing.request.save?.length) return
+
+      const rememberedRules = yield* savedRules()
+      for (const [id, item] of pending) {
+        const input = { ...item.request }
+        const rules = yield* configured(item.request.sessionID).pipe(
+          EffectRuntime.catchTag("Session.NotFoundError", () => EffectRuntime.succeed(undefined)),
+        )
+        if (!rules) continue
+        if (denied(input, rules)) continue
+        const effective = [...rules, ...rememberedRules]
+        if (
+          !item.request.resources.every(
+            (resource) => evaluate(item.request.action, resource, effective).effect === "allow",
+          )
+        )
+          continue
+        pending.delete(id)
+        yield* events.publish(Event.Replied, {
+          sessionID: item.request.sessionID,
+          requestID: item.request.id,
+          reply: "always",
+        })
+        yield* Deferred.succeed(item.deferred, undefined)
+      }
+    })
+
+    const list = EffectRuntime.fn("PermissionV2.list")(function* () {
+      return Array.from(pending.values(), (item) => item.request)
+    })
+
+    const get = EffectRuntime.fn("PermissionV2.get")(function* (id: ID) {
+      return pending.get(id)?.request
+    })
+
+    const forSession = EffectRuntime.fn("PermissionV2.forSession")(function* (sessionID: SessionV2.ID) {
+      return Array.from(pending.values(), (item) => item.request).filter((request) => request.sessionID === sessionID)
+    })
+
+    return Service.of({ ask, assert, reply, get, forSession, list })
+  }),
+)
+
+export const locationLayer = layer.pipe(Layer.provideMerge(AgentV2.locationLayer))

packages/core/src/permission/legacy.ts

@@ -0,0 +1,96 @@
+export * as PermissionLegacy from "./legacy"
+
+import { Schema } from "effect"
+import { ProjectV2 } from "../project"
+import { withStatics } from "../schema"
+import { SessionSchema } from "../session/schema"
+import { Identifier } from "../util/identifier"
+
+export const ID = Schema.String.check(Schema.isStartsWith("per")).pipe(
+  Schema.brand("PermissionID"),
+  withStatics((schema) => ({ ascending: (id?: string) => schema.make(id ?? "per_" + Identifier.ascending()) })),
+)
+export type ID = typeof ID.Type
+
+export const Action = Schema.Literals(["allow", "deny", "ask"]).annotate({ identifier: "PermissionAction" })
+export type Action = typeof Action.Type
+
+export const Rule = Schema.Struct({
+  permission: Schema.String,
+  pattern: Schema.String,
+  action: Action,
+}).annotate({ identifier: "PermissionRule" })
+export type Rule = typeof Rule.Type
+
+export const Ruleset = Schema.Array(Rule).annotate({ identifier: "PermissionRuleset" })
+export type Ruleset = typeof Ruleset.Type
+
+export const Request = Schema.Struct({
+  id: ID,
+  sessionID: SessionSchema.ID,
+  permission: Schema.String,
+  patterns: Schema.Array(Schema.String),
+  metadata: Schema.Record(Schema.String, Schema.Unknown),
+  always: Schema.Array(Schema.String),
+  tool: Schema.Struct({
+    messageID: Schema.String,
+    callID: Schema.String,
+  }).pipe(Schema.optional),
+}).annotate({ identifier: "PermissionRequest" })
+export type Request = typeof Request.Type
+
+export const Reply = Schema.Literals(["once", "always", "reject"])
+export type Reply = typeof Reply.Type
+
+export const ReplyBody = Schema.Struct({
+  reply: Reply,
+  message: Schema.String.pipe(Schema.optional),
+}).annotate({ identifier: "PermissionReplyBody" })
+export type ReplyBody = typeof ReplyBody.Type
+
+export const Approval = Schema.Struct({
+  projectID: ProjectV2.ID,
+  patterns: Schema.Array(Schema.String),
+}).annotate({ identifier: "PermissionApproval" })
+export type Approval = typeof Approval.Type
+
+export const AskInput = Schema.Struct({
+  ...Request.fields,
+  id: ID.pipe(Schema.optional),
+  ruleset: Ruleset,
+}).annotate({ identifier: "PermissionAskInput" })
+export type AskInput = typeof AskInput.Type
+
+export const ReplyInput = Schema.Struct({
+  requestID: ID,
+  ...ReplyBody.fields,
+}).annotate({ identifier: "PermissionReplyInput" })
+export type ReplyInput = typeof ReplyInput.Type
+
+export class RejectedError extends Schema.TaggedErrorClass<RejectedError>()("PermissionRejectedError", {}) {
+  override get message() {
+    return "The user rejected permission to use this specific tool call."
+  }
+}
+
+export class CorrectedError extends Schema.TaggedErrorClass<CorrectedError>()("PermissionCorrectedError", {
+  feedback: Schema.String,
+}) {
+  override get message() {
+    return `The user rejected permission to use this specific tool call with the following feedback: ${this.feedback}`
+  }
+}
+
+export class DeniedError extends Schema.TaggedErrorClass<DeniedError>()("PermissionDeniedError", {
+  ruleset: Schema.Any,
+}) {
+  override get message() {
+    return `The user has specified a rule which prevents you from using this specific tool call. Here are some of the relevant rules ${JSON.stringify(this.ruleset)}`
+  }
+}
+
+export class NotFoundError extends Schema.TaggedErrorClass<NotFoundError>()("Permission.NotFoundError", {
+  requestID: ID,
+}) {}
+
+export type Error = DeniedError | RejectedError | CorrectedError

packages/core/src/permission/saved.ts

@@ -0,0 +1,87 @@
+export * as PermissionSaved from "./saved"
+
+import { eq } from "drizzle-orm"
+import { Context, Effect, Layer, Schema } from "effect"
+import { Database } from "../database/database"
+import { ProjectV2 } from "../project"
+import { withStatics } from "../schema"
+import { Identifier } from "../util/identifier"
+import { PermissionTable } from "./sql"
+
+export const ID = Schema.String.pipe(
+  Schema.brand("PermissionSaved.ID"),
+  withStatics((schema) => ({ create: () => schema.make("psv_" + Identifier.ascending()) })),
+)
+export type ID = typeof ID.Type
+
+export const Info = Schema.Struct({
+  id: ID,
+  projectID: ProjectV2.ID,
+  action: Schema.String,
+  resource: Schema.String,
+}).annotate({ identifier: "PermissionSaved.Info" })
+export type Info = typeof Info.Type
+
+export const ListInput = Schema.Struct({
+  projectID: ProjectV2.ID.pipe(Schema.optional),
+}).annotate({ identifier: "PermissionSaved.ListInput" })
+export type ListInput = typeof ListInput.Type
+
+export const AddInput = Schema.Struct({
+  projectID: ProjectV2.ID,
+  action: Schema.String,
+  resources: Schema.Array(Schema.String),
+}).annotate({ identifier: "PermissionSaved.AddInput" })
+export type AddInput = typeof AddInput.Type
+
+export interface Interface {
+  readonly list: (input?: ListInput) => Effect.Effect<ReadonlyArray<Info>>
+  readonly add: (input: AddInput) => Effect.Effect<void>
+  readonly remove: (id: ID) => Effect.Effect<void>
+}
+
+export class Service extends Context.Service<Service, Interface>()("@opencode/v2/PermissionSaved") {}
+
+export const layer = Layer.effect(
+  Service,
+  Effect.gen(function* () {
+    const { db } = yield* Database.Service
+
+    const list = Effect.fn("PermissionSaved.list")(function* (input?: ListInput) {
+      const rows = yield* db
+        .select()
+        .from(PermissionTable)
+        .where(input?.projectID ? eq(PermissionTable.project_id, input.projectID) : undefined)
+        .all()
+        .pipe(Effect.orDie)
+      return rows.map(
+        (row): Info => ({ id: row.id, projectID: row.project_id, action: row.action, resource: row.resource }),
+      )
+    })
+
+    const add = Effect.fn("PermissionSaved.add")(function* (input: AddInput) {
+      if (!input.resources.length) return
+      yield* db
+        .insert(PermissionTable)
+        .values(
+          input.resources.map((resource) => ({
+            id: ID.create(),
+            project_id: input.projectID,
+            action: input.action,
+            resource,
+          })),
+        )
+        .onConflictDoNothing()
+        .run()
+        .pipe(Effect.orDie)
+    })
+
+    const remove = Effect.fn("PermissionSaved.remove")(function* (id: ID) {
+      yield* db.delete(PermissionTable).where(eq(PermissionTable.id, id)).run().pipe(Effect.orDie)
+    })
+
+    return Service.of({ list, add, remove })
+  }),
+)
+
+export const defaultLayer = layer.pipe(Layer.provide(Database.defaultLayer))

packages/core/src/permission/schema.ts

@@ -0,0 +1,16 @@
+export * as PermissionSchema from "./schema"
+
+import { Schema } from "effect"
+
+export const Effect = Schema.Literals(["allow", "deny", "ask"]).annotate({ identifier: "PermissionV2.Effect" })
+export type Effect = typeof Effect.Type
+
+export const Rule = Schema.Struct({
+  action: Schema.String,
+  resource: Schema.String,
+  effect: Effect,
+}).annotate({ identifier: "PermissionV2.Rule" })
+export type Rule = typeof Rule.Type
+
+export const Ruleset = Schema.Array(Rule).annotate({ identifier: "PermissionV2.Ruleset" })
+export type Ruleset = typeof Ruleset.Type

packages/core/src/permission/sql.ts

@@ -0,0 +1,20 @@
+import { sqliteTable, text, uniqueIndex } from "drizzle-orm/sqlite-core"
+import { Timestamps } from "../database/schema.sql"
+import { ProjectV2 } from "../project"
+import { ProjectTable } from "../project/sql"
+import type { PermissionSaved } from "./saved"
+
+export const PermissionTable = sqliteTable(
+  "permission",
+  {
+    id: text().$type<PermissionSaved.ID>().primaryKey(),
+    project_id: text()
+      .$type<ProjectV2.ID>()
+      .notNull()
+      .references(() => ProjectTable.id, { onDelete: "cascade" }),
+    action: text().notNull(),
+    resource: text().notNull(),
+    ...Timestamps,
+  },
+  (table) => [uniqueIndex("permission_project_action_resource_idx").on(table.project_id, table.action, table.resource)],
+)

packages/core/src/plugin/agent.ts

@@ -104,23 +104,23 @@ export const Plugin = PluginV2.define({
     const worktree = location.directory
     const whitelistedDirs = [TRUNCATION_GLOB, path.join(Global.Path.tmp, "*")]
     const readonlyExternalDirectory: PermissionV2.Ruleset = [
-      { permission: "external_directory", pattern: "*", action: "ask" },
+      { action: "external_directory", resource: "*", effect: "ask" },
       ...whitelistedDirs.map(
-        (pattern): PermissionV2.Rule => ({ permission: "external_directory", pattern, action: "allow" }),
+        (resource): PermissionV2.Rule => ({ action: "external_directory", resource, effect: "allow" }),
       ),
     ]
     const defaults: PermissionV2.Ruleset = [
-      { permission: "*", pattern: "*", action: "allow" },
+      { action: "*", resource: "*", effect: "allow" },
       ...readonlyExternalDirectory,
-      { permission: "question", pattern: "*", action: "deny" },
-      { permission: "plan_enter", pattern: "*", action: "deny" },
-      { permission: "plan_exit", pattern: "*", action: "deny" },
-      { permission: "repo_clone", pattern: "*", action: "deny" },
-      { permission: "repo_overview", pattern: "*", action: "deny" },
-      { permission: "read", pattern: "*", action: "allow" },
-      { permission: "read", pattern: "*.env", action: "ask" },
-      { permission: "read", pattern: "*.env.*", action: "ask" },
-      { permission: "read", pattern: "*.env.example", action: "allow" },
+      { action: "question", resource: "*", effect: "deny" },
+      { action: "plan_enter", resource: "*", effect: "deny" },
+      { action: "plan_exit", resource: "*", effect: "deny" },
+      { action: "repo_clone", resource: "*", effect: "deny" },
+      { action: "repo_overview", resource: "*", effect: "deny" },
+      { action: "read", resource: "*", effect: "allow" },
+      { action: "read", resource: "*.env", effect: "ask" },
+      { action: "read", resource: "*.env.*", effect: "ask" },
+      { action: "read", resource: "*.env.example", effect: "allow" },
     ]
 
     yield* agent.update((editor) => {
@@ -129,8 +129,8 @@ export const Plugin = PluginV2.define({
         item.mode = "primary"
         item.permissions.push(
           ...PermissionV2.merge(defaults, [
-            { permission: "question", pattern: "*", action: "allow" },
-            { permission: "plan_enter", pattern: "*", action: "allow" },
+            { action: "question", resource: "*", effect: "allow" },
+            { action: "plan_enter", resource: "*", effect: "allow" },
           ]),
         )
       })
@@ -140,15 +140,15 @@ export const Plugin = PluginV2.define({
         item.mode = "primary"
         item.permissions.push(
           ...PermissionV2.merge(defaults, [
-            { permission: "question", pattern: "*", action: "allow" },
-            { permission: "plan_exit", pattern: "*", action: "allow" },
-            { permission: "external_directory", pattern: path.join(Global.Path.data, "plans", "*"), action: "allow" },
-            { permission: "edit", pattern: "*", action: "deny" },
-            { permission: "edit", pattern: path.join(".opencode", "plans", "*.md"), action: "allow" },
+            { action: "question", resource: "*", effect: "allow" },
+            { action: "plan_exit", resource: "*", effect: "allow" },
+            { action: "external_directory", resource: path.join(Global.Path.data, "plans", "*"), effect: "allow" },
+            { action: "edit", resource: "*", effect: "deny" },
+            { action: "edit", resource: path.join(".opencode", "plans", "*.md"), effect: "allow" },
             {
-              permission: "edit",
-              pattern: path.relative(worktree, path.join(Global.Path.data, "plans", "*.md")),
-              action: "allow",
+              action: "edit",
+              resource: path.relative(worktree, path.join(Global.Path.data, "plans", "*.md")),
+              effect: "allow",
             },
           ]),
         )
@@ -158,9 +158,7 @@ export const Plugin = PluginV2.define({
         item.description =
           "General-purpose agent for researching complex questions and executing multi-step tasks. Use this agent to execute multiple units of work in parallel."
         item.mode = "subagent"
-        item.permissions.push(
-          ...PermissionV2.merge(defaults, [{ permission: "todowrite", pattern: "*", action: "deny" }]),
-        )
+        item.permissions.push(...PermissionV2.merge(defaults, [{ action: "todowrite", resource: "*", effect: "deny" }]))
       })
 
       editor.update(AgentV2.ID.make("explore"), (item) => {
@@ -172,14 +170,14 @@ export const Plugin = PluginV2.define({
           ...PermissionV2.merge(
             defaults,
             [
-              { permission: "*", pattern: "*", action: "deny" },
-              { permission: "grep", pattern: "*", action: "allow" },
-              { permission: "glob", pattern: "*", action: "allow" },
-              { permission: "list", pattern: "*", action: "allow" },
-              { permission: "bash", pattern: "*", action: "allow" },
-              { permission: "webfetch", pattern: "*", action: "allow" },
-              { permission: "websearch", pattern: "*", action: "allow" },
-              { permission: "read", pattern: "*", action: "allow" },
+              { action: "*", resource: "*", effect: "deny" },
+              { action: "grep", resource: "*", effect: "allow" },
+              { action: "glob", resource: "*", effect: "allow" },
+              { action: "list", resource: "*", effect: "allow" },
+              { action: "bash", resource: "*", effect: "allow" },
+              { action: "webfetch", resource: "*", effect: "allow" },
+              { action: "websearch", resource: "*", effect: "allow" },
+              { action: "read", resource: "*", effect: "allow" },
             ],
             readonlyExternalDirectory,
           ),
@@ -190,21 +188,21 @@ export const Plugin = PluginV2.define({
         item.mode = "primary"
         item.hidden = true
         item.system = PROMPT_COMPACTION
-        item.permissions.push(...PermissionV2.merge(defaults, [{ permission: "*", pattern: "*", action: "deny" }]))
+        item.permissions.push(...PermissionV2.merge(defaults, [{ action: "*", resource: "*", effect: "deny" }]))
       })
 
       editor.update(AgentV2.ID.make("title"), (item) => {
         item.mode = "primary"
         item.hidden = true
         item.system = PROMPT_TITLE
-        item.permissions.push(...PermissionV2.merge(defaults, [{ permission: "*", pattern: "*", action: "deny" }]))
+        item.permissions.push(...PermissionV2.merge(defaults, [{ action: "*", resource: "*", effect: "deny" }]))
       })
 
       editor.update(AgentV2.ID.make("summary"), (item) => {
         item.mode = "primary"
         item.hidden = true
         item.system = PROMPT_SUMMARY
-        item.permissions.push(...PermissionV2.merge(defaults, [{ permission: "*", pattern: "*", action: "deny" }]))
+        item.permissions.push(...PermissionV2.merge(defaults, [{ action: "*", resource: "*", effect: "deny" }]))
       })
     })
   }),

packages/core/src/project/sql.ts

@@ -1,10 +1,11 @@
 import { sqliteTable, text, integer } from "drizzle-orm/sqlite-core"
+import * as DatabasePath from "../database/path"
 import { Timestamps } from "../database/schema.sql"
 import { ProjectV2 } from "../project"
 
 export const ProjectTable = sqliteTable("project", {
   id: text().$type<ProjectV2.ID>().primaryKey(),
-  worktree: text().notNull(),
+  worktree: DatabasePath.absoluteColumn().notNull(),
   vcs: text(),
   name: text(),
   icon_url: text(),
@@ -12,6 +13,6 @@ export const ProjectTable = sqliteTable("project", {
   icon_color: text(),
   ...Timestamps,
   time_initialized: integer(),
-  sandboxes: text({ mode: "json" }).notNull().$type<string[]>(),
+  sandboxes: DatabasePath.absoluteArrayColumn().notNull(),
   commands: text({ mode: "json" }).$type<{ start?: string }>(),
 })

packages/core/src/session/legacy.ts

@@ -2,7 +2,7 @@ export * as SessionLegacy from "./legacy"
 
 import { Effect, Schema, Types } from "effect"
 import { EventV2 } from "../event"
-import { PermissionV2 } from "../permission"
+import { PermissionLegacy } from "../permission/legacy"
 import { ProjectV2 } from "../project"
 import { ProviderV2 } from "../provider"
 import { optionalOmitUndefined, withStatics } from "../schema"
@@ -558,7 +558,7 @@ export const SessionInfo = Schema.Struct({
     compacting: optionalOmitUndefined(NonNegativeInt),
     archived: optionalOmitUndefined(Schema.Finite),
   }),
-  permission: optionalOmitUndefined(PermissionV2.Ruleset),
+  permission: optionalOmitUndefined(PermissionLegacy.Ruleset),
   revert: optionalOmitUndefined(SessionRevert),
 }).annotate({ identifier: "Session" })
 export type SessionInfo = typeof SessionInfo.Type

packages/core/src/session/sql.ts

@@ -1,8 +1,9 @@
 import { sqliteTable, text, integer, index, primaryKey, real } from "drizzle-orm/sqlite-core"
+import * as DatabasePath from "../database/path"
 import { ProjectTable } from "../project/sql"
 import type { SessionMessage } from "./message"
 import type { Snapshot } from "../snapshot"
-import { PermissionV2 } from "../permission"
+import { PermissionLegacy } from "../permission/legacy"
 import { ProjectV2 } from "../project"
 import type { SessionSchema } from "./schema"
 import type { MessageID, PartID, Info as LegacyMessageInfo, Part as LegacyMessagePart } from "./legacy"
@@ -24,8 +25,8 @@ export const SessionTable = sqliteTable(
     workspace_id: text().$type<WorkspaceV2.ID>(),
     parent_id: text().$type<SessionSchema.ID>(),
     slug: text().notNull(),
-    directory: text().notNull(),
-    path: text(),
+    directory: DatabasePath.directoryColumn().notNull(),
+    path: DatabasePath.pathColumn(),
     title: text().notNull(),
     version: text().notNull(),
     share_url: text(),
@@ -41,7 +42,7 @@ export const SessionTable = sqliteTable(
     tokens_cache_read: integer().notNull().default(0),
     tokens_cache_write: integer().notNull().default(0),
     revert: text({ mode: "json" }).$type<{ messageID: MessageID; partID?: PartID; snapshot?: string; diff?: string }>(),
-    permission: text({ mode: "json" }).$type<PermissionV2.Ruleset>(),
+    permission: text({ mode: "json" }).$type<PermissionLegacy.Ruleset>(),
     agent: text(),
     model: text({ mode: "json" }).$type<{
       id: string
@@ -128,11 +129,3 @@ export const SessionMessageTable = sqliteTable(
     index("session_message_time_created_idx").on(table.time_created),
   ],
 )
-
-export const PermissionTable = sqliteTable("permission", {
-  project_id: text()
-    .primaryKey()
-    .references(() => ProjectTable.id, { onDelete: "cascade" }),
-  ...Timestamps,
-  data: text({ mode: "json" }).notNull().$type<PermissionV2.Ruleset>(),
-})

packages/core/src/substitution.ts

@@ -0,0 +1,94 @@
+export * as Substitution from "./substitution"
+
+import os from "os"
+import path from "path"
+import { Context, Effect, Layer, Schema } from "effect"
+import { AppFileSystem } from "./filesystem"
+
+type Source =
+  | {
+      type: "path"
+      path: string
+    }
+  | {
+      type: "virtual"
+      source: string
+      dir: string
+    }
+
+export type Input = Source & {
+  text: string
+  missing?: "error" | "empty"
+  env?: Record<string, string | undefined>
+}
+
+export class FileReferenceError extends Schema.TaggedErrorClass<FileReferenceError>()("Substitution.FileReferenceError", {
+  source: Schema.String,
+  token: Schema.String,
+  resolved: Schema.String,
+  cause: Schema.Defect,
+}) {}
+
+export type Error = FileReferenceError
+
+export interface Interface {
+  readonly substitute: (input: Input) => Effect.Effect<string, Error>
+}
+
+export class Service extends Context.Service<Service, Interface>()("@opencode/v2/Substitution") {}
+
+export const layer = Layer.effect(
+  Service,
+  Effect.gen(function* () {
+    const fs = yield* AppFileSystem.Service
+
+    return Service.of({
+      substitute: Effect.fn("Substitution.substitute")(function* (input) {
+        const missing = input.missing ?? "error"
+        const text = input.text.replace(/\{env:([^}]+)\}/g, (_, varName) => {
+          return input.env?.[varName] ?? process.env[varName] ?? ""
+        })
+
+        const fileMatches = Array.from(text.matchAll(/\{file:[^}]+\}/g))
+        if (!fileMatches.length) return text
+
+        const configDir = input.type === "path" ? path.dirname(input.path) : input.dir
+        const configSource = input.type === "path" ? input.path : input.source
+        let out = ""
+        let cursor = 0
+
+        for (const match of fileMatches) {
+          const token = match[0]
+          const index = match.index!
+          out += text.slice(cursor, index)
+
+          const lineStart = text.lastIndexOf("\n", index - 1) + 1
+          const prefix = text.slice(lineStart, index).trimStart()
+          if (prefix.startsWith("//")) {
+            out += token
+            cursor = index + token.length
+            continue
+          }
+
+          const reference = token.replace(/^\{file:/, "").replace(/\}$/, "")
+          const filepath = reference.startsWith("~/") ? path.join(os.homedir(), reference.slice(2)) : reference
+          const resolved = path.isAbsolute(filepath) ? filepath : path.resolve(configDir, filepath)
+          const content = yield* fs.readFileString(resolved).pipe(
+            Effect.catch((cause) => {
+              if (missing === "empty") return Effect.succeed("")
+              return Effect.fail(new FileReferenceError({ source: configSource, token, resolved, cause }))
+            }),
+          )
+
+          out += JSON.stringify(content.trim()).slice(1, -1)
+          cursor = index + token.length
+        }
+
+        out += text.slice(cursor)
+        return out
+      }),
+    })
+  }),
+)
+
+export const defaultLayer = layer.pipe(Layer.provide(AppFileSystem.defaultLayer))

packages/core/test/auth-well-known.test.ts

@@ -0,0 +1,161 @@
+import { describe, expect } from "bun:test"
+import path from "path"
+import { Effect, Layer } from "effect"
+import { HttpClient, HttpClientResponse } from "effect/unstable/http"
+import { AppFileSystem } from "@opencode-ai/core/filesystem"
+import { Global } from "@opencode-ai/core/global"
+import { Substitution } from "@opencode-ai/core/substitution"
+import { AuthWellKnown } from "@opencode-ai/core/auth-well-known"
+import { tmpdir } from "./fixture/tmpdir"
+import { testEffect } from "./lib/effect"
+
+const it = testEffect(Layer.empty)
+
+const unexpectedHttpClient = HttpClient.make((request) => Effect.die(`unexpected http request: ${request.url}`))
+
+const withAuthWellKnown = <A, E, R>(
+  dir: string,
+  effect: Effect.Effect<A, E, R | AuthWellKnown.Service>,
+  client = unexpectedHttpClient,
+) =>
+  effect.pipe(
+    Effect.provide(AuthWellKnown.layer),
+    Effect.provide(AppFileSystem.defaultLayer),
+    Effect.provide(Global.layerWith({ data: dir })),
+    Effect.provide(Layer.succeed(HttpClient.HttpClient, client)),
+    Effect.provide(Substitution.defaultLayer),
+  )
+
+const wellKnownConfigClient = HttpClient.make((request) => {
+  if (request.url === "https://example.com/.well-known/opencode") {
+    return Effect.succeed(
+      HttpClientResponse.fromWeb(
+        request,
+        Response.json({
+          config: { instructions: ["local"] },
+          remote_config: {
+            url: "https://remote.example.com/config",
+            headers: {
+              authorization: "Bearer {env:TEST_TOKEN}",
+            },
+          },
+        }),
+      ),
+    )
+  }
+  if (request.url === "https://remote.example.com/config") {
+    expect(request.headers.authorization).toBe("Bearer secret")
+    return Effect.succeed(HttpClientResponse.fromWeb(request, Response.json({ model: "remote/model" })))
+  }
+  return Effect.succeed(HttpClientResponse.fromWeb(request, new Response(null, { status: 404 })))
+})
+
+describe("AuthWellKnown", () => {
+  it.live("stores well-known credentials", () =>
+    Effect.gen(function* () {
+      const tmp = yield* Effect.acquireRelease(
+        Effect.promise(() => tmpdir()),
+        (tmp) => Effect.promise(() => tmp[Symbol.asyncDispose]()),
+      )
+
+      yield* withAuthWellKnown(
+        tmp.path,
+        Effect.gen(function* () {
+          const auth = yield* AuthWellKnown.Service
+          yield* auth.set("https://example.com/", new AuthWellKnown.Entry({ key: "TEST_TOKEN", token: "secret" }))
+        }),
+      )
+
+      expect(yield* Effect.promise(() => Bun.file(path.join(tmp.path, "well-known.json")).json())).toEqual({
+        "https://example.com": {
+          key: "TEST_TOKEN",
+          token: "secret",
+        },
+      })
+    }),
+  )
+
+  it.live("migrates legacy well-known auth records", () =>
+    Effect.gen(function* () {
+      const tmp = yield* Effect.acquireRelease(
+        Effect.promise(() => tmpdir()),
+        (tmp) => Effect.promise(() => tmp[Symbol.asyncDispose]()),
+      )
+      yield* Effect.promise(() =>
+        Bun.write(
+          path.join(tmp.path, "auth.json"),
+          JSON.stringify({
+            "https://example.com": {
+              type: "wellknown",
+              key: "TEST_TOKEN",
+              token: "secret",
+            },
+          }),
+        ),
+      )
+
+      const entry = yield* withAuthWellKnown(
+        tmp.path,
+        Effect.gen(function* () {
+          const auth = yield* AuthWellKnown.Service
+          return yield* auth.get("https://example.com/")
+        }),
+      )
+
+      expect(entry).toEqual({
+        key: "TEST_TOKEN",
+        token: "secret",
+      })
+      expect(yield* Effect.promise(() => Bun.file(path.join(tmp.path, "well-known.json")).json())).toEqual({
+        "https://example.com": {
+          key: "TEST_TOKEN",
+          token: "secret",
+        },
+      })
+    }),
+  )
+
+  it.live("loads config documents", () =>
+    Effect.gen(function* () {
+      const tmp = yield* Effect.acquireRelease(
+        Effect.promise(() => tmpdir()),
+        (tmp) => Effect.promise(() => tmp[Symbol.asyncDispose]()),
+      )
+      yield* Effect.promise(() =>
+        Bun.write(
+          path.join(tmp.path, "well-known.json"),
+          JSON.stringify({
+            "https://example.com": {
+              key: "TEST_TOKEN",
+              token: "secret",
+            },
+          }),
+        ),
+      )
+
+      const result = yield* withAuthWellKnown(
+        tmp.path,
+        Effect.gen(function* () {
+          const auth = yield* AuthWellKnown.Service
+          return yield* auth.configs()
+        }),
+        wellKnownConfigClient,
+      )
+
+      expect(result).toEqual([
+        {
+          url: "https://example.com",
+          source: "https://example.com/.well-known/opencode",
+          dir: "https://example.com/.well-known",
+          content: { instructions: ["local"] },
+        },
+        {
+          url: "https://remote.example.com/config",
+          source: "https://remote.example.com/config",
+          dir: "https://remote.example.com",
+          content: { model: "remote/model" },
+        },
+      ])
+    }),
+  )
+})

packages/core/test/auth.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect } from "bun:test"
+import { Effect, Layer } from "effect"
+import { EventV2 } from "@opencode-ai/core/event"
+import { AppFileSystem } from "@opencode-ai/core/filesystem"
+import { Global } from "@opencode-ai/core/global"
+import { Auth } from "@opencode-ai/core/auth"
+import { tmpdir } from "./fixture/tmpdir"
+import { testEffect } from "./lib/effect"
+
+const it = testEffect(Layer.empty)
+
+const withAuth = <A, E, R>(dir: string, effect: Effect.Effect<A, E, R | Auth.Service>) =>
+  effect.pipe(
+    Effect.provide(Auth.layer),
+    Effect.provide(AppFileSystem.defaultLayer),
+    Effect.provide(Global.layerWith({ data: dir })),
+    Effect.provide(EventV2.defaultLayer),
+  )
+
+describe("Auth", () => {
+  it.live("stores api credentials", () =>
+    Effect.gen(function* () {
+      const tmp = yield* Effect.acquireRelease(
+        Effect.promise(() => tmpdir()),
+        (tmp) => Effect.promise(() => tmp[Symbol.asyncDispose]()),
+      )
+
+      const account = yield* withAuth(
+        tmp.path,
+        Effect.gen(function* () {
+          const auth = yield* Auth.Service
+          return yield* auth.create({
+            serviceID: Auth.ServiceID.make("anthropic"),
+            credential: new Auth.ApiKeyCredential({ type: "api", key: "sk-test" }),
+          })
+        }),
+      )
+
+      const active = yield* withAuth(
+        tmp.path,
+        Effect.gen(function* () {
+          const auth = yield* Auth.Service
+          return yield* auth.active(Auth.ServiceID.make("anthropic"))
+        }),
+      )
+
+      if (!account) throw new Error("expected account")
+      expect(active?.id).toBe(account.id)
+      expect(active?.credential).toEqual({ type: "api", key: "sk-test" })
+    }),
+  )
+})

packages/core/test/config/agent.test.ts

@@ -19,7 +19,7 @@ describe("ConfigAgentPlugin.Plugin", () => {
       yield* defaults((editor) =>
         editor.update(build, (agent) => {
           agent.mode = "primary"
-          agent.permissions.push({ permission: "bash", pattern: "*", action: "allow" })
+          agent.permissions.push({ action: "bash", resource: "*", effect: "allow" })
         }),
       )
 
@@ -30,16 +30,16 @@ describe("ConfigAgentPlugin.Plugin", () => {
             new Config.Loaded({
               source: { type: "memory" },
               info: decode({
-                permissions: [{ permission: "bash", pattern: "*", action: "ask" }],
+                permissions: [{ action: "bash", resource: "*", effect: "ask" }],
                 agents: {
                   build: {
-                    permissions: [{ permission: "bash", pattern: "git *", action: "allow" }],
+                    permissions: [{ action: "bash", resource: "git *", effect: "allow" }],
                   },
                   reviewer: {
                     model: "openrouter/openai/gpt-5",
                     description: "Review changes",
                     mode: "subagent",
-                    permissions: [{ permission: "edit", pattern: "*", action: "deny" }],
+                    permissions: [{ action: "edit", resource: "*", effect: "deny" }],
                   },
                   removed: { description: "Removed later" },
                 },
@@ -65,12 +65,12 @@ describe("ConfigAgentPlugin.Plugin", () => {
       const buildAgent = yield* agents.get(build)
       if (!buildAgent) throw new Error("expected configured build agent")
       expect(buildAgent.permissions).toEqual([
-        { permission: "bash", pattern: "*", action: "allow" },
-        { permission: "bash", pattern: "*", action: "ask" },
-        { permission: "bash", pattern: "git *", action: "allow" },
+        { action: "bash", resource: "*", effect: "allow" },
+        { action: "bash", resource: "*", effect: "ask" },
+        { action: "bash", resource: "git *", effect: "allow" },
       ])
-      expect(PermissionV2.evaluate("bash", "git status", buildAgent.permissions).action).toBe("allow")
-      expect(PermissionV2.evaluate("bash", "bun test", buildAgent.permissions).action).toBe("ask")
+      expect(PermissionV2.evaluate("bash", "git status", buildAgent.permissions).effect).toBe("allow")
+      expect(PermissionV2.evaluate("bash", "bun test", buildAgent.permissions).effect).toBe("ask")
 
       const reviewer = yield* agents.get(AgentV2.ID.make("reviewer"))
       if (!reviewer) throw new Error("expected configured reviewer agent")
@@ -81,8 +81,8 @@ describe("ConfigAgentPlugin.Plugin", () => {
         model: { providerID: "openrouter", id: "openai/gpt-5", variant: "high" },
       })
       expect(reviewer.permissions).toEqual([
-        { permission: "bash", pattern: "*", action: "ask" },
-        { permission: "edit", pattern: "*", action: "deny" },
+        { action: "bash", resource: "*", effect: "ask" },
+        { action: "edit", resource: "*", effect: "deny" },
       ])
       expect(yield* agents.get(AgentV2.ID.make("removed"))).toBeUndefined()
     }),

packages/core/test/config/config.test.ts

@@ -170,8 +170,8 @@ describe("Config", () => {
                 enterprise: { url: "https://share.example.com" },
                 username: "test-user",
                 permissions: [
-                  { permission: "bash", pattern: "*", action: "ask" },
-                  { permission: "bash", pattern: "git status", action: "allow" },
+                  { action: "bash", resource: "*", effect: "ask" },
+                  { action: "bash", resource: "git status", effect: "allow" },
                 ],
                 agents: {
                   reviewer: {
@@ -188,7 +188,7 @@ describe("Config", () => {
                     color: "warning",
                     steps: 12,
                     disabled: false,
-                    permissions: [{ permission: "edit", pattern: "*", action: "deny" }],
+                    permissions: [{ action: "edit", resource: "*", effect: "deny" }],
                   },
                 },
                 snapshots: false,
@@ -254,8 +254,8 @@ describe("Config", () => {
             expect(documents[0]?.info.enterprise).toEqual({ url: "https://share.example.com" })
             expect(documents[0]?.info.username).toBe("test-user")
             expect(documents[0]?.info.permissions).toEqual([
-              { permission: "bash", pattern: "*", action: "ask" },
-              { permission: "bash", pattern: "git status", action: "allow" },
+              { action: "bash", resource: "*", effect: "ask" },
+              { action: "bash", resource: "git status", effect: "allow" },
             ])
             expect(documents[0]?.info.agents?.reviewer).toEqual({
               model: "openrouter/openai/gpt-5",
@@ -271,7 +271,7 @@ describe("Config", () => {
               color: "warning",
               steps: 12,
               disabled: false,
-              permissions: [{ permission: "edit", pattern: "*", action: "deny" }],
+              permissions: [{ action: "edit", resource: "*", effect: "deny" }],
             })
             expect(documents[0]?.info.snapshots).toBe(false)
             expect(documents[0]?.info.watcher).toEqual({ ignore: ["node_modules/**", "dist/**", ".git"] })

packages/core/test/database-migration.test.ts

@@ -4,9 +4,15 @@ import { fileURLToPath } from "url"
 import { SqliteClient } from "@effect/sql-sqlite-bun"
 import { EffectDrizzleSqlite } from "@opencode-ai/effect-drizzle-sqlite"
 import { Effect } from "effect"
-import { sql } from "drizzle-orm"
+import { eq, inArray, sql } from "drizzle-orm"
 import { DatabaseMigration } from "@opencode-ai/core/database/migration"
 import sessionUsageMigration from "@opencode-ai/core/database/migration/20260510033149_session_usage"
+import normalizeStoragePathsMigration from "@opencode-ai/core/database/migration/20260601010001_normalize_storage_paths"
+import { ProjectV2 } from "@opencode-ai/core/project"
+import { ProjectTable } from "@opencode-ai/core/project/sql"
+import { AbsolutePath } from "@opencode-ai/core/schema"
+import { SessionSchema } from "@opencode-ai/core/session/schema"
+import { SessionTable } from "@opencode-ai/core/session/sql"
 import sessionMetadataMigration from "@opencode-ai/core/database/migration/20260511173437_session-metadata"
 import type { SqlClient as SqlClientService } from "effect/unstable/sql/SqlClient"
 
@@ -37,7 +43,7 @@ describe("DatabaseMigration", () => {
         expect(yield* db.get(sql`SELECT name FROM sqlite_master WHERE type = 'table' AND name = 'session'`)).toEqual({
           name: "session",
         })
-        expect(yield* db.get(sql`SELECT count(*) as count FROM migration`)).toEqual({ count: 21 })
+        expect(yield* db.get(sql`SELECT count(*) as count FROM migration`)).toEqual({ count: 24 })
       }),
     )
   })
@@ -71,6 +77,167 @@ describe("DatabaseMigration", () => {
     )
   })
 
+  test("normalizes Windows storage paths and leaves POSIX paths untouched", async () => {
+    await run(
+      Effect.gen(function* () {
+        const db = yield* makeDb
+        yield* db.run(sql`CREATE TABLE project (id text PRIMARY KEY, worktree text NOT NULL, sandboxes text NOT NULL)`)
+        yield* db.run(sql`CREATE TABLE session (id text PRIMARY KEY, directory text NOT NULL, path text)`)
+        // Windows-shaped rows (drive + backslash) must be normalized.
+        yield* db.run(
+          sql`INSERT INTO project (id, worktree, sandboxes) VALUES (${"win"}, ${"C:\\Repo\\Thing"}, ${JSON.stringify([
+            "C:\\Repo\\Thing\\sandbox",
+          ])})`,
+        )
+        yield* db.run(
+          sql`INSERT INTO session (id, directory, path) VALUES (${"win"}, ${"C:\\Repo\\Thing\\packages\\api"}, ${"packages\\api"})`,
+        )
+        // UNC worktrees and their sandboxes must normalize too (not just drive paths).
+        yield* db.run(
+          sql`INSERT INTO project (id, worktree, sandboxes) VALUES (${"unc"}, ${"\\\\server\\share"}, ${JSON.stringify([
+            "\\\\server\\share\\sandbox",
+          ])})`,
+        )
+        // The "/" worktree sentinel and POSIX paths (including a pathological
+        // backslash in a POSIX filename) must survive byte-for-byte.
+        yield* db.run(sql`INSERT INTO project (id, worktree, sandboxes) VALUES (${"global"}, ${"/"}, ${"[]"})`)
+        yield* db.run(
+          sql`INSERT INTO session (id, directory, path) VALUES (${"posix"}, ${"/home/me/we\\ird"}, ${"src\\weird"})`,
+        )
+
+        yield* DatabaseMigration.applyOnly(db, [normalizeStoragePathsMigration])
+
+        expect(yield* db.get(sql`SELECT worktree, sandboxes FROM project WHERE id = 'win'`)).toEqual({
+          worktree: "C:/Repo/Thing",
+          sandboxes: JSON.stringify(["C:/Repo/Thing/sandbox"]),
+        })
+        expect(yield* db.get(sql`SELECT directory, path FROM session WHERE id = 'win'`)).toEqual({
+          directory: "C:/Repo/Thing/packages/api",
+          path: "packages/api",
+        })
+        expect(yield* db.get(sql`SELECT worktree, sandboxes FROM project WHERE id = 'unc'`)).toEqual({
+          worktree: "//server/share",
+          sandboxes: JSON.stringify(["//server/share/sandbox"]),
+        })
+        expect(yield* db.get(sql`SELECT worktree FROM project WHERE id = 'global'`)).toEqual({ worktree: "/" })
+        expect(yield* db.get(sql`SELECT directory, path FROM session WHERE id = 'posix'`)).toEqual({
+          directory: "/home/me/we\\ird",
+          path: "src\\weird",
+        })
+      }),
+    )
+  })
+
+  test("maps native Windows paths through database columns", async () => {
+    if (process.platform !== "win32") return
+    await run(
+      Effect.gen(function* () {
+        const db = yield* makeDb
+        yield* DatabaseMigration.apply(db)
+        const projectID = ProjectV2.ID.make("codec_project")
+        const worktree = AbsolutePath.make("C:\\Repo\\Thing")
+        const sandbox = AbsolutePath.make("C:\\Repo\\Thing\\sandbox")
+        const directory = "C:\\Repo\\Thing\\packages\\api"
+        const sessionID = SessionSchema.ID.make("ses_codec")
+
+        expect(() =>
+          Effect.runSync(
+            db
+              .insert(ProjectTable)
+              .values({
+                id: ProjectV2.ID.make("invalid_path"),
+                worktree: AbsolutePath.make("not-absolute"),
+                sandboxes: [],
+                time_created: 1,
+                time_updated: 1,
+              })
+              .run(),
+          ),
+        ).toThrow()
+
+        yield* db
+          .insert(ProjectTable)
+          .values({
+            id: projectID,
+            worktree,
+            sandboxes: [sandbox],
+            time_created: 1,
+            time_updated: 1,
+          })
+          .run()
+        yield* db
+          .insert(SessionTable)
+          .values({
+            id: sessionID,
+            project_id: projectID,
+            slug: "codec",
+            directory,
+            path: "packages\\api",
+            title: "Codec",
+            version: "test",
+            time_created: 1,
+            time_updated: 1,
+          })
+          .run()
+
+        expect(
+          yield* db.get<{ worktree: string; sandboxes: string }>(
+            sql`SELECT worktree, sandboxes FROM project WHERE id = ${projectID}`,
+          ),
+        ).toEqual({
+          worktree: "C:/Repo/Thing",
+          sandboxes: JSON.stringify(["C:/Repo/Thing/sandbox"]),
+        })
+        expect(
+          yield* db.get<{ directory: string; path: string }>(
+            sql`SELECT directory, path FROM session WHERE id = ${sessionID}`,
+          ),
+        ).toEqual({
+          directory: "C:/Repo/Thing/packages/api",
+          path: "packages/api",
+        })
+
+        const project = yield* db.select().from(ProjectTable).where(eq(ProjectTable.worktree, worktree)).get()
+        const session = yield* db.select().from(SessionTable).where(eq(SessionTable.directory, directory)).get()
+        expect(project?.worktree).toBe(worktree)
+        expect(project?.sandboxes).toEqual([sandbox])
+        expect(session?.directory).toBe(directory)
+        expect(session?.path).toBe("packages/api")
+
+        expect((yield* db.select().from(SessionTable).where(eq(SessionTable.path, "packages\\api")).get())?.id).toBe(
+          sessionID,
+        )
+
+        const moved = AbsolutePath.make("D:\\Moved\\Thing")
+        const updated = yield* db
+          .update(ProjectTable)
+          .set({ worktree: moved, sandboxes: [moved] })
+          .where(eq(ProjectTable.id, projectID))
+          .returning()
+          .get()
+        expect(updated?.worktree).toBe(moved)
+        expect(updated?.sandboxes).toEqual([moved])
+        expect(
+          yield* db.get<{ worktree: string; sandboxes: string }>(
+            sql`SELECT worktree, sandboxes FROM project WHERE id = ${projectID}`,
+          ),
+        ).toEqual({ worktree: "D:/Moved/Thing", sandboxes: JSON.stringify(["D:/Moved/Thing"]) })
+        expect(
+          (yield* db
+            .select()
+            .from(ProjectTable)
+            .where(inArray(ProjectTable.worktree, [moved]))
+            .get())?.id,
+        ).toBe(projectID)
+
+        yield* db.run(sql`UPDATE project SET worktree = ${"not-absolute"} WHERE id = ${projectID}`)
+        expect(() =>
+          Effect.runSync(db.select().from(ProjectTable).where(eq(ProjectTable.id, projectID)).get()),
+        ).toThrow()
+      }),
+    )
+  })
+
   test("imports existing drizzle migration state", async () => {
     await run(
       Effect.gen(function* () {

packages/core/test/permission.test.ts

@@ -0,0 +1,174 @@
+import { describe, expect } from "bun:test"
+import { Deferred, Effect, Fiber, Layer } from "effect"
+import { AgentV2 } from "@opencode-ai/core/agent"
+import { Database } from "@opencode-ai/core/database/database"
+import { EventV2 } from "@opencode-ai/core/event"
+import { Location } from "@opencode-ai/core/location"
+import { PermissionV2 } from "@opencode-ai/core/permission"
+import { PermissionTable } from "@opencode-ai/core/permission/sql"
+import { PermissionSaved } from "@opencode-ai/core/permission/saved"
+import { Project } from "@opencode-ai/core/project"
+import { ProjectTable } from "@opencode-ai/core/project/sql"
+import { AbsolutePath } from "@opencode-ai/core/schema"
+import { SessionV2 } from "@opencode-ai/core/session"
+import { SessionTable } from "@opencode-ai/core/session/sql"
+import { eq } from "drizzle-orm"
+import { location } from "./fixture/location"
+import { testEffect } from "./lib/effect"
+
+const database = Database.layerFromPath(":memory:")
+const current = Layer.succeed(
+  Location.Service,
+  Location.Service.of(location({ directory: AbsolutePath.make("/project") })),
+)
+const events = EventV2.layer.pipe(Layer.provide(database))
+const sessions = SessionV2.layer.pipe(Layer.provide(database))
+const saved = PermissionSaved.layer.pipe(Layer.provide(database))
+const layer = PermissionV2.locationLayer.pipe(
+  Layer.provideMerge(database),
+  Layer.provideMerge(events),
+  Layer.provideMerge(current),
+  Layer.provideMerge(sessions),
+  Layer.provideMerge(saved),
+)
+const it = testEffect(layer)
+
+function setup(rules: PermissionV2.Ruleset = []) {
+  return Effect.gen(function* () {
+    const { db } = yield* Database.Service
+    yield* db
+      .insert(ProjectTable)
+      .values({ id: Project.ID.global, worktree: AbsolutePath.make("/project"), sandboxes: [] })
+      .onConflictDoNothing()
+      .run()
+      .pipe(Effect.orDie)
+    yield* db
+      .insert(SessionTable)
+      .values({
+        id: SessionV2.ID.make("ses_test"),
+        project_id: Project.ID.global,
+        slug: "test",
+        directory: "/project",
+        title: "test",
+        version: "test",
+        agent: "test",
+      })
+      .onConflictDoNothing()
+      .run()
+      .pipe(Effect.orDie)
+    yield* setRules(rules)
+  })
+}
+
+function setRules(rules: PermissionV2.Ruleset) {
+  return Effect.gen(function* () {
+    const agents = yield* AgentV2.Service
+    const update = yield* agents.transform()
+    yield* update((editor) =>
+      editor.update(AgentV2.ID.make("test"), (agent) => {
+        agent.permissions = [...rules]
+      }),
+    )
+  })
+}
+
+function assertion(input: Partial<PermissionV2.AssertInput> = {}) {
+  return {
+    id: PermissionV2.ID.create("per_test"),
+    sessionID: SessionV2.ID.make("ses_test"),
+    action: "read",
+    resources: ["src/index.ts"],
+    ...input,
+  } satisfies PermissionV2.AssertInput
+}
+
+function waitForRequest() {
+  return Effect.gen(function* () {
+    const service = yield* PermissionV2.Service
+    const events = yield* EventV2.Service
+    const asked = yield* Deferred.make<PermissionV2.Request>()
+    const unsubscribe = yield* events.listen((event) =>
+      event.type === PermissionV2.Event.Asked.type
+        ? Deferred.succeed(asked, event.data as PermissionV2.Request).pipe(Effect.asVoid)
+        : Effect.void,
+    )
+    yield* Effect.addFinalizer(() => unsubscribe)
+    const fiber = yield* service.assert(assertion()).pipe(Effect.forkScoped)
+    const request = yield* Deferred.await(asked)
+    return { service, fiber, request }
+  })
+}
+
+describe("PermissionV2", () => {
+  it.effect("returns the evaluated effect and only queues prompts", () =>
+    Effect.gen(function* () {
+      yield* setup([{ action: "read", resource: "*", effect: "allow" }])
+      const service = yield* PermissionV2.Service
+      expect(yield* service.ask(assertion())).toEqual({ id: PermissionV2.ID.create("per_test"), effect: "allow" })
+      expect(yield* service.list()).toEqual([])
+      yield* setRules([{ action: "read", resource: "*", effect: "deny" }])
+      expect(yield* service.ask(assertion())).toEqual({ id: PermissionV2.ID.create("per_test"), effect: "deny" })
+      expect(yield* service.list()).toEqual([])
+      yield* setRules([])
+      expect(yield* service.ask(assertion())).toEqual({ id: PermissionV2.ID.create("per_test"), effect: "ask" })
+      expect(yield* service.get(PermissionV2.ID.create("per_test"))).toBeDefined()
+    }),
+  )
+
+  it.effect("allows and denies from explicit rules without asking", () =>
+    Effect.gen(function* () {
+      yield* setup([{ action: "read", resource: "*", effect: "allow" }])
+      const service = yield* PermissionV2.Service
+      yield* service.assert(assertion())
+      yield* setRules([{ action: "read", resource: "*", effect: "deny" }])
+      const denied = yield* service.assert(assertion()).pipe(Effect.flip)
+      expect(denied).toBeInstanceOf(PermissionV2.DeniedError)
+      expect(yield* service.list()).toEqual([])
+    }),
+  )
+
+  it.effect("resolves an asked permission once", () =>
+    Effect.gen(function* () {
+      yield* setup()
+      const { service, fiber, request } = yield* waitForRequest()
+      expect(yield* service.list()).toEqual([request])
+      expect(yield* service.forSession(request.sessionID)).toEqual([request])
+      expect(yield* service.forSession(SessionV2.ID.make("ses_other"))).toEqual([])
+      expect(yield* service.get(request.id)).toEqual(request)
+      yield* service.reply({ requestID: request.id, reply: "once" })
+      yield* Fiber.join(fiber)
+      expect(yield* service.list()).toEqual([])
+      expect(yield* service.get(request.id)).toBeUndefined()
+    }),
+  )
+
+  it.effect("stores and removes saved resources for a project", () =>
+    Effect.gen(function* () {
+      yield* setup()
+      const service = yield* PermissionV2.Service
+      const asked = yield* Deferred.make<PermissionV2.Request>()
+      const events = yield* EventV2.Service
+      const unsubscribe = yield* events.listen((event) =>
+        event.type === PermissionV2.Event.Asked.type
+          ? Deferred.succeed(asked, event.data as PermissionV2.Request).pipe(Effect.asVoid)
+          : Effect.void,
+      )
+      yield* Effect.addFinalizer(() => unsubscribe)
+      const fiber = yield* service.assert(assertion({ save: ["src/*"] })).pipe(Effect.forkScoped)
+      const request = yield* Deferred.await(asked)
+      yield* service.reply({ requestID: request.id, reply: "always" })
+      yield* Fiber.join(fiber)
+
+      const { db } = yield* Database.Service
+      expect(
+        yield* db.select().from(PermissionTable).where(eq(PermissionTable.project_id, Project.ID.global)).all(),
+      ).toMatchObject([{ action: "read", resource: "src/*" }])
+      const saved = yield* PermissionSaved.Service
+      const id = (yield* saved.list())[0]!.id
+      expect(yield* saved.list()).toEqual([{ id, projectID: Project.ID.global, action: "read", resource: "src/*" }])
+      yield* service.assert(assertion({ id: PermissionV2.ID.create("per_next"), resources: ["src/next.ts"] }))
+      yield* saved.remove(id)
+      expect(yield* saved.list()).toEqual([])
+    }),
+  )
+})

packages/desktop/src/main/apps.ts

@@ -1,7 +1,8 @@
-import { execFile, execFileSync } from "node:child_process"
+import { execFile } from "node:child_process"
 import { access, readFile, readdir } from "node:fs/promises"
 import { dirname, extname, join } from "node:path"
 import util from "node:util"
+import { resolveWslHome, runWslInDistro } from "./wsl"
 
 const execFilePromise = util.promisify(execFile)
 
@@ -21,20 +22,44 @@ export function resolveAppPath(appName: string) {
   return resolveWindowsAppPath(appName)
 }
 
-export function wslPath(path: string, mode: "windows" | "linux" | null): string {
+// Parses `\\wsl$\<distro>\...` and `\\wsl.localhost\<distro>\...` UNC paths that
+// point *into* a WSL distro's rootfs. `wslpath -u` cannot handle these reliably:
+// backslashes get shell-collapsed when passed through `wsl.exe`, turning
+// `\\wsl.localhost\Debian\home\luke` into `/mnt/c/wsl.localhostDebianhomeluke`,
+// which is a valid-looking path that wedges opencode on DrvFs stat calls.
+function parseWslUncPath(value: string): { distro: string; subpath: string } | null {
+  // Normalise separators; both `\\` and `//` prefixes mean UNC.
+  const normalised = value.replace(/\\/g, "/").replace(/^\/+/, "//")
+  const match = /^\/\/(wsl\$|wsl\.localhost)\/([^/]+)(?:\/(.*))?$/i.exec(normalised)
+  if (!match) return null
+  const distro = match[2]
+  const subpath = match[3] ?? ""
+  return { distro, subpath }
+}
+
+export async function wslPath(path: string, mode: "windows" | "linux" | null, distro?: string | null): Promise<string> {
   if (process.platform !== "win32") return path
 
+  // `\\wsl$\<distro>\...` / `\\wsl.localhost\<distro>\...` -> `/<subpath>` in
+  // the target distro. Do the conversion in-process rather than shelling out
+  // to `wslpath -u`, which mangles backslashes via wsl.exe's command-line
+  // joiner. If the requested distro differs from the UNC distro, we still
+  // translate literally — callers are responsible for only picking paths
+  // inside the active distro.
+  if (mode === "linux") {
+    const unc = parseWslUncPath(path)
+    if (unc) return `/${unc.subpath}`
+  }
+
   const flag = mode === "windows" ? "-w" : "-u"
   try {
-    if (path.startsWith("~")) {
-      const suffix = path.slice(1)
-      const cmd = `wslpath ${flag} "$HOME${suffix.replace(/"/g, '\\"')}"`
-      const output = execFileSync("wsl", ["-e", "sh", "-lc", cmd])
-      return output.toString().trim()
+    const resolved = path.startsWith("~") ? `${await resolveWslHome(distro)}${path.slice(1)}` : path
+    const input = mode === "linux" ? resolved.replace(/\\/g, "/") : resolved
+    const output = await runWslInDistro(["wslpath", flag, input], distro)
+    if (output.code !== 0) {
+      throw new Error(output.stderr || output.stdout || `wslpath exited with code ${output.code}`)
     }
-
-    const output = execFileSync("wsl", ["-e", "wslpath", flag, path])
-    return output.toString().trim()
+    return output.stdout.trim()
   } catch (error) {
     throw new Error(`Failed to run wslpath: ${String(error)}`, { cause: error })
   }

packages/desktop/src/main/constants.ts

@@ -6,6 +6,7 @@ export const CHANNEL: Channel = raw === "dev" || raw === "beta" || raw === "prod
 
 export const SETTINGS_STORE = "opencode.settings"
 export const DEFAULT_SERVER_URL_KEY = "defaultServerUrl"
+export const WSL_SERVERS_KEY = "wslServers"
 export const WSL_ENABLED_KEY = "wslEnabled"
 export const PINCH_ZOOM_ENABLED_KEY = "pinchZoomEnabled"
 export const UPDATER_ENABLED = app.isPackaged && CHANNEL !== "dev"

packages/desktop/src/main/index.ts

@@ -9,9 +9,10 @@ import { getCACertificates, setDefaultCACertificates } from "node:tls"
 import type { Event } from "electron"
 import { app, BrowserWindow } from "electron"
 
+import { Deferred, Effect, Fiber } from "effect"
 import contextMenu from "electron-context-menu"
 
-import type { InitStep, ServerReadyData, SqliteMigrationProgress, WslConfig } from "../preload/types"
+import type { InitStep, ServerReadyData, SqliteMigrationProgress } from "../preload/types"
 import { checkAppExists, resolveAppPath, wslPath } from "./apps"
 import { CHANNEL, UPDATER_ENABLED } from "./constants"
 import { registerIpcHandlers, sendDeepLinks, sendMenuCommand, sendSqliteMigrationProgress } from "./ipc"
@@ -20,13 +21,13 @@ import { parseMarkdown } from "./markdown"
 import { createMenu } from "./menu"
 import {
   getDefaultServerUrl,
-  getWslConfig,
   preferAppEnv,
   setDefaultServerUrl,
-  setWslConfig,
   spawnLocalServer,
+  spawnWslSidecar,
   type SidecarListener,
 } from "./server"
+import { checkUpdate, checkForUpdates, installUpdate, setupAutoUpdater } from "./updater"
 import {
   createLoadingWindow,
   createMainWindow,
@@ -35,9 +36,8 @@ import {
   setBackgroundColor,
   setDockIcon,
 } from "./windows"
+import { createWslServersController } from "./wsl-servers"
 import { migrate } from "./migrate"
-import { checkUpdate, checkForUpdates, installUpdate, setupAutoUpdater } from "./updater"
-import { Deferred, Effect, Fiber } from "effect"
 
 const APP_NAMES: Record<string, string> = {
   dev: "OpenCode Dev",
@@ -145,6 +145,30 @@ const main = Effect.gen(function* () {
   logger = initLogging()
   initCrashReporter()
 
+  const wslServers = createWslServersController(
+    app.getVersion(),
+    async (distro) => {
+      logger.log("spawning wsl sidecar", { distro })
+      return spawnWslSidecar(distro, {
+        onLine: (line) => logger.log("wsl sidecar", { distro, stream: line.stream, text: line.text }),
+      })
+    },
+    {
+      log: (message, meta) => logger.log(message, meta),
+      error: (message, meta) => logger.error(message, meta),
+    },
+  )
+  const stopSidecars = async () => {
+    await killSidecar()
+    wslServers.stopAll()
+  }
+  const relaunch = () => {
+    void stopSidecars().finally(() => {
+      app.relaunch()
+      app.exit(0)
+    })
+  }
+
   try {
     setDefaultCACertificates([...new Set([...getCACertificates("default"), ...getCACertificates("system")])])
   } catch (error) {
@@ -190,11 +214,11 @@ const main = Effect.gen(function* () {
   })
 
   app.on("before-quit", () => {
-    void killSidecar()
+    void stopSidecars()
   })
 
   app.on("will-quit", () => {
-    void killSidecar()
+    void stopSidecars()
   })
 
   app.on("child-process-gone", (_event, details) => {
@@ -214,7 +238,7 @@ const main = Effect.gen(function* () {
 
   for (const signal of ["SIGINT", "SIGTERM"] as const) {
     process.on(signal, () => {
-      void killSidecar().finally(() => app.exit(0))
+      void stopSidecars().finally(() => app.exit(0))
     })
   }
 
@@ -223,6 +247,7 @@ const main = Effect.gen(function* () {
 
   registerIpcHandlers({
     killSidecar: () => killSidecar(),
+    relaunch,
     awaitInitialization: Effect.fnUntraced(
       function* (sendStep) {
         sendStep(initStep)
@@ -239,22 +264,33 @@ const main = Effect.gen(function* () {
       },
       (e) => Effect.runPromise(e),
     ),
+    getWslServersState: () => wslServers.getState(),
+    onWslServersEvent: (listener) => wslServers.subscribe(listener),
+    wslServersProbeRuntime: () => wslServers.probeRuntime(),
+    wslServersRefreshDistros: () => wslServers.refreshDistros(),
+    wslServersInstallWsl: () => wslServers.installWsl(),
+    wslServersInstallDistro: (name) => wslServers.installDistro(name),
+    wslServersProbeDistro: (name) => wslServers.probeDistro(name),
+    wslServersProbeOpencode: (name) => wslServers.probeOpencode(name),
+    wslServersInstallOpencode: (name) => wslServers.installOpencode(name),
+    wslServersOpenTerminal: (name) => wslServers.openTerminal(name),
+    wslServersAddServer: (distro) => wslServers.addServer(distro),
+    wslServersRemoveServer: (id) => wslServers.removeServer(id),
+    wslServersStartServer: (id) => wslServers.startServer(id),
     getWindowConfig: () => ({ updaterEnabled: UPDATER_ENABLED }),
     consumeInitialDeepLinks: () => pendingDeepLinks.splice(0),
     getDefaultServerUrl: () => getDefaultServerUrl(),
     setDefaultServerUrl: (url) => setDefaultServerUrl(url),
-    getWslConfig: () => Promise.resolve(getWslConfig()),
-    setWslConfig: (config: WslConfig) => setWslConfig(config),
     getDisplayBackend: async () => null,
     setDisplayBackend: async () => undefined,
     parseMarkdown: async (markdown) => parseMarkdown(markdown),
     checkAppExists: (appName) => checkAppExists(appName),
-    wslPath: async (path, mode) => wslPath(path, mode),
+    wslPath: async (path, mode, distro) => wslPath(path, mode, distro),
     resolveAppPath: async (appName) => resolveAppPath(appName),
     loadingWindowComplete: () => Deferred.doneUnsafe(loadingComplete, Effect.void),
-    runUpdater: async (alertOnFail) => checkForUpdates(alertOnFail, killSidecar),
+    runUpdater: async (alertOnFail) => checkForUpdates(alertOnFail, stopSidecars),
     checkUpdate: async () => checkUpdate(),
-    installUpdate: async () => installUpdate(killSidecar),
+    installUpdate: async () => installUpdate(stopSidecars),
     setBackgroundColor: (color) => setBackgroundColor(color),
     exportDebugLogs: () => exportDebugLogs(),
     recordFatalRendererError: (error) => writeLog("renderer", "fatal renderer error", { ...error }, "error"),
@@ -341,6 +377,10 @@ const main = Effect.gen(function* () {
       password,
     })
 
+    void wslServers
+      .initialize({ defaultServer: getDefaultServerUrl() })
+      .catch((error) => logger.error("wsl server initialization failed", error))
+
     yield* Effect.promise(() => health.wait).pipe(
       Effect.timeout("30 seconds"),
       Effect.catch((e) =>
@@ -379,7 +419,7 @@ const main = Effect.gen(function* () {
         if (win) sendMenuCommand(win, id)
       },
       checkForUpdates: () => {
-        void checkForUpdates(true, killSidecar)
+        void checkForUpdates(true, stopSidecars)
       },
       relaunch: () => {
         void killSidecar().finally(() => {

packages/desktop/src/main/ipc.ts

@@ -10,7 +10,9 @@ import type {
   SqliteMigrationProgress,
   TitlebarTheme,
   WindowConfig,
-  WslConfig,
+  WslServerConfig,
+  WslServersEvent,
+  WslServersState,
 } from "../preload/types"
 import { runDesktopMenuAction } from "./desktop-menu-actions"
 import { getStore } from "./store"
@@ -23,18 +25,30 @@ const pickerFilters = (ext?: string[]) => {
 
 type Deps = {
   killSidecar: () => Promise<void> | void
+  relaunch: () => void
   awaitInitialization: (sendStep: (step: InitStep) => void) => Promise<ServerReadyData>
+  getWslServersState: () => Promise<WslServersState> | WslServersState
+  onWslServersEvent: (listener: (event: WslServersEvent) => void) => () => void
+  wslServersProbeRuntime: () => Promise<void> | void
+  wslServersRefreshDistros: () => Promise<void> | void
+  wslServersInstallWsl: () => Promise<void> | void
+  wslServersInstallDistro: (name: string) => Promise<void> | void
+  wslServersProbeDistro: (name: string) => Promise<void> | void
+  wslServersProbeOpencode: (name: string) => Promise<void> | void
+  wslServersInstallOpencode: (name: string) => Promise<void> | void
+  wslServersOpenTerminal: (name: string) => Promise<void> | void
+  wslServersAddServer: (distro: string) => Promise<WslServerConfig> | WslServerConfig
+  wslServersRemoveServer: (id: string) => Promise<void> | void
+  wslServersStartServer: (id: string) => Promise<void> | void
   getWindowConfig: () => Promise<WindowConfig> | WindowConfig
   consumeInitialDeepLinks: () => Promise<string[]> | string[]
   getDefaultServerUrl: () => Promise<string | null> | string | null
   setDefaultServerUrl: (url: string | null) => Promise<void> | void
-  getWslConfig: () => Promise<WslConfig>
-  setWslConfig: (config: WslConfig) => Promise<void> | void
   getDisplayBackend: () => Promise<string | null>
   setDisplayBackend: (backend: string | null) => Promise<void> | void
   parseMarkdown: (markdown: string) => Promise<string> | string
   checkAppExists: (appName: string) => Promise<boolean> | boolean
-  wslPath: (path: string, mode: "windows" | "linux" | null) => Promise<string>
+  wslPath: (path: string, mode: "windows" | "linux" | null, distro?: string | null) => Promise<string>
   resolveAppPath: (appName: string) => Promise<string | null>
   loadingWindowComplete: () => void
   runUpdater: (alertOnFail: boolean) => Promise<void> | void
@@ -46,27 +60,89 @@ type Deps = {
 }
 
 export function registerIpcHandlers(deps: Deps) {
+  const requireString = (name: string, value: unknown) => {
+    if (typeof value === "string" && value.length > 0) return value
+    throw new Error(`Invalid ${name}`)
+  }
+
+  const wslSubscriptions = new Map<number, () => void>()
+  const unsubscribeWsl = (id: number) => {
+    const off = wslSubscriptions.get(id)
+    if (!off) return
+    off()
+    wslSubscriptions.delete(id)
+  }
+
+  app.once("will-quit", () => {
+    for (const off of wslSubscriptions.values()) off()
+    wslSubscriptions.clear()
+  })
+
   ipcMain.handle("kill-sidecar", () => deps.killSidecar())
   ipcMain.handle("await-initialization", (event: IpcMainInvokeEvent) => {
     const send = (step: InitStep) => event.sender.send("init-step", step)
     return deps.awaitInitialization(send)
   })
+  ipcMain.handle("wsl-servers-subscribe", (event) => {
+    const id = event.sender.id
+    if (wslSubscriptions.has(id)) return
+    wslSubscriptions.set(
+      id,
+      deps.onWslServersEvent((payload) => {
+        if (event.sender.isDestroyed()) {
+          unsubscribeWsl(id)
+          return
+        }
+        event.sender.send("wsl-servers-event", payload)
+      }),
+    )
+    event.sender.once("destroyed", () => unsubscribeWsl(id))
+  })
+  ipcMain.handle("wsl-servers-unsubscribe", (event) => unsubscribeWsl(event.sender.id))
+  ipcMain.handle("wsl-servers-get-state", () => deps.getWslServersState())
+  ipcMain.handle("wsl-servers-probe-runtime", () => deps.wslServersProbeRuntime())
+  ipcMain.handle("wsl-servers-refresh-distros", () => deps.wslServersRefreshDistros())
+  ipcMain.handle("wsl-servers-install-wsl", () => deps.wslServersInstallWsl())
+  ipcMain.handle("wsl-servers-install-distro", (_event: IpcMainInvokeEvent, name: string) =>
+    deps.wslServersInstallDistro(requireString("distro", name)),
+  )
+  ipcMain.handle("wsl-servers-probe-distro", (_event: IpcMainInvokeEvent, name: string) =>
+    deps.wslServersProbeDistro(requireString("distro", name)),
+  )
+  ipcMain.handle("wsl-servers-probe-opencode", (_event: IpcMainInvokeEvent, name: string) =>
+    deps.wslServersProbeOpencode(requireString("distro", name)),
+  )
+  ipcMain.handle("wsl-servers-install-opencode", (_event: IpcMainInvokeEvent, name: string) =>
+    deps.wslServersInstallOpencode(requireString("distro", name)),
+  )
+  ipcMain.handle("wsl-servers-open-terminal", (_event: IpcMainInvokeEvent, name: string) =>
+    deps.wslServersOpenTerminal(requireString("distro", name)),
+  )
+  ipcMain.handle("wsl-servers-add", (_event: IpcMainInvokeEvent, distro: string) =>
+    deps.wslServersAddServer(requireString("distro", distro)),
+  )
+  ipcMain.handle("wsl-servers-remove", (_event: IpcMainInvokeEvent, id: string) =>
+    deps.wslServersRemoveServer(requireString("server id", id)),
+  )
+  ipcMain.handle("wsl-servers-start", (_event: IpcMainInvokeEvent, id: string) =>
+    deps.wslServersStartServer(requireString("server id", id)),
+  )
   ipcMain.handle("get-window-config", () => deps.getWindowConfig())
   ipcMain.handle("consume-initial-deep-links", () => deps.consumeInitialDeepLinks())
   ipcMain.handle("get-default-server-url", () => deps.getDefaultServerUrl())
   ipcMain.handle("set-default-server-url", (_event: IpcMainInvokeEvent, url: string | null) =>
     deps.setDefaultServerUrl(url),
   )
-  ipcMain.handle("get-wsl-config", () => deps.getWslConfig())
-  ipcMain.handle("set-wsl-config", (_event: IpcMainInvokeEvent, config: WslConfig) => deps.setWslConfig(config))
   ipcMain.handle("get-display-backend", () => deps.getDisplayBackend())
   ipcMain.handle("set-display-backend", (_event: IpcMainInvokeEvent, backend: string | null) =>
     deps.setDisplayBackend(backend),
   )
   ipcMain.handle("parse-markdown", (_event: IpcMainInvokeEvent, markdown: string) => deps.parseMarkdown(markdown))
   ipcMain.handle("check-app-exists", (_event: IpcMainInvokeEvent, appName: string) => deps.checkAppExists(appName))
-  ipcMain.handle("wsl-path", (_event: IpcMainInvokeEvent, path: string, mode: "windows" | "linux" | null) =>
-    deps.wslPath(path, mode),
+  ipcMain.handle(
+    "wsl-path",
+    (_event: IpcMainInvokeEvent, path: string, mode: "windows" | "linux" | null, distro?: string | null) =>
+      deps.wslPath(path, mode, distro),
   )
   ipcMain.handle("resolve-app-path", (_event: IpcMainInvokeEvent, appName: string) => deps.resolveAppPath(appName))
   ipcMain.on("loading-window-complete", () => deps.loadingWindowComplete())
@@ -191,8 +267,7 @@ export function registerIpcHandlers(deps: Deps) {
   })
 
   ipcMain.on("relaunch", () => {
-    app.relaunch()
-    app.exit(0)
+    deps.relaunch()
   })
 
   ipcMain.handle("get-zoom-factor", (event: IpcMainInvokeEvent) => event.sender.getZoomFactor())

packages/desktop/src/main/server.ts

@@ -1,13 +1,15 @@
+import { spawn } from "node:child_process"
+import { randomUUID } from "node:crypto"
+import { createServer } from "node:net"
 import { dirname, join } from "node:path"
 import { fileURLToPath } from "node:url"
 import { app, utilityProcess } from "electron"
 import type { Details } from "electron"
-import { DEFAULT_SERVER_URL_KEY, WSL_ENABLED_KEY } from "./constants"
+import type { SqliteMigrationProgress } from "../preload/types"
+import { DEFAULT_SERVER_URL_KEY } from "./constants"
 import { getUserShell, loadShellEnv } from "./shell-env"
 import { getStore } from "./store"
-import type { SqliteMigrationProgress } from "../preload/types"
-
-export type WslConfig = { enabled: boolean }
+import { type WslCommandLine, resolveWslOpencode, shellEscape, wslArgs } from "./wsl"
 
 export type HealthCheck = { wait: Promise<void> }
 
@@ -46,15 +48,6 @@ export function setDefaultServerUrl(url: string | null) {
   getStore().delete(DEFAULT_SERVER_URL_KEY)
 }
 
-export function getWslConfig(): WslConfig {
-  const value = getStore().get(WSL_ENABLED_KEY)
-  return { enabled: typeof value === "boolean" ? value : false }
-}
-
-export function setWslConfig(config: WslConfig) {
-  getStore().set(WSL_ENABLED_KEY, config.enabled)
-}
-
 export function preferAppEnv(userDataPath: string) {
   const shell = process.platform === "win32" ? null : getUserShell()
   Object.assign(process.env, {
@@ -201,6 +194,133 @@ export async function spawnLocalServer(
   }
 }
 
+export type WslSidecar = {
+  listener: { stop: () => void; onExit: (cb: (code: number | null, signal: NodeJS.Signals | null) => void) => void }
+  url: string
+  username: string | null
+  password: string
+}
+
+export async function spawnWslSidecar(
+  distro: string,
+  opts: { onLine?: (line: WslCommandLine) => void; healthTimeoutMs?: number } = {},
+): Promise<WslSidecar> {
+  // Do not pass --user here: the sidecar should inherit the distro's
+  // default user so config, auth, git, ssh, and file ownership match the
+  // user's normal WSL environment. If that default user is root, WSL will
+  // choose root itself.
+  const opencode = await resolveWslOpencode(distro)
+  if (!opencode) throw new Error(`OpenCode is not installed in ${distro}`)
+
+  const port = await allocatePort()
+  const password = randomUUID()
+  const username = "opencode"
+  const logLevel = app.isPackaged ? "WARN" : "INFO"
+
+  const script = [
+    "set -euo pipefail",
+    // wsl.exe inherits the Windows-side cwd (e.g. C:\Users\Lukem) and maps it
+    // to the distro as /mnt/c/Users/Lukem — a DrvFs/9p path. opencode's
+    // instance middleware falls back to `process.cwd()` when a request
+    // arrives without a `directory=` query or `x-opencode-directory` header
+    // (see opencode server.ts InstanceMiddleware), and then calls
+    // `realpathSync(process.cwd())` synchronously on the main thread. A
+    // statx against a 9p path can wedge the whole event loop in kernel
+    // uninterruptible sleep, freezing the accept loop. Move cwd to the
+    // user's native Linux home so the fallback can't land on DrvFs.
+    'cd "$HOME" || cd /',
+    // wsl.exe by default splices the Windows %PATH% into the distro's $PATH
+    // via the interop layer (every `/mnt/c/Program Files/...` entry). Anything
+    // the sidecar spawns — PTY login shells, plugin helpers, etc. — then
+    // inherits it, which means `which pwsh.exe` resolves to the Windows
+    // PowerShell binary and bash-l profiles that end with
+    //   eval "$(oh-my-posh init bash)"   (or similar)
+    // silently run Windows pwsh for prompt rendering, whose banner
+    // ("Loading personal and system profiles took Xms.") then shows up in
+    // opencode's terminal pane. We want a clean, Linux-only environment in
+    // the sidecar, so filter every /mnt/* segment out of PATH and clear
+    // WSLENV so no further Windows vars leak in. Users who really need
+    // Windows binaries in the sidecar can invoke them by absolute path.
+    'PATH=$(awk -v RS=: -v ORS=: \'$0 !~ /^\\/mnt\\//\' <<<"$PATH" | sed "s/:$//")',
+    "export PATH",
+    "export WSLENV=",
+    // WSL sidecars often target /mnt/* worktrees. Keep the desktop-only
+    // watcher/discovery features off there because DrvFs/9p stalls can wedge
+    // the server process after it starts listening.
+    "export OPENCODE_EXPERIMENTAL_DISABLE_FILEWATCHER=true",
+    "export OPENCODE_CLIENT=desktop",
+    `export OPENCODE_SERVER_USERNAME=${shellEscape(username)}`,
+    `export OPENCODE_SERVER_PASSWORD=${shellEscape(password)}`,
+    'export XDG_STATE_HOME="$HOME/.local/state"',
+    `exec ${shellEscape(opencode)} --print-logs --log-level ${logLevel} serve --hostname 0.0.0.0 --port ${port}`,
+  ].join("\n")
+
+  const child = spawn("wsl", wslArgs(["bash", "-se"], distro), {
+    stdio: ["pipe", "pipe", "pipe"],
+    windowsHide: true,
+  })
+  child.stdin.end(script)
+
+  let settled = false
+  const recentOutput: string[] = []
+  const emit = (line: WslCommandLine) => {
+    if (settled || !line.text.trim()) return
+    recentOutput.push(`[${line.stream}] ${line.text}`)
+    if (recentOutput.length > 12) recentOutput.shift()
+    opts.onLine?.(line)
+  }
+
+  forwardLines(child.stdout, "stdout", emit)
+  forwardLines(child.stderr, "stderr", emit)
+
+  const exit = new Promise<never>((_, reject) => {
+    child.once("error", reject)
+    child.once("exit", (code, signal) => {
+      reject(new Error(startupFailure(code, signal, recentOutput)))
+    })
+  })
+
+  const url = `http://127.0.0.1:${port}`
+  const healthPromise = (async () => {
+    while (true) {
+      await new Promise((resolve) => setTimeout(resolve, 100))
+      if (await checkHealth(url, password)) return
+    }
+  })()
+
+  const timeoutMs = opts.healthTimeoutMs ?? 30_000
+  const timeout = new Promise<never>((_, reject) => {
+    const id = setTimeout(
+      () => reject(new Error(`Sidecar for ${distro} health check timed out after ${timeoutMs}ms`)),
+      timeoutMs,
+    )
+    void healthPromise.finally(() => clearTimeout(id))
+  })
+
+  try {
+    await Promise.race([healthPromise, exit, timeout])
+  } catch (error) {
+    child.kill()
+    throw error
+  } finally {
+    settled = true
+  }
+
+  return {
+    listener: {
+      stop() {
+        child.kill()
+      },
+      onExit(cb) {
+        child.once("exit", cb)
+      },
+    },
+    url,
+    username,
+    password,
+  }
+}
+
 export async function checkHealth(url: string, password?: string | null): Promise<boolean> {
   let healthUrl: URL
   try {
@@ -227,6 +347,46 @@ export async function checkHealth(url: string, password?: string | null): Promis
   }
 }
 
+function allocatePort() {
+  return new Promise<number>((resolve, reject) => {
+    const server = createServer()
+    server.on("error", reject)
+    server.listen(0, "127.0.0.1", () => {
+      const address = server.address()
+      if (typeof address !== "object" || !address) {
+        server.close()
+        reject(new Error("Failed to get port"))
+        return
+      }
+      const port = address.port
+      server.close(() => resolve(port))
+    })
+  })
+}
+
+function forwardLines(
+  stream: NodeJS.ReadableStream,
+  source: WslCommandLine["stream"],
+  onLine: (line: WslCommandLine) => void,
+) {
+  let pending = ""
+  stream.setEncoding("utf8")
+  stream.on("data", (chunk: string) => {
+    pending += chunk
+    const lines = pending.split(/\r?\n/g)
+    pending = lines.pop() ?? ""
+    for (const line of lines) onLine({ stream: source, text: line })
+  })
+  stream.on("end", () => {
+    if (pending) onLine({ stream: source, text: pending })
+  })
+}
+
+function startupFailure(code: number | null, signal: NodeJS.Signals | null, recentOutput: string[]) {
+  const suffix = recentOutput.length ? `\n${recentOutput.join("\n")}` : ""
+  return `WSL server exited before becoming healthy (code=${code ?? "null"} signal=${signal ?? "null"})${suffix}`
+}
+
 function createSidecarEnv(): Record<string, string> {
   const env = Object.fromEntries(
     Object.entries(process.env).flatMap(([key, value]) => (value === undefined ? [] : [[key, String(value)]])),

packages/desktop/src/main/wsl-servers.ts

@@ -0,0 +1,447 @@
+import type {
+  WslDistroProbe,
+  WslInstalledDistro,
+  WslJob,
+  WslOnlineDistro,
+  WslOpencodeCheck,
+  WslRuntimeCheck,
+  WslServerConfig,
+  WslServerItem,
+  WslServerRuntime,
+  WslServersEvent,
+  WslServersState,
+} from "../preload/types"
+import { WSL_SERVERS_KEY } from "./constants"
+import { getStore } from "./store"
+import {
+  installWslDistro,
+  installWslOpencode,
+  installWslRuntimeElevated,
+  listInstalledWslDistros,
+  listOnlineWslDistros,
+  openWslTerminal,
+  probeWslDistro,
+  probeWslRuntime,
+  readWslCommandVersion,
+  resolveWslOpencode,
+  summarize,
+  upgradeWslOpencode,
+  wslNeedsRestart,
+} from "./wsl"
+
+type RunningSidecar = {
+  listener: { stop: () => void; onExit: (cb: (code: number | null, signal: NodeJS.Signals | null) => void) => void }
+  url: string
+  username: string | null
+  password: string
+}
+
+type SpawnSidecar = (distro: string) => Promise<RunningSidecar>
+
+type ControllerLogger = {
+  log: (message: string, meta?: unknown) => void
+  error: (message: string, meta?: unknown) => void
+}
+
+export type WslServersController = ReturnType<typeof createWslServersController>
+
+export function wslServerIdForDistro(distro: string) {
+  return `wsl:${distro}`
+}
+
+export function createWslServersController(appVersion: string, spawnSidecar: SpawnSidecar, logger?: ControllerLogger) {
+  let state: WslServersState = initialState()
+  const listeners = new Set<(event: WslServersEvent) => void>()
+  const sidecars = new Map<string, RunningSidecar>()
+  const startAttempts = new Map<string, number>()
+  let jobAbort: AbortController | undefined
+
+  const emit = () => {
+    for (const listener of listeners) listener({ type: "state", state })
+  }
+
+  const setState = (next: Partial<WslServersState>) => {
+    state = { ...state, ...next }
+    emit()
+  }
+
+  const persistServers = (servers: WslServerConfig[]) => {
+    getStore().set(WSL_SERVERS_KEY, { servers })
+  }
+
+  const updateServer = (id: string, update: (item: WslServerItem) => WslServerItem) => {
+    const next = state.servers.map((item) => (item.config.id === id ? update(item) : item))
+    setState({ servers: next })
+  }
+
+  const beginJob = (job: WslJob): AbortController => {
+    jobAbort?.abort()
+    const abort = new AbortController()
+    jobAbort = abort
+    setState({ job })
+    return abort
+  }
+
+  const endJob = (abort: AbortController) => {
+    if (jobAbort !== abort) return
+    jobAbort = undefined
+    setState({ job: null })
+  }
+
+  const refreshFromStore = () => {
+    const persisted = readPersistedServers()
+    const items: WslServerItem[] = persisted.map((config) => {
+      const existing = state.servers.find((item) => item.config.id === config.id)
+      return {
+        config,
+        runtime: existing?.runtime ?? { kind: "stopped" },
+      }
+    })
+    setState({ servers: items })
+  }
+
+  const setRuntime = (id: string, runtime: WslServerRuntime) => {
+    updateServer(id, (item) => ({ ...item, runtime }))
+  }
+
+  const setOpencodeCheck = (distro: string, check: WslOpencodeCheck) => {
+    setState({
+      opencodeChecks: {
+        ...state.opencodeChecks,
+        [distro]: check,
+      },
+    })
+  }
+
+  const refreshOpencodeCheck = async (distro: string, opts?: { signal?: AbortSignal }) => {
+    const resolved = await resolveWslOpencode(distro, opts)
+    const version = resolved ? await readWslCommandVersion(resolved, distro, opts) : null
+    setOpencodeCheck(distro, opencodeCheck(distro, resolved, version, appVersion))
+  }
+
+  const refreshDistroLists = async (opts: { signal?: AbortSignal }) => {
+    const [installed, online] = await Promise.all([
+      listInstalledWslDistros(opts),
+      listOnlineWslDistros(opts),
+    ])
+    return { installed, online }
+  }
+
+  const nextStartAttempt = (id: string) => {
+    const next = (startAttempts.get(id) ?? 0) + 1
+    startAttempts.set(id, next)
+    return next
+  }
+
+  const invalidateStartAttempt = (id: string) => {
+    startAttempts.set(id, (startAttempts.get(id) ?? 0) + 1)
+  }
+
+  const isCurrentStartAttempt = (id: string, attempt: number) => {
+    return startAttempts.get(id) === attempt && state.servers.some((item) => item.config.id === id)
+  }
+
+  const startServer = async (id: string) => {
+    const item = state.servers.find((x) => x.config.id === id)
+    if (!item) return
+    const attempt = nextStartAttempt(id)
+    await stopServerInternal(id)
+    if (!isCurrentStartAttempt(id, attempt)) return
+    setRuntime(id, { kind: "starting" })
+    logger?.log("wsl sidecar starting", { id, distro: item.config.distro })
+    try {
+      const sidecar = await spawnSidecar(item.config.distro)
+      if (!isCurrentStartAttempt(id, attempt)) {
+        try {
+          sidecar.listener.stop()
+        } catch {
+          // ignore stop errors for stale sidecars
+        }
+        return
+      }
+      sidecars.set(id, sidecar)
+      setRuntime(id, {
+        kind: "ready",
+        url: sidecar.url,
+        username: sidecar.username,
+        password: sidecar.password,
+      })
+      sidecar.listener.onExit((code, signal) => {
+        if (sidecars.get(id) !== sidecar) return
+        sidecars.delete(id)
+        const message = startupFailure(code, signal)
+        setRuntime(id, { kind: "failed", message })
+        logger?.error("wsl sidecar exited", { id, distro: item.config.distro, code, signal })
+      })
+      void refreshOpencodeCheck(item.config.distro).catch((error) => {
+        const message = error instanceof Error ? error.message : String(error)
+        logger?.error("wsl opencode check failed", { id, distro: item.config.distro, message })
+      })
+      logger?.log("wsl sidecar ready", { id, distro: item.config.distro, url: sidecar.url })
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      if (!isCurrentStartAttempt(id, attempt)) return
+      setRuntime(id, { kind: "failed", message })
+      // Without this, an Ubuntu-style silent failure leaves no trace in
+      // main.log — the controller captures the message in its state but
+      // nothing surfaces unless the user opens the WSL servers dialog.
+      logger?.error("wsl sidecar failed to start", { id, distro: item.config.distro, message })
+    }
+  }
+
+  const stopServerInternal = async (id: string) => {
+    const existing = sidecars.get(id)
+    if (!existing) return
+    sidecars.delete(id)
+    try {
+      existing.listener.stop()
+    } catch {
+      // ignore stop errors
+    }
+  }
+
+  const runJob = async <T>(job: WslJob, runner: (abort: AbortController) => Promise<T>) => {
+    const abort = beginJob(job)
+    try {
+      const value = await runner(abort)
+      endJob(abort)
+      return value
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") {
+        endJob(abort)
+        return undefined
+      }
+      const err = error instanceof Error ? error : new Error(String(error))
+      endJob(abort)
+      throw err
+    }
+  }
+
+  return {
+    getState() {
+      return state
+    },
+    subscribe(listener: (event: WslServersEvent) => void) {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+
+    async initialize(opts?: { defaultServer?: string | null }) {
+      refreshFromStore()
+      if (opts?.defaultServer?.startsWith("wsl:")) void startServer(opts.defaultServer)
+    },
+
+    async probeRuntime() {
+      await runJob({ kind: "runtime", startedAt: Date.now() }, async (abort) => {
+        const runtime = await probeWslRuntime({ signal: abort.signal })
+        setState({
+          runtime,
+          pendingRestart: state.pendingRestart && !runtime.available ? state.pendingRestart : false,
+        })
+      })
+    },
+
+    async refreshDistros() {
+      await runJob({ kind: "distros", startedAt: Date.now() }, async (abort) => {
+        setState(await refreshDistroLists({ signal: abort.signal }))
+      })
+    },
+
+    async installWsl() {
+      await runJob({ kind: "install-wsl", startedAt: Date.now() }, async (abort) => {
+        const result = await installWslRuntimeElevated({ signal: abort.signal })
+        if (result.code !== 0) {
+          const message = summarize(result.stderr || result.stdout) || "WSL installation failed"
+          throw new Error(message)
+        }
+        const pendingRestart = wslNeedsRestart(result)
+        setState({ pendingRestart })
+        if (!pendingRestart) {
+          const runtime = await probeWslRuntime({ signal: abort.signal })
+          setState({ runtime })
+        }
+      })
+    },
+
+    async installDistro(name: string) {
+      await runJob({ kind: "install-distro", distro: name, startedAt: Date.now() }, async (abort) => {
+        const result = await installWslDistro(name, { signal: abort.signal })
+        if (result.code !== 0) {
+          const message = summarize(result.stderr || result.stdout) || `Failed to install distro: ${name}`
+          throw new Error(message)
+        }
+        const distros = await refreshDistroLists({ signal: abort.signal })
+        const probe = await probeWslDistro(name, { signal: abort.signal })
+        setState({
+          ...distros,
+          distroProbes: { ...state.distroProbes, [name]: probe },
+        })
+      })
+    },
+
+    async probeDistro(name: string) {
+      await runJob({ kind: "probe-distro", distro: name, startedAt: Date.now() }, async (abort) => {
+        const probe = await probeWslDistro(name, { signal: abort.signal })
+        setState({ distroProbes: { ...state.distroProbes, [name]: probe } })
+      })
+    },
+
+    async probeOpencode(name: string) {
+      await runJob({ kind: "probe-opencode", distro: name, startedAt: Date.now() }, async (abort) => {
+        await refreshOpencodeCheck(name, { signal: abort.signal })
+      })
+    },
+
+    async installOpencode(name: string) {
+      await runJob({ kind: "install-opencode", distro: name, startedAt: Date.now() }, async (abort) => {
+        const resolved = await resolveWslOpencode(name, { signal: abort.signal })
+        const existingVersion = resolved
+          ? await readWslCommandVersion(resolved, name, { signal: abort.signal })
+          : null
+        const result =
+          resolved && existingVersion
+            ? await upgradeWslOpencode(appVersion, resolved, name, { signal: abort.signal })
+            : await installWslOpencode(appVersion, name, { signal: abort.signal })
+        if (result.code !== 0) {
+          throw new Error(summarize(result.stderr || result.stdout) || "OpenCode installation failed")
+        }
+        await refreshOpencodeCheck(name, { signal: abort.signal })
+      })
+    },
+
+    async openTerminal(name: string) {
+      await openWslTerminal(name)
+    },
+
+    async addServer(distro: string): Promise<WslServerConfig> {
+      const id = wslServerIdForDistro(distro)
+      if (state.servers.some((item) => item.config.id === id)) {
+        throw new Error(`${distro} is already added`)
+      }
+      const config: WslServerConfig = {
+        id,
+        distro,
+      }
+      persistServers([...readPersistedServers(), config])
+      setState({
+        servers: [...state.servers, { config, runtime: { kind: "starting" } }],
+      })
+      void startServer(id)
+      return config
+    },
+
+    async removeServer(id: string) {
+      invalidateStartAttempt(id)
+      await stopServerInternal(id)
+      const remaining = readPersistedServers().filter((item) => item.id !== id)
+      persistServers(remaining)
+      setState({ servers: state.servers.filter((item) => item.config.id !== id) })
+    },
+
+    startServer,
+
+    stopAll() {
+      for (const item of state.servers) invalidateStartAttempt(item.config.id)
+      for (const existing of sidecars.values()) {
+        try {
+          existing.listener.stop()
+        } catch {
+          // ignore
+        }
+      }
+      sidecars.clear()
+    },
+  }
+}
+
+function initialState(): WslServersState {
+  return {
+    runtime: null,
+    installed: [],
+    online: [],
+    distroProbes: {},
+    opencodeChecks: {},
+    pendingRestart: false,
+    servers: [],
+    job: null,
+  }
+}
+
+function readPersistedServers(): WslServerConfig[] {
+  const store = getStore()
+  const existing = store.get(WSL_SERVERS_KEY)
+  if (existing && typeof existing === "object") {
+    const record = existing as { servers?: unknown }
+    const list = Array.isArray(record.servers) ? record.servers : []
+    return list.flatMap(normalizePersistedServer)
+  }
+  return []
+}
+
+function normalizePersistedServer(value: unknown): WslServerConfig[] {
+  if (!value || typeof value !== "object") return []
+  const record = value as Record<string, unknown>
+  const distro = typeof record.distro === "string" && record.distro.length > 0 ? record.distro : null
+  if (!distro) return []
+  const id = typeof record.id === "string" && record.id.length > 0 ? record.id : wslServerIdForDistro(distro)
+  return [
+    {
+      id,
+      distro,
+    },
+  ]
+}
+
+function opencodeCheck(
+  distro: string,
+  resolvedPath: string | null,
+  version: string | null,
+  expectedVersion: string,
+): WslOpencodeCheck {
+  if (!resolvedPath) {
+    return {
+      distro,
+      resolvedPath: null,
+      version: null,
+      expectedVersion,
+      matchesDesktop: null,
+      error: "opencode is not installed in this distro",
+    }
+  }
+  if (!version) {
+    return {
+      distro,
+      resolvedPath,
+      version: null,
+      expectedVersion,
+      matchesDesktop: null,
+      error: "opencode is installed but could not run",
+    }
+  }
+  return {
+    distro,
+    resolvedPath,
+    version,
+    expectedVersion,
+    matchesDesktop: version === expectedVersion,
+    error: null,
+  }
+}
+
+function startupFailure(code: number | null, signal: NodeJS.Signals | null) {
+  return `WSL server exited after startup (code=${code ?? "null"} signal=${signal ?? "null"})`
+}
+
+// Re-export types used by callers
+export type {
+  WslInstalledDistro,
+  WslOnlineDistro,
+  WslRuntimeCheck,
+  WslDistroProbe,
+  WslOpencodeCheck,
+  WslServerConfig,
+  WslServerItem,
+  WslServerRuntime,
+  WslServersEvent,
+  WslServersState,
+}

packages/desktop/src/main/wsl.ts

@@ -0,0 +1,421 @@
+import { spawn } from "node:child_process"
+import { existsSync } from "node:fs"
+import { join } from "node:path"
+import * as pty from "@lydell/node-pty"
+import type { WslDistroProbe, WslInstalledDistro, WslOnlineDistro, WslRuntimeCheck } from "../preload/types"
+
+export type WslCommandLine = {
+  stream: "stdout" | "stderr"
+  text: string
+}
+
+export type WslCommandResult = {
+  code: number | null
+  signal: NodeJS.Signals | null
+  stdout: string
+  stderr: string
+}
+
+export type RunWslOptions = {
+  signal?: AbortSignal
+  /**
+   * Ceiling on how long we wait for the child process to exit. When the
+   * LXSS service or a specific distro wedges (e.g. Ubuntu-24.04 with a
+   * pending first-run prompt), `wsl.exe` never returns and any command
+   * that doesn't specify a timeout hangs the entire startup flow. Default
+   * is 20s — enough for slow cold-starts, short enough to fail fast on
+   * a wedge. Callers can override for longer-running jobs.
+   */
+  timeoutMs?: number
+}
+
+const DEFAULT_WSL_TIMEOUT_MS = 20_000
+const DEFAULT_WSL_INSTALL_TIMEOUT_MS = 15 * 60_000
+
+export function wslArgs(args: string[], distro?: string | null, user?: string | null) {
+  return [...(distro ? ["-d", distro] : []), ...(user ? ["--user", user] : []), "--", ...args]
+}
+
+export function runWsl(args: string[], opts: RunWslOptions = {}) {
+  return runCommand("wsl", args, opts)
+}
+
+function runPowerShell(command: string, opts: RunWslOptions = {}) {
+  return runCommand(
+    "powershell.exe",
+    ["-NoProfile", "-NonInteractive", "-ExecutionPolicy", "Bypass", "-Command", command],
+    opts,
+  )
+}
+
+function runCommand(command: string, args: string[], opts: RunWslOptions = {}) {
+  return new Promise<WslCommandResult>((resolve, reject) => {
+    const child = spawn(command, args, {
+      stdio: ["ignore", "pipe", "pipe"],
+      windowsHide: true,
+      signal: opts.signal,
+    })
+
+    // Guard every wsl.exe invocation with a timeout. When the distro or
+    // the LXSS service is wedged (Ubuntu first-run state, Windows update
+    // pending, etc.) wsl.exe produces no output and never exits; without
+    // this the whole sidecar spawn flow stalls the app forever.
+    const timeoutMs = opts.timeoutMs ?? DEFAULT_WSL_TIMEOUT_MS
+    const timeoutId = setTimeout(() => {
+      try {
+        child.kill()
+      } catch {
+        /* ignore */
+      }
+      reject(new Error(`${command} ${args.join(" ")} timed out after ${timeoutMs}ms`))
+    }, timeoutMs)
+
+    let stdout = ""
+    let stderr = ""
+    const stdoutDecoder = createOutputDecoder()
+    const stderrDecoder = createOutputDecoder()
+
+    const append = (stream: WslCommandLine["stream"], chunk: string) => {
+      if (!chunk) return
+      if (stream === "stdout") {
+        stdout += chunk
+        return
+      }
+      stderr += chunk
+    }
+
+    child.stdout.on("data", (chunk: Buffer) => {
+      append("stdout", stdoutDecoder.decode(chunk))
+    })
+    child.stdout.on("end", () => {
+      append("stdout", stdoutDecoder.flush())
+    })
+
+    child.stderr.on("data", (chunk: Buffer) => {
+      append("stderr", stderrDecoder.decode(chunk))
+    })
+    child.stderr.on("end", () => {
+      append("stderr", stderrDecoder.flush())
+    })
+
+    child.once("error", (error) => {
+      clearTimeout(timeoutId)
+      reject(error)
+    })
+    child.once("close", (code, signal) => {
+      clearTimeout(timeoutId)
+      resolve({ code, signal, stdout, stderr })
+    })
+  })
+}
+
+function runInteractiveCommand(command: string, args: string[], opts: RunWslOptions = {}, defaultTimeoutMs: number) {
+  return new Promise<WslCommandResult>((resolve, reject) => {
+    const child = pty.spawn(command, args, {
+      name: "xterm-color",
+      cols: 80,
+      rows: 24,
+      cwd: process.cwd(),
+      env: process.env,
+      useConpty: true,
+    })
+
+    let settled = false
+    let stdout = ""
+
+    const cleanup = () => {
+      clearTimeout(timeoutId)
+      abortCleanup?.()
+    }
+
+    const timeoutMs = opts.timeoutMs ?? defaultTimeoutMs
+    const timeoutId = setTimeout(() => {
+      try {
+        child.kill()
+      } catch {
+        /* ignore */
+      }
+      if (settled) return
+      settled = true
+      cleanup()
+      reject(new Error(`${command} ${args.join(" ")} timed out after ${timeoutMs}ms`))
+    }, timeoutMs)
+
+    const abortHandler = () => {
+      try {
+        child.kill()
+      } catch {
+        /* ignore */
+      }
+      if (settled) return
+      settled = true
+      cleanup()
+      reject(new DOMException("Aborted", "AbortError"))
+    }
+    const abortCleanup = opts.signal
+      ? (() => {
+          opts.signal?.addEventListener("abort", abortHandler, { once: true })
+          return () => opts.signal?.removeEventListener("abort", abortHandler)
+        })()
+      : undefined
+
+    child.onData((data: string) => {
+      stdout += data
+    })
+    child.onExit((event: { exitCode: number }) => {
+      if (settled) return
+      settled = true
+      cleanup()
+      resolve({ code: event.exitCode, signal: null, stdout, stderr: "" })
+    })
+  })
+}
+
+function createOutputDecoder() {
+  let decoder: TextDecoder | undefined
+  return {
+    decode(chunk: Buffer) {
+      decoder ??= new TextDecoder(detectOutputEncoding(chunk))
+      return decoder.decode(chunk, { stream: true })
+    },
+    flush() {
+      return decoder?.decode() ?? ""
+    },
+  }
+}
+
+function detectOutputEncoding(chunk: Uint8Array) {
+  if (chunk[0] === 0xff && chunk[1] === 0xfe) return "utf-16le"
+  const pairs = Math.floor(chunk.length / 2)
+  if (pairs < 2) return "utf-8"
+  const oddZeroes = Array.from({ length: pairs }).filter((_, index) => chunk[index * 2 + 1] === 0).length
+  const evenZeroes = Array.from({ length: pairs }).filter((_, index) => chunk[index * 2] === 0).length
+  return oddZeroes >= Math.ceil(pairs / 3) && evenZeroes * 2 <= oddZeroes ? "utf-16le" : "utf-8"
+}
+
+export function runWslInDistro(args: string[], distro?: string | null, opts?: RunWslOptions) {
+  return runWsl(wslArgs(args, distro), opts)
+}
+
+export function runWslSh(script: string, distro?: string | null, opts?: RunWslOptions) {
+  return runWslInDistro(["sh", "-lc", script], distro, opts)
+}
+
+export async function probeWslRuntime(opts?: RunWslOptions): Promise<WslRuntimeCheck> {
+  const version = await runWsl(["--version"], opts).catch((error) => ({
+    code: 1,
+    signal: null,
+    stdout: "",
+    stderr: error instanceof Error ? error.message : String(error),
+  }))
+
+  if (version.code !== 0) {
+    return {
+      available: false,
+      version: null,
+      error: summarize(version.stderr || version.stdout) || "WSL is unavailable",
+    }
+  }
+
+  return {
+    available: true,
+    version: firstLine(version.stdout),
+    error: null,
+  }
+}
+
+export async function listInstalledWslDistros(opts?: RunWslOptions) {
+  const result = await runWsl(["--list", "--verbose"], opts)
+  if (result.code !== 0) {
+    throw new Error(summarize(result.stderr || result.stdout) || "Failed to list installed WSL distros")
+  }
+  return parseInstalledDistros(result.stdout)
+}
+
+export async function listOnlineWslDistros(opts?: RunWslOptions) {
+  const result = await runWsl(["--list", "--online"], opts)
+  if (result.code !== 0) {
+    throw new Error(summarize(result.stderr || result.stdout) || "Failed to list online WSL distros")
+  }
+  return parseOnlineDistros(result.stdout)
+}
+
+export async function installWslRuntimeElevated(opts?: RunWslOptions) {
+  const script = [
+    "$ErrorActionPreference = 'Stop'",
+    "$process = Start-Process -FilePath 'wsl.exe' -Verb RunAs -ArgumentList @('--install','--no-distribution') -Wait -PassThru",
+    "if ($null -ne $process.ExitCode) { exit $process.ExitCode }",
+  ].join("; ")
+  return runPowerShell(script, withTimeout(opts, DEFAULT_WSL_INSTALL_TIMEOUT_MS))
+}
+
+export async function installWslDistro(name: string, opts?: RunWslOptions) {
+  return runInteractiveCommand(
+    resolveSystem32Command("wsl.exe"),
+    ["--install", "-d", name, "--web-download", "--no-launch"],
+    withTimeout(opts, DEFAULT_WSL_INSTALL_TIMEOUT_MS),
+    DEFAULT_WSL_INSTALL_TIMEOUT_MS,
+  )
+}
+
+export async function installWslOpencode(version: string, distro: string, opts?: RunWslOptions) {
+  return runInteractiveCommand(
+    resolveSystem32Command("wsl.exe"),
+    wslArgs(["bash", "-lc", `curl -fsSL https://opencode.ai/install | bash -s -- --version ${shellEscape(version)}`], distro),
+    withTimeout(opts, DEFAULT_WSL_INSTALL_TIMEOUT_MS),
+    DEFAULT_WSL_INSTALL_TIMEOUT_MS,
+  )
+}
+
+export function wslNeedsRestart(result: WslCommandResult) {
+  return /restart|reboot/i.test(`${result.stdout}\n${result.stderr}`)
+}
+
+export async function probeWslDistro(name: string, opts?: RunWslOptions): Promise<WslDistroProbe> {
+  const executable = await runWslInDistro(["/bin/true"], name, opts).catch((error) => ({
+    code: 1,
+    signal: null,
+    stdout: "",
+    stderr: error instanceof Error ? error.message : String(error),
+  }))
+  if (executable.code !== 0) {
+    return {
+      name,
+      canExecute: false,
+      hasBash: false,
+      hasCurl: false,
+      error: summarize(executable.stderr || executable.stdout) || "Cannot execute commands in distro",
+    }
+  }
+
+  const [bash, curl] = await Promise.all([
+    runWslSh("command -v bash >/dev/null && printf yes || printf no", name, opts),
+    runWslSh("command -v curl >/dev/null && printf yes || printf no", name, opts),
+  ])
+
+  return {
+    name,
+    canExecute: true,
+    hasBash: bash.code === 0 && summarize(bash.stdout) === "yes",
+    hasCurl: curl.code === 0 && summarize(curl.stdout) === "yes",
+    error: null,
+  }
+}
+
+export async function resolveWslHome(distro?: string | null, opts?: RunWslOptions) {
+  return firstLine((await runWslSh('printf "%s\\n" "$HOME"', distro, opts)).stdout) ?? "/"
+}
+
+export async function resolveWslOpencode(distro: string, opts?: RunWslOptions) {
+  const command = firstLine((await runWslSh("command -v opencode 2>/dev/null | grep -v '^/mnt/' | head -n 1 || true", distro, opts)).stdout)
+  if (command) return command
+
+  for (const candidate of [
+    'if [ -x "${XDG_BIN_DIR:-$HOME/.local/bin}/opencode" ]; then printf "%s\\n" "${XDG_BIN_DIR:-$HOME/.local/bin}/opencode"; fi',
+    'if [ -x "$HOME/bin/opencode" ]; then printf "%s\\n" "$HOME/bin/opencode"; fi',
+    'if [ -x "$HOME/.opencode/bin/opencode" ]; then printf "%s\\n" "$HOME/.opencode/bin/opencode"; fi',
+    'if [ -x "/usr/local/bin/opencode" ]; then printf "%s\\n" "/usr/local/bin/opencode"; fi',
+  ]) {
+    const resolved = firstLine((await runWslSh(candidate, distro, opts)).stdout)
+    if (resolved) return resolved
+  }
+
+  return null
+}
+
+export async function readWslCommandVersion(command: string, distro: string, opts?: RunWslOptions) {
+  const result = await runWslSh(`${shellEscape(command)} --version 2>/dev/null || true`, distro, opts)
+  return firstLine(result.stdout)
+}
+
+export async function upgradeWslOpencode(target: string, command: string, distro: string, opts?: RunWslOptions) {
+  return runInteractiveCommand(
+    resolveSystem32Command("wsl.exe"),
+    wslArgs(["bash", "-lc", `${shellEscape(command)} upgrade ${shellEscape(target)}`], distro, "root"),
+    withTimeout(opts, DEFAULT_WSL_INSTALL_TIMEOUT_MS),
+    DEFAULT_WSL_INSTALL_TIMEOUT_MS,
+  )
+}
+
+export function openWslTerminal(distro?: string | null) {
+  if (distro && !/^[a-zA-Z0-9_.-]+$/.test(distro)) {
+    return Promise.reject(new Error("Invalid distro name"))
+  }
+  return new Promise<void>((resolve, reject) => {
+    const child = spawn("cmd.exe", ["/c", "start", "", "wsl", ...(distro ? ["-d", distro] : [])], {
+      detached: true,
+      stdio: "ignore",
+      windowsHide: true,
+    })
+    child.once("error", reject)
+    child.once("spawn", () => {
+      child.unref()
+      resolve()
+    })
+  })
+}
+
+function parseInstalledDistros(output: string) {
+  return output.split(/\r?\n/g).flatMap((line) => {
+    const trimmed = line.trim()
+    if (!trimmed) return []
+    const match = line.match(/^\s*(\*)?\s*(.*?)\s{2,}\S+\s+(\d+)\s*$/)
+    if (!match) return []
+    const [, marker, name, version] = match
+    if (!name || /^name$/i.test(name)) return []
+    return [
+      {
+        name: name.trim(),
+        version: Number.isNaN(Number.parseInt(version, 10)) ? null : Number.parseInt(version, 10),
+        isDefault: marker === "*",
+      } satisfies WslInstalledDistro,
+    ]
+  })
+}
+
+function parseOnlineDistros(output: string) {
+  return output.split(/\r?\n/g).flatMap((line) => {
+    const trimmed = line.trim()
+    if (!trimmed) return []
+    const match = trimmed.match(/^([A-Za-z0-9._-]+)\s{2,}(.+)$/)
+    if (!match) return []
+    const [, name, label] = match
+    if (/^name$/i.test(name)) return []
+    return [{ name, label: label.trim() } satisfies WslOnlineDistro]
+  })
+}
+
+function firstLine(value: string) {
+  return (
+    value
+      .split(/\r?\n/g)
+      .map((line) => line.trim())
+      .find(Boolean) ?? null
+  )
+}
+
+export function summarize(value: string) {
+  return value
+    .split(/\r?\n/g)
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .join("\n")
+}
+
+export function shellEscape(value: string) {
+  return `'${value.replace(/'/g, `'"'"'`)}'`
+}
+
+function resolveSystem32Command(command: string) {
+  const root = process.env.SystemRoot ?? process.env.windir
+  if (!root) return command
+  const resolved = join(root, "System32", command)
+  return existsSync(resolved) ? resolved : command
+}
+
+function withTimeout(opts: RunWslOptions | undefined, timeoutMs: number): RunWslOptions {
+  return {
+    ...opts,
+    timeoutMs: opts?.timeoutMs ?? timeoutMs,
+  }
+}

packages/desktop/src/preload/index.ts

@@ -1,5 +1,5 @@
 import { contextBridge, ipcRenderer } from "electron"
-import type { ElectronAPI, InitStep, SqliteMigrationProgress } from "./types"
+import type { ElectronAPI, InitStep, SqliteMigrationProgress, WslServersEvent } from "./types"
 
 const api: ElectronAPI = {
   killSidecar: () => ipcRenderer.invoke("kill-sidecar"),
@@ -11,17 +11,38 @@ const api: ElectronAPI = {
       ipcRenderer.removeListener("init-step", handler)
     })
   },
+  wslServers: {
+    getState: () => ipcRenderer.invoke("wsl-servers-get-state"),
+    subscribe: (cb) => {
+      const handler = (_: unknown, event: WslServersEvent) => cb(event)
+      ipcRenderer.on("wsl-servers-event", handler)
+      void ipcRenderer.invoke("wsl-servers-subscribe")
+      return () => {
+        ipcRenderer.removeListener("wsl-servers-event", handler)
+        void ipcRenderer.invoke("wsl-servers-unsubscribe")
+      }
+    },
+    probeRuntime: () => ipcRenderer.invoke("wsl-servers-probe-runtime"),
+    refreshDistros: () => ipcRenderer.invoke("wsl-servers-refresh-distros"),
+    installWsl: () => ipcRenderer.invoke("wsl-servers-install-wsl"),
+    installDistro: (name) => ipcRenderer.invoke("wsl-servers-install-distro", name),
+    probeDistro: (name) => ipcRenderer.invoke("wsl-servers-probe-distro", name),
+    probeOpencode: (name) => ipcRenderer.invoke("wsl-servers-probe-opencode", name),
+    installOpencode: (name) => ipcRenderer.invoke("wsl-servers-install-opencode", name),
+    openTerminal: (name) => ipcRenderer.invoke("wsl-servers-open-terminal", name),
+    addServer: (distro) => ipcRenderer.invoke("wsl-servers-add", distro),
+    removeServer: (id) => ipcRenderer.invoke("wsl-servers-remove", id),
+    startServer: (id) => ipcRenderer.invoke("wsl-servers-start", id),
+  },
   getWindowConfig: () => ipcRenderer.invoke("get-window-config"),
   consumeInitialDeepLinks: () => ipcRenderer.invoke("consume-initial-deep-links"),
   getDefaultServerUrl: () => ipcRenderer.invoke("get-default-server-url"),
   setDefaultServerUrl: (url) => ipcRenderer.invoke("set-default-server-url", url),
-  getWslConfig: () => ipcRenderer.invoke("get-wsl-config"),
-  setWslConfig: (config) => ipcRenderer.invoke("set-wsl-config", config),
   getDisplayBackend: () => ipcRenderer.invoke("get-display-backend"),
   setDisplayBackend: (backend) => ipcRenderer.invoke("set-display-backend", backend),
   parseMarkdownCommand: (markdown) => ipcRenderer.invoke("parse-markdown", markdown),
   checkAppExists: (appName) => ipcRenderer.invoke("check-app-exists", appName),
-  wslPath: (path, mode) => ipcRenderer.invoke("wsl-path", path, mode),
+  wslPath: (path, mode, distro) => ipcRenderer.invoke("wsl-path", path, mode, distro),
   resolveAppPath: (appName) => ipcRenderer.invoke("resolve-app-path", appName),
   storeGet: (name, key) => ipcRenderer.invoke("store-get", name, key),
   storeSet: (name, key, value) => ipcRenderer.invoke("store-set", name, key, value),

packages/desktop/src/preload/types.ts

@@ -10,7 +10,87 @@ export type ServerReadyData = {
 
 export type SqliteMigrationProgress = { type: "InProgress"; value: number } | { type: "Done" }
 
-export type WslConfig = { enabled: boolean }
+export type WslRuntimeCheck = {
+  available: boolean
+  version: string | null
+  error: string | null
+}
+export type WslInstalledDistro = {
+  name: string
+  version: number | null
+  isDefault: boolean
+}
+export type WslOnlineDistro = {
+  name: string
+  label: string
+}
+export type WslDistroProbe = {
+  name: string
+  canExecute: boolean
+  hasBash: boolean
+  hasCurl: boolean
+  error: string | null
+}
+export type WslOpencodeCheck = {
+  distro: string
+  resolvedPath: string | null
+  version: string | null
+  expectedVersion: string | null
+  matchesDesktop: boolean | null
+  error: string | null
+}
+export type WslServerConfig = {
+  id: string
+  distro: string
+}
+
+export type WslServerRuntime =
+  | { kind: "starting" }
+  | { kind: "ready"; url: string; username: string | null; password: string | null }
+  | { kind: "failed"; message: string }
+  | { kind: "stopped" }
+
+export type WslServerItem = {
+  config: WslServerConfig
+  runtime: WslServerRuntime
+}
+
+export type WslJob =
+  | { kind: "runtime"; startedAt: number }
+  | { kind: "distros"; startedAt: number }
+  | { kind: "install-wsl"; startedAt: number }
+  | { kind: "install-distro"; distro: string; startedAt: number }
+  | { kind: "probe-distro"; distro: string; startedAt: number }
+  | { kind: "probe-opencode"; distro: string; startedAt: number }
+  | { kind: "install-opencode"; distro: string; startedAt: number }
+
+export type WslServersState = {
+  runtime: WslRuntimeCheck | null
+  installed: WslInstalledDistro[]
+  online: WslOnlineDistro[]
+  distroProbes: Record<string, WslDistroProbe>
+  opencodeChecks: Record<string, WslOpencodeCheck>
+  pendingRestart: boolean
+  servers: WslServerItem[]
+  job: WslJob | null
+}
+export type WslServersEvent = { type: "state"; state: WslServersState }
+
+export type WslServersAPI = {
+  getState: () => Promise<WslServersState>
+  subscribe: (cb: (event: WslServersEvent) => void) => () => void
+  probeRuntime: () => Promise<void>
+  refreshDistros: () => Promise<void>
+  installWsl: () => Promise<void>
+  installDistro: (name: string) => Promise<void>
+  probeDistro: (name: string) => Promise<void>
+  probeOpencode: (name: string) => Promise<void>
+  installOpencode: (name: string) => Promise<void>
+  openTerminal: (name: string) => Promise<void>
+  addServer: (distro: string) => Promise<WslServerConfig>
+  removeServer: (id: string) => Promise<void>
+  startServer: (id: string) => Promise<void>
+}
 
 export type LinuxDisplayBackend = "wayland" | "auto"
 export type TitlebarTheme = {
@@ -32,17 +112,16 @@ export type ElectronAPI = {
   killSidecar: () => Promise<void>
   installCli: () => Promise<string>
   awaitInitialization: (onStep: (step: InitStep) => void) => Promise<ServerReadyData>
+  wslServers: WslServersAPI
   getWindowConfig: () => Promise<WindowConfig>
   consumeInitialDeepLinks: () => Promise<string[]>
   getDefaultServerUrl: () => Promise<string | null>
   setDefaultServerUrl: (url: string | null) => Promise<void>
-  getWslConfig: () => Promise<WslConfig>
-  setWslConfig: (config: WslConfig) => Promise<void>
   getDisplayBackend: () => Promise<LinuxDisplayBackend | null>
   setDisplayBackend: (backend: LinuxDisplayBackend | null) => Promise<void>
   parseMarkdownCommand: (markdown: string) => Promise<string>
   checkAppExists: (appName: string) => Promise<boolean>
-  wslPath: (path: string, mode: "windows" | "linux" | null) => Promise<string>
+  wslPath: (path: string, mode: "windows" | "linux" | null, distro?: string | null) => Promise<string>
   resolveAppPath: (appName: string) => Promise<string | null>
   storeGet: (name: string, key: string) => Promise<string | null>
   storeSet: (name: string, key: string, value: string) => Promise<void>

packages/desktop/src/renderer/env.d.ts

@@ -5,6 +5,7 @@ declare global {
     api: ElectronAPI
     __OPENCODE__?: {
       deepLinks?: string[]
+      activeServer?: string
     }
   }
 }

packages/desktop/src/renderer/index.tsx

@@ -13,16 +13,18 @@ import {
   PlatformProvider,
   ServerConnection,
   useCommand,
+  useWslServers,
 } from "@opencode-ai/app"
 import * as Sentry from "@sentry/solid"
 import type { AsyncStorage } from "@solid-primitives/storage"
 import { MemoryRouter } from "@solidjs/router"
-import { createEffect, createResource, onCleanup, onMount, Show } from "solid-js"
+import { createEffect, createMemo, createResource, onCleanup, onMount, Show } from "solid-js"
 import { render } from "solid-js/web"
 import pkg from "../../package.json"
 import { initI18n, t } from "./i18n"
 import { resetZoom, setPinchZoomEnabled, webviewZoom, zoomIn, zoomOut } from "./webview-zoom"
 import "./styles.css"
+import { Splash } from "@opencode-ai/ui/logo"
 import { useTheme } from "@opencode-ai/ui/theme"
 
 const root = document.getElementById("root")
@@ -79,25 +81,26 @@ const createPlatform = (): Platform => {
     return undefined
   })()
 
-  const isWslEnabled = async () => {
-    if (os !== "windows") return false
-    return window.api
-      .getWslConfig()
-      .then((config) => config.enabled)
-      .catch(() => false)
+  const activeWslDistro = () => {
+    const key = window.__OPENCODE__?.activeServer
+    if (!key || !key.startsWith("wsl:")) return undefined
+    return key.slice("wsl:".length)
   }
 
   const wslHome = async () => {
-    if (!(await isWslEnabled())) return undefined
-    return window.api.wslPath("~", "windows").catch(() => undefined)
+    const distro = activeWslDistro()
+    if (!distro) return undefined
+    return window.api.wslPath("~", "windows", distro)
   }
 
-  const handleWslPicker = async <T extends string | string[]>(result: T | null): Promise<T | null> => {
-    if (!result || !(await isWslEnabled())) return result
+  const handleWslPicker = async <T extends string | string[] | null>(result: T): Promise<T> => {
+    const distro = activeWslDistro()
+    if (!result || !distro) return result
+    const convert = (path: string) => window.api.wslPath(path, "linux", distro)
     if (Array.isArray(result)) {
-      return Promise.all(result.map((path) => window.api.wslPath(path, "linux").catch(() => path))) as any
+      return (await Promise.all(result.map(convert))) as T
     }
-    return window.api.wslPath(result, "linux").catch(() => result) as any
+    return (await convert(result)) as T
   }
 
   const runDesktopMenuAction: Platform["runDesktopMenuAction"] = (action) => {
@@ -143,6 +146,8 @@ const createPlatform = (): Platform => {
     }
   })()
 
+  const wslServersApi = os === "windows" ? window.api.wslServers : undefined
+
   return {
     platform: "desktop",
     os,
@@ -183,10 +188,8 @@ const createPlatform = (): Platform => {
       if (os === "windows") {
         const resolvedApp = app ? await window.api.resolveAppPath(app).catch(() => null) : null
         const resolvedPath = await (async () => {
-          if (await isWslEnabled()) {
-            const converted = await window.api.wslPath(path, "windows").catch(() => null)
-            if (converted) return converted
-          }
+          const distro = activeWslDistro()
+          if (distro) return window.api.wslPath(path, "windows", distro)
           return path
         })()
         return window.api.openPath(resolvedPath, resolvedApp ?? undefined)
@@ -241,16 +244,7 @@ const createPlatform = (): Platform => {
       }
     },
 
-    fetch: (input, init) => {
-      if (input instanceof Request) return fetch(input)
-      return fetch(input, init)
-    },
-
-    getWslEnabled: () => isWslEnabled(),
-
-    setWslEnabled: async (enabled) => {
-      await window.api.setWslConfig({ enabled })
-    },
+    fetch,
 
     getDefaultServer: async () => {
       const url = await window.api.getDefaultServerUrl().catch(() => null)
@@ -262,6 +256,8 @@ const createPlatform = (): Platform => {
       await window.api.setDefaultServerUrl(url)
     },
 
+    wslServers: wslServersApi,
+
     getDisplayBackend: async () => {
       return window.api.getDisplayBackend().catch(() => null)
     },
@@ -303,7 +299,6 @@ listenForDeepLinks()
 
 render(() => {
   const platform = createPlatform()
-  const [windowConfig] = createResource(() => window.api.getWindowConfig().catch(() => ({ updaterEnabled: false })))
   const loadLocale = async () => {
     const current = await platform.storage?.("opencode.global.dat").getItem("language")
     const legacy = current ? undefined : await platform.storage?.().getItem("language.v1")
@@ -318,32 +313,11 @@ render(() => {
 
   const [windowCount] = createResource(() => window.api.getWindowCount())
 
-  // Fetch sidecar credentials (available immediately, before health check)
   const [sidecar] = createResource(() => window.api.awaitInitialization(() => undefined))
 
-  const [defaultServer] = createResource(() =>
-    platform.getDefaultServer?.().then((url) => {
-      if (url) return ServerConnection.key({ type: "http", http: { url } })
-    }),
-  )
+  const [defaultServer] = createResource(() => platform.getDefaultServer?.())
   const [locale] = createResource(loadLocale)
 
-  const servers = () => {
-    const data = sidecar()
-    if (!data) return []
-    const server: ServerConnection.Sidecar = {
-      displayName: "Local Server",
-      type: "sidecar",
-      variant: "base",
-      http: {
-        url: data.url,
-        username: data.username ?? undefined,
-        password: data.password ?? undefined,
-      },
-    }
-    return [server] as ServerConnection.Any[]
-  }
-
   function handleClick(e: MouseEvent) {
     const link = (e.target as HTMLElement).closest("a.external-link") as HTMLAnchorElement | null
     if (link?.href) {
@@ -370,6 +344,73 @@ render(() => {
     return null
   }
 
+  function App() {
+    const wslServers = useWslServers()
+    const splash = (
+      <div class="h-dvh w-screen flex flex-col items-center justify-center bg-background-base">
+        <Splash class="w-16 h-20 opacity-50 animate-pulse" />
+      </div>
+    )
+
+    const ready = createMemo(
+      () =>
+        !defaultServer.loading &&
+        !sidecar.loading &&
+        !windowCount.loading &&
+        !locale.loading,
+    )
+    const servers = createMemo(() => {
+      const data = sidecar()
+      const list: ServerConnection.Any[] = []
+      if (data) {
+        list.push({
+          displayName: "Local Server",
+          type: "sidecar",
+          variant: "base",
+          http: {
+            url: data.url,
+            username: data.username ?? undefined,
+            password: data.password ?? undefined,
+          },
+        })
+      }
+      for (const item of wslServers.data?.servers ?? []) {
+        const runtime = item.runtime
+        if (runtime.kind !== "ready") continue
+        list.push({
+          displayName: item.config.distro,
+          type: "sidecar",
+          variant: "wsl",
+          distro: item.config.distro,
+          http: {
+            url: runtime.url,
+            username: runtime.username ?? undefined,
+            password: runtime.password ?? undefined,
+          },
+        })
+      }
+      return list
+    })
+    const effectiveDefaultServer = createMemo(() => {
+      const key = defaultServer.latest ?? ServerConnection.Key.make("sidecar")
+      if (!key.startsWith("wsl:")) return key
+      const item = wslServers.data?.servers.find((item) => item.config.id === key)
+      if (item?.runtime.kind === "ready") return key
+      return ServerConnection.Key.make("sidecar")
+    })
+    if (!ready()) return splash
+
+    return (
+      <Show when={effectiveDefaultServer()} keyed>
+        {(key) => (
+          <AppInterface defaultServer={key} servers={servers()} router={MemoryRouter}>
+            <Inner />
+          </AppInterface>
+        )}
+      </Show>
+    )
+  }
+
   onMount(() => {
     document.addEventListener("click", handleClick)
     onCleanup(() => {
@@ -380,27 +421,7 @@ render(() => {
   return (
     <PlatformProvider value={platform}>
       <AppBaseProviders locale={locale.latest}>
-        <Show
-          when={
-            !defaultServer.loading &&
-            !sidecar.loading &&
-            !windowConfig.loading &&
-            !windowCount.loading &&
-            !locale.loading
-          }
-        >
-          {(_) => {
-            return (
-              <AppInterface
-                defaultServer={defaultServer.latest ?? ServerConnection.Key.make("sidecar")}
-                servers={servers()}
-                router={MemoryRouter}
-              >
-                <Inner />
-              </AppInterface>
-            )
-          }}
-        </Show>
+        <App />
       </AppBaseProviders>
     </PlatformProvider>
   )

packages/opencode/src/agent/agent.ts

@@ -1,3 +1,4 @@
+import { PermissionLegacy } from "@opencode-ai/core/permission/legacy"
 import { Config } from "@/config/config"
 import { serviceUse } from "@opencode-ai/core/effect/service-use"
 import { Provider } from "@/provider/provider"
@@ -36,7 +37,7 @@ export const Info = Schema.Struct({
   topP: Schema.optional(Schema.Finite),
   temperature: Schema.optional(Schema.Finite),
   color: Schema.optional(Schema.String),
-  permission: Permission.Ruleset,
+  permission: PermissionLegacy.Ruleset,
   model: Schema.optional(
     Schema.Struct({
       modelID: ProviderV2.ModelID,

packages/opencode/src/agent/subagent-permissions.ts

@@ -1,3 +1,4 @@
+import { PermissionLegacy } from "@opencode-ai/core/permission/legacy"
 import type { Permission } from "../permission"
 import type { Agent } from "./agent"
 
@@ -15,10 +16,10 @@ import type { Agent } from "./agent"
  *    doesn't already permit them.
  */
 export function deriveSubagentSessionPermission(input: {
-  parentSessionPermission: Permission.Ruleset
+  parentSessionPermission: PermissionLegacy.Ruleset
   parentAgent: Agent.Info | undefined
   subagent: Agent.Info
-}): Permission.Ruleset {
+}): PermissionLegacy.Ruleset {
   const canTask = input.subagent.permission.some((rule) => rule.permission === "task")
   const canTodo = input.subagent.permission.some((rule) => rule.permission === "todowrite")
   const parentAgentDenies =