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

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

@@ -1,10 +1,11 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useState, useEffect } 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 Collapse from '@mui/material/Collapse';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -18,28 +19,50 @@ 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 ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FolderZipIcon from '@mui/icons-material/FolderZip';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import Inventory2Icon from '@mui/icons-material/Inventory2';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { useAssetDetail } from '../../hooks/index.esm.js';
+import { devAiHubTranslationRef } from '../../translation.esm.js';
 
 const SyntaxHighlighter = require("react-syntax-highlighter/dist/esm/prism").default;
 const { oneLight, oneDark } = require("react-syntax-highlighter/dist/esm/styles/prism");
+function parseFrontmatter(md) {
+  const match = md.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/);
+  if (!match) return { meta: null, body: md };
+  const meta = {};
+  for (const line of match[1].split("\n")) {
+    const m = line.match(/^([^:#\s][^:]*?):\s*(.+)$/);
+    if (m) meta[m[1].trim()] = m[2].trim().replace(/^["']|["']$/g, "");
+  }
+  return { meta: Object.keys(meta).length > 0 ? meta : null, body: match[2].trimStart() };
+}
 const TYPE_COLORS = {
   instruction: "#1976d2",
   agent: "#7b1fa2",
   skill: "#388e3c",
-  workflow: "#f57c00"
+  workflow: "#f57c00",
+  prompt: "#EC4899",
+  bundle: "#8B5CF6"
 };
 function AssetDetailPanel({ assetId, onClose }) {
   const [tab, setTab] = useState(0);
   const [snackbar, setSnackbar] = useState(null);
+  const [frontmatterOpen, setFrontmatterOpen] = useState(false);
   const { asset, loading } = useAssetDetail(assetId);
   const theme = useTheme();
+  const { t } = useTranslationRef(devAiHubTranslationRef);
   const syntaxTheme = theme.palette.mode === "dark" ? oneDark : oneLight;
+  useEffect(() => {
+    setFrontmatterOpen(false);
+  }, [assetId]);
+  const parsed = asset ? parseFrontmatter(asset.content) : null;
   const handleCopy = () => {
     if (!asset) return;
     navigator.clipboard.writeText(asset.content).then(
-      () => setSnackbar("Markdown copied to clipboard!")
+      () => setSnackbar(t("assetDetailPanel.copiedMessage"))
     );
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -65,19 +88,19 @@ function AssetDetailPanel({ assetId, onClose }) {
               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__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: t("assetDetailPanel.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(Typography, { variant: "h6", fontWeight: 700, children: asset.label ?? asset.name }),
                     /* @__PURE__ */ jsx(
                       Chip,
                       {
                         label: asset.type,
                         size: "small",
                         sx: {
-                          backgroundColor: `${TYPE_COLORS[asset.type]}20`,
-                          color: TYPE_COLORS[asset.type],
-                          fontWeight: 600
+                          backgroundColor: TYPE_COLORS[asset.type],
+                          color: "#fff",
+                          fontWeight: 700
                         }
                       }
                     )
@@ -95,104 +118,265 @@ function AssetDetailPanel({ assetId, onClose }) {
               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__ */ jsx(Tab, { label: t("assetDetailPanel.tabPreview") }),
+                /* @__PURE__ */ jsx(Tab, { label: t("assetDetailPanel.tabMetadata") }),
+                /* @__PURE__ */ jsx(Tab, { label: t("assetDetailPanel.tabRawYaml") })
               ]
             }
           ),
           /* @__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": {
+              tab === 0 && asset.type === "bundle" && /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.75, mb: 1.5 }, children: [
+                  /* @__PURE__ */ jsx(Inventory2Icon, { sx: { fontSize: "1rem", color: "#8B5CF6" } }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", fontWeight: 600, color: "text.secondary", children: t("assetDetailPanel.bundlePreviewTitle", { total: String(asset.items?.length ?? 0) }) })
+                ] }),
+                asset.description && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: asset.description }),
+                /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 0.75 }, children: (asset.items ?? []).map((item, idx) => /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 1.5,
+                      p: 1.25,
+                      borderRadius: 1.5,
                       border: "1px solid",
                       borderColor: "divider",
-                      px: 1.5,
-                      py: 0.75,
-                      fontSize: "0.875rem"
+                      bgcolor: "action.hover"
                     },
-                    "& 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
+                    children: /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: item.description ? 0.25 : 0 }, children: [
+                        /* @__PURE__ */ jsx(Typography, { variant: "body2", fontWeight: 600, noWrap: true, title: item.label ?? item.name ?? item.ref ?? void 0, children: item.label ?? item.name ?? item.ref }),
+                        item.type && /* @__PURE__ */ jsx(
+                          Chip,
+                          {
+                            label: item.type,
+                            size: "small",
+                            sx: {
+                              height: 18,
+                              fontSize: "0.65rem",
+                              bgcolor: TYPE_COLORS[item.type] ?? "#64748b",
+                              color: "#fff",
+                              fontWeight: 700,
+                              flexShrink: 0
                             }
-                          ) : /* @__PURE__ */ jsx("code", { className, children });
+                          }
+                        )
+                      ] }),
+                      item.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", noWrap: true, title: item.description, children: item.description }),
+                      !item.assetId && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.disabled", sx: { display: "block" }, children: t("assetDetailPanel.bundleItemNotSynced", { ref: item.ref }) })
+                    ] })
+                  },
+                  idx
+                )) })
+              ] }),
+              tab === 0 && asset.type !== "bundle" && /* @__PURE__ */ jsxs(Box, { children: [
+                parsed?.meta && /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      mb: 1.5,
+                      border: "1px solid",
+                      borderColor: "divider",
+                      borderRadius: 1.5,
+                      overflow: "hidden"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        Box,
+                        {
+                          onClick: () => setFrontmatterOpen((v) => !v),
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            px: 1.5,
+                            py: 0.75,
+                            cursor: "pointer",
+                            bgcolor: "action.hover",
+                            userSelect: "none",
+                            "&:hover": { bgcolor: "action.selected" }
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              Typography,
+                              {
+                                variant: "caption",
+                                fontWeight: 700,
+                                color: "text.secondary",
+                                sx: { fontFamily: "monospace", textTransform: "uppercase", letterSpacing: 0.6 },
+                                children: "frontmatter"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              ExpandMoreIcon,
+                              {
+                                sx: {
+                                  fontSize: "1rem",
+                                  color: "text.secondary",
+                                  transform: frontmatterOpen ? "rotate(180deg)" : "none",
+                                  transition: "transform 0.2s ease"
+                                }
+                              }
+                            )
+                          ]
                         }
+                      ),
+                      /* @__PURE__ */ jsx(Collapse, { in: frontmatterOpen, children: /* @__PURE__ */ jsx(Box, { sx: { px: 1.5, py: 1, display: "flex", flexDirection: "column", gap: 0.5 }, children: Object.entries(parsed.meta).map(([key, value]) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1, alignItems: "baseline" }, children: [
+                        /* @__PURE__ */ jsxs(
+                          Typography,
+                          {
+                            variant: "caption",
+                            sx: { fontFamily: "monospace", color: "primary.main", fontWeight: 600, minWidth: 90, flexShrink: 0 },
+                            children: [
+                              key,
+                              ":"
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { fontFamily: "monospace", wordBreak: "break-all" }, children: value })
+                      ] }, key)) }) })
+                    ]
+                  }
+                ),
+                /* @__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
                       },
-                      children: asset.content
-                    }
-                  )
-                }
-              ),
+                      "& 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: parsed?.body ?? 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(MetaRow, { label: t("assetDetailPanel.metaAuthor"), value: asset.author }),
+                /* @__PURE__ */ jsx(MetaRow, { label: t("assetDetailPanel.metaVersion"), value: asset.version }),
+                /* @__PURE__ */ jsx(MetaRow, { label: t("assetDetailPanel.metaProvider"), value: asset.providerId }),
+                asset.commitSha && /* @__PURE__ */ jsx(MetaRow, { label: t("assetDetailPanel.metaCommit"), value: asset.commitSha.slice(0, 8) }),
+                /* @__PURE__ */ jsx(MetaRow, { label: t("assetDetailPanel.metaLastSynced"), value: new Date(asset.syncedAt).toLocaleString() }),
+                /* @__PURE__ */ jsx(MetaRow, { label: t("assetDetailPanel.metaBranch"), 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)) })
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("assetDetailPanel.compatibleTools") }),
+                  /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 1, mt: 0.5 }, children: asset.tools.map((tool) => /* @__PURE__ */ jsx(Chip, { label: tool, size: "small" }, tool)) })
                 ] }),
                 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)) })
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("assetDetailPanel.tagsLabel") }),
+                  /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap", mt: 0.5 }, children: asset.tags.map((tag) => /* @__PURE__ */ jsx(Chip, { label: tag, size: "small", variant: "outlined" }, tag)) })
+                ] }),
+                asset.type === "bundle" && asset.items && asset.items.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Divider, {}),
+                  /* @__PURE__ */ jsxs(Box, { children: [
+                    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.75, mb: 1 }, children: [
+                      /* @__PURE__ */ jsx(Inventory2Icon, { sx: { fontSize: "0.85rem", color: "#8B5CF6" } }),
+                      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", fontWeight: 600, children: t("assetDetailPanel.bundleContents", { total: String(asset.items.length) }) })
+                    ] }),
+                    /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 0.75 }, children: asset.items.map((item, idx) => /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        sx: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 1,
+                          p: 1,
+                          borderRadius: 1,
+                          border: "1px solid",
+                          borderColor: "divider",
+                          bgcolor: "action.hover"
+                        },
+                        children: /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+                          /* @__PURE__ */ jsx(Typography, { variant: "body2", fontWeight: 600, noWrap: true, title: item.label ?? item.name ?? item.ref ?? void 0, children: item.label ?? item.name ?? item.ref }),
+                          item.type && /* @__PURE__ */ jsx(
+                            Chip,
+                            {
+                              label: item.type,
+                              size: "small",
+                              sx: {
+                                height: 16,
+                                fontSize: "0.6rem",
+                                bgcolor: `${TYPE_COLORS[item.type] ?? "#666"}22`,
+                                color: TYPE_COLORS[item.type] ?? "text.secondary",
+                                border: "1px solid",
+                                borderColor: `${TYPE_COLORS[item.type] ?? "#666"}55`,
+                                fontWeight: 600,
+                                mt: 0.25
+                              }
+                            }
+                          ),
+                          !item.assetId && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.disabled", sx: { display: "block" }, children: t("assetDetailPanel.bundleItemNotSyncedYet", { ref: item.ref }) })
+                        ] })
+                      },
+                      idx
+                    )) })
+                  ] })
                 ] }),
                 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" })
+                      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("assetDetailPanel.bundledFiles") })
                     ] }),
                     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: [
@@ -215,7 +399,7 @@ function AssetDetailPanel({ assetId, onClose }) {
                           p
                         ))
                       ] }),
-                      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.disabled", children: "Downloads as .zip containing all files above." })
+                      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.disabled", children: t("assetDetailPanel.zipDescription") })
                     ] }) : /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap", mt: 0.5 }, children: /* @__PURE__ */ jsx(
                       Chip,
                       {
@@ -228,7 +412,7 @@ function AssetDetailPanel({ assetId, onClose }) {
                 ] }),
                 /* @__PURE__ */ jsx(Divider, {}),
                 /* @__PURE__ */ jsxs(Box, { children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Repository" }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("assetDetailPanel.repository") }),
                   /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
                     Link,
                     {
@@ -285,7 +469,7 @@ function AssetDetailPanel({ assetId, onClose }) {
                     startIcon: /* @__PURE__ */ jsx(ContentCopyIcon, {}),
                     onClick: handleCopy,
                     disabled: !asset,
-                    children: "Copy Markdown"
+                    children: t("assetDetailPanel.copyMarkdown")
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -295,7 +479,7 @@ function AssetDetailPanel({ assetId, onClose }) {
                     startIcon: /* @__PURE__ */ jsx(OpenInNewIcon, {}),
                     onClick: () => asset && window.open(asset.repoUrl, "_blank"),
                     disabled: !asset,
-                    children: "Open in Repo"
+                    children: t("assetDetailPanel.openInRepo")
                   }
                 )
               ]