@industry-theme/agent-panels 0.2.23 → 0.2.25

package/dist/panels.bundle.js

@@ -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"
@@ -3762,7 +3801,8 @@ const SkillsListPanel = ({
                   {
                     skill,
                     onClick: handleSkillClick,
-                    isSelected: selectedSkillId === skill.id
+                    isSelected: selectedSkillId === skill.id,
+                    filterContext: skillFilter
                   },
                   skill.id
                 ))
@@ -3855,7 +3895,8 @@ const useSkillsBrowseData = ({
 };
 const SkillsBrowsePanel = ({
   context,
-  events
+  events,
+  supportsRefresh = false
 }) => {
   const { theme: theme2 } = useTheme();
   const panelRef = useRef(null);
@@ -3909,7 +3950,7 @@ const SkillsBrowsePanel = ({
       });
     }
   };
-  const handleRefresh = async () => {
+  const handleRefresh = () => {
     setIsRefreshing(true);
     if (events) {
       events.emit({
@@ -3920,11 +3961,9 @@ const SkillsBrowsePanel = ({
         payload: {}
       });
     }
-    try {
-      await refreshSkills();
-    } finally {
+    setTimeout(() => {
       setIsRefreshing(false);
-    }
+    }, 800);
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -4071,7 +4110,7 @@ const SkillsBrowsePanel = ({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(
+                supportsRefresh && /* @__PURE__ */ jsx(
                   "button",
                   {
                     onClick: handleRefresh,
@@ -4081,7 +4120,7 @@ const SkillsBrowsePanel = ({
                       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",
@@ -51444,6 +51483,686 @@ const AgentDetailPanel = ({
   }
   return null;
 };
+const AgenticResourcesPanel = ({
+  context,
+  events
+}) => {
+  const { theme: theme2 } = useTheme();
+  const panelRef = useRef(null);
+  const [mode, setMode] = useState("agents");
+  const [selectedItemId, setSelectedItemId] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [agentFilter, setAgentFilter] = useState("documentation");
+  const [skillFilter, setSkillFilter] = useState("project");
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const {
+    agents,
+    isLoading: agentsLoading,
+    error: agentsError,
+    refreshAgents
+  } = useAgentsData({ context });
+  const {
+    subagents,
+    isLoading: subagentsLoading,
+    error: subagentsError,
+    refreshSubagents
+  } = useSubagentsData({ context });
+  const {
+    skills,
+    isLoading: skillsLoading,
+    error: skillsError,
+    refreshSkills
+  } = useSkillsData({ context });
+  const isLoading = mode === "agents" ? agentsLoading || subagentsLoading : skillsLoading;
+  const error = mode === "agents" ? agentsError || subagentsError : skillsError;
+  gt("agentic-resources", events, () => {
+    var _a;
+    return (_a = panelRef.current) == null ? void 0 : _a.focus();
+  });
+  useEffect(() => {
+    if (mode !== "skills") return;
+    const unsubscribeInstalled = events.on("skill:installed", () => {
+      console.log("[AgenticResourcesPanel] Skill installed, refreshing...");
+      refreshSkills();
+    });
+    const unsubscribeUninstalled = events.on("skill:uninstalled", () => {
+      console.log("[AgenticResourcesPanel] Skill uninstalled, refreshing...");
+      refreshSkills();
+    });
+    return () => {
+      unsubscribeInstalled();
+      unsubscribeUninstalled();
+    };
+  }, [events, mode, refreshSkills]);
+  const allItems = useMemo(() => {
+    const items = [];
+    agents.forEach((agent) => {
+      items.push({ type: "agent", data: agent });
+    });
+    subagents.forEach((subagent) => {
+      items.push({ type: "subagent", data: subagent });
+    });
+    return items;
+  }, [agents, subagents]);
+  const filteredItems = useMemo(() => {
+    let filtered = allItems;
+    if (agentFilter === "documentation") {
+      filtered = filtered.filter((item) => item.type === "agent");
+    } else {
+      filtered = filtered.filter((item) => item.type === "subagent");
+    }
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase().trim();
+      filtered = filtered.filter((item) => {
+        if (item.type === "agent") {
+          const agent = item.data;
+          if (agent.name.toLowerCase().includes(query)) return true;
+          if (agent.path.toLowerCase().includes(query)) return true;
+          if (agent.content.toLowerCase().includes(query)) return true;
+          return false;
+        } else {
+          const subagent = item.data;
+          if (subagent.name.toLowerCase().includes(query)) return true;
+          if (subagent.path.toLowerCase().includes(query)) return true;
+          if (subagent.frontmatter.description.toLowerCase().includes(query)) return true;
+          if (subagent.prompt.toLowerCase().includes(query)) return true;
+          return false;
+        }
+      });
+    }
+    return filtered;
+  }, [allItems, searchQuery, agentFilter]);
+  const hasRepository = useMemo(() => {
+    const fileTreeSlice = context.getSlice("fileTree");
+    return !!(fileTreeSlice == null ? void 0 : fileTreeSlice.data);
+  }, [context]);
+  const filteredSkills = useMemo(() => {
+    let filtered = skills;
+    if (skillFilter === "project") {
+      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) => {
+        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, skillFilter]);
+  const handleItemClick = (item) => {
+    const itemId = item.type === "agent" ? item.data.id : item.data.id;
+    setSelectedItemId(itemId);
+    if (events) {
+      events.emit({
+        type: item.type === "agent" ? "agent:selected" : "subagent:selected",
+        source: "agentic-resources-panel",
+        timestamp: Date.now(),
+        payload: {
+          id: itemId,
+          type: item.type,
+          data: item.data
+        }
+      });
+    }
+  };
+  const handleSkillClick = (skill) => {
+    setSelectedItemId(skill.id);
+    if (events) {
+      events.emit({
+        type: "skill:selected",
+        source: "agentic-resources-panel",
+        timestamp: Date.now(),
+        payload: { skillId: skill.id, skill }
+      });
+    }
+  };
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      if (mode === "agents") {
+        await Promise.all([refreshAgents(), refreshSubagents()]);
+      } else {
+        if (events) {
+          events.emit({
+            type: "skills:refresh",
+            source: "agentic-resources-panel",
+            timestamp: Date.now(),
+            payload: {}
+          });
+        }
+        setTimeout(() => {
+        }, 800);
+      }
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+  const handleModeChange = (newMode) => {
+    setMode(newMode);
+    setSearchQuery("");
+    setSelectedItemId(null);
+  };
+  const agentsCount = agents.length;
+  const subagentsCount = subagents.length;
+  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", gap: "4px", background: theme2.colors.backgroundSecondary, padding: "4px", borderRadius: theme2.radii[2], border: `1px solid ${theme2.colors.border}` }, children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => handleModeChange("agents"),
+                    style: {
+                      padding: "6px 14px",
+                      fontSize: theme2.fontSizes[1],
+                      fontFamily: theme2.fonts.body,
+                      border: "none",
+                      borderRadius: theme2.radii[1],
+                      background: mode === "agents" ? theme2.colors.background : "transparent",
+                      color: mode === "agents" ? theme2.colors.text : theme2.colors.textSecondary,
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "6px",
+                      fontWeight: mode === "agents" ? 600 : 400,
+                      transition: "all 0.2s ease",
+                      boxShadow: mode === "agents" ? "0 1px 3px rgba(0,0,0,0.1)" : "none"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Bot, { size: 14 }),
+                      "Agents"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => handleModeChange("skills"),
+                    style: {
+                      padding: "6px 14px",
+                      fontSize: theme2.fontSizes[1],
+                      fontFamily: theme2.fonts.body,
+                      border: "none",
+                      borderRadius: theme2.radii[1],
+                      background: mode === "skills" ? theme2.colors.background : "transparent",
+                      color: mode === "skills" ? theme2.colors.text : theme2.colors.textSecondary,
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "6px",
+                      fontWeight: mode === "skills" ? 600 : 400,
+                      transition: "all 0.2s ease",
+                      boxShadow: mode === "skills" ? "0 1px 3px rgba(0,0,0,0.1)" : "none"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Wrench, { size: 14 }),
+                      "Skills"
+                    ]
+                  }
+                )
+              ] }),
+              !isLoading && (mode === "agents" && allItems.length > 0 || mode === "skills" && skills.length > 0) && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: theme2.fontSizes[1],
+                    color: theme2.colors.textSecondary,
+                    background: theme2.colors.backgroundSecondary,
+                    padding: "4px 10px",
+                    borderRadius: theme2.radii[1]
+                  },
+                  children: mode === "agents" ? `${filteredItems.length} ${filteredItems.length === 1 ? "item" : "items"}` : `${filteredSkills.length} ${filteredSkills.length === 1 ? "skill" : "skills"}`
+                }
+              ),
+              (mode === "agents" && allItems.length >= 5 || mode === "skills" && skills.length >= 5) && /* @__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: mode === "agents" ? "Search agents..." : "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: mode === "agents" ? "Refresh agents" : "Refresh skills",
+                    children: /* @__PURE__ */ jsx(
+                      RefreshCw,
+                      {
+                        size: 16,
+                        color: theme2.colors.textSecondary,
+                        style: {
+                          animation: isRefreshing ? "spin 1s linear infinite" : "none"
+                        }
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        mode === "agents" ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              display: "flex",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => setAgentFilter("documentation"),
+                  style: {
+                    flex: 1,
+                    padding: "8px 16px",
+                    fontSize: theme2.fontSizes[1],
+                    fontFamily: theme2.fonts.body,
+                    border: `1px solid ${agentFilter === "documentation" ? theme2.colors.primary : theme2.colors.border}`,
+                    borderRadius: theme2.radii[1],
+                    background: agentFilter === "documentation" ? `${theme2.colors.primary}15` : theme2.colors.backgroundSecondary,
+                    color: agentFilter === "documentation" ? theme2.colors.primary : theme2.colors.text,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "6px",
+                    fontWeight: agentFilter === "documentation" ? 600 : 400,
+                    transition: "all 0.2s ease"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(BookOpen, { size: 14 }),
+                    "Main Agent (",
+                    agentsCount,
+                    ")"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => setAgentFilter("subagents"),
+                  style: {
+                    flex: 1,
+                    padding: "8px 16px",
+                    fontSize: theme2.fontSizes[1],
+                    fontFamily: theme2.fonts.body,
+                    border: `1px solid ${agentFilter === "subagents" ? theme2.colors.primary : theme2.colors.border}`,
+                    borderRadius: theme2.radii[1],
+                    background: agentFilter === "subagents" ? `${theme2.colors.primary}15` : theme2.colors.backgroundSecondary,
+                    color: agentFilter === "subagents" ? theme2.colors.primary : theme2.colors.text,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "6px",
+                    fontWeight: agentFilter === "subagents" ? 600 : 400,
+                    transition: "all 0.2s ease"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Bot, { size: 14 }),
+                    "Subagents (",
+                    subagentsCount,
+                    ")"
+                  ]
+                }
+              )
+            ]
+          }
+        ) : hasRepository && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              display: "flex",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setSkillFilter("project"),
+                  style: {
+                    flex: 1,
+                    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",
+                    justifyContent: "center",
+                    gap: "6px",
+                    fontWeight: skillFilter === "project" ? 600 : 400,
+                    transition: "all 0.2s ease"
+                  },
+                  children: "Project"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setSkillFilter("global"),
+                  style: {
+                    flex: 1,
+                    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",
+                    justifyContent: "center",
+                    gap: "6px",
+                    fontWeight: skillFilter === "global" ? 600 : 400,
+                    transition: "all 0.2s ease"
+                  },
+                  children: "Global"
+                }
+              )
+            ]
+          }
+        ),
+        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: mode === "agents" ? (
+              // Agents view
+              isLoading ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    height: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    color: theme2.colors.textSecondary,
+                    fontSize: theme2.fontSizes[2]
+                  },
+                  children: "Loading agents..."
+                }
+              ) : filteredItems.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 agents match your search" : "No agents found" }),
+                      /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0 0", fontSize: theme2.fontSizes[1] }, children: searchQuery ? "Try a different search term" : "Add AGENTS.md or create subagents in .claude/agents/ to get started" })
+                    ] })
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+                    gap: "16px",
+                    padding: "4px"
+                  },
+                  children: filteredItems.map((item) => {
+                    if (item.type === "agent") {
+                      return /* @__PURE__ */ jsx(
+                        AgentCard,
+                        {
+                          agent: item.data,
+                          onClick: () => handleItemClick(item),
+                          isSelected: selectedItemId === item.data.id
+                        },
+                        item.data.id
+                      );
+                    } else {
+                      return /* @__PURE__ */ jsx(
+                        SubagentCard,
+                        {
+                          subagent: item.data,
+                          onClick: () => handleItemClick(item),
+                          isSelected: selectedItemId === item.data.id
+                        },
+                        item.data.id
+                      );
+                    }
+                  })
+                }
+              )
+            ) : (
+              // Skills view
+              isLoading ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    height: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    color: theme2.colors.textSecondary,
+                    fontSize: theme2.fontSizes[2]
+                  },
+                  children: "Loading 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 skills match your search" : "No skills found" }),
+                      /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0 0", fontSize: theme2.fontSizes[1] }, children: searchQuery ? "Try a different search term" : "Add SKILL.md files to your repository to get started" })
+                    ] })
+                  ]
+                }
+              ) : /* @__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: selectedItemId === skill.id,
+                      filterContext: skillFilter
+                    },
+                    skill.id
+                  ))
+                }
+              )
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+          @keyframes spin {
+            to { transform: rotate(360deg); }
+          }
+        ` })
+      ]
+    }
+  );
+};
 const panels = [
   {
     metadata: {
@@ -51569,6 +52288,31 @@ const panels = [
     onUnmount: async (_context) => {
       console.log("Agent Detail Panel unmounting");
     }
+  },
+  {
+    metadata: {
+      id: "industry-theme.agentic-resources",
+      name: "Agentic Resources",
+      icon: "🔧",
+      version: "0.1.0",
+      author: "Principal ADE",
+      description: "Unified panel for both Agents and Skills with mode toggle",
+      slices: ["fileTree", "globalAgents", "globalSubagents", "globalSkills"]
+      // Data slices this panel depends on
+    },
+    component: AgenticResourcesPanel,
+    // Optional: Called when this specific panel is mounted
+    onMount: async (context) => {
+      var _a;
+      console.log(
+        "Agentic Resources Panel mounted",
+        (_a = context.currentScope.repository) == null ? void 0 : _a.path
+      );
+    },
+    // Optional: Called when this specific panel is unmounted
+    onUnmount: async (_context) => {
+      console.log("Agentic Resources Panel unmounting");
+    }
   }
 ];
 const onPackageLoad = async () => {
@@ -51578,6 +52322,7 @@ const onPackageUnload = async () => {
   console.log("Panel package unloading - Agent Panels Extension");
 };
 export {
+  AgenticResourcesPanel,
   SkillsBrowsePanel,
   onPackageLoad,
   onPackageUnload,