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

package/dist/components/AssetHelpDialog/AssetHelpDialog.esm.js

@@ -0,0 +1,87 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+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 IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import CloseIcon from '@mui/icons-material/Close';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { devAiHubTranslationRef } from '../../translation.esm.js';
+
+function AssetHelpDialog({ asset, onClose }) {
+  const { t } = useTranslationRef(devAiHubTranslationRef);
+  return /* @__PURE__ */ jsxs(Dialog, { open: !!asset, onClose, maxWidth: "md", fullWidth: true, children: [
+    /* @__PURE__ */ jsxs(DialogTitle, { sx: { display: "flex", alignItems: "center", gap: 1, pr: 6 }, children: [
+      /* @__PURE__ */ jsx(HelpOutlineIcon, { sx: { color: "text.secondary", fontSize: "1.3rem", flexShrink: 0 } }),
+      /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 700, noWrap: true, children: asset?.label ?? asset?.name ?? "" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { fontWeight: 400 }, children: t("assetCard.helpTooltip") })
+      ] }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "small",
+          onClick: onClose,
+          sx: { position: "absolute", right: 12, top: 12 },
+          children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(DialogContent, { dividers: true, children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          "& h1,h2,h3,h4,h5,h6": { mt: 2, mb: 1, fontWeight: 700 },
+          "& h1": { mt: 0 },
+          "& p": { mb: 1, lineHeight: 1.7 },
+          "& ul, & ol": { pl: 2.5, mb: 1 },
+          "& li": { mb: 0.5 },
+          "& blockquote": {
+            borderLeft: "3px solid",
+            borderColor: "primary.main",
+            pl: 1.5,
+            color: "text.secondary",
+            my: 1,
+            ml: 0
+          },
+          "& table": { width: "100%", borderCollapse: "collapse", mb: 1 },
+          "& th, & td": {
+            border: "1px solid",
+            borderColor: "divider",
+            px: 1.5,
+            py: 0.75,
+            fontSize: "0.875rem"
+          },
+          "& th": { backgroundColor: "action.hover", fontWeight: 700 },
+          "& code": {
+            bgcolor: "action.hover",
+            px: 0.5,
+            py: 0.2,
+            borderRadius: 0.5,
+            fontFamily: "monospace",
+            fontSize: "0.875em"
+          },
+          "& pre": {
+            bgcolor: "action.hover",
+            borderRadius: 1,
+            p: 1.5,
+            overflow: "auto",
+            my: 1,
+            "& code": { bgcolor: "transparent", px: 0, py: 0 }
+          }
+        },
+        children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: asset?.helpText ?? "" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DialogActions, { sx: { px: 2, py: 1.5 }, children: /* @__PURE__ */ jsx(Button, { onClick: onClose, sx: { ml: "auto" }, children: t("assetInstallDialog.close") }) })
+  ] });
+}
+
+export { AssetHelpDialog };
+//# sourceMappingURL=AssetHelpDialog.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetHelpDialog.esm.js","sources":["../../../src/components/AssetHelpDialog/AssetHelpDialog.tsx"],"sourcesContent":["import ReactMarkdown from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\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 IconButton from '@mui/material/IconButton';\nimport Typography from '@mui/material/Typography';\nimport CloseIcon from '@mui/icons-material/Close';\nimport HelpOutlineIcon from '@mui/icons-material/HelpOutline';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport type { AiAssetSummary } from '@julianpedro/plugin-dev-ai-hub-common';\nimport { devAiHubTranslationRef } from '../../translation';\n\ninterface AssetHelpDialogProps {\n  asset: AiAssetSummary | null;\n  onClose: () => void;\n}\n\nexport function AssetHelpDialog({ asset, onClose }: AssetHelpDialogProps) {\n  const { t } = useTranslationRef(devAiHubTranslationRef);\n\n  return (\n    <Dialog open={!!asset} onClose={onClose} maxWidth=\"md\" fullWidth>\n      <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1, pr: 6 }}>\n        <HelpOutlineIcon sx={{ color: 'text.secondary', fontSize: '1.3rem', flexShrink: 0 }} />\n        <Box sx={{ flex: 1, minWidth: 0 }}>\n          <Typography variant=\"h6\" fontWeight={700} noWrap>\n            {asset?.label ?? asset?.name ?? ''}\n          </Typography>\n          <Typography variant=\"body2\" color=\"text.secondary\" sx={{ fontWeight: 400 }}>\n            {t('assetCard.helpTooltip')}\n          </Typography>\n        </Box>\n        <IconButton\n          size=\"small\"\n          onClick={onClose}\n          sx={{ position: 'absolute', right: 12, top: 12 }}\n        >\n          <CloseIcon fontSize=\"small\" />\n        </IconButton>\n      </DialogTitle>\n\n      <DialogContent dividers>\n        <Box\n          sx={{\n            '& h1,h2,h3,h4,h5,h6': { mt: 2, mb: 1, fontWeight: 700 },\n            '& h1': { mt: 0 },\n            '& p': { mb: 1, lineHeight: 1.7 },\n            '& ul, & ol': { pl: 2.5, mb: 1 },\n            '& li': { mb: 0.5 },\n            '& blockquote': {\n              borderLeft: '3px solid',\n              borderColor: 'primary.main',\n              pl: 1.5,\n              color: 'text.secondary',\n              my: 1,\n              ml: 0,\n            },\n            '& table': { width: '100%', borderCollapse: 'collapse', mb: 1 },\n            '& th, & td': {\n              border: '1px solid',\n              borderColor: 'divider',\n              px: 1.5,\n              py: 0.75,\n              fontSize: '0.875rem',\n            },\n            '& th': { backgroundColor: 'action.hover', fontWeight: 700 },\n            '& code': {\n              bgcolor: 'action.hover',\n              px: 0.5,\n              py: 0.2,\n              borderRadius: 0.5,\n              fontFamily: 'monospace',\n              fontSize: '0.875em',\n            },\n            '& pre': {\n              bgcolor: 'action.hover',\n              borderRadius: 1,\n              p: 1.5,\n              overflow: 'auto',\n              my: 1,\n              '& code': { bgcolor: 'transparent', px: 0, py: 0 },\n            },\n          }}\n        >\n          <ReactMarkdown remarkPlugins={[remarkGfm]}>\n            {asset?.helpText ?? ''}\n          </ReactMarkdown>\n        </Box>\n      </DialogContent>\n\n      <DialogActions sx={{ px: 2, py: 1.5 }}>\n        <Button onClick={onClose} sx={{ ml: 'auto' }}>\n          {t('assetInstallDialog.close')}\n        </Button>\n      </DialogActions>\n    </Dialog>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,24 +1,31 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } 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 Chip from '@mui/material/Chip';
 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 LinearProgress from '@mui/material/LinearProgress';
 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 OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import Inventory2Icon from '@mui/icons-material/Inventory2';
 import { getInstallPathsForAsset } from '@julianpedro/plugin-dev-ai-hub-common';
-import { useApi } from '@backstage/core-plugin-api';
+import { useApi, discoveryApiRef } from '@backstage/core-plugin-api';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { devAiHubApiRef } from '../../api/DevAiHubClient.esm.js';
 import { useAssetDetail } from '../../hooks/index.esm.js';
 import { ToolIcon } from '../ToolIcon/ToolIcon.esm.js';
+import { devAiHubTranslationRef } from '../../translation.esm.js';
 
 const TOOL_LABELS = {
   "claude-code": "Claude Code",
@@ -26,16 +33,31 @@ const TOOL_LABELS = {
   "google-gemini": "Google Gemini",
   "cursor": "Cursor"
 };
-function AssetInstallDialog({ assetId, onClose }) {
+function canUseVscodeDeepLink(type, tools, installPath) {
+  if (type !== "agent" && type !== "instruction") return false;
+  if (!tools.includes("github-copilot")) return false;
+  if (installPath && !installPath.startsWith(".github/")) return false;
+  return true;
+}
+function buildVscodeRedirectUrl(asset, backendUrl) {
+  const safeName = (asset.label ?? asset.name).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+  const filename = asset.type === "instruction" ? `${safeName}.instructions.md` : `${safeName}.agent.md`;
+  const fileUrl = `${backendUrl}/assets/${encodeURIComponent(asset.id)}/agent-md/${filename}`;
+  const vscodeUri = `vscode:chat-agent/install?url=${encodeURIComponent(fileUrl)}`;
+  return `https://vscode.dev/redirect?url=${encodeURIComponent(vscodeUri)}`;
+}
+function SingleAssetView({ asset }) {
   const [copiedTool, setCopiedTool] = useState(null);
   const api = useApi(devAiHubApiRef);
-  const { asset, loading } = useAssetDetail(assetId);
-  const handleClose = () => {
-    onClose();
-    setCopiedTool(null);
-  };
+  const discoveryApi = useApi(discoveryApiRef);
+  const { t } = useTranslationRef(devAiHubTranslationRef);
+  const resourcePaths = asset.resourcesContent ? Object.keys(asset.resourcesContent) : [];
+  const isZipSkill = asset.type === "skill" && resourcePaths.length > 0;
+  const installPaths = getInstallPathsForAsset(asset.type, asset.tools, asset.name, {
+    installPath: asset.installPath,
+    installPaths: asset.installPaths
+  });
   const handleCopy = (tool) => {
-    if (!asset) return;
     navigator.clipboard.writeText(asset.content).then(() => {
       setCopiedTool(tool);
       setTimeout(() => setCopiedTool(null), 2e3);
@@ -43,10 +65,7 @@ function AssetInstallDialog({ assetId, onClose }) {
     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");
@@ -66,98 +85,86 @@ function AssetInstallDialog({ assetId, onClose }) {
     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,
+  const handleInstallInVscode = async () => {
+    const backendUrl = await discoveryApi.getBaseUrl("dev-ai-hub");
+    const a = document.createElement("a");
+    a.href = buildVscodeRedirectUrl(asset, backendUrl);
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    api.trackInstall(asset.id).catch(() => {
+    });
+  };
+  const showVscodeButton = canUseVscodeDeepLink(asset.type, asset.tools, installPaths["github-copilot"]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isZipSkill && /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          border: "1px solid",
+          borderColor: "info.main",
+          borderRadius: 2,
+          p: 1.5,
+          bgcolor: (theme) => `${theme.palette.info.main}12`,
+          mb: 0.5
+        },
+        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: t("assetInstallDialog.bundledSkillTitle") })
+          ] }),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1 }, children: t("assetInstallDialog.bundledSkillDescription") }),
+          /* @__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))
+          ] })
+        ]
+      }
+    ),
+    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: t("assetInstallDialog.installPathLabel") }),
+          /* @__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",
+                wordBreak: "break-all",
+                mb: 1.25
+              },
+              children: installPath
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 0.75 }, children: [
+            showVscodeButton && tool === "github-copilot" && /* @__PURE__ */ jsx(
+              Button,
               {
-                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
+                size: "small",
+                variant: "contained",
+                startIcon: /* @__PURE__ */ jsx(OpenInBrowserIcon, {}),
+                onClick: handleInstallInVscode,
+                fullWidth: true,
+                children: t("assetInstallDialog.installInVscode")
               }
             ),
             /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [
-              /* @__PURE__ */ jsx(Tooltip, { title: copiedTool === tool ? "Copied!" : "Copy markdown content", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Tooltip, { title: copiedTool === tool ? t("assetInstallDialog.copied") : t("assetInstallDialog.copyTooltip"), children: /* @__PURE__ */ jsx(
                 Button,
                 {
                   size: "small",
@@ -166,10 +173,10 @@ function AssetInstallDialog({ assetId, onClose }) {
                   onClick: () => handleCopy(tool),
                   color: copiedTool === tool ? "success" : "primary",
                   sx: { flex: 1 },
-                  children: copiedTool === tool ? "Copied!" : "Copy Content"
+                  children: copiedTool === tool ? t("assetInstallDialog.copied") : t("assetInstallDialog.copyContent")
                 }
               ) }),
-              /* @__PURE__ */ jsx(Tooltip, { title: isZipSkill ? "Download as .zip with all bundled files" : "Download file with correct name", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Tooltip, { title: isZipSkill ? t("assetInstallDialog.downloadZipTooltip") : t("assetInstallDialog.downloadTooltip"), children: /* @__PURE__ */ jsx(
                 Button,
                 {
                   size: "small",
@@ -177,16 +184,229 @@ function AssetInstallDialog({ assetId, onClose }) {
                   startIcon: isZipSkill ? /* @__PURE__ */ jsx(FolderZipIcon, {}) : /* @__PURE__ */ jsx(DownloadIcon, {}),
                   onClick: () => handleDownload(tool, installPath),
                   sx: { flex: 1 },
-                  children: isZipSkill ? "Download .zip" : "Download"
+                  children: isZipSkill ? t("assetInstallDialog.downloadZip") : t("assetInstallDialog.download")
                 }
               ) })
             ] })
-          ]
+          ] })
+        ]
+      },
+      tool
+    ))
+  ] });
+}
+function BundleItemStep({ item, stepIndex, total }) {
+  const [copied, setCopied] = useState(false);
+  const api = useApi(devAiHubApiRef);
+  const discoveryApi = useApi(discoveryApiRef);
+  const { asset, loading } = useAssetDetail(item.assetId ?? null);
+  const { t } = useTranslationRef(devAiHubTranslationRef);
+  const installPaths = asset ? getInstallPathsForAsset(asset.type, asset.tools, asset.name, {
+    installPath: asset.installPath,
+    installPaths: asset.installPaths
+  }) : {};
+  const firstInstallPath = Object.values(installPaths)[0];
+  const handleCopy = () => {
+    if (!asset) return;
+    navigator.clipboard.writeText(asset.content).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    });
+    api.trackInstall(asset.id).catch(() => {
+    });
+  };
+  const handleDownload = async () => {
+    if (!asset) return;
+    const filename = firstInstallPath?.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 handleInstallInVscode = async () => {
+    if (!asset) return;
+    const backendUrl = await discoveryApi.getBaseUrl("dev-ai-hub");
+    const a = document.createElement("a");
+    a.href = buildVscodeRedirectUrl(asset, backendUrl);
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    api.trackInstall(asset.id).catch(() => {
+    });
+  };
+  const showVscodeButton = asset && canUseVscodeDeepLink(asset.type, asset.tools, installPaths["github-copilot"]);
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.5 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("assetInstallDialog.stepProgress", { current: String(stepIndex + 1), total: String(total) }) }),
+      item.type && /* @__PURE__ */ jsx(Chip, { label: item.type, size: "small", variant: "outlined", sx: { height: 20, fontSize: "0.65rem" } })
+    ] }),
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", fontWeight: 700, sx: { mb: 0.25 }, children: item.label ?? item.name ?? item.ref }),
+    item.description && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1.5 }, children: item.description }),
+    loading && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", py: 2 }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 24 }) }),
+    !loading && !item.assetId && /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          border: "1px dashed",
+          borderColor: "warning.main",
+          borderRadius: 2,
+          p: 1.5,
+          bgcolor: (theme) => `${theme.palette.warning.main}10`
         },
-        tool
-      ))
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "warning.main", fontWeight: 600, children: t("assetInstallDialog.notSyncedTitle") }),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("assetInstallDialog.notSyncedRef", { ref: item.ref }) })
+        ]
+      }
+    ),
+    !loading && asset && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+      firstInstallPath && /* @__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",
+            wordBreak: "break-all"
+          },
+          children: firstInstallPath
+        }
+      ),
+      showVscodeButton && /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          variant: "contained",
+          startIcon: /* @__PURE__ */ jsx(OpenInBrowserIcon, {}),
+          onClick: handleInstallInVscode,
+          fullWidth: true,
+          children: t("assetInstallDialog.installInVscode")
+        }
+      ),
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "outlined",
+            startIcon: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(ContentCopyIcon, {}),
+            onClick: handleCopy,
+            color: copied ? "success" : "primary",
+            sx: { flex: 1 },
+            children: copied ? t("assetInstallDialog.copied") : t("assetInstallDialog.copyContent")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "outlined",
+            startIcon: /* @__PURE__ */ jsx(DownloadIcon, {}),
+            onClick: handleDownload,
+            sx: { flex: 1 },
+            children: t("assetInstallDialog.download")
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function AssetInstallDialog({ assetId, onClose }) {
+  const [step, setStep] = useState(0);
+  const api = useApi(devAiHubApiRef);
+  const { asset, loading } = useAssetDetail(assetId);
+  const { t } = useTranslationRef(devAiHubTranslationRef);
+  const handleClose = () => {
+    setStep(0);
+    onClose();
+  };
+  const handleDownloadBundle = async () => {
+    if (!asset) return;
+    const url = await api.getDownloadUrl(asset.id);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${asset.name.replace(/\s+/g, "-").toLowerCase()}-bundle.zip`;
+    a.click();
+    api.trackInstall(asset.id).catch(() => {
+    });
+  };
+  const isBundle = asset?.type === "bundle";
+  const bundleItems = isBundle ? asset.items ?? [] : [];
+  const totalSteps = bundleItems.length;
+  const progress = totalSteps > 0 ? (step + 1) / totalSteps * 100 : 0;
+  return /* @__PURE__ */ jsxs(Dialog, { open: !!assetId, onClose: handleClose, maxWidth: "sm", fullWidth: true, children: [
+    /* @__PURE__ */ jsx(DialogTitle, { sx: { pb: 1 }, children: isBundle ? /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+      /* @__PURE__ */ jsx(Inventory2Icon, { sx: { color: "#8B5CF6", fontSize: "1.4rem" } }),
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 700, children: t("assetInstallDialog.dialogTitleBundle", { name: asset?.name ?? "" }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { fontWeight: 400 }, children: t("assetInstallDialog.dialogSubtitleBundle") })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 700, children: asset ? t("assetInstallDialog.dialogTitle", { name: asset.name }) : t("assetInstallDialog.dialogTitle", { name: "" }) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 0.5, fontWeight: 400 }, children: t("assetInstallDialog.dialogSubtitle") })
+    ] }) }),
+    isBundle && totalSteps > 0 && /* @__PURE__ */ jsxs(Box, { sx: { px: 3, pb: 1 }, children: [
+      /* @__PURE__ */ jsx(LinearProgress, { variant: "determinate", value: progress, sx: { borderRadius: 1, height: 6 } }),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 0.5, textAlign: "right" }, children: t("assetInstallDialog.bundleProgress", { current: String(step + 1), total: String(totalSteps) }) })
+    ] }),
+    /* @__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 && !isBundle && /* @__PURE__ */ jsx(SingleAssetView, { asset }),
+      !loading && isBundle && bundleItems.length === 0 && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { textAlign: "center", py: 2 }, children: t("assetInstallDialog.bundleEmpty") }),
+      !loading && isBundle && bundleItems.length > 0 && /* @__PURE__ */ jsx(
+        BundleItemStep,
+        {
+          item: bundleItems[step],
+          stepIndex: step,
+          total: totalSteps
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, { onClick: handleClose, children: "Close" }) })
+    /* @__PURE__ */ jsx(DialogActions, { sx: { justifyContent: "space-between", px: 2, py: 1.5 }, children: isBundle ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          startIcon: /* @__PURE__ */ jsx(FolderZipIcon, {}),
+          variant: "outlined",
+          size: "small",
+          onClick: handleDownloadBundle,
+          disabled: !asset,
+          children: t("assetInstallDialog.downloadBundle")
+        }
+      ),
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            startIcon: /* @__PURE__ */ jsx(ArrowBackIcon, {}),
+            onClick: () => setStep((s) => Math.max(0, s - 1)),
+            disabled: step === 0,
+            children: t("assetInstallDialog.back")
+          }
+        ),
+        step < totalSteps - 1 ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            endIcon: /* @__PURE__ */ jsx(ArrowForwardIcon, {}),
+            variant: "contained",
+            onClick: () => setStep((s) => Math.min(totalSteps - 1, s + 1)),
+            children: t("assetInstallDialog.next")
+          }
+        ) : /* @__PURE__ */ jsx(Button, { variant: "contained", color: "success", onClick: handleClose, children: t("assetInstallDialog.finish") })
+      ] })
+    ] }) : /* @__PURE__ */ jsx(Button, { onClick: handleClose, sx: { ml: "auto" }, children: t("assetInstallDialog.close") }) })
   ] });
 }