@industry-theme/agent-panels 0.2.14 → 0.2.16

package/dist/panels.bundle.js

@@ -2723,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
 }) => {
@@ -2750,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));
@@ -2774,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) {
@@ -2801,7 +2874,7 @@ const useSkillsData = ({
     refreshSkills
   };
 };
-const getSourceConfig = (source2) => {
+const getSourceConfig$1 = (source2) => {
   switch (source2) {
     case "global-universal":
       return {
@@ -2850,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,
@@ -2857,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();
@@ -2994,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: [
@@ -3219,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 {
@@ -47723,6 +47851,504 @@ var DocumentView = ({
     editable
   })));
 };
+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 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 formatRelativeTime$1 = (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 < 30) {
+      const weeks = Math.floor(diffDays / 7);
+      return `${weeks} ${weeks === 1 ? "week" : "weeks"} ago`;
+    }
+    if (diffDays < 365) {
+      const months = Math.floor(diffDays / 30);
+      return `${months} ${months === 1 ? "month" : "months"} ago`;
+    }
+    const years = Math.floor(diffDays / 365);
+    return `${years} ${years === 1 ? "year" : "years"} ago`;
+  } catch {
+    return dateString;
+  }
+};
+const SkillSidebar = ({
+  headers,
+  metadata,
+  theme: theme2,
+  className = "",
+  onHeaderClick,
+  skill
+}) => {
+  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 || (skill == null ? void 0 : skill.installedLocations) && skill.installedLocations.length > 1;
+  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", { 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: "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)) })
+            ] }),
+            (skill == null ? void 0 : skill.installedLocations) && skill.installedLocations.length > 1 && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    fontFamily: theme2.fonts.heading,
+                    fontWeight: 600,
+                    fontSize: theme2.fontSizes[0],
+                    textTransform: "uppercase",
+                    letterSpacing: "0.5px",
+                    color: theme2.colors.textSecondary,
+                    marginBottom: theme2.space[2]
+                  },
+                  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 _a, _b, _c;
+                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], flexWrap: "wrap" }, children: [
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              display: "inline-flex",
+                              alignItems: "center",
+                              gap: "4px",
+                              padding: "2px 6px",
+                              borderRadius: theme2.radii[1],
+                              backgroundColor: sourceConfig.bgColor,
+                              border: `1px solid ${sourceConfig.borderColor}`,
+                              fontSize: theme2.fontSizes[0],
+                              color: sourceConfig.color,
+                              fontWeight: 500
+                            },
+                            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,
+                        wordBreak: "break-all"
+                      }, children: location2.path }),
+                      ((_a = location2.metadata) == null ? void 0 : _a.installedAt) && /* @__PURE__ */ jsxs("div", { style: {
+                        fontSize: theme2.fontSizes[0],
+                        color: theme2.colors.textMuted,
+                        fontFamily: theme2.fonts.body
+                      }, children: [
+                        "Installed: ",
+                        formatRelativeTime$1(location2.metadata.installedAt)
+                      ] }),
+                      ((_b = location2.metadata) == null ? void 0 : _b.sha) && ((_c = skill.metadata) == null ? void 0 : _c.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
+                );
+              }) })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
 const formatRelativeTime = (dateString) => {
   try {
     const date = new Date(dateString);
@@ -47749,7 +48375,8 @@ const formatRelativeTime = (dateString) => {
 const SkillMetadataSection = ({
   metadata,
   theme: theme2,
-  structure
+  structure,
+  skill
 }) => {
   var _a, _b, _c, _d, _e2;
   const [expandedSections, setExpandedSections] = React2__default.useState({
@@ -48037,16 +48664,20 @@ const SkillMarkdown = ({
   onWarnings,
   showRawOnError = false,
   containerWidth,
-  structure
+  structure,
+  skill
 }) => {
   const [parsed, setParsed] = React2__default.useState(null);
+  const [headers, setHeaders] = React2__default.useState([]);
   React2__default.useEffect(() => {
-    const skill = parseSkillMarkdownGraceful(content2);
-    setParsed(skill);
-    onParsed == null ? void 0 : onParsed(skill);
-    if (skill.warnings.length > 0) {
-      onWarnings == null ? void 0 : onWarnings(skill.warnings);
-    }
+    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__ */ 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." }) });
@@ -48083,9 +48714,18 @@ const SkillMarkdown = ({
         background: theme2.colors.background
       },
       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(
+        /* @__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,
+              skill
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto", padding: theme2.space[3], paddingTop: 0 }, children: /* @__PURE__ */ jsx(
             IndustryMarkdownSlide,
             {
               content: parsed.body,
@@ -48095,123 +48735,8 @@ const SkillMarkdown = ({
               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)) })
-                ] })
-              ]
-            }
-          )
-        ] }) })
+          ) })
+        ] })
       ]
     }
   );
@@ -48366,7 +48891,8 @@ const SkillDetailPanel = ({
             scriptFiles: skill.scriptFiles,
             referenceFiles: skill.referenceFiles,
             assetFiles: skill.assetFiles
-          }
+          },
+          skill
         }
       ) }) }) : /* @__PURE__ */ jsx(
         "div",