@red-hat-developer-hub/backstage-plugin-intelligent-assistant 3.0.0

package/dist/components/McpServersSettings.esm.js

@@ -0,0 +1,953 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useApi, configApiRef, fetchApiRef } from '@backstage/core-plugin-api';
+import { usePermission } from '@backstage/plugin-permission-react';
+import { makeStyles } from '@material-ui/core';
+import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { Title, Button, Alert, Switch, Tooltip, Modal } from '@patternfly/react-core';
+import { TimesIcon, SortAmountDownIcon, SortAmountUpIcon, PencilAltIcon, LockIcon, KeyIcon, InfoCircleIcon, ExclamationCircleIcon, CheckCircleIcon } from '@patternfly/react-icons';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { lightspeedMcpManagePermission } from '@red-hat-developer-hub/backstage-plugin-intelligent-assistant-common';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
+
+const SAVED_TOKEN_MASK = "********************";
+const useStyles = makeStyles((theme) => ({
+  "@global": {
+    ".pf-v6-c-backdrop": {
+      zIndex: "1400 !important"
+    },
+    ".pf-v5-c-backdrop": {
+      zIndex: "1400 !important"
+    }
+  },
+  root: {
+    padding: 0,
+    height: "100%",
+    minHeight: "100%",
+    width: "100%",
+    overflow: "auto"
+  },
+  headerRow: {
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    marginBottom: theme.spacing(2),
+    marginTop: theme.spacing(2),
+    marginLeft: theme.spacing(3),
+    marginRight: theme.spacing(2)
+  },
+  selectedCount: {
+    color: theme.palette.text.secondary,
+    marginTop: theme.spacing(0.5),
+    fontSize: "0.75rem"
+  },
+  title: {
+    fontSize: "1.125rem"
+  },
+  closeButton: {
+    marginTop: -theme.spacing(1),
+    marginRight: -theme.spacing(1),
+    color: theme.palette.text.primary
+  },
+  nameHeaderButton: {
+    paddingLeft: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    marginLeft: "-0.85rem",
+    fontWeight: 600,
+    fontSize: "0.75rem",
+    lineHeight: "1.25rem",
+    minHeight: "auto",
+    color: theme.palette.text.primary,
+    textDecoration: "none !important",
+    display: "inline-flex",
+    alignItems: "center"
+  },
+  nameHeaderText: {
+    paddingLeft: "7px",
+    fontSize: "0.75rem",
+    lineHeight: "1.25rem",
+    fontWeight: 600
+  },
+  nameCell: {
+    paddingLeft: "8px !important"
+  },
+  statusHeader: {
+    paddingLeft: "0 !important"
+  },
+  statusColumnCell: {
+    paddingLeft: "0 !important"
+  },
+  rowName: {
+    fontSize: "1rem",
+    fontWeight: 500,
+    whiteSpace: "nowrap"
+  },
+  nameValue: {
+    fontSize: "0.875rem",
+    fontWeight: 500
+  },
+  statusCell: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    whiteSpace: "nowrap"
+  },
+  statusValue: {
+    fontSize: "0.875rem"
+  },
+  statusOk: {
+    color: "#147878"
+  },
+  statusWarn: {
+    color: "#B1380B"
+  },
+  statusDisabled: {
+    color: theme.palette.type === "dark" ? "var(--pf-t--global--text--color--subtle, #c7c7c7)" : "var(--pf-t--global--text--color--subtle, #4d4d4d)"
+  },
+  actionButton: {
+    color: theme.palette.text.secondary,
+    opacity: 0,
+    transition: "opacity 0.15s ease-in-out"
+  },
+  tableRow: {
+    "&:hover $actionButton, &:focus-within $actionButton": {
+      opacity: 1
+    }
+  },
+  modalDescription: {
+    color: theme.palette.text.secondary,
+    fontSize: "0.875rem",
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2)
+  },
+  modalContent: {
+    position: "relative",
+    padding: theme.spacing(3, 0, 3, 3),
+    marginRight: theme.spacing(3)
+  },
+  modalCustomCloseButton: {
+    position: "absolute",
+    top: theme.spacing(2),
+    right: theme.spacing(-0.5),
+    color: theme.palette.text.primary
+  },
+  modalHeading: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.75),
+    marginBottom: theme.spacing(1),
+    fontSize: "1.25rem",
+    lineHeight: 1.4,
+    fontWeight: 500,
+    "& .v5-MuiTypography-root": {
+      fontSize: "1.25rem",
+      lineHeight: 1.4,
+      fontWeight: 500
+    }
+  },
+  tokenRow: {
+    position: "relative"
+  },
+  tokenClearButton: {
+    position: "absolute",
+    right: theme.spacing(1),
+    top: "50%",
+    transform: "translateY(-50%)",
+    zIndex: 1,
+    color: theme.palette.action.active
+  },
+  tokenHelper: {
+    color: theme.palette.text.secondary,
+    fontSize: "0.75rem",
+    marginTop: theme.spacing(0.5)
+  },
+  tokenInput: {
+    marginTop: "1rem !important",
+    "& .MuiOutlinedInput-root": {
+      height: "3.5rem"
+    },
+    "& .MuiOutlinedInput-input": {
+      padding: "0 0.875rem"
+    },
+    "& .MuiInputLabel-root": {
+      fontSize: "0.875rem"
+    }
+  },
+  tokenInputSuccess: {
+    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
+      borderColor: "#3E8635",
+      borderWidth: 1
+    },
+    "& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": {
+      borderColor: "#3E8635"
+    },
+    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
+      borderColor: "#3E8635"
+    },
+    "& .MuiInputLabel-root.Mui-focused": {
+      color: "#3E8635"
+    }
+  },
+  tokenInputError: {
+    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
+      borderColor: "#C9190B",
+      borderWidth: 1
+    },
+    "& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": {
+      borderColor: "#C9190B"
+    },
+    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
+      borderColor: "#C9190B"
+    },
+    "& .MuiInputLabel-root.Mui-focused": {
+      color: "#C9190B"
+    }
+  },
+  modalActions: {
+    marginTop: theme.spacing(3),
+    display: "flex",
+    gap: theme.spacing(1)
+  },
+  modalActionButton: {
+    fontSize: "1rem"
+  },
+  modalCancelButton: {
+    fontSize: "1rem"
+  },
+  forgetTokenButton: {
+    fontSize: "1rem",
+    border: "1px solid #B1380B",
+    borderRadius: "1.25rem",
+    padding: "0.375rem 1rem",
+    color: "#B1380B",
+    backgroundColor: "transparent",
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    boxShadow: "none",
+    "&:hover": {
+      backgroundColor: "rgba(201, 25, 11, 0.08)"
+    }
+  },
+  configureModal: {
+    "& .pf-v6-c-modal-box": {
+      width: "608px",
+      maxWidth: "608px",
+      height: "326px",
+      minHeight: "326px"
+    },
+    "& .pf-v6-c-modal-box__title, & .pf-v6-c-modal-box__title-text, & .pf-v5-c-modal-box__title, & .pf-v5-c-modal-box__title-text": {
+      fontSize: "1.25rem !important",
+      lineHeight: "1.4 !important"
+    },
+    "& .pf-v6-c-modal-box__close": {
+      display: "none"
+    },
+    "& .pf-v5-c-modal-box__close": {
+      display: "none"
+    },
+    "& .pf-v6-c-button__icon": {
+      paddingTop: "5px !important",
+      fontSize: "1.25rem !important"
+    }
+  },
+  toggleCell: {
+    paddingRight: "0 !important"
+  },
+  table: {
+    width: "100%",
+    backgroundColor: "transparent",
+    "--pf-v6-c-table--BackgroundColor": "transparent",
+    "--pf-v5-c-table--BackgroundColor": "transparent",
+    "& table, & thead, & tbody, & tr, & th, & td": {
+      backgroundColor: "transparent !important"
+    },
+    "& th": {
+      borderBottom: 0,
+      fontSize: "0.75rem",
+      fontWeight: 600,
+      color: theme.palette.text.primary,
+      whiteSpace: "nowrap",
+      textAlign: "left"
+    },
+    "& td": {
+      borderBottom: 0,
+      paddingTop: theme.spacing(1.5),
+      paddingBottom: theme.spacing(1.5),
+      verticalAlign: "middle"
+    }
+  },
+  alert: {
+    marginLeft: theme.spacing(3),
+    marginRight: theme.spacing(3),
+    marginBottom: theme.spacing(2)
+  }
+}));
+const getStatusIcon = (status, className) => {
+  if (status === "tokenRequired") return /* @__PURE__ */ jsx(KeyIcon, { className });
+  if (status === "disabled") return /* @__PURE__ */ jsx(InfoCircleIcon, { className });
+  if (status === "failed")
+    return /* @__PURE__ */ jsx(ExclamationCircleIcon, { className });
+  return /* @__PURE__ */ jsx(CheckCircleIcon, { className });
+};
+const getDisplayStatus = (server) => {
+  if (!server.hasToken) return "tokenRequired";
+  if (!server.enabled) return "disabled";
+  if (server.status === "error") return "failed";
+  if (server.status === "connected") return "ok";
+  return "unknown";
+};
+const toUiServer = (server, validationError) => ({
+  id: server.name,
+  name: server.name,
+  url: server.url,
+  enabled: server.enabled,
+  status: server.status,
+  toolCount: server.toolCount,
+  hasToken: server.hasToken,
+  hasUserToken: server.hasUserToken,
+  validationError: server.status === "error" ? validationError : void 0,
+  auth: server.auth
+});
+const McpServersSettings = ({
+  onClose,
+  backgroundColor
+}) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+  const configApi = useApi(configApiRef);
+  const fetchApi = useApi(fetchApiRef);
+  const mcpManagePermission = usePermission({
+    permission: lightspeedMcpManagePermission
+  });
+  const canManageMcp = mcpManagePermission.allowed;
+  const [servers, setServers] = useState([]);
+  const [sortAsc, setSortAsc] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState({});
+  const [error, setError] = useState(null);
+  const [editingServerId, setEditingServerId] = useState(null);
+  const [tokenInputValue, setTokenInputValue] = useState("");
+  const [hasSavedTokenInModal, setHasSavedTokenInModal] = useState(false);
+  const [canRemovePersonalToken, setCanRemovePersonalToken] = useState(false);
+  const [tokenValidationState, setTokenValidationState] = useState("idle");
+  const [tokenValidationMessage, setTokenValidationMessage] = useState("");
+  const getBaseUrl = useCallback(() => {
+    return `${configApi.getString("backend.baseUrl")}/api/intelligent-assistant`;
+  }, [configApi]);
+  const fetchJson = useCallback(
+    async (url, init) => {
+      const response = await fetchApi.fetch(url, {
+        headers: {
+          "Content-Type": "application/json"
+        },
+        ...init
+      });
+      if (!response.ok) {
+        let message = `${response.status} ${response.statusText}`;
+        try {
+          const bodyText = await response.text();
+          if (bodyText) {
+            const parsed = JSON.parse(bodyText);
+            if (parsed?.error) {
+              message = parsed.error;
+            }
+          }
+        } catch {
+        }
+        throw new Error(message);
+      }
+      const text = await response.text();
+      return text ? JSON.parse(text) : {};
+    },
+    [fetchApi]
+  );
+  const validateServer = useCallback(
+    async (serverName) => {
+      const baseUrl = getBaseUrl();
+      const data = await fetchJson(
+        `${baseUrl}/mcp-servers/${encodeURIComponent(serverName)}/validate`,
+        {
+          method: "POST"
+        }
+      );
+      setServers(
+        (prev) => prev.map(
+          (server) => server.name === serverName ? {
+            ...server,
+            status: data.status,
+            toolCount: data.toolCount,
+            validationError: data.status === "error" ? data.validation?.error ?? "Validation failed" : void 0
+          } : server
+        )
+      );
+      return data;
+    },
+    [fetchJson, getBaseUrl]
+  );
+  const validateCredentials = useCallback(
+    async (url, token) => {
+      const baseUrl = getBaseUrl();
+      return await fetchJson(
+        `${baseUrl}/mcp-servers/validate`,
+        {
+          method: "POST",
+          body: JSON.stringify({ url, token })
+        }
+      );
+    },
+    [fetchJson, getBaseUrl]
+  );
+  const loadServers = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const baseUrl = getBaseUrl();
+      const data = await fetchJson(
+        `${baseUrl}/mcp-servers`
+      );
+      const uiServers = (data.servers ?? []).map((server) => toUiServer(server));
+      setServers(uiServers);
+      if (canManageMcp) {
+        const serversToValidate = uiServers.filter((server) => server.hasToken);
+        void Promise.allSettled(
+          serversToValidate.map(async (server) => {
+            try {
+              await validateServer(server.name);
+            } catch (validationError) {
+              setError(
+                (prev) => prev ?? (validationError instanceof Error ? validationError.message : `Failed to validate ${server.name}`)
+              );
+            }
+          })
+        );
+      }
+    } catch (e) {
+      setError(
+        e instanceof Error ? e.message : "Failed to load MCP server settings"
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }, [canManageMcp, fetchJson, getBaseUrl, validateServer]);
+  useEffect(() => {
+    loadServers();
+  }, [loadServers]);
+  const patchServer = useCallback(
+    async (serverName, body) => {
+      if (!canManageMcp) {
+        return;
+      }
+      setError(null);
+      setIsSaving((prev) => ({ ...prev, [serverName]: true }));
+      try {
+        const baseUrl = getBaseUrl();
+        const data = await fetchJson(
+          `${baseUrl}/mcp-servers/${encodeURIComponent(serverName)}`,
+          {
+            method: "PATCH",
+            body: JSON.stringify(body)
+          }
+        );
+        if (data.server) {
+          setServers(
+            (prev) => prev.map(
+              (server) => server.name === serverName ? toUiServer(data.server, data.validation?.error) : server
+            )
+          );
+        } else {
+          await loadServers();
+        }
+      } catch (e) {
+        setError(
+          e instanceof Error ? e.message : `Failed to update ${serverName} settings`
+        );
+        throw e;
+      } finally {
+        setIsSaving((prev) => ({ ...prev, [serverName]: false }));
+      }
+    },
+    [canManageMcp, fetchJson, getBaseUrl, loadServers]
+  );
+  const editingServer = useMemo(
+    () => servers.find((server) => server.id === editingServerId),
+    [servers, editingServerId]
+  );
+  const selectedCount = useMemo(
+    () => servers.filter((server) => {
+      const displayStatus = getDisplayStatus(server);
+      const isUnavailable = displayStatus === "failed" || displayStatus === "tokenRequired";
+      return server.enabled && !isUnavailable;
+    }).length,
+    [servers]
+  );
+  const sortedServers = useMemo(() => {
+    const next = [...servers];
+    next.sort(
+      (a, b) => sortAsc ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
+    );
+    return next;
+  }, [servers, sortAsc]);
+  const getDisplayDetail = useCallback(
+    (server, displayStatus) => {
+      if (displayStatus === "disabled")
+        return t("mcp.settings.status.disabled");
+      if (displayStatus === "tokenRequired")
+        return t("mcp.settings.status.tokenRequired");
+      if (displayStatus === "failed") return t("mcp.settings.status.failed");
+      if (displayStatus === "ok") {
+        if (server.toolCount === 1) {
+          return t("mcp.settings.status.oneTool", {
+            count: String(server.toolCount)
+          });
+        }
+        return t("mcp.settings.status.manyTools", {
+          count: String(server.toolCount)
+        });
+      }
+      return t("mcp.settings.status.unknown");
+    },
+    [t]
+  );
+  const closeConfigureModal = useCallback(() => {
+    setEditingServerId(null);
+    setTokenInputValue("");
+    setHasSavedTokenInModal(false);
+    setCanRemovePersonalToken(false);
+    setTokenValidationState("idle");
+    setTokenValidationMessage("");
+  }, []);
+  const openConfigureModal = (server) => {
+    setEditingServerId(server.id);
+    const hasSavedToken = server.hasToken;
+    setHasSavedTokenInModal(hasSavedToken);
+    setCanRemovePersonalToken(server.hasUserToken);
+    setTokenInputValue(hasSavedToken ? SAVED_TOKEN_MASK : "");
+    if (server.status === "error" && server.validationError) {
+      setTokenValidationState("error");
+      setTokenValidationMessage(server.validationError);
+    } else {
+      setTokenValidationState("idle");
+      setTokenValidationMessage("");
+    }
+  };
+  const onTokenInputChange = (value) => {
+    if (hasSavedTokenInModal && value !== SAVED_TOKEN_MASK) {
+      setHasSavedTokenInModal(false);
+    }
+    setTokenInputValue(value);
+    setTokenValidationState("idle");
+    setTokenValidationMessage("");
+  };
+  const clearTokenInput = () => {
+    if (hasSavedTokenInModal) {
+      setHasSavedTokenInModal(false);
+    }
+    setTokenInputValue("");
+    setTokenValidationState("idle");
+    setTokenValidationMessage("");
+  };
+  let tokenInputStateClass = "";
+  let tokenHelperColor;
+  if (tokenValidationState === "success") {
+    tokenInputStateClass = classes.tokenInputSuccess;
+    tokenHelperColor = "#3E8635";
+  } else if (tokenValidationState === "error") {
+    tokenInputStateClass = classes.tokenInputError;
+    tokenHelperColor = "#C9190B";
+  }
+  let tokenInputAdornment = /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      "aria-label": t("mcp.settings.token.clearAriaLabel"),
+      size: "small",
+      className: classes.tokenClearButton,
+      onClick: clearTokenInput,
+      children: /* @__PURE__ */ jsx(
+        CancelOutlinedIcon,
+        {
+          style: {
+            fontSize: 24,
+            width: 24,
+            height: 24
+          }
+        }
+      )
+    }
+  );
+  if (tokenValidationState === "success") {
+    tokenInputAdornment = /* @__PURE__ */ jsx(
+      CheckCircleIcon,
+      {
+        style: {
+          color: "#3E8635",
+          fontSize: 20,
+          width: 20,
+          height: 20,
+          marginRight: 3
+        }
+      }
+    );
+  } else if (tokenValidationState === "error") {
+    tokenInputAdornment = /* @__PURE__ */ jsx(
+      ExclamationCircleIcon,
+      {
+        style: {
+          color: "#C9190B",
+          fontSize: 20,
+          width: 20,
+          height: 20,
+          marginRight: 3
+        }
+      }
+    );
+  }
+  const isUsingOrganizationCredentialInModal = hasSavedTokenInModal && !canRemovePersonalToken;
+  const saveServerToken = useCallback(async () => {
+    if (!editingServer || !canManageMcp) return;
+    if (hasSavedTokenInModal && tokenInputValue === SAVED_TOKEN_MASK) {
+      closeConfigureModal();
+      return;
+    }
+    const token = tokenInputValue.trim();
+    const hasToken = token.length > 0;
+    setTokenValidationState("validating");
+    setTokenValidationMessage(t("mcp.settings.token.validating"));
+    try {
+      if (hasToken) {
+        if (!editingServer.url) {
+          setTokenValidationState("error");
+          setTokenValidationMessage(
+            t("mcp.settings.token.urlUnavailableForValidation")
+          );
+          return;
+        }
+        const credentialValidation = await validateCredentials(
+          editingServer.url,
+          token
+        );
+        if (!credentialValidation.valid) {
+          setTokenValidationState("error");
+          setTokenValidationMessage(
+            credentialValidation.error ?? t("mcp.settings.token.invalidCredentials")
+          );
+          return;
+        }
+      }
+      setTokenValidationMessage(t("mcp.settings.token.savingAndValidating"));
+      await patchServer(editingServer.name, {
+        enabled: editingServer.enabled,
+        token: hasToken ? token : null
+      });
+      const validationResult = await validateServer(editingServer.name);
+      if (validationResult.status === "error") {
+        setTokenValidationState("error");
+        setTokenValidationMessage(
+          validationResult.validation?.error ?? t("mcp.settings.token.validationFailed")
+        );
+        return;
+      }
+      setTokenValidationState("success");
+      setTokenValidationMessage(t("mcp.settings.token.connectionSuccessful"));
+      closeConfigureModal();
+    } catch (e) {
+      setTokenValidationState("error");
+      setTokenValidationMessage(
+        e instanceof Error ? e.message : `Failed to update ${editingServer.name} token`
+      );
+    }
+  }, [
+    canManageMcp,
+    closeConfigureModal,
+    editingServer,
+    hasSavedTokenInModal,
+    patchServer,
+    t,
+    tokenInputValue,
+    validateCredentials,
+    validateServer
+  ]);
+  const removePersonalToken = () => {
+    setHasSavedTokenInModal(false);
+    setCanRemovePersonalToken(false);
+    setTokenInputValue("");
+    setTokenValidationState("idle");
+    setTokenValidationMessage("");
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes.root,
+      style: backgroundColor ? { backgroundColor } : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: classes.headerRow, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Title, { headingLevel: "h2", size: "xl", className: classes.title, children: t("mcp.settings.title") }),
+            /* @__PURE__ */ jsx("div", { className: classes.selectedCount, children: t("mcp.settings.selectedCount", {
+              selectedCount: String(selectedCount),
+              totalCount: String(servers.length)
+            }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": t("mcp.settings.closeAriaLabel"),
+              icon: /* @__PURE__ */ jsx(TimesIcon, {}),
+              variant: "plain",
+              className: classes.closeButton,
+              onClick: onClose
+            }
+          )
+        ] }),
+        error && /* @__PURE__ */ jsx(
+          Alert,
+          {
+            variant: "danger",
+            isInline: true,
+            title: error,
+            className: classes.alert
+          }
+        ),
+        !mcpManagePermission.loading && !canManageMcp && /* @__PURE__ */ jsx(
+          Alert,
+          {
+            variant: "info",
+            isInline: true,
+            title: t("mcp.settings.readOnlyAccess"),
+            className: classes.alert
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Table,
+          {
+            variant: "compact",
+            "aria-label": t("mcp.settings.tableAriaLabel"),
+            className: classes.table,
+            children: [
+              /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+                /* @__PURE__ */ jsx(Th, { width: 10, screenReaderText: t("mcp.settings.enabled") }),
+                /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "link",
+                    className: classes.nameHeaderButton,
+                    icon: sortAsc ? /* @__PURE__ */ jsx(SortAmountDownIcon, {}) : /* @__PURE__ */ jsx(SortAmountUpIcon, {}),
+                    iconPosition: "right",
+                    onClick: () => setSortAsc((prev) => !prev),
+                    children: /* @__PURE__ */ jsx(Typography, { component: "span", className: classes.nameHeaderText, children: t("mcp.settings.name") })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Th, { className: classes.statusHeader, children: t("mcp.settings.status") }),
+                /* @__PURE__ */ jsx(Th, { screenReaderText: t("mcp.settings.edit") })
+              ] }) }),
+              /* @__PURE__ */ jsxs(Tbody, { children: [
+                isLoading && /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 4, children: t("mcp.settings.loading") }) }),
+                !isLoading && sortedServers.length === 0 && /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 4, children: t("mcp.settings.noneAvailable") }) }),
+                sortedServers.map((server) => {
+                  const displayStatus = getDisplayStatus(server);
+                  const displayDetail = getDisplayDetail(server, displayStatus);
+                  let statusClass = classes.statusWarn;
+                  if (displayStatus === "ok") {
+                    statusClass = classes.statusOk;
+                  } else if (displayStatus === "disabled") {
+                    statusClass = classes.statusDisabled;
+                  }
+                  return /* @__PURE__ */ jsxs(Tr, { className: classes.tableRow, children: [
+                    /* @__PURE__ */ jsx(Td, { width: 10, className: classes.toggleCell, children: (() => {
+                      const isUnavailable = displayStatus === "failed" || displayStatus === "tokenRequired";
+                      const isChecked = isUnavailable ? false : server.enabled;
+                      const isRowSaving = Boolean(isSaving[server.name]);
+                      const isToggleDisabled = isUnavailable || isRowSaving || !canManageMcp;
+                      const switchControl = /* @__PURE__ */ jsx(
+                        Switch,
+                        {
+                          id: `mcp-switch-${server.id}`,
+                          "aria-label": t(
+                            "mcp.settings.toggleServerAriaLabel",
+                            {
+                              serverName: server.name
+                            }
+                          ),
+                          isChecked,
+                          isDisabled: isToggleDisabled,
+                          onChange: (_event, checked) => {
+                            void patchServer(server.name, {
+                              enabled: checked
+                            }).catch(() => {
+                            });
+                          }
+                        }
+                      );
+                      if (!isToggleDisabled) {
+                        return switchControl;
+                      }
+                      return /* @__PURE__ */ jsx(Tooltip, { content: displayDetail, children: /* @__PURE__ */ jsx(Typography, { component: "span", children: switchControl }) });
+                    })() }),
+                    /* @__PURE__ */ jsx(
+                      Td,
+                      {
+                        width: 35,
+                        className: `${classes.rowName} ${classes.nameCell}`,
+                        children: /* @__PURE__ */ jsx(Typography, { component: "span", className: classes.nameValue, children: server.name })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Td, { width: 40, className: classes.statusColumnCell, children: /* @__PURE__ */ jsxs("div", { className: classes.statusCell, children: [
+                      getStatusIcon(displayStatus, statusClass),
+                      displayStatus === "failed" ? /* @__PURE__ */ jsx(
+                        Tooltip,
+                        {
+                          content: server.validationError ?? t("mcp.settings.token.validationFailed"),
+                          children: /* @__PURE__ */ jsx(
+                            Typography,
+                            {
+                              component: "span",
+                              className: classes.statusValue,
+                              children: displayDetail
+                            }
+                          )
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          component: "span",
+                          className: classes.statusValue,
+                          children: displayDetail
+                        }
+                      )
+                    ] }) }),
+                    /* @__PURE__ */ jsx(Td, { width: 15, isActionCell: true, style: { textAlign: "right" }, children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        "aria-label": t("mcp.settings.editServerAriaLabel", {
+                          serverName: server.name
+                        }),
+                        icon: /* @__PURE__ */ jsx(PencilAltIcon, {}),
+                        variant: "plain",
+                        className: classes.actionButton,
+                        isDisabled: !canManageMcp,
+                        onClick: () => openConfigureModal(server)
+                      }
+                    ) })
+                  ] }, server.id);
+                })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Modal,
+          {
+            variant: "small",
+            title: t("mcp.settings.configureServerTitle", {
+              serverName: editingServer?.name ?? ""
+            }),
+            isOpen: Boolean(editingServer),
+            onClose: closeConfigureModal,
+            className: classes.configureModal,
+            children: /* @__PURE__ */ jsxs("div", { className: classes.modalContent, children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  "aria-label": t("mcp.settings.closeConfigureModalAriaLabel"),
+                  size: "small",
+                  className: classes.modalCustomCloseButton,
+                  onClick: closeConfigureModal,
+                  children: /* @__PURE__ */ jsx(CloseOutlinedIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: classes.modalHeading, children: [
+                /* @__PURE__ */ jsx(LockIcon, {}),
+                /* @__PURE__ */ jsx(Typography, { component: "div", children: t("mcp.settings.configureServerTitle", {
+                  serverName: editingServer?.name ?? ""
+                }) })
+              ] }),
+              editingServer?.auth === "dcr" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: classes.modalDescription, children: t("mcp.settings.modalDescriptionDcr") }),
+                /* @__PURE__ */ jsx("div", { className: classes.modalActions, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "primary",
+                    onClick: closeConfigureModal,
+                    className: classes.modalActionButton,
+                    children: t("common.cancel")
+                  },
+                  "close"
+                ) })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: classes.modalDescription, children: t("mcp.settings.modalDescription") }),
+                /* @__PURE__ */ jsxs("div", { className: classes.tokenRow, children: [
+                  /* @__PURE__ */ jsx(
+                    TextField,
+                    {
+                      id: "mcp-pat-input",
+                      type: "password",
+                      variant: "outlined",
+                      fullWidth: true,
+                      value: tokenInputValue,
+                      onChange: (event) => onTokenInputChange(event.target.value),
+                      className: `${classes.tokenInput} ${tokenInputStateClass}`,
+                      label: hasSavedTokenInModal ? t("mcp.settings.savedToken") : t("mcp.settings.personalAccessToken"),
+                      InputProps: {
+                        endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: tokenInputAdornment })
+                      }
+                    }
+                  ),
+                  (isUsingOrganizationCredentialInModal || !hasSavedTokenInModal || tokenValidationState !== "idle") && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: classes.tokenHelper,
+                      style: { color: tokenHelperColor },
+                      children: tokenValidationMessage || (isUsingOrganizationCredentialInModal ? t("mcp.settings.usingAdminCredential") : t("mcp.settings.enterToken"))
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: classes.modalActions, children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "primary",
+                      onClick: () => void saveServerToken(),
+                      isDisabled: !canManageMcp || Boolean(isSaving[editingServer?.name ?? ""]) || tokenValidationState === "validating",
+                      className: classes.modalActionButton,
+                      children: t("modal.save")
+                    },
+                    "save"
+                  ),
+                  canRemovePersonalToken && hasSavedTokenInModal && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "plain",
+                      onClick: removePersonalToken,
+                      isDisabled: !canManageMcp || Boolean(isSaving[editingServer?.name ?? ""]) || tokenValidationState === "validating",
+                      className: classes.forgetTokenButton,
+                      children: t("mcp.settings.removePersonalToken")
+                    },
+                    "forget-token"
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "link",
+                      onClick: closeConfigureModal,
+                      className: classes.modalCancelButton,
+                      children: t("common.cancel")
+                    },
+                    "cancel"
+                  )
+                ] })
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { McpServersSettings };
+//# sourceMappingURL=McpServersSettings.esm.js.map