@industry-theme/agent-panels 0.2.4 → 0.2.7

package/dist/panels.bundle.js

@@ -2249,61 +2249,53 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$l);
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$k = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$k);
-/**
- * @license lucide-react v0.552.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$j = [
+const __iconNode$k = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$j);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$k);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [
+const __iconNode$j = [
   ["path", { d: "m18 16 4-4-4-4", key: "1inbqp" }],
   ["path", { d: "m6 8-4 4 4 4", key: "15zrgr" }],
   ["path", { d: "m14.5 4-5 16", key: "e7oirm" }]
 ];
-const CodeXml = createLucideIcon("code-xml", __iconNode$i);
+const CodeXml = createLucideIcon("code-xml", __iconNode$j);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$h = [
+const __iconNode$i = [
   ["path", { d: "m16 18 6-6-6-6", key: "eg8j8" }],
   ["path", { d: "m8 6-6 6 6 6", key: "ppft3o" }]
 ];
-const Code = createLucideIcon("code", __iconNode$h);
+const Code = createLucideIcon("code", __iconNode$i);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$g = [
+const __iconNode$h = [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const Copy = createLucideIcon("copy", __iconNode$g);
+const Copy = createLucideIcon("copy", __iconNode$h);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$f = [
+const __iconNode$g = [
   ["path", { d: "m15 15 6 6", key: "1s409w" }],
   ["path", { d: "m15 9 6-6", key: "ko1vev" }],
   ["path", { d: "M21 16v5h-5", key: "1ck2sf" }],
@@ -2313,14 +2305,14 @@ const __iconNode$f = [
   ["path", { d: "M3 8V3h5", key: "1ln10m" }],
   ["path", { d: "M9 9 3 3", key: "v551iv" }]
 ];
-const Expand = createLucideIcon("expand", __iconNode$f);
+const Expand = createLucideIcon("expand", __iconNode$g);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$e = [
+const __iconNode$f = [
   [
     "path",
     {
@@ -2332,14 +2324,14 @@ const __iconNode$e = [
   ["path", { d: "M10 12.5 8 15l2 2.5", key: "1tg20x" }],
   ["path", { d: "m14 12.5 2 2.5-2 2.5", key: "yinavb" }]
 ];
-const FileCode = createLucideIcon("file-code", __iconNode$e);
+const FileCode = createLucideIcon("file-code", __iconNode$f);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$d = [
+const __iconNode$e = [
   [
     "path",
     {
@@ -2352,14 +2344,14 @@ const __iconNode$d = [
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-const FileText = createLucideIcon("file-text", __iconNode$d);
+const FileText = createLucideIcon("file-text", __iconNode$e);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$c = [
+const __iconNode$d = [
   [
     "path",
     {
@@ -2377,14 +2369,14 @@ const __iconNode$c = [
   ["path", { d: "M3 5a2 2 0 0 0 2 2h3", key: "f2jnh7" }],
   ["path", { d: "M3 3v13a2 2 0 0 0 2 2h3", key: "k8epm1" }]
 ];
-const FolderTree = createLucideIcon("folder-tree", __iconNode$c);
+const FolderTree = createLucideIcon("folder-tree", __iconNode$d);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$b = [
+const __iconNode$c = [
   [
     "path",
     {
@@ -2393,14 +2385,14 @@ const __iconNode$b = [
     }
   ]
 ];
-const Folder = createLucideIcon("folder", __iconNode$b);
+const Folder = createLucideIcon("folder", __iconNode$c);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$a = [
+const __iconNode$b = [
   [
     "path",
     {
@@ -2410,49 +2402,49 @@ const __iconNode$a = [
   ],
   ["path", { d: "M9 18c-4.51 2-5-2-7-2", key: "9comsn" }]
 ];
-const Github = createLucideIcon("github", __iconNode$a);
+const Github = createLucideIcon("github", __iconNode$b);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$9 = [
+const __iconNode$a = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20", key: "13o1zl" }],
   ["path", { d: "M2 12h20", key: "9i4pu4" }]
 ];
-const Globe = createLucideIcon("globe", __iconNode$9);
+const Globe = createLucideIcon("globe", __iconNode$a);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$8 = [
+const __iconNode$9 = [
   ["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
   ["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
   ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
 ];
-const Monitor = createLucideIcon("monitor", __iconNode$8);
+const Monitor = createLucideIcon("monitor", __iconNode$9);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$7 = [
+const __iconNode$8 = [
   ["path", { d: "M18 8L22 12L18 16", key: "1r0oui" }],
   ["path", { d: "M2 12H22", key: "1m8cig" }]
 ];
-const MoveRight = createLucideIcon("move-right", __iconNode$7);
+const MoveRight = createLucideIcon("move-right", __iconNode$8);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$6 = [
+const __iconNode$7 = [
   [
     "path",
     {
@@ -2464,14 +2456,14 @@ const __iconNode$6 = [
   ["polyline", { points: "3.29 7 12 12 20.71 7", key: "ousv84" }],
   ["path", { d: "m7.5 4.27 9 5.15", key: "1c824w" }]
 ];
-const Package = createLucideIcon("package", __iconNode$6);
+const Package = createLucideIcon("package", __iconNode$7);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$5 = [
+const __iconNode$6 = [
   [
     "path",
     {
@@ -2480,31 +2472,49 @@ const __iconNode$5 = [
     }
   ]
 ];
-const Play = createLucideIcon("play", __iconNode$5);
+const Play = createLucideIcon("play", __iconNode$6);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$4 = [
+const __iconNode$5 = [
   ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
   ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
   ["path", { d: "M8 16H3v5", key: "1cv678" }]
 ];
-const RefreshCw = createLucideIcon("refresh-cw", __iconNode$4);
+const RefreshCw = createLucideIcon("refresh-cw", __iconNode$5);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$3 = [
+const __iconNode$4 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon("search", __iconNode$3);
+const Search = createLucideIcon("search", __iconNode$4);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$3 = [
+  [
+    "path",
+    {
+      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+      key: "wmoenq"
+    }
+  ],
+  ["path", { d: "M12 9v4", key: "juzpu7" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+];
+const TriangleAlert = createLucideIcon("triangle-alert", __iconNode$3);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -2558,13 +2568,19 @@ const determineSkillSource = (path2) => {
     return { source: "project-other", priority: 5 };
   }
 };
-const findSkillFiles = (fileTree) => {
+const findSkillFiles = (fileTree, isBrowserMode = false) => {
   const skillFiles = fileTree.allFiles.filter((file) => {
     const path2 = file.relativePath;
     const isMarkdown = file.name.endsWith(".md");
-    const isInSkillDir = path2.includes(".agent/skills/") || path2.includes(".claude/skills/");
     const isMetadata = file.name === ".metadata.json" || file.name.startsWith(".");
-    return isMarkdown && isInSkillDir && !isMetadata;
+    if (isMetadata) {
+      return false;
+    }
+    if (isBrowserMode) {
+      return file.name === "SKILL.md" || file.name.toLowerCase() === "skill.md";
+    }
+    const isInSkillDir = path2.includes(".agent/skills/") || path2.includes(".claude/skills/");
+    return isMarkdown && isInSkillDir;
   });
   return skillFiles.map((file) => file.relativePath);
 };
@@ -2600,6 +2616,21 @@ const analyzeSkillStructure = (fileTree, skillPath) => {
     assetFiles
   };
 };
+const hasFrontmatterYAML = (content2) => {
+  const trimmedContent = content2.trim();
+  if (!trimmedContent.startsWith("---")) {
+    return false;
+  }
+  const lines = trimmedContent.split("\n");
+  let frontmatterEnd = -1;
+  for (let i = 1; i < lines.length; i++) {
+    if (lines[i].trim() === "---") {
+      frontmatterEnd = i;
+      break;
+    }
+  }
+  return frontmatterEnd > 0;
+};
 const parseSkillContent = async (content2, path2, fileTree, fileSystemAdapter) => {
   const pathParts = path2.split("/");
   const fileName = pathParts[pathParts.length - 1];
@@ -2639,6 +2670,7 @@ const parseSkillContent = async (content2, path2, fileTree, fileSystemAdapter) =
       console.debug("[useSkillsData] No metadata file for skill:", skillDirName);
     }
   }
+  const hasFrontmatter = hasFrontmatterYAML(content2);
   return {
     id: path2,
     name: skillDirName.replace(/-/g, " ").replace(/_/g, " "),
@@ -2650,7 +2682,8 @@ const parseSkillContent = async (content2, path2, fileTree, fileSystemAdapter) =
     ...structure,
     source: source2,
     priority,
-    metadata
+    metadata,
+    hasFrontmatter
   };
 };
 const useSkillsData = ({
@@ -2681,14 +2714,16 @@ const useSkillsData = ({
     try {
       let localSkills = [];
       if (fileTree && (fileSystem == null ? void 0 : fileSystem.readFile) && repoPath) {
+        const isBrowserMode = !repoPath.startsWith("/");
         console.log("[useSkillsData] fileTree:", fileTree);
         console.log("[useSkillsData] typeof fileTree:", typeof fileTree);
         console.log("[useSkillsData] fileTree keys:", Object.keys(fileTree));
-        const skillPaths = findSkillFiles(fileTree);
+        console.log("[useSkillsData] Browser mode:", isBrowserMode);
+        const skillPaths = findSkillFiles(fileTree, isBrowserMode);
         console.log("[useSkillsData] Found skill paths:", skillPaths);
         const skillPromises = skillPaths.map(async (skillPath) => {
           try {
-            const fullPath = `${repoPath}/${skillPath}`;
+            const fullPath = isBrowserMode ? skillPath : `${repoPath}/${skillPath}`;
             const content2 = await fileSystem.readFile(fullPath);
             return parseSkillContent(content2, skillPath, fileTree, fileSystem);
           } catch (err) {
@@ -2786,6 +2821,17 @@ const SkillCard = ({
   var _a, _b, _c, _d, _e2, _f, _g, _h;
   const { theme: theme2 } = useTheme();
   const sourceConfig = getSourceConfig(skill.source);
+  const [pathCopied, setPathCopied] = React2__default.useState(false);
+  const handleCopyPath = async (e) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(skill.path);
+      setPathCopied(true);
+      setTimeout(() => setPathCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy path:", err);
+    }
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2817,105 +2863,171 @@ const SkillCard = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px" }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px", flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "12px" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px", flex: 1, minWidth: 0 }, children: [
             /* @__PURE__ */ jsx(
-              "div",
+              "h3",
               {
                 style: {
-                  width: "36px",
-                  height: "36px",
-                  borderRadius: theme2.radii[1],
-                  background: `${theme2.colors.primary}20`,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  flexShrink: 0
+                  margin: 0,
+                  fontSize: theme2.fontSizes[2],
+                  fontWeight: theme2.fontWeights.semibold,
+                  color: theme2.colors.text,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  textTransform: "capitalize"
                 },
-                children: /* @__PURE__ */ jsx(FileText, { size: 20, color: theme2.colors.primary })
+                children: skill.name
               }
             ),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px", flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ jsx(
-                "h3",
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px", alignItems: "center", flexWrap: "wrap" }, children: [
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
                   style: {
-                    margin: 0,
-                    fontSize: theme2.fontSizes[2],
-                    fontWeight: theme2.fontWeights.semibold,
-                    color: theme2.colors.text,
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                    textTransform: "capitalize"
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    padding: "2px 6px",
+                    borderRadius: theme2.radii[1],
+                    backgroundColor: sourceConfig.bgColor,
+                    border: `1px solid ${sourceConfig.borderColor}`,
+                    fontSize: theme2.fontSizes[0],
+                    color: sourceConfig.color,
+                    fontWeight: 500,
+                    width: "fit-content"
                   },
-                  children: skill.name
+                  title: `Source: ${skill.source}`,
+                  children: [
+                    /* @__PURE__ */ jsx(sourceConfig.icon, { size: 10 }),
+                    /* @__PURE__ */ jsx("span", { children: sourceConfig.label })
+                  ]
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px", alignItems: "center", flexWrap: "wrap" }, children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "inline-flex",
-                      alignItems: "center",
-                      gap: "4px",
-                      padding: "2px 6px",
-                      borderRadius: theme2.radii[1],
-                      backgroundColor: sourceConfig.bgColor,
-                      border: `1px solid ${sourceConfig.borderColor}`,
-                      fontSize: theme2.fontSizes[0],
-                      color: sourceConfig.color,
-                      fontWeight: 500,
-                      width: "fit-content"
-                    },
-                    title: `Source: ${skill.source}`,
-                    children: [
-                      /* @__PURE__ */ jsx(sourceConfig.icon, { size: 10 }),
-                      /* @__PURE__ */ jsx("span", { children: sourceConfig.label })
-                    ]
-                  }
-                ),
-                ((_a = skill.metadata) == null ? void 0 : _a.owner) && ((_b = skill.metadata) == null ? void 0 : _b.repo) && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "inline-flex",
-                      alignItems: "center",
-                      gap: "4px",
-                      padding: "2px 6px",
-                      borderRadius: theme2.radii[1],
-                      backgroundColor: `${theme2.colors.textSecondary}15`,
-                      border: `1px solid ${theme2.colors.textSecondary}30`,
-                      fontSize: theme2.fontSizes[0],
-                      color: theme2.colors.textSecondary,
-                      fontWeight: 500,
-                      fontFamily: theme2.fonts.monospace,
-                      width: "fit-content"
-                    },
-                    title: `From: ${skill.metadata.installedFrom}
+              ((_a = skill.metadata) == null ? void 0 : _a.owner) && ((_b = skill.metadata) == null ? void 0 : _b.repo) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    padding: "2px 6px",
+                    borderRadius: theme2.radii[1],
+                    backgroundColor: `${theme2.colors.textSecondary}15`,
+                    border: `1px solid ${theme2.colors.textSecondary}30`,
+                    fontSize: theme2.fontSizes[0],
+                    color: theme2.colors.textSecondary,
+                    fontWeight: 500,
+                    fontFamily: theme2.fonts.monospace,
+                    width: "fit-content"
+                  },
+                  title: `From: ${skill.metadata.installedFrom}
 Installed: ${skill.metadata.installedAt ? new Date(skill.metadata.installedAt).toLocaleString() : "Unknown"}`,
-                    children: [
-                      /* @__PURE__ */ jsx(Github, { size: 10 }),
-                      /* @__PURE__ */ jsxs("span", { children: [
-                        skill.metadata.owner,
-                        "/",
-                        skill.metadata.repo
-                      ] })
-                    ]
-                  }
-                )
-              ] })
+                  children: [
+                    /* @__PURE__ */ jsx(Github, { size: 10 }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      skill.metadata.owner,
+                      "/",
+                      skill.metadata.repo
+                    ] })
+                  ]
+                }
+              ),
+              !skill.hasFrontmatter && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    padding: "2px 6px",
+                    borderRadius: theme2.radii[1],
+                    backgroundColor: "#f59e0b15",
+                    // warning amber
+                    border: "1px solid #f59e0b30",
+                    fontSize: theme2.fontSizes[0],
+                    color: "#f59e0b",
+                    fontWeight: 500,
+                    width: "fit-content"
+                  },
+                  title: "This skill is missing YAML frontmatter metadata",
+                  children: [
+                    /* @__PURE__ */ jsx(TriangleAlert, { size: 10 }),
+                    /* @__PURE__ */ jsx("span", { children: "No Frontmatter" })
+                  ]
+                }
+              )
             ] })
           ] }),
-          onClick && /* @__PURE__ */ jsx(
-            ChevronRight,
-            {
-              size: 18,
-              color: theme2.colors.textSecondary,
-              style: { flexShrink: 0 }
-            }
-          )
+          (skill.hasScripts || skill.hasReferences || skill.hasAssets) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap", flexShrink: 0 }, children: [
+            skill.hasScripts && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  padding: "2px 8px",
+                  borderRadius: theme2.radii[1],
+                  backgroundColor: `${theme2.colors.primary}15`,
+                  border: `1px solid ${theme2.colors.primary}30`,
+                  fontSize: theme2.fontSizes[0],
+                  color: theme2.colors.primary,
+                  fontWeight: 500
+                },
+                title: `Scripts: ${(_c = skill.scriptFiles) == null ? void 0 : _c.join(", ")}`,
+                children: [
+                  /* @__PURE__ */ jsx(Code, { size: 12 }),
+                  /* @__PURE__ */ jsx("span", { children: ((_d = skill.scriptFiles) == null ? void 0 : _d.length) || 0 })
+                ]
+              }
+            ),
+            skill.hasReferences && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  padding: "2px 8px",
+                  borderRadius: theme2.radii[1],
+                  backgroundColor: `${theme2.colors.secondary}15`,
+                  border: `1px solid ${theme2.colors.secondary}30`,
+                  fontSize: theme2.fontSizes[0],
+                  color: theme2.colors.secondary,
+                  fontWeight: 500
+                },
+                title: `References: ${(_e2 = skill.referenceFiles) == null ? void 0 : _e2.join(", ")}`,
+                children: [
+                  /* @__PURE__ */ jsx(BookOpen, { size: 12 }),
+                  /* @__PURE__ */ jsx("span", { children: ((_f = skill.referenceFiles) == null ? void 0 : _f.length) || 0 })
+                ]
+              }
+            ),
+            skill.hasAssets && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  padding: "2px 8px",
+                  borderRadius: theme2.radii[1],
+                  backgroundColor: `${theme2.colors.accent}15`,
+                  border: `1px solid ${theme2.colors.accent}30`,
+                  fontSize: theme2.fontSizes[0],
+                  color: theme2.colors.accent,
+                  fontWeight: 500
+                },
+                title: `Assets: ${(_g = skill.assetFiles) == null ? void 0 : _g.join(", ")}`,
+                children: [
+                  /* @__PURE__ */ jsx(Package, { size: 12 }),
+                  /* @__PURE__ */ jsx("span", { children: ((_h = skill.assetFiles) == null ? void 0 : _h.length) || 0 })
+                ]
+              }
+            )
+          ] })
         ] }),
         skill.description && /* @__PURE__ */ jsx(
           "p",
@@ -2975,90 +3087,36 @@ Installed: ${skill.metadata.installedAt ? new Date(skill.metadata.installedAt).t
           },
           index2
         )) }),
-        (skill.hasScripts || skill.hasReferences || skill.hasAssets) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: [
-          skill.hasScripts && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "4px",
-                padding: "2px 8px",
-                borderRadius: theme2.radii[1],
-                backgroundColor: `${theme2.colors.primary}15`,
-                border: `1px solid ${theme2.colors.primary}30`,
-                fontSize: theme2.fontSizes[0],
-                color: theme2.colors.primary,
-                fontWeight: 500
-              },
-              title: `Scripts: ${(_c = skill.scriptFiles) == null ? void 0 : _c.join(", ")}`,
-              children: [
-                /* @__PURE__ */ jsx(Code, { size: 12 }),
-                /* @__PURE__ */ jsx("span", { children: ((_d = skill.scriptFiles) == null ? void 0 : _d.length) || 0 })
-              ]
-            }
-          ),
-          skill.hasReferences && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "4px",
-                padding: "2px 8px",
-                borderRadius: theme2.radii[1],
-                backgroundColor: `${theme2.colors.secondary}15`,
-                border: `1px solid ${theme2.colors.secondary}30`,
-                fontSize: theme2.fontSizes[0],
-                color: theme2.colors.secondary,
-                fontWeight: 500
-              },
-              title: `References: ${(_e2 = skill.referenceFiles) == null ? void 0 : _e2.join(", ")}`,
-              children: [
-                /* @__PURE__ */ jsx(BookOpen, { size: 12 }),
-                /* @__PURE__ */ jsx("span", { children: ((_f = skill.referenceFiles) == null ? void 0 : _f.length) || 0 })
-              ]
-            }
-          ),
-          skill.hasAssets && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "4px",
-                padding: "2px 8px",
-                borderRadius: theme2.radii[1],
-                backgroundColor: `${theme2.colors.accent}15`,
-                border: `1px solid ${theme2.colors.accent}30`,
-                fontSize: theme2.fontSizes[0],
-                color: theme2.colors.accent,
-                fontWeight: 500
-              },
-              title: `Assets: ${(_g = skill.assetFiles) == null ? void 0 : _g.join(", ")}`,
-              children: [
-                /* @__PURE__ */ jsx(Package, { size: 12 }),
-                /* @__PURE__ */ jsx("span", { children: ((_h = skill.assetFiles) == null ? void 0 : _h.length) || 0 })
-              ]
-            }
-          )
-        ] }),
         /* @__PURE__ */ jsx(
           "div",
           {
+            onClick: handleCopyPath,
             style: {
               fontSize: theme2.fontSizes[0],
-              color: theme2.colors.textMuted,
+              color: pathCopied ? theme2.colors.success : theme2.colors.textMuted,
               fontFamily: theme2.fonts.monospace,
-              background: theme2.colors.backgroundSecondary,
+              background: pathCopied ? `${theme2.colors.success}15` : theme2.colors.backgroundSecondary,
               padding: "4px 8px",
               borderRadius: theme2.radii[1],
               overflow: "hidden",
               textOverflow: "ellipsis",
-              whiteSpace: "nowrap"
+              whiteSpace: "nowrap",
+              cursor: "pointer",
+              transition: "all 0.2s ease",
+              border: `1px solid ${pathCopied ? theme2.colors.success : "transparent"}`
+            },
+            title: pathCopied ? "Copied!" : "Click to copy path",
+            onMouseEnter: (e) => {
+              if (!pathCopied) {
+                e.currentTarget.style.background = theme2.colors.backgroundTertiary || theme2.colors.border;
+              }
             },
-            title: skill.path,
-            children: skill.path
+            onMouseLeave: (e) => {
+              if (!pathCopied) {
+                e.currentTarget.style.background = theme2.colors.backgroundSecondary;
+              }
+            },
+            children: pathCopied ? "Copied!" : skill.path
           }
         )
       ]
@@ -48116,6 +48174,51 @@ const SkillDetailPanel = ({
             ]
           }
         ),
+        !skill.hasFrontmatter && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "1rem",
+              borderBottom: `1px solid ${theme2.colors.border}`,
+              display: "flex",
+              alignItems: "center",
+              gap: "0.75rem",
+              backgroundColor: "#f59e0b15",
+              // warning amber background
+              borderLeft: "4px solid #f59e0b"
+            },
+            children: [
+              /* @__PURE__ */ jsx(TriangleAlert, { size: 20, color: "#f59e0b" }),
+              /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: theme2.fontSizes[1],
+                      color: "#f59e0b",
+                      fontFamily: theme2.fonts.body,
+                      fontWeight: theme2.fontWeights.semibold,
+                      marginBottom: "0.25rem"
+                    },
+                    children: "Missing YAML Frontmatter"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: theme2.fontSizes[0],
+                      color: theme2.colors.textSecondary,
+                      fontFamily: theme2.fonts.body,
+                      lineHeight: "1.5"
+                    },
+                    children: "This skill is missing YAML frontmatter metadata. Skills should have frontmatter (like backlog tasks) to properly define metadata such as name, description, and capabilities."
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ jsx(
           SkillMarkdown,
           {