@nospt/plugin-dev-ai-hub 0.1.0

package/dist/components/AssetFilters/AssetFilters.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetFilters.esm.js","sources":["../../../src/components/AssetFilters/AssetFilters.tsx"],"sourcesContent":["import type { ElementType } from 'react';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport SearchIcon from '@mui/icons-material/Search';\nimport StorageIcon from '@mui/icons-material/Storage';\nimport ArticleIcon from '@mui/icons-material/Article';\nimport SmartToyIcon from '@mui/icons-material/SmartToy';\nimport BuildIcon from '@mui/icons-material/Build';\nimport AccountTreeIcon from '@mui/icons-material/AccountTree';\nimport AppsIcon from '@mui/icons-material/Apps';\nimport type { AssetType, AiTool, AiHubProvider } from '@nospt/plugin-dev-ai-hub-common';\nimport { ToolIcon } from '../ToolIcon';\n\nconst ASSET_TYPES: { value: AssetType | 'all'; label: string; color: string; Icon: ElementType }[] = [\n  { value: 'all', label: 'All', color: '#64748b', Icon: AppsIcon },\n  { value: 'instruction', label: 'Instructions', color: '#2563EB', Icon: ArticleIcon },\n  { value: 'agent', label: 'Agents', color: '#7C3AED', Icon: SmartToyIcon },\n  { value: 'skill', label: 'Skills', color: '#059669', Icon: BuildIcon },\n  { value: 'workflow', label: 'Workflows', color: '#D97706', Icon: AccountTreeIcon },\n];\n\nconst AI_TOOLS: { value: AiTool | 'all'; label: string }[] = [\n  { value: 'all', label: 'All Tools' },\n  { value: 'claude-code', label: 'Claude Code' },\n  { value: 'github-copilot', label: 'GitHub Copilot' },\n  { value: 'google-gemini', label: 'Google Gemini' },\n  { value: 'cursor', label: 'Cursor' },\n];\n\nexport interface AssetFiltersValue {\n  types: AssetType[];\n  tools: AiTool[];\n  search: string;\n  tags: string[];\n  providerId?: string;\n}\n\ninterface AssetFiltersProps {\n  value: AssetFiltersValue;\n  onChange: (value: AssetFiltersValue) => void;\n  availableTags?: string[];\n  providers?: AiHubProvider[];\n}\n\nexport function AssetFilters({ value, onChange, availableTags = [], providers }: AssetFiltersProps) {\n  const selectedType = value.types.length === 1 ? value.types[0] : 'all';\n  const selectedTool = value.tools.length === 1 ? value.tools[0] : 'all';\n  const showProviderFilter = providers && providers.length > 1;\n\n  const handleTypeClick = (type: AssetType | 'all') => {\n    onChange({ ...value, types: type === 'all' ? [] : [type] });\n  };\n\n  const handleToolClick = (tool: AiTool | 'all') => {\n    onChange({ ...value, tools: tool === 'all' ? [] : [tool] });\n  };\n\n  const handleTagToggle = (tag: string) => {\n    const next = value.tags.includes(tag)\n      ? value.tags.filter(t => t !== tag)\n      : [...value.tags, tag];\n    onChange({ ...value, tags: next });\n  };\n\n  const handleProviderClick = (id: string | undefined) => {\n    onChange({ ...value, providerId: id });\n  };\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}>\n      <TextField\n        fullWidth\n        size=\"small\"\n        placeholder=\"Search assets by name, description or content…\"\n        value={value.search}\n        onChange={e => onChange({ ...value, search: e.target.value })}\n        InputProps={{\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <SearchIcon fontSize=\"small\" />\n            </InputAdornment>\n          ),\n        }}\n        sx={{\n          '& .MuiOutlinedInput-root': {\n            borderRadius: 2,\n          },\n        }}\n      />\n\n      <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap', alignItems: 'flex-start' }}>\n        {/* Type filter */}\n        <Box>\n          <Typography variant=\"caption\" fontWeight={600} color=\"text.secondary\" sx={{ mb: 1, display: 'block', textTransform: 'uppercase', letterSpacing: 0.5 }}>\n            Type\n          </Typography>\n          <Box sx={{ display: 'flex', gap: 0.75, flexWrap: 'wrap' }}>\n            {ASSET_TYPES.map(t => {\n              const isSelected = selectedType === t.value;\n              const TypeIcon = t.Icon;\n              return (\n                <Chip\n                  key={t.value}\n                  icon={<TypeIcon sx={{ fontSize: '0.9rem !important', color: isSelected ? '#fff !important' : t.color }} />}\n                  label={t.label}\n                  size=\"small\"\n                  clickable\n                  onClick={() => handleTypeClick(t.value as AssetType | 'all')}\n                  sx={{\n                    fontWeight: 600,\n                    fontSize: '0.75rem',\n                    borderRadius: 2,\n                    border: '1.5px solid',\n                    borderColor: isSelected ? t.color : `${t.color}60`,\n                    backgroundColor: isSelected ? t.color : 'transparent',\n                    color: isSelected ? '#fff' : t.color,\n                    transition: 'all 0.15s ease',\n                    '&:hover': {\n                      backgroundColor: isSelected ? t.color : `${t.color}18`,\n                      borderColor: t.color,\n                    },\n                  }}\n                />\n              );\n            })}\n          </Box>\n        </Box>\n\n        {/* AI Tool filter */}\n        <Box>\n          <Typography variant=\"caption\" fontWeight={600} color=\"text.secondary\" sx={{ mb: 1, display: 'block', textTransform: 'uppercase', letterSpacing: 0.5 }}>\n            AI Tool\n          </Typography>\n          <Box sx={{ display: 'flex', gap: 0.75, flexWrap: 'wrap' }}>\n            {AI_TOOLS.map(t => {\n              const isSelected = selectedTool === t.value;\n              const iconEl = t.value !== 'all'\n                ? <ToolIcon tool={t.value as AiTool} branded={!isSelected} sx={{ fontSize: '0.85rem !important', color: isSelected ? 'background.paper' : 'inherit' }} />\n                : undefined;\n              return (\n                <Chip\n                  key={t.value}\n                  icon={iconEl}\n                  label={t.label}\n                  size=\"small\"\n                  clickable\n                  onClick={() => handleToolClick(t.value as AiTool | 'all')}\n                  sx={{\n                    fontWeight: 600,\n                    fontSize: '0.75rem',\n                    borderRadius: 2,\n                    border: '1.5px solid',\n                    borderColor: isSelected ? 'text.primary' : 'divider',\n                    backgroundColor: isSelected ? 'text.primary' : 'transparent',\n                    color: isSelected ? 'background.paper' : 'text.secondary',\n                    transition: 'all 0.15s ease',\n                    '&:hover': {\n                      borderColor: 'text.primary',\n                      backgroundColor: isSelected ? 'text.primary' : 'action.hover',\n                    },\n                  }}\n                />\n              );\n            })}\n          </Box>\n        </Box>\n\n        {/* Provider filter — only shown when there are 2+ providers */}\n        {showProviderFilter && (\n          <Box>\n            <Typography variant=\"caption\" fontWeight={600} color=\"text.secondary\" sx={{ mb: 1, display: 'block', textTransform: 'uppercase', letterSpacing: 0.5 }}>\n              Provider\n            </Typography>\n            <Box sx={{ display: 'flex', gap: 0.75, flexWrap: 'wrap' }}>\n              <Chip\n                icon={<AppsIcon sx={{ fontSize: '0.9rem !important' }} />}\n                label=\"All\"\n                size=\"small\"\n                clickable\n                onClick={() => handleProviderClick(undefined)}\n                sx={{\n                  fontWeight: 600,\n                  fontSize: '0.75rem',\n                  borderRadius: 2,\n                  border: '1.5px solid',\n                  borderColor: !value.providerId ? 'text.primary' : 'divider',\n                  backgroundColor: !value.providerId ? 'text.primary' : 'transparent',\n                  color: !value.providerId ? 'background.paper' : 'text.secondary',\n                  transition: 'all 0.15s ease',\n                  '&:hover': {\n                    borderColor: 'text.primary',\n                    backgroundColor: !value.providerId ? 'text.primary' : 'action.hover',\n                  },\n                }}\n              />\n              {providers.map(p => {\n                const isSelected = value.providerId === p.id;\n                const label = p.target.split('/').slice(-1)[0]?.replace(/\\.git$/, '') ?? p.id;\n                return (\n                  <Chip\n                    key={p.id}\n                    icon={<StorageIcon sx={{ fontSize: '0.85rem !important', color: isSelected ? 'background.paper' : 'inherit' }} />}\n                    label={label}\n                    size=\"small\"\n                    clickable\n                    onClick={() => handleProviderClick(p.id)}\n                    sx={{\n                      fontWeight: 600,\n                      fontSize: '0.75rem',\n                      borderRadius: 2,\n                      border: '1.5px solid',\n                      borderColor: isSelected ? 'text.primary' : 'divider',\n                      backgroundColor: isSelected ? 'text.primary' : 'transparent',\n                      color: isSelected ? 'background.paper' : 'text.secondary',\n                      transition: 'all 0.15s ease',\n                      '&:hover': {\n                        borderColor: 'text.primary',\n                        backgroundColor: isSelected ? 'text.primary' : 'action.hover',\n                      },\n                    }}\n                  />\n                );\n              })}\n            </Box>\n          </Box>\n        )}\n      </Box>\n\n      {availableTags.length > 0 && (\n        <Box>\n          <Typography variant=\"caption\" fontWeight={600} color=\"text.secondary\" sx={{ mb: 1, display: 'block', textTransform: 'uppercase', letterSpacing: 0.5 }}>\n            Tags\n          </Typography>\n          <Box sx={{ display: 'flex', gap: 0.75, flexWrap: 'wrap' }}>\n            {availableTags.map(tag => (\n              <Chip\n                key={tag}\n                label={`#${tag}`}\n                size=\"small\"\n                clickable\n                onClick={() => handleTagToggle(tag)}\n                sx={{\n                  fontSize: '0.7rem',\n                  fontWeight: value.tags.includes(tag) ? 700 : 400,\n                  borderRadius: 1.5,\n                  backgroundColor: value.tags.includes(tag) ? 'primary.main' : 'transparent',\n                  color: value.tags.includes(tag) ? '#fff' : 'text.secondary',\n                  border: '1px solid',\n                  borderColor: value.tags.includes(tag) ? 'primary.main' : 'divider',\n                }}\n              />\n            ))}\n          </Box>\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/AssetInstallDialog/AssetInstallDialog.esm.js

@@ -0,0 +1,194 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DownloadIcon from '@mui/icons-material/Download';
+import CheckIcon from '@mui/icons-material/Check';
+import FolderZipIcon from '@mui/icons-material/FolderZip';
+import { getInstallPathsForAsset } from '@nospt/plugin-dev-ai-hub-common';
+import { useApi } from '@backstage/core-plugin-api';
+import { devAiHubApiRef } from '../../api/DevAiHubClient.esm.js';
+import { useAssetDetail } from '../../hooks/index.esm.js';
+import { ToolIcon } from '../ToolIcon/ToolIcon.esm.js';
+
+const TOOL_LABELS = {
+  "claude-code": "Claude Code",
+  "github-copilot": "GitHub Copilot",
+  "google-gemini": "Google Gemini",
+  "cursor": "Cursor"
+};
+function AssetInstallDialog({ assetId, onClose }) {
+  const [copiedTool, setCopiedTool] = useState(null);
+  const api = useApi(devAiHubApiRef);
+  const { asset, loading } = useAssetDetail(assetId);
+  const handleClose = () => {
+    onClose();
+    setCopiedTool(null);
+  };
+  const handleCopy = (tool) => {
+    if (!asset) return;
+    navigator.clipboard.writeText(asset.content).then(() => {
+      setCopiedTool(tool);
+      setTimeout(() => setCopiedTool(null), 2e3);
+    });
+    api.trackInstall(asset.id).catch(() => {
+    });
+  };
+  const resourcePaths = asset?.resourcesContent ? Object.keys(asset.resourcesContent) : [];
+  const isZipSkill = asset?.type === "skill" && resourcePaths.length > 0;
+  const handleDownload = async (_tool, installPath) => {
+    if (!asset) return;
+    if (isZipSkill) {
+      const url = await api.getDownloadUrl(asset.id);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${asset.name.replace(/\s+/g, "-").toLowerCase()}.zip`;
+      a.click();
+    } else {
+      const filename = installPath.split("/").pop() ?? `${asset.name}.md`;
+      const blob = new Blob([asset.content], { type: "text/markdown" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+    api.trackInstall(asset.id).catch(() => {
+    });
+  };
+  const installPaths = asset ? getInstallPathsForAsset(asset.type, asset.tools, asset.name, {
+    installPath: asset.installPath,
+    installPaths: asset.installPaths
+  }) : {};
+  return /* @__PURE__ */ jsxs(Dialog, { open: !!assetId, onClose: handleClose, maxWidth: "sm", fullWidth: true, children: [
+    /* @__PURE__ */ jsxs(DialogTitle, { sx: { pb: 1 }, children: [
+      asset ? `Install: ${asset.name}` : "Install",
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 0.5, fontWeight: 400 }, children: "Copy the content and place the file at the path shown for your tool." })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogContent, { sx: { display: "flex", flexDirection: "column", gap: 1.5, pt: "8px !important" }, children: [
+      loading && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", py: 3 }, children: /* @__PURE__ */ jsx(CircularProgress, {}) }),
+      !loading && asset && isZipSkill && /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            border: "1px solid",
+            borderColor: "info.main",
+            borderRadius: 2,
+            p: 1.5,
+            backgroundColor: "info.main",
+            backgroundImage: "none",
+            bgcolor: (theme) => `${theme.palette.info.main}12`
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1 }, children: [
+              /* @__PURE__ */ jsx(FolderZipIcon, { sx: { fontSize: "1rem", color: "info.main" } }),
+              /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", fontWeight: 700, color: "info.main", children: "Bundled skill \u2014 downloads as .zip" })
+            ] }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1 }, children: [
+              "This skill includes resource files alongside ",
+              /* @__PURE__ */ jsx("code", { children: "SKILL.md" }),
+              ". Extract the zip and place all files in the skill directory."
+            ] }),
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" }, children: [
+              /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  label: "SKILL.md",
+                  size: "small",
+                  sx: { fontFamily: "monospace", fontSize: "0.7rem", height: 20 }
+                }
+              ),
+              resourcePaths.map((p) => /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  label: p,
+                  size: "small",
+                  variant: "outlined",
+                  sx: { fontFamily: "monospace", fontSize: "0.7rem", height: 20 }
+                },
+                p
+              ))
+            ] })
+          ]
+        }
+      ),
+      !loading && asset && Object.entries(installPaths).map(([tool, installPath]) => /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            border: "1px solid",
+            borderColor: "divider",
+            borderRadius: 2,
+            p: 1.5
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1 }, children: [
+              /* @__PURE__ */ jsx(ToolIcon, { tool, sx: { fontSize: "1rem" } }),
+              /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", fontWeight: 700, children: TOOL_LABELS[tool] ?? tool })
+            ] }),
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { display: "block", mb: 0.5 }, children: "Install path" }),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  bgcolor: "action.hover",
+                  border: "1px solid",
+                  borderColor: "divider",
+                  borderRadius: 1,
+                  px: 1.5,
+                  py: 0.75,
+                  fontFamily: "monospace",
+                  fontSize: "0.78rem",
+                  color: "text.primary",
+                  wordBreak: "break-all",
+                  mb: 1.25
+                },
+                children: installPath
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [
+              /* @__PURE__ */ jsx(Tooltip, { title: copiedTool === tool ? "Copied!" : "Copy markdown content", children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "outlined",
+                  startIcon: copiedTool === tool ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(ContentCopyIcon, {}),
+                  onClick: () => handleCopy(tool),
+                  color: copiedTool === tool ? "success" : "primary",
+                  sx: { flex: 1 },
+                  children: copiedTool === tool ? "Copied!" : "Copy Content"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Tooltip, { title: isZipSkill ? "Download as .zip with all bundled files" : "Download file with correct name", children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "outlined",
+                  startIcon: isZipSkill ? /* @__PURE__ */ jsx(FolderZipIcon, {}) : /* @__PURE__ */ jsx(DownloadIcon, {}),
+                  onClick: () => handleDownload(tool, installPath),
+                  sx: { flex: 1 },
+                  children: isZipSkill ? "Download .zip" : "Download"
+                }
+              ) })
+            ] })
+          ]
+        },
+        tool
+      ))
+    ] }),
+    /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, { onClick: handleClose, children: "Close" }) })
+  ] });
+}
+
+export { AssetInstallDialog };
+//# sourceMappingURL=AssetInstallDialog.esm.js.map

package/dist/components/AssetInstallDialog/AssetInstallDialog.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetInstallDialog.esm.js","sources":["../../../src/components/AssetInstallDialog/AssetInstallDialog.tsx"],"sourcesContent":["import { useState } from 'react';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Button from '@mui/material/Button';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\nimport DownloadIcon from '@mui/icons-material/Download';\nimport CheckIcon from '@mui/icons-material/Check';\nimport FolderZipIcon from '@mui/icons-material/FolderZip';\nimport type { AiTool } from '@nospt/plugin-dev-ai-hub-common';\nimport { getInstallPathsForAsset } from '@nospt/plugin-dev-ai-hub-common';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { devAiHubApiRef } from '../../api/DevAiHubClient';\nimport { useAssetDetail } from '../../hooks';\nimport { ToolIcon } from '../ToolIcon';\n\nconst TOOL_LABELS: Record<string, string> = {\n  'claude-code':    'Claude Code',\n  'github-copilot': 'GitHub Copilot',\n  'google-gemini':  'Google Gemini',\n  'cursor':         'Cursor',\n};\n\ninterface AssetInstallDialogProps {\n  assetId: string | null;\n  onClose: () => void;\n}\n\nexport function AssetInstallDialog({ assetId, onClose }: AssetInstallDialogProps) {\n  const [copiedTool, setCopiedTool] = useState<string | null>(null);\n  const api = useApi(devAiHubApiRef);\n  const { asset, loading } = useAssetDetail(assetId);\n\n  const handleClose = () => {\n    onClose();\n    setCopiedTool(null);\n  };\n\n  const handleCopy = (tool: string) => {\n    if (!asset) return;\n    navigator.clipboard.writeText(asset.content).then(() => {\n      setCopiedTool(tool);\n      setTimeout(() => setCopiedTool(null), 2000);\n    });\n    api.trackInstall(asset.id).catch(() => {});\n  };\n\n  const resourcePaths = asset?.resourcesContent\n    ? Object.keys(asset.resourcesContent)\n    : [];\n  const isZipSkill = asset?.type === 'skill' && resourcePaths.length > 0;\n\n  const handleDownload = async (_tool: string, installPath: string) => {\n    if (!asset) return;\n    if (isZipSkill) {\n      const url = await api.getDownloadUrl(asset.id);\n      const a = document.createElement('a');\n      a.href = url;\n      a.download = `${asset.name.replace(/\\s+/g, '-').toLowerCase()}.zip`;\n      a.click();\n    } else {\n      const filename = installPath.split('/').pop() ?? `${asset.name}.md`;\n      const blob = new Blob([asset.content], { type: 'text/markdown' });\n      const url = URL.createObjectURL(blob);\n      const a = document.createElement('a');\n      a.href = url;\n      a.download = filename;\n      a.click();\n      URL.revokeObjectURL(url);\n    }\n    api.trackInstall(asset.id).catch(() => {});\n  };\n\n  const installPaths = asset\n    ? getInstallPathsForAsset(asset.type, asset.tools, asset.name, {\n        installPath: asset.installPath,\n        installPaths: asset.installPaths,\n      })\n    : {};\n\n  return (\n    <Dialog open={!!assetId} onClose={handleClose} maxWidth=\"sm\" fullWidth>\n      <DialogTitle sx={{ pb: 1 }}>\n        {asset ? `Install: ${asset.name}` : 'Install'}\n        <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mt: 0.5, fontWeight: 400 }}>\n          Copy the content and place the file at the path shown for your tool.\n        </Typography>\n      </DialogTitle>\n\n      <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, pt: '8px !important' }}>\n        {loading && (\n          <Box sx={{ display: 'flex', justifyContent: 'center', py: 3 }}>\n            <CircularProgress />\n          </Box>\n        )}\n\n        {!loading && asset && isZipSkill && (\n          <Box\n            sx={{\n              border: '1px solid',\n              borderColor: 'info.main',\n              borderRadius: 2,\n              p: 1.5,\n              backgroundColor: 'info.main',\n              backgroundImage: 'none',\n              bgcolor: theme => `${theme.palette.info.main}12`,\n            }}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>\n              <FolderZipIcon sx={{ fontSize: '1rem', color: 'info.main' }} />\n              <Typography variant=\"subtitle2\" fontWeight={700} color=\"info.main\">\n                Bundled skill — downloads as .zip\n              </Typography>\n            </Box>\n            <Typography variant=\"caption\" color=\"text.secondary\" sx={{ display: 'block', mb: 1 }}>\n              This skill includes resource files alongside <code>SKILL.md</code>.\n              Extract the zip and place all files in the skill directory.\n            </Typography>\n            <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>\n              <Chip\n                label=\"SKILL.md\"\n                size=\"small\"\n                sx={{ fontFamily: 'monospace', fontSize: '0.7rem', height: 20 }}\n              />\n              {resourcePaths.map(p => (\n                <Chip\n                  key={p}\n                  label={p}\n                  size=\"small\"\n                  variant=\"outlined\"\n                  sx={{ fontFamily: 'monospace', fontSize: '0.7rem', height: 20 }}\n                />\n              ))}\n            </Box>\n          </Box>\n        )}\n\n        {!loading && asset && Object.entries(installPaths).map(([tool, installPath]) => (\n          <Box\n            key={tool}\n            sx={{\n              border: '1px solid',\n              borderColor: 'divider',\n              borderRadius: 2,\n              p: 1.5,\n            }}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>\n              <ToolIcon tool={tool as AiTool} sx={{ fontSize: '1rem' }} />\n              <Typography variant=\"subtitle2\" fontWeight={700}>\n                {TOOL_LABELS[tool] ?? tool}\n              </Typography>\n            </Box>\n\n            <Typography variant=\"caption\" color=\"text.secondary\" sx={{ display: 'block', mb: 0.5 }}>\n              Install path\n            </Typography>\n            <Box\n              sx={{\n                bgcolor: 'action.hover',\n                border: '1px solid',\n                borderColor: 'divider',\n                borderRadius: 1,\n                px: 1.5,\n                py: 0.75,\n                fontFamily: 'monospace',\n                fontSize: '0.78rem',\n                color: 'text.primary',\n                wordBreak: 'break-all',\n                mb: 1.25,\n              }}\n            >\n              {installPath}\n            </Box>\n\n            <Box sx={{ display: 'flex', gap: 1 }}>\n              <Tooltip title={copiedTool === tool ? 'Copied!' : 'Copy markdown content'}>\n                <Button\n                  size=\"small\"\n                  variant=\"outlined\"\n                  startIcon={copiedTool === tool ? <CheckIcon /> : <ContentCopyIcon />}\n                  onClick={() => handleCopy(tool)}\n                  color={copiedTool === tool ? 'success' : 'primary'}\n                  sx={{ flex: 1 }}\n                >\n                  {copiedTool === tool ? 'Copied!' : 'Copy Content'}\n                </Button>\n              </Tooltip>\n              <Tooltip title={isZipSkill ? 'Download as .zip with all bundled files' : 'Download file with correct name'}>\n                <Button\n                  size=\"small\"\n                  variant=\"outlined\"\n                  startIcon={isZipSkill ? <FolderZipIcon /> : <DownloadIcon />}\n                  onClick={() => handleDownload(tool, installPath)}\n                  sx={{ flex: 1 }}\n                >\n                  {isZipSkill ? 'Download .zip' : 'Download'}\n                </Button>\n              </Tooltip>\n            </Box>\n          </Box>\n        ))}\n      </DialogContent>\n\n      <DialogActions>\n        <Button onClick={handleClose}>Close</Button>\n      </DialogActions>\n    </Dialog>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,320 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Pagination from '@mui/material/Pagination';
+import Skeleton from '@mui/material/Skeleton';
+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 FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+import HubIcon from '@mui/icons-material/Hub';
+import { Page, Header, Content } from '@backstage/core-components';
+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 { McpConfigDialog } from '../McpConfigDialog/McpConfigDialog.esm.js';
+import { ToolIcon } from '../ToolIcon/ToolIcon.esm.js';
+import { useStats, useProviders, useAssets } from '../../hooks/index.esm.js';
+
+const SUPPORTED_TOOLS = ["claude-code", "github-copilot", "google-gemini", "cursor"];
+const TOOL_LABELS = {
+  "all": "Universal",
+  "claude-code": "Claude Code",
+  "github-copilot": "GitHub Copilot",
+  "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: [],
+  search: "",
+  tags: [],
+  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"
+  }
+];
+function DevAiHubPage() {
+  const [filters, setFilters] = useState(DEFAULT_FILTERS);
+  const [page, setPage] = useState(1);
+  const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const selectedAssetId = searchParams.get("assetId");
+  const installAssetId = searchParams.get("installId");
+  const handleViewAsset = (id) => setSearchParams((p) => {
+    const n = new URLSearchParams(p);
+    n.set("assetId", id);
+    return n;
+  });
+  const handleCloseDetail = () => setSearchParams((p) => {
+    const n = new URLSearchParams(p);
+    n.delete("assetId");
+    return n;
+  });
+  const handleInstallAsset = (id) => setSearchParams((p) => {
+    const n = new URLSearchParams(p);
+    n.set("installId", id);
+    return n;
+  });
+  const handleCloseInstall = () => setSearchParams((p) => {
+    const n = new URLSearchParams(p);
+    n.delete("installId");
+    return n;
+  });
+  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 { result, loading } = useAssets(apiFilter);
+  const handleFiltersChange = (next) => {
+    setFilters(next);
+    setPage(1);
+  };
+  const totalPages = result ? Math.ceil(result.totalCount / PAGE_SIZE) : 0;
+  const availableTags = useMemo(() => {
+    if (!result) return [];
+    const tagSet = /* @__PURE__ */ new Set();
+    result.items.forEach((a) => a.tags.forEach((t) => tagSet.add(t)));
+    return Array.from(tagSet).sort();
+  }, [result]);
+  return /* @__PURE__ */ jsxs(Page, { themeId: "tool", children: [
+    /* @__PURE__ */ jsx(
+      Header,
+      {
+        title: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 44,
+                height: 44,
+                borderRadius: 2.5,
+                background: "rgba(255,255,255,0.15)",
+                backdropFilter: "blur(8px)",
+                border: "1px solid rgba(255,255,255,0.3)",
+                boxShadow: "0 2px 12px rgba(0,0,0,0.15)",
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ jsx(HubIcon, { sx: { fontSize: "1.5rem", color: "#fff" } })
+            }
+          ),
+          /* @__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" })
+          ] })
+        ] }),
+        pageTitleOverride: "Dev AI Hub",
+        children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+          /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: SUPPORTED_TOOLS.map((tool) => /* @__PURE__ */ jsx(Tooltip, { title: TOOL_LABELS[tool], arrow: true, children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                width: 32,
+                height: 32,
+                borderRadius: "50%",
+                backgroundColor: "rgba(255,255,255,0.15)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backdropFilter: "blur(4px)",
+                transition: "background-color 0.15s",
+                "&:hover": { backgroundColor: "rgba(255,255,255,0.25)" }
+              },
+              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: [
+            /* @__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(
+            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__ */ 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)) }),
+      /* @__PURE__ */ jsx(
+        AssetFilters,
+        {
+          value: filters,
+          onChange: handleFiltersChange,
+          availableTags,
+          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"
+      ] }),
+      /* @__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
+        }
+      ) }, 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." })
+      ] }),
+      totalPages > 1 && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", mt: 4 }, children: /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          count: totalPages,
+          page,
+          onChange: (_, p) => setPage(p),
+          color: "primary",
+          shape: "rounded"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      AssetDetailPanel,
+      {
+        assetId: selectedAssetId,
+        onClose: handleCloseDetail
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AssetInstallDialog,
+      {
+        assetId: installAssetId,
+        onClose: handleCloseInstall
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      McpConfigDialog,
+      {
+        open: mcpDialogOpen,
+        onClose: () => setMcpDialogOpen(false)
+      }
+    )
+  ] });
+}
+
+export { DevAiHubPage };
+//# sourceMappingURL=DevAiHubPage.esm.js.map