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

package/dist/components/DevAiHubPage/DevAiHubPage.esm.js

@@ -1,28 +1,47 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { darken } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
 import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
 import Pagination from '@mui/material/Pagination';
 import Skeleton from '@mui/material/Skeleton';
+import Snackbar from '@mui/material/Snackbar';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
-import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
 import ArticleIcon from '@mui/icons-material/Article';
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 import BuildIcon from '@mui/icons-material/Build';
 import AccountTreeIcon from '@mui/icons-material/AccountTree';
+import ChatIcon from '@mui/icons-material/Chat';
+import Inventory2Icon from '@mui/icons-material/Inventory2';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import CloseIcon from '@mui/icons-material/Close';
+import CloudSyncIcon from '@mui/icons-material/CloudSync';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import ExtensionIcon from '@mui/icons-material/Extension';
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 import HubIcon from '@mui/icons-material/Hub';
+import SyncIcon from '@mui/icons-material/Sync';
 import { Page, Header, Content } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { usePermission } from '@backstage/plugin-permission-react';
+import { devAiHubSyncPermission } from '@julianpedro/plugin-dev-ai-hub-common';
+import { devAiHubTranslationRef } from '../../translation.esm.js';
 import { AssetCard } from '../AssetCard/AssetCard.esm.js';
 import { AssetFilters } from '../AssetFilters/AssetFilters.esm.js';
 import { AssetDetailPanel } from '../AssetDetailPanel/AssetDetailPanel.esm.js';
 import { AssetInstallDialog } from '../AssetInstallDialog/AssetInstallDialog.esm.js';
+import { AssetHelpDialog } from '../AssetHelpDialog/AssetHelpDialog.esm.js';
 import { McpConfigDialog } from '../McpConfigDialog/McpConfigDialog.esm.js';
 import { ToolIcon } from '../ToolIcon/ToolIcon.esm.js';
-import { useStats, useProviders, useAssets } from '../../hooks/index.esm.js';
+import { useSyncProvider, useStats, useProviders, useMcpCatalog, useAssets } from '../../hooks/index.esm.js';
+import { useTypeConfig } from '../../context/UiConfigContext.esm.js';
 
 const SUPPORTED_TOOLS = ["claude-code", "github-copilot", "google-gemini", "cursor"];
 const TOOL_LABELS = {
@@ -32,13 +51,6 @@ const TOOL_LABELS = {
   "google-gemini": "Google Gemini",
   "cursor": "Cursor"
 };
-function timeAgo(iso) {
-  const diff = Math.floor((Date.now() - new Date(iso).getTime()) / 1e3);
-  if (diff < 60) return "just now";
-  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
-  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
-  return `${Math.floor(diff / 86400)}d ago`;
-}
 const DEFAULT_FILTERS = {
   types: [],
   tools: [],
@@ -47,43 +59,34 @@ const DEFAULT_FILTERS = {
   providerId: void 0
 };
 const PAGE_SIZE = 24;
-const STATS_CONFIG = [
-  {
-    key: "instruction",
-    label: "Instructions",
-    Icon: ArticleIcon,
-    gradient: "linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%)",
-    shadow: "#2563EB40"
-  },
-  {
-    key: "agent",
-    label: "Agents",
-    Icon: SmartToyIcon,
-    gradient: "linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%)",
-    shadow: "#7C3AED40"
-  },
-  {
-    key: "skill",
-    label: "Skills",
-    Icon: BuildIcon,
-    gradient: "linear-gradient(135deg, #059669 0%, #047857 100%)",
-    shadow: "#05966940"
-  },
-  {
-    key: "workflow",
-    label: "Workflows",
-    Icon: AccountTreeIcon,
-    gradient: "linear-gradient(135deg, #D97706 0%, #B45309 100%)",
-    shadow: "#D9770640"
-  }
-];
+const STATS_META = {
+  instruction: { label: "Instructions", Icon: ArticleIcon },
+  agent: { label: "Agents", Icon: SmartToyIcon },
+  skill: { label: "Skills", Icon: BuildIcon },
+  workflow: { label: "Workflows", Icon: AccountTreeIcon },
+  prompt: { label: "Prompts", Icon: ChatIcon },
+  bundle: { label: "Bundles", Icon: Inventory2Icon }
+};
+function timeAgo(iso, translate) {
+  const diff = Math.floor((Date.now() - new Date(iso).getTime()) / 1e3);
+  if (diff < 60) return translate("devAiHubPage.timeJustNow") ?? "";
+  if (diff < 3600) return translate("devAiHubPage.timeMinutesAgo", { count: Math.floor(diff / 60) }) ?? "";
+  if (diff < 86400) return translate("devAiHubPage.timeHoursAgo", { count: Math.floor(diff / 3600) }) ?? "";
+  return translate("devAiHubPage.timeDaysAgo", { count: Math.floor(diff / 86400) }) ?? "";
+}
 function DevAiHubPage() {
+  const { t } = useTranslationRef(devAiHubTranslationRef);
   const [filters, setFilters] = useState(DEFAULT_FILTERS);
   const [page, setPage] = useState(1);
   const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
+  const [syncSnackbar, setSyncSnackbar] = useState(false);
+  const [providersDrawerOpen, setProvidersDrawerOpen] = useState(false);
+  const { allowed: canSync } = usePermission({ permission: devAiHubSyncPermission });
+  const { syncing, triggerSync, triggerSyncAll } = useSyncProvider();
   const [searchParams, setSearchParams] = useSearchParams();
   const selectedAssetId = searchParams.get("assetId");
   const installAssetId = searchParams.get("installId");
+  const helpAssetId = searchParams.get("helpId");
   const handleViewAsset = (id) => setSearchParams((p) => {
     const n = new URLSearchParams(p);
     n.set("assetId", id);
@@ -104,20 +107,29 @@ function DevAiHubPage() {
     n.delete("installId");
     return n;
   });
+  const handleHelpAsset = (id) => setSearchParams((p) => {
+    const n = new URLSearchParams(p);
+    n.set("helpId", id);
+    return n;
+  });
+  const handleCloseHelp = () => setSearchParams((p) => {
+    const n = new URLSearchParams(p);
+    n.delete("helpId");
+    return n;
+  });
+  const { typeColors, statsCards } = useTypeConfig();
   const { stats } = useStats();
   const { providers } = useProviders();
-  const apiFilter = useMemo(
-    () => ({
-      type: filters.types.length === 1 ? filters.types[0] : void 0,
-      tool: filters.tools.length === 1 ? filters.tools[0] : void 0,
-      search: filters.search || void 0,
-      tags: filters.tags.length > 0 ? filters.tags : void 0,
-      providerId: filters.providerId || void 0,
-      page,
-      pageSize: PAGE_SIZE
-    }),
-    [filters, page]
-  );
+  const { catalog } = useMcpCatalog();
+  const apiFilter = useMemo(() => ({
+    type: filters.types.length === 1 ? filters.types[0] : void 0,
+    tool: filters.tools.length === 1 ? filters.tools[0] : void 0,
+    search: filters.search || void 0,
+    tags: filters.tags.length > 0 ? filters.tags : void 0,
+    providerId: filters.providerId || void 0,
+    page,
+    pageSize: PAGE_SIZE
+  }), [filters, page]);
   const { result, loading } = useAssets(apiFilter);
   const handleFiltersChange = (next) => {
     setFilters(next);
@@ -127,7 +139,7 @@ function DevAiHubPage() {
   const availableTags = useMemo(() => {
     if (!result) return [];
     const tagSet = /* @__PURE__ */ new Set();
-    result.items.forEach((a) => a.tags.forEach((t) => tagSet.add(t)));
+    result.items.forEach((a) => a.tags.forEach((tag) => tagSet.add(tag)));
     return Array.from(tagSet).sort();
   }, [result]);
   return /* @__PURE__ */ jsxs(Page, { themeId: "tool", children: [
@@ -156,7 +168,11 @@ function DevAiHubPage() {
           ),
           /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 0.3 }, children: [
             /* @__PURE__ */ jsx(Box, { sx: { fontSize: "1.75rem", fontWeight: 700, lineHeight: 1, color: "#fff" }, children: "Dev AI Hub" }),
-            /* @__PURE__ */ jsx(Box, { sx: { fontSize: "0.85rem", fontWeight: 400, color: "rgba(255,255,255,0.75)", lineHeight: 1 }, children: stats ? `${stats.totalAssets} assets \xB7 ${Object.keys(stats.byProvider).length} provider${Object.keys(stats.byProvider).length !== 1 ? "s" : ""}` : "Centralized AI assets for your team" })
+            /* @__PURE__ */ jsx(Box, { sx: { fontSize: "0.85rem", fontWeight: 400, color: "rgba(255,255,255,0.75)", lineHeight: 1 }, children: stats ? (() => {
+              const providerCount = Object.keys(stats.byProvider).length;
+              const providerStr = t(providerCount === 1 ? "devAiHubPage.providerCountOne" : "devAiHubPage.providerCountOther", { n: String(providerCount) });
+              return t("devAiHubPage.totalStats", { totalAssets: String(stats.totalAssets), providers: providerStr });
+            })() : t("devAiHubPage.subtitle") })
           ] })
         ] }),
         pageTitleOverride: "Dev AI Hub",
@@ -179,80 +195,121 @@ function DevAiHubPage() {
               children: /* @__PURE__ */ jsx(ToolIcon, { tool, branded: false, sx: { fontSize: "1rem", color: "#fff" } })
             }
           ) }, tool)) }),
-          stats?.lastSync && /* @__PURE__ */ jsx(Tooltip, { title: `Last sync: ${new Date(stats.lastSync).toLocaleString()}`, arrow: true, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5, cursor: "default" }, children: [
+          stats?.lastSync && /* @__PURE__ */ jsx(Tooltip, { title: t("devAiHubPage.lastSync", { time: new Date(stats.lastSync).toLocaleString() }), arrow: true, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5, cursor: "default" }, children: [
             /* @__PURE__ */ jsx(FiberManualRecordIcon, { sx: { fontSize: "0.6rem", color: "#4ade80" } }),
-            /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: "rgba(255,255,255,0.8)", whiteSpace: "nowrap" }, children: timeAgo(stats.lastSync) })
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: "rgba(255,255,255,0.8)", whiteSpace: "nowrap" }, children: timeAgo(stats.lastSync, t) })
           ] }) }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "contained",
-              size: "small",
-              startIcon: /* @__PURE__ */ jsx(SettingsEthernetIcon, {}),
-              onClick: () => setMcpDialogOpen(true),
-              sx: {
-                borderRadius: 2,
-                fontWeight: 700,
-                whiteSpace: "nowrap",
-                background: "rgba(255,255,255,0.15)",
-                backdropFilter: "blur(4px)",
-                border: "1px solid rgba(255,255,255,0.3)",
-                color: "#fff",
-                boxShadow: "none",
-                "&:hover": {
-                  background: "rgba(255,255,255,0.25)",
-                  boxShadow: "none"
-                }
-              },
-              children: "Configure MCP"
-            }
-          )
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxs(Content, { children: [
-      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, sx: { mb: 3 }, children: STATS_CONFIG.map(({ key, label, Icon, gradient, shadow }) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, sm: 3, children: /* @__PURE__ */ jsx(
-        Box,
-        {
-          onClick: () => handleFiltersChange({ ...filters, types: filters.types[0] === key ? [] : [key] }),
-          sx: {
-            background: gradient,
-            borderRadius: 3,
-            p: 2,
-            cursor: "pointer",
-            boxShadow: filters.types[0] === key ? `0 8px 24px ${shadow}` : `0 2px 8px ${shadow}`,
-            transform: filters.types[0] === key ? "translateY(-2px)" : "none",
-            transition: "all 0.2s ease",
-            outline: filters.types[0] === key ? "2px solid rgba(255,255,255,0.6)" : "none",
-            outlineOffset: 2,
-            "&:hover": {
-              boxShadow: `0 8px 24px ${shadow}`,
-              transform: "translateY(-2px)"
-            }
-          },
-          children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
-            /* @__PURE__ */ jsxs(Box, { children: [
-              /* @__PURE__ */ jsx(Typography, { variant: "h4", fontWeight: 800, sx: { color: "#fff", lineHeight: 1 }, children: stats ? stats.byType[key] ?? 0 : /* @__PURE__ */ jsx(Skeleton, { width: 32, sx: { bgcolor: "rgba(255,255,255,0.3)" } }) }),
-              /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "rgba(255,255,255,0.85)", fontWeight: 500, mt: 0.5 }, children: label })
-            ] }),
+          /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", display: "inline-flex" }, children: [
             /* @__PURE__ */ jsx(
-              Box,
+              Button,
               {
+                variant: "contained",
+                size: "small",
+                startIcon: /* @__PURE__ */ jsx(ExtensionIcon, {}),
+                onClick: () => setMcpDialogOpen(true),
                 sx: {
-                  width: 40,
-                  height: 40,
                   borderRadius: 2,
-                  backgroundColor: "rgba(255,255,255,0.2)",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center"
+                  fontWeight: 700,
+                  whiteSpace: "nowrap",
+                  background: "rgba(255,255,255,0.2)",
+                  backdropFilter: "blur(4px)",
+                  border: "1.5px solid rgba(255,255,255,0.45)",
+                  color: "#fff",
+                  boxShadow: "none",
+                  "&:hover": {
+                    background: "rgba(255,255,255,0.32)",
+                    borderColor: "rgba(255,255,255,0.7)",
+                    boxShadow: "0 0 0 2px rgba(255,255,255,0.15)"
+                  }
                 },
-                children: /* @__PURE__ */ jsx(Icon, { sx: { color: "#fff", fontSize: "1.4rem" } })
+                children: t("devAiHubPage.configMcp")
+              }
+            ),
+            catalog.length > 0 && /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  position: "absolute",
+                  top: -3,
+                  right: -3,
+                  width: 10,
+                  height: 10,
+                  borderRadius: "50%",
+                  bgcolor: "#4ade80",
+                  boxShadow: "0 0 0 2px rgba(0,0,0,0.15)",
+                  animation: "mcpPulse 2s ease-in-out infinite",
+                  "@keyframes mcpPulse": {
+                    "0%": { boxShadow: "0 0 0 0 rgba(74,222,128,0.7), 0 0 0 2px rgba(0,0,0,0.15)" },
+                    "70%": { boxShadow: "0 0 0 6px rgba(74,222,128,0),  0 0 0 2px rgba(0,0,0,0.15)" },
+                    "100%": { boxShadow: "0 0 0 0 rgba(74,222,128,0),    0 0 0 2px rgba(0,0,0,0.15)" }
+                  }
+                }
               }
             )
           ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Content, { children: [
+      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, sx: { mb: 3 }, children: statsCards.map((key) => {
+        const { label, Icon } = STATS_META[key];
+        const color = typeColors[key];
+        const gradient = `linear-gradient(135deg, ${color} 0%, ${darken(color, 0.15)} 100%)`;
+        const shadow = `${color}40`;
+        const selected = filters.types[0] === key;
+        return /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, sm: 3, children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            onClick: () => handleFiltersChange({ ...filters, types: selected ? [] : [key] }),
+            sx: {
+              background: gradient,
+              borderRadius: 3,
+              p: 2,
+              cursor: "pointer",
+              boxShadow: selected ? `0 8px 24px ${shadow}` : `0 2px 8px ${shadow}`,
+              transform: selected ? "translateY(-2px)" : "none",
+              transition: "all 0.2s ease",
+              outline: selected ? "2px solid rgba(255,255,255,0.6)" : "none",
+              outlineOffset: 2,
+              "&:hover": { boxShadow: `0 8px 24px ${shadow}`, transform: "translateY(-2px)" }
+            },
+            children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "h4", fontWeight: 800, sx: { color: "#fff", lineHeight: 1 }, children: stats ? stats.byType[key] ?? 0 : /* @__PURE__ */ jsx(Skeleton, { width: 32, sx: { bgcolor: "rgba(255,255,255,0.3)" } }) }),
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "rgba(255,255,255,0.85)", fontWeight: 500, mt: 0.5 }, children: label })
+              ] }),
+              /* @__PURE__ */ jsx(Box, { sx: {
+                width: 40,
+                height: 40,
+                borderRadius: 2,
+                backgroundColor: "rgba(255,255,255,0.2)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              }, children: /* @__PURE__ */ jsx(Icon, { sx: { color: "#fff", fontSize: "1.4rem" } }) })
+            ] })
+          }
+        ) }, key);
+      }) }),
+      providers.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "flex-end", mb: 1, mt: -1 }, children: /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: t(providers.length === 1 ? "devAiHubPage.providerCountOne" : "devAiHubPage.providerCountOther", { n: String(providers.length) }),
+          placement: "left",
+          children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: () => setProvidersDrawerOpen(true),
+              sx: {
+                color: providers.some((p) => p.status === "error") ? "error.main" : "text.disabled",
+                "&:hover": { color: providers.some((p) => p.status === "error") ? "error.dark" : "text.secondary" }
+              },
+              children: /* @__PURE__ */ jsx(CloudSyncIcon, { fontSize: "small" })
+            }
+          )
         }
-      ) }, key)) }),
+      ) }),
       /* @__PURE__ */ jsx(
         AssetFilters,
         {
@@ -262,24 +319,22 @@ function DevAiHubPage() {
           providers: providers.length > 1 ? providers : void 0
         }
       ),
-      result && !loading && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { mb: 2, display: "block" }, children: [
-        result.totalCount,
-        " asset",
-        result.totalCount !== 1 ? "s" : "",
-        " found"
-      ] }),
+      result && !loading && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { mb: 2, display: "block" }, children: t(result.totalCount === 1 ? "devAiHubPage.assetCountOne" : "devAiHubPage.assetCountOther", { n: String(result.totalCount) }) }),
       /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1.5, children: loading ? Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", height: 150, sx: { borderRadius: 2 } }) }, i)) : result?.items.map((asset) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, children: /* @__PURE__ */ jsx(
         AssetCard,
         {
           asset,
           onView: handleViewAsset,
-          onInstall: handleInstallAsset
+          onInstall: handleInstallAsset,
+          onHelp: handleHelpAsset,
+          onOpenMcpCatalog: () => setMcpDialogOpen(true),
+          mcpCatalog: catalog
         }
       ) }, asset.id)) }),
       !loading && result?.items.length === 0 && /* @__PURE__ */ jsxs(Box, { sx: { py: 12, textAlign: "center" }, children: [
         /* @__PURE__ */ jsx(Typography, { variant: "h1", sx: { mb: 2, opacity: 0.15, fontSize: "5rem" }, children: "\u{1F916}" }),
-        /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "text.secondary", fontWeight: 600, children: "No assets found" }),
-        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.disabled", sx: { mt: 0.5 }, children: "Try adjusting your filters or search terms." })
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "text.secondary", fontWeight: 600, children: t("devAiHubPage.noAssetsTitle") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.disabled", sx: { mt: 0.5 }, children: t("devAiHubPage.noAssetsSubtitle") })
       ] }),
       totalPages > 1 && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", mt: 4 }, children: /* @__PURE__ */ jsx(
         Pagination,
@@ -292,25 +347,102 @@ function DevAiHubPage() {
         }
       ) })
     ] }),
+    /* @__PURE__ */ jsx(AssetDetailPanel, { assetId: selectedAssetId, onClose: handleCloseDetail }),
+    /* @__PURE__ */ jsx(AssetInstallDialog, { assetId: installAssetId, onClose: handleCloseInstall }),
     /* @__PURE__ */ jsx(
-      AssetDetailPanel,
+      AssetHelpDialog,
       {
-        assetId: selectedAssetId,
-        onClose: handleCloseDetail
+        asset: helpAssetId ? result?.items.find((a) => a.id === helpAssetId) ?? null : null,
+        onClose: handleCloseHelp
       }
     ),
+    /* @__PURE__ */ jsx(McpConfigDialog, { open: mcpDialogOpen, onClose: () => setMcpDialogOpen(false) }),
     /* @__PURE__ */ jsx(
-      AssetInstallDialog,
+      Snackbar,
       {
-        assetId: installAssetId,
-        onClose: handleCloseInstall
+        open: syncSnackbar,
+        autoHideDuration: 3e3,
+        onClose: () => setSyncSnackbar(false),
+        message: t("devAiHubPage.syncTriggered")
       }
     ),
     /* @__PURE__ */ jsx(
-      McpConfigDialog,
+      Drawer,
       {
-        open: mcpDialogOpen,
-        onClose: () => setMcpDialogOpen(false)
+        anchor: "right",
+        open: providersDrawerOpen,
+        onClose: () => setProvidersDrawerOpen(false),
+        PaperProps: { sx: { width: { xs: "100vw", sm: 400 } } },
+        children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                p: 2,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                borderBottom: 1,
+                borderColor: "divider"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 700, children: t("devAiHubPage.providersSectionTitle") }),
+                /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                  canSync && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "small",
+                      variant: "outlined",
+                      startIcon: providers.some((p) => syncing[p.id]) ? /* @__PURE__ */ jsx(CircularProgress, { size: 14 }) : /* @__PURE__ */ jsx(SyncIcon, {}),
+                      disabled: providers.some((p) => syncing[p.id]),
+                      onClick: async () => {
+                        await triggerSyncAll(providers.map((p) => p.id));
+                        setSyncSnackbar(true);
+                      },
+                      children: t("devAiHubPage.syncAllButton")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => setProvidersDrawerOpen(false), children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { sx: { flex: 1, overflow: "auto" }, children: providers.map((provider, idx) => /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { px: 2, py: 1.75, display: "flex", alignItems: "center", gap: 1.5 }, children: [
+              provider.status === "error" && /* @__PURE__ */ jsx(Tooltip, { title: provider.error ?? t("devAiHubPage.providerStatusError"), children: /* @__PURE__ */ jsx(ErrorOutlineIcon, { sx: { fontSize: "1.1rem", color: "error.main", flexShrink: 0 } }) }),
+              provider.status === "syncing" && /* @__PURE__ */ jsx(CircularProgress, { size: 16, sx: { flexShrink: 0 } }),
+              provider.status !== "error" && provider.status !== "syncing" && /* @__PURE__ */ jsx(CheckCircleOutlineIcon, { sx: { fontSize: "1.1rem", color: "success.main", flexShrink: 0 } }),
+              /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "body2",
+                    fontWeight: 600,
+                    noWrap: true,
+                    title: provider.target,
+                    sx: { fontFamily: "monospace", fontSize: "0.8rem" },
+                    children: provider.target
+                  }
+                ),
+                provider.lastSync && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.disabled", children: timeAgo(provider.lastSync, t) }),
+                provider.status === "error" && provider.error && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", sx: { display: "block" }, noWrap: true, title: provider.error, children: provider.error })
+              ] }),
+              canSync && /* @__PURE__ */ jsx(Tooltip, { title: t("devAiHubPage.syncButton"), children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "small",
+                  disabled: !!syncing[provider.id],
+                  onClick: async () => {
+                    await triggerSync(provider.id);
+                    setSyncSnackbar(true);
+                  },
+                  children: syncing[provider.id] ? /* @__PURE__ */ jsx(CircularProgress, { size: 16 }) : /* @__PURE__ */ jsx(SyncIcon, { fontSize: "small" })
+                }
+              ) }) })
+            ] }),
+            idx < providers.length - 1 && /* @__PURE__ */ jsx(Divider, {})
+          ] }, provider.id)) })
+        ] })
       }
     )
   ] });