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

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

@@ -1,13 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+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';
@@ -20,53 +22,184 @@ 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 } from '../../hooks/index.esm.js';
+import { useCopyToClipboard, useProviders, useMcpCatalog } from '../../hooks/index.esm.js';
+import { devAiHubTranslationRef } from '../../translation.esm.js';
 
-const TOOL_CONFIGS = [
-  {
-    tool: "claude-code",
-    label: "Claude Code",
-    file: ".mcp.json",
-    description: "Add to .mcp.json in your project root (or run via claude mcp add):",
-    buildConfig: (url) => JSON.stringify({
-      mcpServers: { "dev-ai-hub": { type: "http", url } }
-    }, null, 2)
-  },
-  {
-    tool: "github-copilot",
-    label: "GitHub Copilot",
-    file: ".vscode/settings.json",
-    description: "Add to your VS Code settings (.vscode/settings.json or user settings):",
-    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: "Add to your Gemini CLI configuration:",
-    buildConfig: (url) => JSON.stringify({
-      mcpServers: { "dev-ai-hub": { url } }
-    }, null, 2)
-  },
-  {
-    tool: "cursor",
-    label: "Cursor",
-    file: ".cursor/mcp.json",
-    description: "Add to .cursor/mcp.json in your project root:",
-    buildConfig: (url) => JSON.stringify({
-      mcpServers: { "dev-ai-hub": { type: "http", url } }
-    }, null, 2)
-  }
-];
+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();
@@ -74,15 +207,55 @@ function McpConfigDialog({ open, onClose }) {
   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 = TOOL_CONFIGS[tab];
+  const cfg = toolConfigs[tab] ?? toolConfigs[0];
   const buildMcpUrl = () => {
     if (!baseUrl) return "loading...";
     const params = new URLSearchParams();
@@ -93,229 +266,357 @@ function McpConfigDialog({ open, onClose }) {
   };
   const mcpUrl = buildMcpUrl();
   const configSnippet = baseUrl ? cfg.buildConfig(mcpUrl) : "";
-  return /* @__PURE__ */ jsxs(Dialog, { open, onClose, maxWidth: "sm", fullWidth: true, children: [
-    /* @__PURE__ */ jsxs(DialogTitle, { sx: { pb: 0 }, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 700, children: "Configure MCP Server" }),
-      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: "Connect your AI tool to the Dev AI Hub via Model Context Protocol." })
-    ] }),
-    /* @__PURE__ */ jsxs(DialogContent, { sx: { pt: 1 }, children: [
+  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(
-        Tabs,
+        Box,
         {
-          value: tab,
-          onChange: (_, v) => setTab(v),
-          sx: { mb: 2, borderBottom: 1, borderColor: "divider" },
-          children: TOOL_CONFIGS.map((t, i) => /* @__PURE__ */ jsx(
-            Tab,
-            {
-              value: i,
-              label: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                /* @__PURE__ */ jsx(
-                  ToolIcon,
-                  {
-                    tool: t.tool,
-                    sx: { fontSize: "1rem", color: theme.palette.mode === "dark" ? "#fff" : void 0 }
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { children: t.label })
-              ] })
-            },
-            t.tool
-          ))
+          sx: {
+            width: 36,
+            height: 36,
+            borderRadius: 1.5,
+            background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            boxShadow: "0 2px 8px #6366f140"
+          },
+          children: /* @__PURE__ */ jsx(AppsIcon, { sx: { color: "#fff", fontSize: "1.2rem" } })
         }
       ),
-      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: "Scope to Provider" }),
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 0.75, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 700, sx: { lineHeight: 1.2 }, children: t("mcpConfigDialog.title") }),
+        /* @__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: "All providers",
+              label: catalog.length,
               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"
-              }
+              sx: { height: 18, fontSize: "0.65rem", fontWeight: 700, bgcolor: "action.selected", color: "text.secondary", border: "1px solid", borderColor: "divider" }
             }
-          ),
-          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(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(Box, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx(
-        FormControlLabel,
-        {
-          control: /* @__PURE__ */ jsx(
-            Switch,
+      /* @__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,
             {
-              size: "small",
-              checked: proactiveEnabled,
-              onChange: (e) => setProactiveEnabled(e.target.checked)
+              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
+              ))
             }
           ),
-          label: /* @__PURE__ */ jsxs(Box, { children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "body2", fontWeight: 600, children: "Proactive suggestions" }),
-            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "The AI will automatically suggest relevant assets based on your project context. Disable if you prefer to search manually." })
+          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
+                );
+              })
+            ] })
           ] }),
-          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: "MCP Endpoint" }),
-      /* @__PURE__ */ jsxs(
-        Box,
-        {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            gap: 1,
-            mt: 0.5,
-            mb: 2,
-            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 ? "Copied!" : "Copy URL", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => copyUrl(mcpUrl), children: copiedUrl ? /* @__PURE__ */ jsx(CheckIcon, { fontSize: "small", color: "success" }) : /* @__PURE__ */ jsx(ContentCopyIcon, { fontSize: "small" }) }) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        Box,
-        {
-          onClick: () => setManualExpanded((v) => !v),
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            cursor: "pointer",
-            userSelect: "none",
-            py: 0.75,
-            borderTop: "1px solid",
-            borderColor: "divider"
-          },
-          children: [
-            /* @__PURE__ */ jsxs(Typography, { variant: "caption", fontWeight: 600, color: "text.secondary", sx: { textTransform: "uppercase", letterSpacing: 0.5 }, children: [
-              "Manual config \u2014 ",
-              cfg.file
-            ] }),
-            /* @__PURE__ */ jsx(
-              ExpandMoreIcon,
-              {
-                fontSize: "small",
-                sx: {
-                  color: "text.disabled",
-                  transition: "transform 0.2s ease",
-                  transform: manualExpanded ? "rotate(180deg)" : "rotate(0deg)"
+          /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx(
+            FormControlLabel,
+            {
+              control: /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  size: "small",
+                  checked: proactiveEnabled,
+                  onChange: (e) => setProactiveEnabled(e.target.checked)
                 }
-              }
-            )
-          ]
-        }
-      ),
-      /* @__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(
+              ),
+              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,
             {
-              component: "pre",
               sx: {
-                m: 0,
-                p: 2,
-                borderRadius: 2,
+                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" ? "#0d1117" : "#f6f8fa",
-                color: theme.palette.mode === "dark" ? "#e6edf3" : "#24292f",
-                fontFamily: "monospace",
-                fontSize: "0.8rem",
-                overflowX: "auto",
-                whiteSpace: "pre"
+                backgroundColor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)"
               },
-              children: configSnippet
+              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" }) }) })
+              ]
             }
           ),
-          /* @__PURE__ */ jsx(Tooltip, { title: copiedSnippet ? "Copied!" : "Copy config", children: /* @__PURE__ */ jsx(
-            IconButton,
+          showVscodeButton && /* @__PURE__ */ jsx(
+            Button,
             {
-              size: "small",
-              onClick: (e) => {
-                e.stopPropagation();
-                copySnippet(configSnippet);
-              },
+              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: {
-                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)"
-                }
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                cursor: "pointer",
+                userSelect: "none",
+                py: 0.75
               },
-              children: copiedSnippet ? /* @__PURE__ */ jsx(CheckIcon, { fontSize: "small", color: "success" }) : /* @__PURE__ */ jsx(ContentCopyIcon, { fontSize: "small" })
+              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(Typography, { variant: "caption", color: "text.disabled", sx: { display: "block", mt: 1.5 }, children: [
-          "\u{1F4A1} Omit ",
-          /* @__PURE__ */ jsx("code", { children: "?tool=" }),
-          " from the URL to receive assets for all AI tools.",
-          showProviderFilter && " Omit ?provider= to receive assets from all repositories.",
-          " ",
-          "Proactive suggestions add ",
-          /* @__PURE__ */ jsx("code", { children: "?proactive=true" }),
-          " and register the",
-          " ",
-          /* @__PURE__ */ jsx("code", { children: "suggest_assets" }),
-          " tool and ",
-          /* @__PURE__ */ jsx("code", { children: "check_for_assets" }),
-          " prompt."
+          ),
+          /* @__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(DialogActions, { children: /* @__PURE__ */ jsx(Button, { onClick: onClose, children: "Close" }) })
+    /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, { onClick: onClose, children: t("mcpConfigDialog.close") }) })
   ] });
 }