@qredence/fleet 0.5.11 → 0.6.1

package/dist/web/server/{settings-dialog-BvkgNflv-GPJ6COQO.js → settings-dialog-CK0FJlTg-HZRBAXDZ.js}

@@ -12,7 +12,6 @@ import {
   HIT_AREA_EXPAND_CLASS,
   HIT_AREA_EXPAND_DENSE_CLASS,
   PROVIDER_METADATA,
-  Pencil,
   ProviderBrandIcon,
   Settings,
   Spinner,
@@ -25,7 +24,7 @@ import {
   useHoverInteractionSharedState,
   useHoverReferenceInteraction,
   usePopupHandleStore
-} from "./chunk-MIW4LJTV.js";
+} from "./chunk-2JHTYWD5.js";
 import {
   UI_PREFERENCES_KEY,
   isModelPatternEnabled,
@@ -36,6 +35,9 @@ import {
 import {
   MessageSquare
 } from "./chunk-GL6HWDJB.js";
+import {
+  Pencil
+} from "./chunk-M5RSPNYN.js";
 import {
   Keyboard,
   Monitor,
@@ -54,11 +56,11 @@ import {
 } from "./chunk-OKL5ZRVB.js";
 import {
   notify
-} from "./chunk-WYL2DW5R.js";
+} from "./chunk-JTCCQZLN.js";
 import {
   FloatingPortalLite,
   Info
-} from "./chunk-KOUEJ3NU.js";
+} from "./chunk-UL2725KQ.js";
 import "./chunk-UCA4WN66.js";
 import {
   Eye
@@ -80,8 +82,9 @@ import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
-  InputGroupInput
-} from "./chunk-P7H2OPKF.js";
+  InputGroupInput,
+  Textarea
+} from "./chunk-NJ4QEZHK.js";
 import {
   Search
 } from "./chunk-JIULUYHT.js";
@@ -102,7 +105,7 @@ import {
   FieldGroup,
   FieldLabel,
   Switch
-} from "./chunk-UAPNEWCA.js";
+} from "./chunk-KP2PNDGL.js";
 import {
   Select,
   clamp,
@@ -114,7 +117,7 @@ import {
   useDirection,
   usePositioner,
   useRender
-} from "./chunk-WM4PUT6M.js";
+} from "./chunk-NNKJTKOQ.js";
 import {
   isCustomProviderId,
   isNamedOccInstanceId,
@@ -123,7 +126,7 @@ import {
 import "./chunk-WWJF4RO2.js";
 import {
   Input
-} from "./chunk-P6UMR32I.js";
+} from "./chunk-5UCAJBAH.js";
 import {
   Dialog,
   DialogBackdrop,
@@ -157,7 +160,7 @@ import {
   usePopupRootStore,
   useSurface,
   useTriggerDataForwarding
-} from "./chunk-AGFRJQZ7.js";
+} from "./chunk-4WBFCB4O.js";
 import {
   Button,
   POPUP_COLLISION_AVOIDANCE,
@@ -178,7 +181,7 @@ import {
   ownerDocument,
   useTimeout,
   webkit
-} from "./chunk-LZ4Q5KUJ.js";
+} from "./chunk-WNCAL4HN.js";
 import {
   Check
 } from "./chunk-4QD4PCVP.js";
@@ -186,7 +189,7 @@ import "./chunk-S3PQ6HKH.js";
 import {
   useBaseUiId,
   useValueAsRef
-} from "./chunk-7SR6WDM2.js";
+} from "./chunk-MNBGB2SP.js";
 import {
   X
 } from "./chunk-JBLHIEVG.js";
@@ -209,8 +212,10 @@ import {
   useOpenChangeComplete,
   useRenderElement,
   useStableCallback
-} from "./chunk-C5X6G26O.js";
-import "./chunk-AHTO6GDS.js";
+} from "./chunk-XIB6XNUX.js";
+import {
+  Plug
+} from "./chunk-AHTO6GDS.js";
 import "./chunk-EAJTWMK5.js";
 import "./chunk-HFQZLPU2.js";
 import {
@@ -223,7 +228,7 @@ import "./chunk-JDCCC7A7.js";
 import "./chunk-L547YHC4.js";
 import "./chunk-MLKGABMK.js";
 
-// web/app/dist/server/assets/settings-dialog-BvkgNflv.js
+// web/app/dist/server/assets/settings-dialog-CK0FJlTg.js
 import * as React$1 from "react";
 import { useCallback as useCallback2, useEffect as useEffect2, useId, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -717,6 +722,46 @@ function useFocus(context, props = {}) {
     trigger: reference
   } : {}, [enabled, reference]);
 }
+function Breadcrumb({ className, ...props }) {
+  return /* @__PURE__ */ jsx("nav", {
+    "aria-label": "breadcrumb",
+    "data-slot": "breadcrumb",
+    className: cn(className),
+    ...props
+  });
+}
+function BreadcrumbList({ className, ...props }) {
+  return /* @__PURE__ */ jsx("ol", {
+    "data-slot": "breadcrumb-list",
+    className: cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground", className),
+    ...props
+  });
+}
+function BreadcrumbItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx("li", {
+    "data-slot": "breadcrumb-item",
+    className: cn("inline-flex items-center gap-1", className),
+    ...props
+  });
+}
+function BreadcrumbPage({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", {
+    "data-slot": "breadcrumb-page",
+    "aria-current": "page",
+    className: cn("font-normal text-foreground", className),
+    ...props
+  });
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("li", {
+    "data-slot": "breadcrumb-separator",
+    role: "presentation",
+    "aria-hidden": "true",
+    className: cn("[&>svg]:size-3.5", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+  });
+}
 var ScrollAreaRootContext = /* @__PURE__ */ React$1.createContext(void 0);
 function useScrollAreaRootContext() {
   const context = React$1.useContext(ScrollAreaRootContext);
@@ -1409,46 +1454,6 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
     })
   });
 }
-function Breadcrumb({ className, ...props }) {
-  return /* @__PURE__ */ jsx("nav", {
-    "aria-label": "breadcrumb",
-    "data-slot": "breadcrumb",
-    className: cn(className),
-    ...props
-  });
-}
-function BreadcrumbList({ className, ...props }) {
-  return /* @__PURE__ */ jsx("ol", {
-    "data-slot": "breadcrumb-list",
-    className: cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground", className),
-    ...props
-  });
-}
-function BreadcrumbItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx("li", {
-    "data-slot": "breadcrumb-item",
-    className: cn("inline-flex items-center gap-1", className),
-    ...props
-  });
-}
-function BreadcrumbPage({ className, ...props }) {
-  return /* @__PURE__ */ jsx("span", {
-    "data-slot": "breadcrumb-page",
-    "aria-current": "page",
-    className: cn("font-normal text-foreground", className),
-    ...props
-  });
-}
-function BreadcrumbSeparator({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx("li", {
-    "data-slot": "breadcrumb-separator",
-    role: "presentation",
-    "aria-hidden": "true",
-    className: cn("[&>svg]:size-3.5", className),
-    ...props,
-    children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
-  });
-}
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
   const [isMobile, setIsMobile] = React$1.useState(void 0);
@@ -2248,40 +2253,42 @@ function SidebarMenuButton({ render, isActive = false, variant = "default", size
     ...tooltip
   })] });
 }
-var THEME_OPTIONS = [
-  {
-    value: "system",
-    label: "System",
-    icon: Monitor
-  },
-  {
-    value: "light",
-    label: "Light",
-    icon: Sun
-  },
-  {
-    value: "dark",
-    label: "Dark",
-    icon: Moon
-  }
-];
-function PersonalizationSection({ onThemePreferenceChange, themePreference }) {
-  return /* @__PURE__ */ jsxs(Field, {
-    orientation: "horizontal",
-    className: "items-center justify-between gap-6 rounded-xl border p-4",
-    children: [/* @__PURE__ */ jsxs("div", {
-      className: "min-w-0",
-      children: [/* @__PURE__ */ jsx(FieldLabel, { children: "Theme" }), /* @__PURE__ */ jsx(FieldDescription, { children: "Match the system theme or pick light or dark." })]
-    }), /* @__PURE__ */ jsx("div", {
-      className: "shrink-0",
-      children: /* @__PURE__ */ jsx(Select, {
-        "aria-label": "Theme",
-        className: "w-[160px]",
-        onValueChange: (value) => onThemePreferenceChange(value),
-        options: [...THEME_OPTIONS],
-        value: themePreference
-      })
-    })]
+function RowSurface({ className, interactive, padding, tone, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    className: cn(fleetPiRowSurface({
+      interactive,
+      padding,
+      tone
+    }), className),
+    ...props
+  });
+}
+function ItemRow({ icon, title, subtitle, trailing, className, interactive = true, tone = "default" }) {
+  return /* @__PURE__ */ jsxs(RowSurface, {
+    tone,
+    padding: "md",
+    interactive,
+    className: cn("items-center gap-3", className),
+    children: [
+      icon ? /* @__PURE__ */ jsx("div", {
+        className: "flex size-8 shrink-0 items-center justify-center rounded-md border border-border/40 bg-background/60 text-foreground/70",
+        children: icon
+      }) : null,
+      /* @__PURE__ */ jsxs("div", {
+        className: "min-w-0 flex-1",
+        children: [/* @__PURE__ */ jsx("div", {
+          className: "truncate text-sm font-medium text-foreground",
+          children: title
+        }), subtitle ? /* @__PURE__ */ jsx("div", {
+          className: "mt-0.5 truncate text-xs text-muted-foreground",
+          children: subtitle
+        }) : null]
+      }),
+      trailing ? /* @__PURE__ */ jsx("div", {
+        className: "flex shrink-0 items-center gap-1.5",
+        children: trailing
+      }) : null
+    ]
   });
 }
 function SettingsPane({ actions, children, description, title }) {
@@ -2331,444 +2338,62 @@ function SettingsCommitActions({ dirty, disabled: disabled2, onRevert, onSave, s
     }) : /* @__PURE__ */ jsx(Save, { "data-icon": "inline-start" }), "Commit"]
   })] });
 }
-function isFieldInvalid(value, attemptedSave, required = true) {
-  return attemptedSave && required && value.trim().length === 0;
-}
-function SecretCredentialField({ attemptedSave, label, onChange, onToggleVisibility, placeholder, required = true, showPassword, value }) {
-  const controlId = useId();
-  const invalid = isFieldInvalid(value, attemptedSave, required);
-  return /* @__PURE__ */ jsxs(Field, {
-    "data-invalid": invalid || void 0,
-    children: [/* @__PURE__ */ jsx(FieldLabel, {
-      htmlFor: controlId,
-      children: label
-    }), /* @__PURE__ */ jsxs(InputGroup, { children: [
-      /* @__PURE__ */ jsx(InputGroupAddon, {
-        align: "inline-start",
-        children: /* @__PURE__ */ jsx(Lock, {})
-      }),
-      /* @__PURE__ */ jsx(InputGroupInput, {
-        id: controlId,
-        type: showPassword ? "text" : "password",
-        placeholder,
-        value,
-        onChange: (event) => onChange(event.target.value),
-        "aria-label": label,
-        "aria-invalid": invalid || void 0
-      }),
-      /* @__PURE__ */ jsx(InputGroupAddon, {
-        align: "inline-end",
-        children: /* @__PURE__ */ jsx(InputGroupButton, {
-          size: "icon-xs",
-          className: cn(HIT_AREA_EXPAND_CLASS, "transition-[background-color,transform] duration-150 active:scale-[0.96]"),
-          "aria-label": showPassword ? "Hide value" : "Show value",
-          onClick: onToggleVisibility,
-          children: showPassword ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
-        })
-      })
-    ] })]
-  });
-}
-function TextCredentialField({ attemptedSave, icon: Icon, inputType = "text", label, onChange, placeholder, required = true, value }) {
-  const controlId = useId();
-  const invalid = isFieldInvalid(value, attemptedSave, required);
-  return /* @__PURE__ */ jsxs(Field, {
-    "data-invalid": invalid || void 0,
-    children: [/* @__PURE__ */ jsx(FieldLabel, {
-      htmlFor: controlId,
-      children: label
-    }), /* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(InputGroupAddon, {
-      align: "inline-start",
-      children: /* @__PURE__ */ jsx(Icon, {})
-    }), /* @__PURE__ */ jsx(InputGroupInput, {
-      id: controlId,
-      type: inputType,
-      placeholder,
-      value,
-      onChange: (event) => onChange(event.target.value),
-      "aria-label": label,
-      "aria-invalid": invalid || void 0
-    })] })]
+var OAUTH_POLL_MS = 1500;
+var STALE_LOGIN_ERROR = "Unknown or expired OAuth login";
+function delay(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
   });
 }
-var OPENAI_CHAT_BASE_URL_PLACEHOLDER = "https://opencode.ai/zen/v1";
-var OPENAI_CHAT_MODEL_PLACEHOLDER = "qwen35-122b-a10b";
-var OPENAI_CHAT_NAME_PLACEHOLDER = "e.g. OpenCode Zen, Nebius, Groq\u2026";
-var CUSTOM_MODELS_PLACEHOLDER = "model-a, model-b (comma-separated)";
-var CUSTOM_PROVIDER_API_OPTIONS = [
-  {
-    value: "openai-completions",
-    label: "OpenAI Chat Completions"
-  },
-  {
-    value: "openai-responses",
-    label: "OpenAI Responses"
-  },
-  {
-    value: "anthropic-messages",
-    label: "Anthropic Messages"
-  },
-  {
-    value: "google-genai",
-    label: "Google Generative AI"
-  }
-];
-function ProviderCredentialFields({ attemptedSave, apiKey, api, baseUrl, modelId, models, displayName, isCustom, onApiKeyChange, onApiChange, onBaseUrlChange, onModelIdChange, onModelsChange, onDisplayNameChange, onTogglePassword, openAiChat, placeholder, showPassword }) {
-  const showApiSelector = isCustom && onApiChange;
-  const showMultiModels = isCustom && onModelsChange;
-  return /* @__PURE__ */ jsxs(FieldGroup, {
-    className: "gap-2",
-    children: [
-      (openAiChat || isCustom) && onDisplayNameChange ? /* @__PURE__ */ jsx(TextCredentialField, {
-        attemptedSave,
-        icon: Tag,
-        label: "Provider name",
-        placeholder: OPENAI_CHAT_NAME_PLACEHOLDER,
-        value: displayName ?? "",
-        onChange: onDisplayNameChange
-      }) : null,
-      showApiSelector ? /* @__PURE__ */ jsx(ApiSelector, {
-        value: api ?? "openai-completions",
-        onChange: onApiChange
-      }) : null,
-      /* @__PURE__ */ jsx(SecretCredentialField, {
-        attemptedSave,
-        label: "API key",
-        placeholder,
-        value: apiKey,
-        showPassword,
-        onChange: onApiKeyChange,
-        onToggleVisibility: onTogglePassword
-      }),
-      openAiChat || isCustom ? /* @__PURE__ */ jsx(TextCredentialField, {
-        attemptedSave,
-        icon: Globe,
-        inputType: "url",
-        label: "Base URL",
-        placeholder: OPENAI_CHAT_BASE_URL_PLACEHOLDER,
-        value: baseUrl,
-        onChange: onBaseUrlChange
-      }) : null,
-      showMultiModels ? /* @__PURE__ */ jsx(TextCredentialField, {
-        attemptedSave,
-        icon: Layers,
-        label: "Model ids",
-        placeholder: CUSTOM_MODELS_PLACEHOLDER,
-        value: models ?? "",
-        onChange: onModelsChange
-      }) : null,
-      openAiChat && !showMultiModels ? /* @__PURE__ */ jsx(TextCredentialField, {
-        attemptedSave,
-        icon: Box,
-        label: "Model name",
-        placeholder: OPENAI_CHAT_MODEL_PLACEHOLDER,
-        value: modelId,
-        onChange: onModelIdChange
-      }) : null
-    ]
-  });
-}
-function ApiSelector({ value, onChange }) {
-  return /* @__PURE__ */ jsxs("div", {
-    className: "flex flex-col gap-1",
-    children: [/* @__PURE__ */ jsx("span", {
-      className: "text-xs font-medium text-muted-foreground",
-      children: "API family"
-    }), /* @__PURE__ */ jsx(Select, {
-      "aria-label": "API family",
-      value,
-      options: CUSTOM_PROVIDER_API_OPTIONS,
-      placeholder: "Select API family",
-      onValueChange: (next) => onChange(next)
-    })]
-  });
-}
-function isOAuthProvider(provider) {
-  return provider.authType === "oauth";
-}
-function supportsOAuth(provider) {
-  return provider.supportsOAuth === true;
-}
-var CUSTOM_PROVIDER_PICKER_ROW = {
-  id: "custom",
-  name: "Custom provider",
-  isConfigured: false,
-  envVarName: "CUSTOM_PROVIDER_API_KEY",
-  displayName: "Custom provider"
-};
-function parseCustomProviderModels(raw) {
-  return raw.split(",").map((entry) => entry.trim()).filter((entry) => entry.length > 0);
-}
-function useProviderCredentialsController({ onRemoveProvider, onUpdateProvider, providers }) {
-  const [editingProvider, setEditingProvider] = useState2(null);
-  const [editingIsNewOccInstance, setEditingIsNewOccInstance] = useState2(false);
-  const [apiKey, setApiKey] = useState2("");
-  const [baseUrl, setBaseUrl] = useState2("");
-  const [modelId, setModelId] = useState2("");
-  const [models, setModels] = useState2("");
-  const [api, setApi] = useState2("openai-completions");
-  const [displayName, setDisplayName] = useState2("");
-  const [showPassword, setShowPassword] = useState2(false);
-  const [attemptedSave, setAttemptedSave] = useState2(false);
-  const [searchQuery, setSearchQuery] = useState2("");
-  const [addPickerOpen, setAddPickerOpen] = useState2(false);
-  const [addPickerQuery, setAddPickerQuery] = useState2("");
-  const [confirmRemoveProvider, setConfirmRemoveProvider] = useState2(null);
-  const credentialProviders = useMemo2(() => {
-    return [...providers.filter((provider) => provider.id !== CUSTOM_PROVIDER_PICKER_ROW.id), CUSTOM_PROVIDER_PICKER_ROW];
-  }, [providers]);
-  const activeProviders = useMemo2(() => credentialProviders.filter((provider) => provider.isConfigured), [credentialProviders]);
-  const unconfiguredProviders = useMemo2(() => credentialProviders.filter((provider) => !provider.isConfigured || provider.id === "openai-chat-completions" && provider.providerFamily === void 0), [credentialProviders]);
-  const filteredActiveProviders = useMemo2(() => {
-    const query = searchQuery.trim().toLowerCase();
-    if (!query) return activeProviders;
-    return activeProviders.filter((provider) => providerMatchesQuery(provider, query));
-  }, [activeProviders, searchQuery]);
-  const filteredPickerAvailable = useMemo2(() => {
-    const query = addPickerQuery.trim().toLowerCase();
-    return unconfiguredProviders.filter((provider) => providerMatchesQuery(provider, query));
-  }, [addPickerQuery, unconfiguredProviders]);
-  const filteredPickerConfigured = useMemo2(() => {
-    const query = addPickerQuery.trim().toLowerCase();
-    return activeProviders.filter((provider) => providerMatchesQuery(provider, query));
-  }, [activeProviders, addPickerQuery]);
-  const pickerHasResults = filteredPickerAvailable.length > 0 || filteredPickerConfigured.length > 0;
-  const editingUnconfiguredProvider = editingProvider && !activeProviders.some((provider) => provider.id === editingProvider) ? credentialProviders.find((entry) => entry.id === editingProvider) ?? null : null;
-  const resetEditor = () => {
-    setApiKey("");
-    setBaseUrl("");
-    setModelId("");
-    setModels("");
-    setApi("openai-completions");
-    setDisplayName("");
-    setShowPassword(false);
-    setAttemptedSave(false);
-  };
-  const closeEditor = () => {
-    setEditingProvider(null);
-    setEditingIsNewOccInstance(false);
-    resetEditor();
-  };
-  const openEditor = (providerId, opts) => {
-    setAddPickerOpen(false);
-    setAddPickerQuery("");
-    setEditingProvider(providerId);
-    setEditingIsNewOccInstance(opts?.newOccInstance === true);
-    resetEditor();
-    const existing = providers.find((provider) => provider.id === providerId);
-    setBaseUrl(existing?.baseUrl ?? "");
-    setDisplayName(existing?.displayName ?? (isCustomProviderId(providerId) ? existing?.name ?? "" : ""));
-    setApi(existing?.api ?? "openai-completions");
-    setModels((existing?.modelIds ?? []).join(", "));
-    setModelId(existing?.modelIds?.[0] ?? "");
-  };
-  const openAddPicker = () => {
-    closeEditor();
-    setAddPickerQuery("");
-    setAddPickerOpen(true);
-  };
-  const closeAddPicker = () => {
-    setAddPickerOpen(false);
-    setAddPickerQuery("");
-  };
-  const selectProviderFromPicker = (providerId) => {
-    openEditor(providerId, { newOccInstance: isOccProviderId(providerId) });
-  };
-  const handleSave = async (providerId) => {
-    if (!onUpdateProvider) return;
-    setAttemptedSave(true);
-    const isCustomEditor = providerId === "custom" || isCustomProviderId(providerId);
-    const openAiChat = isOccProviderId(providerId);
-    if (isCustomEditor) {
-      const modelList = parseCustomProviderModels(models);
-      if (!apiKey.trim() || !baseUrl.trim() || !displayName.trim()) return;
-      if (modelList.length === 0) return;
-      try {
-        await onUpdateProvider({
-          providerId,
-          apiKey: apiKey.trim(),
-          baseUrl: baseUrl.trim(),
-          displayName: displayName.trim(),
-          api,
-          models: modelList,
-          ...providerId === "custom" ? { createOccInstance: true } : {}
-        });
-        notify.success("Provider credentials applied to your active sessions.");
-        closeEditor();
-        closeAddPicker();
-      } catch (error) {
-        notify.error(error instanceof Error ? error.message : "Failed to update provider");
-      }
-      return;
-    }
-    const isNamedOcc = openAiChat && isNamedOccInstanceId(providerId);
-    const isOccLike = openAiChat && (isNamedOcc || editingIsNewOccInstance);
-    if (!apiKey.trim()) return;
-    if (openAiChat && (!baseUrl.trim() || !modelId.trim())) return;
-    if (isOccLike && !displayName.trim()) return;
+function useOAuthLoginFlow({ onConfigured, onOAuthLogin, providerId }) {
+  const [login, setLogin] = useState2(null);
+  const [busy, setBusy] = useState2(false);
+  const [promptAnswer, setPromptAnswer] = useState2("");
+  const loginIdRef = useRef2(null);
+  const generationRef = useRef2(0);
+  const startingRef = useRef2(false);
+  const onOAuthLoginRef = useRef2(onOAuthLogin);
+  const onConfiguredRef = useRef2(onConfigured);
+  const providerIdRef = useRef2(providerId);
+  useEffect2(() => {
+    onOAuthLoginRef.current = onOAuthLogin;
+    onConfiguredRef.current = onConfigured;
+    providerIdRef.current = providerId;
+  }, [
+    onConfigured,
+    onOAuthLogin,
+    providerId
+  ]);
+  const cancelLoginId = useCallback2(async (loginId) => {
+    if (!loginId || !onOAuthLoginRef.current) return;
     try {
-      await onUpdateProvider({
-        providerId,
-        apiKey: apiKey.trim(),
-        ...openAiChat ? {
-          baseUrl: baseUrl.trim(),
-          modelId: modelId.trim(),
-          ...isOccLike ? { displayName: displayName.trim() } : {},
-          ...editingIsNewOccInstance ? { createOccInstance: true } : {}
-        } : {}
+      await onOAuthLoginRef.current({
+        providerId: providerIdRef.current,
+        loginId,
+        cancel: true
       });
-      notify.success("Provider credentials applied to your active sessions.");
-      closeEditor();
-      closeAddPicker();
-    } catch (error) {
-      notify.error(error instanceof Error ? error.message : "Failed to update provider");
+    } catch {
     }
-  };
-  const handleRemove = async (provider) => {
-    if (!onRemoveProvider) return;
-    try {
-      await onRemoveProvider({ providerId: provider.id });
-      if (editingProvider === provider.id) closeEditor();
-      notify.success(`${provider.name} removed from your configured providers.`);
-      setConfirmRemoveProvider(null);
-    } catch (error) {
-      notify.error(error instanceof Error ? error.message : "Failed to remove provider");
-    }
-  };
-  return {
-    activeProviders,
-    addPickerOpen,
-    addPickerQuery,
-    api,
-    apiKey,
-    attemptedSave,
-    baseUrl,
-    canSave: useMemo2(() => {
-      if (apiKey.trim().length === 0) return false;
-      if (!editingProvider) return true;
-      if (editingProvider === "custom" || isCustomProviderId(editingProvider)) {
-        if (baseUrl.trim().length === 0) return false;
-        if (parseCustomProviderModels(models).length === 0) return false;
-        return displayName.trim().length > 0;
-      }
-      if (!isOccProviderId(editingProvider)) return true;
-      if (baseUrl.trim().length === 0 || modelId.trim().length === 0) return false;
-      if (isNamedOccInstanceId(editingProvider) || editingIsNewOccInstance) return displayName.trim().length > 0;
-      return true;
-    }, [
-      apiKey,
-      baseUrl,
-      modelId,
-      models,
-      displayName,
-      editingProvider,
-      editingIsNewOccInstance
-    ]),
-    closeAddPicker,
-    closeEditor,
-    confirmRemoveProvider,
-    credentialProviders,
-    displayName,
-    editingIsNewOccInstance,
-    editingProvider,
-    editingUnconfiguredProvider,
-    filteredActiveProviders,
-    filteredPickerAvailable,
-    filteredPickerConfigured,
-    handleRemove,
-    handleSave,
-    modelId,
-    models,
-    openAddPicker,
-    openEditor,
-    pickerHasResults,
-    resetEditor,
-    searchQuery,
-    selectProviderFromPicker,
-    setAddPickerOpen,
-    setAddPickerQuery,
-    setApi,
-    setApiKey,
-    setAttemptedSave,
-    setBaseUrl,
-    setConfirmRemoveProvider,
-    setDisplayName,
-    setEditingIsNewOccInstance,
-    setEditingProvider,
-    setModelId,
-    setModels,
-    setSearchQuery,
-    setShowPassword,
-    showPassword,
-    unconfiguredProviders
-  };
-}
-function providerMatchesQuery(provider, query) {
-  if (!query) return true;
-  const keywords = supportsOAuth(provider) ? isOAuthProvider(provider) ? "oauth sign-in login" : "api key oauth sign-in login" : provider.id === "custom" || isCustomProviderId(provider.id) ? "custom provider endpoint openai anthropic google compatible" : isOccProviderId(provider.id) ? "api key base url model name chat completions" : "";
-  return [
-    provider.name,
-    provider.envVarName,
-    provider.id,
-    keywords
-  ].join(" ").toLowerCase().includes(query);
-}
-var OAUTH_POLL_MS = 1500;
-var STALE_LOGIN_ERROR = "Unknown or expired OAuth login";
-function delay(ms) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, ms);
-  });
-}
-function useOAuthLoginFlow({ onConfigured, onOAuthLogin, providerId }) {
-  const [login, setLogin] = useState2(null);
-  const [busy, setBusy] = useState2(false);
-  const [promptAnswer, setPromptAnswer] = useState2("");
-  const loginIdRef = useRef2(null);
-  const generationRef = useRef2(0);
-  const startingRef = useRef2(false);
-  const onOAuthLoginRef = useRef2(onOAuthLogin);
-  const onConfiguredRef = useRef2(onConfigured);
-  const providerIdRef = useRef2(providerId);
-  useEffect2(() => {
-    onOAuthLoginRef.current = onOAuthLogin;
-    onConfiguredRef.current = onConfigured;
-    providerIdRef.current = providerId;
-  }, [
-    onConfigured,
-    onOAuthLogin,
-    providerId
-  ]);
-  const cancelLoginId = useCallback2(async (loginId) => {
-    if (!loginId || !onOAuthLoginRef.current) return;
-    try {
-      await onOAuthLoginRef.current({
-        providerId: providerIdRef.current,
-        loginId,
-        cancel: true
-      });
-    } catch {
-    }
-  }, []);
-  const resetLocal = useCallback2(() => {
-    loginIdRef.current = null;
-    startingRef.current = false;
-    setLogin(null);
-    setPromptAnswer("");
-    setBusy(false);
-  }, []);
-  useEffect2(() => {
-    return () => {
-      generationRef.current += 1;
-      const loginId = loginIdRef.current;
-      loginIdRef.current = null;
-      cancelLoginId(loginId);
-    };
-  }, [cancelLoginId]);
-  const applyResult = useCallback2((result, generation) => {
-    if (generation !== generationRef.current) {
-      if (result.status === "waiting" && result.loginId) cancelLoginId(result.loginId);
-      return;
+  }, []);
+  const resetLocal = useCallback2(() => {
+    loginIdRef.current = null;
+    startingRef.current = false;
+    setLogin(null);
+    setPromptAnswer("");
+    setBusy(false);
+  }, []);
+  useEffect2(() => {
+    return () => {
+      generationRef.current += 1;
+      const loginId = loginIdRef.current;
+      loginIdRef.current = null;
+      cancelLoginId(loginId);
+    };
+  }, [cancelLoginId]);
+  const applyResult = useCallback2((result, generation) => {
+    if (generation !== generationRef.current) {
+      if (result.status === "waiting" && result.loginId) cancelLoginId(result.loginId);
+      return;
     }
     if (result.status === "success") {
       loginIdRef.current = null;
@@ -2928,14 +2553,10 @@ function ProviderOAuthSignIn({ onConfigured, onOAuthLogin, provider }) {
         }),
         userCode ? /* @__PURE__ */ jsxs("p", {
           className: "text-sm",
-          children: [
-            "Enter this code:",
-            " ",
-            /* @__PURE__ */ jsx("span", {
-              className: "font-mono text-foreground",
-              children: userCode
-            })
-          ]
+          children: ["Enter this code: ", /* @__PURE__ */ jsx("span", {
+            className: "font-mono text-foreground",
+            children: userCode
+          })]
         }) : null,
         instructions && !userCode ? /* @__PURE__ */ jsx("p", {
           className: "text-xs text-pretty text-muted-foreground",
@@ -3023,554 +2644,336 @@ function ProviderOAuthSignIn({ onConfigured, onOAuthLogin, provider }) {
     })]
   });
 }
-function AddProviderPickerPanel({ addPickerQuery, credentialProvidersLength, filteredPickerAvailable, filteredPickerConfigured, pickerHasResults, onClose, onQueryChange, onSelect }) {
-  return /* @__PURE__ */ jsxs("div", {
-    className: "flex flex-col gap-3",
+function statusLabel(connection) {
+  switch (connection.status) {
+    case "connected":
+      return "Connected";
+    case "anonymous":
+      return "Available without sign-in";
+    case "needs_auth":
+      return "Sign-in required";
+    case "disabled":
+      return "Disabled";
+    default:
+      return connection.status;
+  }
+}
+function connectionSubtitle(connection) {
+  const details = connection.transport === "http" ? connection.url : connection.commandPreview;
+  return [
+    connection.source === "builtin" ? "Built-in" : "User",
+    connection.transport === "http" ? "HTTP" : "stdio",
+    statusLabel(connection),
+    details
+  ].filter((part) => Boolean(part)).join(" \xB7 ");
+}
+function McpConnectionsSection({ connections, isLoading, isPending, onOAuth, onRemove, onUpsert }) {
+  const [adding, setAdding] = useState2(false);
+  const [transport, setTransport] = useState2("http");
+  const [name, setName] = useState2("");
+  const [url, setUrl] = useState2("");
+  const [oauth, setOauth] = useState2(true);
+  const [bearerTokenEnvVar, setBearerTokenEnvVar] = useState2("");
+  const [command, setCommand] = useState2("");
+  const [args, setArgs] = useState2("");
+  const [cwd, setCwd] = useState2("");
+  const [envLines, setEnvLines] = useState2("");
+  const [confirmRemove, setConfirmRemove] = useState2(null);
+  const resetAddForm = () => {
+    setName("");
+    setUrl("");
+    setOauth(true);
+    setBearerTokenEnvVar("");
+    setCommand("");
+    setArgs("");
+    setCwd("");
+    setEnvLines("");
+    setTransport("http");
+    setAdding(false);
+  };
+  const handleAdd = async () => {
+    if (!onUpsert) return;
+    const trimmedName = name.trim();
+    try {
+      if (transport === "http") await onUpsert({
+        name: trimmedName,
+        transport: "http",
+        url: url.trim(),
+        ...oauth ? { oauth: true } : {},
+        ...bearerTokenEnvVar.trim() ? { bearerTokenEnvVar: bearerTokenEnvVar.trim() } : {},
+        force: true
+      });
+      else {
+        const parsedArgs = args.split(/\s+/).map((part) => part.trim()).filter(Boolean);
+        const env = envLines.split("\n").map((line) => line.trim()).filter(Boolean).flatMap((line) => {
+          const equals = line.indexOf("=");
+          if (equals <= 0) return [];
+          const child = line.slice(0, equals).trim();
+          const source = line.slice(equals + 1).trim();
+          if (!child || !source) return [];
+          return [{
+            child,
+            source
+          }];
+        });
+        await onUpsert({
+          name: trimmedName,
+          transport: "stdio",
+          command: command.trim(),
+          ...parsedArgs.length > 0 ? { args: parsedArgs } : {},
+          ...cwd.trim() ? { cwd: cwd.trim() } : {},
+          ...env.length > 0 ? { env } : {},
+          force: true
+        });
+      }
+      notify.success("MCP connection saved");
+      resetAddForm();
+    } catch (error) {
+      notify.error(error instanceof Error ? error.message : "Could not save MCP connection");
+    }
+  };
+  const handleRemove = async (connectionName) => {
+    if (!onRemove) return;
+    try {
+      await onRemove({ name: connectionName });
+      notify.success(`Removed ${connectionName}`);
+      setConfirmRemove(null);
+    } catch (error) {
+      notify.error(error instanceof Error ? error.message : "Could not remove MCP connection");
+    }
+  };
+  const handleLogout = async (connectionName) => {
+    if (!onOAuth) return;
+    try {
+      await onOAuth({
+        name: connectionName,
+        action: "logout"
+      });
+      notify.success(`Signed out of ${connectionName}`);
+    } catch (error) {
+      notify.error(error instanceof Error ? error.message : "Could not sign out");
+    }
+  };
+  const oauthAdapter = useMemo2(() => {
+    if (!onOAuth) return void 0;
+    return (connection) => async (request) => {
+      const starting = !request.loginId && !request.cancel;
+      return await onOAuth({
+        name: connection.name,
+        action: starting && connection.status === "connected" ? "reconnect" : "login",
+        loginId: request.loginId,
+        promptAnswer: request.promptAnswer,
+        cancel: request.cancel
+      });
+    };
+  }, [onOAuth]);
+  return /* @__PURE__ */ jsxs(SettingsPane, {
+    title: "MCP",
+    description: "Connect built-in and user MCP servers. Tokens stay on the server; this list only shows status and environment-variable names.",
+    actions: /* @__PURE__ */ jsxs(Button, {
+      type: "button",
+      size: "sm",
+      variant: "outline",
+      disabled: isPending || adding,
+      onClick: () => setAdding(true),
+      children: [/* @__PURE__ */ jsx(Plus, { "data-icon": "inline-start" }), "Add server"]
+    }),
     children: [
-      /* @__PURE__ */ jsxs("div", {
-        className: "flex items-center gap-2",
-        children: [/* @__PURE__ */ jsx(Button, {
-          type: "button",
-          variant: "ghost",
-          size: "icon-sm",
-          "aria-label": "Back to providers",
-          onClick: onClose,
-          children: /* @__PURE__ */ jsx(ArrowLeft, {})
-        }), /* @__PURE__ */ jsxs("div", {
-          className: "min-w-0 flex-1",
-          children: [/* @__PURE__ */ jsx("p", {
-            className: "text-sm font-medium",
-            children: "Add provider"
-          }), /* @__PURE__ */ jsx("p", {
-            className: "text-xs text-pretty text-muted-foreground",
-            children: "Choose a provider to store encrypted credentials for this account."
-          })]
-        })]
-      }),
-      /* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(InputGroupAddon, {
-        align: "inline-start",
-        children: /* @__PURE__ */ jsx(Search, {})
-      }), /* @__PURE__ */ jsx(InputGroupInput, {
-        type: "text",
-        placeholder: "Search providers\u2026",
-        value: addPickerQuery,
-        onChange: (event) => onQueryChange(event.target.value),
-        "aria-label": "Search providers to add"
-      })] }),
+      isLoading ? /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center gap-2 text-sm text-muted-foreground",
+        children: [/* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }), "Loading MCP connections\u2026"]
+      }) : null,
+      adding ? /* @__PURE__ */ jsxs("div", {
+        className: "flex flex-col gap-3 rounded-xl border p-4",
+        children: [
+          /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, { children: "Name" }), /* @__PURE__ */ jsx(Input, {
+            value: name,
+            onChange: (event) => setName(event.target.value),
+            "aria-label": "MCP server name"
+          })] }),
+          /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, { children: "Transport" }), /* @__PURE__ */ jsx(Select, {
+            value: transport,
+            onValueChange: (value) => setTransport(value),
+            options: [{
+              label: "HTTP",
+              value: "http"
+            }, {
+              label: "stdio",
+              value: "stdio"
+            }]
+          })] }),
+          transport === "http" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, { children: "URL" }), /* @__PURE__ */ jsx(Input, {
+              value: url,
+              onChange: (event) => setUrl(event.target.value),
+              "aria-label": "MCP server URL"
+            })] }),
+            /* @__PURE__ */ jsxs(Field, {
+              orientation: "horizontal",
+              className: "items-center justify-between",
+              children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(FieldLabel, { children: "OAuth" }), /* @__PURE__ */ jsx(FieldDescription, { children: "Use the browser sign-in flow for this server." })] }), /* @__PURE__ */ jsx(Switch, {
+                checked: oauth,
+                onCheckedChange: (checked) => setOauth(checked),
+                "aria-label": "Use OAuth"
+              })]
+            }),
+            !oauth ? /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, { children: "Bearer token environment variable" }), /* @__PURE__ */ jsx(Input, {
+              value: bearerTokenEnvVar,
+              onChange: (event) => setBearerTokenEnvVar(event.target.value),
+              "aria-label": "Bearer token environment variable",
+              placeholder: "MCP_BEARER_TOKEN"
+            })] }) : null
+          ] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, { children: "Command" }), /* @__PURE__ */ jsx(Input, {
+              value: command,
+              onChange: (event) => setCommand(event.target.value),
+              "aria-label": "MCP command"
+            })] }),
+            /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, { children: "Arguments" }), /* @__PURE__ */ jsx(Input, {
+              value: args,
+              onChange: (event) => setArgs(event.target.value),
+              "aria-label": "MCP command arguments"
+            })] }),
+            /* @__PURE__ */ jsxs(Field, { children: [
+              /* @__PURE__ */ jsx(FieldLabel, { children: "Working directory" }),
+              /* @__PURE__ */ jsx(Input, {
+                value: cwd,
+                onChange: (event) => setCwd(event.target.value),
+                "aria-label": "MCP working directory"
+              }),
+              /* @__PURE__ */ jsx(FieldDescription, { children: "Must stay inside the current workspace." })
+            ] }),
+            /* @__PURE__ */ jsxs(Field, { children: [
+              /* @__PURE__ */ jsx(FieldLabel, { children: "Environment mappings" }),
+              /* @__PURE__ */ jsx(Textarea, {
+                value: envLines,
+                onChange: (event) => setEnvLines(event.target.value),
+                "aria-label": "MCP environment mappings",
+                placeholder: "CHILD=SOURCE"
+              }),
+              /* @__PURE__ */ jsx(FieldDescription, { children: "One CHILD=SOURCE pair per line. Only variable names are stored." })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "flex justify-end gap-2",
+            children: [/* @__PURE__ */ jsx(Button, {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              onClick: resetAddForm,
+              children: "Cancel"
+            }), /* @__PURE__ */ jsxs(Button, {
+              type: "button",
+              size: "sm",
+              disabled: isPending || !name.trim(),
+              onClick: () => void handleAdd(),
+              children: [isPending ? /* @__PURE__ */ jsx(Spinner, { "data-icon": "inline-start" }) : null, "Save"]
+            })]
+          })
+        ]
+      }) : null,
+      !isLoading && connections.length === 0 && !adding ? /* @__PURE__ */ jsx("p", {
+        className: "text-sm text-muted-foreground",
+        children: "No MCP connections yet."
+      }) : null,
       /* @__PURE__ */ jsx("div", {
-        className: "max-h-[min(24rem,50vh)] overflow-y-auto",
-        children: !pickerHasResults ? /* @__PURE__ */ jsx("p", {
-          className: "py-6 text-center text-xs text-pretty text-muted-foreground",
-          children: credentialProvidersLength === 0 ? "No providers available." : "No matching providers found."
-        }) : /* @__PURE__ */ jsxs("div", {
-          className: "flex flex-col gap-3",
-          children: [filteredPickerAvailable.length > 0 ? /* @__PURE__ */ jsx("div", {
-            className: "flex flex-col gap-1",
-            children: filteredPickerAvailable.map((provider) => /* @__PURE__ */ jsx(ProviderPickerRow, {
-              provider,
-              configured: false,
-              onSelect: () => onSelect(provider.id)
-            }, provider.id))
-          }) : null, filteredPickerConfigured.length > 0 ? /* @__PURE__ */ jsxs("div", {
-            className: "flex flex-col gap-1",
-            children: [filteredPickerAvailable.length > 0 ? /* @__PURE__ */ jsx("p", {
-              className: "px-2 pt-1 text-[0.6875rem] font-medium tracking-wide text-muted-foreground uppercase",
-              children: "Already configured"
-            }) : null, filteredPickerConfigured.map((provider) => /* @__PURE__ */ jsx(ProviderPickerRow, {
-              provider,
-              configured: true,
-              onSelect: () => onSelect(provider.id)
-            }, provider.id))]
-          }) : null]
-        })
+        className: "flex flex-col gap-2",
+        children: connections.map((connection) => /* @__PURE__ */ jsxs("div", {
+          className: "flex flex-col gap-2",
+          children: [
+            /* @__PURE__ */ jsx(ItemRow, {
+              icon: /* @__PURE__ */ jsx(Plug, { className: "size-4" }),
+              title: connection.label,
+              subtitle: connectionSubtitle(connection),
+              trailing: /* @__PURE__ */ jsxs("div", {
+                className: "flex items-center gap-1.5",
+                children: [connection.usesOAuth && connection.status !== "needs_auth" ? /* @__PURE__ */ jsx(Button, {
+                  type: "button",
+                  size: "sm",
+                  variant: "ghost",
+                  disabled: isPending || !onOAuth,
+                  onClick: () => {
+                    handleLogout(connection.name);
+                  },
+                  children: "Sign out"
+                }) : null, connection.source === "user" ? confirmRemove === connection.name ? /* @__PURE__ */ jsx(Button, {
+                  type: "button",
+                  size: "sm",
+                  variant: "destructive",
+                  disabled: isPending,
+                  onClick: () => {
+                    handleRemove(connection.name);
+                  },
+                  children: "Confirm remove"
+                }) : /* @__PURE__ */ jsx(Button, {
+                  type: "button",
+                  size: "sm",
+                  variant: "ghost",
+                  disabled: isPending || !onRemove,
+                  "aria-label": `Remove ${connection.name}`,
+                  onClick: () => setConfirmRemove(connection.name),
+                  children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
+                }) : null]
+              })
+            }),
+            connection.error ? /* @__PURE__ */ jsx(Alert, {
+              className: "px-3 py-2",
+              children: /* @__PURE__ */ jsx(AlertDescription, {
+                className: "text-xs text-pretty",
+                children: connection.error
+              })
+            }) : null,
+            connection.usesOAuth && oauthAdapter ? /* @__PURE__ */ jsx(ProviderOAuthSignIn, {
+              provider: {
+                id: connection.name,
+                name: connection.label,
+                isConfigured: connection.status === "connected",
+                envVarName: "",
+                authType: "oauth",
+                supportsOAuth: true
+              },
+              onOAuthLogin: oauthAdapter(connection)
+            }) : null
+          ]
+        }, `${connection.source}:${connection.name}`))
       })
     ]
   });
 }
-function AddProviderOAuthPanel({ onBack, onConfigured, onOAuthLogin, provider }) {
-  return /* @__PURE__ */ jsxs("div", {
-    className: "flex flex-col gap-3",
-    children: [/* @__PURE__ */ jsxs("div", {
-      className: "flex items-center gap-2",
-      children: [/* @__PURE__ */ jsx(Button, {
-        type: "button",
-        variant: "ghost",
-        size: "icon-sm",
-        "aria-label": "Back to provider list",
-        onClick: onBack,
-        children: /* @__PURE__ */ jsx(ArrowLeft, {})
-      }), /* @__PURE__ */ jsxs("div", {
-        className: "min-w-0 flex-1",
-        children: [/* @__PURE__ */ jsxs("p", {
-          className: "text-sm font-medium",
-          children: ["Configure ", provider.name]
-        }), /* @__PURE__ */ jsx("p", {
-          className: "text-xs text-pretty text-muted-foreground",
-          children: "OAuth sign-in. Credentials are stored in auth.json for this account."
-        })]
-      })]
-    }), /* @__PURE__ */ jsx(ProviderOAuthSignIn, {
-      provider,
-      onConfigured,
-      onOAuthLogin
-    }, provider.id)]
-  });
-}
-function AddProviderEditorPanel({ provider, api, apiKey, baseUrl, modelId, models, displayName, showPassword, attemptedSave, isPending, canSave, onApiKeyChange, onApiChange, onBaseUrlChange, onModelIdChange, onModelsChange, onDisplayNameChange, onTogglePassword, onBack, onCancel, onConfigured, onOAuthLogin, onSave }) {
-  const isCustomTemplate = provider.id === "custom" || isCustomProviderId(provider.id);
-  const meta = PROVIDER_METADATA[provider.id] ?? (isCustomTemplate ? PROVIDER_METADATA["custom"] : {
-    placeholder: "Enter credentials\u2026",
-    help: "Stored securely in your local environment overrides."
-  });
-  const openAiChat = isOccProviderId(provider.id) && !isCustomTemplate;
-  const oauthAvailable = supportsOAuth(provider);
-  return /* @__PURE__ */ jsxs("div", {
-    className: "flex flex-col gap-3",
-    children: [
-      /* @__PURE__ */ jsxs("div", {
-        className: "flex items-center gap-2",
-        children: [/* @__PURE__ */ jsx(Button, {
-          type: "button",
-          variant: "ghost",
-          size: "icon-sm",
-          "aria-label": "Back to provider list",
-          onClick: onBack,
-          children: /* @__PURE__ */ jsx(ArrowLeft, {})
-        }), /* @__PURE__ */ jsxs("div", {
-          className: "min-w-0 flex-1",
-          children: [/* @__PURE__ */ jsxs("p", {
-            className: "text-sm font-medium",
-            children: ["Configure ", provider.name]
-          }), /* @__PURE__ */ jsx("p", {
-            className: "text-xs text-pretty text-muted-foreground",
-            children: isCustomTemplate ? "Name this custom provider, pick its API family, then enter its API key, https base URL, and model ids." : openAiChat ? "Name this OpenAI-compatible provider, then enter its API key, base URL, and model name." : `Stored as ${provider.envVarName} for this account.`
-          })]
-        })]
-      }),
-      /* @__PURE__ */ jsx(ProviderCredentialFields, {
-        attemptedSave,
-        api,
-        apiKey,
-        baseUrl,
-        modelId,
-        models,
-        displayName,
-        isCustom: isCustomTemplate,
-        openAiChat,
-        placeholder: meta.placeholder,
-        showPassword,
-        onApiKeyChange,
-        onApiChange,
-        onBaseUrlChange,
-        onModelIdChange,
-        onModelsChange,
-        onDisplayNameChange,
-        onTogglePassword
-      }),
-      /* @__PURE__ */ jsxs(Alert, {
-        className: "px-3 py-2",
-        children: [/* @__PURE__ */ jsx(Info, {}), /* @__PURE__ */ jsx(AlertDescription, {
-          className: "text-xs text-pretty",
-          children: meta.help
-        })]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "flex items-center justify-end gap-1.5",
-        children: [/* @__PURE__ */ jsx(Button, {
-          type: "button",
-          variant: "ghost",
-          size: "sm",
-          onClick: onCancel,
-          children: "Cancel"
-        }), /* @__PURE__ */ jsxs(Button, {
-          type: "button",
-          size: "sm",
-          disabled: isPending || !canSave,
-          onClick: onSave,
-          children: [isPending ? /* @__PURE__ */ jsx(Spinner, { "data-icon": "inline-start" }) : null, "Save"]
-        })]
-      }),
-      oauthAvailable ? /* @__PURE__ */ jsx(ProviderOAuthSignIn, {
-        provider,
-        onConfigured: onConfigured ?? onCancel,
-        onOAuthLogin
-      }, `${provider.id}-oauth`) : null
-    ]
-  });
+function customModelKey(provider, model) {
+  return `${provider}/${model}`;
 }
-function RemoveProviderConfirmDialog({ confirmRemoveProvider, isPending, onClose, onConfirm }) {
-  return /* @__PURE__ */ jsx(AlertDialog, {
-    open: confirmRemoveProvider !== null,
-    onOpenChange: (open) => {
-      if (!open) onClose();
-    },
-    children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs("div", {
-      className: "flex flex-col gap-2",
-      children: [/* @__PURE__ */ jsxs(AlertDialogTitle, { children: [
-        "Remove ",
-        confirmRemoveProvider?.name ?? "provider",
-        "?"
-      ] }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "This clears stored credentials for this provider from your workspace settings. Active sessions will stop using it immediately." })]
-    }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, {
-      disabled: isPending,
-      children: "Cancel"
-    }), /* @__PURE__ */ jsxs(AlertDialogAction, {
-      disabled: isPending || !confirmRemoveProvider,
-      onClick: () => {
-        if (confirmRemoveProvider) onConfirm(confirmRemoveProvider);
-      },
-      children: [isPending ? /* @__PURE__ */ jsx(Spinner, { "data-icon": "inline-start" }) : null, "Remove provider"]
-    })] })] })
-  });
+function isModelEnabled(model, patterns) {
+  return isModelPatternEnabled({
+    id: model.id,
+    name: model.name,
+    provider: model.provider,
+    modelId: model.modelId
+  }, patterns);
 }
-function ProviderPickerRow({ configured, onSelect, provider }) {
-  const openAiChat = isOccProviderId(provider.id);
-  const isCustomTemplate = provider.id === "custom" || isCustomProviderId(provider.id);
-  const oauthOnly = isOAuthProvider(provider);
-  const oauthAvailable = supportsOAuth(provider);
-  return /* @__PURE__ */ jsxs("button", {
-    type: "button",
-    className: cn("flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition-[background-color,transform] duration-150", "hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none active:scale-[0.96]"),
-    onClick: onSelect,
-    children: [/* @__PURE__ */ jsx("div", {
-      className: "flex size-8 shrink-0 items-center justify-center rounded-[4px] border border-border/40 bg-background/60",
-      children: /* @__PURE__ */ jsx(ProviderBrandIcon, {
-        provider: isCustomTemplate ? "custom" : provider.id,
-        api: provider.api,
-        className: "text-foreground/70"
-      })
-    }), /* @__PURE__ */ jsxs("div", {
-      className: "min-w-0 flex-1",
-      children: [/* @__PURE__ */ jsx("div", {
-        className: "truncate text-sm font-medium",
-        children: provider.name
-      }), /* @__PURE__ */ jsxs("div", {
-        className: "truncate text-xs text-muted-foreground",
-        children: [oauthOnly ? "OAuth sign-in" : oauthAvailable ? "API key or OAuth" : isCustomTemplate ? "API family + key + https base URL + models" : openAiChat ? "API key + base URL + model name" : provider.envVarName, configured ? " \xB7 Update" : ""]
-      })]
-    })]
-  });
+function nextEnabledModelPatterns({ currentPatterns, enabled, model, models }) {
+  if (currentPatterns === void 0 && enabled) return void 0;
+  const current = currentPatterns ?? [];
+  const knownModelPatterns = new Set(models.map((item) => modelPatternFor(item)));
+  const activeKnown = /* @__PURE__ */ new Set();
+  for (const item of models) if (isModelEnabled(item, currentPatterns)) activeKnown.add(modelPatternFor(item));
+  if (enabled) activeKnown.add(modelPatternFor(model));
+  else activeKnown.delete(modelPatternFor(model));
+  return [...current.filter((pattern) => {
+    if (knownModelPatterns.has(pattern)) return false;
+    return enabled || !modelMatchesPattern(model, pattern);
+  }), ...activeKnown];
 }
-function RowSurface({ className, interactive, padding, tone, ...props }) {
-  return /* @__PURE__ */ jsx("div", {
-    className: cn(fleetPiRowSurface({
-      interactive,
-      padding,
-      tone
-    }), className),
-    ...props
-  });
+function modelPatternFor(model) {
+  return modelPattern(model.provider, model.modelId);
 }
-function ItemRow({ icon, title, subtitle, trailing, className, interactive = true, tone = "default" }) {
-  return /* @__PURE__ */ jsxs(RowSurface, {
-    tone,
-    padding: "md",
-    interactive,
-    className: cn("items-center gap-3", className),
-    children: [
-      icon ? /* @__PURE__ */ jsx("div", {
-        className: "flex size-8 shrink-0 items-center justify-center rounded-md border border-border/40 bg-background/60 text-foreground/70",
-        children: icon
-      }) : null,
-      /* @__PURE__ */ jsxs("div", {
-        className: "min-w-0 flex-1",
-        children: [/* @__PURE__ */ jsx("div", {
-          className: "truncate text-sm font-medium text-foreground",
-          children: title
-        }), subtitle ? /* @__PURE__ */ jsx("div", {
-          className: "mt-0.5 truncate text-xs text-muted-foreground",
-          children: subtitle
-        }) : null]
-      }),
-      trailing ? /* @__PURE__ */ jsx("div", {
-        className: "flex shrink-0 items-center gap-1.5",
-        children: trailing
-      }) : null
-    ]
-  });
-}
-function ActiveProviderList({ providers, editingProvider, form, operation, actions, onEdit, onCancelEdit, onSave, onRemove, onOAuthLogin, onConfigured }) {
-  const { api, apiKey, baseUrl, modelId, models, displayName, showPassword, attemptedSave, canSave } = form;
-  const { isPending, canRemove } = operation;
-  const { onApiKeyChange, onApiChange, onBaseUrlChange, onModelIdChange, onModelsChange, onDisplayNameChange, onTogglePassword } = actions;
-  return /* @__PURE__ */ jsx("div", {
-    className: "flex flex-col gap-1.5",
-    children: providers.map((provider) => {
-      const isEditing = editingProvider === provider.id;
-      const isCustom = isCustomProviderId(provider.id);
-      const meta = PROVIDER_METADATA[provider.id] ?? PROVIDER_METADATA[isCustom ? "custom" : "openai-chat-completions"];
-      const openAiChat = isOccProviderId(provider.id);
-      const oauthOnly = isOAuthProvider(provider);
-      const oauthAvailable = supportsOAuth(provider);
-      return /* @__PURE__ */ jsxs("div", {
-        className: "flex flex-col",
-        children: [/* @__PURE__ */ jsx(ItemRow, {
-          interactive: false,
-          icon: /* @__PURE__ */ jsx(ProviderBrandIcon, {
-            provider: provider.id,
-            api: provider.api,
-            className: "text-foreground/80"
-          }),
-          title: provider.name,
-          subtitle: oauthOnly ? "OAuth sign-in" : oauthAvailable ? "API key or OAuth" : isCustom ? "Custom provider \xB7 API key + base URL + models" : openAiChat ? "OpenAI-compatible \xB7 API key + base URL + model name" : provider.envVarName,
-          trailing: /* @__PURE__ */ jsxs("div", {
-            className: "flex items-center gap-0.5",
-            children: [/* @__PURE__ */ jsxs(Button, {
-              type: "button",
-              variant: "ghost",
-              size: "sm",
-              className: cn(HIT_AREA_EXPAND_DENSE_CLASS, "h-7 px-2 text-xs text-muted-foreground transition-[background-color,color,transform] duration-150 hover:text-destructive active:scale-[0.96]"),
-              disabled: isPending || !canRemove,
-              "aria-label": `Remove ${provider.name}`,
-              onClick: () => onRemove(provider),
-              children: [/* @__PURE__ */ jsx(Trash2, { "data-icon": "inline-start" }), "Remove"]
-            }), /* @__PURE__ */ jsxs(Button, {
-              type: "button",
-              variant: "ghost",
-              size: "sm",
-              className: cn(HIT_AREA_EXPAND_DENSE_CLASS, "h-7 px-2 text-xs transition-[background-color,transform] duration-150 active:scale-[0.96]"),
-              disabled: isPending,
-              onClick: () => {
-                if (isEditing) {
-                  onCancelEdit();
-                  return;
-                }
-                onEdit(provider.id);
-              },
-              children: [!isEditing ? /* @__PURE__ */ jsx(Pencil, { "data-icon": "inline-start" }) : null, isEditing ? "Cancel" : "Update"]
-            })]
-          })
-        }), isEditing ? /* @__PURE__ */ jsx(RowSurface, {
-          tone: "inset",
-          padding: "md",
-          className: "flex flex-col gap-2 border-t border-border/30",
-          children: oauthOnly ? /* @__PURE__ */ jsx(ProviderOAuthSignIn, {
-            provider,
-            onConfigured,
-            onOAuthLogin
-          }, provider.id) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            /* @__PURE__ */ jsx(ProviderCredentialFields, {
-              attemptedSave,
-              api: provider.api ?? api,
-              apiKey,
-              baseUrl,
-              modelId,
-              models,
-              displayName,
-              isCustom,
-              openAiChat,
-              placeholder: meta.placeholder,
-              showPassword,
-              onApiKeyChange,
-              onApiChange,
-              onBaseUrlChange,
-              onModelIdChange,
-              onModelsChange,
-              onDisplayNameChange: isCustom || provider.providerFamily !== void 0 ? onDisplayNameChange : void 0,
-              onTogglePassword
-            }),
-            /* @__PURE__ */ jsxs(Alert, {
-              className: "px-3 py-2",
-              children: [/* @__PURE__ */ jsx(Info, {}), /* @__PURE__ */ jsx(AlertDescription, {
-                className: "text-xs text-pretty",
-                children: meta.help
-              })]
-            }),
-            /* @__PURE__ */ jsx("div", {
-              className: "flex items-center justify-end",
-              children: /* @__PURE__ */ jsxs(Button, {
-                type: "button",
-                size: "sm",
-                disabled: isPending || !canSave,
-                onClick: () => onSave(provider.id),
-                children: [isPending ? /* @__PURE__ */ jsx(Spinner, { "data-icon": "inline-start" }) : null, "Save"]
-              })
-            }),
-            oauthAvailable ? /* @__PURE__ */ jsx(ProviderOAuthSignIn, {
-              provider,
-              onConfigured,
-              onOAuthLogin
-            }, `${provider.id}-oauth`) : null
-          ] })
-        }) : null]
-      }, provider.id);
-    })
-  });
-}
-function ProviderCredentialsSection({ isLoading, isPending, onOAuthLogin, onRemoveProvider, onUpdateProvider, providers }) {
-  const { activeProviders, addPickerOpen, addPickerQuery, api, apiKey, attemptedSave, baseUrl, canSave, closeAddPicker, closeEditor, confirmRemoveProvider, credentialProviders, displayName, editingProvider, editingUnconfiguredProvider, filteredActiveProviders, filteredPickerAvailable, filteredPickerConfigured, handleRemove, handleSave, modelId, models, openAddPicker, openEditor, pickerHasResults, searchQuery, selectProviderFromPicker, setAddPickerQuery, setApi, setApiKey, setBaseUrl, setConfirmRemoveProvider, setDisplayName, setModelId, setModels, setSearchQuery, setShowPassword, showPassword } = useProviderCredentialsController({
-    onRemoveProvider,
-    onUpdateProvider,
-    providers
-  });
-  const form = {
-    api,
-    apiKey,
-    baseUrl,
-    modelId,
-    models,
-    displayName,
-    showPassword,
-    attemptedSave,
-    canSave
-  };
-  const operation = {
-    isPending,
-    canRemove: Boolean(onRemoveProvider)
-  };
-  const actions = {
-    onApiKeyChange: setApiKey,
-    onApiChange: setApi,
-    onBaseUrlChange: setBaseUrl,
-    onModelIdChange: setModelId,
-    onModelsChange: setModels,
-    onDisplayNameChange: setDisplayName,
-    onTogglePassword: () => setShowPassword((current) => !current)
-  };
-  return /* @__PURE__ */ jsxs(SettingsPane, {
-    title: "Providers",
-    description: "Locally, API keys are stored in `.env.local`. When deployed, they are stored encrypted in your account.",
-    children: [addPickerOpen ? /* @__PURE__ */ jsx(AddProviderPickerPanel, {
-      addPickerQuery,
-      credentialProvidersLength: credentialProviders.length,
-      filteredPickerAvailable,
-      filteredPickerConfigured,
-      pickerHasResults,
-      onClose: closeAddPicker,
-      onQueryChange: setAddPickerQuery,
-      onSelect: selectProviderFromPicker
-    }) : editingUnconfiguredProvider && isOAuthProvider(editingUnconfiguredProvider) ? /* @__PURE__ */ jsx(AddProviderOAuthPanel, {
-      provider: editingUnconfiguredProvider,
-      onBack: openAddPicker,
-      onConfigured: closeEditor,
-      onOAuthLogin
-    }, editingUnconfiguredProvider.id) : editingUnconfiguredProvider ? /* @__PURE__ */ jsx(AddProviderEditorPanel, {
-      provider: editingUnconfiguredProvider,
-      api,
-      apiKey,
-      baseUrl,
-      modelId,
-      models,
-      displayName,
-      showPassword,
-      attemptedSave,
-      isPending,
-      canSave,
-      onApiKeyChange: setApiKey,
-      onApiChange: setApi,
-      onBaseUrlChange: setBaseUrl,
-      onModelIdChange: setModelId,
-      onModelsChange: setModels,
-      onDisplayNameChange: setDisplayName,
-      onTogglePassword: () => setShowPassword((current) => !current),
-      onBack: openAddPicker,
-      onCancel: closeEditor,
-      onConfigured: closeEditor,
-      onOAuthLogin,
-      onSave: () => {
-        if (editingProvider) handleSave(editingProvider);
-      }
-    }) : /* @__PURE__ */ jsxs("div", {
-      className: "flex flex-col gap-3",
-      children: [/* @__PURE__ */ jsxs("div", {
-        className: "flex items-center gap-2",
-        children: [/* @__PURE__ */ jsxs(InputGroup, {
-          className: "flex-1",
-          children: [/* @__PURE__ */ jsx(InputGroupAddon, {
-            align: "inline-start",
-            children: /* @__PURE__ */ jsx(Search, {})
-          }), /* @__PURE__ */ jsx(InputGroupInput, {
-            type: "text",
-            placeholder: "Search credentials\u2026",
-            value: searchQuery,
-            onChange: (event) => setSearchQuery(event.target.value),
-            "aria-label": "Search credentials",
-            disabled: isLoading || activeProviders.length === 0
-          })]
-        }), /* @__PURE__ */ jsxs(Button, {
-          type: "button",
-          variant: "outline",
-          size: "sm",
-          disabled: isLoading || credentialProviders.length === 0,
-          onClick: openAddPicker,
-          children: [/* @__PURE__ */ jsx(Plus, { "data-icon": "inline-start" }), "Add provider"]
-        })]
-      }), isLoading ? /* @__PURE__ */ jsxs("div", {
-        className: "flex items-center justify-center gap-2 py-6 text-xs text-muted-foreground",
-        children: [/* @__PURE__ */ jsx(Spinner, { className: "size-3" }), /* @__PURE__ */ jsx("span", { children: "Loading\u2026" })]
-      }) : activeProviders.length === 0 ? /* @__PURE__ */ jsxs("div", {
-        className: "flex flex-col items-center gap-3 py-8",
-        children: [/* @__PURE__ */ jsx("p", {
-          className: "text-center text-xs text-pretty text-muted-foreground",
-          children: "No providers configured"
-        }), /* @__PURE__ */ jsxs(Button, {
-          type: "button",
-          variant: "outline",
-          size: "sm",
-          disabled: credentialProviders.length === 0,
-          onClick: openAddPicker,
-          children: [/* @__PURE__ */ jsx(Plus, { "data-icon": "inline-start" }), "Add provider"]
-        })]
-      }) : filteredActiveProviders.length === 0 ? /* @__PURE__ */ jsx("p", {
-        className: "py-6 text-center text-xs text-pretty text-muted-foreground",
-        children: "No matching providers found."
-      }) : /* @__PURE__ */ jsx(ActiveProviderList, {
-        providers: filteredActiveProviders,
-        editingProvider,
-        form,
-        operation,
-        actions,
-        onEdit: openEditor,
-        onCancelEdit: closeEditor,
-        onSave: (providerId) => void handleSave(providerId),
-        onRemove: setConfirmRemoveProvider,
-        onOAuthLogin,
-        onConfigured: closeEditor
-      })]
-    }), /* @__PURE__ */ jsx(RemoveProviderConfirmDialog, {
-      confirmRemoveProvider,
-      isPending,
-      onClose: () => setConfirmRemoveProvider(null),
-      onConfirm: (provider) => {
-        handleRemove(provider);
-      }
-    })]
-  });
-}
-function customModelKey(provider, model) {
-  return `${provider}/${model}`;
-}
-function isModelEnabled(model, patterns) {
-  return isModelPatternEnabled({
-    id: model.id,
-    name: model.name,
-    provider: model.provider,
-    modelId: model.modelId
-  }, patterns);
-}
-function nextEnabledModelPatterns({ currentPatterns, enabled, model, models }) {
-  if (currentPatterns === void 0 && enabled) return void 0;
-  const current = currentPatterns ?? [];
-  const knownModelPatterns = new Set(models.map((item) => modelPatternFor(item)));
-  const activeKnown = /* @__PURE__ */ new Set();
-  for (const item of models) if (isModelEnabled(item, currentPatterns)) activeKnown.add(modelPatternFor(item));
-  if (enabled) activeKnown.add(modelPatternFor(model));
-  else activeKnown.delete(modelPatternFor(model));
-  return [...current.filter((pattern) => {
-    if (knownModelPatterns.has(pattern)) return false;
-    return enabled || !modelMatchesPattern(model, pattern);
-  }), ...activeKnown];
-}
-function modelPatternFor(model) {
-  return modelPattern(model.provider, model.modelId);
-}
-function searchableModelText(model) {
-  return [
-    model.name,
-    model.modelId,
-    model.provider,
-    model.id
-  ].join(" ").toLowerCase();
+function searchableModelText(model) {
+  return [
+    model.name,
+    model.modelId,
+    model.provider,
+    model.id
+  ].join(" ").toLowerCase();
 }
 function AddModelsDialog({ configuredProviderIds, discoverableProviderIds, discoveringProviderId, enabledModels, modelOptions, onAddModels, onDiscoverProvider, onOpenChange, open, providerLabel = formatProviderLabel }) {
   const [filter, setFilter] = useState2("");
@@ -3742,18 +3145,14 @@ function AddModelsDialog({ configuredProviderIds, discoverableProviderIds, disco
             size: "sm",
             disabled: selectedKeys.size === 0,
             onClick: confirmAdd,
-            children: [
-              "Add",
-              " ",
-              selectedKeys.size > 0 ? /* @__PURE__ */ jsxs("span", {
-                className: "tabular-nums",
-                children: [
-                  "(",
-                  selectedKeys.size,
-                  ")"
-                ]
-              }) : null
-            ]
+            children: ["Add ", selectedKeys.size > 0 ? /* @__PURE__ */ jsxs("span", {
+              className: "tabular-nums",
+              children: [
+                "(",
+                selectedKeys.size,
+                ")"
+              ]
+            }) : null]
           })]
         })
       ]
@@ -3824,8 +3223,7 @@ function ModelDefaultsSection({ draft, discoveringProviderId, modelDirty, modelF
   return /* @__PURE__ */ jsxs(SettingsPane, {
     title: "LLM Models",
     description: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      "Models available in chat. Discover from configured providers, add the ones you want, and remove any you do not need \u2014 changes save automatically.",
-      " ",
+      "Models available in chat. Discover from configured providers, add the ones you want, and remove any you do not need \u2014 changes save automatically. ",
       /* @__PURE__ */ jsx("span", {
         className: "tabular-nums",
         children: listedModels.length
@@ -3838,8 +3236,7 @@ function ModelDefaultsSection({ draft, discoveringProviderId, modelDirty, modelF
           className: "tabular-nums",
           children: modelOptions.length
         }),
-        " ",
-        "discovered"
+        " discovered"
       ] }) : null,
       "."
     ] }),
@@ -3853,200 +3250,989 @@ function ModelDefaultsSection({ draft, discoveringProviderId, modelDirty, modelF
     children: [
       /* @__PURE__ */ jsxs("div", {
         className: "flex items-center gap-2",
-        children: [/* @__PURE__ */ jsxs(InputGroup, {
-          className: "flex-1",
-          children: [/* @__PURE__ */ jsx(InputGroupAddon, {
-            align: "inline-start",
-            children: /* @__PURE__ */ jsx(Search, {})
-          }), /* @__PURE__ */ jsx(InputGroupInput, {
-            "aria-label": "Search listed models",
-            value: modelFilter,
-            onChange: (event) => onModelFilterChange(event.target.value),
-            placeholder: "Search listed models\u2026",
-            disabled: disabled2 || listedModels.length === 0
-          })]
-        }), /* @__PURE__ */ jsxs(Button, {
+        children: [/* @__PURE__ */ jsxs(InputGroup, {
+          className: "flex-1",
+          children: [/* @__PURE__ */ jsx(InputGroupAddon, {
+            align: "inline-start",
+            children: /* @__PURE__ */ jsx(Search, {})
+          }), /* @__PURE__ */ jsx(InputGroupInput, {
+            "aria-label": "Search listed models",
+            value: modelFilter,
+            onChange: (event) => onModelFilterChange(event.target.value),
+            placeholder: "Search listed models\u2026",
+            disabled: disabled2 || listedModels.length === 0
+          })]
+        }), /* @__PURE__ */ jsxs(Button, {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          disabled: disabled2,
+          onClick: openAddDialog,
+          children: [/* @__PURE__ */ jsx(Plus, { "data-icon": "inline-start" }), "Add models"]
+        })]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "flex flex-col gap-3",
+        "data-testid": "runtime-models-list",
+        children: emptyMessage ? /* @__PURE__ */ jsxs("div", {
+          className: "flex flex-col items-center gap-3 py-8",
+          children: [/* @__PURE__ */ jsx("p", {
+            className: "px-1 text-center text-xs text-pretty text-muted-foreground",
+            children: emptyMessage
+          }), !normalizedFilter ? /* @__PURE__ */ jsxs(Button, {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            disabled: disabled2,
+            onClick: openAddDialog,
+            children: [/* @__PURE__ */ jsx(Plus, { "data-icon": "inline-start" }), "Add models"]
+          }) : null]
+        }) : groupedListed.map(([provider, models]) => /* @__PURE__ */ jsxs("div", {
+          className: "flex flex-col gap-1.5",
+          children: [/* @__PURE__ */ jsx("div", {
+            className: "px-1 text-xs font-medium text-muted-foreground",
+            children: providerLabel(provider)
+          }), models.map((model) => /* @__PURE__ */ jsx(ItemRow, {
+            icon: /* @__PURE__ */ jsx(ProviderBrandIcon, { provider: model.provider }),
+            title: model.name,
+            subtitle: `${providerLabel(model.provider)} \xB7 ${model.modelId}`,
+            trailing: /* @__PURE__ */ jsxs("div", {
+              className: "flex items-center",
+              children: [isDefaultModel(model) ? /* @__PURE__ */ jsx("span", {
+                className: "px-2 text-xs font-medium text-muted-foreground",
+                children: "Default"
+              }) : onSetDefaultModel ? /* @__PURE__ */ jsxs(Button, {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: cn(HIT_AREA_EXPAND_DENSE_CLASS, "h-7 px-2 text-xs text-muted-foreground transition-[background-color,color,transform] duration-150 active:scale-[0.96]"),
+                disabled: disabled2,
+                "aria-label": `Set ${model.name} as default`,
+                onClick: () => onSetDefaultModel(model),
+                children: [/* @__PURE__ */ jsx(Star, { "data-icon": "inline-start" }), "Set default"]
+              }) : null, /* @__PURE__ */ jsxs(Button, {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: cn(HIT_AREA_EXPAND_DENSE_CLASS, "h-7 px-2 text-xs text-muted-foreground transition-[background-color,color,transform] duration-150 hover:text-destructive active:scale-[0.96]"),
+                disabled: disabled2,
+                "aria-label": `Remove ${model.name}`,
+                onClick: () => onRemoveModel(model),
+                children: [/* @__PURE__ */ jsx(Trash2, { "data-icon": "inline-start" }), "Remove"]
+              })]
+            })
+          }, model.id))]
+        }, provider))
+      }),
+      /* @__PURE__ */ jsx(AddModelsDialog, {
+        open: addOpen,
+        configuredProviderIds,
+        discoverableProviderIds,
+        discoveringProviderId,
+        enabledModels: draft?.enabledModels,
+        modelOptions,
+        onAddModels,
+        onDiscoverProvider,
+        onOpenChange: setAddOpen,
+        providerLabel
+      })
+    ]
+  });
+}
+var THEME_OPTIONS = [
+  {
+    value: "system",
+    label: "System",
+    icon: Monitor
+  },
+  {
+    value: "light",
+    label: "Light",
+    icon: Sun
+  },
+  {
+    value: "dark",
+    label: "Dark",
+    icon: Moon
+  }
+];
+function PersonalizationSection({ onThemePreferenceChange, themePreference }) {
+  return /* @__PURE__ */ jsxs(Field, {
+    orientation: "horizontal",
+    className: "items-center justify-between gap-6 rounded-xl border p-4",
+    children: [/* @__PURE__ */ jsxs("div", {
+      className: "min-w-0",
+      children: [/* @__PURE__ */ jsx(FieldLabel, { children: "Theme" }), /* @__PURE__ */ jsx(FieldDescription, { children: "Match the system theme or pick light or dark." })]
+    }), /* @__PURE__ */ jsx("div", {
+      className: "shrink-0",
+      children: /* @__PURE__ */ jsx(Select, {
+        "aria-label": "Theme",
+        className: "w-[160px]",
+        onValueChange: (value) => onThemePreferenceChange(value),
+        options: [...THEME_OPTIONS],
+        value: themePreference
+      })
+    })]
+  });
+}
+function isFieldInvalid(value, attemptedSave, required = true) {
+  return attemptedSave && required && value.trim().length === 0;
+}
+function SecretCredentialField({ attemptedSave, label, onChange, onToggleVisibility, placeholder, required = true, showPassword, value }) {
+  const controlId = useId();
+  const invalid = isFieldInvalid(value, attemptedSave, required);
+  return /* @__PURE__ */ jsxs(Field, {
+    "data-invalid": invalid || void 0,
+    children: [/* @__PURE__ */ jsx(FieldLabel, {
+      htmlFor: controlId,
+      children: label
+    }), /* @__PURE__ */ jsxs(InputGroup, { children: [
+      /* @__PURE__ */ jsx(InputGroupAddon, {
+        align: "inline-start",
+        children: /* @__PURE__ */ jsx(Lock, {})
+      }),
+      /* @__PURE__ */ jsx(InputGroupInput, {
+        id: controlId,
+        type: showPassword ? "text" : "password",
+        placeholder,
+        value,
+        onChange: (event) => onChange(event.target.value),
+        "aria-label": label,
+        "aria-invalid": invalid || void 0
+      }),
+      /* @__PURE__ */ jsx(InputGroupAddon, {
+        align: "inline-end",
+        children: /* @__PURE__ */ jsx(InputGroupButton, {
+          size: "icon-xs",
+          className: cn(HIT_AREA_EXPAND_CLASS, "transition-[background-color,transform] duration-150 active:scale-[0.96]"),
+          "aria-label": showPassword ? "Hide value" : "Show value",
+          onClick: onToggleVisibility,
+          children: showPassword ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
+        })
+      })
+    ] })]
+  });
+}
+function TextCredentialField({ attemptedSave, icon: Icon, inputType = "text", label, onChange, placeholder, required = true, value }) {
+  const controlId = useId();
+  const invalid = isFieldInvalid(value, attemptedSave, required);
+  return /* @__PURE__ */ jsxs(Field, {
+    "data-invalid": invalid || void 0,
+    children: [/* @__PURE__ */ jsx(FieldLabel, {
+      htmlFor: controlId,
+      children: label
+    }), /* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(InputGroupAddon, {
+      align: "inline-start",
+      children: /* @__PURE__ */ jsx(Icon, {})
+    }), /* @__PURE__ */ jsx(InputGroupInput, {
+      id: controlId,
+      type: inputType,
+      placeholder,
+      value,
+      onChange: (event) => onChange(event.target.value),
+      "aria-label": label,
+      "aria-invalid": invalid || void 0
+    })] })]
+  });
+}
+var OPENAI_CHAT_BASE_URL_PLACEHOLDER = "https://opencode.ai/zen/v1";
+var OPENAI_CHAT_MODEL_PLACEHOLDER = "qwen35-122b-a10b";
+var OPENAI_CHAT_NAME_PLACEHOLDER = "e.g. OpenCode Zen, Nebius, Groq\u2026";
+var CUSTOM_MODELS_PLACEHOLDER = "model-a, model-b (comma-separated)";
+var CUSTOM_PROVIDER_API_OPTIONS = [
+  {
+    value: "openai-completions",
+    label: "OpenAI Chat Completions"
+  },
+  {
+    value: "openai-responses",
+    label: "OpenAI Responses"
+  },
+  {
+    value: "anthropic-messages",
+    label: "Anthropic Messages"
+  },
+  {
+    value: "google-genai",
+    label: "Google Generative AI"
+  }
+];
+function ProviderCredentialFields({ attemptedSave, apiKey, api, baseUrl, modelId, models, displayName, isCustom, onApiKeyChange, onApiChange, onBaseUrlChange, onModelIdChange, onModelsChange, onDisplayNameChange, onTogglePassword, openAiChat, placeholder, showPassword }) {
+  const showApiSelector = isCustom && onApiChange;
+  const showMultiModels = isCustom && onModelsChange;
+  return /* @__PURE__ */ jsxs(FieldGroup, {
+    className: "gap-2",
+    children: [
+      (openAiChat || isCustom) && onDisplayNameChange ? /* @__PURE__ */ jsx(TextCredentialField, {
+        attemptedSave,
+        icon: Tag,
+        label: "Provider name",
+        placeholder: OPENAI_CHAT_NAME_PLACEHOLDER,
+        value: displayName ?? "",
+        onChange: onDisplayNameChange
+      }) : null,
+      showApiSelector ? /* @__PURE__ */ jsx(ApiSelector, {
+        value: api ?? "openai-completions",
+        onChange: onApiChange
+      }) : null,
+      /* @__PURE__ */ jsx(SecretCredentialField, {
+        attemptedSave,
+        label: "API key",
+        placeholder,
+        value: apiKey,
+        showPassword,
+        onChange: onApiKeyChange,
+        onToggleVisibility: onTogglePassword
+      }),
+      openAiChat || isCustom ? /* @__PURE__ */ jsx(TextCredentialField, {
+        attemptedSave,
+        icon: Globe,
+        inputType: "url",
+        label: "Base URL",
+        placeholder: OPENAI_CHAT_BASE_URL_PLACEHOLDER,
+        value: baseUrl,
+        onChange: onBaseUrlChange
+      }) : null,
+      showMultiModels ? /* @__PURE__ */ jsx(TextCredentialField, {
+        attemptedSave,
+        icon: Layers,
+        label: "Model ids",
+        placeholder: CUSTOM_MODELS_PLACEHOLDER,
+        value: models ?? "",
+        onChange: onModelsChange
+      }) : null,
+      openAiChat && !showMultiModels ? /* @__PURE__ */ jsx(TextCredentialField, {
+        attemptedSave,
+        icon: Box,
+        label: "Model name",
+        placeholder: OPENAI_CHAT_MODEL_PLACEHOLDER,
+        value: modelId,
+        onChange: onModelIdChange
+      }) : null
+    ]
+  });
+}
+function ApiSelector({ value, onChange }) {
+  return /* @__PURE__ */ jsxs("div", {
+    className: "flex flex-col gap-1",
+    children: [/* @__PURE__ */ jsx("span", {
+      className: "text-xs font-medium text-muted-foreground",
+      children: "API family"
+    }), /* @__PURE__ */ jsx(Select, {
+      "aria-label": "API family",
+      value,
+      options: CUSTOM_PROVIDER_API_OPTIONS,
+      placeholder: "Select API family",
+      onValueChange: (next) => onChange(next)
+    })]
+  });
+}
+function isOAuthProvider(provider) {
+  return provider.authType === "oauth";
+}
+function supportsOAuth(provider) {
+  return provider.supportsOAuth === true;
+}
+var CUSTOM_PROVIDER_PICKER_ROW = {
+  id: "custom",
+  name: "Custom provider",
+  isConfigured: false,
+  envVarName: "CUSTOM_PROVIDER_API_KEY",
+  displayName: "Custom provider"
+};
+function parseCustomProviderModels(raw) {
+  return raw.split(",").map((entry) => entry.trim()).filter((entry) => entry.length > 0);
+}
+function useProviderCredentialsController({ onRemoveProvider, onUpdateProvider, providers }) {
+  const [editingProvider, setEditingProvider] = useState2(null);
+  const [editingIsNewOccInstance, setEditingIsNewOccInstance] = useState2(false);
+  const [apiKey, setApiKey] = useState2("");
+  const [baseUrl, setBaseUrl] = useState2("");
+  const [modelId, setModelId] = useState2("");
+  const [models, setModels] = useState2("");
+  const [api, setApi] = useState2("openai-completions");
+  const [displayName, setDisplayName] = useState2("");
+  const [showPassword, setShowPassword] = useState2(false);
+  const [attemptedSave, setAttemptedSave] = useState2(false);
+  const [searchQuery, setSearchQuery] = useState2("");
+  const [addPickerOpen, setAddPickerOpen] = useState2(false);
+  const [addPickerQuery, setAddPickerQuery] = useState2("");
+  const [confirmRemoveProvider, setConfirmRemoveProvider] = useState2(null);
+  const credentialProviders = useMemo2(() => {
+    return [...providers.filter((provider) => provider.id !== CUSTOM_PROVIDER_PICKER_ROW.id), CUSTOM_PROVIDER_PICKER_ROW];
+  }, [providers]);
+  const activeProviders = useMemo2(() => credentialProviders.filter((provider) => provider.isConfigured), [credentialProviders]);
+  const unconfiguredProviders = useMemo2(() => credentialProviders.filter((provider) => !provider.isConfigured || provider.id === "openai-chat-completions" && provider.providerFamily === void 0), [credentialProviders]);
+  const filteredActiveProviders = useMemo2(() => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) return activeProviders;
+    return activeProviders.filter((provider) => providerMatchesQuery(provider, query));
+  }, [activeProviders, searchQuery]);
+  const filteredPickerAvailable = useMemo2(() => {
+    const query = addPickerQuery.trim().toLowerCase();
+    return unconfiguredProviders.filter((provider) => providerMatchesQuery(provider, query));
+  }, [addPickerQuery, unconfiguredProviders]);
+  const filteredPickerConfigured = useMemo2(() => {
+    const query = addPickerQuery.trim().toLowerCase();
+    return activeProviders.filter((provider) => providerMatchesQuery(provider, query));
+  }, [activeProviders, addPickerQuery]);
+  const pickerHasResults = filteredPickerAvailable.length > 0 || filteredPickerConfigured.length > 0;
+  const editingUnconfiguredProvider = editingProvider && !activeProviders.some((provider) => provider.id === editingProvider) ? credentialProviders.find((entry) => entry.id === editingProvider) ?? null : null;
+  const resetEditor = () => {
+    setApiKey("");
+    setBaseUrl("");
+    setModelId("");
+    setModels("");
+    setApi("openai-completions");
+    setDisplayName("");
+    setShowPassword(false);
+    setAttemptedSave(false);
+  };
+  const closeEditor = () => {
+    setEditingProvider(null);
+    setEditingIsNewOccInstance(false);
+    resetEditor();
+  };
+  const openEditor = (providerId, opts) => {
+    setAddPickerOpen(false);
+    setAddPickerQuery("");
+    setEditingProvider(providerId);
+    setEditingIsNewOccInstance(opts?.newOccInstance === true);
+    resetEditor();
+    const existing = providers.find((provider) => provider.id === providerId);
+    setBaseUrl(existing?.baseUrl ?? "");
+    setDisplayName(existing?.displayName ?? (isCustomProviderId(providerId) ? existing?.name ?? "" : ""));
+    setApi(existing?.api ?? "openai-completions");
+    setModels((existing?.modelIds ?? []).join(", "));
+    setModelId(existing?.modelIds?.[0] ?? "");
+  };
+  const openAddPicker = () => {
+    closeEditor();
+    setAddPickerQuery("");
+    setAddPickerOpen(true);
+  };
+  const closeAddPicker = () => {
+    setAddPickerOpen(false);
+    setAddPickerQuery("");
+  };
+  const selectProviderFromPicker = (providerId) => {
+    openEditor(providerId, { newOccInstance: isOccProviderId(providerId) });
+  };
+  const handleSave = async (providerId) => {
+    if (!onUpdateProvider) return;
+    setAttemptedSave(true);
+    const isCustomEditor = providerId === "custom" || isCustomProviderId(providerId);
+    const openAiChat = isOccProviderId(providerId);
+    if (isCustomEditor) {
+      const modelList = parseCustomProviderModels(models);
+      if (!apiKey.trim() || !baseUrl.trim() || !displayName.trim()) return;
+      if (modelList.length === 0) return;
+      try {
+        await onUpdateProvider({
+          providerId,
+          apiKey: apiKey.trim(),
+          baseUrl: baseUrl.trim(),
+          displayName: displayName.trim(),
+          api,
+          models: modelList,
+          ...providerId === "custom" ? { createOccInstance: true } : {}
+        });
+        notify.success("Provider credentials applied to your active sessions.");
+        closeEditor();
+        closeAddPicker();
+      } catch (error) {
+        notify.error(error instanceof Error ? error.message : "Failed to update provider");
+      }
+      return;
+    }
+    const isNamedOcc = openAiChat && isNamedOccInstanceId(providerId);
+    const isOccLike = openAiChat && (isNamedOcc || editingIsNewOccInstance);
+    if (!apiKey.trim()) return;
+    if (openAiChat && (!baseUrl.trim() || !modelId.trim())) return;
+    if (isOccLike && !displayName.trim()) return;
+    try {
+      await onUpdateProvider({
+        providerId,
+        apiKey: apiKey.trim(),
+        ...openAiChat ? {
+          baseUrl: baseUrl.trim(),
+          modelId: modelId.trim(),
+          ...isOccLike ? { displayName: displayName.trim() } : {},
+          ...editingIsNewOccInstance ? { createOccInstance: true } : {}
+        } : {}
+      });
+      notify.success("Provider credentials applied to your active sessions.");
+      closeEditor();
+      closeAddPicker();
+    } catch (error) {
+      notify.error(error instanceof Error ? error.message : "Failed to update provider");
+    }
+  };
+  const handleRemove = async (provider) => {
+    if (!onRemoveProvider) return;
+    try {
+      await onRemoveProvider({ providerId: provider.id });
+      if (editingProvider === provider.id) closeEditor();
+      notify.success(`${provider.name} removed from your configured providers.`);
+      setConfirmRemoveProvider(null);
+    } catch (error) {
+      notify.error(error instanceof Error ? error.message : "Failed to remove provider");
+    }
+  };
+  return {
+    activeProviders,
+    addPickerOpen,
+    addPickerQuery,
+    api,
+    apiKey,
+    attemptedSave,
+    baseUrl,
+    canSave: useMemo2(() => {
+      if (apiKey.trim().length === 0) return false;
+      if (!editingProvider) return true;
+      if (editingProvider === "custom" || isCustomProviderId(editingProvider)) {
+        if (baseUrl.trim().length === 0) return false;
+        if (parseCustomProviderModels(models).length === 0) return false;
+        return displayName.trim().length > 0;
+      }
+      if (!isOccProviderId(editingProvider)) return true;
+      if (baseUrl.trim().length === 0 || modelId.trim().length === 0) return false;
+      if (isNamedOccInstanceId(editingProvider) || editingIsNewOccInstance) return displayName.trim().length > 0;
+      return true;
+    }, [
+      apiKey,
+      baseUrl,
+      modelId,
+      models,
+      displayName,
+      editingProvider,
+      editingIsNewOccInstance
+    ]),
+    closeAddPicker,
+    closeEditor,
+    confirmRemoveProvider,
+    credentialProviders,
+    displayName,
+    editingIsNewOccInstance,
+    editingProvider,
+    editingUnconfiguredProvider,
+    filteredActiveProviders,
+    filteredPickerAvailable,
+    filteredPickerConfigured,
+    handleRemove,
+    handleSave,
+    modelId,
+    models,
+    openAddPicker,
+    openEditor,
+    pickerHasResults,
+    resetEditor,
+    searchQuery,
+    selectProviderFromPicker,
+    setAddPickerOpen,
+    setAddPickerQuery,
+    setApi,
+    setApiKey,
+    setAttemptedSave,
+    setBaseUrl,
+    setConfirmRemoveProvider,
+    setDisplayName,
+    setEditingIsNewOccInstance,
+    setEditingProvider,
+    setModelId,
+    setModels,
+    setSearchQuery,
+    setShowPassword,
+    showPassword,
+    unconfiguredProviders
+  };
+}
+function providerMatchesQuery(provider, query) {
+  if (!query) return true;
+  const keywords = supportsOAuth(provider) ? isOAuthProvider(provider) ? "oauth sign-in login" : "api key oauth sign-in login" : provider.id === "custom" || isCustomProviderId(provider.id) ? "custom provider endpoint openai anthropic google compatible" : isOccProviderId(provider.id) ? "api key base url model name chat completions" : "";
+  return [
+    provider.name,
+    provider.envVarName,
+    provider.id,
+    keywords
+  ].join(" ").toLowerCase().includes(query);
+}
+function AddProviderPickerPanel({ addPickerQuery, credentialProvidersLength, filteredPickerAvailable, filteredPickerConfigured, pickerHasResults, onClose, onQueryChange, onSelect }) {
+  return /* @__PURE__ */ jsxs("div", {
+    className: "flex flex-col gap-3",
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/* @__PURE__ */ jsx(Button, {
           type: "button",
-          variant: "outline",
-          size: "sm",
-          disabled: disabled2,
-          onClick: openAddDialog,
-          children: [/* @__PURE__ */ jsx(Plus, { "data-icon": "inline-start" }), "Add models"]
+          variant: "ghost",
+          size: "icon-sm",
+          "aria-label": "Back to providers",
+          onClick: onClose,
+          children: /* @__PURE__ */ jsx(ArrowLeft, {})
+        }), /* @__PURE__ */ jsxs("div", {
+          className: "min-w-0 flex-1",
+          children: [/* @__PURE__ */ jsx("p", {
+            className: "text-sm font-medium",
+            children: "Add provider"
+          }), /* @__PURE__ */ jsx("p", {
+            className: "text-xs text-pretty text-muted-foreground",
+            children: "Choose a provider to store encrypted credentials for this account."
+          })]
         })]
       }),
+      /* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(InputGroupAddon, {
+        align: "inline-start",
+        children: /* @__PURE__ */ jsx(Search, {})
+      }), /* @__PURE__ */ jsx(InputGroupInput, {
+        type: "text",
+        placeholder: "Search providers\u2026",
+        value: addPickerQuery,
+        onChange: (event) => onQueryChange(event.target.value),
+        "aria-label": "Search providers to add"
+      })] }),
       /* @__PURE__ */ jsx("div", {
-        className: "flex flex-col gap-3",
-        "data-testid": "runtime-models-list",
-        children: emptyMessage ? /* @__PURE__ */ jsxs("div", {
-          className: "flex flex-col items-center gap-3 py-8",
-          children: [/* @__PURE__ */ jsx("p", {
-            className: "px-1 text-center text-xs text-pretty text-muted-foreground",
-            children: emptyMessage
-          }), !normalizedFilter ? /* @__PURE__ */ jsxs(Button, {
-            type: "button",
-            variant: "outline",
-            size: "sm",
-            disabled: disabled2,
-            onClick: openAddDialog,
-            children: [/* @__PURE__ */ jsx(Plus, { "data-icon": "inline-start" }), "Add models"]
+        className: "max-h-[min(24rem,50vh)] overflow-y-auto",
+        children: !pickerHasResults ? /* @__PURE__ */ jsx("p", {
+          className: "py-6 text-center text-xs text-pretty text-muted-foreground",
+          children: credentialProvidersLength === 0 ? "No providers available." : "No matching providers found."
+        }) : /* @__PURE__ */ jsxs("div", {
+          className: "flex flex-col gap-3",
+          children: [filteredPickerAvailable.length > 0 ? /* @__PURE__ */ jsx("div", {
+            className: "flex flex-col gap-1",
+            children: filteredPickerAvailable.map((provider) => /* @__PURE__ */ jsx(ProviderPickerRow, {
+              provider,
+              configured: false,
+              onSelect: () => onSelect(provider.id)
+            }, provider.id))
+          }) : null, filteredPickerConfigured.length > 0 ? /* @__PURE__ */ jsxs("div", {
+            className: "flex flex-col gap-1",
+            children: [filteredPickerAvailable.length > 0 ? /* @__PURE__ */ jsx("p", {
+              className: "px-2 pt-1 text-[0.6875rem] font-medium tracking-wide text-muted-foreground uppercase",
+              children: "Already configured"
+            }) : null, filteredPickerConfigured.map((provider) => /* @__PURE__ */ jsx(ProviderPickerRow, {
+              provider,
+              configured: true,
+              onSelect: () => onSelect(provider.id)
+            }, provider.id))]
           }) : null]
-        }) : groupedListed.map(([provider, models]) => /* @__PURE__ */ jsxs("div", {
-          className: "flex flex-col gap-1.5",
-          children: [/* @__PURE__ */ jsx("div", {
-            className: "px-1 text-xs font-medium text-muted-foreground",
-            children: providerLabel(provider)
-          }), models.map((model) => /* @__PURE__ */ jsx(ItemRow, {
-            icon: /* @__PURE__ */ jsx(ProviderBrandIcon, { provider: model.provider }),
-            title: model.name,
-            subtitle: `${providerLabel(model.provider)} \xB7 ${model.modelId}`,
-            trailing: /* @__PURE__ */ jsxs("div", {
-              className: "flex items-center",
-              children: [isDefaultModel(model) ? /* @__PURE__ */ jsx("span", {
-                className: "px-2 text-xs font-medium text-muted-foreground",
-                children: "Default"
-              }) : onSetDefaultModel ? /* @__PURE__ */ jsxs(Button, {
-                type: "button",
-                variant: "ghost",
-                size: "sm",
-                className: cn(HIT_AREA_EXPAND_DENSE_CLASS, "h-7 px-2 text-xs text-muted-foreground transition-[background-color,color,transform] duration-150 active:scale-[0.96]"),
-                disabled: disabled2,
-                "aria-label": `Set ${model.name} as default`,
-                onClick: () => onSetDefaultModel(model),
-                children: [/* @__PURE__ */ jsx(Star, { "data-icon": "inline-start" }), "Set default"]
-              }) : null, /* @__PURE__ */ jsxs(Button, {
-                type: "button",
-                variant: "ghost",
-                size: "sm",
-                className: cn(HIT_AREA_EXPAND_DENSE_CLASS, "h-7 px-2 text-xs text-muted-foreground transition-[background-color,color,transform] duration-150 hover:text-destructive active:scale-[0.96]"),
-                disabled: disabled2,
-                "aria-label": `Remove ${model.name}`,
-                onClick: () => onRemoveModel(model),
-                children: [/* @__PURE__ */ jsx(Trash2, { "data-icon": "inline-start" }), "Remove"]
-              })]
-            })
-          }, model.id))]
-        }, provider))
-      }),
-      /* @__PURE__ */ jsx(AddModelsDialog, {
-        open: addOpen,
-        configuredProviderIds,
-        discoverableProviderIds,
-        discoveringProviderId,
-        enabledModels: draft?.enabledModels,
-        modelOptions,
-        onAddModels,
-        onDiscoverProvider,
-        onOpenChange: setAddOpen,
-        providerLabel
+        })
       })
     ]
   });
 }
-var TRANSPORT_OPTIONS = [
-  {
-    value: "auto",
-    label: "Auto"
-  },
-  {
-    value: "sse",
-    label: "SSE"
-  },
-  {
-    value: "websocket",
-    label: "WebSocket"
-  }
-];
-var DELIVERY_OPTIONS = [{
-  value: "all",
-  label: "All"
-}, {
-  value: "one-at-a-time",
-  label: "One at a time"
-}];
-function HarnessRuntimeSection({ draft, updateDraft }) {
-  const disabled2 = !draft;
+function AddProviderOAuthPanel({ onBack, onConfigured, onOAuthLogin, provider }) {
   return /* @__PURE__ */ jsxs("div", {
-    className: "flex flex-col gap-2",
+    className: "flex flex-col gap-3",
+    children: [/* @__PURE__ */ jsxs("div", {
+      className: "flex items-center gap-2",
+      children: [/* @__PURE__ */ jsx(Button, {
+        type: "button",
+        variant: "ghost",
+        size: "icon-sm",
+        "aria-label": "Back to provider list",
+        onClick: onBack,
+        children: /* @__PURE__ */ jsx(ArrowLeft, {})
+      }), /* @__PURE__ */ jsxs("div", {
+        className: "min-w-0 flex-1",
+        children: [/* @__PURE__ */ jsxs("p", {
+          className: "text-sm font-medium",
+          children: ["Configure ", provider.name]
+        }), /* @__PURE__ */ jsx("p", {
+          className: "text-xs text-pretty text-muted-foreground",
+          children: "OAuth sign-in. Credentials are stored in auth.json for this account."
+        })]
+      })]
+    }), /* @__PURE__ */ jsx(ProviderOAuthSignIn, {
+      provider,
+      onConfigured,
+      onOAuthLogin
+    }, provider.id)]
+  });
+}
+function AddProviderEditorPanel({ provider, api, apiKey, baseUrl, modelId, models, displayName, showPassword, attemptedSave, isPending, canSave, onApiKeyChange, onApiChange, onBaseUrlChange, onModelIdChange, onModelsChange, onDisplayNameChange, onTogglePassword, onBack, onCancel, onConfigured, onOAuthLogin, onSave }) {
+  const isCustomTemplate = provider.id === "custom" || isCustomProviderId(provider.id);
+  const meta = PROVIDER_METADATA[provider.id] ?? (isCustomTemplate ? PROVIDER_METADATA["custom"] : {
+    placeholder: "Enter credentials\u2026",
+    help: "Stored securely in your local environment overrides."
+  });
+  const openAiChat = isOccProviderId(provider.id) && !isCustomTemplate;
+  const oauthAvailable = supportsOAuth(provider);
+  return /* @__PURE__ */ jsxs("div", {
+    className: "flex flex-col gap-3",
     children: [
-      /* @__PURE__ */ jsx(ItemRow, {
-        title: "Compaction",
-        subtitle: "Summarize old turns when context fills up",
-        trailing: /* @__PURE__ */ jsx(Switch, {
-          "aria-label": "Compaction",
-          checked: draft?.compaction.enabled ?? false,
-          disabled: disabled2,
-          onCheckedChange: (enabled) => updateDraft((current) => ({
-            ...current,
-            compaction: {
-              ...current.compaction,
-              enabled
-            }
-          }))
-        })
-      }),
-      /* @__PURE__ */ jsx(ItemRow, {
-        title: "Auto-retry",
-        subtitle: "Retry failed provider requests",
-        trailing: /* @__PURE__ */ jsx(Switch, {
-          "aria-label": "Auto-retry",
-          checked: draft?.retry.enabled ?? false,
-          disabled: disabled2,
-          onCheckedChange: (enabled) => updateDraft((current) => ({
-            ...current,
-            retry: {
-              ...current.retry,
-              enabled
-            }
-          }))
-        })
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/* @__PURE__ */ jsx(Button, {
+          type: "button",
+          variant: "ghost",
+          size: "icon-sm",
+          "aria-label": "Back to provider list",
+          onClick: onBack,
+          children: /* @__PURE__ */ jsx(ArrowLeft, {})
+        }), /* @__PURE__ */ jsxs("div", {
+          className: "min-w-0 flex-1",
+          children: [/* @__PURE__ */ jsxs("p", {
+            className: "text-sm font-medium",
+            children: ["Configure ", provider.name]
+          }), /* @__PURE__ */ jsx("p", {
+            className: "text-xs text-pretty text-muted-foreground",
+            children: isCustomTemplate ? "Name this custom provider, pick its API family, then enter its API key, https base URL, and model ids." : openAiChat ? "Name this OpenAI-compatible provider, then enter its API key, base URL, and model name." : `Stored as ${provider.envVarName} for this account.`
+          })]
+        })]
       }),
-      /* @__PURE__ */ jsx(ItemRow, {
-        title: "Transport",
-        trailing: /* @__PURE__ */ jsx(Select, {
-          "aria-label": "Transport",
-          className: "w-[160px]",
-          disabled: disabled2,
-          onValueChange: (value) => updateDraft((current) => ({
-            ...current,
-            transport: value
-          })),
-          options: [...TRANSPORT_OPTIONS],
-          value: draft?.transport ?? "auto"
-        })
+      /* @__PURE__ */ jsx(ProviderCredentialFields, {
+        attemptedSave,
+        api,
+        apiKey,
+        baseUrl,
+        modelId,
+        models,
+        displayName,
+        isCustom: isCustomTemplate,
+        openAiChat,
+        placeholder: meta.placeholder,
+        showPassword,
+        onApiKeyChange,
+        onApiChange,
+        onBaseUrlChange,
+        onModelIdChange,
+        onModelsChange,
+        onDisplayNameChange,
+        onTogglePassword
       }),
-      /* @__PURE__ */ jsx(ItemRow, {
-        title: "Steering",
-        subtitle: "How queued steers are delivered mid-turn",
-        trailing: /* @__PURE__ */ jsx(Select, {
-          "aria-label": "Steering",
-          className: "w-[160px]",
-          disabled: disabled2,
-          onValueChange: (value) => updateDraft((current) => ({
-            ...current,
-            steeringMode: value
-          })),
-          options: [...DELIVERY_OPTIONS],
-          value: draft?.steeringMode ?? "all"
-        })
+      /* @__PURE__ */ jsxs(Alert, {
+        className: "px-3 py-2",
+        children: [/* @__PURE__ */ jsx(Info, {}), /* @__PURE__ */ jsx(AlertDescription, {
+          className: "text-xs text-pretty",
+          children: meta.help
+        })]
       }),
-      /* @__PURE__ */ jsx(ItemRow, {
-        title: "Follow-up",
-        subtitle: "How queued follow-ups run after the turn",
-        trailing: /* @__PURE__ */ jsx(Select, {
-          "aria-label": "Follow-up",
-          className: "w-[160px]",
-          disabled: disabled2,
-          onValueChange: (value) => updateDraft((current) => ({
-            ...current,
-            followUpMode: value
-          })),
-          options: [...DELIVERY_OPTIONS],
-          value: draft?.followUpMode ?? "all"
-        })
-      })
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center justify-end gap-1.5",
+        children: [/* @__PURE__ */ jsx(Button, {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          onClick: onCancel,
+          children: "Cancel"
+        }), /* @__PURE__ */ jsxs(Button, {
+          type: "button",
+          size: "sm",
+          disabled: isPending || !canSave,
+          onClick: onSave,
+          children: [isPending ? /* @__PURE__ */ jsx(Spinner, { "data-icon": "inline-start" }) : null, "Save"]
+        })]
+      }),
+      oauthAvailable ? /* @__PURE__ */ jsx(ProviderOAuthSignIn, {
+        provider,
+        onConfigured: onConfigured ?? onCancel,
+        onOAuthLogin
+      }, `${provider.id}-oauth`) : null
     ]
   });
 }
+function RemoveProviderConfirmDialog({ confirmRemoveProvider, isPending, onClose, onConfirm }) {
+  return /* @__PURE__ */ jsx(AlertDialog, {
+    open: confirmRemoveProvider !== null,
+    onOpenChange: (open) => {
+      if (!open) onClose();
+    },
+    children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs("div", {
+      className: "flex flex-col gap-2",
+      children: [/* @__PURE__ */ jsxs(AlertDialogTitle, { children: [
+        "Remove ",
+        confirmRemoveProvider?.name ?? "provider",
+        "?"
+      ] }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "This clears stored credentials for this provider from your workspace settings. Active sessions will stop using it immediately." })]
+    }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, {
+      disabled: isPending,
+      children: "Cancel"
+    }), /* @__PURE__ */ jsxs(AlertDialogAction, {
+      disabled: isPending || !confirmRemoveProvider,
+      onClick: () => {
+        if (confirmRemoveProvider) onConfirm(confirmRemoveProvider);
+      },
+      children: [isPending ? /* @__PURE__ */ jsx(Spinner, { "data-icon": "inline-start" }) : null, "Remove provider"]
+    })] })] })
+  });
+}
+function ProviderPickerRow({ configured, onSelect, provider }) {
+  const openAiChat = isOccProviderId(provider.id);
+  const isCustomTemplate = provider.id === "custom" || isCustomProviderId(provider.id);
+  const oauthOnly = isOAuthProvider(provider);
+  const oauthAvailable = supportsOAuth(provider);
+  return /* @__PURE__ */ jsxs("button", {
+    type: "button",
+    className: cn("flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition-[background-color,transform] duration-150", "hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none active:scale-[0.96]"),
+    onClick: onSelect,
+    children: [/* @__PURE__ */ jsx("div", {
+      className: "flex size-8 shrink-0 items-center justify-center rounded-[4px] border border-border/40 bg-background/60",
+      children: /* @__PURE__ */ jsx(ProviderBrandIcon, {
+        provider: isCustomTemplate ? "custom" : provider.id,
+        api: provider.api,
+        className: "text-foreground/70"
+      })
+    }), /* @__PURE__ */ jsxs("div", {
+      className: "min-w-0 flex-1",
+      children: [/* @__PURE__ */ jsx("div", {
+        className: "truncate text-sm font-medium",
+        children: provider.name
+      }), /* @__PURE__ */ jsxs("div", {
+        className: "truncate text-xs text-muted-foreground",
+        children: [oauthOnly ? "OAuth sign-in" : oauthAvailable ? "API key or OAuth" : isCustomTemplate ? "API family + key + https base URL + models" : openAiChat ? "API key + base URL + model name" : provider.envVarName, configured ? " \xB7 Update" : ""]
+      })]
+    })]
+  });
+}
+function ActiveProviderList({ providers, editingProvider, form, operation, actions, onEdit, onCancelEdit, onSave, onRemove, onOAuthLogin, onConfigured }) {
+  const { api, apiKey, baseUrl, modelId, models, displayName, showPassword, attemptedSave, canSave } = form;
+  const { isPending, canRemove } = operation;
+  const { onApiKeyChange, onApiChange, onBaseUrlChange, onModelIdChange, onModelsChange, onDisplayNameChange, onTogglePassword } = actions;
+  return /* @__PURE__ */ jsx("div", {
+    className: "flex flex-col gap-1.5",
+    children: providers.map((provider) => {
+      const isEditing = editingProvider === provider.id;
+      const isCustom = isCustomProviderId(provider.id);
+      const meta = PROVIDER_METADATA[provider.id] ?? PROVIDER_METADATA[isCustom ? "custom" : "openai-chat-completions"];
+      const openAiChat = isOccProviderId(provider.id);
+      const oauthOnly = isOAuthProvider(provider);
+      const oauthAvailable = supportsOAuth(provider);
+      return /* @__PURE__ */ jsxs("div", {
+        className: "flex flex-col",
+        children: [/* @__PURE__ */ jsx(ItemRow, {
+          interactive: false,
+          icon: /* @__PURE__ */ jsx(ProviderBrandIcon, {
+            provider: provider.id,
+            api: provider.api,
+            className: "text-foreground/80"
+          }),
+          title: provider.name,
+          subtitle: oauthOnly ? "OAuth sign-in" : oauthAvailable ? "API key or OAuth" : isCustom ? "Custom provider \xB7 API key + base URL + models" : openAiChat ? "OpenAI-compatible \xB7 API key + base URL + model name" : provider.envVarName,
+          trailing: /* @__PURE__ */ jsxs("div", {
+            className: "flex items-center gap-0.5",
+            children: [/* @__PURE__ */ jsxs(Button, {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: cn(HIT_AREA_EXPAND_DENSE_CLASS, "h-7 px-2 text-xs text-muted-foreground transition-[background-color,color,transform] duration-150 hover:text-destructive active:scale-[0.96]"),
+              disabled: isPending || !canRemove,
+              "aria-label": `Remove ${provider.name}`,
+              onClick: () => onRemove(provider),
+              children: [/* @__PURE__ */ jsx(Trash2, { "data-icon": "inline-start" }), "Remove"]
+            }), /* @__PURE__ */ jsxs(Button, {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: cn(HIT_AREA_EXPAND_DENSE_CLASS, "h-7 px-2 text-xs transition-[background-color,transform] duration-150 active:scale-[0.96]"),
+              disabled: isPending,
+              onClick: () => {
+                if (isEditing) {
+                  onCancelEdit();
+                  return;
+                }
+                onEdit(provider.id);
+              },
+              children: [!isEditing ? /* @__PURE__ */ jsx(Pencil, { "data-icon": "inline-start" }) : null, isEditing ? "Cancel" : "Update"]
+            })]
+          })
+        }), isEditing ? /* @__PURE__ */ jsx(RowSurface, {
+          tone: "inset",
+          padding: "md",
+          className: "flex flex-col gap-2 border-t border-border/30",
+          children: oauthOnly ? /* @__PURE__ */ jsx(ProviderOAuthSignIn, {
+            provider,
+            onConfigured,
+            onOAuthLogin
+          }, provider.id) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            /* @__PURE__ */ jsx(ProviderCredentialFields, {
+              attemptedSave,
+              api: provider.api ?? api,
+              apiKey,
+              baseUrl,
+              modelId,
+              models,
+              displayName,
+              isCustom,
+              openAiChat,
+              placeholder: meta.placeholder,
+              showPassword,
+              onApiKeyChange,
+              onApiChange,
+              onBaseUrlChange,
+              onModelIdChange,
+              onModelsChange,
+              onDisplayNameChange: isCustom || provider.providerFamily !== void 0 ? onDisplayNameChange : void 0,
+              onTogglePassword
+            }),
+            /* @__PURE__ */ jsxs(Alert, {
+              className: "px-3 py-2",
+              children: [/* @__PURE__ */ jsx(Info, {}), /* @__PURE__ */ jsx(AlertDescription, {
+                className: "text-xs text-pretty",
+                children: meta.help
+              })]
+            }),
+            /* @__PURE__ */ jsx("div", {
+              className: "flex items-center justify-end",
+              children: /* @__PURE__ */ jsxs(Button, {
+                type: "button",
+                size: "sm",
+                disabled: isPending || !canSave,
+                onClick: () => onSave(provider.id),
+                children: [isPending ? /* @__PURE__ */ jsx(Spinner, { "data-icon": "inline-start" }) : null, "Save"]
+              })
+            }),
+            oauthAvailable ? /* @__PURE__ */ jsx(ProviderOAuthSignIn, {
+              provider,
+              onConfigured,
+              onOAuthLogin
+            }, `${provider.id}-oauth`) : null
+          ] })
+        }) : null]
+      }, provider.id);
+    })
+  });
+}
+function ProviderCredentialsSection({ isLoading, isPending, onOAuthLogin, onRemoveProvider, onUpdateProvider, providers }) {
+  const { activeProviders, addPickerOpen, addPickerQuery, api, apiKey, attemptedSave, baseUrl, canSave, closeAddPicker, closeEditor, confirmRemoveProvider, credentialProviders, displayName, editingProvider, editingUnconfiguredProvider, filteredActiveProviders, filteredPickerAvailable, filteredPickerConfigured, handleRemove, handleSave, modelId, models, openAddPicker, openEditor, pickerHasResults, searchQuery, selectProviderFromPicker, setAddPickerQuery, setApi, setApiKey, setBaseUrl, setConfirmRemoveProvider, setDisplayName, setModelId, setModels, setSearchQuery, setShowPassword, showPassword } = useProviderCredentialsController({
+    onRemoveProvider,
+    onUpdateProvider,
+    providers
+  });
+  const form = {
+    api,
+    apiKey,
+    baseUrl,
+    modelId,
+    models,
+    displayName,
+    showPassword,
+    attemptedSave,
+    canSave
+  };
+  const operation = {
+    isPending,
+    canRemove: Boolean(onRemoveProvider)
+  };
+  const actions = {
+    onApiKeyChange: setApiKey,
+    onApiChange: setApi,
+    onBaseUrlChange: setBaseUrl,
+    onModelIdChange: setModelId,
+    onModelsChange: setModels,
+    onDisplayNameChange: setDisplayName,
+    onTogglePassword: () => setShowPassword((current) => !current)
+  };
+  return /* @__PURE__ */ jsxs(SettingsPane, {
+    title: "Providers",
+    description: "Locally, API keys are stored in `.env.local`. When deployed, they are stored encrypted in your account.",
+    children: [addPickerOpen ? /* @__PURE__ */ jsx(AddProviderPickerPanel, {
+      addPickerQuery,
+      credentialProvidersLength: credentialProviders.length,
+      filteredPickerAvailable,
+      filteredPickerConfigured,
+      pickerHasResults,
+      onClose: closeAddPicker,
+      onQueryChange: setAddPickerQuery,
+      onSelect: selectProviderFromPicker
+    }) : editingUnconfiguredProvider && isOAuthProvider(editingUnconfiguredProvider) ? /* @__PURE__ */ jsx(AddProviderOAuthPanel, {
+      provider: editingUnconfiguredProvider,
+      onBack: openAddPicker,
+      onConfigured: closeEditor,
+      onOAuthLogin
+    }, editingUnconfiguredProvider.id) : editingUnconfiguredProvider ? /* @__PURE__ */ jsx(AddProviderEditorPanel, {
+      provider: editingUnconfiguredProvider,
+      api,
+      apiKey,
+      baseUrl,
+      modelId,
+      models,
+      displayName,
+      showPassword,
+      attemptedSave,
+      isPending,
+      canSave,
+      onApiKeyChange: setApiKey,
+      onApiChange: setApi,
+      onBaseUrlChange: setBaseUrl,
+      onModelIdChange: setModelId,
+      onModelsChange: setModels,
+      onDisplayNameChange: setDisplayName,
+      onTogglePassword: () => setShowPassword((current) => !current),
+      onBack: openAddPicker,
+      onCancel: closeEditor,
+      onConfigured: closeEditor,
+      onOAuthLogin,
+      onSave: () => {
+        if (editingProvider) handleSave(editingProvider);
+      }
+    }) : /* @__PURE__ */ jsxs("div", {
+      className: "flex flex-col gap-3",
+      children: [/* @__PURE__ */ jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/* @__PURE__ */ jsxs(InputGroup, {
+          className: "flex-1",
+          children: [/* @__PURE__ */ jsx(InputGroupAddon, {
+            align: "inline-start",
+            children: /* @__PURE__ */ jsx(Search, {})
+          }), /* @__PURE__ */ jsx(InputGroupInput, {
+            type: "text",
+            placeholder: "Search credentials\u2026",
+            value: searchQuery,
+            onChange: (event) => setSearchQuery(event.target.value),
+            "aria-label": "Search credentials",
+            disabled: isLoading || activeProviders.length === 0
+          })]
+        }), /* @__PURE__ */ jsxs(Button, {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          disabled: isLoading || credentialProviders.length === 0,
+          onClick: openAddPicker,
+          children: [/* @__PURE__ */ jsx(Plus, { "data-icon": "inline-start" }), "Add provider"]
+        })]
+      }), isLoading ? /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center justify-center gap-2 py-6 text-xs text-muted-foreground",
+        children: [/* @__PURE__ */ jsx(Spinner, { className: "size-3" }), /* @__PURE__ */ jsx("span", { children: "Loading\u2026" })]
+      }) : activeProviders.length === 0 ? /* @__PURE__ */ jsxs("div", {
+        className: "flex flex-col items-center gap-3 py-8",
+        children: [/* @__PURE__ */ jsx("p", {
+          className: "text-center text-xs text-pretty text-muted-foreground",
+          children: "No providers configured"
+        }), /* @__PURE__ */ jsxs(Button, {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          disabled: credentialProviders.length === 0,
+          onClick: openAddPicker,
+          children: [/* @__PURE__ */ jsx(Plus, { "data-icon": "inline-start" }), "Add provider"]
+        })]
+      }) : filteredActiveProviders.length === 0 ? /* @__PURE__ */ jsx("p", {
+        className: "py-6 text-center text-xs text-pretty text-muted-foreground",
+        children: "No matching providers found."
+      }) : /* @__PURE__ */ jsx(ActiveProviderList, {
+        providers: filteredActiveProviders,
+        editingProvider,
+        form,
+        operation,
+        actions,
+        onEdit: openEditor,
+        onCancelEdit: closeEditor,
+        onSave: (providerId) => void handleSave(providerId),
+        onRemove: setConfirmRemoveProvider,
+        onOAuthLogin,
+        onConfigured: closeEditor
+      })]
+    }), /* @__PURE__ */ jsx(RemoveProviderConfirmDialog, {
+      confirmRemoveProvider,
+      isPending,
+      onClose: () => setConfirmRemoveProvider(null),
+      onConfirm: (provider) => {
+        handleRemove(provider);
+      }
+    })]
+  });
+}
 var PROVENANCE_SOURCES = /* @__PURE__ */ new Set([
   "auto",
   "global",
@@ -4163,6 +4349,111 @@ function CatalogValueList({ addLabel, catalog, onChange, placeholder, values })
     })] })]
   });
 }
+var TRANSPORT_OPTIONS = [
+  {
+    value: "auto",
+    label: "Auto"
+  },
+  {
+    value: "sse",
+    label: "SSE"
+  },
+  {
+    value: "websocket",
+    label: "WebSocket"
+  }
+];
+var DELIVERY_OPTIONS = [{
+  value: "all",
+  label: "All"
+}, {
+  value: "one-at-a-time",
+  label: "One at a time"
+}];
+function HarnessRuntimeSection({ draft, updateDraft }) {
+  const disabled2 = !draft;
+  return /* @__PURE__ */ jsxs("div", {
+    className: "flex flex-col gap-2",
+    children: [
+      /* @__PURE__ */ jsx(ItemRow, {
+        title: "Compaction",
+        subtitle: "Summarize old turns when context fills up",
+        trailing: /* @__PURE__ */ jsx(Switch, {
+          "aria-label": "Compaction",
+          checked: draft?.compaction.enabled ?? false,
+          disabled: disabled2,
+          onCheckedChange: (enabled) => updateDraft((current) => ({
+            ...current,
+            compaction: {
+              ...current.compaction,
+              enabled
+            }
+          }))
+        })
+      }),
+      /* @__PURE__ */ jsx(ItemRow, {
+        title: "Auto-retry",
+        subtitle: "Retry failed provider requests",
+        trailing: /* @__PURE__ */ jsx(Switch, {
+          "aria-label": "Auto-retry",
+          checked: draft?.retry.enabled ?? false,
+          disabled: disabled2,
+          onCheckedChange: (enabled) => updateDraft((current) => ({
+            ...current,
+            retry: {
+              ...current.retry,
+              enabled
+            }
+          }))
+        })
+      }),
+      /* @__PURE__ */ jsx(ItemRow, {
+        title: "Transport",
+        trailing: /* @__PURE__ */ jsx(Select, {
+          "aria-label": "Transport",
+          className: "w-[160px]",
+          disabled: disabled2,
+          onValueChange: (value) => updateDraft((current) => ({
+            ...current,
+            transport: value
+          })),
+          options: [...TRANSPORT_OPTIONS],
+          value: draft?.transport ?? "auto"
+        })
+      }),
+      /* @__PURE__ */ jsx(ItemRow, {
+        title: "Steering",
+        subtitle: "How queued steers are delivered mid-turn",
+        trailing: /* @__PURE__ */ jsx(Select, {
+          "aria-label": "Steering",
+          className: "w-[160px]",
+          disabled: disabled2,
+          onValueChange: (value) => updateDraft((current) => ({
+            ...current,
+            steeringMode: value
+          })),
+          options: [...DELIVERY_OPTIONS],
+          value: draft?.steeringMode ?? "all"
+        })
+      }),
+      /* @__PURE__ */ jsx(ItemRow, {
+        title: "Follow-up",
+        subtitle: "How queued follow-ups run after the turn",
+        trailing: /* @__PURE__ */ jsx(Select, {
+          "aria-label": "Follow-up",
+          className: "w-[160px]",
+          disabled: disabled2,
+          onValueChange: (value) => updateDraft((current) => ({
+            ...current,
+            followUpMode: value
+          })),
+          options: [...DELIVERY_OPTIONS],
+          value: draft?.followUpMode ?? "all"
+        })
+      })
+    ]
+  });
+}
 function ResourcesSection({ draft, onEnableSkillCommandsChange, onExtensionsChange, onPackageRowsChange, onPromptsChange, onRevert, onSave, onSkillsChange, onThemesChange, packageError, packageRows, resourceDirty, resources, resourceSummary, saving, scope = "harness", settingsLoading, updateDraft }) {
   const disabled2 = !draft || settingsLoading || !!packageError;
   const catalogSubtitle = resourceSummary.total === 0 ? "Empty" : resourceSummary.reloadRequired > 0 ? `${resourceSummary.total} \xB7 ${resourceSummary.reloadRequired} reload` : `${resourceSummary.total}`;
@@ -4679,6 +4970,14 @@ var SETTINGS_SECTION_REGISTRY = {
     icon: MessageSquare,
     group: "workspace"
   },
+  mcp: {
+    id: "mcp",
+    order: 25,
+    title: "MCP",
+    ariaLabel: "MCP connection settings",
+    icon: Plug,
+    group: "workspace"
+  },
   sandbox: {
     id: "sandbox",
     order: 30,
@@ -4768,7 +5067,7 @@ function PreferenceRow({ children, description, label }) {
   });
 }
 function useSettingsForm() {
-  const { isLoadingProviders, isUpdatingProvider, modelCatalog, onDiscoverModels, onOAuthLogin, onRemoveProvider, onThemePreferenceChange, onUpdateProvider, providers = [], saveSettings, settings, settingsLoading, themePreference } = useSettingsActionsContext();
+  const { isLoadingMcp, isLoadingProviders, isUpdatingMcp, isUpdatingProvider, mcpConnections = [], modelCatalog, onDiscoverModels, onMcpOAuth, onOAuthLogin, onRemoveMcp, onRemoveProvider, onThemePreferenceChange, onUpdateMcp, onUpdateProvider, providers = [], saveSettings, settings, settingsLoading, themePreference } = useSettingsActionsContext();
   const { models, resources } = useChatPanelDataContext();
   const [draft, setDraft] = useState2(null);
   const [savingSection, setSavingSection] = useState2(null);
@@ -4832,11 +5131,17 @@ function useSettingsForm() {
     return "close";
   };
   return {
+    isLoadingMcp,
     isLoadingProviders,
+    isUpdatingMcp,
     isUpdatingProvider,
-    onThemePreferenceChange,
+    mcpConnections,
+    onMcpOAuth,
     onOAuthLogin,
+    onRemoveMcp,
     onRemoveProvider,
+    onThemePreferenceChange,
+    onUpdateMcp,
     onUpdateProvider,
     providers,
     resources,
@@ -4907,7 +5212,7 @@ function SettingsDialogSession({ initialTab, onOpenChange, open }) {
   });
 }
 function SettingsDialogPaneContent({ activeTab, form, preferences, updatePreference }) {
-  const { isLoadingProviders, isUpdatingProvider, onThemePreferenceChange, onOAuthLogin, onRemoveProvider, onUpdateProvider, providers, resources, settingsLoading, themePreference, draft, savingSection, packageRows, packageError, modelFilter, setModelFilter, resourceSummary, modelOptions, modelDirty, resourceDirty, revertResourceDraft, revertModelDraft, updateDraft, handlePackageRowsChange, addModels, removeModel, setDefaultModel, discoverProvider, discoveringProviderId, saveSection } = form;
+  const { isLoadingMcp, isLoadingProviders, isUpdatingMcp, isUpdatingProvider, mcpConnections, onMcpOAuth, onOAuthLogin, onRemoveMcp, onRemoveProvider, onThemePreferenceChange, onUpdateMcp, onUpdateProvider, providers, resources, settingsLoading, themePreference, draft, savingSection, packageRows, packageError, modelFilter, setModelFilter, resourceSummary, modelOptions, modelDirty, resourceDirty, revertResourceDraft, revertModelDraft, updateDraft, handlePackageRowsChange, addModels, removeModel, setDefaultModel, discoverProvider, discoveringProviderId, saveSection } = form;
   const resourcesPane = (scope) => /* @__PURE__ */ jsx(ResourcesSection, {
     scope,
     draft,
@@ -5017,6 +5322,14 @@ function SettingsDialogPaneContent({ activeTab, form, preferences, updatePrefere
         })
       })]
     }),
+    mcp: () => /* @__PURE__ */ jsx(McpConnectionsSection, {
+      connections: mcpConnections,
+      isLoading: isLoadingMcp ?? false,
+      isPending: isUpdatingMcp ?? false,
+      onOAuth: onMcpOAuth,
+      onRemove: onRemoveMcp,
+      onUpsert: onUpdateMcp
+    }),
     sandbox: () => /* @__PURE__ */ jsx(SandboxProviderSection, {
       isLoading: isLoadingProviders ?? false,
       isPending: isUpdatingProvider ?? false,