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

package/dist/ConnectorSettings-CLBEWGQJ.js

@@ -0,0 +1,898 @@
+"use client";
+import {
+  Button,
+  CatalogLogo,
+  CenteredModal,
+  SearchInput_default,
+  auiInputClass,
+  getErrorMessage,
+  useMCPAuth,
+  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/ConnectorSettings.tsx
+import { useCallback, useEffect as useEffect2, useMemo, useState as useState3 } from "react";
+
+// src/containers/SettingsBuilder/AddMcpServerForm.tsx
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var AUTH_OPTIONS = [
+  { value: "dcr", label: "OAuth" },
+  { value: "none", label: "None" },
+  { value: "header", label: "API Key" }
+];
+var inputClassName = auiInputClass("h-11 shadow-sm");
+var RequiredMark = () => /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-failure-bg", "aria-hidden": true, children: "*" });
+var AddMcpServerForm = ({ open, onOpenChange, onAdd, busy = false, error }) => {
+  const [name, setName] = useState("");
+  const [url, setUrl] = useState("");
+  const [authType, setAuthType] = useState("dcr");
+  const [apiKey, setApiKey] = useState("");
+  const [headerName, setHeaderName] = useState("");
+  const resetForm = () => {
+    setName("");
+    setUrl("");
+    setAuthType("dcr");
+    setApiKey("");
+    setHeaderName("");
+  };
+  const handleOpenChange = (nextOpen) => {
+    if (!nextOpen) resetForm();
+    onOpenChange(nextOpen);
+  };
+  const isValid = !!name.trim() && !!url.trim() && (authType !== "header" || !!apiKey.trim());
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (!isValid || busy) return;
+    const auth = authType === "header" ? {
+      type: "header",
+      apiKey: apiKey.trim(),
+      ...headerName.trim() ? { headerName: headerName.trim() } : {}
+    } : { type: authType };
+    try {
+      await onAdd({
+        name: name.trim(),
+        url: url.trim(),
+        auth
+      });
+      resetForm();
+      onOpenChange(false);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    CenteredModal,
+    {
+      open,
+      onOpenChange: handleOpenChange,
+      title: "Add MCP server",
+      description: "Point at a remote MCP endpoint. It then behaves like any other connector.",
+      contentSized: true,
+      headerIcon: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "flex size-11 shrink-0 items-center justify-center rounded-lg border border-border bg-secondary-bg text-text-primary",
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsx(Icon, { name: "mcp-server", className: "size-6" })
+        }
+      ),
+      children: /* @__PURE__ */ jsxs("form", { className: "flex flex-col overflow-y-auto p-5 md:p-6", onSubmit: (e) => void handleSubmit(e), children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { htmlFor: "mcp-server-name", className: "mb-1.5 block text-sm font-medium text-text-primary", children: [
+              "Name",
+              /* @__PURE__ */ jsx(RequiredMark, {})
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "mcp-server-name",
+                type: "text",
+                required: true,
+                value: name,
+                onChange: (event) => {
+                  setName(event.target.value);
+                },
+                placeholder: "analytics-postgres-mcp",
+                autoFocus: true,
+                className: inputClassName
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { htmlFor: "mcp-server-url", className: "mb-1.5 block text-sm font-medium text-text-primary", children: [
+              "URL",
+              /* @__PURE__ */ jsx(RequiredMark, {})
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "mcp-server-url",
+                type: "url",
+                required: true,
+                value: url,
+                onChange: (event) => {
+                  setUrl(event.target.value);
+                },
+                placeholder: "https://mcp.example.com/mcp",
+                className: inputClassName
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("fieldset", { children: [
+            /* @__PURE__ */ jsxs("legend", { className: "mb-1.5 text-sm font-medium text-text-primary", children: [
+              "Auth type",
+              /* @__PURE__ */ jsx(RequiredMark, {})
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex w-full flex-row rounded-md border border-border bg-secondary-bg/40 p-1", children: AUTH_OPTIONS.map((option) => /* @__PURE__ */ jsxs(
+              "label",
+              {
+                className: `flex h-8 flex-1 cursor-pointer items-center justify-center rounded-sm text-sm font-medium transition-colors ${authType === option.value ? "bg-dropdown-selected-item-bg text-dropdown-selected-item-text shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "radio",
+                      name: "mcp-auth-type",
+                      value: option.value,
+                      checked: authType === option.value,
+                      onChange: () => {
+                        setAuthType(option.value);
+                      },
+                      className: "sr-only"
+                    }
+                  ),
+                  option.label
+                ]
+              },
+              option.value
+            )) })
+          ] }),
+          authType === "dcr" ? /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 bg-secondary-bg/40 p-2 rounded-md", children: [
+            /* @__PURE__ */ jsx(Icon, { name: "info", className: "size-3.5 mt-1 text-text-secondary" }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-text-secondary leading-5.5", children: "Sign-in only \u2014 the server must support dynamic client registration. Manual OAuth (client ID / secret) isn't supported yet." })
+          ] }) : null,
+          authType === "header" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("label", { htmlFor: "mcp-server-api-key", className: "mb-1.5 block text-sm font-medium text-text-primary", children: [
+                "API key",
+                /* @__PURE__ */ jsx(RequiredMark, {})
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: "mcp-server-api-key",
+                  type: "password",
+                  required: true,
+                  value: apiKey,
+                  onChange: (event) => {
+                    setApiKey(event.target.value);
+                  },
+                  placeholder: "Paste the server token",
+                  className: inputClassName
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("label", { htmlFor: "mcp-server-header-name", className: "mb-1.5 block text-sm font-medium text-text-primary", children: [
+                "Header name ",
+                /* @__PURE__ */ jsx("span", { className: "font-normal text-text-secondary", children: "(optional)" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: "mcp-server-header-name",
+                  type: "text",
+                  value: headerName,
+                  onChange: (event) => {
+                    setHeaderName(event.target.value);
+                  },
+                  placeholder: "Authorization",
+                  className: inputClassName
+                }
+              )
+            ] })
+          ] }) : null
+        ] }),
+        /* @__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: "Add" })
+        ] })
+      ] })
+    }
+  );
+};
+var AddMcpServerForm_default = AddMcpServerForm;
+
+// src/containers/SettingsBuilder/authTypeLabels.ts
+var AUTH_TYPE_LABELS = {
+  dcr: "OAuth2",
+  header: "API Key",
+  none: "No Auth"
+};
+
+// src/containers/SettingsBuilder/ConnectorDetails.tsx
+import { useEffect, useLayoutEffect, useRef, useState as useState2 } from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ExpandableDescription({ text }) {
+  const contentRef = useRef(null);
+  const [expanded, setExpanded] = useState2(false);
+  const [canExpand, setCanExpand] = useState2(false);
+  const [maxHeight, setMaxHeight] = useState2(16);
+  useLayoutEffect(() => {
+    setExpanded(false);
+    setMaxHeight(16);
+  }, [text]);
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    if (!expanded) {
+      setMaxHeight(16);
+      setCanExpand(el.scrollWidth > el.clientWidth + 1);
+      return;
+    }
+    setMaxHeight(16);
+    const frame = requestAnimationFrame(() => {
+      setMaxHeight(el.scrollHeight);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [text, expanded]);
+  if (!text) return null;
+  return /* @__PURE__ */ jsxs2("div", { className: "relative min-w-0", children: [
+    /* @__PURE__ */ jsxs2(
+      "p",
+      {
+        ref: contentRef,
+        style: { maxHeight },
+        className: cn(
+          "mt-0.5 overflow-hidden font-mono text-xs leading-4 text-text-secondary transition-[max-height] duration-300 ease-in-out",
+          !expanded && "whitespace-nowrap",
+          !expanded && canExpand && "pr-[5.75rem]"
+        ),
+        children: [
+          text,
+          expanded && canExpand ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            " ",
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                className: "cursor-pointer font-mono text-xs font-medium text-text-primary/80 hover:text-text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring",
+                "aria-expanded": true,
+                onClick: () => setExpanded(false),
+                children: "Show less"
+              }
+            )
+          ] }) : null
+        ]
+      }
+    ),
+    !expanded && canExpand ? /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        className: "absolute top-0.5 right-0 cursor-pointer bg-card-bg pl-1.5 font-mono text-xs font-medium leading-4 text-text-primary/80 hover:text-text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring",
+        "aria-expanded": false,
+        onClick: () => setExpanded(true),
+        children: [
+          /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "text-text-secondary", children: "\u2026" }),
+          /* @__PURE__ */ jsx2("span", { className: "ml-1", children: "Read more" })
+        ]
+      }
+    ) : null
+  ] });
+}
+var ConnectorDetails = ({
+  connector,
+  onBack,
+  onConnectorRefreshed,
+  onDisconnect,
+  busy = false
+}) => {
+  const { connectorCatalog } = useCatalogServer();
+  const { handleAuthorize, isOAuthLoading } = useMCPAuth();
+  const [tools, setTools] = useState2([]);
+  const [toolsLoading, setToolsLoading] = useState2(true);
+  const [toolsError, setToolsError] = useState2(null);
+  const [refreshingAfterAuth, setRefreshingAfterAuth] = useState2(false);
+  useEffect(() => {
+    let cancelled = false;
+    setTools([]);
+    setToolsError(null);
+    setToolsLoading(true);
+    void connectorCatalog.getToolsByConnectorId({ id: connector.id }).then((result) => {
+      if (!cancelled) setTools(result);
+    }).catch((err) => {
+      if (!cancelled) {
+        setToolsError(getErrorMessage(err, "Failed to load connector tools"));
+      }
+    }).finally(() => {
+      if (!cancelled) setToolsLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [connector.authenticated, connector.id, connectorCatalog]);
+  const refreshAfterAuthentication = async () => {
+    setRefreshingAfterAuth(true);
+    setToolsError(null);
+    try {
+      const refreshedConnector = await connectorCatalog.getConnector({ id: connector.id });
+      onConnectorRefreshed(refreshedConnector);
+    } catch (err) {
+      setToolsError(getErrorMessage(err, "Failed to refresh connector details"));
+    } finally {
+      setRefreshingAfterAuth(false);
+    }
+  };
+  const connecting = isOAuthLoading || refreshingAfterAuth;
+  return /* @__PURE__ */ jsxs2("div", { className: "flex h-full flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        onClick: onBack,
+        className: "mb-3 inline-flex w-fit items-center gap-1 rounded-md py-1 pr-2 text-sm text-text-secondary hover:text-text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring",
+        children: [
+          /* @__PURE__ */ jsx2(Icon, { name: "chevron-left", className: "size-3.5" }),
+          "Connectors"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 flex-col overflow-y-auto pb-1", children: [
+      /* @__PURE__ */ jsxs2("header", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-secondary-bg",
+            "aria-hidden": true,
+            children: /* @__PURE__ */ jsx2(Icon, { name: "mcp-server", className: "size-5 text-text-primary" })
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx2("h4", { className: "text-lg font-semibold text-text-primary", children: connector.name }),
+          /* @__PURE__ */ jsxs2("div", { className: "mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm", children: [
+            /* @__PURE__ */ jsxs2(
+              "span",
+              {
+                className: cn(
+                  "flex items-center gap-1.5 text-xs font-medium",
+                  connector.authenticated ? "text-success-bg" : "text-text-primary"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx2(
+                    "span",
+                    {
+                      className: cn(
+                        "h-1.5 w-1.5 rounded-full",
+                        connector.authenticated ? "bg-success-bg" : "bg-primary-button-bg"
+                      )
+                    }
+                  ),
+                  connector.authenticated ? "Connected" : "Not authenticated"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs2("span", { className: "text-text-secondary", children: [
+              "\xB7 ",
+              connector.description
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx2("span", { className: "mt-2 inline-flex items-center rounded-full border border-border bg-secondary-bg/40 px-2 py-0.5 text-xs font-medium text-text-secondary", children: AUTH_TYPE_LABELS[connector.auth.type] ?? AUTH_TYPE_LABELS.none })
+        ] }),
+        connector.auth.type === "dcr" && !connector.authenticated ? /* @__PURE__ */ jsx2(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            type: "button",
+            disabled: busy || connecting,
+            onClick: () => {
+              void handleAuthorize(connector.id, (isSuccess) => {
+                if (isSuccess) void refreshAfterAuthentication();
+              });
+            },
+            children: connecting ? "Connecting\u2026" : "Connect"
+          }
+        ) : connector.auth.type === "dcr" && !connector.requiresAuth ? /* @__PURE__ */ jsx2(Button, { variant: "outline", size: "sm", type: "button", disabled: busy, onClick: onDisconnect, children: "Disconnect" }) : null
+      ] }),
+      /* @__PURE__ */ jsx2("section", { className: "mt-6", "aria-labelledby": "connector-tools-heading", children: toolsLoading ? /* @__PURE__ */ jsx2("div", { className: "rounded-xl border border-dashed border-border p-6 text-center text-sm text-text-secondary", children: "Loading tools\u2026" }) : toolsError ? /* @__PURE__ */ jsxs2("div", { className: "rounded-xl border border-failure-bg/30 bg-failure-bg/10 p-6 text-center text-sm text-failure-bg", children: [
+        toolsError,
+        connector.auth.type === "dcr" && !connector.authenticated && /* @__PURE__ */ jsx2("div", { className: "font-bold mt-1", children: "Click Connect and authenticate successfully to view tools." })
+      ] }) : tools.length > 0 ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsxs2("h5", { id: "connector-tools-heading", className: "mb-2 text-[0.8125rem] font-semibold text-text-primary", children: [
+          "Tools ",
+          /* @__PURE__ */ jsxs2("span", { className: "font-normal text-text-secondary", children: [
+            "\xB7 ",
+            tools.length
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "overflow-hidden rounded-xl border border-border bg-card-bg", children: tools.map((tool) => /* @__PURE__ */ jsx2(
+          "article",
+          {
+            className: "flex min-h-12 items-start gap-3 border-b border-border px-3 py-2 last:border-b-0",
+            children: /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx2("h6", { className: "text-sm font-medium text-text-primary", children: tool.name }),
+              /* @__PURE__ */ jsx2(ExpandableDescription, { text: tool.description })
+            ] })
+          },
+          tool.id
+        )) })
+      ] }) : /* @__PURE__ */ jsx2("div", { className: "rounded-xl border border-dashed border-border p-6 text-center text-sm text-text-secondary", children: "No tools reported for this connector." }) })
+    ] })
+  ] });
+};
+var ConnectorDetails_default = ConnectorDetails;
+
+// src/containers/SettingsBuilder/ConnectorSettings.tsx
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var ConnectorSettings = () => {
+  const { connectorCatalog } = useCatalogServer();
+  const toaster = useToasterOptional();
+  const [query, setQuery] = useState3("");
+  const [connectors, setConnectors] = useState3({
+    ordered: [],
+    authStatusById: /* @__PURE__ */ new Map()
+  });
+  const [loading, setLoading] = useState3(true);
+  const [error, setError] = useState3(null);
+  const [formError, setFormError] = useState3(null);
+  const [busy, setBusy] = useState3(false);
+  const [catalog, setCatalog] = useState3([]);
+  const [addMcpServerFormOpen, setAddMcpServerFormOpen] = useState3(false);
+  const [connectorAwaitingKey, setConnectorAwaitingKey] = useState3(null);
+  const [selectedConnector, setSelectedConnector] = useState3(null);
+  const [apiKey, setApiKey] = useState3("");
+  const connectorIconMap = useMemo(() => {
+    return (catalog ?? []).reduce(
+      (acc, entry) => {
+        acc[entry.name] = entry.logo ?? "";
+        return acc;
+      },
+      {}
+    );
+  }, [catalog]);
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [listed, available] = await Promise.all([
+        connectorCatalog.listConnectors(),
+        connectorCatalog.getConnectorCatalog()
+      ]);
+      setCatalog(available);
+      const configured = listed ?? [];
+      const seenIds = new Set(configured.map((connector) => connector.id));
+      const ordered = [
+        ...configured.map((connector) => ({ connector, isConfigured: true })),
+        ...available.filter((connector) => !seenIds.has(connector.id)).map((connector) => ({ connector, isConfigured: false }))
+      ];
+      setConnectors({
+        ordered,
+        authStatusById: new Map(
+          ordered.map((item) => [item.connector.id, item.isConfigured ? item.connector.authenticated : false])
+        )
+      });
+      setSelectedConnector((current) => current ? listed.find((item) => item.id === current.id) ?? null : null);
+    } catch (err) {
+      setError(getErrorMessage(err, "Failed to load connectors"));
+    } finally {
+      setLoading(false);
+    }
+  }, [connectorCatalog]);
+  useEffect2(() => {
+    void refresh();
+  }, [refresh]);
+  const normalizedQuery = query.trim().toLowerCase();
+  const matchingConnectors = useMemo(() => {
+    if (!normalizedQuery) return connectors.ordered;
+    return connectors.ordered.filter(({ connector }) => {
+      return connector.name.toLowerCase().includes(normalizedQuery) || (connector.description?.toLowerCase().includes(normalizedQuery) ?? false) || connector.url.toLowerCase().includes(normalizedQuery);
+    });
+  }, [connectors.ordered, normalizedQuery]);
+  const matchingConnected = useMemo(() => {
+    const result = [];
+    for (const item of matchingConnectors) {
+      if (item.isConfigured) {
+        const authenticated = connectors.authStatusById.get(item.connector.id) ?? item.connector.authenticated;
+        result.push(
+          authenticated === item.connector.authenticated ? item.connector : { ...item.connector, authenticated }
+        );
+      }
+    }
+    return result;
+  }, [connectors.authStatusById, matchingConnectors]);
+  const availableConnectors = useMemo(() => {
+    const result = [];
+    for (const item of matchingConnectors) {
+      if (!item.isConfigured) result.push(item.connector);
+    }
+    return result;
+  }, [matchingConnectors]);
+  const runMutation = async (fn, setMutationError = setError) => {
+    setBusy(true);
+    setError(null);
+    try {
+      await fn();
+      await refresh();
+    } catch (err) {
+      setMutationError(getErrorMessage(err, "Request failed"));
+      throw err;
+    } finally {
+      setBusy(false);
+    }
+  };
+  const closeApiKeyModal = () => {
+    setConnectorAwaitingKey(null);
+    setApiKey("");
+    setFormError(null);
+  };
+  const createFromCatalog = async (entry, authOverride) => {
+    const auth = authOverride ?? (entry.auth.type === "header" ? {
+      type: "header",
+      ...entry.auth.headerName ? { headerName: entry.auth.headerName } : {}
+    } : entry.auth.type === "dcr" ? { type: "dcr" } : { type: "none" });
+    await connectorCatalog.createConnector({
+      name: entry.name,
+      url: entry.url,
+      auth
+    });
+  };
+  const handleConnect = (entry) => {
+    if (entry.auth.type === "header") {
+      setApiKey("");
+      setFormError(null);
+      setConnectorAwaitingKey(entry);
+      return;
+    }
+    void runMutation(async () => {
+      await createFromCatalog(entry);
+    }).catch(() => {
+    });
+  };
+  const handleApiKeySubmit = (event) => {
+    event.preventDefault();
+    if (!connectorAwaitingKey || !apiKey.trim()) return;
+    const entry = connectorAwaitingKey;
+    setFormError(null);
+    void runMutation(async () => {
+      const auth = {
+        type: "header",
+        apiKey: apiKey.trim(),
+        ...entry.auth.type === "header" && entry.auth.headerName ? { headerName: entry.auth.headerName } : {}
+      };
+      const existing = connectors.ordered.find(({ connector }) => connector.id === entry.id);
+      const existingConnector = existing?.isConfigured ? existing.connector : void 0;
+      if (existingConnector) {
+        await connectorCatalog.updateConnector({
+          id: existingConnector.id,
+          name: existingConnector.name,
+          url: existingConnector.url,
+          auth
+        });
+      } else {
+        await createFromCatalog(entry, auth);
+      }
+      closeApiKeyModal();
+      setTimeout(() => {
+        toaster?.showSuccess({ title: `${entry.name} ${existingConnector ? "updated" : "connected"}` });
+      }, 100);
+    }, setFormError).catch(() => {
+    });
+  };
+  const handleAddMcpServer = async (draft) => {
+    setFormError(null);
+    await runMutation(async () => {
+      await connectorCatalog.createConnector({
+        name: draft.name,
+        url: draft.url,
+        auth: draft.auth
+      });
+    }, setFormError);
+    setTimeout(() => {
+      toaster?.showSuccess({ title: `${draft.name} added` });
+    }, 0);
+  };
+  const handleDisconnect = (connector) => {
+    void runMutation(async () => {
+      await connectorCatalog.disconnectConnector({ id: connector.id });
+      setSelectedConnector(null);
+    }).catch(() => {
+    });
+  };
+  const handleConnectorRefreshed = (refreshedConnector) => {
+    setSelectedConnector((current) => current?.id === refreshedConnector.id ? refreshedConnector : current);
+    setConnectors((current) => {
+      const authStatusById = new Map(current.authStatusById);
+      authStatusById.set(refreshedConnector.id, refreshedConnector.authenticated);
+      return {
+        ordered: current.ordered.map(
+          (item) => item.isConfigured && item.connector.id === refreshedConnector.id ? { connector: refreshedConnector, isConfigured: true } : item
+        ),
+        authStatusById
+      };
+    });
+  };
+  const renderConnector = (connector, isConnected) => {
+    const logoSrc = connectorIconMap[connector.name];
+    const content = /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-secondary-bg",
+          "aria-hidden": true,
+          children: logoSrc ? /* @__PURE__ */ jsx3(CatalogLogo, { src: logoSrc, alt: connector.name, className: "size-4.5" }) : /* @__PURE__ */ jsx3(Icon, { name: "mcp-server", className: "size-4.5 text-text-primary" })
+        }
+      ),
+      /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx3("h5", { className: "truncate text-sm font-medium text-text-primary", children: connector.name }),
+        /* @__PURE__ */ jsx3("p", { className: "mt-0.5 line-clamp-2 text-sm text-text-secondary sm:truncate", children: connector.description })
+      ] })
+    ] });
+    const rowClassName = "flex min-h-16 w-full items-center gap-3 border-b border-border p-3 text-left last:border-b-0";
+    if (isConnected) {
+      return /* @__PURE__ */ jsxs3(
+        "article",
+        {
+          className: `${rowClassName} cursor-pointer transition-colors hover:bg-ghost-button-hover/60`,
+          onClick: () => {
+            setSelectedConnector(connector);
+          },
+          children: [
+            /* @__PURE__ */ jsx3("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: content }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs3(
+                "span",
+                {
+                  className: cn(
+                    "flex items-center gap-1.5 rounded-full border border-border bg-secondary-bg/40 px-2 py-0.5 text-xs font-medium",
+                    connector.authenticated ? "text-success-bg" : "text-text-primary"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      "span",
+                      {
+                        className: cn(
+                          "h-1.5 w-1.5 rounded-full",
+                          connector.authenticated ? "bg-success-bg" : "bg-primary-button-bg"
+                        )
+                      }
+                    ),
+                    connector.authenticated ? "Connected" : "Added"
+                  ]
+                }
+              ) }),
+              connector.auth.type === "header" ? /* @__PURE__ */ jsxs3(
+                Button,
+                {
+                  variant: "secondary",
+                  size: "sm",
+                  type: "button",
+                  disabled: busy,
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    setApiKey("");
+                    setConnectorAwaitingKey(connector);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx3(Icon, { name: "wrench", className: "size-3" }),
+                    "Replace Key"
+                  ]
+                }
+              ) : null,
+              /* @__PURE__ */ jsx3(Icon, { name: "chevron-right", className: "size-4" })
+            ] })
+          ]
+        },
+        connector.id
+      );
+    }
+    return /* @__PURE__ */ jsx3("article", { className: rowClassName, children: content }, connector.id);
+  };
+  const renderCatalogEntry = (entry) => {
+    const logoSrc = connectorIconMap[entry.name];
+    return /* @__PURE__ */ jsxs3(
+      "article",
+      {
+        className: "flex min-h-16 w-full items-center gap-3 border-b border-border p-3 text-left last:border-b-0",
+        children: [
+          /* @__PURE__ */ jsx3(
+            "span",
+            {
+              className: "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-secondary-bg",
+              "aria-hidden": true,
+              children: logoSrc ? /* @__PURE__ */ jsx3(CatalogLogo, { src: logoSrc, alt: entry.name, className: "size-4.5" }) : /* @__PURE__ */ jsx3(Icon, { name: "mcp-server", className: "size-4.5 text-text-primary" })
+            }
+          ),
+          /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx3("h5", { className: "truncate text-sm font-medium text-text-primary", children: entry.name }),
+            /* @__PURE__ */ jsx3("p", { className: "mt-0.5 line-clamp-2 text-sm text-text-secondary sm:truncate", children: entry.description ?? entry.url })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx3("span", { className: "hidden text-xs text-text-secondary sm:inline", children: AUTH_TYPE_LABELS[entry.auth.type] ?? AUTH_TYPE_LABELS.none }),
+            /* @__PURE__ */ jsx3(
+              Button,
+              {
+                variant: "secondary",
+                size: "sm",
+                type: "button",
+                disabled: busy,
+                onClick: () => {
+                  handleConnect(entry);
+                },
+                children: entry.auth.type === "dcr" ? "Add" : "Connect"
+              }
+            )
+          ] })
+        ]
+      },
+      entry.id
+    );
+  };
+  const isReplacingKey = useMemo(() => {
+    return connectorAwaitingKey !== null && connectors.ordered.some(
+      (item) => item.isConfigured && item.connector.id === connectorAwaitingKey.id
+    );
+  }, [connectorAwaitingKey, connectors.ordered]);
+  if (selectedConnector) {
+    return /* @__PURE__ */ jsx3(
+      ConnectorDetails_default,
+      {
+        connector: selectedConnector,
+        busy,
+        onBack: () => {
+          setSelectedConnector(null);
+        },
+        onConnectorRefreshed: handleConnectorRefreshed,
+        onDisconnect: () => {
+          handleDisconnect(selectedConnector);
+        }
+      }
+    );
+  }
+  const hasMatches = matchingConnected.length > 0 || availableConnectors.length > 0;
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx3("h3", { className: "text-xl font-semibold tracking-tight text-text-primary", children: "Connectors" }),
+    /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm text-text-secondary", children: "Connect tools your agents can use." }),
+    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 connectors" }) }),
+        /* @__PURE__ */ jsxs3(
+          Button,
+          {
+            variant: "secondary",
+            type: "button",
+            onClick: () => {
+              setFormError(null);
+              setAddMcpServerFormOpen(true);
+            },
+            children: [
+              /* @__PURE__ */ jsx3(Icon, { name: "plus", size: "1rem", className: "mr-1" }),
+              "Add MCP Server"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex flex-1 flex-col gap-5 overflow-y-auto pb-1", children: [
+        loading ? /* @__PURE__ */ jsx3("p", { className: "py-8 text-center text-sm text-text-secondary", children: "Loading\u2026" }) : null,
+        !loading && matchingConnected.length > 0 ? /* @__PURE__ */ jsxs3("section", { "aria-labelledby": "connected-connectors-heading", children: [
+          /* @__PURE__ */ jsxs3(
+            "h4",
+            {
+              id: "connected-connectors-heading",
+              className: "mb-2 text-[0.8125rem] font-semibold uppercase text-text-secondary",
+              children: [
+                "Configured \xB7 ",
+                matchingConnected.length
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx3("div", { className: "overflow-hidden rounded-xl border border-border bg-card-bg", children: matchingConnected.map((connector) => renderConnector(connector, true)) })
+        ] }) : null,
+        !loading && availableConnectors.length > 0 ? /* @__PURE__ */ jsxs3("section", { "aria-labelledby": "available-connectors-heading", children: [
+          /* @__PURE__ */ jsxs3(
+            "h4",
+            {
+              id: "available-connectors-heading",
+              className: "mb-2 text-[0.8125rem] font-semibold uppercase text-text-secondary",
+              children: [
+                "Available \xB7 ",
+                availableConnectors.length
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx3("div", { className: "overflow-hidden rounded-xl border border-border bg-card-bg", children: availableConnectors.map((entry) => renderCatalogEntry(entry)) })
+        ] }) : null,
+        !loading && !hasMatches ? /* @__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: query.trim() ? `No connectors match \u201C${query.trim()}\u201D.` : "No connectors yet." }) : null
+      ] }),
+      /* @__PURE__ */ jsx3(
+        CenteredModal,
+        {
+          open: connectorAwaitingKey !== null,
+          onOpenChange: (open) => {
+            if (!open) closeApiKeyModal();
+          },
+          title: `${isReplacingKey ? "Replace key for" : "Connect"} ${connectorAwaitingKey?.name ?? "connector"}`,
+          description: connectorAwaitingKey?.url,
+          contentSized: true,
+          className: "md:max-w-xl",
+          children: /* @__PURE__ */ jsxs3("form", { onSubmit: handleApiKeySubmit, children: [
+            /* @__PURE__ */ jsxs3("div", { className: "space-y-5 px-5 py-5", children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    className: "flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-border bg-secondary-bg",
+                    "aria-hidden": true,
+                    children: /* @__PURE__ */ jsx3(Icon, { name: "mcp-server", className: "size-6 text-text-primary" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx3("p", { className: "font-medium text-text-primary", children: connectorAwaitingKey?.name }),
+                  /* @__PURE__ */ jsx3("p", { className: "truncate text-sm text-text-secondary", children: connectorAwaitingKey?.description })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs3("div", { children: [
+                /* @__PURE__ */ jsx3(
+                  "label",
+                  {
+                    htmlFor: "connector-api-key",
+                    className: "mb-2 block text-xs font-semibold uppercase tracking-wide text-text-secondary",
+                    children: "API key / token"
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "input",
+                  {
+                    id: "connector-api-key",
+                    type: "password",
+                    value: apiKey,
+                    onChange: (event) => {
+                      setApiKey(event.target.value);
+                    },
+                    placeholder: `Paste the token from ${connectorAwaitingKey?.name ?? "the provider"}`,
+                    autoFocus: true,
+                    required: true,
+                    className: auiInputClass("h-11")
+                  }
+                )
+              ] }),
+              formError ? /* @__PURE__ */ jsx3("p", { className: "text-failure-bg text-sm", children: formError }) : null
+            ] }),
+            /* @__PURE__ */ jsxs3("footer", { className: "flex justify-end gap-2 border-t border-border px-5 py-4", children: [
+              /* @__PURE__ */ jsx3(Button, { variant: "ghost", type: "button", onClick: closeApiKeyModal, disabled: busy, children: "Cancel" }),
+              /* @__PURE__ */ jsx3(Button, { type: "submit", disabled: !apiKey.trim() || busy, children: isReplacingKey ? "Replace Key" : "Connect" })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        AddMcpServerForm_default,
+        {
+          open: addMcpServerFormOpen,
+          onOpenChange: (open) => {
+            setAddMcpServerFormOpen(open);
+            if (!open) setFormError(null);
+          },
+          onAdd: handleAddMcpServer,
+          busy,
+          error: formError
+        }
+      )
+    ] }) })
+  ] });
+};
+var ConnectorSettings_default = ConnectorSettings;
+export {
+  ConnectorSettings_default as default
+};
+//# sourceMappingURL=ConnectorSettings-CLBEWGQJ.js.map