@industry-theme/agent-panels 0.2.25 → 0.2.27

package/dist/index.d.ts

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

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AACtF,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAGzF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,SAAS,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qCAAqC,CAAC;AAGjE,YAAY,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAC;AAGnE,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,CAAC;AAEpD;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,eAAe,EAmKnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAGzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,qBAG3B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AACtF,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAGzF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,SAAS,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qCAAqC,CAAC;AAGjE,YAAY,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,KAAK,EAAE,CAAC;AAG3F,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,CAAC;AAEvE;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,eAAe,EA8LnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAGzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,qBAG3B,CAAC"}

package/dist/panels/GlobalSkillsPanel.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { PanelComponentProps } from '../types';
+export interface GlobalSkillsPanelProps extends PanelComponentProps {
+    /**
+     * When true, shows the refresh button and enables refresh functionality.
+     * The host must support handling 'skills:refresh' events.
+     */
+    supportsRefresh?: boolean;
+}
+/**
+ * GlobalSkillsPanel - A panel for displaying ONLY global Agent Skills
+ *
+ * This panel shows:
+ * - List/grid of global skills only (no project skills)
+ * - Search functionality to filter skills
+ * - Skill metadata (name, description, capabilities)
+ * - Click to select and emit events for detail views
+ *
+ * Use this panel when you want to show only global skills without a project/global filter toggle.
+ * This is ideal for views that are specifically about browsing and managing global skill installations.
+ */
+export declare const GlobalSkillsPanel: React.FC<GlobalSkillsPanelProps>;
+//# sourceMappingURL=GlobalSkillsPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalSkillsPanel.d.ts","sourceRoot":"","sources":["../../src/panels/GlobalSkillsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIpD,MAAM,WAAW,sBAAuB,SAAQ,mBAAmB;IACjE;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA0W9D,CAAC"}

package/dist/panels.bundle.js

@@ -4237,6 +4237,358 @@ const SkillsBrowsePanel = ({
     }
   );
 };
+const GlobalSkillsPanel = ({
+  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 } = useSkillsData({ context });
+  gt("global-skills", events, () => {
+    var _a;
+    return (_a = panelRef.current) == null ? void 0 : _a.focus();
+  });
+  useEffect(() => {
+    const unsubscribeInstalled = events.on("skill:installed", () => {
+      console.log("[GlobalSkillsPanel] Skill installed, refreshing...");
+      refreshSkills();
+    });
+    const unsubscribeUninstalled = events.on("skill:uninstalled", () => {
+      console.log("[GlobalSkillsPanel] Skill uninstalled, refreshing...");
+      refreshSkills();
+    });
+    return () => {
+      unsubscribeInstalled();
+      unsubscribeUninstalled();
+    };
+  }, [events, refreshSkills]);
+  const filteredSkills = useMemo(() => {
+    let filtered = skills.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();
+      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: "global-skills-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: "global-skills-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: "Global 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 global 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 global skills..."
+              }
+            ) : 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 global skills match your search" : "No global skills found" }),
+                    /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0 0", fontSize: theme2.fontSizes[1] }, children: searchQuery ? "Try a different search term" : "Install skills from repositories to see them here" })
+                  ] })
+                ]
+              }
+            ) : /* @__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: "global"
+                  },
+                  skill.id
+                ))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+          @keyframes spin {
+            to { transform: rotate(360deg); }
+          }
+        ` })
+      ]
+    }
+  );
+};
 var MarkdownSourceType$1;
 ((MarkdownSourceType2) => {
   MarkdownSourceType2["WORKSPACE_FILE"] = "workspace_file";
@@ -52214,6 +52566,31 @@ const panels = [
       console.log("Skills Browse Panel unmounting");
     }
   },
+  {
+    metadata: {
+      id: "industry-theme.global-skills",
+      name: "Global Skills",
+      icon: "🌐",
+      version: "0.1.0",
+      author: "Principal ADE",
+      description: "Display only global Agent Skills (no project skills)",
+      slices: ["fileTree", "globalSkills"]
+      // Depends on fileTree and globalSkills
+    },
+    component: GlobalSkillsPanel,
+    // Optional: Called when this specific panel is mounted
+    onMount: async (context) => {
+      var _a;
+      console.log(
+        "Global Skills Panel mounted",
+        (_a = context.currentScope.repository) == null ? void 0 : _a.path
+      );
+    },
+    // Optional: Called when this specific panel is unmounted
+    onUnmount: async (_context) => {
+      console.log("Global Skills Panel unmounting");
+    }
+  },
   {
     metadata: {
       id: "industry-theme.skill-detail",
@@ -52323,6 +52700,7 @@ const onPackageUnload = async () => {
 };
 export {
   AgenticResourcesPanel,
+  GlobalSkillsPanel,
   SkillsBrowsePanel,
   onPackageLoad,
   onPackageUnload,