@industry-theme/agent-panels 0.2.12 → 0.2.14

package/dist/panels.bundle.js

@@ -2616,10 +2616,16 @@ const analyzeSkillStructure = (fileTree, skillPath) => {
     assetFiles
   };
 };
-const hasFrontmatterYAML = (content2) => {
+const validateFrontmatter = (content2) => {
   const trimmedContent = content2.trim();
   if (!trimmedContent.startsWith("---")) {
-    return false;
+    return {
+      isValid: true,
+      // Still valid, just has warnings
+      hasStructure: false,
+      missingFields: [],
+      errorMessage: "Missing YAML frontmatter (must start with ---)"
+    };
   }
   const lines = trimmedContent.split("\n");
   let frontmatterEnd = -1;
@@ -2629,7 +2635,38 @@ const hasFrontmatterYAML = (content2) => {
       break;
     }
   }
-  return frontmatterEnd > 0;
+  if (frontmatterEnd <= 0) {
+    return {
+      isValid: true,
+      // Still valid, just has warnings
+      hasStructure: false,
+      missingFields: [],
+      errorMessage: "Missing closing --- delimiter for frontmatter"
+    };
+  }
+  const frontmatterLines = lines.slice(1, frontmatterEnd);
+  const frontmatterText = frontmatterLines.join("\n");
+  const missingFields = [];
+  const hasName = /^name:\s*.+/m.test(frontmatterText);
+  const hasDescription = /^description:\s*.+/m.test(frontmatterText);
+  if (!hasName) {
+    missingFields.push("name");
+  }
+  if (!hasDescription) {
+    missingFields.push("description");
+  }
+  let errorMessage;
+  if (missingFields.length > 0) {
+    const fieldList = missingFields.map((f) => `'${f}'`).join(", ");
+    errorMessage = `Missing required field${missingFields.length > 1 ? "s" : ""}: ${fieldList}`;
+  }
+  return {
+    isValid: true,
+    // Always valid - we show warnings but don't block rendering
+    hasStructure: true,
+    missingFields,
+    errorMessage
+  };
 };
 const parseSkillContent = async (content2, path2, fileTree, fileSystemAdapter, isBrowserMode = false) => {
   const pathParts = path2.split("/");
@@ -2670,7 +2707,7 @@ const parseSkillContent = async (content2, path2, fileTree, fileSystemAdapter, i
       console.debug("[useSkillsData] No metadata file for skill:", skillDirName);
     }
   }
-  const hasFrontmatter = hasFrontmatterYAML(content2);
+  const frontmatterValidation = validateFrontmatter(content2);
   return {
     id: path2,
     name: skillDirName.replace(/-/g, " ").replace(/_/g, " "),
@@ -2683,7 +2720,7 @@ const parseSkillContent = async (content2, path2, fileTree, fileSystemAdapter, i
     source: source2,
     priority,
     metadata,
-    hasFrontmatter
+    frontmatterValidation
   };
 };
 const useSkillsData = ({
@@ -2934,7 +2971,7 @@ Installed: ${skill.metadata.installedAt ? new Date(skill.metadata.installedAt).t
                   ]
                 }
               ),
-              !skill.hasFrontmatter && /* @__PURE__ */ jsxs(
+              !skill.frontmatterValidation.isValid && /* @__PURE__ */ jsxs(
                 "div",
                 {
                   style: {
@@ -2951,10 +2988,10 @@ Installed: ${skill.metadata.installedAt ? new Date(skill.metadata.installedAt).t
                     fontWeight: 500,
                     width: "fit-content"
                   },
-                  title: "This skill is missing YAML frontmatter metadata",
+                  title: skill.frontmatterValidation.errorMessage || "Invalid frontmatter",
                   children: [
                     /* @__PURE__ */ jsx(TriangleAlert, { size: 10 }),
-                    /* @__PURE__ */ jsx("span", { children: "No Frontmatter" })
+                    /* @__PURE__ */ jsx("span", { children: skill.frontmatterValidation.hasStructure ? skill.frontmatterValidation.missingFields.length > 0 ? `Missing: ${skill.frontmatterValidation.missingFields.join(", ")}` : "Invalid Frontmatter" : "No Frontmatter" })
                   ]
                 }
               )
@@ -3538,6 +3575,188 @@ const SkillsListPanel = ({
     }
   );
 };
+var MarkdownSourceType$1;
+((MarkdownSourceType2) => {
+  MarkdownSourceType2["WORKSPACE_FILE"] = "workspace_file";
+  MarkdownSourceType2["REMOTE_FILE"] = "remote_file";
+  MarkdownSourceType2["GITHUB_FILE"] = "github_file";
+  MarkdownSourceType2["DRAFT"] = "draft";
+  MarkdownSourceType2["GITHUB_ISSUE"] = "github_issue";
+  MarkdownSourceType2["GITHUB_PULL_REQUEST"] = "github_pull_request";
+  MarkdownSourceType2["GITHUB_GIST"] = "github_gist";
+})(MarkdownSourceType$1 || (MarkdownSourceType$1 = {}));
+class SkillParseError extends Error {
+  constructor(message, cause) {
+    super(message);
+    __publicField(this, "cause");
+    this.cause = cause;
+    this.name = "SkillParseError";
+  }
+}
+function extractFrontmatter(content2) {
+  const trimmed = content2.trim();
+  if (!trimmed.startsWith("---")) {
+    throw new SkillParseError("SKILL.md must start with YAML frontmatter (---)");
+  }
+  const afterFirstDelimiter = trimmed.slice(3);
+  const closingIndex = afterFirstDelimiter.indexOf(`
+---`);
+  if (closingIndex === -1) {
+    throw new SkillParseError("SKILL.md frontmatter is not properly closed with ---");
+  }
+  const frontmatter = afterFirstDelimiter.slice(0, closingIndex).trim();
+  const body = afterFirstDelimiter.slice(closingIndex + 4).trim();
+  return { frontmatter, body };
+}
+function parseYamlFrontmatter(yaml2) {
+  const result = {};
+  const lines = yaml2.split(`
+`);
+  let currentObject = null;
+  let currentList = null;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#")) {
+      continue;
+    }
+    const lineIndent = line.search(/\S/);
+    if (trimmed.startsWith("- ")) {
+      const value = trimmed.slice(2).trim();
+      if (currentList) {
+        currentList.push(value);
+      }
+      continue;
+    }
+    const colonIndex = line.indexOf(":");
+    if (colonIndex > 0) {
+      const key = line.slice(0, colonIndex).trim();
+      const value = line.slice(colonIndex + 1).trim();
+      if (lineIndent === 0) {
+        currentList = null;
+        currentObject = null;
+        if (!value) {
+          if (i + 1 < lines.length) {
+            const nextLine = lines[i + 1];
+            const nextTrimmed = nextLine.trim();
+            if (nextTrimmed.startsWith("- ")) {
+              currentList = [];
+              result[key] = currentList;
+            } else if (nextLine.search(/\S/) > 0 && nextLine.includes(":")) {
+              currentObject = {};
+              result[key] = currentObject;
+            }
+          }
+        } else {
+          const cleanValue = value.replace(/^["']|["']$/g, "");
+          result[key] = cleanValue;
+        }
+      } else if (lineIndent > 0 && currentObject) {
+        const cleanValue = value.replace(/^["']|["']$/g, "");
+        currentObject[key] = cleanValue;
+      }
+    }
+  }
+  return result;
+}
+function parseSkillMetadataGraceful(metadata) {
+  const warnings = [];
+  const partialMetadata = {};
+  if (!metadata.name || typeof metadata.name !== "string" || !metadata.name.trim()) {
+    warnings.push({
+      field: "name",
+      message: 'Required field "name" is missing or empty'
+    });
+  } else {
+    partialMetadata.name = metadata.name;
+  }
+  if (!metadata.description || typeof metadata.description !== "string" || !metadata.description.trim()) {
+    warnings.push({
+      field: "description",
+      message: 'Required field "description" is missing or empty'
+    });
+  } else {
+    partialMetadata.description = metadata.description;
+  }
+  if (metadata.license !== void 0) {
+    if (typeof metadata.license !== "string") {
+      warnings.push({
+        field: "license",
+        message: 'Field "license" must be a string'
+      });
+    } else {
+      partialMetadata.license = metadata.license;
+    }
+  }
+  if (metadata.compatibility !== void 0) {
+    if (typeof metadata.compatibility !== "string") {
+      warnings.push({
+        field: "compatibility",
+        message: 'Field "compatibility" must be a string'
+      });
+    } else {
+      partialMetadata.compatibility = metadata.compatibility;
+    }
+  }
+  if (metadata["allowed-tools"] !== void 0) {
+    if (typeof metadata["allowed-tools"] === "string") {
+      const toolsString = metadata["allowed-tools"];
+      partialMetadata["allowed-tools"] = toolsString.trim() ? toolsString.trim().split(/\s+/) : [];
+    } else {
+      warnings.push({
+        field: "allowed-tools",
+        message: 'Field "allowed-tools" must be a space-delimited string'
+      });
+    }
+  }
+  if (metadata.metadata !== void 0) {
+    if (typeof metadata.metadata !== "object" || Array.isArray(metadata.metadata)) {
+      warnings.push({
+        field: "metadata",
+        message: 'Field "metadata" must be an object'
+      });
+    } else {
+      partialMetadata.metadata = metadata.metadata;
+    }
+  }
+  return { metadata: partialMetadata, warnings };
+}
+function parseSkillMarkdownGraceful(content2) {
+  try {
+    const { frontmatter, body } = extractFrontmatter(content2);
+    let rawMetadata;
+    try {
+      rawMetadata = parseYamlFrontmatter(frontmatter);
+    } catch (error) {
+      return {
+        metadata: {},
+        body,
+        raw: content2,
+        warnings: [{
+          field: "frontmatter",
+          message: `Failed to parse YAML frontmatter: ${error instanceof Error ? error.message : String(error)}`
+        }]
+      };
+    }
+    const { metadata, warnings } = parseSkillMetadataGraceful(rawMetadata);
+    return {
+      metadata,
+      body,
+      raw: content2,
+      warnings
+    };
+  } catch (error) {
+    return {
+      metadata: {},
+      body: content2,
+      raw: content2,
+      warnings: [{
+        field: "structure",
+        message: error instanceof Error ? error.message : "Failed to parse SKILL.md structure"
+      }]
+    };
+  }
+}
 const VOID = -1;
 const PRIMITIVE = 0;
 const ARRAY = 1;
@@ -43068,152 +43287,6 @@ function transformImageUrl(src, repositoryInfo) {
   const rawUrl = `https://raw.githubusercontent.com/${owner}/${repo}/${branch}/${fullPath}`;
   return rawUrl;
 }
-class SkillParseError extends Error {
-  constructor(message, cause) {
-    super(message);
-    __publicField(this, "cause");
-    this.cause = cause;
-    this.name = "SkillParseError";
-  }
-}
-class SkillValidationError extends Error {
-  constructor(message, field) {
-    super(message);
-    __publicField(this, "field");
-    this.field = field;
-    this.name = "SkillValidationError";
-  }
-}
-function extractFrontmatter(content2) {
-  const trimmed = content2.trim();
-  if (!trimmed.startsWith("---")) {
-    throw new SkillParseError("SKILL.md must start with YAML frontmatter (---)");
-  }
-  const afterFirstDelimiter = trimmed.slice(3);
-  const closingIndex = afterFirstDelimiter.indexOf(`
----`);
-  if (closingIndex === -1) {
-    throw new SkillParseError("SKILL.md frontmatter is not properly closed with ---");
-  }
-  const frontmatter = afterFirstDelimiter.slice(0, closingIndex).trim();
-  const body = afterFirstDelimiter.slice(closingIndex + 4).trim();
-  return { frontmatter, body };
-}
-function parseYamlFrontmatter(yaml2) {
-  const result = {};
-  const lines = yaml2.split(`
-`);
-  let currentObject = null;
-  let currentList = null;
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    const trimmed = line.trim();
-    if (!trimmed || trimmed.startsWith("#")) {
-      continue;
-    }
-    const lineIndent = line.search(/\S/);
-    if (trimmed.startsWith("- ")) {
-      const value = trimmed.slice(2).trim();
-      if (currentList) {
-        currentList.push(value);
-      }
-      continue;
-    }
-    const colonIndex = line.indexOf(":");
-    if (colonIndex > 0) {
-      const key = line.slice(0, colonIndex).trim();
-      const value = line.slice(colonIndex + 1).trim();
-      if (lineIndent === 0) {
-        currentList = null;
-        currentObject = null;
-        if (!value) {
-          if (i + 1 < lines.length) {
-            const nextLine = lines[i + 1];
-            const nextTrimmed = nextLine.trim();
-            if (nextTrimmed.startsWith("- ")) {
-              currentList = [];
-              result[key] = currentList;
-            } else if (nextLine.search(/\S/) > 0 && nextLine.includes(":")) {
-              currentObject = {};
-              result[key] = currentObject;
-            }
-          }
-        } else {
-          const cleanValue = value.replace(/^["']|["']$/g, "");
-          result[key] = cleanValue;
-        }
-      } else if (lineIndent > 0 && currentObject) {
-        const cleanValue = value.replace(/^["']|["']$/g, "");
-        currentObject[key] = cleanValue;
-      }
-    }
-  }
-  return result;
-}
-function validateSkillMetadata(metadata) {
-  if (!metadata.name || typeof metadata.name !== "string" || !metadata.name.trim()) {
-    throw new SkillValidationError('Required field "name" is missing or empty', "name");
-  }
-  if (!metadata.description || typeof metadata.description !== "string" || !metadata.description.trim()) {
-    throw new SkillValidationError('Required field "description" is missing or empty', "description");
-  }
-  if (metadata.license !== void 0 && typeof metadata.license !== "string") {
-    throw new SkillValidationError('Field "license" must be a string', "license");
-  }
-  if (metadata.compatibility !== void 0 && typeof metadata.compatibility !== "string") {
-    throw new SkillValidationError('Field "compatibility" must be a string', "compatibility");
-  }
-  if (metadata["allowed-tools"] !== void 0) {
-    if (typeof metadata["allowed-tools"] === "string") {
-      const toolsString = metadata["allowed-tools"];
-      metadata["allowed-tools"] = toolsString.trim() ? toolsString.trim().split(/\s+/) : [];
-    } else {
-      throw new SkillValidationError('Field "allowed-tools" must be a space-delimited string', "allowed-tools");
-    }
-  }
-  if (metadata.metadata !== void 0 && (typeof metadata.metadata !== "object" || Array.isArray(metadata.metadata))) {
-    throw new SkillValidationError('Field "metadata" must be an object', "metadata");
-  }
-  const skillMetadata = {
-    name: metadata.name,
-    description: metadata.description
-  };
-  if (metadata.license !== void 0) {
-    skillMetadata.license = metadata.license;
-  }
-  if (metadata.compatibility !== void 0) {
-    skillMetadata.compatibility = metadata.compatibility;
-  }
-  if (metadata["allowed-tools"] !== void 0) {
-    skillMetadata["allowed-tools"] = metadata["allowed-tools"];
-  }
-  if (metadata.metadata !== void 0) {
-    skillMetadata.metadata = metadata.metadata;
-  }
-  return skillMetadata;
-}
-function parseSkillMarkdown(content2) {
-  try {
-    const { frontmatter, body } = extractFrontmatter(content2);
-    let rawMetadata;
-    try {
-      rawMetadata = parseYamlFrontmatter(frontmatter);
-    } catch (error) {
-      throw new SkillParseError("Failed to parse YAML frontmatter", error);
-    }
-    const metadata = validateSkillMetadata(rawMetadata);
-    return {
-      metadata,
-      body,
-      raw: content2
-    };
-  } catch (error) {
-    if (error instanceof SkillParseError || error instanceof SkillValidationError) {
-      throw error;
-    }
-    throw new SkillParseError("Failed to parse SKILL.md", error);
-  }
-}
 var parseMarkdownChunks2 = parseMarkdownChunks;
 var useIndustryHtmlModal = () => {
   const [htmlModalOpen, setHtmlModalOpen] = useState(false);
@@ -47650,18 +47723,15 @@ var DocumentView = ({
     editable
   })));
 };
-var formatRelativeTime = (dateString) => {
+const formatRelativeTime = (dateString) => {
   try {
     const date = new Date(dateString);
     const now = /* @__PURE__ */ new Date();
     const diffMs = now.getTime() - date.getTime();
     const diffDays = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
-    if (diffDays === 0)
-      return "Today";
-    if (diffDays === 1)
-      return "Yesterday";
-    if (diffDays < 7)
-      return `${diffDays} days ago`;
+    if (diffDays === 0) return "Today";
+    if (diffDays === 1) return "Yesterday";
+    if (diffDays < 7) return `${diffDays} days ago`;
     if (diffDays < 30) {
       const weeks = Math.floor(diffDays / 7);
       return `${weeks} ${weeks === 1 ? "week" : "weeks"} ago`;
@@ -47676,267 +47746,475 @@ var formatRelativeTime = (dateString) => {
     return dateString;
   }
 };
-var SkillMetadataSection = ({
+const SkillMetadataSection = ({
   metadata,
-  theme: theme2
+  theme: theme2,
+  structure
 }) => {
-  var _a, _b;
-  return /* @__PURE__ */ React2__default.createElement("div", {
-    style: {
-      borderBottom: `2px solid ${theme2.colors.border}`,
-      paddingBottom: theme2.space[3],
-      marginBottom: theme2.space[2]
-    }
-  }, /* @__PURE__ */ React2__default.createElement("div", {
-    style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: theme2.space[2] }
-  }, /* @__PURE__ */ React2__default.createElement("h1", {
-    style: {
-      fontSize: theme2.fontSizes[6],
-      fontWeight: 700,
-      margin: 0,
-      color: theme2.colors.text
-    }
-  }, metadata.name), (((_a = metadata.metadata) == null ? void 0 : _a["last-updated"]) || metadata.license) && /* @__PURE__ */ React2__default.createElement("div", {
-    style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: theme2.space[1], marginLeft: theme2.space[3], marginTop: theme2.space[1] }
-  }, ((_b = metadata.metadata) == null ? void 0 : _b["last-updated"]) && /* @__PURE__ */ React2__default.createElement("span", {
-    style: {
-      fontSize: theme2.fontSizes[0],
-      color: theme2.colors.textSecondary,
-      fontFamily: theme2.fonts.monospace,
-      fontWeight: 500,
-      whiteSpace: "nowrap"
-    }
-  }, formatRelativeTime(metadata.metadata["last-updated"])), metadata.license && /* @__PURE__ */ React2__default.createElement("span", {
-    style: {
-      fontSize: theme2.fontSizes[1],
-      color: theme2.colors.textSecondary,
-      fontFamily: theme2.fonts.monospace,
-      fontWeight: 500,
-      whiteSpace: "nowrap"
-    }
-  }, metadata.license))), /* @__PURE__ */ React2__default.createElement("p", {
-    style: {
-      fontSize: theme2.fontSizes[3],
-      color: theme2.colors.textSecondary,
-      margin: 0,
-      lineHeight: 1.5
-    }
-  }, metadata.description));
+  var _a, _b, _c, _d, _e2;
+  const [expandedSections, setExpandedSections] = React2__default.useState({
+    scripts: false,
+    references: false,
+    assets: false
+  });
+  const toggleSection = (section) => {
+    setExpandedSections((prev) => ({
+      ...prev,
+      [section]: !prev[section]
+    }));
+  };
+  return /* @__PURE__ */ jsxs("div", { style: {
+    borderBottom: `2px solid ${theme2.colors.border}`,
+    paddingBottom: theme2.space[3],
+    marginBottom: theme2.space[2]
+  }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: theme2.space[2] }, children: [
+      /* @__PURE__ */ jsx(
+        "h1",
+        {
+          style: {
+            fontSize: theme2.fontSizes[6],
+            fontWeight: 700,
+            margin: 0,
+            color: metadata.name ? theme2.colors.text : theme2.colors.textSecondary,
+            fontFamily: theme2.fonts.heading
+          },
+          children: metadata.name || "(Unnamed Skill)"
+        }
+      ),
+      (((_a = metadata.metadata) == null ? void 0 : _a["last-updated"]) || metadata.license) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: theme2.space[1], marginLeft: theme2.space[3], marginTop: theme2.space[1] }, children: [
+        ((_b = metadata.metadata) == null ? void 0 : _b["last-updated"]) && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: theme2.fontSizes[0],
+              color: theme2.colors.textSecondary,
+              fontFamily: theme2.fonts.monospace,
+              fontWeight: 500,
+              whiteSpace: "nowrap"
+            },
+            children: formatRelativeTime(metadata.metadata["last-updated"])
+          }
+        ),
+        metadata.license && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: theme2.fontSizes[1],
+              color: theme2.colors.textSecondary,
+              fontFamily: theme2.fonts.monospace,
+              fontWeight: 500,
+              whiteSpace: "nowrap"
+            },
+            children: metadata.license
+          }
+        )
+      ] })
+    ] }),
+    metadata.description ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        style: {
+          fontSize: theme2.fontSizes[3],
+          color: theme2.colors.textSecondary,
+          margin: 0,
+          lineHeight: 1.5,
+          fontFamily: theme2.fonts.body
+        },
+        children: metadata.description
+      }
+    ) : /* @__PURE__ */ jsx(
+      "p",
+      {
+        style: {
+          fontSize: theme2.fontSizes[3],
+          color: theme2.colors.textSecondary,
+          margin: 0,
+          lineHeight: 1.5,
+          fontFamily: theme2.fonts.body,
+          fontStyle: "italic"
+        },
+        children: "(No description provided)"
+      }
+    ),
+    structure && (structure.hasScripts || structure.hasReferences || structure.hasAssets) && /* @__PURE__ */ jsxs("div", { style: {
+      marginTop: theme2.space[3]
+    }, children: [
+      /* @__PURE__ */ jsxs("div", { style: {
+        display: "flex",
+        gap: theme2.space[2],
+        flexWrap: "wrap"
+      }, children: [
+        structure.hasScripts && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => toggleSection("scripts"),
+            style: {
+              padding: "0.25rem 0.75rem",
+              borderRadius: "12px",
+              backgroundColor: theme2.colors.primary,
+              color: theme2.colors.background,
+              fontSize: theme2.fontSizes[0],
+              fontFamily: theme2.fonts.body,
+              fontWeight: 500,
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              border: "none",
+              cursor: "pointer",
+              transition: "opacity 0.2s"
+            },
+            onMouseEnter: (e) => e.currentTarget.style.opacity = "0.8",
+            onMouseLeave: (e) => e.currentTarget.style.opacity = "1",
+            children: [
+              /* @__PURE__ */ jsx(Code, { size: 14 }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Scripts (",
+                ((_c = structure.scriptFiles) == null ? void 0 : _c.length) || 0,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "10px" }, children: expandedSections.scripts ? "▼" : "▶" })
+            ]
+          }
+        ),
+        structure.hasReferences && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => toggleSection("references"),
+            style: {
+              padding: "0.25rem 0.75rem",
+              borderRadius: "12px",
+              backgroundColor: theme2.colors.secondary,
+              color: theme2.colors.background,
+              fontSize: theme2.fontSizes[0],
+              fontFamily: theme2.fonts.body,
+              fontWeight: 500,
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              border: "none",
+              cursor: "pointer",
+              transition: "opacity 0.2s"
+            },
+            onMouseEnter: (e) => e.currentTarget.style.opacity = "0.8",
+            onMouseLeave: (e) => e.currentTarget.style.opacity = "1",
+            children: [
+              /* @__PURE__ */ jsx(BookOpen, { size: 14 }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "References (",
+                ((_d = structure.referenceFiles) == null ? void 0 : _d.length) || 0,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "10px" }, children: expandedSections.references ? "▼" : "▶" })
+            ]
+          }
+        ),
+        structure.hasAssets && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => toggleSection("assets"),
+            style: {
+              padding: "0.25rem 0.75rem",
+              borderRadius: "12px",
+              backgroundColor: theme2.colors.accent,
+              color: theme2.colors.background,
+              fontSize: theme2.fontSizes[0],
+              fontFamily: theme2.fonts.body,
+              fontWeight: 500,
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              border: "none",
+              cursor: "pointer",
+              transition: "opacity 0.2s"
+            },
+            onMouseEnter: (e) => e.currentTarget.style.opacity = "0.8",
+            onMouseLeave: (e) => e.currentTarget.style.opacity = "1",
+            children: [
+              /* @__PURE__ */ jsx(Package, { size: 14 }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Assets (",
+                ((_e2 = structure.assetFiles) == null ? void 0 : _e2.length) || 0,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "10px" }, children: expandedSections.assets ? "▼" : "▶" })
+            ]
+          }
+        )
+      ] }),
+      expandedSections.scripts && structure.scriptFiles && structure.scriptFiles.length > 0 && /* @__PURE__ */ jsxs("div", { style: {
+        marginTop: theme2.space[2],
+        padding: theme2.space[2],
+        backgroundColor: `${theme2.colors.primary}15`,
+        borderRadius: "8px",
+        borderLeft: `3px solid ${theme2.colors.primary}`
+      }, children: [
+        /* @__PURE__ */ jsx("div", { style: {
+          fontSize: theme2.fontSizes[0],
+          fontWeight: 600,
+          color: theme2.colors.text,
+          marginBottom: theme2.space[1],
+          fontFamily: theme2.fonts.heading
+        }, children: "Script Files" }),
+        /* @__PURE__ */ jsx("ul", { style: {
+          margin: 0,
+          paddingLeft: theme2.space[3],
+          listStyle: "none"
+        }, children: structure.scriptFiles.map((file, idx) => /* @__PURE__ */ jsxs("li", { style: {
+          fontSize: theme2.fontSizes[1],
+          color: theme2.colors.text,
+          fontFamily: theme2.fonts.monospace,
+          padding: "2px 0"
+        }, children: [
+          "• ",
+          file
+        ] }, idx)) })
+      ] }),
+      expandedSections.references && structure.referenceFiles && structure.referenceFiles.length > 0 && /* @__PURE__ */ jsxs("div", { style: {
+        marginTop: theme2.space[2],
+        padding: theme2.space[2],
+        backgroundColor: `${theme2.colors.secondary}15`,
+        borderRadius: "8px",
+        borderLeft: `3px solid ${theme2.colors.secondary}`
+      }, children: [
+        /* @__PURE__ */ jsx("div", { style: {
+          fontSize: theme2.fontSizes[0],
+          fontWeight: 600,
+          color: theme2.colors.text,
+          marginBottom: theme2.space[1],
+          fontFamily: theme2.fonts.heading
+        }, children: "Reference Files" }),
+        /* @__PURE__ */ jsx("ul", { style: {
+          margin: 0,
+          paddingLeft: theme2.space[3],
+          listStyle: "none"
+        }, children: structure.referenceFiles.map((file, idx) => /* @__PURE__ */ jsxs("li", { style: {
+          fontSize: theme2.fontSizes[1],
+          color: theme2.colors.text,
+          fontFamily: theme2.fonts.monospace,
+          padding: "2px 0"
+        }, children: [
+          "• ",
+          file
+        ] }, idx)) })
+      ] }),
+      expandedSections.assets && structure.assetFiles && structure.assetFiles.length > 0 && /* @__PURE__ */ jsxs("div", { style: {
+        marginTop: theme2.space[2],
+        padding: theme2.space[2],
+        backgroundColor: `${theme2.colors.accent}15`,
+        borderRadius: "8px",
+        borderLeft: `3px solid ${theme2.colors.accent}`
+      }, children: [
+        /* @__PURE__ */ jsx("div", { style: {
+          fontSize: theme2.fontSizes[0],
+          fontWeight: 600,
+          color: theme2.colors.text,
+          marginBottom: theme2.space[1],
+          fontFamily: theme2.fonts.heading
+        }, children: "Asset Files" }),
+        /* @__PURE__ */ jsx("ul", { style: {
+          margin: 0,
+          paddingLeft: theme2.space[3],
+          listStyle: "none"
+        }, children: structure.assetFiles.map((file, idx) => /* @__PURE__ */ jsxs("li", { style: {
+          fontSize: theme2.fontSizes[1],
+          color: theme2.colors.text,
+          fontFamily: theme2.fonts.monospace,
+          padding: "2px 0"
+        }, children: [
+          "• ",
+          file
+        ] }, idx)) })
+      ] })
+    ] })
+  ] });
 };
-var SkillMarkdown = ({
+const SkillMarkdown = ({
   content: content2,
   theme: theme2,
   className = "",
   onParsed,
-  onError,
-  showRawOnError = false
+  onWarnings,
+  showRawOnError = false,
+  containerWidth,
+  structure
 }) => {
   const [parsed, setParsed] = React2__default.useState(null);
-  const [error, setError] = React2__default.useState(null);
   React2__default.useEffect(() => {
-    try {
-      const skill = parseSkillMarkdown(content2);
-      setParsed(skill);
-      setError(null);
-      onParsed == null ? void 0 : onParsed(skill);
-    } catch (err) {
-      const error2 = err instanceof Error ? err : new Error(String(err));
-      setError(error2);
-      setParsed(null);
-      onError == null ? void 0 : onError(error2);
+    const skill = parseSkillMarkdownGraceful(content2);
+    setParsed(skill);
+    onParsed == null ? void 0 : onParsed(skill);
+    if (skill.warnings.length > 0) {
+      onWarnings == null ? void 0 : onWarnings(skill.warnings);
     }
-  }, [content2, onParsed, onError]);
+  }, [content2, onParsed, onWarnings]);
   if (!theme2 || !theme2.space) {
-    return /* @__PURE__ */ React2__default.createElement("div", {
-      className,
-      style: { width: "100%", height: "100%" }
-    }, /* @__PURE__ */ React2__default.createElement("div", {
-      style: { padding: "2rem", textAlign: "center", color: "#856404" }
-    }, "Error: Theme not available. Wrap component in ThemeProvider."));
+    return /* @__PURE__ */ jsx("div", { className, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx("div", { style: { padding: "2rem", textAlign: "center", color: "#856404" }, children: "Error: Theme not available. Wrap component in ThemeProvider." }) });
   }
-  if (error) {
-    if (showRawOnError) {
-      return /* @__PURE__ */ React2__default.createElement("div", {
+  if (!parsed) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
         className,
         style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
           width: "100%",
           height: "100%",
-          overflow: "auto",
+          padding: theme2.space[4],
+          color: theme2.colors.textSecondary,
+          fontStyle: "italic",
           background: theme2.colors.background
-        }
-      }, /* @__PURE__ */ React2__default.createElement("div", {
-        style: { padding: theme2.space[3] }
-      }, /* @__PURE__ */ React2__default.createElement(IndustryMarkdownSlide, {
-        content: content2,
-        theme: theme2,
-        slideIdPrefix: "skill-fallback",
-        slideIndex: 0,
-        isVisible: true
-      })));
-    }
-    return /* @__PURE__ */ React2__default.createElement("div", {
-      className,
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        width: "100%",
-        height: "100%",
-        padding: theme2.space[4],
-        background: theme2.colors.background,
-        overflow: "auto"
-      }
-    }, /* @__PURE__ */ React2__default.createElement("div", {
-      style: {
-        background: "#fff3cd",
-        border: "1px solid #ffc107",
-        borderRadius: "8px",
-        padding: theme2.space[4],
-        maxWidth: "600px"
-      }
-    }, /* @__PURE__ */ React2__default.createElement("h2", {
-      style: { color: "#856404", marginTop: 0 }
-    }, "Failed to parse SKILL.md"), /* @__PURE__ */ React2__default.createElement("p", {
-      style: {
-        fontWeight: 600,
-        color: "#856404",
-        fontSize: theme2.fontSizes[0],
-        textTransform: "uppercase",
-        letterSpacing: "0.5px"
-      }
-    }, error instanceof SkillParseError && "Parse Error", error instanceof SkillValidationError && "Validation Error", !(error instanceof SkillParseError) && !(error instanceof SkillValidationError) && "Error"), /* @__PURE__ */ React2__default.createElement("p", {
-      style: { color: "#856404", margin: `${theme2.space[3]} 0` }
-    }, error.message), error instanceof SkillValidationError && error.field && /* @__PURE__ */ React2__default.createElement("p", {
-      style: {
-        fontFamily: theme2.fonts.monospace,
-        color: "#856404",
-        fontSize: theme2.fontSizes[0]
+        },
+        children: "Loading..."
       }
-    }, "Field: ", error.field)));
+    );
   }
-  if (!parsed) {
-    return /* @__PURE__ */ React2__default.createElement("div", {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
       className,
       style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
         width: "100%",
         height: "100%",
-        padding: theme2.space[4],
-        color: theme2.colors.textSecondary,
-        fontStyle: "italic",
+        display: "flex",
+        flexDirection: "column",
         background: theme2.colors.background
-      }
-    }, "Loading...");
-  }
-  return /* @__PURE__ */ React2__default.createElement("div", {
-    className,
-    style: {
-      width: "100%",
-      height: "100%",
-      display: "flex",
-      flexDirection: "column",
-      background: theme2.colors.background
-    }
-  }, /* @__PURE__ */ React2__default.createElement("div", {
-    style: { padding: theme2.space[3], paddingBottom: 0 }
-  }, /* @__PURE__ */ React2__default.createElement(SkillMetadataSection, {
-    metadata: parsed.metadata,
-    theme: theme2
-  })), /* @__PURE__ */ React2__default.createElement("div", {
-    style: { flex: 1, overflow: "auto", padding: theme2.space[3], paddingTop: 0 }
-  }, /* @__PURE__ */ React2__default.createElement("div", {
-    style: { display: "flex", gap: theme2.space[4], alignItems: "flex-start" }
-  }, /* @__PURE__ */ React2__default.createElement("div", {
-    style: { flex: 1, minWidth: 0 }
-  }, /* @__PURE__ */ React2__default.createElement(IndustryMarkdownSlide, {
-    content: parsed.body,
-    theme: theme2,
-    slideIdPrefix: "skill-body",
-    slideIndex: 0,
-    isVisible: true
-  })), (parsed.metadata.compatibility || parsed.metadata["allowed-tools"] || parsed.metadata.metadata) && /* @__PURE__ */ React2__default.createElement("div", {
-    style: {
-      width: "300px",
-      flexShrink: 0,
-      padding: theme2.space[3],
-      background: theme2.colors.background,
-      position: "sticky",
-      top: theme2.space[3]
-    }
-  }, parsed.metadata.compatibility && /* @__PURE__ */ React2__default.createElement("div", {
-    style: { marginBottom: theme2.space[3] }
-  }, /* @__PURE__ */ React2__default.createElement("div", {
-    style: {
-      fontFamily: theme2.fonts.heading,
-      fontWeight: 600,
-      fontSize: theme2.fontSizes[0],
-      textTransform: "uppercase",
-      letterSpacing: "0.5px",
-      color: theme2.colors.textSecondary,
-      marginBottom: theme2.space[1]
-    }
-  }, "Compatibility"), /* @__PURE__ */ React2__default.createElement("div", {
-    style: { fontSize: theme2.fontSizes[1], color: theme2.colors.text, fontFamily: theme2.fonts.body }
-  }, parsed.metadata.compatibility)), parsed.metadata["allowed-tools"] && parsed.metadata["allowed-tools"].length > 0 && /* @__PURE__ */ React2__default.createElement("div", {
-    style: { marginBottom: theme2.space[3] }
-  }, /* @__PURE__ */ React2__default.createElement("div", {
-    style: {
-      fontFamily: theme2.fonts.heading,
-      fontWeight: 600,
-      fontSize: theme2.fontSizes[0],
-      textTransform: "uppercase",
-      letterSpacing: "0.5px",
-      color: theme2.colors.textSecondary,
-      marginBottom: theme2.space[1]
-    }
-  }, "Allowed Tools"), /* @__PURE__ */ React2__default.createElement("div", {
-    style: { display: "flex", flexWrap: "wrap", gap: theme2.space[1] }
-  }, parsed.metadata["allowed-tools"].map((tool, index2) => /* @__PURE__ */ React2__default.createElement("span", {
-    key: index2,
-    style: {
-      display: "inline-block",
-      paddingTop: theme2.space[2],
-      paddingBottom: theme2.space[2],
-      paddingLeft: theme2.space[3],
-      paddingRight: theme2.space[3],
-      background: theme2.colors.primary,
-      color: theme2.colors.background,
-      borderRadius: "4px",
-      fontSize: theme2.fontSizes[0],
-      fontWeight: 500,
-      fontFamily: theme2.fonts.monospace
-    }
-  }, tool)))), parsed.metadata.metadata && Object.keys(parsed.metadata.metadata).length > 0 && /* @__PURE__ */ React2__default.createElement("div", null, /* @__PURE__ */ React2__default.createElement("div", {
-    style: {
-      fontFamily: theme2.fonts.heading,
-      fontWeight: 600,
-      fontSize: theme2.fontSizes[0],
-      textTransform: "uppercase",
-      letterSpacing: "0.5px",
-      color: theme2.colors.textSecondary,
-      marginBottom: theme2.space[1]
-    }
-  }, "Metadata"), /* @__PURE__ */ React2__default.createElement("div", {
-    style: { display: "flex", flexDirection: "column", gap: theme2.space[1] }
-  }, Object.entries(parsed.metadata.metadata).filter(([key]) => key !== "last-updated").map(([key, value]) => /* @__PURE__ */ React2__default.createElement("div", {
-    key
-  }, /* @__PURE__ */ React2__default.createElement("div", {
-    style: {
-      fontSize: theme2.fontSizes[0],
-      fontWeight: 600,
-      color: theme2.colors.textSecondary,
-      fontFamily: theme2.fonts.body
-    }
-  }, key, ":"), /* @__PURE__ */ React2__default.createElement("div", {
-    style: {
-      fontSize: theme2.fontSizes[1],
-      color: theme2.colors.text,
-      fontFamily: theme2.fonts.monospace
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { padding: theme2.space[3], paddingBottom: 0 }, children: /* @__PURE__ */ jsx(SkillMetadataSection, { metadata: parsed.metadata, theme: theme2, structure }) }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto", padding: theme2.space[3], paddingTop: 0 }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: theme2.space[4], alignItems: "flex-start" }, children: [
+          /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(
+            IndustryMarkdownSlide,
+            {
+              content: parsed.body,
+              theme: theme2,
+              slideIdPrefix: "skill-body",
+              slideIndex: 0,
+              isVisible: true,
+              containerWidth
+            }
+          ) }),
+          (parsed.metadata.compatibility || parsed.metadata["allowed-tools"] || parsed.metadata.metadata) && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                width: "300px",
+                flexShrink: 0,
+                padding: theme2.space[3],
+                background: theme2.colors.background,
+                position: "sticky",
+                top: theme2.space[3]
+              },
+              children: [
+                parsed.metadata.compatibility && /* @__PURE__ */ jsxs("div", { style: { marginBottom: theme2.space[3] }, children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        fontFamily: theme2.fonts.heading,
+                        fontWeight: 600,
+                        fontSize: theme2.fontSizes[0],
+                        textTransform: "uppercase",
+                        letterSpacing: "0.5px",
+                        color: theme2.colors.textSecondary,
+                        marginBottom: theme2.space[1]
+                      },
+                      children: "Compatibility"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { style: { fontSize: theme2.fontSizes[1], color: theme2.colors.text, fontFamily: theme2.fonts.body }, children: parsed.metadata.compatibility })
+                ] }),
+                parsed.metadata["allowed-tools"] && parsed.metadata["allowed-tools"].length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: theme2.space[3] }, children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        fontFamily: theme2.fonts.heading,
+                        fontWeight: 600,
+                        fontSize: theme2.fontSizes[0],
+                        textTransform: "uppercase",
+                        letterSpacing: "0.5px",
+                        color: theme2.colors.textSecondary,
+                        marginBottom: theme2.space[1]
+                      },
+                      children: "Allowed Tools"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: theme2.space[1] }, children: parsed.metadata["allowed-tools"].map((tool, index2) => /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        display: "inline-block",
+                        paddingTop: theme2.space[2],
+                        paddingBottom: theme2.space[2],
+                        paddingLeft: theme2.space[3],
+                        paddingRight: theme2.space[3],
+                        background: theme2.colors.primary,
+                        color: theme2.colors.background,
+                        borderRadius: "4px",
+                        fontSize: theme2.fontSizes[0],
+                        fontWeight: 500,
+                        fontFamily: theme2.fonts.monospace
+                      },
+                      children: tool
+                    },
+                    index2
+                  )) })
+                ] }),
+                parsed.metadata.metadata && Object.keys(parsed.metadata.metadata).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        fontFamily: theme2.fonts.heading,
+                        fontWeight: 600,
+                        fontSize: theme2.fontSizes[0],
+                        textTransform: "uppercase",
+                        letterSpacing: "0.5px",
+                        color: theme2.colors.textSecondary,
+                        marginBottom: theme2.space[1]
+                      },
+                      children: "Metadata"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: theme2.space[1] }, children: Object.entries(parsed.metadata.metadata).filter(([key]) => key !== "last-updated").map(([key, value]) => /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          fontSize: theme2.fontSizes[0],
+                          fontWeight: 600,
+                          color: theme2.colors.textSecondary,
+                          fontFamily: theme2.fonts.body
+                        },
+                        children: [
+                          key,
+                          ":"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: theme2.fontSizes[1],
+                          color: theme2.colors.text,
+                          fontFamily: theme2.fonts.monospace
+                        },
+                        children: value
+                      }
+                    )
+                  ] }, key)) })
+                ] })
+              ]
+            }
+          )
+        ] }) })
+      ]
     }
-  }, value)))))))));
+  );
 };
 const SkillDetailPanel = ({
   context,
@@ -47944,7 +48222,6 @@ const SkillDetailPanel = ({
   actions,
   selectedSkillId: selectedSkillIdProp
 }) => {
-  var _a, _b, _c, _d, _e2, _f;
   const { theme: theme2 } = useTheme();
   const { skills, isLoading, error } = useSkillsData({ context });
   const [selectedSkillIdState, setSelectedSkillIdState] = useState(null);
@@ -47955,8 +48232,8 @@ const SkillDetailPanel = ({
     "skill-detail",
     events,
     () => {
-      var _a2;
-      return (_a2 = panelRef.current) == null ? void 0 : _a2.focus();
+      var _a;
+      return (_a = panelRef.current) == null ? void 0 : _a.focus();
     }
   );
   useEffect(() => {
@@ -48055,12 +48332,14 @@ const SkillDetailPanel = ({
     );
   }
   const handleParsed = (parsedSkill) => {
-    console.log("Skill parsed:", parsedSkill.metadata.name);
+    console.log("Skill parsed:", parsedSkill.metadata.name || "(unnamed)");
+    if (parsedSkill.warnings.length > 0) {
+      console.warn("Skill has warnings:", parsedSkill.warnings);
+    }
   };
-  const handleError = (error2) => {
-    console.error("Error parsing skill:", error2);
+  const handleWarnings = (warnings) => {
+    console.warn("Skill validation warnings:", warnings);
   };
-  const hasStructure = skill.hasScripts || skill.hasReferences || skill.hasAssets;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -48073,170 +48352,23 @@ const SkillDetailPanel = ({
         flexDirection: "column",
         outline: "none"
       },
-      children: skill.content ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        hasStructure && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              padding: "1rem",
-              borderBottom: `1px solid ${theme2.colors.border}`,
-              display: "flex",
-              gap: "0.5rem",
-              flexWrap: "wrap",
-              backgroundColor: theme2.colors.backgroundSecondary
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    fontSize: theme2.fontSizes[1],
-                    color: theme2.colors.textSecondary,
-                    fontFamily: theme2.fonts.body,
-                    marginRight: "0.5rem",
-                    display: "flex",
-                    alignItems: "center"
-                  },
-                  children: "Available:"
-                }
-              ),
-              skill.hasScripts && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    padding: "0.25rem 0.75rem",
-                    borderRadius: "12px",
-                    backgroundColor: theme2.colors.primary,
-                    color: theme2.colors.background,
-                    fontSize: theme2.fontSizes[0],
-                    fontFamily: theme2.fonts.body,
-                    fontWeight: 500,
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "0.5rem"
-                  },
-                  title: (_a = skill.scriptFiles) == null ? void 0 : _a.join(", "),
-                  children: [
-                    /* @__PURE__ */ jsx(Code, { size: 14 }),
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      "Scripts (",
-                      ((_b = skill.scriptFiles) == null ? void 0 : _b.length) || 0,
-                      ")"
-                    ] })
-                  ]
-                }
-              ),
-              skill.hasReferences && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    padding: "0.25rem 0.75rem",
-                    borderRadius: "12px",
-                    backgroundColor: theme2.colors.secondary,
-                    color: theme2.colors.background,
-                    fontSize: theme2.fontSizes[0],
-                    fontFamily: theme2.fonts.body,
-                    fontWeight: 500,
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "0.5rem"
-                  },
-                  title: (_c = skill.referenceFiles) == null ? void 0 : _c.join(", "),
-                  children: [
-                    /* @__PURE__ */ jsx(BookOpen, { size: 14 }),
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      "References (",
-                      ((_d = skill.referenceFiles) == null ? void 0 : _d.length) || 0,
-                      ")"
-                    ] })
-                  ]
-                }
-              ),
-              skill.hasAssets && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    padding: "0.25rem 0.75rem",
-                    borderRadius: "12px",
-                    backgroundColor: theme2.colors.accent,
-                    color: theme2.colors.background,
-                    fontSize: theme2.fontSizes[0],
-                    fontFamily: theme2.fonts.body,
-                    fontWeight: 500,
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "0.5rem"
-                  },
-                  title: (_e2 = skill.assetFiles) == null ? void 0 : _e2.join(", "),
-                  children: [
-                    /* @__PURE__ */ jsx(Package, { size: 14 }),
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      "Assets (",
-                      ((_f = skill.assetFiles) == null ? void 0 : _f.length) || 0,
-                      ")"
-                    ] })
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        !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,
-          {
-            content: skill.content,
-            theme: theme2,
-            onParsed: handleParsed,
-            onError: handleError,
-            showRawOnError: true
+      children: skill.content ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ jsx(
+        SkillMarkdown,
+        {
+          content: skill.content,
+          theme: theme2,
+          onParsed: handleParsed,
+          onWarnings: handleWarnings,
+          structure: {
+            hasScripts: skill.hasScripts,
+            hasReferences: skill.hasReferences,
+            hasAssets: skill.hasAssets,
+            scriptFiles: skill.scriptFiles,
+            referenceFiles: skill.referenceFiles,
+            assetFiles: skill.assetFiles
           }
-        ) })
-      ] }) : /* @__PURE__ */ jsx(
+        }
+      ) }) }) : /* @__PURE__ */ jsx(
         "div",
         {
           style: {