feat(app): v2 wsl ui (#34233)

Co-authored-by: LukeParkerDev <10430890+Hona@users.noreply.github.com>

packages/app/src/i18n/en.ts

@@ -388,6 +388,20 @@ export const dict = {
   "wsl.onboarding.chooseDistroFirst": "Choose a distro first.",
   "wsl.onboarding.loadFailed": "Failed to load WSL state.",
   "wsl.onboarding.loading": "Loading...",
+  "wsl.onboarding.installedDistros": "Installed distros",
+  "wsl.onboarding.checkAgain": "Check again",
+  "wsl.onboarding.distroStatus.ready": "Ready",
+  "wsl.onboarding.distroStatus.checking": "Checking...",
+  "wsl.onboarding.distroStatus.opencodeMissing": "OpenCode not installed",
+  "wsl.onboarding.distroStatus.missingTools": "Missing bash, curl",
+  "wsl.onboarding.distroStatus.unsupported": "Unsupported · Use WSL 2",
+  "wsl.onboarding.needAnotherDistro": "Need another distro?",
+  "wsl.onboarding.needAnotherDistroHint": "Install a Linux distribution from the WSL catalog",
+  "wsl.onboarding.wslNotInstalled.title": "WSL not installed",
+  "wsl.onboarding.wslNotInstalled.description":
+    "WSL (Windows Subsystem for Linux) is required before OpenCode can add a WSL server",
+  "wsl.onboarding.wslUnavailable.title": "WSL unavailable",
+  "wsl.onboarding.wslUnavailable.description": "OpenCode could not verify WSL on this machine.",
   "wsl.onboarding.installWsl": "Install WSL",
   "wsl.onboarding.windowsRestartRequired": "Restart Windows to finish installing WSL, then reopen OpenCode.",
   "wsl.onboarding.next": "Next",
@@ -397,6 +411,7 @@ export const dict = {
   "wsl.onboarding.install": "Install",
   "wsl.onboarding.installing": "Installing...",
   "wsl.onboarding.installDistro": "Install distro",
+  "wsl.onboarding.searchDistros": "Search distros",
   "wsl.onboarding.wsl2Required": "WSL 2 is required.",
   "wsl.onboarding.toolsRequired": "This distro needs bash and curl.",
   "wsl.onboarding.openTerminal": "Open terminal",

packages/app/src/wsl/add-server-probes.ts

@@ -0,0 +1,57 @@
+import { useMutation } from "@tanstack/solid-query"
+import { createEffect } from "solid-js"
+import type { Accessor } from "solid-js"
+import {
+  addServerProbePlan,
+  createProbeFailureGate,
+  runAddableProbePlan,
+  type AddServerProbePlan,
+  type WslAddServerView,
+} from "./settings-model"
+import type { WslInstalledDistro, WslServersPlatform, WslServersState } from "./types"
+
+export function useWslAddServerProbes(input: {
+  state: Accessor<WslServersState | undefined>
+  api: WslServersPlatform
+  view: Accessor<WslAddServerView>
+  adding: Accessor<boolean>
+  busy: Accessor<boolean>
+  selectedDistro: Accessor<string | null>
+  addableInstalledDistros: Accessor<WslInstalledDistro[]>
+  onError: (error: unknown) => void
+}) {
+  const gate = createProbeFailureGate()
+  const probe = useMutation(() => ({
+    mutationFn: async (command: AddServerProbePlan) => {
+      if (command.kind === "addable") {
+        await runAddableProbePlan({ plan: command.plan, api: input.api })
+        return
+      }
+      if (command.plan.action === "probeRuntime") await input.api.probeRuntime()
+      if (command.plan.action === "refreshDistros") await input.api.refreshDistros()
+    },
+    onError: input.onError,
+    onSettled: (_result, error, command) => {
+      if (command) gate.settle(command.key, error)
+    },
+  }))
+
+  createEffect(() => {
+    if (probe.isPending) return
+    const command = addServerProbePlan({
+      state: input.state(),
+      view: input.view(),
+      adding: input.adding(),
+      busy: input.busy(),
+      selectedDistro: input.selectedDistro(),
+      addableInstalledDistros: input.addableInstalledDistros(),
+    })
+    if (!command || !gate.accepts(command.key)) return
+    probe.mutate(command)
+  })
+
+  return {
+    probingAddable: () => probe.isPending && probe.variables?.kind === "addable",
+    resetProbeFailure: () => gate.reset(),
+  }
+}

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

@@ -1,20 +1,28 @@
-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 { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
+import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
+import { LoaderV2 } from "@opencode-ai/ui/v2/loader-v2"
+import { RadioGroupV2, RadioItemV2 } from "@opencode-ai/ui/v2/radio-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { createMemo, For, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
+import { useWslAddServerProbes } from "./add-server-probes"
 import { useWslServers } from "./context"
-import { enterWslOpencodeStep } from "./settings-model"
+import { addServerViewModel, type AddServerText } from "./settings-model"
+import "./dialog-add-wsl-server.css"
 
-type WslServerStep = "wsl" | "distro" | "opencode"
+function isWslRuntimeMissing(error: string | null | undefined) {
+  if (!error) return true
+  return /WSL is not installed|not been installed|wsl(?:\.exe)? --install/i.test(error)
+}
 
-const STEPS: WslServerStep[] = ["wsl", "distro", "opencode"]
-
-function isHiddenDistro(name: string) {
-  return /^docker-desktop(?:-data)?$/i.test(name)
+function translate(language: ReturnType<typeof useLanguage>, value: AddServerText) {
+  if (value.params) return language.t(value.key, value.params)
+  return language.t(value.key)
 }
 
 interface DialogWslServerProps {
@@ -22,210 +30,269 @@ interface DialogWslServerProps {
 }
 
 export function DialogAddWslServer(props: DialogWslServerProps = {}) {
+  const language = useLanguage()
+  const controller = useWslAddServerController(props)
+  const model = controller.model
+  const primaryButton = () => model().primaryButton
+  const primaryButtonStyle = () => {
+    const width = primaryButton().width
+    if (!width) return undefined
+    return { width }
+  }
+
+  return (
+    <Show
+      when={!controller.wslServers.isPending && !controller.wslServers.isError}
+      fallback={
+        <Dialog fit class="settings-v2-wsl-dialog">
+          <Show
+            when={!controller.wslServers.isError}
+            fallback={<div class="settings-v2-wsl-loading">{controller.loadError()}</div>}
+          >
+            <div class="settings-v2-wsl-loading">
+              <LoaderV2 />
+            </div>
+          </Show>
+        </Dialog>
+      }
+    >
+      <Show
+        when={model().runtimeState === "ready"}
+        fallback={
+          <Show
+            when={model().runtimeState === "checking" || model().runtimeState === "loading"}
+            fallback={
+              <DialogWslSetup
+                state={model().runtimeState}
+                error={controller.runtimeError()}
+                installable={isWslRuntimeMissing(controller.runtimeError())}
+                busy={model().busy}
+                onInstall={controller.installWsl}
+              />
+            }
+          >
+            <Dialog fit class="settings-v2-wsl-dialog">
+              <div class="settings-v2-wsl-loading">
+                <LoaderV2 />
+              </div>
+            </Dialog>
+          </Show>
+        }
+      >
+        <Dialog fit class="settings-v2-wsl-dialog">
+          <DialogHeader hideClose={true}>
+            <DialogTitle>
+              {controller.view() === "main"
+                ? language.t("wsl.server.add")
+                : language.t("wsl.onboarding.installDistro")}
+            </DialogTitle>
+          </DialogHeader>
+          <DividerV2 />
+          <Show
+            when={controller.view() === "main"}
+            fallback={
+              <>
+                <DialogBody class="settings-v2-wsl-dialog-body settings-v2-wsl-catalog-picker">
+                  <TextInputV2
+                    class="settings-v2-wsl-catalog-search"
+                    appearance="large"
+                    placeholder={language.t("wsl.onboarding.searchDistros")}
+                    value={controller.catalogSearch()}
+                    disabled={model().busy}
+                    onInput={(event) => controller.setCatalogSearch(event.currentTarget.value)}
+                  />
+                  <div class="settings-v2-wsl-catalog-list">
+                    <RadioGroupV2
+                      hideLabel
+                      class="settings-v2-wsl-distro-group"
+                      label={language.t("wsl.onboarding.installDistro")}
+                      value={model().catalogTarget ?? undefined}
+                      onChange={controller.setCatalogTarget}
+                      disabled={model().busy}
+                    >
+                      <For each={model().filteredInstallableDistros}>
+                        {(item) => (
+                          <RadioItemV2
+                            class="settings-v2-wsl-distro-row settings-v2-wsl-catalog-row"
+                            value={item.name}
+                            disabled={model().busy}
+                            label={<span class="settings-v2-wsl-distro-label">{item.label}</span>}
+                          />
+                        )}
+                      </For>
+                    </RadioGroupV2>
+                  </div>
+                </DialogBody>
+                <DialogFooter>
+                  <ButtonV2 variant="neutral" disabled={model().busy} onClick={controller.closeCatalog}>
+                    {language.t("common.cancel")}
+                  </ButtonV2>
+                  <ButtonV2
+                    variant={model().installingCatalogDistro ? "loading" : "contrast"}
+                    disabled={!model().installingCatalogDistro && (model().busy || !model().catalogTarget)}
+                    style={{ width: "99px" }}
+                    onClick={controller.installCatalogDistro}
+                  >
+                    <Show when={model().installingCatalogDistro} fallback={language.t("wsl.onboarding.installDistro")}>
+                      <LoaderV2 />
+                    </Show>
+                  </ButtonV2>
+                </DialogFooter>
+              </>
+            }
+          >
+            <DialogBody class="settings-v2-wsl-dialog-body">
+              <div class="settings-v2-wsl-section-header">
+                <span class="settings-v2-wsl-section-title">{language.t("wsl.onboarding.installedDistros")}</span>
+                <ButtonV2 variant="ghost-muted" size="small" disabled={model().busy} onClick={controller.refreshDistros}>
+                  {language.t("wsl.onboarding.checkAgain")}
+                </ButtonV2>
+              </div>
+
+              <Show
+                when={model().addableInstalledDistros.length > 0}
+                fallback={
+                  <div class="settings-v2-wsl-distro-list">
+                    <div class="settings-v2-wsl-distro-empty">
+                      {model().visibleInstalledDistros.length
+                        ? language.t("wsl.onboarding.allDistrosAdded")
+                        : language.t("wsl.onboarding.noDistros")}
+                    </div>
+                  </div>
+                }
+              >
+                <div class="settings-v2-wsl-distro-list">
+                  <RadioGroupV2
+                    hideLabel
+                    class="settings-v2-wsl-distro-group"
+                    label={language.t("wsl.onboarding.installedDistros")}
+                    value={model().selectedDistro ?? undefined}
+                    onChange={controller.setSelectedDistro}
+                    disabled={model().busy}
+                  >
+                    <For each={model().addableInstalledDistros}>
+                      {(item) => {
+                        const status = () => model().distroStatuses[item.name] ?? null
+                        return (
+                          <RadioItemV2
+                            class={`settings-v2-wsl-distro-row${item.version === 1 ? " settings-v2-wsl-distro-row--unsupported" : ""}`}
+                            value={item.name}
+                            disabled={item.version === 1 || model().busy}
+                            label={<span class="settings-v2-wsl-distro-label">{item.name}</span>}
+                            description={
+                              <Show when={status()}>
+                                {(value) => (
+                                  <span class="settings-v2-wsl-distro-status" data-tone={value().tone}>
+                                    {translate(language, value().label)}
+                                  </span>
+                                )}
+                              </Show>
+                            }
+                          />
+                        )
+                      }}
+                    </For>
+                  </RadioGroupV2>
+                </div>
+              </Show>
+
+              <Show when={model().installableDistros.length > 0}>
+                <button
+                  type="button"
+                  class="settings-v2-wsl-catalog-card"
+                  disabled={model().busy}
+                  onClick={controller.openCatalog}
+                >
+                  <span class="settings-v2-wsl-catalog-icon" aria-hidden="true">
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.5564 10.4443V13.5554H4.22309C3.24087 13.5554 2.44531 13.5554 2.44531 13.5554V10.4443M11.112 5.99989L8.00087 9.111L4.88976 5.99989M8.00087 9.111L8.00087 2.44434"
+                        stroke="currentColor"
+                      />
+                    </svg>
+                  </span>
+                  <span class="settings-v2-wsl-catalog-copy">
+                    <span class="settings-v2-wsl-catalog-title">{language.t("wsl.onboarding.needAnotherDistro")}</span>
+                    <span class="settings-v2-wsl-catalog-description">
+                      {language.t("wsl.onboarding.needAnotherDistroHint")}
+                    </span>
+                  </span>
+                  <span class="settings-v2-wsl-catalog-chevron" aria-hidden="true">
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M6 12L10 8L6 4" stroke="currentColor" />
+                    </svg>
+                  </span>
+                </button>
+              </Show>
+            </DialogBody>
+
+            <DialogFooter>
+              <ButtonV2 variant="neutral" disabled={controller.adding()} onClick={controller.close}>
+                {language.t("common.cancel")}
+              </ButtonV2>
+              <ButtonV2
+                variant={primaryButton().loading ? "loading" : primaryButton().variant}
+                disabled={!primaryButton().loading && primaryButton().disabled}
+                style={primaryButtonStyle()}
+                onClick={controller.runPrimary}
+              >
+                <Show when={primaryButton().loading} fallback={translate(language, primaryButton().label)}>
+                  <LoaderV2 />
+                </Show>
+              </ButtonV2>
+            </DialogFooter>
+          </Show>
+        </Dialog>
+      </Show>
+    </Show>
+  )
+}
+
+function useWslAddServerController(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,
+    view: "main" as "main" | "catalog",
     selectedDistro: null as string | null,
-    installTarget: undefined as string | undefined,
+    catalogSearch: "",
+    catalogTarget: null as string | null,
     adding: false,
   })
   const current = () => wslServers.data
-  let disposed = false
-  onCleanup(() => {
-    disposed = true
+  const viewModel = (probingAddable: boolean) =>
+    addServerViewModel({
+      state: current(),
+      view: store.view,
+      selectedDistro: store.selectedDistro,
+      catalogSearch: store.catalogSearch,
+      catalogTarget: store.catalogTarget,
+      adding: store.adding,
+      probingAddable,
+    })
+  const baseModel = createMemo(() => viewModel(false))
+  const probes = useWslAddServerProbes({
+    state: current,
+    api,
+    view: () => store.view,
+    adding: () => store.adding,
+    busy: () => baseModel().busy,
+    selectedDistro: () => baseModel().selectedDistro,
+    addableInstalledDistros: () => baseModel().addableInstalledDistros,
+    onError: (error) => requestError(language, error),
   })
-  const busy = createMemo(() => !!current()?.job || store.adding)
-  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 existingServerDistros = createMemo(() => new Set((current()?.servers ?? []).map((item) => item.config.distro)))
-  const addableInstalledDistros = createMemo(() => {
-    return visibleInstalledDistros().filter((item) => !existingServerDistros().has(item.name))
-  })
-  const selectedDistro = createMemo(() => {
-    if (store.selectedDistro && addableInstalledDistros().some((item) => item.name === store.selectedDistro)) {
-      return store.selectedDistro
-    }
-    const distro = defaultInstalledDistro()
-    if (distro && !existingServerDistros().has(distro.name)) return distro.name
-    return null
-  })
-  const selectedProbe = createMemo(() => {
-    const distro = selectedDistro()
-    if (!distro) return null
-    return current()?.distroProbes[distro] ?? null
-  })
-  const selectedInstalled = createMemo(() => {
-    const distro = selectedDistro()
-    if (!distro) return null
-    return (current()?.installed ?? []).find((item) => item.name === distro) ?? null
-  })
-  const opencodeCheck = createMemo(() => {
-    const distro = selectedDistro()
-    if (!distro) return null
-    return current()?.opencodeChecks[distro] ?? null
-  })
-  const wslReady = createMemo(() => !!current()?.runtime?.available && !current()?.pendingRestart)
-  const distroReady = createMemo(() => {
-    const probe = selectedProbe()
-    if (!probe || !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 distroWarningProbe = createMemo(() => {
-    const probe = selectedProbe()
-    if (!probe) return null
-    if (distroReady()) return null
-    return probe
-  })
-  const distroUnavailableMessage = createMemo(() => {
-    const probe = distroWarningProbe()
-    const distro = selectedDistro()
-    if (!probe || probe.canExecute || !distro) return null
-    if (!selectedInstalled()) return language.t("wsl.onboarding.distroNotInstalled", { distro })
-    return language.t("wsl.onboarding.openDistroOnce", { distro })
-  })
-  const distroMissingTools = createMemo(() => {
-    const probe = distroWarningProbe()
-    if (!probe?.canExecute) return null
-    if (probe.hasBash && probe.hasCurl) return null
-    return probe
-  })
-  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) ?? installableDistros()[0] ?? null,
-  )
-  const installingDistro = createMemo(() => current()?.job?.kind === "install-distro")
-  const installingOpencode = createMemo(() => {
-    const job = current()?.job
-    return job?.kind === "install-opencode" && job.distro === selectedDistro()
-  })
-  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 model = createMemo(() => viewModel(probes.probingAddable()))
 
-  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 = 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)
-      }
-    })()
-  })
-
-  const wslMessage = createMemo(() => {
-    const state = current()
-    if (!state || state.job?.kind === "runtime") return language.t("wsl.onboarding.checkingRuntime")
-    if (state.pendingRestart) return language.t("wsl.onboarding.restartRequired")
-    if (state.runtime?.available) return state.runtime.version ?? language.t("wsl.onboarding.ready")
-    return state.runtime?.error ?? language.t("wsl.onboarding.required")
-  })
-
-  const distroMessage = createMemo(() => {
-    const state = current()
-    if (!state) return language.t("wsl.onboarding.checkingDistros")
-    const distro = selectedDistro()
-    if (state.job?.kind === "install-distro")
-      return language.t("wsl.onboarding.installingDistro", { distro: state.job.distro })
-    if (state.job?.kind === "probe-distro")
-      return language.t("wsl.onboarding.checkingDistro", { distro: state.job.distro })
-    if (state.job?.kind === "distros") return language.t("wsl.onboarding.listingDistros")
-    if (distroUnavailableMessage()) return distroUnavailableMessage()!
-    if (selectedProbe() && distroReady())
-      return language.t("wsl.onboarding.distroReady", { distro: selectedProbe()!.name })
-    if (distro) return language.t("wsl.onboarding.finishingDistro", { distro })
-    return language.t("wsl.onboarding.pickDistro")
-  })
-
-  const opencodeMessage = createMemo(() => {
-    const state = current()
-    if (!state) return language.t("wsl.onboarding.checkingOpencode")
-    const distro = selectedDistro()
-    if (state.job?.kind === "install-opencode") {
-      return distro
-        ? language.t("wsl.onboarding.updatingOpencodeIn", { distro })
-        : language.t("wsl.onboarding.updatingOpencode")
-    }
-    if (state.job?.kind === "probe-opencode") {
-      return distro
-        ? language.t("wsl.onboarding.checkingOpencodeIn", { distro })
-        : language.t("wsl.onboarding.checkingOpencode")
-    }
-    if (opencodeCheck()?.error) return opencodeCheck()!.error
-    if (opencodeCheck()?.matchesDesktop === false) {
-      return distro
-        ? language.t("wsl.onboarding.updateOpencodeIn", { distro })
-        : language.t("wsl.onboarding.updateOpencode")
-    }
-    if (opencodeReady()) {
-      return distro
-        ? language.t("wsl.onboarding.opencodeReadyIn", { distro })
-        : language.t("wsl.onboarding.opencodeReady")
-    }
-    return distro
-      ? language.t("wsl.onboarding.installOpencodeIn", { distro })
-      : language.t("wsl.onboarding.chooseDistroFirst")
-  })
+  const openCatalog = () => {
+    const first = model().installableDistros[0]
+    setStore({
+      view: "catalog",
+      catalogSearch: "",
+      catalogTarget: first?.name ?? null,
+    })
+  }
 
   const run = async (action: () => Promise<unknown>) => {
     try {
@@ -235,26 +302,43 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
     }
   }
 
-  const runSelectedDistro = (action: (distro: string) => Promise<unknown>) => {
-    const distro = selectedDistro()
-    if (!distro) return
-    void run(() => action(distro))
+  const refreshDistros = () => {
+    void run(async () => {
+      probes.resetProbeFailure()
+      await api.refreshDistros()
+    })
   }
 
-  const selectDistro = (name: string) => {
-    setStore("selectedDistro", name)
-    setStore("step", undefined)
+  const installDistro = (name: string) => {
+    void run(async () => {
+      probes.resetProbeFailure()
+      await api.installDistro(name)
+      setStore("view", "main")
+    })
   }
 
-  const openOpencodeStep = () => {
-    const distro = selectedDistro()
-    if (!distro) return
-    void run(() => enterWslOpencodeStep(distro, api.probeOpencode, (step) => setStore("step", step)))
+  const installCatalogDistro = () => {
+    if (model().installingCatalogDistro) return
+    const name = model().catalogTarget
+    if (!name) return
+    installDistro(name)
   }
 
-  const finish = async () => {
-    const distro = selectedDistro()
-    if (!distro) return
+  const closeCatalog = () => {
+    probes.resetProbeFailure()
+    setStore({ view: "main", catalogSearch: "", catalogTarget: null })
+  }
+
+  const runPrimary = async () => {
+    const button = model().primaryButton
+    if (button.loading) return
+    const distro = model().selectedDistro
+    const action = button.action
+    if (!distro || !action) return
+    if (action === "install-opencode") {
+      await run(() => api.installOpencode(distro))
+      return
+    }
     setStore("adding", true)
     try {
       await api.addServer(distro)
@@ -270,346 +354,103 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
     }
   }
 
-  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"
-            ? language.t("wsl.server.label")
-            : step === "distro"
-              ? language.t("wsl.onboarding.step.distro")
-              : language.t("wsl.onboarding.step.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 loadError = () => {
     const error = wslServers.error
     if (!error) return language.t("wsl.onboarding.loadFailed")
     return error instanceof Error ? error.message : String(error)
-  })
+  }
+
+  return {
+    wslServers,
+    model,
+    loadError,
+    runtimeError: () => current()?.runtime?.error ?? null,
+    view: () => store.view,
+    catalogSearch: () => store.catalogSearch,
+    adding: () => store.adding,
+    setCatalogSearch: (value: string) => setStore("catalogSearch", value),
+    setCatalogTarget: (value: string) => setStore("catalogTarget", value),
+    setSelectedDistro: (value: string) => setStore("selectedDistro", value),
+    openCatalog,
+    closeCatalog,
+    refreshDistros,
+    installCatalogDistro,
+    installWsl: () => void run(() => api.installWsl()),
+    runPrimary: () => void runPrimary(),
+    close: () => dialog.close(),
+  }
+}
+
+function DialogWslSetup(props: {
+  state: string
+  error: string | null
+  installable: boolean
+  busy: boolean
+  onInstall: () => void
+}) {
+  const language = useLanguage()
+  const dialog = useDialog()
+  const title = () =>
+    props.state === "pendingRestart"
+      ? language.t("wsl.onboarding.restartRequired")
+      : props.installable
+        ? language.t("wsl.onboarding.wslNotInstalled.title")
+        : language.t("wsl.onboarding.wslUnavailable.title")
+  const description = () => {
+    if (props.state === "pendingRestart") return language.t("wsl.onboarding.windowsRestartRequired")
+    if (!props.installable) return language.t("wsl.onboarding.wslUnavailable.description")
+    return language.t("wsl.onboarding.wslNotInstalled.description")
+  }
 
   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">{language.t("wsl.onboarding.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">{language.t("wsl.server.label")}</div>
-                  <Show when={current()?.runtime && !wslReady() && !current()?.pendingRestart}>
-                    <Button
-                      variant="secondary"
-                      size="large"
-                      disabled={busy()}
-                      onClick={() => void run(() => api.installWsl())}
-                    >
-                      {language.t("wsl.onboarding.installWsl")}
-                    </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">
-                    <div class="text-12-regular text-text-warning-base">
-                      {language.t("wsl.onboarding.windowsRestartRequired")}
-                    </div>
-                  </div>
-                </Show>
-                <div class="flex items-center justify-end">
-                  <Button
-                    variant="secondary"
-                    size="large"
-                    disabled={busy() || !wslReady()}
-                    onClick={() => setStore("step", "distro")}
-                  >
-                    {language.t("wsl.onboarding.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">{language.t("wsl.onboarding.step.distro")}</div>
-                  <Show when={selectedDistro()}>
-                    <Button
-                      variant="ghost"
-                      size="small"
-                      disabled={busy()}
-                      onClick={() => runSelectedDistro((distro) => api.probeDistro(distro))}
-                    >
-                      {language.t("wsl.onboarding.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
-                          ? language.t("wsl.onboarding.allDistrosAdded")
-                          : current()?.runtime?.available
-                            ? language.t("wsl.onboarding.noDistros")
-                            : language.t("wsl.onboarding.checkingDistros")}
-                      </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": 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">{language.t("common.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">{language.t("wsl.onboarding.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()
-                            ? language.t("wsl.onboarding.installing")
-                            : language.t("wsl.onboarding.install")}
-                        </Button>
-                      </div>
-                    </div>
-                    <div
-                      role="radiogroup"
-                      aria-label={language.t("wsl.onboarding.installDistro")}
-                      class="max-h-52 overflow-y-auto rounded-md bg-background-base"
-                    >
-                      <For each={installableDistros()}>
-                        {(item) => {
-                          const selected = () => installTarget()?.name === 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">
-                        {language.t("wsl.onboarding.wsl2Required")}
-                      </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">
-                        {language.t("wsl.onboarding.toolsRequired")}
-                      </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))}
-                  >
-                    {language.t("wsl.onboarding.openTerminal")}
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="large"
-                    disabled={busy() || !selectedDistro()}
-                    onClick={() => runSelectedDistro((distro) => api.probeDistro(distro))}
-                  >
-                    {language.t("wsl.onboarding.refresh")}
-                  </Button>
-                </div>
-
-                <div class="flex items-center justify-end">
-                  <Button
-                    variant="secondary"
-                    size="large"
-                    disabled={busy() || !selectedDistro() || !distroReady()}
-                    onClick={openOpencodeStep}
-                  >
-                    {language.t("wsl.onboarding.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">{language.t("wsl.onboarding.step.opencode")}</div>
-                  <div class="flex items-center gap-2">
-                    <Show when={selectedDistro()}>
-                      <Button
-                        variant="ghost"
-                        size="large"
-                        disabled={busy()}
-                        onClick={() => runSelectedDistro((distro) => api.probeOpencode(distro))}
-                      >
-                        {language.t("wsl.onboarding.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
-                          ? language.t("wsl.onboarding.updateOpencode")
-                          : language.t("wsl.onboarding.installOpencode")}
-                      </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">
-                        {language.t("wsl.onboarding.path", {
-                          path: check().resolvedPath ?? language.t("wsl.onboarding.notFound"),
-                        })}
-                      </div>
-                      <div class="text-12-regular text-text-weak">
-                        {language.t("wsl.onboarding.version", {
-                          version: check().version ?? language.t("wsl.onboarding.unknown"),
-                        })}
-                        <Show when={check().expectedVersion}>
-                          {(expected) => (
-                            <span>{` · ${language.t("wsl.onboarding.desktopVersion", { version: expected() })}`}</span>
-                          )}
-                        </Show>
-                      </div>
-                      <div class="text-12-regular text-text-warning-base">
-                        {language.t("wsl.onboarding.versionMismatch")}
-                      </div>
-                    </div>
-                  )}
-                </Show>
-              </div>
-            </Match>
-          </Switch>
-
-          <Show when={activeStep() === "opencode" && allReady() && selectedDistro()}>
-            <div class="flex items-center justify-end gap-2">
-              <Button variant="ghost" size="large" disabled={store.adding} onClick={() => dialog.close()}>
-                {language.t("common.cancel")}
-              </Button>
-              <Button variant="primary" size="large" disabled={addDisabled()} onClick={() => void finish()}>
-                {store.adding ? language.t("wsl.onboarding.adding") : language.t("wsl.server.add")}
-              </Button>
-            </div>
+    <Dialog fit class="settings-v2-wsl-not-installed-dialog">
+      <div class="settings-v2-wsl-not-installed-content">
+        <div class="settings-v2-wsl-not-installed-message">
+          <svg
+            class="settings-v2-wsl-not-installed-icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <g clip-path="url(#settings-v2-wsl-warning-clip)">
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M12 -0.00244141L23.6926 20.2498H0.308594L12 -0.00244141ZM12.7954 6.32932C12.5844 6.11834 12.2982 5.99982 11.9999 5.99982C11.7015 5.99982 11.4154 6.11834 11.2044 6.32932C10.9934 6.5403 10.8749 6.82645 10.8749 7.12482V11.6248C10.8749 11.9232 10.9934 12.2093 11.2044 12.4203C11.4154 12.6313 11.7015 12.7498 11.9999 12.7498C12.2982 12.7498 12.5844 12.6313 12.7954 12.4203C13.0064 12.2093 13.1249 11.9232 13.1249 11.6248V7.12482C13.1249 6.82645 13.0064 6.5403 12.7954 6.32932ZM13.0605 17.5605C12.7792 17.8418 12.3977 17.9998 11.9999 17.9998C11.6021 17.9998 11.2205 17.8418 10.9392 17.5605C10.6579 17.2792 10.4999 16.8976 10.4999 16.4998C10.4999 16.102 10.6579 15.7205 10.9392 15.4392C11.2205 15.1579 11.6021 14.9998 11.9999 14.9998C12.3977 14.9998 12.7792 15.1579 13.0605 15.4392C13.3418 15.7205 13.4999 16.102 13.4999 16.4998C13.4999 16.8976 13.3418 17.2792 13.0605 17.5605Z"
+                fill="#DBDBDB"
+              />
+            </g>
+            <defs>
+              <clipPath id="settings-v2-wsl-warning-clip">
+                <rect width="24" height="24" fill="white" />
+              </clipPath>
+            </defs>
+          </svg>
+          <h2 class="settings-v2-wsl-not-installed-title">{title()}</h2>
+          <p class="settings-v2-wsl-not-installed-description">{description()}</p>
+          <Show when={!props.installable && props.error}>
+            <p class="settings-v2-wsl-unavailable-error">{props.error}</p>
           </Show>
+        </div>
+        <Show when={props.state === "unavailable" && props.installable}>
+          <ButtonV2
+            variant="neutral"
+            disabled={props.busy}
+            onClick={props.onInstall}
+          >
+            {language.t("wsl.onboarding.installWsl")}
+          </ButtonV2>
         </Show>
-      </Show>
-    </div>
+        <Show when={props.state !== "unavailable"}>
+          <ButtonV2 variant="neutral" onClick={() => dialog.close()}>
+            {language.t("common.close")}
+          </ButtonV2>
+        </Show>
+      </div>
+    </Dialog>
   )
 }
 

packages/app/src/wsl/dialog-add-wsl-server.css

@@ -0,0 +1,392 @@
+[data-component="dialog-v2"].settings-v2-wsl-dialog [data-slot="dialog-container"] {
+  width: 480px;
+  max-width: calc(100vw - 32px);
+  height: auto;
+  align-items: stretch;
+}
+
+[data-component="dialog-v2"].settings-v2-wsl-dialog [data-slot="dialog-content"] {
+  align-items: stretch;
+  width: 100%;
+  overflow: hidden;
+}
+
+[data-component="dialog-v2"].settings-v2-wsl-dialog [data-slot="dialog-header"] {
+  align-items: center;
+  padding: 24px 16px 0;
+}
+
+[data-component="dialog-v2"].settings-v2-wsl-dialog [data-slot="dialog-body"] {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 0;
+  gap: 0;
+}
+
+.settings-v2-wsl-dialog-body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  min-width: 0;
+  align-self: stretch;
+  box-sizing: border-box;
+  padding: 16px 16px 1px;
+}
+
+[data-component="dialog-v2"].settings-v2-wsl-dialog [data-slot="dialog-footer"] {
+  padding: 0 16px 24px;
+  margin-top: 8px;
+}
+
+[data-component="dialog-v2"].settings-v2-wsl-not-installed-dialog [data-slot="dialog-container"] {
+  width: 480px;
+  max-width: calc(100vw - 32px);
+  min-height: 264px;
+  height: auto;
+  background: var(--v2-background-bg-layer-01);
+  box-shadow: var(--v2-elevation-overlay);
+  border-radius: 10px;
+}
+
+[data-component="dialog-v2"].settings-v2-wsl-not-installed-dialog [data-slot="dialog-content"] {
+  align-items: stretch;
+  min-height: 264px;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+[data-component="dialog-v2"].settings-v2-wsl-not-installed-dialog [data-slot="dialog-body"] {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  padding: 0;
+}
+
+.settings-v2-wsl-not-installed-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 56px 0;
+  gap: 24px;
+  text-align: center;
+}
+
+.settings-v2-wsl-not-installed-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 8px;
+}
+
+.settings-v2-wsl-not-installed-icon {
+  flex: none;
+  flex-shrink: 0;
+}
+
+.settings-v2-wsl-not-installed-title {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  font-style: normal;
+  font-weight: 530;
+  font-size: 15px;
+  line-height: 20px;
+  letter-spacing: -0.13px;
+  font-variant-numeric: tabular-nums;
+  font-variation-settings: "slnt" 0;
+  color: var(--v2-text-text-base);
+}
+
+.settings-v2-wsl-not-installed-description {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 300px;
+  margin: 0;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 13px;
+  line-height: 20px;
+  text-align: center;
+  letter-spacing: -0.04px;
+  font-variant-numeric: tabular-nums;
+  font-variation-settings: "slnt" 0;
+  color: var(--v2-text-text-muted);
+}
+
+.settings-v2-wsl-unavailable-error {
+  width: 100%;
+  max-width: 360px;
+  margin: 4px 0 0;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 12px;
+  line-height: 18px;
+  text-align: center;
+  letter-spacing: -0.04px;
+  font-variant-numeric: tabular-nums;
+  font-variation-settings: "slnt" 0;
+  color: var(--v2-text-text-faint);
+  overflow-wrap: anywhere;
+}
+
+.settings-v2-wsl-section-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex: none;
+  align-self: stretch;
+  gap: 12px;
+  height: 24px;
+  padding: 0 0 0 9px;
+}
+
+.settings-v2-wsl-section-title {
+  flex: none;
+  user-select: none;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 13px;
+  line-height: 16px;
+  letter-spacing: -0.04px;
+  font-variation-settings: "slnt" 0;
+  color: var(--v2-text-text-base);
+}
+
+.settings-v2-wsl-distro-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: none;
+  align-self: stretch;
+  width: 100%;
+  height: fit-content;
+  max-height: 220px;
+  padding: 0;
+  border-radius: 8px;
+  background: var(--v2-background-bg-base);
+  box-shadow: var(--v2-elevation-raised);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.settings-v2-wsl-distro-group {
+  width: 100%;
+}
+
+.settings-v2-wsl-distro-group [data-slot="radio-v2-items"] {
+  width: 100%;
+  gap: 0;
+}
+
+.settings-v2-wsl-distro-row {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 62px;
+  padding: 14px 14px 14px 16px;
+  border-bottom: 0.5px solid var(--v2-border-border-base);
+}
+
+.settings-v2-wsl-distro-row:last-child {
+  border-bottom: none;
+}
+
+.settings-v2-wsl-distro-row [data-slot="radio-v2-item-label"] {
+  position: relative;
+  display: flex;
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  align-self: stretch;
+}
+
+.settings-v2-wsl-distro-row [data-slot="radio-v2-item-label"]::before {
+  content: "";
+  position: absolute;
+  inset: -14px -14px -14px -44px;
+}
+
+.settings-v2-wsl-distro-row [data-slot="radio-v2-item-text"] {
+  width: 100%;
+}
+
+.settings-v2-wsl-distro-label {
+  font-style: normal;
+  font-weight: 440;
+  font-size: 13px;
+  line-height: 16px;
+  letter-spacing: -0.04px;
+  font-variant-numeric: tabular-nums;
+  font-variation-settings: "slnt" 0;
+  color: inherit;
+}
+
+.settings-v2-wsl-distro-status {
+  flex: none;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 12px;
+  line-height: 12px;
+  letter-spacing: 0.05px;
+  font-variant-numeric: tabular-nums;
+  font-variation-settings: "slnt" 0;
+}
+
+.settings-v2-wsl-distro-status[data-tone="success"] {
+  color: var(--v2-state-fg-success);
+}
+
+.settings-v2-wsl-distro-status[data-tone="warning"] {
+  color: var(--v2-state-fg-warning);
+}
+
+.settings-v2-wsl-distro-status[data-tone="muted"] {
+  color: var(--v2-text-text-muted);
+}
+
+.settings-v2-wsl-distro-row:where([data-disabled]) .settings-v2-wsl-distro-status {
+  color: inherit;
+}
+
+.settings-v2-wsl-distro-empty {
+  padding: 16px;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 1.4;
+  color: var(--v2-text-text-muted);
+}
+
+.settings-v2-wsl-catalog-card {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  flex: none;
+  align-self: stretch;
+  gap: 12px;
+  width: 100%;
+  min-height: 64px;
+  padding: 14px 14px 16px 16px;
+  border: 0.5px solid var(--v2-border-border-base);
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+}
+
+.settings-v2-wsl-catalog-card:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 2px;
+}
+
+.settings-v2-wsl-catalog-card:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.settings-v2-wsl-catalog-icon {
+  display: flex;
+  flex: none;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--v2-icon-icon-base);
+}
+
+.settings-v2-wsl-catalog-copy {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 6px;
+}
+
+.settings-v2-wsl-catalog-title {
+  user-select: none;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 13px;
+  line-height: 16px;
+  letter-spacing: -0.04px;
+  font-variation-settings: "slnt" 0;
+  color: var(--v2-text-text-base);
+}
+
+.settings-v2-wsl-catalog-description {
+  user-select: none;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 12px;
+  line-height: 12px;
+  letter-spacing: 0.05px;
+  font-variation-settings: "slnt" 0;
+  color: var(--v2-text-text-muted);
+}
+
+.settings-v2-wsl-catalog-chevron {
+  display: flex;
+  flex: none;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--v2-icon-icon-muted);
+}
+
+.settings-v2-wsl-catalog-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: none;
+  align-self: stretch;
+  width: 100%;
+  height: fit-content;
+  max-height: 220px;
+  padding: 0;
+  border-radius: 8px;
+  box-shadow: inset 0 0 0 0.5px var(--v2-border-border-strong);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.settings-v2-wsl-catalog-picker {
+  gap: 12px;
+}
+
+.settings-v2-wsl-catalog-search {
+  width: 100%;
+}
+
+.settings-v2-wsl-catalog-row {
+  min-height: 48px;
+}
+
+.settings-v2-wsl-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 1;
+  color: var(--v2-text-text-muted);
+  text-align: center;
+}

packages/app/src/wsl/settings-model.test.ts

@@ -1,5 +1,31 @@
 import { describe, expect, test } from "bun:test"
-import { enterWslOpencodeStep, wslOpencodeAction, wslRuntimeRetryable } from "./settings-model"
+import {
+  addableProbePlan,
+  addServerProbePlan,
+  addServerViewModel,
+  autoProbePlan,
+  createProbeFailureGate,
+  runAddableProbePlan,
+  wslOpencodeAction,
+  wslRuntimeRetryable,
+} from "./settings-model"
+import type { WslServersState } from "./types"
+
+const readyWslState = readyState()
+
+function readyState(input: Partial<WslServersState> = {}): WslServersState {
+  return {
+    runtime: { available: true, version: "2.4.13.0", error: null },
+    installed: [],
+    online: [],
+    distroProbes: {},
+    opencodeChecks: {},
+    pendingRestart: false,
+    servers: [],
+    job: null,
+    ...input,
+  }
+}
 
 describe("WSL server settings presentation", () => {
   test("retries only settled unsuccessful runtimes", () => {
@@ -45,13 +71,161 @@ describe("WSL server settings presentation", () => {
     ).toBeUndefined()
   })
 
-  test("probes the selected distro before entering the OpenCode step", async () => {
-    const calls: string[] = []
-    await enterWslOpencodeStep(
-      "Debian",
-      async (distro) => calls.push(distro),
-      (step) => calls.push(step),
-    )
-    expect(calls).toEqual(["Debian", "opencode"])
+  test("plans addable distro probes with the selected distro first", () => {
+    const plan = addableProbePlan({
+      state: readyWslState,
+      view: "main",
+      adding: false,
+      selectedDistro: "Ubuntu",
+      addableInstalledDistros: [
+        { name: "Debian", version: 2, isDefault: true },
+        { name: "Ubuntu", version: 2, isDefault: false },
+      ],
+    })
+
+    expect(plan?.key).toBe("distro:Ubuntu|distro:Debian")
+    expect(plan?.distros).toEqual(["Ubuntu", "Debian"])
+  })
+
+  test("plans bootstrap probes for missing runtime and initial distro lists", () => {
+    expect(autoProbePlan({ state: undefined, busy: false })).toBeUndefined()
+    expect(autoProbePlan({ state: { ...readyWslState, runtime: null }, busy: false })).toEqual({
+      key: "runtime",
+      action: "probeRuntime",
+    })
+    expect(autoProbePlan({ state: readyWslState, busy: false })).toEqual({
+      key: "distros",
+      action: "refreshDistros",
+    })
+  })
+
+  test("uses one command plan for bootstrap before addable distro probing", () => {
+    expect(
+      addServerProbePlan({
+        state: { ...readyWslState, runtime: null },
+        view: "main",
+        adding: false,
+        busy: false,
+        selectedDistro: null,
+        addableInstalledDistros: [{ name: "Debian", version: 2, isDefault: true }],
+      }),
+    ).toEqual({ kind: "auto", key: "auto:runtime", plan: { key: "runtime", action: "probeRuntime" } })
+
+    expect(
+      addServerProbePlan({
+        state: {
+          ...readyWslState,
+          installed: [{ name: "Debian", version: 2, isDefault: true }],
+          online: [{ name: "Ubuntu", label: "Ubuntu" }],
+        },
+        view: "main",
+        adding: false,
+        busy: false,
+        selectedDistro: "Debian",
+        addableInstalledDistros: [{ name: "Debian", version: 2, isDefault: true }],
+      }),
+    ).toEqual({ kind: "addable", key: "addable:distro:Debian", plan: { key: "distro:Debian", distros: ["Debian"] } })
+  })
+
+  test("does not accept the same failed probe command until reset", () => {
+    const gate = createProbeFailureGate()
+
+    expect(gate.accepts("addable:distro:Debian")).toBe(true)
+    gate.settle("addable:distro:Debian", new Error("wsl failed"))
+    expect(gate.accepts("addable:distro:Debian")).toBe(false)
+    expect(gate.accepts("addable:distro:Ubuntu")).toBe(true)
+    gate.reset()
+    expect(gate.accepts("addable:distro:Debian")).toBe(true)
+  })
+
+  test("keeps default distro selection stable while probes resolve", () => {
+    const model = addServerViewModel({
+      state: {
+        ...readyWslState,
+        installed: [
+          { name: "Debian", version: 2, isDefault: true },
+          { name: "Ubuntu", version: 2, isDefault: false },
+        ],
+        online: [{ name: "Alpine", label: "Alpine Linux" }],
+        distroProbes: {
+          Ubuntu: { name: "Ubuntu", canExecute: true, hasBash: true, hasCurl: true, error: null },
+        },
+      },
+      view: "main",
+      selectedDistro: null,
+      catalogSearch: "",
+      catalogTarget: null,
+      adding: false,
+      probingAddable: false,
+    })
+
+    expect(model.selectedDistro).toBe("Debian")
+  })
+
+  test("keeps the dialog busy across serial addable probe job gaps", () => {
+    const model = addServerViewModel({
+      state: readyState({
+        installed: [{ name: "Debian", version: 2, isDefault: true }],
+        online: [{ name: "Ubuntu", label: "Ubuntu" }],
+      }),
+      view: "main",
+      selectedDistro: null,
+      catalogSearch: "",
+      catalogTarget: null,
+      adding: false,
+      probingAddable: true,
+    })
+
+    expect(model.busy).toBe(true)
+  })
+
+  test("does not report ready when OpenCode is present but cannot run", () => {
+    const model = addServerViewModel({
+      state: {
+        ...readyWslState,
+        installed: [{ name: "Debian", version: 2, isDefault: true }],
+        online: [{ name: "Ubuntu", label: "Ubuntu" }],
+        distroProbes: {
+          Debian: { name: "Debian", canExecute: true, hasBash: true, hasCurl: true, error: null },
+        },
+        opencodeChecks: {
+          Debian: {
+            distro: "Debian",
+            resolvedPath: "/home/me/.opencode/bin/opencode",
+            version: null,
+            expectedVersion: "1.2.3",
+            matchesDesktop: null,
+            error: "opencode is installed but could not run",
+          },
+        },
+      },
+      view: "main",
+      selectedDistro: null,
+      catalogSearch: "",
+      catalogTarget: null,
+      adding: false,
+      probingAddable: false,
+    })
+
+    expect(model.distroStatuses.Debian).toEqual({
+      label: { key: "wsl.onboarding.installOpencode" },
+      tone: "warning",
+    })
+    expect(model.primaryButton.action).toBe("install-opencode")
+  })
+
+  test("delegates addable probe plans to one batch command", async () => {
+    const calls: string[][] = []
+
+    await runAddableProbePlan({
+      plan: { key: "distro:Debian|distro:Ubuntu", distros: ["Debian", "Ubuntu"] },
+      api: {
+        probeAddable: async (distros) => {
+          calls.push(distros)
+        },
+      },
+    })
+
+    expect(calls).toEqual([["Debian", "Ubuntu"]])
   })
 })

packages/app/src/wsl/settings-model.ts

@@ -1,19 +1,343 @@
-import type { WslOpencodeCheck, WslServerRuntime } from "./types"
+import fuzzysort from "fuzzysort"
+import type {
+  WslInstalledDistro,
+  WslOnlineDistro,
+  WslOpencodeCheck,
+  WslServersPlatform,
+  WslServerRuntime,
+  WslServersState,
+} from "./types"
+
+export type AddServerText = {
+  key: string
+  params?: Record<string, string>
+}
+
+export type DistroStatusTone = "success" | "warning" | "muted"
+
+export type DistroStatus = {
+  label: AddServerText
+  tone: DistroStatusTone
+}
+
+export type AddServerPrimaryButton = {
+  variant: "neutral" | "contrast"
+  label: AddServerText
+  disabled: boolean
+  action: "install-opencode" | "add" | null
+  loading: boolean
+  width: string | null
+}
+
+export type AddServerRuntimeState = "loading" | "pendingRestart" | "checking" | "unavailable" | "ready"
+
+export type AddableProbePlan = {
+  key: string
+  distros: string[]
+}
+
+export type AutoProbePlan =
+  | { key: "runtime"; action: "probeRuntime" }
+  | { key: "distros"; action: "refreshDistros" }
+
+export type AddServerProbePlan =
+  | { kind: "auto"; key: string; plan: AutoProbePlan }
+  | { kind: "addable"; key: string; plan: AddableProbePlan }
+
+export type WslAddServerView = "main" | "catalog"
+
+function isHiddenDistro(name: string) {
+  return /^docker-desktop(?:-data)?$/i.test(name)
+}
 
 export const wslRuntimeRetryable = (runtime: WslServerRuntime) =>
   runtime.kind === "failed" || runtime.kind === "stopped"
 
-export async function enterWslOpencodeStep(
-  distro: string,
-  probe: (distro: string) => Promise<unknown>,
-  select: (step: "opencode") => void,
-) {
-  await probe(distro)
-  select("opencode")
-}
-
 export function wslOpencodeAction(check?: WslOpencodeCheck) {
   if (!check) return
   if (!check.resolvedPath) return "Install OpenCode"
   if (check.matchesDesktop === false) return "Update OpenCode"
 }
+
+export function wslDistroReady(state: WslServersState | undefined, name: string) {
+  const installed = state?.installed.find((item) => item.name === name)
+  const probe = state?.distroProbes[name]
+  if (!probe || !installed) return false
+  if (installed.version === 1) return false
+  return probe.canExecute && probe.hasBash && probe.hasCurl
+}
+
+export function addServerViewModel(input: {
+  state: WslServersState | undefined
+  view: WslAddServerView
+  selectedDistro: string | null
+  catalogSearch: string
+  catalogTarget: string | null
+  adding: boolean
+  probingAddable: boolean
+}) {
+  const state = input.state
+  const visibleInstalledDistros = (state?.installed ?? []).filter((item) => !isHiddenDistro(item.name))
+  const visibleOnlineDistros = (state?.online ?? []).filter((item) => !isHiddenDistro(item.name))
+  const existingServerDistros = new Set((state?.servers ?? []).map((item) => item.config.distro))
+  const addableInstalledDistros = visibleInstalledDistros.filter((item) => !existingServerDistros.has(item.name))
+  const selectedDistro = addServerSelectedDistro(input.selectedDistro, visibleInstalledDistros, addableInstalledDistros)
+  const opencodeCheck = selectedDistro ? (state?.opencodeChecks[selectedDistro] ?? null) : null
+  const installableDistros = addServerInstallableDistros(visibleInstalledDistros, visibleOnlineDistros)
+  const filteredInstallableDistros = addServerFilteredInstallableDistros(installableDistros, input.catalogSearch)
+  const catalogTarget = addServerCatalogTarget(input.catalogTarget, filteredInstallableDistros)
+  const busy = !!state?.job || input.adding || input.probingAddable
+
+  return {
+    busy,
+    runtimeState: addServerRuntimeState(state),
+    visibleInstalledDistros,
+    visibleOnlineDistros,
+    addableInstalledDistros,
+    selectedDistro,
+    opencodeCheck,
+    wslReady: !!state?.runtime?.available && !state?.pendingRestart,
+    distroStatuses: Object.fromEntries(
+      addableInstalledDistros.flatMap((item) => {
+        const status = addServerDistroStatus({ state, name: item.name, probingAddable: input.probingAddable })
+        if (!status) return []
+        return [[item.name, status]]
+      }),
+    ) as Record<string, DistroStatus | undefined>,
+    primaryButton: addServerPrimaryButton({
+      state,
+      selectedDistro,
+      opencodeCheck,
+      adding: input.adding,
+      probingAddable: input.probingAddable,
+    }),
+    installableDistros,
+    filteredInstallableDistros,
+    catalogTarget,
+    installingCatalogDistro: state?.job?.kind === "install-distro",
+  }
+}
+
+function addServerSelectedDistro(
+  selected: string | null,
+  visibleInstalledDistros: WslInstalledDistro[],
+  addableInstalledDistros: WslInstalledDistro[],
+) {
+  if (selected && addableInstalledDistros.some((item) => item.name === selected && item.version !== 1)) return selected
+  const defaultDistro = visibleInstalledDistros.find((item) => item.isDefault)
+  if (
+    defaultDistro &&
+    defaultDistro.version !== 1 &&
+    addableInstalledDistros.some((item) => item.name === defaultDistro.name)
+  ) {
+    return defaultDistro.name
+  }
+  return addableInstalledDistros.find((item) => item.version !== 1)?.name ?? null
+}
+
+function addServerRuntimeState(state: WslServersState | undefined): AddServerRuntimeState {
+  if (!state) return "loading"
+  if (state.pendingRestart) return "pendingRestart"
+  if (!state.runtime) return "checking"
+  if (!state.runtime.available) return "unavailable"
+  return "ready"
+}
+
+function addServerDistroStatus(input: {
+  state: WslServersState | undefined
+  name: string
+  probingAddable: boolean
+}): DistroStatus | undefined {
+  const installed = input.state?.installed.find((item) => item.name === input.name)
+  if (installed?.version === 1) return { label: { key: "wsl.onboarding.distroStatus.unsupported" }, tone: "muted" }
+  const job = input.state?.job
+  const probe = input.state?.distroProbes[input.name]
+  if (!probe) {
+    if (input.probingAddable || (job?.kind === "probe-addable" && job.distros.includes(input.name))) {
+      return checkingStatus()
+    }
+    return
+  }
+  if (!probe.canExecute) {
+    if (!installed) {
+      return { label: { key: "wsl.onboarding.distroNotInstalled", params: { distro: input.name } }, tone: "warning" }
+    }
+    return { label: { key: "wsl.onboarding.openDistroOnce", params: { distro: input.name } }, tone: "warning" }
+  }
+  if (!probe.hasBash || !probe.hasCurl) {
+    return { label: { key: "wsl.onboarding.distroStatus.missingTools" }, tone: "warning" }
+  }
+  const check = input.state?.opencodeChecks[input.name]
+  if (!check) {
+    if (input.probingAddable || (job?.kind === "probe-addable" && job.distros.includes(input.name))) {
+      return checkingStatus()
+    }
+    return
+  }
+  if (check.matchesDesktop === false) return { label: { key: "wsl.onboarding.updateOpencode" }, tone: "warning" }
+  if (!check.resolvedPath) return { label: { key: "wsl.onboarding.distroStatus.opencodeMissing" }, tone: "warning" }
+  if (check.error) return { label: { key: "wsl.onboarding.installOpencode" }, tone: "warning" }
+  return { label: { key: "wsl.onboarding.distroStatus.ready" }, tone: "success" }
+}
+
+function checkingStatus(): DistroStatus {
+  return { label: { key: "wsl.onboarding.distroStatus.checking" }, tone: "muted" }
+}
+
+function addServerPrimaryButton(input: {
+  state: WslServersState | undefined
+  selectedDistro: string | null
+  opencodeCheck: WslOpencodeCheck | null
+  adding: boolean
+  probingAddable: boolean
+}): AddServerPrimaryButton {
+  const ready = !!input.selectedDistro && wslDistroReady(input.state, input.selectedDistro)
+  const probingSelected = input.probingAddable && !addServerSelectedDistroSettled(input.state, input.selectedDistro)
+  const probingOpencode =
+    probingSelected ||
+    (ready &&
+      (!input.opencodeCheck ||
+        (!!input.selectedDistro &&
+          input.state?.job?.kind === "probe-addable" &&
+          input.state.job.distros.includes(input.selectedDistro))))
+  const installingOpencode =
+    input.state?.job?.kind === "install-opencode" && input.state.job.distro === input.selectedDistro
+  if (!ready || probingOpencode) {
+    return {
+      variant: "contrast",
+      label: probingSelected ? { key: "wsl.onboarding.distroStatus.checking" } : { key: "wsl.server.add" },
+      disabled: true,
+      action: null,
+      loading: probingSelected,
+      width: null,
+    }
+  }
+  if (!addServerOpencodeReady(input.opencodeCheck)) {
+    const update = !!input.opencodeCheck?.resolvedPath && input.opencodeCheck.matchesDesktop === false
+    return {
+      variant: "neutral",
+      label: installingOpencode
+        ? { key: "wsl.onboarding.updatingOpencode" }
+        : update
+          ? { key: "wsl.onboarding.updateOpencode" }
+          : { key: "wsl.onboarding.installOpencode" },
+      disabled: !!input.state?.job || input.adding,
+      action: "install-opencode",
+      loading: installingOpencode,
+      width: update ? "138px" : "129px",
+    }
+  }
+  return {
+    variant: "contrast",
+    label: input.adding ? { key: "wsl.onboarding.adding" } : { key: "wsl.server.add" },
+    disabled: input.adding || !!input.state?.job,
+    action: "add",
+    loading: input.adding,
+    width: null,
+  }
+}
+
+function addServerOpencodeReady(check: WslOpencodeCheck | null) {
+  return !!check?.resolvedPath && check.matchesDesktop !== false && !check.error
+}
+
+function addServerSelectedDistroSettled(state: WslServersState | undefined, selectedDistro: string | null) {
+  if (!selectedDistro) return false
+  const installed = state?.installed.find((item) => item.name === selectedDistro)
+  if (installed?.version === 1) return false
+  if (!state?.distroProbes[selectedDistro]) return false
+  if (!wslDistroReady(state, selectedDistro)) return true
+  return !!state.opencodeChecks[selectedDistro]
+}
+
+function addServerInstallableDistros(installedDistros: WslInstalledDistro[], onlineDistros: WslOnlineDistro[]) {
+  const installed = new Set(installedDistros.map((item) => item.name))
+  const hasVersionedUbuntu = onlineDistros.some((item) => /^Ubuntu-\d/.test(item.name))
+  return onlineDistros
+    .filter((item) => !installed.has(item.name))
+    .filter((item) => item.name !== "Ubuntu" || !hasVersionedUbuntu)
+}
+
+function addServerFilteredInstallableDistros(installableDistros: WslOnlineDistro[], search: string) {
+  const query = search.trim()
+  if (!query) return installableDistros
+  return fuzzysort.go(query, installableDistros, { keys: ["label", "name"] }).map((item) => item.obj)
+}
+
+function addServerCatalogTarget(target: string | null, distros: WslOnlineDistro[]) {
+  if (target && distros.some((item) => item.name === target)) return target
+  return distros[0]?.name ?? null
+}
+
+export function addableProbePlan(input: {
+  state: WslServersState | undefined
+  view: WslAddServerView
+  adding: boolean
+  selectedDistro: string | null
+  addableInstalledDistros: WslInstalledDistro[]
+}) {
+  const state = input.state
+  if (!state?.runtime?.available || state.pendingRestart || input.view !== "main" || input.adding) return
+  if (state.job) return
+  const ordered = input.selectedDistro
+    ? [
+        ...input.addableInstalledDistros.filter((item) => item.name === input.selectedDistro),
+        ...input.addableInstalledDistros.filter((item) => item.name !== input.selectedDistro),
+      ]
+    : input.addableInstalledDistros
+  const pending = ordered.flatMap((item) => {
+    if (item.version === 1) return []
+    if (!state.distroProbes[item.name]) return [`distro:${item.name}`]
+    if (wslDistroReady(state, item.name) && !state.opencodeChecks[item.name]) return [`opencode:${item.name}`]
+    return []
+  })
+  if (!pending.length) return
+  return {
+    key: pending.join("|"),
+    distros: ordered.filter((item) => item.version !== 1).map((item) => item.name),
+  } satisfies AddableProbePlan
+}
+
+export function autoProbePlan(input: { state: WslServersState | undefined; busy: boolean }) {
+  if (!input.state || input.busy || input.state.pendingRestart) return
+  if (!input.state.runtime) return { key: "runtime", action: "probeRuntime" } satisfies AutoProbePlan
+  if (!input.state.runtime.available) return
+  if (input.state.installed.length || input.state.online.length) return
+  return { key: "distros", action: "refreshDistros" } satisfies AutoProbePlan
+}
+
+export function addServerProbePlan(input: {
+  state: WslServersState | undefined
+  view: WslAddServerView
+  adding: boolean
+  busy: boolean
+  selectedDistro: string | null
+  addableInstalledDistros: WslInstalledDistro[]
+}) {
+  const auto = autoProbePlan({ state: input.state, busy: input.busy })
+  if (auto) return { kind: "auto", key: `auto:${auto.key}`, plan: auto } satisfies AddServerProbePlan
+  const addable = addableProbePlan(input)
+  if (addable) return { kind: "addable", key: `addable:${addable.key}`, plan: addable } satisfies AddServerProbePlan
+}
+
+export function createProbeFailureGate() {
+  let failed: string | undefined
+  return {
+    accepts(key: string) {
+      return key !== failed
+    },
+    settle(key: string, error?: unknown) {
+      if (error) failed = key
+    },
+    reset() {
+      failed = undefined
+    },
+  }
+}
+
+export async function runAddableProbePlan(input: {
+  plan: AddableProbePlan
+  api: Pick<WslServersPlatform, "probeAddable">
+}) {
+  await input.api.probeAddable(input.plan.distros)
+}

packages/app/src/wsl/settings.tsx

@@ -1,8 +1,6 @@
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Tag } from "@opencode-ai/ui/v2/badge-v2"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
-import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
@@ -30,17 +28,7 @@ export function AddServerMenu(props: { onAddServer: () => void }) {
   const dialog = useDialog()
   const language = useLanguage()
   const openAddWsl = () => {
-    dialog.push(() => (
-      <Dialog size="large" fit class="settings-v2-wsl-dialog">
-        <DialogHeader hideClose={true}>
-          <DialogTitle>{language.t("wsl.server.add")}</DialogTitle>
-        </DialogHeader>
-        <DividerV2 />
-        <DialogBody>
-          <DialogAddWslServer />
-        </DialogBody>
-      </Dialog>
-    ))
+    dialog.push(() => <DialogAddWslServer />)
   }
   return (
     <Show

packages/app/src/wsl/types.ts

@@ -53,8 +53,7 @@ export type WslJob =
   | { 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: "probe-addable"; distros: string[]; startedAt: number }
   | { kind: "install-opencode"; distro: string; startedAt: number }
 
 export type WslServersState = {
@@ -77,8 +76,7 @@ export type WslServersPlatform = {
   refreshDistros(): Promise<void>
   installWsl(): Promise<void>
   installDistro(name: string): Promise<void>
-  probeDistro(name: string): Promise<void>
-  probeOpencode(name: string): Promise<void>
+  probeAddable(distros: string[]): Promise<void>
   installOpencode(name: string): Promise<void>
   openTerminal(name: string): Promise<void>
   addServer(distro: string): Promise<WslServerConfig>

packages/desktop/src/main/wsl/ipc.ts

@@ -1,7 +1,7 @@
 import { app, ipcMain } from "electron"
 import type { IpcMainInvokeEvent } from "electron"
 import type { WslServersController } from "./servers"
-import { requireWslIpcString } from "./policy"
+import { requireWslIpcString, requireWslIpcStrings } from "./policy"
 import type { WslServersState } from "../../preload/types"
 
 export function registerWslIpcHandlers(controller: WslServersController) {
@@ -46,11 +46,8 @@ export function registerWslIpcHandlers(controller: WslServersController) {
   ipcMain.handle("wsl-servers-install-distro", (_event: IpcMainInvokeEvent, name: string) =>
     controller.installDistro(requireWslIpcString("distro", name)),
   )
-  ipcMain.handle("wsl-servers-probe-distro", (_event: IpcMainInvokeEvent, name: string) =>
-    controller.probeDistro(requireWslIpcString("distro", name)),
-  )
-  ipcMain.handle("wsl-servers-probe-opencode", (_event: IpcMainInvokeEvent, name: string) =>
-    controller.probeOpencode(requireWslIpcString("distro", name)),
+  ipcMain.handle("wsl-servers-probe-addable", (_event: IpcMainInvokeEvent, distros: string[]) =>
+    controller.probeAddable(requireWslIpcStrings("distro", distros)),
   )
   ipcMain.handle("wsl-servers-install-opencode", (_event: IpcMainInvokeEvent, name: string) =>
     controller.installOpencode(requireWslIpcString("distro", name)),
@@ -97,8 +94,7 @@ function registerUnavailableWslIpcHandlers() {
   ipcMain.handle("wsl-servers-refresh-distros", unavailable)
   ipcMain.handle("wsl-servers-install-wsl", unavailable)
   ipcMain.handle("wsl-servers-install-distro", unavailable)
-  ipcMain.handle("wsl-servers-probe-distro", unavailable)
-  ipcMain.handle("wsl-servers-probe-opencode", unavailable)
+  ipcMain.handle("wsl-servers-probe-addable", unavailable)
   ipcMain.handle("wsl-servers-install-opencode", unavailable)
   ipcMain.handle("wsl-servers-open-terminal", unavailable)
   ipcMain.handle("wsl-servers-add", unavailable)

packages/desktop/src/main/wsl/policy.ts

@@ -24,3 +24,10 @@ export function requireWslIpcString(name: string, value: unknown) {
   if (typeof value === "string" && value.length > 0) return value
   throw new Error(`Invalid ${name}`)
 }
+
+export function requireWslIpcStrings(name: string, value: unknown) {
+  if (!Array.isArray(value)) throw new Error(`Invalid ${name}`)
+  const values = value.map((item) => requireWslIpcString(name, item))
+  if (values.length > 0) return values
+  throw new Error(`Invalid ${name}`)
+}

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { clearWslDistroState, requireWslIpcString, wslServerIdToRestart, wslTerminalArgs } from "./policy"
+import { clearWslDistroState, requireWslIpcString, requireWslIpcStrings, wslServerIdToRestart, wslTerminalArgs } from "./policy"
 import {
   expectOpencodeVersion,
   pendingRestartAfterWslInstall,
@@ -87,8 +87,10 @@ test("stops health polling when sidecar startup settles", async () => {
 
 test("validates WSL IPC identifiers at the module boundary", () => {
   expect(requireWslIpcString("distro", "Debian")).toBe("Debian")
+  expect(requireWslIpcStrings("distro", ["Debian", "Ubuntu"])).toEqual(["Debian", "Ubuntu"])
   expect(() => requireWslIpcString("distro", "")).toThrow("Invalid distro")
   expect(() => requireWslIpcString("server id", undefined)).toThrow("Invalid server id")
+  expect(() => requireWslIpcStrings("distro", [])).toThrow("Invalid distro")
 })
 
 test("derives a required Windows restart from the post-install runtime probe", () => {
@@ -142,6 +144,70 @@ test("ignores stale startup OpenCode checks after removing a WSL server", async
   expect(controller.getState().opencodeChecks).toEqual({})
 })
 
+test("probes addable distros in parallel before checking OpenCode", async () => {
+  persistedServers = []
+  const started: string[] = []
+  const release = new Map<string, () => void>()
+  const opencode: string[] = []
+  const controller = createWslServersController(
+    "1.16.2",
+    async () => new Promise<never>(() => undefined),
+    {
+      ...testControllerOptions(),
+      probeDistro: async (distro) => {
+        started.push(distro)
+        await new Promise<void>((resolve) => release.set(distro, resolve))
+        return { name: distro, canExecute: true, hasBash: true, hasCurl: true, error: null }
+      },
+      resolveOpencode: async (distro) => {
+        opencode.push(distro)
+        return "/home/me/.opencode/bin/opencode"
+      },
+    },
+  )
+
+  const task = controller.probeAddable(["Debian", "Ubuntu"])
+  await waitFor(() => started.length === 2)
+  expect(started).toEqual(["Debian", "Ubuntu"])
+  expect(opencode).toEqual([])
+  release.get("Debian")?.()
+  release.get("Ubuntu")?.()
+  await task
+
+  expect(Object.keys(controller.getState().distroProbes)).toEqual(["Debian", "Ubuntu"])
+  expect(opencode).toEqual(["Debian", "Ubuntu"])
+  expect(Object.keys(controller.getState().opencodeChecks)).toEqual(["Debian", "Ubuntu"])
+})
+
+test("does not check OpenCode in addable distros that cannot execute commands", async () => {
+  persistedServers = []
+  const opencode: string[] = []
+  const controller = createWslServersController(
+    "1.16.2",
+    async () => new Promise<never>(() => undefined),
+    {
+      ...testControllerOptions(),
+      probeDistro: async (distro) => ({
+        name: distro,
+        canExecute: distro === "Debian",
+        hasBash: distro === "Debian",
+        hasCurl: distro === "Debian",
+        error: distro === "Debian" ? null : "Open Ubuntu once to finish setup",
+      }),
+      resolveOpencode: async (distro) => {
+        opencode.push(distro)
+        return "/home/me/.opencode/bin/opencode"
+      },
+    },
+  )
+
+  await controller.probeAddable(["Debian", "Ubuntu"])
+
+  expect(Object.keys(controller.getState().distroProbes)).toEqual(["Debian", "Ubuntu"])
+  expect(opencode).toEqual(["Debian"])
+  expect(Object.keys(controller.getState().opencodeChecks)).toEqual(["Debian"])
+})
+
 async function waitFor(check: () => boolean) {
   for (let attempt = 0; attempt < 20; attempt++) {
     if (check()) return

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

@@ -47,6 +47,7 @@ type WslServersControllerOptions = {
   logger?: ControllerLogger
   readServers?: () => WslServerConfig[]
   writeServers?: (servers: WslServerConfig[]) => void
+  probeDistro?: typeof probeWslDistro
   resolveOpencode?: typeof resolveWslOpencode
   readCommandVersion?: typeof readWslCommandVersion
 }
@@ -70,6 +71,7 @@ export function createWslServersController(
   const logger = options?.logger
   const readServers = options?.readServers ?? readPersistedServers
   const writeServers = options?.writeServers ?? writePersistedServers
+  const probeDistro = options?.probeDistro ?? probeWslDistro
 
   const emit = () => {
     for (const listener of listeners) listener({ type: "state", state })
@@ -140,6 +142,28 @@ export function createWslServersController(
     setOpencodeCheck(distro, await checkOpencode(distro, opts))
   }
 
+  const probeAddableDistros = async (distros: string[], opts?: { signal?: AbortSignal }) => {
+    const unique = [...new Set(distros)]
+    const distroProbes = await Promise.all(
+      unique
+        .filter((distro) => !state.distroProbes[distro])
+        .map(async (distro) => [distro, await probeDistro(distro, opts)] as const),
+    )
+    if (distroProbes.length) {
+      setState({ distroProbes: { ...state.distroProbes, ...Object.fromEntries(distroProbes) } })
+    }
+
+    const opencodeChecks = await Promise.all(
+      unique
+        .filter((distro) => distroProbeReady(state.distroProbes[distro]))
+        .filter((distro) => !state.opencodeChecks[distro])
+        .map(async (distro) => [distro, await checkOpencode(distro, opts)] as const),
+    )
+    if (opencodeChecks.length) {
+      setState({ opencodeChecks: { ...state.opencodeChecks, ...Object.fromEntries(opencodeChecks) } })
+    }
+  }
+
   const hasServer = (id: string, distro: string) => {
     return state.servers.some((item) => item.config.id === id && item.config.distro === distro)
   }
@@ -319,7 +343,7 @@ export function createWslServersController(
           throw new Error(message)
         }
         const distros = await refreshDistroLists({ signal: abort.signal })
-        const probe = await probeWslDistro(name, { signal: abort.signal })
+        const probe = await probeDistro(name, { signal: abort.signal })
         setState({
           ...distros,
           distroProbes: { ...state.distroProbes, [name]: probe },
@@ -327,16 +351,10 @@ export function createWslServersController(
       })
     },
 
-    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 probeAddable(distros: string[]) {
+      if (!distros.length) return
+      await runJob({ kind: "probe-addable", distros, startedAt: Date.now() }, async (abort) => {
+        await probeAddableDistros(distros, { signal: abort.signal })
       })
     },
 
@@ -480,6 +498,10 @@ function opencodeCheck(
   }
 }
 
+function distroProbeReady(probe: WslDistroProbe | undefined) {
+  return !!probe?.canExecute && probe.hasBash && probe.hasCurl
+}
+
 function startupFailure(code: number | null, signal: NodeJS.Signals | null) {
   return `WSL server exited after startup (code=${code ?? "null"} signal=${signal ?? "null"})`
 }

packages/desktop/src/preload/index.ts

@@ -29,8 +29,7 @@ const api: ElectronAPI = {
     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),
+    probeAddable: (distros) => ipcRenderer.invoke("wsl-servers-probe-addable", distros),
     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),

packages/ui/src/v2/components/button-v2.css

@@ -28,7 +28,7 @@
   outline: none;
 }
 
-[data-component="button-v2"]:is(:focus-visible, [data-state="focus"]):not(:disabled) {
+[data-component="button-v2"]:is(:focus-visible, [data-state="focus"]):not(:disabled):not([data-variant="loading"]) {
   outline: 2px solid var(--v2-border-border-focus);
   outline-offset: 2.5px;
 }
@@ -170,6 +170,15 @@
   cursor: not-allowed;
 }
 
+/* Loading */
+[data-component="button-v2"][data-variant="loading"] {
+  background: #f2f2f2;
+  color: var(--v2-text-text-base);
+  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
+  cursor: default;
+  pointer-events: none;
+}
+
 /* Ghost */
 [data-component="button-v2"][data-variant="ghost"] {
   background-color: transparent;

packages/ui/src/v2/components/button-v2.stories.tsx

@@ -1,11 +1,11 @@
 import { ButtonV2 } from "./button-v2"
 
 const docs = `### Overview
-Button v2 with three visual variants and two sizes.
+Button v2 with visual variants and three sizes.
 
 ### API
-- \`variant\`: "neutral" | "danger" | "contrast" | "ghost" | "ghost-muted".
-- \`size\`: "normal" | "large".
+- \`variant\`: "neutral" | "danger" | "contrast" | "ghost" | "ghost-muted" | "loading".
+- \`size\`: "small" | "normal" | "large".
 - \`icon\`: Optional icon name.
 - Inherits Kobalte Button props and native button attributes.
 
@@ -39,7 +39,7 @@ export default {
     },
     variant: {
       control: "select",
-      options: ["neutral", "danger", "contrast", "ghost", "ghost-muted"],
+      options: ["neutral", "danger", "contrast", "ghost", "ghost-muted", "loading"],
     },
     size: {
       control: "select",
@@ -67,6 +67,7 @@ export const Variants = {
       <ButtonV2 variant="ghost-muted" icon="edit">
         Ghost muted
       </ButtonV2>
+      <ButtonV2 variant="loading">Loading</ButtonV2>
     </div>
   ),
 }
@@ -116,7 +117,7 @@ export const Icon = {
 
 export const AllStates = {
   render: () => {
-    const variants = ["neutral", "danger", "contrast", "ghost", "ghost-muted"] as const
+    const variants = ["neutral", "danger", "contrast", "ghost", "ghost-muted", "loading"] as const
     const states = ["default", "hover", "pressed", "focus", "disabled"] as const
     const toTitleCase = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)
     return (

packages/ui/src/v2/components/button-v2.tsx

@@ -7,7 +7,7 @@ export interface ButtonV2Props
   extends ComponentProps<typeof Kobalte>,
     Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
   size?: "small" | "normal" | "large"
-  variant?: "neutral" | "danger" | "contrast" | "ghost" | "ghost-muted" | "outline"
+  variant?: "neutral" | "danger" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading"
   icon?: IconProps["name"]
 }
 

packages/ui/src/v2/components/loader-v2.css

@@ -0,0 +1,32 @@
+[data-component="loader-v2"] {
+  --_duration: 900ms;
+  display: block;
+  flex-shrink: 0;
+  color: var(--v2-icon-icon-muted, #808080);
+  animation: loader-v2-spin var(--_duration) linear infinite;
+  transform-origin: center;
+}
+
+[data-component="loader-v2"] [data-slot="loader-v2-background"] {
+  stroke: currentColor;
+  opacity: 0.2;
+}
+
+[data-component="loader-v2"] [data-slot="loader-v2-progress"] {
+  stroke: currentColor;
+  stroke-linecap: round;
+  transform: rotate(-90deg);
+  transform-origin: center;
+}
+
+@keyframes loader-v2-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="loader-v2"] {
+    animation: none;
+  }
+}

packages/ui/src/v2/components/loader-v2.stories.tsx

@@ -0,0 +1,42 @@
+import { LoaderV2 } from "./loader-v2"
+
+const docs = `### Overview
+Circular v2 loader for compact loading states.
+
+### API
+- Accepts standard SVG props.
+
+### Behavior
+- The foreground ring covers 33% of the circumference and rotates continuously.
+
+### Accessibility
+- Sets \`aria-hidden="true"\` by default.
+`
+
+export default {
+  title: "UI V2/Loader",
+  id: "components-loader-v2",
+  component: LoaderV2,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+
+export const Basic = {
+  render: () => <LoaderV2 />,
+}
+
+export const Sizes = {
+  render: () => (
+    <div style={{ display: "flex", gap: "16px", "align-items": "center" }}>
+      <LoaderV2 width={12} height={12} />
+      <LoaderV2 />
+      <LoaderV2 width={24} height={24} />
+    </div>
+  ),
+}

packages/ui/src/v2/components/loader-v2.tsx

@@ -0,0 +1,31 @@
+import { splitProps, type ComponentProps } from "solid-js"
+import "./loader-v2.css"
+
+export function LoaderV2(props: ComponentProps<"svg">) {
+  const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
+  return (
+    <svg
+      {...rest}
+      class={local.class}
+      classList={local.classList}
+      width={local.width ?? 16}
+      height={local.height ?? 16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      data-component="loader-v2"
+      aria-hidden={rest["aria-hidden"] ?? "true"}
+    >
+      <circle cx="8" cy="8" r="6" data-slot="loader-v2-background" stroke-width="2" />
+      <circle
+        cx="8"
+        cy="8"
+        r="6"
+        data-slot="loader-v2-progress"
+        pathLength="100"
+        stroke-width="2"
+        stroke-dasharray="33 67"
+      />
+    </svg>
+  )
+}

packages/ui/src/v2/components/radio-v2.css

@@ -45,6 +45,7 @@
 }
 
 [data-slot="radio-v2-item"] {
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -131,10 +132,6 @@
       linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
   }
 
-  &:where([data-checked][data-disabled]) [data-slot="radio-v2-item-control"] {
-    opacity: 0.5;
-  }
-
   &:where([data-invalid]):where(:not([data-checked])) [data-slot="radio-v2-item-control"] {
     background: var(--v2-state-bg-danger);
     box-shadow: inset 0 0 0 0.5px var(--v2-state-border-danger);
@@ -195,8 +192,11 @@
     user-select: none;
   }
 
-  &:where([data-disabled]) [data-slot="radio-v2-item-label"],
+  &:where([data-disabled]) [data-slot="radio-v2-item-label-text"] {
+    color: var(--v2-text-text-muted);
+  }
+
   &:where([data-disabled]) [data-slot="radio-v2-item-description"] {
-    opacity: 0.5;
+    color: var(--v2-text-text-faint);
   }
 }