@industry-theme/agent-panels 0.2.22 → 0.2.24

package/dist/panels.bundle.js

@@ -2618,7 +2618,6 @@ const __iconNode = [
   ]
 ];
 const Zap = createLucideIcon("zap", __iconNode);
-const EMPTY_SKILLS_ARRAY = [];
 const determineSkillSource = (path2) => {
   if (path2.includes(".agent/skills/")) {
     return { source: "project-universal", priority: 1 };
@@ -2758,15 +2757,15 @@ const parseSkillContent = async (content2, path2, fileTree, fileSystemAdapter, i
   }
   const structure = analyzeSkillStructure(fileTree, path2);
   const { source: source2, priority } = determineSkillSource(path2);
-  let metadata;
+  let metadata = void 0;
   if (!isBrowserMode && 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);
+      console.log("[skillsUtils] Loaded metadata for skill:", skillDirName, metadata);
     } catch (error) {
-      console.debug("[useSkillsData] No metadata file for skill:", skillDirName);
+      console.debug("[skillsUtils] No metadata file for skill:", skillDirName);
     }
   }
   const frontmatterValidation = validateFrontmatter(content2);
@@ -2785,6 +2784,7 @@ const parseSkillContent = async (content2, path2, fileTree, fileSystemAdapter, i
     frontmatterValidation
   };
 };
+const EMPTY_SKILLS_ARRAY$1 = [];
 const getDeduplicationKey = (skill) => {
   var _a, _b, _c;
   if (((_a = skill.metadata) == null ? void 0 : _a.owner) && ((_b = skill.metadata) == null ? void 0 : _b.repo) && ((_c = skill.metadata) == null ? void 0 : _c.skillPath)) {
@@ -2859,14 +2859,14 @@ const useSkillsData = ({
   context
 }) => {
   var _a, _b, _c;
-  const [skills, setSkills] = useState(EMPTY_SKILLS_ARRAY);
+  const [skills, setSkills] = useState(EMPTY_SKILLS_ARRAY$1);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const fileTreeSlice = context.getSlice("fileTree");
   const fileTree = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
   const fileTreeSha = fileTree == null ? void 0 : fileTree.sha;
   const globalSkillsSlice = context.getSlice("globalSkills");
-  const globalSkills = ((_a = globalSkillsSlice == null ? void 0 : globalSkillsSlice.data) == null ? void 0 : _a.skills) ?? EMPTY_SKILLS_ARRAY;
+  const globalSkills = ((_a = globalSkillsSlice == null ? void 0 : globalSkillsSlice.data) == null ? void 0 : _a.skills) ?? EMPTY_SKILLS_ARRAY$1;
   const globalSkillsCount = globalSkills.length;
   const repoPath = (_b = context.currentScope.repository) == null ? void 0 : _b.path;
   const fileSystem = (_c = context.adapters) == null ? void 0 : _c.fileSystem;
@@ -3002,16 +3002,35 @@ const abbreviateSourceName = (source2) => {
 const SkillCard = ({
   skill,
   onClick,
-  isSelected = false
+  isSelected = false,
+  filterContext
 }) => {
   var _a, _b, _c, _d, _e2, _f, _g, _h;
   const { theme: theme2 } = useTheme();
   const sourceConfig = getSourceConfig$1(skill.source);
   const [pathCopied, setPathCopied] = React2__default.useState(false);
+  const getPathToCopy = () => {
+    if (!filterContext || !skill.installedLocations || skill.installedLocations.length <= 1) {
+      return skill.path;
+    }
+    if (filterContext === "project") {
+      const projectInstallation = skill.installedLocations.find(
+        (loc) => loc.source === "project-universal" || loc.source === "project-claude" || loc.source === "project-other"
+      );
+      return (projectInstallation == null ? void 0 : projectInstallation.path) || skill.path;
+    } else if (filterContext === "global") {
+      const globalInstallation = skill.installedLocations.find(
+        (loc) => loc.source === "global-universal" || loc.source === "global-claude"
+      );
+      return (globalInstallation == null ? void 0 : globalInstallation.path) || skill.path;
+    }
+    return skill.path;
+  };
   const handleCopyPath = async (e) => {
     e.stopPropagation();
     try {
-      await navigator.clipboard.writeText(skill.path);
+      const pathToCopy = getPathToCopy();
+      await navigator.clipboard.writeText(pathToCopy);
       setPathCopied(true);
       setTimeout(() => setPathCopied(false), 2e3);
     } catch (err) {
@@ -3068,7 +3087,7 @@ const SkillCard = ({
               }
             ),
             /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px", alignItems: "center", flexWrap: "wrap" }, children: [
-              /* @__PURE__ */ jsxs(
+              !filterContext && /* @__PURE__ */ jsxs(
                 "div",
                 {
                   style: {
@@ -3092,8 +3111,12 @@ const SkillCard = ({
                 }
               ),
               ((_a = skill.metadata) == null ? void 0 : _a.owner) && ((_b = skill.metadata) == null ? void 0 : _b.repo) && /* @__PURE__ */ jsxs(
-                "div",
+                "a",
                 {
+                  href: skill.metadata.installedFrom || `https://github.com/${skill.metadata.owner}/${skill.metadata.repo}`,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  onClick: (e) => e.stopPropagation(),
                   style: {
                     display: "inline-flex",
                     alignItems: "center",
@@ -3106,13 +3129,25 @@ const SkillCard = ({
                     color: theme2.colors.textSecondary,
                     fontWeight: 500,
                     fontFamily: theme2.fonts.monospace,
-                    width: "fit-content"
+                    width: "fit-content",
+                    textDecoration: "none",
+                    cursor: "pointer",
+                    transition: "all 0.2s ease"
                   },
-                  title: `From: ${skill.metadata.installedFrom}
+                  title: `Click to open: ${skill.metadata.installedFrom || `https://github.com/${skill.metadata.owner}/${skill.metadata.repo}`}
 Installed: ${skill.metadata.installedAt ? new Date(skill.metadata.installedAt).toLocaleString() : "Unknown"}`,
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = `${theme2.colors.textSecondary}25`;
+                    e.currentTarget.style.borderColor = `${theme2.colors.textSecondary}50`;
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = `${theme2.colors.textSecondary}15`;
+                    e.currentTarget.style.borderColor = `${theme2.colors.textSecondary}30`;
+                  },
                   children: [
                     /* @__PURE__ */ jsx(Github, { size: 10 }),
                     /* @__PURE__ */ jsxs("span", { children: [
+                      "From ",
                       skill.metadata.owner,
                       "/",
                       skill.metadata.repo
@@ -3145,8 +3180,21 @@ Installed: ${skill.metadata.installedAt ? new Date(skill.metadata.installedAt).t
                 }
               ),
               skill.installedLocations && skill.installedLocations.length > 1 && (() => {
-                const otherLocations = skill.installedLocations.filter((loc) => loc.path !== skill.path).map((loc) => abbreviateSourceName(loc.source));
-                const uniqueLocations = Array.from(new Set(otherLocations));
+                let otherLocations = [];
+                if (filterContext === "project") {
+                  otherLocations = skill.installedLocations.filter(
+                    (loc) => loc.source === "global-universal" || loc.source === "global-claude"
+                  );
+                } else if (filterContext === "global") {
+                  otherLocations = skill.installedLocations.filter(
+                    (loc) => loc.source === "project-universal" || loc.source === "project-claude" || loc.source === "project-other"
+                  );
+                } else {
+                  otherLocations = skill.installedLocations.filter((loc) => loc.path !== skill.path);
+                }
+                if (otherLocations.length === 0) return null;
+                const locationNames = otherLocations.map((loc) => abbreviateSourceName(loc.source));
+                const uniqueLocations = Array.from(new Set(locationNames));
                 const locationText = uniqueLocations.join(", ");
                 return /* @__PURE__ */ jsxs(
                   "div",
@@ -3165,7 +3213,7 @@ Installed: ${skill.metadata.installedAt ? new Date(skill.metadata.installedAt).t
                       width: "fit-content"
                     },
                     title: `Also installed in:
-${skill.installedLocations.filter((loc) => loc.path !== skill.path).map((loc) => `${abbreviateSourceName(loc.source)}: ${loc.path}`).join("\n")}`,
+${otherLocations.map((loc) => `${abbreviateSourceName(loc.source)}: ${loc.path}`).join("\n")}`,
                     children: [
                       /* @__PURE__ */ jsx(Package, { size: 10 }),
                       /* @__PURE__ */ jsxs("span", { children: [
@@ -3323,7 +3371,7 @@ ${skill.installedLocations.filter((loc) => loc.path !== skill.path).map((loc) =>
               transition: "all 0.2s ease",
               border: `1px solid ${pathCopied ? theme2.colors.success : "transparent"}`
             },
-            title: pathCopied ? "Copied!" : "Click to copy path",
+            title: pathCopied ? "Copied!" : `Click to copy: ${getPathToCopy()}`,
             onMouseEnter: (e) => {
               if (!pathCopied) {
                 e.currentTarget.style.background = theme2.colors.backgroundTertiary || theme2.colors.border;
@@ -3334,7 +3382,7 @@ ${skill.installedLocations.filter((loc) => loc.path !== skill.path).map((loc) =>
                 e.currentTarget.style.background = theme2.colors.backgroundSecondary;
               }
             },
-            children: pathCopied ? "Copied!" : skill.path
+            children: pathCopied ? "Copied!" : getPathToCopy()
           }
         )
       ]
@@ -3344,13 +3392,14 @@ ${skill.installedLocations.filter((loc) => loc.path !== skill.path).map((loc) =>
 const SkillsListPanel = ({
   context,
   events,
-  browseMode = false
+  browseMode = false,
+  supportsRefresh = false
 }) => {
   const { theme: theme2 } = useTheme();
   const panelRef = useRef(null);
   const [selectedSkillId, setSelectedSkillId] = useState(null);
   const [searchQuery, setSearchQuery] = useState("");
-  const [skillFilter, setSkillFilter] = useState("all");
+  const [skillFilter, setSkillFilter] = useState("project");
   const [isRefreshing, setIsRefreshing] = useState(false);
   const { skills, isLoading, error, refreshSkills } = useSkillsData({ context });
   gt("skills-list", events, () => {
@@ -3378,13 +3427,23 @@ const SkillsListPanel = ({
   const filteredSkills = useMemo(() => {
     let filtered = skills;
     if (skillFilter === "project") {
-      filtered = filtered.filter(
-        (skill) => skill.source === "project-universal" || skill.source === "project-claude" || skill.source === "project-other"
-      );
+      filtered = filtered.filter((skill) => {
+        if (skill.installedLocations && skill.installedLocations.length > 0) {
+          return skill.installedLocations.some(
+            (loc) => loc.source === "project-universal" || loc.source === "project-claude" || loc.source === "project-other"
+          );
+        }
+        return 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"
-      );
+      filtered = filtered.filter((skill) => {
+        if (skill.installedLocations && skill.installedLocations.length > 0) {
+          return skill.installedLocations.some(
+            (loc) => loc.source === "global-universal" || loc.source === "global-claude"
+          );
+        }
+        return skill.source === "global-universal" || skill.source === "global-claude";
+      });
     }
     if (searchQuery.trim()) {
       const query = searchQuery.toLowerCase().trim();
@@ -3412,7 +3471,7 @@ const SkillsListPanel = ({
       });
     }
   };
-  const handleRefresh = async () => {
+  const handleRefresh = () => {
     setIsRefreshing(true);
     if (events) {
       events.emit({
@@ -3423,11 +3482,9 @@ const SkillsListPanel = ({
         payload: {}
       });
     }
-    try {
-      await refreshSkills();
-    } finally {
+    setTimeout(() => {
       setIsRefreshing(false);
-    }
+    }, 800);
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -3574,7 +3631,7 @@ const SkillsListPanel = ({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(
+                supportsRefresh && /* @__PURE__ */ jsx(
                   "button",
                   {
                     onClick: handleRefresh,
@@ -3584,7 +3641,7 @@ const SkillsListPanel = ({
                       border: `1px solid ${theme2.colors.border}`,
                       borderRadius: theme2.radii[1],
                       padding: "8px",
-                      cursor: isRefreshing ? "wait" : "pointer",
+                      cursor: isRefreshing || isLoading ? "default" : "pointer",
                       display: "flex",
                       alignItems: "center",
                       justifyContent: "center",
@@ -3616,33 +3673,12 @@ const SkillsListPanel = ({
               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__ */ jsx(
                 "button",
                 {
                   onClick: () => setSkillFilter("project"),
                   style: {
+                    flex: 1,
                     padding: "8px 16px",
                     fontSize: theme2.fontSizes[1],
                     fontFamily: theme2.fonts.body,
@@ -3653,6 +3689,7 @@ const SkillsListPanel = ({
                     cursor: "pointer",
                     display: "flex",
                     alignItems: "center",
+                    justifyContent: "center",
                     gap: "6px",
                     fontWeight: skillFilter === "project" ? 600 : 400,
                     transition: "all 0.2s ease"
@@ -3665,6 +3702,7 @@ const SkillsListPanel = ({
                 {
                   onClick: () => setSkillFilter("global"),
                   style: {
+                    flex: 1,
                     padding: "8px 16px",
                     fontSize: theme2.fontSizes[1],
                     fontFamily: theme2.fonts.body,
@@ -3675,6 +3713,7 @@ const SkillsListPanel = ({
                     cursor: "pointer",
                     display: "flex",
                     alignItems: "center",
+                    justifyContent: "center",
                     gap: "6px",
                     fontWeight: skillFilter === "global" ? 600 : 400,
                     transition: "all 0.2s ease"
@@ -3748,6 +3787,425 @@ const SkillsListPanel = ({
                   ] })
                 ]
               }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "grid",
+                  gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
+                  gap: "16px",
+                  padding: "4px"
+                },
+                children: filteredSkills.map((skill) => /* @__PURE__ */ jsx(
+                  SkillCard,
+                  {
+                    skill,
+                    onClick: handleSkillClick,
+                    isSelected: selectedSkillId === skill.id,
+                    filterContext: skillFilter
+                  },
+                  skill.id
+                ))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+          @keyframes spin {
+            to { transform: rotate(360deg); }
+          }
+        ` })
+      ]
+    }
+  );
+};
+const EMPTY_SKILLS_ARRAY = [];
+const useSkillsBrowseData = ({
+  context
+}) => {
+  var _a, _b;
+  const [skills, setSkills] = useState(EMPTY_SKILLS_ARRAY);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fileTreeSlice = context.getSlice("fileTree");
+  const fileTree = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
+  const fileTreeSha = fileTree == null ? void 0 : fileTree.sha;
+  const repoPath = (_a = context.currentScope.repository) == null ? void 0 : _a.path;
+  const fileSystem = (_b = context.adapters) == null ? void 0 : _b.fileSystem;
+  const lastLoadedSha = useRef(void 0);
+  const loadSkills = useCallback(async () => {
+    if (fileTreeSha === lastLoadedSha.current) {
+      console.log("[useSkillsBrowseData] Skipping reload - data unchanged (SHA:", fileTreeSha, ")");
+      return;
+    }
+    console.log("[useSkillsBrowseData] Loading skills from GitHub repo - SHA:", fileTreeSha);
+    setIsLoading(true);
+    setError(null);
+    try {
+      let repoSkills = [];
+      if (fileTree && (fileSystem == null ? void 0 : fileSystem.readFile) && repoPath) {
+        const isGithubRepo = !repoPath.startsWith("/");
+        if (!isGithubRepo) {
+          console.warn("[useSkillsBrowseData] Not a GitHub repo, skipping skill load");
+          setSkills(EMPTY_SKILLS_ARRAY);
+          lastLoadedSha.current = fileTreeSha;
+          setIsLoading(false);
+          return;
+        }
+        console.log("[useSkillsBrowseData] GitHub repo detected:", repoPath);
+        const skillPaths = findSkillFiles(fileTree, true);
+        console.log("[useSkillsBrowseData] Found skill paths:", skillPaths);
+        const skillPromises = skillPaths.map(async (skillPath) => {
+          try {
+            const content2 = await fileSystem.readFile(skillPath);
+            return parseSkillContent(content2, skillPath, fileTree, fileSystem, true);
+          } catch (err) {
+            console.error(`[useSkillsBrowseData] Failed to read skill at ${skillPath}:`, err);
+            return null;
+          }
+        });
+        repoSkills = (await Promise.all(skillPromises)).filter(
+          (skill) => skill !== null
+        );
+      }
+      console.log("[useSkillsBrowseData] Total skills loaded:", repoSkills.length);
+      setSkills(repoSkills);
+      lastLoadedSha.current = fileTreeSha;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to load skills";
+      setError(errorMessage);
+      console.error("[useSkillsBrowseData] Error loading skills:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [fileTree, fileTreeSha, repoPath, fileSystem]);
+  const refreshSkills = useCallback(async () => {
+    lastLoadedSha.current = void 0;
+    await loadSkills();
+  }, [loadSkills]);
+  useEffect(() => {
+    loadSkills();
+  }, [loadSkills]);
+  return {
+    skills,
+    isLoading,
+    error,
+    refreshSkills
+  };
+};
+const SkillsBrowsePanel = ({
+  context,
+  events,
+  supportsRefresh = false
+}) => {
+  const { theme: theme2 } = useTheme();
+  const panelRef = useRef(null);
+  const [selectedSkillId, setSelectedSkillId] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const { skills, isLoading, error, refreshSkills } = useSkillsBrowseData({ context });
+  gt("skills-browse", events, () => {
+    var _a;
+    return (_a = panelRef.current) == null ? void 0 : _a.focus();
+  });
+  useEffect(() => {
+    const unsubscribeInstalled = events.on("skill:installed", () => {
+      console.log("[SkillsBrowsePanel] Skill installed, refreshing...");
+      refreshSkills();
+    });
+    const unsubscribeUninstalled = events.on("skill:uninstalled", () => {
+      console.log("[SkillsBrowsePanel] Skill uninstalled, refreshing...");
+      refreshSkills();
+    });
+    return () => {
+      unsubscribeInstalled();
+      unsubscribeUninstalled();
+    };
+  }, [events, refreshSkills]);
+  const filteredSkills = useMemo(() => {
+    let filtered = skills;
+    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]);
+  const handleSkillClick = (skill) => {
+    setSelectedSkillId(skill.id);
+    if (events) {
+      events.emit({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        type: "skill:selected",
+        source: "skills-browse-panel",
+        timestamp: Date.now(),
+        payload: { skillId: skill.id, skill }
+      });
+    }
+  };
+  const handleRefresh = () => {
+    setIsRefreshing(true);
+    if (events) {
+      events.emit({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        type: "skills:refresh",
+        source: "skills-browse-panel",
+        timestamp: Date.now(),
+        payload: {}
+      });
+    }
+    setTimeout(() => {
+      setIsRefreshing(false);
+    }, 800);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: panelRef,
+      tabIndex: -1,
+      style: {
+        padding: "clamp(12px, 3vw, 20px)",
+        fontFamily: theme2.fonts.body,
+        height: "100%",
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px",
+        overflow: "hidden",
+        backgroundColor: theme2.colors.background,
+        color: theme2.colors.text,
+        outline: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: "12px",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: theme2.fontSizes[4],
+                      color: theme2.colors.text
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        href: "https://agentskills.io/",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        style: {
+                          color: "inherit",
+                          textDecoration: "none"
+                        },
+                        onMouseEnter: (e) => e.currentTarget.style.textDecoration = "underline",
+                        onMouseLeave: (e) => e.currentTarget.style.textDecoration = "none",
+                        children: "Browse Skills"
+                      }
+                    )
+                  }
+                ),
+                !isLoading && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: theme2.fontSizes[1],
+                      color: theme2.colors.textSecondary,
+                      background: theme2.colors.backgroundSecondary,
+                      padding: "4px 10px",
+                      borderRadius: theme2.radii[1]
+                    },
+                    children: [
+                      filteredSkills.length,
+                      " ",
+                      filteredSkills.length === 1 ? "skill" : "skills"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px", flex: "1 1 200px", maxWidth: "400px" }, children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      position: "relative",
+                      flex: 1,
+                      minWidth: "150px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Search,
+                        {
+                          size: 16,
+                          color: theme2.colors.textSecondary,
+                          style: {
+                            position: "absolute",
+                            left: "10px",
+                            top: "50%",
+                            transform: "translateY(-50%)",
+                            pointerEvents: "none"
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "text",
+                          placeholder: "Search skills...",
+                          value: searchQuery,
+                          onChange: (e) => setSearchQuery(e.target.value),
+                          style: {
+                            width: "100%",
+                            padding: "8px 32px 8px 32px",
+                            fontSize: theme2.fontSizes[1],
+                            fontFamily: theme2.fonts.body,
+                            border: `1px solid ${theme2.colors.border}`,
+                            borderRadius: theme2.radii[2],
+                            background: theme2.colors.backgroundSecondary,
+                            color: theme2.colors.text,
+                            outline: "none",
+                            boxSizing: "border-box"
+                          }
+                        }
+                      ),
+                      searchQuery && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => setSearchQuery(""),
+                          style: {
+                            position: "absolute",
+                            right: "6px",
+                            top: "50%",
+                            transform: "translateY(-50%)",
+                            background: "transparent",
+                            border: "none",
+                            padding: "4px",
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            color: theme2.colors.textSecondary
+                          },
+                          "aria-label": "Clear search",
+                          children: /* @__PURE__ */ jsx(X, { size: 14 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                supportsRefresh && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleRefresh,
+                    disabled: isRefreshing || isLoading,
+                    style: {
+                      background: theme2.colors.backgroundSecondary,
+                      border: `1px solid ${theme2.colors.border}`,
+                      borderRadius: theme2.radii[1],
+                      padding: "8px",
+                      cursor: isRefreshing || isLoading ? "default" : "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      transition: "all 0.2s ease"
+                    },
+                    title: "Refresh skills",
+                    children: /* @__PURE__ */ jsx(
+                      RefreshCw,
+                      {
+                        size: 16,
+                        color: theme2.colors.textSecondary,
+                        style: {
+                          animation: isRefreshing ? "spin 1s linear infinite" : "none"
+                        }
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              padding: "12px",
+              background: `${theme2.colors.error}20`,
+              border: `1px solid ${theme2.colors.error}`,
+              borderRadius: theme2.radii[2],
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              color: theme2.colors.error,
+              fontSize: theme2.fontSizes[1]
+            },
+            children: [
+              /* @__PURE__ */ jsx(CircleAlert, { size: 16 }),
+              /* @__PURE__ */ jsx("span", { children: error })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              minHeight: 0
+            },
+            children: isLoading ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: theme2.colors.textSecondary,
+                  fontSize: theme2.fontSizes[2]
+                },
+                children: "Loading skills from repository..."
+              }
+            ) : filteredSkills.length === 0 ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  height: "100%",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "16px",
+                  color: theme2.colors.textSecondary,
+                  padding: "24px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(FileCode, { size: 48, color: theme2.colors.border }),
+                  /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+                    /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: theme2.fontSizes[2] }, children: searchQuery ? "No skills match your search" : "No skills found in this repository" }),
+                    /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0 0", fontSize: theme2.fontSizes[1] }, children: searchQuery ? "Try a different search term" : "This repository does not contain any SKILL.md files" })
+                  ] })
+                ]
+              }
             ) : /* @__PURE__ */ jsx(
               "div",
               {
@@ -51051,6 +51509,31 @@ const panels = [
       console.log("Skills List Panel unmounting");
     }
   },
+  {
+    metadata: {
+      id: "industry-theme.skills-browse",
+      name: "Browse Skills",
+      icon: "🔍",
+      version: "0.1.0",
+      author: "Principal ADE",
+      description: "Browse Agent Skills from GitHub repositories",
+      slices: ["fileTree"]
+      // Only needs fileTree, not globalSkills
+    },
+    component: SkillsBrowsePanel,
+    // Optional: Called when this specific panel is mounted
+    onMount: async (context) => {
+      var _a;
+      console.log(
+        "Skills Browse Panel mounted",
+        (_a = context.currentScope.repository) == null ? void 0 : _a.path
+      );
+    },
+    // Optional: Called when this specific panel is unmounted
+    onUnmount: async (_context) => {
+      console.log("Skills Browse Panel unmounting");
+    }
+  },
   {
     metadata: {
       id: "industry-theme.skill-detail",
@@ -51134,6 +51617,7 @@ const onPackageUnload = async () => {
   console.log("Panel package unloading - Agent Panels Extension");
 };
 export {
+  SkillsBrowsePanel,
   onPackageLoad,
   onPackageUnload,
   panels