@industry-theme/agent-panels 0.2.13 → 0.2.15

package/dist/panels.bundle.js

@@ -2620,7 +2620,8 @@ const validateFrontmatter = (content2) => {
   const trimmedContent = content2.trim();
   if (!trimmedContent.startsWith("---")) {
     return {
-      isValid: false,
+      isValid: true,
+      // Still valid, just has warnings
       hasStructure: false,
       missingFields: [],
       errorMessage: "Missing YAML frontmatter (must start with ---)"
@@ -2636,7 +2637,8 @@ const validateFrontmatter = (content2) => {
   }
   if (frontmatterEnd <= 0) {
     return {
-      isValid: false,
+      isValid: true,
+      // Still valid, just has warnings
       hasStructure: false,
       missingFields: [],
       errorMessage: "Missing closing --- delimiter for frontmatter"
@@ -2659,7 +2661,8 @@ const validateFrontmatter = (content2) => {
     errorMessage = `Missing required field${missingFields.length > 1 ? "s" : ""}: ${fieldList}`;
   }
   return {
-    isValid: missingFields.length === 0,
+    isValid: true,
+    // Always valid - we show warnings but don't block rendering
     hasStructure: true,
     missingFields,
     errorMessage
@@ -2720,6 +2723,76 @@ const parseSkillContent = async (content2, path2, fileTree, fileSystemAdapter, i
     frontmatterValidation
   };
 };
+const getDeduplicationKey = (skill) => {
+  var _a, _b, _c;
+  if (((_a = skill.metadata) == null ? void 0 : _a.owner) && ((_b = skill.metadata) == null ? void 0 : _b.repo) && ((_c = skill.metadata) == null ? void 0 : _c.skillPath)) {
+    return `github:${skill.metadata.owner}/${skill.metadata.repo}/${skill.metadata.skillPath}`;
+  }
+  const normalizedName = skill.name.toLowerCase().replace(/\s+/g, "-");
+  return `name:${normalizedName}`;
+};
+const comparePriority = (skill1, skill2) => {
+  var _a, _b;
+  if (skill1.priority !== skill2.priority) {
+    return skill1.priority < skill2.priority;
+  }
+  const time1 = ((_a = skill1.metadata) == null ? void 0 : _a.installedAt) ? new Date(skill1.metadata.installedAt).getTime() : 0;
+  const time2 = ((_b = skill2.metadata) == null ? void 0 : _b.installedAt) ? new Date(skill2.metadata.installedAt).getTime() : 0;
+  return time1 > time2;
+};
+const skillToInstallation = (skill) => ({
+  path: skill.path,
+  source: skill.source,
+  priority: skill.priority,
+  skillFolderPath: skill.skillFolderPath,
+  metadata: skill.metadata
+});
+const deduplicateSkills = (skills, isBrowserMode = false) => {
+  if (isBrowserMode) {
+    console.log("[useSkillsData] Browser mode detected, skipping deduplication");
+    return skills;
+  }
+  if (skills.length === 0) {
+    return skills;
+  }
+  const skillGroups = /* @__PURE__ */ new Map();
+  for (const skill of skills) {
+    const key = getDeduplicationKey(skill);
+    const group = skillGroups.get(key) || [];
+    group.push(skill);
+    skillGroups.set(key, group);
+  }
+  console.log("[useSkillsData] Deduplication found", skillGroups.size, "unique skills from", skills.length, "total");
+  const deduplicatedSkills = [];
+  for (const [key, group] of skillGroups.entries()) {
+    if (group.length === 1) {
+      deduplicatedSkills.push({
+        ...group[0],
+        installedLocations: [skillToInstallation(group[0])]
+      });
+      continue;
+    }
+    const sortedByPriority = [...group].sort(
+      (a, b) => comparePriority(a, b) ? -1 : 1
+    );
+    const primary = sortedByPriority[0];
+    const installations = group.map(skillToInstallation);
+    installations.sort((a, b) => a.priority - b.priority);
+    console.log(
+      "[useSkillsData] Deduplicated skill:",
+      primary.name,
+      "from",
+      group.length,
+      "installations. Primary:",
+      primary.source
+    );
+    deduplicatedSkills.push({
+      ...primary,
+      installedLocations: installations
+    });
+  }
+  return deduplicatedSkills;
+};
 const useSkillsData = ({
   context
 }) => {
@@ -2747,8 +2820,9 @@ const useSkillsData = ({
     setError(null);
     try {
       let localSkills = [];
+      let isBrowserMode = false;
       if (fileTree && (fileSystem == null ? void 0 : fileSystem.readFile) && repoPath) {
-        const isBrowserMode = !repoPath.startsWith("/");
+        isBrowserMode = !repoPath.startsWith("/");
         console.log("[useSkillsData] fileTree:", fileTree);
         console.log("[useSkillsData] typeof fileTree:", typeof fileTree);
         console.log("[useSkillsData] fileTree keys:", Object.keys(fileTree));
@@ -2771,8 +2845,10 @@ const useSkillsData = ({
       }
       console.log("[useSkillsData] Global skills:", globalSkills);
       const allSkills = [...localSkills, ...globalSkills];
-      console.log("[useSkillsData] Total skills:", allSkills.length);
-      setSkills(allSkills);
+      console.log("[useSkillsData] Total skills before deduplication:", allSkills.length);
+      const deduplicatedSkills = deduplicateSkills(allSkills, isBrowserMode);
+      console.log("[useSkillsData] Total skills after deduplication:", deduplicatedSkills.length);
+      setSkills(deduplicatedSkills);
       lastLoadedSha.current = fileTreeSha;
       lastGlobalSkillsCount.current = globalSkillsCount;
     } catch (err) {
@@ -2798,7 +2874,7 @@ const useSkillsData = ({
     refreshSkills
   };
 };
-const getSourceConfig = (source2) => {
+const getSourceConfig$1 = (source2) => {
   switch (source2) {
     case "global-universal":
       return {
@@ -2847,6 +2923,20 @@ const getSourceConfig = (source2) => {
       };
   }
 };
+const abbreviateSourceName = (source2) => {
+  switch (source2) {
+    case "project-universal":
+      return "Project";
+    case "global-universal":
+      return "Global";
+    case "project-claude":
+      return "Project (Claude)";
+    case "global-claude":
+      return "Global (Claude)";
+    case "project-other":
+      return "Project";
+  }
+};
 const SkillCard = ({
   skill,
   onClick,
@@ -2854,7 +2944,7 @@ const SkillCard = ({
 }) => {
   var _a, _b, _c, _d, _e2, _f, _g, _h;
   const { theme: theme2 } = useTheme();
-  const sourceConfig = getSourceConfig(skill.source);
+  const sourceConfig = getSourceConfig$1(skill.source);
   const [pathCopied, setPathCopied] = React2__default.useState(false);
   const handleCopyPath = async (e) => {
     e.stopPropagation();
@@ -2991,7 +3081,39 @@ Installed: ${skill.metadata.installedAt ? new Date(skill.metadata.installedAt).t
                     /* @__PURE__ */ jsx("span", { children: skill.frontmatterValidation.hasStructure ? skill.frontmatterValidation.missingFields.length > 0 ? `Missing: ${skill.frontmatterValidation.missingFields.join(", ")}` : "Invalid Frontmatter" : "No Frontmatter" })
                   ]
                 }
-              )
+              ),
+              skill.installedLocations && skill.installedLocations.length > 1 && (() => {
+                const otherLocations = skill.installedLocations.filter((loc) => loc.path !== skill.path).map((loc) => abbreviateSourceName(loc.source));
+                const uniqueLocations = Array.from(new Set(otherLocations));
+                const locationText = uniqueLocations.join(", ");
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: "4px",
+                      padding: "2px 6px",
+                      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,
+                      width: "fit-content"
+                    },
+                    title: `Also installed in:
+${skill.installedLocations.filter((loc) => loc.path !== skill.path).map((loc) => `${abbreviateSourceName(loc.source)}: ${loc.path}`).join("\n")}`,
+                    children: [
+                      /* @__PURE__ */ jsx(Package, { size: 10 }),
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "Also in: ",
+                        locationText
+                      ] })
+                    ]
+                  }
+                );
+              })()
             ] })
           ] }),
           (skill.hasScripts || skill.hasReferences || skill.hasAssets) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap", flexShrink: 0 }, children: [
@@ -3216,6 +3338,15 @@ const SkillsListPanel = ({
   };
   const handleRefresh = async () => {
     setIsRefreshing(true);
+    if (events) {
+      events.emit({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        type: "skills:refresh",
+        source: "skills-list-panel",
+        timestamp: Date.now(),
+        payload: {}
+      });
+    }
     try {
       await refreshSkills();
     } finally {
@@ -3572,6 +3703,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;
@@ -43102,152 +43415,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);
@@ -47684,18 +47851,334 @@ var DocumentView = ({
     editable
   })));
 };
-var formatRelativeTime = (dateString) => {
+function extractHeaders(markdown2) {
+  const headerRegex = /^(#{1,6})\s+(.+)$/gm;
+  const headers = [];
+  let match;
+  while ((match = headerRegex.exec(markdown2)) !== null) {
+    const level = match[1].length;
+    const text2 = match[2].trim();
+    const id = text2.toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]/g, "");
+    headers.push({ level, text: text2, id });
+  }
+  return headers;
+}
+const TableOfContents = ({
+  headers,
+  theme: theme2,
+  className = "",
+  onHeaderClick
+}) => {
+  const [activeId, setActiveId] = React2__default.useState(null);
+  const handleClick = (header) => {
+    setActiveId(header.id);
+    onHeaderClick == null ? void 0 : onHeaderClick(header);
+    const element2 = document.getElementById(header.id);
+    if (element2) {
+      element2.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  };
+  if (headers.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className,
+      style: {
+        flex: 1,
+        overflowY: "auto",
+        minHeight: 0,
+        padding: theme2.space[3]
+      },
+      children: /* @__PURE__ */ jsx(
+        "ul",
+        {
+          style: {
+            listStyle: "none",
+            margin: 0,
+            padding: 0
+          },
+          children: headers.map((header, index2) => {
+            const isActive = activeId === header.id;
+            const indentLevel = Math.max(0, header.level - 1);
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                style: {
+                  marginBottom: theme2.space[1],
+                  marginLeft: `${indentLevel * 20}px`
+                },
+                children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => handleClick(header),
+                    style: {
+                      display: "block",
+                      width: "100%",
+                      textAlign: "left",
+                      background: "none",
+                      border: "none",
+                      padding: `${theme2.space[1]} ${theme2.space[2]}`,
+                      fontSize: header.level === 1 ? theme2.fontSizes[2] : header.level === 2 ? theme2.fontSizes[1] : theme2.fontSizes[0],
+                      fontFamily: theme2.fonts.body,
+                      color: isActive ? theme2.colors.primary : theme2.colors.text,
+                      cursor: "pointer",
+                      borderRadius: "4px",
+                      transition: "all 0.2s",
+                      fontWeight: isActive ? 600 : header.level === 1 ? 600 : header.level === 2 ? 500 : 400,
+                      backgroundColor: isActive ? `${theme2.colors.primary}15` : "transparent",
+                      borderLeft: isActive ? `2px solid ${theme2.colors.primary}` : "2px solid transparent",
+                      opacity: header.level > 3 ? 0.8 : 1
+                    },
+                    onMouseEnter: (e) => {
+                      if (!isActive) {
+                        e.currentTarget.style.backgroundColor = `${theme2.colors.border}50`;
+                      }
+                    },
+                    onMouseLeave: (e) => {
+                      if (!isActive) {
+                        e.currentTarget.style.backgroundColor = "transparent";
+                      }
+                    },
+                    children: header.text
+                  }
+                )
+              },
+              `${header.id}-${index2}`
+            );
+          })
+        }
+      )
+    }
+  );
+};
+const SkillSidebar = ({
+  headers,
+  metadata,
+  theme: theme2,
+  className = "",
+  onHeaderClick
+}) => {
+  const [activeTab, setActiveTab] = React2__default.useState("toc");
+  const hasMetadata = metadata.compatibility || metadata["allowed-tools"] && metadata["allowed-tools"].length > 0 || metadata.metadata && Object.keys(metadata.metadata).length > 0;
+  React2__default.useEffect(() => {
+    if (headers.length === 0 && hasMetadata) {
+      setActiveTab("metadata");
+    }
+  }, [headers.length, hasMetadata]);
+  if (headers.length === 0 && !hasMetadata) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        width: "250px",
+        flexShrink: 0,
+        display: "flex",
+        flexDirection: "column",
+        borderRight: `1px solid ${theme2.colors.border}`
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              borderBottom: `1px solid ${theme2.colors.border}`,
+              backgroundColor: theme2.colors.background
+            },
+            children: [
+              headers.length > 0 && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setActiveTab("toc"),
+                  style: {
+                    flex: 1,
+                    padding: theme2.space[2],
+                    background: activeTab === "toc" ? theme2.colors.background : "transparent",
+                    border: "none",
+                    borderBottom: activeTab === "toc" ? `2px solid ${theme2.colors.primary}` : "2px solid transparent",
+                    color: activeTab === "toc" ? theme2.colors.primary : theme2.colors.textSecondary,
+                    fontFamily: theme2.fonts.heading,
+                    fontSize: theme2.fontSizes[1],
+                    fontWeight: activeTab === "toc" ? 600 : 500,
+                    cursor: "pointer",
+                    transition: "all 0.2s"
+                  },
+                  onMouseEnter: (e) => {
+                    if (activeTab !== "toc") {
+                      e.currentTarget.style.color = theme2.colors.text;
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    if (activeTab !== "toc") {
+                      e.currentTarget.style.color = theme2.colors.textSecondary;
+                    }
+                  },
+                  children: "Contents"
+                }
+              ),
+              hasMetadata && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setActiveTab("metadata"),
+                  style: {
+                    flex: 1,
+                    padding: theme2.space[2],
+                    background: activeTab === "metadata" ? theme2.colors.background : "transparent",
+                    border: "none",
+                    borderBottom: activeTab === "metadata" ? `2px solid ${theme2.colors.primary}` : "2px solid transparent",
+                    color: activeTab === "metadata" ? theme2.colors.primary : theme2.colors.textSecondary,
+                    fontFamily: theme2.fonts.heading,
+                    fontSize: theme2.fontSizes[1],
+                    fontWeight: activeTab === "metadata" ? 600 : 500,
+                    cursor: "pointer",
+                    transition: "all 0.2s"
+                  },
+                  onMouseEnter: (e) => {
+                    if (activeTab !== "metadata") {
+                      e.currentTarget.style.color = theme2.colors.text;
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    if (activeTab !== "metadata") {
+                      e.currentTarget.style.color = theme2.colors.textSecondary;
+                    }
+                  },
+                  children: "Metadata"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: [
+          activeTab === "toc" && headers.length > 0 && /* @__PURE__ */ jsx(
+            TableOfContents,
+            {
+              headers,
+              theme: theme2,
+              onHeaderClick
+            }
+          ),
+          activeTab === "metadata" && hasMetadata && /* @__PURE__ */ jsxs("div", { style: { padding: theme2.space[3] }, children: [
+            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: metadata.compatibility })
+            ] }),
+            metadata["allowed-tools"] && 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: 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
+              )) })
+            ] }),
+            metadata.metadata && Object.keys(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(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)) })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+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`;
@@ -47710,267 +48193,526 @@ var formatRelativeTime = (dateString) => {
     return dateString;
   }
 };
-var SkillMetadataSection = ({
+const getSourceConfig = (source2) => {
+  switch (source2) {
+    case "global-universal":
+      return {
+        label: "Global",
+        icon: Globe,
+        color: "#7c3aed",
+        // purple
+        bgColor: "#7c3aed15",
+        borderColor: "#7c3aed30"
+      };
+    case "global-claude":
+      return {
+        label: "Global Claude",
+        icon: Globe,
+        color: "#0891b2",
+        // cyan
+        bgColor: "#0891b215",
+        borderColor: "#0891b230"
+      };
+    case "project-universal":
+      return {
+        label: "Project",
+        icon: Folder,
+        color: "#16a34a",
+        // green
+        bgColor: "#16a34a15",
+        borderColor: "#16a34a30"
+      };
+    case "project-claude":
+      return {
+        label: "Project Claude",
+        icon: Folder,
+        color: "#0284c7",
+        // blue
+        bgColor: "#0284c715",
+        borderColor: "#0284c730"
+      };
+    case "project-other":
+      return {
+        label: "Project",
+        icon: Folder,
+        color: "#64748b",
+        // slate
+        bgColor: "#64748b15",
+        borderColor: "#64748b30"
+      };
+  }
+};
+const SkillMetadataSection = ({
   metadata,
-  theme: theme2
+  theme: theme2,
+  structure,
+  skill
 }) => {
-  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)) })
+      ] })
+    ] }),
+    (skill == null ? void 0 : skill.installedLocations) && skill.installedLocations.length > 1 && /* @__PURE__ */ jsxs("div", { style: {
+      marginTop: theme2.space[3],
+      paddingTop: theme2.space[3],
+      borderTop: `1px solid ${theme2.colors.border}`
+    }, children: [
+      /* @__PURE__ */ jsxs("div", { style: {
+        fontSize: theme2.fontSizes[1],
+        fontWeight: 600,
+        color: theme2.colors.text,
+        marginBottom: theme2.space[2],
+        fontFamily: theme2.fonts.heading
+      }, children: [
+        "Installed Locations (",
+        skill.installedLocations.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme2.space[2]
+      }, children: skill.installedLocations.map((location2, idx) => {
+        var _a2, _b2, _c2;
+        const isPrimary = location2.path === skill.path;
+        const sourceConfig = getSourceConfig(location2.source);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: theme2.space[2],
+              backgroundColor: isPrimary ? `${theme2.colors.primary}08` : theme2.colors.backgroundSecondary,
+              borderRadius: "6px",
+              border: `1px solid ${isPrimary ? theme2.colors.primary + "40" : theme2.colors.border}`,
+              display: "flex",
+              flexDirection: "column",
+              gap: theme2.space[1]
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: theme2.space[2] }, 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
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(sourceConfig.icon, { size: 10 }),
+                      /* @__PURE__ */ jsx("span", { children: sourceConfig.label })
+                    ]
+                  }
+                ),
+                isPrimary && /* @__PURE__ */ jsx("span", { style: {
+                  fontSize: theme2.fontSizes[0],
+                  color: theme2.colors.primary,
+                  fontWeight: 600,
+                  fontFamily: theme2.fonts.body
+                }, children: "(Active)" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: {
+                fontSize: theme2.fontSizes[0],
+                color: theme2.colors.textSecondary,
+                fontFamily: theme2.fonts.monospace,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              }, children: location2.path }),
+              ((_a2 = location2.metadata) == null ? void 0 : _a2.installedAt) && /* @__PURE__ */ jsxs("div", { style: {
+                fontSize: theme2.fontSizes[0],
+                color: theme2.colors.textMuted,
+                fontFamily: theme2.fonts.body
+              }, children: [
+                "Installed: ",
+                formatRelativeTime(location2.metadata.installedAt)
+              ] }),
+              ((_b2 = location2.metadata) == null ? void 0 : _b2.sha) && ((_c2 = skill.metadata) == null ? void 0 : _c2.sha) && location2.metadata.sha !== skill.metadata.sha && /* @__PURE__ */ jsxs("div", { style: {
+                fontSize: theme2.fontSizes[0],
+                color: "#f59e0b",
+                // warning color
+                fontFamily: theme2.fonts.monospace,
+                display: "flex",
+                alignItems: "center",
+                gap: "4px"
+              }, children: [
+                /* @__PURE__ */ jsx(TriangleAlert, { size: 10 }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Different version (SHA: ",
+                  location2.metadata.sha.substring(0, 7),
+                  ")"
+                ] })
+              ] })
+            ]
+          },
+          idx
+        );
+      }) })
+    ] })
+  ] });
 };
-var SkillMarkdown = ({
+const SkillMarkdown = ({
   content: content2,
   theme: theme2,
   className = "",
   onParsed,
-  onError,
-  showRawOnError = false
+  onWarnings,
+  showRawOnError = false,
+  containerWidth,
+  structure,
+  skill
 }) => {
   const [parsed, setParsed] = React2__default.useState(null);
-  const [error, setError] = React2__default.useState(null);
+  const [headers, setHeaders] = React2__default.useState([]);
   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);
-    }
-  }, [content2, onParsed, onError]);
+    const skill2 = parseSkillMarkdownGraceful(content2);
+    setParsed(skill2);
+    onParsed == null ? void 0 : onParsed(skill2);
+    if (skill2.warnings.length > 0) {
+      onWarnings == null ? void 0 : onWarnings(skill2.warnings);
+    }
+    const extractedHeaders = extractHeaders(skill2.body);
+    setHeaders(extractedHeaders);
+  }, [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, skill }) }),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+          /* @__PURE__ */ jsx(
+            SkillSidebar,
+            {
+              headers,
+              metadata: parsed.metadata,
+              theme: theme2
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto", padding: theme2.space[3], paddingTop: 0 }, children: /* @__PURE__ */ jsx(
+            IndustryMarkdownSlide,
+            {
+              content: parsed.body,
+              theme: theme2,
+              slideIdPrefix: "skill-body",
+              slideIndex: 0,
+              isVisible: true,
+              containerWidth
+            }
+          ) })
+        ] })
+      ]
     }
-  }, value)))))))));
+  );
 };
 const SkillDetailPanel = ({
   context,
@@ -47978,7 +48720,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);
@@ -47989,8 +48730,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(() => {
@@ -48089,12 +48830,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",
     {
@@ -48107,188 +48850,24 @@ 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.frontmatterValidation.isValid && /* @__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: "Invalid Skill Frontmatter"
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      fontSize: theme2.fontSizes[0],
-                      color: theme2.colors.textSecondary,
-                      fontFamily: theme2.fonts.body,
-                      lineHeight: "1.5"
-                    },
-                    children: [
-                      skill.frontmatterValidation.errorMessage || "This skill has invalid frontmatter metadata.",
-                      skill.frontmatterValidation.missingFields.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "0.5rem" }, children: [
-                        "Required fields: ",
-                        /* @__PURE__ */ jsx("code", { style: {
-                          padding: "2px 4px",
-                          backgroundColor: "#f59e0b20",
-                          borderRadius: "3px",
-                          fontSize: theme2.fontSizes[0]
-                        }, children: "name" }),
-                        ", ",
-                        /* @__PURE__ */ jsx("code", { style: {
-                          padding: "2px 4px",
-                          backgroundColor: "#f59e0b20",
-                          borderRadius: "3px",
-                          fontSize: theme2.fontSizes[0]
-                        }, children: "description" })
-                      ] })
-                    ]
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ jsx(
-          SkillMarkdown,
-          {
-            content: skill.content,
-            theme: theme2,
-            onParsed: handleParsed,
-            onError: handleError,
-            showRawOnError: true
-          }
-        ) })
-      ] }) : /* @__PURE__ */ jsx(
+      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
+          },
+          skill
+        }
+      ) }) }) : /* @__PURE__ */ jsx(
         "div",
         {
           style: {