@industry-theme/agent-panels 0.1.2 → 0.1.4

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$g = [
+const __iconNode$j = [
   ["path", { d: "M12 7v14", key: "1akyts" }],
   [
     "path",
@@ -2211,72 +2211,72 @@ const __iconNode$g = [
     }
   ]
 ];
-const BookOpen = createLucideIcon("book-open", __iconNode$g);
+const BookOpen = createLucideIcon("book-open", __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$f = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$f);
+const __iconNode$i = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __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$e = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$e);
+const __iconNode$h = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __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$d = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$d);
+const __iconNode$g = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __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$c = [
+const __iconNode$f = [
   ["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$c);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$f);
 /**
  * @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$b = [
+const __iconNode$e = [
   ["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$b);
+const Code = createLucideIcon("code", __iconNode$e);
 /**
  * @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$a = [
+const __iconNode$d = [
   ["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$a);
+const Copy = createLucideIcon("copy", __iconNode$d);
 /**
  * @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$9 = [
+const __iconNode$c = [
   ["path", { d: "m15 15 6 6", key: "1s409w" }],
   ["path", { d: "m15 9 6-6", key: "ko1vev" }],
   ["path", { d: "M21 16v5h-5", key: "1ck2sf" }],
@@ -2286,14 +2286,14 @@ const __iconNode$9 = [
   ["path", { d: "M3 8V3h5", key: "1ln10m" }],
   ["path", { d: "M9 9 3 3", key: "v551iv" }]
 ];
-const Expand = createLucideIcon("expand", __iconNode$9);
+const Expand = createLucideIcon("expand", __iconNode$c);
 /**
  * @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$8 = [
+const __iconNode$b = [
   [
     "path",
     {
@@ -2305,14 +2305,14 @@ const __iconNode$8 = [
   ["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$8);
+const FileCode = createLucideIcon("file-code", __iconNode$b);
 /**
  * @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$7 = [
+const __iconNode$a = [
   [
     "path",
     {
@@ -2325,7 +2325,52 @@ const __iconNode$7 = [
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-const FileText = createLucideIcon("file-text", __iconNode$7);
+const FileText = createLucideIcon("file-text", __iconNode$a);
+/**
+ * @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$9 = [
+  [
+    "path",
+    {
+      d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",
+      key: "1kt360"
+    }
+  ]
+];
+const Folder = createLucideIcon("folder", __iconNode$9);
+/**
+ * @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$8 = [
+  [
+    "path",
+    {
+      d: "M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4",
+      key: "tonef"
+    }
+  ],
+  ["path", { d: "M9 18c-4.51 2-5-2-7-2", key: "9comsn" }]
+];
+const Github = createLucideIcon("github", __iconNode$8);
+/**
+ * @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$7 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20", key: "13o1zl" }],
+  ["path", { d: "M2 12h20", key: "9i4pu4" }]
+];
+const Globe = createLucideIcon("globe", __iconNode$7);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -2419,6 +2464,15 @@ const __iconNode = [
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
 const X = createLucideIcon("x", __iconNode);
+const determineSkillSource = (path2) => {
+  if (path2.includes(".agent/skills/")) {
+    return { source: "project-universal", priority: 1 };
+  } else if (path2.includes(".claude/skills/")) {
+    return { source: "project-claude", priority: 3 };
+  } else {
+    return { source: "project-other", priority: 5 };
+  }
+};
 const findSkillFiles = (fileTree) => {
   const skillFiles = fileTree.allFiles.filter((file) => file.name === "SKILL.md");
   return skillFiles.map((file) => file.relativePath);
@@ -2441,7 +2495,7 @@ const analyzeSkillStructure = (fileTree, skillPath) => {
     assetFiles
   };
 };
-const parseSkillContent = (content2, path2, fileTree) => {
+const parseSkillContent = async (content2, path2, fileTree, fileSystemAdapter) => {
   const pathParts = path2.split("/");
   const skillDirName = pathParts[pathParts.length - 2] || "Unknown Skill";
   let description = "";
@@ -2465,6 +2519,18 @@ const parseSkillContent = (content2, path2, fileTree) => {
     }
   }
   const structure = analyzeSkillStructure(fileTree, path2);
+  const { source: source2, priority } = determineSkillSource(path2);
+  let metadata;
+  if (fileSystemAdapter && structure.skillFolderPath) {
+    try {
+      const metadataPath = `${structure.skillFolderPath}/.metadata.json`;
+      const metadataContent = await fileSystemAdapter.readFile(metadataPath);
+      metadata = JSON.parse(metadataContent);
+      console.log("[useSkillsData] Loaded metadata for skill:", skillDirName, metadata);
+    } catch (error) {
+      console.debug("[useSkillsData] No metadata file for skill:", skillDirName);
+    }
+  }
   return {
     id: path2,
     name: skillDirName.replace(/-/g, " ").replace(/_/g, " "),
@@ -2473,7 +2539,10 @@ const parseSkillContent = (content2, path2, fileTree) => {
     content: content2,
     capabilities: capabilities.slice(0, 3),
     // Limit to first 3 capabilities
-    ...structure
+    ...structure,
+    source: source2,
+    priority,
+    metadata
   };
 };
 const useSkillsData = ({
@@ -2483,53 +2552,56 @@ const useSkillsData = ({
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const loadSkills = useCallback(async () => {
-    var _a, _b;
+    var _a, _b, _c;
     setIsLoading(true);
     setError(null);
     try {
       const fileTreeSlice = context.getSlice("fileTree");
       const fileTree = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
-      if (!fileTree) {
-        setSkills([]);
-        setIsLoading(false);
-        return;
+      let localSkills = [];
+      if (fileTree) {
+        console.log("[useSkillsData] Full context:", context);
+        const fileSystem = (_a = context.adapters) == null ? void 0 : _a.fileSystem;
+        console.log("[useSkillsData] Adapters:", context.adapters);
+        console.log("[useSkillsData] FileSystem adapter:", fileSystem);
+        console.log("[useSkillsData] fileSystem?.readFile:", fileSystem == null ? void 0 : fileSystem.readFile);
+        console.log("[useSkillsData] typeof fileSystem?.readFile:", typeof (fileSystem == null ? void 0 : fileSystem.readFile));
+        console.log("[useSkillsData] Check result (!fileSystem?.readFile):", !(fileSystem == null ? void 0 : fileSystem.readFile));
+        if (!(fileSystem == null ? void 0 : fileSystem.readFile)) {
+          console.error("[useSkillsData] FAILING CHECK - fileSystem:", fileSystem);
+          throw new Error("File system adapter not available");
+        }
+        console.log("[useSkillsData] Check passed! Continuing...");
+        const repoPath = (_b = context.currentScope.repository) == null ? void 0 : _b.path;
+        if (!repoPath) {
+          throw new Error("Repository path not available");
+        }
+        console.log("[useSkillsData] fileTree:", fileTree);
+        console.log("[useSkillsData] fileTree.allFiles:", fileTree.allFiles);
+        console.log("[useSkillsData] typeof fileTree:", typeof fileTree);
+        console.log("[useSkillsData] fileTree keys:", Object.keys(fileTree));
+        const skillPaths = findSkillFiles(fileTree);
+        console.log("[useSkillsData] Found skill paths:", skillPaths);
+        const skillPromises = skillPaths.map(async (skillPath) => {
+          try {
+            const fullPath = `${repoPath}/${skillPath}`;
+            const content2 = await fileSystem.readFile(fullPath);
+            return parseSkillContent(content2, skillPath, fileTree, fileSystem);
+          } catch (err) {
+            console.error(`Failed to read skill at ${skillPath}:`, err);
+            return null;
+          }
+        });
+        localSkills = (await Promise.all(skillPromises)).filter(
+          (skill) => skill !== null
+        );
       }
-      console.log("[useSkillsData] Full context:", context);
-      const fileSystem = (_a = context.adapters) == null ? void 0 : _a.fileSystem;
-      console.log("[useSkillsData] Adapters:", context.adapters);
-      console.log("[useSkillsData] FileSystem adapter:", fileSystem);
-      console.log("[useSkillsData] fileSystem?.readFile:", fileSystem == null ? void 0 : fileSystem.readFile);
-      console.log("[useSkillsData] typeof fileSystem?.readFile:", typeof (fileSystem == null ? void 0 : fileSystem.readFile));
-      console.log("[useSkillsData] Check result (!fileSystem?.readFile):", !(fileSystem == null ? void 0 : fileSystem.readFile));
-      if (!(fileSystem == null ? void 0 : fileSystem.readFile)) {
-        console.error("[useSkillsData] FAILING CHECK - fileSystem:", fileSystem);
-        throw new Error("File system adapter not available");
-      }
-      console.log("[useSkillsData] Check passed! Continuing...");
-      const repoPath = (_b = context.currentScope.repository) == null ? void 0 : _b.path;
-      if (!repoPath) {
-        throw new Error("Repository path not available");
-      }
-      console.log("[useSkillsData] fileTree:", fileTree);
-      console.log("[useSkillsData] fileTree.allFiles:", fileTree.allFiles);
-      console.log("[useSkillsData] typeof fileTree:", typeof fileTree);
-      console.log("[useSkillsData] fileTree keys:", Object.keys(fileTree));
-      const skillPaths = findSkillFiles(fileTree);
-      console.log("[useSkillsData] Found skill paths:", skillPaths);
-      const skillPromises = skillPaths.map(async (skillPath) => {
-        try {
-          const fullPath = `${repoPath}/${skillPath}`;
-          const content2 = await fileSystem.readFile(fullPath);
-          return parseSkillContent(content2, skillPath, fileTree);
-        } catch (err) {
-          console.error(`Failed to read skill at ${skillPath}:`, err);
-          return null;
-        }
-      });
-      const loadedSkills = (await Promise.all(skillPromises)).filter(
-        (skill) => skill !== null
-      );
-      setSkills(loadedSkills);
+      const globalSkillsSlice = context.getSlice("globalSkills");
+      const globalSkills = ((_c = globalSkillsSlice == null ? void 0 : globalSkillsSlice.data) == null ? void 0 : _c.skills) || [];
+      console.log("[useSkillsData] Global skills:", globalSkills);
+      const allSkills = [...localSkills, ...globalSkills];
+      console.log("[useSkillsData] Total skills:", allSkills.length);
+      setSkills(allSkills);
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Failed to load skills";
       setError(errorMessage);
@@ -2551,13 +2623,63 @@ const useSkillsData = ({
     refreshSkills
   };
 };
+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 SkillCard = ({
   skill,
   onClick,
   isSelected = false
 }) => {
-  var _a, _b, _c, _d, _e2, _f;
+  var _a, _b, _c, _d, _e2, _f, _g, _h;
   const { theme: theme2 } = useTheme();
+  const sourceConfig = getSourceConfig(skill.source);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2607,22 +2729,78 @@ const SkillCard = ({
                 children: /* @__PURE__ */ jsx(FileText, { size: 20, color: theme2.colors.primary })
               }
             ),
-            /* @__PURE__ */ jsx(
-              "h3",
-              {
-                style: {
-                  margin: 0,
-                  fontSize: theme2.fontSizes[2],
-                  fontWeight: theme2.fontWeights.semibold,
-                  color: theme2.colors.text,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
-                  textTransform: "capitalize"
-                },
-                children: skill.name
-              }
-            )
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px", flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: theme2.fontSizes[2],
+                    fontWeight: theme2.fontWeights.semibold,
+                    color: theme2.colors.text,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    textTransform: "capitalize"
+                  },
+                  children: skill.name
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px", alignItems: "center", 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,
+                      width: "fit-content"
+                    },
+                    title: `Source: ${skill.source}`,
+                    children: [
+                      /* @__PURE__ */ jsx(sourceConfig.icon, { size: 10 }),
+                      /* @__PURE__ */ jsx("span", { children: sourceConfig.label })
+                    ]
+                  }
+                ),
+                ((_a = skill.metadata) == null ? void 0 : _a.owner) && ((_b = skill.metadata) == null ? void 0 : _b.repo) && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: "4px",
+                      padding: "2px 6px",
+                      borderRadius: theme2.radii[1],
+                      backgroundColor: "#23272d15",
+                      border: "1px solid #23272d30",
+                      fontSize: theme2.fontSizes[0],
+                      color: "#23272d",
+                      fontWeight: 500,
+                      fontFamily: theme2.fonts.monospace,
+                      width: "fit-content"
+                    },
+                    title: `From: ${skill.metadata.installedFrom}
+Installed: ${skill.metadata.installedAt ? new Date(skill.metadata.installedAt).toLocaleString() : "Unknown"}`,
+                    children: [
+                      /* @__PURE__ */ jsx(Github, { size: 10 }),
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        skill.metadata.owner,
+                        "/",
+                        skill.metadata.repo
+                      ] })
+                    ]
+                  }
+                )
+              ] })
+            ] })
           ] }),
           onClick && /* @__PURE__ */ jsx(
             ChevronRight,
@@ -2707,10 +2885,10 @@ const SkillCard = ({
                 color: theme2.colors.primary,
                 fontWeight: 500
               },
-              title: `Scripts: ${(_a = skill.scriptFiles) == null ? void 0 : _a.join(", ")}`,
+              title: `Scripts: ${(_c = skill.scriptFiles) == null ? void 0 : _c.join(", ")}`,
               children: [
                 /* @__PURE__ */ jsx(Code, { size: 12 }),
-                /* @__PURE__ */ jsx("span", { children: ((_b = skill.scriptFiles) == null ? void 0 : _b.length) || 0 })
+                /* @__PURE__ */ jsx("span", { children: ((_d = skill.scriptFiles) == null ? void 0 : _d.length) || 0 })
               ]
             }
           ),
@@ -2729,10 +2907,10 @@ const SkillCard = ({
                 color: theme2.colors.secondary,
                 fontWeight: 500
               },
-              title: `References: ${(_c = skill.referenceFiles) == null ? void 0 : _c.join(", ")}`,
+              title: `References: ${(_e2 = skill.referenceFiles) == null ? void 0 : _e2.join(", ")}`,
               children: [
                 /* @__PURE__ */ jsx(BookOpen, { size: 12 }),
-                /* @__PURE__ */ jsx("span", { children: ((_d = skill.referenceFiles) == null ? void 0 : _d.length) || 0 })
+                /* @__PURE__ */ jsx("span", { children: ((_f = skill.referenceFiles) == null ? void 0 : _f.length) || 0 })
               ]
             }
           ),
@@ -2751,10 +2929,10 @@ const SkillCard = ({
                 color: theme2.colors.accent,
                 fontWeight: 500
               },
-              title: `Assets: ${(_e2 = skill.assetFiles) == null ? void 0 : _e2.join(", ")}`,
+              title: `Assets: ${(_g = skill.assetFiles) == null ? void 0 : _g.join(", ")}`,
               children: [
                 /* @__PURE__ */ jsx(Package, { size: 12 }),
-                /* @__PURE__ */ jsx("span", { children: ((_f = skill.assetFiles) == null ? void 0 : _f.length) || 0 })
+                /* @__PURE__ */ jsx("span", { children: ((_h = skill.assetFiles) == null ? void 0 : _h.length) || 0 })
               ]
             }
           )
@@ -2789,6 +2967,7 @@ const SkillsListPanel = ({
   const panelRef = useRef(null);
   const [selectedSkillId, setSelectedSkillId] = useState(null);
   const [searchQuery, setSearchQuery] = useState("");
+  const [skillFilter, setSkillFilter] = useState("all");
   const [isRefreshing, setIsRefreshing] = useState(false);
   const { skills, isLoading, error, refreshSkills } = useSkillsData({ context });
   gt("skills-list", events, () => {
@@ -2796,20 +2975,30 @@ const SkillsListPanel = ({
     return (_a = panelRef.current) == null ? void 0 : _a.focus();
   });
   const filteredSkills = useMemo(() => {
-    if (!searchQuery.trim()) {
-      return skills;
-    }
-    const query = searchQuery.toLowerCase().trim();
-    return skills.filter((skill) => {
-      var _a, _b;
-      if (skill.name.toLowerCase().includes(query)) return true;
-      if ((_a = skill.description) == null ? void 0 : _a.toLowerCase().includes(query)) return true;
-      if ((_b = skill.capabilities) == null ? void 0 : _b.some((cap2) => cap2.toLowerCase().includes(query)))
-        return true;
-      if (skill.path.toLowerCase().includes(query)) return true;
-      return false;
-    });
-  }, [skills, searchQuery]);
+    let filtered = skills;
+    if (skillFilter === "project") {
+      filtered = filtered.filter(
+        (skill) => skill.source === "project-universal" || skill.source === "project-claude" || skill.source === "project-other"
+      );
+    } else if (skillFilter === "global") {
+      filtered = filtered.filter(
+        (skill) => skill.source === "global-universal" || skill.source === "global-claude"
+      );
+    }
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase().trim();
+      filtered = filtered.filter((skill) => {
+        var _a, _b;
+        if (skill.name.toLowerCase().includes(query)) return true;
+        if ((_a = skill.description) == null ? void 0 : _a.toLowerCase().includes(query)) return true;
+        if ((_b = skill.capabilities) == null ? void 0 : _b.some((cap2) => cap2.toLowerCase().includes(query)))
+          return true;
+        if (skill.path.toLowerCase().includes(query)) return true;
+        return false;
+      });
+    }
+    return filtered;
+  }, [skills, searchQuery, skillFilter]);
   const handleSkillClick = (skill) => {
     setSelectedSkillId(skill.id);
     if (events) {
@@ -3008,6 +3197,90 @@ const SkillsListPanel = ({
             ]
           }
         ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              display: "flex",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setSkillFilter("all"),
+                  style: {
+                    padding: "8px 16px",
+                    fontSize: theme2.fontSizes[1],
+                    fontFamily: theme2.fonts.body,
+                    border: `1px solid ${skillFilter === "all" ? theme2.colors.primary : theme2.colors.border}`,
+                    borderRadius: theme2.radii[1],
+                    background: skillFilter === "all" ? `${theme2.colors.primary}15` : theme2.colors.backgroundSecondary,
+                    color: skillFilter === "all" ? theme2.colors.primary : theme2.colors.text,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    fontWeight: skillFilter === "all" ? 600 : 400,
+                    transition: "all 0.2s ease"
+                  },
+                  children: "All Skills"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => setSkillFilter("project"),
+                  style: {
+                    padding: "8px 16px",
+                    fontSize: theme2.fontSizes[1],
+                    fontFamily: theme2.fonts.body,
+                    border: `1px solid ${skillFilter === "project" ? theme2.colors.primary : theme2.colors.border}`,
+                    borderRadius: theme2.radii[1],
+                    background: skillFilter === "project" ? `${theme2.colors.primary}15` : theme2.colors.backgroundSecondary,
+                    color: skillFilter === "project" ? theme2.colors.primary : theme2.colors.text,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    fontWeight: skillFilter === "project" ? 600 : 400,
+                    transition: "all 0.2s ease"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Folder, { size: 14 }),
+                    "Project"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => setSkillFilter("global"),
+                  style: {
+                    padding: "8px 16px",
+                    fontSize: theme2.fontSizes[1],
+                    fontFamily: theme2.fonts.body,
+                    border: `1px solid ${skillFilter === "global" ? theme2.colors.primary : theme2.colors.border}`,
+                    borderRadius: theme2.radii[1],
+                    background: skillFilter === "global" ? `${theme2.colors.primary}15` : theme2.colors.backgroundSecondary,
+                    color: skillFilter === "global" ? theme2.colors.primary : theme2.colors.text,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    fontWeight: skillFilter === "global" ? 600 : 400,
+                    transition: "all 0.2s ease"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Globe, { size: 14 }),
+                    "Global"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         error && /* @__PURE__ */ jsxs(
           "div",
           {
@@ -47723,7 +47996,7 @@ const panels = [
       version: "0.1.0",
       author: "Principal ADE",
       description: "Display and manage Agent Skills from SKILL.md files",
-      slices: ["fileTree"]
+      slices: ["fileTree", "globalSkills"]
       // Data slices this panel depends on
     },
     component: SkillsListPanel,
@@ -47748,7 +48021,7 @@ const panels = [
       version: "0.1.0",
       author: "Principal ADE",
       description: "Display detailed information about a selected Agent Skill",
-      slices: ["fileTree"]
+      slices: ["fileTree", "globalSkills"]
       // Data slices this panel depends on
     },
     component: SkillDetailPanel,