@industry-theme/agent-panels 0.2.15 → 0.2.17

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import { type SkillsListPanelProps } from './panels/SkillsListPanel';
+import { type SkillDetailPanelProps } from './panels/SkillDetailPanel';
 import type { PanelDefinition } from './types';
-export type { SkillsListPanelProps };
+import type { Skill } from './panels/skills/hooks/useSkillsData';
+export type { SkillsListPanelProps, SkillDetailPanelProps, Skill };
 /**
  * Export array of panel definitions.
  * This is the required export for panel extensions.

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAItF,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,SAAS,CAAC;AAGlE,YAAY,EAAE,oBAAoB,EAAE,CAAC;AAErC;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,eAAe,EA6GnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAGzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,qBAG3B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AACtF,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAGzF,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,SAAS,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qCAAqC,CAAC;AAGjE,YAAY,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAC;AAEnE;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,eAAe,EA6GnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAGzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,qBAG3B,CAAC"}

package/dist/panels/SkillDetailPanel.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { PanelComponentProps } from '../types';
+import type { Skill } from './skills/hooks/useSkillsData';
 import './SkillDetailPanel.css';
 export interface SkillDetailPanelProps extends PanelComponentProps {
     /**
@@ -8,6 +9,12 @@ export interface SkillDetailPanelProps extends PanelComponentProps {
      * This allows the host to control panel state via props instead of events.
      */
     selectedSkillId?: string | null;
+    /**
+     * Optional skill object to display.
+     * If provided, bypasses useSkillsData loading for instant display.
+     * This provides better performance when the skill data is already available.
+     */
+    skill?: Skill | null;
 }
 export declare const SkillDetailPanel: React.FC<SkillDetailPanelProps>;
 //# sourceMappingURL=SkillDetailPanel.d.ts.map

package/dist/panels/SkillDetailPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkillDetailPanel.d.ts","sourceRoot":"","sources":["../../src/panels/SkillDetailPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAOpD,OAAO,wBAAwB,CAAC;AAEhC,MAAM,WAAW,qBAAsB,SAAQ,mBAAmB;IAChE;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAqL5D,CAAC"}
+{"version":3,"file":"SkillDetailPanel.d.ts","sourceRoot":"","sources":["../../src/panels/SkillDetailPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAK1D,OAAO,wBAAwB,CAAC;AAEhC,MAAM,WAAW,qBAAsB,SAAQ,mBAAmB;IAChE;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+L5D,CAAC"}

package/dist/panels/skills/components/SkillMarkdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkillMarkdown.d.ts","sourceRoot":"","sources":["../../../../src/panels/skills/components/SkillMarkdown.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,iBAAiB,EACvB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,KAAK,EAAe,MAAM,wBAAwB,CAAC;AAIjE,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/C,kDAAkD;IAClD,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACrD,+DAA+D;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0FAA0F;IAC1F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yEAAyE;IACzE,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,uEAAuE;IACvE,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AA2fD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4FtD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SkillMarkdown.d.ts","sourceRoot":"","sources":["../../../../src/panels/skills/components/SkillMarkdown.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,iBAAiB,EACvB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,KAAK,EAAe,MAAM,wBAAwB,CAAC;AAIjE,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/C,kDAAkD;IAClD,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACrD,+DAA+D;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0FAA0F;IAC1F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yEAAyE;IACzE,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,uEAAuE;IACvE,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAoYD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6FtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/panels/skills/components/SkillSidebar.d.ts

@@ -5,6 +5,7 @@ import { Theme } from '@principal-ade/industry-theme';
 import { type PartialSkillMetadata } from '@principal-ade/markdown-utils';
 import React from 'react';
 import type { MarkdownHeader } from '../utils/extractHeaders';
+import type { Skill } from '../hooks/useSkillsData';
 export interface SkillSidebarProps {
     /** Array of headers for table of contents */
     headers: MarkdownHeader[];
@@ -16,6 +17,8 @@ export interface SkillSidebarProps {
     className?: string;
     /** Optional callback when a header is clicked */
     onHeaderClick?: (header: MarkdownHeader) => void;
+    /** Optional full skill object for displaying installation locations */
+    skill?: Skill;
 }
 /**
  * SkillSidebar component

package/dist/panels/skills/components/SkillSidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkillSidebar.d.ts","sourceRoot":"","sources":["../../../../src/panels/skills/components/SkillSidebar.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAK9D,MAAM,WAAW,iBAAiB;IAChC,6CAA6C;IAC7C,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,+BAA+B;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;CAClD;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyOpD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SkillSidebar.d.ts","sourceRoot":"","sources":["../../../../src/panels/skills/components/SkillSidebar.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAE1E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,KAAK,EAAe,MAAM,wBAAwB,CAAC;AAiFjE,MAAM,WAAW,iBAAiB;IAChC,6CAA6C;IAC7C,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,+BAA+B;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACjD,uEAAuE;IACvE,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiWpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/panels.bundle.js

@@ -47953,15 +47953,88 @@ const TableOfContents = ({
     }
   );
 };
+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
+  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;
+  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");
@@ -48119,7 +48192,7 @@ const SkillSidebar = ({
                 index2
               )) })
             ] }),
-            metadata.metadata && Object.keys(metadata.metadata).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            metadata.metadata && Object.keys(metadata.metadata).length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: theme2.space[3] }, children: [
               /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -48163,6 +48236,112 @@ const SkillSidebar = ({
                   }
                 )
               ] }, 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
+                );
+              }) })
             ] })
           ] })
         ] })
@@ -48193,55 +48372,6 @@ const formatRelativeTime = (dateString) => {
     return dateString;
   }
 };
-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,
@@ -48523,110 +48653,6 @@ const SkillMetadataSection = ({
           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
-        );
-      }) })
     ] })
   ] });
 };
@@ -48695,7 +48721,8 @@ const SkillMarkdown = ({
             {
               headers,
               metadata: parsed.metadata,
-              theme: theme2
+              theme: theme2,
+              skill
             }
           ),
           /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto", padding: theme2.space[3], paddingTop: 0 }, children: /* @__PURE__ */ jsx(
@@ -48718,14 +48745,16 @@ const SkillDetailPanel = ({
   context,
   events,
   actions,
-  selectedSkillId: selectedSkillIdProp
+  selectedSkillId: selectedSkillIdProp,
+  skill: skillProp
 }) => {
   const { theme: theme2 } = useTheme();
   const { skills, isLoading, error } = useSkillsData({ context });
   const [selectedSkillIdState, setSelectedSkillIdState] = useState(null);
-  const [skill, setSkill] = useState(null);
+  const [skillState, setSkillState] = useState(null);
   const panelRef = useRef(null);
   const selectedSkillId = selectedSkillIdProp !== void 0 ? selectedSkillIdProp : selectedSkillIdState;
+  const skill = skillProp !== void 0 ? skillProp : skillState;
   gt(
     "skill-detail",
     events,
@@ -48748,13 +48777,16 @@ const SkillDetailPanel = ({
     return unsubscribe;
   }, [events, selectedSkillIdProp]);
   useEffect(() => {
+    if (skillProp !== void 0) {
+      return;
+    }
     if (selectedSkillId && skills.length > 0) {
       const foundSkill = skills.find((s2) => s2.id === selectedSkillId);
-      setSkill(foundSkill || null);
+      setSkillState(foundSkill || null);
     } else if (!selectedSkillId) {
-      setSkill(null);
+      setSkillState(null);
     }
-  }, [selectedSkillId, skills]);
+  }, [selectedSkillId, skills, skillProp]);
   if (error) {
     return /* @__PURE__ */ jsx(
       "div",