@industry-theme/agent-panels 0.2.19 → 0.2.21

package/dist/panels.bundle.js

@@ -2201,7 +2201,7 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$o = [
+const __iconNode$t = [
   ["path", { d: "M12 7v14", key: "1akyts" }],
   [
     "path",
@@ -2211,14 +2211,14 @@ const __iconNode$o = [
     }
   ]
 ];
-const BookOpen = createLucideIcon("book-open", __iconNode$o);
+const BookOpen = createLucideIcon("book-open", __iconNode$t);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$n = [
+const __iconNode$s = [
   ["path", { d: "M12 8V4H8", key: "hb8ula" }],
   ["rect", { width: "16", height: "12", x: "4", y: "8", rx: "2", key: "enze0r" }],
   ["path", { d: "M2 14h2", key: "vft8re" }],
@@ -2226,76 +2226,100 @@ const __iconNode$n = [
   ["path", { d: "M15 13v2", key: "1xurst" }],
   ["path", { d: "M9 13v2", key: "rq6x2g" }]
 ];
-const Bot = createLucideIcon("bot", __iconNode$n);
+const Bot = createLucideIcon("bot", __iconNode$s);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$m = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$m);
+const __iconNode$r = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$r);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$l = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$l);
+const __iconNode$q = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$q);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$k = [
+const __iconNode$p = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$p);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$o = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$o);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$n = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$n);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$m = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$k);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$m);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$j = [
+const __iconNode$l = [
   ["path", { d: "m18 16 4-4-4-4", key: "1inbqp" }],
   ["path", { d: "m6 8-4 4 4 4", key: "15zrgr" }],
   ["path", { d: "m14.5 4-5 16", key: "e7oirm" }]
 ];
-const CodeXml = createLucideIcon("code-xml", __iconNode$j);
+const CodeXml = createLucideIcon("code-xml", __iconNode$l);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [
+const __iconNode$k = [
   ["path", { d: "m16 18 6-6-6-6", key: "eg8j8" }],
   ["path", { d: "m8 6-6 6 6 6", key: "ppft3o" }]
 ];
-const Code = createLucideIcon("code", __iconNode$i);
+const Code = createLucideIcon("code", __iconNode$k);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$h = [
+const __iconNode$j = [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const Copy = createLucideIcon("copy", __iconNode$h);
+const Copy = createLucideIcon("copy", __iconNode$j);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$g = [
+const __iconNode$i = [
   ["path", { d: "m15 15 6 6", key: "1s409w" }],
   ["path", { d: "m15 9 6-6", key: "ko1vev" }],
   ["path", { d: "M21 16v5h-5", key: "1ck2sf" }],
@@ -2305,14 +2329,26 @@ const __iconNode$g = [
   ["path", { d: "M3 8V3h5", key: "1ln10m" }],
   ["path", { d: "M9 9 3 3", key: "v551iv" }]
 ];
-const Expand = createLucideIcon("expand", __iconNode$g);
+const Expand = createLucideIcon("expand", __iconNode$i);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$f = [
+const __iconNode$h = [
+  ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
+  ["path", { d: "M10 14 21 3", key: "gplh6r" }],
+  ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
+];
+const ExternalLink = createLucideIcon("external-link", __iconNode$h);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$g = [
   [
     "path",
     {
@@ -2324,7 +2360,31 @@ const __iconNode$f = [
   ["path", { d: "M10 12.5 8 15l2 2.5", key: "1tg20x" }],
   ["path", { d: "m14 12.5 2 2.5-2 2.5", key: "yinavb" }]
 ];
-const FileCode = createLucideIcon("file-code", __iconNode$f);
+const FileCode = createLucideIcon("file-code", __iconNode$g);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$f = [
+  [
+    "path",
+    {
+      d: "M12.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v9.34",
+      key: "o6klzx"
+    }
+  ],
+  ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }],
+  [
+    "path",
+    {
+      d: "M10.378 12.622a1 1 0 0 1 3 3.003L8.36 20.637a2 2 0 0 1-.854.506l-2.867.837a.5.5 0 0 1-.62-.62l.836-2.869a2 2 0 0 1 .506-.853z",
+      key: "zhnas1"
+    }
+  ]
+];
+const FilePen = createLucideIcon("file-pen", __iconNode$f);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -2564,6 +2624,8 @@ const determineSkillSource = (path2) => {
     return { source: "project-universal", priority: 1 };
   } else if (path2.includes(".claude/skills/")) {
     return { source: "project-claude", priority: 3 };
+  } else if (path2.includes("skills/")) {
+    return { source: "project-other", priority: 1 };
   } else {
     return { source: "project-other", priority: 5 };
   }
@@ -48048,6 +48110,7 @@ const SkillSidebar = ({
   skill
 }) => {
   const [activeTab, setActiveTab] = React2__default.useState("toc");
+  const [isCollapsed, setIsCollapsed] = React2__default.useState(false);
   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) {
@@ -48062,14 +48125,53 @@ const SkillSidebar = ({
     {
       className,
       style: {
-        width: "250px",
+        width: isCollapsed ? "0px" : "250px",
         flexShrink: 0,
         display: "flex",
         flexDirection: "column",
-        borderRight: `1px solid ${theme2.colors.border}`
+        borderRight: isCollapsed ? "none" : `1px solid ${theme2.colors.border}`,
+        position: "relative",
+        transition: "width 0.3s ease",
+        overflow: "visible"
       },
       children: [
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsCollapsed(!isCollapsed),
+            style: {
+              position: "absolute",
+              right: "-20px",
+              top: "16px",
+              width: "20px",
+              height: "60px",
+              padding: 0,
+              backgroundColor: theme2.colors.backgroundSecondary,
+              border: `1px solid ${theme2.colors.border}`,
+              borderLeft: "none",
+              borderTopRightRadius: "8px",
+              borderBottomRightRadius: "8px",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: theme2.colors.textSecondary,
+              transition: "all 0.2s",
+              zIndex: 10
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = theme2.colors.primary;
+              e.currentTarget.style.color = theme2.colors.background;
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = theme2.colors.backgroundSecondary;
+              e.currentTarget.style.color = theme2.colors.textSecondary;
+            },
+            title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+            children: isCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) : /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+          }
+        ),
+        !isCollapsed && /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
@@ -48141,7 +48243,7 @@ const SkillSidebar = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: [
+        !isCollapsed && /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: [
           activeTab === "toc" && headers.length > 0 && /* @__PURE__ */ jsx(
             TableOfContents,
             {
@@ -48386,11 +48488,117 @@ const formatRelativeTime = (dateString) => {
     return dateString;
   }
 };
+const SearchBar = ({ theme: theme2, searchQuery, onSearchChange, currentMatch, totalMatches, onPrevious, onNext, onClose }) => {
+  const inputRef = React2__default.useRef(null);
+  React2__default.useEffect(() => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme2.space[2],
+    padding: theme2.space[2],
+    backgroundColor: theme2.colors.backgroundSecondary,
+    borderBottom: `1px solid ${theme2.colors.border}`
+  }, children: [
+    /* @__PURE__ */ jsx(Search, { size: 16, color: theme2.colors.textSecondary }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        placeholder: "Find in skill...",
+        value: searchQuery,
+        onChange: (e) => onSearchChange(e.target.value),
+        style: {
+          flex: 1,
+          padding: "0.375rem 0.75rem",
+          fontSize: theme2.fontSizes[2],
+          fontFamily: theme2.fonts.body,
+          color: theme2.colors.text,
+          backgroundColor: theme2.colors.background,
+          border: `1px solid ${theme2.colors.border}`,
+          borderRadius: "6px",
+          outline: "none"
+        },
+        onFocus: (e) => e.currentTarget.style.borderColor = theme2.colors.primary,
+        onBlur: (e) => e.currentTarget.style.borderColor = theme2.colors.border
+      }
+    ),
+    totalMatches > 0 && /* @__PURE__ */ jsxs("span", { style: {
+      fontSize: theme2.fontSizes[1],
+      color: theme2.colors.textSecondary,
+      fontFamily: theme2.fonts.monospace,
+      whiteSpace: "nowrap"
+    }, children: [
+      currentMatch + 1,
+      " / ",
+      totalMatches
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onPrevious,
+        disabled: totalMatches === 0,
+        style: {
+          padding: "0.375rem",
+          backgroundColor: "transparent",
+          border: `1px solid ${theme2.colors.border}`,
+          borderRadius: "4px",
+          cursor: totalMatches === 0 ? "not-allowed" : "pointer",
+          display: "flex",
+          alignItems: "center",
+          opacity: totalMatches === 0 ? 0.5 : 1
+        },
+        title: "Previous match",
+        children: /* @__PURE__ */ jsx(ChevronUp, { size: 16, color: theme2.colors.text })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onNext,
+        disabled: totalMatches === 0,
+        style: {
+          padding: "0.375rem",
+          backgroundColor: "transparent",
+          border: `1px solid ${theme2.colors.border}`,
+          borderRadius: "4px",
+          cursor: totalMatches === 0 ? "not-allowed" : "pointer",
+          display: "flex",
+          alignItems: "center",
+          opacity: totalMatches === 0 ? 0.5 : 1
+        },
+        title: "Next match",
+        children: /* @__PURE__ */ jsx(ChevronDown, { size: 16, color: theme2.colors.text })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onClose,
+        style: {
+          padding: "0.375rem",
+          backgroundColor: "transparent",
+          border: `1px solid ${theme2.colors.border}`,
+          borderRadius: "4px",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center"
+        },
+        title: "Close search",
+        children: /* @__PURE__ */ jsx(X, { size: 16, color: theme2.colors.text })
+      }
+    )
+  ] });
+};
 const SkillMetadataSection = ({
   metadata,
   theme: theme2,
   structure,
-  skill
+  skill,
+  actions
 }) => {
   var _a, _b, _c, _d, _e2;
   const [expandedSections, setExpandedSections] = React2__default.useState({
@@ -48478,112 +48686,202 @@ const SkillMetadataSection = ({
         children: "(No description provided)"
       }
     ),
-    structure && (structure.hasScripts || structure.hasReferences || structure.hasAssets) && /* @__PURE__ */ jsxs("div", { style: {
+    structure && (structure.hasScripts || structure.hasReferences || structure.hasAssets) || actions && (skill == null ? void 0 : skill.path) ? /* @__PURE__ */ jsxs("div", { style: {
       marginTop: theme2.space[3]
     }, children: [
       /* @__PURE__ */ jsxs("div", { style: {
         display: "flex",
         gap: theme2.space[2],
-        flexWrap: "wrap"
+        flexWrap: "wrap",
+        justifyContent: "space-between",
+        alignItems: "center"
       }, 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 ? "▼" : "▶" })
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { style: {
+          display: "flex",
+          gap: theme2.space[2],
+          flexWrap: "wrap"
+        }, children: [
+          (structure == null ? void 0 : 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 == null ? void 0 : 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 == null ? void 0 : 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 ? "▼" : "▶" })
+              ]
+            }
+          )
+        ] }),
+        actions && (skill == null ? void 0 : skill.path) && /* @__PURE__ */ jsxs("div", { style: {
+          display: "flex",
+          gap: theme2.space[2]
+        }, children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => {
+                var _a2;
+                if (skill == null ? void 0 : skill.path) {
+                  (_a2 = actions == null ? void 0 : actions.openFile) == null ? void 0 : _a2.call(actions, skill.path);
+                }
+              },
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: theme2.space[1],
+                padding: `${theme2.space[1]} ${theme2.space[2]}`,
+                backgroundColor: theme2.colors.backgroundSecondary,
+                border: `1px solid ${theme2.colors.border}`,
+                borderRadius: "6px",
+                color: theme2.colors.text,
+                fontSize: theme2.fontSizes[1],
+                fontFamily: theme2.fonts.body,
+                cursor: "pointer",
+                transition: "all 0.2s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = theme2.colors.primary;
+                e.currentTarget.style.color = theme2.colors.background;
+                e.currentTarget.style.borderColor = theme2.colors.primary;
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = theme2.colors.backgroundSecondary;
+                e.currentTarget.style.color = theme2.colors.text;
+                e.currentTarget.style.borderColor = theme2.colors.border;
+              },
+              title: "Open in file editor",
+              children: [
+                /* @__PURE__ */ jsx(FilePen, { size: 14 }),
+                /* @__PURE__ */ jsx("span", { children: "Edit" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => {
+                console.log("Open in MDX editor:", skill.path);
+              },
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: theme2.space[1],
+                padding: `${theme2.space[1]} ${theme2.space[2]}`,
+                backgroundColor: theme2.colors.backgroundSecondary,
+                border: `1px solid ${theme2.colors.border}`,
+                borderRadius: "6px",
+                color: theme2.colors.text,
+                fontSize: theme2.fontSizes[1],
+                fontFamily: theme2.fonts.body,
+                cursor: "pointer",
+                transition: "all 0.2s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = theme2.colors.secondary;
+                e.currentTarget.style.color = theme2.colors.background;
+                e.currentTarget.style.borderColor = theme2.colors.secondary;
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = theme2.colors.backgroundSecondary;
+                e.currentTarget.style.color = theme2.colors.text;
+                e.currentTarget.style.borderColor = theme2.colors.border;
+              },
+              title: "Open in MDX editor",
+              children: [
+                /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
+                /* @__PURE__ */ jsx("span", { children: "MDX Editor" })
+              ]
+            }
+          )
+        ] })
       ] }),
-      expandedSections.scripts && structure.scriptFiles && structure.scriptFiles.length > 0 && /* @__PURE__ */ jsxs("div", { style: {
+      expandedSections.scripts && (structure == null ? void 0 : structure.scriptFiles) && structure.scriptFiles.length > 0 && /* @__PURE__ */ jsxs("div", { style: {
         marginTop: theme2.space[2],
         padding: theme2.space[2],
         backgroundColor: `${theme2.colors.primary}15`,
@@ -48601,7 +48899,7 @@ const SkillMetadataSection = ({
           margin: 0,
           paddingLeft: theme2.space[3],
           listStyle: "none"
-        }, children: structure.scriptFiles.map((file, idx) => /* @__PURE__ */ jsxs("li", { style: {
+        }, children: structure == null ? void 0 : structure.scriptFiles.map((file, idx) => /* @__PURE__ */ jsxs("li", { style: {
           fontSize: theme2.fontSizes[1],
           color: theme2.colors.text,
           fontFamily: theme2.fonts.monospace,
@@ -48611,7 +48909,7 @@ const SkillMetadataSection = ({
           file
         ] }, idx)) })
       ] }),
-      expandedSections.references && structure.referenceFiles && structure.referenceFiles.length > 0 && /* @__PURE__ */ jsxs("div", { style: {
+      expandedSections.references && (structure == null ? void 0 : structure.referenceFiles) && structure.referenceFiles.length > 0 && /* @__PURE__ */ jsxs("div", { style: {
         marginTop: theme2.space[2],
         padding: theme2.space[2],
         backgroundColor: `${theme2.colors.secondary}15`,
@@ -48629,7 +48927,7 @@ const SkillMetadataSection = ({
           margin: 0,
           paddingLeft: theme2.space[3],
           listStyle: "none"
-        }, children: structure.referenceFiles.map((file, idx) => /* @__PURE__ */ jsxs("li", { style: {
+        }, children: structure == null ? void 0 : structure.referenceFiles.map((file, idx) => /* @__PURE__ */ jsxs("li", { style: {
           fontSize: theme2.fontSizes[1],
           color: theme2.colors.text,
           fontFamily: theme2.fonts.monospace,
@@ -48639,7 +48937,7 @@ const SkillMetadataSection = ({
           file
         ] }, idx)) })
       ] }),
-      expandedSections.assets && structure.assetFiles && structure.assetFiles.length > 0 && /* @__PURE__ */ jsxs("div", { style: {
+      expandedSections.assets && (structure == null ? void 0 : structure.assetFiles) && structure.assetFiles.length > 0 && /* @__PURE__ */ jsxs("div", { style: {
         marginTop: theme2.space[2],
         padding: theme2.space[2],
         backgroundColor: `${theme2.colors.accent}15`,
@@ -48657,7 +48955,7 @@ const SkillMetadataSection = ({
           margin: 0,
           paddingLeft: theme2.space[3],
           listStyle: "none"
-        }, children: structure.assetFiles.map((file, idx) => /* @__PURE__ */ jsxs("li", { style: {
+        }, children: structure == null ? void 0 : structure.assetFiles.map((file, idx) => /* @__PURE__ */ jsxs("li", { style: {
           fontSize: theme2.fontSizes[1],
           color: theme2.colors.text,
           fontFamily: theme2.fonts.monospace,
@@ -48667,7 +48965,7 @@ const SkillMetadataSection = ({
           file
         ] }, idx)) })
       ] })
-    ] })
+    ] }) : null
   ] });
 };
 const SkillMarkdown = ({
@@ -48679,10 +48977,16 @@ const SkillMarkdown = ({
   showRawOnError = false,
   containerWidth,
   structure,
-  skill
+  skill,
+  actions
 }) => {
   const [parsed, setParsed] = React2__default.useState(null);
   const [headers, setHeaders] = React2__default.useState([]);
+  const [showSearch, setShowSearch] = React2__default.useState(false);
+  const [searchQuery, setSearchQuery] = React2__default.useState("");
+  const [currentMatch, setCurrentMatch] = React2__default.useState(0);
+  const [totalMatches, setTotalMatches] = React2__default.useState(0);
+  const contentRef = React2__default.useRef(null);
   React2__default.useEffect(() => {
     const skill2 = parseSkillMarkdownGraceful(content2);
     setParsed(skill2);
@@ -48693,6 +48997,133 @@ const SkillMarkdown = ({
     const extractedHeaders = extractHeaders(skill2.body);
     setHeaders(extractedHeaders);
   }, [content2, onParsed, onWarnings]);
+  const scrollToMatch = React2__default.useCallback((matches, index2, theme22) => {
+    matches.forEach((m) => {
+      m.style.backgroundColor = "#ffeb3b";
+      m.style.outline = "none";
+      m.style.boxShadow = "none";
+    });
+    if (matches[index2]) {
+      matches[index2].style.backgroundColor = "#ff9800";
+      matches[index2].style.outline = `2px solid ${theme22.colors.primary}`;
+      matches[index2].style.boxShadow = "0 0 8px rgba(255, 152, 0, 0.6)";
+      matches[index2].scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }, []);
+  const handleNext = React2__default.useCallback(() => {
+    var _a;
+    if (totalMatches === 0) return;
+    const newIndex = (currentMatch + 1) % totalMatches;
+    setCurrentMatch(newIndex);
+    const matches = (_a = contentRef.current) == null ? void 0 : _a.querySelectorAll(".search-highlight");
+    if (matches) {
+      scrollToMatch(Array.from(matches), newIndex, theme2);
+    }
+  }, [totalMatches, currentMatch, theme2, scrollToMatch]);
+  const handlePrevious = React2__default.useCallback(() => {
+    var _a;
+    if (totalMatches === 0) return;
+    const newIndex = currentMatch === 0 ? totalMatches - 1 : currentMatch - 1;
+    setCurrentMatch(newIndex);
+    const matches = (_a = contentRef.current) == null ? void 0 : _a.querySelectorAll(".search-highlight");
+    if (matches) {
+      scrollToMatch(Array.from(matches), newIndex, theme2);
+    }
+  }, [totalMatches, currentMatch, theme2, scrollToMatch]);
+  React2__default.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "f") {
+        e.preventDefault();
+        setShowSearch(true);
+      }
+      if (e.key === "Escape" && showSearch) {
+        setShowSearch(false);
+        setSearchQuery("");
+      }
+      if (e.key === "Enter" && showSearch && totalMatches > 0) {
+        e.preventDefault();
+        handleNext();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [showSearch, totalMatches, handleNext]);
+  React2__default.useEffect(() => {
+    var _a;
+    if (!searchQuery || !contentRef.current) {
+      const highlights = (_a = contentRef.current) == null ? void 0 : _a.querySelectorAll(".search-highlight");
+      highlights == null ? void 0 : highlights.forEach((el) => {
+        const parent = el.parentNode;
+        if (parent) {
+          parent.replaceChild(document.createTextNode(el.textContent || ""), el);
+          parent.normalize();
+        }
+      });
+      setTotalMatches(0);
+      setCurrentMatch(0);
+      return;
+    }
+    const container = contentRef.current;
+    const walker = document.createTreeWalker(
+      container,
+      NodeFilter.SHOW_TEXT,
+      null
+    );
+    const textNodes = [];
+    let node2;
+    while (node2 = walker.nextNode()) {
+      textNodes.push(node2);
+    }
+    const oldHighlights = container.querySelectorAll(".search-highlight");
+    oldHighlights.forEach((el) => {
+      const parent = el.parentNode;
+      if (parent) {
+        parent.replaceChild(document.createTextNode(el.textContent || ""), el);
+        parent.normalize();
+      }
+    });
+    const matches = [];
+    const regex2 = new RegExp(searchQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
+    textNodes.forEach((textNode) => {
+      var _a2;
+      const text2 = textNode.textContent || "";
+      const matches_in_text = [...text2.matchAll(regex2)];
+      if (matches_in_text.length > 0) {
+        const fragment2 = document.createDocumentFragment();
+        let lastIndex = 0;
+        matches_in_text.forEach((match) => {
+          const matchIndex = match.index;
+          if (matchIndex > lastIndex) {
+            fragment2.appendChild(document.createTextNode(text2.slice(lastIndex, matchIndex)));
+          }
+          const mark2 = document.createElement("mark");
+          mark2.className = "search-highlight";
+          mark2.style.backgroundColor = "#ffeb3b";
+          mark2.style.color = "#000000";
+          mark2.style.fontWeight = "500";
+          mark2.textContent = match[0];
+          fragment2.appendChild(mark2);
+          matches.push(mark2);
+          lastIndex = matchIndex + match[0].length;
+        });
+        if (lastIndex < text2.length) {
+          fragment2.appendChild(document.createTextNode(text2.slice(lastIndex)));
+        }
+        (_a2 = textNode.parentNode) == null ? void 0 : _a2.replaceChild(fragment2, textNode);
+      }
+    });
+    setTotalMatches(matches.length);
+    if (matches.length > 0) {
+      setCurrentMatch(0);
+      scrollToMatch(matches, 0, theme2);
+    }
+  }, [searchQuery, parsed, theme2, scrollToMatch]);
+  const handleCloseSearch = () => {
+    setShowSearch(false);
+    setSearchQuery("");
+    setCurrentMatch(0);
+    setTotalMatches(0);
+  };
   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." }) });
   }
@@ -48728,7 +49159,20 @@ 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, skill }) }),
+        showSearch && /* @__PURE__ */ jsx(
+          SearchBar,
+          {
+            theme: theme2,
+            searchQuery,
+            onSearchChange: setSearchQuery,
+            currentMatch,
+            totalMatches,
+            onPrevious: handlePrevious,
+            onNext: handleNext,
+            onClose: handleCloseSearch
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { padding: theme2.space[3], paddingBottom: 0 }, children: /* @__PURE__ */ jsx(SkillMetadataSection, { metadata: parsed.metadata, theme: theme2, structure, skill, actions }) }),
         /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
           /* @__PURE__ */ jsx(
             SkillSidebar,
@@ -48739,7 +49183,7 @@ const SkillMarkdown = ({
               skill
             }
           ),
-          /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto", padding: theme2.space[3], paddingTop: 0 }, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { ref: contentRef, style: { flex: 1, overflow: "auto", padding: theme2.space[3], paddingTop: 0 }, children: /* @__PURE__ */ jsx(
             IndustryMarkdownSlide,
             {
               content: parsed.body,
@@ -48911,7 +49355,8 @@ const SkillDetailPanel = ({
             referenceFiles: skill.referenceFiles,
             assetFiles: skill.assetFiles
           },
-          skill
+          skill,
+          actions
         }
       ) }) }) : /* @__PURE__ */ jsx(
         "div",