@julianpedro/plugin-dev-ai-hub 0.3.0 → 0.4.0

package/dist/components/McpConfigDialog/McpConfigDialog.esm.js

@@ -1,283 +1,18 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useMemo, useEffect } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Chip from '@mui/material/Chip';
-import Collapse from '@mui/material/Collapse';
 import Dialog from '@mui/material/Dialog';
-import Grid from '@mui/material/Grid';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
-import Divider from '@mui/material/Divider';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import IconButton from '@mui/material/IconButton';
-import Switch from '@mui/material/Switch';
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
-import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
-import { useTheme } from '@mui/material/styles';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import CheckIcon from '@mui/icons-material/Check';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import StorageIcon from '@mui/icons-material/Storage';
-import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser';
 import AppsIcon from '@mui/icons-material/Apps';
-import TuneIcon from '@mui/icons-material/Tune';
-import { useApi, discoveryApiRef } from '@backstage/core-plugin-api';
-import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { ToolIcon } from '../ToolIcon/ToolIcon.esm.js';
-import { useCopyToClipboard, useProviders, useMcpCatalog } from '../../hooks/index.esm.js';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { devAiHubTranslationRef } from '../../translation.esm.js';
+import { McpPage } from '../McpPage/McpPage.esm.js';
 
-const TYPE_ACCENT = {
-  http: "#2563EB",
-  stdio: "#059669"
-};
-function providerLabel(target) {
-  return target.split("/").pop()?.replace(/\.git$/, "") ?? target;
-}
-function CatalogEntryCard({ entry }) {
-  const { t } = useTranslationRef(devAiHubTranslationRef);
-  const accent = TYPE_ACCENT[entry.type] ?? "#64748b";
-  const handleInstallVscode = () => {
-    const config = { name: entry.id, type: entry.type };
-    if (entry.type === "http") config.url = entry.url;
-    if (entry.type === "stdio") {
-      config.command = entry.command;
-      if (entry.args?.length) config.args = entry.args;
-      if (entry.env && Object.keys(entry.env).length) config.env = entry.env;
-    }
-    window.location.href = `vscode:mcp/install?${encodeURIComponent(JSON.stringify(config))}`;
-  };
-  const handleInstallCursor = () => {
-    const config = { type: entry.type };
-    if (entry.type === "http") config.url = entry.url;
-    if (entry.type === "stdio") {
-      config.command = entry.command;
-      if (entry.args?.length) config.args = entry.args;
-      if (entry.env && Object.keys(entry.env).length) config.env = entry.env;
-    }
-    window.location.href = `cursor://anysphere.cursor-deeplink/mcp/install?name=${encodeURIComponent(entry.name)}&config=${btoa(JSON.stringify(config))}`;
-  };
-  const canInstall = entry.type === "http" && !!entry.url || entry.type === "stdio" && !!entry.command;
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      sx: {
-        border: "1px solid",
-        borderColor: "divider",
-        borderLeft: `3px solid ${accent}`,
-        borderRadius: 2,
-        p: 2,
-        display: "flex",
-        flexDirection: "column",
-        gap: 1.25,
-        height: "100%",
-        minHeight: 148,
-        transition: "all 0.15s ease",
-        "&:hover": {
-          boxShadow: `0 4px 16px ${accent}25`,
-          borderColor: `${accent}60`
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start", gap: 1.25 }, children: [
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              sx: {
-                width: 48,
-                height: 48,
-                borderRadius: 2,
-                backgroundColor: `${accent}18`,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                flexShrink: 0,
-                boxShadow: `0 2px 8px ${accent}20`
-              },
-              children: entry.icon ? /* @__PURE__ */ jsx(
-                Box,
-                {
-                  component: "img",
-                  src: entry.icon,
-                  alt: entry.name,
-                  sx: { width: 32, height: 32, objectFit: "contain" },
-                  onError: (e) => {
-                    e.target.style.display = "none";
-                  }
-                }
-              ) : /* @__PURE__ */ jsx(StorageIcon, { sx: { fontSize: "1.4rem", color: accent } })
-            }
-          ),
-          /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.75, mb: 0.25, flexWrap: "wrap" }, children: [
-              /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", fontWeight: 700, noWrap: true, title: entry.name, sx: { flex: 1 }, children: entry.name }),
-              /* @__PURE__ */ jsx(
-                Chip,
-                {
-                  label: entry.type,
-                  size: "small",
-                  sx: {
-                    height: 18,
-                    fontSize: "0.6rem",
-                    fontFamily: "monospace",
-                    fontWeight: 700,
-                    bgcolor: `${accent}18`,
-                    color: accent,
-                    border: "1px solid",
-                    borderColor: `${accent}40`
-                  }
-                }
-              )
-            ] }),
-            entry.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", title: entry.description, sx: { display: "block", lineHeight: 1.4 }, children: entry.description }),
-            entry.type === "http" && entry.url && /* @__PURE__ */ jsx(
-              Typography,
-              {
-                variant: "caption",
-                sx: { display: "block", fontFamily: "monospace", fontSize: "0.68rem", color: "text.disabled", mt: 0.25, wordBreak: "break-all" },
-                children: entry.url
-              }
-            ),
-            entry.type === "stdio" && entry.command && /* @__PURE__ */ jsx(
-              Typography,
-              {
-                variant: "caption",
-                sx: { display: "block", fontFamily: "monospace", fontSize: "0.68rem", color: "text.disabled", mt: 0.25 },
-                children: [entry.command, ...entry.args ?? []].join(" ")
-              }
-            )
-          ] })
-        ] }),
-        canInstall && /* @__PURE__ */ jsx(Divider, { sx: { mt: "auto" } }),
-        canInstall && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 0.75 }, children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "small",
-              variant: "outlined",
-              startIcon: /* @__PURE__ */ jsx(OpenInBrowserIcon, { sx: { fontSize: "0.85rem !important" } }),
-              onClick: handleInstallVscode,
-              fullWidth: true,
-              sx: {
-                fontSize: "0.75rem",
-                fontWeight: 700,
-                py: 0.5,
-                borderColor: `${accent}50`,
-                color: accent,
-                "&:hover": { borderColor: accent, bgcolor: `${accent}0a` }
-              },
-              children: t("mcpConfigDialog.installInVscode")
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "small",
-              variant: "outlined",
-              startIcon: /* @__PURE__ */ jsx(ToolIcon, { tool: "cursor", branded: false, sx: { fontSize: "0.85rem !important", color: `${accent} !important` } }),
-              onClick: handleInstallCursor,
-              fullWidth: true,
-              sx: {
-                fontSize: "0.75rem",
-                fontWeight: 700,
-                py: 0.5,
-                borderColor: `${accent}50`,
-                color: accent,
-                "&:hover": { borderColor: accent, bgcolor: `${accent}0a` }
-              },
-              children: t("mcpConfigDialog.installInCursor")
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
 function McpConfigDialog({ open, onClose }) {
-  const theme = useTheme();
   const { t } = useTranslationRef(devAiHubTranslationRef);
-  const discoveryApi = useApi(discoveryApiRef);
-  const { copy: copyUrl, copied: copiedUrl } = useCopyToClipboard();
-  const { copy: copySnippet, copied: copiedSnippet } = useCopyToClipboard();
-  const [tab, setTab] = useState(0);
-  const [baseUrl, setBaseUrl] = useState("");
-  const [selectedProvider, setSelectedProvider] = useState("");
-  const [proactiveEnabled, setProactiveEnabled] = useState(false);
-  const [toolConfigExpanded, setToolConfigExpanded] = useState(false);
-  const [manualExpanded, setManualExpanded] = useState(false);
-  const { providers } = useProviders();
-  const { catalog } = useMcpCatalog();
-  const showProviderFilter = providers.length > 1;
-  const toolConfigs = useMemo(() => [
-    {
-      tool: "claude-code",
-      label: "Claude Code",
-      file: ".mcp.json",
-      description: t("mcpConfigDialog.claudeConfigDesc"),
-      buildConfig: (url) => JSON.stringify({
-        mcpServers: { "dev-ai-hub": { type: "http", url } }
-      }, null, 2)
-    },
-    {
-      tool: "github-copilot",
-      label: "GitHub Copilot",
-      file: ".vscode/settings.json",
-      description: t("mcpConfigDialog.copilotConfigDesc"),
-      buildConfig: (url) => JSON.stringify({
-        "github.copilot.chat.mcp.servers": { "dev-ai-hub": { type: "http", url } }
-      }, null, 2)
-    },
-    {
-      tool: "google-gemini",
-      label: "Google Gemini",
-      file: "gemini-config.json",
-      description: t("mcpConfigDialog.geminiConfigDesc"),
-      buildConfig: (url) => JSON.stringify({
-        mcpServers: { "dev-ai-hub": { url } }
-      }, null, 2)
-    },
-    {
-      tool: "cursor",
-      label: "Cursor",
-      file: ".cursor/mcp.json",
-      description: t("mcpConfigDialog.cursorConfigDesc"),
-      buildConfig: (url) => JSON.stringify({
-        mcpServers: { "dev-ai-hub": { type: "http", url } }
-      }, null, 2)
-    }
-  ], [t]);
-  useEffect(() => {
-    if (open) {
-      discoveryApi.getBaseUrl("dev-ai-hub").then((url) => setBaseUrl(url));
-    }
-  }, [open, discoveryApi]);
-  const cfg = toolConfigs[tab] ?? toolConfigs[0];
-  const buildMcpUrl = () => {
-    if (!baseUrl) return "loading...";
-    const params = new URLSearchParams();
-    params.set("tool", cfg.tool);
-    if (selectedProvider) params.set("provider", selectedProvider);
-    if (proactiveEnabled) params.set("proactive", "true");
-    return `${baseUrl}/mcp?${params.toString()}`;
-  };
-  const mcpUrl = buildMcpUrl();
-  const configSnippet = baseUrl ? cfg.buildConfig(mcpUrl) : "";
-  const handleInstallInVscode = () => {
-    if (!baseUrl) return;
-    const config = JSON.stringify({ name: "dev-ai-hub", type: "http", url: mcpUrl });
-    window.location.href = `vscode:mcp/install?${encodeURIComponent(config)}`;
-  };
-  const handleInstallInCursor = () => {
-    if (!baseUrl) return;
-    const config = btoa(JSON.stringify({ type: "http", url: mcpUrl }));
-    window.location.href = `cursor://anysphere.cursor-deeplink/mcp/install?name=dev-ai-hub&config=${config}`;
-  };
-  const showVscodeButton = cfg.tool === "github-copilot";
-  const showCursorButton = cfg.tool === "cursor";
   return /* @__PURE__ */ jsxs(Dialog, { open, onClose, maxWidth: "md", fullWidth: true, children: [
     /* @__PURE__ */ jsx(DialogTitle, { sx: { pb: 1 }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
       /* @__PURE__ */ jsx(
@@ -302,320 +37,7 @@ function McpConfigDialog({ open, onClose }) {
         /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("mcpConfigDialog.subtitle") })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs(DialogContent, { sx: { pt: 0 }, children: [
-      /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, children: [
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.75, mb: 1, pt: 0.5 }, children: [
-          /* @__PURE__ */ jsx(AppsIcon, { sx: { fontSize: "0.95rem", color: "text.secondary" } }),
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              variant: "caption",
-              fontWeight: 700,
-              color: "text.secondary",
-              sx: { textTransform: "uppercase", letterSpacing: 0.8, flex: 1 },
-              children: t("mcpConfigDialog.catalogTab")
-            }
-          ),
-          catalog.length > 0 && /* @__PURE__ */ jsx(
-            Chip,
-            {
-              label: catalog.length,
-              size: "small",
-              sx: { height: 18, fontSize: "0.65rem", fontWeight: 700, bgcolor: "action.selected", color: "text.secondary", border: "1px solid", borderColor: "divider" }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1.5, fontSize: "0.8rem" }, children: t("mcpConfigDialog.catalogDescription") }),
-        catalog.length === 0 ? /* @__PURE__ */ jsxs(
-          Box,
-          {
-            sx: {
-              border: "1px dashed",
-              borderColor: "divider",
-              borderRadius: 2,
-              p: 3,
-              textAlign: "center"
-            },
-            children: [
-              /* @__PURE__ */ jsx(AppsIcon, { sx: { fontSize: "2rem", color: "text.disabled", mb: 1 } }),
-              /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: t("mcpConfigDialog.catalogEmpty") }),
-              /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.disabled", children: t("mcpConfigDialog.catalogAddHint") })
-            ]
-          }
-        ) : /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1.5, children: catalog.map((entry) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, children: /* @__PURE__ */ jsx(CatalogEntryCard, { entry }) }, entry.id)) })
-      ] }),
-      /* @__PURE__ */ jsx(Divider, { sx: { mb: 0 } }),
-      /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            onClick: () => setToolConfigExpanded((v) => !v),
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: 0.75,
-              cursor: "pointer",
-              userSelect: "none",
-              py: 1.25,
-              "&:hover": { opacity: 0.8 }
-            },
-            children: [
-              /* @__PURE__ */ jsx(TuneIcon, { sx: { fontSize: "0.95rem", color: "text.secondary" } }),
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "caption",
-                  fontWeight: 700,
-                  color: "text.secondary",
-                  sx: { textTransform: "uppercase", letterSpacing: 0.8, flex: 1 },
-                  children: t("mcpConfigDialog.toolConfigSection")
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ExpandMoreIcon,
-                {
-                  fontSize: "small",
-                  sx: {
-                    color: "text.disabled",
-                    transition: "transform 0.2s ease",
-                    transform: toolConfigExpanded ? "rotate(180deg)" : "rotate(0deg)"
-                  }
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(Collapse, { in: toolConfigExpanded, children: [
-          /* @__PURE__ */ jsx(
-            Tabs,
-            {
-              value: tab,
-              onChange: (_, v) => setTab(v),
-              sx: { mb: 2, borderBottom: 1, borderColor: "divider" },
-              children: toolConfigs.map((toolCfg, i) => /* @__PURE__ */ jsx(
-                Tab,
-                {
-                  value: i,
-                  sx: {
-                    color: "text.secondary",
-                    minHeight: 40,
-                    "&.Mui-selected": { color: "primary.main" },
-                    "&:hover": {
-                      backgroundColor: "transparent",
-                      color: "text.primary"
-                    },
-                    "&.Mui-selected:hover": {
-                      backgroundColor: "transparent"
-                    }
-                  },
-                  label: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
-                    /* @__PURE__ */ jsx(ToolIcon, { tool: toolCfg.tool, branded: false, sx: { fontSize: "1rem" } }),
-                    /* @__PURE__ */ jsx("span", { children: toolCfg.label })
-                  ] })
-                },
-                toolCfg.tool
-              ))
-            }
-          ),
-          showProviderFilter && /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "caption", fontWeight: 600, color: "text.secondary", sx: { textTransform: "uppercase", letterSpacing: 0.5, display: "block", mb: 0.75 }, children: t("mcpConfigDialog.scopeToProvider") }),
-            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 0.75, flexWrap: "wrap" }, children: [
-              /* @__PURE__ */ jsx(
-                Chip,
-                {
-                  label: t("mcpConfigDialog.allProviders"),
-                  size: "small",
-                  clickable: true,
-                  onClick: () => setSelectedProvider(""),
-                  sx: {
-                    fontWeight: 600,
-                    fontSize: "0.75rem",
-                    borderRadius: 2,
-                    border: "1.5px solid",
-                    borderColor: !selectedProvider ? "text.primary" : "divider",
-                    backgroundColor: !selectedProvider ? "text.primary" : "transparent",
-                    color: !selectedProvider ? "background.paper" : "text.secondary",
-                    transition: "all 0.15s ease"
-                  }
-                }
-              ),
-              providers.map((p) => {
-                const isSelected = selectedProvider === p.id;
-                const label = providerLabel(p.target);
-                return /* @__PURE__ */ jsx(
-                  Chip,
-                  {
-                    icon: /* @__PURE__ */ jsx(StorageIcon, { sx: { fontSize: "0.8rem !important", color: isSelected ? "background.paper" : "inherit" } }),
-                    label,
-                    size: "small",
-                    clickable: true,
-                    onClick: () => setSelectedProvider(isSelected ? "" : p.id),
-                    sx: {
-                      fontWeight: 600,
-                      fontSize: "0.75rem",
-                      borderRadius: 2,
-                      border: "1.5px solid",
-                      borderColor: isSelected ? "text.primary" : "divider",
-                      backgroundColor: isSelected ? "text.primary" : "transparent",
-                      color: isSelected ? "background.paper" : "text.secondary",
-                      transition: "all 0.15s ease"
-                    }
-                  },
-                  p.id
-                );
-              })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx(
-            FormControlLabel,
-            {
-              control: /* @__PURE__ */ jsx(
-                Switch,
-                {
-                  size: "small",
-                  checked: proactiveEnabled,
-                  onChange: (e) => setProactiveEnabled(e.target.checked)
-                }
-              ),
-              label: /* @__PURE__ */ jsxs(Box, { children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "body2", fontWeight: 600, children: t("mcpConfigDialog.proactiveSuggestions") }),
-                /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("mcpConfigDialog.proactiveDescription") })
-              ] }),
-              sx: { alignItems: "flex-start", ml: 0, gap: 1 }
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Typography, { variant: "caption", fontWeight: 600, color: "text.secondary", sx: { textTransform: "uppercase", letterSpacing: 0.5 }, children: t("mcpConfigDialog.mcpEndpoint") }),
-          /* @__PURE__ */ jsxs(
-            Box,
-            {
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: 1,
-                mt: 0.5,
-                mb: showVscodeButton || showCursorButton ? 1.5 : 1.5,
-                px: 1.5,
-                py: 1,
-                borderRadius: 1.5,
-                border: "1px solid",
-                borderColor: "divider",
-                backgroundColor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: "body2",
-                    sx: { flex: 1, fontFamily: "monospace", fontSize: "0.8rem", wordBreak: "break-all" },
-                    children: mcpUrl
-                  }
-                ),
-                /* @__PURE__ */ jsx(Tooltip, { title: copiedUrl ? t("assetInstallDialog.copied") : t("mcpConfigDialog.copyUrl"), children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => copyUrl(mcpUrl), children: copiedUrl ? /* @__PURE__ */ jsx(CheckIcon, { fontSize: "small", color: "success" }) : /* @__PURE__ */ jsx(ContentCopyIcon, { fontSize: "small" }) }) })
-              ]
-            }
-          ),
-          showVscodeButton && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "contained",
-              startIcon: /* @__PURE__ */ jsx(OpenInBrowserIcon, {}),
-              onClick: handleInstallInVscode,
-              disabled: !baseUrl,
-              fullWidth: true,
-              sx: { mb: 2, fontSize: "0.8rem" },
-              children: t("mcpConfigDialog.installInVscode")
-            }
-          ),
-          showCursorButton && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "contained",
-              startIcon: /* @__PURE__ */ jsx(ToolIcon, { tool: "cursor", branded: false, sx: { fontSize: "1rem !important" } }),
-              onClick: handleInstallInCursor,
-              disabled: !baseUrl,
-              fullWidth: true,
-              sx: { mb: 2, fontSize: "0.8rem" },
-              children: t("mcpConfigDialog.installInCursor")
-            }
-          ),
-          /* @__PURE__ */ jsx(Divider, { sx: { mb: 1.5 } }),
-          /* @__PURE__ */ jsxs(
-            Box,
-            {
-              onClick: () => setManualExpanded((v) => !v),
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                cursor: "pointer",
-                userSelect: "none",
-                py: 0.75
-              },
-              children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "caption", fontWeight: 600, color: "text.secondary", sx: { textTransform: "uppercase", letterSpacing: 0.5 }, children: t("mcpConfigDialog.manualConfig", { file: cfg.file }) }),
-                /* @__PURE__ */ jsx(
-                  ExpandMoreIcon,
-                  {
-                    fontSize: "small",
-                    sx: {
-                      color: "text.disabled",
-                      transition: "transform 0.2s ease",
-                      transform: manualExpanded ? "rotate(180deg)" : "rotate(0deg)"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(Collapse, { in: manualExpanded, children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1, mt: 0.5 }, children: cfg.description }),
-            /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
-              /* @__PURE__ */ jsx(
-                Box,
-                {
-                  component: "pre",
-                  sx: {
-                    m: 0,
-                    p: 2,
-                    borderRadius: 2,
-                    border: "1px solid",
-                    borderColor: "divider",
-                    backgroundColor: theme.palette.mode === "dark" ? "#0d1117" : "#f6f8fa",
-                    color: theme.palette.mode === "dark" ? "#e6edf3" : "#24292f",
-                    fontFamily: "monospace",
-                    fontSize: "0.8rem",
-                    overflowX: "auto",
-                    whiteSpace: "pre"
-                  },
-                  children: configSnippet
-                }
-              ),
-              /* @__PURE__ */ jsx(Tooltip, { title: copiedSnippet ? t("assetInstallDialog.copied") : t("mcpConfigDialog.copyUrl"), children: /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  size: "small",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    copySnippet(configSnippet);
-                  },
-                  sx: {
-                    position: "absolute",
-                    top: 8,
-                    right: 8,
-                    backgroundColor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)",
-                    "&:hover": {
-                      backgroundColor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.12)"
-                    }
-                  },
-                  children: copiedSnippet ? /* @__PURE__ */ jsx(CheckIcon, { fontSize: "small", color: "success" }) : /* @__PURE__ */ jsx(ContentCopyIcon, { fontSize: "small" })
-                }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.disabled", sx: { display: "block", mt: 1.5 }, children: t("mcpConfigDialog.omitToolHint") })
-          ] })
-        ] })
-      ] })
-    ] }),
+    /* @__PURE__ */ jsx(DialogContent, { sx: { pt: 0 }, children: open && /* @__PURE__ */ jsx(McpPage, { embedded: true }) }),
     /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, { onClick: onClose, children: t("mcpConfigDialog.close") }) })
   ] });
 }