@industry-theme/agent-panels 0.2.21 → 0.2.23

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;
@@ -3779,6 +3779,425 @@ const SkillsListPanel = ({
     }
   );
 };
+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
+}) => {
+  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 = async () => {
+    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: {}
+      });
+    }
+    try {
+      await refreshSkills();
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+  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 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__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 ? "wait" : "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",
+              {
+                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
+                  },
+                  skill.id
+                ))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+          @keyframes spin {
+            to { transform: rotate(360deg); }
+          }
+        ` })
+      ]
+    }
+  );
+};
 var MarkdownSourceType$1;
 ((MarkdownSourceType2) => {
   MarkdownSourceType2["WORKSPACE_FILE"] = "workspace_file";
@@ -48598,7 +49017,8 @@ const SkillMetadataSection = ({
   theme: theme2,
   structure,
   skill,
-  actions
+  actions,
+  events
 }) => {
   var _a, _b, _c, _d, _e2;
   const [expandedSections, setExpandedSections] = React2__default.useState({
@@ -48798,7 +49218,7 @@ const SkillMetadataSection = ({
             }
           )
         ] }),
-        actions && (skill == null ? void 0 : skill.path) && /* @__PURE__ */ jsxs("div", { style: {
+        events && (skill == null ? void 0 : skill.path) && /* @__PURE__ */ jsxs("div", { style: {
           display: "flex",
           gap: theme2.space[2]
         }, children: [
@@ -48806,9 +49226,16 @@ const SkillMetadataSection = ({
             "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);
+                  events.emit({
+                    type: "file:open",
+                    source: "skill-detail",
+                    timestamp: Date.now(),
+                    payload: {
+                      filePath: skill.path,
+                      gitStatus: "untracked"
+                    }
+                  });
                 }
               },
               style: {
@@ -48846,7 +49273,16 @@ const SkillMetadataSection = ({
             "button",
             {
               onClick: () => {
-                console.log("Open in MDX editor:", skill.path);
+                if (skill == null ? void 0 : skill.path) {
+                  events.emit({
+                    type: "file:openInMdxEditor",
+                    source: "skill-detail",
+                    timestamp: Date.now(),
+                    payload: {
+                      filePath: skill.path
+                    }
+                  });
+                }
               },
               style: {
                 display: "flex",
@@ -48978,7 +49414,8 @@ const SkillMarkdown = ({
   containerWidth,
   structure,
   skill,
-  actions
+  actions,
+  events
 }) => {
   const [parsed, setParsed] = React2__default.useState(null);
   const [headers, setHeaders] = React2__default.useState([]);
@@ -49172,7 +49609,7 @@ const SkillMarkdown = ({
             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__ */ jsx("div", { style: { padding: theme2.space[3], paddingBottom: 0 }, children: /* @__PURE__ */ jsx(SkillMetadataSection, { metadata: parsed.metadata, theme: theme2, structure, skill, actions, events }) }),
         /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
           /* @__PURE__ */ jsx(
             SkillSidebar,
@@ -49356,7 +49793,8 @@ const SkillDetailPanel = ({
             assetFiles: skill.assetFiles
           },
           skill,
-          actions
+          actions,
+          events
         }
       ) }) }) : /* @__PURE__ */ jsx(
         "div",
@@ -51032,6 +51470,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",
@@ -51115,6 +51578,7 @@ const onPackageUnload = async () => {
   console.log("Panel package unloading - Agent Panels Extension");
 };
 export {
+  SkillsBrowsePanel,
   onPackageLoad,
   onPackageUnload,
   panels