@qredence/fleet 0.5.10 → 0.6.0

package/dist/web/server/{settings-dialog-CxHe8nym-KKXDPTIW.js → settings-dialog-DndPbM-v-RFNXXEAN.js}

@@ -12,7 +12,6 @@ import {
   HIT_AREA_EXPAND_CLASS,
   HIT_AREA_EXPAND_DENSE_CLASS,
   PROVIDER_METADATA,
-  Pencil,
   ProviderBrandIcon,
   Settings,
   Spinner,
@@ -25,17 +24,20 @@ import {
   useHoverInteractionSharedState,
   useHoverReferenceInteraction,
   usePopupHandleStore
-} from "./chunk-TCH3U26B.js";
+} from "./chunk-TWYHHG5N.js";
 import {
   UI_PREFERENCES_KEY,
   isModelPatternEnabled,
   modelMatchesPattern,
   modelPattern,
   readUiPreferences
-} from "./chunk-54II5QXQ.js";
+} from "./chunk-ETTDO4UO.js";
 import {
   MessageSquare
 } from "./chunk-GL6HWDJB.js";
+import {
+  Pencil
+} from "./chunk-M5RSPNYN.js";
 import {
   Keyboard,
   Monitor,
@@ -73,12 +75,16 @@ import {
 import {
   HardDrive
 } from "./chunk-D7ELZVTI.js";
+import {
+  writeStoredValue
+} from "./chunk-SZJUXVWG.js";
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
-  InputGroupInput
-} from "./chunk-P7H2OPKF.js";
+  InputGroupInput,
+  Textarea
+} from "./chunk-PIOFZUOU.js";
 import {
   Search
 } from "./chunk-JIULUYHT.js";
@@ -207,7 +213,9 @@ import {
   useRenderElement,
   useStableCallback
 } from "./chunk-C5X6G26O.js";
-import "./chunk-AHTO6GDS.js";
+import {
+  Plug
+} from "./chunk-AHTO6GDS.js";
 import "./chunk-EAJTWMK5.js";
 import "./chunk-HFQZLPU2.js";
 import {
@@ -220,7 +228,7 @@ import "./chunk-JDCCC7A7.js";
 import "./chunk-L547YHC4.js";
 import "./chunk-MLKGABMK.js";
 
-// web/app/dist/server/assets/settings-dialog-CxHe8nym.js
+// web/app/dist/server/assets/settings-dialog-DndPbM-v.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";
@@ -2281,6 +2289,44 @@ function PersonalizationSection({ onThemePreferenceChange, 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 }) {
   return /* @__PURE__ */ jsxs("div", {
     className: "flex flex-col gap-4",
@@ -2328,393 +2374,11 @@ 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 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);
-}
-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 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 }) {
@@ -2884,141 +2548,819 @@ function useOAuthLoginFlow({ onConfigured, onOAuthLogin, providerId }) {
     login?.status
   ]);
   return {
-    busy,
-    cancel,
-    canStart: Boolean(onOAuthLogin),
-    login,
-    promptAnswer,
-    setPromptAnswer,
-    start,
-    submitPrompt
+    busy,
+    cancel,
+    canStart: Boolean(onOAuthLogin),
+    login,
+    promptAnswer,
+    setPromptAnswer,
+    start,
+    submitPrompt
+  };
+}
+function ProviderOAuthSignIn({ onConfigured, onOAuthLogin, provider }) {
+  const { busy, cancel, canStart, login, promptAnswer, setPromptAnswer, start, submitPrompt } = useOAuthLoginFlow({
+    onConfigured,
+    onOAuthLogin,
+    providerId: provider.id
+  });
+  const waiting = login?.status === "waiting";
+  const error = login?.status === "error" ? login.error : void 0;
+  const authUrl = waiting ? login?.authUrl : void 0;
+  const userCode = waiting ? login?.userCode : void 0;
+  const instructions = waiting ? login?.instructions : void 0;
+  const prompt = waiting ? login?.prompt : void 0;
+  const oauthOnly = provider.authType === "oauth";
+  return /* @__PURE__ */ jsxs("div", {
+    className: "flex flex-col gap-3",
+    children: [provider.isConfigured && oauthOnly && !waiting ? /* @__PURE__ */ jsxs("div", {
+      className: "flex items-center gap-2 text-sm",
+      children: [/* @__PURE__ */ jsx(Check, { className: "size-3.5 text-muted-foreground" }), /* @__PURE__ */ jsx("span", { children: "Connected" })]
+    }) : null, waiting ? /* @__PURE__ */ jsxs("div", {
+      className: "flex flex-col gap-2",
+      children: [
+        /* @__PURE__ */ jsxs("p", {
+          className: "text-sm",
+          children: [
+            "Sign in with ",
+            provider.name,
+            " to store OAuth credentials for this account."
+          ]
+        }),
+        userCode ? /* @__PURE__ */ jsxs("p", {
+          className: "text-sm",
+          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",
+          children: instructions
+        }) : null,
+        authUrl ? /* @__PURE__ */ jsxs(Button, {
+          type: "button",
+          size: "sm",
+          onClick: () => {
+            window.open(authUrl, "_blank", "noopener,noreferrer");
+          },
+          children: [/* @__PURE__ */ jsx(ExternalLink, { "data-icon": "inline-start" }), "Open sign-in page"]
+        }) : prompt ? null : /* @__PURE__ */ jsxs("div", {
+          className: "flex items-center gap-2 text-xs text-muted-foreground",
+          children: [/* @__PURE__ */ jsx(Spinner, { className: "size-3" }), "Waiting for sign-in\u2026"]
+        }),
+        prompt ? /* @__PURE__ */ jsxs("div", {
+          className: "flex flex-col gap-2",
+          children: [
+            /* @__PURE__ */ jsx("p", {
+              className: "text-xs text-pretty text-muted-foreground",
+              children: prompt.message
+            }),
+            /* @__PURE__ */ jsx(Input, {
+              value: promptAnswer,
+              placeholder: prompt.placeholder,
+              onChange: (event) => setPromptAnswer(event.target.value),
+              "aria-label": prompt.message
+            }),
+            /* @__PURE__ */ jsx("div", {
+              className: "flex justify-end",
+              children: /* @__PURE__ */ jsxs(Button, {
+                type: "button",
+                size: "sm",
+                disabled: busy || !prompt.allowEmpty && !promptAnswer.trim(),
+                onClick: () => {
+                  submitPrompt();
+                },
+                children: [busy ? /* @__PURE__ */ jsx(Spinner, { "data-icon": "inline-start" }) : null, "Continue"]
+              })
+            })
+          ]
+        }) : null,
+        /* @__PURE__ */ jsx("div", {
+          className: "flex justify-end",
+          children: /* @__PURE__ */ jsx(Button, {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            disabled: busy,
+            onClick: () => {
+              cancel();
+            },
+            children: "Cancel sign-in"
+          })
+        })
+      ]
+    }) : /* @__PURE__ */ jsxs("div", {
+      className: "flex flex-col gap-2",
+      children: [error ? /* @__PURE__ */ jsx(Alert, {
+        className: "px-3 py-2",
+        children: /* @__PURE__ */ jsx(AlertDescription, {
+          className: "text-xs text-pretty",
+          children: error
+        })
+      }) : /* @__PURE__ */ jsx("p", {
+        className: "text-xs text-pretty text-muted-foreground",
+        children: oauthOnly && provider.isConfigured ? `Sign in again with ${provider.name} to refresh OAuth credentials.` : oauthOnly ? `Sign in with ${provider.name}. No API key is stored; credentials are saved to auth.json.` : `Sign in with ${provider.name} to use OAuth credentials; API-key editing remains available above.`
+      }), /* @__PURE__ */ jsx("div", {
+        className: "flex justify-end",
+        children: /* @__PURE__ */ jsxs(Button, {
+          type: "button",
+          size: "sm",
+          disabled: busy || !canStart,
+          onClick: () => {
+            start();
+          },
+          children: [
+            busy ? /* @__PURE__ */ jsx(Spinner, { "data-icon": "inline-start" }) : null,
+            "Sign in with ",
+            provider.name
+          ]
+        })
+      })]
+    })]
+  });
+}
+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: [
+      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: "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 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 ProviderOAuthSignIn({ onConfigured, onOAuthLogin, provider }) {
-  const { busy, cancel, canStart, login, promptAnswer, setPromptAnswer, start, submitPrompt } = useOAuthLoginFlow({
-    onConfigured,
-    onOAuthLogin,
-    providerId: provider.id
-  });
-  const waiting = login?.status === "waiting";
-  const error = login?.status === "error" ? login.error : void 0;
-  const authUrl = waiting ? login?.authUrl : void 0;
-  const userCode = waiting ? login?.userCode : void 0;
-  const instructions = waiting ? login?.instructions : void 0;
-  const prompt = waiting ? login?.prompt : void 0;
-  const oauthOnly = provider.authType === "oauth";
-  return /* @__PURE__ */ jsxs("div", {
-    className: "flex flex-col gap-3",
-    children: [provider.isConfigured && oauthOnly && !waiting ? /* @__PURE__ */ jsxs("div", {
-      className: "flex items-center gap-2 text-sm",
-      children: [/* @__PURE__ */ jsx(Check, { className: "size-3.5 text-muted-foreground" }), /* @__PURE__ */ jsx("span", { children: "Connected" })]
-    }) : null, waiting ? /* @__PURE__ */ jsxs("div", {
-      className: "flex flex-col gap-2",
-      children: [
-        /* @__PURE__ */ jsxs("p", {
-          className: "text-sm",
-          children: [
-            "Sign in with ",
-            provider.name,
-            " to store OAuth credentials for this account."
-          ]
-        }),
-        userCode ? /* @__PURE__ */ jsxs("p", {
-          className: "text-sm",
-          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",
-          children: instructions
-        }) : null,
-        authUrl ? /* @__PURE__ */ jsxs(Button, {
-          type: "button",
-          size: "sm",
-          onClick: () => {
-            window.open(authUrl, "_blank", "noopener,noreferrer");
-          },
-          children: [/* @__PURE__ */ jsx(ExternalLink, { "data-icon": "inline-start" }), "Open sign-in page"]
-        }) : prompt ? null : /* @__PURE__ */ jsxs("div", {
-          className: "flex items-center gap-2 text-xs text-muted-foreground",
-          children: [/* @__PURE__ */ jsx(Spinner, { className: "size-3" }), "Waiting for sign-in\u2026"]
-        }),
-        prompt ? /* @__PURE__ */ jsxs("div", {
-          className: "flex flex-col gap-2",
-          children: [
-            /* @__PURE__ */ jsx("p", {
-              className: "text-xs text-pretty text-muted-foreground",
-              children: prompt.message
-            }),
-            /* @__PURE__ */ jsx(Input, {
-              value: promptAnswer,
-              placeholder: prompt.placeholder,
-              onChange: (event) => setPromptAnswer(event.target.value),
-              "aria-label": prompt.message
-            }),
-            /* @__PURE__ */ jsx("div", {
-              className: "flex justify-end",
-              children: /* @__PURE__ */ jsxs(Button, {
-                type: "button",
-                size: "sm",
-                disabled: busy || !prompt.allowEmpty && !promptAnswer.trim(),
-                onClick: () => {
-                  submitPrompt();
-                },
-                children: [busy ? /* @__PURE__ */ jsx(Spinner, { "data-icon": "inline-start" }) : null, "Continue"]
-              })
-            })
-          ]
-        }) : null,
-        /* @__PURE__ */ jsx("div", {
-          className: "flex justify-end",
-          children: /* @__PURE__ */ jsx(Button, {
-            type: "button",
-            variant: "ghost",
-            size: "sm",
-            disabled: busy,
-            onClick: () => {
-              cancel();
-            },
-            children: "Cancel sign-in"
-          })
-        })
-      ]
-    }) : /* @__PURE__ */ jsxs("div", {
-      className: "flex flex-col gap-2",
-      children: [error ? /* @__PURE__ */ jsx(Alert, {
-        className: "px-3 py-2",
-        children: /* @__PURE__ */ jsx(AlertDescription, {
-          className: "text-xs text-pretty",
-          children: error
-        })
-      }) : /* @__PURE__ */ jsx("p", {
-        className: "text-xs text-pretty text-muted-foreground",
-        children: oauthOnly && provider.isConfigured ? `Sign in again with ${provider.name} to refresh OAuth credentials.` : oauthOnly ? `Sign in with ${provider.name}. No API key is stored; credentials are saved to auth.json.` : `Sign in with ${provider.name} to use OAuth credentials; API-key editing remains available above.`
-      }), /* @__PURE__ */ jsx("div", {
-        className: "flex justify-end",
-        children: /* @__PURE__ */ jsxs(Button, {
-          type: "button",
-          size: "sm",
-          disabled: busy || !canStart,
-          onClick: () => {
-            start();
-          },
-          children: [
-            busy ? /* @__PURE__ */ jsx(Spinner, { "data-icon": "inline-start" }) : null,
-            "Sign in with ",
-            provider.name
-          ]
-        })
-      })]
-    })]
-  });
+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", {
@@ -3071,7 +3413,7 @@ function AddProviderPickerPanel({ addPickerQuery, credentialProvidersLength, fil
           }) : 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-[11px] font-medium tracking-wide text-muted-foreground uppercase",
+              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,
@@ -3248,44 +3590,6 @@ function ProviderPickerRow({ configured, onSelect, provider }) {
     })]
   });
 }
-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 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;
@@ -3569,7 +3873,7 @@ function searchableModelText(model) {
     model.id
   ].join(" ").toLowerCase();
 }
-function AddModelsDialog({ configuredProviderIds, discoverableProviderIds, discoveringProviderId, enabledModels, modelOptions, onAddModels, onDiscoverProvider, onOpenChange, providerLabel = formatProviderLabel }) {
+function AddModelsDialog({ configuredProviderIds, discoverableProviderIds, discoveringProviderId, enabledModels, modelOptions, onAddModels, onDiscoverProvider, onOpenChange, open, providerLabel = formatProviderLabel }) {
   const [filter, setFilter] = useState2("");
   const [selectedKeys, setSelectedKeys] = useState2(/* @__PURE__ */ new Set());
   const normalizedFilter = filter.trim().toLowerCase();
@@ -3621,7 +3925,7 @@ function AddModelsDialog({ configuredProviderIds, discoverableProviderIds, disco
     onOpenChange(false);
   };
   return /* @__PURE__ */ jsx(Dialog, {
-    open: true,
+    open,
     onOpenChange,
     children: /* @__PURE__ */ jsxs(DialogContent, {
       className: "max-w-lg",
@@ -3682,7 +3986,7 @@ function AddModelsDialog({ configuredProviderIds, discoverableProviderIds, disco
             children: groupedCandidates.map(([provider, models]) => /* @__PURE__ */ jsxs("div", {
               className: "flex flex-col gap-1",
               children: [/* @__PURE__ */ jsxs("div", {
-                className: "px-2 text-[11px] font-medium tracking-wide text-muted-foreground uppercase",
+                className: "px-2 text-[0.6875rem] font-medium tracking-wide text-muted-foreground uppercase",
                 children: [providerLabel(provider), (activeCountByProvider.get(provider) ?? 0) > 0 ? /* @__PURE__ */ jsxs("span", {
                   className: "ml-1 font-normal normal-case tabular-nums",
                   children: [
@@ -3924,7 +4228,8 @@ function ModelDefaultsSection({ draft, discoveringProviderId, modelDirty, modelF
           }, model.id))]
         }, provider))
       }),
-      addOpen ? /* @__PURE__ */ jsx(AddModelsDialog, {
+      /* @__PURE__ */ jsx(AddModelsDialog, {
+        open: addOpen,
         configuredProviderIds,
         discoverableProviderIds,
         discoveringProviderId,
@@ -3934,7 +4239,7 @@ function ModelDefaultsSection({ draft, discoveringProviderId, modelDirty, modelF
         onDiscoverProvider,
         onOpenChange: setAddOpen,
         providerLabel
-      }) : null
+      })
     ]
   });
 }
@@ -4675,6 +4980,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,
@@ -4764,7 +5077,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);
@@ -4828,11 +5141,17 @@ function useSettingsForm() {
     return "close";
   };
   return {
+    isLoadingMcp,
     isLoadingProviders,
+    isUpdatingMcp,
     isUpdatingProvider,
-    onThemePreferenceChange,
+    mcpConnections,
+    onMcpOAuth,
     onOAuthLogin,
+    onRemoveMcp,
     onRemoveProvider,
+    onThemePreferenceChange,
+    onUpdateMcp,
     onUpdateProvider,
     providers,
     resources,
@@ -4903,7 +5222,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,
@@ -5013,6 +5332,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,
@@ -5101,7 +5428,7 @@ function SettingsDialogBody({ initialTab, onCloseAttemptRef, onOpenChange }) {
   const [activeTab, setActiveTab] = useState2(() => initialTab ?? "appearance");
   const [preferences, setPreferences] = useState2(readUiPreferences);
   useEffect2(() => {
-    window.localStorage.setItem(UI_PREFERENCES_KEY, JSON.stringify(preferences));
+    writeStoredValue(UI_PREFERENCES_KEY, JSON.stringify(preferences));
     document.documentElement.dataset.density = preferences.density;
     document.documentElement.classList.toggle("reduce-motion", preferences.motion === "reduced");
   }, [preferences]);