@julianpedro/plugin-dev-ai-hub 0.1.6

package/dist/api/DevAiHubClient.esm.js

@@ -0,0 +1,76 @@
+import { createApiRef } from '@backstage/core-plugin-api';
+
+const devAiHubApiRef = createApiRef({
+  id: "plugin.dev-ai-hub.service"
+});
+class DevAiHubClient {
+  constructor(discoveryApi, fetchApi) {
+    this.discoveryApi = discoveryApi;
+    this.fetchApi = fetchApi;
+  }
+  async baseUrl() {
+    return this.discoveryApi.getBaseUrl("dev-ai-hub");
+  }
+  async fetch(path, init) {
+    const base = await this.baseUrl();
+    const response = await this.fetchApi.fetch(`${base}${path}`, init);
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(
+        `Dev AI Hub API error ${response.status}: ${text}`
+      );
+    }
+    return response.json();
+  }
+  async listAssets(filter) {
+    const params = new URLSearchParams();
+    if (filter?.type) params.set("type", filter.type);
+    if (filter?.tool) params.set("tool", filter.tool);
+    if (filter?.search) params.set("search", filter.search);
+    if (filter?.providerId) params.set("provider", filter.providerId);
+    if (filter?.tags?.length) params.set("tags", filter.tags.join(","));
+    if (filter?.page) params.set("page", String(filter.page));
+    if (filter?.pageSize) params.set("pageSize", String(filter.pageSize));
+    const qs = params.toString();
+    return this.fetch(`/assets${qs ? `?${qs}` : ""}`);
+  }
+  async getAsset(id) {
+    return this.fetch(`/assets/${encodeURIComponent(id)}`);
+  }
+  async getAssetRaw(id) {
+    const base = await this.baseUrl();
+    const response = await this.fetchApi.fetch(
+      `${base}/assets/${encodeURIComponent(id)}/raw`
+    );
+    if (!response.ok) throw new Error(`Failed to fetch raw asset: ${response.status}`);
+    return response.text();
+  }
+  async getDownloadUrl(id) {
+    const base = await this.baseUrl();
+    return `${base}/assets/${encodeURIComponent(id)}/download`;
+  }
+  async trackInstall(id) {
+    await this.fetch(`/assets/${encodeURIComponent(id)}/track-install`, {
+      method: "POST"
+    });
+  }
+  async listProviders() {
+    return this.fetch("/providers");
+  }
+  async getProviderStatus(id) {
+    return this.fetch(
+      `/providers/${encodeURIComponent(id)}/status`
+    );
+  }
+  async triggerSync(id) {
+    await this.fetch(`/providers/${encodeURIComponent(id)}/sync`, {
+      method: "POST"
+    });
+  }
+  async getStats() {
+    return this.fetch("/stats");
+  }
+}
+
+export { DevAiHubClient, devAiHubApiRef };
+//# sourceMappingURL=DevAiHubClient.esm.js.map

package/dist/api/DevAiHubClient.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevAiHubClient.esm.js","sources":["../../src/api/DevAiHubClient.ts"],"sourcesContent":["import {\n  createApiRef,\n  DiscoveryApi,\n  FetchApi,\n} from '@backstage/core-plugin-api';\nimport type {\n  AiAsset,\n  AiAssetListResponse,\n  AiHubProvider,\n  AiHubStats,\n  AssetListFilter,\n} from '@julianpedro/plugin-dev-ai-hub-common';\n\nexport const devAiHubApiRef = createApiRef<DevAiHubApi>({\n  id: 'plugin.dev-ai-hub.service',\n});\n\nexport interface DevAiHubApi {\n  listAssets(filter?: AssetListFilter): Promise<AiAssetListResponse>;\n  getAsset(id: string): Promise<AiAsset>;\n  getAssetRaw(id: string): Promise<string>;\n  /** Returns the absolute URL for the download endpoint (zip for skills, md for others). */\n  getDownloadUrl(id: string): Promise<string>;\n  trackInstall(id: string): Promise<void>;\n  listProviders(): Promise<AiHubProvider[]>;\n  getProviderStatus(id: string): Promise<AiHubProvider>;\n  triggerSync(id: string): Promise<void>;\n  getStats(): Promise<AiHubStats>;\n}\n\nexport class DevAiHubClient implements DevAiHubApi {\n  constructor(\n    private readonly discoveryApi: DiscoveryApi,\n    private readonly fetchApi: FetchApi,\n  ) {}\n\n  private async baseUrl(): Promise<string> {\n    return this.discoveryApi.getBaseUrl('dev-ai-hub');\n  }\n\n  private async fetch<T>(path: string, init?: RequestInit): Promise<T> {\n    const base = await this.baseUrl();\n    const response = await this.fetchApi.fetch(`${base}${path}`, init);\n    if (!response.ok) {\n      const text = await response.text();\n      throw new Error(\n        `Dev AI Hub API error ${response.status}: ${text}`,\n      );\n    }\n    return response.json() as Promise<T>;\n  }\n\n  async listAssets(filter?: AssetListFilter): Promise<AiAssetListResponse> {\n    const params = new URLSearchParams();\n    if (filter?.type) params.set('type', filter.type);\n    if (filter?.tool) params.set('tool', filter.tool);\n    if (filter?.search) params.set('search', filter.search);\n    if (filter?.providerId) params.set('provider', filter.providerId);\n    if (filter?.tags?.length) params.set('tags', filter.tags.join(','));\n    if (filter?.page) params.set('page', String(filter.page));\n    if (filter?.pageSize) params.set('pageSize', String(filter.pageSize));\n\n    const qs = params.toString();\n    return this.fetch<AiAssetListResponse>(`/assets${qs ? `?${qs}` : ''}`);\n  }\n\n  async getAsset(id: string): Promise<AiAsset> {\n    return this.fetch<AiAsset>(`/assets/${encodeURIComponent(id)}`);\n  }\n\n  async getAssetRaw(id: string): Promise<string> {\n    const base = await this.baseUrl();\n    const response = await this.fetchApi.fetch(\n      `${base}/assets/${encodeURIComponent(id)}/raw`,\n    );\n    if (!response.ok) throw new Error(`Failed to fetch raw asset: ${response.status}`);\n    return response.text();\n  }\n\n  async getDownloadUrl(id: string): Promise<string> {\n    const base = await this.baseUrl();\n    return `${base}/assets/${encodeURIComponent(id)}/download`;\n  }\n\n  async trackInstall(id: string): Promise<void> {\n    await this.fetch(`/assets/${encodeURIComponent(id)}/track-install`, {\n      method: 'POST',\n    });\n  }\n\n  async listProviders(): Promise<AiHubProvider[]> {\n    return this.fetch<AiHubProvider[]>('/providers');\n  }\n\n  async getProviderStatus(id: string): Promise<AiHubProvider> {\n    return this.fetch<AiHubProvider>(\n      `/providers/${encodeURIComponent(id)}/status`,\n    );\n  }\n\n  async triggerSync(id: string): Promise<void> {\n    await this.fetch(`/providers/${encodeURIComponent(id)}/sync`, {\n      method: 'POST',\n    });\n  }\n\n  async getStats(): Promise<AiHubStats> {\n    return this.fetch<AiHubStats>('/stats');\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/AssetCard/AssetCard.esm.js

@@ -0,0 +1,200 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTheme, alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Chip from '@mui/material/Chip';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import DownloadIcon from '@mui/icons-material/Download';
+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 { ToolIcon } from '../ToolIcon/ToolIcon.esm.js';
+
+const POPULAR_THRESHOLD = 5;
+const NEW_DAYS_MS = 14 * 24 * 60 * 60 * 1e3;
+const TOOL_LABELS = {
+  "all": "Universal",
+  "claude-code": "Claude Code",
+  "github-copilot": "GitHub Copilot",
+  "google-gemini": "Google Gemini",
+  "cursor": "Cursor"
+};
+const TYPE_CONFIG = {
+  instruction: { label: "Instruction", color: "#2563EB", Icon: ArticleIcon },
+  agent: { label: "Agent", color: "#7C3AED", Icon: SmartToyIcon },
+  skill: { label: "Skill", color: "#059669", Icon: BuildIcon },
+  workflow: { label: "Workflow", color: "#D97706", Icon: AccountTreeIcon }
+};
+function AssetCard({ asset, onView, onInstall }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark" || theme.palette.type === "dark";
+  const cfg = TYPE_CONFIG[asset.type];
+  const TypeIcon = cfg.Icon;
+  const isPopular = asset.installCount >= POPULAR_THRESHOLD;
+  const isNew = Date.now() - new Date(asset.updatedAt).getTime() < NEW_DAYS_MS;
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "outlined",
+      sx: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        borderRadius: 2,
+        border: "1px solid",
+        borderColor: "divider",
+        borderLeft: `3px solid ${cfg.color}`,
+        transition: "all 0.18s ease",
+        "&:hover": {
+          boxShadow: `0 6px 24px ${cfg.color}30`,
+          borderColor: cfg.color,
+          transform: "translateY(-2px)"
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(CardContent, { sx: { p: 1.5, pb: "0 !important", flex: 1 }, children: [
+          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start", gap: 1, mb: 1 }, children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  width: 40,
+                  height: 40,
+                  borderRadius: 1.5,
+                  backgroundColor: alpha(cfg.color, 0.12),
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flexShrink: 0,
+                  boxShadow: `0 2px 8px ${cfg.color}25`
+                },
+                children: asset.icon ? /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: "img",
+                    src: asset.icon,
+                    alt: asset.label ?? asset.name,
+                    sx: { width: 26, height: 26, objectFit: "contain" },
+                    onError: (e) => {
+                      e.target.style.display = "none";
+                    }
+                  }
+                ) : /* @__PURE__ */ jsx(TypeIcon, { sx: { color: cfg.color, fontSize: "1.3rem" } })
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5, mb: 0.2 }, children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", fontWeight: 700, noWrap: true, title: asset.label ?? asset.name, sx: { lineHeight: 1.2, flex: 1 }, children: asset.label ?? asset.name }),
+                isNew && /* @__PURE__ */ jsx(
+                  Chip,
+                  {
+                    label: "New",
+                    size: "small",
+                    sx: {
+                      height: 18,
+                      fontSize: "0.6rem",
+                      fontWeight: 700,
+                      backgroundColor: alpha("#059669", isDark ? 0.25 : 0.14),
+                      backdropFilter: "blur(8px)",
+                      color: isDark ? "#fff" : "#059669",
+                      border: "1px solid",
+                      borderColor: alpha("#059669", isDark ? 0.5 : 0.3),
+                      borderRadius: 1,
+                      flexShrink: 0,
+                      "& .MuiChip-label": { px: "6px" }
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: cfg.color, fontWeight: 600 }, children: cfg.label })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              sx: {
+                mb: 1,
+                display: "-webkit-box",
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden",
+                lineHeight: 1.4
+              },
+              children: asset.description
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap", mb: asset.tags.length > 0 ? 0.75 : 0 }, children: asset.tools.map((tool) => /* @__PURE__ */ jsx(
+            Chip,
+            {
+              icon: /* @__PURE__ */ jsx(ToolIcon, { tool, sx: { fontSize: "0.75rem !important" } }),
+              label: TOOL_LABELS[tool] ?? tool,
+              size: "small",
+              sx: {
+                height: 18,
+                fontSize: "0.65rem",
+                fontWeight: 600,
+                backgroundColor: "action.hover",
+                color: "text.secondary",
+                borderRadius: 1,
+                "& .MuiChip-icon": { ml: "4px" }
+              }
+            },
+            tool
+          )) }),
+          asset.tags.length > 0 && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" }, children: [
+            asset.tags.slice(0, 3).map((tag) => /* @__PURE__ */ jsx(
+              Chip,
+              {
+                label: `#${tag}`,
+                size: "small",
+                sx: {
+                  height: 16,
+                  fontSize: "0.6rem",
+                  color: "text.disabled",
+                  backgroundColor: "transparent",
+                  border: "1px solid",
+                  borderColor: "divider",
+                  borderRadius: 1
+                }
+              },
+              tag
+            )),
+            asset.tags.length > 3 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.disabled", sx: { alignSelf: "center" }, children: [
+              "+",
+              asset.tags.length - 3
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(CardActions, { sx: { px: 1.5, py: 1, justifyContent: "space-between", mt: "auto", borderTop: "1px solid", borderColor: "divider" }, children: [
+          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.disabled", sx: { fontSize: "0.65rem" }, children: [
+              "v",
+              asset.version,
+              " \xB7 ",
+              asset.author
+            ] }),
+            asset.installCount > 0 && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.25 }, children: [
+              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.65rem", lineHeight: 1 }, children: isPopular ? "\u{1F525}" : "\u2193" }),
+              /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.disabled", sx: { fontSize: "0.65rem" }, children: asset.installCount })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 0.25 }, children: [
+            /* @__PURE__ */ jsx(Tooltip, { title: "Install in editor", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => onInstall(asset.id), color: "primary", children: /* @__PURE__ */ jsx(DownloadIcon, { fontSize: "small" }) }) }),
+            /* @__PURE__ */ jsx(Tooltip, { title: "View details", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => onView(asset.id), children: /* @__PURE__ */ jsx(OpenInNewIcon, { fontSize: "small" }) }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { AssetCard };
+//# sourceMappingURL=AssetCard.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCard.esm.js","sources":["../../../src/components/AssetCard/AssetCard.tsx"],"sourcesContent":["import type { ElementType } from 'react';\nimport { alpha, useTheme } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CardActions from '@mui/material/CardActions';\nimport CardContent from '@mui/material/CardContent';\nimport Chip from '@mui/material/Chip';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport OpenInNewIcon from '@mui/icons-material/OpenInNew';\nimport DownloadIcon from '@mui/icons-material/Download';\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 type { AiAssetSummary, AssetType, AiTool } from '@julianpedro/plugin-dev-ai-hub-common';\nimport { ToolIcon } from '../ToolIcon';\n\nconst POPULAR_THRESHOLD = 5;\nconst NEW_DAYS_MS = 14 * 24 * 60 * 60 * 1000;\n\nconst TOOL_LABELS: Record<AiTool, string> = {\n  'all':            'Universal',\n  'claude-code':    'Claude Code',\n  'github-copilot': 'GitHub Copilot',\n  'google-gemini':  'Google Gemini',\n  'cursor':         'Cursor',\n};\n\nconst TYPE_CONFIG: Record<AssetType, { label: string; color: string; Icon: ElementType }> = {\n  instruction: { label: 'Instruction', color: '#2563EB', Icon: ArticleIcon },\n  agent:       { label: 'Agent',       color: '#7C3AED', Icon: SmartToyIcon },\n  skill:       { label: 'Skill',       color: '#059669', Icon: BuildIcon },\n  workflow:    { label: 'Workflow',    color: '#D97706', Icon: AccountTreeIcon },\n};\n\ninterface AssetCardProps {\n  asset: AiAssetSummary;\n  onView: (id: string) => void;\n  onInstall: (id: string) => void;\n}\n\nexport function AssetCard({ asset, onView, onInstall }: AssetCardProps) {\n  const theme = useTheme();\n  const isDark = (theme.palette as any).mode === 'dark' || (theme.palette as any).type === 'dark';\n  const cfg = TYPE_CONFIG[asset.type];\n  const TypeIcon = cfg.Icon;\n  const isPopular = asset.installCount >= POPULAR_THRESHOLD;\n  const isNew = Date.now() - new Date(asset.updatedAt).getTime() < NEW_DAYS_MS;\n\n  return (\n    <Card\n      variant=\"outlined\"\n      sx={{\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        borderRadius: 2,\n        border: '1px solid',\n        borderColor: 'divider',\n        borderLeft: `3px solid ${cfg.color}`,\n        transition: 'all 0.18s ease',\n        '&:hover': {\n          boxShadow: `0 6px 24px ${cfg.color}30`,\n          borderColor: cfg.color,\n          transform: 'translateY(-2px)',\n        },\n      }}\n    >\n      <CardContent sx={{ p: 1.5, pb: '0 !important', flex: 1 }}>\n        {/* Header */}\n        <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, mb: 1 }}>\n          <Box\n            sx={{\n              width: 40,\n              height: 40,\n              borderRadius: 1.5,\n              backgroundColor: alpha(cfg.color, 0.12),\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              flexShrink: 0,\n              boxShadow: `0 2px 8px ${cfg.color}25`,\n            }}\n          >\n            {asset.icon ? (\n              <Box\n                component=\"img\"\n                src={asset.icon}\n                alt={asset.label ?? asset.name}\n                sx={{ width: 26, height: 26, objectFit: 'contain' }}\n                onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }}\n              />\n            ) : (\n              <TypeIcon sx={{ color: cfg.color, fontSize: '1.3rem' }} />\n            )}\n          </Box>\n\n          <Box sx={{ flex: 1, minWidth: 0 }}>\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 0.2 }}>\n              <Typography variant=\"body2\" fontWeight={700} noWrap title={asset.label ?? asset.name} sx={{ lineHeight: 1.2, flex: 1 }}>\n                {asset.label ?? asset.name}\n              </Typography>\n              {isNew && (\n                <Chip\n                  label=\"New\"\n                  size=\"small\"\n                  sx={{\n                    height: 18,\n                    fontSize: '0.6rem',\n                    fontWeight: 700,\n                    backgroundColor: alpha('#059669', isDark ? 0.25 : 0.14),\n                    backdropFilter: 'blur(8px)',\n                    color: isDark ? '#fff' : '#059669',\n                    border: '1px solid',\n                    borderColor: alpha('#059669', isDark ? 0.5 : 0.3),\n                    borderRadius: 1,\n                    flexShrink: 0,\n                    '& .MuiChip-label': { px: '6px' },\n                  }}\n                />\n              )}\n            </Box>\n            <Typography variant=\"caption\" sx={{ color: cfg.color, fontWeight: 600 }}>\n              {cfg.label}\n            </Typography>\n          </Box>\n        </Box>\n\n        {/* Description */}\n        <Typography\n          variant=\"caption\"\n          color=\"text.secondary\"\n          sx={{\n            mb: 1,\n            display: '-webkit-box',\n            WebkitLineClamp: 2,\n            WebkitBoxOrient: 'vertical',\n            overflow: 'hidden',\n            lineHeight: 1.4,\n          }}\n        >\n          {asset.description}\n        </Typography>\n\n        {/* Tools */}\n        <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', mb: asset.tags.length > 0 ? 0.75 : 0 }}>\n          {asset.tools.map(tool => (\n            <Chip\n              key={tool}\n              icon={<ToolIcon tool={tool as AiTool} sx={{ fontSize: '0.75rem !important' }} />}\n              label={TOOL_LABELS[tool as AiTool] ?? tool}\n              size=\"small\"\n              sx={{\n                height: 18,\n                fontSize: '0.65rem',\n                fontWeight: 600,\n                backgroundColor: 'action.hover',\n                color: 'text.secondary',\n                borderRadius: 1,\n                '& .MuiChip-icon': { ml: '4px' },\n              }}\n            />\n          ))}\n        </Box>\n\n        {/* Tags */}\n        {asset.tags.length > 0 && (\n          <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>\n            {asset.tags.slice(0, 3).map(tag => (\n              <Chip\n                key={tag}\n                label={`#${tag}`}\n                size=\"small\"\n                sx={{\n                  height: 16,\n                  fontSize: '0.6rem',\n                  color: 'text.disabled',\n                  backgroundColor: 'transparent',\n                  border: '1px solid',\n                  borderColor: 'divider',\n                  borderRadius: 1,\n                }}\n              />\n            ))}\n            {asset.tags.length > 3 && (\n              <Typography variant=\"caption\" color=\"text.disabled\" sx={{ alignSelf: 'center' }}>\n                +{asset.tags.length - 3}\n              </Typography>\n            )}\n          </Box>\n        )}\n      </CardContent>\n\n      <CardActions sx={{ px: 1.5, py: 1, justifyContent: 'space-between', mt: 'auto', borderTop: '1px solid', borderColor: 'divider' }}>\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n          <Typography variant=\"caption\" color=\"text.disabled\" sx={{ fontSize: '0.65rem' }}>\n            v{asset.version} · {asset.author}\n          </Typography>\n          {asset.installCount > 0 && (\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25 }}>\n              <Typography sx={{ fontSize: '0.65rem', lineHeight: 1 }}>\n                {isPopular ? '🔥' : '↓'}\n              </Typography>\n              <Typography variant=\"caption\" color=\"text.disabled\" sx={{ fontSize: '0.65rem' }}>\n                {asset.installCount}\n              </Typography>\n            </Box>\n          )}\n        </Box>\n        <Box sx={{ display: 'flex', gap: 0.25 }}>\n          <Tooltip title=\"Install in editor\">\n            <IconButton size=\"small\" onClick={() => onInstall(asset.id)} color=\"primary\">\n              <DownloadIcon fontSize=\"small\" />\n            </IconButton>\n          </Tooltip>\n          <Tooltip title=\"View details\">\n            <IconButton size=\"small\" onClick={() => onView(asset.id)}>\n              <OpenInNewIcon fontSize=\"small\" />\n            </IconButton>\n          </Tooltip>\n        </Box>\n      </CardActions>\n    </Card>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/AssetDetailPanel/AssetDetailPanel.esm.js

@@ -0,0 +1,327 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useTheme } from '@mui/material/styles';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import CircularProgress from '@mui/material/CircularProgress';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import IconButton from '@mui/material/IconButton';
+import Link from '@mui/material/Link';
+import Snackbar from '@mui/material/Snackbar';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Typography from '@mui/material/Typography';
+import CloseIcon from '@mui/icons-material/Close';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import FolderZipIcon from '@mui/icons-material/FolderZip';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { useAssetDetail } from '../../hooks/index.esm.js';
+
+const SyntaxHighlighter = require("react-syntax-highlighter/dist/esm/prism").default;
+const { oneLight, oneDark } = require("react-syntax-highlighter/dist/esm/styles/prism");
+const TYPE_COLORS = {
+  instruction: "#1976d2",
+  agent: "#7b1fa2",
+  skill: "#388e3c",
+  workflow: "#f57c00"
+};
+function AssetDetailPanel({ assetId, onClose }) {
+  const [tab, setTab] = useState(0);
+  const [snackbar, setSnackbar] = useState(null);
+  const { asset, loading } = useAssetDetail(assetId);
+  const theme = useTheme();
+  const syntaxTheme = theme.palette.mode === "dark" ? oneDark : oneLight;
+  const handleCopy = () => {
+    if (!asset) return;
+    navigator.clipboard.writeText(asset.content).then(
+      () => setSnackbar("Markdown copied to clipboard!")
+    );
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Drawer,
+      {
+        anchor: "right",
+        open: !!assetId,
+        onClose,
+        PaperProps: { sx: { width: { xs: "100vw", md: 640 } } },
+        children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                p: 2,
+                display: "flex",
+                alignItems: "flex-start",
+                gap: 2,
+                borderBottom: 1,
+                borderColor: "divider"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, children: loading || !asset ? /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                  /* @__PURE__ */ jsx(CircularProgress, { size: 16 }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Loading..." })
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.5 }, children: [
+                    /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 700, children: asset.name }),
+                    /* @__PURE__ */ jsx(
+                      Chip,
+                      {
+                        label: asset.type,
+                        size: "small",
+                        sx: {
+                          backgroundColor: `${TYPE_COLORS[asset.type]}20`,
+                          color: TYPE_COLORS[asset.type],
+                          fontWeight: 600
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: asset.description })
+                ] }) }),
+                /* @__PURE__ */ jsx(IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Tabs,
+            {
+              value: tab,
+              onChange: (_, v) => setTab(v),
+              sx: { borderBottom: 1, borderColor: "divider", px: 2 },
+              children: [
+                /* @__PURE__ */ jsx(Tab, { label: "Preview" }),
+                /* @__PURE__ */ jsx(Tab, { label: "Metadata" }),
+                /* @__PURE__ */ jsx(Tab, { label: "Raw YAML" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, overflow: "auto", p: 2 }, children: [
+            loading && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", pt: 4 }, children: /* @__PURE__ */ jsx(CircularProgress, {}) }),
+            !loading && asset && /* @__PURE__ */ jsxs(Fragment, { children: [
+              tab === 0 && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    "& h1,h2,h3,h4,h5,h6": { mt: 2, mb: 1, fontWeight: 700 },
+                    "& 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 code": { bgcolor: "transparent", px: 0, py: 0 }
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    ReactMarkdown,
+                    {
+                      remarkPlugins: [remarkGfm],
+                      components: {
+                        pre: ({ children }) => /* @__PURE__ */ jsx(Box, { sx: { my: 1 }, children }),
+                        code({ className, children }) {
+                          const match = /language-(\w+)/.exec(className || "");
+                          const code = String(children).replace(/\n$/, "");
+                          const isBlock = code.includes("\n") || !!match;
+                          return isBlock ? /* @__PURE__ */ jsx(
+                            SyntaxHighlighter,
+                            {
+                              style: syntaxTheme,
+                              language: match?.[1] ?? "text",
+                              PreTag: "div",
+                              customStyle: {
+                                borderRadius: 8,
+                                fontSize: "0.8rem",
+                                margin: 0,
+                                border: `1px solid ${theme.palette.divider}`
+                              },
+                              children: code
+                            }
+                          ) : /* @__PURE__ */ jsx("code", { className, children });
+                        }
+                      },
+                      children: asset.content
+                    }
+                  )
+                }
+              ),
+              tab === 1 && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+                /* @__PURE__ */ jsx(MetaRow, { label: "Author", value: asset.author }),
+                /* @__PURE__ */ jsx(MetaRow, { label: "Version", value: asset.version }),
+                /* @__PURE__ */ jsx(MetaRow, { label: "Provider", value: asset.providerId }),
+                asset.commitSha && /* @__PURE__ */ jsx(MetaRow, { label: "Commit", value: asset.commitSha.slice(0, 8) }),
+                /* @__PURE__ */ jsx(MetaRow, { label: "Last synced", value: new Date(asset.syncedAt).toLocaleString() }),
+                /* @__PURE__ */ jsx(MetaRow, { label: "Branch", value: asset.branch }),
+                /* @__PURE__ */ jsx(Divider, {}),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Compatible tools" }),
+                  /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 1, mt: 0.5 }, children: asset.tools.map((t) => /* @__PURE__ */ jsx(Chip, { label: t, size: "small" }, t)) })
+                ] }),
+                asset.tags.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Tags" }),
+                  /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap", mt: 0.5 }, children: asset.tags.map((t) => /* @__PURE__ */ jsx(Chip, { label: t, size: "small", variant: "outlined" }, t)) })
+                ] }),
+                asset.type === "skill" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Divider, {}),
+                  /* @__PURE__ */ jsxs(Box, { children: [
+                    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.75, mb: 0.5 }, children: [
+                      /* @__PURE__ */ jsx(FolderZipIcon, { sx: { fontSize: "0.85rem", color: "text.secondary" } }),
+                      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Bundled files" })
+                    ] }),
+                    asset.resourcesContent && Object.keys(asset.resourcesContent).length > 0 ? /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 0.5, mt: 0.5 }, children: [
+                      /* @__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 }
+                          }
+                        ),
+                        Object.keys(asset.resourcesContent).map((p) => /* @__PURE__ */ jsx(
+                          Chip,
+                          {
+                            label: p,
+                            size: "small",
+                            variant: "outlined",
+                            sx: { fontFamily: "monospace", fontSize: "0.7rem", height: 20 }
+                          },
+                          p
+                        ))
+                      ] }),
+                      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.disabled", children: "Downloads as .zip containing all files above." })
+                    ] }) : /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap", mt: 0.5 }, children: /* @__PURE__ */ jsx(
+                      Chip,
+                      {
+                        label: "SKILL.md",
+                        size: "small",
+                        sx: { fontFamily: "monospace", fontSize: "0.7rem", height: 20 }
+                      }
+                    ) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(Divider, {}),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Repository" }),
+                  /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
+                    Link,
+                    {
+                      href: asset.repoUrl,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      variant: "body2",
+                      children: [
+                        asset.repoUrl,
+                        " ",
+                        /* @__PURE__ */ jsx(OpenInNewIcon, { sx: { fontSize: 12 } })
+                      ]
+                    }
+                  ) })
+                ] })
+              ] }),
+              tab === 2 && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "pre",
+                  sx: {
+                    bgcolor: "action.hover",
+                    p: 2,
+                    borderRadius: 1,
+                    overflow: "auto",
+                    fontSize: "0.8rem",
+                    fontFamily: "monospace",
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-word",
+                    border: "1px solid",
+                    borderColor: "divider"
+                  },
+                  children: asset.yamlRaw
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                p: 2,
+                borderTop: 1,
+                borderColor: "divider",
+                display: "flex",
+                gap: 1,
+                flexWrap: "wrap"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "contained",
+                    startIcon: /* @__PURE__ */ jsx(ContentCopyIcon, {}),
+                    onClick: handleCopy,
+                    disabled: !asset,
+                    children: "Copy Markdown"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outlined",
+                    startIcon: /* @__PURE__ */ jsx(OpenInNewIcon, {}),
+                    onClick: () => asset && window.open(asset.repoUrl, "_blank"),
+                    disabled: !asset,
+                    children: "Open in Repo"
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Snackbar,
+      {
+        open: !!snackbar,
+        autoHideDuration: 2500,
+        onClose: () => setSnackbar(null),
+        anchorOrigin: { vertical: "bottom", horizontal: "center" },
+        children: /* @__PURE__ */ jsx(Alert, { severity: "success", onClose: () => setSnackbar(null), children: snackbar })
+      }
+    )
+  ] });
+}
+function MetaRow({ label, value }) {
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: label }),
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", children: value })
+  ] });
+}
+
+export { AssetDetailPanel };
+//# sourceMappingURL=AssetDetailPanel.esm.js.map