diff --git a/desktop/src/features/agents/ui/GlobalAgentConfigFields.tsx b/desktop/src/features/agents/ui/GlobalAgentConfigFields.tsx
index eb19007ce4..7020070103 100644
--- a/desktop/src/features/agents/ui/GlobalAgentConfigFields.tsx
+++ b/desktop/src/features/agents/ui/GlobalAgentConfigFields.tsx
@@ -6,12 +6,14 @@
  * purely presentational and calls onConfigChange on every user edit.
  */
 import * as React from "react";
+import { ChevronDown } from "lucide-react";
 
 import type { BakedEnvEntry } from "@/shared/api/tauri";
 import type {
   AcpRuntimeCatalogEntry,
   GlobalAgentConfig,
 } from "@/shared/api/types";
+import { cn } from "@/shared/lib/cn";
 import { EnvVarsEditor } from "@/features/agents/ui/EnvVarsEditor";
 import type { InheritedEnvRow } from "@/features/agents/ui/EnvVarsEditor";
 import {
@@ -22,11 +24,16 @@ import {
   AUTO_PROVIDER_DROPDOWN_VALUE,
   BLOCK_BUILD_HIDDEN_PROVIDER_IDS,
   CUSTOM_PROVIDER_DROPDOWN_VALUE,
+  PERSONA_LLM_PROVIDER_OPTIONS,
   getPersonaProviderOptions,
   getProviderApiKeyEnvVar,
   requiredCredentialEnvKeys,
+  runtimeSupportsLlmProviderSelection,
 } from "@/features/agents/ui/personaDialogPickers";
-import { AgentModelField } from "@/features/agents/ui/personaProviderModelFields";
+import {
+  AgentDropdownSelect,
+  AgentModelField,
+} from "@/features/agents/ui/personaProviderModelFields";
 import { PersonaProviderApiKeyField } from "@/features/agents/ui/PersonaProviderApiKeyField";
 import { usePersonaModelDiscovery } from "@/features/agents/ui/usePersonaModelDiscovery";
 import {
@@ -65,6 +72,30 @@ export type GlobalAgentConfigFieldsProps = {
   onCustomModelEditingChange: (value: boolean) => void;
   onIsCustomProviderChange: (value: boolean) => void;
   onValidityChange?: (valid: boolean) => void;
+  autoSelectModelOnProviderChange?: boolean;
+  disableModelSelectDuringDiscovery?: boolean;
+  effortPlaceholderLabel?: string;
+  effortLabel?: string;
+  hideUnconfiguredCredentialProviders?: boolean;
+  keepSelectedModelValueLabel?: boolean;
+  modelPlaceholderLabel?: string;
+  placeholderClassName?: string;
+  providerLabel?: string;
+  preserveCredentialEnvVarsOnProviderChange?: boolean;
+  requireProviderForModelAndEffort?: boolean;
+  selectClassName?: string;
+  showProviderField?: boolean;
+  showAdvancedFields?: boolean;
+  showCustomModelOption?: boolean;
+  showCustomProviderOption?: boolean;
+  showDescriptions?: boolean;
+  showEffortField?: boolean;
+  showProviderPlaceholderOption?: boolean;
+  showRequiredIndicators?: boolean;
+  showUnavailableEffortOptions?: boolean;
+  unstyled?: boolean;
+  useCustomSelect?: boolean;
+  useChevronSelectIcon?: boolean;
 };
 
 export function GlobalAgentConfigFields({
@@ -77,12 +108,40 @@ export function GlobalAgentConfigFields({
   onCustomModelEditingChange,
   onIsCustomProviderChange,
   onValidityChange,
+  autoSelectModelOnProviderChange = false,
+  disableModelSelectDuringDiscovery = true,
+  effortPlaceholderLabel,
+  effortLabel = "Thinking/effort",
+  hideUnconfiguredCredentialProviders = false,
+  keepSelectedModelValueLabel = false,
+  modelPlaceholderLabel = "Select model",
+  placeholderClassName,
+  providerLabel = "LLM provider",
+  preserveCredentialEnvVarsOnProviderChange = false,
+  requireProviderForModelAndEffort = false,
+  selectClassName,
+  showProviderField = true,
+  showAdvancedFields = true,
+  showCustomModelOption = true,
+  showCustomProviderOption = true,
+  showDescriptions = true,
+  showEffortField = true,
+  showProviderPlaceholderOption = true,
+  showRequiredIndicators = true,
+  showUnavailableEffortOptions = true,
+  unstyled = false,
+  useCustomSelect = false,
+  useChevronSelectIcon = false,
 }: GlobalAgentConfigFieldsProps) {
   const bakedProvider = React.useMemo(
     () => bakedEnv.find((e) => e.key === "BUZZ_AGENT_PROVIDER")?.value ?? null,
     [bakedEnv],
   );
-  const effectiveProvider = config.provider?.trim() || bakedProvider || "";
+  const selectedRuntimeId = selectedRuntime?.id ?? "";
+  const providerFieldVisible = showProviderField;
+  const effectiveProvider = providerFieldVisible
+    ? config.provider?.trim() || bakedProvider || ""
+    : "";
   const fallbackModel = React.useMemo(
     () => getGlobalModelFallback(bakedEnv, effectiveProvider, config.env_vars),
     [bakedEnv, config.env_vars, effectiveProvider],
@@ -102,11 +161,24 @@ export function GlobalAgentConfigFields({
     [bakedEnv],
   );
 
-  const providerValue = config.provider ?? "";
-  const providerForDiscovery = isCustomProvider ? "" : providerValue;
-  const credentialProvider = isCustomProvider ? "" : effectiveProvider;
+  const providerValue = providerFieldVisible ? (config.provider ?? "") : "";
+  const providerForDiscovery =
+    providerFieldVisible && !isCustomProvider
+      ? providerValue || bakedProvider || ""
+      : "";
+  const dependentFieldsDisabled =
+    providerFieldVisible &&
+    requireProviderForModelAndEffort &&
+    providerForDiscovery.trim().length === 0;
+  const credentialProvider =
+    providerFieldVisible && !isCustomProvider ? effectiveProvider : "";
+  const credentialRuntimeId = runtimeSupportsLlmProviderSelection(
+    selectedRuntimeId,
+  )
+    ? selectedRuntimeId
+    : "buzz-agent";
   const requiredEnvKeys = requiredCredentialEnvKeys(
-    "buzz-agent",
+    credentialRuntimeId,
     credentialProvider,
   );
   const apiKeyEnvVar = getProviderApiKeyEnvVar(credentialProvider);
@@ -119,6 +191,13 @@ export function GlobalAgentConfigFields({
     () => bakedEnv.map((entry) => entry.key),
     [bakedEnv],
   );
+  const configuredCredentialKeys = React.useMemo(() => {
+    const keys = new Set(bakedEnvKeys);
+    for (const [key, value] of Object.entries(config.env_vars)) {
+      if (value.trim().length > 0) keys.add(key);
+    }
+    return keys;
+  }, [bakedEnvKeys, config.env_vars]);
   const apiKeyInherited =
     apiKeyEnvVar !== null &&
     apiKeyValue.length === 0 &&
@@ -131,14 +210,67 @@ export function GlobalAgentConfigFields({
   } = usePersonaModelDiscovery({
     envVars: config.env_vars,
     isCustomProviderEditing: isCustomProvider,
-    modelFieldVisible: true,
+    modelFieldVisible: !dependentFieldsDisabled,
     open: true,
     provider: providerForDiscovery,
     selectedRuntime,
   });
 
+  const autoSelectedModelScopeRef = React.useRef<string | null>(null);
+  React.useEffect(() => {
+    if (!autoSelectModelOnProviderChange) return;
+    const trimmedProvider = providerForDiscovery.trim();
+    if (trimmedProvider.length === 0 || isCustomProvider) {
+      autoSelectedModelScopeRef.current = null;
+      return;
+    }
+    if ((config.model ?? "").trim().length > 0) return;
+    if (modelDiscoveryLoading || discoveredModelOptions === null) return;
+    const selectionScope = `${selectedRuntimeId}:${trimmedProvider}`;
+    if (autoSelectedModelScopeRef.current === selectionScope) return;
+
+    const firstModel = discoveredModelOptions.find(
+      (option) => option.id.trim().length > 0,
+    );
+    if (!firstModel) return;
+
+    autoSelectedModelScopeRef.current = selectionScope;
+    onCustomModelEditingChange(false);
+    onConfigChange({ ...config, model: firstModel.id });
+  }, [
+    autoSelectModelOnProviderChange,
+    config,
+    discoveredModelOptions,
+    isCustomProvider,
+    modelDiscoveryLoading,
+    onConfigChange,
+    onCustomModelEditingChange,
+    providerForDiscovery,
+    selectedRuntimeId,
+  ]);
+
   const currentEffortForAutoClear =
     config.env_vars[BUZZ_AGENT_THINKING_EFFORT] ?? "";
+  React.useEffect(() => {
+    if (!dependentFieldsDisabled) return;
+    if (
+      (config.model ?? "").trim().length === 0 &&
+      currentEffortForAutoClear.length === 0
+    ) {
+      return;
+    }
+
+    const nextEnvVars = { ...config.env_vars };
+    delete nextEnvVars[BUZZ_AGENT_THINKING_EFFORT];
+    onCustomModelEditingChange(false);
+    onConfigChange({ ...config, env_vars: nextEnvVars, model: null });
+  }, [
+    config,
+    currentEffortForAutoClear,
+    dependentFieldsDisabled,
+    onConfigChange,
+    onCustomModelEditingChange,
+  ]);
   const { validValues: effortValidForAutoClear } = getProviderEffortConfig(
     config.provider ?? "",
     config.model ?? "",
@@ -157,7 +289,9 @@ export function GlobalAgentConfigFields({
     const previousApiKey = getProviderApiKeyEnvVar(effectiveProvider);
     if (value === CUSTOM_PROVIDER_DROPDOWN_VALUE) {
       const nextEnvVars = { ...config.env_vars };
-      if (previousApiKey) delete nextEnvVars[previousApiKey];
+      if (!preserveCredentialEnvVarsOnProviderChange && previousApiKey) {
+        delete nextEnvVars[previousApiKey];
+      }
       onIsCustomProviderChange(true);
       onConfigChange({ ...config, env_vars: nextEnvVars, provider: null });
       return;
@@ -168,9 +302,14 @@ export function GlobalAgentConfigFields({
       nextProvider ?? bakedProvider ?? "",
     );
     const nextEnvVars = { ...config.env_vars };
-    if (previousApiKey && previousApiKey !== nextApiKey) {
+    if (
+      !preserveCredentialEnvVarsOnProviderChange &&
+      previousApiKey &&
+      previousApiKey !== nextApiKey
+    ) {
       delete nextEnvVars[previousApiKey];
     }
+    const providerChanged = nextProvider !== (config.provider ?? null);
 
     onIsCustomProviderChange(false);
     onConfigChange({
@@ -178,7 +317,11 @@ export function GlobalAgentConfigFields({
       env_vars: nextEnvVars,
       provider: nextProvider,
       model:
-        nextProvider === "relay-mesh" ? config.model || "auto" : config.model,
+        nextProvider === "relay-mesh"
+          ? config.model || "auto"
+          : autoSelectModelOnProviderChange && providerChanged
+            ? null
+            : config.model,
     });
   }
 
@@ -205,16 +348,38 @@ export function GlobalAgentConfigFields({
   // On internal Block builds, BUZZ_AGENT_PROVIDER is baked in and a boot
   // migration rewrites v1→v2. Hide the legacy v1 option so it is not offered
   // for new selections; OSS builds show it.
-  const hideProviderIds = React.useMemo(
-    () =>
-      bakedEnvKeys.includes("BUZZ_AGENT_PROVIDER")
-        ? BLOCK_BUILD_HIDDEN_PROVIDER_IDS
-        : new Set<string>(),
-    [bakedEnvKeys],
-  );
+  const hideProviderIds = React.useMemo(() => {
+    const hidden = new Set<string>();
+    if (bakedEnvKeys.includes("BUZZ_AGENT_PROVIDER")) {
+      for (const providerId of BLOCK_BUILD_HIDDEN_PROVIDER_IDS) {
+        hidden.add(providerId);
+      }
+    }
+    if (hideUnconfiguredCredentialProviders) {
+      for (const option of PERSONA_LLM_PROVIDER_OPTIONS) {
+        const requiredKeys = requiredCredentialEnvKeys(
+          credentialRuntimeId,
+          option.id,
+        );
+        if (requiredKeys.some((key) => !configuredCredentialKeys.has(key))) {
+          hidden.add(option.id);
+        }
+      }
+    }
+    if (selectedRuntimeId !== "buzz-agent") {
+      hidden.add("relay-mesh");
+    }
+    return hidden;
+  }, [
+    bakedEnvKeys,
+    configuredCredentialKeys,
+    credentialRuntimeId,
+    hideUnconfiguredCredentialProviders,
+    selectedRuntimeId,
+  ]);
   const providerOptions = getPersonaProviderOptions(
     providerValue,
-    "buzz-agent",
+    credentialRuntimeId,
     undefined,
     hideProviderIds,
   );
@@ -226,46 +391,127 @@ export function GlobalAgentConfigFields({
     if (!bakedProvider) return null;
     return getBakedProviderInheritLabel(bakedProvider, providerOptions);
   }, [bakedProvider, providerOptions]);
+  const compactProviderZeroLabel = React.useMemo(() => {
+    if (bakedProvider) {
+      return (
+        providerOptions.find((option) => option.id === bakedProvider)?.label ??
+        bakedProvider
+      );
+    }
+    return "Select a provider";
+  }, [bakedProvider, providerOptions]);
 
+  const implicitEffortProvider =
+    selectedRuntimeId === "claude"
+      ? "anthropic"
+      : selectedRuntimeId === "codex"
+        ? "openai"
+        : "";
+  const effortProvider = providerFieldVisible
+    ? (config.provider ?? "")
+    : implicitEffortProvider;
   const { validValues: effortValid, defaultValue: effortDefault } =
-    getProviderEffortConfig(config.provider ?? "", config.model ?? "");
+    getProviderEffortConfig(effortProvider, config.model ?? "");
   const currentEffort = config.env_vars[BUZZ_AGENT_THINKING_EFFORT] ?? "";
 
-  return (
-    <SettingsOptionGroup>
-      {/* Provider field */}
-      <div className="space-y-1.5 p-3">
-        <label className="text-sm font-medium" htmlFor="global-agent-provider">
-          LLM provider
-        </label>
-        <select
-          className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs"
-          id="global-agent-provider"
-          onChange={(e) => handleProviderChange(e.target.value)}
-          value={providerSelectValue}
-        >
-          {providerOptions.map((opt) => (
-            <option key={opt.id} value={opt.id || AUTO_PROVIDER_DROPDOWN_VALUE}>
-              {opt.id === "" ? (providerZeroLabel ?? opt.label) : opt.label}
-            </option>
-          ))}
-          <option value={CUSTOM_PROVIDER_DROPDOWN_VALUE}>
-            Custom provider…
-          </option>
-        </select>
-        {isCustomProvider ? (
-          <Input
-            aria-label="Custom global provider ID"
-            autoCorrect="off"
-            onChange={(e) => handleCustomProviderInput(e.target.value)}
-            placeholder="Custom provider ID"
-            value={providerValue}
-          />
-        ) : null}
-      </div>
+  const fieldClassName = unstyled ? "space-y-4" : "space-y-1.5 p-3";
+  const blockClassName = unstyled ? "" : "p-3";
+  const fieldLabelClassName = unstyled ? "pl-3" : undefined;
+  const providerDropdownOptions = [
+    ...providerOptions
+      .filter(
+        (opt) =>
+          showProviderPlaceholderOption ||
+          opt.id !== "" ||
+          providerSelectValue === AUTO_PROVIDER_DROPDOWN_VALUE,
+      )
+      .map((opt) => ({
+        label:
+          opt.id === ""
+            ? showProviderPlaceholderOption
+              ? (providerZeroLabel ?? opt.label)
+              : compactProviderZeroLabel
+            : opt.label,
+        value: opt.id || AUTO_PROVIDER_DROPDOWN_VALUE,
+      })),
+    ...(showCustomProviderOption
+      ? [{ label: "Custom provider…", value: CUSTOM_PROVIDER_DROPDOWN_VALUE }]
+      : []),
+  ];
+  const providerSelect = useCustomSelect ? (
+    <AgentDropdownSelect
+      className={selectClassName}
+      id="global-agent-provider"
+      onValueChange={handleProviderChange}
+      options={providerDropdownOptions}
+      placeholder={
+        showProviderPlaceholderOption
+          ? "Select provider"
+          : compactProviderZeroLabel
+      }
+      placeholderClassName={placeholderClassName}
+      placeholderValue={
+        !showProviderPlaceholderOption && !bakedProvider
+          ? AUTO_PROVIDER_DROPDOWN_VALUE
+          : undefined
+      }
+      testId="global-agent-provider"
+      value={providerSelectValue}
+    />
+  ) : (
+    <select
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs",
+        useChevronSelectIcon && "appearance-none pr-10",
+        selectClassName,
+      )}
+      id="global-agent-provider"
+      onChange={(e) => handleProviderChange(e.target.value)}
+      value={providerSelectValue}
+    >
+      {providerDropdownOptions.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+
+  const content = (
+    <>
+      {providerFieldVisible ? (
+        <div className={fieldClassName}>
+          <label
+            className={cn("text-sm font-medium", fieldLabelClassName)}
+            htmlFor="global-agent-provider"
+          >
+            {providerLabel}
+          </label>
+          {!useCustomSelect && useChevronSelectIcon ? (
+            <div className="relative">
+              {providerSelect}
+              <ChevronDown
+                aria-hidden="true"
+                className="pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground"
+              />
+            </div>
+          ) : (
+            providerSelect
+          )}
+          {isCustomProvider ? (
+            <Input
+              aria-label="Custom global provider ID"
+              autoCorrect="off"
+              onChange={(e) => handleCustomProviderInput(e.target.value)}
+              placeholder="Custom provider ID"
+              value={providerValue}
+            />
+          ) : null}
+        </div>
+      ) : null}
 
-      {apiKeyEnvVar ? (
-        <div className="p-3">
+      {showAdvancedFields && providerFieldVisible && apiKeyEnvVar ? (
+        <div className={blockClassName}>
           <PersonaProviderApiKeyField
             disabled={false}
             inheritedLabel="Provided by this build"
@@ -288,68 +534,110 @@ export function GlobalAgentConfigFields({
       ) : null}
 
       {/* Model field */}
-      <div className="space-y-1.5 p-3">
+      <div className={showDescriptions ? fieldClassName : undefined}>
         <AgentModelField
           allowDefaultModel={fallbackModel !== null}
           defaultModelLabel={
             fallbackModel ? `Default model (${fallbackModel})` : undefined
           }
-          disabled={false}
-          discoveredModelOptions={discoveredModelOptions}
+          disableSelectDuringDiscovery={disableModelSelectDuringDiscovery}
+          disabled={dependentFieldsDisabled}
+          discoveredModelOptions={
+            dependentFieldsDisabled ? null : discoveredModelOptions
+          }
           globalModel={fallbackModel ?? undefined}
           id="global-agent-model"
           isCustomModelEditing={isCustomModelEditing}
-          isRequired={fallbackModel === null}
-          model={config.model ?? ""}
-          modelDiscoveryLoading={modelDiscoveryLoading}
-          modelDiscoveryStatus={modelDiscoveryStatus}
+          isRequired={
+            showRequiredIndicators &&
+            fallbackModel === null &&
+            !dependentFieldsDisabled
+          }
+          keepSelectedModelValueLabel={keepSelectedModelValueLabel}
+          model={dependentFieldsDisabled ? "" : (config.model ?? "")}
+          modelDiscoveryLoading={
+            dependentFieldsDisabled ? false : modelDiscoveryLoading
+          }
+          modelDiscoveryStatus={
+            dependentFieldsDisabled ? null : modelDiscoveryStatus
+          }
           onIsCustomModelEditingChange={onCustomModelEditingChange}
           onModelChange={handleModelChange}
+          placeholderClassName={placeholderClassName}
+          placeholder={modelPlaceholderLabel}
           provider={providerForDiscovery}
+          fieldClassName={unstyled ? fieldClassName : undefined}
+          labelClassName={fieldLabelClassName}
+          selectClassName={selectClassName}
+          showCustomModelOption={showCustomModelOption}
+          showStatusMessage={showDescriptions}
+          testId="global-agent-model"
+          useCustomSelect={useCustomSelect}
+          useChevronIcon={useChevronSelectIcon}
         />
       </div>
 
       {/* Thinking / Effort */}
-      <div className="p-3">
-        <EffortSelectField
-          currentEffort={currentEffort}
-          effortDefault={effortDefault}
-          effortValid={effortValid}
-          htmlFor="global-agent-thinking-effort"
-          inheritFallbackLabel={
-            effortDefault !== null ? `Default (${effortDefault})` : undefined
-          }
-          inheritedEffort={bakedEffort ?? undefined}
-          label="Thinking/effort"
-          onChange={(value) => {
-            const nextEnvVars = { ...config.env_vars };
-            if (value === "") {
-              delete nextEnvVars[BUZZ_AGENT_THINKING_EFFORT];
-            } else {
-              nextEnvVars[BUZZ_AGENT_THINKING_EFFORT] = value;
+      {showEffortField ? (
+        <div className={blockClassName}>
+          <EffortSelectField
+            currentEffort={dependentFieldsDisabled ? "" : currentEffort}
+            disabled={dependentFieldsDisabled}
+            emptyOptionLabel={effortPlaceholderLabel}
+            effortDefault={effortDefault}
+            effortValid={effortValid}
+            fieldClassName={unstyled ? fieldClassName : undefined}
+            htmlFor="global-agent-thinking-effort"
+            inheritFallbackLabel={
+              effortDefault !== null ? `Default (${effortDefault})` : undefined
             }
-            onConfigChange({ ...config, env_vars: nextEnvVars });
-          }}
-          testId="global-agent-thinking-effort-select"
-        />
-      </div>
+            inheritedEffort={bakedEffort ?? undefined}
+            label={effortLabel}
+            labelClassName={fieldLabelClassName}
+            onChange={(value) => {
+              const nextEnvVars = { ...config.env_vars };
+              if (value === "") {
+                delete nextEnvVars[BUZZ_AGENT_THINKING_EFFORT];
+              } else {
+                nextEnvVars[BUZZ_AGENT_THINKING_EFFORT] = value;
+              }
+              onConfigChange({ ...config, env_vars: nextEnvVars });
+            }}
+            placeholderClassName={placeholderClassName}
+            selectClassName={selectClassName}
+            showUnavailableOptions={showUnavailableEffortOptions}
+            testId="global-agent-thinking-effort-select"
+            useCustomSelect={useCustomSelect}
+          />
+        </div>
+      ) : null}
 
-      {/* Env vars */}
-      <div className="p-3">
-        <EnvVarsEditor
-          hiddenKeys={apiKeyEnvVar ? [apiKeyEnvVar] : []}
-          inheritedRows={bakedGenericRows}
-          inheritedRowsLabel="build"
-          label="Environment variables"
-          onChange={handleEnvVarsChange}
-          requiredKeys={advancedRequiredEnvKeys}
-          value={Object.fromEntries(
-            Object.entries(config.env_vars).filter(
-              ([k]) => k !== BUZZ_AGENT_THINKING_EFFORT,
-            ),
-          )}
-        />
-      </div>
-    </SettingsOptionGroup>
+      {showAdvancedFields ? (
+        <>
+          {/* Env vars */}
+          <div className={blockClassName}>
+            <EnvVarsEditor
+              hiddenKeys={apiKeyEnvVar ? [apiKeyEnvVar] : []}
+              inheritedRows={bakedGenericRows}
+              inheritedRowsLabel="build"
+              label="Environment variables"
+              onChange={handleEnvVarsChange}
+              requiredKeys={advancedRequiredEnvKeys}
+              value={Object.fromEntries(
+                Object.entries(config.env_vars).filter(
+                  ([k]) => k !== BUZZ_AGENT_THINKING_EFFORT,
+                ),
+              )}
+            />
+          </div>
+        </>
+      ) : null}
+    </>
   );
+
+  if (unstyled) {
+    return <div className="space-y-7">{content}</div>;
+  }
+
+  return <SettingsOptionGroup>{content}</SettingsOptionGroup>;
 }
diff --git a/desktop/src/features/agents/ui/buzzAgentModelTuningFields.tsx b/desktop/src/features/agents/ui/buzzAgentModelTuningFields.tsx
index 25af85ba9e..995bc9d6ef 100644
--- a/desktop/src/features/agents/ui/buzzAgentModelTuningFields.tsx
+++ b/desktop/src/features/agents/ui/buzzAgentModelTuningFields.tsx
@@ -7,7 +7,12 @@
  */
 import * as React from "react";
 import { Input } from "@/shared/ui/input";
+import { cn } from "@/shared/lib/cn";
 import type { EnvVarsValue } from "./EnvVarsEditor";
+import {
+  AgentDropdownSelect,
+  type AgentDropdownOption,
+} from "./personaProviderModelFields";
 import {
   BUZZ_AGENT_MAX_CONTEXT_TOKENS,
   BUZZ_AGENT_MAX_OUTPUT_TOKENS,
@@ -32,21 +37,35 @@ import {
  */
 export function EffortSelectField({
   currentEffort,
+  disabled = false,
+  emptyOptionLabel,
   effortDefault,
   effortValid,
+  fieldClassName,
   htmlFor,
   inheritedEffort,
   inheritFallbackLabel,
   label,
+  labelClassName,
   onChange,
+  placeholderClassName,
+  selectClassName,
+  showUnavailableOptions = true,
   testId,
+  useCustomSelect = false,
 }: {
   /** Current effort value from env vars ("" = inherit). */
   currentEffort: string;
+  /** Disable the dropdown. */
+  disabled?: boolean;
+  /** Optional replacement label for the empty/inherit option. */
+  emptyOptionLabel?: string;
   /** Semantic default for this provider/model combination, or null for manual-budget. */
   effortDefault: string | null;
   /** Valid effort values for this provider/model. */
   effortValid: ReadonlyArray<string>;
+  /** Optional class override for the field wrapper. */
+  fieldClassName?: string;
   /** `htmlFor` attribute for the label element. */
   htmlFor: string;
   /** Inherited effort from a higher-precedence layer (shown in the Inherit option label). */
@@ -67,40 +86,85 @@ export function EffortSelectField({
   inheritFallbackLabel?: string;
   /** Label text for the dropdown. */
   label: string;
+  /** Optional class override for the label. */
+  labelClassName?: string;
   /** Called when the user selects a new value. */
   onChange: (value: string) => void;
+  /** Optional class override for placeholder text. */
+  placeholderClassName?: string;
+  /** Optional class override for the select/trigger. */
+  selectClassName?: string;
+  /** When false, hide effort values that are not valid for the provider/model. */
+  showUnavailableOptions?: boolean;
   /** data-testid attribute for the select element. */
   testId: string;
+  /** Render the polished app dropdown instead of the native select. */
+  useCustomSelect?: boolean;
 }) {
+  const inheritLabel = inheritedEffort
+    ? `Inherit (${inheritedEffort})`
+    : effortDefault === null
+      ? "Inherit (default)"
+      : (inheritFallbackLabel ?? "Inherit");
+  const effortOptions: AgentDropdownOption[] = [
+    { label: emptyOptionLabel ?? inheritLabel, value: "" },
+    ...BUZZ_AGENT_THINKING_EFFORT_VALUES.flatMap((v) => {
+      const isValid = (effortValid as readonly string[]).includes(v);
+      if (!showUnavailableOptions && !isValid) return [];
+      const isDefault = v === effortDefault;
+      return [
+        {
+          disabled: !isValid,
+          label: isDefault ? `${v} (default)` : v,
+          value: v,
+        },
+      ];
+    }),
+  ];
+
   return (
-    <div className="space-y-1.5">
-      <label className="text-sm font-medium" htmlFor={htmlFor}>
+    <div className={cn("space-y-1.5", fieldClassName)}>
+      <label
+        className={cn("text-sm font-medium", labelClassName)}
+        htmlFor={htmlFor}
+      >
         {label}
       </label>
-      <select
-        className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs"
-        data-testid={testId}
-        id={htmlFor}
-        onChange={(event) => onChange(event.target.value)}
-        value={currentEffort}
-      >
-        <option value="">
-          {inheritedEffort
-            ? `Inherit (${inheritedEffort})`
-            : effortDefault === null
-              ? "Inherit (default)"
-              : (inheritFallbackLabel ?? "Inherit")}
-        </option>
-        {BUZZ_AGENT_THINKING_EFFORT_VALUES.map((v) => {
-          const isValid = (effortValid as readonly string[]).includes(v);
-          const isDefault = v === effortDefault;
-          return (
-            <option disabled={!isValid} key={v} value={v}>
-              {isDefault ? `${v} (default)` : v}
+      {useCustomSelect ? (
+        <AgentDropdownSelect
+          className={selectClassName}
+          disabled={disabled}
+          id={htmlFor}
+          onValueChange={onChange}
+          options={effortOptions}
+          placeholderClassName={placeholderClassName}
+          placeholderValue={emptyOptionLabel ? "" : undefined}
+          testId={testId}
+          value={currentEffort}
+        />
+      ) : (
+        <select
+          className={cn(
+            "flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs disabled:cursor-not-allowed disabled:opacity-60",
+            selectClassName,
+          )}
+          data-testid={testId}
+          disabled={disabled}
+          id={htmlFor}
+          onChange={(event) => onChange(event.target.value)}
+          value={currentEffort}
+        >
+          {effortOptions.map((option) => (
+            <option
+              disabled={option.disabled}
+              key={option.value}
+              value={option.value}
+            >
+              {option.label}
             </option>
-          );
-        })}
-      </select>
+          ))}
+        </select>
+      )}
     </div>
   );
 }
diff --git a/desktop/src/features/agents/ui/personaDialogPickers.tsx b/desktop/src/features/agents/ui/personaDialogPickers.tsx
index ff22230e14..803c90c24a 100644
--- a/desktop/src/features/agents/ui/personaDialogPickers.tsx
+++ b/desktop/src/features/agents/ui/personaDialogPickers.tsx
@@ -112,7 +112,7 @@ const DEFAULT_MODEL_OPTION: PersonaModelOption = {
   label: "Default model",
 };
 
-const PERSONA_LLM_PROVIDER_OPTIONS: readonly PersonaModelOption[] = [
+export const PERSONA_LLM_PROVIDER_OPTIONS: readonly PersonaModelOption[] = [
   { id: "anthropic", label: "Anthropic" },
   { id: "openai", label: "OpenAI" },
   { id: "openai-compat", label: "OpenAI-compatible" },
diff --git a/desktop/src/features/agents/ui/personaProviderModelFields.tsx b/desktop/src/features/agents/ui/personaProviderModelFields.tsx
index 7347aa5178..83b5a33d6a 100644
--- a/desktop/src/features/agents/ui/personaProviderModelFields.tsx
+++ b/desktop/src/features/agents/ui/personaProviderModelFields.tsx
@@ -4,10 +4,13 @@
  * Both CreateAgentDialog (local mode) and AgentInstanceEditDialog import these
  * instead of duplicating the picker logic.
  */
-import type * as React from "react";
+import * as React from "react";
+import { Check, ChevronDown } from "lucide-react";
 
 import type { AcpRuntimeCatalogEntry } from "@/shared/api/types";
+import { cn } from "@/shared/lib/cn";
 import { Input } from "@/shared/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
 import {
   AUTO_MODEL_DROPDOWN_VALUE,
   AUTO_PROVIDER_DROPDOWN_VALUE,
@@ -23,17 +26,160 @@ import {
 import { MODEL_DISCOVERY_LOADING_VALUE } from "./usePersonaModelDiscovery";
 import type { PersonaModelDiscoveryStatus } from "./personaModelDiscoveryStatus";
 
+export type AgentDropdownOption = {
+  disabled?: boolean;
+  label: React.ReactNode;
+  value: string;
+};
+
+function optionTestId(testId: string | undefined, value: string) {
+  if (!testId) return undefined;
+  return `${testId}-option-${value || "empty"}`;
+}
+
+export function AgentDropdownSelect({
+  ariaRequired,
+  className,
+  disabled = false,
+  id,
+  onValueChange,
+  options,
+  placeholder = "Select",
+  placeholderClassName,
+  placeholderValue,
+  selectedLabel,
+  testId,
+  value,
+}: {
+  ariaRequired?: boolean;
+  className?: string;
+  disabled?: boolean;
+  id: string;
+  onValueChange: (value: string) => void;
+  options: readonly AgentDropdownOption[];
+  placeholder?: string;
+  placeholderClassName?: string;
+  placeholderValue?: string;
+  selectedLabel?: React.ReactNode;
+  testId?: string;
+  value: string;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const selectedOption = options.find((option) => option.value === value);
+  const isPlaceholderSelection =
+    selectedLabel === undefined &&
+    (selectedOption === undefined ||
+      (placeholderValue !== undefined &&
+        selectedOption.value === placeholderValue));
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          aria-controls={`${id}-listbox`}
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          aria-required={ariaRequired}
+          className={cn(
+            "flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-left text-sm font-normal shadow-xs transition-colors hover:bg-background/90 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60",
+            className,
+          )}
+          data-testid={testId}
+          data-value={value}
+          disabled={disabled}
+          id={id}
+          role="combobox"
+          type="button"
+        >
+          <span
+            className={cn(
+              "min-w-0 truncate",
+              isPlaceholderSelection &&
+                (placeholderClassName ?? "text-foreground/45"),
+            )}
+          >
+            {selectedLabel ?? selectedOption?.label ?? placeholder}
+          </span>
+          <ChevronDown
+            aria-hidden="true"
+            className={cn(
+              "ml-3 h-4 w-4 shrink-0 transition-transform duration-150",
+              disabled ? "text-foreground/30" : "text-foreground",
+              open && "rotate-180",
+            )}
+          />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="z-[100] max-h-72 overflow-y-auto rounded-2xl border-foreground/10 bg-white p-1.5 text-foreground opacity-100 data-[state=closed]:animate-none data-[state=open]:animate-none"
+        sideOffset={8}
+        style={{
+          boxShadow: "0 16px 36px rgb(0 0 0 / 0.12)",
+          width: "var(--radix-popover-trigger-width)",
+        }}
+      >
+        <div
+          aria-labelledby={id}
+          className="space-y-1"
+          id={`${id}-listbox`}
+          role="listbox"
+        >
+          {options.map((option) => {
+            const selected = option.value === value;
+            return (
+              <button
+                aria-disabled={option.disabled || undefined}
+                aria-selected={selected}
+                className={cn(
+                  "flex w-full items-center justify-between gap-3 rounded-xl px-3 py-2 text-left text-sm leading-5 text-black opacity-100 transition-colors hover:bg-black/5 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-black/30",
+                  selected && "bg-[var(--buzz-welcome-chartreuse)]/35",
+                  option.disabled && "cursor-not-allowed text-black/35",
+                )}
+                data-testid={optionTestId(testId, option.value)}
+                data-value={option.value}
+                disabled={option.disabled}
+                key={option.value}
+                onClick={() => {
+                  if (option.disabled) return;
+                  onValueChange(option.value);
+                  setOpen(false);
+                }}
+                role="option"
+                type="button"
+              >
+                <span className="min-w-0 truncate">{option.label}</span>
+                <Check
+                  aria-hidden="true"
+                  className={cn(
+                    "h-4 w-4 shrink-0 text-black transition-opacity",
+                    option.disabled && "text-black/35",
+                    selected ? "opacity-100" : "opacity-0",
+                  )}
+                  strokeWidth={2.5}
+                />
+              </button>
+            );
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 export function RequiredFieldLabel({
+  className,
   children,
   htmlFor,
   isRequired,
 }: {
+  className?: string;
   children: React.ReactNode;
   htmlFor: string;
   isRequired: boolean;
 }) {
   return (
-    <label className="text-sm font-medium" htmlFor={htmlFor}>
+    <label className={cn("text-sm font-medium", className)} htmlFor={htmlFor}>
       {children}
       {isRequired ? (
         <span className="ml-1 text-destructive" aria-hidden="true">
@@ -50,6 +196,8 @@ export function AgentModelField({
   globalModel,
   allowDefaultModel = true,
   defaultModelLabel,
+  disableSelectDuringDiscovery = true,
+  keepSelectedModelValueLabel = false,
   id = "agent-model",
   isCustomModelEditing,
   isRequired,
@@ -58,7 +206,17 @@ export function AgentModelField({
   modelDiscoveryStatus,
   onIsCustomModelEditingChange,
   onModelChange,
+  placeholder = "Select model",
+  placeholderClassName,
   provider,
+  fieldClassName,
+  labelClassName,
+  selectClassName,
+  testId,
+  useCustomSelect = false,
+  showStatusMessage = true,
+  showCustomModelOption = true,
+  useChevronIcon = false,
 }: {
   disabled: boolean;
   discoveredModelOptions: readonly PersonaModelOption[] | null;
@@ -68,6 +226,10 @@ export function AgentModelField({
   allowDefaultModel?: boolean;
   /** Source-aware label for the empty/default option. */
   defaultModelLabel?: string;
+  /** Disable the trigger while live model discovery refreshes the option list. */
+  disableSelectDuringDiscovery?: boolean;
+  /** Keep the closed trigger from swapping to discovered display labels. */
+  keepSelectedModelValueLabel?: boolean;
   /** DOM id for the model select. Defaults to `"agent-model"`. Override in
    *  contexts where multiple instances coexist on the same page (e.g. the
    *  global-config settings card) to avoid duplicate DOM ids. */
@@ -79,7 +241,27 @@ export function AgentModelField({
   modelDiscoveryStatus: PersonaModelDiscoveryStatus | null;
   onIsCustomModelEditingChange: (value: boolean) => void;
   onModelChange: (value: string) => void;
+  /** Trigger placeholder shown when there is no selected model option. */
+  placeholder?: string;
+  /** Optional class override for placeholder text. */
+  placeholderClassName?: string;
   provider?: string;
+  /** Optional class override for the field wrapper. */
+  fieldClassName?: string;
+  /** Optional class override for the label. */
+  labelClassName?: string;
+  /** Optional class override for contexts with custom visual treatments. */
+  selectClassName?: string;
+  /** Optional test id for custom dropdown trigger/options. */
+  testId?: string;
+  /** Render the polished app dropdown instead of the native select. */
+  useCustomSelect?: boolean;
+  /** Hide the helper/status line in compact presentations. */
+  showStatusMessage?: boolean;
+  /** Hide the explicit custom-model escape hatch in compact presentations. */
+  showCustomModelOption?: boolean;
+  /** Render a controlled chevron instead of the native select indicator. */
+  useChevronIcon?: boolean;
 }) {
   const trimmedModel = model.trim();
   const isSharedCompute = provider?.trim() === "relay-mesh";
@@ -97,12 +279,23 @@ export function AgentModelField({
   const discoveredWithoutDefault = (discoveredModelOptions ?? []).filter(
     (option) => option.id.trim() !== "",
   );
-  const effectiveModelOptions = isSharedCompute
+  const baseModelOptions = isSharedCompute
     ? [defaultOption, ...discoveredWithoutDefault]
     : [
         ...(allowDefaultModel ? [defaultOption] : []),
         ...discoveredWithoutDefault,
       ];
+  const shouldShowPendingModelOption =
+    !isSharedCompute &&
+    !isCustomModelEditing &&
+    modelDiscoveryLoading &&
+    discoveredModelOptions === null &&
+    trimmedModel.length > 0;
+  const effectiveModelOptions =
+    shouldShowPendingModelOption &&
+    !baseModelOptions.some((option) => option.id === trimmedModel)
+      ? [...baseModelOptions, { id: trimmedModel, label: trimmedModel }]
+      : baseModelOptions;
 
   // isModelCustom: true when the current model isn't in any known option set.
   // We check discovered options (when available) or runtime-static options so
@@ -122,56 +315,113 @@ export function AgentModelField({
 
   // The select is only disabled for mutation pending — never for missing discovery.
   // Default/custom options remain usable regardless of discovery state.
-  const selectDisabled = disabled || modelDiscoveryLoading;
+  const selectDisabled =
+    disabled || (disableSelectDuringDiscovery && modelDiscoveryLoading);
 
   // Show the custom model input whenever custom mode is active or the current
   // model is already custom — not gated on discovery having returned.
   const showCustomModelInput =
     !isSharedCompute && (isCustomModelEditing || isModelCustom);
 
+  const handleModelSelectChange = (nextValue: string) => {
+    if (nextValue === AUTO_MODEL_DROPDOWN_VALUE) {
+      onIsCustomModelEditingChange(false);
+      onModelChange(isSharedCompute ? "auto" : "");
+      return;
+    }
+    if (nextValue === CUSTOM_MODEL_DROPDOWN_VALUE) {
+      onIsCustomModelEditingChange(true);
+      return;
+    }
+    onIsCustomModelEditingChange(false);
+    onModelChange(nextValue);
+  };
+
+  const modelOptions: AgentDropdownOption[] = [
+    ...effectiveModelOptions.map((option) => ({
+      label: option.label,
+      value: option.id || AUTO_MODEL_DROPDOWN_VALUE,
+    })),
+    ...(modelDiscoveryLoading && discoveredModelOptions === null
+      ? [
+          {
+            disabled: true,
+            label: "Loading models...",
+            value: MODEL_DISCOVERY_LOADING_VALUE,
+          },
+        ]
+      : []),
+    ...(!isSharedCompute &&
+    (showCustomModelOption || modelSelectValue === CUSTOM_MODEL_DROPDOWN_VALUE)
+      ? [{ label: "Custom model...", value: CUSTOM_MODEL_DROPDOWN_VALUE }]
+      : []),
+  ];
+  const stableSelectedModelLabel =
+    keepSelectedModelValueLabel &&
+    modelSelectValue === trimmedModel &&
+    trimmedModel.length > 0
+      ? trimmedModel
+      : undefined;
+
+  const modelSelect = useCustomSelect ? (
+    <AgentDropdownSelect
+      ariaRequired={isRequired}
+      className={selectClassName}
+      disabled={selectDisabled}
+      id={id}
+      onValueChange={handleModelSelectChange}
+      options={modelOptions}
+      placeholder={placeholder}
+      placeholderClassName={placeholderClassName}
+      selectedLabel={stableSelectedModelLabel}
+      testId={testId ?? id}
+      value={modelSelectValue}
+    />
+  ) : (
+    <select
+      aria-required={isRequired}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs disabled:cursor-not-allowed disabled:opacity-60",
+        useChevronIcon && "appearance-none pr-10",
+        selectClassName,
+      )}
+      disabled={selectDisabled}
+      id={id}
+      onChange={(event) => handleModelSelectChange(event.target.value)}
+      value={modelSelectValue}
+    >
+      {modelOptions.map((option) => (
+        <option
+          disabled={option.disabled}
+          key={option.value}
+          value={option.value}
+        >
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+
   return (
-    <div className="space-y-1.5">
-      <RequiredFieldLabel htmlFor={id} isRequired={isRequired}>
+    <div className={cn("space-y-1.5", fieldClassName)}>
+      <RequiredFieldLabel
+        className={labelClassName}
+        htmlFor={id}
+        isRequired={isRequired}
+      >
         Model
       </RequiredFieldLabel>
-      <select
-        aria-required={isRequired}
-        className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs disabled:cursor-not-allowed disabled:opacity-60"
-        disabled={selectDisabled}
-        id={id}
-        onChange={(event) => {
-          const nextValue = event.target.value;
-          if (nextValue === AUTO_MODEL_DROPDOWN_VALUE) {
-            onIsCustomModelEditingChange(false);
-            onModelChange(isSharedCompute ? "auto" : "");
-            return;
-          }
-          if (nextValue === CUSTOM_MODEL_DROPDOWN_VALUE) {
-            onIsCustomModelEditingChange(true);
-            return;
-          }
-          onIsCustomModelEditingChange(false);
-          onModelChange(nextValue);
-        }}
-        value={modelSelectValue}
-      >
-        {effectiveModelOptions.map((option) => (
-          <option
-            key={option.id}
-            value={option.id || AUTO_MODEL_DROPDOWN_VALUE}
-          >
-            {option.label}
-          </option>
-        ))}
-        {modelDiscoveryLoading && discoveredModelOptions === null ? (
-          <option disabled value={MODEL_DISCOVERY_LOADING_VALUE}>
-            Loading models...
-          </option>
-        ) : null}
-        {!isSharedCompute ? (
-          <option value={CUSTOM_MODEL_DROPDOWN_VALUE}>Custom model...</option>
-        ) : null}
-      </select>
+      {!useCustomSelect && useChevronIcon ? (
+        <div className="relative">
+          {modelSelect}
+          <ChevronDown
+            aria-hidden="true"
+            className="pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground"
+          />
+        </div>
+      ) : (
+        modelSelect
+      )}
       {showCustomModelInput ? (
         <Input
           aria-label="Custom model ID"
@@ -182,15 +432,17 @@ export function AgentModelField({
           value={model}
         />
       ) : null}
-      <p className="text-xs text-muted-foreground">
-        {modelDiscoveryLoading
-          ? "Loading models..."
-          : modelDiscoveryStatus !== null
-            ? modelDiscoveryStatus.message
-            : discoveredModelOptions !== null
-              ? "Saved changes take effect on the next start."
-              : "Select a provider above to see available models."}
-      </p>
+      {showStatusMessage ? (
+        <p className="text-xs text-muted-foreground">
+          {modelDiscoveryLoading
+            ? "Loading models..."
+            : modelDiscoveryStatus !== null
+              ? modelDiscoveryStatus.message
+              : discoveredModelOptions !== null
+                ? "Saved changes take effect on the next start."
+                : "Select a provider above to see available models."}
+        </p>
+      ) : null}
     </div>
   );
 }
diff --git a/desktop/src/features/agents/ui/usePersonaModelDiscovery.ts b/desktop/src/features/agents/ui/usePersonaModelDiscovery.ts
index c2d1a4e33f..b1011751cc 100644
--- a/desktop/src/features/agents/ui/usePersonaModelDiscovery.ts
+++ b/desktop/src/features/agents/ui/usePersonaModelDiscovery.ts
@@ -73,8 +73,14 @@ export function usePersonaModelDiscovery({
 }) {
   const [modelDiscoveryData, setModelDiscoveryData] =
     React.useState<AgentModelsResponse | null>(null);
+  const [modelDiscoveryDataKey, setModelDiscoveryDataKey] = React.useState<
+    string | null
+  >(null);
   const [modelDiscoveryStatus, setModelDiscoveryStatus] =
     React.useState<PersonaModelDiscoveryStatus | null>(null);
+  const [modelDiscoveryStatusKey, setModelDiscoveryStatusKey] = React.useState<
+    string | null
+  >(null);
   const [modelDiscoveryLoading, setModelDiscoveryLoading] =
     React.useState(false);
   const modelDiscoveryCacheRef = React.useRef(
@@ -129,6 +135,7 @@ export function usePersonaModelDiscovery({
     if (modelDiscoveryKey === null || discoveryAgentCommand === null) {
       modelDiscoveryRequestRef.current += 1;
       setModelDiscoveryData(null);
+      setModelDiscoveryDataKey(null);
       // When the runtime exists but is not available, surface a status message
       // so the model dropdown explains why no live models can be loaded.
       if (
@@ -141,8 +148,10 @@ export function usePersonaModelDiscovery({
             trimmedProvider,
           ),
         );
+        setModelDiscoveryStatusKey(null);
       } else {
         setModelDiscoveryStatus(null);
+        setModelDiscoveryStatusKey(null);
       }
       setModelDiscoveryLoading(false);
       return;
@@ -155,13 +164,17 @@ export function usePersonaModelDiscovery({
     const cached = modelDiscoveryCacheRef.current.get(activeModelDiscoveryKey);
     if (cached) {
       setModelDiscoveryData(cached);
+      setModelDiscoveryDataKey(activeModelDiscoveryKey);
       setModelDiscoveryStatus(null);
+      setModelDiscoveryStatusKey(activeModelDiscoveryKey);
       setModelDiscoveryLoading(false);
       return;
     }
 
     setModelDiscoveryData(null);
+    setModelDiscoveryDataKey(null);
     setModelDiscoveryStatus(null);
+    setModelDiscoveryStatusKey(activeModelDiscoveryKey);
     setModelDiscoveryLoading(true);
     function runModelDiscovery() {
       void discoverAgentModels({
@@ -176,16 +189,20 @@ export function usePersonaModelDiscovery({
           }
           modelDiscoveryCacheRef.current.set(activeModelDiscoveryKey, response);
           setModelDiscoveryData(response);
+          setModelDiscoveryDataKey(activeModelDiscoveryKey);
           setModelDiscoveryStatus(null);
+          setModelDiscoveryStatusKey(activeModelDiscoveryKey);
         })
         .catch((error) => {
           if (modelDiscoveryRequestRef.current !== requestId) {
             return;
           }
           setModelDiscoveryData(null);
+          setModelDiscoveryDataKey(null);
           setModelDiscoveryStatus(
             formatModelDiscoveryErrorStatus(error, trimmedProvider),
           );
+          setModelDiscoveryStatusKey(activeModelDiscoveryKey);
         })
         .finally(() => {
           if (modelDiscoveryRequestRef.current === requestId) {
@@ -221,17 +238,36 @@ export function usePersonaModelDiscovery({
     trimmedProvider,
   ]);
 
+  const activeModelDiscoveryData =
+    modelDiscoveryKey !== null && modelDiscoveryDataKey === modelDiscoveryKey
+      ? modelDiscoveryData
+      : null;
+  const activeModelDiscoveryStatus =
+    modelDiscoveryKey === null
+      ? modelDiscoveryStatus
+      : modelDiscoveryStatusKey === modelDiscoveryKey
+        ? modelDiscoveryStatus
+        : null;
   const discoveredModelOptions = React.useMemo(
-    () => getDiscoveredPersonaModelOptions(modelDiscoveryData, trimmedProvider),
-    [modelDiscoveryData, trimmedProvider],
+    () =>
+      getDiscoveredPersonaModelOptions(
+        activeModelDiscoveryData,
+        trimmedProvider,
+      ),
+    [activeModelDiscoveryData, trimmedProvider],
   );
+  const modelDiscoveryPending =
+    modelDiscoveryLoading ||
+    (modelDiscoveryKey !== null &&
+      activeModelDiscoveryData === null &&
+      activeModelDiscoveryStatus === null);
 
   return {
     discoveredModelOptions,
-    modelDiscoveryLoading,
+    modelDiscoveryLoading: modelDiscoveryPending,
     modelDiscoveryStatus:
-      modelDiscoveryLoading || discoveredModelOptions !== null
+      modelDiscoveryPending || discoveredModelOptions !== null
         ? null
-        : modelDiscoveryStatus,
+        : activeModelDiscoveryStatus,
   };
 }
diff --git a/desktop/src/features/onboarding/assets/harness-logos/chatgpt.png b/desktop/src/features/onboarding/assets/harness-logos/chatgpt.png
new file mode 100644
index 0000000000..3a339cc0fe
Binary files /dev/null and b/desktop/src/features/onboarding/assets/harness-logos/chatgpt.png differ
diff --git a/desktop/src/features/onboarding/assets/harness-logos/claude.png b/desktop/src/features/onboarding/assets/harness-logos/claude.png
new file mode 100644
index 0000000000..5d1a94f1bc
Binary files /dev/null and b/desktop/src/features/onboarding/assets/harness-logos/claude.png differ
diff --git a/desktop/src/features/onboarding/assets/harness-logos/goose.png b/desktop/src/features/onboarding/assets/harness-logos/goose.png
new file mode 100644
index 0000000000..3fd794bd15
Binary files /dev/null and b/desktop/src/features/onboarding/assets/harness-logos/goose.png differ
diff --git a/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx b/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
index ca1726cbaf..e7765e1a36 100644
--- a/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
+++ b/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
@@ -199,10 +199,10 @@ export function CommunityOnboardingFlow({
       <OnboardingFooterProvider>
         <div
           className={cn(
-            "relative flex w-full flex-col justify-center text-center",
+            "relative w-full text-center",
             isProfileStage || isTeamStage
-              ? "min-h-[calc(100dvh-15.625rem)]"
-              : "min-h-dvh py-8",
+              ? "buzz-onboarding-step-frame flex flex-col justify-center"
+              : "flex min-h-dvh flex-col justify-center py-8",
             isProfileStage
               ? "max-w-4xl"
               : isTeamStage
diff --git a/desktop/src/features/onboarding/ui/DefaultConfigStep.tsx b/desktop/src/features/onboarding/ui/DefaultConfigStep.tsx
index 83ca6e8a8c..2624bdf5d7 100644
--- a/desktop/src/features/onboarding/ui/DefaultConfigStep.tsx
+++ b/desktop/src/features/onboarding/ui/DefaultConfigStep.tsx
@@ -5,13 +5,19 @@ import {
   GlobalAgentConfigFields,
   EMPTY_GLOBAL_CONFIG,
 } from "@/features/agents/ui/GlobalAgentConfigFields";
+import { BUZZ_AGENT_THINKING_EFFORT } from "@/features/agents/ui/buzzAgentConfig";
+import { runtimeSupportsLlmProviderSelection } from "@/features/agents/ui/personaDialogPickers";
+import { AgentDropdownSelect } from "@/features/agents/ui/personaProviderModelFields";
 import { createSaveCoalescer } from "./saveCoalescer";
 import { getBakedBuildEnv, type BakedEnvEntry } from "@/shared/api/tauri";
 import {
   getGlobalAgentConfig,
   setGlobalAgentConfig,
 } from "@/shared/api/tauriGlobalAgentConfig";
-import type { GlobalAgentConfig } from "@/shared/api/types";
+import type {
+  AcpRuntimeCatalogEntry,
+  GlobalAgentConfig,
+} from "@/shared/api/types";
 import { Button } from "@/shared/ui/button";
 import { Spinner } from "@/shared/ui/spinner";
 import { ONBOARDING_PRIMARY_CTA_CLASS } from "./OnboardingChrome";
@@ -21,14 +27,42 @@ import {
   OnboardingSlideTransition,
 } from "./OnboardingSlideTransition";
 import type { DefaultConfigStepActions } from "./types";
-import { resolveAgentReadiness } from "./agentReadiness";
 
 type DefaultConfigStepProps = {
   actions: DefaultConfigStepActions;
   direction: OnboardingTransitionDirection;
+  selectedRuntimeIds: readonly string[];
 };
 
-function AgentDefaultsSection() {
+const RUNTIME_ORDER = ["claude", "codex", "goose", "buzz-agent"];
+
+function formatHarnessLabel(runtime: AcpRuntimeCatalogEntry | undefined) {
+  if (!runtime) return "Select a harness";
+  return runtime.id === "buzz-agent" ? "Buzz" : runtime.label;
+}
+
+function sortSelectedRuntimes(
+  runtimes: readonly AcpRuntimeCatalogEntry[],
+  selectedRuntimeIds: readonly string[],
+) {
+  const selectedRuntimeIdSet = new Set(selectedRuntimeIds);
+  return runtimes
+    .filter((runtime) => selectedRuntimeIdSet.has(runtime.id))
+    .sort((left, right) => {
+      const leftIndex = RUNTIME_ORDER.indexOf(left.id);
+      const rightIndex = RUNTIME_ORDER.indexOf(right.id);
+      return (
+        (leftIndex === -1 ? RUNTIME_ORDER.length : leftIndex) -
+        (rightIndex === -1 ? RUNTIME_ORDER.length : rightIndex)
+      );
+    });
+}
+
+function AgentDefaultsSection({
+  selectedRuntimeIds,
+}: {
+  selectedRuntimeIds: readonly string[];
+}) {
   const runtimesQuery = useAcpRuntimesQuery();
   const [config, setConfig] =
     React.useState<GlobalAgentConfig>(EMPTY_GLOBAL_CONFIG);
@@ -44,21 +78,24 @@ function AgentDefaultsSection() {
   React.useEffect(() => {
     let unmounted = false;
 
-    getGlobalAgentConfig()
-      .then((loaded) => {
-        if (!unmounted) {
-          setConfig(loaded);
-          setIsLoading(false);
-        }
-      })
-      .catch(() => {
-        if (!unmounted) setIsLoading(false);
-      });
-    getBakedBuildEnv()
-      .then((env) => {
-        if (!unmounted) setBakedEnv(env);
-      })
-      .catch(() => undefined);
+    async function loadDefaults() {
+      const [configResult, bakedEnvResult] = await Promise.allSettled([
+        getGlobalAgentConfig(),
+        getBakedBuildEnv(),
+      ]);
+
+      if (unmounted) return;
+
+      if (configResult.status === "fulfilled") {
+        setConfig(configResult.value);
+      }
+      if (bakedEnvResult.status === "fulfilled") {
+        setBakedEnv(bakedEnvResult.value);
+      }
+      setIsLoading(false);
+    }
+
+    void loadDefaults();
 
     // The coalescer serializes autosaves and drains any edit that arrived
     // while a previous save was in flight. Cancel on unmount so a slow
@@ -80,35 +117,92 @@ function AgentDefaultsSection() {
     };
   }, []);
 
-  const selectedRuntime = React.useMemo(
+  const selectedRuntimes = React.useMemo(
+    () => sortSelectedRuntimes(runtimesQuery.data ?? [], selectedRuntimeIds),
+    [runtimesQuery.data, selectedRuntimeIds],
+  );
+  const selectedRuntime = React.useMemo(() => {
+    const preferredRuntime = selectedRuntimes.find(
+      (runtime) => runtime.id === config.preferred_runtime,
+    );
+    return preferredRuntime ?? selectedRuntimes[0];
+  }, [config.preferred_runtime, selectedRuntimes]);
+  const selectedRuntimeId =
+    selectedRuntime?.id ?? config.preferred_runtime ?? "";
+  const selectedRuntimeSupportsModelProvider =
+    runtimeSupportsLlmProviderSelection(selectedRuntimeId);
+  const harnessOptions = React.useMemo(
     () =>
-      (runtimesQuery.data ?? []).find(
-        (runtime) => runtime.id === config.preferred_runtime,
-      ),
-    [config.preferred_runtime, runtimesQuery.data],
+      selectedRuntimes.map((runtime) => ({
+        label: formatHarnessLabel(runtime),
+        value: runtime.id,
+      })),
+    [selectedRuntimes],
   );
 
-  const readiness = resolveAgentReadiness(
-    runtimesQuery.data ?? [],
-    config,
-    "preferred",
-  );
+  function handleHarnessChange(runtimeId: string) {
+    const nextEnvVars = { ...config.env_vars };
+    delete nextEnvVars[BUZZ_AGENT_THINKING_EFFORT];
+    const nextProvider =
+      runtimeSupportsLlmProviderSelection(runtimeId) &&
+      config.provider !== "relay-mesh"
+        ? config.provider
+        : null;
+    const next = {
+      ...config,
+      env_vars: nextEnvVars,
+      model: null,
+      preferred_runtime: runtimeId || null,
+      provider: nextProvider,
+    };
+    setIsCustomModelEditing(false);
+    setIsCustomProvider(false);
+    setConfig(next);
+    coalescerRef.current?.enqueue(next);
+  }
 
   return (
-    <section className="w-full space-y-4 text-left">
+    <section className="w-full space-y-4 text-left text-sm">
       {isLoading ? (
         <div className="flex items-center justify-center gap-2 py-4 text-sm text-muted-foreground">
           <Spinner className="h-4 w-4 border-2" />
           Loading…
         </div>
       ) : (
-        <div className="rounded-2xl bg-white/85 p-2 shadow-[0_0_55px_25px_rgba(255,255,255,0.6)]">
+        <div className="space-y-7">
+          <div className="space-y-4">
+            <label
+              className="pl-3 text-sm font-medium"
+              htmlFor="global-agent-default-harness"
+            >
+              Default harness
+            </label>
+            <AgentDropdownSelect
+              className="h-12 rounded-2xl border-foreground/15 bg-white px-4 py-2 text-sm shadow-none hover:bg-white/95"
+              id="global-agent-default-harness"
+              onValueChange={handleHarnessChange}
+              options={harnessOptions}
+              placeholder="Select a harness"
+              placeholderClassName="text-foreground/70"
+              testId="global-agent-default-harness"
+              value={selectedRuntimeId}
+            />
+          </div>
+
           <GlobalAgentConfigFields
             bakedEnv={bakedEnv}
             selectedRuntime={selectedRuntime}
             config={config}
             isCustomModelEditing={isCustomModelEditing}
             isCustomProvider={isCustomProvider}
+            autoSelectModelOnProviderChange
+            disableModelSelectDuringDiscovery={false}
+            effortPlaceholderLabel="Select effort level"
+            keepSelectedModelValueLabel
+            hideUnconfiguredCredentialProviders={
+              selectedRuntimeId === "buzz-agent"
+            }
+            modelPlaceholderLabel="Select a model"
             onConfigChange={(next) => {
               // Always apply optimistically so the UI never reverts mid-save,
               // then enqueue the persist — the coalescer serialises multiple
@@ -118,15 +212,25 @@ function AgentDefaultsSection() {
             }}
             onCustomModelEditingChange={setIsCustomModelEditing}
             onIsCustomProviderChange={setIsCustomProvider}
+            preserveCredentialEnvVarsOnProviderChange
+            effortLabel="Effort"
+            placeholderClassName="text-foreground/70"
+            providerLabel="Provider"
+            requireProviderForModelAndEffort
+            selectClassName="h-12 rounded-2xl border-foreground/15 bg-white px-4 py-2 text-sm shadow-none hover:bg-white/95"
+            showAdvancedFields={false}
+            showCustomModelOption={false}
+            showCustomProviderOption={false}
+            showDescriptions={false}
+            showProviderField={selectedRuntimeSupportsModelProvider}
+            showRequiredIndicators={false}
+            showProviderPlaceholderOption={false}
+            showUnavailableEffortOptions={false}
+            unstyled
+            useCustomSelect
           />
         </div>
       )}
-
-      {!readiness.ready ? (
-        <p className="text-center text-sm text-muted-foreground">
-          You can finish now and configure agents later in Settings.
-        </p>
-      ) : null}
     </section>
   );
 }
@@ -139,12 +243,11 @@ function AgentDefaultsSection() {
 export function DefaultConfigStep({
   actions,
   direction,
+  selectedRuntimeIds,
 }: DefaultConfigStepProps) {
   return (
     <OnboardingSlideTransition
-      // pb clears the always-docked footer: the config fields can overflow on
-      // short windows, so reserve room to scroll clear of the fixed CTA group.
-      className="flex w-full flex-col items-center pb-20"
+      className="flex min-h-full w-full flex-col items-center"
       data-testid="onboarding-page-config"
       direction={direction}
       transitionKey={`default-config-${direction}`}
@@ -153,19 +256,21 @@ export function DefaultConfigStep({
         <h1 className="text-title font-normal text-foreground">
           Configure your default model settings
         </h1>
-        <p className="mt-3 text-sm leading-6 text-foreground/80">
-          This will be set as your default model configuration across Buzz. You
-          can always change this in your Settings.
+        <p className="mx-auto mt-3 max-w-[440px] text-sm leading-5 text-foreground/80">
+          These settings will be used by your agents in Buzz. You can always
+          change them in your Settings.
         </p>
       </div>
 
-      <div className="mt-8 w-full max-w-[560px]">
-        <AgentDefaultsSection />
+      <div className="flex w-full flex-1 items-center justify-center py-10">
+        <div className="w-full max-w-[328px]">
+          <AgentDefaultsSection selectedRuntimeIds={selectedRuntimeIds} />
+        </div>
       </div>
 
       <OnboardingFooter>
         <Button
-          className={ONBOARDING_PRIMARY_CTA_CLASS}
+          className={`${ONBOARDING_PRIMARY_CTA_CLASS} text-sm`}
           data-testid="onboarding-finish"
           onClick={actions.complete}
           type="button"
@@ -174,7 +279,7 @@ export function DefaultConfigStep({
         </Button>
 
         <Button
-          className="h-9 rounded-full bg-foreground/10 px-6 hover:bg-foreground/15"
+          className="h-9 rounded-full bg-foreground/10 px-6 text-sm hover:bg-foreground/15"
           data-testid="onboarding-back"
           onClick={actions.back}
           type="button"
diff --git a/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx b/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
index 72185a9099..de84c0f8a9 100644
--- a/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
+++ b/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
@@ -22,6 +22,10 @@ import {
   OnboardingChrome,
 } from "./OnboardingChrome";
 import { OnboardingFooterProvider } from "./OnboardingFooter";
+import {
+  getPreferredRuntimeIdForSelection,
+  runtimeSelectionNeedsDefaultsStep,
+} from "./onboardingRuntimeSelection";
 import { OnboardingSlideTransition } from "./OnboardingSlideTransition";
 import { SetupStep } from "./SetupStep";
 
@@ -54,11 +58,8 @@ export function MachineOnboardingFlow({
   const [selectedPubkey, setSelectedPubkey] = React.useState<string | null>(
     null,
   );
-  const [selectedRuntimeId, setSelectedRuntimeId] = React.useState<
-    string | null
-  >(null);
-  const [pendingRuntimeId, setPendingRuntimeId] = React.useState<string | null>(
-    null,
+  const [selectedRuntimeIds, setSelectedRuntimeIds] = React.useState<string[]>(
+    [],
   );
   const [isRuntimeSelectionSaving, setIsRuntimeSelectionSaving] =
     React.useState(false);
@@ -66,38 +67,45 @@ export function MachineOnboardingFlow({
     string | null
   >(null);
   const runtimeSaveSequence = React.useRef(0);
+  const runtimeSaveChain = React.useRef<Promise<void>>(Promise.resolve());
 
-  const persistPreferredRuntime = React.useCallback(
-    async (runtimeId: string) => {
+  const persistHarnessSelection = React.useCallback(
+    (runtimeIds: readonly string[]) => {
+      const nextRuntimeIds = Array.from(new Set(runtimeIds));
+      const preferredRuntimeId =
+        getPreferredRuntimeIdForSelection(nextRuntimeIds);
       const sequence = runtimeSaveSequence.current + 1;
       runtimeSaveSequence.current = sequence;
-      setPendingRuntimeId(runtimeId);
+      setSelectedRuntimeIds(nextRuntimeIds);
       setRuntimeSelectionError(null);
       setIsRuntimeSelectionSaving(true);
-      try {
+
+      const save = runtimeSaveChain.current.then(async () => {
         const current = await getGlobalAgentConfig();
-        const result = await setGlobalAgentConfig({
+        await setGlobalAgentConfig({
           ...current,
-          preferred_runtime: runtimeId,
+          preferred_runtime: preferredRuntimeId,
+        });
+      });
+      runtimeSaveChain.current = save.then(
+        () => undefined,
+        () => undefined,
+      );
+      void save
+        .catch((cause) => {
+          if (runtimeSaveSequence.current === sequence) {
+            setRuntimeSelectionError(
+              cause instanceof Error
+                ? cause.message
+                : "Couldn’t save your harness selection.",
+            );
+          }
+        })
+        .finally(() => {
+          if (runtimeSaveSequence.current === sequence) {
+            setIsRuntimeSelectionSaving(false);
+          }
         });
-        if (runtimeSaveSequence.current === sequence) {
-          setSelectedRuntimeId(result.config.preferred_runtime);
-          setPendingRuntimeId(null);
-        }
-      } catch (cause) {
-        if (runtimeSaveSequence.current === sequence) {
-          setPendingRuntimeId(null);
-          setRuntimeSelectionError(
-            cause instanceof Error
-              ? cause.message
-              : "Couldn’t save your preferred runtime.",
-          );
-        }
-      } finally {
-        if (runtimeSaveSequence.current === sequence) {
-          setIsRuntimeSelectionSaving(false);
-        }
-      }
     },
     [],
   );
@@ -172,7 +180,7 @@ export function MachineOnboardingFlow({
       <OnboardingFooterProvider>
         <div
           className={`relative flex w-full max-w-[920px] flex-col items-center text-center ${
-            page === "identity" ? "my-auto" : ""
+            page === "identity" ? "my-auto" : "buzz-onboarding-step-frame"
           }`}
         >
           {page === "identity" ? (
@@ -259,11 +267,8 @@ export function MachineOnboardingFlow({
                 back: () =>
                   setPage(identityWasImported ? "key-import" : "backup"),
                 next: () => {
-                  if (!selectedRuntimeId) return;
-                  if (
-                    selectedRuntimeId === "claude" ||
-                    selectedRuntimeId === "codex"
-                  ) {
+                  if (selectedRuntimeIds.length === 0) return;
+                  if (!runtimeSelectionNeedsDefaultsStep(selectedRuntimeIds)) {
                     complete(selectedPubkey ?? undefined);
                     return;
                   }
@@ -272,11 +277,11 @@ export function MachineOnboardingFlow({
               }}
               direction="forward"
               isSelectionSaving={isRuntimeSelectionSaving}
-              onSelectedRuntimeChange={(runtimeId) => {
-                void persistPreferredRuntime(runtimeId);
+              onSelectedRuntimeIdsChange={(runtimeIds) => {
+                void persistHarnessSelection(runtimeIds);
               }}
               selectionError={runtimeSelectionError}
-              selectedRuntimeId={pendingRuntimeId ?? selectedRuntimeId}
+              selectedRuntimeIds={selectedRuntimeIds}
             />
           ) : (
             <DefaultConfigStep
@@ -285,6 +290,7 @@ export function MachineOnboardingFlow({
                 complete: () => complete(selectedPubkey ?? undefined),
               }}
               direction="forward"
+              selectedRuntimeIds={selectedRuntimeIds}
             />
           )}
         </div>
diff --git a/desktop/src/features/onboarding/ui/OnboardingSlideTransition.tsx b/desktop/src/features/onboarding/ui/OnboardingSlideTransition.tsx
index a66535bac5..82d9a0213c 100644
--- a/desktop/src/features/onboarding/ui/OnboardingSlideTransition.tsx
+++ b/desktop/src/features/onboarding/ui/OnboardingSlideTransition.tsx
@@ -28,7 +28,7 @@ export function OnboardingSlideTransition({
 }: OnboardingSlideTransitionProps) {
   return (
     <div
-      className={cn("w-full", containerClassName)}
+      className={cn("buzz-onboarding-slide w-full", containerClassName)}
       key={transitionKey}
       {...props}
     >
diff --git a/desktop/src/features/onboarding/ui/RuntimeIcon.tsx b/desktop/src/features/onboarding/ui/RuntimeIcon.tsx
new file mode 100644
index 0000000000..a410914377
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/RuntimeIcon.tsx
@@ -0,0 +1,71 @@
+import * as React from "react";
+import { TerminalSquare } from "lucide-react";
+
+import type { AcpRuntimeCatalogEntry } from "@/shared/api/types";
+import { cn } from "@/shared/lib/cn";
+import { useTheme } from "@/shared/theme/ThemeProvider";
+import { BuzzMark } from "@/shared/ui/buzz-logo/BuzzMark";
+import chatgptLogoUrl from "../assets/harness-logos/chatgpt.png?inline";
+import claudeLogoUrl from "../assets/harness-logos/claude.png?inline";
+import gooseLogoUrl from "../assets/harness-logos/goose.png?inline";
+
+const RUNTIME_LOGOS: Record<string, string> = {
+  claude: claudeLogoUrl,
+  codex: chatgptLogoUrl,
+  goose: gooseLogoUrl,
+};
+
+function isBuzzRuntime(runtime: AcpRuntimeCatalogEntry): boolean {
+  return runtime.id.trim().toLowerCase() === "buzz-agent";
+}
+
+export function getRuntimeDisplayLabel(
+  runtime: AcpRuntimeCatalogEntry,
+): string {
+  return isBuzzRuntime(runtime) ? "Buzz" : runtime.label;
+}
+
+function getRuntimeLogoUrl(runtime: AcpRuntimeCatalogEntry): string | null {
+  return RUNTIME_LOGOS[runtime.id.trim().toLowerCase()] ?? null;
+}
+
+export function RuntimeIcon({
+  className = "h-8 w-8",
+  runtime,
+}: {
+  className?: string;
+  runtime: AcpRuntimeCatalogEntry;
+}) {
+  const [imageFailed, setImageFailed] = React.useState(false);
+  const { isDark } = useTheme();
+  const runtimeLogoUrl = getRuntimeLogoUrl(runtime);
+  const imageUrl = runtimeLogoUrl ?? runtime.avatarUrl;
+  const shouldForceForegroundColor = !runtimeLogoUrl && runtime.id === "goose";
+
+  if (isBuzzRuntime(runtime)) {
+    return <BuzzMark className="h-7 w-10 text-foreground" />;
+  }
+
+  if (imageUrl && !imageFailed) {
+    return (
+      <img
+        alt=""
+        className={cn(
+          "rounded-md object-contain",
+          className,
+          shouldForceForegroundColor &&
+            (isDark ? "brightness-0 invert" : "brightness-0"),
+        )}
+        onError={() => setImageFailed(true)}
+        src={imageUrl}
+      />
+    );
+  }
+
+  return (
+    <TerminalSquare
+      className={cn(className, "text-foreground")}
+      strokeWidth={1.25}
+    />
+  );
+}
diff --git a/desktop/src/features/onboarding/ui/SetupStep.tsx b/desktop/src/features/onboarding/ui/SetupStep.tsx
index a02010f327..9056e6486d 100644
--- a/desktop/src/features/onboarding/ui/SetupStep.tsx
+++ b/desktop/src/features/onboarding/ui/SetupStep.tsx
@@ -1,13 +1,6 @@
 import * as React from "react";
 import { openUrl } from "@tauri-apps/plugin-opener";
-import {
-  AlertTriangle,
-  Check,
-  ExternalLink,
-  Info,
-  Plus,
-  TerminalSquare,
-} from "lucide-react";
+import { AlertTriangle, Check, ExternalLink } from "lucide-react";
 
 import {
   useAcpAuthMethodsQuery,
@@ -17,17 +10,21 @@ import {
   useGitBashPrerequisiteQuery,
 } from "@/features/agents/hooks";
 import { describeResolvedCommand } from "@/features/agents/ui/agentUi";
-import type { AcpRuntimeCatalogEntry } from "@/shared/api/types";
+import type { AcpAuthMethod, AcpRuntimeCatalogEntry } from "@/shared/api/types";
 import { getInstallErrorMessage } from "@/shared/lib/installError";
 import { cn } from "@/shared/lib/cn";
-import { useTheme } from "@/shared/theme/ThemeProvider";
 import { Badge } from "@/shared/ui/badge";
 import { Button } from "@/shared/ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
+import { FlappingBee } from "@/shared/ui/buzz-logo/FlappingBee";
 import { Spinner } from "@/shared/ui/spinner";
-import { runtimeCanBeSelected } from "./onboardingRuntimeSelection";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
+import {
+  runtimeCanAdvanceOnboarding,
+  runtimeCanBeSelected,
+} from "./onboardingRuntimeSelection";
 import { ONBOARDING_PRIMARY_CTA_CLASS } from "./OnboardingChrome";
 import { OnboardingFooter } from "./OnboardingFooter";
+import { getRuntimeDisplayLabel, RuntimeIcon } from "./RuntimeIcon";
 import {
   type OnboardingTransitionDirection,
   OnboardingSlideTransition,
@@ -38,18 +35,18 @@ type SetupStepProps = {
   actions: SetupStepActions;
   direction: OnboardingTransitionDirection;
   isSelectionSaving: boolean;
-  onSelectedRuntimeChange: (runtimeId: string) => void;
+  onSelectedRuntimeIdsChange: (runtimeIds: readonly string[]) => void;
   selectionError: string | null;
-  selectedRuntimeId: string | null;
+  selectedRuntimeIds: readonly string[];
 };
 
 type SetupStepContentProps = {
   actions: SetupStepActions;
   direction: OnboardingTransitionDirection;
   isSelectionSaving: boolean;
-  onSelectedRuntimeChange: (runtimeId: string) => void;
+  onSelectedRuntimeIdsChange: (runtimeIds: readonly string[]) => void;
   selectionError: string | null;
-  selectedRuntimeId: string | null;
+  selectedRuntimeIds: readonly string[];
   state: SetupStepState;
 };
 
@@ -58,6 +55,8 @@ type InstallResultState = {
   success: boolean;
 };
 
+type InstallResultsState = Record<string, InstallResultState>;
+
 function useSetupStepState(): SetupStepState {
   const runtimesQuery = useAcpRuntimesQuery();
   const items = runtimesQuery.data ?? [];
@@ -74,53 +73,152 @@ function useSetupStepState(): SetupStepState {
   };
 }
 
-function RuntimeIcon({ runtime }: { runtime: AcpRuntimeCatalogEntry }) {
-  const [imageFailed, setImageFailed] = React.useState(false);
-  const { isDark } = useTheme();
-  const shouldForceForegroundColor = runtime.id === "goose";
-
-  if (runtime.avatarUrl && !imageFailed) {
-    return (
-      <img
-        alt=""
+function RuntimeSelectionIndicator({
+  runtime,
+  selected,
+}: {
+  runtime: AcpRuntimeCatalogEntry;
+  selected: boolean;
+}) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute right-3 top-3 flex h-8 w-8 scale-90 items-center justify-center rounded-full border border-[var(--buzz-welcome-chartreuse)] bg-white/75 opacity-0 transition-[background-color,opacity,transform] duration-200 ease-out group-hover:scale-100 group-hover:opacity-100 group-focus-visible:scale-100 group-focus-visible:opacity-100",
+        selected &&
+          "scale-100 bg-[var(--buzz-welcome-chartreuse)] opacity-100 group-hover:opacity-100",
+      )}
+      data-testid={`onboarding-runtime-check-${runtime.id}`}
+    >
+      <Check
         className={cn(
-          "h-12 w-12 rounded-md object-contain",
-          shouldForceForegroundColor &&
-            (isDark ? "brightness-0 invert" : "brightness-0"),
+          "h-4 w-4 text-foreground transition-[opacity,transform] duration-150 ease-out",
+          selected ? "scale-100 opacity-100" : "scale-50 opacity-0",
         )}
-        onError={() => setImageFailed(true)}
-        src={runtime.avatarUrl}
+        data-testid={`onboarding-runtime-checkmark-${runtime.id}`}
+        strokeWidth={3}
       />
-    );
-  }
-
-  return (
-    <TerminalSquare
-      className="h-12 w-12 text-muted-foreground"
-      strokeWidth={1.25}
-    />
+    </span>
   );
 }
 
+function runtimeIsInstalled(runtime: AcpRuntimeCatalogEntry) {
+  return runtimeCanBeSelected(runtime) && runtimeCanAdvanceOnboarding(runtime);
+}
+
+function useSetupFlashState(setupFlashToken: number) {
+  const [isFlashing, setIsFlashing] = React.useState(false);
+
+  React.useEffect(() => {
+    if (setupFlashToken === 0) return;
+
+    setIsFlashing(false);
+    const frame = window.requestAnimationFrame(() => {
+      setIsFlashing(true);
+    });
+    const timeout = window.setTimeout(() => {
+      setIsFlashing(false);
+    }, 650);
+
+    return () => {
+      window.cancelAnimationFrame(frame);
+      window.clearTimeout(timeout);
+    };
+  }, [setupFlashToken]);
+
+  return isFlashing;
+}
+
 function RuntimeStatus({
   installError,
+  installSuccess,
   isInstalling,
   onInstall,
+  onSelect,
   runtime,
+  setupFlashToken,
 }: {
   installError: string | null;
+  installSuccess: boolean;
   isInstalling: boolean;
   onInstall: () => void;
+  onSelect: () => void;
   runtime: AcpRuntimeCatalogEntry;
+  setupFlashToken: number;
 }) {
+  const isSetupFlashing = useSetupFlashState(setupFlashToken);
+  const methodsQuery = useAcpAuthMethodsQuery(runtime.id, {
+    enabled:
+      runtime.availability === "available" &&
+      runtime.authStatus.status === "logged_out",
+  });
+  const connectMutation = useConnectAcpRuntimeMutation();
+  const authMethods = getOnboardingAuthMethods(
+    runtime,
+    methodsQuery.data?.methods ?? [],
+  );
+  const authMethod = authMethods[0] ?? null;
+  const shouldRunAuthSetup =
+    runtime.availability === "available" &&
+    runtime.authStatus.status === "logged_out";
+
+  if (shouldRunAuthSetup) {
+    return (
+      <div className="flex flex-col items-center gap-1.5">
+        <Button
+          aria-label={`Set up ${runtime.label}`}
+          className="buzz-onboarding-runtime-setup h-5 rounded-full bg-[var(--buzz-welcome-chartreuse)]/30 px-2.5 font-mono !text-badge font-normal uppercase text-foreground hover:bg-[var(--buzz-welcome-chartreuse)]/40"
+          data-setup-flash={isSetupFlashing ? "true" : undefined}
+          data-testid={`onboarding-runtime-instructions-${runtime.id}`}
+          onClick={(event) => {
+            event.stopPropagation();
+            onSelect();
+            if (!authMethod) {
+              void methodsQuery.refetch();
+              return;
+            }
+            connectMutation.mutate(
+              {
+                methodId: authMethod.id,
+                runtimeId: runtime.id,
+              },
+              {
+                onSuccess: () => {
+                  if (runtime.id === "claude" || runtime.id === "codex") {
+                    onSelect();
+                  }
+                },
+              },
+            );
+          }}
+          type="button"
+          variant="ghost"
+        >
+          SET UP
+        </Button>
+        {methodsQuery.error instanceof Error ? (
+          <span className="text-2xs text-destructive">
+            Couldn’t load sign-in options.
+          </span>
+        ) : null}
+        {connectMutation.error instanceof Error ? (
+          <span className="text-2xs text-destructive">
+            {connectMutation.error.message}
+          </span>
+        ) : null}
+      </div>
+    );
+  }
+
   if (isInstalling) {
     return (
       <div
         aria-label={`Installing ${runtime.label}`}
-        className="flex h-8 w-8 items-center justify-center"
+        className="flex h-5 items-center gap-2 rounded-full bg-white/60 px-2.5 font-mono text-badge font-normal uppercase text-foreground"
         role="status"
       >
-        <Spinner className="h-4 w-4 border-2 text-foreground" />
+        <Spinner className="h-3 w-3 border-2 text-foreground" />
+        INSTALLING
       </div>
     );
   }
@@ -133,18 +231,30 @@ function RuntimeStatus({
     );
   }
 
-  if (runtime.availability === "available" && runtimeCanBeSelected(runtime)) {
+  if (runtimeIsInstalled(runtime) || installSuccess) {
     return (
-      <div
-        aria-label={`${runtime.label} available`}
-        className="flex h-6 w-6 items-center justify-center rounded-full bg-primary shadow-sm"
-        role="img"
-      >
-        <Check
-          className="h-3.5 w-3.5 text-primary-foreground"
-          strokeWidth={3}
-        />
-      </div>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            aria-label={`${runtime.label} installed`}
+            className="inline-flex h-5 cursor-default items-center rounded-full bg-[#EBEFEF] px-2.5 font-mono text-badge font-normal uppercase text-foreground"
+            data-testid={`onboarding-runtime-installed-${runtime.id}`}
+            role="img"
+          >
+            INSTALLED
+          </span>
+        </TooltipTrigger>
+        <TooltipContent
+          className="max-w-80 bg-black text-left text-xs text-white shadow-sm"
+          side="top"
+        >
+          {runtimeIsInstalled(runtime) ? (
+            <RuntimeDetails runtime={runtime} />
+          ) : (
+            <p className="text-xs leading-4 text-white">Setup completed.</p>
+          )}
+        </TooltipContent>
+      </Tooltip>
     );
   }
 
@@ -152,14 +262,18 @@ function RuntimeStatus({
     return (
       <Button
         aria-label={`Install ${runtime.label}`}
-        className="h-8 w-8 text-muted-foreground hover:text-foreground"
+        className="buzz-onboarding-runtime-setup h-5 rounded-full bg-[var(--buzz-welcome-chartreuse)]/30 px-2.5 font-mono !text-badge font-normal uppercase text-foreground hover:bg-[var(--buzz-welcome-chartreuse)]/40"
+        data-setup-flash={isSetupFlashing ? "true" : undefined}
         data-testid={`onboarding-runtime-install-${runtime.id}`}
-        onClick={onInstall}
-        size="icon"
+        onClick={(event) => {
+          event.stopPropagation();
+          onSelect();
+          onInstall();
+        }}
         type="button"
         variant="ghost"
       >
-        <Plus className="h-4 w-4" />
+        SET UP
       </Button>
     );
   }
@@ -167,14 +281,18 @@ function RuntimeStatus({
   return (
     <Button
       aria-label={`View ${runtime.label} setup instructions`}
-      className="h-8 w-8 text-muted-foreground hover:text-foreground"
+      className="buzz-onboarding-runtime-setup h-5 rounded-full bg-[var(--buzz-welcome-chartreuse)]/30 px-2.5 font-mono !text-badge font-normal uppercase text-foreground hover:bg-[var(--buzz-welcome-chartreuse)]/40"
+      data-setup-flash={isSetupFlashing ? "true" : undefined}
       data-testid={`onboarding-runtime-instructions-${runtime.id}`}
-      onClick={() => void openUrl(runtime.installInstructionsUrl)}
-      size="icon"
+      onClick={(event) => {
+        event.stopPropagation();
+        onSelect();
+        void openUrl(runtime.installInstructionsUrl);
+      }}
       type="button"
       variant="ghost"
     >
-      <ExternalLink className="h-4 w-4" />
+      SET UP
     </Button>
   );
 }
@@ -191,11 +309,11 @@ function RuntimeDetails({ runtime }: { runtime: AcpRuntimeCatalogEntry }) {
     );
     return (
       <>
-        <p className="text-sm leading-5 text-muted-foreground">
+        <p className="text-xs leading-4 text-white">
           {description.charAt(0).toUpperCase() + description.slice(1)}
         </p>
         {runtime.defaultArgs.length > 0 ? (
-          <p className="mt-1 text-xs text-muted-foreground/80">
+          <p className="mt-1 text-xs leading-4 text-white">
             Args:{" "}
             <code className="font-mono">{runtime.defaultArgs.join(", ")}</code>
           </p>
@@ -207,10 +325,10 @@ function RuntimeDetails({ runtime }: { runtime: AcpRuntimeCatalogEntry }) {
   if (runtime.availability === "adapter_missing") {
     return (
       <>
-        <p className="text-sm leading-5 text-muted-foreground">
+        <p className="text-xs leading-4 text-white">
           CLI detected; ACP adapter missing.
         </p>
-        <p className="mt-1 text-xs leading-5 text-muted-foreground/80">
+        <p className="mt-1 text-xs leading-4 text-white">
           {runtime.installHint}
         </p>
       </>
@@ -220,20 +338,22 @@ function RuntimeDetails({ runtime }: { runtime: AcpRuntimeCatalogEntry }) {
   if (runtime.availability === "adapter_outdated") {
     return (
       <>
-        <p className="text-sm leading-5 text-muted-foreground">
+        <p className="text-xs leading-4 text-white">
           ACP adapter detected but outdated — reinstall required.
         </p>
-        <p className="mt-1 text-xs leading-5 text-muted-foreground/80">
+        <p className="mt-1 text-xs leading-4 text-white">
           This updates the machine-global{" "}
-          <code className="rounded bg-muted px-0.5 text-2xs">codex-acp</code>{" "}
+          <code className="rounded bg-white/10 px-0.5 font-mono text-xs text-white">
+            codex-acp
+          </code>{" "}
           adapter. Older Buzz releases using the legacy adapter contract may
           lose community access until{" "}
-          <code className="rounded bg-muted px-0.5 text-2xs">
+          <code className="rounded bg-white/10 px-0.5 font-mono text-xs text-white">
             @zed-industries/codex-acp@0.16.0
           </code>{" "}
           is restored.
         </p>
-        <p className="mt-1 text-xs leading-5 text-muted-foreground/80">
+        <p className="mt-1 text-xs leading-4 text-white">
           {runtime.installHint}
         </p>
       </>
@@ -243,10 +363,10 @@ function RuntimeDetails({ runtime }: { runtime: AcpRuntimeCatalogEntry }) {
   if (runtime.availability === "cli_missing") {
     return (
       <>
-        <p className="text-sm leading-5 text-muted-foreground">
+        <p className="text-xs leading-4 text-white">
           ACP adapter detected; CLI missing.
         </p>
-        <p className="mt-1 text-xs leading-5 text-muted-foreground/80">
+        <p className="mt-1 text-xs leading-4 text-white">
           {runtime.installHint}
         </p>
       </>
@@ -255,12 +375,8 @@ function RuntimeDetails({ runtime }: { runtime: AcpRuntimeCatalogEntry }) {
 
   return (
     <>
-      <p className="text-sm leading-5 text-muted-foreground">
-        Not installed yet.
-      </p>
-      <p className="mt-1 text-xs leading-5 text-muted-foreground/80">
-        {runtime.installHint}
-      </p>
+      <p className="text-xs leading-4 text-white">Not installed yet.</p>
+      <p className="mt-1 text-xs leading-4 text-white">{runtime.installHint}</p>
     </>
   );
 }
@@ -291,34 +407,53 @@ function runtimeDetailText(runtime: AcpRuntimeCatalogEntry): string {
 
 function isSupportedOnboardingAuthMethod(
   runtime: AcpRuntimeCatalogEntry,
-  method: { id: string; name: string },
+  method: AcpAuthMethod,
 ) {
   if (runtime.id !== "codex") return true;
   return !/api[-_ ]?key/i.test(`${method.id} ${method.name}`);
 }
 
-function onboardingAuthMethodLabel(
+function isPreferredClaudeAuthMethod(method: AcpAuthMethod) {
+  const haystack = [
+    method.id,
+    method.name,
+    method.description ?? "",
+    method.command.join(" "),
+    method.args.join(" "),
+  ]
+    .join(" ")
+    .toLowerCase();
+  return (
+    haystack.includes("claudeai") ||
+    haystack.includes("claude ai") ||
+    haystack.includes("claude.ai") ||
+    haystack.includes("subscription")
+  );
+}
+
+function getOnboardingAuthMethods(
   runtime: AcpRuntimeCatalogEntry,
-  method: { name: string },
+  methods: AcpAuthMethod[],
 ) {
-  if (runtime.id === "codex") return "Log in";
-  return method.name || "Sign in";
+  const supported = methods.filter((method) =>
+    isSupportedOnboardingAuthMethod(runtime, method),
+  );
+
+  if (runtime.id === "claude") {
+    const preferred =
+      supported.find(isPreferredClaudeAuthMethod) ?? supported[0];
+    return preferred ? [preferred] : [];
+  }
+
+  if (runtime.id === "codex") {
+    return supported.slice(0, 1);
+  }
+
+  return supported;
 }
 
-function RuntimeAuthActions({
-  onAuthenticated,
-  runtime,
-}: {
-  onAuthenticated: () => void;
-  runtime: AcpRuntimeCatalogEntry;
-}) {
+function RuntimeAuthActions({ runtime }: { runtime: AcpRuntimeCatalogEntry }) {
   const runtimesQuery = useAcpRuntimesQuery();
-  const methodsQuery = useAcpAuthMethodsQuery(runtime.id, {
-    enabled:
-      runtime.availability === "available" &&
-      runtime.authStatus.status === "logged_out",
-  });
-  const connectMutation = useConnectAcpRuntimeMutation();
 
   if (runtime.authStatus.status === "config_invalid") {
     return (
@@ -335,6 +470,7 @@ function RuntimeAuthActions({
         </span>
         <Button
           disabled={runtimesQuery.isFetching}
+          className="h-6 rounded-full px-2 text-2xs"
           onClick={(event) => {
             event.stopPropagation();
             void runtimesQuery.refetch();
@@ -348,71 +484,7 @@ function RuntimeAuthActions({
       </div>
     );
   }
-  if (runtime.authStatus.status !== "logged_out") return null;
-
-  const methods = (methodsQuery.data?.methods ?? []).filter((method) =>
-    isSupportedOnboardingAuthMethod(runtime, method),
-  );
-  return (
-    <div className="mt-2 flex flex-col items-center gap-1.5">
-      {methodsQuery.isLoading ? (
-        <span className="text-2xs text-muted-foreground">Loading sign-in…</span>
-      ) : methods.length > 0 ? (
-        methods.map((method) => (
-          <Button
-            disabled={connectMutation.isPending}
-            key={method.id}
-            onClick={(event) => {
-              event.stopPropagation();
-              connectMutation.mutate(
-                {
-                  methodId: method.id,
-                  runtimeId: runtime.id,
-                },
-                {
-                  onSuccess: () => {
-                    if (runtime.id === "claude" || runtime.id === "codex") {
-                      onAuthenticated();
-                    }
-                  },
-                },
-              );
-            }}
-            size="sm"
-            type="button"
-            variant="outline"
-          >
-            {connectMutation.isPending
-              ? "Opening…"
-              : onboardingAuthMethodLabel(runtime, method)}
-          </Button>
-        ))
-      ) : (
-        <span className="text-2xs text-muted-foreground">
-          {methodsQuery.error instanceof Error
-            ? "Couldn’t load sign-in options."
-            : runtime.loginHint || "Sign in from the CLI."}
-        </span>
-      )}
-      {connectMutation.error instanceof Error ? (
-        <span className="text-2xs text-destructive">
-          {connectMutation.error.message}
-        </span>
-      ) : null}
-      <Button
-        disabled={runtimesQuery.isFetching}
-        onClick={(event) => {
-          event.stopPropagation();
-          void Promise.all([runtimesQuery.refetch(), methodsQuery.refetch()]);
-        }}
-        size="sm"
-        type="button"
-        variant="ghost"
-      >
-        {runtimesQuery.isFetching ? "Checking…" : "Check again"}
-      </Button>
-    </div>
-  );
+  return null;
 }
 
 function RuntimeCard({
@@ -421,21 +493,23 @@ function RuntimeCard({
   isInstalling,
   onInstall,
   onSelect,
+  onToggle,
   runtime,
-  selectionDisabled,
   selected,
+  setupFlashToken,
 }: {
   installError: string | null;
   installSuccess: boolean;
   isInstalling: boolean;
   onInstall: () => void;
   onSelect: () => void;
+  onToggle: () => void;
   runtime: AcpRuntimeCatalogEntry;
-  selectionDisabled: boolean;
   selected: boolean;
+  setupFlashToken: number;
 }) {
   const isAvailable = runtime.availability === "available" || installSuccess;
-  const canSelect = runtimeCanBeSelected(runtime) && !selectionDisabled;
+  const canSelect = runtimeCanBeSelected(runtime);
 
   return (
     // biome-ignore lint/a11y/useSemanticElements: Cannot use <input> because this card contains nested setup and details buttons, which require interactive content
@@ -443,77 +517,52 @@ function RuntimeCard({
       aria-checked={selected}
       aria-disabled={!canSelect}
       className={cn(
-        "relative flex min-h-40 w-40 flex-col items-center justify-center gap-3 rounded-2xl bg-white/85 p-4 text-center",
-        isAvailable
-          ? "shadow-[0_0_55px_25px_rgba(255,255,255,0.85)]"
-          : "shadow-[0_0_45px_18px_rgba(255,255,255,0.55)] opacity-90",
+        "group relative flex aspect-[288/132] min-h-[96px] w-full max-w-[288px] select-none flex-col items-center justify-center rounded-2xl border-0 bg-white/75 px-3 py-1.5 text-center outline-none transition-colors duration-150 ease-out hover:bg-white/80 active:bg-white/90 focus-visible:ring-2 focus-visible:ring-foreground/40",
         installError && "ring-1 ring-destructive/40",
-        selected && "ring-2 ring-primary",
-        canSelect && "cursor-pointer hover:bg-white",
+        selected && "bg-white/90 hover:bg-white/90",
+        canSelect ? "cursor-pointer" : "cursor-default",
       )}
       data-testid={`onboarding-runtime-${runtime.id}`}
-      onClick={canSelect ? onSelect : undefined}
+      onClick={canSelect ? onToggle : undefined}
       onKeyDown={(event) => {
+        if (event.target !== event.currentTarget) return;
         if (canSelect && (event.key === "Enter" || event.key === " ")) {
           event.preventDefault();
-          onSelect();
+          onToggle();
         }
       }}
-      role="radio"
+      role="checkbox"
       tabIndex={canSelect ? 0 : -1}
     >
-      <div className="absolute right-2 top-2">
+      <RuntimeSelectionIndicator runtime={runtime} selected={selected} />
+
+      <div className="flex min-w-0 flex-col items-center gap-2.5">
+        <div className="flex min-w-0 items-center justify-center gap-3">
+          <RuntimeIcon className="h-7 w-7" runtime={runtime} />
+          <h2 className="truncate text-sm font-normal leading-5 text-foreground">
+            {getRuntimeDisplayLabel(runtime)}
+          </h2>
+        </div>
         <RuntimeStatus
           installError={installError}
+          installSuccess={installSuccess}
           isInstalling={isInstalling}
           onInstall={onInstall}
+          onSelect={onSelect}
           runtime={runtime}
+          setupFlashToken={setupFlashToken}
         />
-      </div>
-
-      <div className="absolute left-2 top-2">
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button
-              aria-label={`${runtime.label} details`}
-              className="h-6 w-6 text-muted-foreground/70 hover:text-foreground"
-              data-testid={`onboarding-runtime-details-${runtime.id}`}
-              size="icon"
-              type="button"
-              variant="ghost"
-            >
-              <Info className="h-3.5 w-3.5" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent align="start" className="w-80 text-left">
-            <RuntimeDetails runtime={runtime} />
-          </PopoverContent>
-        </Popover>
-      </div>
-
-      <RuntimeIcon runtime={runtime} />
-
-      <div className="min-w-0">
-        <h2 className="text-sm font-medium leading-5 text-foreground">
-          {runtime.label}
-        </h2>
         {!isAvailable && !installError ? (
-          <p className="mt-1 text-2xs leading-4 text-muted-foreground">
+          <p className="max-w-[13rem] text-2xs leading-4 text-muted-foreground">
             {runtimeDetailText(runtime)}
           </p>
         ) : null}
         {installError ? (
-          <p className="mt-1 text-2xs leading-4 text-destructive">
+          <p className="max-w-[13rem] text-2xs leading-4 text-destructive">
             {installError}
           </p>
         ) : null}
-        {installSuccess && runtime.availability !== "available" ? (
-          <p className="mt-1 text-2xs leading-4 text-primary">Installed</p>
-        ) : null}
-        {selected ? (
-          <p className="mt-1 text-2xs font-medium text-primary">Preferred</p>
-        ) : null}
-        <RuntimeAuthActions onAuthenticated={onSelect} runtime={runtime} />
+        <RuntimeAuthActions runtime={runtime} />
       </div>
     </div>
   );
@@ -527,10 +576,8 @@ function GitBashPrerequisiteCard() {
   return (
     <div
       className={cn(
-        "mx-auto w-full max-w-[560px] rounded-2xl bg-white/85 p-3 text-left sm:p-4",
-        prerequisite.available
-          ? "shadow-[0_0_45px_18px_rgba(255,255,255,0.7)]"
-          : "ring-1 ring-amber-500/40 shadow-[0_0_45px_18px_rgba(255,255,255,0.55)]",
+        "mx-auto w-full max-w-[560px] rounded-2xl bg-white/75 p-3 text-left sm:p-4",
+        !prerequisite.available && "ring-1 ring-amber-500/40",
       )}
       data-testid="onboarding-git-bash"
     >
@@ -577,16 +624,42 @@ function GitBashPrerequisiteCard() {
   );
 }
 
+function RuntimeProvidersLoadingState() {
+  return (
+    <div
+      aria-live="polite"
+      className="flex min-h-[260px] w-full items-center justify-center"
+      data-testid="onboarding-runtime-loading"
+      role="status"
+    >
+      <div className="flex flex-col items-center text-foreground/35">
+        <FlappingBee className="h-auto w-16" />
+        <p className="mt-5 text-2xl font-normal leading-8">
+          Finding your providers...
+        </p>
+      </div>
+    </div>
+  );
+}
+
 function RuntimeProvidersSection({
-  isSelectionSaving,
-  onSelectedRuntimeChange,
+  installResults,
+  onInstallResultsChange,
+  onSelectedRuntimeIdsChange,
   runtimeProviders,
-  selectedRuntimeId,
+  setupFlashToken,
+  setupRequiredRuntimeIds,
+  selectedRuntimeIds,
 }: {
-  isSelectionSaving: boolean;
-  onSelectedRuntimeChange: (runtimeId: string) => void;
+  installResults: InstallResultsState;
+  onInstallResultsChange: React.Dispatch<
+    React.SetStateAction<InstallResultsState>
+  >;
+  onSelectedRuntimeIdsChange: (runtimeIds: readonly string[]) => void;
   runtimeProviders: SetupStepState["runtimeProviders"];
-  selectedRuntimeId: string | null;
+  setupFlashToken: number;
+  setupRequiredRuntimeIds: readonly string[];
+  selectedRuntimeIds: readonly string[];
 }) {
   const { errorMessage, isChecking, items } = runtimeProviders;
   const runtimeOrder = ["claude", "codex", "goose", "buzz-agent"];
@@ -599,19 +672,39 @@ function RuntimeProvidersSection({
     );
   });
   const installMutation = useInstallAcpRuntimeMutation();
-  const [installResults, setInstallResults] = React.useState<
-    Record<string, InstallResultState>
-  >({});
+  const selectedRuntimeIdSet = React.useMemo(
+    () => new Set(selectedRuntimeIds),
+    [selectedRuntimeIds],
+  );
+  const setupRequiredRuntimeIdSet = React.useMemo(
+    () => new Set(setupRequiredRuntimeIds),
+    [setupRequiredRuntimeIds],
+  );
+
+  function handleRuntimeToggle(runtimeId: string) {
+    if (selectedRuntimeIdSet.has(runtimeId)) {
+      onSelectedRuntimeIdsChange(
+        selectedRuntimeIds.filter((selectedId) => selectedId !== runtimeId),
+      );
+      return;
+    }
+    onSelectedRuntimeIdsChange([...selectedRuntimeIds, runtimeId]);
+  }
+
+  function handleRuntimeSelect(runtimeId: string) {
+    if (selectedRuntimeIdSet.has(runtimeId)) return;
+    onSelectedRuntimeIdsChange([...selectedRuntimeIds, runtimeId]);
+  }
 
   function handleInstall(runtimeId: string) {
-    setInstallResults((current) => ({
+    onInstallResultsChange((current) => ({
       ...current,
       [runtimeId]: { error: null, success: false },
     }));
 
     installMutation.mutate(runtimeId, {
       onSuccess: (result) => {
-        setInstallResults((current) => ({
+        onInstallResultsChange((current) => ({
           ...current,
           [runtimeId]: result.success
             ? { error: null, success: true }
@@ -619,7 +712,7 @@ function RuntimeProvidersSection({
         }));
       },
       onError: (error) => {
-        setInstallResults((current) => ({
+        onInstallResultsChange((current) => ({
           ...current,
           [runtimeId]: {
             error: error instanceof Error ? error.message : "Install failed.",
@@ -631,61 +724,68 @@ function RuntimeProvidersSection({
   }
 
   return (
-    <section className="flex w-full flex-col items-center gap-8">
-      <div className="w-full max-w-[520px] text-center">
+    <section className="flex min-h-full w-full flex-col items-center">
+      <div className="w-full max-w-[820px] text-center">
         <h1 className="text-title font-normal text-foreground">
           Use the models that fit the task
         </h1>
-        <p className="mt-3 text-sm leading-6 text-foreground/80">
-          These are the local agent harnesses Buzz detected. You choose a
-          harness when creating each agent.
+        <p className="mx-auto mt-3 max-w-[760px] text-sm leading-6 text-foreground/90">
+          <span>
+            Connect your model providers here. Each agent can use the one that’s
+            best for their work.
+          </span>
+          <span className="mt-1 block">
+            Choose at least one to start using Buzz.
+          </span>
         </p>
       </div>
 
-      <GitBashPrerequisiteCard />
-
-      {items.length > 0 ? (
-        <div
-          aria-label="Preferred agent harness"
-          className="flex flex-wrap items-stretch justify-center gap-4"
-          role="radiogroup"
-        >
-          {orderedItems.map((runtime) => (
-            <RuntimeCard
-              installError={installResults[runtime.id]?.error ?? null}
-              installSuccess={installResults[runtime.id]?.success ?? false}
-              isInstalling={
-                installMutation.isPending &&
-                installMutation.variables === runtime.id
-              }
-              key={runtime.id}
-              onInstall={() => handleInstall(runtime.id)}
-              onSelect={() => onSelectedRuntimeChange(runtime.id)}
-              runtime={runtime}
-              selectionDisabled={isSelectionSaving}
-              selected={selectedRuntimeId === runtime.id}
-            />
-          ))}
-        </div>
-      ) : isChecking ? (
-        <div className="rounded-2xl bg-white/70 px-6 py-6 text-sm text-muted-foreground">
-          Looking for compatible runtimes...
-        </div>
-      ) : errorMessage ? null : (
-        <p
-          className="max-w-[560px] rounded-2xl bg-white/70 px-6 py-6 text-sm text-muted-foreground"
-          data-testid="onboarding-acp-empty"
-        >
-          No compatible ACP runtimes detected yet. You can finish setup now and
-          come back later in Settings &gt; Doctor.
-        </p>
-      )}
+      <div className="flex w-full flex-1 flex-col items-center justify-center gap-8 py-10">
+        <GitBashPrerequisiteCard />
+
+        {items.length > 0 ? (
+          <fieldset className="grid min-w-0 w-full max-w-[592px] grid-cols-1 gap-4 border-0 p-0 md:grid-cols-2">
+            <legend className="sr-only">Agent harnesses</legend>
+            {orderedItems.map((runtime) => (
+              <RuntimeCard
+                installError={installResults[runtime.id]?.error ?? null}
+                installSuccess={installResults[runtime.id]?.success ?? false}
+                isInstalling={
+                  installMutation.isPending &&
+                  installMutation.variables === runtime.id
+                }
+                key={runtime.id}
+                onInstall={() => handleInstall(runtime.id)}
+                onSelect={() => handleRuntimeSelect(runtime.id)}
+                onToggle={() => handleRuntimeToggle(runtime.id)}
+                runtime={runtime}
+                selected={selectedRuntimeIdSet.has(runtime.id)}
+                setupFlashToken={
+                  setupRequiredRuntimeIdSet.has(runtime.id)
+                    ? setupFlashToken
+                    : 0
+                }
+              />
+            ))}
+          </fieldset>
+        ) : isChecking ? (
+          <RuntimeProvidersLoadingState />
+        ) : errorMessage ? null : (
+          <p
+            className="max-w-[560px] rounded-2xl bg-white/70 px-6 py-6 text-sm text-muted-foreground"
+            data-testid="onboarding-acp-empty"
+          >
+            No compatible ACP runtimes detected yet. You can finish setup now
+            and come back later in Settings &gt; Doctor.
+          </p>
+        )}
 
-      {errorMessage ? (
-        <p className="max-w-[560px] rounded-2xl bg-destructive/10 px-6 py-3 text-sm text-destructive">
-          {errorMessage}
-        </p>
-      ) : null}
+        {errorMessage ? (
+          <p className="max-w-[560px] rounded-2xl bg-destructive/10 px-6 py-3 text-sm text-destructive">
+            {errorMessage}
+          </p>
+        ) : null}
+      </div>
     </section>
   );
 }
@@ -694,27 +794,72 @@ function SetupStepContent({
   actions,
   direction,
   isSelectionSaving,
-  onSelectedRuntimeChange,
+  onSelectedRuntimeIdsChange,
   selectionError,
-  selectedRuntimeId,
+  selectedRuntimeIds,
   state,
 }: SetupStepContentProps) {
   const { runtimeProviders } = state;
+  const [installResults, setInstallResults] =
+    React.useState<InstallResultsState>({});
+  const [setupFlashToken, setSetupFlashToken] = React.useState(0);
+  const [setupRequiredHintKey, setSetupRequiredHintKey] = React.useState<
+    string | null
+  >(null);
+  const runtimeById = React.useMemo(
+    () =>
+      new Map(runtimeProviders.items.map((runtime) => [runtime.id, runtime])),
+    [runtimeProviders.items],
+  );
+  const setupRequiredRuntimeIds = React.useMemo(
+    () =>
+      selectedRuntimeIds.filter((runtimeId) => {
+        const runtime = runtimeById.get(runtimeId);
+        if (!runtime) return false;
+        return !runtimeCanAdvanceOnboarding(runtime);
+      }),
+    [runtimeById, selectedRuntimeIds],
+  );
+  const hasSetupRequiredSelection = setupRequiredRuntimeIds.length > 0;
+  const setupRequiredRuntimeIdsKey = setupRequiredRuntimeIds.join("\0");
+  const showSetupRequiredHint =
+    hasSetupRequiredSelection &&
+    setupRequiredHintKey === setupRequiredRuntimeIdsKey;
+
+  React.useEffect(() => {
+    if (
+      setupRequiredHintKey !== null &&
+      setupRequiredHintKey !== setupRequiredRuntimeIdsKey
+    ) {
+      setSetupRequiredHintKey(null);
+    }
+  }, [setupRequiredHintKey, setupRequiredRuntimeIdsKey]);
+
+  function handleNext() {
+    if (selectedRuntimeIds.length === 0 || isSelectionSaving) return;
+    if (hasSetupRequiredSelection) {
+      setSetupRequiredHintKey(setupRequiredRuntimeIdsKey);
+      setSetupFlashToken((current) => current + 1);
+      return;
+    }
+    actions.next();
+  }
 
   return (
     <OnboardingSlideTransition
-      // pb clears the always-docked footer: the provider list can overflow on
-      // short windows, so reserve room to scroll clear of the fixed CTA group.
-      className="flex w-full flex-col items-center pb-20"
+      className="flex min-h-full w-full flex-col items-center"
       data-testid="onboarding-page-2"
       direction={direction}
       transitionKey={`setup-${direction}`}
     >
       <RuntimeProvidersSection
-        isSelectionSaving={isSelectionSaving}
-        onSelectedRuntimeChange={onSelectedRuntimeChange}
+        installResults={installResults}
+        onInstallResultsChange={setInstallResults}
+        onSelectedRuntimeIdsChange={onSelectedRuntimeIdsChange}
         runtimeProviders={runtimeProviders}
-        selectedRuntimeId={selectedRuntimeId}
+        setupFlashToken={setupFlashToken}
+        setupRequiredRuntimeIds={setupRequiredRuntimeIds}
+        selectedRuntimeIds={selectedRuntimeIds}
       />
 
       <OnboardingFooter>
@@ -726,18 +871,32 @@ function SetupStepContent({
             {selectionError}
           </p>
         ) : null}
+        {hasSetupRequiredSelection && showSetupRequiredHint ? (
+          <p
+            className="-mb-1 text-center text-xs leading-4 text-foreground/60"
+            data-testid="onboarding-setup-next-hint"
+          >
+            Please finish set up
+          </p>
+        ) : null}
         <Button
-          className={ONBOARDING_PRIMARY_CTA_CLASS}
+          className={cn(
+            ONBOARDING_PRIMARY_CTA_CLASS,
+            "text-sm",
+            hasSetupRequiredSelection &&
+              "cursor-default opacity-50 hover:opacity-50",
+          )}
+          data-soft-disabled={hasSetupRequiredSelection ? "true" : undefined}
           data-testid="onboarding-setup-next"
-          disabled={!selectedRuntimeId || isSelectionSaving}
-          onClick={actions.next}
+          disabled={selectedRuntimeIds.length === 0 || isSelectionSaving}
+          onClick={handleNext}
           type="button"
         >
-          {isSelectionSaving ? "Saving…" : "Next"}
+          Next
         </Button>
 
         <Button
-          className="h-9 rounded-full bg-foreground/10 px-6 hover:bg-foreground/15"
+          className="h-9 rounded-full bg-foreground/10 px-6 text-sm hover:bg-foreground/15"
           data-testid="onboarding-back"
           onClick={actions.back}
           type="button"
@@ -754,9 +913,9 @@ export function SetupStep({
   actions,
   direction,
   isSelectionSaving,
-  onSelectedRuntimeChange,
+  onSelectedRuntimeIdsChange,
   selectionError,
-  selectedRuntimeId,
+  selectedRuntimeIds,
 }: SetupStepProps) {
   const state = useSetupStepState();
 
@@ -765,9 +924,9 @@ export function SetupStep({
       actions={actions}
       direction={direction}
       isSelectionSaving={isSelectionSaving}
-      onSelectedRuntimeChange={onSelectedRuntimeChange}
+      onSelectedRuntimeIdsChange={onSelectedRuntimeIdsChange}
       selectionError={selectionError}
-      selectedRuntimeId={selectedRuntimeId}
+      selectedRuntimeIds={selectedRuntimeIds}
       state={state}
     />
   );
diff --git a/desktop/src/features/onboarding/ui/onboardingRuntimeSelection.test.mjs b/desktop/src/features/onboarding/ui/onboardingRuntimeSelection.test.mjs
index cce22062e7..2910d64905 100644
--- a/desktop/src/features/onboarding/ui/onboardingRuntimeSelection.test.mjs
+++ b/desktop/src/features/onboarding/ui/onboardingRuntimeSelection.test.mjs
@@ -1,13 +1,20 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 
-import { runtimeCanBeSelected } from "./onboardingRuntimeSelection.ts";
+import {
+  getDefaultModelConfigRuntimeId,
+  getPreferredRuntimeIdForSelection,
+  runtimeCanAdvanceOnboarding,
+  runtimeCanBeSelected,
+  runtimeSelectionNeedsDefaultModelConfig,
+  runtimeSelectionNeedsDefaultsStep,
+} from "./onboardingRuntimeSelection.ts";
 
 function runtime(id, availability, status) {
   return { id, availability, authStatus: { status } };
 }
 
-test("Claude and Codex require available authenticated CLIs", () => {
+test("known onboarding harnesses can be selected regardless of setup state", () => {
   for (const id of ["claude", "codex"]) {
     assert.equal(
       runtimeCanBeSelected(runtime(id, "available", "logged_in")),
@@ -19,24 +26,22 @@ test("Claude and Codex require available authenticated CLIs", () => {
     );
     assert.equal(
       runtimeCanBeSelected(runtime(id, "available", "logged_out")),
-      false,
+      true,
     );
     assert.equal(
       runtimeCanBeSelected(runtime(id, "available", "config_invalid")),
-      false,
+      true,
     );
     assert.equal(
       runtimeCanBeSelected(runtime(id, "available", "unknown")),
-      false,
+      true,
     );
     assert.equal(
-      runtimeCanBeSelected(runtime(id, "not_installed", "logged_in")),
-      false,
+      runtimeCanBeSelected(runtime(id, "not_installed", "logged_out")),
+      true,
     );
   }
-});
 
-test("Buzz Agent and Goose remain selectable when available", () => {
   for (const id of ["buzz-agent", "goose"]) {
     assert.equal(
       runtimeCanBeSelected(runtime(id, "available", "not_applicable")),
@@ -44,7 +49,7 @@ test("Buzz Agent and Goose remain selectable when available", () => {
     );
     assert.equal(
       runtimeCanBeSelected(runtime(id, "not_installed", "not_applicable")),
-      false,
+      true,
     );
   }
 });
@@ -55,3 +60,61 @@ test("unknown runtimes are not onboarding choices", () => {
     false,
   );
 });
+
+test("selected runtimes can advance only after setup is complete", () => {
+  assert.equal(
+    runtimeCanAdvanceOnboarding(runtime("claude", "available", "logged_in")),
+    true,
+  );
+  assert.equal(
+    runtimeCanAdvanceOnboarding(
+      runtime("buzz-agent", "available", "not_applicable"),
+    ),
+    true,
+  );
+  assert.equal(
+    runtimeCanAdvanceOnboarding(runtime("claude", "available", "logged_out")),
+    false,
+  );
+  assert.equal(
+    runtimeCanAdvanceOnboarding(runtime("codex", "not_installed", "unknown")),
+    false,
+  );
+  assert.equal(
+    runtimeCanAdvanceOnboarding(
+      runtime("claude", "adapter_missing", "unknown"),
+    ),
+    false,
+  );
+});
+
+test("provider-backed selections drive the default model config step", () => {
+  assert.equal(
+    runtimeSelectionNeedsDefaultModelConfig(["claude", "codex"]),
+    false,
+  );
+  assert.equal(
+    runtimeSelectionNeedsDefaultModelConfig(["claude", "goose"]),
+    true,
+  );
+  assert.equal(
+    getDefaultModelConfigRuntimeId(["claude", "codex", "goose", "buzz-agent"]),
+    "buzz-agent",
+  );
+  assert.equal(
+    getPreferredRuntimeIdForSelection(["claude", "codex", "goose"]),
+    "goose",
+  );
+  assert.equal(
+    getPreferredRuntimeIdForSelection(["claude", "codex"]),
+    "claude",
+  );
+});
+
+test("any harness selection drives the defaults step", () => {
+  assert.equal(runtimeSelectionNeedsDefaultsStep([]), false);
+  assert.equal(runtimeSelectionNeedsDefaultsStep(["claude"]), true);
+  assert.equal(runtimeSelectionNeedsDefaultsStep(["codex"]), true);
+  assert.equal(runtimeSelectionNeedsDefaultsStep(["claude", "codex"]), true);
+  assert.equal(runtimeSelectionNeedsDefaultsStep(["goose"]), true);
+});
diff --git a/desktop/src/features/onboarding/ui/onboardingRuntimeSelection.ts b/desktop/src/features/onboarding/ui/onboardingRuntimeSelection.ts
index baee83c125..2b77e9a51b 100644
--- a/desktop/src/features/onboarding/ui/onboardingRuntimeSelection.ts
+++ b/desktop/src/features/onboarding/ui/onboardingRuntimeSelection.ts
@@ -1,12 +1,59 @@
 import type { AcpRuntimeCatalogEntry } from "@/shared/api/types";
 
+const KNOWN_ONBOARDING_RUNTIME_IDS = new Set([
+  "buzz-agent",
+  "claude",
+  "codex",
+  "goose",
+]);
+
+export function runtimeUsesDefaultModelConfig(runtimeId: string) {
+  return runtimeId === "buzz-agent" || runtimeId === "goose";
+}
+
+export function getDefaultModelConfigRuntimeId(runtimeIds: readonly string[]) {
+  return (
+    runtimeIds.find((runtimeId) => runtimeId === "buzz-agent") ??
+    runtimeIds.find((runtimeId) => runtimeId === "goose") ??
+    null
+  );
+}
+
+export function getPreferredRuntimeIdForSelection(
+  runtimeIds: readonly string[],
+) {
+  return getDefaultModelConfigRuntimeId(runtimeIds) ?? runtimeIds[0] ?? null;
+}
+
+export function runtimeSelectionNeedsDefaultModelConfig(
+  runtimeIds: readonly string[],
+) {
+  return runtimeIds.some(runtimeUsesDefaultModelConfig);
+}
+
+export function runtimeSelectionNeedsDefaultsStep(
+  runtimeIds: readonly string[],
+) {
+  return runtimeIds.length > 0;
+}
+
 export function runtimeCanBeSelected(runtime: AcpRuntimeCatalogEntry) {
+  if (KNOWN_ONBOARDING_RUNTIME_IDS.has(runtime.id)) return true;
   if (runtime.availability !== "available") return false;
   if (runtime.id === "claude" || runtime.id === "codex") {
     return (
       runtime.authStatus.status === "logged_in" ||
-      runtime.authStatus.status === "not_applicable"
+      runtime.authStatus.status === "not_applicable" ||
+      runtime.authStatus.status === "logged_out"
     );
   }
   return runtime.id === "buzz-agent" || runtime.id === "goose";
 }
+
+export function runtimeCanAdvanceOnboarding(runtime: AcpRuntimeCatalogEntry) {
+  return (
+    runtime.availability === "available" &&
+    (runtime.authStatus.status === "logged_in" ||
+      runtime.authStatus.status === "not_applicable")
+  );
+}
diff --git a/desktop/src/shared/styles/globals/components.css b/desktop/src/shared/styles/globals/components.css
index 55c4b8f1f7..2695bdfae6 100644
--- a/desktop/src/shared/styles/globals/components.css
+++ b/desktop/src/shared/styles/globals/components.css
@@ -214,6 +214,20 @@
     width: 100%;
   }
 
+  .buzz-onboarding-step-frame {
+    min-height: min(1000px, max(0px, calc(100dvh - 106px - 7rem)));
+    max-height: 1000px;
+  }
+
+  .buzz-onboarding-step-frame > .buzz-onboarding-slide,
+  .buzz-onboarding-step-frame
+    > .buzz-onboarding-slide
+    > .buzz-onboarding-transition-line {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
   .buzz-onboarding-neutral-theme.buzz-startup-shell {
     /* Dot grid over the chartreuse→light-blue gradient (dots layer first so
        they sit on top). The welcome page overrides this with dots over a flat
@@ -404,6 +418,87 @@
     animation: buzz-onboarding-caret-blink 1.1s steps(1, end) infinite;
   }
 
+  .buzz-onboarding-runtime-pill {
+    animation: buzz-onboarding-runtime-pill-in 180ms
+      cubic-bezier(0.22, 1, 0.36, 1) both;
+    font-size: 0.625rem;
+    letter-spacing: 0;
+    line-height: 1;
+    text-transform: uppercase;
+    transform-origin: top center;
+    will-change: opacity, transform;
+  }
+
+  .buzz-onboarding-runtime-setup {
+    isolation: isolate;
+    position: relative;
+  }
+
+  .buzz-onboarding-runtime-setup[data-setup-flash="true"] {
+    animation: buzz-onboarding-runtime-setup-bump 560ms
+      cubic-bezier(0.22, 1, 0.36, 1) both;
+    transform-origin: center;
+    will-change: transform;
+  }
+
+  .buzz-onboarding-runtime-setup[data-setup-flash="true"]::after {
+    animation: buzz-onboarding-runtime-setup-ring 560ms
+      cubic-bezier(0.22, 1, 0.36, 1) both;
+    border: 1px solid var(--buzz-welcome-chartreuse);
+    border-radius: inherit;
+    content: "";
+    inset: -0.25rem;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    transform: scale(0.9);
+    will-change: opacity, transform;
+  }
+
+  @keyframes buzz-onboarding-runtime-pill-in {
+    from {
+      opacity: 0;
+      transform: translateY(-0.25rem) scale(0.94);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes buzz-onboarding-runtime-setup-bump {
+    0%,
+    100% {
+      transform: translateZ(0) scale(1);
+    }
+
+    35% {
+      transform: translateZ(0) scale(1.06);
+    }
+
+    70% {
+      transform: translateZ(0) scale(0.99);
+    }
+  }
+
+  @keyframes buzz-onboarding-runtime-setup-ring {
+    0% {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+
+    28% {
+      opacity: 0.55;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(1.28);
+    }
+  }
+
   @keyframes buzz-onboarding-caret-blink {
     0%,
     55% {
@@ -469,6 +564,31 @@
     }
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .buzz-onboarding-runtime-check,
+    .buzz-onboarding-runtime-checkmark {
+      transition: none;
+    }
+
+    .buzz-onboarding-runtime-pill {
+      animation: none;
+      will-change: auto;
+    }
+
+    .buzz-onboarding-runtime-setup[data-setup-flash="true"] {
+      animation: none;
+      outline: 2px solid var(--buzz-welcome-chartreuse);
+      outline-offset: 2px;
+      will-change: auto;
+    }
+
+    .buzz-onboarding-runtime-setup[data-setup-flash="true"]::after {
+      animation: none;
+      content: none;
+      will-change: auto;
+    }
+  }
+
   @media (max-width: 640px) {
     @keyframes buzz-onboarding-line-slide-forward {
       from {
diff --git a/desktop/src/testing/e2eBridge.ts b/desktop/src/testing/e2eBridge.ts
index 6db1d2e164..7d491ba81b 100644
--- a/desktop/src/testing/e2eBridge.ts
+++ b/desktop/src/testing/e2eBridge.ts
@@ -126,6 +126,7 @@ type E2eConfig = {
   mode?: "mock" | "relay";
   mock?: {
     acpRuntimesCatalog?: RawAcpRuntimeCatalogEntry[];
+    acpRuntimesDelayMs?: number;
     acpAuthMethods?: Record<string, RawAcpAuthMethodsResult>;
     connectAcpRuntimeResult?: RawConnectAcpRuntimeResult;
     connectAcpRuntimeDelayMs?: number;
@@ -304,6 +305,9 @@ type E2eConfig = {
       masked: boolean;
       value: string;
     }>;
+    /** Delay (ms) applied to `get_baked_build_env` so specs can observe
+     *  initial render gating around build defaults. 0/undefined = instant. */
+    bakedBuildEnvDelayMs?: number;
     /** Delay (ms) applied to `set_global_agent_config` so tests can observe
      *  autosave behaviour while a request is in flight. 0/undefined = instant.
      *  Alias of `globalConfigSaveDelayMs` (kept for onboarding specs). */
@@ -6599,6 +6603,13 @@ async function handleListRelayAgents(
 async function handleDiscoverAcpRuntimes(
   config: E2eConfig | undefined,
 ): Promise<RawAcpRuntimeCatalogEntry[]> {
+  const delayMs = config?.mock?.acpRuntimesDelayMs ?? 0;
+  if (delayMs > 0) {
+    await new Promise<void>((resolve) => {
+      window.setTimeout(resolve, delayMs);
+    });
+  }
+
   const configured = config?.mock?.acpRuntimesCatalog;
   if (configured) {
     return configured;
@@ -9426,8 +9437,12 @@ export function maybeInstallE2eTauriMocks() {
           supportsSwitching: false,
         };
       case "discover_agent_models": {
-        const input = (payload as { input?: { provider?: string } } | null)
-          ?.input;
+        const input = (
+          payload as {
+            input?: { agentCommand?: string; provider?: string };
+          } | null
+        )?.input;
+        const agentCommand = input?.agentCommand?.trim() ?? "";
         const provider = input?.provider?.trim() ?? "";
         const openAiModels = [
           { id: "gpt-5.5", name: "GPT-5.5", description: null },
@@ -9447,6 +9462,22 @@ export function maybeInstallE2eTauriMocks() {
             description: null,
           },
         ];
+        const claudeRuntimeModels = [
+          {
+            id: "claude-sonnet-4-20250514",
+            name: "Claude Sonnet 4",
+            description: null,
+          },
+          {
+            id: "claude-opus-4-20250514",
+            name: "Claude Opus 4",
+            description: null,
+          },
+        ];
+        const codexRuntimeModels = [
+          { id: "codex-mini", name: "Codex mini", description: null },
+          { id: "codex-pro", name: "Codex pro", description: null },
+        ];
         if (provider === "relay-mesh") {
           if (!mockMeshState.admitted) {
             throw new Error(mockMeshState.denyReason);
@@ -9468,7 +9499,11 @@ export function maybeInstallE2eTauriMocks() {
               ? openAiModels
               : provider === "anthropic"
                 ? anthropicModels
-                : [...anthropicModels, ...openAiModels];
+                : agentCommand.includes("claude")
+                  ? claudeRuntimeModels
+                  : agentCommand.includes("codex")
+                    ? codexRuntimeModels
+                    : [...anthropicModels, ...openAiModels];
         return {
           agentName: "mock-agent",
           agentVersion: "0.0.0",
@@ -9533,8 +9568,15 @@ export function maybeInstallE2eTauriMocks() {
             config?.mock?.globalConfigFailedRestartCount ?? 0,
         };
       }
-      case "get_baked_build_env":
+      case "get_baked_build_env": {
+        const bakedEnvDelayMs = config?.mock?.bakedBuildEnvDelayMs ?? 0;
+        if (bakedEnvDelayMs > 0) {
+          await new Promise((resolve) =>
+            window.setTimeout(resolve, bakedEnvDelayMs),
+          );
+        }
         return config?.mock?.bakedBuildEnv ?? [];
+      }
       case "get_baked_build_env_keys":
         return (config?.mock?.bakedBuildEnv ?? []).map((entry) => entry.key);
       case "update_managed_agent":
diff --git a/desktop/tailwind.config.js b/desktop/tailwind.config.js
index fc42aed160..7261cd9cfd 100644
--- a/desktop/tailwind.config.js
+++ b/desktop/tailwind.config.js
@@ -10,6 +10,7 @@ export default {
       fontSize: {
         "2xs": "0.6875rem", // 11px — meta-text workhorse (timestamps, badges)
         "3xs": "0.5rem", // 8px — tiny glyphs / micro labels
+        badge: "0.625rem", // 10px — compact status badges
         // 40px — onboarding page titles (tightened tracking for large display type)
         title: ["2.5rem", { lineHeight: "1.15", letterSpacing: "-0.02em" }],
         // 36px — the backup-step private key, shown large in monospace
diff --git a/desktop/tests/e2e/onboarding-agent-defaults.spec.ts b/desktop/tests/e2e/onboarding-agent-defaults.spec.ts
index 23d443de69..f4643f3616 100644
--- a/desktop/tests/e2e/onboarding-agent-defaults.spec.ts
+++ b/desktop/tests/e2e/onboarding-agent-defaults.spec.ts
@@ -10,10 +10,18 @@ function availableRuntime(
   authStatus:
     | { status: "config_invalid"; diagnostic: string }
     | { status: "logged_in" | "logged_out" | "not_applicable" | "unknown" },
+  overrides: Record<string, unknown> = {},
 ) {
   return {
     id,
-    label: id === "buzz-agent" ? "Buzz Agent" : id,
+    label:
+      id === "buzz-agent"
+        ? "Buzz Agent"
+        : id === "claude"
+          ? "Claude"
+          : id === "codex"
+            ? "Codex"
+            : "Goose",
     avatar_url: "",
     availability: "available",
     command: id,
@@ -27,6 +35,7 @@ function availableRuntime(
     node_required: false,
     auth_status: authStatus,
     login_hint: `Sign in to ${id}`,
+    ...overrides,
   };
 }
 
@@ -50,7 +59,30 @@ async function navigateToConfigPage(
   await expect(page.getByTestId("onboarding-page-config")).toBeVisible();
 }
 
-test("requires a preferred runtime and routes detailed runtimes to config", async ({
+async function chooseConfigDropdownOption(
+  page: Parameters<typeof installMockBridge>[0],
+  triggerTestId: string,
+  value: string,
+) {
+  await page.getByTestId(triggerTestId).click();
+  await page.getByTestId(`${triggerTestId}-option-${value || "empty"}`).click();
+}
+
+async function readSavedRuntime(page: Parameters<typeof installMockBridge>[0]) {
+  const savedConfig = await page.evaluate(() =>
+    (
+      window as Window & {
+        __BUZZ_E2E_INVOKE_MOCK_COMMAND__?: (
+          command: string,
+          payload: unknown,
+        ) => Promise<{ preferred_runtime?: string | null }>;
+      }
+    ).__BUZZ_E2E_INVOKE_MOCK_COMMAND__?.("get_global_agent_config", null),
+  );
+  return savedConfig?.preferred_runtime ?? null;
+}
+
+test("requires a runtime selection and routes Buzz Agent to config", async ({
   page,
 }) => {
   await installMockBridge(
@@ -67,16 +99,47 @@ test("requires a preferred runtime and routes detailed runtimes to config", asyn
   await navigateToSetupPage(page);
 
   const next = page.getByTestId("onboarding-setup-next");
+  const card = page.getByTestId("onboarding-runtime-buzz-agent");
   await expect(next).toBeDisabled();
-  await page.getByTestId("onboarding-runtime-buzz-agent").click();
-  await expect(next).toHaveText("Saving…");
-  await expect(next).toBeDisabled();
+  await expect(card.getByText("Preferred")).toHaveCount(0);
+
+  await card.click();
+  await expect(next).toHaveText("Next");
+  await expect(card).toHaveAttribute("aria-checked", "true");
   await expect(next).toBeEnabled();
   await next.click();
   await expect(page.getByTestId("onboarding-page-config")).toBeVisible();
+  expect(await readSavedRuntime(page)).toBe("buzz-agent");
 });
 
-test("authenticated Claude persists as preferred and skips detailed config", async ({
+test("rapid harness toggles serialize the persisted preferred runtime", async ({
+  page,
+}) => {
+  await installMockBridge(
+    page,
+    {
+      acpRuntimesCatalog: [
+        availableRuntime("goose", { status: "not_applicable" }),
+        availableRuntime("buzz-agent", { status: "not_applicable" }),
+      ],
+      setGlobalAgentConfigDelayMs: 200,
+    },
+    { skipCommunitySeed: true, skipOnboardingSeed: true },
+  );
+  await page.goto("/");
+  await navigateToSetupPage(page);
+
+  await page.getByTestId("onboarding-runtime-goose").click();
+  await page.getByTestId("onboarding-runtime-buzz-agent").click();
+  const next = page.getByTestId("onboarding-setup-next");
+  await expect(next).toBeDisabled();
+  await page.waitForTimeout(300);
+  await expect(next).toBeDisabled();
+  await expect(next).toBeEnabled({ timeout: 700 });
+  expect(await readSavedRuntime(page)).toBe("buzz-agent");
+});
+
+test("authenticated Claude saves the selected runtime and routes to defaults", async ({
   page,
 }) => {
   await installMockBridge(
@@ -92,22 +155,16 @@ test("authenticated Claude persists as preferred and skips detailed config", asy
   await page.getByTestId("onboarding-runtime-claude").click();
   await expect(page.getByTestId("onboarding-setup-next")).toBeEnabled();
   await page.getByTestId("onboarding-setup-next").click();
-  await expect(page.getByTestId("machine-onboarding-gate")).toHaveCount(0);
-
-  const savedConfig = await page.evaluate(() =>
-    (
-      window as Window & {
-        __BUZZ_E2E_INVOKE_MOCK_COMMAND__?: (
-          command: string,
-          payload: unknown,
-        ) => Promise<{ preferred_runtime: string | null }>;
-      }
-    ).__BUZZ_E2E_INVOKE_MOCK_COMMAND__?.("get_global_agent_config", null),
+  await expect(page.getByTestId("onboarding-page-config")).toBeVisible();
+  await expect(page.getByTestId("global-agent-default-harness")).toHaveText(
+    "Claude",
   );
-  expect(savedConfig?.preferred_runtime).toBe("claude");
+  expect(await readSavedRuntime(page)).toBe("claude");
 });
 
-test("successful Claude sign-in selects it as preferred", async ({ page }) => {
+test("successful Claude sign-in selects the card without extra status copy", async ({
+  page,
+}) => {
   await installMockBridge(
     page,
     {
@@ -118,8 +175,14 @@ test("successful Claude sign-in selects it as preferred", async ({ page }) => {
         claude: {
           methods: [
             {
-              id: "claude-login",
-              name: "Sign in",
+              id: "claude-subscription",
+              name: "Claude Subscription",
+              description: null,
+              type: "terminal",
+            },
+            {
+              id: "anthropic-console",
+              name: "Anthropic Console",
               description: null,
               type: "terminal",
             },
@@ -134,24 +197,30 @@ test("successful Claude sign-in selects it as preferred", async ({ page }) => {
   await waitForAnimations(page);
 
   const card = page.getByTestId("onboarding-runtime-claude");
-  await card.getByRole("button", { name: "Sign in" }).click({ force: true });
-  await expect(card.getByText("Preferred")).toBeVisible();
-  await expect(page.getByTestId("onboarding-setup-next")).toBeEnabled();
+  await expect(
+    card.getByRole("button", { name: "Claude Subscription" }),
+  ).toHaveCount(0);
+  await expect(
+    card.getByRole("button", { name: "Anthropic Console" }),
+  ).toHaveCount(0);
+  await expect(
+    card.getByRole("button", { name: "Log in to Claude" }),
+  ).toHaveCount(0);
+  await expect(
+    card.getByTestId("onboarding-runtime-instructions-claude"),
+  ).toBeVisible();
+  await card.getByTestId("onboarding-runtime-instructions-claude").click();
 
-  const savedConfig = await page.evaluate(() =>
-    (
-      window as Window & {
-        __BUZZ_E2E_INVOKE_MOCK_COMMAND__?: (
-          command: string,
-          payload: unknown,
-        ) => Promise<{ preferred_runtime: string | null }>;
-      }
-    ).__BUZZ_E2E_INVOKE_MOCK_COMMAND__?.("get_global_agent_config", null),
-  );
-  expect(savedConfig?.preferred_runtime).toBe("claude");
+  await expect(card).toHaveAttribute("aria-checked", "true");
+  await expect(card.getByText("Preferred")).toHaveCount(0);
+  await expect(
+    page.getByTestId("onboarding-runtime-checkmark-claude"),
+  ).toHaveCSS("opacity", "1");
+  await expect(page.getByTestId("onboarding-setup-next")).toBeEnabled();
+  expect(await readSavedRuntime(page)).toBe("claude");
 });
 
-test("successful Codex sign-in hides API key auth and selects it as preferred", async ({
+test("successful Codex sign-in hides API key auth and selects the card", async ({
   page,
 }) => {
   await installMockBridge(
@@ -187,28 +256,56 @@ test("successful Codex sign-in hides API key auth and selects it as preferred",
   await expect(card.getByRole("button", { name: "Use API key" })).toHaveCount(
     0,
   );
-  await expect(card.getByLabel("Codex available")).toHaveCount(0);
   await expect(
     card.getByRole("button", { name: "Sign in with ChatGPT" }),
   ).toHaveCount(0);
-  await card.getByRole("button", { name: "Log in" }).click({ force: true });
-  await expect(card.getByText("Preferred")).toBeVisible();
+
+  await expect(card.getByRole("button", { name: "Log in" })).toHaveCount(0);
+  await expect(
+    card.getByTestId("onboarding-runtime-instructions-codex"),
+  ).toBeVisible();
+  await card.getByTestId("onboarding-runtime-instructions-codex").click();
+  await expect(card).toHaveAttribute("aria-checked", "true");
+  await expect(card.getByText("Preferred")).toHaveCount(0);
   await expect(page.getByTestId("onboarding-setup-next")).toBeEnabled();
+  expect(await readSavedRuntime(page)).toBe("codex");
+});
 
-  const savedConfig = await page.evaluate(() =>
-    (
-      window as Window & {
-        __BUZZ_E2E_INVOKE_MOCK_COMMAND__?: (
-          command: string,
-          payload: unknown,
-        ) => Promise<{ preferred_runtime: string | null }>;
-      }
-    ).__BUZZ_E2E_INVOKE_MOCK_COMMAND__?.("get_global_agent_config", null),
+test("setup-needed runtimes remain selectable", async ({ page }) => {
+  await installMockBridge(
+    page,
+    {
+      acpRuntimesCatalog: [
+        availableRuntime("claude", { status: "logged_out" }),
+        availableRuntime("codex", { status: "logged_out" }),
+      ],
+    },
+    { skipCommunitySeed: true, skipOnboardingSeed: true },
+  );
+  await page.goto("/");
+  await navigateToSetupPage(page);
+
+  await expect(page.getByTestId("onboarding-runtime-claude")).toHaveAttribute(
+    "aria-disabled",
+    "false",
+  );
+  await expect(page.getByTestId("onboarding-runtime-codex")).toHaveAttribute(
+    "aria-disabled",
+    "false",
+  );
+  await page.getByTestId("onboarding-runtime-claude").click();
+  await expect(page.getByTestId("onboarding-runtime-claude")).toHaveAttribute(
+    "aria-checked",
+    "true",
+  );
+  await page.getByTestId("onboarding-runtime-codex").click();
+  await expect(page.getByTestId("onboarding-runtime-codex")).toHaveAttribute(
+    "aria-checked",
+    "true",
   );
-  expect(savedConfig?.preferred_runtime).toBe("codex");
 });
 
-test("runtime checkmarks only show for configured harnesses", async ({
+test("Next flashes selected setup-needed runtimes instead of advancing", async ({
   page,
 }) => {
   await installMockBridge(
@@ -216,7 +313,7 @@ test("runtime checkmarks only show for configured harnesses", async ({
     {
       acpRuntimesCatalog: [
         availableRuntime("claude", { status: "logged_out" }),
-        availableRuntime("codex", { status: "logged_in" }),
+        availableRuntime("buzz-agent", { status: "not_applicable" }),
       ],
     },
     { skipCommunitySeed: true, skipOnboardingSeed: true },
@@ -224,11 +321,71 @@ test("runtime checkmarks only show for configured harnesses", async ({
   await page.goto("/");
   await navigateToSetupPage(page);
 
-  await expect(page.getByLabel("Claude available")).toHaveCount(0);
-  await expect(page.getByLabel("codex available")).toBeVisible();
+  const next = page.getByTestId("onboarding-setup-next");
+  const claudeCard = page.getByTestId("onboarding-runtime-claude");
+  const buzzCard = page.getByTestId("onboarding-runtime-buzz-agent");
+  const claudeSetup = claudeCard.getByTestId(
+    "onboarding-runtime-instructions-claude",
+  );
+
+  await claudeCard.click();
+  await buzzCard.click();
+  await expect(claudeCard).toHaveAttribute("aria-checked", "true");
+  await expect(buzzCard).toHaveAttribute("aria-checked", "true");
+  await expect(next).toHaveAttribute("data-soft-disabled", "true");
+  await expect(next).toBeEnabled();
+  await expect(page.getByTestId("onboarding-setup-next-hint")).toHaveCount(0);
+  await expect(next).toHaveCSS("cursor", "default");
+
+  await next.click();
+  await expect(page.getByTestId("onboarding-page-2")).toBeVisible();
+  await expect(page.getByTestId("onboarding-page-config")).toHaveCount(0);
+  await expect(page.getByTestId("onboarding-setup-next-hint")).toHaveText(
+    "Please finish set up",
+  );
+  await expect(claudeSetup).toHaveAttribute("data-setup-flash", "true");
+  await expect(
+    page.getByTestId("onboarding-runtime-installed-buzz-agent"),
+  ).not.toHaveAttribute("data-setup-flash", "true");
+});
+
+test("logged-out CLI runtimes can be selected and keep setup visible", async ({
+  page,
+}) => {
+  await installMockBridge(
+    page,
+    {
+      acpRuntimesCatalog: [
+        availableRuntime("claude", { status: "logged_out" }),
+        availableRuntime("codex", { status: "logged_out" }),
+      ],
+    },
+    { skipCommunitySeed: true, skipOnboardingSeed: true },
+  );
+  await page.goto("/");
+  await navigateToSetupPage(page);
+
+  for (const runtimeId of ["claude", "codex"]) {
+    const card = page.getByTestId(`onboarding-runtime-${runtimeId}`);
+    await expect(
+      card.getByTestId(`onboarding-runtime-instructions-${runtimeId}`),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId(`onboarding-runtime-installed-${runtimeId}`),
+    ).toHaveCount(0);
+
+    await card.click();
+    await expect(card).toHaveAttribute("aria-checked", "true");
+    await expect(
+      card.getByTestId(`onboarding-runtime-instructions-${runtimeId}`),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId(`onboarding-runtime-installed-${runtimeId}`),
+    ).toHaveCount(0);
+  }
 });
 
-test("runtime cards use the preferred onboarding order", async ({ page }) => {
+test("runtime cards use the selected onboarding order", async ({ page }) => {
   await installMockBridge(
     page,
     {
@@ -245,7 +402,7 @@ test("runtime cards use the preferred onboarding order", async ({ page }) => {
   await navigateToSetupPage(page);
 
   const runtimeOrder = await page
-    .getByRole("radio")
+    .getByRole("checkbox")
     .evaluateAll((cards) =>
       cards.map((card) => card.getAttribute("data-testid")),
     );
@@ -255,6 +412,185 @@ test("runtime cards use the preferred onboarding order", async ({ page }) => {
     "onboarding-runtime-goose",
     "onboarding-runtime-buzz-agent",
   ]);
+  await expect(
+    page.getByTestId("onboarding-runtime-buzz-agent").getByRole("heading", {
+      name: "Buzz",
+    }),
+  ).toBeVisible();
+});
+
+test("runtime cards allow multiple harness selections", async ({ page }) => {
+  await installMockBridge(page, undefined, {
+    skipCommunitySeed: true,
+    skipOnboardingSeed: true,
+  });
+  await page.goto("/");
+  await navigateToSetupPage(page);
+
+  const next = page.getByTestId("onboarding-setup-next");
+  const gooseCard = page.getByTestId("onboarding-runtime-goose");
+  const buzzCard = page.getByTestId("onboarding-runtime-buzz-agent");
+
+  await expect(next).toBeDisabled();
+
+  await gooseCard.click();
+  await expect(gooseCard).toHaveAttribute("aria-checked", "true");
+  await expect(next).toBeEnabled();
+
+  await buzzCard.click();
+  await expect(gooseCard).toHaveAttribute("aria-checked", "true");
+  await expect(buzzCard).toHaveAttribute("aria-checked", "true");
+  await expect(next).toBeEnabled();
+
+  await gooseCard.click();
+  await expect(gooseCard).toHaveAttribute("aria-checked", "false");
+  await expect(buzzCard).toHaveAttribute("aria-checked", "true");
+  await expect(next).toBeEnabled();
+  expect(await readSavedRuntime(page)).toBe("buzz-agent");
+});
+
+test("multiple CLI harnesses route to default harness selection", async ({
+  page,
+}) => {
+  await installMockBridge(
+    page,
+    {
+      acpRuntimesCatalog: [
+        availableRuntime("claude", { status: "logged_in" }),
+        availableRuntime("codex", { status: "logged_in" }),
+      ],
+    },
+    { skipCommunitySeed: true, skipOnboardingSeed: true },
+  );
+  await page.goto("/");
+  await navigateToSetupPage(page);
+
+  await page.getByTestId("onboarding-runtime-claude").click();
+  await page.getByTestId("onboarding-runtime-codex").click();
+  await page.getByTestId("onboarding-setup-next").click();
+
+  await expect(page.getByTestId("onboarding-page-config")).toBeVisible();
+  await expect(page.getByTestId("global-agent-default-harness")).toHaveText(
+    "Claude",
+  );
+  await chooseConfigDropdownOption(
+    page,
+    "global-agent-default-harness",
+    "codex",
+  );
+  await expect(page.getByTestId("global-agent-default-harness")).toHaveText(
+    "Codex",
+  );
+  await expect.poll(() => readSavedRuntime(page)).toBe("codex");
+  await expect(page.getByTestId("global-agent-provider")).toHaveCount(0);
+  const modelSelect = page.getByTestId("global-agent-model");
+  const effortSelect = page.getByTestId("global-agent-thinking-effort-select");
+  await expect(modelSelect).toBeVisible();
+  await expect(effortSelect).toBeVisible();
+  await expect(modelSelect).toHaveText("Select a model");
+  await modelSelect.click();
+  await expect(
+    page.getByTestId("global-agent-model-option-codex-mini"),
+  ).toBeVisible();
+  await page.keyboard.press("Escape");
+});
+
+test("selecting all harnesses routes defaults through Buzz Agent", async ({
+  page,
+}) => {
+  await installMockBridge(
+    page,
+    {
+      acpRuntimesCatalog: [
+        availableRuntime("claude", { status: "logged_in" }),
+        availableRuntime("codex", { status: "logged_in" }),
+        availableRuntime("goose", { status: "not_applicable" }),
+        availableRuntime("buzz-agent", { status: "not_applicable" }),
+      ],
+      globalAgentConfig: {
+        env_vars: {
+          OPENAI_COMPAT_API_KEY: "sk-test",
+        },
+        provider: null,
+        model: null,
+      },
+    },
+    { skipCommunitySeed: true, skipOnboardingSeed: true },
+  );
+  await page.goto("/");
+  await navigateToSetupPage(page);
+
+  for (const runtimeId of ["claude", "codex", "goose", "buzz-agent"]) {
+    await page.getByTestId(`onboarding-runtime-${runtimeId}`).click();
+    await expect(
+      page.getByTestId(`onboarding-runtime-${runtimeId}`),
+    ).toHaveAttribute("aria-checked", "true");
+  }
+
+  await expect(page.getByTestId("onboarding-setup-next")).toBeEnabled();
+  await page.getByTestId("onboarding-setup-next").click();
+  await expect(page.getByTestId("onboarding-page-config")).toBeVisible();
+  expect(await readSavedRuntime(page)).toBe("buzz-agent");
+
+  const harnessSelect = page.getByTestId("global-agent-default-harness");
+  await expect(harnessSelect).toHaveText("Buzz");
+  await harnessSelect.click();
+  await expect(
+    page.getByTestId("global-agent-default-harness-option-claude"),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("global-agent-default-harness-option-codex"),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("global-agent-default-harness-option-goose"),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("global-agent-default-harness-option-buzz-agent"),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("global-agent-default-harness-option-codex"),
+  ).toHaveCSS("opacity", "1");
+  await page.getByTestId("global-agent-default-harness-option-codex").click();
+  await expect(harnessSelect).toHaveAttribute("data-value", "codex");
+  await expect.poll(() => readSavedRuntime(page)).toBe("codex");
+  await expect(page.getByTestId("global-agent-provider")).toHaveCount(0);
+  await expect(page.getByTestId("global-agent-model")).toBeVisible();
+  await expect(
+    page.getByTestId("global-agent-thinking-effort-select"),
+  ).toBeVisible();
+
+  await chooseConfigDropdownOption(
+    page,
+    "global-agent-default-harness",
+    "goose",
+  );
+  await expect(harnessSelect).toHaveAttribute("data-value", "goose");
+  await chooseConfigDropdownOption(page, "global-agent-provider", "openai");
+  await expect(page.getByTestId("global-agent-model")).toHaveAttribute(
+    "data-value",
+    "gpt-5.5",
+  );
+  await page.getByTestId("global-agent-model").click();
+  await expect(page.getByTestId("global-agent-model-option-gpt-5.5")).toHaveCSS(
+    "color",
+    "rgb(0, 0, 0)",
+  );
+  await expect(page.getByTestId("global-agent-model-option-gpt-5.5")).toHaveCSS(
+    "opacity",
+    "1",
+  );
+  await page.keyboard.press("Escape");
+
+  await chooseConfigDropdownOption(
+    page,
+    "global-agent-default-harness",
+    "buzz-agent",
+  );
+  await chooseConfigDropdownOption(page, "global-agent-provider", "openai");
+  await expect(page.getByTestId("global-agent-model")).toHaveAttribute(
+    "data-value",
+    "gpt-5.5",
+  );
 });
 
 for (const authStatus of [
@@ -262,7 +598,7 @@ for (const authStatus of [
   { status: "unknown" as const },
   { status: "config_invalid" as const, diagnostic: "Fix Claude config" },
 ]) {
-  test(`Claude ${authStatus.status} state cannot be selected`, async ({
+  test(`Claude ${authStatus.status} state can be selected before setup`, async ({
     page,
   }) => {
     await installMockBridge(
@@ -288,19 +624,92 @@ for (const authStatus of [
     await navigateToSetupPage(page);
 
     const card = page.getByTestId("onboarding-runtime-claude");
-    await expect(card).toHaveAttribute("aria-disabled", "true");
+    await expect(card).toHaveAttribute("aria-disabled", "false");
+    const setupButton = card.getByTestId(
+      "onboarding-runtime-instructions-claude",
+    );
     if (authStatus.status === "logged_out") {
-      await expect(card.getByRole("button", { name: "Sign in" })).toBeVisible();
+      await expect(setupButton).toBeVisible();
+      await expect(
+        card.getByRole("button", { name: "Log in to Claude" }),
+      ).toHaveCount(0);
+      await setupButton.click();
+      await expect(card).toHaveAttribute("aria-checked", "true");
     } else if (authStatus.status === "unknown") {
       await expect(
         card.getByText("Couldn’t verify authentication"),
       ).toBeVisible();
+      await card.click();
+      await expect(card).toHaveAttribute("aria-checked", "true");
     } else {
       await expect(card.getByText("Fix Claude config")).toBeVisible();
+      await card.click();
+      await expect(card).toHaveAttribute("aria-checked", "true");
     }
   });
 }
 
+test("setup cards only show checks after user selection", async ({ page }) => {
+  await installMockBridge(page, undefined, {
+    skipCommunitySeed: true,
+    skipOnboardingSeed: true,
+  });
+  await page.goto("/");
+
+  await navigateToSetupPage(page);
+
+  const gooseCard = page.getByTestId("onboarding-runtime-goose");
+  const gooseCheck = page.getByTestId("onboarding-runtime-check-goose");
+  const gooseCheckmark = page.getByTestId("onboarding-runtime-checkmark-goose");
+
+  await expect(gooseCard).toHaveAttribute("aria-checked", "false");
+  await expect(gooseCheckmark).toHaveCSS("opacity", "0");
+  await expect(gooseCheck).toHaveCSS("opacity", "0");
+
+  await gooseCard.hover();
+  await expect(gooseCheck).toHaveCSS("opacity", "1");
+  await expect(gooseCheckmark).toHaveCSS("opacity", "0");
+
+  await gooseCard.click();
+  await expect(gooseCard).toHaveAttribute("aria-checked", "true");
+  await expect(gooseCheckmark).toHaveCSS("opacity", "1");
+  await expect(
+    page.getByTestId("onboarding-runtime-installed-goose"),
+  ).toHaveText("INSTALLED");
+});
+
+test("successful install still waits for refreshed runtime readiness", async ({
+  page,
+}) => {
+  await installMockBridge(page, undefined, {
+    skipCommunitySeed: true,
+    skipOnboardingSeed: true,
+  });
+  await page.goto("/");
+
+  await navigateToSetupPage(page);
+
+  const claudeCard = page.getByTestId("onboarding-runtime-claude");
+  const setupButton = page.getByTestId("onboarding-runtime-install-claude");
+  await expect(setupButton).toHaveText("SET UP");
+  await expect(claudeCard).toHaveAttribute("aria-checked", "false");
+
+  await setupButton.focus();
+  await page.keyboard.press("Enter");
+  await expect(
+    page.getByTestId("onboarding-runtime-installed-claude"),
+  ).toHaveText("INSTALLED");
+  const next = page.getByTestId("onboarding-setup-next");
+  await expect(next).toBeEnabled();
+  await expect(next).toHaveAttribute("data-soft-disabled", "true");
+  await next.click();
+  await expect(page.getByTestId("onboarding-page-2")).toBeVisible();
+  await expect(page.getByTestId("onboarding-page-config")).toHaveCount(0);
+  await expect(page.getByTestId("onboarding-setup-next-hint")).toHaveText(
+    "Please finish set up",
+  );
+});
+
 test("config page shows Agent defaults form", async ({ page }) => {
   await installMockBridge(page, undefined, {
     skipCommunitySeed: true,
@@ -311,7 +720,42 @@ test("config page shows Agent defaults form", async ({ page }) => {
   await navigateToConfigPage(page);
 
   // The defaults form is the page's content; no readiness badge is shown.
+  await expect(page.locator("#global-agent-default-harness")).toBeVisible();
+  await expect(page.getByTestId("global-agent-default-harness")).toHaveText(
+    "Buzz",
+  );
+  await expect(page.getByText("Default harness")).toBeVisible();
+  await expect(page.getByText("Provider", { exact: true })).toBeVisible();
   await expect(page.locator("#global-agent-provider")).toBeVisible();
+  await expect(page.locator("#global-agent-model")).toBeVisible();
+  await expect(page.getByText("Default LLM provider")).toHaveCount(0);
+  await expect(page.getByText("Select provider")).toHaveCount(0);
+  await expect(page.getByTestId("global-agent-provider")).toHaveText(
+    "Select a provider",
+  );
+  const modelSelect = page.getByTestId("global-agent-model");
+  const effortSelect = page.getByTestId("global-agent-thinking-effort-select");
+  await expect(modelSelect).toHaveText("Select a model");
+  await expect(modelSelect).toBeDisabled();
+  await expect(effortSelect).toHaveText("Select effort level");
+  await expect(effortSelect).toBeDisabled();
+  await page.getByTestId("global-agent-provider").click();
+  await expect(
+    page.getByTestId("global-agent-provider-option-anthropic"),
+  ).toHaveCount(0);
+  await expect(
+    page.getByTestId("global-agent-provider-option-openai"),
+  ).toHaveCount(0);
+  await expect(
+    page.getByTestId("global-agent-provider-option-__custom_provider__"),
+  ).toHaveCount(0);
+  await page.keyboard.press("Escape");
+  await expect(page.getByText("Applies to all agents")).toHaveCount(0);
+  await expect(page.getByLabel("OpenAI API Key")).toHaveCount(0);
+  await expect(effortSelect).toBeVisible();
+  await expect(
+    page.getByText("This will be set as your default model configuration"),
+  ).toHaveCount(0);
   await expect(page.getByTestId("agent-readiness-badge")).toHaveCount(0);
 
   await waitForAnimations(page);
@@ -321,7 +765,143 @@ test("config page shows Agent defaults form", async ({ page }) => {
   });
 });
 
-test("config page shows configure-later hint without Buzz Agent model config", async ({
+test("config page gates stale saved model and effort until provider selection", async ({
+  page,
+}) => {
+  await installMockBridge(
+    page,
+    {
+      globalAgentConfig: {
+        env_vars: {
+          BUZZ_AGENT_THINKING_EFFORT: "high",
+          OPENAI_COMPAT_API_KEY: "sk-test",
+        },
+        provider: null,
+        model: "claude-sonnet-4-6",
+      },
+    },
+    { skipCommunitySeed: true, skipOnboardingSeed: true },
+  );
+  await page.goto("/");
+
+  await navigateToConfigPage(page);
+
+  const modelSelect = page.getByTestId("global-agent-model");
+  const effortSelect = page.getByTestId("global-agent-thinking-effort-select");
+  await expect(page.getByTestId("global-agent-provider")).toHaveText(
+    "Select a provider",
+  );
+  await expect(modelSelect).toHaveText("Select a model");
+  await expect(modelSelect).toBeDisabled();
+  await expect(effortSelect).toHaveText("Select effort level");
+  await expect(effortSelect).toBeDisabled();
+
+  await chooseConfigDropdownOption(page, "global-agent-provider", "openai");
+
+  await expect(modelSelect).toBeEnabled();
+  await expect(modelSelect).toHaveAttribute("data-value", "gpt-5.5");
+  await expect(effortSelect).toBeEnabled();
+  await expect(effortSelect).toHaveText("Select effort level");
+});
+
+test("config page defaults model after provider selection", async ({
+  page,
+}) => {
+  await installMockBridge(
+    page,
+    {
+      globalAgentConfig: {
+        env_vars: { OPENAI_COMPAT_API_KEY: "sk-test" },
+        provider: null,
+        model: null,
+      },
+    },
+    {
+      skipCommunitySeed: true,
+      skipOnboardingSeed: true,
+    },
+  );
+  await page.goto("/");
+
+  await navigateToConfigPage(page);
+
+  const modelSelect = page.getByTestId("global-agent-model");
+  const effortSelect = page.getByTestId("global-agent-thinking-effort-select");
+  await expect(modelSelect).toHaveText("Select a model");
+  await expect(modelSelect).toBeDisabled();
+  await expect(effortSelect).toBeDisabled();
+
+  await chooseConfigDropdownOption(page, "global-agent-provider", "openai");
+
+  await expect(page.getByTestId("global-agent-provider")).toHaveAttribute(
+    "data-value",
+    "openai",
+  );
+  await expect(modelSelect).toBeEnabled();
+  await expect(modelSelect).toHaveAttribute("data-value", "gpt-5.5");
+  await expect(modelSelect).toHaveText("gpt-5.5");
+  await expect(effortSelect).toBeEnabled();
+  await effortSelect.click();
+  await expect(
+    page.getByTestId("global-agent-thinking-effort-select-option-none"),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("global-agent-thinking-effort-select-option-minimal"),
+  ).toHaveCount(0);
+  await expect(
+    page.getByTestId("global-agent-thinking-effort-select-option-max"),
+  ).toHaveCount(0);
+  await page.keyboard.press("Escape");
+  await modelSelect.click();
+  await expect(
+    page.getByTestId("global-agent-model-option-__custom_model__"),
+  ).toHaveCount(0);
+  await page.keyboard.press("Escape");
+});
+
+test("config page waits for baked defaults before showing provider dropdown", async ({
+  page,
+}) => {
+  await installMockBridge(
+    page,
+    {
+      bakedBuildEnv: [
+        { key: "BUZZ_AGENT_PROVIDER", masked: false, value: "anthropic" },
+        { key: "BUZZ_AGENT_MODEL", masked: false, value: "claude-sonnet-4" },
+        { key: "ANTHROPIC_API_KEY", masked: true, value: "••••••" },
+      ],
+      bakedBuildEnvDelayMs: 1_000,
+    },
+    { skipCommunitySeed: true, skipOnboardingSeed: true },
+  );
+  await page.goto("/");
+
+  await navigateToConfigPage(page);
+
+  await expect(page.getByText("Loading…")).toBeVisible();
+  const providerSelect = page.getByTestId("global-agent-provider");
+  await expect(providerSelect).toHaveText("Anthropic");
+  await expect(page.getByText("Select provider")).toHaveCount(0);
+});
+
+test("setup page shows provider discovery loading state", async ({ page }) => {
+  await installMockBridge(
+    page,
+    { acpRuntimesDelayMs: 1_000 },
+    { skipCommunitySeed: true, skipOnboardingSeed: true },
+  );
+  await page.goto("/");
+
+  await navigateToSetupPage(page);
+
+  await expect(page.getByTestId("onboarding-runtime-loading")).toBeVisible();
+  await expect(page.getByText("Finding your providers...")).toBeVisible();
+
+  await expect(page.getByTestId("onboarding-runtime-goose")).toBeVisible();
+  await expect(page.getByTestId("onboarding-runtime-loading")).toHaveCount(0);
+});
+
+test("config page stays compact when Buzz Agent model config is available", async ({
   page,
 }) => {
   await installMockBridge(
@@ -337,16 +917,15 @@ test("config page shows configure-later hint without Buzz Agent model config", a
 
   await navigateToConfigPage(page);
 
-  // Not-configured hint text should be visible below the form.
+  // The compact onboarding form stays bare; readiness copy belongs in Settings.
   await expect(
     page.getByText("You can finish now and configure agents later in Settings"),
-  ).toBeVisible();
+  ).toHaveCount(0);
 
-  // Take a screenshot showing the not-configured state.
   await waitForAnimations(page);
   const configPage = page.locator('[data-testid="onboarding-page-config"]');
   await configPage.screenshot({
-    path: `${SHOTS}/05-setup-not-configured.png`,
+    path: `${SHOTS}/05-config-compact.png`,
   });
 });
 
@@ -371,6 +950,24 @@ test("Finish button is always enabled on config page regardless of readiness", a
   await expect(finishBtn).toBeEnabled();
 });
 
+test("community setup back button returns to agent defaults", async ({
+  page,
+}) => {
+  await installMockBridge(page, undefined, {
+    skipCommunitySeed: true,
+    skipOnboardingSeed: true,
+  });
+  await page.goto("/");
+
+  await navigateToConfigPage(page);
+  await page.getByTestId("onboarding-finish").click();
+
+  await expect(page.getByText("Join or create a community")).toBeVisible();
+
+  await page.getByTestId("welcome-setup-back").click();
+  await expect(page.getByTestId("onboarding-page-config")).toBeVisible();
+});
+
 // ---------------------------------------------------------------------------
 // B1 regression: rapid consecutive edits must not lose the later change
 // ---------------------------------------------------------------------------
@@ -384,6 +981,13 @@ test("Goose config page discovers models through the selected Goose runtime", as
       acpRuntimesCatalog: [
         availableRuntime("goose", { status: "not_applicable" }),
       ],
+      globalAgentConfig: {
+        env_vars: {
+          OPENAI_COMPAT_API_KEY: "sk-test",
+        },
+        provider: null,
+        model: null,
+      },
     },
     { skipCommunitySeed: true, skipOnboardingSeed: true },
   );
@@ -393,58 +997,130 @@ test("Goose config page discovers models through the selected Goose runtime", as
   await page.getByTestId("onboarding-setup-next").click();
   await expect(page.getByTestId("onboarding-page-config")).toBeVisible();
 
-  await page.locator("#global-agent-provider").selectOption("openai");
+  await chooseConfigDropdownOption(page, "global-agent-provider", "openai");
+  await page.getByTestId("global-agent-model").click();
   await expect(
-    page
-      .locator("#global-agent-model")
-      .getByRole("option", { name: "GPT-5.5" }),
-  ).toBeAttached();
+    page.getByTestId("global-agent-model-option-gpt-5.5"),
+  ).toBeVisible();
+  await page.keyboard.press("Escape");
 });
 
-test("provider credentials are first-class and drive model discovery", async ({
+test("Goose provider dropdown offers setup providers before credentials exist", async ({
   page,
 }) => {
   await installMockBridge(
     page,
-    { acpRuntimesCatalog: undefined },
+    {
+      acpRuntimesCatalog: [
+        availableRuntime("goose", { status: "not_applicable" }),
+      ],
+      globalAgentConfig: {
+        env_vars: {},
+        provider: null,
+        model: null,
+      },
+    },
     { skipCommunitySeed: true, skipOnboardingSeed: true },
   );
   await page.goto("/");
+  await navigateToSetupPage(page);
+  await page.getByTestId("onboarding-runtime-goose").click();
+  await page.getByTestId("onboarding-setup-next").click();
+  await expect(page.getByTestId("onboarding-page-config")).toBeVisible();
+
+  await page.getByTestId("global-agent-provider").click();
+  await expect(
+    page.getByTestId("global-agent-provider-option-anthropic"),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("global-agent-provider-option-openai"),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("global-agent-provider-option-relay-mesh"),
+  ).toHaveCount(0);
+});
+
+test("compact default config still persists rapid provider edits", async ({
+  page,
+}) => {
+  await installMockBridge(
+    page,
+    {
+      globalAgentConfig: {
+        env_vars: {
+          ANTHROPIC_API_KEY: "sk-test",
+          OPENAI_COMPAT_API_KEY: "sk-test",
+        },
+        provider: null,
+        model: null,
+      },
+    },
+    {
+      skipCommunitySeed: true,
+      skipOnboardingSeed: true,
+    },
+  );
+  await page.goto("/");
+  await navigateToConfigPage(page);
+
+  const providerSelect = page.getByTestId("global-agent-provider");
+  await chooseConfigDropdownOption(page, "global-agent-provider", "openai");
+  await expect(providerSelect).toHaveAttribute("data-value", "openai");
+
+  await chooseConfigDropdownOption(
+    page,
+    "global-agent-provider",
+    "openai-compat",
+  );
+  await expect(providerSelect).toHaveAttribute("data-value", "openai-compat");
+
+  await chooseConfigDropdownOption(page, "global-agent-provider", "anthropic");
+  await expect(providerSelect).toHaveAttribute("data-value", "anthropic");
+
+  await expect(page.getByLabel("Anthropic API Key")).toHaveCount(0);
+  await expect(page.getByLabel("OpenAI API Key")).toHaveCount(0);
+  await expect(page.getByLabel("Value for DATABRICKS_HOST")).toHaveCount(0);
+});
+
+test("compact default config keeps credential-backed providers after selecting Buzz", async ({
+  page,
+}) => {
+  await installMockBridge(
+    page,
+    {
+      globalAgentConfig: {
+        env_vars: {
+          ANTHROPIC_API_KEY: "sk-test",
+          OPENAI_COMPAT_API_KEY: "sk-test",
+        },
+        provider: null,
+        model: null,
+      },
+    },
+    {
+      skipCommunitySeed: true,
+      skipOnboardingSeed: true,
+    },
+  );
+  await page.goto("/");
   await navigateToConfigPage(page);
 
-  await page.locator("#global-agent-provider").selectOption("openai");
-  const apiKey = page.getByLabel("OpenAI API Key");
-  await expect(apiKey).toBeVisible();
-  await apiKey.fill("test-openai-key");
-  await expect(
-    page
-      .locator("#global-agent-model")
-      .getByRole("option", { name: "GPT-5.5" }),
-  ).toBeAttached();
-
-  await page.locator("#global-agent-provider").selectOption("openai-compat");
-  await expect(page.getByLabel("OpenAI API Key")).toHaveValue(
-    "test-openai-key",
-  );
-
-  await page
-    .locator("#global-agent-provider")
-    .selectOption("__custom_provider__");
-  await expect(page.getByLabel("OpenAI API Key")).not.toBeVisible();
-  await expect(page.locator('input[value="test-openai-key"]')).toHaveCount(0);
-
-  await page.locator("#global-agent-provider").selectOption("anthropic");
-  await expect(page.getByLabel("Anthropic API Key")).toBeVisible();
-
-  const databricksOption = page
-    .locator("#global-agent-provider")
-    .locator('option[value^="databricks"]')
-    .first();
-  await page
-    .locator("#global-agent-provider")
-    .selectOption(await databricksOption.getAttribute("value"));
-  await expect(page.getByLabel("Value for DATABRICKS_HOST")).toBeVisible();
-  await expect(page.getByLabel("OpenAI API Key")).not.toBeVisible();
+  const providerSelect = page.getByTestId("global-agent-provider");
+  await chooseConfigDropdownOption(page, "global-agent-provider", "openai");
+  await expect(providerSelect).toHaveAttribute("data-value", "openai");
+
+  await chooseConfigDropdownOption(page, "global-agent-provider", "relay-mesh");
+  await expect(providerSelect).toHaveAttribute("data-value", "relay-mesh");
+
+  await providerSelect.click();
+  await expect(
+    page.getByTestId("global-agent-provider-option-anthropic"),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("global-agent-provider-option-openai"),
+  ).toBeVisible();
+  await page.getByTestId("global-agent-provider-option-anthropic").click();
+  await expect(providerSelect).toHaveAttribute("data-value", "anthropic");
 });
 
 test("rapid consecutive provider changes both survive — later change wins", async ({
@@ -458,6 +1134,14 @@ test("rapid consecutive provider changes both survive — later change wins", as
       acpRuntimesCatalog: [
         availableRuntime("buzz-agent", { status: "not_applicable" }),
       ],
+      globalAgentConfig: {
+        env_vars: {
+          ANTHROPIC_API_KEY: "sk-test",
+          OPENAI_COMPAT_API_KEY: "sk-test",
+        },
+        provider: null,
+        model: null,
+      },
       setGlobalAgentConfigDelayMs: 300,
     },
     { skipCommunitySeed: true, skipOnboardingSeed: true },
@@ -466,20 +1150,20 @@ test("rapid consecutive provider changes both survive — later change wins", as
 
   await navigateToConfigPage(page);
 
-  const providerSelect = page.locator("#global-agent-provider");
+  const providerSelect = page.getByTestId("global-agent-provider");
   await expect(providerSelect).toBeVisible();
 
   // First edit: select OpenAI — save starts, held open for 300 ms.
-  await providerSelect.selectOption("openai");
+  await chooseConfigDropdownOption(page, "global-agent-provider", "openai");
 
   // Second edit before first response: select Anthropic. The coalescer must
   // persist this as the trailing save, and it must survive in the UI.
-  await providerSelect.selectOption("anthropic");
+  await chooseConfigDropdownOption(page, "global-agent-provider", "anthropic");
 
   // Wait long enough for both saves to complete (2 × 300 ms + margin).
   await page.waitForTimeout(800);
 
   // The final provider shown must be Anthropic — neither save must overwrite
   // the later optimistic state with a stale response.
-  await expect(providerSelect).toHaveValue("anthropic");
+  await expect(providerSelect).toHaveAttribute("data-value", "anthropic");
 });
diff --git a/desktop/tests/helpers/bridge.ts b/desktop/tests/helpers/bridge.ts
index 4f6b6e4476..4c91b10ccc 100644
--- a/desktop/tests/helpers/bridge.ts
+++ b/desktop/tests/helpers/bridge.ts
@@ -128,6 +128,7 @@ export type MockAgentMemoryListing = {
 
 type MockBridgeOptions = {
   acpRuntimesCatalog?: Record<string, unknown>[];
+  acpRuntimesDelayMs?: number;
   acpAuthMethods?: Record<string, { methods: Record<string, unknown>[] }>;
   connectAcpRuntimeResult?: { launched: boolean };
   connectAcpRuntimeDelayMs?: number;
@@ -358,6 +359,8 @@ type MockBridgeOptions = {
     masked: boolean;
     value: string;
   }>;
+  /** Delay (ms) for `get_baked_build_env` so specs can verify load gating. */
+  bakedBuildEnvDelayMs?: number;
   /** Delay (ms) for `set_global_agent_config` — hold saves open in tests.
    *  Alias of `globalConfigSaveDelayMs` (kept for onboarding specs). */
   setGlobalAgentConfigDelayMs?: number;