@truefoundry/trueforge-ui 0.0.0 → 0.1.0-rc.0

package/dist/ModelSettings-IJ55QJQO.js

@@ -0,0 +1,1082 @@
+"use client";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Button,
+  CatalogLogo,
+  CenteredModal,
+  SearchInput_default,
+  auiInputClass,
+  getErrorMessage,
+  useToasterOptional
+} from "./chunk-XSHXH6EI.js";
+import {
+  Icon,
+  useCatalogServer
+} from "./chunk-UHGSHDBM.js";
+import "./chunk-42GF723P.js";
+import {
+  cn
+} from "./chunk-UBOFEI77.js";
+
+// src/containers/SettingsBuilder/ModelSettings.tsx
+import { useCallback, useEffect as useEffect2, useMemo, useState as useState3 } from "react";
+
+// src/containers/SettingsBuilder/ConfigureModelProviderForm.tsx
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var inputClassName = auiInputClass("h-11 shadow-sm");
+var ConfigureModelProviderForm = ({
+  open,
+  onOpenChange,
+  onSave,
+  title,
+  description,
+  initialBaseUrl = "",
+  baseUrlPlaceholder = "https://api.openai.com/v1",
+  requireApiKey = true,
+  submitLabel = "Save",
+  busy = false,
+  error
+}) => {
+  const [apiKey, setApiKey] = useState("");
+  const [baseUrl, setBaseUrl] = useState("");
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const resetForm = () => {
+    setApiKey("");
+    setBaseUrl("");
+    setAdvancedOpen(false);
+  };
+  useEffect(() => {
+    if (!open) return;
+    setApiKey("");
+    setBaseUrl(initialBaseUrl);
+    setAdvancedOpen(false);
+  }, [open, initialBaseUrl]);
+  const handleOpenChange = (nextOpen) => {
+    if (!nextOpen) resetForm();
+    onOpenChange(nextOpen);
+  };
+  const trimmedKey = apiKey.trim();
+  const isValid = !requireApiKey || !!trimmedKey;
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (!isValid || busy) return;
+    try {
+      await onSave({ apiKey: trimmedKey, baseUrl: baseUrl.trim() });
+      resetForm();
+      onOpenChange(false);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsx(CenteredModal, { open, onOpenChange: handleOpenChange, title, description, contentSized: true, children: /* @__PURE__ */ jsxs("form", { className: "flex flex-col overflow-y-auto p-5 md:p-6", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor: "model-provider-api-key", className: "mb-1.5 block text-sm font-medium text-text-primary", children: [
+          "API key",
+          !requireApiKey ? /* @__PURE__ */ jsx("span", { className: "font-normal text-text-secondary", children: " (optional)" }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "model-provider-api-key",
+            type: "password",
+            required: requireApiKey,
+            value: apiKey,
+            onChange: (event) => {
+              setApiKey(event.target.value);
+            },
+            placeholder: requireApiKey ? "Enter API key" : "Enter a new key",
+            autoFocus: true,
+            className: inputClassName
+          }
+        ),
+        !requireApiKey ? /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-text-secondary", children: "Leave blank to keep the current key; enter a new one to replace it." }) : null
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Accordion,
+        {
+          expanded: advancedOpen,
+          onChange: (_event, next) => setAdvancedOpen(next),
+          className: "rounded-md border border-border",
+          children: [
+            /* @__PURE__ */ jsx(AccordionSummary, { className: "px-3 py-2.5", children: /* @__PURE__ */ jsxs("span", { className: "flex w-full items-center justify-between text-sm font-medium text-text-primary", children: [
+              "Advanced \xB7 custom endpoint",
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "chevron-down",
+                  className: cn(
+                    "size-4 shrink-0 text-text-secondary transition-transform duration-200",
+                    advancedOpen ? "rotate-0" : "-rotate-90"
+                  )
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsxs(AccordionDetails, { className: "space-y-1.5 border-t border-border px-3 pb-3 pt-4", children: [
+              /* @__PURE__ */ jsx("label", { htmlFor: "model-provider-base-url", className: "block text-sm font-medium text-text-primary", children: "Base URL" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: "model-provider-base-url",
+                  type: "url",
+                  value: baseUrl,
+                  onChange: (event) => {
+                    setBaseUrl(event.target.value);
+                  },
+                  placeholder: baseUrlPlaceholder,
+                  className: inputClassName
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-text-secondary", children: "Leave blank unless you use a regional or proxy endpoint." })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-3", children: [
+      error ? /* @__PURE__ */ jsx("p", { className: "text-failure-bg text-sm", children: error }) : null,
+      /* @__PURE__ */ jsx(Button, { type: "submit", size: "lg", disabled: !isValid || busy, className: "w-full shrink-0", children: submitLabel })
+    ] })
+  ] }) });
+};
+var ConfigureModelProviderForm_default = ConfigureModelProviderForm;
+
+// src/containers/SettingsBuilder/CustomModelProviderForm.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PLACEHOLDER_CONTEXT_LENGTH = "128000";
+var PLACEHOLDER_MAX_OUTPUT_TOKENS = "4096";
+var createEmptyModelRow = () => ({
+  id: "",
+  name: "",
+  // Expanded by default: Context length and Max output tokens are required, so they
+  // shouldn't be hidden behind a collapsed section.
+  advancedExpanded: true,
+  contextLength: "",
+  maxOutputTokens: ""
+});
+var createModelRows = (initialValues) => initialValues?.models.map((model) => ({
+  id: model.id,
+  name: model.name,
+  advancedExpanded: true,
+  reasoningEfforts: model.properties?.reasoningEfforts,
+  contextLength: model.properties?.contextLength?.toString() ?? "",
+  maxOutputTokens: model.properties?.maxOutputTokens?.toString() ?? "",
+  nameDirty: true
+})) ?? [createEmptyModelRow()];
+var inputClassName2 = "h-11 w-full rounded-md border border-border/70 bg-secondary-bg px-3 text-sm text-text-primary outline-none transition-colors placeholder:text-text-secondary/70 focus-visible:border-focus-ring focus-visible:ring-2 focus-visible:ring-focus-ring/50";
+var inputErrorClassName = "border-failure-bg focus-visible:border-failure-bg focus-visible:ring-failure-bg";
+function parsePositiveInt(raw) {
+  const trimmed = raw.trim();
+  if (trimmed === "") return null;
+  const n = Number(trimmed);
+  return Number.isInteger(n) && n > 0 ? n : null;
+}
+function slugifyModelId(raw) {
+  return raw.replace(/([a-zA-Z])(\d)/g, "$1-$2").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^[^a-z]+/, "").slice(0, 64).replace(/-+$/g, "");
+}
+var RequiredMark = () => /* @__PURE__ */ jsx2("span", { className: "ml-0.5 text-failure-bg", "aria-hidden": true, children: "*" });
+var FieldError = ({ children }) => /* @__PURE__ */ jsx2("p", { className: "mt-1 text-xs text-failure-bg", children });
+var FieldHelp = ({ children }) => /* @__PURE__ */ jsx2("p", { className: "mt-1 text-xs text-text-secondary", children });
+var CustomModelProviderForm = ({
+  open,
+  onOpenChange,
+  onSubmit,
+  reasoningEffortOptions,
+  busy = false,
+  error,
+  isEditMode = false,
+  initialValues
+}) => {
+  const [name, setName] = useState2(initialValues?.name ?? "");
+  const [baseUrl, setBaseUrl] = useState2(initialValues?.baseUrl ?? "");
+  const [apiKey, setApiKey] = useState2("");
+  const [models, setModels] = useState2(() => createModelRows(initialValues));
+  const [nameTouched, setNameTouched] = useState2(false);
+  const [baseUrlTouched, setBaseUrlTouched] = useState2(false);
+  const resetForm = () => {
+    setName(initialValues?.name ?? "");
+    setBaseUrl(initialValues?.baseUrl ?? "");
+    setApiKey("");
+    setModels(createModelRows(initialValues));
+    setNameTouched(false);
+    setBaseUrlTouched(false);
+  };
+  const handleOpenChange = (nextOpen) => {
+    if (!nextOpen) resetForm();
+    onOpenChange(nextOpen);
+  };
+  const updateModel = (index, patch) => {
+    setModels((current) => current.map((model, i) => i === index ? { ...model, ...patch } : model));
+  };
+  const markAllTouched = () => {
+    setNameTouched(true);
+    setBaseUrlTouched(true);
+    setModels(
+      (current) => current.map((model) => ({
+        ...model,
+        idTouched: true,
+        contextTouched: true,
+        maxTouched: true
+      }))
+    );
+  };
+  const trimmedName = name.trim();
+  const nameError = trimmedName ? null : "Name is required.";
+  const trimmedBaseUrl = baseUrl.trim();
+  let baseUrlError = null;
+  if (!trimmedBaseUrl) {
+    baseUrlError = "Base URL is required.";
+  } else {
+    try {
+      new URL(trimmedBaseUrl);
+    } catch {
+      baseUrlError = "Enter a valid URL.";
+    }
+  }
+  const modelIdError = (model) => model.id.trim() ? null : "Model ID is required.";
+  const modelNameError = (model) => model.name.trim() ? null : "Model name is required.";
+  const modelContextError = (model) => parsePositiveInt(model.contextLength) == null ? "Set the model's context window." : null;
+  const modelMaxOutputError = (model) => parsePositiveInt(model.maxOutputTokens) == null ? "Set the max output tokens." : null;
+  const visibleValid = !nameError && !baseUrlError && models.every((model) => !modelIdError(model) && !modelNameError(model));
+  const showNameError = nameTouched && nameError;
+  const showBaseUrlError = baseUrlTouched && baseUrlError;
+  const handleSubmit = async () => {
+    markAllTouched();
+    if (!visibleValid || busy) return;
+    const incompleteIndex = models.findIndex((model) => modelContextError(model) || modelMaxOutputError(model));
+    if (incompleteIndex !== -1) {
+      updateModel(incompleteIndex, { advancedExpanded: true });
+      const target = models[incompleteIndex];
+      const field = target && modelContextError(target) ? "context-length" : "max-output-tokens";
+      setTimeout(() => {
+        const el = document.getElementById(`custom-provider-model-${incompleteIndex}-${field}`);
+        el?.scrollIntoView?.({ block: "center", behavior: "smooth" });
+        el?.focus();
+      }, 0);
+      return;
+    }
+    try {
+      await onSubmit({
+        name: trimmedName,
+        baseUrl: trimmedBaseUrl,
+        apiKey: apiKey.trim(),
+        models: models.map((model) => {
+          const properties = {};
+          if (model.reasoningEfforts?.length) properties.reasoningEfforts = model.reasoningEfforts;
+          const contextLength = parsePositiveInt(model.contextLength);
+          if (contextLength != null) properties.contextLength = contextLength;
+          const maxOutputTokens = parsePositiveInt(model.maxOutputTokens);
+          if (maxOutputTokens != null) properties.maxOutputTokens = maxOutputTokens;
+          return {
+            id: model.id.trim(),
+            name: model.name.trim(),
+            ...Object.keys(properties).length > 0 ? { properties } : {}
+          };
+        })
+      });
+      handleOpenChange(false);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsx2(
+    CenteredModal,
+    {
+      open,
+      onOpenChange: handleOpenChange,
+      title: isEditMode ? `Edit ${initialValues?.name ?? name}` : "Add custom provider",
+      description: isEditMode ? "Update the endpoint, credentials, and models for this provider." : "Connect any OpenAI-compatible endpoint, whether it's a local model, a proxy, or your own hosted service.",
+      contentSized: true,
+      children: /* @__PURE__ */ jsxs2(
+        "form",
+        {
+          className: "flex min-h-0 flex-1 flex-col",
+          onSubmit: (event) => {
+            event.preventDefault();
+            void handleSubmit();
+          },
+          children: [
+            /* @__PURE__ */ jsxs2("div", { className: "min-h-0 flex-1 space-y-4 overflow-y-auto px-5 pt-4 pb-8", children: [
+              /* @__PURE__ */ jsxs2("div", { children: [
+                /* @__PURE__ */ jsxs2("label", { htmlFor: "custom-provider-name", className: "mb-1.5 block text-sm font-medium text-text-primary", children: [
+                  "Name",
+                  /* @__PURE__ */ jsx2(RequiredMark, {})
+                ] }),
+                /* @__PURE__ */ jsx2(
+                  "input",
+                  {
+                    id: "custom-provider-name",
+                    type: "text",
+                    value: name,
+                    onChange: (event) => setName(event.target.value),
+                    onBlur: () => setNameTouched(true),
+                    placeholder: "local-llama",
+                    autoFocus: !isEditMode,
+                    readOnly: isEditMode,
+                    "aria-readonly": isEditMode,
+                    "aria-invalid": showNameError ? true : void 0,
+                    className: cn(
+                      inputClassName2,
+                      isEditMode && "cursor-not-allowed bg-secondary-bg/60 text-text-secondary",
+                      showNameError && inputErrorClassName
+                    )
+                  }
+                ),
+                isEditMode ? /* @__PURE__ */ jsx2(FieldHelp, { children: "Provider names cannot be changed after creation." }) : null,
+                showNameError ? /* @__PURE__ */ jsx2(FieldError, { children: nameError }) : null
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { children: [
+                /* @__PURE__ */ jsxs2("label", { htmlFor: "custom-provider-base-url", className: "mb-1.5 block text-sm font-medium text-text-primary", children: [
+                  "Base URL",
+                  /* @__PURE__ */ jsx2(RequiredMark, {})
+                ] }),
+                /* @__PURE__ */ jsx2(
+                  "input",
+                  {
+                    id: "custom-provider-base-url",
+                    type: "text",
+                    value: baseUrl,
+                    onChange: (event) => setBaseUrl(event.target.value),
+                    onBlur: () => setBaseUrlTouched(true),
+                    placeholder: "http://localhost:11434/v1",
+                    autoFocus: isEditMode,
+                    "aria-invalid": showBaseUrlError ? true : void 0,
+                    className: cn(inputClassName2, showBaseUrlError && inputErrorClassName)
+                  }
+                ),
+                showBaseUrlError ? /* @__PURE__ */ jsx2(FieldError, { children: baseUrlError }) : !trimmedBaseUrl ? /* @__PURE__ */ jsx2(FieldHelp, { children: "OpenAI-compatible endpoint, usually ending in /v1." }) : null
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { children: [
+                /* @__PURE__ */ jsxs2("label", { htmlFor: "custom-provider-api-key", className: "mb-1.5 block text-sm font-medium text-text-primary", children: [
+                  "API key",
+                  /* @__PURE__ */ jsx2("span", { className: "font-normal text-text-secondary", children: " (optional)" })
+                ] }),
+                /* @__PURE__ */ jsx2(
+                  "input",
+                  {
+                    id: "custom-provider-api-key",
+                    type: "password",
+                    value: apiKey,
+                    onChange: (event) => setApiKey(event.target.value),
+                    placeholder: "sk-\u2026",
+                    className: inputClassName2
+                  }
+                ),
+                /* @__PURE__ */ jsx2(FieldHelp, { children: isEditMode ? "Leave blank to keep the saved key, or enter a new key to replace it." : "Leave blank if your endpoint needs no key (e.g. a local model)." })
+              ] }),
+              /* @__PURE__ */ jsxs2("fieldset", { className: "m-0 min-w-0 border-0 p-0", children: [
+                /* @__PURE__ */ jsxs2("legend", { className: "float-left mb-2 w-full p-0 text-sm font-medium text-text-primary", children: [
+                  "Models",
+                  /* @__PURE__ */ jsx2(RequiredMark, {})
+                ] }),
+                /* @__PURE__ */ jsx2("div", { className: "clear-both", children: models.map((model, index) => {
+                  const idError = modelIdError(model);
+                  const showIdError = model.idTouched && idError;
+                  const nameFieldError = modelNameError(model);
+                  const showNameFieldError = !!nameFieldError && model.nameDirty;
+                  const contextError = modelContextError(model);
+                  const maxError = modelMaxOutputError(model);
+                  const showContextError = model.contextTouched && contextError;
+                  const showMaxError = model.maxTouched && maxError;
+                  return /* @__PURE__ */ jsxs2(
+                    "div",
+                    {
+                      className: cn("pb-6", index > 0 ? "border-t border-border pt-6" : "pt-1"),
+                      style: index > 0 ? { borderTopWidth: "0.5px" } : void 0,
+                      children: [
+                        /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[1fr_1fr_2rem] items-end gap-2", children: [
+                          /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
+                            /* @__PURE__ */ jsx2(
+                              "label",
+                              {
+                                htmlFor: `custom-provider-model-${index}-id`,
+                                className: "mb-1 block text-xs font-normal text-text-secondary",
+                                children: "Model ID"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx2(
+                              "input",
+                              {
+                                id: `custom-provider-model-${index}-id`,
+                                type: "text",
+                                value: model.id,
+                                onChange: (event) => {
+                                  const id = event.target.value;
+                                  updateModel(index, {
+                                    id,
+                                    ...model.nameDirty ? {} : { name: slugifyModelId(id) }
+                                  });
+                                },
+                                onBlur: () => updateModel(index, { idTouched: true }),
+                                placeholder: "llama3.1:70b",
+                                "aria-invalid": showIdError ? true : void 0,
+                                className: cn(inputClassName2, "font-mono", showIdError && inputErrorClassName)
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
+                            /* @__PURE__ */ jsx2(
+                              "label",
+                              {
+                                htmlFor: `custom-provider-model-${index}-name`,
+                                className: "mb-1 block text-xs font-normal text-text-secondary",
+                                children: "Model name"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx2(
+                              "input",
+                              {
+                                id: `custom-provider-model-${index}-name`,
+                                type: "text",
+                                value: model.name,
+                                onChange: (event) => updateModel(index, { name: event.target.value, nameDirty: true }),
+                                placeholder: "llama-3-1-70b",
+                                "aria-invalid": showNameFieldError ? true : void 0,
+                                className: cn(inputClassName2, showNameFieldError && inputErrorClassName)
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsx2(
+                            "button",
+                            {
+                              type: "button",
+                              "aria-label": `Remove model ${index + 1}`,
+                              disabled: models.length === 1 || busy,
+                              className: "mb-0.5 flex size-9 items-center justify-center rounded-md text-text-secondary transition-colors hover:text-text-primary disabled:opacity-40",
+                              onClick: () => setModels((current) => current.filter((_, i) => i !== index)),
+                              children: /* @__PURE__ */ jsx2(Icon, { name: "trash", className: "size-4" })
+                            }
+                          )
+                        ] }),
+                        showIdError ? /* @__PURE__ */ jsx2(FieldError, { children: idError }) : null,
+                        showNameFieldError ? /* @__PURE__ */ jsx2(FieldError, { children: nameFieldError }) : null,
+                        /* @__PURE__ */ jsxs2("div", { className: "mt-2", children: [
+                          /* @__PURE__ */ jsxs2(
+                            "button",
+                            {
+                              type: "button",
+                              "aria-expanded": model.advancedExpanded,
+                              "aria-controls": `custom-provider-model-${index}-advanced`,
+                              className: "flex cursor-pointer items-center gap-1.5 text-sm font-medium text-text-primary",
+                              onClick: () => updateModel(index, { advancedExpanded: !model.advancedExpanded }),
+                              children: [
+                                /* @__PURE__ */ jsx2(
+                                  Icon,
+                                  {
+                                    name: "chevron-down",
+                                    className: cn(
+                                      "size-4 text-text-secondary transition-transform",
+                                      model.advancedExpanded ? "" : "-rotate-90"
+                                    )
+                                  }
+                                ),
+                                "Advanced"
+                              ]
+                            }
+                          ),
+                          model.advancedExpanded ? /* @__PURE__ */ jsxs2("div", { id: `custom-provider-model-${index}-advanced`, className: "mt-3 space-y-4 pl-6", children: [
+                            /* @__PURE__ */ jsxs2("div", { children: [
+                              /* @__PURE__ */ jsxs2(
+                                "label",
+                                {
+                                  htmlFor: `custom-provider-model-${index}-context-length`,
+                                  className: "mb-1.5 block text-xs font-medium text-text-secondary",
+                                  children: [
+                                    "Context length",
+                                    /* @__PURE__ */ jsx2(RequiredMark, {})
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsx2(
+                                "input",
+                                {
+                                  id: `custom-provider-model-${index}-context-length`,
+                                  type: "number",
+                                  min: 1,
+                                  inputMode: "numeric",
+                                  value: model.contextLength,
+                                  onChange: (event) => updateModel(index, { contextLength: event.target.value }),
+                                  onBlur: () => updateModel(index, { contextTouched: true }),
+                                  placeholder: PLACEHOLDER_CONTEXT_LENGTH,
+                                  "aria-invalid": showContextError ? true : void 0,
+                                  className: cn(inputClassName2, showContextError && inputErrorClassName)
+                                }
+                              ),
+                              showContextError ? /* @__PURE__ */ jsx2(FieldError, { children: contextError }) : model.contextLength.trim() === "" ? /* @__PURE__ */ jsx2(FieldHelp, { children: "Prevents the context window from overflowing during a run." }) : null
+                            ] }),
+                            /* @__PURE__ */ jsxs2("div", { children: [
+                              /* @__PURE__ */ jsxs2(
+                                "label",
+                                {
+                                  htmlFor: `custom-provider-model-${index}-max-output-tokens`,
+                                  className: "mb-1.5 block text-xs font-medium text-text-secondary",
+                                  children: [
+                                    "Max output tokens",
+                                    /* @__PURE__ */ jsx2(RequiredMark, {})
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsx2(
+                                "input",
+                                {
+                                  id: `custom-provider-model-${index}-max-output-tokens`,
+                                  type: "number",
+                                  min: 1,
+                                  inputMode: "numeric",
+                                  value: model.maxOutputTokens,
+                                  onChange: (event) => updateModel(index, { maxOutputTokens: event.target.value }),
+                                  onBlur: () => updateModel(index, { maxTouched: true }),
+                                  placeholder: PLACEHOLDER_MAX_OUTPUT_TOKENS,
+                                  "aria-invalid": showMaxError ? true : void 0,
+                                  className: cn(inputClassName2, showMaxError && inputErrorClassName)
+                                }
+                              ),
+                              showMaxError ? /* @__PURE__ */ jsx2(FieldError, { children: maxError }) : model.maxOutputTokens.trim() === "" ? /* @__PURE__ */ jsx2(FieldHelp, { children: "Caps tokens per model call." }) : null
+                            ] }),
+                            reasoningEffortOptions && reasoningEffortOptions.length > 0 ? /* @__PURE__ */ jsxs2("div", { children: [
+                              /* @__PURE__ */ jsxs2("label", { className: "flex w-fit cursor-pointer items-center gap-2 select-none", children: [
+                                /* @__PURE__ */ jsx2(
+                                  "input",
+                                  {
+                                    type: "checkbox",
+                                    className: "size-4 shrink-0 cursor-pointer accent-primary-button-bg disabled:cursor-not-allowed disabled:opacity-50",
+                                    checked: model.reasoningEfforts !== void 0,
+                                    "aria-label": `Enable reasoning effort for model ${index + 1}`,
+                                    disabled: busy,
+                                    onChange: (event) => updateModel(index, {
+                                      reasoningEfforts: event.target.checked ? [] : void 0
+                                    })
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx2("span", { className: "text-text-secondary text-xs font-medium", children: "Reasoning effort" })
+                              ] }),
+                              model.reasoningEfforts !== void 0 ? /* @__PURE__ */ jsx2(
+                                "div",
+                                {
+                                  role: "group",
+                                  "aria-label": `Supported reasoning efforts for model ${index + 1}`,
+                                  className: "mt-2 flex flex-wrap gap-2",
+                                  children: reasoningEffortOptions.map((effort) => {
+                                    const selected = model.reasoningEfforts?.includes(effort) ?? false;
+                                    return /* @__PURE__ */ jsx2(
+                                      "button",
+                                      {
+                                        type: "button",
+                                        "aria-pressed": selected,
+                                        disabled: busy,
+                                        className: cn(
+                                          "rounded-full border px-3 py-1 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring/40 disabled:opacity-50",
+                                          selected ? "border-primary-button-bg bg-primary-button-bg text-primary-button-text" : "border-border text-text-secondary hover:bg-ghost-button-hover"
+                                        ),
+                                        onClick: () => updateModel(index, {
+                                          reasoningEfforts: selected ? model.reasoningEfforts?.filter((item) => item !== effort) : [...model.reasoningEfforts ?? [], effort]
+                                        }),
+                                        children: effort
+                                      },
+                                      effort
+                                    );
+                                  })
+                                }
+                              ) : null
+                            ] }) : null
+                          ] }) : null
+                        ] })
+                      ]
+                    },
+                    index
+                  );
+                }) }),
+                /* @__PURE__ */ jsxs2(
+                  Button,
+                  {
+                    variant: "secondary",
+                    size: "sm",
+                    type: "button",
+                    className: "mt-4 w-fit",
+                    onClick: () => setModels((current) => [...current, createEmptyModelRow()]),
+                    children: [
+                      /* @__PURE__ */ jsx2(Icon, { name: "plus", className: "size-3.5" }),
+                      "Add model"
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { className: "shrink-0 space-y-3 border-t border-border px-5 py-4", children: [
+              error ? /* @__PURE__ */ jsx2("p", { className: "text-failure-bg text-sm", children: error }) : null,
+              /* @__PURE__ */ jsx2(Button, { type: "submit", size: "lg", disabled: !visibleValid || busy, className: "w-full", children: isEditMode ? "Save changes" : "Add provider" })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+var CustomModelProviderForm_default = CustomModelProviderForm;
+
+// src/containers/SettingsBuilder/ModelSettings.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function catalogBaseUrl(provider) {
+  if ("baseUrl" in provider && typeof provider.baseUrl === "string") {
+    return provider.baseUrl;
+  }
+  return "";
+}
+var ModelSettings = () => {
+  const { modelCatalog } = useCatalogServer();
+  const toaster = useToasterOptional();
+  const [query, setQuery] = useState3("");
+  const [configured, setConfigured] = useState3([]);
+  const [catalog, setCatalog] = useState3([]);
+  const [loading, setLoading] = useState3(true);
+  const [error, setError] = useState3(null);
+  const [formError, setFormError] = useState3(null);
+  const [busy, setBusy] = useState3(false);
+  const [editingProviderId, setEditingProviderId] = useState3(null);
+  const [editingCatalogType, setEditingCatalogType] = useState3(null);
+  const [keyError, setKeyError] = useState3(null);
+  const [customProviderOpen, setCustomProviderOpen] = useState3(false);
+  const [customProviderToEdit, setCustomProviderToEdit] = useState3(null);
+  const modelProviderIconMap = useMemo(() => {
+    return (catalog ?? []).reduce(
+      (acc, entry) => {
+        acc[entry.name] = entry.logo ?? "";
+        return acc;
+      },
+      {}
+    );
+  }, [catalog]);
+  const normalizedQuery = query.trim().toLowerCase();
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [listed, available] = await Promise.all([
+        modelCatalog.listModelProviders(),
+        modelCatalog.getModelProviderCatalog()
+      ]);
+      setConfigured(listed);
+      setCatalog(available);
+    } catch (err) {
+      setError(getErrorMessage(err, "Failed to load model providers"));
+    } finally {
+      setLoading(false);
+    }
+  }, [modelCatalog]);
+  useEffect2(() => {
+    void refresh();
+  }, [refresh]);
+  const configuredTypes = useMemo(() => new Set(configured.map((provider) => provider.type)), [configured]);
+  const matchingConfigured = useMemo(
+    () => configured.filter(
+      (provider) => provider.name?.toLowerCase().includes(normalizedQuery) || provider.models.some(
+        (model) => model.name.toLowerCase().includes(normalizedQuery) || model.id.toLowerCase().includes(normalizedQuery)
+      )
+    ),
+    [configured, normalizedQuery]
+  );
+  const matchingAvailable = useMemo(
+    () => catalog.filter(
+      (provider) => provider.type !== "custom" && !configuredTypes.has(provider.type) && (provider.name.toLowerCase().includes(normalizedQuery) || provider.models.some(
+        (model) => model.name.toLowerCase().includes(normalizedQuery) || model.id.toLowerCase().includes(normalizedQuery)
+      ))
+    ),
+    [catalog, configuredTypes, normalizedQuery]
+  );
+  const supportedReasoningEfforts = useMemo(() => {
+    return catalog.find((provider) => provider.type === "custom")?.supportedReasoningEfforts;
+  }, [catalog]);
+  const catalogModelsByType = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const entry of catalog) {
+      map.set(entry.type, entry.models);
+    }
+    return map;
+  }, [catalog]);
+  const closeKeyEditor = () => {
+    setEditingProviderId(null);
+    setEditingCatalogType(null);
+    setKeyError(null);
+  };
+  const runMutation = async (fn, onError) => {
+    setBusy(true);
+    setError(null);
+    try {
+      await fn();
+      await refresh();
+      closeKeyEditor();
+    } catch (err) {
+      if (onError) {
+        onError(err);
+      } else if (toaster == null) {
+        setError(getErrorMessage(err, "Request failed"));
+      } else {
+        toaster.showError(err);
+      }
+      throw err;
+    } finally {
+      setBusy(false);
+    }
+  };
+  const handleCreateFromCatalog = async (entry, draft) => {
+    setKeyError(null);
+    await runMutation(
+      async () => {
+        await modelCatalog.createModelProvider({
+          type: entry.type,
+          name: entry.name,
+          ...draft.baseUrl ? { baseUrl: draft.baseUrl } : {},
+          apiKey: draft.apiKey,
+          models: entry.models
+        });
+      },
+      (err) => setKeyError(getErrorMessage(err, "Request failed"))
+    );
+  };
+  const handleReplaceKey = async (provider, draft) => {
+    setKeyError(null);
+    await runMutation(
+      async () => {
+        await modelCatalog.updateModelProvider({
+          id: provider.id,
+          type: provider.type,
+          name: provider.name,
+          ...draft.baseUrl ? { baseUrl: draft.baseUrl } : {},
+          // Empty key means "keep the existing one" for hosts that support it.
+          apiKey: draft.apiKey,
+          models: provider.models
+        });
+      },
+      (err) => setKeyError(getErrorMessage(err, "Request failed"))
+    );
+    toaster?.showSuccess({ title: `${provider.name} updated` });
+  };
+  const handleRemoveProvider = (provider) => {
+    if (!modelCatalog.deleteModelProvider) return;
+    void runMutation(async () => {
+      await modelCatalog.deleteModelProvider({ id: provider.id });
+    }).catch(() => {
+    });
+  };
+  const handleUpdateModels = (provider, models) => {
+    void runMutation(async () => {
+      await modelCatalog.updateModelProvider({
+        id: provider.id,
+        type: provider.type,
+        name: provider.name,
+        ...provider.baseUrl ? { baseUrl: provider.baseUrl } : {},
+        apiKey: "",
+        models
+      });
+    }).catch(() => {
+    });
+  };
+  const handleAddCustomProvider = async (draft) => {
+    setFormError(null);
+    await runMutation(
+      async () => {
+        await modelCatalog.createModelProvider({
+          type: "custom",
+          name: draft.name,
+          baseUrl: draft.baseUrl,
+          apiKey: draft.apiKey,
+          models: draft.models
+        });
+      },
+      (err) => setFormError(getErrorMessage(err, "Request failed"))
+    );
+    setTimeout(() => {
+      toaster?.showSuccess({ title: `${draft.name} added` });
+    }, 0);
+  };
+  const handleUpdateCustomProvider = async (draft) => {
+    if (!customProviderToEdit) return;
+    const provider = customProviderToEdit;
+    setFormError(null);
+    await runMutation(
+      async () => {
+        await modelCatalog.updateModelProvider({
+          id: provider.id,
+          type: provider.type,
+          name: provider.name,
+          baseUrl: draft.baseUrl,
+          apiKey: draft.apiKey,
+          models: draft.models
+        });
+      },
+      (err) => setFormError(getErrorMessage(err, "Request failed"))
+    );
+    setTimeout(() => {
+      toaster?.showSuccess({
+        title: "Model provider updated",
+        description: `${provider.name} was updated successfully.`
+      });
+    }, 0);
+  };
+  const customProviderInitialValues = customProviderToEdit ? {
+    name: customProviderToEdit.name,
+    baseUrl: customProviderToEdit.baseUrl ?? "",
+    models: customProviderToEdit.models
+  } : void 0;
+  const editingProvider = editingProviderId != null ? configured.find((item) => item.id === editingProviderId) ?? null : null;
+  const editingCatalogEntry = editingCatalogType != null ? catalog.find((item) => item.type === editingCatalogType) ?? null : null;
+  const keyModalOpen = editingProvider != null || editingCatalogEntry != null;
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("h3", { className: "text-xl font-semibold tracking-tight text-text-primary", children: "Models" }),
+    /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm text-text-secondary", children: "Connect providers and choose which models are available." }),
+    error ? /* @__PURE__ */ jsx3("p", { className: "mt-3 rounded-md border border-failure-bg/30 bg-failure-bg/10 px-3 py-2 text-sm text-failure-bg", children: error }) : null,
+    /* @__PURE__ */ jsx3("div", { className: "mt-4 flex-1 overflow-y-hidden", children: /* @__PURE__ */ jsxs3("div", { className: "flex h-full flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx3("div", { className: "flex-1", children: /* @__PURE__ */ jsx3(SearchInput_default, { query, setQuery, placeholder: "Search providers and models" }) }),
+        /* @__PURE__ */ jsxs3(
+          Button,
+          {
+            variant: "secondary",
+            type: "button",
+            onClick: () => {
+              setFormError(null);
+              setCustomProviderToEdit(null);
+              setCustomProviderOpen(true);
+            },
+            children: [
+              /* @__PURE__ */ jsx3(Icon, { name: "plus", size: "1rem", className: "mr-1" }),
+              "Add Custom Provider"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex flex-1 flex-col gap-2 overflow-y-auto", children: [
+        loading ? /* @__PURE__ */ jsx3("p", { className: "py-8 text-center text-sm text-text-secondary", children: "Loading\u2026" }) : null,
+        !loading && matchingConfigured.length > 0 ? /* @__PURE__ */ jsxs3("section", { "aria-labelledby": "configured-providers-heading", children: [
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              id: "configured-providers-heading",
+              className: "mb-2 text-[0.8125rem] font-semibold uppercase text-text-secondary",
+              children: "Configured"
+            }
+          ),
+          /* @__PURE__ */ jsx3("div", { className: "overflow-hidden rounded-xl border border-border bg-card-bg", children: matchingConfigured.map((provider) => {
+            const catalogModels = catalogModelsByType.get(provider.type) ?? [];
+            const configuredIds = new Set(provider.models.map((model) => model.id));
+            const availableModels = catalogModels.filter((model) => !configuredIds.has(model.id));
+            const logoSrc = modelProviderIconMap[provider.name];
+            return /* @__PURE__ */ jsxs3("article", { className: "border-b border-border p-3 last:border-b-0", children: [
+              /* @__PURE__ */ jsxs3("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-center", children: [
+                /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+                  /* @__PURE__ */ jsx3(
+                    "div",
+                    {
+                      className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-secondary-bg text-text-primary",
+                      "aria-hidden": true,
+                      children: logoSrc ? /* @__PURE__ */ jsx3(CatalogLogo, { src: logoSrc, alt: provider.name, className: "size-4.5" }) : /* @__PURE__ */ jsx3(Icon, { name: "cpu", className: "size-4.5" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3("h5", { className: "truncate text-base font-medium text-text-primary", children: provider.name })
+                ] }),
+                /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2.5 sm:justify-end", children: [
+                  /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1.5 rounded-full border border-border bg-secondary-bg/40 px-2 py-0.5 text-xs font-medium text-success-bg", children: [
+                    /* @__PURE__ */ jsx3("span", { className: "h-1.5 w-1.5 rounded-full bg-success-bg" }),
+                    "Connected"
+                  ] }),
+                  /* @__PURE__ */ jsxs3(
+                    Button,
+                    {
+                      variant: "secondary",
+                      size: "sm",
+                      className: "text-[0.8125rem]",
+                      type: "button",
+                      "aria-label": `Edit ${provider.name}`,
+                      title: `Edit ${provider.name}`,
+                      disabled: busy,
+                      onClick: () => {
+                        if (provider.type === "custom") {
+                          closeKeyEditor();
+                          setFormError(null);
+                          setCustomProviderToEdit(provider);
+                          setCustomProviderOpen(true);
+                        } else {
+                          setKeyError(null);
+                          setEditingCatalogType(null);
+                          setEditingProviderId(provider.id);
+                        }
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx3(Icon, { name: "wrench", className: "size-3.5" }),
+                        "Edit"
+                      ]
+                    }
+                  ),
+                  modelCatalog.deleteModelProvider ? /* @__PURE__ */ jsx3(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      className: "transition-colors hover:bg-failure-bg/10 hover:text-failure-bg",
+                      type: "button",
+                      disabled: busy,
+                      onClick: () => {
+                        handleRemoveProvider(provider);
+                      },
+                      children: "Remove"
+                    }
+                  ) : null
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs3("div", { className: "mt-3 overflow-hidden rounded-lg border border-border bg-secondary-bg/30", children: [
+                provider.models.map((model) => /* @__PURE__ */ jsxs3(
+                  "div",
+                  {
+                    className: "flex min-h-10 items-center gap-3 border-b border-border px-3 py-2 text-sm text-text-primary last:border-b-0",
+                    children: [
+                      /* @__PURE__ */ jsx3("span", { className: "min-w-0 flex-1 truncate", children: model.name }),
+                      /* @__PURE__ */ jsx3(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": `Remove ${model.name}`,
+                          disabled: busy,
+                          className: "inline-flex size-7 shrink-0 items-center justify-center rounded-md text-text-secondary hover:bg-ghost-button-hover hover:text-ghost-button-text focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring disabled:opacity-50",
+                          onClick: () => {
+                            handleUpdateModels(
+                              provider,
+                              provider.models.filter((item) => item.id !== model.id)
+                            );
+                          },
+                          children: /* @__PURE__ */ jsx3(Icon, { name: "trash", className: "size-3.5" })
+                        }
+                      )
+                    ]
+                  },
+                  model.id
+                )),
+                availableModels.length > 0 ? /* @__PURE__ */ jsxs3("section", { children: [
+                  /* @__PURE__ */ jsxs3("div", { className: "border-b border-border bg-secondary-bg/40 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-text-secondary", children: [
+                    "Available to add \xB7 ",
+                    availableModels.length
+                  ] }),
+                  availableModels.map((model) => /* @__PURE__ */ jsxs3(
+                    "div",
+                    {
+                      className: "flex min-h-12 items-center gap-3 border-b border-border px-3 py-2 text-sm text-text-primary last:border-b-0",
+                      children: [
+                        /* @__PURE__ */ jsx3("span", { className: "min-w-0 flex-1 truncate", children: model.name }),
+                        /* @__PURE__ */ jsx3(
+                          Button,
+                          {
+                            variant: "outline",
+                            size: "sm",
+                            type: "button",
+                            disabled: busy,
+                            onClick: () => {
+                              handleUpdateModels(provider, [...provider.models, model]);
+                            },
+                            children: "Add"
+                          }
+                        )
+                      ]
+                    },
+                    model.id
+                  ))
+                ] }) : null
+              ] })
+            ] }, provider.id);
+          }) })
+        ] }) : null,
+        !loading && matchingAvailable.length > 0 ? /* @__PURE__ */ jsxs3("section", { "aria-labelledby": "available-providers-heading", className: "mt-2", children: [
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              id: "available-providers-heading",
+              className: "mb-2 text-[0.8125rem] font-semibold uppercase text-text-secondary",
+              children: "Available"
+            }
+          ),
+          /* @__PURE__ */ jsx3("div", { className: "overflow-hidden rounded-xl border border-border bg-card-bg", children: matchingAvailable.map((provider) => {
+            const logoSrc = modelProviderIconMap[provider.name];
+            return /* @__PURE__ */ jsx3("article", { className: "border-b border-border p-3 last:border-b-0", children: /* @__PURE__ */ jsxs3("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-center", children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+                /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    className: "flex size-9 shrink-0 items-center justify-center rounded-lg border border-border bg-secondary-bg text-text-primary",
+                    "aria-hidden": true,
+                    children: logoSrc ? /* @__PURE__ */ jsx3(CatalogLogo, { src: logoSrc, alt: provider.name, className: "size-4.5" }) : /* @__PURE__ */ jsx3(Icon, { name: "cpu", className: "size-4.5" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx3("h5", { className: "truncate text-base font-medium text-text-primary", children: provider.name }),
+                  /* @__PURE__ */ jsx3("p", { className: "truncate text-sm text-text-secondary", children: provider.models.map((model) => model.name).join(" \xB7 ") })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs3(
+                Button,
+                {
+                  variant: "secondary",
+                  type: "button",
+                  disabled: busy,
+                  onClick: () => {
+                    setKeyError(null);
+                    setEditingProviderId(null);
+                    setEditingCatalogType(provider.type);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx3(Icon, { name: "wrench", className: "size-4" }),
+                    "Configure"
+                  ]
+                }
+              )
+            ] }) }, provider.type);
+          }) })
+        ] }) : null,
+        !loading && matchingConfigured.length === 0 && matchingAvailable.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "flex flex-1 items-center justify-center rounded-xl border border-dashed border-border p-8 text-center text-sm text-text-secondary", children: normalizedQuery ? `No providers match \u201C${query.trim()}\u201D.` : "No model providers yet." }) : null
+      ] }),
+      /* @__PURE__ */ jsx3(
+        ConfigureModelProviderForm_default,
+        {
+          open: keyModalOpen,
+          onOpenChange: (open) => {
+            if (!open) closeKeyEditor();
+          },
+          onSave: (draft) => {
+            if (editingProvider) return handleReplaceKey(editingProvider, draft);
+            if (editingCatalogEntry) return handleCreateFromCatalog(editingCatalogEntry, draft);
+          },
+          title: editingProvider ? "Edit Provider Details" : "Configure Provider Details",
+          initialBaseUrl: editingProvider ? editingProvider.baseUrl ?? "" : editingCatalogEntry ? catalogBaseUrl(editingCatalogEntry) : "",
+          requireApiKey: editingProvider == null,
+          submitLabel: editingProvider ? "Save" : "Create",
+          busy,
+          error: keyError
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        CustomModelProviderForm_default,
+        {
+          open: customProviderOpen,
+          onOpenChange: (open) => {
+            setCustomProviderOpen(open);
+            if (!open) {
+              setFormError(null);
+              setCustomProviderToEdit(null);
+            }
+          },
+          isEditMode: customProviderToEdit !== null,
+          initialValues: customProviderInitialValues,
+          onSubmit: customProviderToEdit ? handleUpdateCustomProvider : handleAddCustomProvider,
+          reasoningEffortOptions: supportedReasoningEfforts,
+          busy,
+          error: formError
+        },
+        customProviderToEdit?.id ?? "add-custom-provider"
+      )
+    ] }) })
+  ] });
+};
+var ModelSettings_default = ModelSettings;
+export {
+  ModelSettings_default as default
+};
+//# sourceMappingURL=ModelSettings-IJ55QJQO.js.map